/* ==========================================================================
   RADHA CORE — BOOKING.CSS
   Estilos do formulário de busca [hotel_booking] (override search-form-v2.php)
   Mobile-first | Vanilla CSS | Variáveis do theme.json
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. WRAPPER DO FORMULÁRIO DE BUSCA
   -------------------------------------------------------------------------- */
.radha-booking-form-container {
    width: 100%;
}

.radha-hb-search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    justify-content: center;
}

/* --------------------------------------------------------------------------
   2. TABELA DE CAMPOS (estrutura do plugin WP Hotel Booking)
   -------------------------------------------------------------------------- */
.radha-form-table,
.hb-form-table {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

/* --------------------------------------------------------------------------
   3. CAMPO INDIVIDUAL
   -------------------------------------------------------------------------- */
.radha-form-field,
.hb-form-field {
    flex: 1;
    min-width: 180px;
    max-width: 280px;
    margin: 0;
}

.radha-form-field label,
.hb-form-field label {
    display: block;
    font-size: calc(0.75rem * var(--text-scale-factor, 1));
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary, #666666);
    margin-bottom: 0.25rem;
    line-height: 1.3;
}

/* --------------------------------------------------------------------------
   4. INPUTS E SELECTS
   -------------------------------------------------------------------------- */
.radha-form-field-input,
.hb-form-field-input {
    width: 100%;
}

.radha-input-wrapper,
.hb_input_field {
    position: relative;
    width: 100%;
}

/* Remove ícone FontAwesome nativo do plugin */
.radha-input-wrapper::after,
.hb_input_field::after {
    display: none !important;
}

.radha-date-input,
.hb_input_date_check,
.radha-form-field-input input[type="text"],
.radha-form-field-input input[type="date"],
.radha-select-wrapper select,
.hb-form-field-input select {
    width: 100%;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--border-subtle, #eae6df);
    border-radius: 2px;
    background: #ffffff;
    font-family: inherit;
    font-size: 0.9375rem;
    color: var(--text-primary, #1a1a1a);
    line-height: 1.4;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.radha-date-input:focus,
.hb_input_date_check:focus,
.radha-form-field-input input:focus,
.radha-select-wrapper select:focus,
.hb-form-field-input select:focus {
    outline: none;
    border-color: var(--accent-color, #8c7a6b);
    box-shadow: 0 0 0 3px rgba(140, 122, 107, 0.15);
}

.radha-date-input::placeholder,
.hb_input_date_check::placeholder {
    color: var(--text-secondary, #999999);
    opacity: 1;
}

/* Wrapper do select customizado */
.radha-select-wrapper {
    position: relative;
    width: 100%;
}

.radha-select-wrapper::after {
    content: '';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--text-secondary, #666666);
    pointer-events: none;
    transition: border-top-color 0.2s ease;
}

.radha-select-wrapper:focus-within::after {
    border-top-color: var(--accent-color, #8c7a6b);
}

.radha-select-wrapper select {
    padding-right: 2.5rem; /* Espaço para a seta customizada */
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   5. BOTÃO DE SUBMIT (BUSCAR)
   -------------------------------------------------------------------------- */
.radha-submit,
.hb-submit {
    flex: 0 0 auto;
    margin: 0;
    display: flex;
    align-items: flex-end;
}

.radha-btn,
.wphb-button,
.hb-search-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background-color: var(--text-primary, #1a1a1a);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: calc(0.9375rem * var(--text-scale-factor, 1));
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.radha-btn:hover,
.wphb-button:hover,
.hb-search-submit:hover {
    background-color: var(--accent-color, #8c7a6b);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(140, 122, 107, 0.3);
}

.radha-btn:active,
.wphb-button:active,
.hb-search-submit:active {
    transform: translateY(0);
    box-shadow: none;
}

.radha-btn:focus-visible,
.wphb-button:focus-visible,
.hb-search-submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(140, 122, 107, 0.4);
}

/* Ícone no botão (opcional) */
.radha-btn svg,
.wphb-button svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   6. TÍTULO DO FORMULÁRIO (quando houver)
   -------------------------------------------------------------------------- */
.radha-search-title {
    width: 100%;
    font-size: calc(1.25rem * var(--text-scale-factor, 1));
    font-weight: 500;
    color: var(--text-primary, #1a1a1a);
    margin-bottom: 0.75rem;
    text-align: center;
    line-height: 1.3;
}

/* --------------------------------------------------------------------------
   7. ESTADOS DE VALIDAÇÃO E ERRO
   -------------------------------------------------------------------------- */
.radha-form-field-input input[aria-invalid="true"],
.radha-select-wrapper select[aria-invalid="true"],
.hb-form-field-input input[aria-invalid="true"],
.hb-form-field-input select[aria-invalid="true"] {
    border-color: #c0392b;
    background: #fdf8f8;
}

.radha-form-field-input input[aria-invalid="true"]:focus,
.radha-select-wrapper select[aria-invalid="true"]:focus {
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15);
}

.radha-form-error {
    display: block;
    font-size: 0.75rem;
    color: #c0392b;
    margin-top: 0.375rem;
    line-height: 1.4;
}

/* --------------------------------------------------------------------------
   8. LOADING STATE
   -------------------------------------------------------------------------- */
.radha-hb-search-form.loading .radha-btn,
.radha-hb-search-form.loading .wphb-button {
    position: relative;
    color: transparent !important;
    pointer-events: none;
}

.radha-hb-search-form.loading .radha-btn::after,
.radha-hb-search-form.loading .wphb-button::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   9. RESPONSIVIDADE DO FORMULÁRIO
   -------------------------------------------------------------------------- */

/* Mobile (≤ 480px) - campos empilhados, botão full width */
@media (max-width: 480px) {
    .radha-hb-search-form {
        flex-direction: column;
        align-items: stretch;
    }

    .radha-form-table,
    .hb-form-table {
        flex-direction: column;
        align-items: stretch;
    }

    .radha-form-field,
    .hb-form-field {
        min-width: 0;
        max-width: none;
        width: 100%;
    }

    .radha-submit,
    .hb-submit {
        width: 100%;
    }

    .radha-btn,
    .wphb-button,
    .hb-search-submit {
        width: 100%;
        padding: 1rem;
    }
}

/* Tablet (≥ 640px) - 2 colunas + botão */
@media (min-width: 640px) and (max-width: 1023px) {
    .radha-form-table,
    .hb-form-table {
        flex-wrap: wrap;
    }

    .radha-form-field,
    .hb-form-field {
        flex: 1 1 calc(50% - 0.5rem);
        min-width: 160px;
    }

    .radha-submit,
    .hb-submit {
        flex: 0 0 auto;
    }
}

/* Desktop (≥ 1024px) - 4 campos + botão em linha */
@media (min-width: 1024px) {
    .radha-form-field,
    .hb-form-field {
        flex: 1 1 auto;
        min-width: 180px;
        max-width: 260px;
    }

    .radha-submit,
    .hb-submit {
        flex: 0 0 auto;
    }
}

/* --------------------------------------------------------------------------
   10. PLACEHOLDER NOTICE (quando plugin não ativo)
   -------------------------------------------------------------------------- */
.booking-placeholder-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2rem;
    background: var(--bg-color, #faf8f5);
    border: 2px dashed var(--border-subtle, #eae6df);
    border-radius: 4px;
    color: var(--text-secondary, #666666);
    font-size: 0.9375rem;
    text-align: center;
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   11. ACESSIBILIDADE
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .radha-btn,
    .wphb-button,
    .hb-search-submit,
    .radha-date-input,
    .hb_input_date_check,
    .radha-form-field-input input,
    .radha-select-wrapper select,
    .hb-form-field-input select {
        transition: none !important;
    }

    .radha-hb-search-form.loading .radha-btn::after,
    .radha-hb-search-form.loading .wphb-button::after {
        animation: none !important;
    }
}

@media (prefers-contrast: high) {
    .radha-date-input,
    .hb_input_date_check,
    .radha-form-field-input input,
    .radha-select-wrapper select,
    .hb-form-field-input select {
        border: 2px solid #000;
    }

    .radha-btn,
    .wphb-button,
    .hb-search-submit {
        border: 2px solid #000;
    }
}

/* --------------------------------------------------------------------------
   12. COMPACT BOOKING FORM (Home Page)
   -------------------------------------------------------------------------- */
.radha-booking--compact .radha-hb-search-form {
    gap: 0.5rem;
}

.radha-booking--compact .radha-form-table,
.radha-booking--compact .hb-form-table {
    gap: 0.5rem;
}

.radha-booking--compact .radha-form-field,
.radha-booking--compact .hb-form-field {
    min-width: 140px;
    max-width: 200px;
}

.radha-booking--compact .radha-form-field label,
.radha-booking--compact .hb-form-field label {
    font-size: 0.6875rem;
    margin-bottom: 0.25rem;
}

.radha-booking--compact .radha-date-input,
.radha-booking--compact .hb_input_date_check,
.radha-booking--compact .radha-form-field-input input,
.radha-booking--compact .radha-select-wrapper select,
.radha-booking--compact .hb-form-field-input select {
    padding: 0.375rem 0.5rem;
    font-size: calc(0.8125rem * var(--text-scale-factor, 1));
}

.radha-booking--compact .radha-btn,
.radha-booking--compact .wphb-button,
.radha-booking--compact .hb-search-submit {
    padding: 0.5rem 1rem;
    font-size: calc(0.8125rem * var(--text-scale-factor, 1));
}

.radha-booking--compact .radha-booking-bar-wrapper {
    padding: 1rem;
    max-width: 100%;
}

.radha-booking--compact .radha-search-title {
    display: none;
}

/* Hide title on compact form */
.radha-booking--compact .radha-search-title {
    display: none;
}

/* --------------------------------------------------------------------------
   13. CENTERED BOOKING FORM (Hero Section)
   -------------------------------------------------------------------------- */
.radha-booking--centered {
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 1.5rem;
    z-index: 10;
    position: relative;
}

.radha-booking--centered .radha-booking-bar-wrapper {
    max-width: 100%;
    margin: 0;
    border-radius: 4px;
    background: transparent;
    box-shadow: none;
    border: none;
    padding: 0;
}

.radha-booking--centered .radha-hb-search-form,
.radha-booking--centered .hb-search-form {
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(var(--booking-blur));
    -webkit-backdrop-filter: blur(var(--booking-blur));
    border-radius: 4px;
    padding: 1rem 1.25rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.7);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.5rem;
    justify-content: center;
}

/* --------------------------------------------------------------------------
   12. STICKY BOOKING BAR (quando fixo no topo ao scroll)
   -------------------------------------------------------------------------- */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-100%); }
    to   { opacity: 1; transform: translateY(0); }
}

.radha-booking-bar-wrapper.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 290;
    border-radius: 0;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(var(--booking-blur));
    -webkit-backdrop-filter: blur(var(--booking-blur));
    border-bottom: 1px solid var(--border-subtle, #eae6df);
    padding: 0.75rem 2rem;
    max-width: 100%;
    width: 100%;
    transform: translateY(0);
    opacity: 1;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

/* Spacer element to prevent content jump when booking bar becomes sticky */
.radha-booking-bar-spacer {
    width: 100%;
}

/* Hide sticky booking bar on scroll down - slides up out of view */
.radha-booking-bar-wrapper.is-sticky.is-hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

/* Alinha o formário interno com o .site-container */
.radha-booking-bar-wrapper.is-sticky .radha-hb-search-form,
.radha-booking-bar-wrapper.is-sticky .radha-booking-form-container {
    max-width: var(--container-max, 1200px);
    margin: 0 auto;
    width: 100%;
}

/* Garante que todos os campos fiquem na mesma linha no desktop (≥ 1024px) */
@media (min-width: 1024px) {
    .radha-booking-bar-wrapper .radha-form-table,
    .radha-booking-bar-wrapper .hb-form-table {
        flex-wrap: nowrap;
        gap: 0.75rem;
    }

    .radha-booking-bar-wrapper .radha-form-field,
    .radha-booking-bar-wrapper .hb-form-field {
        flex: 1 1 auto;
        min-width: 140px;
        max-width: none;
    }

    .radha-booking-bar-wrapper .radha-submit,
    .radha-booking-bar-wrapper .hb-submit {
        flex: 0 0 auto;
    }

    .radha-booking-bar-wrapper .radha-btn,
    .radha-booking-bar-wrapper .wphb-button,
    .radha-booking-bar-wrapper .hb-search-submit {
        white-space: nowrap;
        padding: 0.875rem 1.5rem;
    }
}

/* Quando sticky no desktop, mantém uma linha */
@media (min-width: 1024px) {
    .radha-booking-bar-wrapper.is-sticky .radha-form-table,
    .radha-booking-bar-wrapper.is-sticky .hb-form-table {
        flex-wrap: nowrap;
    }
}

/* ==========================================================================
   14. HEADER BOOKING BAR (Sticky Header)
   ========================================================================== */

@keyframes headerBookingSlideDown {
    from { opacity: 0; transform: translateY(-100%); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes headerBookingPanelSlideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Container principal da barra de reservas no header
   SEM hidden/visibility: o botão de consulta e o painel são controlados
   diretamente pelas classes .radha-header-booking__toggle / __panel.
   position: static para que o painel absoluto seja posicionado em relação
   ao .site-header (position: fixed). O conteúdo é encostado à esquerda
   (flex-start) porque este bloco vive na coluna 1 da grelha do header. */
.radha-header-booking {
    position: static;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    flex: 0 0 auto;
    min-height: 0;
    min-width: 0;
    z-index: 210;
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* Estados geridos pelo JS (sticky header) — mantêm o botão utilizável */
.radha-header-booking.is-visible,
.radha-header-booking.is-hidden {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
}

/* Inline form (desktop/tablet) */
.radha-header-booking__inline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    max-width: 100%;
}

/* Static form variant inside header */
.radha-header-booking .radha-booking-form--header {
    background: transparent;
    box-shadow: none;
    border: none;
    padding: 0;
    max-width: 100%;
    width: 100%;
}

.radha-header-booking .radha-search-form-static {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

/* Form table inside header booking */
.radha-header-booking .radha-form-table,
.radha-header-booking .hb-form-table {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    align-items: center;
    margin: 0;
    padding: 0;
    width: 100%;
}

.radha-header-booking .radha-form-field,
.radha-header-booking .hb-form-field {
    flex: 1 1 auto;
    min-width: 130px;
    max-width: 190px;
    margin: 0;
}

.radha-header-booking .radha-form-field label,
.radha-header-booking .hb-form-field label {
    font-size: 0.625rem;
    margin-bottom: 0.1875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #666);
}

.radha-header-booking .radha-date-input,
.radha-header-booking .hb_input_date_check,
.radha-header-booking .radha-form-field-input input,
.radha-header-booking .radha-select-wrapper select,
.radha-header-booking .hb-form-field-input select {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    height: 40px;
    border-radius: 6px;
    border: 1px solid var(--border-subtle, #eae6df);
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.radha-header-booking .radha-date-input:focus,
.radha-header-booking .hb_input_date_check:focus,
.radha-header-booking .radha-form-field-input input:focus,
.radha-header-booking .radha-select-wrapper select:focus,
.radha-header-booking .hb-form-field-input select:focus {
    outline: none;
    border-color: var(--accent-color, #8c7a6b);
    box-shadow: 0 0 0 3px rgba(140, 122, 107, 0.15);
}

/* Readonly inputs in static variant */
.radha-header-booking .radha-search-form-static input[readonly],
.radha-header-booking .radha-search-form-static select[readonly] {
    background: var(--bg-color, #faf8f5);
    cursor: default;
    color: var(--text-secondary, #666);
}

.radha-header-booking .radha-search-form-static .radha-select-wrapper::after {
    border-top-color: var(--text-secondary, #666);
}

/* Select wrapper for header */
.radha-header-booking .radha-select-wrapper {
    position: relative;
}

.radha-header-booking .radha-select-wrapper::after {
    content: '';
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--text-secondary, #666);
    pointer-events: none;
    transition: border-top-color 0.2s ease;
}

.radha-header-booking .radha-select-wrapper:focus-within::after {
    border-top-color: var(--accent-color, #8c7a6b);
}

.radha-header-booking .radha-select-wrapper select {
    padding-right: 2.25rem;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* Submit button in header */
.radha-header-booking .radha-submit--header {
    flex: 0 0 auto;
    margin: 0;
    display: flex;
    align-items: center;
}

.radha-header-booking .radha-btn--static {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    background-color: var(--text-primary, #1a1a1a);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    height: 40px;
    box-sizing: border-box;
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.radha-header-booking .radha-btn--static:hover {
    background-color: var(--accent-color, #8c7a6b);
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(140, 122, 107, 0.35);
}

.radha-header-booking .radha-btn--static:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(140, 122, 107, 0.25);
}

.radha-header-booking .radha-btn--static:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(140, 122, 107, 0.4);
}

.radha-header-booking .radha-btn--static svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    flex-shrink: 0;
}

/* Botão de consulta — visível em todas as larguras.
   Partilha --header-control-height com o .menu-toggle para que ambos tenham
   exactamente a mesma altura e fiquem alinhados na mesma linha. */
.radha-header-booking__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0 1rem;
    min-width: var(--header-control-height, 40px);
    background: var(--text-primary, #1a1a1a);
    color: #ffffff;
    border: 1px solid transparent;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    height: var(--header-control-height, 40px);
    box-sizing: border-box;
    transition: background-color 0.2s ease, border-color 0.2s ease;
    right:0px;
}

.radha-header-booking__toggle:hover {
    background-color: var(--accent-color, #8c7a6b);
}

.radha-header-booking__toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(140, 122, 107, 0.4);
}

.radha-header-booking__toggle svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    flex-shrink: 0;
}

/* Painel drop-down do formulário de consulta.
   Fica dentro do .site-header (position: fixed, z-index: 200), portanto
   o z-index local é irrelevante para a sobreposição com o .menu-toggle
   (z-index: 500, fora do header). */
.radha-header-booking__panel {
    position: absolute;
    top: 100%;
    /* Ancorado pela ESQUERDA: o botão de consulta vive na coluna 1 da
       grelha, encostado à margem esquerda do contentor, pelo que o painel
       abre para baixo dele alinhado à mesma margem.
       O .radha-header-booking é position:static, por isso o posicionamento
       é calculado face ao .site-header (position:fixed).
       NAO se usa translateX aqui porque o transform abaixo é animado. */
    left: var(--header-gutter, 1.25rem);
    right: auto;
    width: 100%;
    max-width: 580px;
    margin: 0;
    border-radius: 0 0 8px 8px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(var(--booking-blur, 20px));
    -webkit-backdrop-filter: blur(var(--booking-blur, 20px));
    border-bottom: 1px solid var(--border-subtle, #eae6df);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    padding: 0.75rem 1.25rem 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
}

.radha-header-booking__panel.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.radha-header-booking__panel .radha-booking-form,
.radha-header-booking__panel .radha-booking-form--header {
    max-width: 100%;
    margin: 0;
    background: transparent;
    box-shadow: none;
    border: none;
    padding: 0;
}

.radha-header-booking__panel .radha-search-title {
    display: none;
}

/* Formulário (funcional) e variante estática dentro do painel */
.radha-header-booking__panel .radha-hb-search-form,
.radha-header-booking__panel .hb-search-form,
.radha-header-booking__panel .radha-search-form-static {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    margin: 0;
    background: transparent;
    box-shadow: none;
    border: none;
    padding: 0;
}

.radha-header-booking__panel .radha-form-table,
.radha-header-booking__panel .hb-form-table {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
}

.radha-header-booking__panel .radha-submit,
.radha-header-booking__panel .hb-submit {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    margin: 0;
}

.radha-header-booking__panel .radha-btn,
.radha-header-booking__panel .wphb-button,
.radha-header-booking__panel .radha-btn--static,
.radha-header-booking__panel .hb-search-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 44px;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--radius-md);
    background-color: var(--text-primary, #1a1a1a);
    color: #ffffff;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.radha-header-booking__panel .radha-btn:hover,
.radha-header-booking__panel .wphb-button:hover,
.radha-header-booking__panel .radha-btn--static:hover {
    background-color: var(--accent-color, #8c7a6b);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(140, 122, 107, 0.35);
}

.radha-header-booking__panel .radha-btn svg,
.radha-header-booking__panel .wphb-button svg,
.radha-header-booking__panel .radha-btn--static svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    flex-shrink: 0;
}

.radha-header-booking__panel .radha-form-field,
.radha-header-booking__panel .hb-form-field {
    display: block;
    flex: 1 1 150px;
    min-width: 150px;
    max-width: 220px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.radha-header-booking__panel .radha-form-field label,
.radha-header-booking__panel .hb-form-field label {
    font-size: 0.6875rem;
    margin-bottom: 0.25rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #666);
}

.radha-header-booking__panel .radha-date-input,
.radha-header-booking__panel .hb_input_date_check,
.radha-header-booking__panel .radha-form-field-input input,
.radha-header-booking__panel .radha-select-wrapper select,
.radha-header-booking__panel .hb-form-field-input select,
.radha-header-booking__panel form[name="hb-search-form"] input[type="text"],
.radha-header-booking__panel form[name="hb-search-form"] input[type="search"],
.radha-header-booking__panel form[name="hb-search-form"] select {
    display: block;
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    height: 44px;
    border-radius: 8px;
    border: 1px solid var(--border-subtle, #eae6df);
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: var(--text-primary, #1a1a1a);
}

.radha-header-booking__panel .radha-date-input:focus,
.radha-header-booking__panel .hb_input_date_check:focus,
.radha-header-booking__panel .radha-form-field-input input:focus,
.radha-header-booking__panel .radha-select-wrapper select:focus,
.radha-header-booking__panel .hb-form-field-input select:focus,
.radha-header-booking__panel form[name="hb-search-form"] input[type="text"]:focus,
.radha-header-booking__panel form[name="hb-search-form"] input[type="search"]:focus,
.radha-header-booking__panel form[name="hb-search-form"] select:focus {
    outline: none;
    border-color: var(--accent-color, #8c7a6b);
    box-shadow: 0 0 0 3px rgba(140, 122, 107, 0.15);
}

/* Garante que todos os inputs dentro de form[name="hb-search-form"] tenham o mesmo aspecto visual dos datepicker */
form[name="hb-search-form"] input[type="text"],
form[name="hb-search-form"] input[type="search"],
form[name="hb-search-form"] select {
    display: block;
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    height: 44px;
    border-radius: 8px;
    border: 1px solid var(--border-subtle, #eae6df);
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: var(--text-primary, #1a1a1a);
}

form[name="hb-search-form"] input[type="text"]:focus,
form[name="hb-search-form"] input[type="search"]:focus,
form[name="hb-search-form"] select:focus {
    outline: none;
    border-color: var(--accent-color, #8c7a6b);
    box-shadow: 0 0 0 3px rgba(140, 122, 107, 0.15);
}

.radha-header-booking__panel .radha-btn--static {
    height: 44px;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
    border-radius: var(--radius-md);
}

/* Responsive breakpoints */

/* O toggle + painel funcionam em todas as larguras */
@media (min-width: 768px) {
    .radha-header-booking__inline {
        display: flex;
    }

    .radha-header-booking__toggle {
        display: inline-flex;
    }
}

@media (max-width: 767px) {
    .radha-header-booking__inline {
        display: none;
    }

    .radha-header-booking__toggle {
        display: inline-flex;
    }
}

/* Very small screens - compact toggle */
@media (max-width: 480px) {
    .radha-header-booking__toggle-text {
        display: none;
    }

    .radha-header-booking__toggle {
        padding: 0.5rem 0.75rem;
    }
    
    .radha-header-booking__panel {
        padding: 0.875rem 1rem;
    }
    
    .radha-header-booking__panel .radha-form-field,
    .radha-header-booking__panel .hb-form-field {
        min-width: 130px;
        max-width: 200px;
    }
}

/* Header inner layout adjustments for booking bar.
   O position/z-index do .site-header está em assets/css/header.css.
   As medidas vêm das variáveis definidas em .site-header, para que o logo,
   o botão de consulta e o menu-toggle partilhem a mesma escala.

   GRELHA DE 3 COLUNAS (1fr | auto | 1fr):
     coluna 1 -> menu-toggle (à esquerda)
     coluna 2 -> logo (sempre centrado, independentemente da largura dos
                  controlos laterais)
     coluna 3 -> botão de consulta / disponibilidade (à direita)

   Com 'auto' no centro e '1fr' nas laterais, o centro fica verdadeiro
   centro geométrico do contentor — e não apenas o espaço restante. */
.site-header-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 0.75rem;
    width: 100%;
    max-width: var(--container-max, 1200px);
    margin: 0 auto;
    padding: 0 var(--header-gutter, 1.25rem);
    box-sizing: border-box;
    min-height: 56px;
}

@media (min-width: 1024px) {
    .site-header-inner {
        padding: 0 var(--header-gutter, 3rem);
    }
}

/* Coluna 1: acções / botão de consulta encostado à margem esquerda. */
.site-header-inner .site-header-actions {
    grid-column: 1;
    justify-self: start;
    min-width: 0;
}

/* Coluna 2: branding centrado, com encolhimento seguro. */
.site-header-inner .site-branding {
    grid-column: 2;
    justify-self: center;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

/* Coluna 3: menu-toggle à direita. */
.site-header-inner .site-header-menu {
    grid-column: 3;
    justify-self: end;
}

.radha-header-booking {
    max-width: 580px;
}

/* O header mantém a MESMA altura em todos os estados de scroll.
   Reduzir min-height no estado sticky provoca um salto do conteúdo e
   reposiciona o painel do formulário a meio do scroll. */
.site-header--sticky .site-header-inner {
    min-height: 56px;
}

/* Sobre o hero o fundo é transparente; o painel precisa de opacidade total
   paraContrastar com a imagem escura por trás do header. */
.site-header--over-hero:not(.site-header--sticky) .radha-header-booking__panel {
    background: rgba(255, 255, 255, 0.99);
}

/* ==========================================================================
   15. SEARCH RESULTS — Room Price Display
   ========================================================================== */

.radha-search-results-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .radha-search-results-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .radha-search-results-list {
        grid-template-columns: repeat(3, 1fr);
    }
}

.radha-search-room-item {
    background: #ffffff;
    border: 1px solid var(--border-subtle, #eae6df);
    border-radius: 4px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.radha-search-room-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06);
    border-color: var(--accent-color, #8c7a6b);
}

.radha-search-room-content {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.radha-search-room-form {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Room thumbnail in search results */
.radha-search-room-item .hb-room-thumbnail,
.radha-search-room-item .radha-room-thumbnail {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin-bottom: 1rem;
    border-radius: 4px;
    background: var(--bg-color, #faf8f5);
}

.radha-search-room-item .hb-room-thumbnail img,
.radha-search-room-item .radha-room-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.radha-search-room-item:hover .hb-room-thumbnail img,
.radha-search-room-item:hover .radha-room-thumbnail img {
    transform: scale(1.04);
}

/* Room name */
.radha-search-room-item .hb-room-name,
.radha-search-room-item .radha-room-name {
    font-size: calc(1.0625rem * var(--text-scale-factor, 1));
    font-weight: 500;
    color: var(--text-primary, #1a1a1a);
    margin: 0 0 0.75rem;
    line-height: 1.3;
}

/* Room meta (price, capacity, etc.) */
.radha-search-room-item .hb-room-meta,
.radha-search-room-item .radha-room-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
    margin-bottom: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border-subtle, #eae6df);
}

.radha-room-meta-item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 80px;
}

.radha-room-meta-label {
    font-size: calc(0.6875rem * var(--text-scale-factor, 1));
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary, #666666);
}

.radha-room-meta-value {
    font-size: calc(0.8125rem * var(--text-scale-factor, 1));
    font-weight: 500;
    color: var(--text-primary, #1a1a1a);
}

/* Select de quantidade de quartos (obrigatorio para o fluxo de reserva) */
.radha-room-quantity-select {
    width: 100%;
    min-width: 92px;
    padding: 0.3125rem 1.75rem 0.3125rem 0.625rem;
    font-size: calc(0.8125rem * var(--text-scale-factor, 1));
    font-weight: 500;
    color: var(--text-primary, #1a1a1a);
    background-color: #ffffff;
    border: 1px solid var(--border-subtle, #eae6df);
    border-radius: 6px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23666666' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.625rem center;
}

.radha-room-quantity-select:focus {
    border-color: var(--accent-color, #8c7a6b);
    outline: none;
    box-shadow: 0 0 0 2px rgba(140, 122, 107, 0.18);
}

.radha-room-meta-extra {
    font-size: calc(0.6875rem * var(--text-scale-factor, 1));
    color: var(--text-secondary, #666666);
}

/* Botao de reserva renderizado como <a> (archive de quartos, sem form) */
.radha-add-to-cart__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    white-space: nowrap;
}

/* Price prominence
   O !important é herdado do plugin e mantido para não perder o peso
   tipográfico; a escala do Customizer entra por dentro, em calc(). */
.radha-room-price,
.hb-room-price {
    font-size: calc(1.0625rem * var(--text-scale-factor, 1)) !important;
    font-weight: 600 !important;
    color: var(--accent-color, #8c7a6b) !important;
}

.radha-room-price .hb-price-per-night,
.hb-room-price .hb-price-per-night,
.radha-room-price .hb-room-price-unit,
.hb-room-price .hb-room-price-unit,
.radha-room-price .tax-text,
.hb-room-price .tax-text {
    font-size: calc(0.6875rem * var(--text-scale-factor, 1));
    font-weight: 400;
    color: var(--text-secondary, #666666);
    margin-left: 0.25rem;
}

.radha-room-price,
.hb-room-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem;
}

/* Add to cart button in search results */
.radha-search-room-item .hb-room-add-to-cart,
.radha-search-room-item .radha-room-add-to-cart {
    margin-top: auto;
    width: 100%;
}

.radha-search-room-item .hb-room-add-to-cart button,
.radha-search-room-item .radha-room-add-to-cart button {
    width: 100%;
    padding: 0.625rem 1.25rem;
    background-color: var(--text-primary, #1a1a1a);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: calc(0.8125rem * var(--text-scale-factor, 1));
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.radha-search-room-item .hb-room-add-to-cart button:hover,
.radha-search-room-item .radha-room-add-to-cart button:hover {
    background-color: var(--accent-color, #8c7a6b);
    transform: translateY(-1px);
}

/* No results state */
.radha-search-no-results {
    text-align: center;
    padding: 2rem 1.25rem;
    background: var(--bg-color, #faf8f5);
    border: 1px solid var(--border-subtle, #eae6df);
    border-radius: 4px;
    color: var(--text-secondary, #666666);
}

.radha-search-no-results p {
    margin: 0;
    font-size: calc(0.8125rem * var(--text-scale-factor, 1));
}

/* ==========================================================================
   16. MOBILE — DATEPICKER E BARRA DE RESERVAS
   --------------------------------------------------------------------------
   Correções de usabilidade em ecrãs estreitos.

   16.1 DATEPICKER — POSICIONAMENTO
   O plugin escreve `position: relative` em `.ui-datepicker.ui-widget`, o que
   anula o posicionamento absoluto que o jQuery UI calcula ao abrir: o picker é
   anexado ao <body> e recebe `top`/`left` em píxeis, calculados para
   `position: absolute`. Com `relative`, esses valores tornam-se deslocamentos
   a partir da posição normal do elemento no fluxo, e o calendário aparece
   deslocado ou dentro da barra, por baixo da conversa.

   Repomos `absolute` no desktop (onde o cálculo do jQuery UI é válido) e, no
   mobile, passamos a `fixed` centralizado com `!important`: assim o
   calendário fica sempre visível e inteiro, independentemente de onde esteja o
   input — o `left`/`top` inline do plugin são neutralizados, porque o
   `transform` faz o centramento.

   O prefixo `body` dá uma specificity de (0,2,1) contra (0,2,0) do plugin,
   garantindo que a nossa regra ganha sem depender da ordem de carregamento.
   ========================================================================== */

body .ui-datepicker.ui-widget {
    position: absolute;
    z-index: 100000;
    box-sizing: border-box;

    margin: 0;
    padding: 0.625rem;
    max-width: calc(100vw - 1rem);

    background: #fff;
    border: 1px solid var(--border-subtle, #eae6df);
    border-radius: 10px;
    box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.25);

    font-family: inherit;
    color: var(--text-primary, #1a1a1a);
}

/* O plugin deixa 24px de margem morta por baixo da grelha. */
body .ui-datepicker.ui-widget .ui-datepicker-calendar {
    margin-bottom: 0;
}

body .ui-datepicker.ui-widget .ui-datepicker-header .ui-datepicker-title {
    font-size: calc(0.9375rem * var(--text-scale-factor, 1));
    color: var(--text-primary, #1a1a1a);
}

/*
 * No mobile o calendário é centrado e presentedo como painel sobre o ecrã.
 * `!important` é necessário para vencer o `left`/`top` inline que o jQuery UI
 * escreve a cada abertura.
 */
@media (max-width: 767px) {
    body .ui-datepicker.ui-widget {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        transform: translate(-50%, -50%);

        max-width: calc(100vw - 1.5rem);
        padding: 0.75rem;

        border-radius: 14px;
    }

    /* Alvos de toque: o plugin usa células de 27px com texto de 12px. */
    body .ui-datepicker.ui-widget .ui-datepicker-calendar td {
        height: 40px;
    }

    body .ui-datepicker.ui-widget .ui-datepicker-calendar .ui-state-default {
        display: flex;
        align-items: center;
        justify-content: center;

        font-size: calc(0.9375rem * var(--text-scale-factor, 1));
        border-radius: 8px;
    }

    body .ui-datepicker.ui-widget .ui-datepicker-calendar th {
        font-size: calc(0.75rem * var(--text-scale-factor, 1));
        line-height: 32px;
    }

    /* Setas de navegação: 20x30 do plugin é pequeno para o dedo. */
    body .ui-datepicker.ui-widget .ui-datepicker-header .ui-datepicker-prev,
    body .ui-datepicker.ui-widget .ui-datepicker-header .ui-datepicker-next {
        width: 44px;
        height: 44px;
        top: 0;
        opacity: 0.7;
    }
}

/* ==========================================================================
   16.2 BARRA DE RESERVAS — CAMPOS E BOTÕES NO MOBILE
   --------------------------------------------------------------------------
   `white-space: nowrap` vinha da folha de base. Combinado com `width: 100%`
   e um rótulo longo ("Verificar disponibilidade"), o texto não quebrava; e,
   por ser item flex, o `min-width: auto` por omissão impedia o encolhimento,
   fazendo a caixa ultrapassar o contentor.

   `min-width: 0` + `white-space: normal` + `overflow-wrap` resolvem os dois.
   A altura passa a `auto` com `min-height`, para o alvo de toque sem
   recortar o conteúdo.
   ========================================================================== */

@media (max-width: 767px) {
    .radha-booking-bar-wrapper .radha-submit,
    .radha-booking-bar-wrapper .hb-submit {
        width: 100%;
        min-width: 0;
    }

    .radha-booking-bar-wrapper .radha-btn,
    .radha-booking-bar-wrapper .wphb-button,
    .radha-booking-bar-wrapper .hb-search-submit {
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 48px;

        white-space: normal;
        overflow-wrap: break-word;
        text-align: center;
        line-height: 1.25;
    }

    .radha-booking-bar-wrapper .radha-date-input,
    .radha-booking-bar-wrapper .hb_input_date_check,
    .radha-booking-bar-wrapper .radha-form-field-input input,
    .radha-booking-bar-wrapper .radha-select-wrapper select,
    .radha-booking-bar-wrapper .hb-form-field-input select {
        min-width: 0;
        max-width: 100%;
    }
}