/* ============================================================
   MONTERRA STONE — CLIENT REVISION STYLES
   Load AFTER style.css so these rules win.
   ============================================================ */

/* ---------- 1. LOGO — larger & bolder, white on dark ---------- */
.nav-inner{height:104px}
.nav-spacer{height:104px}
.nav-logo img{
  height:132px;width:auto;display:block;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.22)) contrast(1.12) saturate(1.06);
}
.f-logo img{height:150px;margin:-18px 0 -12px -8px}

/* Footer sits on --dark2, so use the white-text version of the logo.
   Drop logo-white.png next to logo.png (white "Monterra" wordmark).
   The <picture> swap in footer.php handles it; this is the fallback for
   any place the dark logo still lands on a dark panel. */
.on-dark .nav-logo img,
.footer .f-logo img.logo-fallback{
  filter:brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0,0,0,.4));
}

@media(max-width:900px){
  .nav-inner{height:88px}
  .nav-spacer{height:88px}
  .nav-logo img{height:100px}
  .f-logo img{height:150px}
}
@media(max-width:640px){
  .nav-inner{height:76px}
  .nav-spacer{height:76px}
  .nav-logo img{height:82px}
  .f-logo img{height:120px}
}

/* ---------- 2. MASKED PHONE NUMBER ---------- */
.phone-mask{
  display:inline-flex;align-items:baseline;gap:8px;
  text-decoration:none;color:inherit;cursor:pointer;
  border-bottom:1px dotted currentColor;padding-bottom:1px;
}
.phone-mask .pm-digits{letter-spacing:.02em;font-variant-numeric:tabular-nums}
.phone-mask .pm-hint{
  font-size:.52rem;letter-spacing:.14em;text-transform:uppercase;
  opacity:.35;white-space:nowrap;font-family:'Inter',sans-serif;
}
.phone-mask:hover{color:var(--gold)}
.phone-mask.revealed{border-bottom-style:solid}
.phone-mask.revealed .pm-hint{display:none}

/* ---------- 3. SUBURB / POSTCODE PICKER (instant quote) ---------- */
.pc-wrap{position:relative}
.pc-results{
  display:none;margin-top:8px;border:1px solid var(--border);background:#fff;
  max-height:210px;overflow-y:auto;
}
.pc-results.show{display:block}
.pc-opt{
  display:block;width:100%;text-align:left;padding:10px 13px;background:#fff;
  border:none;border-bottom:1px solid var(--border);cursor:pointer;
  font-family:'Inter',sans-serif;font-size:.8rem;color:var(--dark);transition:background .15s;
}
.pc-opt:last-child{border-bottom:none}
.pc-opt:hover,.pc-opt:focus-visible{background:var(--gold-bg);color:var(--gold-d)}
.pc-opt.sel{background:var(--gold-bg);color:var(--gold-d);font-weight:500}
.pc-opt small{display:block;color:var(--mid);font-size:.68rem;margin-top:2px}
.pc-none{padding:10px 13px;font-size:.76rem;color:var(--mid)}

