/*
 * Public quotation front end.
 *
 * Colours and type are the BLACKTWENTY brand set, matching the old app's
 * quotation exactly: the dark shell with its yellow accent, Bebas Neue for
 * display and Montserrat for body. The token VALUES are copied from
 * bt-brand.css rather than importing it, because that file is 17 KB of Falcon
 * component overrides (--falcon-btn-bg and friends) that mean nothing on a
 * page which never loads Falcon. Keep the two in step if the brand changes.
 *
 * Still self-contained: this page is served to people who have never dealt
 * with the company, and pulling the internal admin theme in for it would mean
 * ~6.4 MB of charts, editors and icon fonts before they can read a price.
 * The fonts below are the same self-hosted woff2 files the internal app uses,
 * so they are already in most visitors' cache.
 */

@font-face { font-family: "Bebas Neue"; src: url("../fonts/bebas-neue-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
    --bt-ink: #0b0b0b;
    --bt-panel: #1a1a1a;
    --bt-panel2: #141414;
    --bt-line: #3b3b3b;
    --bt-muted: #a7a7a7;
    --bt-white: #ffffff;
    --bt-yellow: #ffdd6e;
    --bt-yellow-hover: #ffe89a;
    --bt-yellow-rgb: 255, 221, 110;
    --bt-red: #b51111;
    --bt-font-display: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
    --bt-font-body: "Montserrat", Arial, sans-serif;
    --radius: 10px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    color: var(--bt-white);
    font: 400 16px/1.65 var(--bt-font-body);
    /* The same layered shell as the old quotation: a warm glow top-right
       over a near-black gradient, so the page reads as brand rather than as
       a plain dark background. */
    background:
        radial-gradient(ellipse at 78% 0%, rgba(var(--bt-yellow-rgb), .12), transparent 20rem),
        radial-gradient(ellipse at 96% 12%, rgba(255, 255, 255, .06), transparent 15rem),
        linear-gradient(#111, #181818 58%, #0b0b0b);
    background-attachment: fixed;
    min-height: 100vh;
}

h1, h2, h3 {
    font-family: var(--bt-font-display);
    letter-spacing: .02em;
    font-weight: 400;
}

a { color: var(--bt-yellow); }
a:hover { color: var(--bt-yellow-hover); }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus {
    left: 8px; top: 8px; z-index: 10;
    background: var(--bt-yellow); color: var(--bt-ink);
    padding: 10px 14px; border-radius: var(--radius); text-decoration: none;
}

/* ------------------------------------------------------------ chrome */

.q-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: rgba(11, 11, 11, .96);
    border-bottom: 1px solid var(--bt-line);
    flex-wrap: wrap;
}
.q-brand {
    color: var(--bt-white);
    font-family: var(--bt-font-display);
    font-size: 24px;
    letter-spacing: .06em;
    text-decoration: none;
}
/* The wordmark is one colour. It read BLACK in white + TWENTY in yellow,
   which split the name in two and put the accent somewhere it competes with
   the yellow that means "this is the price" and "this is the button". */
.q-brand span { color: inherit; }
.q-nav nav { display: flex; gap: 20px; }
.q-nav nav a {
    color: var(--bt-muted);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.q-nav nav a:hover { color: var(--bt-yellow); }

.q-footer {
    margin-top: 56px;
    padding: 30px 24px;
    border-top: 1px solid var(--bt-line);
    background: var(--bt-panel2);
    color: var(--bt-muted);
    text-align: center;
    font-size: 13px;
}
.q-footer p { margin: 4px 0; }

/* ------------------------------------------------------------- layout */

.q-wrap { max-width: 1140px; margin: 0 auto; padding: 0 20px; }

.q-hero { max-width: 1140px; margin: 44px auto 26px; padding: 0 20px; }
.q-hero p.kicker {
    margin: 0 0 8px;
    display: inline-flex;
    align-items: center;
    padding: .3rem .75rem;
    border-radius: 999px;
    background: rgba(var(--bt-yellow-rgb), .12);
    color: var(--bt-yellow);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.q-hero h1 {
    margin: 10px 0;
    font-size: clamp(38px, 6vw, 62px);
    line-height: 1;
    letter-spacing: .03em;
}
.q-hero p.lead { margin: 0; color: var(--bt-muted); max-width: 62ch; }

.q-card {
    background: var(--bt-panel);
    border: 1px solid var(--bt-line);
    border-radius: var(--radius);
    padding: 26px;
    margin-bottom: 22px;
}
.q-card > h2 { margin: 0 0 4px; font-size: 26px; letter-spacing: .03em; }
.q-card > p.hint { margin: 0 0 20px; color: var(--bt-muted); font-size: 14px; }

/* -------------------------------------------------------------- forms */

.q-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }

label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: var(--bt-white); }

input[type=text], input[type=tel], input[type=email], input[type=number], select, textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--bt-line);
    border-radius: 8px;
    font: inherit;
    background: var(--bt-panel2);
    color: var(--bt-white);
}
input::placeholder, textarea::placeholder { color: #6f6f6f; }
input:focus, select:focus, textarea:focus {
    outline: 3px solid rgba(var(--bt-yellow-rgb), .28);
    border-color: var(--bt-yellow);
}
select option { background: var(--bt-panel2); color: var(--bt-white); }
textarea { min-height: 96px; resize: vertical; }

.q-field { margin-bottom: 16px; }
.q-note { font-size: 13px; color: var(--bt-muted); margin-top: 6px; }

/* "(optional)" beside a label - deliberately quiet, so the required fields
   are the ones that carry weight. */
.q-optional { font-weight: 400; color: var(--bt-muted); }

/* Checkboxes must not stretch to the full field width the text inputs use. */
input[type=checkbox] { width: auto; accent-color: var(--bt-yellow); }

/* -------------------------------------------------------------- items */

.q-items { width: 100%; border-collapse: collapse; }
.q-items th {
    text-align: left;
    font-size: 11px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bt-muted);
    font-weight: 700;
    border-bottom: 1px solid var(--bt-line);
    padding: 0 8px 10px 0;
}
.q-items td {
    padding: 10px 8px 10px 0;
    border-bottom: 1px solid var(--bt-line);
    vertical-align: middle;
}
.q-items td:last-child, .q-items th:last-child { text-align: right; padding-right: 0; }

