/* ==========================================================================
   buttons.css - Casanova Group Universal Button Component
   Standardized Neubrutalist-Refined Button Design System
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--btn-height, 46px);
    padding: var(--btn-padding-y, 16px) var(--btn-padding-x, 32px);
    box-sizing: border-box;
    background-color: var(--btn-bg, var(--color-neutral-200, #F6F1E8));
    border: var(--btn-border-width, 2px) solid var(--btn-border-color, var(--casa-acento-600));
    box-shadow: var(--btn-shadow-normal, 2px 2px 0px 0px var(--casaacento600));
    border-radius: var(--btn-radius, 999px);
    transform: translate(0, 0);

    font-family: var(--btn-font-family, var(--font-archivo, 'Archivo', sans-serif));
    font-weight: 500;
    font-size: var(--btn-font-size, 14px);
    line-height: 1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    text-align: center;
    color: var(--btn-color, var(--casa-acento-600));
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    outline: none;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.2s ease,
                background-color 0.2s ease,
                border-color 0.2s ease,
                color 0.2s ease;
}

/* Hover State */
.btn:hover:not(:disabled):not(.is-disabled) {
    background-color: var(--btn-bg, var(--color-neutral-200, #F6F1E8));
    border-color: var(--btn-border-color, var(--casa-acento-600));
    color: var(--btn-color, var(--casa-acento-600));
    box-shadow: var(--btn-shadow-hover, 4px 4px 0px 0px var(--casaacento600));
    transform: translate(-2px, -2px);
}

/* Focus Visible (Acessibilidade) */
.btn:focus-visible {
    outline: 2px solid var(--btn-border-color, var(--casa-acento-600));
    outline-offset: 3px;
    box-shadow: var(--btn-shadow-hover, 4px 4px 0px 0px var(--casaacento600));
    transform: translate(-2px, -2px);
}

/* Ativo / Pressed State */
.btn:active:not(:disabled):not(.is-disabled) {
    box-shadow: var(--btn-shadow-active, 1px 1px 0px 0px var(--casaacento600));
    transform: translate(1px, 1px);
}

/* Desativado / Disabled State */
.btn:disabled,
.btn[disabled],
.btn.disabled,
.btn.is-disabled,
.btn[aria-disabled="true"] {
    background-color: var(--btn-disabled-bg, var(--color-neutral-200, #F6F1E8)) !important;
    border: var(--btn-border-width, 2px) solid var(--btn-disabled-border, var(--color-neutral-400, #D8D2C8)) !important;
    color: var(--btn-disabled-color, var(--color-neutral-500, #B5AFA4)) !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    opacity: 1 !important;
}

/* --------------------------------------------------------------------------
   Button Variants: House / Brand Context Overrides
   -------------------------------------------------------------------------- */

/* Casa Nostra (Verde #3F693B - Bordas Quadradas 3px Fiel ao Figma) */
.btn--casanostra,
.context-casanostra .btn {
    --btn-radius: 3px;
    border-radius: 3px;
    --btn-border-color: #3F693B;
    --btn-color: #3F693B;
    --btn-shadow-color: #3F693B;
    --btn-shadow-normal: 2px 2px 0px 0px #3F693B;
    --btn-shadow-hover: 4px 4px 0px 0px #3F693B;
    --btn-shadow-active: 1px 1px 0px 0px #3F693B;
}

.btn--solid.btn--casanostra,
.context-casanostra .btn--solid {
    border-radius: 3px;
    background-color: #3F693B;
    border-color: #3F693B;
    color: #FEFAFA;
    --btn-shadow-color: #274424;
    --btn-shadow-normal: 2px 2px 0px 0px #274424;
    --btn-shadow-hover: 4px 4px 0px 0px #274424;
    --btn-shadow-active: 1px 1px 0px 0px #274424;
}

/* Grupo Casanova (Vinho #880922) */
.btn--grupo {
    --btn-border-color: var(--color-grupo-600, #880922);
    --btn-color: var(--color-grupo-600, #880922);
    --btn-shadow-color: var(--color-grupo-600, #880922);
    --btn-shadow-normal: 2px 2px 0px 0px var(--color-grupo-600, #880922);
    --btn-shadow-hover: 4px 4px 0px 0px var(--color-grupo-600, #880922);
    --btn-shadow-active: 1px 1px 0px 0px var(--color-grupo-600, #880922);
}

/* Casanova (Caramelo #8A5B3B) */
.btn--casanova {
    --btn-border-color: var(--color-casanova-600, #8A5B3B);
    --btn-color: var(--color-casanova-600, #8A5B3B);
    --btn-shadow-color: var(--color-casanova-600, #8A5B3B);
    --btn-shadow-normal: 2px 2px 0px 0px var(--color-casanova-600, #8A5B3B);
    --btn-shadow-hover: 4px 4px 0px 0px var(--color-casanova-600, #8A5B3B);
    --btn-shadow-active: 1px 1px 0px 0px var(--color-casanova-600, #8A5B3B);
}

.btn--solid.btn--casanova,
.context-casanova .btn--solid {
    border-radius: 999px;
    background-color: #8A5B3B;
    border-color: #8A5B3B;
    color: #FEFAFA;
    --btn-shadow-color: #4E2C12;
    --btn-shadow-normal: 2px 2px 0px 0px #4E2C12;
    --btn-shadow-hover: 4px 4px 0px 0px #4E2C12;
    --btn-shadow-active: 1px 1px 0px 0px #4E2C12;
}

/* Pizza a Pezzi (Vermelho #A71712 Fiel ao Figma) */
.btn--pizza,
.btn--pizza-a-pezzi {
    --btn-border-color: var(--color-pizaapezzi-700, #A71712);
    --btn-color: var(--color-pizaapezzi-700, #A71712);
    --btn-shadow-color: var(--color-pizaapezzi-700, #A71712);
    --btn-shadow-normal: 2px 2px 0px 0px var(--color-pizaapezzi-700, #A71712);
    --btn-shadow-hover: 4px 4px 0px 0px var(--color-pizaapezzi-700, #A71712);
    --btn-shadow-active: 1px 1px 0px 0px var(--color-pizaapezzi-700, #A71712);
}

/* Dark / Neutral (#3A3733) */
.btn--dark,
.btn--neutral {
    --btn-border-color: var(--color-neutral-800, #3A3733);
    --btn-color: var(--color-neutral-800, #3A3733);
    --btn-shadow-color: var(--color-neutral-800, #3A3733);
    --btn-shadow-normal: 2px 2px 0px 0px var(--color-neutral-800, #3A3733);
    --btn-shadow-hover: 4px 4px 0px 0px var(--color-neutral-800, #3A3733);
    --btn-shadow-active: 1px 1px 0px 0px var(--color-neutral-800, #3A3733);
}

/* --------------------------------------------------------------------------
   Button Style Variant: Solid / Preenchido
   -------------------------------------------------------------------------- */
.btn--solid {
    background-color: var(--btn-border-color, var(--casa-acento-600));
    color: var(--color-neutral-200, #F6F1E8);
    border-color: var(--btn-border-color, var(--casa-acento-600));
    --btn-shadow-color: var(--casa-acento-800, #1B1A1A);
    --btn-shadow-normal: 2px 2px 0px 0px var(--btn-shadow-color);
    --btn-shadow-hover: 4px 4px 0px 0px var(--btn-shadow-color);
    --btn-shadow-active: 1px 1px 0px 0px var(--btn-shadow-color);
}

.btn--solid:hover:not(:disabled):not(.is-disabled) {
    background-color: var(--btn-border-color, var(--casa-acento-600));
    color: var(--color-neutral-200, #F6F1E8);
    border-color: var(--btn-border-color, var(--casa-acento-600));
}

.btn--solid:disabled,
.btn--solid[disabled],
.btn--solid.disabled,
.btn--solid.is-disabled {
    background-color: var(--color-neutral-400, #D8D2C8) !important;
    border-color: var(--color-neutral-400, #D8D2C8) !important;
    color: var(--color-neutral-200, #F6F1E8) !important;
}

/* --------------------------------------------------------------------------
   Button Sizes (Fluidos com clamp())
   -------------------------------------------------------------------------- */
.btn--sm {
    --btn-height: clamp(34px, 3.8vw, 38px);
    --btn-padding-y: clamp(8px, 1.2vw, 10px);
    --btn-padding-x: clamp(14px, 2.5vw, 20px);
    --btn-font-size: clamp(11px, 1vw, 12px);
}

.btn--lg {
    --btn-height: clamp(48px, 5.2vw, 52px);
    --btn-padding-y: clamp(14px, 2vw, 18px);
    --btn-padding-x: clamp(24px, 4vw, 36px);
    --btn-font-size: clamp(14px, 1.4vw, 15px);
}

.btn--full {
    width: 100%;
    display: flex;
}

/* --------------------------------------------------------------------------
   Button Icon / Arrow Support
   -------------------------------------------------------------------------- */
.btn--has-icon {
    gap: 8px;
}

.btn-arrow,
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 0;
    color: currentColor;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-arrow svg,
.btn-icon svg {
    display: block;
    width: 16px;
    height: 12px;
}

.btn:hover:not(:disabled):not(.is-disabled) .btn-arrow--right,
.btn:hover:not(:disabled):not(.is-disabled) .btn-icon--right {
    transform: translateX(3px);
}

.btn:hover:not(:disabled):not(.is-disabled) .btn-arrow--left,
.btn:hover:not(:disabled):not(.is-disabled) .btn-icon--left {
    transform: translateX(-3px);
}