/* @charset "UTF-8";
!
 * Bootstrap  v5.3.3 (https://getbootstrap.com/)
 * Copyright 2011-2024 The Bootstrap Authors
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */

        /* =====================================================
           VARIÁVEIS
        ====================================================== */

        :root {

            --primary: #00536f;
            --primary-dark: SlateBlue;

            --dark: #222222;
            --text: #555555;

            --light: #f7f7f7;
            --border: #dddddd;

            --white: #ffffff;

        }


        /* =====================================================
           RESET
        ====================================================== */

        html,
        body {

            width: 100%;
            min-height: 100%;

            margin: 0;
            padding: 0;

        }


        body {

            font-family:
                Arial,
                Helvetica,
                sans-serif;

            color: var(--dark);

            background: #ffffff;

        }


        /* =====================================================
           HERO / PÁGINA INICIAL
        ====================================================== */

        .hero {

            position: relative;

            width: 100%;
            min-height: 100vh;

            overflow: hidden;
 
     background-image:
        linear-gradient(rgba(255, 255, 255, 0.10)),
        url("https://staysagres.com/images/imagemcapa.png");
/*

    background-image:
        linear-gradient(rgba(255, 255, 255, 0.10)),
        url("https://images.unsplash.com/photo-1564013799919-ab600027ffc6");
*/
    background-size: cover;
    background-position: center;
 		
/*			background-image: url("https://images.unsplash.com/photo-1564013799919-ab600027ffc6") !important;	


            background-image:

                linear-gradient(
                    rgba(255,255,255,.72),
                    rgba(255,255,255,.72)
                ),

                url("https://images.unsplash.com/photo-1564013799919-ab600027ffc6");
*/	
            background-size: cover;

            background-position: center;

            background-repeat: no-repeat;

            background-attachment: fixed;

        }


        /*
         * Segunda camada para reforçar
         * o efeito de marca de água.
         */

        .hero::before {

            content: "";

            position: absolute;
 	/* 
            inset: 0;
 
          background-image:  url("https://images.unsplash.com/photo-1564013799919-ab600027ffc6"); 
		background-image: url("https://images.unsplash.com/photo-1564013799919-ab600027ffc6") !important;*/		

            background-size: cover;

            background-position: center;

            opacity: .08;

            z-index: 0;

        }


        .hero > * {

            position: relative;

            z-index: 1;

        }


        /* =====================================================
           HEADER
        ====================================================== */

        .main-header {

            min-height: 82px;

            background:
                rgba(255,255,255,.90);

            backdrop-filter:
                blur(12px);

            -webkit-backdrop-filter:
                blur(12px);

            border-bottom:
                1px solid rgba(255,255,255,.60);

            position: relative;

            z-index: 20;

        }


        /* =====================================================
           LOGO
        ====================================================== */

        .logo {

            font-size: 25px;

            font-weight: 700;

            color:
                var(--primary);

            text-decoration: none;

            white-space: nowrap;

        }


        .logo:hover {

            color:
                var(--primary-dark);

        }


        .logo i {

            margin-right: 5px;

        }


        /* =====================================================
           PESQUISA DO HEADER
        ====================================================== */

        .header-search {
            display: flex;
            align-items: stretch;
            justify-content: center;
            width: fit-content;
            max-width: 100%;
            margin: 12px auto 0;
            padding: 3px;
            border: 1px solid #d9d9d9;
            border-radius: 18px;
            background: rgba(255,255,255,.98);
            box-shadow: 0 4px 16px rgba(0,0,0,.10);
            transition: .25s ease;
        }

        .header-search.is-sticky {
            position: fixed;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1050;
            margin: 0;
            box-shadow: 0 6px 22px rgba(0,0,0,.16);
        }

        .header-search-item {
            min-width: 0;
            padding: 8px 14px;
            border-right: 1px solid #e2e2e2;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .header-search-item:last-of-type { border-right: 0; }

        .header-search-item label {
            display: block;
            margin: 0 0 2px;
            font-size: 14px;
            line-height: 1.1;
            font-weight: 700;
            color: #333;
        }

        .search-field {
            min-width: 105px;
            border: 0;
            outline: 0;
            background: transparent;
            color: #555;
            font-size: 16px;
            line-height: 1.25;
            cursor: pointer;
            padding: 2px 0;
        }

        .search-field.destination { cursor: text; }

        .search-button {
            width: 40px;
            height: 40px;
            margin: 3px 3px 3px 6px;
            border: 0;
            border-radius: 50%;
            background: var(--primary);
            color: #fff;
            cursor: pointer;
            flex: 0 0 40px;
        }

        .search-button:hover { background: var(--primary-dark); }

        .modal-search .modal-content { border: 0; border-radius: 18px; overflow: hidden; }
        .modal-search .modal-header { padding: 14px 18px; }
        .modal-search .modal-body { padding: 18px; }
        .date-picker-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
        .date-picker-card { border: 1px solid #e2e2e2; border-radius: 14px; padding: 12px; background: #fff; }
        .date-picker-card label { font-size: 12px; font-weight: 700; display: block; margin-bottom: 6px; }
        .date-picker-card input { width: 100%; border: 1px solid #d7d7d7; border-radius: 9px; padding: 9px 10px; }
        .guest-row { display:flex; align-items:center; justify-content:space-between; gap:15px; padding:12px 0; border-bottom:1px solid #eee; }
        .guest-row:last-child { border-bottom:0; }
        .guest-row small { display:block; color:#777; }
        .counter-control { display:flex; align-items:center; gap:12px; }
        .counter-control button { width:32px; height:32px; border:1px solid #bbb; border-radius:50%; background:#fff; }
        .counter-control button:hover { border-color:var(--primary); color:var(--primary); }
        .counter-control .count { min-width:20px; text-align:center; font-weight:700; }
        .filter-toggle { display:flex; align-items:center; gap:7px; white-space:nowrap; font-size:15px; }
        .rating-select { border:0; background:transparent; font-size:15px; outline:0; cursor:pointer; }
        .price-filter {
            display:flex;
            align-items:center;
            gap:5px;
            white-space:nowrap;
        }
        .price-filter select,
        .price-filter input {
            border:0;
            outline:0;
            background:transparent;
            font-size:15px;
            color:#555;
        }
        .price-filter select { cursor:pointer; }
        .price-filter input {
            width:58px;
            padding:2px 0;
            text-align:right;
        }
        .price-euro { font-size:15px; color:#555; }

        .header-search-item > .form-check-input,
        .header-search-item input[type="checkbox"] { width:18px; height:18px; }

        /* Modais independentes do Bootstrap JS: funciona também localmente no XAMPP */
        .native-modal {
            position: fixed !important;
            inset: 0 !important;
            z-index: 99999 !important;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
            background: rgba(0,0,0,.55);
            pointer-events: none;
        }
        .native-modal.is-open { display: flex !important; pointer-events: auto; }
        .native-modal-dialog {
            position: relative;
            z-index: 100000;
            width: min(520px, 100%);
            max-height: calc(100vh - 40px);
            overflow: auto;
            background: #fff;
            border-radius: 18px;
            box-shadow: 0 15px 50px rgba(0,0,0,.30);
            pointer-events: auto;
        }
        .native-modal-content {
            position: relative;
            pointer-events: auto;
            background: #fff;
        }
        .native-modal-dialog.modal-sm { width: min(430px, 100%); }
        .native-modal-header {
            display:flex; align-items:center; justify-content:space-between;
            padding:16px 20px; border-bottom:1px solid #e5e5e5;
        }
        .native-modal-header h5 { margin:0; font-size:20px; }
        .native-modal-close {
            border:0; background:transparent; font-size:28px; line-height:1;
            cursor:pointer; color:#555; padding:2px 7px;
        }
        .native-modal-body { padding:20px; pointer-events:auto; }
        .native-modal input, .native-modal select, .native-modal button { pointer-events:auto !important; }
        body.modal-open-native { overflow:hidden; }
        .modal-search { z-index: 2000; }
        .modal-search .modal-dialog { pointer-events: auto; }
        .modal-search .modal-content { pointer-events: auto; }
        .modal-search input[type="date"] {
            min-height: 44px;
            font-size: 16px;
            color: #222;
            background: #fff;
        }
        .modal-search .btn { font-size: 15px; }

        @media (max-width: 1200px) {
            .header-search-item { padding-left: 9px; padding-right: 9px; }
            .search-field { min-width: 90px; }
        }

        /* =====================================================
           HERO CONTENT
        ====================================================== */

        .hero-content {

            min-height:
                calc(100vh - 10px);

            display:
                flex;

            flex-direction:
                column;

            justify-content:
                center;

            align-items:
                center;

            text-align:
                center;

            padding:
                50px 20px;

        }


        .hero-content h1 {
            font-size: clamp(38px, 5vw, 64px);
            font-weight:  700;
            color: #050347;
            text-shadow: 0 2px 10px rgba(255,255,255,.9);
            margin-bottom:   15px;
        }


        .hero-content p {

            font-size:
                clamp(20px, 3vw, 32px);

            color:
                #333;

            max-width:
                700px;

            margin-bottom:
                35px;

        }


        /* =====================================================
           PESQUISA MOBILE
        ====================================================== */

        .mobile-search {

            width:
                min(100%, 600px);

            background:
                rgba(255,255,255,.96);

            border-radius:
                20px;

            padding:
                18px;

            box-shadow:
                0 8px 30px rgba(0,0,0,.15);

        }


        .mobile-search .form-select {

            min-height:
                48px;

        }


        /* =====================================================
           CATEGORIAS
        ====================================================== */

        .category-bar {

            background:
                rgba(255,255,255,.97);

            padding:
                18px 0;

            border-bottom:
                1px solid var(--border);

        }


        .category-scroll {

            display:
                flex;

            gap:
                18px;

            overflow-x:
                auto;

            scrollbar-width:
                thin;

        }


        .category-item {

            min-width:
                130px;

            text-align:
                center;

            color:
                #555;

            cursor:
                pointer;

            padding:
                8px 12px;

            border-radius:
                10px;

            transition:
                .2s;

        }



        .category-item-button {
            border: 0;
            background: transparent;
            font: inherit;
        }

        .category-item-button:focus-visible {
            outline: 2px solid var(--primary);
            outline-offset: 3px;
        }

        .category-item:hover {

            color:
                var(--primary);

            background:
                #fff5f6;

        }


        .category-icon {

            display:
                block;

            font-size:
                27px;

            margin-bottom:
                5px;

        }


        .category-name {

            font-size:
                13px;

            white-space:
                nowrap;

        }


        /* =====================================================
           FILTROS
        ====================================================== */

        .filter-section {

            padding:
                40px 0;

            background:
                #ffffff;

        }


        .filter-title {

            font-size:
                24px;

            font-weight:
                700;

            margin-bottom:
                30px;

        }


        .filter-box {

            margin-bottom:
                25px;

        }


        .filter-box h5 {

            font-size:
                15px;

            font-weight:
                700;

            margin-bottom:
                15px;

        }


        .filter-box label {

            font-size:
                14px;

            margin-bottom:
                9px;

            cursor:
                pointer;

        }


        .filter-box input[type="checkbox"] {

            margin-right:
                8px;

        }


        /* =====================================================
           SELECTS DOS FILTROS
        ====================================================== */

        .filter-box .form-select {

            min-height:
                44px;

            border-radius:
                8px;

            border-color:
                #cccccc;

            font-size:
                14px;

        }


        .filter-box .form-select:focus {

            border-color:
                var(--primary);

            box-shadow:
                0 0 0 .15rem rgba(255,56,92,.12);

        }


        /* =====================================================
           PREÇO
        ====================================================== */

        .price-range {

            width:
                100%;

        }


        .price-values {

            display:
                flex;

            justify-content:
                space-between;

            font-size:
                13px;

            color:
                #555;

        }


        /* =====================================================
           CONTADORES
        ====================================================== */

        .counter {

            display:
                flex;

            align-items:
                center;

            justify-content:
                space-between;

            margin-bottom:
                12px;

        }


        .counter-buttons {

            display:
                flex;

            align-items:
                center;

            gap:
                10px;

        }


        .counter-buttons button {

            width:
                30px;

            height:
                30px;

            border:
                1px solid #aaa;

            border-radius:
                50%;

            background:
                white;

            cursor:
                pointer;

        }


        .counter-buttons button:hover {

            border-color:
                var(--primary);

            color:
                var(--primary);

        }


        .counter-value {

            min-width:
                25px;

            text-align:
                center;

            font-weight:
                600;

        }


        /* =====================================================
           THUMBNAILS
        ====================================================== */

        .apartments {

            border-top:
                1px solid var(--border);

            border-bottom:
                1px solid var(--border);

            padding:
                18px 0;

        }


        .thumbnail-scroll {

            display:
                flex;

            gap:
                10px;

            overflow-x:
                auto;

        }


        .apartment-thumb {

            width:
                60px;

            height:
                60px;

            flex:
                0 0 60px;

            border-radius:
                8px;

            object-fit:
                cover;

            cursor:
                pointer;

            border:
                2px solid transparent;

            transition:
                .2s;

        }


        .apartment-thumb:hover {

            border-color:
                var(--primary);

            transform:
                scale(1.05);

        }


        /* =====================================================
           BOTÕES
        ====================================================== */

        .btn-primary-custom {

            background:
                var(--primary);

            border:
                none;

            color:
                white;

            font-weight:
                600;

            padding:
                13px 28px;

            border-radius:
                8px;

        }


        .btn-primary-custom:hover {

            background:
                var(--primary-dark);

            color:
                white;

        }


        .btn-clear {

            border:
                none;

            background:
                transparent;

            text-decoration:
                underline;

            font-weight:
                600;

            cursor:
                pointer;

        }


        /* =====================================================
           MOBILE
        ====================================================== */

        @media (max-width: 991px) {

            .header-search {

                display:
                    none;

            }


            .main-header {

                min-height:
                    70px;

            }


            .hero-content {

                min-height:
                    calc(100vh - 70px);

            }

        }


        @media (max-width: 576px) {

            .logo {

                font-size:
                    20px;

            }


            .hero-content {

                padding:
                    30px 15px;

            }


            .hero-content h1 {

                font-size:
                    34px;

            }


            .hero-content p {

                font-size:
                    16px;

            }


            .category-item {

                min-width:
                    110px;

            }


            .btn-primary-custom {

                padding:
                    11px 18px;

            }

        }


        /* =====================================================
           MODAL — PESQUISA AVANÇADA EXTERNA
           O conteúdo é carregado de pesquisa.php através de iframe.
        ====================================================== */

        .advanced-search-modal {
            position: fixed;
            inset: 0;
            z-index: 3000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
            background: rgba(0, 0, 0, .58);
            overflow: auto;
        }

        .advanced-search-modal.is-open {
            display: flex;
        }

        .advanced-search-dialog {
            position: relative;
            width: min(1180px, 100%);
            height: min(88vh, 900px);
            background: #fff;
            border-radius: 18px;
            overflow: hidden;
            box-shadow: 0 20px 60px rgba(0,0,0,.28);
            display: flex;
            flex-direction: column;
        }

        .advanced-search-header {
            flex: 0 0 auto;
            min-height: 64px;
            padding: 12px 18px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #e5e5e5;
            background: #fff;
        }

        .advanced-search-header h4 {
            margin: 0;
            font-size: 20px;
            font-weight: 700;
        }

        .advanced-search-close {
            width: 42px;
            height: 42px;
            border: 0;
            border-radius: 50%;
            background: transparent;
            color: #222;
            font-size: 30px;
            line-height: 1;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .advanced-search-close:hover {
            background: #f1f1f1;
        }

        .advanced-search-frame {
            flex: 1 1 auto;
            min-height: 0;
            width: 100%;
            border: 0;
            background: #fff;
        }

        @media (max-width: 991px) {
            .advanced-search-modal {
                padding: 10px;
            }

            .advanced-search-dialog {
                width: 100%;
                height: calc(100vh - 20px);
                border-radius: 14px;
            }
        }


        /* =====================================================
           AJUSTE DE ALTURA / APROVEITAMENTO DO ECRÃ
           Header mais fino e hero compacto para o carrossel ficar
           visível no primeiro ecrã em desktop.
        ====================================================== */
        .main-header {
            min-height: 32px !important;
            height: 32px;
			background-color: #6CA0DC;
			/*background-color: #224C98;*/
        }

        .main-header > .container-fluid,
        .main-header > .container-fluid > .d-flex {
            min-height: 32px !important;
            height: 32px;
        }

        .logo {
            font-size: 21px;
        }

        .logo i {
            margin-right: 3px;
        }

        .header-search {
            margin-top: 6px;
            padding: 2px;
            border-radius: 16px;
        }

        .header-search-item {
            padding: 5px 10px;
        }

        .header-search-item label {
            font-size: 12px;
            margin-bottom: 1px;
        }

        .search-field {
            min-width: 88px;
            font-size: 14px;
            padding: 1px 0;
        }

        .filter-toggle,
        .rating-select,
        .price-filter select,
        .price-filter input,
        .price-euro {
            font-size: 13px;
        }

        .search-button {
            width: 36px;
            height: 36px;
            flex-basis: 36px;
            margin: 2px 2px 2px 4px;
        }

        .hero {
            min-height: 50vh !important;
        }

        .hero-content {
            min-height: 60vh !important;
height: auto;
            padding: 24px 16px 12px !important;
            justify-content: flex-start;
        }

        .hero-content h1 {
            font-size: clamp(32px, 4vw, 46px);
            margin-bottom: 8px;
        }

        .hero-content p {
            font-size: 16px;
            line-height: 1.35;
            margin-bottom: 12px;
        }

        .hero-content > section {
            width: 100%;
        }

        .category-scroll {
            gap: 8px;
            padding-bottom: 2px;
        }

        .category-item {
            min-width: 105px;
            padding: 5px 8px;
        }

        .category-icon {
            font-size: 22px;
            margin-bottom: 2px;
        }

        .category-name {
            font-size: 12px;
        }

        .apartments {
            margin-top: 8px !important;
            padding: 8px 0;
        }

        .thumbnail-scroll {
            gap: 8px;
            padding: 2px 4px 5px;
            scrollbar-width: thin;
        }

        .apartment-thumb {
            width: 54px;
            height: 54px;
            flex-basis: 54px;
            border-radius: 7px;
        }

        @media (min-width: 992px) {
            .hero {
                min-height: 80vh !important;
            }
        }

        @media (max-width: 991px) {
            .main-header,
            .main-header > .container-fluid,
            .main-header > .container-fluid > .d-flex {
                min-height: 62px !important;
                height: auto;
            }

            .hero {
                min-height: 80vh !important;
            }

            .hero-content {
                min-height: calc(90vh - 62px) !important;
                padding: 24px 15px 15px !important;
            }
        }

        @media (max-width: 576px) {
            .logo { font-size: 19px; }
            .hero-content h1 { font-size: 30px; }
            .hero-content p { font-size: 15px; }
        }

    

        /* =====================================================
           ANÚNCIOS — COMPATIBILIDADE COM OK-index.php
           Estrutura usada:
           <main class="container py-5">
             ... <div class="row g-4">
                   <div class="col-12 col-md-6 col-lg-4">
                     <div class="card listing-card">
           ====================================================== */

        /* O bloco de anúncios ocupa melhor a largura disponível,
           mantendo as margens laterais semelhantes à referência. */
        main.container.py-5 {
            width: 100%;
            max-width: none;
            padding-left: 20px !important;
            padding-right: 20px !important;
            padding-top: 18px !important;
            padding-bottom: 40px !important;
        }

        /* Título "Anúncios disponíveis" e contador */
        main.container.py-5 > section:last-child > .d-flex {
            margin-bottom: 18px !important;
            min-height: 28px;
        }

        main.container.py-5 > section:last-child > .d-flex h2 {
            margin: 0;
            font-size: 22px;
            line-height: 1.25;
            font-weight: 500;
            color: #222;
        }

        main.container.py-5 > section:last-child > .d-flex .text-muted {
            font-size: 14px;
            color: #555 !important;
        }

        /* Grelha dos anúncios: 3 cartões no desktop, 2 em tablet,
           1 em telemóvel. */
        main.container.py-5 .row.g-4:has(.listing-card) {
            --bs-gutter-x: 0;
            --bs-gutter-y: 0;
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 24px;
            margin: 0;
        }

        main.container.py-5 .row.g-4:has(.listing-card) > [class*="col-"] {
            width: auto !important;
            max-width: none !important;
            padding: 0 !important;
            margin: 0 !important;
        }

        /* Cartão */
        main.container.py-5 .listing-card {
            width: 100%;
            height: 100%;
            min-width: 0;
            overflow: hidden;
            border: 0;
            border-radius: 18px;
            background: #fff;
            box-shadow: 0 5px 18px rgba(0, 0, 0, .08);
            transition: transform .18s ease, box-shadow .18s ease;
        }

        main.container.py-5 .listing-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 9px 24px rgba(0, 0, 0, .12);
        }

        /* Imagem de capa */
        main.container.py-5 .listing-card .listing-img {
            display: block;
            width: 100%;
            height: 220px;
            min-height: 220px;
            object-fit: cover;
            object-position: center;
            margin: 0;
            background: #e9ecef;
        }

        main.container.py-5 .listing-card > a {
            display: block;
            line-height: 0;
            margin: 0;
            padding: 0;
        }

        /* Conteúdo do cartão */
        main.container.py-5 .listing-card .card-body {
            padding: 16px 16px 18px;
            background: #fff;
        }

        main.container.py-5 .listing-card .card-body > .mb-2,
        main.container.py-5 .listing-card .card-body > .d-flex.mb-2 {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 5px;
            margin-bottom: 10px !important;
        }

        /* Badges como os da imagem de referência */
        main.container.py-5 .listing-card .badge {
            display: inline-flex;
            align-items: center;
            min-height: 20px;
            padding: 3px 7px;
            border-radius: 5px;
            font-size: 12px;
            line-height: 1.1;
            font-weight: 600;
            white-space: nowrap;
        }

        main.container.py-5 .listing-card .badge.bg-primary {
            background-color: #0d6efd !important;
        }

        main.container.py-5 .listing-card .badge.bg-warning {
            background-color: #ffbd00 !important;
            color: #111 !important;
        }

        main.container.py-5 .listing-card .badge.bg-success {
            background-color: #198754 !important;
        }

        /* Título do anúncio */
        main.container.py-5 .listing-card h3 {
            margin: 0 0 6px;
            font-size: 20px;
            line-height: 1.25;
            font-weight: 500;
            color: #111;
        }

        main.container.py-5 .listing-card h3 a {
            color: inherit;
            text-decoration: none;
        }

        main.container.py-5 .listing-card .text-muted {
            color: #666 !important;
        }

        /* Cidade/categoria e descrição */
        main.container.py-5 .listing-card p {
            font-size: 14px;
            line-height: 1.45;
        }

        main.container.py-5 .listing-card .price {
            margin-top: 10px;
            margin-bottom: 14px !important;
            font-size: 16px;
            line-height: 1.25;
            font-weight: 700;
        }

        main.container.py-5 .listing-card .price small {
            font-size: 12px;
            font-weight: 400;
        }

        /* Botão do anúncio */
        main.container.py-5 .listing-card .btn {
            border-radius: 8px;
            font-size: 14px;
            font-weight: 600;
            padding: 9px 14px;
        }

        /* Tablet */
        @media (max-width: 991.98px) {
            main.container.py-5 {
                padding-left: 16px !important;
                padding-right: 16px !important;
            }

            main.container.py-5 .row.g-4:has(.listing-card) {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 20px;
            }
        }

        /* Telemóvel */
        @media (max-width: 575.98px) {
            main.container.py-5 {
                padding-left: 12px !important;
                padding-right: 12px !important;
                padding-top: 16px !important;
            }

            main.container.py-5 > section:last-child > .d-flex h2 {
                font-size: 20px;
            }

            main.container.py-5 .row.g-4:has(.listing-card) {
                grid-template-columns: 1fr;
                gap: 18px;
            }

            main.container.py-5 .listing-card .listing-img {
                height: 220px;
                min-height: 220px;
            }
        }


/* =========================================================
   AJUSTES FINAIS — BARRA DE PESQUISA / HERO / MOBILE
   Estas regras ficam no final para prevalecerem sobre as regras
   anteriores do ficheiro.
========================================================= */

/* A imagem continua a ocupar o hero, mas o conteúdo fica mais
   próximo da parte inferior da fotografia. */
.hero {
    min-height: 100vh !important;
    background-position: center center;
}

/* Torna o texto principal claramente legível sobre a fotografia. */
.hero-content {
    min-height: calc(100vh - 32px) !important;
    justify-content: flex-end !important;
    padding: 40px 20px 42px !important;
}

.hero-content h1,
.hero-content p {
    position: relative;
    z-index: 2;
}

.hero-content h1 {
    margin-bottom: 12px !important;
    text-shadow:
        0 2px 4px rgba(255,255,255,.95),
        0 0 14px rgba(255,255,255,.80);
}

.hero-content p {
    max-width: 780px !important;
    margin: 0 0 24px !important;
    padding: 10px 18px;
    border-radius: 12px;
    background: rgba(255,255,255,.82);
    /*color: #1d1d1d !important;*/
    color: #04214d !important;
    font-weight: 600;
    line-height: 1.45 !important;
    text-shadow: none !important;
    box-shadow: 0 4px 18px rgba(0,0,0,.12);
}

/* Barra desktop: largura e campos homogéneos.
   O campo Preço mantém a sua área própria. */
@media (min-width: 992px) {
    #desktopSearchBar {
        width: min(94vw, 1180px) !important;
        max-width: 1180px !important;
        margin: 0 auto !important;
        display: flex !important;
        align-items: stretch !important;
        gap: 0 !important;
        flex-wrap: nowrap !important;
        min-height: 66px;
    }

    #desktopSearchBar > .header-search-item {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 60px;
        padding: 8px 16px !important;
        justify-content: center;
        box-sizing: border-box;
    }

    #desktopSearchBar > #dateSearchTriggerIn,
    #desktopSearchBar > #dateSearchTriggerOut,
    #desktopSearchBar > #guestSearchTrigger,
    #desktopSearchBar > div:not(.search-button) {
        min-width: 0;
    }

    #desktopSearchBar > .header-search-item:first-of-type {
        flex: 1 1 0 !important;
    }

    #desktopSearchBar > .header-search-item label {
        font-size: 13px !important;
    }

    #desktopSearchBar .search-field {
        min-width: 0 !important;
        width: 100%;
        font-size: 15px !important;
        white-space: nowrap;
    }

    /* Preço: mantém largura confortável e não fica comprimido. */
    #desktopSearchBar > .header-search-item:has(.price-range) {
        flex: 1.45 1 0 !important;
        min-width: 180px !important;
    }

    #desktopSearchBar .price-range {
        width: 100% !important;
        min-width: 145px;
    }

    #desktopSearchBar .price-values {
        width: 100%;
        font-size: 12px;
    }

    #desktopSearchBar > #desktopSearchButton {
        flex: 0 0 48px !important;
        width: 48px !important;
        align-self: center;
    }
}

