/*
 Theme Name: Houzez Child
 Theme URI: https://ladomusdivenere.com
 Description: Tema child per Houzez
 Author: Gabriele Toma
 Author URI: https://ladomusdivenere.com
 Template: houzez
 Version: 1.0.0
*/

/* ============================================
   VARIABILI CSS PERSONALIZZATE
   ============================================ */

/* Colori - invariati su tutti i dispositivi */
:root {
    --colore-primario-blu: #28373E;
    --colore-secondario-marrone: #9B6B43;;
    --colore-grigio-chiaro: #EAEBED;
}

/* Tipografia - valori base per desktop */
:root {
    --font-primario: "Le Jour Serif";
    --dimensione-font-primario: clamp(2rem, 6vw, 3rem);
    --peso-font-primario: 700;
    --trasformazione-testo-primario: uppercase;

    --font-secondario: "Inter";
    --dimensione-font-secondario: 16px;
    --peso-font-secondario: 400;

    --font-testo: "Playfair";
    --peso-font-testo: 400;

    --font-accento: "Inter";
    --dimensione-font-accento: 16px;
    --peso-font-accento: 500;
    --trasformazione-testo-accento: uppercase;
    --decorazione-testo-accento: none;
}

/* ============================================
   BOTTONI PERSONALIZZATI
   ============================================ */

