/* ═══════════════════════════════════════════════════════════════════════
   EFBA — Quote request flow
   Two surfaces share this file:
     1. /catalogue/  — the "add to list" button on each product card and the
        sticky basket bar that follows the visitor down the page.
     2. /request-quote/ — the product picker and the request form itself.

   Every color comes from variables.css (palette tokens).
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
   1. Catalogue — product card actions
   ─────────────────────────────────────────────────────────────── */

.product-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: stretch;
    margin-top: 1.1rem;
}

/* Both buttons share the row and grow together, so the row keeps the same
   height whether the toggle reads "Add to list" or "In your list", and it
   only breaks onto two lines when the card is genuinely too narrow. */
.product-actions > * {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

/* Inside the actions row the enquiry link becomes the primary button and the
   basket toggle stays a quiet outline, so the faster route reads as the main
   one. The link keeps its original underline styling everywhere else. */
.product-actions .product-card-enquire {
    margin-top: 0;
    padding: 0.6rem 0.9rem;
    font-weight: 600;
    color: #fff;
    background: var(--ocean-700);
    border: 1px solid var(--ocean-700);
    border-bottom-color: var(--ocean-700);
    border-radius: var(--radius-pill);
    padding-bottom: 0.6rem;
    transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}

.product-actions .product-card-enquire:hover {
    gap: 0.4rem;
    color: #fff;
    background: var(--ocean-800);
    border-color: var(--ocean-800);
}

.product-add {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 0.9rem;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--text-heading);
    background: transparent;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background 0.2s var(--ease-out), border-color 0.2s var(--ease-out), color 0.2s var(--ease-out);
}

.product-add:hover {
    background: var(--bg-soft);
    border-color: var(--accent);
    color: var(--accent-text);
}

.product-add:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.product-add .product-add-icon {
    width: 14px;
    height: 14px;
    flex: none;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.product-add .icon-check { display: none; }

.product-add.is-added {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent-text);
}

.product-add.is-added .icon-add { display: none; }
.product-add.is-added .icon-check { display: block; }

/* ───────────────────────────────────────────────────────────────
   2. Catalogue — sticky basket bar
   ─────────────────────────────────────────────────────────────── */

.quote-bar {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 60;
    background: var(--bg-dark);
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.16);
    transform: translateY(100%);
    transition: transform 0.28s var(--ease-out);
}

.quote-bar.is-visible { transform: translateY(0); }

.quote-bar[hidden] { display: none; }

.quote-bar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem 1.25rem;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0.9rem clamp(1.25rem, 4vw, 2rem);
}

.quote-bar-count {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    color: var(--text-on-dark);
    margin: 0;
}

.quote-bar-count strong {
    font-weight: 600;
    color: #fff;
}

.quote-bar-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.quote-bar-clear {
    padding: 0.5rem 0.4rem;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    color: var(--text-on-dark-muted);
    background: none;
    border: 0;
    border-bottom: 1px solid transparent;
    cursor: pointer;
    transition: color 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}

.quote-bar-clear:hover {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.5);
}

.quote-bar-go {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.5rem;
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    color: #fff;
    background: var(--ocean-700);
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: background 0.2s var(--ease-out);
}

.quote-bar-go:hover { background: var(--accent-hover); }

/* Space for the fixed bar so it does not cover the last footer line */
body.has-quote-bar { padding-bottom: 0; }
body.has-quote-bar .ph-page { padding-bottom: var(--quote-bar-h, 0px); }

@media (max-width: 560px) {
    .quote-bar-inner { justify-content: center; text-align: center; }
    .quote-bar-go { flex: 1; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .quote-bar { transition: none; }
}

/* ───────────────────────────────────────────────────────────────
   4. Request-quote page — header
   ─────────────────────────────────────────────────────────────── */

.quote-header {
    padding-top: var(--space-xl);
    padding-bottom: var(--space-2xl);
    background: var(--bg-soft);
    border-bottom: 1px solid var(--border);
}

.quote-header h1 {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 1.7rem + 2.4vw, 3.5rem);
    font-weight: 500;
    color: var(--text-heading);
    margin: 0;
}

.quote-header h1 em {
    font-style: normal;
    color: var(--accent-text);
}

.quote-header-lede {
    max-width: 62ch;
    margin-top: var(--space-md);
    font-size: var(--text-lg);
    line-height: 1.7;
    color: var(--text-muted);
}

.quote-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.75rem;
    margin-top: var(--space-xl);
    padding: 0;
    list-style: none;
}

.quote-trust li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.quote-trust svg {
    width: 16px;
    height: 16px;
    flex: none;
    stroke: var(--accent);
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ───────────────────────────────────────────────────────────────
   5. Request-quote page — panel and steps
   ─────────────────────────────────────────────────────────────── */

.quote-main {
    padding-top: var(--space-3xl);
    padding-bottom: var(--space-3xl);
}

.quote-panel {
    max-width: 880px;
    margin: 0 auto;
}

.quote-step {
    margin-bottom: var(--space-3xl);
}

.quote-step:last-child { margin-bottom: 0; }

.quote-step-head {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: var(--space-md);
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--border);
}

