/**
 * Inquiry Form Styles
 *
 * Compact, clean inquiry form for the property sidebar.
 * Displayed when no PMS widget or pricing data is available.
 *
 * NOTE: All input/textarea styles use !important because reset.css applies
 * `all: revert` to inputs inside .cwp-root, which strips everything back
 * to browser defaults. Without !important these rules lose specificity.
 *
 * @package Connect
 * @since   1.6.0
 */

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

.cwp-inquiry__form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Contact Fields Group ─────────────────────────────────────── */

.cwp-inquiry__fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 4px;
}

.cwp-inquiry__field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cwp-inquiry__label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--cwp-text-secondary, #484848) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    line-height: 1.2 !important;
}

.cwp-inquiry__required {
    color: #DC2626 !important;
    font-size: 10px !important;
}

.cwp-inquiry__optional {
    font-weight: 400 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: var(--cwp-text-muted, #717171) !important;
    font-size: 10px !important;
}

/* ── Form Inputs ──────────────────────────────────────────────── */
/* .cwp-root prefix needed so these beat reset.css's `.cwp-root input` rules */

.cwp-root .cwp-inquiry__input,
.cwp-root .cwp-inquiry__textarea {
    width: 100% !important;
    padding: 10px 12px !important;
    border: 1px solid var(--cwp-border, #D4E0E8) !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-family: var(--cwp-font-body, sans-serif) !important;
    color: var(--cwp-text, #222222) !important;
    background: var(--cwp-surface, #fff) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    outline: none !important;
    box-sizing: border-box !important;
    line-height: 1.4 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.cwp-root .cwp-inquiry__input:hover,
.cwp-root .cwp-inquiry__textarea:hover {
    border-color: var(--cwp-text-muted, #999) !important;
    background: var(--cwp-surface, #fff) !important;
    color: var(--cwp-text, #222222) !important;
    box-shadow: none !important;
    outline: none !important;
}

.cwp-root .cwp-inquiry__input:focus,
.cwp-root .cwp-inquiry__textarea:focus {
    border-color: var(--cwp-primary, #1A3A4A) !important;
    box-shadow: 0 0 0 2px rgba(26, 58, 74, 0.08) !important;
    background: var(--cwp-surface, #fff) !important;
    color: var(--cwp-text, #222222) !important;
    outline: none !important;
}

.cwp-root .cwp-inquiry__input:active,
.cwp-root .cwp-inquiry__textarea:active {
    border-color: var(--cwp-primary, #1A3A4A) !important;
    background: var(--cwp-surface, #fff) !important;
    color: var(--cwp-text, #222222) !important;
    outline: none !important;
}

.cwp-root .cwp-inquiry__input::placeholder,
.cwp-root .cwp-inquiry__textarea::placeholder {
    color: var(--cwp-text-muted, #B0B0B0) !important;
    font-size: 14px !important;
    opacity: 1 !important;
}

.cwp-root .cwp-inquiry__textarea {
    resize: vertical !important;
    min-height: 80px !important;
    max-height: 140px !important;
}

/* ── Date & Guest Inputs (shared partials) ────────────────────── */

.cwp-sidebar--inquiry .cwp-sidebar__field {
    cursor: pointer;
}

/* ── Error Message ────────────────────────────────────────────── */

.cwp-inquiry__error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: 6px;
    font-size: 12px;
    color: #991B1B;
    line-height: 1.4;
}

.cwp-inquiry__error svg {
    flex-shrink: 0;
    margin-top: 1px;
    stroke: #DC2626;
    width: 14px;
    height: 14px;
}

/* ── Success State ────────────────────────────────────────────── */

.cwp-inquiry__success {
    text-align: center;
    padding: 24px 16px;
}

.cwp-inquiry__success-icon {
    margin-bottom: 12px;
}

.cwp-inquiry__success-icon svg {
    stroke: #16A34A;
    width: 40px;
    height: 40px;
}

.cwp-inquiry__success-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--cwp-text, #222222);
    margin: 0 0 6px 0;
}

.cwp-inquiry__success-text {
    font-size: 13px;
    color: var(--cwp-text-secondary, #484848);
    margin: 0;
    line-height: 1.5;
}

/* ── Submit Button Spinner ────────────────────────────────────── */

.cwp-btn--loading {
    opacity: 0.85;
    cursor: wait;
}

.cwp-btn__spinner {
    display: inline-block;
    animation: cwp-spin 1s linear infinite;
    vertical-align: middle;
    margin-right: 6px;
}

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

/* ══════════════════════════════════════════════════════════════════
   MOBILE FULLSCREEN OVERLAY
   Shown when user taps "Send Inquiry" on the compact bottom bar.
   Follows the same fullscreen popup pattern as the booking sidebar.
   ══════════════════════════════════════════════════════════════════ */

/* Hidden on desktop — only shown on mobile via Alpine + CSS */
.cwp-inquiry__mobile-overlay {
    display: none;
}

@media (max-width: 1023px) {
    .cwp-inquiry__mobile-overlay {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 10000;
        background: var(--cwp-surface, #FFFFFF);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .cwp-inquiry__mobile-overlay[x-cloak] {
        display: none !important;
    }

    /* Enter/leave transitions */
    .cwp-inquiry__mobile-overlay--enter {
        transition: transform 0.3s ease, opacity 0.3s ease;
    }
    .cwp-inquiry__mobile-overlay--leave {
        transition: transform 0.2s ease, opacity 0.2s ease;
    }

    /* ── Overlay Header ────────────────────────────────────────── */

    .cwp-inquiry__mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px;
        border-bottom: 1px solid var(--cwp-border-light, #ececec);
        position: sticky;
        top: 0;
        background: var(--cwp-surface, #FFFFFF);
        z-index: 1;
    }

    .cwp-inquiry__mobile-title {
        font-family: var(--cwp-font-body, 'DM Sans', sans-serif);
        font-size: 17px;
        font-weight: 600;
        color: var(--cwp-text, #1A2B3C);
        margin: 0;
    }

    .cwp-root .cwp-inquiry__mobile-close,
    .cwp-inquiry__mobile-close {
        all: revert !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        border: none !important;
        background: var(--cwp-surface-alt, #F5F5F5) !important;
        border-radius: 50% !important;
        cursor: pointer !important;
        color: var(--cwp-text, #1A2B3C) !important;
        padding: 0 !important;
        transition: background-color 150ms ease !important;
    }

    .cwp-root .cwp-inquiry__mobile-close:hover,
    .cwp-inquiry__mobile-close:hover {
        background: var(--cwp-border, #E2E8F0) !important;
    }

    .cwp-root .cwp-inquiry__mobile-close:focus,
    .cwp-inquiry__mobile-close:focus {
        outline: 2px solid var(--cwp-primary, #1B6B93) !important;
        outline-offset: 2px !important;
    }

    /* ── Overlay Body ──────────────────────────────────────────── */

    .cwp-inquiry__mobile-body {
        flex: 1;
        padding: 20px;
        overflow-y: auto;
    }

    .cwp-inquiry__mobile-body .cwp-inquiry__form {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    /* ── Date & Guest Summaries (tappable) ─────────────────────── */

    .cwp-inquiry__mobile-dates {
        display: grid;
        grid-template-columns: 1fr 1fr;
        border: 1px solid var(--cwp-border, #D4E0E8);
        border-radius: 10px;
        overflow: hidden;
    }

    .cwp-inquiry__mobile-date {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 12px 14px;
        cursor: pointer;
        transition: background-color 150ms ease;
    }

    .cwp-inquiry__mobile-date:first-child {
        border-right: 1px solid var(--cwp-border, #D4E0E8);
    }

    .cwp-inquiry__mobile-date:active {
        background: var(--cwp-surface-alt, #F5F5F5);
    }

    .cwp-inquiry__mobile-date-value {
        font-size: 14px;
        color: var(--cwp-text, #1A2B3C);
        font-weight: 500;
    }

    .cwp-inquiry__mobile-guests {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 12px 14px;
        border: 1px solid var(--cwp-border, #D4E0E8);
        border-radius: 10px;
        cursor: pointer;
        transition: background-color 150ms ease;
    }

    .cwp-inquiry__mobile-guests:active {
        background: var(--cwp-surface-alt, #F5F5F5);
    }

    .cwp-inquiry__mobile-guests span:last-child {
        font-size: 14px;
        color: var(--cwp-text, #1A2B3C);
        font-weight: 500;
    }

    /* ── Submit button full width ──────────────────────────────── */

    .cwp-inquiry__mobile-body .cwp-sidebar__reserve {
        width: 100% !important;
        border-radius: 9999px !important;
        height: 48px !important;
    }

    /* ── Popup z-index fix ─────────────────────────────────────── */
    /* Calendar & guest popups use z-index: 9999, but the mobile overlay
       is at z-index: 10000, so popups open BEHIND it. Bump them above. */
    .cwp-sidebar--inquiry .cwp-sidebar__popup {
        z-index: 10001 !important;
    }
}