/* ═══════════════════════════════════════════════════════════════════
   VacationHost AI — PREMIUM GUEST APP v8.0
   Font: Outfit (display) + Inter (body)
═══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600&display=swap');

.vhai-app {
    --primary:     #1e3a5f;
    --primary-mid: #2c5282;
    --accent:      #f6a623;
    --accent-warm: #f97316;
    --bg:          #f7f5f2;
    --bg-card:     #ffffff;
    --bg-subtle:   #f0ede8;
    --border:      #e8e4dd;
    --text:        #1a1714;
    --text-mid:    #4a4540;
    --text-soft:   #9b9490;
    --shadow-sm:   0 2px 8px rgba(0,0,0,0.06);
    --shadow-md:   0 8px 24px rgba(0,0,0,0.10);
    --mono-icon:   #b08a4f;
    --mono-border: #d7c9b2;
    --mono-bg:     #fdfaf5;
    --font-display: 'Outfit', sans-serif;
    --font-body:    'Inter', sans-serif;
}

.vhai-app, .vhai-app * { box-sizing:border-box !important; margin:0; padding:0; outline:none !important; -webkit-tap-highlight-color:transparent; }
.vhai-app { display:flex !important; flex-direction:column !important; height:100% !important; background:var(--bg) !important; overflow:hidden !important; position:relative !important; color:var(--text) !important; font-family:var(--font-body) !important; }

/* Nasconde Booking Engine Pro nella guida ospite (evita overlay/touch conflict) */
#bep-global-sticky-bar,
#bep-sticky-bar-mobile-drawer,
#bep-cookie-banner,
.bep-cookie-banner-wrapper,
.bep-sticky-bar,
.bep-mobile-drawer,
[id^="bep-"] {
    display:none !important;
    visibility:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
}

