/* The new look for the site's working pages (cart, checkout, instant quote, bits, booking,
   payments, legal). Their markup and scripts are unchanged; this restyles their parts. */
:root{
  /* the names those pages' own styles use, mapped to the new palette */
  --surface:#0d1114; --surface-2:#12171b; --bg-raised:#0c1013; --border:rgba(255,255,255,0.09); --border-light:rgba(255,255,255,0.16);
  --text-muted:#8d989f; --text-dim:#6b7780; --success:#3adb76; --danger:#ff6b5c; --accent-soft:rgba(41,211,255,0.08); --warn:#f5b93d;
}
.support-bar{display:none !important;}   /* contact hours now live in the footer and on Contact */

.legacy{padding:130px 0 90px; min-height:70vh;}
.legacy .wrap{max-width:1280px; margin:0 auto; padding:0 var(--gutter);}
.legacy .section, .legacy .section-tight{padding:0 0 44px;}
.legacy h1{font-size:clamp(44px, 7vw, 108px); line-height:0.92; letter-spacing:-0.05em; font-weight:800; margin:14px 0 22px; max-width:16ch;}
.legacy h2{font-size:clamp(26px, 3vw, 42px); letter-spacing:-0.035em; font-weight:700; line-height:1.05; margin:0 0 14px;}
.legacy h3{font-size:20px; letter-spacing:-0.02em; font-weight:650; margin:0 0 12px;}
.legacy h4{font-size:16px; font-weight:650; margin:0 0 8px;}
.legacy p{color:var(--muted); margin:0 0 14px;}
.legacy a{color:var(--accent);}
.legacy .btn, .legacy a.btn{color:var(--text);}
.legacy .eyebrow{display:inline-block; font-family:var(--mono); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted);}
.legacy .eyebrow::before{content:'● '; color:var(--accent);}
.legacy .lede{font-size:clamp(17px, 1.35vw, 21px); color:var(--muted); max-width:52ch;}
.legacy .grad-text{color:var(--accent);}
.legacy .muted{color:var(--muted);}
.legacy .mt16{margin-top:16px;}
.legacy .center{text-align:center;}

/* panels and cards */
.legacy .panel, .legacy .card{background:var(--bg-2); border:1px solid var(--line); border-radius:22px; padding:clamp(20px, 2.4vw, 32px);}
.legacy .card:hover{border-color:var(--line-2);}
.legacy .split{display:grid; grid-template-columns:1.25fr 0.75fr; gap:clamp(18px, 3vw, 40px); align-items:start;}
.legacy .grid-2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.legacy .sticky-box{position:sticky; top:96px;}
.legacy .rule{height:1px; border:0; background:var(--line); margin:20px 0;}
.legacy .icon-tag{font-family:var(--mono); font-size:11px; letter-spacing:0.14em; color:var(--accent); display:inline-block; margin-bottom:12px;}

/* buttons */
.legacy .btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 24px; border-radius:999px; font-weight:600; font-size:15px; border:1px solid var(--line-2); background:transparent; color:var(--text); cursor:pointer; text-decoration:none; font-family:var(--display); transition:background .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);}
.legacy .btn:hover{border-color:var(--text);}
.legacy .btn-primary{background:var(--accent); color:var(--accent-ink) !important; border-color:var(--accent);}
.legacy .btn-primary:hover{background:var(--text); border-color:var(--text);}
.legacy .btn-ghost{border-color:transparent;}
.legacy .btn-block{display:flex; width:100%;}
.legacy .btn[disabled], .legacy button[disabled]{opacity:0.4; cursor:not-allowed;}

/* forms */
.legacy .field{margin-bottom:16px;}
.legacy .field label, .legacy .group-label{display:block; font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); margin-bottom:8px;}
.legacy input[type=text], .legacy input[type=email], .legacy input[type=tel], .legacy input[type=number], .legacy input[type=search], .legacy input[type=datetime-local], .legacy input[type=password], .legacy select, .legacy textarea{
  width:100%; background:var(--bg) !important; border:1px solid var(--line-2) !important; color:var(--text) !important; border-radius:12px !important; padding:13px 14px !important; font-family:var(--display); font-size:15px; outline:none; transition:border-color .25s;}
