/* ===================================================================
   Wordly — the "upload your brief" quotation widget (brief-quote.js)

   Lives on three kinds of page — the light Academic Writing page, the
   dark /pricing page and the signed-in app — so it paints with whatever
   tokens the page around it defines, with a fallback chain for each:
   the written page's --a1, the app pages' --c1, the app's --brand.
   =================================================================== */

/* Its OWN neutrals, light by default, and a dark set for the dark shell
   below. Borrowing the page's hairline did not work: the public shell
   defines --hair-2 as a WHITE line for its dark ground, and on the light
   Academic Writing page that left every input borderless. Only the
   accent is borrowed — it is what makes the widget belong to the page. */
.bq {
    --bq-ink:    #17152a;
    --bq-text:   #46435c;
    --bq-muted:  #615e78;
    --bq-line:   #dcd7ea;
    --bq-card:   #ffffff;
    --bq-accent: var(--a1, var(--c1, var(--brand-dark, #6d28d9)));
    --bq-accent2: var(--a2, var(--c2, #a21caf));
    --bq-tint:   color-mix(in srgb, var(--bq-accent) 9%, transparent);

    display: grid; gap: 1rem;
    padding: 1.5rem; border-radius: 22px;
    background: var(--bq-card); border: 1px solid var(--bq-line);
    box-shadow: 0 18px 50px rgba(30, 20, 70, 0.08);
    color: var(--bq-ink); text-align: left;
}
.bq .icon { width: 16px; height: 16px; flex: 0 0 auto; }
/* The panels below set display: grid, which beats the [hidden] attribute
   on its own — this is what keeps the spinner and the result away until
   they are wanted. */
.bq [hidden] { display: none !important; }

.bq-kicker {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--bq-accent);
}
.bq-head h3 { margin: 0.35rem 0 0.3rem; font-size: 1.35rem; color: var(--bq-ink); }
.bq-head p  { margin: 0; color: var(--bq-text); line-height: 1.55; }

.bq-drop {
    display: grid; justify-items: center; gap: 0.35rem; text-align: center;
    padding: 1.8rem 1rem; border-radius: 18px; cursor: pointer;
    border: 2px dashed color-mix(in srgb, var(--bq-accent) 45%, transparent);
    background: var(--bq-tint);
    transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.bq-drop:hover, .bq-drop.is-over { transform: translateY(-2px); background: color-mix(in srgb, var(--bq-accent) 15%, transparent); }
.bq-drop.is-off { opacity: .5; pointer-events: none; }
.bq-drop b { color: var(--bq-ink); }
.bq-drop small { color: var(--bq-text); }
.bq-drop-icon {
    display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; margin-bottom: 0.3rem;
    background: linear-gradient(130deg, var(--bq-accent), var(--bq-accent2)); color: #fff;
}
.bq-drop-icon .icon { width: 22px; height: 22px; }

.bq-busy { display: grid; justify-items: center; gap: 0.4rem; padding: 1.8rem 1rem; text-align: center; }
.bq-busy small { color: var(--bq-text); }
.bq-spin {
    width: 34px; height: 34px; border-radius: 50%;
    border: 3px solid var(--bq-tint); border-top-color: var(--bq-accent);
    animation: bq-spin .8s linear infinite;
}
@keyframes bq-spin { to { transform: rotate(360deg); } }

.bq-error {
    padding: 0.75rem 1rem; border-radius: 12px; font-size: 0.9rem;
    background: rgba(220, 38, 38, 0.08); border: 1px solid rgba(220, 38, 38, 0.3); color: #b91c1c;
}

.bq-result { display: grid; gap: 1.1rem; }
.bq-read { padding: 1rem 1.1rem; border-radius: 16px; background: var(--bq-tint); }
.bq-file { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--bq-text); }
.bq-read h4 { margin: 0.35rem 0 0.6rem; font-size: 1.1rem; color: var(--bq-ink); }
.bq-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.bq-chips span {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.3rem 0.65rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700;
    background: var(--bq-card); border: 1px solid var(--bq-line); color: var(--bq-ink);
}
.bq-chips span .icon { color: var(--bq-accent); width: 14px; height: 14px; }
.bq-chips span.is-warn .icon { color: #b45309; }
.bq-req { margin: 0.7rem 0 0; padding-left: 1.1rem; color: var(--bq-text); font-size: 0.9rem; line-height: 1.5; }
.bq-note { margin: 0.5rem 0 0; color: var(--bq-text); font-size: 0.88rem; }

.bq-form { display: grid; gap: 0.9rem; }
.bq-field { display: grid; gap: 0.4rem; }
.bq-field > span { font-weight: 700; font-size: 0.9rem; color: var(--bq-ink); }
.bq-field > span em { font-weight: 500; font-style: normal; color: var(--bq-muted); }
.bq-field input[type="number"], .bq-field input[type="text"], .bq-field input[type="tel"] {
    width: 100%; max-width: 320px; padding: 0.65rem 0.8rem; border-radius: 12px; font: inherit;
    border: 1px solid var(--bq-line); background: var(--bq-card); color: var(--bq-ink);
}
.bq-field input:focus { outline: 2px solid color-mix(in srgb, var(--bq-accent) 45%, transparent); outline-offset: 1px; }
.bq-hint { color: var(--bq-muted); font-size: 0.8rem; }

.bq-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.45rem; }
.bq-seg button {
    display: grid; gap: 0.1rem; padding: 0.6rem 0.5rem; border-radius: 12px; cursor: pointer; font: inherit;
    border: 1.5px solid var(--bq-line); background: var(--bq-card); color: var(--bq-ink); text-align: center;
}
.bq-seg button small { color: var(--bq-text); font-size: 0.75rem; }
.bq-seg button.is-on { border-color: var(--bq-accent); background: var(--bq-tint); box-shadow: 0 0 0 1px var(--bq-accent) inset; }
.bq-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; color: var(--bq-ink); }
.bq-check input { accent-color: var(--bq-accent); width: 17px; height: 17px; }

.bq-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.bq-table th {
    text-align: left; padding: 0.55rem 0.7rem; font-weight: 600; font-size: 0.8rem;
    background: #3a3a3a; color: #fff;
}
.bq-table th:first-child { border-radius: 8px 0 0 8px; }
.bq-table th:last-child  { border-radius: 0 8px 8px 0; }
.bq-table th:nth-child(n+2), .bq-table td:nth-child(n+2) { text-align: right; white-space: nowrap; }
.bq-table td { padding: 0.55rem 0.7rem; color: var(--bq-ink); border-bottom: 1px solid var(--bq-line); }
.bq-table td small { display: block; color: var(--bq-muted); font-size: 0.75rem; }
.bq-table tfoot td { border-bottom: 0; color: var(--bq-text); padding-top: 0.35rem; padding-bottom: 0.35rem; }
.bq-table tfoot td:first-child { text-align: right; }
.bq-table tfoot tr.bq-total td { color: var(--bq-ink); font-weight: 800; font-size: 1.02rem; border-top: 2px solid var(--bq-ink); padding-top: 0.6rem; }

.bq-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 0.8rem; }
.bq-split > div { padding: 0.8rem 1rem; border-radius: 14px; border: 1px solid var(--bq-line); display: grid; gap: 0.15rem; }
.bq-split > div:first-child {
    border-color: transparent; color: #fff;
    background: linear-gradient(130deg, var(--bq-accent), var(--bq-accent2));
}
.bq-split small { font-size: 0.78rem; opacity: 0.92; }
.bq-split > div:last-child small { color: var(--bq-text); }
.bq-split b { font-size: 1.25rem; letter-spacing: -0.02em; }

.bq-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.bq-btn {
    display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.75rem 1.2rem;
    border-radius: 999px; font: inherit; font-weight: 700; font-size: 0.95rem; cursor: pointer; text-decoration: none;
}
.bq-btn-primary { border: 0; color: #fff; background: linear-gradient(120deg, var(--bq-accent), var(--bq-accent2)); box-shadow: 0 10px 24px color-mix(in srgb, var(--bq-accent) 30%, transparent); }
.bq-btn-primary:disabled { opacity: .5; cursor: default; box-shadow: none; }
.bq-btn-ghost { border: 1.5px solid color-mix(in srgb, var(--bq-accent) 40%, transparent); color: var(--bq-accent); background: transparent; }
.bq-btn.is-off { opacity: .45; pointer-events: none; }
.bq-link { border: 0; background: none; color: var(--bq-text); text-decoration: underline; cursor: pointer; font: inherit; font-size: 0.88rem; }

/* The dark shell (/pricing). Not in the White theme (html[data-theme="light"]):
   there the widget keeps its own light tokens, as on the light service pages. */
html:not([data-theme="light"]) body.site-public:not(.wp-light) .bq {
    --bq-ink:    #f5f3ff;
    --bq-text:   rgba(245, 243, 255, 0.78);
    --bq-muted:  rgba(245, 243, 255, 0.62);
    --bq-line:   rgba(255, 255, 255, 0.2);
    --bq-card:   rgba(255, 255, 255, 0.04);
    --bq-accent: #a78bfa;
    --bq-accent2: #e879f9;
    box-shadow: none;
}
html:not([data-theme="light"]) body.site-public:not(.wp-light) .bq-read { background: rgba(255, 255, 255, 0.05); }
html:not([data-theme="light"]) body.site-public:not(.wp-light) .bq-split > div:first-child { background: linear-gradient(130deg, #7c3aed, #a21caf); }
html:not([data-theme="light"]) body.site-public:not(.wp-light) .bq-btn-primary { background: linear-gradient(120deg, #7c3aed, #a21caf); }
html:not([data-theme="light"]) body.site-public:not(.wp-light) .bq-table th { background: rgba(255, 255, 255, 0.12); }

/* `body.site-public small` (0,1,2) colours every <small> on the public
   pages, so the label on the coloured advance box needs its own. */
.bq .bq-split > div:first-child small { color: rgba(255, 255, 255, 0.92); }

@media (max-width: 640px) {
    .bq { padding: 1.1rem; }
    .bq-seg { grid-template-columns: 1fr 1fr; }
    .bq-split { grid-template-columns: 1fr; }
    .bq-table { font-size: 0.82rem; }
    .bq-table th:nth-child(3), .bq-table td:nth-child(3) { display: none; }
    .bq-table tfoot td:first-child { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
    .bq-spin { animation-duration: 2.4s; }
    .bq-drop { transition: none; }
}

/* Technical work: confirmed by a person before it can be paid. */
.bq-review {
    display: flex; gap: 0.6rem; align-items: flex-start; margin-top: 0.8rem;
    padding: 0.8rem 1rem; border-radius: 14px; font-size: 0.9rem; line-height: 1.5;
    background: color-mix(in srgb, #f59e0b 12%, transparent); border: 1px solid color-mix(in srgb, #f59e0b 40%, transparent);
    color: var(--bq-ink);
}
.bq-review .icon { color: #b45309; margin-top: 0.15rem; }
html:not([data-theme="light"]) body.site-public:not(.wp-light) .bq-review .icon { color: #fbbf24; }
.bq-chips span.is-tech .icon { color: #b45309; }

/* The PDF link waits for a name and a WhatsApp number (2026-11-07). */
.bq-btn.bq-off { opacity: .55; cursor: not-allowed; }
.bq-field.bq-need input { border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220, 38, 38, .15) !important; }

/* Who the quotation is for (2026-11-08): first + last name side by side,
   or one line when the signed-in account already has them. */
.bq-names { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.75rem; max-width: 660px; }
.bq-names .bq-field input { max-width: none; }
.bq-names-hint { grid-column: 1 / -1; margin-top: -0.25rem; }
.bq-who {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem;
    padding: 0.7rem 0.9rem; border-radius: 12px; background: var(--bq-tint); border: 1px solid var(--bq-line);
    font-size: 0.92rem; color: var(--bq-ink);
}
.bq-who span { display: inline-flex; align-items: center; gap: 0.45rem; }
.bq-who .icon { color: var(--bq-accent); }
@media (max-width: 480px) { .bq-names { grid-template-columns: minmax(0, 1fr); } }