/* ── Step indicator ─────────────────────────────────────────────────────── */
.steps-bar {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 24px;
    background: #fff;
    border: 1px solid #e5e9f0;
    border-radius: 10px;
    padding: 12px 20px;
}
.step-item {
    display: flex; align-items: center; gap: 8px;
    flex: 1; position: relative;
}
.step-item:not(:last-child)::after {
    content: '';
    position: absolute; right: 0; top: 50%;
    transform: translateY(-50%);
    width: 1px; height: 24px;
    background: #e5e9f0;
}
.step-num {
    width: 26px; height: 26px; border-radius: 50%;
    background: #f1f5f9; color: #94a3b8;
    font-size: 12px; font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: all .2s;
}
.step-item.active .step-num  { background: #4f46e5; color: #fff; }
.step-item.done .step-num    { background: #10b981; color: #fff; }
.step-label { font-size: 12px; color: #94a3b8; font-weight: 500; }
.step-item.active .step-label { color: #4f46e5; }
.step-item.done .step-label  { color: #10b981; }
 
/* ── Cards ──────────────────────────────────────────────────────────────── */
.card {
    border: 1px solid #e5e9f0;
    border-radius: 10px;
    box-shadow: none;
    margin-bottom: 16px;
}
.card-header {
    background: #fafbff;
    border-bottom: 1px solid #e5e9f0;
    padding: 12px 18px;
    border-radius: 10px 10px 0 0 !important;
    display: flex; align-items: center; gap: 8px;
}
.card-header .card-icon {
    width: 28px; height: 28px; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
}
.card-header h6 { margin: 0; font-size: 13px; font-weight: 600; color: #1e293b; }
.card-body { padding: 16px 18px; }
 
/* ── Form controls ──────────────────────────────────────────────────────── */
label { font-size: 11px; font-weight: 600; color: #64748b;
        text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px; }
.form-control, .form-select {
    font-size: 12px; height: 32px; padding: 4px 10px;
    border-color: #e2e8f0; border-radius: 6px;
    color: #1e293b;
}
.form-control:focus, .form-select:focus {
    border-color: #818cf8; box-shadow: 0 0 0 3px rgba(99,102,241,.12);
}
textarea.form-control { height: auto; }
 
/* ── Customer lookup ────────────────────────────────────────────────────── */
.lookup-wrap { position: relative; }
.lookup-wrap .spinner {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    display: none;
}
#customerFound {
    display: none;
    background: #f0fdf4; border: 1px solid #bbf7d0;
    border-radius: 6px; padding: 8px 12px;
    font-size: 12px; color: #166534;
}
 
/* ── Plan cards ─────────────────────────────────────────────────────────── */
.plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.plan-card {
    border: 2px solid #e5e9f0; border-radius: 10px;
    padding: 14px; cursor: pointer; transition: all .2s;
    position: relative; background: #fff;
}
.plan-card:hover { border-color: #818cf8; background: #fafbff; }
.plan-card.selected { border-color: #4f46e5; background: #eef2ff; }
.plan-card input[type=radio] { position: absolute; opacity: 0; }
.plan-card .plan-badge {
    font-size: 10px; font-weight: 700; letter-spacing: .5px;
    background: #e0e7ff; color: #3730a3;
    padding: 2px 8px; border-radius: 20px; display: inline-block;
    margin-bottom: 8px;
}
.plan-card.selected .plan-badge { background: #4f46e5; color: #fff; }
.plan-card .plan-name { font-size: 13px; font-weight: 600; color: #1e293b; margin-bottom: 4px; }
.plan-card .plan-period { font-size: 12px; color: #64748b; }
.plan-card .plan-period strong { color: #4f46e5; }
.plan-card .check-icon {
    position: absolute; top: 10px; right: 10px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #4f46e5; color: #fff;
    display: none; align-items: center; justify-content: center;
    font-size: 10px;
}
.plan-card.selected .check-icon { display: flex; }
 
/* ── Summary bar ────────────────────────────────────────────────────────── */
#summaryBar {
    position: sticky; bottom: 0;
    background: #fff; border-top: 1px solid #e5e9f0;
    padding: 14px 24px;
    display: flex; align-items: center; gap: 16px;
    margin-top: 24px;
}
#summaryBar .summary-item { font-size: 12px; color: #64748b; }
#summaryBar .summary-item strong { color: #1e293b; display: block; font-size: 13px; }
#summaryBar .divider { width: 1px; height: 32px; background: #e5e9f0; }
.btn-submit {
    margin-left: auto;
    background: #4f46e5; color: #fff; border: none;
    padding: 8px 24px; border-radius: 8px;
    font-size: 13px; font-weight: 600;
    display: flex; align-items: center; gap: 8px;
    transition: background .2s;
}
.btn-submit:hover { background: #4338ca; color: #fff; }
.btn-submit:disabled { background: #a5b4fc; }


.select2-container--bootstrap4 .select2-selection--single,
.select2-container--bootstrap4 .select2-selection--multiple  {
    height: 35px !important;
    min-height: 35px !important;
    font-size: 12px !important;
    
}

.select2-container--bootstrap4 .select2-selection__rendered {
    /*line-height: 24px !important;*/
    height: 24px !important;
    margin-top: 0px !important;
    font-size: 12px !important;
}

.select2-container--bootstrap4 .select2-selection__arrow {
    height: 28px !important;
}

.select2-results__option {
    font-size: 12px !important;
}
.select2-container--bootstrap4.select2-container--focus .select2-selection,
.select2-container--bootstrap4 .select2-selection {
    font-size: 12px !important;
}


/* ── Category checkboxes ──────────────────────────────────────────────── */
/*.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}*/
.cat-card{
    /*border:0.5px solid var(--color-border-secondary);
    border-radius:var(--border-radius-md);padding:10px 12px;
    cursor:pointer;transition:all .15s;position:relative;
    background:var(--color-background-primary);display:flex;align-items:center;gap:10px;user-select:none*/

    border: 0.5px solid var(--color-border-secondary);
    border-radius: var(--border-radius-md);
    padding: 10px 12px;
    cursor: pointer;
    transition: all .15s;
    background: var(--color-background-primary);
    display: flex;         /* flex stays — for checkbox + text alignment inside card */
    align-items: center;
    gap: 10px;
    user-select: none;
    width: 100%;           /* fill the col-md-3 column */
}
.cat-card:hover{border-color:#7F77DD;background:#EEEDFE}
.cat-card.sel{border:1.5px solid #534AB7;background:#EEEDFE}
/*.cat-card input[type=checkbox]{display:none}*/
.cat-card input[type=checkbox] {
    width: 15px;
    height: 15px;
    accent-color: #534AB7;   /* colours the tick to match your theme */
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}
/*.cat-chk{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--color-border-secondary);background:var(--color-background-primary);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s}
.cat-card.sel .cat-chk{background:#534AB7;border-color:#534AB7;color:#fff}
.cat-card.sel .cat-chk i{display:block}
.cat-chk i{display:none;font-size:10px}*/
.cat-info{flex:1;min-width:0}
.cat-name{font-size:12px;font-weight:500;color:var(--color-text-primary);}
.cat-sub{font-size:10px;color:var(--color-text-tertiary);margin-top:2px}
.cat-badge{font-size:9px;font-weight:500;padding:1px 6px;border-radius:20px;display:inline-block;margin-top:3px}