/*
 * Contact widget (Tts\Ui\ContactWidget\ContactWidget, js/contact-widget.js):
 * the help button bottom right and the panel it opens - WhatsApp and the phone
 * numbers. Loaded on every page, beheer included, so like the footer it lives
 * outside #content: base.css's reset does not reach it, and the Foundation
 * rules in combined.css (p, ul, a, button) do. Each element below says what it
 * needs rather than relying on either.
 *
 * It is a <details>: the launcher is its <summary>, the panel opens above it.
 * The button keeps --shop-fixed-bottom, the inset the Filters button shares,
 * and --shop-tap, so it stays under the Trusted Shops badge (its offset is set
 * in TrustedShopsBadgeComponent). layers.css hides it under the page overlays,
 * and hides the badge while the panel is open.
 */

.contact-widget {
    position: fixed;
    inset-block-end: var(--shop-fixed-bottom);
    inset-inline-end: var(--shop-space-4);
    /* Above the page, under the overlays (which hide it anyway). */
    z-index: var(--shop-z-sheet);
    font-family: var(--shop-font);
    -webkit-font-smoothing: antialiased;
}

/* Launcher ------------------------------------------------------------------- */

.contact-widget__launcher {
    display: grid;
    place-items: center;
    width: var(--shop-tap);
    height: var(--shop-tap);
    border-radius: 50%;
    background: var(--shop-accent);
    color: #fff;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--shop-ink) 28%, transparent);
    cursor: pointer;
    list-style: none;
    transition: background-color var(--shop-duration) var(--shop-ease);
}

.contact-widget__launcher::-webkit-details-marker {
    display: none;
}

.contact-widget__launcher:hover,
.contact-widget[open] .contact-widget__launcher {
    background: var(--shop-accent-strong);
}

.contact-widget__launcher:focus-visible {
    outline: 2px solid var(--shop-accent);
    outline-offset: 2px;
}

.contact-widget__launcher svg {
    width: 24px;
    height: 24px;
}

/* With the script, the open panel takes the button's place, in its corner, and
   its own close button closes it. Without the script the button is the only
   way to close it, so it stays, under the panel. */
.contact-widget.is-enhanced[open] .contact-widget__launcher {
    display: none;
}

/* Panel ---------------------------------------------------------------------- */

.contact-widget__panel {
    position: absolute;
    inset-block-end: calc(100% + var(--shop-space-2));
    inset-inline-end: 0;
    box-sizing: border-box;
    width: min(340px, calc(100vw - 2 * var(--shop-space-4)));
    /* Short enough to leave the top of the page in view on a phone held
       sideways; the panel scrolls rather than covering the header. */
    max-height: calc(100dvh - var(--shop-fixed-bottom) - var(--shop-tap) - var(--shop-space-2) - var(--shop-space-12));
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius-panel);
    background: var(--shop-surface);
    color: var(--shop-text);
    box-shadow: 0 8px 30px rgb(30 27 75 / 18%);
    font-size: var(--shop-text-md);
    line-height: var(--shop-leading-normal);
    text-align: start;
}

/* In the button's place, its bottom corner where the button's was. */
.contact-widget.is-enhanced .contact-widget__panel {
    inset-block-end: 0;
    max-height: calc(100dvh - var(--shop-fixed-bottom) - var(--shop-space-12));
}

@media (prefers-reduced-motion: no-preference) {
    .contact-widget__panel {
        transition:
            opacity var(--shop-duration) var(--shop-ease),
            translate var(--shop-duration) var(--shop-ease);
    }

    @starting-style {
        .contact-widget[open] .contact-widget__panel {
            opacity: 0;
            translate: 0 var(--shop-space-2);
        }
    }
}

.contact-widget__head {
    display: flex;
    align-items: center;
    gap: var(--shop-space-3);
    padding: var(--shop-space-3) var(--shop-space-2) var(--shop-space-3) var(--shop-space-4);
    border-block-end: 1px solid var(--shop-divider);
}

.contact-widget__logo {
    flex: none;
    width: 40px;
    height: 40px;
}

.contact-widget__brand {
    display: grid;
    flex: 1;
    min-width: 0;
    line-height: var(--shop-leading-snug);
}

.contact-widget__name {
    color: var(--shop-ink);
    font-size: var(--shop-text-base);
    font-weight: var(--shop-weight-bold);
}

.contact-widget__tagline {
    color: var(--shop-text-soft);
    font-size: var(--shop-text-sm);
}