.legacy input:focus, .legacy select:focus, .legacy textarea:focus{border-color:var(--accent) !important;}
.legacy .field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.legacy .option-group{margin:18px 0;}
.legacy .pay-option, .legacy .option-choice{display:flex; gap:14px; align-items:flex-start; border:1px solid var(--line-2); border-radius:16px; padding:16px; margin-bottom:10px; cursor:pointer; transition:border-color .25s, background .25s;}
.legacy .pay-option input, .legacy .option-choice input{accent-color:var(--accent); margin-top:4px;}
.legacy .pay-option.checked, .legacy .option-choice.checked{border-color:var(--accent); background:rgba(41,211,255,0.06); box-shadow:inset 0 0 0 1px var(--accent);}
.legacy .pay-title{font-weight:650; color:var(--text);}
.legacy .pay-desc{font-size:14px; color:var(--muted); margin-top:3px;}
.legacy .form-error{background:rgba(255,107,92,0.08); border-left:2px solid var(--danger); padding:10px 14px; border-radius:0 10px 10px 0; color:var(--text); font-size:14px; margin:10px 0;}
.legacy .notice{background:rgba(41,211,255,0.05); border-left:2px solid var(--accent); padding:12px 16px; border-radius:0 12px 12px 0; color:var(--muted); font-size:14px;}
.legacy .notice.warn{border-left-color:var(--warn); background:rgba(245,185,61,0.06);}

/* cart and checkout tables */
.legacy table.data{width:100%; border-collapse:collapse; font-size:15px;}
.legacy table.data th{font-family:var(--mono); font-weight:400; font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted); text-align:left; padding:0 10px 12px 0; border-bottom:1px solid var(--line);}
.legacy table.data td{padding:16px 10px 16px 0; border-bottom:1px solid var(--line); vertical-align:top;}
.legacy .line-name{font-weight:650; color:var(--text);}
.legacy .line-meta{font-size:13px; color:var(--muted); margin-top:4px;}
.legacy .remove-line{background:none; border:0; color:var(--dim); font-size:12px; padding:0; margin-top:8px; cursor:pointer; font-family:var(--mono); letter-spacing:0.08em; text-transform:uppercase;}
.legacy .remove-line:hover{color:var(--danger);}
.legacy .tag{font-family:var(--mono); font-size:10px; letter-spacing:0.1em; text-transform:uppercase; border:1px solid var(--line-2); border-radius:999px; padding:2px 8px; margin-left:6px;}
.legacy .tag.poa{color:var(--warn); border-color:rgba(245,185,61,0.4);}
.legacy .summary-row{display:flex; justify-content:space-between; padding:10px 0; color:var(--muted); font-size:15px;}
.legacy .summary-row.total{color:var(--text); font-size:22px; font-weight:700; letter-spacing:-0.02em; border-top:1px solid var(--line); margin-top:8px; padding-top:16px;}
.legacy .qty-control{display:inline-flex; align-items:center; border:1px solid var(--line-2); border-radius:999px; overflow:hidden;}
.legacy .qty-control button{width:38px; height:38px; background:none; border:0; color:var(--text); font-size:18px; cursor:pointer;}
.legacy .qty-control input{width:40px !important; border:0 !important; background:none !important; text-align:center; padding:0 !important;}
.legacy .empty-state{text-align:center; padding:70px 20px; border:1px dashed var(--line-2); border-radius:22px;}
.legacy .empty-state h3{font-size:clamp(26px, 3vw, 40px); letter-spacing:-0.03em;}
.legacy details summary{cursor:pointer; color:var(--accent);}
.legacy .price{font-size:26px; font-weight:700; letter-spacing:-0.03em; color:var(--text);}
.legacy .price-from{font-family:var(--mono); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--muted);}

