/**
 * Single-product purchase area: option cards + Add to cart.
 *
 * Applies to every product page, independently of any category-specific
 * content. Loaded by inc/woo/WooPurchaseOptions.php after peaks-styles.
 *
 * Two inherited rules are corrected here rather than in their own files:
 *
 * 1. .theme-single-product .price (main.css) styles the LARGE product price in
 *    the summary column - 38px, display:flex, margin-bottom:32px. The purchase
 *    option markup reuses the generic `price` class
 *    (<span class="price subscription-price">), so the option cards inherited
 *    that treatment: a 32px gap under the price and a 45.6px line box.
 *
 * 2. .wcsatt-options-prompt-label .price { margin-left: .15em } ships with All
 *    Products for Subscriptions. Against the inherited 38px font size that
 *    resolved to 5.7px, which is the left offset the price line showed
 *    relative to the title and the supporting text. Overridden here with
 *    .theme-single-product scoping so it wins on specificity rather than on
 *    stylesheet order. The plugin file itself is untouched.
 */

/* ---------------------------------------------------------------- cards --- */

/*
 * form.cart is a wrapping flex container, and the options wrapper is one of
 * its items with the default flex: 0 1 auto - so its width tracked its own
 * content and the cards stopped short of the column edge (and stopped short by
 * a different amount per product). Claiming the full row makes both cards the
 * same width as each other and as the button below them.
 */
.theme-form-cart .wcsatt-options-wrapper,
.theme-form-cart .wcsatt-options-prompt-fieldset {
    flex: 1 1 100%;
    width: 100%;
}

.product-purchase-options {
    width: 100%;
    margin: 14px 0 20px;
    gap: 10px;
}

/* Both cards fill the row, so their internal alignment matches. */
.product-purchase-option__label {
    width: 100%;
}

/*
 * Let the content column shrink inside the label's flex row so long lines
 * wrap instead of widening the card.
 */
.product-purchase-option__label .product-purchase-option__content {
    min-width: 0;
    gap: 2px;
}

/* Price line, both cards: normalised off the main-price treatment. */
.theme-single-product .product-purchase-option .price,
.theme-single-product .product-purchase-option .subscription-price {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    font-size: 20px;
    line-height: 1.25;
    gap: 6px;
}

.theme-single-product .product-purchase-option .subscription-price {
    display: block;
    margin-top: 4px;
}

.theme-single-product .product-purchase-option__price {
    margin-top: 4px;
    line-height: 1.2;
}

/* The recurring interval reads as supporting text next to the amount. */
.theme-single-product .product-purchase-option .subscription-details {
    font-size: 15px;
    font-weight: 400;
    color: #777;
}

/* ------------------------------------------------------- add to cart ------ */

/*
 * Replaces width: calc(100% - 177px). The reserved strip exists for
 * .theme-quantity, which is display:none on products that do not offer a
 * quantity control - leaving dead space beside the button. Flexing instead of
 * subtracting a magic number fills the row in both cases.
 */
.theme-form-cart .cart .single_add_to_cart_button,
.theme-form-cart .woocommerce-variation-add-to-cart .single_add_to_cart_button {
    width: auto;
    flex: 1 1 auto;
    min-height: 56px;
}

/* --------------------------------------------------------- <= 767px ------- */

@media (max-width: 767px) {
    .product-purchase-options {
        margin: 12px 0 16px;
        gap: 8px;
    }

    .product-purchase-option__label {
        padding: 14px;
        gap: 12px;
    }

    .theme-single-product .product-purchase-option .price,
    .theme-single-product .product-purchase-option .subscription-price {
        font-size: 18px;
        line-height: 1.2;
    }

    .theme-single-product .product-purchase-option .subscription-details {
        font-size: 14px;
    }

    /*
     * The button gets its own full-width row: a 100% flex-basis forces the
     * wrap, so it no longer shares a line with the quantity control and no
     * longer squeezes its label onto two lines.
     */
    .theme-form-cart .cart .single_add_to_cart_button,
    .theme-form-cart .woocommerce-variation-add-to-cart .single_add_to_cart_button {
        flex: 1 0 100%;
        width: 100%;
        min-height: 58px;
        margin-top: 4px;
        padding: 16px 24px;
        font-size: 17px;
        line-height: 1.2;
    }

    .theme-form-cart .theme-quantity {
        flex: 0 0 auto;
    }
}

/* --------------------------------------------------------- radio state ---- */

/*
 * The visible control is built from the input's ::before / ::after pseudo
 * elements (a purple ring with a white dot) and those are already circular.
 * The input BOX behind them is not: the theme's generic control rule sets
 * border-radius: 2px, and two square treatments land on that box -
 *
 *   main.css      [type=radio]:focus { box-shadow: #fff 0 0 0 2px,
 *                                                  #6a6aef 0 0 0 4px }
 *   tailwind.css  [type=radio]:checked:hover,
 *                 [type=radio]:checked:focus { background-color: currentcolor }
 *
 * - and [type=radio] sets color: #6a6aef, so currentcolor resolves to the same
 * blue-violet. Hovering or focusing a selected option therefore painted a
 * bright blue SQUARE around and behind the circle. main.css does reset both on
 * :checked and :focus, but tailwind's :checked:hover / :checked:focus variants
 * carry higher specificity and win.
 *
 * Scoped to the purchase options so radios elsewhere on the site (filters,
 * review sort, shipping methods, checkout) keep their own styling.
 */

.product-purchase-option input[type="radio"].wcsatt-options-prompt-action-input {
    /* Any ring that does paint now follows the circle. */
    border-radius: 50%;
}

.product-purchase-option input[type="radio"].wcsatt-options-prompt-action-input,
.product-purchase-option input[type="radio"].wcsatt-options-prompt-action-input:hover,
.product-purchase-option input[type="radio"].wcsatt-options-prompt-action-input:active,
.product-purchase-option input[type="radio"].wcsatt-options-prompt-action-input:focus,
.product-purchase-option input[type="radio"].wcsatt-options-prompt-action-input:checked,
.product-purchase-option input[type="radio"].wcsatt-options-prompt-action-input:checked:hover,
.product-purchase-option input[type="radio"].wcsatt-options-prompt-action-input:checked:active,
.product-purchase-option input[type="radio"].wcsatt-options-prompt-action-input:checked:focus {
    background-color: transparent;
    background-image: none;
    box-shadow: none;
    /* Replaced by the :focus-visible ring below - not removed outright. */
    outline: none;
}

/*
 * Keyboard focus keeps an intentional indicator, in the PeakNow purple and
 * circular. :focus-visible means pointer users no longer see a ring, while
 * keyboard and assistive-tech users still do.
 */
.product-purchase-option input[type="radio"].wcsatt-options-prompt-action-input:focus-visible {
    outline: 2px solid #6057A6;
    outline-offset: 3px;
    box-shadow: none;
}