/* =========================================================================
   /assets/css/templates/dionysus/onyx_forms.css
   ONYX 2.1 - Sistema común de formularios y acciones
   Responsabilidad:
   - Inputs, selects, textareas, checkboxes, botones y estados de formularios
   - Compatibilidad con módulos existentes sin cambiar lógica JS
   - Dark/light consistente usando variables del tema ONYX
   ========================================================================= */

:root {
    --onyx-form-radius: var(--radius-lg, 16px);
    --onyx-form-radius-lg: 18px;
    --onyx-form-control-height: 50px;
    --onyx-form-gap: 12px;
    --onyx-form-focus-ring: 0 0 0 3px rgba(var(--ez-pal-secondary-rgb, 170, 68, 147), 0.16);
    --onyx-form-primary-bg: linear-gradient(135deg, var(--ez-theme-accent-secondary, var(--ez-pal-secondary)), var(--ez-theme-accent-primary, var(--ez-pal-primary)));
    --onyx-form-primary-text: var(--btn_secondary_text, var(--ez-pal-neutral-light, #ffffff));
    --onyx-form-danger: #ff6b6b;
}

html[data-theme="dark"],
[data-theme="dark"] {
    --onyx-form-control-bg: rgba(var(--ez-pal-neutral-light-rgb, 248, 246, 242), 0.065);
    --onyx-form-control-bg-focus: rgba(var(--ez-pal-neutral-light-rgb, 248, 246, 242), 0.095);
    --onyx-form-control-border: rgba(var(--ez-pal-neutral-light-rgb, 248, 246, 242), 0.13);
    --onyx-form-control-border-hover: rgba(var(--ez-pal-neutral-light-rgb, 248, 246, 242), 0.20);
    --onyx-form-control-text: var(--modal-text-main, var(--ez-theme-text-main, #ffffff));
    --onyx-form-control-muted: var(--modal-text-muted, var(--ez-theme-text-muted, rgba(255, 255, 255, 0.70)));
    --onyx-form-surface: rgba(var(--ez-pal-neutral-light-rgb, 248, 246, 242), 0.055);
    --onyx-form-surface-strong: rgba(var(--ez-pal-neutral-light-rgb, 248, 246, 242), 0.085);
}

html[data-theme="light"],
[data-theme="light"] {
    --onyx-form-control-bg: rgba(var(--ez-pal-neutral-light-rgb, 248, 246, 242), 0.72);
    --onyx-form-control-bg-focus: rgba(var(--ez-pal-neutral-light-rgb, 248, 246, 242), 0.92);
    --onyx-form-control-border: rgba(var(--ez-pal-neutral-dark-rgb, 7, 7, 8), 0.14);
    --onyx-form-control-border-hover: rgba(var(--ez-pal-neutral-dark-rgb, 7, 7, 8), 0.22);
    --onyx-form-control-text: var(--modal-text-main, var(--ez-theme-text-main, #070708));
    --onyx-form-control-muted: var(--modal-text-muted, var(--ez-theme-text-muted, rgba(7, 7, 8, 0.62)));
    --onyx-form-surface: rgba(var(--ez-pal-neutral-dark-rgb, 7, 7, 8), 0.045);
    --onyx-form-surface-strong: rgba(var(--ez-pal-neutral-dark-rgb, 7, 7, 8), 0.07);
}

/* =========================================================================
   ESTRUCTURA COMÚN
   ========================================================================= */

.ez-qa-reserve-form,
.ez-invoice-form,
.ez-newsletter-form,
.ez-reputation-feedback-form,
.ez-pay-flow,
.ez-pay-input-grid {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.ez-qa-reserve-form,
.ez-newsletter-form,
.ez-reputation-feedback-form,
.ez-pay-flow {
    display: grid;
    gap: var(--onyx-form-gap);
}

.ez-invoice-form,
.ez-pay-input-grid,
.ez-qa-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--onyx-form-gap);
}

.ez-invoice-field--full,
.ez-reputation-field--full,
.ez-reputation-areas,
.ez-reputation-submit-btn,
.ez-reputation-form-status,
.ez-invoice-consent,
.ez-invoice-submit-btn,
.ez-newsletter-field--checkbox,
.ez-newsletter-submit-btn,
.ez-newsletter-status,
.ez-pay-primary-action,
.ez-pay-tip-card,
.ez-pay-state,
.ez-pay-method-card,
.ez-pay-method-selector,
.ez-pay-readonly-summary,
.ez-pay-notify-btn,
.ez-pay-back-btn {
    grid-column: 1 / -1;
}

/* =========================================================================
   LABELS Y CAMPOS
   ========================================================================= */

.ez-invoice-field,
.ez-pay-field,
.ez-newsletter-field,
.ez-reputation-field,
.ez-qa-people-wrap {
    display: grid;
    gap: 8px;
    min-width: 0;
    color: var(--onyx-form-control-text);
}

.ez-invoice-field,
.ez-pay-field,
.ez-newsletter-label,
.ez-reputation-form-label,
.ez-qa-field-label {
    color: var(--onyx-form-control-text);
    font-size: 0.82rem;
    font-weight: 850;
    line-height: 1.25;
}

.ez-newsletter-label,
.ez-reputation-form-label {
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--onyx-form-control-muted);
    font-size: 0.72rem;
    font-weight: 900;
}

/* =========================================================================
   INPUTS / SELECTS / TEXTAREAS
   ========================================================================= */

.ez-qa-form-input,
.ez-newsletter-input,
.ez-invoice-field input,
.ez-invoice-field select,
.ez-invoice-field textarea,
.ez-pay-field input,
.ez-pay-split-pct,
.ez-reputation-field input,
.ez-reputation-field textarea {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: var(--onyx-form-control-height);
    box-sizing: border-box;
    border-radius: var(--onyx-form-radius);
    border: 1px solid var(--onyx-form-control-border);
    background: var(--onyx-form-control-bg);
    color: var(--onyx-form-control-text);
    padding: 12px 14px;
    font: inherit;
    font-size: 16px !important; 
    font-weight: 650;
    line-height: 1.25;
    outline: none;
    box-shadow: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

.ez-invoice-field select {
    appearance: auto;
    -webkit-appearance: menulist;
    padding-right: 36px;
}

.ez-qa-form-input:hover,
.ez-newsletter-input:hover,
.ez-invoice-field input:hover,
.ez-invoice-field select:hover,
.ez-invoice-field textarea:hover,
.ez-pay-field input:hover,
.ez-pay-split-pct:hover,
.ez-reputation-field input:hover,
.ez-reputation-field textarea:hover {
    border-color: var(--onyx-form-control-border-hover);
}

.ez-qa-form-input:focus,
.ez-newsletter-input:focus,
.ez-invoice-field input:focus,
.ez-invoice-field select:focus,
.ez-invoice-field textarea:focus,
.ez-pay-field input:focus,
.ez-pay-split-pct:focus,
.ez-reputation-field input:focus,
.ez-reputation-field textarea:focus {
    border-color: rgba(var(--ez-pal-secondary-rgb, 170, 68, 147), 0.74);
    background: var(--onyx-form-control-bg-focus);
    box-shadow: var(--onyx-form-focus-ring);
}

.ez-qa-form-input::placeholder,
.ez-newsletter-input::placeholder,
.ez-invoice-field input::placeholder,
.ez-invoice-field textarea::placeholder,
.ez-pay-field input::placeholder,
.ez-reputation-field input::placeholder,
.ez-reputation-field textarea::placeholder {
    color: var(--onyx-form-control-muted);
    opacity: 0.82;
}

.ez-invoice-field textarea,
.ez-reputation-field textarea,
.ez-qa-form-input:is(textarea),
textarea.ez-qa-form-input {
    resize: vertical;
    min-height: 108px;
}

.ez-qa-form-input[type="date"]::-webkit-calendar-picker-indicator,
.ez-qa-form-input[type="time"]::-webkit-calendar-picker-indicator,
.ez-newsletter-input[type="date"]::-webkit-calendar-picker-indicator,
.ez-invoice-field input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.72;
}

html[data-theme="dark"] .ez-qa-form-input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] .ez-qa-form-input[type="time"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] .ez-newsletter-input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="dark"] .ez-invoice-field input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

.ez-qa-form-input::-webkit-outer-spin-button,
.ez-qa-form-input::-webkit-inner-spin-button,
.ez-pay-split-pct::-webkit-outer-spin-button,
.ez-pay-split-pct::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ez-qa-form-input[type="number"],
.ez-pay-split-pct[type="number"] {
    -moz-appearance: textfield;
    text-align: center;
}

/* =========================================================================
   CHECKBOXES / CHIPS
   ========================================================================= */

.ez-newsletter-checkbox-label,
.ez-invoice-consent,
.ez-reputation-area-chip {
    min-width: 0;
    border-radius: var(--onyx-form-radius-lg);
    border: 1px solid var(--onyx-form-control-border);
    background: var(--onyx-form-surface);
    color: var(--onyx-form-control-muted);
}

.ez-newsletter-checkbox-label,
.ez-invoice-consent {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    min-height: 46px;
    padding: 12px 13px;
    font-size: 0.86rem;
    line-height: 1.45;
    cursor: pointer;
}

.ez-newsletter-checkbox-label input,
.ez-invoice-consent input,
.ez-reputation-area-chip input {
    accent-color: var(--ez-pal-secondary, #AA4493);
}

.ez-newsletter-checkbox-label input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.ez-newsletter-checkbox-box {
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    margin-top: 0;
    border-radius: 8px;
    border: 2px solid rgba(var(--ez-pal-secondary-rgb, 170, 68, 147), 0.78);
    background: var(--onyx-form-control-bg);
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 1px rgba(var(--ez-pal-neutral-dark-rgb, 7, 7, 8), 0.06);
}

.ez-newsletter-checkbox-box::after {
    content: "";
    width: 12px;
    height: 12px;
    transform: scale(0);
    transition: transform 120ms ease;
    background: var(--ez-pal-neutral-light, #ffffff);
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.ez-newsletter-checkbox-label input:checked + .ez-newsletter-checkbox-box {
    background: var(--ez-pal-secondary, #AA4493);
    border-color: var(--ez-pal-secondary, #AA4493);
    box-shadow: 0 8px 18px rgba(var(--ez-pal-secondary-rgb, 170, 68, 147), 0.22);
}

.ez-newsletter-checkbox-label input:checked + .ez-newsletter-checkbox-box::after {
    transform: scale(1);
}

.ez-reputation-area-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin: 4px 6px 4px 0;
    padding: 9px 12px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
}

/* =========================================================================
   PEOPLE / SPLIT CONTROLS
   ========================================================================= */

.ez-qa-people-control,
.ez-pay-people-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

.ez-qa-people-control .ez-qa-form-input {
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
}

.ez-pay-split-pct {
    width: 86px;
    min-height: 42px;
    text-align: center;
    font-weight: 900;
}

/* =========================================================================
   BOTONES PRIMARIOS / SECUNDARIOS
   ========================================================================= */

.ez-qa-primary-btn,
.ez-newsletter-submit-btn,
.ez-invoice-open-btn,
.ez-invoice-submit-btn,
#ez-module-pay-bill .ez-pay-open-btn,
.ez-pay-primary-action,
.ez-pay-method-choice,
.ez-pay-notify-btn,
.ez-reputation-primary-btn,
.ez-reputation-submit-btn {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-height: 52px;
    border: 0;
    border-radius: var(--onyx-form-radius-lg);
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--onyx-form-primary-text);
    background: var(--onyx-form-primary-bg);
    box-shadow: 0 14px 34px rgba(var(--ez-pal-secondary-rgb, 170, 68, 147), 0.24);
    font-family: var(--ez-font-primary, inherit);
    font-size: 0.94rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-decoration: none;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, opacity 0.18s ease;
}

.ez-qa-primary-btn:hover,
.ez-newsletter-submit-btn:hover:not(:disabled),
.ez-invoice-open-btn:hover,
.ez-invoice-submit-btn:hover:not(:disabled),
#ez-module-pay-bill .ez-pay-open-btn:hover,
.ez-pay-primary-action:hover,
.ez-pay-method-choice:hover,
.ez-pay-notify-btn:hover,
.ez-reputation-primary-btn:hover,
.ez-reputation-submit-btn:hover:not(:disabled),
.ez-qa-primary-btn:focus-visible,
.ez-newsletter-submit-btn:focus-visible,
.ez-invoice-open-btn:focus-visible,
.ez-invoice-submit-btn:focus-visible,
#ez-module-pay-bill .ez-pay-open-btn:focus-visible,
.ez-pay-primary-action:focus-visible,
.ez-pay-method-choice:focus-visible,
.ez-pay-notify-btn:focus-visible,
.ez-reputation-primary-btn:focus-visible,
.ez-reputation-submit-btn:focus-visible {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 18px 42px rgba(var(--ez-pal-secondary-rgb, 170, 68, 147), 0.32);
    outline: none;
}

.ez-newsletter-submit-btn:disabled,
.ez-invoice-submit-btn:disabled,
.ez-reputation-submit-btn:disabled {
    opacity: 0.70;
    cursor: not-allowed;
    transform: none;
}

.ez-qa-secondary-btn,
.ez-pay-back-btn,
.ez-reputation-secondary-btn,
.ez-pay-split-toggle,
.ez-pay-split-tab,
.ez-pay-round-btn,
.ez-pay-copy-btn {
    appearance: none;
    -webkit-appearance: none;
    min-height: 44px;
    border-radius: var(--onyx-form-radius);
    border: 1px solid var(--onyx-form-control-border);
    background: var(--onyx-form-surface);
    color: var(--onyx-form-control-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--ez-font-primary, inherit);
    font-size: 0.86rem;
    font-weight: 850;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.ez-qa-secondary-btn,
.ez-pay-back-btn,
.ez-pay-split-toggle {
    width: 100%;
}

.ez-qa-secondary-btn:hover,
.ez-pay-back-btn:hover,
.ez-reputation-secondary-btn:hover,
.ez-pay-split-toggle:hover,
.ez-pay-split-tab:hover,
.ez-pay-round-btn:hover,
.ez-pay-copy-btn:hover,
.ez-qa-secondary-btn:focus-visible,
.ez-pay-back-btn:focus-visible,
.ez-reputation-secondary-btn:focus-visible,
.ez-pay-split-toggle:focus-visible,
.ez-pay-split-tab:focus-visible,
.ez-pay-round-btn:focus-visible,
.ez-pay-copy-btn:focus-visible {
    transform: translateY(-1px);
    background: var(--onyx-form-surface-strong);
    border-color: rgba(var(--ez-pal-secondary-rgb, 170, 68, 147), 0.42);
    outline: none;
}

.ez-pay-split-toggle.active,
.ez-pay-split-tab.active {
    color: var(--ez-pal-neutral-light, #ffffff);
    background: var(--ez-pal-secondary, #AA4493);
    border-color: var(--ez-pal-secondary, #AA4493);
    box-shadow: 0 12px 28px rgba(var(--ez-pal-secondary-rgb, 170, 68, 147), 0.18);
}

.ez-pay-copy-btn {
    padding: 0 12px;
    min-height: 40px;
}

/* =========================================================================
   NOTAS / ESTADOS / ERRORES
   ========================================================================= */

.ez-newsletter-status,
.ez-invoice-status,
.ez-reputation-form-status,
.ez-pay-state,
.ez-qa-success-msg,
.ez-invoice-privacy-note,
.ez-invoice-modal-desc,
.ez-pay-modal-desc {
    margin: 0;
    color: var(--onyx-form-control-muted);
    font-size: 0.88rem;
    line-height: 1.45;
    text-align: center;
}

.ez-newsletter-status,
.ez-invoice-status,
.ez-pay-state {
    padding: 12px 14px;
    border-radius: var(--onyx-form-radius);
    background: var(--onyx-form-surface);
    border: 1px solid var(--onyx-form-control-border);
}

.ez-newsletter-status--success,
.ez-reputation-form-status.is-success,
.ez-qa-success-msg {
    color: var(--ez-pal-success, #22c55e);
}

.ez-newsletter-status--error,
.ez-reputation-form-status.is-error,
.ez-qa-error-msg,
.ez-pay-state--error,
.ez-qa-input-error {
    color: var(--onyx-form-danger);
}

.ez-qa-input-error,
.ez-newsletter-input.is-error,
.ez-invoice-field input.is-error,
.ez-invoice-field select.is-error,
.ez-invoice-field textarea.is-error,
.ez-pay-field input.is-error,
.ez-reputation-field input.is-error,
.ez-reputation-field textarea.is-error {
    border-color: rgba(255, 107, 107, 0.72);
    box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.14);
}

/* =========================================================================
   HONEYPOTS / ACCESIBILIDAD
   ========================================================================= */

.ez-newsletter-honeypot,
.ez-reputation-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width: 760px) {
    .ez-invoice-form,
    .ez-reputation-feedback-form {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .ez-qa-form-grid,
    .ez-pay-input-grid {
        grid-template-columns: 1fr;
    }

    .ez-qa-people-control,
    .ez-pay-people-controls {
        gap: 8px;
    }

    .ez-qa-primary-btn,
    .ez-newsletter-submit-btn,
    .ez-invoice-open-btn,
    .ez-invoice-submit-btn,
    #ez-module-pay-bill .ez-pay-open-btn,
    .ez-pay-primary-action,
    .ez-pay-method-choice,
    .ez-pay-notify-btn,
    .ez-reputation-primary-btn,
    .ez-reputation-submit-btn {
        min-height: 52px;
        border-radius: 17px;
    }
}