/* checkout.css — builds on top of styles.css (shared brand tokens, buttons, starburst) */

body.checkout-body{padding-bottom:30px;}

.checkout-header .wrap{gap:10px;}
.checkout-secure{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:var(--navy);}
.checkout-secure [data-lucide]{width:14px;height:14px;color:var(--orange);}

.checkout-flash-strip{
  background:linear-gradient(90deg,var(--orange-dark),var(--orange));color:#fff;
  text-align:center;padding:6px 10px;font-size:12.5px;font-weight:800;letter-spacing:.3px;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.checkout-flash-strip [data-lucide]{color:var(--yellow);}

.checkout-wrap{padding-top:20px;}

/* ---- progress indicator ---- */
.progress-track{
  position:relative;display:flex;justify-content:space-between;align-items:center;
  max-width:280px;margin:0 auto 8px;
}
.progress-track::before{
  content:'';position:absolute;top:50%;left:18px;right:18px;height:3px;
  background:var(--line);transform:translateY(-50%);z-index:0;
}
.progress-fill{
  position:absolute;top:50%;left:18px;height:3px;background:var(--orange);
  transform:translateY(-50%);z-index:1;width:0%;transition:width .4s ease;
}
.progress-dot{
  position:relative;z-index:2;width:32px;height:32px;border-radius:50%;
  background:var(--white);border:3px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--muted);font-size:13px;
  transition:.25s;
}
.progress-dot.active{border-color:var(--orange);color:var(--orange);box-shadow:0 0 0 5px rgba(249,115,22,.15);}
.progress-dot.done{border-color:var(--orange);background:var(--orange);color:#fff;}
.progress-label{text-align:center;font-size:12.5px;color:var(--muted);font-weight:600;margin-bottom:18px;}
.progress-label b{color:var(--orange-dark);}

/* ---- collapsible order summary (native mobile pattern, replaces desktop sidebar) ---- */
.summary-toggle{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  background:var(--white);border:1px solid var(--line);border-radius:14px;
  padding:13px 16px;font-weight:700;font-size:13.5px;color:var(--navy);cursor:pointer;
  margin-bottom:10px;
}
.summary-toggle span{display:flex;align-items:center;gap:7px;}
.summary-toggle [data-lucide]{width:16px;height:16px;color:var(--orange);}
.stb-right{gap:8px !important;}
.stb-right b{color:var(--orange-dark);font-size:14px;}
#stb-chevron{transition:transform .2s;color:var(--navy) !important;}
#stb-chevron.open{transform:rotate(180deg);}

.summary-card{
  background:var(--white);border:1px solid var(--line);border-radius:14px;padding:16px;
  margin-bottom:16px;
}
.summary-product{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.summary-thumb{
  width:42px;height:42px;border-radius:10px;flex:none;
  background:linear-gradient(135deg,var(--orange),var(--orange-dark));
  display:flex;align-items:center;justify-content:center;
}
.summary-thumb [data-lucide]{width:20px;height:20px;color:#fff;}
.summary-product b{font-size:13.5px;color:var(--navy);display:block;}
.summary-product span{font-size:11.5px;color:var(--muted);}
.summary-lines{border-top:1px dashed var(--line);padding-top:10px;margin-bottom:12px;}

/* bundled-in freebie — deliberately NOT in the $ totals table (it's not a
   paid line item like the bump), just a clear "this is included" callout. */
.freebie-note{
  display:flex;align-items:center;gap:6px;font-size:12px;font-weight:800;color:#2d8a45;
  background:rgba(45,138,69,.1);border:1px solid rgba(45,138,69,.25);border-radius:9px;
  padding:7px 11px;margin:8px 0 12px;
}
.freebie-note [data-lucide]{width:14px;height:14px;flex:none;}
.summary-badges{display:flex;flex-wrap:wrap;gap:10px;font-size:11px;color:var(--muted);}
.summary-badges span{display:flex;align-items:center;gap:5px;}
.summary-badges [data-lucide]{width:13px;height:13px;color:var(--orange);}

/* ---- step card ---- */
.step-card{
  background:var(--white);border:1px solid var(--line);border-radius:16px;
  padding:18px;margin-bottom:14px;box-shadow:0 10px 24px rgba(26,43,76,.05);
  transition:opacity .25s;
}
.step-card.locked{opacity:.5;}
.step-card.locked .step-body{display:none;}
.step-card.completed .step-body{display:none;}
.step-card.completed .step-summary{display:block !important;}

.step-head{display:flex;align-items:center;gap:12px;}
.step-num{
  width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:none;
}
.step-card.current .step-num{background:var(--orange);}
.step-card.completed .step-num{background:var(--orange);}
.step-heading{flex:1;}
.step-heading h3{font-size:15.5px;color:var(--navy);margin-bottom:2px;}
.step-status{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.4px;}
.step-card.current .step-status{color:var(--orange-dark);}
.step-card.completed .step-status{color:var(--orange-dark);}
.step-edit{
  background:transparent;border:1.5px solid var(--line);border-radius:8px;
  padding:5px 11px;font-size:12px;font-weight:700;color:var(--navy);cursor:pointer;
}

.step-body{margin-top:16px;}
.step-hint{font-size:12px;color:var(--muted);margin-bottom:12px;line-height:1.5;}
.plain-price{display:flex;align-items:baseline;gap:8px;margin-bottom:14px;}
.plain-price b{font-size:24px;font-weight:800;color:var(--navy);}
.plain-price span{font-size:12px;color:var(--muted);text-decoration:line-through;}

/* order row (step 1) */
.order-row{display:flex;align-items:center;gap:10px;padding:11px;background:var(--cream);border-radius:12px;margin-bottom:12px;}
.order-thumb{
  width:44px;height:44px;border-radius:10px;flex:none;
  background:linear-gradient(135deg,var(--orange),var(--orange-dark));
  display:flex;align-items:center;justify-content:center;
}
.order-thumb [data-lucide]{width:20px;height:20px;color:#fff;}
.order-info{flex:1;display:flex;flex-direction:column;}
.order-info b{font-size:13px;color:var(--navy);}
.order-info span{font-size:11px;color:var(--muted);}
.order-qty{font-size:12px;color:var(--muted);}
.order-qty b{color:var(--navy);}
.order-price{display:flex;flex-direction:column;align-items:flex-end;line-height:1.3;}
.order-price .op-old{font-size:11px;color:var(--muted);text-decoration:line-through;}
.order-price .op-new{font-weight:800;color:var(--navy);font-size:13.5px;}

/* order bump — BIR Tax Compliance Starter Guide add-on */
.bump-card{
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  background:var(--cream);border:1.5px dashed var(--orange-light);border-radius:14px;
  padding:14px;margin-bottom:14px;
}
.bump-card[hidden]{display:none;}
.bump-check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;flex:1;}
.bump-check input{position:absolute;opacity:0;width:0;height:0;}
.bump-checkbox{
  width:20px;height:20px;border-radius:6px;border:1.5px solid var(--line);background:var(--white);
  flex:none;display:flex;align-items:center;justify-content:center;margin-top:1px;transition:.15s;
}
.bump-checkbox [data-lucide]{width:13px;height:13px;color:#fff;opacity:0;transition:.15s;}
.bump-check input:checked ~ .bump-checkbox{background:var(--orange);border-color:var(--orange);}
.bump-check input:checked ~ .bump-checkbox [data-lucide]{opacity:1;}
.bump-copy{display:flex;flex-direction:column;gap:3px;}
.bump-copy b{font-size:13px;color:var(--navy);}
.bump-copy span{font-size:11.5px;color:var(--muted);line-height:1.5;}
.bump-value{font-size:10.5px;font-weight:700;color:var(--orange-dark);white-space:nowrap;flex:none;}

.order-totals{margin-bottom:14px;}
.tline{display:flex;justify-content:space-between;font-size:12.5px;color:#4a4438;padding:5px 0;}
.tline.discount{color:var(--orange-dark);}
.tline.bump-line{color:var(--orange-dark);}
.tline.total{font-weight:800;font-size:14px;color:var(--navy);border-top:1px dashed var(--line);margin-top:4px;padding-top:9px;}
/* .tline's own display:flex ties in specificity with the UA [hidden] rule and
   wins on source order — without this, a hidden .tline stays visible. */
.tline[hidden]{display:none;}

.step-continue{width:100%;margin-top:20px;}
.step-continue [data-lucide]{width:16px;height:16px;}

/* form fields (step 2) */
.field-label{display:block;font-size:12px;font-weight:700;color:var(--navy);margin:12px 0 6px;}
.field-label .req{color:var(--danger);}
.field-label .opt{color:var(--muted);font-weight:500;}
.field-input{
  width:100%;padding:13px 14px;border-radius:10px;border:1.5px solid var(--line);
  font-family:inherit;font-size:14px;color:var(--navy);background:var(--cream);
}
.field-input:focus{outline:none;border-color:var(--orange);background:var(--white);}
.field-error{display:block;font-size:11.5px;color:var(--danger);margin-top:6px;font-weight:600;}
.field-error[hidden]{display:none;}

/* trust note */
.trust-note{
  display:flex;align-items:flex-start;gap:8px;font-size:11.5px;color:var(--muted);
  background:var(--cream);border-radius:10px;padding:10px 12px;margin-top:12px;line-height:1.5;
}
.trust-note [data-lucide]{width:15px;height:15px;color:var(--orange);flex:none;margin-top:1px;}

.legal-consent{font-size:10.5px;color:var(--muted);text-align:center;margin-top:10px;line-height:1.5;}
.legal-consent a{color:var(--orange-dark);font-weight:700;}

/* pending note (payment not completed at PayMongo) */
.step-pending-note:not([hidden]){
  display:flex;align-items:center;gap:8px;margin-top:12px;font-size:12px;color:#8a5a00;
  background:#fff3d9;border:1px solid #f3d99a;border-radius:10px;padding:10px 12px;
}
.step-pending-note [data-lucide]{width:15px;height:15px;color:#c98a00;flex:none;}

/* confirmed card inside step 3 */
.confirmed-card{
  margin-top:14px;background:var(--cream);border:1px solid var(--line);border-radius:14px;
  padding:16px;text-align:center;
}
.confirmed-card p{font-size:12.5px;color:#4a4438;line-height:1.55;margin:8px 0;}
.confirmed-card .edit-email-link{font-size:12px;color:var(--orange-dark);font-weight:700;}
.confirm-icon.small{font-size:0;margin-bottom:4px;}
.confirm-icon.small [data-lucide]{width:28px;height:28px;color:var(--orange);}

/* ================= PAYMENT (PayMongo redirect) ================= */
@keyframes spin{to{transform:rotate(360deg);}}
.btn-spin{animation:spin 1s linear infinite;}

.pay-error{
  color:var(--danger);font-size:11.5px;font-weight:600;margin-top:8px;
  animation:nudgeShake .35s ease;
}
@keyframes nudgeShake{
  0%,100%{transform:translateX(0);}
  25%{transform:translateX(-4px);}
  75%{transform:translateX(4px);}
}

/* ================= DESKTOP — mobile layout above stays untouched ================= */
@media(min-width:860px){
  .checkout-wrap{max-width:900px;}
  .progress-track{max-width:340px;}
  .checkout-grid{display:grid;grid-template-columns:1fr 360px;gap:32px;align-items:start;}
  .summary-col{order:2;}
  .steps-col{order:1;}
  .summary-toggle{display:none;}
  .summary-card[hidden]{display:block !important;}
  .summary-card{position:sticky;top:96px;}
}