/* ========================================
   BUTTONS - Elessi Theme
   All button styles
======================================== */

/* Primary Button (Add to Cart) */
.btn-primary,
.button--add-to-cart,
.btn-add-to-cart,
.form-submit[value*="Add to cart"],
.form-submit[value*="ADD TO CART"],
input[type="submit"].commerce-add-to-cart,
.commerce-add-to-cart-button,
.node--type-product input[type="submit"],
.node--type-product button[type="submit"],
.commerce-order-item-add-to-cart-form input[type="submit"] {
    width: 100%;
    padding: var(--button-padding) !important;
    background: var(--color-primary) !important;
    color: var(--color-white) !important;
    border: none !important;
    border-radius: var(--button-border-radius) !important;
    font-size: var(--button-font-size) !important;
    font-weight: var(--button-font-weight) !important;
    text-transform: uppercase !important;
    letter-spacing: var(--button-letter-spacing) !important;
    cursor: pointer !important;
    transition: all var(--transition-base) !important;
    display: block !important;
    text-align: center !important;
    margin: var(--spacing-md) auto var(--spacing-sm) auto !important;
}

.btn-primary:hover,
.button--add-to-cart:hover,
input[value*="Add to cart"]:hover,
.commerce-order-item-add-to-cart-form input[type="submit"]:hover {
    background: var(--color-primary-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(78, 205, 196, 0.3) !important;
}

/* Secondary Button (Buy It Now) */
.btn-secondary,
.btn-buy-now {
    width: 100% !important;
    padding: var(--button-padding) !important;
    background: var(--color-secondary) !important;
    color: var(--color-white) !important;
    border: none !important;
    border-radius: var(--button-border-radius) !important;
    font-size: var(--button-font-size) !important;
    font-weight: var(--button-font-weight) !important;
    text-transform: uppercase !important;
    letter-spacing: var(--button-letter-spacing) !important;
    cursor: pointer !important;
    transition: all var(--transition-base) !important;
    display: block !important;
    text-align: center !important;
    margin: var(--spacing-sm) auto 0 auto !important;
}

.btn-secondary:hover,
.btn-buy-now:hover {
    background: #7CB342 !important;
    transform: translateY(-2px) !important;
}

/* Size Selector Buttons */
.size-btn,
.field--name-attribute-size .form-type-radio label,
input[name*="size"][type="radio"]+label {
    min-width: 50px !important;
    height: 40px !important;
    padding: 0 15px !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--button-border-radius) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: var(--font-size-base) !important;
    font-weight: var(--font-weight-semibold) !important;
    cursor: pointer !important;
    transition: all var(--transition-base) !important;
    background: var(--color-white) !important;
    color: var(--color-text) !important;
    margin: 0 !important;
}

.size-btn:hover,
.field--name-attribute-size .form-type-radio label:hover {
    transform: scale(1.05) !important;
}

.size-btn.active,
.field--name-attribute-size input[type="radio"]:checked+label {
    background: var(--color-black) !important;
    color: var(--color-white) !important;
    border-color: var(--color-black) !important;
}

/* Quantity Buttons */
.qty-btn {
    width: 35px !important;
    height: 38px !important;
    background: var(--color-white) !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 18px !important;
    font-weight: var(--font-weight-normal) !important;
    color: var(--color-text) !important;
    transition: background var(--transition-base) !important;
    padding: 0 !important;
    margin: 0 !important;
}

.qty-btn:hover {
    background: var(--color-background-light) !important;
}