/* instant quote */
.legacy .dropzone{border:1.5px dashed var(--line-2); border-radius:20px; padding:54px 20px; text-align:center; position:relative; cursor:pointer; transition:border-color .3s, background .3s;}
.legacy .dropzone:hover, .legacy .dropzone.drag{border-color:var(--accent); background:rgba(41,211,255,0.04);}
.legacy .dropzone .icon{font-size:30px; color:var(--accent); margin-bottom:10px;}
.legacy .dropzone input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer;}
.legacy .file-chip{display:inline-flex; gap:10px; align-items:center; border:1px solid var(--line-2); border-radius:999px; padding:6px 14px; font-size:13px;}
.legacy .result-row{display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line); font-size:15px;}
.legacy .result-row span:first-child{color:var(--muted);}
.legacy .unit-toggle{display:flex; gap:6px; flex-wrap:wrap; margin-top:12px;}
.legacy .unit-toggle button{background:none; border:1px solid var(--line-2); color:var(--muted); border-radius:999px; padding:7px 14px; cursor:pointer; font-family:var(--display);}
.legacy .unit-toggle button.active{border-color:var(--accent); color:var(--text);}

/* bits page (its own styles cover the grid) */
.legacy .fx-hero{padding:0 0 30px !important;}
.legacy .fx-chips{display:flex; gap:10px; flex-wrap:wrap; margin-top:18px;}
.legacy .fx-chip{font-family:var(--mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line-2); border-radius:999px; padding:7px 12px;}
.legacy .fx-chip i{display:none;}
.legacy .bit{border-radius:20px !important; overflow:hidden; background:var(--bg-2) !important;}
.legacy .bit .img{border-radius:0;}
.legacy .bits-bar input, .legacy .bits-bar select{border-radius:999px !important;}
.legacy .added{border-radius:14px !important; background:var(--bg-2) !important;}

/* gallery */
.legacy .gal-grid{columns:3 280px; column-gap:16px;}
.legacy .gal-item{break-inside:avoid; margin-bottom:16px; border-radius:18px; overflow:hidden; position:relative;}
.legacy .gal-item .cap{position:absolute; left:0; right:0; bottom:0; padding:12px 14px; background:linear-gradient(transparent, rgba(6,8,9,0.85)); font-size:13px;}

/* legal and long text */
.legacy .prose{max-width:760px;}
.legacy .prose h2{font-size:clamp(22px, 2.2vw, 30px); margin:46px 0 12px;}
.legacy .prose h3{margin-top:28px;}
.legacy .prose p, .legacy .prose li{color:rgba(241,244,245,0.78); font-size:17px; line-height:1.7;}
.legacy .prose ul, .legacy .prose ol{padding-left:20px;}
.legacy .prose strong{color:var(--text);}

/* checkout's printed document */
.legacy #printable-doc{background:var(--bg-2);}
.legacy .pay-badges{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.legacy .pay-chip img, .legacy .payfast-badge{height:24px; width:auto; background:#fff; border-radius:5px; padding:3px 7px;}
.legacy .payfast-badge{background:none; padding:0;}
@media print{ .nav, .overlay, footer, .preview-flag, .no-print, .cursor{display:none !important;} body, .legacy{background:#fff; color:#000;} }

@media (max-width:1000px){
  .legacy{padding-top:110px;}
  .legacy .split, .legacy .grid-2, .legacy .field-row{grid-template-columns:1fr;}
  .legacy .sticky-box{position:static;}
  .legacy table.data{font-size:14px;}
}

/* headlines inside a narrow box (payment results, booking) stay in proportion */
.legacy .panel h1, .legacy .wrap[style*="max-width:560px"] h1{font-size:clamp(32px, 4vw, 52px); line-height:1; letter-spacing:-0.04em; max-width:none;}
.legacy .panel.center{padding:clamp(30px, 5vw, 60px);}
.legacy #statusIcon{font-size:28px !important; color:var(--accent);}