/**
 * AlterStopSmoke subscription block — product page styles.
 *
 * Strict Figma compliance — file "AlterSmoke" node 23:1015 ("Add to Cart Component").
 * Variables (Brockmann font, design tokens):
 *   --colors/grey-900   #0f0f0f   text primary
 *   --colors/grey-700   #202020   subtitle text
 *   --colors/grey-300   #777777   field title (label uppercase muted)
 *   --colors/grey-100   #ededf3   input bg, section borders
 *   --colors/papaya     #ffefd0   bonus pill bg
 *   --colors/amaranth   #e62249   accent (CTA, focus only — radios stay neutral)
 *   --radius/main       8px       card
 *   --radius/small      3px       inputs, pills
 *   --spacing/1rem      16px
 *   --spacing/0,5rem    8px
 *
 * The radios are NEUTRAL (no rose-pink container, no red border). The selected
 * state is shown by the radio dot only. The frequency input matches the theme's
 * dosage/qty inputs (grey-100 bg, 3px radius, 36px height) so it reads as part
 * of the same visual family.
 */

.alterstopsmoke-subscription-block {
    display: flex;
    flex-direction: column;
    font-family: 'Brockmann', sans-serif;
    color: #0f0f0f;
    margin: 0;
    padding: 0;
}

/* ── Option blocks (sections separated by 1px borders, Figma px-20 py-12) ── */

.alterstopsmoke-subscription-block__option {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px;
    border-top: 1px solid #ededf3;
    margin: 0;
}

/* When subscription is selected, sub-elements need more breathing room
   between the bonus pill, the frequency field and the price (Figma
   uses py-12 separators inside the fields container, ~16px gap). */
.alterstopsmoke-subscription-block__option--subscription:has(input[value="subscription"]:checked) {
    gap: 16px;
}

.alterstopsmoke-subscription-block__option:last-of-type {
    border-bottom: 1px solid #ededf3;
}

/* One-time price visibility — visible only when one-time radio is checked */
.alterstopsmoke-subscription-block__price--one-time {
    display: none;
}

.alterstopsmoke-subscription-block__option:has(input[value="one-time"]:checked)
.alterstopsmoke-subscription-block__price--one-time {
    display: flex;
}

/* Subscription option: hide bonus pill, frequency field and subscription price
 * unless the subscription radio is checked (CSS :has — pure CSS swap). */
.alterstopsmoke-subscription-block__option--subscription
.alterstopsmoke-subscription-block__bonus-pill,
.alterstopsmoke-subscription-block__option--subscription
.alterstopsmoke-subscription-block__field,
.alterstopsmoke-subscription-block__option--subscription
.alterstopsmoke-subscription-block__price:not(.alterstopsmoke-subscription-block__price--one-time) {
    display: none;
}

.alterstopsmoke-subscription-block__option--subscription:has(input[value="subscription"]:checked)
.alterstopsmoke-subscription-block__bonus-pill,
.alterstopsmoke-subscription-block__option--subscription:has(input[value="subscription"]:checked)
.alterstopsmoke-subscription-block__field,
.alterstopsmoke-subscription-block__option--subscription:has(input[value="subscription"]:checked)
.alterstopsmoke-subscription-block__price {
    display: flex;
}

/* ── Radio label — neutral 16px Brockmann Medium grey-900 ────────────────── */

.alterstopsmoke-subscription-block__radio-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.16px;
    color: #0f0f0f;
}

.alterstopsmoke-subscription-block__radio {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border: 1.5px solid #c9c9d1;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
    margin: 0;
    flex: 0 0 auto;
    position: relative;
    transition: border-color 0.15s ease;
}

.alterstopsmoke-subscription-block__radio:checked {
    border-color: #e62249;
}

.alterstopsmoke-subscription-block__radio:checked::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e62249;
}

.alterstopsmoke-subscription-block__radio:focus-visible {
    outline: 2px solid #e62249;
    outline-offset: 2px;
}

/* ── Bonus pill — papaya yellow, SemiBold 13 grey-700 uppercase ───────────
 * Match Figma node 282_10844 : `bg-papaya px-[10px] py-[6px] rounded-small`
 * with text `13px SemiBold grey-700 uppercase tracking-[-0.13px]`.
 * Full width inside the option block. */

