/* =========================================================
   NEXORA DIGITAL
   Archivo: css/cotizacion.css

   Función:
   Complementos específicos del formulario de cotización.
   La estructura principal y el responsive viven en:
   - css/style.css
   - css/responsive.css
   ========================================================= */


/* =========================================================
   01. FORMULARIO — DETALLES VISUALES
   ========================================================= */

.quote-form {
    isolation: isolate;
}

.quote-form::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 120px;
    height: 120px;

    background:
        radial-gradient(
            circle at top right,
            rgba(212, 175, 55, 0.07),
            transparent 68%
        );

    pointer-events: none;

    z-index: -1;
}


/* =========================================================
   02. CAMPOS
   ========================================================= */

.form-field label,
.send-method legend {
    user-select: none;
}

.form-field input,
.form-field select,
.form-field textarea {
    caret-color: var(--color-gold);
}


/* Select: opciones oscuras */

.form-field select option {
    background: #0D1010;
    color: var(--color-white);
}


/* Autofill de navegadores Chromium */

.form-field input:-webkit-autofill,
.form-field input:-webkit-autofill:hover,
.form-field input:-webkit-autofill:focus,
.form-field textarea:-webkit-autofill,
.form-field textarea:-webkit-autofill:hover,
.form-field textarea:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--color-white);

    -webkit-box-shadow:
        0 0 0 1000px #090C0C inset;

    transition:
        background-color 9999s ease-in-out 0s;
}


/* =========================================================
   03. ESTADOS DE VALIDACIÓN
   ========================================================= */

.form-field input[aria-invalid="true"],
.form-field select[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] {
    border-color: rgba(212, 175, 55, 0.92);

    box-shadow:
        0 0 0 3px rgba(212, 175, 55, 0.055);
}

.form-field input[aria-invalid="true"]:focus,
.form-field select[aria-invalid="true"]:focus,
.form-field textarea[aria-invalid="true"]:focus {
    box-shadow:
        0 0 0 3px rgba(212, 175, 55, 0.10);
}


/* =========================================================
   04. MÉTODO DE ENVÍO
   ========================================================= */

.send-method {
    margin: 0;
    padding: 0;

    border: 0;
}

.send-method legend {
    margin-bottom: 10px;

    color: rgba(247, 247, 245, 0.82);

    font-size: 0.74rem;
    font-weight: 600;

    letter-spacing: 0.055em;
}

.send-method-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px;
}

.send-method-option {
    position: relative;

    display: block;

    min-height: 52px;

    padding: 0;

    border: 0;
    background: transparent;

    cursor: pointer;
}


/* Oculta el radio visual nativo,
   pero lo mantiene accesible */

.send-method-option input {
    position: absolute;

    width: 1px;
    height: 1px;

    min-height: 0;
    padding: 0;

    opacity: 0;

    overflow: hidden;

    pointer-events: none;
}

.send-method-option span {
    min-height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 18px;

    color: rgba(247, 247, 245, 0.68);

    background: rgba(5, 7, 7, 0.58);

    border: 1px solid rgba(247, 247, 245, 0.11);

    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.025em;

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
}

.send-method-option:hover span {
    color: var(--color-white);

    border-color: rgba(247, 247, 245, 0.22);

    background: rgba(247, 247, 245, 0.025);
}

.send-method-option input:checked + span {
    color: var(--color-black);

    background: var(--color-gold);

    border-color: var(--color-gold);

    box-shadow:
        0 10px 30px rgba(212, 175, 55, 0.10);
}

.send-method-option input:checked + span::before {
    content: "";

    width: 5px;
    height: 5px;

    margin-right: 9px;

    background: currentColor;

    border-radius: 50%;
}

.send-method-option input:focus-visible + span {
    outline: 2px solid var(--color-gold);
    outline-offset: 3px;
}


/* =========================================================
   05. MENSAJE DE ESTADO
   ========================================================= */

.form-status {
    transition:
        opacity var(--transition-fast),
        color var(--transition-fast);
}

.form-status:empty {
    opacity: 0;
}

.form-status:not(:empty) {
    opacity: 1;
}


/* =========================================================
   06. BOTÓN DE ENVÍO
   ========================================================= */

.quote-form-footer .btn-primary {
    min-width: 190px;
}

.quote-form-footer .btn-primary:active {
    transform: translateY(0);
}


/* =========================================================
   07. RESPONSIVE ESPECÍFICO DEL FORMULARIO
   ========================================================= */

@media (max-width: 768px) {

    .quote-form::after {
        width: 90px;
        height: 90px;
    }

    .send-method-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .quote-form-footer .btn-primary {
        min-width: 0;
    }
}


@media (max-width: 600px) {

    .send-method-options {
        grid-template-columns: 1fr;
    }

    .send-method-option span {
        justify-content: flex-start;

        min-height: 50px;

        padding: 0 16px;
    }
}


/* =========================================================
   08. DISPOSITIVOS SIN HOVER REAL
   ========================================================= */

@media (hover: none) {

    .send-method-option:hover span {
        color: rgba(247, 247, 245, 0.68);

        background: rgba(5, 7, 7, 0.58);

        border-color: rgba(247, 247, 245, 0.11);
    }

    .send-method-option input:checked + span {
        color: var(--color-black);

        background: var(--color-gold);

        border-color: var(--color-gold);
    }
}


/* =========================================================
   09. ACCESIBILIDAD
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .send-method-option span,
    .form-status {
        transition: none;
    }
}