/**
 * FD Add to Cart — Single Product Page Button Styles (Motta Theme)
 *
 * Replicates the Motta screenshot design:
 *   • "Add to cart" — full-width solid dark-teal pill button with cart icon
 *   • "Buy Now"     — full-width outlined ghost pill button
 *
 * Selectors sourced from Motta theme templates:
 *   - woocommerce/single-product/add-to-cart/simple.php
 *   - woocommerce/single-product/add-to-cart/variation-add-to-cart-button.php
 *   - motta-addons/modules/buy-now/frontend.php
 *
 * @version 1.0.0
 */

/* ============================================================
   SHARED BUTTON WRAPPER — quantity + buttons sit side by side
   ============================================================ */

.single-product .cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

/* Button group: Add to cart + Buy Now fill the available row */
.single-product .cart .single_add_to_cart_button,
.single-product .cart .motta-buy-now-button {
    flex: 1 1 0;
    min-width: 0;
}

/* ============================================================
   QUANTITY INPUT — rounded pill, matches screenshot
   ============================================================ */

.single-product .cart .quantity {
    display: flex;
    align-items: center;
}

.single-product .cart .quantity .qty {
    width: 48px !important;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    border: none;
    background: transparent;
    color: #1a3d35;
    -moz-appearance: textfield;
}

.single-product .cart .quantity .qty::-webkit-outer-spin-button,
.single-product .cart .quantity .qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Quantity wrapper — pill with – / number / + */
.single-product .cart .quantity {
    display: flex !important;
    align-items: center !important;
    border: 1.5px solid #d5dbd9 !important;
    border-radius: 50px;
    overflow: hidden !important;
    height: 52px !important;
    padding: 0 4px !important;
    background: #fff !important;
    gap: 0 !important;
    flex-shrink: 0 !important;
    min-width: 130px !important;
}

.single-product .cart .quantity .minus,
.single-product .cart .quantity .plus {
    width: 38px;
    height: 38px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    color: #1a3d35;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s;
    flex-shrink: 0;
    padding: 0;
}

.single-product .cart .quantity .minus:hover,
.single-product .cart .quantity .plus:hover {
    background: #f0f5f3;
}

/* ============================================================
   ADD TO CART BUTTON — solid dark-teal, cart icon + text
   ============================================================ */

.single-product .cart .single_add_to_cart_button.button,
.single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button.button {
    /* Size & shape */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 32px !important;
    border-radius: 50px !important;

    /* Colours — dark teal matching screenshot */
    background-color: #1a3d35 !important;
    color: #ffffff !important;
    border: 2px solid #1a3d35 !important;

    /* Typography */
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    /* Interaction */
    cursor: pointer !important;
    transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.15s ease !important;

    box-shadow: none !important;
    outline: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Cart icon inside Add to Cart */
.single-product .cart .single_add_to_cart_button .single_add_to_cart_button--icon,
.single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button .single_add_to_cart_button--icon {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    fill: currentColor !important;
    display: inline-block !important;
}

/* Button text span */
.single-product .cart .single_add_to_cart_button .single_add_to_cart_button--text,
.single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button .single_add_to_cart_button--text {
    display: inline !important;
}

/* Hover — slightly lighter teal */
.single-product .cart .single_add_to_cart_button.button:hover,
.single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button.button:hover {
    background-color: #24544a !important;
    border-color: #24544a !important;
    transform: translateY(-1px) !important;
}

/* Active / pressed */
.single-product .cart .single_add_to_cart_button.button:active,
.single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button.button:active {
    background-color: #122b25 !important;
    border-color: #122b25 !important;
    transform: translateY(0) !important;
}

/* ─── Loading state ─────────────────────────────────────────── */
.single-product .cart .single_add_to_cart_button.button.loading,
.single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button.button.loading {
    opacity: 0.75 !important;
    pointer-events: none !important;
    color: transparent !important;
    position: relative !important;
}

.single-product .cart .single_add_to_cart_button.button.loading::before {
    display: none !important;
    content: none !important;
}

@keyframes vivid_single_spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.single-product .cart .single_add_to_cart_button.button.loading::after,
.single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button.button.loading::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 22px !important;
    height: 22px !important;
    margin-left: -11px !important;
    margin-top: -11px !important;
    border: 3px solid rgba(255,255,255,0.4) !important;
    border-top-color: #ffffff !important;
    border-radius: 50% !important;
    animation: vivid_single_spin 0.7s linear infinite !important;
    box-sizing: border-box !important;
}

/* ============================================================
   BUY NOW BUTTON — ghost / outline, matching right button
   ============================================================ */

.single-product .cart .motta-buy-now-button,
.single-product .woocommerce-variation-add-to-cart .motta-buy-now-button {
    /* Size & shape */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 32px !important;
    border-radius: 50px !important;

    /* Ghost style — transparent fill, dark-teal outline */
    background-color: transparent !important;
    color: #1a3d35 !important;
    border: 2px solid #1a3d35 !important;

    /* Typography */
    font-family: inherit !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    /* Interaction */
    cursor: pointer !important;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease !important;

    box-shadow: none !important;
    outline: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Hover — invert to filled */
.single-product .cart .motta-buy-now-button:hover,
.single-product .woocommerce-variation-add-to-cart .motta-buy-now-button:hover {
    background-color: #1a3d35 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
}

/* Active */
.single-product .cart .motta-buy-now-button:active,
.single-product .woocommerce-variation-add-to-cart .motta-buy-now-button:active {
    background-color: #122b25 !important;
    color: #ffffff !important;
    border-color: #122b25 !important;
    transform: translateY(0) !important;
}

/* Disabled — e.g. variable product with no variation selected */
.single-product .cart .motta-buy-now-button.disabled,
.single-product .cart .motta-buy-now-button.wc-variation-selection-needed {
    opacity: 0.45 !important;
    pointer-events: none !important;
}

/* ============================================================
   BUTTON ROW WRAPPER — keep ATC + Buy Now on same row
   ============================================================ */

.single-product .cart {
    flex-wrap: wrap;
    row-gap: 12px;
    column-gap: 12px;
}

/* ============================================================
   MOBILE — stack vertically below 480 px
   ============================================================ */

@media (max-width: 480px) {
    .single-product .cart .single_add_to_cart_button.button,
    .single-product .cart .motta-buy-now-button,
    .single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button.button,
    .single-product .woocommerce-variation-add-to-cart .motta-buy-now-button {
        width: 100% !important;
        flex: 1 1 100% !important;
    }

    .single-product .cart .quantity {
        width: 100%;
        justify-content: center;
    }
}