/**
 * Checkout Module — Dark Theme
 * All visual appearance: design tokens, colors, backgrounds, borders.
 * Swap this file for checkout.light.css to switch themes.
 *
 * Spacing: multiples of 8 — 8/12/16/20/24/32/40/48/56px
 * Input height: 52px, CTA height: 56px, border-radius: 10px/12px
 * Font: Inter (body), Covered By Your Grace (brand title)
 */

/* ── Design Tokens (CSS Custom Properties) ── */


:root {
  /* Backgrounds */
  --checkout-dark-bg-page: rgba(18,22,26);
  --checkout-dark-bg-card: #161B22;
  --checkout-dark-bg-input: #0b1013;
  --checkout-dark-bg-header:#060a0e;

  /* Borders */
  --checkout-dark-border: #30363D;
  --checkout-dark-border-focus: #4caf50;
  --checkout-dark-border-error: #C8232D;

  /* Text */
  --checkout-dark-text: #FAF9F5;
  --checkout-dark-text-muted: #9A9A95;

  /* Accent & Status */
  --checkout-dark-accent: #D4AF69;
  --checkout-dark-cta: #C8232D;
  --checkout-dark-btn-card:#C8232D;
  --checkout-dark-success: #4ade80;
  --checkout-dark-paypal: #FFC439;

  /* Sizing */
  --checkout-dark-input-h: 52px;
  --checkout-dark-btn-h: 56px;
  --checkout-dark-radius: 10px;
  --checkout-dark-radius-lg:12px;
  --checkout-dark-radius-8:8px;


  /* Font */
  --checkout-dark-font: 'Inter', sans-serif;
  --checkout-dark-font-brand: 'Covered By Your Grace', cursive;
}

/* ── Page & Layout ── */
body.one-checkout-body {
  background-color: var(--checkout-dark-bg-page);
  font-family: var(--checkout-dark-font);
  min-height: 100vh;
}

/* ── Card ── */
.one-checkout-card {
  background-color: var(--checkout-dark-bg-card);
  border: 1px solid var(--checkout-dark-border);
  border-radius: var(--checkout-dark-radius-lg);
  padding: 1.5rem;
}

/* ── Header & Footer bars ── */
.one-checkout-header {
  background-color: var(--checkout-dark-bg-header);
}

.one-checkout-logo{padding:30px 10px;text-align:center;}
.one-checkout-logo img{text-align:center;width:200px;display:inline;}
@media (max-width:991.98px){
    .one-checkout-logo img{width:140px;}
    .one-checkout-steps{max-width:350px;}
    .one-checkout-card{padding:1rem!important}
}


.one-checkout-footer {
  background-color:rgba(0, 0, 0, 0.4);
}