/* Bottone Style 1 */
.bottone-style-1 {
    font-family: var(--font-primario), Sans-serif;
    font-size: 20px;
    font-weight: 700;
    border-radius: 0px 0px 0px 0px;
    padding: 10px 0;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.bottone-style-1-marrone:hover, .bottone-style-2:hover {
    transform: scale(1.1);
}

/* Bottone Style 2 */
.bottone-style-2 {
    background-color: transparent;
    font-family: var(--font-primario), Sans-serif;
    font-size: 20px;
    font-weight: 700;
    transition-duration: 0.5s;
    border-style: solid;
    border-width: 2px 2px 2px 2px;
    border-radius: 1px 1px 1px 1px;
    padding: 10px 30px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

/* Modificatori colore sfondo per bottoni */
.sfondo-marrone {
    background-color: var(--colore-secondario-marrone) !important;
}

.sfondo-blu {
    background-color: var(--colore-primario-blu) !important;
}

.sfondo-grigio-chiaro {
    background-color: var(--colore-grigio-chiaro) !important;
}

/* Modificatori colore testo per bottoni */
.testo-bianco {
    color: white !important;
    fill: white !important;
}

.testo-marrone {
    color: var(--colore-secondario-marrone) !important;
    fill: var(--colore-secondario-marrone) !important;
}

.testo-blu {
    color: var(--colore-primario-blu) !important;
    fill: var(--colore-primario-blu) !important;
}

/* ============================================
   SOVRASCRITTURA VARIABILI ELEMENTOR
   ============================================ */

/* Sovrascrivi le variabili Elementor con i nostri valori personalizzati */
.elementor-kit-11 {
    --e-global-color-primary: var(--colore-primario-blu);
    --e-global-color-secondary: var(--colore-secondario-marrone);
    --e-global-color-text: #7A7A7A;
    --e-global-color-accent: #61CE70;
    --e-global-color-aa5884c: var(--colore-grigio-chiaro);
    --e-global-typography-primary-font-family: var(--font-primario);
    --e-global-typography-primary-font-size: var(--dimensione-font-primario);
    --e-global-typography-primary-font-weight: var(--peso-font-primario);
    --e-global-typography-primary-text-transform: var(--trasformazione-testo-primario);
    --e-global-typography-secondary-font-family: var(--font-secondario);
    --e-global-typography-secondary-font-size: var(--dimensione-font-secondario);
    --e-global-typography-secondary-font-weight: var(--peso-font-secondario);
    --e-global-typography-text-font-family: var(--font-testo);
    --e-global-typography-text-font-weight: var(--peso-font-testo);
    --e-global-typography-accent-font-family: var(--font-accento);
    --e-global-typography-accent-font-size: var(--dimensione-font-accento);
    --e-global-typography-accent-font-weight: var(--peso-font-accento);
    --e-global-typography-accent-text-transform: var(--trasformazione-testo-accento);
    --e-global-typography-accent-text-decoration: var(--decorazione-testo-accento);
}

/* ============================================
   CONVERSIONE PREZZI MAD/EUR
   ============================================ */

/* Bottone richiesta prezzo (identico a "Vedi Galleria" ma colori invertiti) */
.price-request-button {
    background-color: var(--colore-grigio-chiaro);
    font-family: var(--font-primario), Sans-serif;
    font-size: 20px;
    font-weight: 700;
    fill: var(--colore-primario-blu);
    color: var(--colore-secondario-marrone);
    box-shadow: 0px 6px 26px -5px #000000;
    border-radius: 0;
    padding: 10px;
    transition: all 0.3s ease;
    cursor: help;
    position: relative;
    text-align: center;
    border: none;
    display: block;
    width: 100%;
}

.price-request-button:hover {
    transform: translateY(-2px);
    box-shadow: 0px 8px 30px -5px #000000;
}

/* Layout a griglia per il prezzo - stessa larghezza del bottone */
.price-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px 12px;
    align-items: center;
    justify-items: center;
    min-width: 180px;
    max-width: 260px;
    width: 100%;
    margin: 0 auto;
}

.price-cell {
    text-align: center;
    font-family: var(--font-primario), Sans-serif;
}

.price-cell.label {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: var(--font-primario), Sans-serif;
    grid-column: 1 / -1; /* Occupa tutte e 7 le colonne */
    color: var(--colore-secondario-marrone) !important;
    background-color: transparent !important;
    text-align: center;
    justify-self: center;
    width: 100%;
}

.price-cell.currency {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.8;
    font-family: var(--font-secondario), Sans-serif;
}

.price-cell.currency.mad {
    grid-column: 2; /* MAD nella colonna 2 */
}

.price-cell.currency.eur {
    grid-column: 6; /* EUR nella colonna 6 */
}

.price-cell.value {
    font-size: 18px;
    font-weight: 700;
}

.price-cell.value.mad {
    grid-column: 1 / 4; /* Prezzo MAD occupa colonne 1-3 (3 colonne) */
}

.price-cell.separator {
    font-size: 16px;
    font-weight: 600;
    color: var(--colore-secondario-marrone) !important;
    grid-column: 4; /* Trattino nella colonna 4 (1 colonna) */
}

.price-cell.value.eur {
    grid-column: 5 / 8; /* Prezzo EUR occupa colonne 5-7 (3 colonne) */
}

/* Stili precedenti mantenuti per compatibilità */
.price-request-label {
    display: none; /* Nascosto perché ora usiamo la griglia */
}

.price-request-currencies {
    display: none; /* Nascosto perché ora usiamo la griglia */
}

.price-request-value {
    display: none; /* Nascosto perché ora usiamo la griglia */
}

.price-conversion {
    font-size: 0.85em;
    color: #666;
    font-weight: normal;
    margin-left: 0.5rem;
}

.price-eur-wrapper {
    position: relative;
    display: inline-block;
}

/* Tooltip vero con HTML */
.price-tooltip {
    position: absolute;
    bottom: calc(100% + 15px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.95);
    color: white;
    padding: 15px 18px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.7;
    min-width: 280px;
    max-width: 90vw;
    width: max-content;
    text-align: left;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    z-index: 10000;
    pointer-events: none;
    font-family: var(--font-secondario), Sans-serif;
}

.price-tooltip .tooltip-title {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 10px;
    color: #fff;
    font-family: var(--font-secondario), Sans-serif;
}

.price-tooltip .tooltip-rate,
.price-tooltip .tooltip-update {
    margin-bottom: 6px;
    color: #fff;
    font-family: var(--font-secondario), Sans-serif;
}

.price-tooltip .tooltip-disclaimer {
    margin-top: 10px;
    font-size: 11px;
    color: #ccc;
    line-height: 1.5;
    font-family: var(--font-secondario), Sans-serif;
}

.price-tooltip strong {
    color: #fff;
    font-weight: 600;
    font-family: var(--font-secondario), Sans-serif;
}

/* Freccia del tooltip */
.price-tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.95);
}

