/*
|-------------------------------------------------------------
| THEME CUSTOMIZATION OVERRIDES - GENERAL BUTTON
| Purpose: Theme-specific customizations for shop/default theme
| Status: ACTIVE - Loaded after app.css, overrides with !important
| 
| This file customizes the main app.css button styles for this specific
| theme. It should NOT redefine base .general-button - only override
| specific variants and properties that need theme customization.
| 
| Load order: colors.css → app.css → custom.css (this file)
|-------------------------------------------------------------
*/

/* 
 * PRIMARY VARIANT OVERRIDE
 * This overrides the .general-button--primary definition from app.css
 * Uses theme colors from colors.css instead of hardcoded values
 */

.general-button--primary:hover:not(.general-button--disabled) {
    background-color: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
    border: 1px solid var(--color-primary-hover) !important;
}

.general-button--primary:focus:not(.general-button--disabled),
.general-button--primary:focus-visible:not(.general-button--disabled) {
    background-color: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
    border: 1px solid var(--color-primary-hover) !important;
    outline: none !important;
    box-shadow: var(--shadow-focus) var(--color-primary-focus) !important;
}

/* 
 * SECONDARY VARIANT OVERRIDE
 * This overrides the .general-button--secondary definition from app.css
 * Filled button with secondary color background and white text
 */

.general-button--secondary {
    background-color: var(--color-secondary) !important;
    color: #ffffff !important;
    border-color: var(--color-secondary) !important;
    border: 1px solid var(--color-secondary) !important;
}

.general-button--secondary:hover:not(.general-button--disabled) {
    background-color: var(--color-secondary-hover-solid) !important;
    border-color: var(--color-secondary-hover-solid) !important;
    border: 1px solid var(--color-secondary-hover-solid) !important;
    color: #ffffff !important;
}

.general-button--secondary:active:not(.general-button--disabled) {
    background-color: var(--color-secondary-active-solid) !important;
    border-color: var(--color-secondary-active-solid) !important;
    border: 1px solid var(--color-secondary-active-solid) !important;
    color: #ffffff !important;
}

.general-button--secondary:focus:not(.general-button--disabled),
.general-button--secondary:focus-visible:not(.general-button--disabled) {
    background-color: var(--color-secondary-hover-solid) !important;
    border-color: var(--color-secondary-hover-solid) !important;
    border: 1px solid var(--color-secondary-hover-solid) !important;
    color: #ffffff !important;
    outline: none !important;
    box-shadow: var(--shadow-focus) var(--color-secondary-focus) !important;
}

/* Secondary (border) variant */
.general-button--secondary-border {
    background-color: transparent !important;
    color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
    border: 1px solid var(--color-secondary) !important;
}

.general-button--secondary-border:hover:not(.general-button--disabled) {
    background-color: var(--color-secondary-hover) !important;
    border-color: var(--color-secondary) !important;
    border: 1px solid var(--color-secondary) !important;
}

.general-button--secondary-border:focus:not(.general-button--disabled),
.general-button--secondary-border:focus-visible:not(.general-button--disabled) {
    background-color: var(--color-secondary-hover) !important;
    outline: none !important;
    box-shadow: var(--shadow-focus) var(--color-secondary-focus) !important;
}

/* Sizes */
.general-button--m {
    padding: var(--spacing-lg) var(--spacing-xl) !important;
    font-size: 14px !important;
    line-height: 20px !important;
    min-height: 40px !important;
}

/* Disabled state */
.general-button--disabled,
button.general-button:disabled,
a.general-button[aria-disabled="true"] {
    opacity: var(--color-disabled-opacity) !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* Flex support for equal width buttons */
.general-button.flex-1 {
    display: flex !important;
    flex: 1 1 0% !important;
    width: auto !important;
}