/* ============================================
   Gardablick — CSS Overrides
   Fixes and additions not covered by the
   compiled Tailwind CSS from Next.js build.
   ============================================ */

/* Allineamento globale contenitori al menu */
.max-w-\[1440px\] {
    padding-left: 80px;
    padding-right: 80px;
}

@media (max-width: 767px) {
    .max-w-\[1440px\] {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Forzato font Outfit Medium */
body,
body * {
    font-family: var(--font-outfit), Arial, Helvetica, sans-serif;
}

.font-light,
.font-normal,
.font-medium,
.font-semibold,
.font-bold {
    font-weight: 500 !important;
}


/* Fix select dropdown arrows in Safari/Firefox */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: none;
}

/* Line clamp utility (if not in Tailwind build) */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Smooth scroll for anchor links */
html {
    scroll-behavior: smooth;
}

/* Header scrolled state */
#gb-header.scrolled {
    background-color: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

#gb-header.scrolled .nav-link {
    color: #02033b !important;
}

#gb-header.scrolled .lang-link {
    color: #02033b !important;
}

#gb-header.scrolled .lang-divider {
    background-color: rgba(2, 3, 59, 0.3) !important;
}

#gb-header.scrolled #mobile-menu-btn {
    color: #02033b;
}

#gb-header.scrolled .hamburger-line {
    background-color: #02033b !important;
}

/* Mobile menu open state for hamburger icon */
#mobile-menu-btn[aria-expanded="true"] .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translateY(5px) translateX(5px);
}

#mobile-menu-btn[aria-expanded="true"] .hamburger-line:nth-child(2) {
    opacity: 0;
}

#mobile-menu-btn[aria-expanded="true"] .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translateY(-5px) translateX(5px);
}

/* ============================================
   Multi-Select Custom Dropdown
   ============================================ */

/* Dropdown trigger (looks like the existing selects) */
.multi-select {
    position: relative;
}

.single-select {
    position: relative;
}

.multi-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 55px;
    padding: 0 16px;
    background: #fff;
    border: 1px solid rgba(2, 3, 59, 0.2);
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.2s;
}

.multi-select-trigger:hover {
    border-color: rgba(2, 3, 59, 0.4);
}

.multi-select.open .multi-select-trigger,
.single-select.open .multi-select-trigger {
    border-color: #02033b;
}

.multi-select-label {
    color: #02033b;
    font-size: 16px;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    text-decoration: underline;
}

.multi-select-chevron {
    flex-shrink: 0;
    transition: transform 0.2s;
}

.multi-select.open .multi-select-chevron,
.single-select.open .multi-select-chevron {
    transform: rotate(180deg);
}

/* Dropdown panel */
.multi-select-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid rgba(2, 3, 59, 0.15);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    z-index: 500;
    max-height: 240px;
    overflow-y: auto;
    padding: 4px 0;
}

.multi-select.open .multi-select-dropdown,
.single-select.open .multi-select-dropdown {
    display: block;
}

/* Each option row */
.multi-select-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background-color 0.15s;
    font-size: 15px;
    color: #02033b;
}

.multi-select-option:hover {
    background-color: rgba(2, 3, 59, 0.05);
}

/* Custom checkbox */
.multi-select-option input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border: 1.5px solid rgba(2, 3, 59, 0.3);
    border-radius: 3px;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    background: #fff;
    transition: all 0.15s;
}

.multi-select-option input[type="checkbox"]:checked {
    background: #02033b;
    border-color: #02033b;
}

.multi-select-option input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* ============================================
   Active Filter Chips / Tags
   ============================================ */
.filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(2, 3, 59, 0.12);
    border-radius: 20px;
    font-size: 14px;
    color: #02033b;
    font-weight: 400;
    cursor: default;
    transition: background-color 0.15s;
}

.filter-chip:hover {
    background: rgba(2, 3, 59, 0.2);
}

/* Chips inside hero search bar (on glass background) need white bg */
.bg-white\/5 .filter-chip {
    background: rgba(255, 255, 255, 0.85);
}
.bg-white\/5 .filter-chip:hover {
    background: rgba(255, 255, 255, 1);
}

.filter-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: none;
    background: none;
    color: #02033b;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    opacity: 0.6;
    transition: opacity 0.15s;
}

.filter-chip-remove:hover {
    opacity: 1;
}

/* Prose styles for privacy policy */
.prose h3 {
    margin-top: 0;
}

.prose ul {
    margin-top: 0.5rem;
}

/* ============================================
   Captcha field
   ============================================ */

