/* YELLA Product Page — Options + Tabs + Features overrides */

/* Hide tabs entirely for now */
html body div.tabs__header,
html body .tabs__header.tabs_top {
  display: none !important;
}

/* Hide "All about product" tab */
html body ul.my-tabs li:has(a[href="#product"]),
html body ul.nav-tabs.my-tabs > li:first-child:not(.tabs__active_line) { display: none !important; }

/* Tabs container */
html body div.tabs__header,
html body .tabs__header.tabs_top {
  padding: 8px 16px !important;
  margin: 0 0 12px !important;
  background: #FFF !important;
  border-bottom: 1px solid #F0F1F3 !important;
}

/* Tab list — horizontal flex row */
html body ul.nav-tabs.my-tabs,
html body .tabs__header__scroll ul.my-tabs,
html body .tabs__header__scroll .nav-tabs {
  display: flex !important;
  flex-direction: row !important;
  gap: 6px !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  border: none !important;
  background: transparent !important;
}

/* Each tab item — reset */
html body ul.nav-tabs.my-tabs > li,
html body .tabs__header__scroll ul.my-tabs > li,
html body .tabs__header__scroll .nav-tabs > li {
  display: inline-block !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  position: static !important;
}

/* Tab link — pill style */
html body ul.nav-tabs.my-tabs > li > a,
html body ul.nav-tabs.my-tabs > li > button,
html body .tabs__header__scroll ul.my-tabs > li > a,
html body .tabs__header__scroll .nav-tabs > li > a,
html body .tabs__header__scroll .nav-tabs > li > button {
  display: inline-block !important;
  padding: 8px 16px !important;
  border-radius: 10px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #999 !important;
  background: #F4F5F6 !important;
  border: none !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: all 0.15s !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

/* Active tab — dark pill */
html body ul.nav-tabs.my-tabs > li.active > a,
html body ul.nav-tabs.my-tabs > li.active > button,
html body .tabs__header__scroll ul.my-tabs > li.active > a,
html body .tabs__header__scroll .nav-tabs > li.active > a,
html body .tabs__header__scroll .nav-tabs > li.active > button {
  background: #1A1A1A !important;
  color: #FFF !important;
}

/* Required badge */
.form-group.required .control-label::after {
  content: '\041E\0431\044F\0437\0430\0442\0435\043B\044C\043D\043E' !important;
  display: inline-block !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: #FFF !important;
  background: #E11D48 !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  margin-left: 6px !important;
  vertical-align: middle !important;
  line-height: 1.4 !important;
}

/* Radio cards container */
html body .options .form-group > div[id^="input-option"] {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
}

/* Radio card base */
html body .options .default-radio {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 14px !important;
  border: 2px solid #E6E8EB !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.15s !important;
  position: relative !important;
  background: #FFF !important;
  margin-bottom: 8px !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

/* Hide native radio */
html body .options .default-radio input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
}

/* Selected card */
html body .options .default-radio:has(input:checked) {
  border-color: #1A1A1A !important;
  background: #1A1A1A !important;
  border-style: solid !important;
  box-shadow: none !important;
  outline: none !important;
}
html body .options .default-radio:has(input:checked) label {
  color: #FFF !important;
}

/* Green checkmark */
html body .options .default-radio:has(input:checked)::after {
  content: '' !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  border-radius: 50% !important;
  background: #22C55E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E") no-repeat center !important;
  background-size: 14px !important;
  flex-shrink: 0 !important;
  position: absolute !important;
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* Label layout */
html body .options .default-radio label {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1A1A1A !important;
  cursor: pointer !important;
  flex: 1 !important;
  padding-right: 30px !important;
}
html body .options .default-radio label .option-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
}
html body .options .default-radio label .option-price {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: #999 !important;
  line-height: 1.3 !important;
}
html body .options .default-radio:has(input:checked) label .option-price {
  color: rgba(255,255,255,0.6) !important;
}

/* Price block full width */
html body .price-group {
  background: #F8F9FA !important;
  border-radius: 0 !important;
  padding: 12px 16px !important;
  margin: 0 0 10px !important;
  border-left: none !important;
  border-right: none !important;
}
html body .yella-social-proof {
  margin: 0 0 10px !important;
  border-radius: 0 !important;
  padding: 10px 16px !important;
}
html body .yella-timer {
  margin: 0 0 10px !important;
  border-radius: 0 !important;
  padding: 10px 16px !important;
}
html body .action-group {
  padding: 0 16px !important;
  margin-bottom: 12px !important;
}
html body .yella-features {
  padding: 0 16px !important;
  margin-bottom: 16px !important;
}

/* Title spacing */
html body .h1-prod-name {
  margin-bottom: 4px !important;
}
html body .rb-two-col {
  gap: 0 !important;
  margin: 0 !important;
}
html body .rb-col-info {
  gap: 0 !important;
}