.price-eur-wrapper:hover .price-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-5px);
}

.related-price .price-conversion {
    display: block;
    font-size: 0.8em;
    margin-top: 0.25rem;
    margin-left: 0;
}
/* ============================================ */


.page-id-16650 .row > * {
    padding-right: 0;
    padding-left: 0;
}

/* ============================================ */

/* HEADER RESPONSIVE */
#header-hz-elementor {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  transition: top 0.4s ease-in-out;
  background: #28373e58; /* semitrasparente */
  backdrop-filter: blur(10px);           /* sfocatura dello sfondo */
  -webkit-backdrop-filter: blur(10px);   /* supporto Safari */
  border-bottom: 1px solid #EAEBED;
  padding: 0 !important; /* Padding rimosso */
}

#header-hz-elementor.header-active {
  top: 0;
  color: #EAEBED;
}

/* Make sure page content sits below the fixed header.
     We set --header-height via JS (header-offset.js). Fallback to 80px if not available. */
:root { --header-height: 80px; }
/* Do NOT apply header offset on the homepage (body.home) and single property pages. Apply only when not on home and not on single property. */
html:not(.home):not(.single-property) { scroll-padding-top: var(--header-height); }
body:not(.home):not(.single-property) { padding-top: var(--header-height); }

/* For anchor targets and elementor sections ensure correct scroll offset (only off-home) */
html:not(.home) .elementor-section,
html:not(.home) .custom-taxonomy-hero,
html:not(.home) .custom-search-hero { scroll-margin-top: calc(var(--header-height) + 10px); }


#header-hz-elementor:not(.header-active)
  .elementor-18230 .elementor-element.elementor-element-ca6473b:not(.elementor-motion-effects-element-type-background),
#header-hz-elementor:not(.header-active)
  .elementor-18230 .elementor-element.elementor-element-ca6473b > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-color: transparent !important;
    background-image: none !important;
}

/* ============================================ */