.captcha-wrapper > div {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.captcha-wrapper img.captcha {
    flex: 0 0 auto;
    width: auto !important;
    max-width: 180px !important;
    height: 100% !important;
    object-fit: contain;
    border-radius: 6px;
}

.captcha-wrapper input[name="captcha_1"] {
    flex: 1;
    min-width: 0;
    width: 100%;
    padding: 12px 16px;
    border: 1px solid rgba(2, 3, 59, 0.25);
    border-radius: 8px;
    background-color: #fff;
    color: #02033b;
    font-size: 14px;
    outline: none;
}

.captcha-wrapper input[name="captcha_1"]:focus {
    border-color: #02033b;
}

.captcha-wrapper input[type="hidden"] {
    display: none;
}

/* Mobile */
@media (max-width: 640px) {

    .captcha-wrapper > div {
        gap: 10px;
    }

    .captcha-wrapper img.captcha {
        height: 46px !important;
    }
}

/* CONTACT MESSAGE */
.contact-message-error {
    background-color: rgba(239, 68, 68, 0.20);
    border-color: rgba(239, 68, 68, 0.50);
    border: 1px solid red;
    border-radius: 8px;
    color: #f87171;
}

.contact-field-error {
    color: red !important;
    font-weight: bold !important;
}

/* PROPERTY DETAIL PAGE */
body.property-detail-page #gb-header,
body.property-detail-page #gb-header.scrolled {
    background-color: #fff !important;
}

body.property-detail-page #gb-header .nav-link,
body.property-detail-page #gb-header .lang-link {
    color: #02033b !important;
}

body.property-detail-page #gb-header .lang-divider {
    background-color: rgba(2, 3, 59, 0.3) !important;
}

body.property-detail-page #gb-header .hamburger-line {
    background-color: #02033b !important;
}

body.property-detail-page #header-logo-white {
    display: none !important;
}

body.property-detail-page #header-logo-black {
    display: block !important;
}

.property-detail-wrapper {
    padding-top: 120px;
}

@media (min-width: 1024px) {
    .property-detail-wrapper {
        padding-top: 130px;
    }
}

.share-icon-btn {
    width: 66px;
    height: 66px;
    border: 1px solid #9b9b9b;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.property-detail-info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
}

@media (min-width: 1024px) {
    .property-detail-info-grid {
        grid-template-columns: minmax(0, 60%) minmax(0, 40%);
        gap: 80px;
        align-items: start;
    }
}

/* Colori Figma */
.property-detail-page h1,
.property-detail-page h2,
.property-detail-page #prop-title,
.property-detail-page #prop-price,
.property-detail-page #prop-characteristics span:last-child {
    color: #050038 !important;
}

.property-detail-page p,
.property-detail-page li,
.property-detail-page #prop-description,
.property-detail-page #prop-location,
.property-detail-page #prop-characteristics span {
    color: #727272 !important;
}

/* Titoli sezioni */
.property-detail-page h2 {
    color: #050038 !important;
}

/* Titolo: testo naturale (NO uppercase) */
.property-detail-page #prop-title {
    text-transform: none !important;
    color: #050038 !important;
}

/* Prezzo: sottolineatura sottile come Figma */
.property-detail-page #prop-price {
    text-decoration: underline !important;
    text-decoration-thickness: 1px !important;
    text-underline-offset: 3px !important;
    color: #050038 !important;
}

/* Città: override globale non più necessario — stile inline nel template */
/* #prop-location handled via inline style */

/* Prezzo colonna destra: nascosto su mobile (appare nel blocco mobile sopra) */
@media (max-width: 1023px) {
    #prop-price {
        display: none !important;
    }
    /* Titolo nella colonna sinistra: nascosto su mobile (appare nel blocco mobile sopra) */
    #prop-title {
        display: none !important;
    }
}

/* Similar Card */
.similar-card {
    border-radius: 26px;
}

/* ============================================
   PROPERTY DETAIL — Figma mobile/desktop fix
   ============================================ */

/* Bottoni pill sull'immagine mobile
   "Planimetria ›"  e  "Vedi foto (N) ›"    */
.gallery-pill-btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 155px;
    padding: 9px 16px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.10);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    color: #050038;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: background 0.15s, box-shadow 0.15s;
    appearance: none;
    -webkit-appearance: none;
    line-height: 1;
}
.gallery-pill-btn:hover,
.gallery-pill-btn:focus {
    background: #fff;
    box-shadow: 0 2px 12px rgba(0,0,0,.12);
    color: #050038;
    text-decoration: none;
    outline: none;
}

/* Thumbnail colonna desktop: border-radius uniforme */

/* ============================================
   Property Detail — Gallery (Figma pixel-perfect)
   Figma: desktop 828×628px | mobile 390×295px
   Thumbnail: 277×139px con gap 24px (gap-6)
   ============================================ */

/* Immagine principale */
.property-detail-page #gallery-main {
    height: 76vw;        /* mobile: 390×295 → 295/390 = 75.6vw ≈ 76vw */
    min-height: 260px;
    max-height: 360px;   /* cap tablet portrait */
    border-radius: 16px;
}

