:root{--orange:#f97316;}
*{box-sizing:border-box;margin:0;padding:0;}
body{min-height:100vh;}
.blob{position:fixed;border-radius:50%;filter:blur(140px);pointer-events:none;z-index:0;}
.blob-1{width:600px;height:600px;background:rgba(99,102,241,0.055);top:-200px;right:-200px;}
.blob-2{width:400px;height:400px;background:rgba(245,158,11,0.03);bottom:-100px;left:-100px;}

/* Header */
.checkout-header{background:var(--clr-surface);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:14px 24px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;}

/* Layout */
.checkout-main{max-width:1080px;margin:0 auto;padding:40px 20px 80px;position:relative;z-index:1;}

/* Cards */
.glass-card{background:var(--clr-card);border:1px solid var(--border);border-radius:18px;padding:26px;backdrop-filter:blur(12px);}
.section-title{font-size:0.88rem;font-weight:800;color:var(--text);margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--border);}

/* Form */
.form-label{font-size:0.78rem;font-weight:700;color:var(--clr-muted);margin-bottom:6px;}
.form-control,.form-select{background:rgba(255,255,255,0.05)!important;border:1px solid var(--border)!important;color:var(--text)!important;border-radius:10px!important;font-family:'Cairo',sans-serif!important;font-size:0.82rem!important;padding:10px 14px!important;}
.form-control:focus,.form-select:focus{box-shadow:0 0 0 3px rgba(99,102,241,0.15)!important;border-color:rgba(99,102,241,0.4)!important;}
.form-control::placeholder{color:var(--muted)!important;}
.form-select option{background:var(--clr-surface);color:var(--text);}

/* ── Preset Packages ── */
.pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px;}
.pkg-card{border:1px solid var(--border);border-radius:14px;padding:16px 14px;cursor:pointer;transition:all .2s;text-align:center;position:relative;}
.pkg-card:hover{border-color:rgba(99,102,241,0.4);background:rgba(99,102,241,0.05);}
.pkg-card.selected{border-color:var(--primary);background:rgba(99,102,241,0.1);box-shadow:0 0 0 1px rgba(99,102,241,0.3);}
.pkg-card .pkg-users{font-size:1.5rem;font-weight:900;color:var(--text);line-height:1;}
.pkg-card .pkg-label{font-size:0.65rem;color:var(--muted);margin-top:3px;margin-bottom:10px;}
.pkg-card .pkg-price{font-size:0.82rem;font-weight:800;color:var(--p2);}
.pkg-card .pkg-per{font-size:0.62rem;color:var(--muted);font-weight:400;}
.pkg-card .pkg-save{display:inline-block;font-size:0.62rem;font-weight:700;padding:2px 8px;border-radius:50px;margin-top:6px;}
.pkg-card .pkg-badge{position:absolute;top:-10px;right:50%;transform:translateX(50%);font-size:0.6rem;font-weight:800;padding:3px 10px;border-radius:50px;white-space:nowrap;}
.pkg-custom-row{display:flex;align-items:center;gap:12px;background:var(--primary-12);border:1px solid var(--border);border-radius:12px;padding:14px 16px;}

/* Seats counter */
.seats-counter{display:flex;align-items:center;border:1px solid rgba(99,102,241,0.3);border-radius:10px;overflow:hidden;}
.seats-btn{width:40px;height:40px;background:rgba(99,102,241,0.1);border:none;color:var(--p2);font-size:1.2rem;font-weight:900;cursor:pointer;transition:background .2s;display:flex;align-items:center;justify-content:center;}
.seats-btn:hover{background:rgba(99,102,241,0.25);}
.seats-btn:disabled{opacity:.3;cursor:not-allowed;}
.seats-input{width:64px;height:40px;background:var(--clr-surface);border:none;border-right:1px solid rgba(99,102,241,0.2);border-left:1px solid rgba(99,102,241,0.2);color:var(--text);font-size:1rem;font-weight:900;text-align:center;font-family:'Cairo',sans-serif;outline:none;}

