/* ═══════════════════════════════════════════════════════════════════════
   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 colour comes from variables.css, so the identical file themes itself
   navy/red on efba.uk and emerald/gold on efba.ae. Spacing uses logical
   properties throughout so the Arabic (RTL) pages need no overrides.
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
   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(--accent);
    border: 1px solid var(--accent);
    border-bottom-color: var(--accent);
    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(--accent-hover);
    border-color: var(--accent-hover);
}

.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(--accent);
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: background 0.2s var(--ease-out);
}

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

@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; }
}

/* ───────────────────────────────────────────────────────────────
   3. Navbar call-to-action (all pages)
   ─────────────────────────────────────────────────────────────── */

.nav-cta {
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 1.15rem;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.03em;
    white-space: nowrap;
    color: #fff;
    background: var(--accent);
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: background 0.2s var(--ease-out);
}

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

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

.nav-cta-count {
    display: none;
    margin-inline-start: 0.45rem;
    min-width: 1.25rem;
    padding: 0.05rem 0.35rem;
    font-size: 0.68rem;
    font-weight: 700;
    text-align: center;
    color: var(--accent-text);
    background: #fff;
    border-radius: var(--radius-pill);
}

.nav-cta-count.is-visible { display: inline-block; }

/* The desktop nav collapses at 900px but .navbar-actions keeps its space, so the
   call-to-action stays visible on tablets and only steps aside on phones, where
   the mobile menu carries its own copy of the link. */
@media (max-width: 900px) {
    .navbar-actions .nav-cta { padding: 0.45rem 0.85rem; font-size: 0.72rem; }
}

@media (max-width: 560px) {
    .navbar-actions .nav-cta { display: none; }
}

.mobile-nav .nav-cta {
    margin-top: 0.75rem;
    justify-content: center;
    width: 100%;
    padding: 0.8rem 1.15rem;
    font-size: var(--text-sm);
}

/* ─── Navbar fit ───
   The call-to-action is an eighth item in a bar that already carried seven
   links (plus the language switch on efba.ae). Without this the links wrap
   onto two lines and collide with the logo, so the navigation collapses to
   the hamburger earlier and its items never wrap. Both values are deliberate:
   the breakpoint is where logo + links + button stop fitting inside the
   1240px container. */

/* The navigation bar gets a slightly wider track than page content; the
   seven links plus the language switch and the button do not fit inside the
   1240px content container on any screen, however wide the window is. */
.navbar .container { max-width: 1320px; }

.navbar-nav { gap: clamp(0.55rem, 1.2vw, 0.95rem); }
.navbar-nav > li { white-space: nowrap; }

/* 1320 rather than efba.uk's 1240: this navigation also carries the AR/EN
   switch, and the English labels ("Our Approach", "Anti Aging Products") are
   the widest set on either site. */
@media (max-width: 1320px) {
    .navbar-nav { display: none; }
    .menu-toggle { display: flex; }
}

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

.quote-header {
    /* The navbar is fixed, so the page header clears it the same way
       .catalogue-header and the protocols header do. */
    padding-top: calc(var(--nav-height) + var(--space-3xl));
    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: italic;
    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; }