/* ============================================================
   RENOCOTE ESTIMATOR — style.css
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --amber:#BA7517;--amber-light:#FAEEDA;--amber-dark:#412402;
  --text-primary:#1a1a1a;--text-secondary:#555;--text-hint:#999;
  --bg-page:#F5F4F1;--bg-card:#ffffff;--bg-surface:#F0EEE9;
  --border:rgba(0,0,0,0.12);--border-md:rgba(0,0,0,0.20);
  --radius-sm:6px;--radius-md:10px;--radius-lg:14px;
}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg-page);color:var(--text-primary);font-size:14px;line-height:1.5}

/* ── HEADER ─────────────────────────────────────────────── */
.site-header{background:#1c1917;color:#fff;padding:0 0 0;margin-bottom:16px;border-radius:var(--radius-lg)}
.header-inner{display:flex;align-items:center;padding:14px 18px}
.logo-wrap{display:flex;align-items:center;gap:12px}
.header-logo{width:42px;height:42px;object-fit:contain;background:#fff;border-radius:8px;padding:4px;flex-shrink:0}
.header-brand{font-size:18px;font-weight:700;color:#fff;letter-spacing:-.3px}
.header-tagline{font-size:11px;color:rgba(255,255,255,.4);margin-top:1px}

/* ── MAIN ───────────────────────────────────────────────── */
.page-main{max-width:1200px;margin:0 auto;padding:24px 20px 48px}

/* ── LAYOUT ─────────────────────────────────────────────── */
.est-layout{display:grid;grid-template-columns:1fr 270px;gap:16px}
.left-col{display:flex;flex-direction:column}
.right-col{position:sticky;top:20px;align-self:start}

/* ── CARDS ──────────────────────────────────────────────── */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px 20px;margin-bottom:14px}
.card:last-child{margin-bottom:0}

/* ── STEP LABEL ─────────────────────────────────────────── */
.step-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-hint);margin-bottom:14px}

/* ── QUESTION BLOCKS ────────────────────────────────────── */
.q-block{margin-bottom:16px}
.qt{font-size:13px;font-weight:600;margin-bottom:8px}
.qs{font-size:11px;color:var(--text-secondary);margin-top:-4px;margin-bottom:8px}
.divider{height:1px;background:var(--border);margin:16px 0}

/* ── GRIDS ──────────────────────────────────────────────── */
.og2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.og3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.og4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:8px;margin-top:4px}
.fg2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.svc-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}