.elementor-18709 
.elementor-element.elementor-element-98ee834:not(.elementor-motion-effects-element-type-background),
.elementor-18709 
.elementor-element.elementor-element-98ee834 
> .elementor-motion-effects-container 
> .elementor-motion-effects-layer {
    background-color: var(--colore-grigio-chiaro);
    background-image: url(https://ladomusdivenere.com/wp-content/uploads/2025/09/El_nacimiento_de_Venus_por_Sandro_Botticelli.jpg);
    background-position: center top; /* centrata orizzontale, ancorata in alto */
    background-repeat: no-repeat;
    background-size: cover;
}

/* Altezza minima per la sezione con data-id="26c3582" */
[data-id="26c3582"] {
  min-height: 1100px !important;
}

/* Altezza fluida: da 50vh (mobile) a 80vh (desktop) */
.elementor-element-95ccc4d {
    height: clamp(50vh, 10vh + 40vw, 80vh) !important;
}

/* ============================================ */

/* Margin top per lo slider venduto in tutte le pagine tranne la homepage */
/* Margin top solo alla prima section dopo l'header, tranne in homepage */

.gt_float_switcher .gt-selected {
    position: relative;
    z-index: 888;
    background-color: transparent !important;
    cursor: pointer;
    text-transform: uppercase;
    overflow: visible; /* permette al dropdown di fuoriuscire */
}

.gt_float_switcher, .gt-current-lang, .gt_float_switcher .gt_options a{
    font-family: var(--font-primario) !important;
    font-size: 15px;
    border-radius: 2px;
    color: var(--colore-grigio-chiaro) !important;
    display: inline-flex !important;
    line-height: 20px;
    box-shadow: unset !important;
    background: transparent !important;
    overflow: hidden;
    transition: unset !important;
    padding-left: 0 !important;
}

/* Assicura che il contenitore non tagli il dropdown */
.gt_float_switcher {
    position: relative !important;
    overflow: visible !important;
}

.gt_float_switcher .gt-selected .gt-current-lang img {
    vertical-align: middle;
}

.gt_float_switcher img {
    width: 20px !important;
}

.gt_float_switcher .gt-selected .gt-current-lang span.gt-lang-code {
    vertical-align: middle;
}

.gt_float_switcher .gt-selected .gt-current-lang {
    gap: 5px !important;
}

.gt_float_switcher .gt-selected .gt-current-lang span.gt_float_switcher-arrow {
    /* Colore esplicito per l'icona freccia */
    color: #EAEBED !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 285 285'%3E%3Cpath d='M282 76.5l-14.2-14.3a9 9 0 0 0-13.1 0L142.5 174.4 30.3 62.2a9 9 0 0 0-13.2 0L3 76.5a9 9 0 0 0 0 13.1l133 133a9 9 0 0 0 13.1 0l133-133a9 9 0 0 0 0-13z' fill='%23EAEBED'/%3E%3C/svg%3E") !important;
    transform: rotate(0deg) !important;
    display: inline-block;
    vertical-align: middle;
    height: 24px;
    width: 15px;
    background-position: 50%;
    background-size: 11px;
    background-repeat: no-repeat;
}

.gt_float_switcher .gt_options.gt-open,
.gt_float_switcher .gt_options.gt-open[style*="display: none"] {
    display: block !important;
    transform: translateX(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Evita il "salto" al primo open solo durante la preparazione al primo open */
.gt_float_switcher .gt_options.gt-prep[style*="display: none"] {
    display: block !important;
    opacity: 0 !important;
    transform: translateX(100%) !important;
    pointer-events: none !important;
}

.gt_float_switcher .gt-selected .gt-current-lang span.gt_float_switcher-arrow.gt_arrow_rotate, .gt_arrow_rotate {
    transform: rotate(-180deg) !important;
}

.iub__us-widget {
    display: none !important;
}

/* ============================================
   LIST MARKERS
   ============================================ */

.menu-item.menu-gtranslate {
    list-style: none;
}

.internal-hamburger {
    /* Stili di fallback - gli stili principali sono applicati via JavaScript per massima priorità */
    right: -30px !important;
    border-top: 1px solid #EAEBED !important;
}

.download-form-modal-content{
    background-color: var(--e-global-color-primary, #28373E) !important;
}

body, .main-wrap, .fw-property-documents-wrap h3 span, .fw-property-details-wrap h3 span {
    background-color: var(--colore-primario-blu) !important;
}

.modal-content {
background-color: var(--colore-grigio-chiaro) !important;
}

/* Nasconde il badge di reCAPTCHA */
.grecaptcha-badge {
    display: none !important;
}

/* ============================================
   PAGINA COMPRA - SFONDO GRIGIO CHIARO
   ============================================ */

.custom-taxonomy-listing {
    background-color: #EAEBED !important;
}

#cmplz-document, .editor-styles-wrapper .cmplz-unlinked-mode {
    max-width: unset !important;
}

#cmplz-document p, .editor-styles-wrapper .cmplz-unlinked-mode p,
#cmplz-document li, .editor-styles-wrapper .cmplz-unlinked-mode li,
#cmplz-document ul, .editor-styles-wrapper .cmplz-unlinked-mode ul,
#cmplz-document span, .editor-styles-wrapper .cmplz-unlinked-mode span,
#cmplz-document h3, .editor-styles-wrapper .cmplz-unlinked-mode h3 {
    color: var(--colore-grigio-chiaro) !important;
    font-family: var(--e-global-typography-secondary-font-family), Sans-serif;
    font-size: var(--e-global-typography-secondary-font-size);
    font-weight: var(--e-global-typography-secondary-font-weight);
}
    
#cmplz-document h2, .editor-styles-wrapper .cmplz-unlinked-mode h2 {
    color: var(--colore-grigio-chiaro) !important;
    font-family: var(--e-global-typography-primary-font-family), Sans-serif;
    font-size: var(--e-global-typography-primary-font-size);
    font-weight: var(--e-global-typography-primary-font-weight);
    text-transform: var(--e-global-typography-primary-text-transform);
}

#cmplz-document a, .editor-styles-wrapper .cmplz-unlinked-mode a {
    color: var(--colore-secondario-marrone) !important;
} 

#cmplz-document a[target=_blank]::after {
    filter: invert(1);
}