/* MiraMare Resort — Custom styles */
/* ── Custom styles not in Tailwind ── */
  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { font-family: 'Inter', sans-serif; }
  body { background: #FAFAF7; color: #292524; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
  img { display: block; max-width: 100%; }

  /* Language popup */
  #lang-overlay { transition: opacity 0.5s ease, backdrop-filter 0.5s ease; }
  #lang-popup  { transition: transform 0.55s cubic-bezier(0.22,1,0.36,1), opacity 0.45s ease; }
  #lang-overlay.ready { opacity: 1 !important; background: rgba(8,24,52,0.75) !important; backdrop-filter: blur(6px); }
  #lang-popup.ready   { transform: translateY(0) scale(1) !important; opacity: 1 !important; }
  #lang-overlay.hiding { opacity: 0; backdrop-filter: blur(0px); pointer-events: none; }
  #lang-popup.hiding   { transform: translateY(-28px) scale(0.96); opacity: 0; }

  /* Nav */
  #site-nav { transition: background 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease; }
  #site-nav.scrolled { background: rgba(12,74,110,0.97); backdrop-filter: blur(12px); box-shadow: 0 4px 32px rgba(0,0,0,0.22); }

  /* Hero parallax hint */
  .hero-bg { background-attachment: fixed; }
  @media (max-width: 768px) { .hero-bg { background-attachment: scroll; } }

  /* Area cards */
  .area-card { transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease; }
  .area-card:hover { transform: translateY(-10px); }
  .area-card .card-img { transition: transform 0.6s ease; }
  .area-card:hover .card-img { transform: scale(1.07); }
  .area-card .card-btn { transition: background 0.2s, color 0.2s, transform 0.2s; }
  .area-card:hover .card-btn { transform: translateX(4px); }

  /* Room cards */
  .room-card { transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s; }
  .room-card:hover { transform: translateY(-6px); box-shadow: 0 24px 56px rgba(12,74,110,0.18); }
  .room-card .room-img { transition: transform 0.55s ease; }
  .room-card:hover .room-img { transform: scale(1.05); }

  /* Beach cards */
  .beach-card { transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s; }
  .beach-card:hover { transform: translateY(-6px); }

  /* Offer cards */
  .offer-card { transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s; }
  .offer-card:hover { transform: translateY(-4px); border-color: #14b8a6; box-shadow: 0 12px 36px rgba(20,184,166,0.15); }

  /* Scroll reveal */
  .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1); }
  .reveal.from-left  { transform: translateX(-32px); }
  .reveal.from-right { transform: translateX(32px); }
  .reveal.visible { opacity: 1; transform: translate(0); }

  /* Stagger delays */
  .delay-1 { transition-delay: 0.08s; }
  .delay-2 { transition-delay: 0.16s; }
  .delay-3 { transition-delay: 0.24s; }
  .delay-4 { transition-delay: 0.32s; }

  /* Geo shapes */
  .geo-circle { border-radius: 50%; position: absolute; pointer-events: none; }

  /* Page system */
  .page { display: none; min-height: 100vh; }
  .page.active { display: block; animation: fadeIn 0.4s ease; }
  @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

  /* Divider */
  .divider-teal { width: 48px; height: 3px; background: linear-gradient(90deg, #14b8a6, #0ea5e9); border-radius: 9px; }

  /* Mobile menu */
  #mobile-menu { transition: opacity 0.3s ease; }

  /* Lang dropdown */
  #lang-dd { transition: opacity 0.18s ease, transform 0.18s ease; }
  #lang-dd.open { opacity: 1; transform: translateY(0); pointer-events: all; }

  /* Smooth focus rings */
  button:focus-visible, a:focus-visible { outline: 2px solid #14b8a6; outline-offset: 3px; border-radius: 4px; }

  /* Map */
  .map-wrap iframe { width: 100%; height: 320px; border: none; display: block; border-radius: 16px; }
  @media (min-width: 768px) { .map-wrap iframe { height: 400px; } }

  /* Floating image card */
  .float-pull { margin-top: -40px; position: relative; z-index: 10; }





  /* ═══════════ AGENCY-LEVEL AESTHETICS ═══════════ */
  /* Initial page loader */
  #mm-loader{ position:fixed; inset:0; z-index:99999; background:#082f49; display:flex; align-items:center; justify-content:center; transition:opacity 0.6s ease, visibility 0.6s ease; }
  #mm-loader.done{ opacity:0; visibility:hidden; }
  .mm-loader-logo{ text-align:center; }
  .mm-loader-mark{ font-family:'Playfair Display',serif; font-size:clamp(2rem,6vw,3rem); font-weight:800; letter-spacing:0.02em; }
  .mm-loader-bar{ width:120px; height:2px; background:rgba(255,255,255,0.15); border-radius:2px; margin:20px auto 0; overflow:hidden; }
  .mm-loader-bar span{ display:block; height:100%; width:40%; background:#14b8a6; border-radius:2px; animation:loaderSlide 1.1s ease-in-out infinite; }
  @keyframes loaderSlide{ 0%{ transform:translateX(-120%);} 100%{ transform:translateX(320%);} }

  /* Hero word cascade */
  @keyframes wordUp{ from{ opacity:0; transform:translateY(110%);} to{ opacity:1; transform:translateY(0);} }
  .word-cascade{ display:inline-block; overflow:hidden; vertical-align:bottom; }
  .word-cascade > span{ display:inline-block; animation:wordUp 0.9s var(--ease-out) both; }

  /* Subtle film grain / vignette for hero */
  .hero-vignette{ position:absolute; inset:0; pointer-events:none; z-index:1;
    box-shadow:inset 0 0 180px 40px rgba(8,24,52,0.55); }

  /* Glass card (for dark sections) */
  .glass{ background:linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    border:1px solid rgba(255,255,255,0.12); backdrop-filter:blur(10px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.10), 0 12px 40px rgba(0,0,0,0.18); }
  .glass:hover{ border-color:rgba(20,184,166,0.35); }

  /* Soft section gradient backgrounds */
  .bg-cream-grad{ background:linear-gradient(180deg,#FAFAF7 0%, #f6f4ef 100%); }
  .bg-white-grad{ background:linear-gradient(180deg,#ffffff 0%, #fcfcfa 100%); }
  .bg-sea-grad{ background:linear-gradient(165deg,#0a3a5c 0%, #082f49 55%, #07192a 100%); }

  /* Decorative dotted texture */
  .tex-dots{ background-image:radial-gradient(rgba(12,74,110,0.06) 1px, transparent 1px); background-size:22px 22px; }
  .tex-dots-light{ background-image:radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px); background-size:24px 24px; }

  /* Eyebrow label refined */
  .eyebrow{ display:inline-flex; align-items:center; gap:0.6rem; font-size:0.7rem; font-weight:700; letter-spacing:0.22em; text-transform:uppercase; }
  .eyebrow::before{ content:''; width:1.75rem; height:1px; background:currentColor; opacity:0.6; }

  /* Image reveal hover (for area/room cards) */
  .img-zoom{ overflow:hidden; }
  .img-zoom img{ transition:transform 0.8s var(--ease-out); will-change:transform; }
  .group:hover .img-zoom img, .img-zoom:hover img{ transform:scale(1.08); }

  /* Refined card */
  .card-premium{ border-radius:1.5rem; background:#fff; box-shadow:var(--shadow-md);
    transition:transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out); }
  .card-premium:hover{ transform:translateY(-10px); box-shadow:var(--shadow-xl); }

  /* Button premium with depth */
  .btn-premium{ position:relative; border-radius:1rem; font-weight:700; letter-spacing:0.01em;
    transition:transform 0.3s var(--ease-spring), box-shadow 0.3s var(--ease-out), background 0.25s ease; }
  .btn-premium:hover{ transform:translateY(-3px); }
  .btn-premium:active{ transform:translateY(-1px) scale(0.99); }

  /* Wave divider */
  .wave-top{ display:block; width:100%; height:auto; margin-bottom:-1px; }

  /* Parallax-ready */
  .parallax-img{ will-change:transform; }

  /* Smooth page transition refinement */
  .page.active{ animation:pageReveal 0.6s var(--ease-out); }
  @keyframes pageReveal{ from{ opacity:0; transform:translateY(12px) scale(0.995);} to{ opacity:1; transform:translateY(0) scale(1);} }

  /* Number editorial style */
  .num-editorial{ font-family:'Playfair Display',serif; font-weight:800; line-height:1; }

  /* Link arrow slide */
  .arrow-slide{ display:inline-block; transition:transform 0.3s var(--ease-out); }
  .group:hover .arrow-slide{ transform:translateX(5px); }

  /* Refined divider with diamond */
  .divider-lux{ display:flex; align-items:center; justify-content:center; gap:0.75rem; }
  .divider-lux::before, .divider-lux::after{ content:''; height:1px; width:2.5rem; background:linear-gradient(90deg,transparent,#14b8a6); }
  .divider-lux::after{ background:linear-gradient(90deg,#14b8a6,transparent); }
  .divider-lux i{ width:6px; height:6px; background:#14b8a6; transform:rotate(45deg); display:block; }


  /* ═══════════ PREMIUM DESIGN SYSTEM ═══════════ */
  :root{
    --shadow-sm: 0 1px 2px rgba(8,24,52,0.04), 0 1px 3px rgba(8,24,52,0.06);
    --shadow-md: 0 4px 12px rgba(8,24,52,0.06), 0 8px 24px rgba(8,24,52,0.08);
    --shadow-lg: 0 12px 32px rgba(8,24,52,0.10), 0 24px 56px rgba(8,24,52,0.12);
    --shadow-xl: 0 24px 64px rgba(8,24,52,0.16), 0 40px 96px rgba(8,24,52,0.14);
    --ease-out: cubic-bezier(0.22,1,0.36,1);
    --ease-spring: cubic-bezier(0.34,1.56,0.64,1);
  }
  /* Smooth font rendering + better text */
  body{ text-rendering:optimizeLegibility; -moz-osx-font-smoothing:grayscale; }
  /* Fluid type helpers */
  .t-hero{ font-size:clamp(2.5rem,8vw,5.5rem); line-height:0.98; letter-spacing:-0.02em; }
  .t-h2{ font-size:clamp(1.9rem,5vw,3.25rem); line-height:1.06; letter-spacing:-0.015em; }
  .t-h3{ font-size:clamp(1.25rem,3vw,1.75rem); line-height:1.15; }
  .t-lead{ font-size:clamp(1rem,2.2vw,1.2rem); line-height:1.7; }
  /* Selection */
  ::selection{ background:#14b8a6; color:#fff; }
  /* Custom scrollbar (desktop) */
  @media(min-width:1024px){
    ::-webkit-scrollbar{ width:11px; }
    ::-webkit-scrollbar-track{ background:#eef2f5; }
    ::-webkit-scrollbar-thumb{ background:#0c4a6e; border-radius:9px; border:3px solid #eef2f5; }
    ::-webkit-scrollbar-thumb:hover{ background:#14b8a6; }
  }
  /* Premium button shine effect */
  .btn-shine{ position:relative; overflow:hidden; }
  .btn-shine::after{ content:''; position:absolute; top:0; left:-120%; width:60%; height:100%;
    background:linear-gradient(110deg, transparent, rgba(255,255,255,0.35), transparent); transform:skewX(-20deg);
    transition:left 0.7s var(--ease-out); }
  .btn-shine:hover::after{ left:140%; }
  /* Card lift refinement */
  .card-lift{ transition:transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out); }
  .card-lift:hover{ transform:translateY(-8px); box-shadow:var(--shadow-xl); }
  /* Underline grow link */
  .link-grow{ position:relative; }
  .link-grow::after{ content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:currentColor; transition:width 0.3s var(--ease-out); }
  .link-grow:hover::after{ width:100%; }
  /* Scroll-down indicator */
  @keyframes scrollBob{ 0%,100%{ transform:translateY(0); opacity:1; } 50%{ transform:translateY(8px); opacity:0.5; } }
  .scroll-ind{ animation:scrollBob 1.8s ease-in-out infinite; }
  /* Float animation (whatsapp / badges) */
  @keyframes floaty{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-6px);} }
  .floaty{ animation:floaty 3s ease-in-out infinite; }
  /* Gentle pulse for ring */
  @keyframes softpulse{ 0%{ box-shadow:0 0 0 0 rgba(20,184,166,0.5);} 70%{ box-shadow:0 0 0 14px rgba(20,184,166,0);} 100%{ box-shadow:0 0 0 0 rgba(20,184,166,0);} }
  .soft-pulse{ animation:softpulse 2.4s infinite; }
  /* Count-up numbers wrapper */
  .stat-num{ font-variant-numeric:tabular-nums; }
  /* Accordion */
  .acc-panel{ max-height:0; overflow:hidden; transition:max-height 0.45s var(--ease-out); }
  .acc-item.open .acc-panel{ max-height:400px; }
  .acc-item.open .acc-chev{ transform:rotate(180deg); }
  .acc-chev{ transition:transform 0.35s var(--ease-out); }
  /* Reveal refinement: add scale */
  .reveal-zoom{ opacity:0; transform:scale(0.96) translateY(20px); transition:opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
  .reveal-zoom.visible{ opacity:1; transform:scale(1) translateY(0); }
  /* Section divider shape */
  .wave-divider{ display:block; width:100%; height:48px; }
  /* Focus visible for accessibility */
  a:focus-visible, button:focus-visible{ outline:3px solid #14b8a6; outline-offset:2px; border-radius:6px; }
  /* Sticky mobile booking bar offset so content isn't hidden */
  @media(max-width:767px){ body{ padding-bottom:0; } }



  /* ── LIGHTBOX ── */
  #mm-lightbox{ position:fixed; inset:0; z-index:9998; background:rgba(6,18,32,0.96); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity 0.35s ease, visibility 0.35s ease; }
  #mm-lightbox.open{ opacity:1; visibility:visible; }
  #mm-lightbox img{ max-width:92vw; max-height:82vh; border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,0.5); transform:scale(0.96); transition:transform 0.4s var(--ease-out); object-fit:contain; }
  #mm-lightbox.open img{ transform:scale(1); }
  .lb-btn{ position:absolute; background:rgba(255,255,255,0.12); border:1px solid rgba(255,255,255,0.2); color:#fff; width:48px; height:48px; border-radius:9999px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background 0.2s, transform 0.2s; backdrop-filter:blur(4px); }
  .lb-btn:hover{ background:rgba(255,255,255,0.25); transform:scale(1.08); }
  .lb-close{ top:20px; right:20px; }
  .lb-prev{ left:16px; top:50%; transform:translateY(-50%); }
  .lb-next{ right:16px; top:50%; transform:translateY(-50%); }
  .lb-prev:hover, .lb-next:hover{ transform:translateY(-50%) scale(1.08); }
  .lb-caption{ position:absolute; bottom:24px; left:50%; transform:translateX(-50%); color:rgba(255,255,255,0.9); font-size:0.9rem; background:rgba(0,0,0,0.4); padding:8px 18px; border-radius:9999px; backdrop-filter:blur(4px); max-width:90vw; text-align:center; }
  .lb-counter{ position:absolute; top:24px; left:24px; color:rgba(255,255,255,0.7); font-size:0.85rem; font-weight:600; letter-spacing:0.05em; }
  @media(max-width:640px){ .lb-prev{ left:8px; } .lb-next{ right:8px; } .lb-btn{ width:42px; height:42px; } }

  /* ── PHOTO CAROUSEL ── */
  /* Carousel frame: taller on mobile so photos are clearly visible */
  .mm-frame { aspect-ratio: 4/5; }              /* mobile: portrait, tall — photos fill nicely */
  @media (min-width: 480px){ .mm-frame { aspect-ratio: 3/4; } }
  @media (min-width: 640px){ .mm-frame { aspect-ratio: 16/10; } }
  @media (min-width: 1024px){ .mm-frame { aspect-ratio: 16/9; max-height: 70vh; } }
  @media (min-width: 1280px){ .mm-frame { aspect-ratio: 21/9; max-height: 600px; } }

  .mm-slide { position:absolute; inset:0; opacity:0; visibility:hidden; transform:scale(1.04); transition:opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1); }
  .mm-slide.active { opacity:1; visibility:visible; transform:scale(1); z-index:1; }
  .mm-slide img { width:100%; height:100%; object-fit:cover; }
  @keyframes mmKenburns { from{transform:scale(1);} to{transform:scale(1.08);} }
  .mm-slide.active img { animation: mmKenburns 7s ease-out forwards; }
  .mm-arrow { transition: background 0.25s, transform 0.25s, opacity 0.25s; }
  .mm-arrow:hover { transform:translateY(-50%) scale(1.15); }
  /* Modern pill indicators */
  .mm-dot { position:relative; height:4px; width:18px; border-radius:9999px; background:rgba(255,255,255,0.4); cursor:pointer; overflow:hidden; transition:width 0.4s cubic-bezier(0.4,0,0.2,1), background 0.3s; flex:0 0 auto; }
  .mm-dot:hover { background:rgba(255,255,255,0.65); }
  .mm-dot.active { width:34px; background:rgba(255,255,255,0.35); }
  .mm-dot .mm-dot-fill { position:absolute; inset:0; width:0; border-radius:9999px; background:#fff; }
  .mm-dot.active .mm-dot-fill { background:#14b8a6; }
  @media (min-width:768px){ .mm-dot { height:5px; width:22px; } .mm-dot.active { width:44px; } }
  .mm-thumb { transition:transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s, opacity 0.3s; }
  .mm-thumb:hover { transform:translateY(-4px); }
  .mm-thumb.current { outline:3px solid #f97316; outline-offset:2px; }
  .mm-thumb img { transition:transform 0.5s; }
  .mm-thumb:hover img { transform:scale(1.08); }
  .mm-caption { opacity:0; transform:translateY(16px); transition:opacity 0.6s ease 0.2s, transform 0.6s ease 0.2s; }
  .mm-slide.active .mm-caption { opacity:1; transform:translateY(0); }
  .mm-progress-fill { transform-origin:left; transform:scaleX(0); }
  .mm-progress-fill.run { animation: mmProgress var(--mm-duration,5s) linear forwards; }
  @keyframes mmProgress { from{transform:scaleX(0);} to{transform:scaleX(1);} }
  @media (prefers-reduced-motion: reduce) { .mm-slide, .mm-slide.active img { animation:none !important; transition:opacity 0.3s; } }

  /* ── Menu a tendina del modulo preventivi ──
     La freccia predefinita del browser viene nascosta (appearance-none),
     quindi la ridisegniamo noi; le voci del menu, che il sistema mostra
     su sfondo chiaro, hanno bisogno di testo scuro per essere leggibili. */
  .mm-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.55' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 1.1rem;
    padding-right: 2.9rem;
  }
  .mm-select option { color:#0c4a6e; background-color:#ffffff; }