/* ==========================================================================
   RADHA CORE — WP HOTEL BOOKING
   ==========================================================================
   Estilos dos elementos gerados pelo plugin WP Hotel Booking que, por
   defeito, usam as cores próprias do plugin e ficam desalinados com a
   identidade visual definida no Customizer (Aparência > Personalizar >
   Cores — Identidade Visual).

   Todas as cores vêm das variáveis já injetadas por inc/dynamic-css.php:
     --bg-color        Cor de Fundo
     --text-primary    Cor Primária (Texto)
     --text-secondary  Cor Secundária (Texto)
     --accent-color    Cor de Destaque
     --border-subtle   Cor de Bordas

   Como o plugin regista as suas folhas com maior especificidade em vários
   pontos, declaramos primeiro os tokens derivados em :root e só depois
   aplicamos as regras — assim o Customizer tem um único ponto de controlo.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS DERIVADOS
   Estes tokens derivam das cores escolhidas no Customizer e dão ao plugin
   tons coerentes com o resto do tema (realces de destaque, estados hover,
   contraste do texto sobre fundos coloridos).

   Os VALORES abaixo são apenas omissões (fallback), para o CSS continuar
   legível e utilizável se for carregado isoladamente. Quem os alimenta de
   verdade é inc/wphb-dynamic-css.php, que calcula as misturas a partir das
   cores reais do Customizer em cada pedido — por isso o utilizador nunca
   precisa de configurar cada tom individualmente.
   -------------------------------------------------------------------------- */
:root {
    /* Realce tênue da cor de destaque: fundo de acentos e realces. */
    --wphb-accent-soft: rgba(140, 122, 107, 0.10);
    --wphb-accent-softer: rgba(140, 122, 107, 0.06);

    /* Superfícies derivadas do fundo. */
    --wphb-surface: var(--bg-color);
    --wphb-surface-hover: rgba(26, 26, 26, 0.03);

    /* Texto legível sobre a cor de destaque. */
    --wphb-accent-contrast: #ffffff;

    /*
     * Multiplicador da "Escala de Texto" do Customizer. O plugin fixa os
     * tamanhos em píxeis, que não acompanham o font-size da raiz, por isso
     * as regras abaixo multiplicam explicitamente por este valor.
     * inc/dynamic-css.php publica o valor real em cada pedido.
     */
    --text-scale-factor: 1;

    /*
     * Escala tipográfica do plugin. Cada passo é um rem (e não um px) para
     * que a hierarquia continue legível quando o utilizador aumenta ou
     * reduz a escala global.
     */
    --wphb-text-xs:   calc(0.6875rem * var(--text-scale-factor));
    --wphb-text-sm:   calc(0.8125rem * var(--text-scale-factor));
    --wphb-text-base: calc(0.9375rem * var(--text-scale-factor));
    --wphb-text-md:   calc(1.0625rem * var(--text-scale-factor));
    --wphb-text-lg:   calc(1.25rem * var(--text-scale-factor));
    --wphb-text-xl:   calc(1.5rem * var(--text-scale-factor));
}

/* O PHP injeta aqui a classe quando a cor de destaque é clara e o valor
   correto de --wphb-accent-contrast. Ver inc/wphb-dynamic-css.php. */
html.radha-accent-is-light {
    --wphb-accent-contrast: #1a1a1a;
}

/* --------------------------------------------------------------------------
   2. FORMULÁRIOS DE BUSCA E RESERVA
   Cobre a busca do hero, a página de resultados e o formulário individual.
   -------------------------------------------------------------------------- */
.hotel-booking-search input[type="text"],
.hotel-booking-search input[type="email"],
.hotel-booking-search input[type="tel"],
.hotel-booking-search input[type="number"],
.hotel-booking-search input[type="date"],
.hotel-booking-search select,
.hotel-booking-search textarea,
.hb-search-room-results input[type="text"],
.hb-search-room-results input[type="email"],
.hb-search-room-results input[type="tel"],
.hb-search-room-results input[type="number"],
.hb-search-room-results input[type="date"],
.hb-search-room-results select,
.hb-search-room-results textarea,
.hb_input_date_check {
    background-color: var(--wphb-surface);
    color: var(--text-primary);
    border-color: var(--border-subtle);
    border-radius: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.hotel-booking-search input:focus,
.hotel-booking-search select:focus,
.hotel-booking-search textarea:focus,
.hb-search-room-results input:focus,
.hb-search-room-results select:focus,
.hb-search-room-results textarea:focus,
.hb_input_date_check:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px var(--wphb-accent-soft);
    outline: none;
}

/* Rótulos dos campos */
.hotel-booking-search label,
.hb-search-room-results label,
.hb-form-field label,
.hb-booking-room-form-field label,
.hb-form-field-input label {
    color: var(--text-secondary);
    font-weight: 500;
}

