/* ---- The customer's quotation page (/q/{token}) ---------------------------
   Read once, on a phone, by someone who has never seen WorxOrder. It borrows
   the back office's type and radius but not its chrome: no sidebar, no top bar,
   nothing that presumes a signed-in user.

   Colour comes from the tenant. PublicQuote.razor sets --pq-accent and
   --pq-accent-soft on .mwm-pubq-page from TenantBranding, so the contractor's
   own colour carries the header tile, the accept button and the focus rings,
   and this file never needs to know who the contractor is. The values below
   are the fallback for a page rendered before the hostname has been resolved. */

.mwm-pubq-page {
    --pq-accent:      #1F4E79;
    --pq-accent-soft: #EFF6FF;
    --pq-ink:         #0F172A;
    --pq-muted:       #64748B;
    --pq-line:        #E2E8F0;
    --pq-navy:        #0E1B2E;      /* the WorxOrder wordmark, never the tenant's */

    min-height: 100vh;
    /* A wash of the tenant's colour behind the top of the page, fading to white. Reads as
       branded without putting a big block of colour behind text a customer has to read. */
    background: linear-gradient(180deg, var(--pq-accent-soft) 0, #F8FAFC 260px, #F8FAFC 100%);
    color: var(--pq-ink);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-size: 16px;              /* larger than the back office: read once, on a phone */
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* Border-box throughout: the strip tiles and inputs are sized in percentages with padding,
   and this page does not rely on the back office stylesheet for its reset. */
.mwm-pubq, .mwm-pubq *, .mwm-pubq *::before, .mwm-pubq *::after { box-sizing: border-box; }

.mwm-pubq {
    max-width: 720px;
    margin: 0 auto;
    padding: 22px 18px 40px;
}

/* ---- Header: the contractor's name, in the contractor's colour ---------- */

.mwm-pubq-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 6px 0 18px; margin-bottom: 16px;
}
.mwm-pubq-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.mwm-pubq-brand-tile {
    flex: 0 0 auto;
    width: 44px; height: 44px; border-radius: 12px;
    display: grid; place-items: center;
    background: var(--pq-accent); color: #fff;
    font-size: 20px; font-weight: 800; letter-spacing: -.02em;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--pq-accent) 28%, transparent);
}
.mwm-pubq-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.mwm-pubq-brand-name {
    font-weight: 800; font-size: 18px; letter-spacing: -.02em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mwm-pubq-brand-sub {
    font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: var(--pq-accent);
}
.mwm-pubq-ref {
    flex: 0 0 auto;
    font-size: 13.5px; color: var(--pq-muted);
    padding: 6px 12px; border-radius: 999px;
    background: #fff; border: 1px solid var(--pq-line);
}
.mwm-pubq-ref b { color: var(--pq-ink); font-weight: 600; }

/* ---- Cards ---------------------------------------------------------------- */

.mwm-pubq-card {
    border: 1px solid var(--pq-line);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .05);
}

.mwm-pubq h1 { font-size: 24px; margin: 0 0 4px; letter-spacing: -.02em; }
.mwm-pubq h2 { font-size: 18px; margin: 0 0 16px; letter-spacing: -.01em; }
.mwm-pubq p  { margin: 0 0 12px; }
.mwm-pubq-muted { color: var(--pq-muted); font-size: 14.5px; }
.mwm-pubq-lede  { color: var(--pq-muted); font-size: 15px; margin-bottom: 18px !important; }

/* The headline figures: total, validity, date. The total is the one number the customer
   came for, so it is the largest thing on the page. */
