/**
 * Vloerkleedadviseur.
 *
 * Custom properties mirror the theme's _variables.scss so the modal reads as part
 * of the shop without joining the theme's Vite build. Everything is scoped under
 * .ds-advies / .ds-advies-banner so nothing here can leak into the grid.
 */
.ds-advies,
.ds-advies-banner {
    --ds-a-accent: #ff6700;
    --ds-a-heading: #2e2950;
    --ds-a-text: #252525;
    --ds-a-muted: #6b6875;
    --ds-a-border: #ececec;
    --ds-a-surface: #fff;
    --ds-a-tint: #f7f6f4;
    --ds-a-font: 'Avenir Next', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    --ds-a-heading-font: 'FilsonSoftW03', var(--ds-a-font);
}

/* Keeps `hidden` authoritative: no display rule below can outvote it. */
.ds-advies[hidden],
.ds-advies [hidden] {
    display: none !important;
}

/* ---------- banner ---------- */

.ds-advies-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 0 28px;
    padding: 22px 26px;
    border: 1px solid var(--ds-a-border);
    border-radius: 6px;
    background: var(--ds-a-tint);
    font-family: var(--ds-a-font);
}

/*
 * In the filter column there is room for one thing at a time: title, a line of
 * text, a button, each on its own row. The full-width version keeps the button
 * beside the text.
 */
.ds-advies-banner--compact {
    display: block;
    margin: 0 0 18px;
    padding: 16px 16px 18px;
}

.ds-advies-banner--compact .ds-advies-banner__title {
    font-size: 17px;
}

.ds-advies-banner--compact .ds-advies-banner__body {
    font-size: 13px;
    line-height: 1.45;
}

.filters .ds-advies-banner--compact .ds-advies-banner__button {
    width: 100%;
    margin-top: 12px;
    justify-content: center;
}

.ds-advies-banner__title {
    margin: 0 0 4px;
    font-family: var(--ds-a-heading-font);
    font-size: 20px;
    line-height: 1.25;
    color: var(--ds-a-heading);
}

.ds-advies-banner__body {
    margin: 0;
    max-width: 62ch;
    font-size: 15px;
    line-height: 1.5;
    color: var(--ds-a-muted);
}

.ds-advies-banner__button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

/* ---------- shell ---------- */

body.ds-advies-open {
    overflow: hidden;
}

.ds-advies {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    font-family: var(--ds-a-font);
    color: var(--ds-a-text);
}

.ds-advies__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(46, 41, 80, .65);
}

.ds-advies__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 860px;
    max-height: 92vh;
    background: var(--ds-a-surface);
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
}

.ds-advies__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    border-bottom: 1px solid var(--ds-a-border);
}

.ds-advies__title {
    margin: 0;
    font-family: var(--ds-a-heading-font);
    font-size: 18px;
    color: var(--ds-a-heading);
}

.ds-advies__close {
    border: 0;
    background: none;
    font-size: 28px;
    line-height: 1;
    color: var(--ds-a-muted);
    cursor: pointer;
    padding: 0 4px;
}

.ds-advies__body {
    padding: 24px;
    overflow-y: auto;
}

/* ---------- upload ---------- */

.ds-advies__dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 24px;
    border: 2px dashed var(--ds-a-border);
    border-radius: 6px;
    background: var(--ds-a-tint);
    color: var(--ds-a-muted);
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.ds-advies__dropzone.is-over,
.ds-advies__dropzone:hover {
    border-color: var(--ds-a-accent);
    background: #fff;
}

.ds-advies__dropzone strong {
    font-size: 16px;
    color: var(--ds-a-heading);
}

.ds-advies__file {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.ds-advies__tip {
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ds-a-muted);
}

.ds-advies__error {
    margin: 14px 0 0;
    padding: 10px 14px;
    border-radius: 4px;
    background: #fdecea;
    color: #a3271c;
    font-size: 14px;
}

