/* ============================================================
   CHECKOUT — PIXEL-PERFECT REFERENCE MATCH
   Sticky top bar (Back / CHECKOUT / Secure)
   Cream Order Summary card at top
   Blue-tinted inputs, Card-only payment
   Sticky bottom Place Order (gray disabled → black active)
   ============================================================ */

.ckref-page{
  --ckref-ink:        rgb(26,26,26);
  --ckref-ink-soft:   rgba(0,0,0,0.75);
  --ckref-neutral-4:  #a3a3a3;
  --ckref-neutral-5:  #737373;
  --ckref-neutral-6:  #525252;
  --ckref-line:       rgba(0,0,0,0.08);
  --ckref-line-25:    rgba(0,0,0,0.25);
  --ckref-gold:       rgb(184,144,67);
  --ckref-gold-deep:  rgb(122,90,31);
  --ckref-gold-33:    rgba(184,144,67,0.267);
  --ckref-cream:      rgb(245,239,229);
  --ckref-cream-2:    rgb(252,246,232);
  --ckref-green:      rgb(10,125,58);
  --ckref-input-bg:   #eef1fb;
  --ckref-input-bd:   #dfe4f5;
  --ckref-focus-ring: rgba(184,144,67,0.40);
  --ckref-btn-disabled: rgb(158,158,158);

  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ckref-ink);
  background: #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.ckref-page *{ box-sizing: border-box; }

/* ============ TOP BAR (sticky) ============ */
.ckref-topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--ckref-line);
  background:#fff;
  position:sticky;top:0;z-index:10;
}
.ckref-back{
  display:inline-flex;align-items:center;gap:6px;
  background:none;border:none;padding:4px 0;
  font-family:inherit;color:var(--ckref-ink);
  font-size:12px;font-weight:600;
  text-decoration:none;cursor:pointer;
  min-width:60px;
}
.ckref-back:hover{ color:var(--ckref-gold-deep) }
.ckref-topbar-title{
  font-size:13px;font-weight:800;
  color:var(--ckref-ink);
  letter-spacing:.16em;
  text-transform:uppercase;
  flex:1;text-align:center;
}
.ckref-secure{
  display:inline-flex;align-items:center;gap:4px;
  font-size:11px;font-weight:600;
  color:var(--ckref-neutral-5);
  min-width:60px;justify-content:flex-end;
}
.ckref-secure svg{ color:var(--ckref-neutral-5) }

/* ============ MAIN WRAP (scrollable) ============ */
.ckref-wrap{
  flex:1;
  max-width: 540px;
  width: 100%;
  margin: 0 auto;
  padding: 16px 16px 100px;   /* bottom padding for sticky footer */
}

.ckref-error{
  background:#fef2f2;color:#991b1b;
  border:1px solid #fecaca;
  padding:10px 14px;border-radius:10px;font-size:12px;font-weight:600;
  margin:0 0 14px;
}

/* ============ ORDER SUMMARY (cream card) ============ */
.ckref-summary{
  background:var(--ckref-cream);
  border:1px solid var(--ckref-gold-33);
  border-radius:16px;
  padding:14px;
  margin-bottom:20px;
}
.ckref-sum-lbl{
  font-size:10px;font-weight:900;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--ckref-gold-deep);
  margin-bottom:10px;
  font-family: system-ui;
}
.ckref-sum-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:10px;
}
.ckref-sum-item{
  display:flex;align-items:center;gap:12px;
}
.ckref-sum-thumb{
  width:48px;height:48px;flex-shrink:0;
  border-radius:8px;overflow:hidden;
  background:#fff;
  border:1px solid rgba(0,0,0,0.05);
  display:grid;place-items:center;
}
.ckref-sum-thumb img{
  width:100%;height:100%;object-fit:contain;display:block;
  padding:4px;
}
.ckref-sum-thumb--icon{ background:var(--ckref-cream-2) }
.ckref-sum-body{ flex:1;min-width:0 }
.ckref-sum-title{
  font-size:14px;font-weight:800;
  color:var(--ckref-ink);
  line-height:1.2;
  letter-spacing:-.01em;
}
.ckref-sum-meta{
  font-size:11px;color:var(--ckref-neutral-6);
  line-height:1.4;margin-top:2px;
}
.ckref-sum-strength{
  font-size:11px;font-weight:600;
  color:var(--ckref-gold-deep);
  line-height:1.4;
}
.ckref-sum-price{
  font-size:14px;font-weight:900;
  color:var(--ckref-ink);
  font-variant-numeric:tabular-nums;
  flex-shrink:0;
  text-align:right;
}

.ckref-sum-tot{
  margin-top:14px;padding-top:12px;
  border-top:1px solid var(--ckref-gold-33);
  display:flex;flex-direction:column;gap:6px;
  font-size:13px;
}
.ckref-sum-row{
  display:flex;justify-content:space-between;align-items:center;
}
.ckref-sum-row .lbl{ color:var(--ckref-neutral-6);font-weight:500 }
.ckref-sum-row .val{ font-weight:600;color:var(--ckref-ink);font-variant-numeric:tabular-nums }
.ckref-sum-row.is-free .val{ color:var(--ckref-green);font-weight:900 }
.ckref-sum-row.is-discount .val{ color:var(--ckref-gold-deep);font-weight:700 }