/* Tablet e telemóvel: a barra deixa de desaparecer e transforma-se
   numa pesquisa vertical/semelhante a grelha. */
@media (max-width: 991.98px) {
    .hero {
        min-height: 100svh !important;
    }

    .hero-content {
        min-height: calc(100svh - 62px) !important;
        justify-content: flex-end !important;
        padding: 28px 14px 24px !important;
    }

    .hero-content h1 {
        font-size: clamp(28px, 7vw, 40px) !important;
        margin-bottom: 10px !important;
    }

    .hero-content p {
        max-width: min(92vw, 700px) !important;
        font-size: clamp(15px, 3vw, 19px) !important;
        margin-bottom: 18px !important;
        padding: 9px 13px;
    }

    #desktopSearchBar {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: min(94vw, 620px) !important;
        max-width: 620px !important;
        margin: 0 auto !important;
        padding: 4px !important;
        gap: 0 !important;
        border-radius: 16px !important;
    }

    #desktopSearchBar > .header-search-item {
        min-width: 0 !important;
        width: 100% !important;
        min-height: 58px;
        padding: 8px 10px !important;
        border-right: 1px solid #e2e2e2;
        border-bottom: 1px solid #e2e2e2;
        box-sizing: border-box;
    }

    #desktopSearchBar > #dateSearchTriggerIn,
    #desktopSearchBar > #dateSearchTriggerOut,
    #desktopSearchBar > #guestSearchTrigger {
        flex: none !important;
    }

    #desktopSearchBar > .header-search-item label {
        font-size: 12px !important;
    }

    #desktopSearchBar .search-field {
        min-width: 0 !important;
        width: 100%;
        font-size: 14px !important;
        white-space: nowrap;
    }

    #desktopSearchBar > .header-search-item:has(.price-range) {
        grid-column: 1 / -1;
        min-height: 68px;
        border-right: 0;
    }

    #desktopSearchBar .price-range {
        width: 100% !important;
    }

    #desktopSearchBar > .header-search-item:nth-last-of-type(2) {
        border-right: 0;
    }

    #desktopSearchBar > #desktopSearchButton {
        grid-column: 1 / -1;
        justify-self: center;
        margin: 7px !important;
    }
}

@media (max-width: 576px) {
    .hero-content {
        padding: 20px 10px 16px !important;
    }

    .hero-content h1 {
        font-size: 27px !important;
    }

    .hero-content p {
        font-size: 15px !important;
        max-width: 96vw !important;
        margin-bottom: 12px !important;
    }

    #desktopSearchBar {
        width: 96vw !important;
        max-width: none !important;
        border-radius: 14px !important;
    }

    #desktopSearchBar > .header-search-item {
        min-height: 54px;
        padding: 7px 9px !important;
    }

    #desktopSearchBar .search-field {
        font-size: 13px !important;
    }
}