/* Texto auxiliar/descrição dos campos */
.hotel-booking-search .description,
.hb-search-room-results .description,
.hb-booking-room-form-header .description,
.hotel-booking-search p,
.hb-search-room-results p {
    color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   3. BOTÕES
   O botão de destaque herda a cor de destaque do Customizer em todos os
   contextos onde o plugin o gera.
   -------------------------------------------------------------------------- */
.hotel-booking-search .hb-submit button,
.hotel-booking-search button.wphb-button,
.hotel-booking-search button.hb_button,
.hb-search-room-results button.wphb-button,
.hb-search-room-results button.hb_button,
.hotel-booking-single-room-action button.hb_button,
.hb_search_add_to_cart,
button.hb_add_to_cart,
.hb_add_to_cart.wphb-button {
    background-color: var(--accent-color);
    color: var(--wphb-accent-contrast);
    border-color: var(--accent-color);
    border-radius: 8px;
    font-weight: 600;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}

.hotel-booking-search .hb-submit button:hover,
.hotel-booking-search button.wphb-button:hover,
.hotel-booking-search button.hb_button:hover,
.hb-search-room-results button.wphb-button:hover,
.hb-search-room-results button.hb_button:hover,
.hotel-booking-single-room-action button.hb_button:hover,
.hb_search_add_to_cart:hover,
button.hb_add_to_cart:hover,
.hb_add_to_cart.wphb-button:hover {
    background-color: var(--accent-color);
    filter: brightness(0.92);
    border-color: var(--accent-color);
}

.hotel-booking-search .hb-submit button:active,
.hotel-booking-search button.wphb-button:active,
.hotel-booking-search button.hb_button:active,
.hb-search-room-results button.wphb-button:active,
.hb-search-room-results button.hb_button:active,
.hotel-booking-single-room-action button.hb_button:active,
button.hb_add_to_cart:active {
    transform: translateY(1px);
    filter: brightness(0.88);
}

/* Foco visível para navegação por teclado — não remover o outline. */
.hotel-booking-search button:focus-visible,
.hb-search-room-results button:focus-visible,
.hb_add_to_cart:focus-visible,
.hb_search_add_to_cart:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Botões secundários do plugin (continuar, voltar, ver detalhes). Mantêm o
   contorno na cor de destaque em vez do cinzento por omissão. */
.hb_button_secondary,
.hb_previous_step,
.hb_view_price button,
.hb_view_cart {
    color: var(--text-primary);
    border-color: var(--border-subtle);
    background-color: transparent;
    border-radius: 8px;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.hb_button_secondary:hover,
.hb_previous_step:hover,
.hb_view_price button:hover {
    border-color: var(--accent-color);
    background-color: var(--wphb-accent-softer);
    color: var(--accent-color);
}

/* --------------------------------------------------------------------------
   4. CARTÓES E RESULTADOS DE QUARTOS
   -------------------------------------------------------------------------- */
.hb-room-item,
.hb-room-item-content,
.hb_room_gallery,
.wphb-single-room-content,
.hb_single_room_details,
.hb_single_room_tabs_content,
.hb_search_room_item,
.wp-hotel-booking-search-rooms,
.hb-room-content,
.room-single-top {
    background-color: var(--wphb-surface);
    border-color: var(--border-subtle);
}

/* Cartões de resultado ganham contorno na cor de destaque ao passar o rato. */
.hb-room-item:hover,
.hb_search_room_item:hover {
    border-color: var(--accent-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Miniaturas dos resultados */
.hb-room-item .hb-room-gallery img,
.hb_search_room_item img,
.hb-room-thumbnail img {
    border-radius: 8px;
    background-color: var(--wphb-accent-softer);
}

/* Preço — o número recebe a cor de destaque para destacar a informação
   comercial sem depender do texto de "por noite". */
.hb_search_price,
.hb-total-price-value,
.hb-price,
.room-price .amount,
.hb_search_item_price,
.hb_single_room_price {
    color: var(--accent-color);
    font-weight: 600;
}

/* Etiqueta "Total" e legends de preço secundário em texto secundário. */
.hb-total-price-text,
.hb_search_item_total_description,
.hb_search_item_day,
.hb-search-capacity,
.hb-search-max-child,
.hb_search_quantity {
    color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   5. TABS DA PÁGINA INDIVIDUAL DO QUARTO
   -------------------------------------------------------------------------- */
.hb_single_room_tabs {
    border-bottom-color: var(--border-subtle);
}

.hb_single_room_tabs li a {
    color: var(--text-secondary);
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.hb_single_room_tabs li a:hover {
    color: var(--text-primary);
}

.hb_single_room_tabs li a.active,
.hb_single_room_tabs li.active a,
.hb_single_room_tabs li a.active {
    color: var(--accent-color);
    border-bottom-color: var(--accent-color);
}

.hb_single_room_tab_details {
    color: var(--text-primary);
}

.hb_single_room_tab_details h1,
.hb_single_room_tab_details h2,
.hb_single_room_tab_details h3,
.hb_single_room_tab_details h4 {
    color: var(--text-primary);
}

.hb_single_room_tab_details p,
.hb_single_room_tab_details li {
    color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   6. TÍTULOS E TEXTOS GLOBAIS DO PLUGIN
   -------------------------------------------------------------------------- */
.hb_title,
.hb_single_room_title,
.hb-room-title,
.hb-room-name,
.hb_search_room_title {
    color: var(--text-primary);
}

/*
 * Título da página individual do quarto (.hb_single_room_title).
 *
 * O tamanho e o padding deste h1 são definidos na secção 16.5, que resolve
 * o conflito com a regra genérica de h1 da secção 17.2. Aqui fica apenas a
 * cor, para que a lista de títulos continue num único sítio.
 */

/* O contentor do título não recebe padding próprio: o respiro é dado ao
   h1 (16.5) e pela moldura do cartão, e um segundo anel de preenchimento
   empurraria a galeria para baixo sem qualquer benefício. */
.radha-room-top {
    margin: 0;
    padding: 0;
}

.hb-room-title a,
.hb_search_room_title a,
.hb_single_room_title a {
    color: inherit;
    text-decoration: none;
}

.hb-room-title a:hover,
.hb_search_room_title a:hover {
    color: var(--accent-color);
}

/* --------------------------------------------------------------------------
   7. TABELA DE RESERVA E CARRINHO
   -------------------------------------------------------------------------- */
.hb_booking_table,
.hb_booking_wrapper,
.hb_mini_cart_top,
.hb_checkout,
.hb-total-price {
    border-color: var(--border-subtle);
    background-color: var(--wphb-surface);
}

.hb_booking_table th,
.hb_booking_table td {
    border-bottom-color: var(--border-subtle);
    color: var(--text-primary);
}

.hb_booking_table th {
    color: var(--text-secondary);
    font-weight: 600;
}

/* Totais destacados em fundo tênue da cor de destaque. */
.hb_sub_total_value,
.hb_grand_total_value,
.hb_advance_payment_value {
    color: var(--text-primary);
    font-weight: 700;
    background-color: var(--wphb-accent-softer);
}

.hb_total_price .hb-total-price-value {
    color: var(--accent-color);
}

/* Remover quarto do carrinho */
.hb_remove_cart_item,
.hb_coupon_remove,
.hb_mini_cart_remove {
    color: var(--text-secondary);
    transition: color 0.2s ease;
}

.hb_remove_cart_item:hover,
.hb_coupon_remove:hover,
.hb_mini_cart_remove:hover {
    color: var(--accent-color);
}

/* --------------------------------------------------------------------------
   8. FACILIDADES E LISTAS DE INFORMAÇÃO
   -------------------------------------------------------------------------- */
.hb-room-facilities,
.hb_single_room_facilities ul li,
.hb_room_faq,
.hb_room_rule {
    color: var(--text-secondary);
}

.hb-room-facilities li::marker,
.hb_single_room_facilities li::marker {
    color: var(--accent-color);
}

/* --------------------------------------------------------------------------
   9. ESTADOS E MISCELÂNEA
   -------------------------------------------------------------------------- */
.wphb-select-2 .select2-selection {
    border-color: var(--border-subtle);
    background-color: var(--wphb-surface);
}

.wphb-select-2 .select2-selection__rendered {
    color: var(--text-primary);
}

.wphb-room-dates-checked,
.wphb-room-calendar-pricing {
    color: var(--text-primary);
}

/* Spinner de carregamento do formulário individual */
.wphb-single-room-loading-spinner {
    border-color: var(--wphb-accent-soft);
    border-top-color: var(--accent-color);
}

/* "Sem resultados" e mensagens de erro do plugin */
.hb_search_room_item .hb_no_result,
.hotel-booking-search .hb_no_result {
    color: var(--text-secondary);
}

/* ==========================================================================
   10. GALERIA DO QUARTO — PÁGINA INDIVIDUAL
   ==========================================================================
   Markup em wp-hotel-booking/single-room/gallery.php. Carrossel próprio
   (sem dependência do FlexSlider do plugin, que não é carregado).
   ========================================================================== */
.radha-room-gallery {
    margin: 0 0 1.5rem;
}

/* Palco: moldura com fundo e contorno herdados do Customizer. */
.radha-gallery-stage {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background-color: var(--wphb-accent-softer);
    border: 1px solid var(--border-subtle);
    aspect-ratio: 16 / 10;
}

/* Viewport: contém todos os slides sobrepostos; só o activo é visível. */
.radha-gallery-viewport {
    position: relative;
    width: 100%;
    height: 100%;
}

.radha-gallery-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.radha-gallery-slide.is-active {
    opacity: 1;
    visibility: visible;
}

.radha-gallery-link {
    display: block;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}

.radha-gallery-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Setas de navegação — apenas com mais de uma imagem (o PHP não imprime
   os botões quando total_images === 1). */
.radha-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    color: var(--wphb-accent-contrast);
    background-color: var(--accent-color);
    border: none;
    opacity: 0;
    transition: opacity 0.25s ease, background-color 0.2s ease;
}

.radha-gallery-stage:hover .radha-gallery-nav,
.radha-gallery-nav:focus-visible {
    opacity: 1;
}

.radha-gallery-nav:hover {
    filter: brightness(0.92);
}

.radha-gallery-nav:focus-visible {
    outline: 2px solid var(--text-primary);
    outline-offset: 2px;
}

.radha-gallery-nav--prev {
    left: 0.875rem;
}

.radha-gallery-nav--next {
    right: 0.875rem;
}

/* Contador "2 / 7" no canto inferior direito. */
.radha-gallery-counter {
    position: absolute;
    right: 0.875rem;
    bottom: 0.875rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--wphb-accent-contrast);
    background-color: var(--accent-color);
    pointer-events: none;
}

.radha-gallery-counter-sep {
    opacity: 0.7;
}

/* Vídeo do quarto (YouTube, Vimeo, mp4 ou iframe pronto). */
.radha-gallery-video {
    position: absolute;
    inset: 0;
    z-index: 3;
    background-color: #000;
}

.radha-gallery-video-frame,
.radha-gallery-video-tag,
.radha-gallery-video iframe,
.radha-gallery-video video {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Miniaturas — trilho horizontal com deslocamento por JS. */
.radha-gallery-thumbs {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.625rem;
    padding-bottom: 0.25rem;
    overflow-x: auto;
    scrollbar-width: thin;
}

.radha-gallery-thumb {
    flex: 0 0 auto;
    width: 84px;
    height: 60px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: none;
    opacity: 0.55;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

.radha-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.radha-gallery-thumb:hover {
    opacity: 0.85;
}

.radha-gallery-thumb.is-active {
    opacity: 1;
    border-color: var(--accent-color);
}

.radha-gallery-thumb:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* Espaço reservado quando o quarto não tem qualquer imagem. */
.radha-gallery-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    aspect-ratio: 16 / 10;
    border-radius: 16px;
    border: 1px dashed var(--border-subtle);
    background-color: var(--wphb-accent-softer);
    color: var(--text-secondary);
    text-align: center;
    padding: 1.5rem;
}

.radha-gallery-placeholder p {
    margin: 0;
    font-size: 0.9375rem;
}

/* ==========================================================================
   11. RESPONSIVO — GALERIA
   ========================================================================== */
@media (max-width: 767px) {
    .radha-gallery-stage,
    .radha-gallery-placeholder {
        aspect-ratio: 4 / 3;
        border-radius: 12px;
    }

    /* Em ecrãs pequenos as setas ficam sempre visíveis: não existe hover,
       portanto escondê-las tornaria a navegação do carrossel impossível. */
    .radha-gallery-nav {
        opacity: 1;
        width: 36px;
        height: 36px;
    }

    .radha-gallery-thumb {
        width: 68px;
        height: 50px;
    }
}

/* ==========================================================================
   12. PREFERÊNCIA DE MOVIMENTO REDUZIDO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .radha-gallery-slide,
    .radha-gallery-nav,
    .radha-gallery-thumb,
    .hotel-booking-search button.wphb-button,
    .hotel-booking-search button.hb_button,
    .hb_add_to_cart {
        transition-duration: 0.01ms;
    }

    .radha-gallery-nav {
        opacity: 1;
    }
}

/* ==========================================================================
   13. CHECKOUT & CART — ATOMIC DESIGN
   ==========================================================================
   Estrutura atômica para as páginas de checkout, carrinho e conta.
   Classes radha-* padronizadas nos templates de override.

   Átomos:    .radha-btn, .radha-form-field__label, .radha-form-field__input-text
   Moléculas: .radha-form-field, .radha-price-row, .radha-order-item
   Organismos: .radha-checkout__wrapper, .radha-cart__wrapper, .radha-order-summary
   ========================================================================== */

/* --------------------------------------------------------------------------
   13.1. ÁTOMOS — Botões
   Nota: .radha-btn base já definido em booking.css. Aqui apenas modificadores.
   -------------------------------------------------------------------------- */
.radha-btn--primary {
    background-color: var(--accent-color, #8c7a6b);
    color: var(--wphb-accent-contrast, #ffffff);
    border-color: var(--accent-color, #8c7a6b);
}

.radha-btn--primary:hover {
    filter: brightness(0.92);
}

.radha-btn--primary:active {
    transform: translateY(1px);
    filter: brightness(0.88);
}

.radha-btn--primary:focus-visible {
    outline: 2px solid var(--accent-color, #8c7a6b);
    outline-offset: 2px;
}

.radha-btn--secondary {
    background-color: transparent;
    color: var(--text-primary, #1a1a1a);
    border: 1px solid var(--border-subtle, #eae6df);
}

.radha-btn--secondary:hover {
    background-color: var(--wphb-surface-hover, rgba(26, 26, 26, 0.03));
    border-color: var(--accent-color, #8c7a6b);
    color: var(--accent-color, #8c7a6b);
}

.radha-btn--secondary:focus-visible {
    outline: 2px solid var(--accent-color, #8c7a6b);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   13.2. ÁTOMOS — Campos de formulário
   -------------------------------------------------------------------------- */
.radha-form-field__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary, #666666);
    margin-bottom: 0.375rem;
    line-height: 1.3;
}

.radha-form-field__input-text {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-subtle, #eae6df);
    border-radius: var(--radius-sm, 4px);
    background-color: var(--wphb-surface, var(--bg-color, #faf8f5));
    font-family: var(--font-sans, 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-color 0.2s ease;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.radha-form-field__input-text:focus {
    outline: none;
    border-color: var(--accent-color, #8c7a6b);
    box-shadow: 0 0 0 3px var(--wphb-accent-soft, rgba(140, 122, 107, 0.10));
}

.radha-form-field__input-text[aria-invalid="true"] {
    border-color: #c0392b;
}

.radha-required {
    color: #c0392b;
    margin-left: 0.25rem;
}

/* --------------------------------------------------------------------------
   13.3. ÁTOMOS — Elementos de preço e meta
   -------------------------------------------------------------------------- */
.radha-meta__label {
    color: var(--text-secondary, #666666);
    font-weight: 500;
    font-size: 0.8125rem;
}

.radha-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-subtle, #eae6df);
    gap: 1rem;
}

.radha-price-row:last-child {
    border-bottom: none;
}

.radha-price-row--total {
    font-weight: 700;
}

.radha-price-row--total .radha-cart__total-value,
.radha-price-row--total .radha-order-summary__value {
    color: var(--accent-color, #8c7a6b);
    font-size: 1.125rem;
}

/* --------------------------------------------------------------------------
   13.4. MOLÉCULAS — Campo de formulário
   -------------------------------------------------------------------------- */
.radha-form-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin: 0;
}

.radha-form-field__input {
    width: 100%;
}

/* --------------------------------------------------------------------------
   13.5. MOLÉCULAS — Item de carrinho
   -------------------------------------------------------------------------- */
.radha-cart__item {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: start;
    gap: 1rem;
}

.radha-cart__thumb {
    display: inline-block;
    flex: 0 0 64px;
    width: 64px;
    height: 48px;
    overflow: hidden;
    border-radius: var(--radius-sm, 4px);
    vertical-align: middle;
}

.radha-cart__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.radha-cart__details {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.radha-cart__title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    margin: 0;
}

.radha-cart__title a {
    color: var(--text-primary, #1a1a1a);
    text-decoration: none;
}

.radha-cart__title a:hover {
    color: var(--accent-color, #8c7a6b);
}

.radha-cart__meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.radha-cart__date,
.radha-cart__guests {
    font-size: 0.875rem;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}

.radha-guest__rooms,
.radha-guest__adults,
.radha-guest__children {
    margin-right: 0.5rem;
}

.radha-cart__extras {
    margin-top: 0.5rem;
}

.radha-cart__extras-label {
    font-size: 0.8125rem;
    margin-bottom: 0.25rem;
}

.radha-cart__extras-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.radha-cart__extras-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
}

.radha-quantity {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.radha-quantity__input {
    width: 60px;
    padding: 0.375rem 0.5rem;
    text-align: center;
    border: 1px solid var(--border-subtle, #eae6df);
    border-radius: var(--radius-sm, 4px);
    background-color: var(--wphb-surface, var(--bg-color, #faf8f5));
    font-family: var(--font-sans, inherit);
    font-size: 0.9375rem;
    color: var(--text-primary, #1a1a1a);
}

.radha-quantity__input:focus {
    outline: none;
    border-color: var(--accent-color, #8c7a6b);
    box-shadow: 0 0 0 2px var(--wphb-accent-soft, rgba(140, 122, 107, 0.10));
}

.radha-cart__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    color: var(--text-secondary, #666666);
    text-decoration: none;
    font-size: 1.25rem;
    line-height: 1;
    transition: color 0.2s ease, background-color 0.2s ease;
}

.radha-cart__remove:hover {
    color: var(--accent-color, #8c7a6b);
    background-color: var(--wphb-accent-softer, rgba(140, 122, 107, 0.06));
}

/* --------------------------------------------------------------------------
   13.6. MOLÉCULAS — Resumo de encomenda
   -------------------------------------------------------------------------- */
.radha-order-summary {
    background-color: var(--wphb-surface, var(--bg-color, #faf8f5));
    border: 1px solid var(--border-subtle, #eae6df);
    border-radius: var(--radius-md, 8px);
    padding: 1.5rem;
}

.radha-order-summary__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
    margin: 0 0 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--border-subtle, #eae6df);
}

.radha-order-summary__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-subtle, #eae6df);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-secondary, #666666);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.radha-order-summary__label {
    color: var(--text-secondary, #666666);
    font-size: 0.875rem;
}

.radha-order-summary__value {
    color: var(--text-primary, #1a1a1a);
    font-weight: 600;
}

.radha-order-item {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-subtle, #eae6df);
}

.radha-order-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.radha-order-item__title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.radha-order-item__qty {
    font-size: 0.875rem;
    color: var(--text-secondary, #666666);
}

.radha-order-item__meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.radha-order-item__date,
.radha-order-item__guests {
    font-size: 0.875rem;
    margin: 0;
}

.radha-order-item__price {
    font-weight: 700;
    color: var(--accent-color, #8c7a6b);
    font-size: 1rem;
}

.radha-order-extra {
    margin-top: 0.5rem;
}

.radha-order-extra__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.radha-order-extra__item {
    font-size: 0.875rem;
    display: flex;
    justify-content: space-between;
}

/* --------------------------------------------------------------------------
   13.7. ORGANISMOS — Layout do checkout
   -------------------------------------------------------------------------- */
.radha-checkout {
    background-color: var(--bg-color, #faf8f5);
}

.radha-checkout__wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
}

.radha-checkout__col {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.radha-checkout__col--summary {
    position: sticky;
    top: 2rem;
    align-self: start;
}

.radha-checkout__login-notice {
    padding: 1rem;
    background-color: var(--wphb-accent-softer, rgba(140, 122, 107, 0.06));
    border-radius: var(--radius-md, 8px);
    font-size: 0.9375rem;
}

.radha-checkout__login-notice a {
    color: var(--accent-color, #8c7a6b);
    text-decoration: underline;
}

.radha-checkout__terms {
    margin: 1rem 0;
    padding: 1rem;
    background-color: var(--wphb-surface, var(--bg-color, #faf8f5));
    border: 1px solid var(--border-subtle, #eae6df);
    border-radius: var(--radius-md, 8px);
    font-size: 0.9375rem;
}

.radha-checkout__terms-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    margin: 0;
}

.radha-checkout__place-order {
    margin-top: 1rem;
}

/* --------------------------------------------------------------------------
   13.8. ORGANISMOS — Layout do carrinho
   -------------------------------------------------------------------------- */
.radha-cart {
    background-color: var(--bg-color, #faf8f5);
}

.radha-cart__wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
}

.radha-cart__table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
}

.radha-cart__thead th {
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary, #666666);
    padding: 0.75rem;
    border-bottom: 2px solid var(--border-subtle, #eae6df);
}

.radha-cart__tbody .radha-cart__item {
    border-bottom: 1px solid var(--border-subtle, #eae6df);
}

.radha-cart__tbody .radha-cart__item td {
    padding: 1rem 0.75rem;
    vertical-align: top;
}

.radha-cart__col--room {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.radha-cart__col--price-value,
.radha-cart__col--quantity-value,
.radha-cart__col--subtotal-value,
.radha-cart__col--deposit-value {
    text-align: right;
}

.radha-cart__col--price-value {
    font-weight: 600;
}

.radha-cart__col--quantity-value {
    min-width: 100px;
}

.radha-cart__col--subtotal-value {
    font-weight: 700;
}

.radha-cart__col--deposit-value {
    font-size: 0.875rem;
}

.radha-cart__total {
    background-color: var(--wphb-surface, var(--bg-color, #faf8f5));
    border: 1px solid var(--border-subtle, #eae6df);
    border-radius: var(--radius-md, 8px);
    padding: 1.5rem;
    align-self: start;
}

.radha-cart__total-box {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.radha-cart__total-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--border-subtle, #eae6df);
}

.radha-cart__total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    gap: 1rem;
}

.radha-cart__total-row--grand {
    font-weight: 700;
    border-top: 2px solid var(--border-subtle, #eae6df);
    padding-top: 1rem;
    margin-top: 0.5rem;
}

.radha-cart__total-row--grand .radha-cart__total-value {
    color: var(--accent-color, #8c7a6b);
    font-size: 1.125rem;
}

.radha-cart__total-label {
    color: var(--text-secondary, #666666);
    font-size: 0.9375rem;
}

.radha-cart__total-value {
    color: var(--text-primary, #1a1a1a);
    font-weight: 600;
}

.radha-cart__coupon {
    margin-top: 1.5rem;
}

.radha-coupon__toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9375rem;
    color: var(--text-secondary, #666666);
    cursor: pointer;
}

.radha-coupon__toggle-link {
    color: var(--accent-color, #8c7a6b);
    text-decoration: underline;
    font-weight: 500;
}

.radha-coupon__form {
    margin-top: 0.75rem;
}

.radha-coupon__form-inner {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.radha-coupon__form-inner input[type="text"] {
    flex: 1;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-subtle, #eae6df);
    border-radius: var(--radius-sm, 4px);
    background-color: var(--wphb-surface, var(--bg-color, #faf8f5));
    font-family: var(--font-sans, inherit);
    font-size: 0.9375rem;
    color: var(--text-primary, #1a1a1a);
}

.radha-coupon__form-inner input[type="text"]:focus {
    outline: none;
    border-color: var(--accent-color, #8c7a6b);
    box-shadow: 0 0 0 2px var(--wphb-accent-soft, rgba(140, 122, 107, 0.10));
}

.radha-coupon-applied {
    margin: 1rem 0;
    padding: 0.75rem;
    background-color: var(--wphb-accent-softer, rgba(140, 122, 107, 0.06));
    border-radius: var(--radius-md, 8px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.radha-coupon-applied__label {
    font-size: 0.875rem;
    color: var(--text-secondary, #666666);
}

.radha-coupon-applied__value {
    font-weight: 600;
    color: var(--accent-color, #8c7a6b);
}

.radha-coupon-applied__remove {
    color: var(--text-secondary, #666666);
    text-decoration: none;
    font-size: 1.125rem;
    line-height: 1;
    cursor: pointer;
}

.radha-coupon-applied__remove:hover {
    color: var(--accent-color, #8c7a6b);
}

/* --------------------------------------------------------------------------
   13.9. ORGANISMOS — Carrinho vazio
   -------------------------------------------------------------------------- */
.radha-empty-cart {
    text-align: center;
    padding: 3rem 1.5rem;
    background-color: var(--wphb-surface, var(--bg-color, #faf8f5));
    border: 1px solid var(--border-subtle, #eae6df);
    border-radius: var(--radius-md, 8px);
}

.radha-empty-cart__icon {
    font-size: 3rem;
    color: var(--text-secondary, #666666);
    margin-bottom: 1rem;
    opacity: 0.5;
}

.radha-empty-cart__title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
    margin-bottom: 0.75rem;
}

.radha-empty-cart__message {
    color: var(--text-secondary, #666666);
    margin-bottom: 1.5rem;
    font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   13.10. ORGANISMOS — Formulário de cliente
   -------------------------------------------------------------------------- */
.radha-customer {
    margin-bottom: 1.5rem;
}

.radha-customer__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
    margin: 0 0 1rem;
}

.radha-customer-form__inner {
    padding: 1.5rem;
    background-color: var(--wphb-surface, var(--bg-color, #faf8f5));
    border: 1px solid var(--border-subtle, #eae6df);
    border-radius: var(--radius-md, 8px);
}

.radha-customer-form__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.radha-customer-form__fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

.radha-customer-form__legend {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   13.11. ORGANISMOS — Métodos de pagamento
   -------------------------------------------------------------------------- */
.radha-payment {
    margin-top: 1.5rem;
}

.radha-payment__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
    margin: 0 0 1rem;
}

.radha-payment__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.radha-payment__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.radha-payment__label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    margin: 0;
    font-size: 0.9375rem;
    color: var(--text-primary, #1a1a1a);
}

.radha-payment__input {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-color, #8c7a6b);
    cursor: pointer;
}

.radha-payment__form {
    margin-top: 0.5rem;
    margin-left: 1.75rem;
}

.radha-payment__empty {
    color: var(--text-secondary, #666666);
    font-style: italic;
}

/* --------------------------------------------------------------------------
   13.12. RESPONSIVO
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .radha-checkout__wrapper,
    .radha-cart__wrapper {
        grid-template-columns: 1fr;
    }

    .radha-checkout__col--summary {
        position: static;
    }

    .radha-customer-form__grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .radha-cart__item {
        grid-template-columns: auto 1fr;
        gap: 0.75rem;
    }

    .radha-cart__col--price-value,
    .radha-cart__col--quantity-value,
    .radha-cart__col--subtotal-value,
    .radha-cart__col--deposit-value {
        text-align: left;
    }

    .radha-cart__tbody .radha-cart__item td {
        padding: 0.75rem 0.5rem;
    }

    .radha-cart__total {
        position: sticky;
        top: 2rem;
    }
}

@media (max-width: 640px) {
    .radha-cart__table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .radha-cart__thead {
        display: none;
    }

    .radha-cart__item {
        display: block;
        grid-template-columns: 1fr;
    }
}

/* --------------------------------------------------------------------------
   13.12. ORGANISMOS — Informações adicionais
   -------------------------------------------------------------------------- */
.radha-addition-info {
    margin-top: 1.5rem;
}

.radha-addition-info__inner {
    padding: 1.5rem;
    background-color: var(--wphb-surface, var(--bg-color, #faf8f5));
    border: 1px solid var(--border-subtle, #eae6df);
    border-radius: var(--radius-md, 8px);
}

.radha-addition-info__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary, #1a1a1a);
    margin: 0 0 1rem;
}

.radha-addition-info__textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-subtle, #eae6df);
    border-radius: var(--radius-sm, 4px);
    background-color: var(--wphb-surface, var(--bg-color, #faf8f5));
    font-family: var(--font-sans, inherit);
    font-size: 0.9375rem;
    color: var(--text-primary, #1a1a1a);
    line-height: 1.5;
    resize: vertical;
    min-height: 100px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.radha-addition-info__textarea:focus {
    outline: none;
    border-color: var(--accent-color, #8c7a6b);
    box-shadow: 0 0 0 3px var(--wphb-accent-soft, rgba(140, 122, 107, 0.10));
}

/* --------------------------------------------------------------------------
   13.13. PREFERÊNCIA DE MOVIMENTO REDUZIDO
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .radha-btn,
    .radha-btn--primary,
    .radha-btn--secondary,
    .radha-coupon__toggle-link,
    .radha-cart__remove {
        transition-duration: 0.01ms;
    }
}

/* ==========================================================================
   14. ESCALA DE TEXTO — TODAS AS CLASSES DE TEXTO DO PLUGIN
   ==========================================================================
   Todas as classes de texto geradas pelo plugin passam a ler o tamanho do
   Customizer (Transparência & Contraste > Escala de Texto) através dos
   tokens --wphb-text-*, definidos no :root desta folha.

   A razão de existirem: o plugin declara quase todos os seus tamanhos em
   píxeis e alguns com `!important`, pelo que alterar o font-size da raiz
   não chega a afetá-los. Multiplicando por --text-scale-factor, o
   utilizador ganha um único controlo de legibilidade para o tema inteiro,
   páginas do plugin incluídas.

   Os tokens usam rem como base unitária (e não px) para que, além da
   escala do Customizer, também acompanhem o tamanho de fonte definido pelo
   próprio utilizador no navegador — o duplo controlo de preferências de
   leitura que a WCAG prevê.
   ========================================================================== */

/* --------------------------------------------------------------------------
   14.1. TÍTULOS
   Dimensionados como títulos de página, não como destaques: nas páginas
   internas do plugin o conteúdo é denso e um h1 dimensionado para a home
   consome mais linha do que o próprio texto que descreve.
   -------------------------------------------------------------------------- */
.hb_title,
.hb_search_room_title,
.radha-search-results-title,
.radha-archive-room .entry-title {
    font-size: var(--wphb-text-lg);
    font-weight: 500;
    line-height: 1.3;
}

.hb-room-title,
.hb-room-name,
.radha-room-name {
    font-size: var(--wphb-text-md);
    font-weight: 500;
    line-height: 1.3;
}

.hb_single_room_tabs li a {
    font-size: var(--wphb-text-base);
    line-height: 1.4;
}

/* Cabeçalhos escritos pelo autor dentro das tabs de descrição, regras e
   instalações: o editor do WordPress não conhece a escala do tema, por isso
   o tamanho é reposto aqui a partir dos tokens. */
.hb_single_room_tab_details h1,
.hb_single_room_tab_details h2,
.hb_single_room_tab_details h3,
.hb_single_room_tab_details h4,
.hb_single_room_tab_details h5,
.hb_single_room_tab_details h6 {
    font-size: var(--wphb-text-md);
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 0.5rem;
}

/* --------------------------------------------------------------------------
   14.2. TEXTO CORRENTE
   -------------------------------------------------------------------------- */
.hb_single_room_tab_details,
.hb_single_room_details,
.wphb-single-room-content,
.hotel-booking-search,
.hb-search-room-results,
.hb-room-info,
.hb_booking_wrapper,
.hb_checkout,
.hb-cart,
.hb_booking_table {
    font-size: var(--wphb-text-base);
    line-height: 1.6;
}

.hb_single_room_tab_details p,
.hb_single_room_tab_details li,
.hotel-booking-search p,
.hb-search-room-results p,
.hb-form-field .description,
.hb-booking-room-form-header .description,
.wphb-max-qty {
    font-size: var(--wphb-text-base);
}

/* --------------------------------------------------------------------------
   14.3. RÓTULOS E METADADOS
   -------------------------------------------------------------------------- */
.hotel-booking-search label,
.hb-search-room-results label,
.hb-form-field label,
.hb-booking-room-form-field label,
.hb-form-field-input label,
.radha-form-field__label,
.hb-booking-room-form-group > label {
    font-size: var(--wphb-text-xs);
    line-height: 1.3;
}

.radha-room-meta-label,
.radha-cart__thead th,
.radha-order-summary__header,
.radha-gallery-counter {
    font-size: var(--wphb-text-xs);
}

.radha-room-meta-value,
.radha-meta__label,
.radha-cart__date,
.radha-cart__guests,
.radha-cart__extras-item,
.radha-order-summary__label,
.radha-order-item__date,
.radha-order-item__guests,
.radha-order-extra__item,
.radha-coupon__toggle,
.radha-coupon-applied__label,
.radha-checkout__login-notice,
.radha-checkout__terms,
.radha-payment__label,
.radha-coupon__form-inner input[type="text"],
.radha-search-no-results p {
    font-size: var(--wphb-text-sm);
}

/* --------------------------------------------------------------------------
   14.4. CAMPOS DE FORMULÁRIO
   inputs, selects e textareas: o tamanho controla a altura da caixa, por
   isso acompanha a escala em vez de ficar fixo.
   -------------------------------------------------------------------------- */
.hotel-booking-search input,
.hotel-booking-search select,
.hotel-booking-search textarea,
.hb-search-room-results input,
.hb-search-room-results select,
.hb-search-room-results textarea,
.hb_input_date_check,
.radha-form-field__input-text,
.radha-quantity__input,
.radha-addition-info__textarea,
.radha-room-quantity-select {
    font-size: var(--wphb-text-base);
}

/* --------------------------------------------------------------------------
   14.5. PREÇOS E DESTAQUES NUMÉRICOS
   O preço é a informação comercialmente decisiva, por isso mantém-se acima
   do texto corrente — mas dentro de um tecto: com a escala no máximo
   (150%), um valor muito acima do corpo de texto deixa de ser comparável.
   -------------------------------------------------------------------------- */
.hb-room-price,
.radha-room-price,
.hb_search_price,
.hb_single_room_price,
.radha-order-item__price,
.radha-cart__col--price-value,
.radha-cart__col--subtotal-value,
.radha-search-price {
    font-size: var(--wphb-text-md) !important;
}

.radha-room-price .hb-price-per-night,
.hb-room-price .hb-price-per-night,
.hb-price-per-night {
    font-size: var(--wphb-text-xs);
    font-weight: 400;
}

.radha-order-summary__title,
.radha-cart__total-title,
.radha-customer__title,
.radha-payment__title,
.radha-addition-info__title,
.radha-empty-cart__title {
    font-size: var(--wphb-text-md);
    line-height: 1.3;
}

.radha-cart__title,
.radha-order-item__title,
.radha-order-item__qty,
.radha-order-summary__header {
    font-size: var(--wphb-text-sm);
}

/* --------------------------------------------------------------------------
   14.6. BOTÕES
   -------------------------------------------------------------------------- */
.hotel-booking-search button,
.hb-search-room-results button,
.hb_button,
.wphb-button,
.hb_add_to_cart,
.hb_search_add_to_cart,
.radha-btn {
    font-size: var(--wphb-text-sm);
    line-height: 1.3;
}

/* ==========================================================================
   15. DENSIDADE — REDUÇÃO DE PADDING E MARGENS
   ==========================================================================
   O plugin empilha caixas com generosos 2rem–4rem de padding e rely sobre
   margens defaults, o que, combinado com as caixas do tema, comprime o
   conteúdo e obriga a percorrer muito espaço vazio para ler pouco texto.

   Aqui os valores são reduzidos cerca de 40% e as margens defaults dos
   parágrafos são repostas dentro dos contentores do plugin. O objetivo não
   é a austeritye, mas devolver ao texto o espaço que as caixas estavam a
   consumir por conta própria.
   ========================================================================== */

/* --------------------------------------------------------------------------
   15.1. ESPAÇAMENTO BASE DENTRO DO PLUGIN
   Substitui o reset do tema (`* { margin: 0; padding: 0 }`) dentro dos
   contentores do plugin, onde o plugin espera o seu próprio espaçamento.
   -------------------------------------------------------------------------- */
.hotel-booking-search p,
.hotel-booking-search ul,
.hotel-booking-search ol,
.hotel-booking-search blockquote,
.hotel-booking-search h1,
.hotel-booking-search h2,
.hotel-booking-search h3,
.hotel-booking-search h4,
.hb-search-room-results p,
.hb-search-room-results ul,
.hb-search-room-results ol,
.hb-search-room-results h1,
.hb-search-room-results h2,
.hb-search-room-results h3,
.hb-search-room-results h4,
.hb_single_room_details p,
.hb_single_room_details ul,
.hb_single_room_details ol,
.hb_single_room_details h1,
.hb_single_room_details h2,
.hb_single_room_details h3,
.hb_single_room_details h4,
.hb_single_room_tabs_content p,
.hb_single_room_tabs_content ul,
.hb_single_room_tabs_content ol,
.hb_booking_wrapper p,
.hb_checkout p,
.hb-cart p {
    margin: 0 0 0.5rem;
}

.hb_single_room_tabs_content ul,
.hb_single_room_tabs_content ol,
.hb_single_room_details ul,
.hb_single_room_details ol {
    padding-left: 0.875rem;
    list-style: disc;
    margin: 0 0 0.5rem;
}

.hb_single_room_tabs_content p:last-child,
.hb_single_room_tab_details p:last-child,
.hotel-booking-search p:last-child,
.hb-search-room-results p:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   15.2. CARTÕES E CAIXAS — PADDING COMPACTO
   0.75rem em vez dos 1.5rem–4rem do plugin. O objectivo é que a moldura
   seja perceptível sem passar a ocupar mais uma linha do que o texto lá
   dentro.
   -------------------------------------------------------------------------- */
.hb-room-item,
.radha-room-card,
.hb_search_room_item,
.wphb-single-room-content,
.hb_single_room_details,
.radha-single-room-card,
.hb_booking_wrapper,
.hb_checkout {
    padding: 0.75rem;
}

.radha-order-summary,
.radha-cart__total,
.radha-customer-form__inner,
.radha-addition-info__inner,
.radha-coupon-applied {
    padding: 0.75rem;
}

/* O cartão de resultado de busca recebe o preenchimento no contentor
   interno .radha-search-room-content (booking.css). Aplicá-lo também ao <li>
   duplicaria o espaçamento, por isso fica de fora da lista acima. */
.radha-search-room-content {
    padding: 0.75rem;
}

/* Estados vazios */
.radha-empty-cart,
.radha-search-no-results {
    padding: 1.5rem 1rem;
}

.radha-empty-cart__icon {
    font-size: 1.5rem;
    margin-bottom: 0.375rem;
}

.radha-empty-cart__title {
    margin-bottom: 0.375rem;
}

.radha-empty-cart__message {
    margin-bottom: 0.75rem;
}

/* --------------------------------------------------------------------------
   15.3. CAMPOS DE FORMULÁRIO — ALTURA MÍNIMA
   O plugin aplica `padding: 15px 30px 0` a cada .hb-booking-room-form-field
   do formulário de reserva (booking-single-room.css). Somado ao padding
   vertical dos próprios inputs, cada um dos cinco campos ficava com quase
   três vezes a altura do texto que contém.
   -------------------------------------------------------------------------- */
.radha-form-field__input-text,
.radha-coupon__form-inner input[type="text"] {
    padding: 0.375rem 0.5rem;
}

.hotel-booking-search .hb-form-field-input input,
.hotel-booking-search .hb-form-field-input select,
.hb-search-room-results .hb-form-field-input input,
.hb-search-room-results .hb-form-field-input select,
.hb-booking-room-form-field input,
.hb-booking-room-form-field select,
.hb-search-results-form-container input,
.hb-search-results-form-container select {
    padding: 0.375rem 0.5rem;
    min-height: 0;
}

/* O padding horizontal de 30px que o plugin aplica aos campos do formulário
   de reserva é removido: com cinco colunas lado a lado, 60px por campo
   consome a largura disponível da coluna. */
.hb-search-results-form-container > .hb-booking-room-form-field {
    padding: 0 0 0.5rem;
}

.hb-search-results-form-container {
    margin-top: 0.75rem;
}

.hb-booking-room-form-footer {
    margin: 0.75rem 0;
}

.hb-booking-room-form-head p {
    margin: 0 0 0.5rem;
    font-size: var(--wphb-text-md);
}

.hb-booking-room-form-head h2 {
    font-size: var(--wphb-text-lg);
    padding: 0;
}

.hb-booking-room-form-group {
    margin-bottom: 0.5rem;
}

.hb_single_room #hb_room_images {
    margin-bottom: 1rem;
}

.radha-addition-info__textarea {
    padding: 0.375rem 0.5rem;
    min-height: 64px;
}

.radha-form-field {
    gap: 0.1875rem;
}

.radha-form-field__label {
    margin-bottom: 0.1875rem;
}

/* --------------------------------------------------------------------------
   15.4. TABELA DO CARRINHO
   -------------------------------------------------------------------------- */
.radha-cart__thead th {
    padding: 0.375rem 0.5rem;
}

.radha-cart__tbody .radha-cart__item td {
    padding: 0.5rem 0.375rem;
}

.radha-cart__table {
    margin-bottom: 0.75rem;
}

.radha-cart__item {
    gap: 0.5rem;
}

.radha-cart__quantity .radha-quantity__input,
.radha-quantity__input {
    width: 52px;
    padding: 0.25rem 0.375rem;
}

/* --------------------------------------------------------------------------
   15.5. BLOCOS VERTICAIS — MENOS ESPAÇO ENTRE SECÇÕES
   -------------------------------------------------------------------------- */
.radha-order-summary__title,
.radha-cart__total-title,
.radha-customer__title,
.radha-payment__title,
.radha-addition-info__title {
    margin: 0 0 0.5rem;
    padding-bottom: 0.375rem;
}

.radha-checkout__wrapper,
.radha-cart__wrapper {
    gap: 1rem;
}

.radha-checkout__col {
    gap: 0.75rem;
}

.radha-price-row {
    padding: 0.375rem 0;
}

.radha-cart__total-row {
    padding: 0.375rem 0;
}

.radha-order-summary__header {
    padding: 0.375rem 0;
}

.radha-customer,
.radha-payment,
.radha-addition-info,
.radha-cart__coupon {
    margin-top: 0;
    margin-bottom: 0.75rem;
}

.radha-checkout__terms {
    margin: 0.5rem 0;
    padding: 0.5rem;
}

.radha-checkout__login-notice {
    padding: 0.5rem;
}

.radha-coupon-applied {
    margin: 0.5rem 0;
    padding: 0.5rem;
}

.radha-cart__extras,
.radha-order-extra {
    margin-top: 0.375rem;
}

.radha-gallery-counter {
    padding: 0.1875rem 0.5rem;
}

/* --------------------------------------------------------------------------
   15.6. TABS E GALERIA DO QUARTO
   -------------------------------------------------------------------------- */
.hb_single_room_tabs li a {
    padding: 0.375rem 0.5rem;
}

.hb_single_room_tabs_content {
    padding: 0.5rem 0 0;
}

.radha-room-gallery {
    margin: 0 0 0.75rem;
}

.radha-gallery-thumbs {
    margin-top: 0.375rem;
    gap: 0.375rem;
}

.radha-gallery-thumb {
    width: 72px;
    height: 52px;
}

.radha-gallery-placeholder {
    padding: 0.75rem;
}

/* ==========================================================================
   16. ANULAÇÃO DO theme-default.css DO PLUGIN
   ==========================================================================
   Esta secção existe por uma razão técnica precisa, e é a que resolve os
   dois sintomas reportados nas páginas de quarto.

   O plugin carrega theme-default.css, que declara a sua própria escala
   tipográfica e o seu próprio espaçamento com selectorES de ALTA
   especificidade:

       body.wp-hotel-booking-page:not(.tp-themes-premium) h1 { font-size: 48px }
       body.wp-hotel-booking-page:not(.tp-themes-premium) h2 { font-size: 36px }
       body.wp-hotel-booking-page:not(.tp-themes-premium) h3 { font-size: 30px }
       body.wp-hotel-booking-page:not(.tp-themes-premium) p  { line-height: 1.75 }
       .hb_single_room { margin-top: 40px }
       .wphb-single-room-content { gap: 30px }
       #hotel_booking_room_hidden { padding: 24px }

   Dois problemas resultam daí:

   1. O `.hb_single_room_title` (0,1,0) perde para o `body....h1` (0,2,2).
      É por isso que o título do quarto aparecia a 48px — três vezes o
      pretendido — apesar das regras das secções anteriores, que eram
      simplesmente sobrepostas em silêncio.

   2. O `.hb_single_room` ganha 40px de margem de topo, o contentor de
      detalhes e o do formulário ganham 30px de gap e 24px de padding, e a
      página ganha mais 15px de cada lado abaixo de 1200px. Somados à
      margem lateral do `.radha-container` do tema, o conteúdo passa a ter
      duas camadas de respiro sobrepostas.

   Para vencer a cascata é necessário replicar o mesmo selector, com a
   mesma especificidade. É o que se faz abaixo, seletor a seletor, em vez
   de usar !important — que apenas tornaria a manutenção do tema mais difícil
   sem alterar o resultado.
   ========================================================================== */

/* --------------------------------------------------------------------------
   16.1. ESCALA TIPOGRÁFICA — h1 a h6
   O `:not()` não conta para a especificidade, mas a classe que o acompanha
   conta. Replica-se a estrutura exacta do plugin.
   -------------------------------------------------------------------------- */
body.wp-hotel-booking-page:not(.tp-themes-premium) h1,
body.wp-hotel-booking-page:not(.tp-themes-premium) .hb_single_room_title,
body.wp-hotel-booking-page:not(.tp-themes-premium) .hb-room-title,
body.wp-hotel-booking-page:not(.tp-themes-premium) .hb-room-name {
    font-size: var(--wphb-text-lg) !important;
    font-weight: 500;
    line-height: 1.3;
}

body.wp-hotel-booking-page:not(.tp-themes-premium) h2,
body.wp-hotel-booking-page:not(.tp-themes-premium) h3 {
    font-size: var(--wphb-text-md) !important;
}

body.wp-hotel-booking-page:not(.tp-themes-premium) h4,
body.wp-hotel-booking-page:not(.tp-themes-premium) h5,
body.wp-hotel-booking-page:not(.tp-themes-premium) h6 {
    font-size: var(--wphb-text-base) !important;
}

body.wp-hotel-booking-page:not(.tp-themes-premium) p {
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   16.2. ESPAÇAMENTO DA PÁGINA
   Aquí é que vive a maior parte do respiro que se via a "demais".
   -------------------------------------------------------------------------- */
body.wp-hotel-booking-page:not(.tp-themes-premium) .hb_single_room {
    margin-top: 0.75rem;
}

/* O duplo respiro: o plugin acrescenta 15px de cada lado ao body até
   1200px, por cima do padding do .radha-container do tema. Fica só o do
   tema, que é o que governa a largura do conteúdo. */
body.wp-hotel-booking-page:not(.tp-themes-premium) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

body.wp-hotel-booking-page:not(.tp-themes-premium) .wphb-single-room-content {
    gap: 1.25rem;
}

body.wp-hotel-booking-page:not(.tp-themes-premium) .wphb-single-room-booking-container #hotel_booking_room_hidden {
    padding: 0.75rem;
}

body.wp-hotel-booking-page:not(.tp-themes-premium) .hb_single_room_tabs_content h1,
body.wp-hotel-booking-page:not(.tp-themes-premium) .hb_single_room_tabs_content h2,
body.wp-hotel-booking-page:not(.tp-themes-premium) .hb_single_room_tabs_content h3,
body.wp-hotel-booking-page:not(.tp-themes-premium) .hb_single_room_tabs_content h4,
body.wp-hotel-booking-page:not(.tp-themes-premium) .hb_single_room_tabs_content h5,
body.wp-hotel-booking-page:not(.tp-themes-premium) .hb_single_room_tabs_content h6 {
    margin: 0.75rem 0 0.375rem;
}

body.wp-hotel-booking-page:not(.tp-themes-premium) .hb_single_room .hb_room_gallery {
    margin-bottom: 0.75rem;
}

body.wp-hotel-booking-page:not(.tp-themes-premium) .hb_single_room #hb_room_images {
    margin-bottom: 0.75rem;
}

body.wp-hotel-booking-page:not(.tp-themes-premium) .hb_single_room #hb_room_video {
    margin-bottom: 1rem;
}

body.wp-hotel-booking-page:not(.tp-themes-premium) .hb_single_room #hb_room_video iframe {
    height: 420px;
}

/* --------------------------------------------------------------------------
   16.3. FORMULÁRIOS, CAMPOS E BOTÕES
   O theme-default.css aplica `padding: 12px` a todos os inputs de busca e
   `padding: 12px 20px` aos botões, e dimensiona inputs, selects e botões
   a 16px fixos — o que anulava a Escala de Texto.
   -------------------------------------------------------------------------- */
body.wp-hotel-booking-page:not(.tp-themes-premium) .hotel-booking-search input,
body.wp-hotel-booking-page:not(.tp-themes-premium) .hotel-booking-search select,
body.wp-hotel-booking-page:not(.tp-themes-premium) .hotel-booking-search textarea,
body.wp-hotel-booking-page:not(.tp-themes-premium) .hotel-booking-rooms-search input,
body.wp-hotel-booking-page:not(.tp-themes-premium) .hotel-booking-rooms-search select {
    padding: 0.375rem 0.5rem;
}

/* O theme-default.css fixa inputs, selects, botões e textarea a 16px,
   anulando a Escala de Texto em todo o formulário. */
body.wp-hotel-booking-page input,
body.wp-hotel-booking-page select,
body.wp-hotel-booking-page button,
body.wp-hotel-booking-page textarea {
    font-size: var(--wphb-text-base) !important;
}

body.wp-hotel-booking-page:not(.tp-themes-premium) .hotel-booking-search button,
body.wp-hotel-booking-page:not(.tp-themes-premium) .hotel-booking-rooms-search button,
body.wp-hotel-booking-page:not(.tp-themes-premium) .hb_button {
    padding: 0.5rem 1rem;
    min-width: 0;
}

body.wp-hotel-booking-page:not(.tp-themes-premium) .hb-form-field label {
    margin-bottom: 0.25rem;
    font-size: var(--wphb-text-xs) !important;
    line-height: 1.3;
}

body.wp-hotel-booking-page:not(.tp-themes-premium) .hb-search-results-form-container {
    row-gap: 0.5rem;
    column-gap: 0.75rem;
}

body.wp-hotel-booking-page:not(.tp-themes-premium) .hb-search-results-form-container .hb-booking-room-form-group label {
    font-size: var(--wphb-text-sm) !important;
}

body.wp-hotel-booking-page:not(.tp-themes-premium) .wphb-single-room-booking-container .wphb-single-room-external-link {
    margin-top: 1rem;
    padding: 0.75rem;
}

body.wp-hotel-booking-page:not(.tp-themes-premium) .wphb-single-room-booking-container .hb-search-results-form-container {
    max-width: 100%;
}

/* --------------------------------------------------------------------------
   16.4. TABELAS
   `padding: 0.7em 1em` numa célula com fonte de 16px dá 11px verticais e
   16px horizontais — o que torna a tabela do carrinho mais larga do que a
   coluna onde vive.
   -------------------------------------------------------------------------- */
body.wp-hotel-booking-page:not(.tp-themes-premium) table.hb_booking_table th,
body.wp-hotel-booking-page:not(.tp-themes-premium) table.hb_booking_table td,
body.wp-hotel-booking-page:not(.tp-themes-premium) table.booking_item_table th,
body.wp-hotel-booking-page:not(.tp-themes-premium) table.booking_item_table td,
body.wp-hotel-booking-page:not(.tp-themes-premium) table.hb_table th,
body.wp-hotel-booking-page:not(.tp-themes-premium) table.hb_table td {
    padding: 0.375rem 0.5rem;
}

/* --------------------------------------------------------------------------
   16.5. TÍTULO DO QUARTO E RESPIRO DO CABEÇALHO
   A caixa .room-single-top (radha-room-top) chega do plugin como display:flex
   e encolhe o conteúdo sem qualquer espaçamento: o título ficava colado à
   galeria e ao limite do cartão.

   O respiro é dividido entre os dois níveis, e não repetido num só:

     .room-single-top  margem inferior e o separador, que são desenhados
                       à volta do título;
     .hb_single_room_title  o padding interno, que afasta o texto das
                       extremidades.

   A regra do título precisa de `!important` e da cadeia completa de classes
   porque a regra genérica de h1 da secção 17.2 declara o mesmo degrau com o
   mesmo peso — declarar as duas aqui e na secção 6 só criava mais um conflito
   para resolver. Esta é, por isso, a única regra que dimensiona o título.
   -------------------------------------------------------------------------- */
body.wp-hotel-booking-page:not(.tp-themes-premium) .hb_single_room .room-single-top {
    margin: 0 0 0.75rem;
    padding: 0;
    border-bottom: 1px solid var(--border-subtle);
    display: block;
}

body.wp-hotel-booking-page:not(.tp-themes-premium) .hb_single_room .room-single-top .hb_single_room_title {
    margin: 0;
    padding: 0.5rem 0.75rem;
    font-size: var(--wphb-text-lg) !important;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

body.wp-hotel-booking-page:not(.tp-themes-premium) .hb_single_room .room-single-top .price {
    margin-bottom: 0;
}

/* ==========================================================================
   17. RESPIRO LATERAL, HIERARQUIA TIPOGRÁFICA E PAGINAÇÃO
   ==========================================================================
   Objectivos desta secção, por ordem de priorities:

     1. Dar mais ar às laterais sem voltar a duplicar o respiro. A secção 16
        anulou os 15px que o plugin injeta no body; o espaço passa agora a
        vir só do .radha-container, e mais generoso do que o do blog.

     2. Corrigir a hierarquia. A secção 16 tratava h1, h2 e h3 com o mesmo
        tamanho, o que tornava o título do quarto igual ao de um cartão de
        resultado. Reestabelece-se a distinção entre título principal,
        títulos de secção e títulos de cartão.

     3. Pôr a paginação por baixo da grelha. O plugin fecha a <ul class="rooms">
        como contentor flex; enquanto o <nav class="rooms-pagination"> estiver
        dentro dela, é tratado como mais um item e herda a linha do último
        cartão. archive-room.php foi corrigido para fechar a lista antes de
        paginar — estas regras são a rede de segurança para o resto de
        templates que o plugin injecta por AJAX.
   ========================================================================== */

/* --------------------------------------------------------------------------
   17.1. RESPIRO LATERAL
   Só o container. O body continua sem padding nas páginas do plugin
   (secção 16.2) para não haver duas camadas de respiro sobrepostas.
   -------------------------------------------------------------------------- */
.radha-archive-room .radha-container,
.radha-single-room .radha-container,
.radha-hotel-search .radha-container,
.radha-search-page .radha-container,
.radha-hotel-cart .radha-container,
.radha-hotel-checkout .radha-container,
.radha-hotel-account .radha-container {
    padding-left: clamp(1.5rem, 5vw, 5rem);
    padding-right: clamp(1.5rem, 5vw, 5rem);
}

/* O .radha-container dentro do footer já tem o seu próprio respiro; não o
   duplicamos quando o footer também é container. */
.site-footer .site-footer .radha-container {
    padding-left: 0;
    padding-right: 0;
}

/* --------------------------------------------------------------------------
   17.2. HIERARQUIA TIPOGRÁFICA
   Seis degraus, todos derivados de --text-scale-factor, para que a
   "Escala de Texto" do Customizer continue a governar a página inteira.

     xl  título principal do quarto (h1)
     lg  títulos de secção (h2)
     md  títulos de cartão e de tab (h3)
     base corpo de texto, preços, botões
     sm  metadados, labels, legendas
     xs  texto auxiliar, contadores, estados
   -------------------------------------------------------------------------- */

/* --- h1: o título do quarto é o maior texto da página ------------------- */
body.wp-hotel-booking-page:not(.tp-themes-premium) h1,
body.wp-hotel-booking-page:not(.tp-themes-premium) .hb_single_room_title,
body.wp-hotel-booking-page:not(.tp-themes-premium) .hb_search_room_title {
    font-size: var(--wphb-text-xl) !important;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--text-primary);
}

/* --- h2: títulos de secção, um degrau abaixo ---------------------------- */
body.wp-hotel-booking-page:not(.tp-themes-premium) h2,
body.wp-hotel-booking-page:not(.tp-themes-premium) .hb_related_other_room .title,
body.wp-hotel-booking-page:not(.tp-themes-premium) .hb-room-review-title {
    font-size: var(--wphb-text-lg) !important;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

/* --- h3: títulos de cartão e de tab, dois degraus abaixo ---------------- */
body.wp-hotel-booking-page:not(.tp-themes-premium) h3,
body.wp-hotel-booking-page:not(.tp-themes-premium) .hb-room-name,
body.wp-hotel-booking-page:not(.tp-themes-premium) .hb-room-title {
    font-size: var(--wphb-text-md) !important;
    font-weight: 500;
    line-height: 1.35;
}

body.wp-hotel-booking-page:not(.tp-themes-premium) .hb_single_room_tabs a {
    font-size: var(--wphb-text-sm);
}

/* --- h4 a h6: ruído estrutural do plugin, alinhado com o corpo ---------- */
body.wp-hotel-booking-page:not(.tp-themes-premium) h4,
body.wp-hotel-booking-page:not(.tp-themes-premium) h5,
body.wp-hotel-booking-page:not(.tp-themes-premium) h6 {
    font-size: var(--wphb-text-base) !important;
    font-weight: 500;
    line-height: 1.4;
}

/* --- corpo e utilitários -------------------------------------------------
   .hb-room-price fica deliberadamente de fora: o preço é a informação
   comercialmente decisiva do cartão e é tratado na secção 14.5 com um degrau
   acima do corpo. Incluí-lo aqui, com !important e especificidade de body,
   rebaixava-o ao mesmo tamanho do texto que o descreve — anulando na prática
   o destaque que a secção 14.5 lhe dá. */
body.wp-hotel-booking-page:not(.tp-themes-premium) .price,
body.wp-hotel-booking-page:not(.tp-themes-premium) .wphb-button {
    font-size: var(--wphb-text-base) !important;
}

body.wp-hotel-booking-page:not(.tp-themes-premium) .radha-room-meta-label,
body.wp-hotel-booking-page:not(.tp-themes-premium) .hb-form-field label,
body.wp-hotel-booking-page:not(.tp-themes-premium) .hb_single_room_gallery figcaption {
    font-size: var(--wphb-text-xs) !important;
    letter-spacing: 0.02em;
}

body.wp-hotel-booking-page:not(.tp-themes-premium) .radha-room-meta-value,
body.wp-hotel-booking-page:not(.tp-themes-premium) .hb-rating-count {
    font-size: var(--wphb-text-sm) !important;
}

/*
 * O título do quarto (.hb_single_room_title) fica deliberadamente de fora
 * desta hierarquia: é o único h1 da página, mas numa coluna de largura média
 * o degrau xl reserva mais linha do que o texto que o rodeia. O seu tamanho
 * é definido na secção 6, onde a regra tem o mesmo peso da genérica de h1
 * acima e por isso não é preciso reforçá-la aqui. */

/* --------------------------------------------------------------------------
   17.3. PAGINAÇÃO POR BAIXO DA GRELHA
   A <ul class="rooms"> do plugin é display:flex com wrap. O <nav> da
   paginação é agora renderizado fora dela (ver archive-room.php), mas o
   plugin também injecta resultados por AJAX noutros templates — estas
   regras garantem o mesmo resultado em qualquer caso.
   -------------------------------------------------------------------------- */
body.wp-hotel-booking-page:not(.tp-themes-premium) .rooms-pagination,
body.wp-hotel-booking-page:not(.tp-themes-premium) .hb-search-pagination,
body.wp-hotel-booking-page:not(.tp-themes-premium) .radha-search-pagination {
    clear: both;
    display: block;
    float: none;
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
    margin: 1.5rem 0 0;
    padding: 0;
    text-align: center;
}

body.wp-hotel-booking-page:not(.tp-themes-premium) .rooms-pagination ul,
body.wp-hotel-booking-page:not(.tp-themes-premium) .hb-search-pagination ul,
body.wp-hotel-booking-page:not(.tp-hemes-premium) .radha-search-pagination ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

body.wp-hotel-booking-page:not(.tp-themes-premium) .rooms-pagination li,
body.wp-hotel-booking-page:not(.tp-themes-premium) .hb-search-pagination li,
body.wp-hotel-booking-page:not(.tp-themes-premium) .radha-search-pagination li {
    display: inline-block;
    margin: 0;
    padding: 0;
    font-size: var(--wphb-text-sm);
}

/* Os <li> que o paginate_links cria recebem a classe .page-numbers; o plugin
   também usa essa classe nos próprios <a>, daí separarem-se as regras. */
body.wp-hotel-booking-page:not(.tp-themes-premium) .rooms-pagination .page-numbers,
body.wp-hotel-booking-page:not(.tp-themes-premium) .hb-search-pagination .page-numbers,
body.wp-hotel-booking-page:not(.tp-themes-premium) .radha-search-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    min-height: 2rem;
    padding: 0.25rem 0.625rem;
    border: 1px solid var(--border-subtle);
    border-radius: 2px;
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--wphb-text-sm);
    line-height: 1.2;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

body.wp-hotel-booking-page:not(.tp-themes-premium) .rooms-pagination .page-numbers:hover,
body.wp-hotel-booking-page:not(.tp-themes-premium) .rooms-pagination .page-numbers:focus-visible {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

body.wp-hotel-booking-page:not(.tp-themes-premium) .rooms-pagination .page-numbers.current,
body.wp-hotel-booking-page:not(.tp-themes-premium) .hb-search-pagination .page-numbers.current,
body.wp-hotel-booking-page:not(.tp-themes-premium) .radha-search-pagination .page-numbers.current {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
}

/* Prev/Next como texto, não como caixa — são acções, não páginas. */
body.wp-hotel-booking-page:not(.tp-themes-premium) .rooms-pagination .page-numbers.next,
body.wp-hotel-booking-page:not(.tp-themes-premium) .rooms-pagination .page-numbers.prev {
    min-width: 0;
    border-color: transparent;
}

/* Sem o .wp-hotel-booking-page no body (ex.: AJAX), as mesmas regras
   aplicam-se pela classe da página. */
.radha-archive-room .rooms-pagination,
.radha-search-page .rooms-pagination,
.radha-search-page .hb-search-pagination {
    clear: both;
    display: block;
    width: 100%;
    margin: 1.5rem 0 0;
    text-align: center;
}
/* ==========================================================================
   18. LISTAGEM DE QUARTOS — GRELHA, CARTÕES E METADADOS
   ==========================================================================
   A listagem de quartos aparece em duas contextos com markups diferentes
   (o archive de quartos e a página de busca), mas partilham as mesmas
   classes. Antes estas regras viviam em home.css e booking.css, folhas que
   não são carregadas em todas as páginas: o archive de quartos, por
   exemplo, não carrega home.css, e ficava sem grelha, com os <li> do
   <ul class="hb-room-meta"> a mostrar marcadores de lista e as miniaturas
   sem proporção fixa.

   Passam aqui para que a listagem tenha a mesma appearance e a mesma
   resposta à "Escala de Texto" em qualquer página do plugin.
   ========================================================================== */

/* --------------------------------------------------------------------------
   18.1. GRELHA
   O plugin dimensiona as colunas do <ul class="rooms"> com o seletor
   `.rooms.hb-catalog-column-N > .hb_room`, mas o override de archive do tema
   (wp-hotel-booking/archive-room.php) gera <li class="hb-room-item">, que
   essa regra não alcança. Sem largura declarada, os cartões encolhem ao
   conteúdo e a grelha de 4 colunas nunca chega a formar-se.

   Declara-se aqui a grelha em auto-fit, que dispensa repetir uma regra por
   número de colunas e continua a responder ao número que o utilizador
   escolheu nas definições do plugin através de .hb-catalog-column-*.
   -------------------------------------------------------------------------- */
.radha-archive-room .rooms,
.radha-archive-room ul.rooms {
    display: grid;

    /*
     * A largura mínima é uma variável, não um número fixo, e o número de
     * colunas é deixado ao auto-fit.
     *
     * Declarar `repeat(4, 1fr)` para .hb-catalog-column-4 obriga a quatro
     * colunas mesmo quando o contentor não tem largura para elas: com 1200px
     * de contentor e ~5rem de respiro de cada lado sobram ~1040px, o que dá
     * cartões de ~245px. O bloco de informações — título, capacidade,
     * crianças, preço, select e botão — partia-se em três linhas e o cartão
     * deixava de se ler.
     *
     * Com auto-fit, 4 colunas só se formam quando cada uma atinge a
     * minimum; caso contrário formam-se 3, que é o que cabe. A escolha do
     * administrador continua a ser respeitada na hierarquia, apenas deixa
     * de ser um número rígido.
     *
     * min(100%, ...) impede que a coluna mínima ultrapasse o contentor em
     * ecrãs estreitos, o que faria o cartão transbordar na horizontal.
     */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--radha-room-min, 280px)), 1fr));
    gap: 1.5rem;
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

/* A opção "colunas por página" do plugin traduz-se na largura mínima, e não
   numa contagem fixa: mais colunas pedidas, cartões mais estreitos — mas
   nunca abaixo do ponto em que o bloco de informações deixa de caber. */
.radha-archive-room .rooms.hb-catalog-column-2 {
    --radha-room-min: 340px;
}

.radha-archive-room .rooms.hb-catalog-column-3 {
    --radha-room-min: 280px;
}

.radha-archive-room .rooms.hb-catalog-column-4 {
    --radha-room-min: 250px;
}

.radha-archive-room .rooms.hb-catalog-column-5 {
    --radha-room-min: 215px;
}

/* O plugin dá `padding: 0 15px` e `margin: 0 0 30px` aos itens da lista;
   numa grelha o espaçamento é feito pelo `gap`, e o padding duplicava-o. */
.radha-archive-room .rooms > .hb-room-item,
.radha-archive-room .rooms > .hb_room {
    width: auto;
    margin: 0;
    padding: 0;
}

/* --------------------------------------------------------------------------
   18.2. CARTÃO
   Superfície e respiro sobrepostos pela secção 15.2 (padding: 0.75rem).
   O objectivo é o mesmo: moldura perceptível, sem ocupar mais uma linha do
   que o conteúdo.
   -------------------------------------------------------------------------- */
.hb-room-item.radha-room-card {
    display: flex;
    flex-direction: column;
    /*
     * O padding do cartão éposto a zero de propósito: quem o dá é o bloco
     * .hb-room-info (18.4), para que a miniatura fique encostada às
     * extremidades da moldura em vez de flutuar dentro de um anel de
     * espaço branco. A secção 15.2 aplica 0.75rem ao <li>, e sem esta
     * declaração o conteúdo ficava com o dobro do respiro pretendido.
     */
    padding: 0;
    background-color: var(--wphb-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    overflow: hidden;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.hb-room-item.radha-room-card:hover {
    border-color: var(--accent-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* --------------------------------------------------------------------------
   18.3. MINIATURA
   Proporção fixa e recorte, para que cartões com imagens de dimensões
   diferentes fiquem com a mesma altura dentro da grelha.
   -------------------------------------------------------------------------- */
.hb-room-item .hb-room-thumbnail,
.hb-room-item .radha-search-room-thumbnail,
.hb-room-item .radha-room-thumbnail {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin: 0;
    border-radius: 0;
    background-color: var(--wphb-accent-softer);
}

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

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

/* --------------------------------------------------------------------------
   18.4. BLOCO DE INFORMAÇÃO E TÍTULO
   -------------------------------------------------------------------------- */
.hb-room-item .hb-room-info {
    display: flex;
    flex-direction: column;
    flex: 1;

    /*
     * min-height: sem ele, um cartão só com título e preço fica com o bloco
     * de informações colado à miniatura e o cartão não tem altura de leitura.
     * Estica-se para que o preço e o botão fiquem encostados ao fundo e o
     * cartão pareça uma peça só.
     */
    min-height: 11rem;
    padding: 0.875rem 1rem 1rem;
    font-size: var(--wphb-text-base);
    line-height: 1.5;
}

.hb-room-item .hb-room-name.radha-room-name {
    margin: 0 0 0.625rem;
    font-size: var(--wphb-text-md);
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-primary);
}

/* Numa linha com cartões de altura desigual, o título de duas linhas sobe o
   bloco de informações inteiro e desalinha preço e botão com os cartões
   vizinhos. Quatro linhas é o limite em que o título deixa de ser lido. */
.hb-room-item .hb-room-name a {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hb-room-item .hb-room-name a {
    color: inherit;
    text-decoration: none;
}

.hb-room-item .hb-room-name a:hover {
    color: var(--accent-color);
}

/* --------------------------------------------------------------------------
   18.5. METADADOS
   O plugin declara a <ul class="hb-room-meta"> como <ul>, que por omissão
   mostra marcadores e empilha os itens na vertical. Sem esta regra, a
   listagem de quartos exibe uma lista com marcas de lista antes de cada
   capacidade, preço e quantidade.
   -------------------------------------------------------------------------- */
.hb-room-item .hb-room-meta {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 0.75rem 1.25rem;

    /*
     * flex: 1 empurra os metadados e o botão para o fundo do bloco, alinhando
     * o "Reserve" com o dos cartões vizinhos mesmo quando um deles tem mais
     * linhas de metadados que outro.
     */
    flex: 1;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--wphb-text-sm);
}

.hb-room-item .hb-room-meta > li {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    flex: 1 1 5rem;
    min-width: 5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A quantidade e o botão ocupam a linha inteira: um select de 5.5rem ao lado
   do botão deixava ambos espremidos e o cartão com ar de caixa de correio. */
.hb-room-item .hb-room-meta > li.hb_search_quantity,
.hb-room-item .hb-room-meta > li.hb_search_add_to_cart {
    flex: 1 1 100%;
}

.hb-room-item .hb-room-meta > li.hb_search_quantity {
    margin-top: 0.25rem;
}

.hb-room-item .radha-room-meta-label {
    font-size: var(--wphb-text-xs);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.hb-room-item .radha-room-meta-value {
    font-size: var(--wphb-text-sm);
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-primary);
}

.hb-room-item .radha-room-meta-extra {
    font-size: var(--wphb-text-xs);
    color: var(--text-secondary);
}

/* O preço é o elemento que dá sentido comercial ao cartão: merece um degrau
   acima do resto dos metadados e a cor de destaque. */
.hb-room-item .hb-room-price,
.hb-room-item .radha-room-price {
    font-size: var(--wphb-text-md) !important;
    font-weight: 600;
    color: var(--accent-color);
}

.hb-room-item .hb-room-price .hb-room-price-unit,
.hb-room-item .radha-room-price .hb-room-price-unit,
.hb-room-item .hb-room-price .tax-text {
    font-size: var(--wphb-text-xs);
    font-weight: 400;
    color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   18.6. QUANTIDADE E BOTÃO DE RESERVA
   -------------------------------------------------------------------------- */
.hb-room-item .radha-room-quantity-select {
    width: 100%;
    min-width: 5.5rem;
    padding: 0.25rem 1.5rem 0.25rem 0.5rem;
    font-size: var(--wphb-text-sm);
    font-weight: 500;
    color: var(--text-primary);
    background-color: #ffffff;
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    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.5rem center;
}

.hb-room-item .radha-room-quantity-select:focus {
    border-color: var(--accent-color);
    outline: none;
    box-shadow: 0 0 0 2px var(--wphb-accent-soft);
}

/* O botão é renderizado como <a> no archive (não há formulário), por isso
   precisa de receber explicitamente a área de clique e o centramento. */
.hb-room-item .radha-add-to-cart__link,
.hb-room-item .hb_add_to_cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: var(--wphb-text-sm);
    font-weight: 500;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    border-radius: 2px;
    background-color: var(--accent-color);
    color: var(--wphb-accent-contrast);
    transition: opacity 0.2s ease;
}

.hb-room-item .radha-add-to-cart__link:hover,
.hb-room-item .hb_add_to_cart:hover {
    opacity: 0.88;
    color: var(--wphb-accent-contrast);
}

.hb-room-item .radha-add-to-cart__link:focus-visible,
.hb-room-item .hb_add_to_cart:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   18.7. SELO "DESTAQUE"
   O plugin estiliza o selo apenas como `.rooms .hb_room .feature`, que não
   corresponde ao <li class="hb-room-item"> do archive. Sem cor nem forma,
   o texto "Destaque" aparece colado ao fim do cartão.
   -------------------------------------------------------------------------- */
.hb-room-item .feature,
.radha-room-card .feature {
    align-self: flex-start;
    margin: 0.5rem 0.75rem 0;
    padding: 0.125rem 0.5rem;
    font-size: var(--wphb-text-xs);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent-color);
    background-color: var(--wphb-accent-soft);
    border-radius: 2px;
}

/* --------------------------------------------------------------------------
   18.8. TÍTULO DA PÁGINA DE QUARTOS
   Introduzido em wp-hotel-booking/archive-room.php. Sem esta regra, o <h1>
   herdaria o tamanho do h1 do tema, dimensionado para a home, e ficaria
   desproporcionado acima de uma grelha de cartões.
   -------------------------------------------------------------------------- */
.radha-archive-title {
    margin: 0 0 1.25rem;
    padding: 0;
    font-size: var(--wphb-text-lg);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   18.9. ESTADOS VAZIOS
   -------------------------------------------------------------------------- */
.radha-no-rooms {
    padding: 2rem 1.25rem;
    text-align: center;
    background-color: var(--wphb-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
}

.radha-no-rooms p {
    margin: 0 0 0.75rem;
    font-size: var(--wphb-text-base);
    color: var(--text-secondary);
}

/* ==========================================================================
   19. PÁGINA DE QUARTOS — SHORTCODE [hotel_booking_rooms]
   ==========================================================================
   Esta página é montada pelo shortcode e entra no tema por page.php, dentro
   de .page-body.entry-content. Duas consequências que a afastam do resto do
   site, e que são corrigidas aqui:

   1. Largura. .entry-content está limitado a 720px em content.css, valor
      calibrado para texto de artigo. O plugin espera o contentor largo do
      tema (1200px) para dispor o filtro lateral ao lado da grelha; dentro de
      720px, filtro e quartos empilham-se e a grelha fica com uma coluna
      estreita.

   2. Heranças de artigo. As regras de .entry-content dão margem lateral de
      1.75rem a todas as <ul>, marcador a todos os <li> e sublinhado a todos
      os <a>. São-appropriate para um post e desadequadas para uma listagem
      de cartões: as listas de metadados e de tipos de quarto aparecem com
      marcas e os títulos de quarto ficam sublinhados.

   O markup vem de templates/content-room.php do plugin, que é um terceiro
   variante — distinto do archive (li.hb-room-item) e dos resultados de
   busca (li.hb_room.radha-search-room-item). Cada um recebe aqui as suas
   regras, partilhando os mesmos tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   19.1. LARGURA E HERANÇAS DE ARTIGO
   -------------------------------------------------------------------------- */
body.wp-hotel-booking-page.wp-hotel-booking-rooms .radha-page-content .page-body,
body.wp-hotel-booking-page.wp-hotel-booking-rooms .entry-content {
    max-width: none;
    width: 100%;
}

/* O plugin embrulha tudo em .room-container, que declara display:flex com
   max-width 1200px. Fica com a largura do contentor do tema e com as duas
   colunas (filtro + resultados) em ecrãs largos. */
body.wp-hotel-booking-page.wp-hotel-booking-rooms .room-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

@media (min-width: 900px) {
    body.wp-hotel-booking-page.wp-hotel-booking-rooms .room-container {
        grid-template-columns: 260px minmax(0, 1fr);
        gap: 2rem;
    }
}

/* O plugin aplica `margin: 0 -15px` ao bloco dos resultados para compensar
   o padding lateral do body; dentro do contentor do tema esse escapamento
   negativo empurra a grelha para fora da moldura. */
body.wp-hotel-booking-page.wp-hotel-booking-rooms .room-container > div:nth-child(2) {
    margin: 0;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .room-content {
    width: 100%;
    min-width: 0;
}

/* Listas e links dentro do plugin deixam de herdar as regras de artigo. */
body.wp-hotel-booking-page.wp-hotel-booking-rooms .room-container ul,
body.wp-hotel-booking-page.wp-hotel-booking-rooms .room-container ol {
    margin-left: 0;
    padding-left: 0;
    list-style: none;
    line-height: 1.5;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .room-container li {
    margin-bottom: 0;
    color: inherit;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .room-container a {
    text-decoration: none;
    color: inherit;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .room-container a:hover {
    text-decoration: none;
    color: var(--accent-color);
}

/* --------------------------------------------------------------------------
   19.2. FORMULÁRIO DE DISPONIBILIDADE
   -------------------------------------------------------------------------- */
body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-rooms-search {
    margin: 0 0 1.5rem;
    padding: 1rem;
    background-color: var(--wphb-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-rooms-search > h3 {
    margin: 0 0 0.75rem;
    padding: 0;
    font-size: var(--wphb-text-md);
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-rooms-search .hb-form-table {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    align-items: end;
    max-width: none;
    margin: 0;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-rooms-search .hb-form-field,
body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-rooms-search .hb-form-field-input {
    margin: 0;
    padding: 0;
    min-width: 0;
}

/* O plugin posiciona a lista de números (+/-) em absoluto sobre o input; com
   os campos lado a lado, o valor ficava por baixo da caixa. */
body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-rooms-search .hb-form-field-list {
    display: none;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-rooms-search label {
    display: block;
    margin: 0 0 0.25rem;
    padding: 0;
    font-size: var(--wphb-text-xs);
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-secondary);
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-rooms-search input[type="text"],
body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-rooms-search input[type="number"] {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0.375rem 0.5rem;
    font-size: var(--wphb-text-base);
    line-height: 1.4;
    color: var(--text-primary);
    background-color: var(--wphb-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-rooms-search input:focus {
    border-color: var(--accent-color);
    outline: none;
    box-shadow: 0 0 0 2px var(--wphb-accent-soft);
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .rooms-check-avaibility {
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0.5rem 1rem;
    font-size: var(--wphb-text-sm);
    font-weight: 600;
    line-height: 1.3;
    text-transform: none;
    color: var(--wphb-accent-contrast);
    background-color: var(--accent-color);
    border: none;
    border-radius: 2px;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .rooms-check-avaibility:hover {
    opacity: 0.88;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .rooms-check-avaibility:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   19.3. FILTRO LATERAL
   -------------------------------------------------------------------------- */
body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-search-filter {
    min-width: 0;
    padding: 0;
    background-color: var(--wphb-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-search-filter-inner {
    padding: 1rem;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-search-filter-inner > h3 {
    margin: 0 0 0.875rem;
    padding: 0;
    font-size: var(--wphb-text-md);
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-primary);
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-search-filter h4,
body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-search-filter .title {
    margin: 1rem 0 0.5rem;
    padding: 0;
    font-size: var(--wphb-text-xs);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .hb-price-field > .title {
    margin-top: 0;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .hb-search-price > div {
    font-size: var(--wphb-text-xs);
    color: var(--text-secondary);
}

/* Itens do filtro: etiqueta à esquerda, contagem à direita. */
body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-search-filter .list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.1875rem 0;
    font-size: var(--wphb-text-sm);
    line-height: 1.4;
    color: var(--text-primary);
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-search-filter .list-item label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    font-size: var(--wphb-text-sm);
    font-weight: 400;
    color: var(--text-primary);
    cursor: pointer;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-search-filter input[type="checkbox"] {
    flex: 0 0 auto;
    width: 1rem;
    height: 1rem;
    margin: 0;
    cursor: pointer;
    accent-color: var(--accent-color);
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-search-filter .rating-number,
body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-search-filter .room-type-number {
    flex: 0 0 auto;
    font-size: var(--wphb-text-xs);
    color: var(--text-secondary);
}

/* Botões de acção do filtro, em largura total para não ficarem soltos. */
body.wp-hotel-booking-page.wp-hotel-booking-rooms .clear-reset-filter {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1.25rem 0 0;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .hb-room-filter-btn,
body.wp-hotel-booking-page.wp-hotel-booking-rooms .clear-filter button {
    width: 100%;
    margin: 0;
    padding: 0.5rem 0.75rem;
    font-family: inherit;
    font-size: var(--wphb-text-sm);
    font-weight: 500;
    line-height: 1.3;
    text-transform: none;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .hb-room-filter-btn {
    color: var(--wphb-accent-contrast);
    background-color: var(--accent-color);
    border: 1px solid var(--accent-color);
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .hb-room-filter-btn:hover {
    opacity: 0.88;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .clear-filter button {
    color: var(--text-secondary);
    background-color: transparent;
    border: 1px solid var(--border-subtle);
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .clear-filter button:hover {
    color: var(--accent-color);
    border-color: var(--accent-color);
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .hb-room-filter-btn:focus-visible,
body.wp-hotel-booking-page.wp-hotel-booking-rooms .clear-filter button:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   19.4. BARRA DE ORDENAÇÃO E CONTAGEM
   -------------------------------------------------------------------------- */
body.wp-hotel-booking-page.wp-hotel-booking-rooms .sort-by-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 1rem;
    padding: 0 0 0.75rem;
    border-bottom: 1px solid var(--border-subtle);
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .show-number {
    margin: 0;
    font-size: var(--wphb-text-sm);
    line-height: 1.4;
    color: var(--text-secondary);
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .sort-by {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: var(--wphb-text-sm);
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .sort-by__label {
    color: var(--text-secondary);
    white-space: nowrap;
}

/* O seletor de ordenação é um botão com lista absolutely-positionada; sem
   position no contentor, a lista fluía no fluxo e empurrava a grelha. */
body.wp-hotel-booking-page.wp-hotel-booking-rooms .sort-by .select {
    position: relative;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .sort-by .toggle {
    padding: 0.3125rem 1.5rem 0.3125rem 0.625rem;
    font-size: var(--wphb-text-sm);
    line-height: 1.3;
    color: var(--text-primary);
    background-color: #ffffff;
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    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.5rem center;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .sort-by .toggle:hover {
    border-color: var(--accent-color);
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .sort-by__list {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    z-index: 20;
    min-width: 100%;
    margin: 0;
    padding: 0.25rem 0;
    background-color: #ffffff;
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .sort-by__list-item {
    padding: 0.375rem 0.625rem;
    font-size: var(--wphb-text-sm);
    line-height: 1.3;
    color: var(--text-primary);
    white-space: nowrap;
    cursor: pointer;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .sort-by__list-item:hover {
    color: var(--accent-color);
    background-color: var(--wphb-accent-softer);
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .sort-by__list-item.active {
    color: var(--accent-color);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   19.5. GRELHA DE QUARTOS
   O plugin dimensiona as colunas com `.rooms.hb-catalog-column-N > .hb_room`
   e dá `padding: 0 15px` / `margin-bottom: 30px` a cada item. Numa grelha
   o espaçamento faz-se pelo gap, e o padding herdado do plugin duplicava-o.
   -------------------------------------------------------------------------- */
body.wp-hotel-booking-page.wp-hotel-booking-rooms .room-content .rooms {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow: visible;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .room-content .rooms > .hb_room {
    width: auto;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    overflow: hidden;
    background-color: var(--wphb-surface);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .room-content .rooms > .hb_room:hover {
    border-color: var(--accent-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .room-content .rooms > .hb_room > .summary {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
}

/* --------------------------------------------------------------------------
   19.6. CONTEÚDO DO CARTÃO
   -------------------------------------------------------------------------- */
body.wp-hotel-booking-page.wp-hotel-booking-rooms .room-content .radha-room-thumbnail {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin: 0;
    border-radius: 0;
    background-color: var(--wphb-accent-softer);
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .room-content .radha-room-thumbnail img,
body.wp-hotel-booking-page.wp-hotel-booking-rooms .room-content .radha-room-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .room-content .hb_room:hover .radha-room-image {
    transform: scale(1.03);
}

/* O .room-rating-featured do plugin é display:flex sem altura definida,
   pelo que fica com uma faixa de espaço vazio quando o quarto não tem
   avaliação nem selo. */
body.wp-hotel-booking-page.wp-hotel-booking-rooms .room-content .room-rating-featured {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    min-height: 0;
    margin: 0;
    padding: 0;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .room-content .room-rating-featured:empty {
    display: none;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .room-content .feature {
    margin: 0.75rem 0.75rem 0;
    padding: 0.125rem 0.5rem;
    font-size: var(--wphb-text-xs);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent-color);
    background-color: var(--wphb-accent-soft);
    border-radius: 2px;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .room-content .hb-room-title {
    margin: 0.75rem 0.75rem 0.25rem;
    padding: 0;
    font-size: var(--wphb-text-md);
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-primary);
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .room-content .hb-room-title a {
    color: inherit;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .room-content .hb-room-title a:hover {
    color: var(--accent-color);
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .room-content .hb-room-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.375rem;
    margin: auto 0.75rem 0.75rem;
    padding: 0.75rem 0 0;
    font-size: var(--wphb-text-md) !important;
    line-height: 1.3;
    color: var(--text-primary);
    border-top: 1px solid var(--border-subtle);
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .room-content .hb-room-price .hb-room-price-amount {
    font-size: var(--wphb-text-md);
    font-weight: 600;
    color: var(--accent-color);
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .room-content .hb-room-price .hb-room-price-unit,
body.wp-hotel-booking-page.wp-hotel-booking-rooms .room-content .hb-room-price .tax-text {
    font-size: var(--wphb-text-xs);
    font-weight: 400;
    color: var(--text-secondary);
    margin-left: 0;
}

/* --------------------------------------------------------------------------
   19.7. MENSAGEM DE LISTAGEM VAZIA
   O shortcode escreve "No room found" directamente na saída, sem elemento
   que o possa posicionar nem dar cor.
   -------------------------------------------------------------------------- */
body.wp-hotel-booking-page.wp-hotel-booking-rooms .room-content > .rooms:empty + * {
    color: var(--text-secondary);
}

/* ==========================================================================
   20. INTERACÇÃO — ESTADOS, FOCO E ÁREA DE TOQUE
   ==========================================================================
   Complemento da secção 19. O plugin desenha os controlos com os valores
   por omissão da sua biblioteca e sem qualquer estado de foco: o contorno
   de foco é removido a propósito (`:focus{outline:none}`), as caixas são
   de 18px e os alvos de toque não chegam aos 44px recomendados pela WCAG
   2.5.5 em ecrãs tácteis.

   Todos os estados aqui descritos usam as mesmas cores que a secção 19 já
   aplica: a interacção passa a responder ao Customizer e não a verdes e
   azuis fixos do plugin. Os estados que o script
   assets/js/rooms-page.js acrescenta (.is-open, .is-focused, .is-disabled)
   dependem dele e não têm efeito se o script não carregar.
   ========================================================================== */

/* Um único anel de foco, aplicado a todos os controlos da página. Usa
   outline e não box-shadow para não ser cortado por overflow:hidden nos
   cartões. */
body.wp-hotel-booking-page.wp-hotel-booking-rooms :is(
        input[type="text"],
        input[type="number"],
        button,
        a,
        .toggle,
        .sort-by__list-item,
        label
    ):focus-visible,
body.wp-hotel-booking-page.wp-hotel-booking-rooms :is(
        input[type="text"],
        input[type="number"],
        button,
        .toggle,
        .sort-by__list-item
    ):focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* O plugin remove o contorno com `:focus{outline:none}` e aplica
   `border:none` aos botaes; o `:focus` acima repõe o anel, mas nas caixas
   de texto o contorno desenhava-se sobre o texto. */
body.wp-hotel-booking-page.wp-hotel-booking-rooms input[type="text"]:focus,
body.wp-hotel-booking-page.wp-hotel-booking-rooms input[type="number"]:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px var(--wphb-accent-soft);
}

/* --------------------------------------------------------------------------
   20.1. CAMPOS DE DATA E NÚMERO
   -------------------------------------------------------------------------- */
body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-rooms-search input[type="text"] {
    cursor: pointer;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-rooms-search input[type="number"] {
    cursor: text;
}

/* As setas nativas do input number duplicam os botões +/- que o plugin
   emite, e numa caixa estreita comem metade da largura útil. */
body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-rooms-search input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-rooms-search input[type="number"]::-webkit-outer-spin-button,
body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-rooms-search input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* O <span class="label"> dentro de .hb-form-field-list guarda markup
   escapado (`<label>Adultos</label>`) e é duplicado do rótulo visível. */
body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-rooms-search .hb-form-field-list .label {
    display: none;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-rooms-search .hb-form-field-list {
    display: flex;
    align-items: stretch;
    gap: 0.25rem;
    position: static;
    margin: 0;
    background: none;
    border: none;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-rooms-search .number-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem;
    width: 100%;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
}

/* O botão de decremento some quando o valor está no mínimo. */
body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-rooms-search .number-icons {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.75rem;
    height: 1.75rem;
    color: var(--text-secondary);
    background-color: var(--wphb-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-rooms-search .number-icons:hover {
    color: var(--accent-color);
    border-color: var(--accent-color);
    background-color: var(--wphb-accent-softer);
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-rooms-search .number-icons.is-disabled,
body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-rooms-search .number-icons[aria-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-rooms-search .number-icons.is-disabled:hover,
body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-rooms-search .number-icons[aria-disabled="true"]:hover {
    color: var(--text-secondary);
    border-color: var(--border-subtle);
    background-color: var(--wphb-surface);
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-rooms-search .hb-number-field-value {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    font-size: var(--wphb-text-sm);
    font-weight: 600;
    color: var(--text-primary);
}

/* --------------------------------------------------------------------------
   20.2. CHECKBOXES DO FILTRO
   -------------------------------------------------------------------------- */
body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-search-filter input[type="checkbox"] {
    position: relative;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    cursor: pointer;
    accent-color: var(--accent-color);
    transition: transform 0.15s ease;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-search-filter input[type="checkbox"]:active {
    transform: scale(0.92);
}

/* O item inteiro é clicável, não só a caixa: o plugin põe o input dentro de
   um <label>, por isso o texto já é área de clique — falta é torná-lo
   visualmente percetível. */
body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-search-filter .list-item:hover {
    color: var(--accent-color);
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-search-filter .list-item label {
    padding: 0.125rem 0;
    border-radius: 2px;
    transition: color 0.2s ease;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-search-filter .list-item input[type="checkbox"]:focus-visible + span {
    text-decoration: underline;
    text-underline-offset: 2px;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-search-filter .room-type-number a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    font-size: var(--wphb-text-xs);
    color: var(--text-secondary);
    background-color: var(--wphb-accent-softer);
    border-radius: 999px;
    transition: color 0.2s ease, background-color 0.2s ease;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-search-filter .room-type-number a:hover {
    color: var(--wphb-accent-contrast);
    background-color: var(--accent-color);
}

/* --------------------------------------------------------------------------
   20.3. SLIDER DE PREÇO (noUiSlider)
   O plugin estiliza-o com #e3e3e3 / #111 fixos. Aqui passa a usar a cor de
   destaque e ganha alças com área de toque suficiente.
   -------------------------------------------------------------------------- */
body.wp-hotel-booking-page.wp-hotel-booking-rooms .hb-search-price .noUi-target {
    height: 0.25rem;
    background: var(--border-subtle);
    border: none;
    border-radius: 999px;
    box-shadow: none;
    cursor: pointer;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .hb-search-price .noUi-connect {
    background: var(--accent-color);
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .hb-search-price .noUi-handle {
    width: 1.125rem;
    height: 1.125rem;
    right: -0.5625rem;
    top: -0.4375rem;
    border: 2px solid var(--accent-color);
    border-radius: 50%;
    background-color: var(--wphb-surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    cursor: grab;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .hb-search-price .noUi-handle:hover {
    box-shadow: 0 0 0 5px var(--wphb-accent-soft);
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .hb-search-price .noUi-handle:active {
    cursor: grabbing;
    transform: scale(1.1);
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .hb-search-price .noUi-handle:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   20.4. ORDENAR POR
   O plugin abre a lista apenas com :hover, o que a torna inacessível por
   teclado e fecha-se mal o rato sai da área. O script rooms-page.js
   acrescenta a classe .is-open; o :focus-within cobre o caso de o script
   não carregar, mantendo o menu utilizável por teclado.
   -------------------------------------------------------------------------- */
body.wp-hotel-booking-page.wp-hotel-booking-rooms .sort-by-wrapper .toggle {
    position: relative;
    min-width: 0;
    padding: 0.3125rem 1.5rem 0.3125rem 0.625rem;
    font-family: inherit;
    font-weight: 500;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .sort-by-wrapper .toggle::after {
    display: none;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .sort-by-wrapper .toggle:hover {
    border-color: var(--accent-color);
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .sort-by-wrapper .select:hover ul {
    display: none;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .sort-by-wrapper .select.is-open ul,
body.wp-hotel-booking-page.wp-hotel-booking-rooms .sort-by-wrapper .select:focus-within ul {
    display: block;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .sort-by-wrapper ul {
    position: absolute;
    top: calc(100% + 0.25rem);
    right: 0;
    z-index: 30;
    min-width: 100%;
    margin: 0;
    padding: 0.25rem 0;
    background: #ffffff;
    border: 1px solid var(--border-subtle);
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    animation: radha-sort-fade 0.15s ease;
}

@keyframes radha-sort-fade {
    from {
        opacity: 0;
        transform: translateY(-0.25rem);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .sort-by-wrapper ul li {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--text-primary);
    cursor: pointer;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .sort-by-wrapper ul li:hover,
body.wp-hotel-booking-page.wp-hotel-booking-rooms .sort-by-wrapper ul li.is-focused {
    color: var(--accent-color);
    background-color: var(--wphb-accent-softer);
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .sort-by-wrapper ul li.active {
    color: var(--accent-color);
    font-weight: 600;
    background-color: var(--wphb-accent-soft);
}

/* --------------------------------------------------------------------------
   20.5. BOTÕES
   -------------------------------------------------------------------------- */
body.wp-hotel-booking-page.wp-hotel-booking-rooms .rooms-check-avaibility:active,
body.wp-hotel-booking-page.wp-hotel-booking-rooms .hb-room-filter-btn:active,
body.wp-hotel-booking-page.wp-hotel-booking-rooms .clear-filter button:active {
    transform: translateY(1px);
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   20.6. CHIPS DE FILTRO ACTIVO
   Contentor criado por rooms-page.js, que o filter-by.js do plugin escreve
   mas não gera. Sem as regras seguintes, os chips herdariam o
   list-style e a margem lateral de .entry-content.
   -------------------------------------------------------------------------- */
body.wp-hotel-booking-page.wp-hotel-booking-rooms .hb-selection-field {
    margin: 0 0 1rem;
    padding-bottom: 0.875rem;
    border-bottom: 1px solid var(--border-subtle);
}

/* Sem filtros aplicados não há nada a listar: esconder o título e a linha
   divisória, para não deixar um bloco vazio no topo do formulário. A classe
   é mantida por rooms-page.js através de um MutationObserver. */
body.wp-hotel-booking-page.wp-hotel-booking-rooms .hb-selection-field.is-empty {
    display: none;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .hb-selection-field .title {
    margin: 0 0 0.5rem;
    font-size: var(--wphb-text-xs);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .hb-selection-field .list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .hb-selection-field .list-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0;
    padding: 0.1875rem 0.5rem;
    font-size: var(--wphb-text-xs);
    line-height: 1.4;
    color: var(--accent-color);
    background-color: var(--wphb-accent-soft);
    border-radius: 999px;
    list-style: none;
}

/* O botão de remoção é desenhado pelo plugin como um SVG com traço #AAAFB6
   fixo; herda a cor do chip para que pareça parte do mesmo elemento. */
body.wp-hotel-booking-page.wp-hotel-booking-rooms .hb-selection-field .list-item .remove {
    width: 0.75rem;
    height: 0.75rem;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .hb-selection-field .list-item .remove:hover {
    opacity: 1;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .hb-selection-field .list-item .remove path {
    stroke: currentColor;
}

/* --------------------------------------------------------------------------
   20.7. CARTÕES
   O cartão inteiro não é clicável — só a miniatura e o título o são. Sinalizar
   isso com o cursor evita que o utilizador espere um clique que não acontece.
   -------------------------------------------------------------------------- */
body.wp-hotel-booking-page.wp-hotel-booking-rooms .room-content .hb_room .radha-room-thumbnail a {
    display: block;
    cursor: pointer;
}

body.wp-hotel-booking-page.wp-hotel-booking-rooms .room-content .hb_room .hb-room-title a {
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   20.8. ÁREA DE TOQUE MÓVEL
   Alvos de 44px, o mínimo da WCAG 2.5.5 para conteúdo interativo por ponteiro.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-rooms-search .number-icons {
        width: 2.75rem;
        height: 2.75rem;
    }

    body.wp-hotel-booking-page.wp-hotel-booking-rooms .hotel-booking-search-filter .list-item {
        padding: 0.4375rem 0;
    }

    body.wp-hotel-booking-page.wp-hotel-booking-rooms .rooms-check-avaibility,
    body.wp-hotel-booking-page.wp-hotel-booking-rooms .hb-room-filter-btn,
    body.wp-hotel-booking-page.wp-hotel-booking-rooms .clear-filter button {
        min-height: 2.75rem;
    }

    body.wp-hotel-booking-page.wp-hotel-booking-rooms .sort-by-wrapper .toggle {
        min-height: 2.75rem;
    }

    /* O slider ganha alças maiores em ecrãs tacteis. */
    body.wp-hotel-booking-page.wp-hotel-booking-rooms .hb-search-price .noUi-handle {
        width: 1.5rem;
        height: 1.5rem;
        right: -0.75rem;
        top: -0.625rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.wp-hotel-booking-page.wp-hotel-booking-rooms .sort-by-wrapper ul {
        animation: none;
    }

    body.wp-hotel-booking-page.wp-hotel-booking-rooms :is(
            input[type="checkbox"],
            .number-icons,
            .noUi-handle,
            button
        ) {
        transition: none;
    }
}