/*
Theme Name: Al Buraq Tourism Hostel
Theme URI: https://www.alburaqtourismhostel.com
Author: Al Buraq Tourism Hostel
Author URI: https://www.alburaqtourismhostel.com
Description: Gold-and-black 3D "plastic emboss" theme for Al Buraq Tourism Hostel, Baku. Built to be edited visually with the free Elementor page builder, plus native WordPress Customizer controls for colors, logo, contact details and prices.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: al-buraq
*/


  :root{
    /* ---- Core palette (from the logo) ---- */
    --black:        #050403;
    --black-soft:   #0c0a07;
    --panel:        #120e08;
    --panel-2:      #17130b;
    --line:         #372a12;

    --gold-hi:      #fdf2b2;
    --gold:         #d09738;
    --gold-mid:     #b97f2a;
    --gold-deep:    #7a5015;
    --gold-shadow:  #3d2708;

    --cream:        #f3e9cf;
    --cream-dim:    #cbbb92;
    --cream-faint:  #8a7c58;

    --ok:           #7fbf6a;

    /* ---- Type ---- */
    --f-display: 'Cinzel', 'Segoe UI', Arial, sans-serif;
    --f-script:  'Cormorant Garamond', serif;
    --f-body:    'Jost', 'Segoe UI', Arial, sans-serif;

    /* ---- Radii / shadow language (embossed plastic-gold) ---- */
    --r-lg: 22px;
    --r-md: 14px;
    --r-sm: 8px;
    --gloss: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0) 40%);
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:
      radial-gradient(1200px 600px at 50% -10%, #1a1409 0%, var(--black) 55%),
      var(--black);
    color:var(--cream);
    font-family:var(--f-body);
    font-weight:300;
    line-height:1.6;
    overflow-x:hidden;
  }
  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  button{font-family:inherit; cursor:pointer;}
  ::selection{background:var(--gold-deep); color:var(--black);}

  .wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
  .eyebrow{
    font-family:var(--f-display);
    letter-spacing:.35em;
    font-size:.72rem;
    color:var(--gold);
    text-transform:uppercase;
  }
  h1,h2,h3,h4{font-family:var(--f-display); font-weight:600; color:var(--gold-hi); letter-spacing:.02em;}
  .script{font-family:var(--f-script); font-style:italic; color:var(--cream-dim); font-weight:500;}

  /* ---- gold ornament divider (echoes the crest's fleur motif) ---- */
  .ornament{display:flex; align-items:center; justify-content:center; gap:14px; margin:18px 0 8px;}
  .ornament::before,.ornament::after{content:""; height:1px; width:60px; background:linear-gradient(90deg, transparent, var(--gold-deep));}
  .ornament::after{background:linear-gradient(90deg, var(--gold-deep), transparent);}
  .ornament svg{width:16px; height:16px; fill:var(--gold);}

  /* ================= NAV ================= */
  header{
    position:sticky; top:0; z-index:100;
    background:rgba(5,4,3,.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav{display:flex; align-items:center; justify-content:space-between; padding:10px 24px; max-width:1180px; margin:0 auto;}
  .brand{display:flex; align-items:center; gap:12px;}
  .brand img{height:56px; width:56px; border-radius:50%; box-shadow:0 0 0 2px var(--gold-deep), 0 4px 14px rgba(0,0,0,.6);}
  .brand .name{font-family:var(--f-display); font-size:1.1rem; color:var(--gold-hi); letter-spacing:.06em; line-height:1.1;}
  .brand .name small{display:block; font-family:var(--f-body); font-weight:300; letter-spacing:.2em; font-size:.55rem; color:var(--cream-faint); margin-top:3px;}

  .nav-links{display:flex; gap:30px; align-items:center;}
  .nav-links a{font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:var(--cream-dim); position:relative; padding:6px 0;}
  .nav-links a:hover{color:var(--gold);}
  .nav-links a::after{content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background:var(--gold); transition:width .25s;}
  .nav-links a:hover::after{width:100%;}

  .nav-cta{display:flex; align-items:center; gap:10px;}
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:var(--f-body); font-weight:500; letter-spacing:.05em; text-transform:uppercase; font-size:.78rem;
    padding:12px 22px; border-radius:999px; border:none; cursor:pointer;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .btn-gold{
    color:var(--gold-shadow);
    background:linear-gradient(180deg, var(--gold-hi), var(--gold) 45%, var(--gold-deep));
    box-shadow: inset 0 1px 0 rgba(255,247,210,.85), inset 0 -4px 7px rgba(61,39,8,.6), 0 8px 18px rgba(208,151,56,.4);
  }
  .btn-gold:hover{transform:translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,247,210,.95), inset 0 -4px 7px rgba(61,39,8,.6), 0 12px 26px rgba(208,151,56,.55);}
  .btn-ghost{
    color:var(--gold-hi); background:transparent; border:1px solid var(--gold-deep);
  }
  .btn-ghost:hover{background:rgba(208,151,56,.08); border-color:var(--gold);}
  .btn-wa{
    color:#eafff0; background:linear-gradient(180deg,#3fbf63,#1f8a3d); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 16px rgba(31,138,61,.35);
  }
  .btn-wa:hover{transform:translateY(-2px);}
  .btn-dark{
    color:var(--gold-hi);
    background:linear-gradient(180deg, #2a2620, #17140f 45%, #0c0a07);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -4px 7px rgba(0,0,0,.6), 0 8px 18px rgba(0,0,0,.5);
    border:1px solid var(--line);
  }
  .btn-dark:hover{transform:translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 -4px 7px rgba(0,0,0,.6), 0 12px 26px rgba(0,0,0,.6);}
  .btn-sm{padding:9px 16px; font-size:.72rem;}
  .btn-lg{padding:17px 36px; font-size:.92rem;}

  .burger{display:none; flex-direction:column; gap:5px; background:none; border:none;}

  .call-wrap{position:relative;}
  .call-popover{
    position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(-6px);
    background:var(--panel); border:1px solid var(--gold-deep); color:var(--gold-hi);
    padding:8px 16px; border-radius:8px; font-size:.85rem; font-weight:600; white-space:nowrap;
    box-shadow:0 12px 26px rgba(0,0,0,.5); opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease; z-index:50;
  }
  .call-popover::before{
    content:""; position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
    border:6px solid transparent; border-bottom-color:var(--gold-deep);
  }
  .call-popover.open{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); pointer-events:auto;}
  .burger span{width:24px; height:2px; background:var(--gold);}

  /* ================= HERO ================= */
  .hero{
    position:relative; padding:90px 24px 70px; text-align:center; overflow:hidden;
  }
  .hero::before{
    content:""; position:absolute; inset:0;
    background:
      radial-gradient(650px 400px at 50% 0%, rgba(208,151,56,.14), transparent 60%);
    pointer-events:none;
  }
  .hero-crest{width:150px; height:150px; margin:0 auto 22px; border-radius:50%; box-shadow:0 0 0 2px var(--gold-deep), 0 0 60px rgba(208,151,56,.25), 0 20px 50px rgba(0,0,0,.6); animation:float 6s ease-in-out infinite;}
  @keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-10px);}}
  .hero h1{font-size:clamp(2.3rem, 5vw, 4rem); line-height:1.05; margin-bottom:14px;}
  .hero h1 span{color:var(--gold); display:block; font-size:.4em; letter-spacing:.4em; margin-top:10px;}
  .hero p.lead{max-width:600px; margin:0 auto 30px; color:var(--cream-dim); font-size:1.05rem;}
  .hero-cta{padding:16px 34px; font-size:.9rem; max-width:100%; white-space:normal;}
  .hero-badges{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:40px;}
  .badge{
    font-size:.72rem; letter-spacing:.05em; color:var(--gold-hi);
    border:1px solid var(--line); background:var(--panel); padding:8px 16px; border-radius:999px;
    display:flex; align-items:center; gap:6px;
  }

  /* ---- Booking search bar (plastic gold embossed) ---- */
  .booker{
    max-width:920px; margin:0 auto; background:linear-gradient(180deg, var(--panel-2), var(--panel));
    border:1px solid var(--line); border-radius:var(--r-lg);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 20px 60px rgba(0,0,0,.55);
    padding:22px; display:grid; grid-template-columns:1fr 1fr 1fr auto; gap:14px;
  }
  .field{text-align:left;}
  .field label{display:block; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-bottom:6px;}
  .field input, .field select{
    width:100%; background:var(--black-soft); border:1px solid var(--line); border-radius:var(--r-sm);
    color:var(--cream); padding:12px 12px; font-family:var(--f-body); font-size:.9rem;
  }
  .field input:focus, .field select:focus{outline:none; border-color:var(--gold-deep);}
  .field select option{background:#1a1409; color:#f3e9cf;}
  .booker .btn{height:100%; padding:0 26px; white-space:nowrap;}

  /* ================= SECTION SHELL ================= */
  section{padding:90px 24px;}
  .section-head{text-align:center; max-width:640px; margin:0 auto 50px;}
  .section-head h2{font-size:clamp(1.8rem,3.4vw,2.6rem); margin-top:6px;}
  .section-head p{color:var(--cream-dim); margin-top:14px;}

  /* ================= ABOUT ================= */
  .about{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; max-width:1180px; margin:0 auto;}
  .about-visual{
    position:relative; aspect-ratio:4/5; border-radius:var(--r-lg); overflow:hidden;
    border:1px solid var(--line);
    background:
      linear-gradient(160deg, rgba(208,151,56,.14), transparent 60%),
      repeating-linear-gradient(135deg, #100c06 0 26px, #171208 26px 52px);
    display:flex; align-items:center; justify-content:center;
  }
  .about-visual img{width:60%; opacity:.9;}
  .about-copy .stat-row{display:flex; gap:34px; margin-top:34px; flex-wrap:wrap;}
  .stat b{display:block; font-family:var(--f-display); font-size:1.9rem; color:var(--gold);}
  .stat span{font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--cream-faint);}

  /* ================= ROOMS ================= */
  .rooms-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; max-width:1180px; margin:0 auto;}
  .room-card{
    background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
    display:flex; flex-direction:column; transition:transform .25s, box-shadow .25s;
  }
  .room-card:hover{transform:translateY(-6px); box-shadow:0 24px 50px rgba(0,0,0,.55), 0 0 0 1px var(--gold-deep);}
  .room-photo{
    aspect-ratio:4/3; position:relative; overflow:hidden;
    background:linear-gradient(150deg, #211a0d, #0e0b06);
    display:flex; align-items:center; justify-content:center; color:var(--cream-faint); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  }
  .room-photo-img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0;}
  .room-photo .swap-note{border:1px dashed var(--line); padding:8px 12px; border-radius:8px; position:relative; z-index:2;}
  .room-tag{
    position:absolute; top:12px; left:12px; background:linear-gradient(180deg,var(--gold-hi),var(--gold-deep));
    color:var(--gold-shadow); font-size:.65rem; letter-spacing:.06em; text-transform:uppercase; padding:5px 10px; border-radius:999px; font-weight:600; z-index:2;
  }
  .room-avail{
    position:absolute; bottom:12px; left:12px; right:12px; z-index:2;
    font-size:.72rem; font-weight:600; padding:6px 12px; border-radius:999px; text-align:center;
    background:rgba(5,4,3,.75); backdrop-filter:blur(4px);
  }
  .room-avail.is-open{color:#8fe0a3; border:1px solid rgba(143,224,163,.4);}
  .room-avail.is-low{color:#f0c96a; border:1px solid rgba(240,201,106,.4);}
  .room-avail.is-full{color:#f3a3a3; border:1px solid rgba(243,163,163,.4);}
  .room-avail.is-closed{color:#aaa; border:1px solid rgba(170,170,170,.4);}
  .room-card.is-closed{opacity:.55;}
  .room-card.is-closed .btn{pointer-events:none; opacity:.5;}
  .room-body{padding:20px; display:flex; flex-direction:column; gap:10px; flex:1;}
  .room-body h3{font-size:1.15rem;}
  .room-body ul{display:flex; flex-direction:column; gap:5px; margin:6px 0; font-size:.82rem; color:var(--cream-dim);}
  .room-body ul li::before{content:"— "; color:var(--gold-deep);}
  .room-price{display:flex; align-items:baseline; gap:6px; margin-top:auto; padding-top:10px; border-top:1px solid var(--line);}
  .room-price b{font-family:var(--f-display); font-size:1.5rem; color:var(--gold);}
  .room-price span{font-size:.72rem; color:var(--cream-faint);}
  .room-body .btn{margin-top:12px; width:100%;}

  /* ================= AMENITIES ================= */
  .amenities{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(6,1fr); gap:20px;}
  .amen{
    text-align:center; padding:26px 14px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md);
  }
  .amen svg{width:30px; height:30px; fill:none; stroke:var(--gold); stroke-width:1.4; margin:0 auto 12px;}
  .amen-icon{width:46px; height:46px; border-radius:50%; object-fit:cover; margin:0 auto 12px; display:block; border:2px solid var(--gold-deep);}
  .amen span{font-size:.76rem; color:var(--cream-dim); letter-spacing:.02em;}

  /* ================= HOUSE RULES ================= */
  .rules-grid{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .rule-card{
    text-align:center; padding:30px 22px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  }
  .rule-card svg{width:34px; height:34px; fill:none; stroke:var(--gold); stroke-width:1.4; margin:0 auto 16px;}
  .rule-card h3{font-size:1.05rem; margin-bottom:8px;}
  .rule-card p{color:var(--cream-dim); font-size:.86rem; line-height:1.6;}

  /* ================= GALLERY ================= */
  .gallery{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:150px; gap:14px;}
  .gallery .g{
    border-radius:var(--r-md); border:1px solid var(--line);
    background:linear-gradient(150deg,#1b150a,#0c0906);
    display:flex; align-items:center; justify-content:center; color:var(--cream-faint); font-size:.65rem; text-transform:uppercase; letter-spacing:.1em;
    position:relative; overflow:hidden;
  }
  .gallery .g:nth-child(1){grid-column:span 2; grid-row:span 2;}
  .gallery .g:nth-child(4){grid-column:span 2;}
  .gallery .g img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0;}

  /* ================= TESTIMONIALS ================= */
  .testis{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .testi{background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md); padding:26px;}
  .testi-avatar{
    width:56px; height:56px; border-radius:50%; object-fit:cover; display:block; margin-bottom:14px;
    border:2px solid var(--gold-deep); box-shadow:0 0 0 3px var(--black-soft), 0 6px 14px rgba(0,0,0,.4);
  }
  .testi .stars{color:var(--gold); letter-spacing:3px; margin-bottom:12px;}
  .testi p{color:var(--cream-dim); font-size:.9rem;}
  .testi .who{margin-top:16px; font-family:var(--f-display); color:var(--gold-hi); font-size:.9rem;}

  /* ================= LOCATION ================= */
  .loc-grid{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:stretch;}
  .loc-map{border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--line); min-height:380px;}
  .loc-map iframe{width:100%; height:100%; min-height:380px; border:0; filter:grayscale(.3) invert(.92) contrast(.9);}
  .loc-info{display:flex; flex-direction:column; gap:18px; justify-content:center;}
  .loc-row{display:flex; gap:14px; align-items:flex-start; padding:16px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-md);}
  .loc-row svg{width:22px; height:22px; stroke:var(--gold); fill:none; stroke-width:1.5; flex:none; margin-top:2px;}
  .loc-row b{display:block; color:var(--gold-hi); font-family:var(--f-display); font-size:.95rem; margin-bottom:3px;}
  .loc-row span{color:var(--cream-dim); font-size:.86rem;}

  /* ================= CONTACT ================= */
  .contact-grid{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:50px;}
  form.contact-form{display:flex; flex-direction:column; gap:16px;}
  .contact-form input, .contact-form textarea{
    background:var(--panel); border:1px solid var(--line); border-radius:var(--r-sm); color:var(--cream);
    padding:14px; font-family:var(--f-body); font-size:.92rem; width:100%;
  }
  .contact-form textarea{min-height:120px; resize:vertical;}
  .contact-form input:focus, .contact-form textarea:focus{outline:none; border-color:var(--gold-deep);}
  .contact-form .row2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  .form-note{font-size:.75rem; color:var(--cream-faint); margin-top:2px;}
  .contact-side{display:flex; flex-direction:column; gap:16px;}
  .contact-card{
    background:linear-gradient(180deg,var(--panel-2),var(--panel)); border:1px solid var(--line); border-radius:var(--r-md); padding:22px;
    display:flex; gap:16px; align-items:center;
  }
  .contact-card .ico{
    width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none;
    background:linear-gradient(180deg,var(--gold-hi),var(--gold-deep)); box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
  }
  .contact-card .ico svg{width:20px; height:20px; stroke:var(--gold-shadow); fill:none; stroke-width:1.8;}
  .ico-whatsapp{background:#25D366 !important;}
  .ico-whatsapp svg{fill:#fff !important; stroke:none !important; width:22px; height:22px;}
  .contact-card b{display:block; color:var(--gold-hi); font-family:var(--f-display); font-size:.95rem;}
  .contact-card span{color:var(--cream-dim); font-size:.85rem;}

  /* ================= FOOTER ================= */
  footer{border-top:1px solid var(--line); padding:50px 24px 30px;}
  footer .foot-brand{justify-content:center; margin-bottom:28px;}
  .foot-row{
    display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;
    max-width:1180px; margin:0 auto; padding-top:24px; border-top:1px solid var(--line);
  }
  footer .foot-links{display:flex; gap:22px; flex-wrap:wrap;}
  footer .foot-links a{font-size:.78rem; color:var(--cream-dim); letter-spacing:.05em; text-transform:uppercase;}
  footer .foot-links a:hover{color:var(--gold);}
  .foot-info{display:flex; flex-direction:column; align-items:flex-end; gap:4px; text-align:right;}
  .foot-info span{color:var(--cream-faint); font-size:.72rem; display:block;}
  @media (max-width:700px){
    .foot-row{flex-direction:column; align-items:center; text-align:center;}
    footer .foot-links{justify-content:center;}
    .foot-info{align-items:center; text-align:center;}
  }

  /* ================= FLOATING WHATSAPP ================= */
  .float-wa{
    position:fixed; right:22px; bottom:22px; z-index:150;
    width:60px; height:60px; border-radius:50%;
    background:linear-gradient(180deg,#3fbf63,#1f8a3d);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 10px 26px rgba(31,138,61,.5), inset 0 1px 0 rgba(255,255,255,.4);
    animation:pulse 2.4s infinite;
  }
  .float-wa svg{width:28px; height:28px; fill:#fff;}
  @keyframes pulse{0%{box-shadow:0 10px 26px rgba(31,138,61,.5),0 0 0 0 rgba(63,191,99,.5);}70%{box-shadow:0 10px 26px rgba(31,138,61,.5),0 0 0 16px rgba(63,191,99,0);}100%{box-shadow:0 10px 26px rgba(31,138,61,.5),0 0 0 0 rgba(63,191,99,0);}}

  /* ================= AI CONCIERGE CHAT ================= */
  .ai-fab{
    position:fixed; right:22px; bottom:94px; z-index:150;
    width:60px; height:60px; border-radius:50%;
    background:linear-gradient(180deg,var(--gold-hi),var(--gold-deep));
    display:flex; align-items:center; justify-content:center; border:none;
    box-shadow:0 10px 26px rgba(208,151,56,.45), inset 0 1px 0 rgba(255,255,255,.6);
  }
  .ai-fab svg{width:26px; height:26px; stroke:var(--gold-shadow); fill:none; stroke-width:1.8;}
  .ai-panel{
    position:fixed; right:22px; bottom:166px; z-index:150; width:340px; max-width:88vw; height:440px;
    background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
    display:none; flex-direction:column; overflow:hidden; box-shadow:0 30px 70px rgba(0,0,0,.6);
  }
  .ai-panel.open{display:flex;}
  .ai-head{
    background:linear-gradient(180deg,var(--panel-2),var(--panel)); padding:14px 16px; display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--line);
  }
  .ai-head img{width:34px; height:34px; border-radius:50%;}
  .ai-head b{color:var(--gold-hi); font-family:var(--f-display); font-size:.9rem; display:block;}
  .ai-head span{color:var(--ok); font-size:.68rem;}
  .ai-body{flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px;}
  .msg{max-width:82%; padding:10px 13px; border-radius:14px; font-size:.83rem; line-height:1.45; white-space:pre-line;}
  .msg.bot{background:var(--panel-2); border:1px solid var(--line); color:var(--cream-dim); align-self:flex-start; border-bottom-left-radius:4px;}
  .msg.user{background:linear-gradient(180deg,var(--gold-hi),var(--gold-deep)); color:var(--gold-shadow); align-self:flex-end; border-bottom-right-radius:4px;}
  .ai-quick{display:flex; gap:6px; flex-wrap:wrap; padding:0 14px 10px;}
  .ai-quick button{
    font-size:.68rem; background:var(--panel-2); border:1px solid var(--line); color:var(--cream-dim);
    padding:6px 10px; border-radius:999px;
  }
  .ai-quick button:hover{border-color:var(--gold-deep); color:var(--gold-hi);}
  .ai-input{display:flex; border-top:1px solid var(--line);}
  .ai-input input{flex:1; background:transparent; border:none; color:var(--cream); padding:14px; font-family:var(--f-body); font-size:.85rem;}
  .ai-input input:focus{outline:none;}
  .ai-input button{background:var(--gold); border:none; width:50px; display:flex; align-items:center; justify-content:center;}
  .ai-input button svg{width:18px; height:18px; fill:var(--gold-shadow);}

  /* ================= RESPONSIVE ================= */
  html{overflow-x:hidden;}
  body{overflow-x:hidden;}

  /* ---- Tablet (901px–1180px): tighten spacing, no structural changes yet ---- */
  @media (max-width:1180px){
    .wrap{padding:0 20px;}
    section{padding:70px 20px;}
  }

  /* ---- Small tablet / large phone (701px–980px) ---- */
  @media (max-width:980px){
    .nav-links{display:none;}
    .burger{display:flex;}
    .about{grid-template-columns:1fr;}
    .rules-grid{grid-template-columns:1fr;}
    .rooms-grid{grid-template-columns:repeat(2,1fr);}
    .amenities{grid-template-columns:repeat(3,1fr);}
    .gallery{grid-template-columns:repeat(2,1fr);}
    .testis{grid-template-columns:1fr;}
    .loc-grid{grid-template-columns:1fr;}
    .contact-grid{grid-template-columns:1fr;}
    section{padding:60px 18px;}
    .hero{padding:70px 18px 50px;}
  }

  /* ---- Phone (max 700px) ---- */
  @media (max-width:700px){
    .nav{padding:8px 16px; gap:10px;}
    .brand img{height:44px; width:44px;}
    .brand .name{font-size:.92rem;}
    .brand .name small{font-size:.5rem;}
    .nav-cta{gap:6px;}
    .nav-cta .btn-sm{padding:8px 12px; font-size:.68rem;}
    .call-popover{left:auto; right:0; transform:translateY(-6px);}
    .call-popover.open{transform:translateY(0);}
    .call-popover::before{left:auto; right:16px; transform:none;}
    .hero-crest{width:110px; height:110px;}
    .hero-badges{gap:8px;}
    .badge{font-size:.66rem; padding:7px 12px;}
    .hero-cta{padding:14px 24px; font-size:.82rem;}
    .about-copy .stat-row{gap:20px;}
    .stat b{font-size:1.5rem;}
  }

  /* ---- Small phone (max 560px) ---- */
  @media (max-width:560px){
    .nav{flex-wrap:wrap;}
    .brand .name small{display:none;}
    section{padding:50px 16px;}
    .hero{padding:60px 16px 40px;}
    .rooms-grid{grid-template-columns:1fr;}
    .amenities{grid-template-columns:repeat(2,1fr);}
    .gallery{grid-template-columns:repeat(2,1fr); grid-auto-rows:110px;}
    .gallery .g:nth-child(1){grid-column:span 2; grid-row:span 1;}
    .contact-form .row2{grid-template-columns:1fr;}
    .ai-panel{right:10px; left:10px; width:auto;}
    .float-wa{right:16px; bottom:16px; width:52px; height:52px;}
    .float-wa svg{width:26px; height:26px;}
    .ai-fab{right:16px; bottom:78px; width:52px; height:52px;}
    .al-style-bar{left:8px; right:8px; transform:translateY(-120%); max-width:none;}
    .al-style-bar.open{transform:translateY(0);}
    .contact-card{padding:16px;}
    .loc-row{padding:12px;}
    .testi{padding:20px;}
  }

  /* ---- Very small phone (max 380px) ---- */
  @media (max-width:380px){
    .brand .name{font-size:.8rem;}
    .brand img{height:38px; width:38px;}
    .nav-cta .btn-sm{padding:7px 10px; font-size:.62rem;}
    .hero h1{font-size:1.9rem;}
    .amenities{grid-template-columns:1fr 1fr; gap:12px;}
    .gallery{grid-template-columns:1fr;}
    .gallery .g:nth-child(1),.gallery .g:nth-child(4){grid-column:span 1;}
  }

  /* Mobile nav drawer */
  .mnav{
    position:fixed !important; inset:0 0 0 auto !important; width:78%; max-width:320px; background:var(--panel); z-index:99999 !important;
    transform:translateX(100%) !important; transition:transform .3s ease; padding:26px; border-left:1px solid var(--line);
    display:flex !important; flex-direction:column; gap:22px; overflow-y:auto;
    visibility:hidden; opacity:0;
  }
  .mnav.open{transform:translateX(0) !important; visibility:visible; opacity:1;}
  .mnav a{font-family:var(--f-display); font-size:1.05rem; color:var(--gold-hi);}
  .mnav-close{align-self:flex-end; background:none; border:none; color:var(--gold); font-size:1.4rem;}
  .scrim{position:fixed !important; inset:0 !important; background:rgba(0,0,0,.6); z-index:99998 !important; display:none !important;}
  .scrim.open{display:block !important;}