/* Foundation styles every button; this undoes what it sets. */
.contact-widget__close {
    display: grid;
    flex: none;
    place-items: center;
    width: var(--shop-tap);
    height: var(--shop-tap);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--shop-radius-md);
    background: transparent;
    box-shadow: none;
    color: var(--shop-text-soft);
    cursor: pointer;
}

.contact-widget__close[hidden] {
    display: none;
}

/* Opening the panel focuses this button, so a plain :focus would show it as
   hovered after every click; :focus is only Foundation's colour undone. */
.contact-widget__close:focus {
    background: transparent;
    color: var(--shop-text-soft);
}

.contact-widget__close:hover,
.contact-widget__close:focus-visible {
    background: var(--shop-accent-soft);
    color: var(--shop-accent);
}

.contact-widget__close:focus-visible {
    outline: 2px solid var(--shop-accent);
    outline-offset: -2px;
}

.contact-widget__close svg {
    width: 20px;
    height: 20px;
}

.contact-widget__body {
    padding: var(--shop-space-4);
}

.contact-widget__title {
    margin: 0 0 var(--shop-space-1);
    color: var(--shop-ink);
    font-family: inherit;
    font-size: var(--shop-text-lg);
    font-weight: var(--shop-weight-bold);
    line-height: var(--shop-leading-tight);
}

.contact-widget__intro {
    margin: 0 0 var(--shop-space-4);
    color: var(--shop-text);
    font-family: inherit;
    font-size: var(--shop-text-md);
    line-height: var(--shop-leading-normal);
}

/* Actions -------------------------------------------------------------------- */

.contact-widget__actions {
    display: grid;
    gap: var(--shop-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-widget__action {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--shop-space-3);
    padding: var(--shop-space-3);
    border: 1px solid var(--shop-border);
    border-radius: var(--shop-radius-md);
    color: var(--shop-ink);
    text-decoration: none;
}

a.contact-widget__action {
    transition:
        background-color var(--shop-duration) var(--shop-ease),
        border-color var(--shop-duration) var(--shop-ease);
}

a.contact-widget__action:hover,
a.contact-widget__action:focus {
    border-color: var(--shop-accent-soft-hover);
    background: var(--shop-accent-soft);
    color: var(--shop-ink);
    text-decoration: none;
}

a.contact-widget__action:focus-visible {
    outline: 2px solid var(--shop-accent);
    outline-offset: 2px;
}

.contact-widget__icon {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--shop-radius-md);
    background: var(--shop-accent-soft);
    color: var(--shop-accent);
}

.contact-widget__icon svg {
    width: 22px;
    height: 22px;
}

.contact-widget__text {
    display: grid;
    gap: 2px;
    line-height: var(--shop-leading-snug);
}

.contact-widget__label {
    color: var(--shop-ink);
    font-size: var(--shop-text-control);
    font-weight: var(--shop-weight-bold);
}

.contact-widget__hint {
    color: var(--shop-text-soft);
    font-size: var(--shop-text-sm);
}

.contact-widget__chevron {
    color: var(--shop-accent);
}

.contact-widget__chevron svg {
    display: block;
    width: 18px;
    height: 18px;
}

/* The phone row is not a link itself; each number is. Tall enough to hit with
   a thumb, one under the other. */
.contact-widget__numbers {
    display: grid;
    justify-items: start;
}

.contact-widget__number,
.contact-widget__number:hover,
.contact-widget__number:focus {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--shop-accent);
    font-size: var(--shop-text-control);
    font-weight: var(--shop-weight-semibold);
    font-variant-numeric: tabular-nums;
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    text-underline-offset: 3px;
}

.contact-widget__number:hover {
    text-decoration-color: currentColor;
}

.contact-widget__number:focus-visible {
    outline: 2px solid var(--shop-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* As the product page's availability (components/availability.css): the
   words carry it, the dot repeats it - green while someone answers now, grey
   when it says when they will. */
.contact-widget__availability {
    display: flex;
    align-items: center;
    gap: var(--shop-space-2);
    color: var(--shop-text-soft);
    font-size: var(--shop-text-sm);
    font-weight: var(--shop-weight-semibold);
}

.contact-widget__availability::before {
    content: "";
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--shop-text-soft);
}

.contact-widget__availability--open {
    color: var(--shop-stock-text);
}

.contact-widget__availability--open::before {
    background: var(--shop-stock-dot);
}

@media (forced-colors: active) {
    .contact-widget__launcher {
        border: 1px solid ButtonText;
    }

    .contact-widget__availability::before {
        background: CanvasText;
    }
}

@media (prefers-reduced-motion: reduce) {
    .contact-widget__launcher,
    a.contact-widget__action {
        transition: none;
    }
}

@media print {
    .contact-widget {
        display: none;
    }
}