.mwm-pubq-strip {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-bottom: 20px;
}
.mwm-pubq-strip-item {
    flex: 1 1 140px;
    display: flex; flex-direction: column; gap: 2px;
    padding: 12px 14px; border-radius: 12px;
    background: #F8FAFC; border: 1px solid var(--pq-line);
}
.mwm-pubq-strip-item .lbl { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--pq-muted); }
.mwm-pubq-strip-item .val { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.mwm-pubq-strip-item.lead {
    flex: 2 1 220px;
    background: var(--pq-accent-soft);
    border-color: color-mix(in srgb, var(--pq-accent) 22%, var(--pq-line));
}
.mwm-pubq-strip-item.lead .lbl { color: var(--pq-accent); }
.mwm-pubq-strip-item.lead .val { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--pq-accent); }

/* Reference / for / address, as label-value pairs that stack on a narrow screen. */
.mwm-pubq-meta {
    display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px;
    margin: 0 0 16px; font-size: 15px;
}
.mwm-pubq-meta dt { color: var(--pq-muted); }
.mwm-pubq-meta dd { margin: 0; }

.mwm-pubq-summary {
    padding: 12px 14px; border-radius: 10px; background: #F8FAFC;
    border-left: 3px solid var(--pq-accent);
    font-size: 15px; margin-bottom: 18px;
}

/* ---- The priced lines ----------------------------------------------------
   On a phone the table becomes stacked rows: a four-column price table at
   375px wide is unreadable, and this is the part the customer most needs to
   read. The data-label attributes come from the markup. */
.mwm-pubq-table { width: 100%; border-collapse: collapse; font-size: 15px; margin-bottom: 16px; }
.mwm-pubq-table th,
.mwm-pubq-table td { padding: 10px 8px; text-align: left; border-bottom: 1px solid var(--pq-line); }
.mwm-pubq-table thead th {
    font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--pq-muted);
}
.mwm-pubq-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mwm-pubq-table tfoot th { text-align: right; font-weight: 600; }
.mwm-pubq-table tfoot .total th,
.mwm-pubq-table tfoot .total td { font-size: 18px; font-weight: 700; border-bottom: none; color: var(--pq-accent); }
.mwm-pubq-loc { display: block; font-size: 13px; color: var(--pq-muted); }

.mwm-pubq-terms { margin-top: 8px; font-size: 14.5px; }
.mwm-pubq-terms > summary { cursor: pointer; color: var(--pq-accent); font-weight: 600; }
.mwm-pubq-terms > p { margin-top: 10px; color: var(--pq-muted); }

/* ---- The decision -------------------------------------------------------- */

.mwm-pubq-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.mwm-pubq-input {
    width: 100%; padding: 12px 14px; font: inherit; font-size: 16px;   /* 16px: iOS zooms below it */
    border: 1px solid var(--pq-line); border-radius: 10px; background: #fff;
    margin-bottom: 16px;
}
.mwm-pubq-input:focus {
    outline: none; border-color: var(--pq-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--pq-accent) 15%, transparent);
}

.mwm-pubq-check {
    display: flex; gap: 11px; align-items: flex-start;
    padding: 14px; border: 1px solid var(--pq-line); border-radius: 10px;
    margin-bottom: 16px; cursor: pointer; font-size: 15px;
}
/* A big enough target to hit with a thumb, which is how most of these will be ticked. */
.mwm-pubq-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--pq-accent); flex: 0 0 auto; }