/* A render that did not come back. Softer than an error: the rest did work. */
.ds-advies__missing {
    margin: 14px 0 0;
    padding: 10px 14px;
    border-radius: 4px;
    background: #fdf4e3;
    color: #7a5a10;
    font-size: 14px;
}

/* ---------- werkend ---------- */

.ds-advies__working {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 32px 0 24px;
    text-align: center;
}

.ds-advies__working strong {
    font-family: var(--ds-a-heading-font);
    font-size: 17px;
    color: var(--ds-a-heading);
}

.ds-advies__working span:last-child {
    font-size: 14px;
    color: var(--ds-a-muted);
}

.ds-advies__spinner {
    width: 34px;
    height: 34px;
    border: 3px solid var(--ds-a-border);
    border-top-color: var(--ds-a-accent);
    border-radius: 50%;
    animation: ds-advies-spin .9s linear infinite;
}

@keyframes ds-advies-spin {
    to { transform: rotate(360deg); }
}

.ds-advies__preview {
    display: block;
    width: 100%;
    max-height: 260px;
    object-fit: contain;
    border-radius: 6px;
    background: var(--ds-a-tint);
}

/* ---------- advies ---------- */

.ds-advies__sfeer {
    margin: 0 0 22px;
    padding: 16px 20px;
    border-left: 3px solid var(--ds-a-accent);
    background: var(--ds-a-tint);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ds-a-text);
}

.ds-advies__rugs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.ds-advies-rug {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--ds-a-border);
    border-radius: 6px;
    overflow: hidden;
}

.ds-advies-rug__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.ds-advies-rug__image {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    /* The studio shots are portrait with a white margin; `cover` cropped the top
       and bottom off every one of them, which on a rug is where the border and
       the run of the pattern live. Fit the whole rug in the box instead. */
    object-fit: contain;
    background: #fff;
    padding: 6px;
}

.ds-advies-rug__title {
    margin: 12px 14px 0;
    font-family: var(--ds-a-heading-font);
    font-size: 15px;
    color: var(--ds-a-heading);
}

.ds-advies-rug__kop {
    margin: 6px 14px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--ds-a-accent);
}

.ds-advies-rug__waarom {
    margin: 6px 14px 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ds-a-muted);
}

.ds-advies-rug__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    padding: 14px;
}

.ds-advies-rug__prijs {
    font-size: 14px;
    font-weight: 600;
    color: var(--ds-a-heading);
}

.ds-advies-rug__reject {
    border: 0;
    background: none;
    padding: 0;
    font-size: 13px;
    color: var(--ds-a-muted);
    text-decoration: underline;
    cursor: pointer;
}

.ds-advies__foot {
    margin-top: 22px;
    text-align: center;
}

.ds-advies__link {
    border: 0;
    background: none;
    padding: 0;
    font-size: 14px;
    color: var(--ds-a-muted);
    text-decoration: underline;
    cursor: pointer;
}

/* ---------- afwijzen ---------- */

.ds-advies__reject {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(46, 41, 80, .55);
}

.ds-advies__reject-panel {
    width: 100%;
    max-width: 440px;
    padding: 22px;
    background: var(--ds-a-surface);
    border-radius: 6px;
}

.ds-advies__reject-title {
    margin: 0 0 14px;
    font-family: var(--ds-a-heading-font);
    font-size: 16px;
    color: var(--ds-a-heading);
}

.ds-advies__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ds-advies-chip {
    padding: 7px 13px;
    border: 1px solid var(--ds-a-border);
    border-radius: 999px;
    background: #fff;
    font-size: 13px;
    color: var(--ds-a-text);
    cursor: pointer;
}

.ds-advies-chip.is-on {
    border-color: var(--ds-a-accent);
    background: var(--ds-a-accent);
    color: #fff;
}

.ds-advies__free {
    display: block;
    margin: 16px 0 0;
    font-size: 13px;
    color: var(--ds-a-muted);
}