/* The price is the thing the eye should land on - same yellow the old
   quotation used for every money figure. */
.q-line-total {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: var(--bt-yellow);
}

.q-remove {
    background: none;
    border: 1px solid var(--bt-line);
    border-radius: 6px;
    color: var(--bt-muted);
    cursor: pointer;
    padding: 4px 10px;
    font-size: 16px;
    line-height: 1;
}
.q-remove:hover { color: var(--bt-red); border-color: var(--bt-red); }

/* ------------------------------------------------------------ buttons */

.q-btn {
    display: inline-block;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 13px 24px;
    font: 700 14px/1 var(--bt-font-body);
    letter-spacing: .04em;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}
/* The primary action is the brand yellow on ink, not a coloured-in blue or
   red - it is the one thing on the page that must look pressable. */
.q-btn-primary { background: var(--bt-yellow); color: var(--bt-ink); }
.q-btn-primary:hover { background: var(--bt-yellow-hover); color: var(--bt-ink); }
.q-btn-ghost { background: transparent; color: var(--bt-white); border-color: var(--bt-line); }
.q-btn-ghost:hover { border-color: var(--bt-yellow); color: var(--bt-yellow); }
.q-btn[disabled] { opacity: .45; cursor: not-allowed; }

.q-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

/* ------------------------------------------------------------ summary */

.q-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    border-top: 1px dashed var(--bt-line);
    margin-top: 16px;
    padding-top: 16px;
    font-weight: 700;
}
.q-total strong {
    font-family: var(--bt-font-display);
    font-size: 40px;
    letter-spacing: .02em;
    color: var(--bt-yellow);
    font-weight: 400;
}

/* The old app's save banner: a yellow-outlined panel, used here for the
   deposit callout. */
.q-pay {
    border: 1px solid var(--bt-yellow);
    background: rgba(var(--bt-yellow-rgb), .08);
    border-radius: 8px;
    padding: 16px 18px;
    margin: 20px 0;
}
.q-pay p { margin: 0 0 6px; }
.q-pay strong { color: var(--bt-yellow); font-size: 20px; }

.q-alert {
    border: 1px solid var(--bt-red);
    background: rgba(181, 17, 17, .14);
    color: var(--bt-white);
    border-radius: 8px;
    padding: 13px 16px;
    margin: 20px 0 0;
}

.q-ref {
    display: inline-block;
    font-family: var(--bt-font-display);
    font-size: 22px;
    letter-spacing: .06em;
    color: var(--bt-yellow);
    background: rgba(var(--bt-yellow-rgb), .1);
    border: 1px solid rgba(var(--bt-yellow-rgb), .35);
    padding: 5px 14px;
    border-radius: 6px;
}

.q-def { margin: 0; }
.q-def div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    border-bottom: 1px solid var(--bt-line);
    font-size: 14px;
}
.q-def div:last-child { border-bottom: none; }
.q-def dt { color: var(--bt-muted); }
.q-def dd { margin: 0; font-weight: 600; text-align: right; color: var(--bt-white); }

.q-success { text-align: center; padding: 22px 0 6px; }
.q-success h1 { font-size: clamp(34px, 6vw, 52px); margin: 14px 0; }
.q-success-lead { color: var(--bt-muted); max-width: 52ch; margin: 0 auto 18px; }
.q-success .tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 66px;
    height: 66px;
    border-radius: 50%;
    background: var(--bt-yellow);
    color: var(--bt-ink);
    font-size: 32px;
}

@media (max-width: 600px) {
    .q-card { padding: 18px; }
    .q-items thead { display: none; }
    .q-items td { display: block; border: 0; padding: 4px 0; }
    .q-items tr { display: block; border-bottom: 1px solid var(--bt-line); padding: 12px 0; }
    .q-items td:last-child { text-align: left; }
}