/* Tier badges */
.tier-badge{display:inline-flex;align-items:center;gap:5px;font-size:0.7rem;font-weight:700;padding:3px 10px;border-radius:50px;}
.tier-no{background:rgba(16,185,129,0.12);color:#34d399;border:1px solid rgba(16,185,129,0.2);}
.tier-starter{background:rgba(16,185,129,0.12);color:#34d399;border:1px solid rgba(16,185,129,0.2);}
.tier-growth{background:rgba(99,102,241,0.12);color:var(--p2);border:1px solid rgba(99,102,241,0.2);}
.tier-enterprise{background:rgba(245,158,11,0.12);color:#fbbf24;border:1px solid rgba(245,158,11,0.2);}
.tier-custom{background:rgba(6,182,212,0.12);color:#67e8f9;border:1px solid rgba(6,182,212,0.2);}

/* Pricing tiers table */
.tier-row{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:10px;margin-bottom:6px;transition:background .2s;}
.tier-row.active-tier{background:rgba(99,102,241,0.1);border:1px solid rgba(99,102,241,0.2);}
.tier-row:not(.active-tier){background:var(--primary-12);border:1px solid transparent;}

/* ── Measurements Selector ── */
.assess-item{border:1px solid var(--border);border-radius:12px;padding:28px 16px 14px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:14px;margin-bottom:10px;overflow:hidden;}
.assess-item:hover{border-color:rgba(99,102,241,0.35);background:rgba(99,102,241,0.04);}
.assess-item.selected{border-color:var(--primary);background:rgba(99,102,241,0.09);}
.assess-item .assess-check{width:22px;height:22px;border-radius:6px;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;}
.assess-item.selected .assess-check{background:var(--primary);border-color:var(--primary);}
.assess-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;}
.assess-name{font-size:0.85rem;font-weight:700;color:var(--text);}
.assess-desc{font-size:0.7rem;color:var(--muted);margin-top:2px;}
.assess-price{font-size:0.88rem;font-weight:800;color:var(--p2);white-space:nowrap;}
.assess-per{font-size:0.65rem;color:var(--muted);font-weight:400;}

/* Payment */
.payment-method{border:1px solid var(--border);border-radius:12px;padding:14px;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:12px;}
.payment-method:hover,.payment-method.selected{border-color:rgba(99,102,241,0.4);background:rgba(99,102,241,0.06);}
.radio-dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--border);flex-shrink:0;transition:all .2s;display:flex;align-items:center;justify-content:center;}
.radio-dot.on{background:var(--primary);border-color:var(--p2);}
.radio-dot.on::after{content:'';width:6px;height:6px;border-radius:50%;background:#fff;display:block;}

/* Summary */
.order-summary{position:sticky;top:80px;}
.plan-summary{background:rgba(99,102,241,0.06);border:1px solid rgba(99,102,241,0.2);border-radius:14px;padding:18px;margin-bottom:16px;}
.summary-row{display:flex;justify-content:space-between;align-items:flex-start;font-size:0.82rem;padding:6px 0;gap:8px;}
.summary-row.total{font-size:1rem;font-weight:800;color:var(--text);border-top:1px solid var(--border);padding-top:12px;margin-top:6px;}
.summary-assess-row{display:flex;justify-content:space-between;font-size:0.78rem;padding:4px 0;color:var(--clr-muted);}
.btn-pay{width:100%;padding:14px;background:linear-gradient(135deg,var(--primary),#4f46e5);border:none;color:#fff;border-radius:12px;font-family:'Cairo',sans-serif;font-size:0.92rem;font-weight:800;cursor:pointer;transition:all .2s;}
.btn-pay:hover{opacity:.9;}
.btn-pay:disabled{opacity:.6;cursor:not-allowed;}
.trust-badges{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px;}
.trust-badge{display:flex;align-items:center;gap:6px;font-size:0.68rem;color:var(--muted);}

/* Steps */
.step-indicator{display:flex;align-items:center;margin-bottom:32px;}
.step{display:flex;align-items:center;gap:8px;font-size:0.78rem;font-weight:700;}
.step-num{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.72rem;font-weight:800;}
.step.active .step-num{background:var(--primary);color:#fff;}
.step.done .step-num{background:var(--green);color:#fff;}
.step.inactive .step-num{background:var(--primary-12);color:var(--muted);}
.step.active{color:var(--text);}.step.inactive{color:var(--muted);}
.step-line{flex:1;height:1px;background:var(--border);margin:0 8px;}

/* Slider */
input[type=range]{-webkit-appearance:none;width:100%;height:6px;border-radius:50px;background:var(--clr-border);outline:none;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--primary),#4f46e5);cursor:pointer;border:2px solid rgba(255,255,255,0.2);box-shadow:0 2px 8px rgba(99,102,241,0.4);}

/* Savings callout */
.savings-callout{background:rgba(16,185,129,0.08);border:1px solid rgba(16,185,129,0.2);border-radius:10px;padding:10px 14px;font-size:0.75rem;color:#34d399;margin-top:14px;}

.btn-details{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(99,102,241,0.85);
    background: rgba(99,102,241,0.08);
    border: 1px solid rgba(99,102,241,0.2);
    border-radius: 6px;
    padding: 3px 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: all .2s;
}
.btn-details:hover{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(99,102,241,0.85);
    background: rgba(99,102,241,0.18);
    border: 1px solid rgba(99,102,241,0.2);
    border-radius: 6px;
    padding: 3px 8px;
    text-decoration: none;
    white-space: nowrap;
    transition: all .2s;
}

/* ── Light Mode Overrides ── */
html[data-theme="light"] .glass-card { box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
html[data-theme="light"] .checkout-header { box-shadow: 0 1px 6px rgba(0,0,0,0.05); }
html[data-theme="light"] .pkg-card { box-shadow: 0 1px 6px rgba(0,0,0,0.04); }
html[data-theme="light"] .pkg-card.selected { box-shadow: 0 4px 16px rgba(99,102,241,0.12); }
html[data-theme="light"] .assess-item { box-shadow: 0 1px 4px rgba(0,0,0,0.03); }
html[data-theme="light"] .plan-summary { background: rgba(99,102,241,0.04); }
html[data-theme="light"] .form-control, html[data-theme="light"] .form-select { background: var(--clr-surface) !important; }

@media(max-width:768px){
    .pkg-grid{grid-template-columns:repeat(2,1fr);}
    .order-summary{position:static;}
}
@media(max-width:480px){
    .pkg-grid{grid-template-columns:1fr 1fr;}
}

@media(max-width:576px){
    .assess-item{gap:8px;padding:26px 10px 12px;flex-wrap:wrap;align-items:flex-start;}
    .assess-item .assess-check{width:18px;height:18px;flex-shrink:0;}
    .assess-icon{width:34px;height:34px;font-size:1rem;}
    .assess-name{font-size:0.8rem;}
    .assess-desc{font-size:0.65rem;}
    .assess-item > .text-end{flex-direction:row!important;justify-content:space-between!important;align-items:center!important;width:100%;flex:1 1 100%;margin-top:2px;}
    .assess-price{font-size:0.8rem;}
}