/* ========================================================
   Checkout pages (Billing / Review / Receipt)
   Drop-in add-on for the Blinds Express template.
   Depends on custom.css for base fonts, header, footer.
   ======================================================== */

/* --- Progress stepper --- */
.checkout-steps{ display:flex; justify-content:center; align-items:center; gap:0; margin:10px 0 35px; flex-wrap:wrap;}
.checkout-steps .step{ display:flex; align-items:center; gap:10px; color:#8a8a8a; font-size:13px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;}
.checkout-steps .step .num{ width:34px; height:34px; border-radius:50%; background:#e6e9ee; color:#8a8a8a; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; letter-spacing:0; transition:all .2s;}
.checkout-steps .step.done .num{ background:#0f1c2e; color:#fff;}
.checkout-steps .step.done .num i{ font-size:13px;}
.checkout-steps .step.done{ color:#0f1c2e;}
.checkout-steps .step.active .num{ background:#c8102e; color:#fff; box-shadow:0 0 0 4px rgba(200,16,46,0.15);}
.checkout-steps .step.active{ color:#0f1c2e;}
.checkout-steps .sep{ width:60px; height:2px; background:#e6e9ee; margin:0 14px;}
.checkout-steps .sep.done{ background:#0f1c2e;}
@media (max-width: 767px){
    .checkout-steps .step{ font-size:11px; letter-spacing:1px;}
    .checkout-steps .step .num{ width:28px; height:28px; font-size:12px;}
    .checkout-steps .sep{ width:24px; margin:0 6px;}
}

/* --- Section headers (black bars) --- */
.section-block{ margin-bottom:22px; background:#fff; border:1px solid #e5e8ec;}
.section-head{ background:#111; color:#fff; padding:14px 22px; display:flex; justify-content:space-between; align-items:center;}
.section-head h5{ margin:0; padding:0; font-size:15px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:#fff;}
.section-head .collapse-toggle{ color:#fff; font-size:13px; font-weight:500; text-transform:none; letter-spacing:0.5px; cursor:pointer; background:none; border:0; padding:0;}
.section-head .collapse-toggle i{ margin-left:6px; transition:transform .2s;}
.section-head .collapse-toggle.collapsed i{ transform:rotate(180deg);}
.section-body{ padding:26px 22px;}
@media (max-width: 575px){
    .section-head{ padding:12px 16px;}
    .section-head h5{ font-size:13px;}
    .section-body{ padding:20px 16px;}
}

/* --- Form rows --- */
.form-row-2{ display:grid; grid-template-columns: 170px 1fr 170px 1fr; gap:14px 18px; align-items:center; margin-bottom:14px;}
.form-row-2 label{ font-size:14px; font-weight:500; color:#0f1c2e; margin:0;}
.form-row-2 label .req{ color:#c8102e;}
.form-row-2 .field-hint{ font-size:11px; color:#7a8291; margin-top:4px; grid-column: 2 / 3;}
.form-row-2 .field-hint.right{ grid-column: 4 / 5;}
.form-row-2 .form-control, .form-row-2 select{ font-size:14px; border-radius:.375rem; border:1px solid #ced4da; padding:6px 12px; background-color:#fff;}
.form-row-2 input.form-control, .form-row-2 select{ height:38px;}
.form-row-2 select.form-select{ padding-right:36px; background-position: right 12px center; background-repeat: no-repeat; background-size: 16px 12px;}
.form-row-2 .form-control:focus, .form-row-2 select:focus{ border-color:#86b7fe; box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25); outline:none;}
@media (max-width: 991px){
    .form-row-2{ grid-template-columns: 1fr; gap:6px;}
    .form-row-2 label{ margin-top:6px;}
    .form-row-2 .field-hint, .form-row-2 .field-hint.right{ grid-column: 1;}
}

/* --- Billing-address different toggle --- */
.diff-billing{ display:flex; align-items:center; gap:10px; padding:14px 0 4px; font-size:14px; color:#0f1c2e; font-weight:500;}
.diff-billing input[type=checkbox]{ width:18px; height:18px; accent-color:#0f6bd4;}

/* --- Order Summary table (inline on Billing) --- */
.order-table{ width:100%; border-collapse:collapse; margin-top:6px;}
.order-table thead th{ background:#f2f4f7; padding:12px 14px; font-size:13px; font-weight:600; color:#0f1c2e; border-bottom:1px solid #e5e8ec; text-transform:none;}
.order-table tbody td{ padding:16px 14px; font-size:14px; color:#222; border-bottom:1px solid #eef1f5; vertical-align:top;}
.order-table .prod-thumb{ width:74px; height:74px; object-fit:cover; border:1px solid #e5e8ec; background:#fafbfc;}
.order-table .prod-name{ font-weight:600; color:#0f1c2e; margin-bottom:6px; font-size:15px;}
.order-table .prod-choices{ font-size:12.5px; color:#3b4353; line-height:1.75;}
.order-table .prod-choices strong{ color:#0f1c2e; font-weight:600;}
.order-table .old-price{ color:#c8102e; text-decoration:line-through; font-size:13px;}
.order-table .new-price{ color:#0f6bd4; font-weight:700; font-size:15px;}
.order-table .col-price, .order-table .col-qty{ text-align:center; white-space:nowrap;}
@media (max-width: 575px){
    .order-table thead{ display:none;}
    .order-table tbody td{ display:block; border:0; padding:6px 0;}
    .order-table tbody tr{ display:block; border-bottom:1px solid #eef1f5; padding:16px 0;}
    .order-table .col-qty::before{ content:"Qty: "; font-weight:600;}
    .order-table .col-price::before{ content:"Price: "; font-weight:600;}
}

/* --- Order price totals --- */
.order-totals{ padding:6px 22px 22px;}
.order-totals .row-line{ display:flex; justify-content:flex-end; align-items:center; gap:60px; padding:9px 0; font-size:15px; color:#222;}
.order-totals .row-line .lbl{ color:#3b4353; font-weight:500;}
.order-totals .row-line .val{ font-weight:600; color:#0f1c2e; min-width:100px; text-align:right;}
.order-totals .row-line.grand{ border-top:1px solid #e5e8ec; margin-top:8px; padding-top:16px; font-size:20px;}
.order-totals .row-line.grand .lbl, .order-totals .row-line.grand .val{ color:#0f1c2e; font-weight:800;}
.order-totals .tariff-info{ color:#0f6bd4; cursor:help;}
.order-totals .free-tag{ color:#0f8f4a; font-weight:700; letter-spacing:0.5px;}
@media (max-width: 575px){
    .order-totals .row-line{ gap:20px;}
}

/* --- Payment info --- */
.agree-row{ display:flex; align-items:center; gap:10px; font-size:14px; margin-bottom:20px; color:#0f1c2e;}
.agree-row input[type=checkbox]{ width:18px; height:18px; accent-color:#0f6bd4;}
.agree-row a{ color:#0f6bd4; text-decoration:none;}
.agree-row a:hover{ text-decoration:underline;}
.pay-methods{ display:flex; flex-wrap:wrap; gap:18px; margin-bottom:24px;}
.pay-methods .pay-opt{ flex:1 1 260px; border:1px solid #cfd4dc; padding:14px 18px; display:flex; align-items:center; gap:14px; cursor:pointer; background:#fff; transition:all .15s; border-radius:2px;}
.pay-methods .pay-opt input{ width:18px; height:18px; accent-color:#c8102e;}
.pay-methods .pay-opt.selected{ border-color:#0f1c2e; background:#f6f8fb; box-shadow:inset 0 0 0 1px #0f1c2e;}
.pay-methods .pay-opt img{ height:22px;}
.pay-methods .pay-opt .paypal-logo{ height:26px;}
.card-fields{ display:grid; grid-template-columns: 170px 1fr; gap:14px 18px; align-items:start; margin-bottom:8px;}
.card-fields label{ font-size:14px; font-weight:500; color:#0f1c2e; padding-top:11px;}
.card-fields .card-input-wrap{ max-width:340px;}
.card-fields .card-input-wrap input{ width:100%; height:38px; border:1px solid #ced4da; padding:6px 12px; font-size:14px; letter-spacing:1.5px; border-radius:.375rem; background-color:#fff;}
.card-fields .card-input-wrap input:focus{ border-color:#86b7fe; box-shadow:0 0 0 0.25rem rgba(13,110,253,.25); outline:none;}
.card-fields .card-input-wrap .card-icons{ display:flex; gap:8px; margin-top:8px;}
.card-fields .card-input-wrap .card-icons img{ height:20px;}
.card-fields .expiry{ display:flex; gap:10px; max-width:340px;}
.card-fields .expiry select{ height:38px; border:1px solid #ced4da; padding:6px 12px; font-size:14px; flex:1; border-radius:.375rem; background-color:#fff;}
.card-fields .expiry select.form-select{ padding-right:36px; background-position: right 12px center; background-repeat: no-repeat; background-size: 16px 12px;}
.card-fields .expiry select:focus{ border-color:#86b7fe; box-shadow:0 0 0 0.25rem rgba(13,110,253,.25); outline:none;}
.card-fields .cvv-wrap{ display:flex; gap:16px; align-items:flex-start;}
.card-fields .cvv-wrap input{ width:120px;}
.card-fields .cvv-help{ display:flex; flex-direction:column; align-items:center; gap:4px; font-size:11px; color:#7a8291;}
.card-fields .cvv-help .cvv-illus{ width:120px; height:70px; background:linear-gradient(135deg,#3a6ea5 0%,#173a5e 100%); border-radius:6px; display:flex; align-items:center; justify-content:flex-end; padding:0 10px; position:relative;}
.card-fields .cvv-help .cvv-illus::before{ content:""; position:absolute; top:14px; left:0; right:0; height:12px; background:#000;}
.card-fields .cvv-help .cvv-illus::after{ content:"CVV"; position:absolute; bottom:8px; left:12px; color:#fff; font-size:9px; font-weight:700; letter-spacing:1px;}
.card-fields .cvv-help .cvv-illus span{ background:#fff; color:#c8102e; font-weight:700; font-size:11px; padding:2px 6px; border-radius:2px; position:relative; z-index:1;}
.paypal-note{ padding:16px; background:#fef8e8; border:1px dashed #e5b850; color:#7a5a10; font-size:13px; line-height:1.6;}
@media (max-width: 767px){
    .card-fields{ grid-template-columns: 1fr; gap:6px;}
    .card-fields label{ padding-top:0; margin-top:6px;}
    .card-fields .cvv-wrap{ flex-direction:column;}
}

/* --- Confidence sidebar --- */
.confidence-box{ background:#fff; border:1px solid #e5e8ec;}
.confidence-box .conf-head{ background:#111; color:#fff; padding:14px 22px; font-size:15px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase;}
.confidence-box .conf-body{ padding:24px 22px; font-size:13px; line-height:1.6; color:#3b4353;}
.confidence-box .conf-body .lock{ display:flex; align-items:center; gap:12px; margin-bottom:14px;}
.confidence-box .conf-body .lock .lock-icon{ width:42px; height:42px; background:#f5be3a; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-size:19px;}
.confidence-box .conf-body .lock .lock-txt{ font-size:11.5px; font-weight:600; text-transform:uppercase; letter-spacing:1px; color:#0f1c2e; line-height:1.4;}
.confidence-box .conf-body a.link-blue{ color:#0f6bd4; font-weight:600; text-decoration:none;}
.confidence-box .conf-body a.link-blue:hover{ text-decoration:underline;}
.bbb-badge{ display:flex; flex-direction:column; align-items:center; padding:14px 8px; margin:10px 0; border:1px solid #dfe4ea; background:#fafbfc;}
.bbb-badge .b-logo{ width:96px; height:60px; background:#005ea6; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:22px; letter-spacing:2px; border-radius:4px; position:relative;}
.bbb-badge .b-logo::after{ content:"ACCREDITED CHARITY"; position:absolute; bottom:-14px; font-size:8px; color:#005ea6; background:#fafbfc; padding:0 4px; font-weight:700;}

/* --- Submit button --- */
.submit-order-btn{ background:#7db440; color:#fff; border:0; padding:16px 44px; font-size:14px; font-weight:700; text-transform:uppercase; letter-spacing:2px; border-radius:2px; cursor:pointer; transition:background .15s;}
.submit-order-btn:hover{ background:#65972f;}
.submit-bar{ display:flex; justify-content:space-between; align-items:center; padding:22px; border-top:1px solid #e5e8ec; background:#fafbfc;}
.submit-bar .policy-links a{ color:#0f6bd4; font-size:13px; margin-right:14px; text-decoration:none;}
.submit-bar .policy-links a:hover{ text-decoration:underline;}
@media (max-width: 575px){
    .submit-bar{ flex-direction:column; gap:16px; align-items:stretch;}
    .submit-order-btn{ width:100%; padding:16px;}
}

/* --- Review page --- */
.review-summary-block{ background:#fff; border:1px solid #e5e8ec; margin-bottom:22px;}
.review-summary-block .rev-head{ background:#111; color:#fff; padding:14px 22px; display:flex; justify-content:space-between; align-items:center;}
.review-summary-block .rev-head h5{ margin:0; padding:0; font-size:15px; font-weight:600; letter-spacing:1.5px; text-transform:uppercase; color:#fff;}
.review-summary-block .rev-head a.edit-link{ color:#fff; font-size:12px; text-transform:uppercase; letter-spacing:1px; font-weight:500; text-decoration:none; border:1px solid rgba(255,255,255,0.4); padding:5px 14px; border-radius:2px;}
.review-summary-block .rev-head a.edit-link:hover{ background:rgba(255,255,255,0.1);}
.review-summary-block .rev-body{ padding:22px; font-size:14px; color:#3b4353; line-height:1.75;}
.review-summary-block .rev-body strong{ color:#0f1c2e; display:block; margin-bottom:4px;}
.rev-3col{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:18px;}
@media (max-width: 767px){ .rev-3col{ grid-template-columns: 1fr; gap:6px;} }
.rev-2col{ display:grid; grid-template-columns: 1fr 1fr; gap:18px;}
@media (max-width: 767px){ .rev-2col{ grid-template-columns: 1fr; gap:6px;} }
.checkout-page-title{ font-family:'DM Serif Display', serif; margin-bottom:6px;}
.checkout-page-subtitle{ color:#3b4353; margin-bottom:26px;}
.place-order-btn{ background:#c8102e; color:#fff; border:0; padding:20px 60px; font-size:15px; font-weight:800; text-transform:uppercase; letter-spacing:2.5px; border-radius:2px; cursor:pointer; transition:all .15s; width:100%;}
.place-order-btn:hover{ background:#a30d25; transform:translateY(-1px); box-shadow:0 6px 18px rgba(200,16,46,0.25);}

/* --- Receipt page --- */
.receipt-hero{ text-align:center; padding:22px 0 30px;}
.receipt-hero .check-badge{ width:76px; height:76px; border-radius:50%; background:#e8f5ec; display:inline-flex; align-items:center; justify-content:center; margin-bottom:16px;}
.receipt-hero .check-badge i{ font-size:36px; color:#1c8845;}
.receipt-hero h1{ font-family:'DM Serif Display', serif; font-size:38px; color:#0f1c2e; margin-bottom:8px; padding-bottom:0;}
.receipt-hero p{ color:#3b4353; font-size:15px; margin:0;}
.receipt-meta{ background:#fff; border:1px solid #e5e8ec; padding:22px; margin-bottom:22px; display:grid; grid-template-columns: 1fr 1fr 1fr; gap:18px;}
.receipt-meta .m-item .m-lbl{ font-size:11px; text-transform:uppercase; letter-spacing:1.5px; color:#7a8291; font-weight:600; margin-bottom:4px;}
.receipt-meta .m-item .m-val{ font-size:18px; font-weight:700; color:#0f1c2e;}
.receipt-meta .m-item .m-val.status-ok{ color:#1c8845;}
.receipt-meta .m-item .m-val.status-cancel{ color:#c8102e;}
@media (max-width: 767px){ .receipt-meta{ grid-template-columns: 1fr;} }
.shipping-note{ background:#f6f8fb; border-left:3px solid #0f1c2e; padding:18px 22px; margin-bottom:22px; font-size:13.5px; line-height:1.7; color:#3b4353;}
.shipping-note h6{ font-family:'DM Serif Display', serif; font-size:20px; margin:0 0 10px; color:#0f1c2e; text-decoration:underline; padding:0;}
.shipping-note strong{ color:#0f1c2e;}
.action-bar{ display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; justify-content:center;}
.action-bar .btn-line{ background:#fff; border:1px solid #0f1c2e; color:#0f1c2e; padding:14px 26px; text-transform:uppercase; font-size:12px; font-weight:600; letter-spacing:2px; text-decoration:none; border-radius:2px; cursor:pointer;}
.action-bar .btn-line:hover{ background:#0f1c2e; color:#fff;}
.action-bar .btn-fill{ background:#0f1c2e; color:#fff; border:1px solid #0f1c2e; padding:14px 26px; text-transform:uppercase; font-size:12px; font-weight:600; letter-spacing:2px; text-decoration:none; border-radius:2px; cursor:pointer;}
.action-bar .btn-fill:hover{ background:#c8102e; border-color:#c8102e;}

/* --- Print styles for receipt --- */
@media print{
    header, footer, .marquee-wrapper, .checkout-steps, .action-bar, .searchForm{ display:none !important;}
    body{ background:#fff;}
    .innerpage-contant{ padding:0;}
    .section-block, .receipt-meta, .shipping-note{ break-inside:avoid;}
}