.quote-step-num {
    font-family: var(--font-display);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--accent-text);
}

.quote-step-head h2 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 500;
    color: var(--text-heading);
    margin: 0;
}

.quote-step-note {
    margin: 0 0 var(--space-lg);
    font-size: var(--text-sm);
    line-height: 1.7;
    color: var(--text-muted);
    max-width: 68ch;
}

/* ─── Selected-product chips ─── */

.quote-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: var(--space-lg);
    padding: 0;
    list-style: none;
}

.quote-chips:empty { display: none; }

.quote-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.55rem 0.45rem 0.95rem;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--accent-text);
    background: var(--accent-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
}

.quote-chip button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    color: inherit;
    background: rgba(255, 255, 255, 0.72);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    line-height: 1;
}

.quote-chip button:hover { background: #fff; }

.quote-chip button svg {
    width: 10px;
    height: 10px;
    stroke: currentColor;
    stroke-width: 2.6;
    stroke-linecap: round;
    fill: none;
}

.quote-empty-note {
    margin: 0 0 var(--space-lg);
    padding: 0.9rem 1.1rem;
    font-size: var(--text-sm);
    color: var(--text-muted);
    background: var(--bg-soft);
    border-inline-start: 3px solid var(--border-strong);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.quote-empty-note[hidden] { display: none; }

/* ─── Product picker ─── */

.quote-picker {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
}

.quote-picker > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 1.15rem;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-heading);
    cursor: pointer;
    list-style: none;
}

.quote-picker > summary::-webkit-details-marker { display: none; }

.quote-picker > summary::after {
    content: "";
    width: 9px;
    height: 9px;
    flex: none;
    border-right: 1.5px solid var(--text-muted);
    border-bottom: 1.5px solid var(--text-muted);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.2s var(--ease-out);
}

.quote-picker[open] > summary::after {
    transform: rotate(225deg) translate(-2px, -2px);
}

.quote-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.5rem;
    padding: 0 1.15rem 1.15rem;
}

.quote-pick {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color 0.2s var(--ease-out), background 0.2s var(--ease-out);
}

.quote-pick:hover { border-color: var(--border-strong); background: var(--bg-soft); }

.quote-pick input {
    width: 17px;
    height: 17px;
    margin-top: 0.15rem;
    flex: none;
    accent-color: var(--accent);
    cursor: pointer;
}

.quote-pick-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.quote-pick-name {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-heading);
}

.quote-pick-meta {
    font-size: var(--text-xs);
    color: var(--text-muted);
}

.quote-pick input:checked ~ .quote-pick-text .quote-pick-name { color: var(--accent-text); }

.quote-pick:has(input:checked) {
    border-color: var(--accent);
    background: var(--accent-soft);
}

/* ─── Form grid reuses forms.css primitives ─── */

.quote-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem 1.5rem;
}

@media (max-width: 720px) {
    .quote-form-grid { grid-template-columns: 1fr; }
}

/* ─── Closing reassurance under the submit button ─── */

.quote-assurance {
    margin-top: var(--space-2xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--border);
    font-size: var(--text-xs);
    line-height: 1.75;
    color: var(--text-muted);
}

/* ─── FAQ ─── */

.quote-faq {
    max-width: 880px;
    margin: var(--space-3xl) auto 0;
    padding-top: var(--space-3xl);
    border-top: 1px solid var(--border);
}

.quote-faq h2 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 500;
    color: var(--text-heading);
    margin: 0 0 var(--space-lg);
}

.quote-faq-item {
    border-bottom: 1px solid var(--border);
}

.quote-faq-item h3 {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-heading);
    margin: 0;
    padding: 1.1rem 0 0.5rem;
}

.quote-faq-item p {
    margin: 0 0 1.1rem;
    font-size: var(--text-sm);
    line-height: 1.75;
    color: var(--text-muted);
}

/* ─── Breadcrumb ─── */

.quote-breadcrumb {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-bottom: var(--space-md);
}

.quote-breadcrumb a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--border-strong); }
.quote-breadcrumb a:hover { color: var(--accent-text); }
.quote-breadcrumb span { margin-inline: 0.4rem; }

/* Request-quote page: the navbar button shows "you are here" instead of a call to
   action (set by quote-basket.js). Inset shadow keeps the button's size unchanged. */
.nav-cta.is-current,
.nav-cta.is-current:hover {
    color: var(--accent-text);
    background: transparent;
    box-shadow: inset 0 0 0 1.5px var(--accent);
    cursor: default;
}

.nav-cta.is-current .nav-cta-count { color: #fff; background: var(--accent); }

/* Product cards on the same row: meta + buttons aligned (bottom-anchored) */
.product-card { display: flex; flex-direction: column; }
.product-card-body { flex: 1; display: flex; flex-direction: column; }
.product-card-body .product-meta { margin-top: auto; }
/* On phones the product meta row stacks; no separator dot at the start of a line */
@media (max-width: 600px) {
    .product-card .product-meta { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
    .product-card .product-meta-item + .product-meta-item::before { content: none; display: none; }
}