/* Elvy House — stili aggiuntivi per replicare il comportamento della versione React */

[hidden] { display: none !important; }

/* Animazioni di comparsa (equivalenti a framer-motion initial/whileInView) */
.js [data-reveal] { opacity: 0; }
[data-reveal].eh-in { opacity: 1 !important; transform: none !important; }

/* Hover "scale" (pulsante hero) e "lift" (recensioni) */
[data-hover="scale"] { transition: transform .2s ease, box-shadow .22s ease, filter .22s ease; }
[data-hover="scale"]:hover { transform: scale(1.03); }
[data-hover="scale"]:active { transform: scale(.98); }
[data-hover="lift"] { transition: transform .25s ease; }
[data-hover="lift"]:hover { transform: translateY(-4px); }

/* FAQ */
[data-faq] [role=region] { overflow: hidden; }
[data-faq] button svg { transition: transform .2s; }
[data-faq][data-state=open] button svg { transform: rotate(180deg); }

/* Carosello recensioni */
[data-track] { will-change: transform; }
[data-track].eh-anim { transition: transform .55s cubic-bezier(.25,.8,.25,1); }

/* Select personalizzata (stile Radix) */
[data-select] button[data-placeholder] [data-label] { color: hsl(var(--muted-foreground)); }
.eh-pop { animation: eh-pop-in .15s ease-out; transform-origin: top; }
@keyframes eh-pop-in { from { opacity: 0; transform: scale(.95) translateY(-4px); } to { opacity: 1; transform: none; } }
.eh-field-error { border-color: #dc2626 !important; }

/* Galleria */
.eh-fade { animation: eh-fade .2s ease-out; }
.eh-zoom { animation: eh-zoom .2s ease-out; }
@keyframes eh-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes eh-zoom { from { opacity: 0; transform: translate(-50%, -48%) scale(.95); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.eh-img { transition: opacity .3s; }
.eh-img.eh-fading { opacity: 0; }
body.eh-lock { overflow: hidden; }

/* Successo form */
.eh-pop-in { animation: eh-spring .6s cubic-bezier(.34,1.56,.64,1); }
@keyframes eh-spring { from { transform: scale(0); } to { transform: scale(1); } }

/* WhatsApp e banner cookie */
#whatsapp-fab:not([hidden]) { animation: eh-fab .5s cubic-bezier(.34,1.56,.64,1); }
#whatsapp-fab { transition: box-shadow .2s, transform .2s; }
#whatsapp-fab:hover { transform: scale(1.06); }
@keyframes eh-fab { from { opacity: 0; transform: scale(.5) translateY(30px); } to { opacity: 1; transform: none; } }
#cookie-banner:not([hidden]) { animation: eh-cookie .6s cubic-bezier(.34,1.3,.64,1); }
#cookie-banner.eh-out { transition: transform .3s, opacity .3s; transform: translateY(100px); opacity: 0; }
@keyframes eh-cookie { from { opacity: 0; transform: translateY(100px); } to { opacity: 1; transform: none; } }

/* Toast (stile sonner, top-center, richColors) */
.eh-toaster { position: fixed; top: 24px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; gap: 8px; width: 356px; max-width: calc(100vw - 32px); pointer-events: none; }
.eh-toast { pointer-events: auto; position: relative; display: flex; align-items: center; gap: 6px; padding: 16px; padding-right: 36px; border-radius: 8px; border: 1px solid; box-shadow: 0 4px 12px rgba(0,0,0,.1); font: 500 13px/1.4 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; animation: eh-toast-in .4s ease; }
.eh-toast svg { flex-shrink: 0; }
.eh-toast.success { background: #ecfdf3; color: #008a2e; border-color: #bffcd9; }
.eh-toast.error { background: #fff0f0; color: #e60000; border-color: #ffe0e1; }
.eh-toast .eh-x { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; border: 1px solid currentColor; background: #fff; color: inherit; display: flex; align-items: center; justify-content: center; opacity: .7; cursor: pointer; }
.eh-toast.eh-leave { transition: opacity .3s, transform .3s; opacity: 0; transform: translateY(-10px); }
@keyframes eh-toast-in { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
	.js [data-reveal] { opacity: 1; }
	[data-reveal] { transform: none !important; transition: none !important; }
}

/* Pulsante del plugin WhatsApp Chat del vecchio sito: la landing ha già il suo */
.qlwapp { display: none !important; }

/* Galleria a schermo intero su telefono (verticale e orizzontale) */
@media (max-width: 767px), (max-height: 600px) {
	#gallery [role=dialog] { top: 0; right: 0; bottom: 0; left: 0; transform: none; width: auto; height: auto; max-width: none; display: flex; flex-direction: column; border-radius: 0; animation: eh-fade .2s ease-out; }
	#gallery [role=dialog] > .relative { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
	#gallery [role=dialog] .aspect-\[16\/10\] { aspect-ratio: auto; flex: 1 1 auto; min-height: 0; }
	#gallery [role=dialog] .aspect-\[16\/10\] + div { flex: 0 0 auto; padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
	#gallery [data-gallery-close] { top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; }
	#gallery [data-gallery-prev], #gallery [data-gallery-next] { width: 40px; height: 40px; }
	#gallery [data-gallery-prev] { left: 8px; }
	#gallery [data-gallery-next] { right: 8px; }
	#gallery [data-gallery-thumbs] button { width: 64px; height: 48px; }
}
@media (max-height: 600px) and (orientation: landscape) {
	#gallery [role=dialog] .aspect-\[16\/10\] + div .mt-4 { display: none; }
	#gallery [role=dialog] .aspect-\[16\/10\] + div { padding-top: 8px; padding-bottom: 8px; }
}

/* Safari iPhone: nessun elemento della galleria può allargarsi oltre lo schermo */
@media (max-width: 767px), (max-height: 600px) {
	#gallery [role=dialog], #gallery [role=dialog] * { max-width: 100%; }
	#gallery [role=dialog], #gallery [role=dialog] > .relative, #gallery [role=dialog] .aspect-\[16\/10\] + div { min-width: 0; overflow: hidden; }
	#gallery [data-gallery-thumbs] { overflow-x: auto; -webkit-overflow-scrolling: touch; }
	#gallery [data-gallery-img] { left: 0; right: 0; width: 100%; }
}

/* Portfolio: chiusura "E non finisce qui" sotto le card */
.eh-more { margin-top: 40px; display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; padding: 26px 30px; border: 1px dashed rgba(11, 27, 61, .18); border-radius: 24px; background: #FAFAFA; }
.eh-more-text { flex: 1 1 380px; min-width: 0; }
.eh-more-title { display: block; font-family: "Cabinet Grotesk", Manrope, sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; font-size: 22px; line-height: 1.1; color: #0B1B3D; }
.eh-more-text p { margin-top: 6px; color: #4B5563; font-size: 15px; line-height: 1.6; max-width: 46rem; }
@media (max-width: 640px) { .eh-more { padding: 22px 20px; } .eh-more a { width: 100%; justify-content: center; } }

/* Banner "Area riservata proprietari" (tra Portfolio e Prenota un soggiorno) */
.eh-own-sec { background: #fff; padding: 8px 0 24px; }
.eh-own { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; padding: 56px; border-radius: 28px; background: #0B1B3D; color: #fff; }
.eh-own-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 0% 0%, rgba(212,175,55,.16), transparent 45%), radial-gradient(circle at 100% 100%, rgba(212,175,55,.10), transparent 40%); }
.eh-own-intro, .eh-own-grid { position: relative; min-width: 0; }
.eh-own h2 { margin-top: 16px; font-family: "Cabinet Grotesk", Manrope, sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(30px, 3.4vw, 46px); line-height: .98; letter-spacing: -.02em; text-wrap: balance; }
.eh-own-intro > p { margin-top: 20px; color: rgba(255,255,255,.72); font-size: 16px; line-height: 1.65; max-width: 34rem; }
.eh-own-live { margin-top: 22px; display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.05); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; color: rgba(255,255,255,.85); }
.eh-own-dot { width: 8px; height: 8px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 0 rgba(52,211,153,.6); animation: eh-live 2s infinite; }
@keyframes eh-live { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.55); } 70% { box-shadow: 0 0 0 9px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }
.eh-own-cta { margin-top: 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.eh-own-link { color: rgba(255,255,255,.75); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 6px; text-decoration-color: rgba(212,175,55,.6); }
.eh-own-link:hover { color: #fff; }
.eh-own-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.eh-own-card { padding: 24px; border-radius: 20px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.10); transition: border-color .25s, background .25s, transform .25s; }
.eh-own-card:hover { border-color: rgba(212,175,55,.45); background: rgba(255,255,255,.06); transform: translateY(-3px); }
.eh-own-ic { display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; border-radius: 14px; background: rgba(212,175,55,.14); color: #D4AF37; }
.eh-own-card h3 { margin-top: 16px; font-family: "Cabinet Grotesk", Manrope, sans-serif; font-weight: 800; text-transform: uppercase; font-size: 18px; line-height: 1.15; letter-spacing: -.01em; }
.eh-own-card p { margin-top: 8px; color: rgba(255,255,255,.66); font-size: 14px; line-height: 1.6; }
@media (max-width: 1023px) { .eh-own { grid-template-columns: 1fr; gap: 36px; padding: 40px 32px; } }
@media (max-width: 640px) { .eh-own { padding: 32px 22px; border-radius: 24px; } .eh-own-grid { grid-template-columns: 1fr; } .eh-own-cta a { width: 100%; justify-content: center; letter-spacing: .06em; padding-left: 16px; padding-right: 16px; white-space: nowrap; font-size: 13px; } .eh-own-cta { align-items: stretch; } .eh-own-link { text-align: center; } }
@media (prefers-reduced-motion: reduce) { .eh-own-dot { animation: none; } }
