/* ── SHARED ── */
.order-hero{padding:100px 40px 0;background:var(--bg)}
.order-hero-inner{max-width:960px;margin:0 auto;text-align:center;padding-bottom:40px}
.order-badge{display:inline-flex;align-items:center;gap:7px;background:var(--orange-light);border:1px solid rgba(232,93,0,0.2);color:var(--orange);padding:5px 12px;border-radius:100px;font-size:11.5px;font-weight:600;margin-bottom:16px}
.badge-dot{width:5px;height:5px;background:var(--orange);border-radius:50%;animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.order-hero h1{font-size:clamp(32px,4vw,52px);font-weight:400;line-height:1.05;letter-spacing:-2px;color:var(--dark);font-family:'DM Serif Display',serif;margin-bottom:12px}
.order-hero h1 em{color:var(--orange);font-style:italic}
.order-hero-sub{font-size:14px;color:var(--gray);line-height:1.7}

/* Steps bar */
.steps-bar{background:var(--bg);padding:0 40px 32px}
.steps-inner{max-width:960px;margin:0 auto;display:flex;align-items:center}
.step-item{display:flex;align-items:center;gap:8px;flex:1}
.step-item:last-child{flex:none}
.step-num{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;transition:all .3s}
.step-num.active{background:var(--orange);color:#fff}
.step-num.done{background:#22c55e;color:#fff}
.step-num.pending{background:var(--bg2);color:var(--gray2);border:1.5px solid var(--border)}
.step-label{font-size:12px;font-weight:600;color:var(--gray2);white-space:nowrap}
.step-label.active{color:var(--dark)}
.step-line{flex:1;height:1px;background:var(--border);margin:0 12px;transition:background .3s}
.step-line.done{background:var(--orange)}

/* Main */
.order-main{background:var(--bg2);padding:0 40px 60px}
.order-inner{max-width:960px;margin:0 auto;display:grid;grid-template-columns:1fr 320px;gap:24px;padding-top:32px}

/* Step panels */
.step-panel{display:none}
.step-panel.active{display:block;animation:stepFade .28s ease}
@keyframes stepFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* Form sections */
.order-section{background:#fff;border:1px solid var(--border);border-radius:16px;padding:24px;margin-bottom:16px}
.section-title{font-size:15px;font-weight:700;color:var(--dark);margin-bottom:4px;display:flex;align-items:center;gap:8px}
.section-num{width:22px;height:22px;border-radius:50%;background:var(--orange);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.section-sub{font-size:13px;color:var(--gray);margin-bottom:20px;padding-left:30px}

/* Plan grid */
.plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.plan-card{border:1.5px solid var(--border);border-radius:10px;padding:12px;cursor:pointer;transition:all .2s;position:relative}
.plan-card:hover{border-color:rgba(232,93,0,.3)}
.plan-card.selected{border-color:var(--orange);background:var(--orange-light)}
.plan-card input[type=radio]{position:absolute;opacity:0;width:0;height:0}
.plan-name{font-size:12px;font-weight:700;color:var(--dark);margin-bottom:3px}
.plan-price{font-size:20px;font-weight:400;color:var(--dark);font-family:'DM Serif Display',serif;letter-spacing:-.5px;line-height:1}
.plan-price sub{font-size:11px;font-weight:400;color:var(--gray2);font-family:'Inter',sans-serif;vertical-align:baseline}
.plan-delivery{font-size:10.5px;color:var(--gray2);margin-top:3px}
.plan-card.selected .plan-name,.plan-card.selected .plan-price,.plan-card.selected .plan-delivery{color:var(--orange)}
.plan-card.selected .plan-price sub{color:rgba(232,93,0,.6)}
.plan-check{position:absolute;top:8px;right:8px;width:16px;height:16px;border-radius:50%;background:var(--orange);display:none;align-items:center;justify-content:center}
.plan-check svg{width:9px;height:9px;stroke:#fff;fill:none;stroke-width:2.5}
.plan-card.selected .plan-check{display:flex}

/* ── Delivery time picker ── */
.delivery-section{margin-top:16px}
.delivery-label-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.delivery-title{font-size:13px;font-weight:700;color:var(--dark)}
.delivery-hint{font-size:11.5px;color:var(--gray)}
.delivery-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.delivery-chip{border:1.5px solid var(--border);border-radius:10px;padding:10px 8px;cursor:pointer;text-align:center;transition:all .2s;background:#fff;position:relative}
.delivery-chip:hover{border-color:rgba(232,93,0,.35);background:rgba(232,93,0,.03)}
.delivery-chip.selected{border-color:var(--orange);background:var(--orange-light)}
.delivery-chip input[type=radio]{position:absolute;opacity:0;width:0;height:0}
.dc-hours{font-size:17px;font-weight:400;font-family:'DM Serif Display',serif;color:var(--dark);line-height:1;letter-spacing:-.3px}
.dc-label{font-size:10.5px;color:var(--gray2);margin-top:2px}
.dc-badge{font-size:9.5px;font-weight:700;padding:2px 6px;border-radius:4px;margin-top:4px;display:inline-block}
.dc-badge.fast{background:#fee2e2;color:#dc2626}
.dc-badge.normal{background:#dcfce7;color:#16a34a}
.dc-badge.std{background:#dbeafe;color:#2563eb}
.dc-badge.custom-plan{background:#ede9fe;color:#7c3aed}
.delivery-chip.selected .dc-hours,.delivery-chip.selected .dc-label{color:var(--orange)}

/* ── Format chips ── */
.format-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.format-chip{display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border:1.5px solid var(--border);border-radius:8px;cursor:pointer;font-size:12.5px;font-weight:700;color:var(--gray2);transition:all .2s;background:#fff;user-select:none}
.format-chip:hover{border-color:rgba(232,93,0,.3);color:var(--dark)}
.format-chip.selected{border-color:var(--orange);background:var(--orange-light);color:var(--orange)}
.format-chip svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.5}
.format-chip .fc-check{display:none}
.format-chip.selected .fc-check{display:inline}
.format-chip.selected .fc-dot{display:none}
.format-hint{font-size:11.5px;color:var(--gray2);margin-top:8px}

/* Form fields */
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.field-row.full{grid-template-columns:1fr}
.field-group{display:flex;flex-direction:column;gap:5px}
.field-label{font-size:12px;font-weight:600;color:var(--dark)}
.field-label span{font-weight:400;color:var(--gray2);font-size:11px}
.field-input{width:100%;padding:10px 14px;border:1.5px solid var(--border);border-radius:8px;font-size:14px;font-family:'Inter',sans-serif;color:var(--dark);outline:none;transition:border-color .2s;background:#fff;box-sizing:border-box}
.field-input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(232,93,0,.08)}
.field-textarea{resize:vertical;min-height:90px}

/* File upload */
.file-zone{border:2px dashed var(--orange);border-radius:10px;padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:all .2s;background:rgba(232,93,0,.02);text-align:center}
.file-zone:hover,.file-zone.drag-over{background:rgba(232,93,0,.06)}
.file-zone-icon{width:40px;height:40px;background:var(--orange-light);border-radius:10px;display:flex;align-items:center;justify-content:center}
.file-zone-icon svg{width:20px;height:20px;stroke:var(--orange);fill:none;stroke-width:1.8}
.file-zone-text{font-size:13.5px;font-weight:500;color:var(--dark)}
.file-zone-browse{color:var(--orange);font-weight:600;text-decoration:underline;cursor:pointer;background:none;border:none;font-size:13.5px;font-family:'Inter',sans-serif}
.file-zone-hint{font-size:11.5px;color:var(--gray2)}
.file-preview-box{display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(232,93,0,.06);border:1.5px solid rgba(232,93,0,.2);border-radius:8px;margin-top:8px}
.file-preview-box svg{width:18px;height:18px;stroke:var(--orange);fill:none;stroke-width:1.5;flex-shrink:0}
.file-preview-box span{font-size:13px;color:var(--dark);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.file-preview-remove{background:none;border:none;color:var(--gray2);font-size:18px;cursor:pointer;padding:0;line-height:1}
.file-preview-remove:hover{color:var(--orange)}

/* Sidebar */
.order-sidebar{position:sticky;top:100px;align-self:start}
.summary-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:20px;margin-bottom:12px}
.summary-title{font-size:14px;font-weight:700;color:var(--dark);margin-bottom:16px}
.summary-plan{display:flex;align-items:flex-start;justify-content:space-between;padding-bottom:14px;border-bottom:1px solid var(--border);margin-bottom:14px}
.summary-plan-name{font-size:14px;font-weight:700;color:var(--dark)}
.summary-plan-desc{font-size:12px;color:var(--gray);margin-top:2px}
.summary-plan-price{font-size:22px;font-weight:400;font-family:'DM Serif Display',serif;color:var(--dark);letter-spacing:-.5px}
.summary-line{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin-bottom:8px}
.summary-line-label{color:var(--gray)}
.summary-line-val{color:var(--dark);font-weight:600}
.summary-total{display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid var(--border);margin-top:4px}
.summary-total-label{font-size:14px;font-weight:700;color:var(--dark)}
.summary-total-val{font-size:24px;font-weight:400;font-family:'DM Serif Display',serif;color:var(--orange);letter-spacing:-.5px}
.trust-items{display:flex;flex-direction:column;gap:8px}
.trust-item{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--gray)}
.trust-item svg{width:14px;height:14px;stroke:var(--orange);fill:none;stroke-width:2;flex-shrink:0}
.continue-btn{width:100%;background:var(--orange);color:#fff;border:none;border-radius:10px;padding:15px;font-size:15px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;transition:background .2s;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px}
.continue-btn:hover{background:var(--orange2)}
.continue-btn svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2.5}

/* ── STEP 2: PAYMENT ── */
.payment-wrap{background:#fff;border:1px solid var(--border);border-radius:16px;padding:28px}
.payment-header{margin-bottom:20px}
.payment-header-title{font-size:17px;font-weight:700;color:var(--dark)}
.payment-header-sub{font-size:13px;color:var(--gray);margin-top:3px}
.pm-tabs{display:flex;gap:8px;margin-bottom:20px}
.pm-tab{flex:1;border:1.5px solid var(--border);border-radius:10px;padding:11px 8px;cursor:pointer;text-align:center;transition:all .2s;background:#fff;display:flex;flex-direction:column;align-items:center;gap:4px}
.pm-tab:hover{border-color:rgba(232,93,0,.3)}
.pm-tab.active{border-color:var(--orange);background:var(--orange-light)}
.pm-tab-icon{font-size:20px;line-height:1}
.pm-tab-label{font-size:11px;font-weight:600;color:var(--gray2)}
.pm-tab.active .pm-tab-label{color:var(--orange)}
.demo-notice{background:#fff8f0;border:1px solid rgba(232,93,0,.2);border-radius:8px;padding:10px 14px;font-size:12px;color:#9a4a00;display:flex;align-items:center;gap:8px;margin-bottom:18px}
.demo-notice svg{width:14px;height:14px;stroke:#e85d00;fill:none;stroke-width:2;flex-shrink:0}
.accepted-row{display:flex;align-items:center;gap:7px;margin-bottom:16px;flex-wrap:wrap}
.accepted-label{font-size:11px;color:var(--gray2);font-weight:500}
.card-logo{display:inline-flex;align-items:center;justify-content:center;padding:3px 7px;border-radius:4px;font-size:10px;font-weight:800;letter-spacing:.5px}
.card-logo.visa{background:#1a1f71;color:#fff}
.card-logo.mc{background:linear-gradient(90deg,#eb001b 40%,#f79e1b);color:#fff}
.card-logo.amex{background:#2e77bc;color:#fff}
.card-logo.disc{background:#f76f20;color:#fff}
.card-form{display:flex;flex-direction:column;gap:14px}
.card-field-group{display:flex;flex-direction:column;gap:5px}
.card-field-label{font-size:12px;font-weight:600;color:var(--dark)}
.card-field-wrap{position:relative}
.card-input{width:100%;padding:13px 16px;border:1.5px solid #d1d5db;border-radius:9px;font-size:15px;font-family:'Inter',sans-serif;color:var(--dark);outline:none;transition:border-color .2s,box-shadow .2s;background:#fff;box-sizing:border-box}
.card-input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(232,93,0,.1)}
.card-input::placeholder{color:#aaa;font-size:14px}
.card-row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.brand-badge{position:absolute;right:13px;top:50%;transform:translateY(-50%);font-size:10px;font-weight:800;padding:3px 7px;border-radius:4px;letter-spacing:.5px;pointer-events:none}
.brand-badge.visa{background:#1a1f71;color:#fff}
.brand-badge.mc{background:linear-gradient(135deg,#eb001b,#f79e1b);color:#fff}
.brand-badge.amex{background:#2e77bc;color:#fff}
.brand-badge.card{background:var(--bg2);color:var(--gray2);border:1px solid var(--border)}
.cvv-hint{position:absolute;right:13px;top:50%;transform:translateY(-50%);color:var(--gray2);cursor:help;line-height:0}
.cvv-hint svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
.pay-btn{width:100%;background:var(--orange);color:#fff;border:none;border-radius:10px;padding:16px;font-size:16px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;transition:background .2s;display:flex;align-items:center;justify-content:center;gap:9px;margin-top:20px}
.pay-btn:hover{background:var(--orange2)}
.pay-btn:disabled{background:rgba(232,93,0,.4);cursor:not-allowed}
.pay-btn-lock{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2.5;flex-shrink:0}
.security-row{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;font-size:11.5px;color:var(--gray2)}
.security-row svg{width:12px;height:12px;stroke:var(--gray2);fill:none;stroke-width:2;flex-shrink:0}
.alt-panel{background:var(--bg2);border:1.5px solid var(--border);border-radius:10px;padding:22px;text-align:center}
.alt-panel-icon{font-size:36px;margin-bottom:10px}
.alt-panel-title{font-size:14px;font-weight:700;color:var(--dark);margin-bottom:4px}
.alt-panel-sub{font-size:12.5px;color:var(--gray);margin-bottom:8px}
.alt-demo-tag{display:inline-block;font-size:11px;color:var(--gray2);background:#fff;border-radius:5px;padding:5px 10px}
.bank-panel-left{text-align:left}
.bank-row{display:flex;justify-content:space-between;font-size:13px;padding:8px 0;border-bottom:1px solid var(--border)}
.bank-row:last-child{border-bottom:none}
.bank-key{color:var(--gray)}
.bank-val{font-weight:600;color:var(--dark)}
.review-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:20px;margin-bottom:12px}
.review-title{font-size:14px;font-weight:700;color:var(--dark);margin-bottom:14px}
.review-section{padding-bottom:12px;border-bottom:1px solid var(--bg2);margin-bottom:12px}
.review-section:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.review-lbl{font-size:10px;font-weight:700;color:#bbb;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.review-val{font-size:13.5px;font-weight:600;color:var(--dark);line-height:1.4;word-break:break-all}
.review-sub{font-size:12px;color:var(--gray);margin-top:2px}
.review-total{font-size:24px;font-weight:400;font-family:'DM Serif Display',serif;color:var(--orange);letter-spacing:-.5px}
.back-link{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;color:var(--gray2);cursor:pointer;background:none;border:none;font-family:'Inter',sans-serif;padding:0;transition:color .2s;margin-top:2px}
.back-link:hover{color:var(--dark)}
.back-link svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.5}
.form-status-msg{padding:12px 16px;border-radius:8px;font-size:13px;font-weight:500;text-align:center;margin-top:12px;display:none}
.form-status-msg.error{display:block;background:#fee2e2;color:#dc2626;border:1px solid #fca5a5}

/* ── Quote panel (custom plan) ── */
.quote-wrap{max-width:640px;margin:0 auto;padding-top:32px;padding-bottom:60px}
.quote-card{background:#fff;border:1px solid var(--border);border-radius:20px;overflow:hidden}
.quote-card-head{background:#111;padding:28px 32px}
.quote-card-head-title{font-size:22px;font-weight:700;font-family:'Inter',sans-serif;color:#fff;letter-spacing:-.5px;margin-bottom:4px}
.quote-card-head-title em{color:var(--orange);font-style:normal}
.quote-card-head-sub{font-size:13px;color:rgba(255,255,255,.45);line-height:1.6}
.quote-card-body{padding:28px 32px}
.quote-field-group{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.quote-label{font-size:12px;font-weight:600;color:var(--dark)}
.quote-label span{font-weight:400;color:var(--gray2);font-size:11px}
.quote-input{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:9px;font-size:14px;font-family:'Inter',sans-serif;color:var(--dark);outline:none;transition:border-color .2s;background:#fff;box-sizing:border-box}
.quote-input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(232,93,0,.08)}
.quote-textarea{resize:vertical;min-height:100px}
.quote-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.quote-file-drop{border:2px dashed var(--border);border-radius:10px;padding:20px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:all .2s;background:var(--bg2);margin-bottom:14px}
.quote-file-drop:hover{border-color:var(--orange);background:rgba(232,93,0,.03)}
.quote-file-icon{width:38px;height:38px;background:var(--orange-light);border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.quote-file-icon svg{width:18px;height:18px;stroke:var(--orange);fill:none;stroke-width:1.8}
.quote-file-text{font-size:13px;color:var(--gray)}
.quote-file-browse{color:var(--orange);font-weight:600;text-decoration:underline;cursor:pointer;background:none;border:none;font-size:13px;font-family:'Inter',sans-serif}
.quote-file-hint{font-size:11.5px;color:var(--gray2);margin-top:2px}
.quote-file-preview{display:flex;align-items:center;gap:10px;padding:10px 14px;background:rgba(232,93,0,.06);border:1.5px solid rgba(232,93,0,.2);border-radius:8px;margin-bottom:14px}
.quote-file-preview svg{width:16px;height:16px;stroke:var(--orange);fill:none;stroke-width:1.5;flex-shrink:0}
.quote-file-preview span{font-size:13px;color:var(--dark);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.quote-file-remove{background:none;border:none;color:var(--gray2);font-size:18px;cursor:pointer;padding:0;line-height:1}
.quote-submit-btn{width:100%;background:#111;color:#fff;border:none;border-radius:10px;padding:15px;font-size:15px;font-weight:700;cursor:pointer;font-family:'Inter',sans-serif;transition:background .2s;display:flex;align-items:center;justify-content:center;gap:8px}
.quote-submit-btn:hover{background:var(--orange)}
.quote-submit-btn:disabled{background:rgba(0,0,0,.2);cursor:not-allowed}
.quote-status{margin-top:12px;font-size:13px;font-weight:500;text-align:center;min-height:18px;padding:10px;border-radius:8px;display:none}
.quote-status.success{display:block;background:#dcfce7;color:#16a34a;border:1px solid #86efac}
.quote-status.error{display:block;background:#fee2e2;color:#dc2626;border:1px solid #fca5a5}
.quote-trust{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:20px;flex-wrap:wrap}
.quote-trust-item{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--gray)}
.quote-trust-item svg{width:13px;height:13px;stroke:var(--orange);fill:none;stroke-width:2}

/* Hide steps bar and delivery chips when custom */
.custom-mode .steps-bar{display:none}
.custom-mode .order-main{background:var(--bg)}

@media(max-width:768px){
  .order-hero{padding:80px 20px 0}
  .steps-bar{padding:0 20px 24px}
  .order-main{padding:0 20px 40px}
  .order-inner{grid-template-columns:1fr}
  .order-sidebar{position:static}
  .plan-grid{grid-template-columns:1fr 1fr}
  .delivery-grid{grid-template-columns:repeat(2,1fr)}
  .field-row{grid-template-columns:1fr}
  .card-row-2{grid-template-columns:1fr}
  .quote-row{grid-template-columns:1fr}
  .quote-card-head,.quote-card-body{padding:22px 20px}
}
@media(max-width:480px){
  .steps-inner{gap:0}
  .step-label{display:none}
  .delivery-grid{grid-template-columns:repeat(2,1fr)}
}