/* ============================================================
   CHECKOUT PAGE — specific styles
   Shared styles come from design-system.css
   ============================================================ */

/* ── Shimmer loading effect ── */
.shimmer-box {
  display: inline-block;
  background: linear-gradient(90deg, var(--cream) 25%, var(--blush-lt) 50%, var(--cream) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: 8px;
}
.shimmer-lg { width: 200px; height: 26px; }

/* ── Minimal Navbar ── */
.nav-secure{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--txt-soft);}
.nav-secure i{color:var(--green);}

/* ── Page header ── */
.page-hd{background:var(--warm-white);border-bottom:1px solid var(--border);padding:20px 24px;}
.page-hd-in{max-width:1200px;margin:0 auto;}

/* ── Secure badge (replaces steps) ── */
.co-secure-badge{display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;color:var(--txt-soft);}
.co-secure-badge i{color:var(--green);}

/* ── Main layout ── */
.co-wrap{max-width:1200px;margin:32px auto;padding:0 24px 80px;display:grid;grid-template-columns:1fr 380px;gap:32px;align-items:start;}

/* ── Form cards ── */
.form-card{background:#fff;border-radius:var(--r-lg);border:1px solid var(--border);margin-bottom:20px;overflow:hidden;}
.form-card-hd{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;}
.form-card-num{width:26px;height:26px;border-radius:50%;background:var(--burgundy);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.form-card-title{font-family:var(--ff-display);font-size:16px;color:var(--txt);}
.form-card-body{padding:22px;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.field-row.single{grid-template-columns:1fr;}
.field{display:flex;flex-direction:column;gap:5px;}
.field label{font-size:12px;font-weight:600;color:var(--txt-mid);letter-spacing:.3px;}
.field label .req{color:var(--burgundy);margin-left:2px;}
.field label .opt{color:var(--txt-soft);font-weight:400;font-size:11px;}
body.ar .field label .req{margin-left:0;margin-right:2px;}
.field-wrap{position:relative;}
.field-wrap i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--txt-soft);font-size:13px;pointer-events:none;}
body.ar .field-wrap i{left:auto;right:13px;}
.field input,.field select,.field textarea{width:100%;padding:10px 14px 10px 36px;border:1.5px solid var(--border);border-radius:var(--r-md);font-family:inherit;font-size:13.5px;color:var(--txt);background:#fff;outline:none;transition:var(--ease);}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--burgundy);background:var(--warm-white);}
.field input.err,.field select.err,.field textarea.err{border-color:#E57373;background:#fff5f5;}
.field .err-msg{font-size:11px;color:#E57373;display:none;align-items:center;gap:4px;}
.field .err-msg.show{display:flex;}
.field input:not(.has-icon),.field select:not(.has-icon),.field textarea:not(.has-icon){padding-left:14px;}
.field textarea{resize:vertical;min-height:80px;padding-top:10px;line-height:1.6;}

/* Phone prefix */
.phone-wrap{display:flex;border:1.5px solid var(--border);border-radius:var(--r-md);overflow:hidden;transition:var(--ease);}
.phone-wrap:focus-within{border-color:var(--burgundy);}
.phone-wrap.err{border-color:#E57373;}
.phone-prefix{padding:10px 12px;background:var(--blush-lt);font-size:13px;color:var(--txt-mid);font-weight:600;flex-shrink:0;border-right:1px solid var(--border);display:flex;align-items:center;gap:5px;}
body.ar .phone-prefix{border-right:none;border-left:1px solid var(--border);}
.phone-wrap input{border:none!important;border-radius:0!important;padding:10px 12px!important;}

/* Success overlay — Payment instructions */
.success-pay-inst{margin-bottom:24px;}
.pay-inst{background:var(--warm-white);border:1px solid var(--border);border-radius:var(--r-md);padding:16px 18px;display:flex;gap:14px;text-align:left;}
body.ar .pay-inst{text-align:right;}
.pay-inst-icon{font-size:28px;flex-shrink:0;margin-top:2px;}
.pay-inst-body{flex:1;min-width:0;}
.pay-inst-title{font-size:15px;font-weight:700;color:var(--txt);margin-bottom:6px;}
.pay-inst-body p{font-size:13px;color:var(--txt-mid);line-height:1.5;margin-bottom:12px;}
.pay-inst-account{background:#fff;border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 14px;margin-bottom:12px;}
.pay-inst-account strong{display:block;color:var(--burgundy);font-size:14px;margin-bottom:2px;}
.pay-inst-account span{color:var(--txt-soft);font-size:12px;}
.pay-inst-actions{display:flex;gap:8px;flex-wrap:wrap;}
.btn-pay{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--r-md);font-size:12.5px;font-weight:600;text-decoration:none;cursor:pointer;transition:var(--ease);border:none;font-family:inherit;}
.btn-pay:hover{opacity:.85;}
.btn-instapay{background:var(--green);color:#fff;}
.btn-wa-sm{background:#25D366;color:#fff;}

/* Copy button (shared) */
.copy-btn{display:inline-flex;align-items:center;gap:5px;margin-top:8px;padding:5px 12px;border-radius:var(--r-full);background:var(--blush-lt);border:none;font-size:11.5px;font-weight:600;color:var(--burgundy);cursor:pointer;transition:var(--ease);}
.copy-btn:hover{background:var(--blush);}

.co-payment-opts{display:flex;flex-direction:column;gap:8px;}
.co-pay-opt{display:flex;align-items:center;gap:10px;padding:10px 14px;border:1.5px solid var(--border);border-radius:var(--r-md);cursor:pointer;transition:var(--ease);}
.co-pay-opt:hover{border-color:var(--burgundy-lt);}
.co-pay-opt.selected{border-color:var(--burgundy);background:var(--blush-lt);}
.co-pay-radio{width:16px;height:16px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:var(--ease);}
.co-pay-opt.selected .co-pay-radio{border-color:var(--burgundy);background:var(--burgundy);}
.co-pay-opt.selected .co-pay-radio::after{content:'';width:5px;height:5px;border-radius:50%;background:#fff;}
.co-pay-info{flex:1;min-width:0;}
.co-pay-name{font-size:13px;font-weight:600;color:var(--txt);}
.co-pay-sub{font-size:11px;color:var(--txt-soft);}
.co-pay-disc{background:var(--green);color:#fff;font-size:9px;font-weight:800;padding:3px 8px;border-radius:var(--r-full);white-space:nowrap;flex-shrink:0;}

/* Place order section */
.place-order-section{background:#fff;border-radius:var(--r-lg);border:1px solid var(--border);padding:22px;}
.place-btn-note{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--txt-soft);margin-top:12px;justify-content:center;}
.place-btn-note i{color:var(--green);}

/* ── Order summary sidebar ── */
.co-summary{background:#fff;border-radius:var(--r-lg);border:1px solid var(--border);padding:22px;position:sticky;top:90px;}
.co-sum-title{font-family:var(--ff-display);font-size:17px;color:var(--txt);margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--border);}
.co-mini-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);}
.co-mini-img{width:48px;height:48px;border-radius:var(--r-sm);background:var(--blush-lt);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;overflow:hidden;position:relative;}
.co-mini-img img{width:100%;height:100%;object-fit:cover;}
.co-mini-qty{position:absolute;top:-4px;right:-4px;width:18px;height:18px;background:var(--burgundy);color:#fff;font-size:9px;font-weight:700;border-radius:50%;display:flex;align-items:center;justify-content:center;}
body.ar .co-mini-qty{right:auto;left:-4px;}
.co-mini-name{font-size:13px;font-weight:600;color:var(--txt);line-height:1.3;flex:1;min-width:0;}
.co-mini-meta{font-size:11px;color:var(--txt-soft);}
.co-mini-price{font-size:13.5px;font-weight:700;color:var(--burgundy);flex-shrink:0;}
.sum-rows{margin-top:14px;}
.sum-row{display:flex;justify-content:space-between;font-size:13px;margin-bottom:9px;}
.sum-row .l{color:var(--txt-mid);}
.sum-row .v{font-weight:600;color:var(--txt);}
.sum-row .free{color:var(--green);font-weight:700;}
.sum-row .disc{color:var(--green);font-weight:700;}
.sum-divider{height:1px;background:var(--border);margin:14px 0;}
.sum-total-row{display:flex;justify-content:space-between;align-items:baseline;}
.sum-total-l{font-size:14px;font-weight:700;color:var(--txt);}
.sum-total-r{font-family:var(--ff-display);font-size:24px;font-weight:700;color:var(--burgundy);}
.sum-total-cur{font-size:11px;color:var(--txt-soft);font-family:var(--ff-body);}

.promo-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:rgba(76,175,80,.1);border-radius:var(--r-full);font-size:11.5px;font-weight:600;color:var(--green);margin-top:8px;}
.sum-breakdown{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--border);}
.co-breakdown-row{display:flex;justify-content:space-between;font-size:11.5px;padding:3px 0;color:var(--txt-mid);}
.co-breakdown-row .cbr-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.co-breakdown-row .cbr-qty{color:var(--txt-soft);margin:0 4px;flex-shrink:0;}
.co-breakdown-row .cbr-total{font-weight:600;color:var(--txt);flex-shrink:0;margin-left:8px;}
.sum-savings-row{text-align:center;margin-top:8px;}
.sum-savings-val{font-size:12px;color:var(--green);font-weight:600;}

.sum-edit{display:inline-flex;align-items:center;gap:5px;margin-top:14px;color:var(--burgundy);font-size:12.5px;font-weight:600;text-decoration:none;transition:var(--ease);}
.sum-edit:hover{gap:8px;}

/* ── Success overlay ── */
.success-overlay{display:none;position:fixed;inset:0;background:var(--cream);z-index:500;overflow-y:auto;}
.success-overlay.show{display:flex;align-items:center;justify-content:center;padding:40px 24px;}
.success-card{background:#fff;border-radius:var(--r-lg);border:1px solid var(--border);padding:48px 40px;max-width:540px;width:100%;text-align:center;box-shadow:0 24px 80px var(--shadow);}
.success-anim{font-size:72px;display:block;margin-bottom:20px;animation:pop .5s cubic-bezier(.34,1.56,.64,1);}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
.success-card h2{font-family:var(--ff-display);font-size:28px;color:var(--txt);margin-bottom:10px;}
.success-card p{color:var(--txt-mid);font-size:14.5px;line-height:1.7;margin-bottom:24px;}
.order-id-box{background:var(--blush-lt);border-radius:var(--r-md);padding:16px 20px;margin-bottom:28px;}
.order-id-label{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--txt-soft);font-weight:600;margin-bottom:4px;}
.order-id-val{font-family:var(--ff-display);font-size:22px;color:var(--burgundy);font-weight:700;letter-spacing:1px;}
.order-id-note{font-size:12px;color:var(--txt-soft);margin-top:4px;}
.success-actions{display:flex;flex-direction:column;gap:10px;}
.success-details{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:24px;text-align:left;}
body.ar .success-details{text-align:right;}
.success-detail{background:var(--cream);border-radius:var(--r-sm);padding:10px 14px;}
.sd-label{font-size:10.5px;color:var(--txt-soft);letter-spacing:1px;text-transform:uppercase;font-weight:600;margin-bottom:2px;}
.sd-val{font-size:13.5px;font-weight:600;color:var(--txt);}

/* ── Footer mini ── */
.foot-mini{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;}
.foot-mini-logo{display:flex;align-items:center;gap:8px;text-decoration:none;}
.foot-mini-logo span{font-family:var(--ff-display);font-size:16px;color:#fff;}
.foot-mini-links{display:flex;gap:20px;}
.foot-mini-links a{color:rgba(255,255,255,.5);text-decoration:none;font-size:12.5px;transition:var(--ease);}
.foot-mini-links a:hover{color:var(--blush);}
.foot-mini-copy{font-size:11.5px;color:rgba(255,255,255,.35);margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08);text-align:center;}

/* ── Responsive ── */
@media(max-width:900px){
  .co-wrap{grid-template-columns:1fr;}
  .co-summary{position:static;order:-1;}
}
@media(max-width:768px){
  .field-row{grid-template-columns:1fr;}
  .success-details{grid-template-columns:1fr;}
  .success-card{padding:32px 24px;}
}
@media(max-width:600px){
  .success-overlay.show{align-items:flex-start;padding:24px 16px;min-height:100dvh;}
  .success-card{padding:28px 20px;margin:auto 0;max-height:none;}
}

/* ── Success items inline ── */
.suc-item{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--border);gap:8px;}
.suc-item:last-child{border-bottom:none;}
.suc-item-name{font-size:12.5px;color:var(--txt);flex:1;min-width:0;}
.suc-item-price{font-size:13px;font-weight:700;color:var(--burgundy);flex-shrink:0;white-space:nowrap;}