/* ==========================================================================
   OOW Contact Form — lmdoow-contact-form.css
   Shortcode: [lmdoow_contact_form]
   Requiere: lmdoow-frontend.css (variables globales)
   ========================================================================== */

/* ── Wrapper ────────────────────────────────────────────────────────────── */

.lmdoow-contact-form {
    width: 100%;
}

/* ── Banners ────────────────────────────────────────────────────────────── */

.lmdoow-contact-form__banner {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border-radius: var( --lmdoow-radius-md );
    font-size: 0.875rem;
    line-height: 1.45;
    margin-bottom: 1.25rem;
}

.lmdoow-contact-form__banner[hidden] { display: none; }

.lmdoow-contact-form__banner--success {
    background: var( --lmdoow-color-success-bg );
    color: var( --lmdoow-color-success );
    border: 1px solid rgba( 22, 163, 74, 0.2 );
}

.lmdoow-contact-form__banner--error {
    background: var( --lmdoow-color-error-bg );
    color: var( --lmdoow-color-error );
    border: 1px solid rgba( 197, 17, 26, 0.2 );
}

.lmdoow-contact-form__banner svg { flex-shrink: 0; margin-top: 0.1rem; }
.lmdoow-contact-form__banner p   { margin: 0; }

/* ── Form ───────────────────────────────────────────────────────────────── */

.lmdoow-contact-form__form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Field ──────────────────────────────────────────────────────────────── */

.lmdoow-contact-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1.1rem;
}

/* ── Label ──────────────────────────────────────────────────────────────── */

.lmdoow-contact-form__label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var( --lmdoow-color-heading );
    text-transform: uppercase;
    letter-spacing: 0.06em;
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}

.lmdoow-contact-form__optional {
    font-size: 0.7rem;
    font-weight: 400;
    text-transform: none;
    color: var( --lmdoow-color-text-muted );
    letter-spacing: 0;
}

/* ── Input / Textarea ───────────────────────────────────────────────────── */

.lmdoow-contact-form__input,
.lmdoow-contact-form__textarea,
.lmdoow-contact-form__select {
    width: 100%;
    padding: 0.75rem 1rem;
    background: #f5f5f5;
    border: 1px solid transparent;
    border-radius: var( --lmdoow-radius-md );
    font-size: 0.9375rem;
    color: var( --lmdoow-color-heading );
    font-family: inherit;
    transition: border-color var( --lmdoow-transition ), background var( --lmdoow-transition );
    outline: none;
    box-sizing: border-box;
}

.lmdoow-contact-form__input::placeholder,
.lmdoow-contact-form__textarea::placeholder {
    color: #aaa;
}

.lmdoow-contact-form__input:focus,
.lmdoow-contact-form__textarea:focus,
.lmdoow-contact-form__select:focus {
    background: #fff;
    border-color: var( --lmdoow-color-primary );
}

.lmdoow-contact-form__input.is-invalid,
.lmdoow-contact-form__textarea.is-invalid,
.lmdoow-contact-form__select.is-invalid {
    border-color: var( --lmdoow-color-error );
    background: #fff;
}

.lmdoow-contact-form__textarea {
    resize: vertical;
    min-height: 120px;
}

/* ── Field error ────────────────────────────────────────────────────────── */

.lmdoow-contact-form__field-error {
    font-size: 0.78rem;
    color: var( --lmdoow-color-error );
    line-height: 1.4;
}

.lmdoow-contact-form__field-error[hidden] { display: none; }

/* ── Select wrapper ─────────────────────────────────────────────────────── */

.lmdoow-contact-form__select-wrap {
    position: relative;
}

.lmdoow-contact-form__select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.5rem;
    cursor: pointer;
}

.lmdoow-contact-form__select-chevron {
    position: absolute;
    right: 0.85rem;
    top: 50%;
    transform: translateY( -50% );
    pointer-events: none;
    color: var( --lmdoow-color-text-muted );
    display: flex;
    align-items: center;
}

/* ── Submit button ──────────────────────────────────────────────────────── */

.lmdoow-contact-form__submit {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             0.5rem;
    width:           100%;
    padding:         0.85rem 1.5rem;
    margin-top:      0.5rem;
    background:      var( --lmdoow-color-error );
    color:           #fff;
    border:          none;
    border-radius:   100px;
    font-size:       0.95rem;
    font-weight:     700;
    font-family:     inherit;
    letter-spacing:  0.01em;
    cursor:          pointer;
    transition:      background  var( --lmdoow-transition ),
                     transform   var( --lmdoow-transition ),
                     opacity     var( --lmdoow-transition );
}

.lmdoow-contact-form__submit:hover:not( :disabled ) {
    background: var( --lmdoow-color-error-dark );
    transform:  translateY( -1px );
}

.lmdoow-contact-form__submit:disabled {
    opacity:    0.65;
    cursor:     not-allowed;
    transform:  none;
}

/* ── Spinner animation ──────────────────────────────────────────────────── */

.lmdoow-contact-form__spinner {
    animation: lmdoow-cf-spin 0.8s linear infinite;
}

@keyframes lmdoow-cf-spin {
    from { transform: rotate( 0deg ); }
    to   { transform: rotate( 360deg ); }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media ( max-width: 480px ) {
    .lmdoow-contact-form__input,
    .lmdoow-contact-form__textarea,
    .lmdoow-contact-form__select {
        font-size: 1rem; /* evita zoom en iOS */
    }
}