/*
 * opc.custom.css
 * Customização visual: paleta #9E8871 / #E0D6C4, fonte Poppins, botões outline.
 */

/* ── Paleta — fora de @layer: sempre ganha sobre vars dentro de @layer ── */
:root {
    --button-color: #c4300e;
    --color-primary: hsl(11, 87%, 41%);
    --color-secondary: #c4300e;
    --color-success: #c4300e;
    --color-primary-alpha: rgba(158, 136, 113, 0.15);
    --color-primary-light: rgba(158, 136, 113, 0.30);
    --color-primary-border: rgba(158, 136, 113, 0.35);
    --color-primary-dark: #c4300e;
}

/* ── Fonte ──────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

body #onepage,
body #onepage * {
    font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
}

/* ── Botões ─────────────────────────────────────────────────────────── */
body #onepage .btn {
    /* background-color: transparent;
    color: var(--button-color); */
    border: 1.5px solid var(--button-color);
    border-radius: 4px;
    letter-spacing: 0.08em;
    font-weight: 500;
    font-size: 0.8rem;
    text-transform: uppercase;
    transition: background-color 0.2s ease, color 0.2s ease;
}

body #onepage .btn:hover {
    background-color: var(--button-color);
    color: #fff;
}

body #onepage .btn.finish {
    /* background-color: transparent;
    color: var(--button-color); */
    border: 1.5px solid var(--button-color);
}

body #onepage .btn.finish:hover {
    background-color: var(--button-color);
    color: #fff;
}

/* Estado desabilitado */
body #onepage .btn.btn-disabled,
body #onepage .btn.btn-disabled:hover {
    background-color: transparent !important;
    color: var(--button-color) !important;
    border-color: var(--button-color) !important;
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

body #onepage .btn-outline {
    background-color: transparent;
    color: var(--button-color);
    border: 1.5px solid var(--button-color);
}

body #onepage .btn-outline:hover {
    background-color: var(--button-color);
    color: #fff;
}

/* ── Inputs ─────────────────────────────────────────────────────────── */
body #onepage .input-group input:focus,
body #onepage .input-group select:focus,
body #onepage .input-group textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-alpha);
    outline: none;
}

body #onepage .input-group.populated label,
body #onepage .input-group input:focus ~ label,
body #onepage .input-group select:focus ~ label {
    color: var(--color-primary);
}

/* ── Seleção de entrega / pagamento ─────────────────────────────────── */
body #onepage .delivery-option.selected,
body #onepage .payment-option.selected {
    border-color: var(--color-primary);
    background-color: var(--color-primary-light);
}

/* ── Links de ação ──────────────────────────────────────────────────── */
body #onepage a.action-link,
body #onepage .text-secondary {
    color: var(--color-secondary);
}

/* ── Barra de frete grátis / awards (sobrescreve classes Tailwind green) */
body #onepage #basket .bg-green-500 {
    background-color: var(--color-primary) !important;
}

body #onepage #basket .border-green-200 {
    border-color: var(--color-primary-border) !important;
}

body #onepage #basket .bg-green-50 {
    background-color: var(--color-primary-light) !important;
}

body #onepage #basket .text-green-700 {
    color: var(--color-primary-dark) !important;
}

body #onepage #basket .text-green-600 {
    color: var(--color-primary) !important;
}