.alterstopsmoke-subscription-block__bonus-pill {
    display: block;
    width: 100%;
    background: #ffefd0;
    color: #202020;
    border-radius: 3px;
    padding: 8px 12px;
    font-family: 'Brockmann', sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.13px;
    text-transform: uppercase;
    margin: 0;
    box-sizing: border-box;
}

/* ── Field — frequency selector matching theme dosage/qty visual language ─ */

.alterstopsmoke-subscription-block__field {
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

.alterstopsmoke-subscription-block__field-title {
    display: block;
    width: 100%;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.14px;
    color: #777777;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
}

.alterstopsmoke-subscription-block__field-input {
    position: relative;
    display: block;
    background: #ededf3;
    border-radius: 3px;
    height: 36px;
}

.alterstopsmoke-subscription-block__field-input select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    padding: 6px 36px 6px 14px;
    font-family: 'Brockmann', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.16px;
    color: #0f0f0f;
    cursor: pointer;
    outline: none;
}

.alterstopsmoke-subscription-block__field-input::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    width: 12px;
    height: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230f0f0f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
}

.alterstopsmoke-subscription-block__field-input:focus-within {
    box-shadow: 0 0 0 2px rgba(230, 34, 73, 0.2);
}

/* ── First-delivery field — readonly date display (Figma 23:1015 sub variant)
 * Same grey-100 input shell as the frequency select, but renders a static
 * text (computed PHP-side) plus a right-aligned calendar icon (no select
 * chevron). Read-only V1 — no date picker. */

.alterstopsmoke-subscription-block__field-input--readonly {
    display: flex;
    align-items: center;
    padding: 6px 14px;
    cursor: default;
}

.alterstopsmoke-subscription-block__field-input--readonly::after {
    content: none;
}

.alterstopsmoke-subscription-block__first-delivery-text {
    flex: 1 1 auto;
    min-width: 0;
    font-family: 'Brockmann', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.16px;
    color: #0f0f0f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.alterstopsmoke-subscription-block__field-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 20px;
    margin-left: 8px;
    object-fit: contain;
    pointer-events: none;
}

/* ── Subscription price — big label + per-cycle suffix ──────────────────── */

.alterstopsmoke-subscription-block__price {
    align-items: baseline;
    gap: 8px;
    margin: 0;
    padding: 4px 0 0;
}

.alterstopsmoke-subscription-block__price-amount {
    font-size: 26px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.78px;
    color: #0f0f0f;
}

.alterstopsmoke-subscription-block__price-frequency {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.16px;
    color: #0f0f0f;
}

/* ── Feedback area (errors / success) ──────────────────────────────────── */

.alterstopsmoke-subscription-block__feedback {
    font-size: 14px;
    padding: 12px 16px;
    border-radius: 3px;
    border: none;
    margin: 12px 0 0;
}

.alterstopsmoke-subscription-block__feedback--success {
    background-color: #d0ffd9;
    color: #0f0f0f;
}

.alterstopsmoke-subscription-block__feedback--error {
    background-color: #fdf0f0;
    color: #0f0f0f;
}

/* ── Le Club earn-badge visuals are owned by `alterloyalty` natively
 * (alterloyalty_fo.css §al-earn-badge) — they match Figma node 23:1015
 * (gradient bg + WHITE crown 31×24 + papaya pill +X POINTS + WHITE info
 * icon 22×22). Form layout glue (additional-info margins, add-to-cart
 * spacing, empty slot hides) is owned by classic-child theme. */

/* ── Hide theme price always on subscription products ───────────────────────
 * Both prices (one-time + subscription) are now rendered by my block,
 * dynamic with quantity. Theme `.product-prices` and the hidden helper
 * `.stb-classic-price` (PS combination refresh stub) are owned by us. */

