/**
 * Add to Cart Widget Styles
 * Optimized for performance with minimal CSS
 *
 * @package Storedash_Checkout
 * @since 2.8.1
 */

/* ============================================
   Add to Cart Wrapper - Match Shortcode
   ============================================ */

.storedash-add-to-cart-wrapper * {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    tap-highlight-color: transparent !important;
}

.storedash-add-to-cart-wrapper {
    display: flex !important;
    gap: 12px; /* Default gap */
    align-items: center !important;
    flex-wrap: wrap;
}

/* ============================================
   Quantity Selector - Match Shortcode Exactly
   ============================================ */

.quantity-input-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 0;
    border: 1px solid #e5e7eb;
    border-radius: 50px; /* Default - controlled by Elementor */
    overflow: hidden;
    background: white;
    /* height controlled by Elementor */
}

.quantity-input-wrapper button {
    width: 40px;
    /* height matches wrapper - controlled by Elementor */
    border: none;
    background: white;
    color: #1f2937;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
    font-weight: 300;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    tap-highlight-color: transparent !important;
}

.quantity-input-wrapper button:hover {
    color: #E65500 !important;
    background: white !important;
}

.quantity-input-wrapper button:focus {
    outline: none !important;
    box-shadow: none !important;
    background: white !important;
}

.quantity-input-wrapper button:active {
    color: #b84300 !important;
    background: white !important;
    outline: none !important;
    box-shadow: none !important;
}

.quantity-input-wrapper button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.quantity-input-wrapper .qty-input {
    width: 60px; /* Default - controlled by Elementor */
    /* height matches wrapper - controlled by Elementor */
    padding: 0;
    border: none; /* No inner borders - clean look */
    text-align: center;
    font-size: 16px;
    font-weight: 500;
    background: white;
}

.quantity-input-wrapper .qty-input[type="number"]::-webkit-outer-spin-button,
.quantity-input-wrapper .qty-input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.quantity-input-wrapper .qty-input:focus {
    outline: none;
}

/* ============================================
   Add to Cart Button - Match Shortcode Exactly
   ============================================ */

.storedash-atc-button {
    background: #E65500;
    color: white;
    border: none;
    padding: 0 24px;
    height: 48px;
    border-radius: 50px; /* Fully rounded to match quantity selector */
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    tap-highlight-color: transparent !important;
    text-decoration: none;
}

.storedash-atc-button:hover,
.storedash-add-to-cart-btn:hover {
    background: #cc4d00;
    transform: translateY(-1px);
    box-shadow: none;
}

.storedash-atc-button:focus {
    outline: none !important;
    box-shadow: none !important;
    background: #E65500 !important;
}

.storedash-atc-button:active {
    background: #b84300 !important;
    transform: translateY(0);
    outline: none !important;
    box-shadow: none !important;
}

.storedash-atc-button.disabled,
.storedash-atc-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: #9ca3af !important;
}

.storedash-atc-button.out-of-stock {
    background: #f3f4f6 !important;
    color: #6b7280 !important;
    border: 1px solid #e5e7eb !important;
    opacity: 1;
}

.storedash-atc-button.out-of-stock img {
    filter: grayscale(1) opacity(0.5);
}

.storedash-atc-button.out-of-stock:hover {
    transform: none;
    box-shadow: none;
}

.storedash-atc-button.disabled:hover,
.storedash-atc-button:disabled:hover {
    transform: none;
    box-shadow: none;
    background: #9ca3af !important;
}

.storedash-atc-button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.storedash-atc-button img {
    filter: brightness(0) invert(1);
    width: 18px;
    height: 18px;
}

.storedash-atc-button.adding {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Success state - controlled via Elementor widget settings */
/* Default fallback if no custom color is set */
.storedash-atc-button.added {
    background: #10b981;
}

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

/* ============================================
   Responsive
   ============================================ */

@media (max-width: 768px) {
    .storedash-cart-form {
        flex-direction: column;
        align-items: stretch;
    }

    .storedash-cart-form .quantity.has-qty-buttons {
        justify-content: center;
    }

    .storedash-add-to-cart-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   Hide WooCommerce Messages
   ============================================ */

/* Hide "View cart" message that appears after adding to cart */
.storedash-add-to-cart-wrapper + .woocommerce-message,
.storedash-add-to-cart-wrapper ~ .woocommerce-message,
.woocommerce-message a.button.wc-forward {
    display: none !important;
}

/* Hide added_to_cart class message */
.added_to_cart.wc-forward {
    display: none !important;
}

/* ============================================
   Editor Preview (Elementor)
   ============================================ */

.elementor-editor-active .storedash-add-to-cart-wrapper {
    pointer-events: none;
}