/* ── SELECTABLE BUTTONS ─────────────────────────────────── */
.sel-btn{width:100%;text-align:left;background:var(--bg-card);border:1px solid var(--border-md);border-radius:var(--radius-md);padding:10px 13px;font-size:13px;cursor:pointer;color:var(--text-primary);transition:border-color .1s,background .1s;font-family:inherit}
.sel-btn:hover{border-color:#aaa;background:var(--bg-surface)}
.sel-btn.act{border:2px solid var(--amber)!important;background:var(--amber-light)!important;color:var(--amber-dark)!important;font-weight:600}
.btn-sub{font-size:11px;opacity:.55;margin-top:2px}

/* ── IMAGE CARDS ────────────────────────────────────────── */
.img-card{background:var(--bg-card);border:1px solid var(--border-md);border-radius:var(--radius-md);cursor:pointer;overflow:hidden;transition:border-color .1s}
.img-card:hover:not(.act){border-color:#aaa}
.img-card.act{border:2px solid var(--amber)!important;background:#FFF8EE!important}
.img-ph{background:var(--bg-surface);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--text-hint);text-align:center;padding:6px;height:82px}
.img-lbl{font-size:12px;padding:6px 8px;color:var(--text-primary);font-weight:500}

/* ── BUTTONS ────────────────────────────────────────────── */
.btn{padding:8px 16px;border-radius:var(--radius-md);border:1px solid var(--border-md);background:transparent;font-size:13px;cursor:pointer;color:var(--text-primary);font-family:inherit;transition:background .15s}
.btn:hover{background:var(--bg-surface)}
.btn-p{background:#1c1917;color:#fff;border-color:#1c1917}
.btn-p:hover{background:#333}
.btn-sm{padding:5px 12px;font-size:12px}

/* ── FORM ELEMENTS ──────────────────────────────────────── */
input[type=text],input[type=email],input[type=tel],select{width:100%;padding:8px 11px;border:1px solid var(--border-md);border-radius:var(--radius-md);background:var(--bg-card);color:var(--text-primary);font-size:13px;font-family:inherit}
input:focus,select:focus{outline:2px solid var(--amber);outline-offset:1px}
label.fl{font-size:12px;color:var(--text-secondary);display:block;margin-bottom:3px}

/* ── BUDGET BOX ─────────────────────────────────────────── */
.tbox{background:#1c1917;color:#fff;border-radius:var(--radius-lg);padding:20px;text-align:center;margin-bottom:14px}
.tbox-logo{width:72px;height:72px;margin:0 auto 14px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:8px}
.tbox-logo img{width:100%;height:100%;object-fit:contain}
.tl{font-size:11px;text-transform:uppercase;letter-spacing:.1em;opacity:.5;margin-bottom:4px}
.tv{font-size:34px;font-weight:700;letter-spacing:-.5px}
.tsub{font-size:12px;opacity:.45;margin-top:4px}
.note-card{font-size:12px;color:#777;line-height:1.7}

/* ── ESTIMATOR HERO ─────────────────────────────────────── */
.est-eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--text-hint);margin-bottom:4px}
.est-title{font-size:22px;font-weight:700;margin-bottom:6px}
.est-sub{font-size:13px;color:var(--text-secondary);line-height:1.6}

/* ── WASHROOM SECTION ───────────────────────────────────── */
.bath-section{background:var(--bg-surface);border-radius:var(--radius-md);padding:14px;margin-bottom:12px}
.bath-title{font-size:12px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px}

/* ── MISC ───────────────────────────────────────────────── */
.confirmed-badge{font-size:12px;color:#27ae60;font-weight:600}
.disc{font-size:11px;color:var(--text-hint);line-height:1.6;margin-top:12px}

/* ── FOOTER ─────────────────────────────────────────────── */
.site-footer{background:#1c1917;color:rgba(255,255,255,.6);padding:24px;margin-top:40px}
.footer-inner{max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:6px}
.footer-disc{font-size:11px;opacity:.6}

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media(max-width:900px){.est-layout{grid-template-columns:1fr}.right-col{position:static}.og4{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.og2,.og3,.fg2,.svc-grid{grid-template-columns:1fr 1fr}.page-main{padding:16px 14px 32px}}
@media(max-width:420px){.og2,.og3,.fg2,.svc-grid,.og4{grid-template-columns:1fr}}

/* ── MEMBERSHIP SYSTEM ───────────────────────────────────── */
.member-banner{background:#1c1917;color:#fff;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:var(--radius-lg);margin-bottom:16px}
.banner-left{display:flex;align-items:center;gap:10px}
.banner-logo{width:32px;height:32px;background:#fff;border-radius:7px;padding:3px;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.banner-logo img{width:100%;height:100%;object-fit:contain}
.banner-brand{font-size:14px;font-weight:700;color:#fff}
.banner-tag{font-size:10px;opacity:.4;margin-top:1px}
.banner-right{display:flex;gap:8px;align-items:center}
.btn-ghost-white{padding:5px 12px;border:1px solid rgba(255,255,255,.3);border-radius:var(--radius-md);background:transparent;color:rgba(255,255,255,.85);font-size:12px;cursor:pointer;font-family:inherit}
.btn-amber-solid{padding:5px 14px;border-radius:var(--radius-md);background:#BA7517;border:none;color:#fff;font-size:12px;cursor:pointer;font-weight:600;font-family:inherit}
.btn-amber-solid:hover{background:#9d6313}
.btn-green-solid{padding:5px 14px;border-radius:var(--radius-md);background:#639922;border:none;color:#fff;font-size:12px;cursor:pointer;font-weight:600;font-family:inherit}
.user-info{text-align:right;margin-right:4px}
.user-name{font-size:12px;color:rgba(255,255,255,.8);font-weight:500}
.user-tier{font-size:10px;color:rgba(255,255,255,.4)}

/* Modal overlay */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.55);z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px}
.modal-overlay.hidden{display:none}
.modal-box{background:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border);width:100%;max-width:440px;overflow:hidden;max-height:90vh;overflow-y:auto}
.modal-head{padding:20px 20px 0}
.modal-title{font-size:17px;font-weight:700;margin-bottom:3px}
.modal-sub{font-size:13px;color:var(--text-secondary);margin-bottom:16px;line-height:1.5}
.modal-body{padding:0 20px 20px}
.modal-foot{padding:12px 20px;border-top:1px solid var(--border);background:var(--bg-surface);font-size:12px;color:var(--text-secondary)}

/* Steps */
.steps{display:flex;align-items:center;margin-bottom:18px}
.stp{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--text-hint)}
.stp.done{color:var(--text-secondary)}
.stp.cur{color:var(--text-primary);font-weight:600}
.sdot{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--border-md);background:var(--bg-card);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;flex-shrink:0}
.stp.done .sdot{background:#BA7517;border-color:#BA7517;color:#fff}
.stp.cur .sdot{border-color:#BA7517;background:#FAEEDA;color:#412402}
.sline{flex:1;height:1px;background:var(--border);margin:0 5px}

/* Account type cards */
.type-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.type-card{border:1.5px solid var(--border-md);border-radius:var(--radius-lg);padding:14px;cursor:pointer;transition:border-color .1s}
.type-card:hover,.type-card.selected{border-color:#BA7517}
.type-card.selected{background:#FAEEDA}
.type-icon{font-size:22px;margin-bottom:7px}
.type-label{font-size:13px;font-weight:600;margin-bottom:3px}
.type-desc{font-size:11px;color:var(--text-secondary);line-height:1.4}
.type-card.selected .type-desc{color:#633806}

/* Social login */
.social-btn{width:100%;padding:10px;border-radius:var(--radius-md);border:1px solid var(--border-md);background:var(--bg-card);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:8px;color:var(--text-primary);font-family:inherit;transition:background .15s}
.social-btn:hover{background:var(--bg-surface)}
.g-icon{width:18px;height:18px;border-radius:50%;background:#fff;border:1px solid #ddd;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#4285F4;flex-shrink:0}
.fb-icon{width:18px;height:18px;border-radius:50%;background:#1877F2;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
.or-row{display:flex;align-items:center;gap:10px;margin:12px 0;font-size:12px;color:var(--text-hint)}
.or-line{flex:1;height:0.5px;background:var(--border)}

/* Plan cards */
.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.plan-card{border:1.5px solid var(--border-md);border-radius:var(--radius-lg);padding:14px;cursor:pointer;position:relative;transition:border-color .1s}
.plan-card.popular{border-color:#BA7517}
.plan-card.selected{border-color:#BA7517;background:#FAEEDA}
.plan-badge{position:absolute;top:-1px;right:12px;background:#BA7517;color:#fff;font-size:8px;font-weight:700;padding:3px 8px;border-radius:0 0 6px 6px;letter-spacing:.05em}
.plan-who{font-size:10px;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.plan-price{font-size:22px;font-weight:700;margin-bottom:2px}
.plan-period{font-size:11px;color:var(--text-secondary);margin-bottom:10px}
.plan-div{height:0.5px;background:var(--border);margin-bottom:10px}
.plan-feat{font-size:11px;color:var(--text-secondary);padding:3px 0;display:flex;gap:5px;align-items:flex-start;line-height:1.4}
.plan-check{color:#BA7517;flex-shrink:0;font-size:12px}
.plan-card.selected .plan-who,.plan-card.selected .plan-period,.plan-card.selected .plan-feat{color:#633806}
.type-toggle{display:flex;gap:8px;margin-bottom:14px}
.ttab{flex:1;padding:8px;border-radius:var(--radius-md);border:1px solid var(--border-md);font-size:12px;text-align:center;cursor:pointer;font-family:inherit;background:transparent;color:var(--text-secondary)}
.ttab.active{border-color:#BA7517;background:#FAEEDA;color:#412402;font-weight:600}

/* Payment */
.order-box{background:var(--bg-surface);border-radius:var(--radius-md);padding:12px 14px;margin-bottom:14px;font-size:13px}
.order-row{display:flex;justify-content:space-between;padding:3px 0;color:var(--text-secondary)}
.order-total{display:flex;justify-content:space-between;font-weight:700;border-top:1px solid var(--border);margin-top:6px;padding-top:8px;color:var(--text-primary)}
.pay-methods{display:flex;gap:8px;margin-bottom:14px}
.pay-method{flex:1;padding:8px;border-radius:var(--radius-md);border:1.5px solid var(--border-md);font-size:12px;text-align:center;cursor:pointer;font-family:inherit;background:transparent;color:var(--text-secondary)}
.pay-method.active{border-color:#BA7517;background:#FAEEDA;color:#412402;font-weight:600}

/* Contractor biz form */
.form-section{font-size:12px;font-weight:700;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--border);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.06em}
.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.check-item{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-secondary);cursor:pointer}
.check-box{width:16px;height:16px;border:1.5px solid var(--border-md);border-radius:3px;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:10px}
.check-box.checked{border-color:#BA7517;background:#BA7517;color:#fff}
.city-tags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.city-tag{padding:5px 10px;border-radius:20px;border:1px solid var(--border-md);font-size:12px;cursor:pointer;color:var(--text-secondary);font-family:inherit;background:transparent}
.city-tag.selected{border-color:#BA7517;background:#FAEEDA;color:#412402;font-weight:500}

/* Success screen */
.success-icon{width:56px;height:56px;border-radius:50%;background:#EAF3DE;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:26px}
.success-title{font-size:17px;font-weight:700;text-align:center;margin-bottom:5px}
.success-sub{font-size:13px;color:var(--text-secondary);text-align:center;margin-bottom:16px;line-height:1.5}
.tier-badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:5px 12px;border-radius:20px;margin-bottom:14px}
.tb-t1{background:#EAF3DE;color:#27500A}
.tb-t2{background:#FAEEDA;color:#412402}
.tb-con{background:#E6F1FB;color:#185FA5}
.perks-box{background:var(--bg-surface);border-radius:var(--radius-md);padding:12px 14px}
.perk-item{display:flex;gap:9px;align-items:flex-start;padding:5px 0;font-size:12px;color:var(--text-secondary)}
.perk-dot{width:18px;height:18px;border-radius:50%;background:#EAF3DE;display:flex;align-items:center;justify-content:center;font-size:9px;flex-shrink:0;margin-top:1px;color:#27500A}

/* Unlocked bars */
.unlocked-bar{border-radius:var(--radius-lg);padding:9px 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.ub-t1{background:#EAF3DE}
.ub-t2{background:#FAEEDA}
.ub-left{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600}
.ub-left.t1{color:#27500A}
.ub-left.t2{color:#412402}
.tier-pill{font-size:9px;font-weight:700;padding:2px 7px;border-radius:8px;color:#fff}
.tp-t1{background:#639922}
.tp-t2{background:#BA7517}
.tp-con{background:#185FA5}
.ub-right{font-size:11px;color:var(--text-secondary)}

/* Floor plan upload box */
.fp-box{background:var(--bg-surface);border-radius:var(--radius-lg);border:1px solid var(--border);padding:14px;margin-bottom:12px}
.fp-box-title{font-size:13px;font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:7px}
.fp-active-tag{font-size:9px;background:#EAF3DE;color:#27500A;padding:2px 6px;border-radius:8px;font-weight:700}
.fp-drop{border:1.5px dashed var(--border-md);border-radius:var(--radius-md);padding:22px;text-align:center;cursor:pointer;transition:border-color .15s}
.fp-drop:hover{border-color:#BA7517}
.fp-drop-icon{font-size:24px;margin-bottom:8px}
.fp-drop-label{font-size:13px;color:var(--text-secondary);margin-bottom:3px}
.fp-drop-hint{font-size:11px;color:var(--text-hint)}
.fp-analyzing{display:flex;align-items:center;gap:10px;padding:12px;background:var(--bg-surface);border-radius:var(--radius-md)}
.fp-spinner{width:18px;height:18px;border:2px solid var(--border);border-top-color:#BA7517;border-radius:50%;animation:spin .7s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}
.fp-result{background:#EAF3DE;border:1px solid #C0DD97;border-radius:var(--radius-md);padding:12px;margin-top:10px}
.fp-result-title{font-size:12px;font-weight:700;color:#27500A;margin-bottom:8px}
.fp-result-row{display:flex;justify-content:space-between;font-size:12px;padding:3px 0;color:#3B6D11;border-bottom:0.5px solid #C0DD97}
.fp-result-row:last-child{border-bottom:none}
.fp-error{background:#FCEBEB;border:1px solid #F7C1C1;border-radius:var(--radius-md);padding:12px;margin-top:10px;font-size:13px;color:#A32D2D}

/* Breakdown table */
.breakdown-table{width:100%;font-size:12px;border-collapse:collapse}
.breakdown-table th{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary);text-align:left;padding:5px 0;border-bottom:1px solid var(--border)}
.breakdown-table th:not(:first-child){text-align:right}
.breakdown-table td{padding:5px 0;border-bottom:0.5px solid var(--border);color:var(--text-secondary)}
.breakdown-table td:not(:first-child){text-align:right;color:var(--text-primary)}
.breakdown-table tr.total-row td{font-weight:700;color:var(--text-primary);border-top:1.5px solid var(--border-md);border-bottom:none;padding-top:8px}
.breakdown-box{background:var(--bg-surface);border-radius:var(--radius-md);padding:12px 14px}

/* Contractor cards */
.contractor-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:12px 14px;margin-bottom:8px;display:flex;align-items:center;gap:12px}
.con-avatar{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
.con-info{flex:1}
.con-name{font-size:13px;font-weight:600;margin-bottom:2px}
.con-meta{font-size:11px;color:var(--text-secondary)}
.con-stars{color:#BA7517;font-size:11px}
.con-right{text-align:right;flex-shrink:0}
.con-top-tag{font-size:9px;background:#EAF3DE;color:#27500A;padding:2px 6px;border-radius:8px;font-weight:700;display:inline-block;margin-bottom:4px}
.con-price{font-size:12px;font-weight:600}

/* AI badge on autofilled scope buttons */
.ai-badge{display:inline-block;font-size:9px;background:#BA7517;color:#fff;padding:1px 5px;border-radius:8px;margin-left:5px;vertical-align:middle;font-weight:700}

/* Contractor dashboard */
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.stat-card{background:var(--bg-surface);border-radius:var(--radius-md);padding:12px}
.stat-label{font-size:11px;color:var(--text-secondary);margin-bottom:4px}
.stat-value{font-size:22px;font-weight:700}
.lead-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-md);padding:12px 14px;margin-bottom:8px;display:flex;align-items:flex-start;gap:12px}
.lead-type-pill{font-size:9px;font-weight:700;padding:2px 7px;border-radius:8px;display:inline-block;margin-bottom:5px}
.lt-basement{background:#E6F1FB;color:#185FA5}
.lt-addition{background:#FAEEDA;color:#412402}
.lt-interior{background:#EAF3DE;color:#27500A}
.lead-title{font-size:13px;font-weight:600;margin-bottom:2px}
.lead-meta{font-size:11px;color:var(--text-secondary)}
.lead-right{margin-left:auto;text-align:right;flex-shrink:0}
.lead-budget{font-size:13px;font-weight:600}
.lead-time{font-size:10px;color:var(--text-hint);margin-top:3px}

/* ── TOOLTIPS ────────────────────────────────────────────── */
.tt-wrap{position:relative;display:inline-flex;align-items:center;gap:5px}
.tt-icon{width:15px;height:15px;border-radius:50%;background:var(--bg-surface);border:1px solid var(--border);display:inline-flex;align-items:center;justify-content:center;font-size:9px;color:var(--text-hint);cursor:default;flex-shrink:0;font-style:normal;line-height:1;user-select:none;vertical-align:middle}
.tt-icon:hover,.tt-icon.active{background:#FAEEDA;border-color:#BA7517;color:#412402}
.tt-popup{display:none;position:absolute;left:20px;top:-4px;z-index:500;background:var(--bg-card);border:1px solid var(--border-md);border-radius:var(--radius-lg);width:220px;padding:12px;pointer-events:none}
.tt-popup.tt-left{left:auto;right:20px}
.tt-popup.active{display:block}
.tt-popup-title{font-size:12px;font-weight:600;color:var(--text-primary);margin-bottom:4px}
.tt-popup-def{font-size:11px;color:var(--text-secondary);line-height:1.5;margin-bottom:8px}
.tt-popup svg{display:block;width:100%;border-radius:6px;overflow:hidden}

/* ── IMAGE CARD IMPROVEMENTS ─────────────────────────────── */
.img-ph{background:var(--bg-surface);display:flex;align-items:center;justify-content:center;font-size:10px;color:var(--text-hint);text-align:center;padding:6px;height:90px;overflow:hidden}
.img-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s}
.img-card:hover .img-ph img{transform:scale(1.04)}
.img-lbl{font-size:11px;padding:6px 8px;color:var(--text-primary);font-weight:500;line-height:1.3}

/* ── RESPONSIVE IMPROVEMENTS ─────────────────────────────── */
@media(max-width:1100px){.est-layout{grid-template-columns:1fr 240px}}
@media(max-width:900px){
  .est-layout{grid-template-columns:1fr}
  .right-col{position:static;order:-1}
  .tbox{display:flex;align-items:center;gap:16px;text-align:left;padding:14px 16px}
  .b-logo{margin:0;width:40px;height:40px;flex-shrink:0}
  .b-amt{font-size:28px}
}
@media(max-width:600px){
  .og4{grid-template-columns:1fr 1fr}
  .og3{grid-template-columns:1fr 1fr}
  .page-main{padding:12px 12px 32px}
  .member-banner{flex-wrap:wrap;gap:8px}
  .est-title{font-size:18px}
}

/* ── MOBILE STICKY BUDGET BOX ────────────────────────────── */
@media(max-width:900px){
  .right-col{
    position:sticky;
    top:0;
    z-index:100;
    order:-1;
    background:var(--bg-page);
    padding:8px 0 4px;
    margin-bottom:8px;
  }
  .tbox{
    display:flex;
    align-items:center;
    gap:12px;
    text-align:left;
    padding:12px 14px;
    border-radius:var(--radius-lg);
  }
  .b-logo{
    width:38px;
    height:38px;
    margin:0;
    flex-shrink:0;
  }
  .b-lbl{
    font-size:9px;
    margin-bottom:1px;
  }
  .b-amt{
    font-size:22px;
    letter-spacing:-.5px;
  }
  .b-sub{
    font-size:10px;
  }
  /* Hide the note card on mobile to keep budget bar compact */
  .right-col .note-card{
    display:none;
  }
  /* Keep get full access button visible */
  .right-col .btn-amber-solid{
    display:block;
    margin-top:6px;
    width:100%;
    text-align:center;
  }
}

/* Ensure est-layout stacks correctly on mobile */
@media(max-width:900px){
  .est-layout{
    display:flex;
    flex-direction:column;
  }
  .left-col{order:2}
  .right-col{order:1}
}

/* ── IMAGE HOVER EXPAND ──────────────────────────────────── */
.img-card{position:relative}
.img-card .img-ph img{transition:transform .2s}

/* Expanded preview on hover */
.img-card::after{
  content:'';
  display:none;
}
.img-preview{
  display:none;
  position:fixed;
  z-index:9999;
  pointer-events:none;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 8px 40px rgba(0,0,0,0.35);
  border:2px solid #fff;
  width:260px;
  height:260px;
}
.img-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.img-preview.visible{
  display:block;
}