.js-product-actions:has(#alterstopsmoke-subscription-block) .product-prices,
.js-product-actions:has(#alterstopsmoke-subscription-block) .stb-classic-price,
.js-product-actions:has(#alterstopsmoke-subscription-block) .product-price {
    display: none !important;
}

/* ── DOSAGE/COULEUR + QUANTITÉ side-by-side (Figma flex row gap 16) ────────
 * Applied universally on all product pages (subscription_block.css is loaded
 * everywhere). Same card layout for sub and non-sub products.
 * Order children:
 *   1 = variants (DOSAGE / COULEUR)
 *   2 = quantity
 *   3 = discounts (empty → hidden)
 *   5 = stb-classic-price (visible price for non-sub products — theme
 *       overrides its native .d-none)
 *  10 = additional-info (subscription_block + al-earn-badge loyalty)
 * 100 = add-to-cart button
 * 200 = availability + minimal-quantity (hidden if empty)
 */

.js-product-actions .product-add-to-cart {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0 16px;
}

/* DOSAGE + QUANTITÉ row — vertical 18px breathing room at top of card,
   horizontal 20px outer padding to match Figma `px-[20px]` per side. */
.js-product-actions .product-add-to-cart > .product-variants {
    padding: 18px 0 18px 20px;
}

.js-product-actions .product-add-to-cart > .product-quantity {
    padding: 18px 20px 18px 0;
}

.js-product-actions .product-add-to-cart > * {
    flex: 1 1 100%;
    margin: 0;
    min-width: 0;
}

.js-product-actions .product-add-to-cart > .product-variants {
    flex: 1 1 100%;
    order: 1;
}

.js-product-actions .product-add-to-cart > .product-quantity {
    flex: 1 1 100%;
    order: 2;
}

/* Variants + quantity stack full-width on the 250px sidebar for all PDP
 * variants (subscription or one-time). The Figma 23:1015 side-by-side layout
 * assumes a wider sidebar; at 250px the labels wrap and the dosage select
 * truncates (QUANTITÉ → "QUANTIT É", "6mg (sans nicotine)" → "6n"). Drop
 * the side-by-side override; the inherited .product-add-to-cart flex
 * children rule keeps both at flex: 1 1 100% (vertical stack). */

.js-product-actions .product-add-to-cart > .product-discounts {
    order: 3;
}

.js-product-actions .product-add-to-cart > .product-discounts:empty {
    display: none;
}

.js-product-actions .product-add-to-cart > .product-additional-info {
    order: 10;
}

.js-product-actions .product-add-to-cart > .add-to-cart {
    order: 100;
}

.js-product-actions .product-add-to-cart > .js-product-availability,
.js-product-actions .product-add-to-cart > .product-minimal-quantity {
    order: 200;
}

/* Visible price (theme overrides its native .d-none on non-sub products) —
 * place it just before the loyalty bloc so user reads price → loyalty → CTA.
 * On subscription products, the price is hidden anyway via the existing rule. */
.js-product-actions .product-add-to-cart > .stb-classic-price {
    order: 5;
    flex: 1 1 100%;
    margin: 0;
    padding: 18px 20px 0;
}

.js-product-actions .product-add-to-cart > .stb-classic-price .product-prices {
    margin: 0;
    padding: 0;
}

.js-product-actions .product-add-to-cart > .stb-classic-price .current-price-value {
    font-family: 'Brockmann', sans-serif;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.78px;
    color: #0f0f0f;
}

/* ── DOSAGE + QUANTITÉ — normalize labels & inputs to Figma field pattern ─ */

/* Reset internal margins so columns align */
.js-product-actions .product-variants > .product-variants-item,
.js-product-actions .product-variants > .product-variants-item > * {
    margin: 0;
}

/* Both labels (Dosage span.control-label, Quantité label.form-label) */
.js-product-actions .product-variants .control-label,
.js-product-actions .product-quantity .form-label {
    display: block;
    width: 100%;
    text-align: left;
    font-family: 'Brockmann', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.14px;
    color: #777777;
    text-transform: uppercase;
    margin: 0 0 8px 0;
    padding: 0;
    text-decoration: none;
    /* Match height to align with the input row */
    min-height: 21px;
}

/* Hide the value duplicated inside the dosage label (PS appends the selected
   attribute value as a text node after the label name). The JS in
   subscription_block.js already trims it on init, but as a defensive guard:
   ensure the label collapses to just its first text child. */

/* DOSAGE select wrapper grey-100 input style
   Lot G PDP polish round 8 — drop figé height:36px (was clipping the inner
   select rendered at 48px by theme alter-product.v2.css l.287), switch to
   flex+align-items:center with min-height aligned on theme input token
   (--as-input-height-md = 44px) so wrapper sits on the same baseline as
   QUANTITY input and the chevron is vertically centered. */
.js-product-actions .product-variants .select-wrapper {
    position: relative;
    background: #ededf3;
    border-radius: 3px;
    min-height: var(--as-input-height-md, 44px);
    display: flex;
    align-items: center;
}

.js-product-actions .product-variants .form-control-select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    padding: 6px 36px 6px 14px;
    font-family: 'Brockmann', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.16px;
    color: #0f0f0f;
    cursor: pointer;
    outline: none;
    box-shadow: none;
}

.js-product-actions .product-variants .select-chevron {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    width: 12px;
    height: 8px;
    pointer-events: none;
}

/* QUANTITÉ touchspin — match grey-100 input pattern */
.js-product-actions .product-quantity .quantity-field {
    display: flex;
    align-items: center;
    background: #ededf3;
    border-radius: 3px;
    height: 36px;
    padding: 0 6px;
    border: none;
    overflow: hidden;
}

.js-product-actions .product-quantity .quantity-field input[type="number"] {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    border: none;
    background: transparent;
    text-align: left;
    padding: 0 8px;
    font-family: 'Brockmann', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    color: #0f0f0f;
    box-shadow: none;
    -moz-appearance: textfield;
}

.js-product-actions .product-quantity .quantity-field input::-webkit-outer-spin-button,
.js-product-actions .product-quantity .quantity-field input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Hide the bootstrap-touchspin native +/- (theme renders custom +/- in
   .input-group-append). Keep input + custom buttons. */
.js-product-actions .product-quantity .input-group-btn,
.js-product-actions .product-quantity .input-group-addon {
    display: none;
}

.js-product-actions .product-quantity .input-group-append {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    padding: 0 4px;
}

.js-product-actions .product-quantity .input-group-append .btn-touchspin {
    background: transparent;
    border: none;
    padding: 0;
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none;
}

.js-product-actions .product-quantity .input-group-append .btn-touchspin img {
    max-width: 14px;
    max-height: 14px;
}

/* ============================================================================
 * .asm-sub-pill — modal + cart line subscription pill (Lot B + C, kept).
 * Lot H V1 Round 1 — token alignment (Lot B design system) with hex fallbacks
 * preserved so the visual stays identical when tokens are absent.
 * ============================================================================ */

.asm-sub-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--as-grey-900, #1a1a1a);
    color: var(--as-white, #ffffff);
    border-radius: 999px;
    font-family: var(--as-font-family, 'Brockmann', sans-serif);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-transform: none;
    width: fit-content;
    max-width: 100%;
    margin: 0;
}

.asm-sub-pill__icon {
    font-size: 14px !important;
    line-height: 1 !important;
    color: var(--as-amaranth, #e62249);
    vertical-align: middle;
    flex: 0 0 auto;
}

.asm-sub-pill__label {
    font-weight: 700;
    color: var(--as-white, #ffffff);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 11px;
}

.asm-sub-pill__freq {
    color: var(--as-white, #ffffff);
    opacity: 0.85;
    font-weight: 400;
    font-size: 12px;
    white-space: nowrap;
}

.asm-sub-pill__freq::before {
    content: '· ';
    margin-right: 2px;
    opacity: 0.6;
}

.asm-sub-pill--modal {
    margin-top: 4px;
}

.asm-sub-pill--cart {
    display: inline-flex;
    margin: 4px 0 0;
}

@media (max-width: 576px) {
    .alterstopsmoke-subscription-block__price-amount {
        font-size: 22px;
    }
    .asm-sub-pill {
        font-size: 11px;
        padding: 3px 8px;
    }
    .asm-sub-pill__label {
        font-size: 10px;
    }
}