/* Toggle */
.cart-step-toggle{display:flex;align-items:center;gap:8px}
.cart-step-toggle-label{font-size:var(--font-body-small);line-height:var(--line-height-none);cursor:pointer;transition:color .2s}
.cart-step-toggle--dark .cart-step-toggle-label{color:var(--gray)}
.cart-step-toggle-switch{position:relative;display:inline-flex;height:16px;width:32px;cursor:pointer;border:none;border-radius:100px;background-color:var(--gray-dark);transition:background-color .2s;padding:0}
.cart-step-toggle-switch[aria-checked="true"]{background-color:var(--brand-yellow)}
.cart-step-toggle-thumb{position:absolute;top:0;left:0;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform .2s}
#annual-toggle-wrapper .cart-step-toggle-switch[aria-checked="true"] .cart-step-toggle-thumb{transform:translateX(16px)!important}
#annual-toggle-wrapper .cart-step-toggle-switch[aria-checked="false"] .cart-step-toggle-thumb{transform:translateX(0)!important}

/* Accordion */
.cart-step-accordion-button{display:flex;align-items:center;justify-content:space-between;width:100%}
.cart-step-accordion-panel[hidden]{display:none!important}

/* Voucher layout */
.cart-step-voucher-form-input-wrapper{display:flex;align-items:center;gap:10px}
.cart-step-voucher-form-input{flex:1;min-width:0}
.cart-step-voucher-form-submit-button{white-space:nowrap}

/* Legal */
#legal-box{
  background:#fff;
  color:#000;
  border-radius:12px;
  padding:14px 16px;
  /* allow more text before scroll, but never exceed viewport height */
  max-height:min(50vh, 560px);
  min-height:160px;
  overflow:auto;
  margin-top:14px;
  box-shadow:0 2px 10px rgba(0,0,0,.08);
}
#legal-box *{ color:#000!important; }
@media (max-width: 480px){
  #legal-box{ max-height:min(70vh, 420px); }
}