.ds-advies__free textarea {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 9px 11px;
    border: 1px solid var(--ds-a-border);
    border-radius: 4px;
    font: inherit;
    font-size: 14px;
    resize: vertical;
}

.ds-advies__reject-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 18px;
}

@media (prefers-reduced-motion: reduce) {
    .ds-advies__spinner {
        animation: none;
    }
}

@media (max-width: 767px) {
    .ds-advies {
        padding: 0;
    }

    .ds-advies__dialog {
        max-width: none;
        max-height: 100vh;
        height: 100%;
        border-radius: 0;
    }

    .ds-advies-rug__image {
        aspect-ratio: 4 / 3;
    }

    .ds-advies-banner {
        padding: 18px;
    }

    .ds-advies-banner__button {
        width: 100%;
        justify-content: center;
    }
}

/* ---------- wat de klant heeft aangegeven ---------- */

.ds-advies__wishes {
    margin: -6px 0 22px;
    padding: 14px 16px;
    border: 1px solid var(--ds-a-border);
    border-radius: 6px;
    background: var(--ds-a-tint);
}

.ds-advies__wishes-intro {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ds-a-muted);
}

.ds-advies__wishlist {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ds-advies-wish__label {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0;
    padding: 6px 8px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--ds-a-text);
    cursor: pointer;
}

.ds-advies-wish__label:hover {
    background: #fff;
}

.ds-advies-wish__box {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 2px 0 0;
    accent-color: var(--ds-a-accent);
    cursor: pointer;
}

/*
 * Two lines and then an ellipsis: a long wish is a normal thing to type and it
 * should not turn the list into a wall of text. The full sentence stays on the
 * title attribute.
 */
.ds-advies-wish__text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.ds-advies-wish.is-off .ds-advies-wish__text {
    color: var(--ds-a-muted);
    text-decoration: line-through;
}

/* ---------- plek aanwijzen ---------- */

.ds-advies__lead {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ds-a-text);
}

.ds-advies__stage-frame {
    display: flex;
    justify-content: center;
    border-radius: 6px;
    overflow: hidden;
    background: var(--ds-a-tint);
}

/*
 * Sized by the photo, never by the box around it. A click is sent on as a
 * fraction of this element, and the pin is placed inside it with the same two
 * numbers, so any letterbox between the two would be a rug in the wrong spot.
 */
.ds-advies__stage {
    position: relative;
    display: inline-block;
    max-width: 100%;
    line-height: 0;
    cursor: crosshair;
}

.ds-advies__stage-photo {
    display: block;
    max-width: 100%;
    max-height: 52vh;
    height: auto;
    -webkit-user-select: none;
    user-select: none;
}

.ds-advies__pin {
    position: absolute;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: var(--ds-a-accent);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .25);
    pointer-events: none;
}

/* ---------- e-mail ---------- */

.ds-advies__field {
    display: block;
    max-width: 380px;
    font-size: 13px;
    color: var(--ds-a-muted);
}

.ds-advies__field input {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 12px 14px;
    border: 1px solid var(--ds-a-border);
    border-radius: 4px;
    font: inherit;
    font-size: 15px;
}

/* ---------- resultaat ---------- */

.ds-advies__results {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.ds-advies-result {
    margin: 0;
    border: 1px solid var(--ds-a-border);
    border-radius: 6px;
    overflow: hidden;
}

.ds-advies-result__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.ds-advies-result__image {
    display: block;
    width: 100%;
    object-fit: contain;
    background: var(--ds-a-tint);
}

.ds-advies-result__caption {
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--ds-a-heading);
}

/*
 * The slider's own furniture: a dot per card and a count in words. Without them
 * a row that happens to fit one card reads as one suggestion, which is the
 * opposite of the point.
 */
.ds-advies__dots {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 12px 0 0;
}

.ds-advies__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d9d6d0;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.ds-advies__dot.is-current {
    background: var(--ds-a-accent);
    transform: scale(1.25);
}