.one-checkout-footer nav{font-size:14px}
.one-checkout-footer-cta{max-width:1400px;margin:auto;padding-bottom:35px;text-align:center;margin-bottom:40px;border-bottom:1px solid #141a25;}
.one-checkout-footer-container{max-width:1280px;margin:auto;padding-bottom:15px;}
.one-footer-cta{color:var(--checkout-dark-text-muted);text-align:center;font-weight:500;}
.one-footer-cta span{display:block;}
.one-footer-cta img{max-width:30px;display:inline;margin-bottom:10px;}
.one-footer-cta-title{max-width:180px;margin:auto;}


.one-footer-title{color:var(--checkout-dark-text-muted);font-weight:bolder;font-size:15px;margin-bottom:8px;}
.one-footer-link{color:var(--checkout-dark-text);display:block;line-height:1.65}
.one-footer-link:hover{color:var(--checkout-dark-accent);}
.one-checkout-footer-copyright{color:var(--checkout-dark-text);text-align:center;font-size:14px;padding-top:20px;border-top:1px solid #141a25;margin-top:50px;}
@media (max-width:991.98px){
    .one-checkout-footer-container{max-width:90%;margin:auto;padding-bottom:15px;text-align:center;} 
}


/* ── Text colors ── */
.one-checkout-text {
  color: var(--checkout-dark-text);
}

.one-checkout-text-muted {
  color: var(--checkout-dark-text-muted);
}

.one-checkout-text-accent {
  color: var(--checkout-dark-accent);
}

.one-checkout-text-success {
  color: var(--checkout-dark-success);
}

.one-checkout-text-error {
  color: var(--checkout-dark-cta);
}

/* ── Input ── */
.one-checkout-input {
  height: var(--checkout-dark-input-h);
  background-color: var(--checkout-dark-bg-input);
  border: 1px solid var(--checkout-dark-border);
  color: var(--checkout-dark-text);
  border-radius: var(--checkout-dark-radius);
}

.one-checkout-input:focus {
  border-color: var(--checkout-dark-border-focus);
}

.one-checkout-input::placeholder {
  color: var(--checkout-dark-text-muted);
}

/* ── Select (same as input + appearance) ── */
.one-checkout-select {
  height: var(--checkout-dark-input-h);
  background-color: var(--checkout-dark-bg-input);
  border: 1px solid var(--checkout-dark-border);
  color: var(--checkout-dark-text);
  border-radius: var(--checkout-dark-radius);
  appearance: none;
  cursor: pointer;
}

.one-checkout-select:focus {
  border-color: var(--checkout-dark-border-focus);
}

/* ── Buttons ── */
.one-checkout-card-btn {
  height: var(--checkout-dark-btn-h);
  background-color: var(--checkout-dark-btn-card);
  border-radius:var(--checkout-dark-radius-8);
  color: #fff;
  font-weight: 600;
  transition: opacity 0.15s;
  cursor: pointer;
}

.one-checkout-card-btn:hover {
  opacity: 0.9;
}




.one-checkout-btn-cta {
  height: var(--checkout-dark-btn-h);
  background-color: var(--checkout-dark-btn-card);
  border-radius: var(--checkout-dark-radius-lg);
  color: #fff;
  font-weight: 600;
  transition: opacity 0.15s;
  cursor: pointer;
}

.one-checkout-btn-cta:hover {
  opacity: 0.9;
}

.one-checkout-btn-paypal{height:48px!important;background-color:var(--checkout-dark-paypal);border-radius:var(--checkout-dark-radius-8);color: #111;}
.one-checkout-btn-apple-pay{height:52px!important;border-radius:var(--checkout-dark-radius-8);}
.one-checkout-btn-venmo{border-radius:var(--checkout-dark-radius-8);}

.one-checkout-btn-apply {
  height: 44px;
  background-color: var(--checkout-dark-border);
  color: var(--checkout-dark-text);
  border-radius: var(--checkout-dark-radius);
}

/* ── Coupon input (smaller) ── */
.one-checkout-input-sm {
  height: 44px;
  background-color: var(--checkout-dark-bg-input);
  border: 1px solid var(--checkout-dark-border);
  color: var(--checkout-dark-text);
  border-radius: var(--checkout-dark-radius);
}

.one-checkout-input-sm:focus {
  border-color: var(--checkout-dark-border-focus);
}

/* ── Summary card (slightly different — has sticky) ── */
.one-checkout-summary {
  background-color: var(--checkout-dark-bg-card);
  border: 1px solid var(--checkout-dark-border);
  border-radius: var(--checkout-dark-radius-lg);
  padding: 1.5rem;
  position: sticky;
  top: 2rem;
}

/* ── Summary sub-panel (inside payment section) ── */
.one-checkout-summary-inner {
  background-color: var(--checkout-dark-bg-input);
  border: 1px solid var(--checkout-dark-border);
  border-radius: 0.5rem;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

/* ── Divider ── */
.one-checkout-divider {
  border-color: var(--checkout-dark-border);
}


.one-checkout-item{
  background-color: var(--checkout-dark-bg-input);
  border: 1px solid var(--checkout-dark-border);
  border-radius: var(--checkout-dark-radius-lg);
  padding: 1.5rem;
}


/* ── Cart item image placeholder BG ── */
.one-checkout-item-image{
  background-color: var(--checkout-dark-bg-input);
  width:80px;height:120px;
}

.one-checkout-item-info h3{font-size:14px!important}

/* ── Qty badge ── */
.one-checkout-qty-badge {
  background-color: var(--checkout-dark-cta);
}

/* ── Qty button ── */
.one-checkout-qty-btn {
  background-color: var(--checkout-dark-bg-input);
  border: 1px solid var(--checkout-dark-border);
  color: var(--checkout-dark-text);
  border-radius:40px;
  cursor: pointer;
}

/* ── Brand text ── */
.one-checkout-brand {
  color: var(--checkout-dark-text);
  font-family: var(--checkout-dark-font-brand);
}

/* ── Focus Ring (keyboard accessibility) ── */
input:focus-visible,
select:focus-visible,
button:focus-visible {
  outline: 2px solid var(--checkout-dark-border-focus);
  outline-offset: 2px;
}

/* ── Input Error State ── */
.onesite-input-error {
  border-color: var(--checkout-dark-border-error) !important;
}

.onesite-error-text {
  color: var(--checkout-dark-cta);
  font-size: 0.75rem;
  margin-top: 4px;
}

/* ── Loading Overlay ── */
.onesite-loading {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(20, 20, 19, 0.85);
}

.onesite-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--checkout-dark-border);
  border-top-color: var(--checkout-dark-accent);
  border-radius: 50%;
  animation: onesite-spin 0.8s linear infinite;
}

@keyframes onesite-spin {
  to { transform: rotate(360deg); }
}

/* ── Step Progress Bar ── */
.one-checkout-step-complete {
  background-color: var(--checkout-dark-success);
  color: #fff;
}

.one-checkout-step-active {
  border: 2px solid var(--checkout-dark-accent);
  color: var(--checkout-dark-accent);
  background-color: transparent;
}

.one-checkout-step-pending {
  border: 2px solid var(--checkout-dark-border);
  color: var(--checkout-dark-text-muted);
  background-color: transparent;
}

.one-checkout-step-line-complete {
  background-color: var(--checkout-dark-success);
}

.one-checkout-step-line-pending {
  background-color: var(--checkout-dark-border);
}

/* Step circle pop-in animation */
.one-checkout-step-pop {
  opacity: 0;
  transform: scale(0.5);
  animation: onesite-step-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes onesite-step-pop {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Line fill animation (left to right) */
.one-checkout-line-fill {
  transform: scaleX(0);
  transform-origin: left;
  animation: onesite-line-fill 0.35s ease-out forwards;
}

@keyframes onesite-line-fill {
  to {
    transform: scaleX(1);
  }
}

/* ── Scrollbar (cart item list) ── */
.max-h-64::-webkit-scrollbar {
  width: 4px;
}

.max-h-64::-webkit-scrollbar-track {
  background: var(--checkout-dark-bg-card);
}

.max-h-64::-webkit-scrollbar-thumb {
  background: var(--checkout-dark-border);
  border-radius: 2px;
}