@media (min-width: 768px) {
    .property-detail-page #gallery-main {
        height: 520px;
        max-height: none;
    }
}

@media (min-width: 1024px) {
    .property-detail-page #gallery-main {
        height: 628px;   /* Figma desktop: 628px esatti */
        max-height: none;
        border-radius: 16px;
    }
}

/* Wrapper esterno (contiene main + pill buttons come siblings) */
.property-detail-page #gallery-wrapper {
    height: 76vw;
    min-height: 260px;
    max-height: 360px;
}

@media (min-width: 768px) {
    .property-detail-page #gallery-wrapper {
        height: 520px;
        max-height: none;
    }
}

@media (min-width: 1024px) {
    .property-detail-page #gallery-wrapper {
        height: 628px;
        max-height: none;
    }
}

/* Thumbnail singola — Figma: 277×139px */
#gallery-thumbs > div {
    height: 139px;
    border-radius: 16px;
}
/* Fix Tailwind base: img { height: auto } sovrascrive h-full
   Forziamo height:100% sull'immagine dentro gallery-main */
.property-detail-page #gallery-main img,
.property-detail-page #gallery-main-img {
    height: 100% !important;
    width: 100% !important;
    max-width: none !important;
}

/* ============================================
   Fix — Form h2 "Richiesta informazioni": forza bianco
   Il globale .property-detail-page h2 { color:#050038 }
   sovrascriveva text-white di Tailwind
   ============================================ */
.property-detail-page [data-i18n="details.infoRequest"] {
    color: #ffffff !important;
}

/* ============================================
   Fix — "Con Caratteristiche Simili": forza bianco
   ============================================ */
.property-detail-page [data-i18n="details.similarProperties"] {
    color: #ffffff !important;
}

/* ============================================
   Allineamento colonna destra su desktop:
   il prezzo parte allineato alla "city" sinistra.
   Titolo: 30px × 1.2lh ≈ 36px + mb-3(12px) = 48px
   Città:  26px × 1.2lh ≈ 32px + mb-8(32px) = 64px
   Totale padding-top colonna destra ≈ 112px
   ============================================ */
@media (min-width: 1024px) {
    .property-detail-page .space-y-6.order-1 {
        padding-top: 90px;
    }
}

/* ============================================
   HOME / LIST — Property Card (Figma pixel-perfect)
   Card:  358×428px  bg #FAFAFA  border-radius 16px
   Image: 324×240px  border-radius 12px  centered (padding 17px top/sides)
   ============================================ */

.property-card {
    display: block;
    background: #FAFAFA;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    overflow: hidden;         /* clip card corners */
    text-decoration: none;
    transition: box-shadow 0.2s;
}

.property-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    text-decoration: none;
}

/* Image wrapper: adds padding so the photo has inset rounded corners */
.property-card-img-wrap {
    padding: 17px 17px 0;    /* (358-324)/2 = 17px */
    height: 397px;
    box-sizing: border-box;
    overflow: hidden;
}

.property-card-img {
    display: block;
    width: 100%;
    height: 380px;
    object-fit: cover;
    border-radius: 4px;
}

/* ============================================
   CONTATTI — Card indirizzo + mappa unificata
   Figma: 1156×310px, flex row desktop / column mobile
   ============================================ */
.contact-address-card {
    display: flex;
    flex-direction: column;
    background: #FAFAFA;
    border: none;
    border-radius: 24px;
    box-shadow: 0 1px 8px rgba(0,0,0,0.06);
    overflow: hidden;
    max-width: 100%;
}

.contact-address-card-map {
    width: 100%;
    padding: 16px;
    background: #FAFAFA;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Mappa come card interna — Figma 424×260px */
.contact-map-inner {
    width: 100%;
    height: 260px;
    border-radius: 12px;
    overflow: hidden;
}

/* Desktop: indirizzo a sinistra, mappa compatta a destra */
@media (min-width: 1024px) {
    .contact-address-card {
        flex-direction: row !important;
        align-items: center;
        padding-left: 100px;
    }
    .contact-address-card-map {
        width: 70%;
        flex-shrink: 0;
        justify-content: flex-end;
        padding: 24px;
        margin-left: 100px;
    }
    .contact-map-inner {
        width: 824px;
        flex-shrink: 0;
    }
}

/* Card telefono/email */
.contact-info-card {
    background: #FAFAFA;
    border: none;
    border-radius: 24px;
    padding: 2rem;
    box-shadow: 0 1px 8px rgba(0,0,0,0.06);
}

/* Overlap sulla barra blu del form */
.contact-info-grid {
    position: relative;
    z-index: 1;
    margin-bottom: -96px;
}

/* ============================================
   CONTATTI — Header grid
   Mobile: 1 colonna (testo sopra, bottoni sotto)
   Desktop lg: 60% testo | 40% bottoni
   ============================================ */
.contact-header-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
}