.ds-advies__dots-count {
    margin-left: 4px;
    font-size: 12px;
    color: var(--ds-a-muted);
}

/* ---------- kopen in de modal ---------- */

.ds-advies-buy {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 0 12px 12px;
    border-top: 1px solid var(--ds-a-border);
    padding-top: 10px;
    margin: 0;
}

.ds-advies-buy__fields {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ds-advies-buy__field {
    display: flex;
    flex: 1 1 120px;
    flex-direction: column;
    gap: 3px;
    font-size: 11px;
    color: var(--ds-a-muted);
}

/*
 * The shop's own form styling is built for a product page and lands at 16px
 * with 30px of padding; three of those in a card this wide is a control twice
 * the size of everything around it. These win on specificity rather than with
 * !important, which is why they carry the block's name as well as their own.
 */
.ds-advies .ds-advies-buy__field select {
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 7px 9px;
    border: 1px solid var(--ds-a-border);
    border-radius: 4px;
    background-color: var(--ds-a-surface);
    font-family: inherit;
    font-size: 13px;
    line-height: 1.3;
    color: var(--ds-a-text);
}

.ds-advies-buy__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ds-a-heading);
}

/* The shop's own price markup lands in here, struck-through discount and all. */
.ds-advies-buy__price del {
    font-weight: 400;
    color: var(--ds-a-muted);
}

.ds-advies-buy__price ins {
    text-decoration: none;
}

/*
 * WooCommerce writes "Oorspronkelijke prijs was: ..." into the price markup for
 * screen readers. The theme hides that class site-wide; this is here so the
 * modal does not depend on it.
 */
.ds-advies-buy__price .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.ds-advies-buy__stock {
    font-size: 12px;
    font-weight: 400;
    color: var(--ds-a-muted);
}

/* Beats `.woocommerce button.button`, which is where the 16px comes from. */
.ds-advies .ds-advies-buy button.ds-advies-buy__go {
    width: 100%;
    padding: 11px 38px 11px 14px;
    font-size: 13px;
    line-height: 1.3;
    background-position: right 12px center;
    background-size: 16px;
}

.ds-advies-buy__go.is-added {
    background: var(--ds-a-tint);
    border-color: var(--ds-a-border);
    color: var(--ds-a-heading);
}

.ds-advies-buy__note {
    margin: 0;
    font-size: 12px;
    color: #b3261e;
}

.ds-advies-buy__link {
    font-size: 12px;
    color: var(--ds-a-muted);
}

.ds-advies__foot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.ds-advies__cta {
    width: auto;
}

@media (max-width: 767px) {
    /*
     * Three cards stacked is three screens of scrolling, and the whole point of
     * showing three is holding them against each other. So on a phone they lie
     * side by side and you swipe: one card at a time, snapped, with a sliver of
     * the next one showing and a row of dots underneath saying how many there
     * are.
     *
     * This block sits at the end of the file on purpose. The same rules higher
     * up lost to the plain `display: grid` further down - same specificity,
     * later in the source, and that is the one that wins.
     *
     * The negative margin runs the row to the edges of the screen, past the
     * body's padding, which is what makes that sliver possible.
     */
    .ds-advies__rugs,
    .ds-advies__results {
        display: flex;
        grid-template-columns: none;
        margin: 0 -16px;
        padding: 0 16px 4px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .ds-advies__rugs::-webkit-scrollbar,
    .ds-advies__results::-webkit-scrollbar {
        display: none;
    }

    .ds-advies-rug,
    .ds-advies-result {
        flex: 0 0 86%;
        scroll-snap-align: center;
    }

    .ds-advies__dots {
        display: flex;
    }

    /* One card at a time, so the fields have room to be tapped. */
    .ds-advies-buy__field {
        flex: 1 1 140px;
    }

    .ds-advies__stage-photo {
        max-height: 44vh;
    }
}