/*
 * Plain CSS on purpose: the theme's Tailwind v4 content globs do not scan module
 * templates, so utility classes used only here would be purged from styles.css.
 * Same approach as Dplies_DeliveryTime::css/availability.css.
 *
 * Visual language follows the PDP buy column, which is flat rows separated by
 * hairlines with exactly one boxed element (the gold set-builder upsell). So this
 * is a hairline-separated row, not a second card, and its CTA is charcoal so gold
 * stays the single action colour for "In winkelwagen". Pill controls and tokens
 * come from dplies.css :root, with hex fallbacks so the file stands on its own.
 */
.dplies-stock-alert {
    /* Own full-width panel above the add-to-cart row. It used to be a child of
       product.info.addtocart, which squeezed it to the button's column width. */
    display: block;
    width: 100%;
    /* NOT a card. The buy column is flat rows separated by hairlines, and the only
       boxed element in it is the gold set-builder upsell. A second bordered box here
       read as a foreign module bolted onto the page, and it out-weighted the
       add-to-cart directly below it. This is a row in that rhythm instead. */
    margin: 0 0 1rem;
    padding: 1rem 0 0;
    border-top: 1px solid var(--dplies-gray-200, #e5e7eb);
}

.dplies-stock-alert__title {
    /* Sentence case: uppercase made this read as a section header equal to "MAAK JE
       SET COMPLEET" rather than a helper attached to the availability line. */
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--dplies-fg, #1a1a1a);
    margin: 0 0 0.5rem;
}

/* One quiet reassurance line under the row, answering the only real objection
   (paying now for later). Replaces a heading + intro + pre-order paragraph that
   between them made this block taller than the add-to-cart it sits above. */
.dplies-stock-alert__note {
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--dplies-gray-400, #9ca3af);
    margin: 0.5rem 0 0;
}

.dplies-stock-alert__row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Copied from the site's signature light input, the always-visible search bar
   (components/algolia-autocomplete.css .aa-Form/.aa-Input): grey fill, no visible
   border, pill, and it inverts to white with a hairline border on focus with no
   glow. The previous white-fill + grey-border + gold-glow was the opposite of the
   field customers see on every page, which is what made this read as foreign. */
.dplies-stock-alert__input {
    flex: 1 1 12rem;
    min-width: 0;
    padding: 0.625rem 1rem;
    border: 1px solid transparent;
    border-radius: 9999px;
    background-color: #f5f5f5;
    color: var(--dplies-fg, #1a1a1a);
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color 0.2s, background-color 0.2s;
}

.dplies-stock-alert__input::placeholder {
    color: var(--dplies-gray-400, #9ca3af);
}

.dplies-stock-alert__input:focus {
    outline: none;
    border-color: var(--dplies-gray-300, #d1d5db);
    background-color: #fff;
    box-shadow: none;
}

/* Pill like .dplies-btn-secondary, in charcoal. Gold is the column's single action
   colour and belongs to "In winkelwagen"; a second gold pill directly above it made
   the two compete and inverted the hierarchy. */
.dplies-stock-alert__submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 9999px;
    background-color: var(--dplies-dark, #1a1a1a);
    color: var(--dplies-on-dark, #fafaf8);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dplies-stock-alert__submit:hover:not([disabled]) {
    background-color: #333;
}

.dplies-stock-alert__submit[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

.dplies-stock-alert__usecase {
    border: 0;
    margin: 0.875rem 0 0;
    padding: 0;
}

.dplies-stock-alert__usecase-legend {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dplies-gray-400, #9ca3af);
    padding: 0;
    margin-bottom: 0.5rem;
}

.dplies-stock-alert__checks {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Pressable pill, shaped like .dplies-sb-badge. Previously a <label> wrapping a
   native checkbox, which put a browser tickbox inside a chip and read as a form
   control bolted on rather than a chip you can press. */
.dplies-stock-alert__check {
    display: inline-flex;
    align-items: center;
    padding: 0.4375rem 0.9375rem;
    border: 1px solid transparent;
    border-radius: 9999px;
    background-color: #f5f5f5;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--dplies-fg-secondary, #4a4a4a);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
    -webkit-appearance: none;
    appearance: none;
}

.dplies-stock-alert__check:hover {
    border-color: var(--dplies-gold, #c9a227);
    color: var(--dplies-fg, #1a1a1a);
}

.dplies-stock-alert__check:focus-visible {
    outline: none;
    border-color: var(--dplies-gray-300, #d1d5db);
    background-color: #fff;
}

.dplies-stock-alert__check.is-on {
    border-color: var(--dplies-gold, #c9a227);
    background: var(--dplies-gold-10, rgba(201, 162, 39, 0.1));
    color: var(--dplies-fg, #1a1a1a);
    font-weight: 600;
}

.dplies-stock-alert__car {
    margin-top: 0.5rem;
}

.dplies-stock-alert__error {
    font-size: 0.8125rem;
    color: #b91c1c;
    margin: 0.625rem 0 0;
}

/* Confirmation in brand charcoal with a gold tick, not a generic success green. */
.dplies-stock-alert__done {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--dplies-fg, #1a1a1a);
    margin: 0;
}

/* Height matches the first line's line box (1.4em) and the SVG's default
   xMidYMid centres the tick inside it, so it optically aligns with the text on
   one line and on two. Replaces a 1.25rem box nudged down by a magic margin. */
.dplies-stock-alert__done-icon {
    width: 1rem;
    height: 1.4em;
    flex: 0 0 auto;
    color: var(--dplies-gold, #c9a227);
}

/* Honeypot: kept in the layout tree (bots read the DOM) but out of sight and
   out of the tab order for people. display:none is skipped by many bots. */
.dplies-stock-alert__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Phone: the input + button row cannot fit side by side in the buy column, so stop
   it wrapping into a full-width field with an orphaned half-width button. */
@media (max-width: 767px) {
    .dplies-stock-alert {
        padding: 0.875rem 0 0;
    }

    .dplies-stock-alert__row {
        flex-direction: column;
        align-items: stretch;
    }

    .dplies-stock-alert__input,
    .dplies-stock-alert__submit {
        flex: 1 1 auto;
        width: 100%;
    }
}

/* Inside the mobile buy sheet the panel already sits on a card and vertical space
   is scarce, so drop the frame and tighten it up. */
#dplies-buysheet .dplies-stock-alert {
    margin: 0 0 0.75rem;
    padding: 0.75rem 0 0;
}

#dplies-buysheet .dplies-stock-alert__title {
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

/* The segmentation question now lives in the post-submit state, so nothing extra
   needs hiding inside the sheet. */
#dplies-buysheet .dplies-stock-alert__usecase {
    margin-top: 0.625rem;
}

#dplies-buysheet .dplies-stock-alert__checks {
    flex-direction: row;
}

/* NO prefers-color-scheme block here on purpose. The storefront has no dark mode:
   there is not a single prefers-color-scheme rule in the theme or any other Dplies
   module, so the page stays white on a device set to dark. An earlier dark block
   here flipped this panel's text and fills to near-white on that white page and
   made the whole thing unreadable on any phone in dark mode. */