.mwm-pubq-error { color: #B91C1C; font-size: 14.5px; }

.mwm-pubq-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.mwm-pubq-btn {
    flex: 1 1 auto; min-width: 150px;
    padding: 14px 20px; font: inherit; font-size: 16px; font-weight: 600;
    border-radius: 10px; border: 1px solid transparent; cursor: pointer;
    transition: filter .12s ease, box-shadow .12s ease;
}
.mwm-pubq-btn:disabled { opacity: .55; cursor: default; }
.mwm-pubq-btn.primary {
    background: var(--pq-accent); color: #fff;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--pq-accent) 28%, transparent);
}
.mwm-pubq-btn.primary:not(:disabled):hover { filter: brightness(1.08); }
.mwm-pubq-btn.ghost   { background: #fff; color: var(--pq-ink); border-color: var(--pq-line); }
.mwm-pubq-btn.danger  { background: #B91C1C; color: #fff; }

.mwm-pubq-done h1 { margin-bottom: 10px; }

/* The signed-copy download is a link styled as the accept button: it opens a file, not a form. */
.mwm-pubq-download {
    display: inline-block; text-decoration: none; text-align: center;
    margin: 4px 0 14px;
}
.mwm-pubq-download:hover { filter: brightness(1.08); }

/* ---- Footer: the product's one sentence ---------------------------------- */

.mwm-pubq-foot {
    margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--pq-line);
    text-align: center;
}
.mwm-pubq-foot-note { font-size: 13.5px; color: var(--pq-muted); margin-bottom: 22px !important; }

.mwm-pubq-powered {
    display: inline-flex; align-items: center; gap: 14px; text-align: left;
    padding: 14px 18px 14px 14px; border-radius: 14px;
    background: #fff; border: 1px solid var(--pq-line);
    max-width: 560px;
}
.mwm-pubq-powered-tile { width: 44px; height: 44px; border-radius: 11px; flex: 0 0 auto; }
.mwm-pubq-powered-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mwm-pubq-powered-line { font-size: 14px; color: var(--pq-muted); }
/* The wordmark is real text in Inter, as it is everywhere else in the product: an SVG <text>
   cannot reach the webfont through an <img>. Navy and tight, never the tenant's accent. */
.mwm-pubq-worx {
    font-weight: 800; font-size: 17px; letter-spacing: -.6px; color: var(--pq-navy);
    vertical-align: -1px;
}
.mwm-pubq-powered-pitch { font-size: 13px; color: var(--pq-muted); line-height: 1.45; }

.mwm-pubq-devby {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-top: 14px; font-size: 12.5px; color: var(--pq-muted);
}
.mwm-pubq-devby img { height: 14px; }
.mwm-pubq-bluefin { font-weight: 800; letter-spacing: -.4px; color: var(--pq-navy); font-size: 13px; }

/* ---- Phones ---------------------------------------------------------------- */

@media (max-width: 520px) {
    .mwm-pubq { padding: 14px 14px 36px; }
    .mwm-pubq-card { padding: 18px 16px; border-radius: 14px; }
    .mwm-pubq h1 { font-size: 22px; }

    .mwm-pubq-head { flex-wrap: wrap; padding-bottom: 14px; }
    .mwm-pubq-ref { font-size: 12.5px; }

    .mwm-pubq-strip-item.lead { flex-basis: 100%; }
    .mwm-pubq-strip-item:not(.lead) { flex: 1 1 calc(50% - 6px); }

    /* Stacked rows, each cell labelled by its column. */
    .mwm-pubq-table thead { display: none; }
    .mwm-pubq-table tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--pq-line); }
    .mwm-pubq-table td { display: flex; justify-content: space-between; gap: 14px; border: none; padding: 3px 0; }
    .mwm-pubq-table td::before {
        content: attr(data-label); color: var(--pq-muted); font-size: 13px;
    }
    .mwm-pubq-table td:first-child { display: block; font-weight: 600; padding-bottom: 6px; }
    .mwm-pubq-table td:first-child::before { content: none; }
    .mwm-pubq-table tfoot tr { display: flex; justify-content: space-between; padding: 6px 0; border: none; }
    .mwm-pubq-table tfoot th { padding: 0; }
    .mwm-pubq-table tfoot td { padding: 0; }
    .mwm-pubq-btn { min-width: 0; }

    .mwm-pubq-powered { display: flex; padding: 12px 14px; }
}

/* The layout is blank and nothing resets the browser's 8px body margin, which would leave a
   white frame around the wash. Scoped to this page so the back office is untouched. */
body:has(> .mwm-pubq-page), body:has(.mwm-pubq-page) { margin: 0; }

/* The customer's uploaded logo in place of the initial tile. */
.mwm-pubq-brand-logo { flex: 0 0 auto; height: 44px; max-width: 160px; object-fit: contain; }