.ckref-sum-grand{
  margin-top:12px;padding-top:12px;
  border-top:1px solid var(--ckref-gold-33);
  display:flex;justify-content:space-between;align-items:center;
}
.ckref-sum-grand .lbl{ font-size:15px;font-weight:900;color:var(--ckref-ink) }
.ckref-sum-grand .val{
  font-size:20px;font-weight:900;
  color:var(--ckref-gold-deep);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}

/* ============ SECTIONS ============ */
.ckref-section{ margin:20px 0 }
.ckref-section-lbl{
  display:flex;align-items:center;gap:6px;
  font-size:11px;font-weight:900;
  color:var(--ckref-ink);
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:8px;
}
.ckref-section-lbl svg{color:var(--ckref-neutral-5)}

/* ============ INPUTS (reference blue-tinted) ============ */
.ckref-input,
.ckref-select{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  font-size:13px;
  font-family:inherit;
  color:var(--ckref-ink);
  background:var(--ckref-input-bg);
  border:1px solid var(--ckref-input-bd);
  outline:none;
  transition:box-shadow .15s, border-color .15s;
  -webkit-appearance:none;
  appearance:none;
}
.ckref-input::placeholder{ color:var(--ckref-neutral-5) }
.ckref-input:focus,
.ckref-select:focus{
  border-color:var(--ckref-gold);
  box-shadow:0 0 0 2px var(--ckref-focus-ring);
}
.ckref-select{
  padding-right:32px;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  background-size:12px;
}

.ckref-grid-2{ display:grid;grid-template-columns:1fr 1fr;gap:10px }
.ckref-grid-3{ display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px }
.ckref-mt-8{ margin-top:10px }
.ckref-mt-8-input{ margin-top:10px }

/* Stripe Elements (when enabled) */
.ckref-stripe-el{ padding:12px 14px }

/* ============ Demo / trust row ============ */
.ckref-demo-row{
  display:flex;align-items:center;gap:6px;
  margin-top:10px;
  font-size:11px;color:var(--ckref-neutral-5);
}
.ckref-demo-row svg{ flex-shrink:0;color:var(--ckref-neutral-5) }

/* Section PAYMENT gets small bottom margin because footer is sticky */
.ckref-section--pay{ margin-bottom:8px }

/* ============ STICKY BOTTOM FOOTER (Place Order) ============ */
.ckref-footer{
  position:fixed;left:0;right:0;bottom:0;
  background:#fff;
  border-top:1px solid var(--ckref-line);
  padding:14px 16px;
  z-index:20;
  display:flex;justify-content:center;
}
.ckref-place{
  width:100%;
  max-width:540px;
  padding:15px 20px;
  background:var(--ckref-ink);color:#fff;
  border:none;border-radius:99px;
  font-family:inherit;
  font-size:13px;font-weight:900;
  letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;
  display:flex;justify-content:center;align-items:center;gap:6px;
  transition:background .15s, transform .05s;
}
.ckref-place:hover:not(:disabled){ background:#000 }
.ckref-place:active:not(:disabled){ transform:scale(.99) }
.ckref-place:disabled{
  background:var(--ckref-btn-disabled);
  cursor:not-allowed;color:#fff;
}
.ckref-place strong{ font-weight:900;font-variant-numeric:tabular-nums }
.ckref-place strong::before{ content:" · "; margin:0 4px }

/* ============ Confirmation state ============ */
.ckref-confirm{
  max-width:520px;margin:60px auto;padding:24px;
  background:#fff;border-radius:14px;
  border:1px solid var(--ckref-line);
  text-align:center;
  font-family: "Roboto", system-ui, sans-serif;
}
.ckref-confirm .ckref-tick{
  width:56px;height:56px;border-radius:50%;
  background:var(--ckref-green);color:#fff;
  display:grid;place-items:center;font-size:26px;
  margin:0 auto 16px;
}
.ckref-confirm h2{
  font-size:22px;font-weight:800;color:var(--ckref-ink);
  margin:0 0 6px;
}
.ckref-confirm-box{
  background:var(--ckref-cream);
  border-radius:10px;
  padding:14px;margin:14px 0;
  text-align:left;
}
.ckref-cf-line{
  display:flex;justify-content:space-between;
  font-size:11.5px;color:var(--ckref-ink);padding:4px 0;
  font-variant-numeric:tabular-nums;
}
.ckref-cf-total{
  display:flex;justify-content:space-between;
  border-top:1px solid var(--ckref-gold-33);
  padding-top:8px;margin-top:6px;
  font-size:13px;font-weight:900;
  color:var(--ckref-ink);
  font-variant-numeric:tabular-nums;
}
.ckref-btn-link{
  display:inline-block;margin-top:14px;
  padding:11px 22px;background:var(--ckref-ink);color:#fff;
  border-radius:99px;text-decoration:none;
  font-size:11px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;
}

/* Card error (Stripe) */
.ckref-card-err{ color:#991b1b;font-size:11px;font-weight:600;margin-top:6px }

/* ============ Responsive ============ */
@media (max-width: 480px){
  .ckref-wrap{ padding:14px 14px 100px }
  .ckref-grid-3{ gap:8px }
  .ckref-grid-2{ gap:8px }
  .ckref-topbar{ padding:12px 14px }
  .ckref-topbar-title{ font-size:12px }
}