@media (min-width: 1024px) {
    .contact-header-grid {
        grid-template-columns: minmax(0, 60%) minmax(0, 40%);
        gap: 40px;
    }
}

/* ============================================
   Card gap — forzato via CSS (gap-16 non compilato da Tailwind)
   Home carousel e lista immobili
   ============================================ */
#home-properties,
#property-grid {
    gap: 64px !important;
}

@media (max-width: 767px) {
    #home-properties,
    #property-grid {
        gap: 32px !important;
    }
}

/* ============================================
   Home — About e Services section gap
   ============================================ */
.about-services-grid {
    gap: 110px;
}
/* ============================================
   About/Services image box — altezza responsive
   ============================================ */
.about-img-box {
    height: 260px;    /* mobile: più compatta */
}

@media (min-width: 1024px) {
    .about-img-box {
        height: 480px;   /* desktop: più alta del Figma originale 387px */
    }
}

/* ============================================
   Hero — testo centrato su mobile
   ============================================ */
@media (max-width: 1023px) {
    .relative.h-\[500px\] > .relative.z-10,
    .relative.h-\[600px\] > .relative.z-10,
    .relative.h-\[754px\] > .relative.z-10 {
        justify-content: center !important;
        align-items: center !important;
        padding-bottom: 0 !important;
        text-align: center !important;
    }
    .about-services-grid {
        gap: 32px;
        grid-template-columns: 1fr !important;
    }
}

/* ============================================
   Paginazione — Figma pixel-perfect
   Desktop: 56×56px  |  Mobile: 32×32px
   ============================================ */
.pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    color: #02033b;
    background: transparent;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.pagination-btn:hover {
    background: rgba(2, 3, 59, 0.06);
    text-decoration: none;
    color: #02033b;
}

.pagination-btn--active {
    background: #02033b;
    color: #ffffff;
    border-radius: 12px;
}

.pagination-btn--active:hover {
    background: #02033b;
    color: #ffffff;
}

.pagination-btn--ellipsis {
    cursor: default;
    background: transparent;
    color: #02033b;
    opacity: 0.5;
}

.pagination-btn--nav {
    width: auto;
    padding: 0 12px;
    background: transparent;
    font-weight: 400;
}

@media (max-width: 767px) {
    .pagination-btn {
        width: 32px;
        height: 32px;
        font-size: 14px;
        border-radius: 8px;
    }
    .pagination-btn--nav {
        width: auto;
        padding: 0 8px;
    }
}

/* Search bar — bottone RICERCA full width su mobile */
@media (max-width: 767px) {
    #hero-search-btn,
    #listing-search-btn {
        width: 100% !important;
        justify-content: center;
    }

    /* Search bar - rimozione background */
    #hero-search-bar {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* Testo filtri allineato a destra su mobile */
     #hero-search-bar .multi-select-label {
        text-align: left;
    }
}

/* ============================================
   Single-Select custom (Price Range)
   ============================================ */
.single-select-option {
    padding: 10px 16px;
    font-size: 15px;
    color: #02033b;
    cursor: pointer;
    border-radius: 8px;
    margin: 3px 6px;
    transition: background-color 0.15s;
}

.single-select-option:hover {
    background-color: rgba(2, 3, 59, 0.05);
}

.single-select-option.selected {
    background-color: #02033b;
    color: #ffffff;
}

.single-select-reset {
    color: rgba(2, 3, 59, 0.5);
    border-bottom: 1px solid rgba(2, 3, 59, 0.08);
    margin-bottom: 6px;
    padding-bottom: 13px;
    border-radius: 0;
}

/* ============================================
   iOS Safari fix — rende i div single-select cliccabili
   ============================================ */
.single-select .multi-select-trigger,
.single-select .single-select-option {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(2, 3, 59, 0.08);
    touch-action: manipulation;
}

/* ============================================
   Services grid — 4 colonne su desktop
   ============================================ */
@media (min-width: 768px) {
  .services-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  .services-grid > div {
    width: 100% !important;
    max-width: 220px !important;
  }
}

/* Sort trigger — icone responsive */
.sort-icon-mobile    { display: inline-block !important; }
.sort-label-desktop,
.sort-arrow-desktop  { display: none !important; }

@media (min-width: 768px) {
    .sort-icon-mobile    { display: none !important; }
    .sort-label-desktop  { display: inline !important; }
    .sort-arrow-desktop  { display: inline-block !important; }
}

/* Icona sort attiva su mobile — punto blu sopra l'icona */
#sort-icon-mobile.sort-active {
    filter: brightness(0) saturate(100%) invert(13%) sepia(94%) saturate(800%) hue-rotate(210deg);
    position: relative;
}