/* ---------- 4. MULTI-MATERIAL SELECTION ---------- */
.mat-list{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.mat-row{
  display:grid;grid-template-columns:1.3fr 1fr auto;gap:10px;align-items:end;
  background:var(--off);border:1px solid var(--border);padding:14px;
}
.mat-row .qfield{margin-bottom:0}
.mat-x{
  border:1px solid rgba(0,0,0,.14);background:#fff;color:var(--mid);
  padding:10px 13px;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  cursor:pointer;font-family:'Inter',sans-serif;transition:all .2s;height:min-content;
}
.mat-x:hover{border-color:#b3261e;color:#b3261e}
.mat-add{margin-top:12px}
.mat-note{font-size:.74rem;color:var(--mid);line-height:1.6;margin-top:10px}
@media(max-width:700px){.mat-row{grid-template-columns:1fr}}

/* ---------- 5. ADDRESS AUTOCOMPLETE (booking) ---------- */
.addr-wrap{position:relative}
.addr-list{
  position:absolute;left:0;right:0;top:100%;z-index:60;background:#fff;
  border:1px solid var(--border);box-shadow:0 14px 34px rgba(0,0,0,.12);
  max-height:230px;overflow-y:auto;display:none;
}
.addr-list.show{display:block}
.addr-opt{
  display:block;width:100%;text-align:left;padding:11px 14px;background:#fff;border:none;
  border-bottom:1px solid var(--border);cursor:pointer;font-family:'Inter',sans-serif;
  font-size:.8rem;color:var(--dark);
}
.addr-opt:last-child{border-bottom:none}
.addr-opt:hover,.addr-opt.active{background:var(--gold-bg);color:var(--gold-d)}
.addr-manual{
  border-top:1px solid var(--border);padding:11px 14px;font-size:.74rem;color:var(--mid);
  background:var(--off);
}
.addr-manual button{
  background:none;border:none;color:var(--gold-d);cursor:pointer;font-weight:500;
  font-family:'Inter',sans-serif;font-size:.74rem;text-decoration:underline;padding:0;
}

/* ---------- 6. RETURNING-CLIENT / ACCOUNT BAR ---------- */
.acct-bar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:var(--gold-bg);border:1px solid var(--bgold);padding:13px 16px;margin-bottom:20px;
}
.acct-bar .ab-t{font-size:.8rem;color:var(--dark);line-height:1.55}
.acct-bar .ab-t b{font-weight:600}
.acct-bar .ab-a{display:flex;gap:10px;flex-wrap:wrap}
.acct-bar button{
  background:none;border:1px solid var(--bgold);color:var(--gold-d);cursor:pointer;
  padding:7px 13px;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  font-family:'Inter',sans-serif;transition:all .2s;
}
.acct-bar button:hover{background:var(--gold);border-color:var(--gold);color:#fff}

/* ---------- 7. MY PORTAL — saved details panel ---------- */
.portal-tabs{display:flex;gap:2px;margin-bottom:16px;flex-wrap:wrap}
.portal-tabs button{
  padding:9px 15px;border:1px solid var(--border);background:#fff;cursor:pointer;
  font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mid);
  font-family:'Inter',sans-serif;
}
.portal-tabs button.on{background:var(--gold);border-color:var(--gold);color:#fff}
.portal-pane{display:none}
.portal-pane.on{display:block}
.portal-row{
  display:flex;justify-content:space-between;gap:14px;padding:10px 0;
  border-bottom:1px solid var(--border);font-size:.8rem;
}
.portal-row span{color:var(--mid)}
.portal-empty{font-size:.8rem;color:var(--mid);padding:14px 0;line-height:1.7}

/* ---------- 8. REFERRAL TERMS ---------- */
.ref-reward{
  display:grid;grid-template-columns:1fr 1fr;gap:2px;margin:26px 0;
}
.ref-reward .rr{background:#fff;border:1px solid var(--border);padding:24px}
.ref-reward .rr-l{
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-d);margin-bottom:8px;
}
.ref-reward .rr-v{
  font-family:'Cormorant Garamond',serif;font-size:2rem;font-weight:300;color:var(--dark);line-height:1;
}
.ref-reward .rr-d{font-size:.8rem;color:var(--mid);line-height:1.7;margin-top:8px}
.ref-terms{background:var(--off);border:1px solid var(--border);padding:24px;margin-top:28px}
.ref-terms h3{
  font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dark);margin:18px 0 8px;
}
.ref-terms h3:first-child{margin-top:0}
.ref-terms li{font-size:.8rem;color:#4a453d;line-height:1.8;margin-bottom:6px}
.ref-terms ul{margin-left:18px}
@media(max-width:700px){.ref-reward{grid-template-columns:1fr}}

/* ---------- 9. TRADE ACCOUNT — two-stage note ---------- */
.trade-stage{
  background:var(--gold-bg);border:1px solid var(--bgold);padding:16px 18px;margin-bottom:20px;
  font-size:.8rem;color:#6b5310;line-height:1.75;
}
.trade-stage b{color:var(--gold-d)}

/* ---------- 10. BOOKING — added client wording ---------- */
.book-note{
  background:var(--off);border-left:2px solid var(--gold);padding:13px 16px;
  font-size:.79rem;color:#4a453d;line-height:1.75;margin:12px 0 16px;
}
.book-note b{color:var(--dark);font-weight:600}