/* HEADER */
.vhai-app .vhai-header { display:flex !important; align-items:center !important; gap:12px !important; padding:18px 18px 16px !important; background:linear-gradient(135deg,var(--primary) 0%,var(--primary-mid) 100%) !important; color:#fff !important; flex-shrink:0 !important; position:relative !important; z-index:50 !important; box-shadow:0 4px 20px rgba(30,58,95,0.35) !important; }
.vhai-app .vhai-hthumb { width:48px !important; height:48px !important; border-radius:16px !important; object-fit:cover !important; border:2px solid rgba(255,255,255,0.3) !important; flex-shrink:0 !important; }
.vhai-app .vhai-hicon { width:48px !important; height:48px !important; border-radius:16px !important; background:rgba(255,255,255,0.15) !important; display:flex !important; align-items:center !important; justify-content:center !important; flex-shrink:0 !important; }
.vhai-app .vhai-hinfo { flex:1 1 auto !important; min-width:0 !important; max-width:44% !important; }
.vhai-app .vhai-htitle { display:block !important; font-family:var(--font-display) !important; font-size:17px !important; font-weight:700 !important; letter-spacing:-0.3px !important; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; }
.vhai-app .vhai-hstatus { display:flex !important; align-items:center !important; gap:6px !important; margin-top:3px !important; }
.vhai-app .vhai-dot { width:7px !important; height:7px !important; border-radius:50% !important; background:#4ade80 !important; display:inline-block !important; animation:vhai-pulse 2s infinite !important; }
.vhai-app .vhai-hstatus-txt { font-size:12px !important; font-weight:500 !important; opacity:0.85 !important; }
.vhai-app .vhai-hlangs { display:flex !important; gap:6px !important; align-items:center !important; justify-content:flex-end !important; margin-left:2px !important; flex-shrink:0 !important; }
.vhai-app .vhai-hlang { font-size:22px !important; text-decoration:none !important; opacity:0.45 !important; transition:all 0.25s !important; cursor:pointer !important; filter:grayscale(0.35) !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; width:34px !important; height:30px !important; border-radius:9px !important; }
.vhai-app .vhai-hlang.active { opacity:1 !important; transform:scale(1.12) !important; filter:none !important; background:rgba(255,255,255,0.12) !important; }

@keyframes vhai-pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
@keyframes vhai-fadein { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
@keyframes vhai-msgin { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
@keyframes vhai-bounce { 0%,80%,100%{transform:translateY(0)} 40%{transform:translateY(-7px)} }

/* MAIN */
.vhai-app .vhai-main { flex:1 !important; position:relative !important; overflow:hidden !important; }
.vhai-app .vhai-tab { display:none !important; position:absolute !important; inset:0 !important; overflow-y:auto !important; flex-direction:column !important; -webkit-overflow-scrolling:touch !important; }
.vhai-app .vhai-tab.active { display:flex !important; animation:vhai-fadein 0.25s ease !important; }

/* WELCOME BANNER */
.vhai-welcome-banner { background:linear-gradient(135deg,#fff9f0 0%,#fff3e0 100%) !important; margin:16px 16px 4px !important; border-radius:24px !important; padding:18px 18px !important; display:flex !important; align-items:center !important; gap:14px !important; border:1px solid #ffe0b2 !important; }
.vhai-welcome-emoji { font-size:34px !important; line-height:1 !important; flex-shrink:0 !important; }
.vhai-welcome-text h2 { font-family:var(--font-display) !important; font-size:16px !important; font-weight:800 !important; color:var(--primary) !important; margin-bottom:3px !important; }
.vhai-welcome-text p { font-size:12.5px !important; color:var(--text-mid) !important; line-height:1.5 !important; }

/* SECTIONS */
.vhai-app .vhai-section-label { padding:24px 20px 12px !important; font-family:var(--font-display) !important; font-size:11px !important; font-weight:800 !important; color:#8c8479 !important; text-transform:uppercase !important; letter-spacing:2px !important; }
.vhai-app .vhai-sections-wrap { display:flex !important; flex-direction:column !important; padding-bottom:12px !important; }
.vhai-app .vhai-section-group { margin-bottom:8px !important; }

/* TILE GRID */
.vhai-app .vhai-tiles-grid { display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:14px !important; padding:0 16px 10px !important; }

/* SINGLE TILE */
.vhai-app .vhai-tile { background:#fff !important; border:1.2px solid #d9cebc !important; border-radius:16px !important; padding:16px 8px 13px !important; display:flex !important; flex-direction:column !important; align-items:center !important; gap:9px !important; cursor:pointer !important; transition:all 0.2s ease !important; box-shadow:0 1px 0 rgba(0,0,0,0.02) !important; -webkit-user-select:none !important; user-select:none !important; }
.vhai-app .vhai-tile:active { transform:scale(0.96) !important; }
.vhai-app .vhai-tile-ico { width:74px !important; height:74px !important; border-radius:14px !important; background:var(--mono-bg) !important; border:1.4px solid var(--mono-border) !important; display:flex !important; align-items:center !important; justify-content:center !important; font-size:38px !important; color:var(--mono-icon) !important; transition:transform 0.2s ease !important; }
.vhai-app .vhai-tile:active .vhai-tile-ico { transform:scale(0.95) !important; }
.vhai-app .vhai-tile-ico svg { width:37px !important; height:37px !important; stroke:var(--mono-icon) !important; stroke-width:1.8px !important; }
.vhai-app .vhai-tile-ico span { filter:grayscale(1) saturate(0.2) sepia(0.5) hue-rotate(350deg) brightness(0.9) !important; }
.vhai-app .vhai-tile-lbl { font-family:var(--font-display) !important; font-size:11px !important; font-weight:800 !important; color:#2f2b24 !important; text-align:center !important; line-height:1.22 !important; text-transform:uppercase !important; letter-spacing:0.45px !important; max-width:95% !important; }

/* WIFI CARD */
.vhai-app .vhai-wifi-card { background:linear-gradient(135deg,var(--primary) 0%,#0d2440 100%) !important; margin:8px 14px 18px !important; border-radius:24px !important; padding:20px 18px !important; color:#fff !important; display:flex !important; align-items:center !important; gap:14px !important; box-shadow:0 12px 32px rgba(30,58,95,0.32) !important; position:relative !important; overflow:hidden !important; }
.vhai-app .vhai-wifi-card::before { content:'' !important; position:absolute !important; top:-30px !important; right:-30px !important; width:120px !important; height:120px !important; background:rgba(255,255,255,0.05) !important; border-radius:50% !important; }
.vhai-app .vhai-wifi-icon { width:42px !important; height:42px !important; background:rgba(255,255,255,0.12) !important; border-radius:14px !important; display:flex !important; align-items:center !important; justify-content:center !important; flex-shrink:0 !important; }
.vhai-app .vhai-wifi-icon svg { width:22px !important; height:22px !important; stroke:#fff !important; }
.vhai-app .vhai-wlbl { font-family:var(--font-display) !important; font-size:10px !important; font-weight:700 !important; letter-spacing:2px !important; opacity:0.65 !important; text-transform:uppercase !important; }
.vhai-app .vhai-wname { font-family:var(--font-display) !important; font-size:15px !important; font-weight:700 !important; margin-top:2px !important; }
.vhai-app .vhai-wpw { font-family:'Courier New',monospace !important; font-size:13px !important; opacity:0.75 !important; margin-top:3px !important; letter-spacing:1px !important; }
.vhai-app .vhai-wcopy { margin-left:auto !important; background:rgba(255,255,255,0.15) !important; border:1.5px solid rgba(255,255,255,0.25) !important; padding:11px !important; border-radius:14px !important; cursor:pointer !important; transition:all 0.2s !important; flex-shrink:0 !important; }
.vhai-app .vhai-wcopy:active { background:rgba(255,255,255,0.3) !important; transform:scale(0.93) !important; }
.vhai-app .vhai-wcopy svg { display:block !important; stroke:#fff !important; }

/* BOTTOM SHEET */
.vhai-app .vhai-overlay { position:absolute !important; inset:0 !important; background:rgba(0,0,0,0) !important; z-index:100 !important; visibility:hidden !important; backdrop-filter:blur(0px) !important; -webkit-backdrop-filter:blur(0px) !important; transition:all 0.35s ease !important; }
.vhai-app .vhai-overlay.active { visibility:visible !important; background:rgba(0,0,0,0.45) !important; backdrop-filter:blur(6px) !important; -webkit-backdrop-filter:blur(6px) !important; }
.vhai-app .vhai-panel { position:absolute !important; bottom:0 !important; left:0 !important; right:0 !important; background:var(--bg-card) !important; border-radius:32px 32px 0 0 !important; z-index:101 !important; transform:translateY(105%) !important; transition:transform 0.45s cubic-bezier(0.32,0.72,0,1) !important; display:flex !important; flex-direction:column !important; box-shadow:0 -12px 48px rgba(0,0,0,0.18) !important; height:65% !important; overflow:hidden !important; }
.vhai-app .vhai-panel.active { transform:translateY(0) !important; }
.vhai-app .vhai-panel-drag { width:44px !important; height:5px !important; background:#ddd !important; border-radius:10px !important; margin:14px auto 8px !important; flex-shrink:0 !important; }
.vhai-app .vhai-panel-head { display:flex !important; align-items:center !important; padding:10px 22px 14px !important; border-bottom:1px solid var(--border) !important; flex-shrink:0 !important; position:relative !important; z-index:8 !important; pointer-events:auto !important; }
.vhai-app #vhai-panel-title { font-family:var(--font-display) !important; font-size:20px !important; font-weight:800 !important; color:var(--primary) !important; flex:1 !important; }
.vhai-app .vhai-panel-close { width:34px !important; height:34px !important; border-radius:50% !important; background:var(--bg-subtle) !important; border:none !important; display:flex !important; align-items:center !important; justify-content:center !important; cursor:pointer !important; color:var(--text-mid) !important; font-size:15px !important; transition:all 0.2s !important; position:relative !important; z-index:3 !important; pointer-events:auto !important; }
.vhai-app .vhai-panel-close:active { background:#fee2e2 !important; color:#dc2626 !important; }
.vhai-app .vhai-panel-body { padding:18px 22px !important; overflow-y:auto !important; font-size:15px !important; line-height:1.75 !important; color:var(--text-mid) !important; flex:1 !important; -webkit-overflow-scrolling:touch !important; position:relative !important; z-index:1 !important; }
.vhai-app .vhai-panel.video-mode { height:86% !important; border-radius:24px 24px 0 0 !important; box-shadow:0 -8px 24px rgba(0,0,0,0.12) !important; }
.vhai-app .vhai-panel.video-mode .vhai-panel-head { padding:8px 14px 8px !important; border-bottom:1px solid #ece8e2 !important; }
.vhai-app .vhai-panel.video-mode .vhai-panel-body { padding:2px 6px 8px !important; }
.vhai-app .vhai-panel.video-mode #vhai-panel-title { font-size:18px !important; }
.vhai-app .vhai-panel.video-mode .vhai-panel-close { width:32px !important; height:32px !important; font-size:14px !important; background:#f3f1ed !important; }

/* PLACE CARDS */
.vhai-place-card { background:var(--bg-subtle) !important; border-radius:18px !important; padding:14px 16px !important; margin-bottom:10px !important; border:1px solid var(--border) !important; display:flex !important; align-items:flex-start !important; gap:12px !important; }
.vhai-place-num { width:28px !important; height:28px !important; border-radius:50% !important; background:var(--primary) !important; color:#fff !important; font-size:12px !important; font-weight:800 !important; display:flex !important; align-items:center !important; justify-content:center !important; flex-shrink:0 !important; font-family:var(--font-display) !important; margin-top:1px !important; }
.vhai-place-info strong { font-family:var(--font-display) !important; font-size:15px !important; font-weight:700 !important; color:var(--text) !important; display:block !important; margin-bottom:3px !important; }
.vhai-place-info span { font-size:13px !important; color:var(--text-soft) !important; display:block !important; margin-bottom:1px !important; }
.vhai-place-phone { display:inline-flex !important; align-items:center !important; gap:5px !important; margin-top:6px !important; background:#dcfce7 !important; color:#15803d !important; padding:4px 10px !important; border-radius:20px !important; font-size:12px !important; font-weight:600 !important; text-decoration:none !important; }

/* CHAT */
.vhai-app .vhai-msgs { flex:1 !important; padding:16px 14px !important; overflow-y:auto !important; display:flex !important; flex-direction:column !important; gap:10px !important; -webkit-overflow-scrolling:touch !important; }
.vhai-msg { max-width:84% !important; padding:12px 16px !important; border-radius:20px !important; font-size:14.5px !important; line-height:1.6 !important; animation:vhai-msgin 0.28s ease !important; word-wrap:break-word !important; }
.vhai-msg.ai { background:#fff !important; color:var(--text) !important; align-self:flex-start !important; border-bottom-left-radius:6px !important; border:1px solid var(--border) !important; box-shadow:var(--shadow-sm) !important; }
.vhai-msg.user { background:var(--primary) !important; color:#fff !important; align-self:flex-end !important; border-bottom-right-radius:6px !important; }
.vhai-typing-dots { display:flex !important; gap:4px !important; align-items:center !important; padding:5px 0 !important; }
.vhai-typing-dots span { width:7px !important; height:7px !important; border-radius:50% !important; background:var(--text-soft) !important; animation:vhai-bounce 1.2s infinite !important; display:inline-block !important; }
.vhai-typing-dots span:nth-child(2){animation-delay:0.2s !important}
.vhai-typing-dots span:nth-child(3){animation-delay:0.4s !important}
.vhai-app .vhai-input-row { display:flex !important; gap:8px !important; padding:12px 14px !important; background:#fff !important; border-top:1px solid var(--border) !important; align-items:flex-end !important; padding-bottom:max(12px,env(safe-area-inset-bottom)) !important; flex-shrink:0 !important; }
.vhai-app .vhai-input { flex:1 !important; border:1.5px solid var(--border) !important; border-radius:22px !important; padding:11px 16px !important; font-size:14.5px !important; font-family:var(--font-body) !important; resize:none !important; max-height:120px !important; background:var(--bg-subtle) !important; color:var(--text) !important; line-height:1.5 !important; transition:border-color 0.2s !important; }
.vhai-app .vhai-input:focus { border-color:var(--primary-mid) !important; background:#fff !important; }
.vhai-app .vhai-icon-btn { width:44px !important; height:44px !important; border-radius:50% !important; background:var(--bg-subtle) !important; border:1.5px solid var(--border) !important; display:flex !important; align-items:center !important; justify-content:center !important; cursor:pointer !important; transition:all 0.2s !important; flex-shrink:0 !important; }
.vhai-app .vhai-icon-btn.recording { background:#fee2e2 !important; border-color:#fca5a5 !important; animation:vhai-pulse 1s infinite !important; }
.vhai-app .vhai-send-btn { width:44px !important; height:44px !important; border-radius:50% !important; background:var(--primary) !important; border:none !important; display:flex !important; align-items:center !important; justify-content:center !important; cursor:pointer !important; transition:all 0.2s !important; flex-shrink:0 !important; box-shadow:0 4px 12px rgba(30,58,95,0.35) !important; }
.vhai-app .vhai-send-btn:active { transform:scale(0.92) !important; }

/* BOTTOM NAV */
.vhai-app .vhai-nav { display:flex !important; height:70px !important; background:rgba(255,255,255,0.98) !important; border-top:1px solid var(--border) !important; padding:6px 8px !important; padding-bottom:max(6px,env(safe-area-inset-bottom)) !important; gap:4px !important; backdrop-filter:blur(10px) !important; -webkit-backdrop-filter:blur(10px) !important; }
.vhai-app .vhai-nb { flex:1 !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:3px !important; opacity:0.45 !important; border:none !important; background:transparent !important; color:var(--text-mid) !important; border-radius:14px !important; transition:all 0.25s cubic-bezier(0.34,1.56,0.64,1) !important; cursor:pointer !important; text-decoration:none !important; position:relative !important; }
.vhai-app .vhai-nb.active { opacity:1 !important; background:rgba(30,58,95,0.09) !important; color:var(--primary) !important; }
.vhai-app .vhai-nb svg { width:22px !important; height:22px !important; stroke-width:2.2px !important; transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1) !important; }
.vhai-app .vhai-nb.active svg { transform:scale(1.1) !important; }
.vhai-app .vhai-nb span { font-family:var(--font-display) !important; font-size:9.5px !important; font-weight:700 !important; text-transform:uppercase !important; letter-spacing:0.5px !important; }
.vhai-app .vhai-nb[data-tab="home"] span,
.vhai-app .vhai-nav > a.vhai-nb span { display:none !important; }
.vhai-app .vhai-nb[data-tab="home"],
.vhai-app .vhai-nav > a.vhai-nb { gap:0 !important; }
.vhai-app .vhai-badge { position:absolute !important; top:4px !important; right:calc(50% - 18px) !important; width:9px !important; height:9px !important; background:var(--accent-warm) !important; border-radius:50% !important; border:2px solid #fff !important; font-size:0 !important; }

/* WHATSAPP FAB */
.vhai-app .vhai-wa-fab { position:absolute !important; bottom:86px !important; right:16px !important; width:54px !important; height:54px !important; background:#25d366 !important; border-radius:50% !important; display:flex !important; align-items:center !important; justify-content:center !important; box-shadow:0 6px 20px rgba(37,211,102,0.45) !important; z-index:90 !important; transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1) !important; text-decoration:none !important; }
.vhai-app .vhai-wa-fab:active { transform:scale(0.9) !important; }
.vhai-app .vhai-wa-fab svg { fill:#fff !important; }

/* APPLIANCES */
.vhai-app .vhai-appl-row { display:flex !important; flex-wrap:wrap !important; gap:10px !important; padding:0 14px 20px !important; }
.vhai-app .vhai-appl-card { background:var(--bg-card) !important; border:1.5px solid var(--border) !important; border-radius:20px !important; padding:14px !important; display:flex !important; flex-direction:column !important; align-items:center !important; gap:8px !important; width:calc(33.33% - 7px) !important; cursor:pointer !important; transition:all 0.25s !important; box-shadow:var(--shadow-sm) !important; text-align:center !important; appearance:none !important; -webkit-appearance:none !important; }
.vhai-app .vhai-appl-card img { width:48px !important; height:48px !important; border-radius:12px !important; object-fit:cover !important; }
.vhai-app .vhai-appl-emoji { font-size:32px !important; }
.vhai-app .vhai-appl-card span { font-family:var(--font-display) !important; font-size:11.5px !important; font-weight:700 !important; color:var(--text) !important; }
.vhai-app .vhai-appl-card small { font-size:10px !important; font-weight:700 !important; color:#0f766e !important; background:#ccfbf1 !important; border-radius:999px !important; padding:2px 8px !important; }
.vhai-app .vhai-appl-card.has-video { border-color:#5eead4 !important; }

/* MAP + MISC */
#vhai-load-map { background:var(--primary) !important; color:#fff !important; border:none !important; border-radius:28px !important; padding:14px 30px !important; font-family:var(--font-display) !important; font-size:15px !important; font-weight:700 !important; cursor:pointer !important; box-shadow:0 8px 24px rgba(30,58,95,0.3) !important; transition:transform 0.2s !important; }
#vhai-load-map:active { transform:scale(0.95) !important; }
.vhai-app .vhai-error { background:#fff1f2 !important; border:1.5px solid #fda4af !important; border-radius:18px !important; padding:16px 18px !important; margin:16px !important; font-size:14px !important; color:#be123c !important; }

/* SCROLLBAR */
.vhai-app ::-webkit-scrollbar { width:4px !important; }
.vhai-app ::-webkit-scrollbar-track { background:transparent !important; }
.vhai-app ::-webkit-scrollbar-thumb { background:#d4d0cb !important; border-radius:4px !important; }

/* REFRESH BUTTON */
.vhai-app .vhai-refresh-btn { width:34px !important; height:34px !important; border-radius:10px !important; background:rgba(255,255,255,0.15) !important; border:1px solid rgba(255,255,255,0.25) !important; display:flex !important; align-items:center !important; justify-content:center !important; cursor:pointer !important; color:#fff !important; transition:all 0.2s !important; flex-shrink:0 !important; margin-left:auto !important; margin-right:2px !important; }
.vhai-app .vhai-refresh-btn:active { background:rgba(255,255,255,0.3) !important; transform:scale(0.92) !important; }
.vhai-app .vhai-refresh-btn.spinning svg { animation:vhai-spin 0.5s ease !important; }
@keyframes vhai-spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }