:root {
      --red: #e10600; --red-light: #fde8e8;
      --blue: #0b3d91; --blue-dark: #072a6b; --blue-light: #e8eef8;
      --green: #16a34a; --green-light: #dcfce7;
      --amber: #d97706; --amber-light: #fef3c7;
      --teal: #0d9488; --teal-light: #ccfbf1;
      --white: #fff; --off: #f8f9fa; --text: #1a1a2e; --grey: #6b7280;
      --border: #e5e7eb; --r: 6px; --rl: 12px;
      --shadow: 0 4px 6px -1px rgba(0,0,0,.08);
      --shadow-lg: 0 20px 40px -8px rgba(0,0,0,.16);
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: 'Inter', sans-serif; background: #dde3ee;
      color: var(--text); min-height: 100vh;
      display: flex; flex-direction: column;
    }
    a { text-decoration: none; color: inherit; }

    /* ---- Top nav bar ---- */
    .topbar {
      background: var(--blue-dark); color: rgba(255,255,255,.65);
      padding: .625rem 2rem; display: flex; align-items: center;
      justify-content: space-between; font-size: .8125rem;
    }
    .topbar a { color: rgba(255,255,255,.8); transition: color .2s; }
    .topbar a:hover { color: #fff; }

    /* ---- Main ---- */
    main { flex: 1; padding: 2rem 1.5rem; max-width: 820px; margin: 0 auto; width: 100%; }

    /* ---- Status pill ---- */
    .status-pill {
      display: inline-flex; align-items: center; gap: .5rem;
      padding: .5rem 1rem; border-radius: 30px;
      font-size: .8125rem; font-weight: 700; margin-bottom: 1.5rem;
      text-transform: uppercase; letter-spacing: .04em;
    }
    .status-pill .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .status-pill.pending  { background: #fef3c7; color: #92400e; }
    .status-pill.pending .dot  { background: #f59e0b; }
    .status-pill.quoted   { background: var(--blue-light); color: var(--blue); }
    .status-pill.quoted .dot   { background: var(--blue); }
    .status-pill.accepted { background: #dcfce7; color: #14532d; }
    .status-pill.accepted .dot { background: #16a34a; }
    .status-pill.declined { background: var(--red-light); color: #7f1d1d; }
    .status-pill.declined .dot { background: var(--red); }
    .status-pill.scheduled { background: #ede9fe; color: #7c3aed; }
    .status-pill.scheduled .dot { background: #7c3aed; }
    .status-pill.complete  { background: #ccfbf1; color: #0d9488; }
    .status-pill.complete .dot  { background: #0d9488; }
    .status-pill.invoiced  { background: #fef9c3; color: #ca8a04; }
    .status-pill.invoiced .dot  { background: #ca8a04; }
    .status-pill.paid      { background: #dcfce7; color: #15803d; }
    .status-pill.paid .dot      { background: #15803d; }

    /* ---- Document (A4-style white paper) ---- */
    .document {
      background: #fff; border-radius: var(--rl);
      box-shadow: var(--shadow-lg); overflow: hidden;
      margin-bottom: 1.5rem;
    }

    /* ---- Letterhead ---- */
    .letterhead {
      padding: 2rem 2.5rem 0;
      display: flex; align-items: flex-start;
      justify-content: space-between; gap: 2rem;
    }
    .lh-brand-name {
      font-size: 1.5rem; font-weight: 800; color: var(--blue); line-height: 1.1;
    }
    .lh-brand-sub {
      font-size: .75rem; color: var(--red); font-weight: 700;
      text-transform: uppercase; letter-spacing: .08em; margin-top: .25rem;
    }
    .lh-addr {
      font-size: .8125rem; color: var(--grey); margin-top: .625rem; line-height: 1.7;
    }
    .lh-contact { text-align: right; }
    .lh-contact-row {
      display: flex; align-items: center; gap: .5rem;
      font-size: .875rem; color: var(--text); justify-content: flex-end;
      margin-bottom: .375rem;
    }
    .lh-contact-row svg { color: var(--blue); flex-shrink: 0; }
    .lh-contact-row a { color: var(--text); transition: color .2s; }
    .lh-contact-row a:hover { color: var(--blue); }
    .lh-divider {
      margin: 1.5rem 2.5rem 0;
      height: 3px; border-radius: 2px;
      background: linear-gradient(90deg, var(--blue) 0%, var(--red) 100%);
    }

    /* ---- Quote header row ---- */
    .doc-head {
      padding: 1.5rem 2.5rem;
      display: flex; align-items: flex-start; justify-content: space-between;
      border-bottom: 1px solid var(--border);
    }
    .doc-head-title {
      font-size: 1.625rem; font-weight: 800; letter-spacing: .04em;
      color: var(--blue); text-transform: uppercase;
    }
    .doc-meta { text-align: right; }
    .doc-meta-row { display: flex; gap: .75rem; justify-content: flex-end; margin-bottom: .3rem; font-size: .875rem; }
    .doc-meta-label { color: var(--grey); font-weight: 500; }
    .doc-meta-value { font-weight: 700; color: var(--text); }
    .doc-ref { font-family: monospace; letter-spacing: .03em; color: var(--blue); }

    /* ---- To / Prepared For ---- */
    .doc-to {
      padding: 1.25rem 2.5rem;
      background: var(--off);
      border-bottom: 1px solid var(--border);
      display: flex; align-items: flex-start; gap: 2.5rem; flex-wrap: wrap;
    }
    .doc-to-label {
      font-size: .6875rem; font-weight: 700; color: var(--grey);
      text-transform: uppercase; letter-spacing: .08em; margin-bottom: .375rem;
    }
    .doc-to-name { font-size: 1.0625rem; font-weight: 700; color: var(--text); }
    .doc-to-contact { font-size: .875rem; color: var(--grey); margin-top: .25rem; }

    /* ---- Section inside document ---- */
    .doc-section { padding: 1.5rem 2.5rem; border-bottom: 1px solid var(--border); }
    .doc-section:last-child { border-bottom: none; }
    .doc-section-title {
      font-size: .6875rem; font-weight: 700; color: var(--grey);
      text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1rem;
    }

    /* ---- Move details grid ---- */
    .move-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .875rem 2.5rem; }
    .move-item-label { font-size: .75rem; color: var(--grey); font-weight: 500; margin-bottom: .125rem; }
    .move-item-value { font-size: .9375rem; font-weight: 600; color: var(--text); }
    .move-item-full { grid-column: 1/-1; }

    /* ---- Price block ---- */
    .price-block {
      display: flex; align-items: flex-end; gap: .75rem; margin-bottom: 1rem;
    }
    .price-amount {
      font-size: 3rem; font-weight: 800; color: var(--blue); line-height: 1;
    }
    .price-label {
      font-size: .8125rem; color: var(--grey); font-weight: 500;
      padding-bottom: .375rem;
    }
    .price-desc {
      font-size: .9375rem; color: var(--text); line-height: 1.75;
      white-space: pre-wrap;
    }
    .price-valid {
      display: inline-flex; align-items: center; gap: .375rem;
      margin-top: .875rem; font-size: .8125rem;
      color: var(--amber); font-weight: 600;
      background: var(--amber-light); padding: .375rem .75rem; border-radius: 20px;
    }

    /* ---- Accept actions ---- */
    .accept-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.25rem; }
    .btn-accept {
      display: inline-flex; align-items: center; gap: .625rem;
      padding: .9rem 2rem; background: var(--green); color: #fff;
      border: none; border-radius: var(--r); font-size: 1rem; font-weight: 700;
      cursor: pointer; transition: all .25s;
    }
    .btn-accept:hover { background: #15803d; }
    .btn-contact {
      display: inline-flex; align-items: center; gap: .5rem;
      padding: .875rem 1.25rem; border-radius: var(--r);
      font-weight: 600; font-size: .875rem; transition: all .25s;
      border: 2px solid var(--border); background: #fff; color: var(--text);
      text-decoration: none;
    }
    .btn-contact:hover { border-color: var(--blue); color: var(--blue); }
    .btn-contact.whatsapp { background: #25D366; color: #fff; border-color: #25D366; }
    .btn-contact.whatsapp:hover { background: #1ebe5a; border-color: #1ebe5a; }

    /* ---- Pending waiting state ---- */
    .doc-pending {
      padding: 3rem 2.5rem; text-align: center;
    }
    .doc-pending-icon {
      width: 72px; height: 72px; border-radius: 50%;
      background: var(--amber-light); display: flex; align-items: center; justify-content: center;
      margin: 0 auto 1.25rem; color: var(--amber);
    }
    .doc-pending h3 { font-size: 1.25rem; margin-bottom: .625rem; }
    .doc-pending p { font-size: .9375rem; color: var(--grey); max-width: 380px; margin: 0 auto 1.5rem; line-height: 1.6; }

    /* ---- Accepted banner ---- */
    .accepted-banner {
      background: var(--green-light); border: 1px solid #86efac; border-radius: var(--r);
      padding: 1rem 1.25rem; display: flex; align-items: center;
      gap: .875rem; color: #14532d; font-weight: 600; margin-top: 1.25rem;
    }

    /* ---- Decline button ---- */
    .btn-decline {
      display: inline-flex; align-items: center; gap: .5rem;
      padding: .875rem 1.25rem; border-radius: var(--r);
      font-weight: 600; font-size: .9375rem; transition: all .2s;
      border: 2px solid #fca5a5; background: var(--red-light); color: var(--red);
      cursor: pointer;
    }
    .btn-decline:hover { background: var(--red); color: #fff; border-color: var(--red); }
    .btn-decline-submit {
      display: inline-flex; align-items: center;
      padding: .65rem 1.25rem; border-radius: var(--r);
      font-weight: 700; font-size: .9375rem; transition: all .2s;
      border: none; background: var(--red); color: #fff; cursor: pointer;
    }
    .btn-decline-submit:hover { background: var(--red-d, #b80500); }

    /* ---- Declined banner ---- */
    .declined-banner {
      background: var(--red-light); border: 1px solid #fca5a5; border-radius: var(--r);
      padding: 1rem 1.25rem; display: flex; align-items: center;
      gap: .875rem; color: #7f1d1d; font-weight: 600; margin-top: 1.25rem;
    }

    /* ---- Doc footer ---- */
    .doc-footer {
      padding: 1.25rem 2.5rem;
      background: var(--off); border-top: 1px solid var(--border);
      font-size: .8125rem; color: var(--grey); line-height: 1.6;
      display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
      justify-content: space-between;
    }
    .doc-footer-reg { font-size: .75rem; }

    /* ---- Not Found ---- */
    .not-found {
      background: #fff; border-radius: var(--rl); box-shadow: var(--shadow);
      text-align: center; padding: 4rem 2rem; margin-bottom: 1.5rem;
    }
    .not-found svg { margin: 0 auto 1.25rem; color: #d1d5db; }
    .not-found h2 { font-size: 1.5rem; margin-bottom: .75rem; }
    .not-found p { color: var(--grey); margin-bottom: 1.5rem; }
    .btn {
      display: inline-flex; align-items: center; gap: .5rem;
      padding: .75rem 1.75rem; border-radius: var(--r);
      font-weight: 600; font-size: .9375rem; transition: all .25s;
    }
    .btn-primary { background: var(--blue); color: #fff; }
    .btn-primary:hover { background: var(--blue-dark); }

    /* ---- Detailed quote breakdown (from builder) ---- */
    .qb-breakdown { margin-top: 1.25rem; }
    .qb-section-title {
      font-size: .6875rem; font-weight: 700; color: var(--grey);
      text-transform: uppercase; letter-spacing: .08em;
      margin: 1rem 0 .5rem;
    }
    .quote-table {
      width: 100%; border-collapse: collapse; font-size: .9rem;
      margin-bottom: .75rem;
    }
    .quote-table thead tr { border-bottom: 2px solid var(--border); }
    .quote-table th {
      text-align: left; padding: .4rem .5rem;
      font-size: .75rem; font-weight: 700; color: var(--grey);
      text-transform: uppercase; letter-spacing: .05em;
    }
    .quote-table th:last-child { text-align: right; }
    .quote-table td {
      padding: .5rem .5rem; border-bottom: 1px solid var(--border);
      color: var(--text); vertical-align: top;
    }
    .quote-table td:last-child { text-align: right; font-weight: 600; white-space: nowrap; }
    .quote-table tbody tr:last-child td { border-bottom: none; }
    .quote-totals {
      width: 100%; border-collapse: collapse; margin-top: 1rem;
      max-width: 340px; margin-left: auto;
    }
    .quote-totals td { padding: .35rem .5rem; font-size: .9rem; }
    .quote-totals td:last-child { text-align: right; font-weight: 600; }
    .quote-totals .grand-total td {
      border-top: 2px solid var(--text); font-weight: 800;
      font-size: 1.0625rem; color: var(--blue); padding-top: .625rem;
    }

    /* ---- Page footer ---- */
    footer {
      background: var(--blue-dark); color: rgba(255,255,255,.5);
      text-align: center; padding: 1.25rem; font-size: .8125rem;
    }
    footer a { color: rgba(255,255,255,.7); transition: color .25s; }
    footer a:hover { color: #fff; }

    @media (max-width: 600px) {
      .letterhead { flex-direction: column; gap: 1.25rem; }
      .lh-contact { text-align: left; }
      .lh-contact-row { justify-content: flex-start; }
      .doc-head { flex-direction: column; gap: .875rem; }
      .doc-meta { text-align: left; }
      .doc-meta-row { justify-content: flex-start; }
      .doc-to { gap: 1.25rem; }
      .move-grid { grid-template-columns: 1fr; }
      .lh-divider, .doc-section, .doc-to, .doc-head, .letterhead, .doc-footer { padding-left: 1.25rem; padding-right: 1.25rem; }
      .lh-divider { margin-left: 1.25rem; margin-right: 1.25rem; }
      .price-amount { font-size: 2.25rem; }
      main { padding: 1.5rem 1rem; }
    }

    /* Modal */
    .modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:9999;padding:1rem;opacity:0;pointer-events:none;transition:opacity .3s; }
    .modal-overlay.open { opacity:1;pointer-events:all; }
    .modal-box { background:#fff;border-radius:16px;width:100%;max-width:560px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 25px 60px rgba(0,0,0,.25);transform:translateY(20px);transition:transform .3s; }
    .modal-overlay.open .modal-box { transform:translateY(0); }
    .modal-header { padding:1.5rem;border-bottom:1px solid #e5e7eb;display:flex;align-items:center;justify-content:space-between;flex-shrink:0; }
    .modal-header h3 { font-size:1.25rem;font-weight:700; }
    .modal-close { width:36px;height:36px;border-radius:50%;border:none;background:#f3f4f6;cursor:pointer;display:flex;align-items:center;justify-content:center; }
    .modal-body { padding:1.5rem;overflow-y:auto;flex:1; }
    .modal-footer { padding:1.25rem 1.5rem;border-top:1px solid #e5e7eb;display:flex;gap:.875rem;flex-shrink:0;flex-wrap:wrap; }
    .terms-text { background:#f8f9fa;border-radius:8px;padding:1.25rem;font-size:.875rem;line-height:1.75;color:#1a1a2e;max-height:260px;overflow-y:auto;white-space:pre-wrap;border:1px solid #e5e7eb; }
    .terms-agree { display:flex;align-items:flex-start;gap:.75rem;margin-top:1.25rem;font-size:.9375rem; }
    .terms-agree input[type=checkbox] { width:18px;height:18px;margin-top:2px;flex-shrink:0;accent-color:#0b3d91; }
    #confirmAcceptBtn:not(:disabled) { opacity:1 !important; }
    .payment-details-box { background:#e8eef8;border-radius:8px;padding:1.5rem;font-size:.9375rem;line-height:1.75;color:#1a1a2e;white-space:pre-wrap;border:1px solid rgba(11,61,145,.15); }