/**
 * ln-fixes.css — Laikas Namams migration fixes (gama).
 *
 * SEPARATE from custom.css so upstream theme/module restores of custom.css
 * don't wipe our fixes. Loaded via theme.yml assets (priority 10000, after
 * custom.css) so rules here win without !important in most cases.
 *
 * Convention:
 *   - Each block prefixed with TASKS.md task number and brief WHY
 *   - Prefer specificity over !important (but some SuperCheckout inline CSS
 *     forces us to use !important in places)
 */

/* ============================================================
   Task: product reference ("PREKĖS KODAS") row alignment.
   Render inline with the variant label typography below it.
   ============================================================ */
.cw_reference .product-variants-item {
  display: flex;
  align-items: center;
}
.cw_reference .control-label {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
  margin: auto 10px auto 0;
  min-width: 70px;
}

/* ============================================================
   Task #25 — Cart page AJAX loading overlay.
   Shows a faded overlay while cart quantity/coupon AJAX is in
   flight. Matches .cssload-speeding-wheel spinner convention
   used elsewhere in the theme.
   ============================================================ */
.cart-overview.js-cart {
  position: relative;
}
.cart-loading-overlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.7);
  z-index: 10;
  justify-content: center;
  align-items: center;
}
.cart-loading-overlay.active {
  display: flex;
}

/* ============================================================
   Task #26 — SuperCheckout login option radios.
   Three radio options (Login / Guest / Register) rendered as
   dark pill buttons, switching to yellow (#f5c518) on selected.
   Radio inputs themselves hidden; the <label> becomes the button.
   ============================================================ */
#supercheckout-option.login-options {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 15px;
}
#supercheckout-option .radio-inline {
  padding: 0;
  width: auto;
  flex: 1;
  max-width: 160px;
}
.form-group.login-options .radio-inline label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 48px !important;
  padding: 4px 15px !important;
  background: #222 !important;
  border: 1px solid #222 !important;
  border-radius: 0 !important;
  cursor: pointer;
  text-align: center;
  font-size: 13px !important;
  font-weight: 300 !important;
  color: #fff !important;
  transition: all 0.2s;
}
#supercheckout-option .radio-inline input[type="radio"] {
  display: none;
}
.opc-container .login-options [type="radio"]:checked + label {
  background: #f5c518 !important;
  border-color: #f5c518 !important;
  color: #222 !important;
  font-weight: 300 !important;
}
.form-group.login-options .radio-inline label:hover {
  background: #333 !important;
  border-color: #333 !important;
}
.opc-container .login-options [type="radio"]:checked + label:hover {
  background: #e0b415 !important;
  border-color: #e0b415 !important;
}

/* ============================================================
   Task #26 — SuperCheckout login submit button styling.
   Template uses .btn.orangebuttonsmall (class undefined in
   theme.css → falls back to bad default). Re-style as dark pill.
   ============================================================ */
.loginBtn .btn.orangebuttonsmall {
  background: #222 !important;
  border: none !important;
  border-radius: 4px !important;
  color: #fff !important;
  padding: 10px 30px !important;
  font-size: 14px !important;
  font-weight: 600;
  text-transform: uppercase;
  width: 100%;
  max-width: 300px;
  transition: background 0.2s;
}
.loginBtn .btn.orangebuttonsmall:hover {
  background: #333 !important;
}

/* SuperCheckout registration password field — match login form width */
#supercheckout-new-customer-form #new_customer_password td {
  padding: 0 !important;
}

/* ============================================================
   Task #29 — Megamenu viewport overflow (laptop screens).
   Theme dropdowns have no max-height, so expanded menu overflows
   below the fold on 13–15" screens. Cap height and scroll.
   ============================================================ */
.leo-megamenu .dropdown-menu {
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  overflow-x: hidden;
}
.ApMegamenu .leo-verticalmenu > .block_content {
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  overflow-x: hidden;
}