/* Terms modal */
.lite-modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:9999}
.lite-modal{background:#fff;color:#000;max-width:720px;width:90vw;max-height:50vh;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.35);display:flex;flex-direction:column}
.lite-modal-header{padding:14px 16px;border-bottom:1px solid #eee}
.lite-modal-body{padding:0;overflow:auto}
.lite-legal-box{padding:14px 16px}
.lite-modal-footer{padding:12px 16px;border-top:1px solid #eee;display:flex;gap:10px;justify-content:flex-end}
.lite-btn{appearance:none;border:none;border-radius:8px;padding:10px 14px;cursor:pointer}
.lite-btn--primary{background:var(--brand-yellow,#FFCD1E);color:#000;font-weight:600}
.lite-btn--ghost{background:#f2f2f2;color:#000}

/* Error clamp */
.cart-step-voucher-form-error{max-height:48px;overflow:auto;white-space:normal}

	.lite-btn {
		border: 1px solid transparent !important;
	}
	.lite-btn:hover {
		border: 1px solid #ccc !important;
	}

/* Disabled button look */
.lite-btn[disabled] { opacity: .5; cursor: not-allowed; }

/* Scroll hint: sticks to bottom of the scrollable area */
.lite-scroll-tip{
  position: sticky;
  bottom: 0;
  padding: 15px 16px;
  background: #ffc600;
  color: #444;
  font-size: 12px;
  font-weight: bold;
  border-top: 1px solid #eee;
}

/* Dark theme safety (your page uses dark background outside modal) */
.lite-modal-footer{
  padding:12px 16px;
  border-top:1px solid #eee;
  display:flex;
  justify-content:flex-end;
}

/* Actions: column with hint on top, buttons row below */
.lite-modal-actions{
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
}
.lite-actions-row{
  display:flex;
  gap:10px;
  justify-content:flex-end; /* buttons to the right */
}

/* Hint sits above buttons, left-aligned */
.lite-scroll-hint{
  font-size:12px;
  color:#666;
  align-self:flex-start;
}
/* Disabled primary button */
.lite-btn[disabled]{ opacity:.5; cursor:not-allowed; }


/* Disabled primary button look */
.lite-btn[disabled]{ opacity:.5; cursor:not-allowed; }

#subscription-terms:hover  {
	border-color: #485363 !important;
	background-color: #485363 !important;
}

.cart-step-legal-title{
	margin: 20px 0 6px;
	font-size: var(--font-body-large);
	line-height: 1.2;
	font-weight: 600;
	color: #fff;
	letter-spacing: .02em;
	text-align: center;
}
/* Generic disabled look for both <button> and <a role="button"> */
.cart-step-button[disabled],
.cart-step-button.is-disabled,
.cart-step-button[aria-disabled="true"],
.lite-btn[disabled],
.lite-btn.is-disabled,
.lite-btn[aria-disabled="true"]{
  opacity:.5 !important;
  cursor:not-allowed !important;
  pointer-events:none !important;
}

/* Keep width stable when showing "Processing…" */
.btn--loading{ white-space:nowrap; }

/* Global lock while navigating/processing */
html.nav-lock .cart-step-button--primary#continue-to-checkout,
html.nav-lock .cart-step-button--primary[role="button"]{
  opacity:.5 !important;
  cursor:not-allowed !important;
  pointer-events:none !important;
}

/* Lite accordion: keep styles + visibility behavior */
.lite-accordion-button{display:flex;align-items:center;justify-content:space-between;width:100%}
.lite-accordion-panel[hidden]{display:none !important}
.lite-accordion-panel{display:block} /* visible by default when not [hidden] */

/* Lite Accordions */
.lite-accordion {
overflow: hidden;
}

.lite-accordion--previous {
border-bottom: none;
}

.lite-accordion:has(.lite-accordion-button[aria-expanded="true"]) {
border: 1px solid var(--gray-dark);
border-radius: 16px;
}

.lite-accordion--blue:has(.lite-accordion-button[aria-expanded="true"]) {
background: var(--brand-blue);
}

.lite-accordion-button {
width: 100%;
padding: 16px 28px;
background: transparent;
border: none;
color: var(--white);
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease;
}

.lite-accordion--rounded {
border-radius: 16px;
border: 1px solid var(--gray-dark);
}

.lite-accordion--rounded .lite-accordion-button {
border: none;
}

.lite-accordion-button:hover {
border-color: var(--white);
}

.lite-accordion-title {
font-size: var(--font-body);
font-weight: 500;
text-align: left;
padding-right: 8px;
}

.lite-accordion-icon-wrapper {
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
}

.lite-accordion-icon {
transition: transform 0.3s ease;
width: 14px;
}

.lite-accordion-button[aria-expanded="true"] .lite-accordion-icon {
transform: rotate(180deg);
}

.lite-accordion-panel {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s ease-out, visibility 0.3s ease-out;
visibility: hidden;
}

.lite-accordion-panel:not([hidden]) {
grid-template-rows: 1fr;
visibility: visible;
}

.lite-accordion-content-wrapper {
overflow: hidden;
min-height: 0;
}

.lite-accordion-content {
padding: 28px;
}

.cart-step-toggle-label.is-disabled {
opacity: .5;
cursor: not-allowed;
pointer-events: none;
}
/* Disabled visuals shared by helper */
.cart-step-toggle-label.is-disabled,
.cart-step-toggle-switch.is-disabled,
.cart-step-voucher-form-input.is-disabled,
.cart-step-button.is-disabled {
opacity: .5;
cursor: not-allowed;
pointer-events: none;
}

/* Native disabled input fallback (in case class missed) */
.cart-step-voucher-form-input[disabled]{
opacity: .6;
cursor: not-allowed;
}

/* Only affects the LITE checkout */
.lite-checkout .cart-step-header-steps {
display: flex;
align-items: center;
grid-row: 2;
grid-column: span 2;
justify-self: end;
}

@media (min-width: 1024px) {
.lite-checkout .cart-step-header-steps {
grid-column: span 2;
grid-row-start: 1;
grid-column-start: 2;
justify-self: start;
margin: 0;
}
}

.lite-checkout .cart-step-step-indicator {
display: flex;
align-items: center;
}

.lite-checkout .cart-step-step-circle {
width: 30px;
height: 30px;
font-size: var(--font-body-xsmall);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--gray-dark);
color: var(--white);
border: 1px solid var(--gray-dark);
text-decoration: unset;
}

/* Step 1 greyed out */
.lite-checkout .cart-step-step-indicator:first-child .cart-step-step-circle {
opacity: .45;
}

/* Step 2 highlighted */
.lite-checkout .cart-step-step-indicator:nth-child(2) .cart-step-step-circle {
background: #ffc600;
border-color: #ffc600;
color: #000;
}

.lite-checkout .cart-step-step-line {
height: 1px;
width: 44px;
background: var(--gray-dark);
}


/* Loader */
.lite-loader {
  position: fixed; inset: 0; z-index: 999999;
  display: none !important;
  align-items: center; justify-content: center;
  background-color: rgba(0,0,0,0.8); /* darker, uniform overlay */
  backdrop-filter: none;             /* remove the GPU blur layer */
}
.lite-loader[aria-hidden="false"] { display: flex !important; }

.lite-loader-box {
  background: #0f1115;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 28px 28px 22px;
  width: 320px; max-width: 92vw; text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

.lite-loader-title { color:#fff; font:600 16px/1.2 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; margin:12px 0 6px; }
.lite-loader-note  { color:rgba(255,255,255,0.72); font:400 12px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif; }

.lite-ring { width:72px; height:72px; margin:4px auto 12px; }
.lite-ring svg { width:100%; height:100%; display:block; }
.lite-ring .track {
  stroke: rgba(255,255,255,0.10);
  stroke-width: 4;
}

.lite-ring .arc {
  stroke: #ffc600;             /* solid brand color */
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 80 300;    /* < circumference so it's an arc */
  transform-origin: 50% 50%;
  transform-box: fill-box;     /* make CSS transform apply to the circle */
  animation: lite-spin 1.1s linear infinite;
  filter: drop-shadow(0 0 10px rgba(255,198,0,0.35));
}


.lite-progress { position:relative; height:6px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,0.08); margin-top:10px; }
.lite-progress::before {
  content:""; position:absolute; inset:0;
  background-size:22px 22px;
  background-image: linear-gradient(45deg, rgba(255,255,255,0.16) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.16) 50%, rgba(255,255,255,0.16) 75%, transparent 75%, transparent);
  animation: lite-barber 0.8s linear infinite;
}

/* lock page */
.nav-lock, .nav-lock body { cursor: progress; }
.nav-lock body { overflow: hidden !important; }

@keyframes lite-spin { to { transform: rotate(360deg); } }
@keyframes lite-barber { to { transform: translateX(22px); } }

@media (prefers-reduced-motion: reduce) {
  .lite-ring .arc, .lite-progress::before { animation: none !important; }
}


/* Quick Fixes */
ul.cart-step-cart-product-card-details li.lite-preline{
	white-space: pre-line !important;
}