/* =============================================================================
   HotelBookings — the customer website.
   -----------------------------------------------------------------------------
   THIS FILE IS THE APPROVED STYLESHEET, VERBATIM.

   Everything from the opening :root to the closing media query below is the
   <style> block of the approved milestone — index.html at this repository's
   root, the artefact the previous product was served from apart from one
   script filename. It was extracted, not retyped, and not reinterpreted.

   I had been porting selected components into a page I rewrote. That is why
   the result kept coming out behind the milestone: a rewrite reproduces what
   its author remembers, and I was remembering selectively. Taking the approved
   sheet whole removes my judgement from the question.

   Additions come AFTER it, in one clearly marked block at the end, and they
   only add what the approved page had no need of: a dark skin, a [hidden]
   reset, the autocomplete panel, result states, and the staging banner.
   Nothing in the approved block is edited.
   ========================================================================== */

    :root{--ink:#003d82;--ink2:#0072e5;--coral:#ffd23f;--sun:#ffd23f;--aqua:#2ec4b6;--sky:#53d4ca;--sand:#f1d39b;--cream:#fbfbf7;--white:#fff;--muted:#667482;--line:#dce6e8;--shadow:0 22px 60px rgba(0,61,130,.17);--radius:22px}
    *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:var(--cream);font-family:"Alexandria",Arial,sans-serif;overflow-x:hidden}body.menu-open{overflow:hidden}button,input,select{font:inherit}button,a{cursor:pointer}a{color:inherit;text-decoration:none}img{max-width:100%;display:block;object-fit:cover}.wrap{width:min(1180px,calc(100% - 40px));margin:auto}
    .topbar{height:36px;background:var(--ink);color:#d8e9e7;font-size:11px;display:flex;align-items:center}.topbar .wrap{display:flex;justify-content:space-between}.topbar b{color:var(--sun)}.links{display:flex;align-items:center;gap:25px;font-size:13px;font-weight:600}.links a{position:relative}.links a:after{content:"";position:absolute;right:0;left:100%;bottom:-8px;height:2px;background:var(--coral);transition:.25s}.links a:hover:after{left:0}.nav-actions{display:flex;align-items:center;gap:9px}.icon-btn,.menu-btn{width:43px;height:43px;border:1px solid var(--line);background:#fff;border-radius:14px;display:grid;place-items:center;color:var(--ink)}.partner-btn{padding:13px 18px;border:0;background:var(--ink);color:#fff;border-radius:14px;font-size:12px;font-weight:700}.menu-btn{display:none}.hero:after{content:"";position:absolute;inset:auto 0 0;height:90px;background:linear-gradient(transparent,var(--cream))}.hero-content{position:relative;z-index:2;color:#fff;padding:70px 0 95px}.eyebrow{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid #ffffff50;background:#ffffff15;border-radius:50px;font-size:11px}.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--sun);box-shadow:0 0 0 5px #f5c45125}.hero h1{font-size:clamp(42px,7vw,82px);line-height:1.08;letter-spacing:-3px;margin:18px 0 15px;max-width:750px}.hero h1 span{color:var(--sun);position:relative}.hero p{font-size:16px;line-height:1.9;color:#e5efed;max-width:600px;margin:0 0 30px}.search-field{padding:10px 18px;border-left:1px solid var(--line);position:relative}.search-field label{display:block;font-size:10px;color:var(--muted);margin-bottom:6px}.search-field input,.search-field select{width:100%;border:0;outline:0;background:transparent;color:var(--ink);font-size:13px;font-weight:700}.search-btn{border:0;background:var(--coral);color:#fff;padding:0 29px;border-radius:17px;font-weight:800;min-height:65px;box-shadow:0 8px 22px rgba(240,90,71,.3)}.trust-row{display:flex;gap:23px;margin-top:24px;font-size:11px;color:#e7f0ef}.trust-row span{display:flex;align-items:center;gap:7px}.trust-row b{color:var(--sun);font-size:16px}
    section{padding:82px 0}.section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:28px}.kicker{font-size:11px;font-weight:800;color:var(--coral);letter-spacing:1px}.section-head h2{font-size:clamp(27px,4vw,42px);margin:7px 0 0;letter-spacing:-1.5px}.section-head p{color:var(--muted);font-size:12px;max-width:390px;line-height:1.8;margin:0}.text-link{font-size:12px;font-weight:800;color:var(--coral)}
    .destinations{padding-top:35px}.destination-grid{display:grid;grid-template-columns:1.3fr .7fr .7fr;grid-template-rows:240px 190px;gap:14px}.destination{position:relative;border-radius:24px;overflow:hidden;color:#fff;isolation:isolate}.destination:first-child{grid-row:1/3}.destination:nth-child(4){grid-column:2/4}.destination img{width:100%;height:100%;transition:transform .7s}.destination:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(4,30,29,.83),transparent 65%);z-index:0}.destination:hover img{transform:scale(1.06)}.destination-copy{position:absolute;z-index:2;right:20px;left:20px;bottom:17px;display:flex;justify-content:space-between;align-items:end}.destination h3{margin:0;font-size:20px}.destination small{color:#dce7e5}.destination .arrow{width:39px;height:39px;border-radius:50%;display:grid;place-items:center;background:#ffffff22;border:1px solid #ffffff40;transition:.25s}.destination:hover .arrow{background:var(--coral);transform:translateX(-4px)}
    .offers{background:var(--sand)}.filter-chips{display:flex;gap:8px;overflow:auto;padding-bottom:4px}.chip{white-space:nowrap;border:1px solid var(--line);background:#fff;padding:10px 15px;border-radius:50px;font-size:11px;color:var(--muted)}.chip.active{background:var(--ink);color:#fff;border-color:var(--ink)}.hotel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:25px}.hotel-card{background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 8px 30px rgba(8,43,43,.07);transition:.3s}.hotel-card:hover{transform:translateY(-7px);box-shadow:var(--shadow)}.hotel-media{height:235px;position:relative}.hotel-media img{width:100%;height:100%}.heart{position:absolute;left:14px;top:14px;width:40px;height:40px;border:0;border-radius:50%;background:#fffffff0;font-size:19px}.heart.saved{color:var(--coral)}.discount{position:absolute;right:14px;top:14px;background:var(--coral);color:#fff;padding:7px 10px;border-radius:8px;font-size:10px;font-weight:800}.hotel-body{padding:18px}.hotel-place{font-size:10px;color:var(--coral);font-weight:700}.hotel-card h3{font-size:17px;margin:7px 0 6px}.rating{display:flex;justify-content:space-between;color:var(--muted);font-size:10px}.rating b{color:#bd8712}.supplier-prices{margin:15px 0 12px;padding-top:12px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.supplier-prices small{color:var(--muted);font-size:9px}.supplier-prices strong{font-size:20px}.supplier-prices strong span{font-size:9px;color:var(--muted);font-weight:500}.view-offer{width:100%;border:1px solid var(--ink);color:var(--ink);background:#fff;border-radius:12px;padding:11px;font-size:11px;font-weight:800}.view-offer:hover{background:var(--ink);color:#fff}
    .promise-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}.promise{background:#fff;border:1px solid var(--line);border-radius:20px;padding:23px}.promise-icon{width:46px;height:46px;border-radius:15px;background:#fff2df;display:grid;place-items:center;font-size:21px}.promise h3{font-size:14px;margin:17px 0 7px}.promise p{font-size:10px;line-height:1.8;color:var(--muted);margin:0}
    .partner{padding-top:30px}.partner-box{background:var(--ink);border-radius:34px;color:#fff;overflow:hidden;display:grid;grid-template-columns:1fr .82fr;min-height:420px}.partner-copy{padding:56px}.partner-copy .kicker{color:var(--sun)}.partner-copy h2{font-size:clamp(30px,4vw,48px);line-height:1.35;margin:11px 0}.partner-copy p{color:#bfd0ce;font-size:12px;line-height:1.9}.partner-points{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0}.partner-points span{font-size:11px}.partner-points b{color:var(--sun);margin-left:6px}.partner-link{display:inline-flex;padding:14px 22px;border-radius:14px;background:var(--coral);font-size:12px;font-weight:800}.partner-image{position:relative;background:url('https://images.unsplash.com/photo-1556742049-0cfed4f6a45d?auto=format&fit=crop&w=800&q=70') center/cover}.partner-image:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--ink),transparent 60%)}.dashboard-card{position:absolute;z-index:2;left:24px;bottom:24px;width:230px;background:#fff;color:var(--ink);padding:18px;border-radius:18px;box-shadow:var(--shadow);animation:float 4s ease-in-out infinite}.dashboard-card small{color:var(--muted);font-size:9px}.bar{height:8px;background:#e6eeeb;border-radius:10px;margin-top:12px;overflow:hidden}.bar i{display:block;width:76%;height:100%;background:var(--coral);border-radius:10px}.dashboard-card strong{display:block;font-size:22px;margin-top:6px}
    footer{background:#041f1f;color:#dce8e6;padding:55px 0 110px;margin-top:85px}.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:45px}.footer-about p{font-size:10px;color:#9fb2af;line-height:2;max-width:330px}.footer-title{font-size:12px;color:#fff;margin-bottom:17px}.footer-links{display:grid;gap:11px;color:#9fb2af;font-size:10px}.copyright{border-top:1px solid #ffffff12;margin-top:40px;padding-top:20px;color:#7f9793;font-size:9px;display:flex;justify-content:space-between}.sticky-contact{position:fixed;z-index:45;left:20px;bottom:20px;display:flex;gap:8px}.sticky-contact a{display:flex;align-items:center;gap:7px;padding:13px 16px;border-radius:50px;color:#fff;font-size:11px;font-weight:700;box-shadow:0 8px 24px #0002}.wa{background:#1fa86a}.call{background:var(--coral)}
    .drawer{position:fixed;inset:0;z-index:80;background:#082b2bd9;opacity:0;pointer-events:none;transition:.25s}.drawer.show{opacity:1;pointer-events:auto}.drawer-panel{width:min(360px,88%);height:100%;background:var(--cream);padding:25px;transform:translateX(105%);transition:.3s}.drawer.show .drawer-panel{transform:none}.drawer-head{display:flex;justify-content:space-between;align-items:center}.drawer-links{display:grid;margin-top:35px}.drawer-links a{padding:17px 0;border-bottom:1px solid var(--line);font-weight:700}.drawer-close{border:0;background:transparent;font-size:28px}.reveal{opacity:0;transform:translateY(25px);transition:.65s}.reveal.visible{opacity:1;transform:none}
    @keyframes float{50%{transform:translateY(-9px)}}
    @media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}
    @media(max-width:900px){.links{display:none}.menu-btn{display:grid}.partner-btn{display:none}.search-btn{grid-column:1/-1}.search-field:nth-child(2){border:0}.destination-grid{grid-template-columns:1fr 1fr}.destination:first-child{grid-row:auto;grid-column:1/3}.destination:nth-child(4){grid-column:1/3}.hotel-grid{grid-template-columns:1fr 1fr}.promise-grid{grid-template-columns:1fr 1fr}.partner-box{grid-template-columns:1fr}.partner-image{min-height:300px}.footer-grid{grid-template-columns:1fr 1fr}}
    @media(max-width:600px){.wrap{width:min(100% - 24px,1180px)}.topbar{display:none}.nav-actions .icon-btn:first-child{display:none}.hero-content{padding:60px 0 80px}.hero h1{font-size:44px;letter-spacing:-2px}.hero p{font-size:12px}.search-field{border:0;border-bottom:1px solid var(--line);padding:11px 14px}.search-btn{width:100%;min-height:52px;margin-top:7px}.trust-row{gap:10px;flex-wrap:wrap}.trust-row span{font-size:9px}section{padding:60px 0}.section-head{display:block}.section-head p{margin-top:12px}.destination-grid{display:flex;overflow:auto;scroll-snap-type:x mandatory}.destination{min-width:82%;height:290px;scroll-snap-align:center}.destination:first-child,.destination:nth-child(4){grid-column:auto}.hotel-grid{display:flex;overflow:auto;scroll-snap-type:x mandatory;margin-left:-12px;margin-right:-12px;padding:0 12px 20px}.hotel-card{min-width:86%;scroll-snap-align:center}.promise-grid{grid-template-columns:1fr 1fr;gap:8px}.promise{padding:16px}.promise p{font-size:9px}.partner-copy{padding:32px 22px}.partner-points{grid-template-columns:1fr}.partner-image{min-height:260px}.footer-grid{grid-template-columns:1fr 1fr;gap:28px}.footer-about{grid-column:1/-1}.copyright{display:block;line-height:2}.sticky-contact{left:10px;right:10px;bottom:9px}.sticky-contact a{flex:1;justify-content:center;padding:12px 8px}.sticky-contact .call{display:none}}
    /* Refined Egyptian palette and tighter rhythm */
    body{background:var(--cream)}
    .topbar{background:#102f4a;color:#edf6f5}.topbar b{color:#f0c86e}.hero:before{display:none}.hero:after{height:55px}.hero-content{padding:42px 0 58px}.hero h1{margin:12px 0 10px}.hero h1 span{background:none;color:#f0c86e;-webkit-text-fill-color:currentColor;animation:none}.hero h1 span:after{display:none}.hero p{margin-bottom:20px}
    .search-btn{background:#d96545;box-shadow:0 8px 22px rgba(217,101,69,.27);transition:.25s}.search-btn:hover{transform:translateY(-2px);background:#c95336;box-shadow:0 12px 28px rgba(217,101,69,.35)}
    section{padding:58px 0}.destinations{padding-top:26px}.section-head{margin-bottom:21px}.kicker{display:inline-flex;align-items:center;gap:7px}.kicker:before{content:"◆";font-size:8px;color:#dcae52}.section-head h2{margin-top:4px}
    .destination{box-shadow:0 12px 34px rgba(16,47,74,.12);border:1px solid #fff}
    .offers{background:#eee7db;position:relative;overflow:hidden}.offers:before{display:none}
    .hotel-card{background:#fff;border:1px solid rgba(16,47,74,.06);box-shadow:0 8px 28px rgba(16,47,74,.08)}.hotel-card:hover{box-shadow:var(--shadow)}
    .promise{background:#fff;border-color:var(--line);box-shadow:0 8px 26px rgba(16,47,74,.06);transition:.28s}.promise:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.promise-icon{background:#f5ead7;box-shadow:none;color:#b85b40}
    .partner{padding-top:18px}.partner-box{background:linear-gradient(135deg,#102f4a,#15596d);box-shadow:0 24px 65px rgba(16,47,74,.2)}
    .sticky-contact{z-index:60;padding:5px;background:rgba(255,255,255,.9);border:1px solid #fff;border-radius:50px;backdrop-filter:blur(14px);box-shadow:0 12px 35px rgba(16,47,74,.17)}.sticky-contact a{font-weight:800;transition:.25s}.sticky-contact a:hover{transform:translateY(-2px)}.wa{background:#159866;box-shadow:none}.call{background:#d96545;box-shadow:none}
    .experience-strip{position:relative;z-index:4;margin-top:-34px}.experience-grid{display:grid;grid-template-columns:1.15fr .85fr .85fr 1.15fr;gap:10px;padding:10px;background:rgba(255,255,255,.94);border:1px solid #fff;border-radius:23px;box-shadow:0 16px 45px rgba(16,47,74,.14);backdrop-filter:blur(12px)}.experience-card{height:118px;border-radius:15px;overflow:hidden;position:relative}.experience-card img{width:100%;height:100%;transition:.5s}.experience-card:hover img{transform:scale(1.06)}.experience-card:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(8,35,51,.8))}.experience-card span{position:absolute;z-index:2;right:12px;bottom:10px;color:#fff;font-size:11px;font-weight:700}.experience-card small{display:block;color:#dbe9e7;font-size:8px;margin-top:2px}

    @media(max-width:600px){.hero-content{padding:35px 0 50px}.hero h1{font-size:39px}.experience-strip{margin-top:-28px}.experience-grid{display:flex;overflow:auto;padding:7px;border-radius:18px;scroll-snap-type:x mandatory}.experience-card{min-width:66%;height:105px;scroll-snap-align:center}section{padding:45px 0}.destinations{padding-top:18px}.sticky-contact{left:8px;right:8px;bottom:max(8px,env(safe-area-inset-bottom));padding:5px;border-radius:18px}.sticky-contact a{flex:1;justify-content:center;padding:13px 8px;border-radius:14px;font-size:10px}.sticky-contact .call{display:flex}footer{padding-bottom:125px}}
    /* Scroll-triggered contact actions inspired by the original project */
    .sticky-contact{opacity:0;visibility:hidden;transform:translateY(26px) scale(.96);pointer-events:none;transition:opacity .35s ease,transform .35s ease,visibility .35s ease}
    .sticky-contact.is-visible{opacity:1;visibility:visible;transform:none;pointer-events:auto}
    .sticky-contact a{position:relative;min-height:48px}.sticky-contact .contact-icon{position:relative;width:22px;height:22px;display:grid;place-items:center;flex:0 0 auto}.sticky-contact svg{width:20px;height:20px;fill:currentColor;display:block}
    .sticky-contact .contact-icon:after{content:"";position:absolute;top:-4px;right:-5px;width:7px;height:7px;border:2px solid #fff;border-radius:50%;background:#53e99b;box-shadow:0 0 0 0 rgba(83,233,155,.5);animation:contactPulse 2s ease-out infinite}
    .sticky-contact .call .contact-icon{transform-origin:50% 80%;animation:phoneRing 3.2s ease-in-out infinite}.sticky-contact .contact-copy{display:grid;line-height:1.15}.sticky-contact .contact-copy small{font-size:8px;font-weight:500;opacity:.82}.sticky-contact .contact-copy strong{font-size:11px}
    @keyframes contactPulse{70%{box-shadow:0 0 0 8px rgba(83,233,155,0)}100%{box-shadow:0 0 0 0 rgba(83,233,155,0)}}@keyframes phoneRing{0%,82%,100%{transform:rotate(0)}86%{transform:rotate(-13deg)}89%{transform:rotate(12deg)}92%{transform:rotate(-8deg)}95%{transform:rotate(5deg)}}
    @media(min-width:601px){.sticky-contact{flex-direction:column;align-items:stretch;border-radius:20px;left:18px;bottom:18px}.sticky-contact a{border-radius:14px;min-width:148px}}
    @media(max-width:600px){.sticky-contact{transform:translateY(110%);opacity:0;visibility:hidden;display:grid;grid-template-columns:1fr 1fr;gap:7px;background:rgba(255,255,255,.97);box-shadow:0 -8px 30px rgba(16,47,74,.16)}.sticky-contact.is-visible{transform:none;opacity:1;visibility:visible}.sticky-contact a{min-height:53px}.sticky-contact .contact-copy{display:block}.sticky-contact .contact-copy small{display:none}.sticky-contact .contact-copy strong{font-size:12px}}
    #why{position:relative;isolation:isolate;border-radius:34px;margin-top:38px;margin-bottom:38px;padding-right:30px;padding-left:30px;background:linear-gradient(90deg,rgba(255,250,240,.95),rgba(255,250,240,.84)),url('https://images.unsplash.com/photo-1568322445389-f64ac2515020?auto=format&fit=crop&w=1800&q=76') center/cover;box-shadow:0 20px 55px rgba(26,34,45,.10)}#why .promise{background:rgba(255,255,255,.92);backdrop-filter:blur(8px)}
    @media(max-width:600px){#why{width:calc(100% - 24px);padding:38px 12px;margin-top:20px;margin-bottom:20px;border-radius:24px}}.hero-slides{position:absolute;inset:0;z-index:-2}.hero-slide{position:absolute;inset:0;background-position:center;background-size:cover;opacity:0;transform:scale(1.04);animation:heroJoy 30s infinite}.hero-slide:nth-child(1){background-image:url('https://images.unsplash.com/photo-1540202404-a2f29016b523?auto=format&fit=crop&w=2000&q=88');animation-delay:0s}.hero-slide:nth-child(2){background-image:url('https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?auto=format&fit=crop&w=2000&q=88');animation-delay:6s}.hero-slide:nth-child(3){background-image:url('https://images.unsplash.com/photo-1572252009286-268acec5ca0a?auto=format&fit=crop&w=2000&q=88');animation-delay:12s}.hero-slide:nth-child(4){background-image:url('https://images.unsplash.com/photo-1504151932400-72d4384f04b3?auto=format&fit=crop&w=2000&q=88');animation-delay:18s}.hero-slide:nth-child(5){background-image:url('https://images.unsplash.com/photo-1511895426328-dc8714191300?auto=format&fit=crop&w=2000&q=88');animation-delay:24s}.hero-overlay{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(7,26,61,.08) 0%,rgba(7,26,61,.42) 45%,rgba(7,26,61,.86) 100%),linear-gradient(0deg,rgba(7,26,61,.14),transparent 52%)}.hero-photo-label i{width:8px;height:8px;border-radius:50%;background:#ffc928;box-shadow:0 0 0 5px rgba(255,201,40,.17)}
    @keyframes heroJoy{0%{opacity:0;transform:scale(1.04)}4%,18%{opacity:1}22%,100%{opacity:0;transform:scale(1.12)}}
    @media(prefers-reduced-motion:reduce){.hero-slide{animation:none;opacity:0}.hero-slide:first-child{opacity:1;transform:none}}
    @media(max-width:600px){.hero-slide:nth-child(1){background-position:56% center}.hero-slide:nth-child(2){background-position:46% center}.hero-slide:nth-child(3){background-position:35% center}.hero-slide:nth-child(4){background-position:45% center}.hero-slide:nth-child(5){background-position:48% center}.hero-overlay{background:linear-gradient(90deg,rgba(7,26,61,.18),rgba(7,26,61,.8))}}body{background:radial-gradient(circle at 6% 25%,rgba(46,196,182,.13),transparent 22%),radial-gradient(circle at 96% 65%,rgba(255,210,63,.14),transparent 23%),#fbfbf7;color:#003d82}
    .topbar{background:linear-gradient(90deg,#003d82,#005cb9 55%,#0072e5);color:#fff}.topbar b{color:#ffd23f}.partner-btn{background:linear-gradient(135deg,#003d82,#0072e5)}.links a:after{background:linear-gradient(90deg,#2ec4b6,#ffd23f)}
    .hero-overlay{background:linear-gradient(90deg,rgba(0,61,130,.06),rgba(0,61,130,.4) 45%,rgba(0,42,92,.87) 100%),linear-gradient(0deg,rgba(0,61,130,.12),transparent 52%)}.eyebrow{background:rgba(46,196,182,.2);border-color:rgba(102,238,225,.5)}.eyebrow i{background:#ffd23f;box-shadow:0 0 0 5px rgba(255,210,63,.2)}.hero h1 span{color:#ffd23f;-webkit-text-fill-color:#ffd23f;text-shadow:0 8px 30px rgba(255,210,63,.25)}.trust-row b{color:#74f2e7}.search-btn,.partner-link,.call{background:linear-gradient(135deg,#0072e5,#005ec2);box-shadow:0 10px 28px rgba(0,114,229,.32)}.search-btn:hover{background:linear-gradient(135deg,#0064ca,#004f9f)}
    .experience-grid{border-bottom-color:#ffd23f}.kicker{color:#0072e5}.kicker:before{color:#2ec4b6}.section-head h2,.supplier-prices strong{color:#003d82}.text-link{color:#0072e5}.destination .arrow{background:#2ec4b6;border-color:#86eee4}.destination:hover .arrow{background:#0072e5}.destination:first-child{box-shadow:0 18px 46px rgba(0,114,229,.18)}
    .offers{background:linear-gradient(145deg,rgba(238,251,250,.94),rgba(255,244,205,.91),rgba(230,242,255,.94)),url('https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&w=1800&q=76') center/cover}.chip.active{background:linear-gradient(135deg,#003d82,#0072e5);box-shadow:0 8px 21px rgba(0,61,130,.22)}
    .hotel-card{border-top-color:#2ec4b6;box-shadow:0 11px 35px rgba(0,61,130,.1)}.hotel-card:nth-child(2){border-top-color:#0072e5}.hotel-card:nth-child(3){border-top-color:#ffd23f}.discount{background:linear-gradient(135deg,#0072e5,#2990ef)}.heart.saved{color:#0072e5}.hotel-place{color:#149b90}.rating b{color:#c89000}.view-offer{border-color:#003d82;color:#003d82}.view-offer:hover{background:#003d82}
    .promise:nth-child(1){border-bottom-color:#2ec4b6}.promise:nth-child(2){border-bottom-color:#0072e5}.promise:nth-child(3){border-bottom-color:#ffd23f}.promise:nth-child(4){border-bottom-color:#53d4ca}.promise-icon{background:linear-gradient(135deg,#dcfaf7,#fff2b8);color:#003d82}
    .partner-box{background:radial-gradient(circle at 17% 8%,rgba(46,196,182,.32),transparent 34%),radial-gradient(circle at 83% 100%,rgba(255,210,63,.2),transparent 34%),linear-gradient(135deg,#00336d,#0067c9)}.partner-copy .kicker{color:#ffd23f}.bar i{background:linear-gradient(90deg,#ffd23f,#2ec4b6)}footer{background:linear-gradient(145deg,#002b5c,#004b95)}.wa{background:linear-gradient(135deg,#1dab9e,#2ec4b6)}
    .hero-slide:nth-child(1){background-image:url('assets/egypt-hotels-family-hero.webp?v=3')}
    #destinationInput::placeholder{color:#8297aa;opacity:.72;font-weight:500}.search-field{padding:8px 14px;border:1px solid #dce8ee;border-radius:13px;background:#f7fbfc;min-height:56px;display:flex;flex-direction:column;justify-content:center}.search-field label{margin-bottom:3px;color:#607b91;font-size:9px}.search-field input,.search-field select{font-size:12px}.search-btn{min-height:56px;padding:0 22px;border-radius:13px;font-size:12px}
    @media(max-width:900px){.search-field{min-height:53px}}
    @media(max-width:600px){.search-field{min-height:49px;padding:7px 11px;margin-bottom:5px;border:1px solid #dce8ee;border-radius:11px}.search-btn{min-height:49px;margin-top:1px}}.icon-btn,.menu-btn{width:37px;height:37px;border-radius:12px}.partner-btn{padding:10px 15px}
    @media(max-width:600px){.icon-btn,.menu-btn{width:34px;height:34px}}.search-field{min-height:50px;padding:6px 12px}.search-btn{min-height:50px;padding:0 18px}.search-field label{font-size:8px}.search-field input,.search-field select{font-size:11px}
    @media(max-width:600px){.search-field{min-height:46px;padding:6px 10px}.search-btn{min-height:46px}}
    .wrap{width:min(1180px,calc(100% - 56px))}.hero-content{padding-right:6px;padding-left:6px}
    @media(max-width:600px){.wrap{width:calc(100% - 32px)}.hero-content{padding-right:2px;padding-left:2px}}.icon-btn,.menu-btn{width:34px;height:34px}.partner-btn{padding:8px 13px}
    @media(max-width:600px){.icon-btn,.menu-btn{width:31px;height:31px}}
    .sticky-contact{padding:4px;gap:6px}.sticky-contact a{min-height:42px;padding:10px 13px}.sticky-contact .contact-icon{width:19px;height:19px}.sticky-contact svg{width:17px;height:17px}.sticky-contact .contact-copy strong{font-size:10px}.sticky-contact .contact-copy small{font-size:7px}.wa{background:linear-gradient(135deg,#0f8075,#16988a);box-shadow:0 7px 18px rgba(15,128,117,.23)}
    @media(min-width:601px){.sticky-contact a{min-width:132px}}
    @media(max-width:600px){.sticky-contact a{min-height:47px;padding:10px 7px}.sticky-contact .contact-copy strong{font-size:11px}}
    body{background:radial-gradient(circle at 4% 30%,rgba(46,196,182,.08),transparent 20%),radial-gradient(circle at 96% 68%,rgba(0,114,229,.055),transparent 22%),#f8fbfc}.destinations{position:relative}.destinations:before{content:"";position:absolute;z-index:-1;width:280px;height:280px;right:-170px;top:90px;border-radius:50%;background:rgba(46,196,182,.07);filter:blur(10px)}
    .offers{background:linear-gradient(135deg,rgba(247,252,253,.97),rgba(226,246,247,.92) 52%,rgba(242,248,255,.96)),url('https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&w=1800&q=74') center/cover}.hotel-card{background:#fff}.chip{background:rgba(255,255,255,.92)}
    #why{background:linear-gradient(90deg,rgba(248,252,252,.97),rgba(238,248,248,.9)),url('https://images.unsplash.com/photo-1568322445389-f64ac2515020?auto=format&fit=crop&w=1400&q=68') center/cover}#why .promise{background:rgba(255,255,255,.94)}
    .promise-icon{background:linear-gradient(135deg,#e2f8f6,#edf4ff)}.experience-grid{background:rgba(255,255,255,.96)}section:not(.hero):not(.offers){color:#003d82}
    .hero-slide{animation-duration:30s}.hero-slide:nth-child(4){background-image:url('https://images.unsplash.com/photo-1511895426328-dc8714191300?auto=format&fit=crop&w=1400&q=70');animation-delay:18s}.hero-slide:nth-child(5){background-image:url('assets/luxor-balloons.webp?v=3');animation-delay:24s}
    @media(max-width:600px){.hero-slide:nth-child(5){background-position:38% center}}
    main{background:linear-gradient(180deg,#f8fcfd 0%,#f2f9fc 48%,#f8fbfd 100%)}.destinations{background:#f8fcfd;border-radius:28px}.offers{background:linear-gradient(135deg,#eef8fc 0%,#e8f7f7 55%,#f3f8ff 100%);border-top:1px solid #d9edf2;border-bottom:1px solid #d9edf2}.offers:after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 15% 20%,rgba(46,196,182,.08),transparent 25%),radial-gradient(circle at 85% 80%,rgba(0,114,229,.06),transparent 27%)}.offers>.wrap{position:relative;z-index:1}
    #why{background:linear-gradient(135deg,#f7fcfd,#eaf7f8 55%,#eef5ff);box-shadow:0 16px 45px rgba(0,61,130,.07);border:1px solid #dceef1}#why .promise{background:#fff;border-color:#e0ebee}.partner{background:transparent}.partner-box{border:1px solid rgba(255,255,255,.14)}
    .experience-strip{background:transparent}.experience-grid{background:#fff;border-color:#e1ecef}.hotel-card{background:#fff}.promise-grid{position:relative;z-index:1}
    .wa{background:linear-gradient(135deg,#086b62,#0d8175);box-shadow:0 7px 18px rgba(8,107,98,.26)}
    .filter-chips,.destination-grid,.hotel-grid,.experience-grid{scrollbar-width:thin;scrollbar-color:#0072e5 rgba(0,114,229,.08)}.filter-chips::-webkit-scrollbar,.destination-grid::-webkit-scrollbar,.hotel-grid::-webkit-scrollbar,.experience-grid::-webkit-scrollbar{height:7px}.filter-chips::-webkit-scrollbar-track,.destination-grid::-webkit-scrollbar-track,.hotel-grid::-webkit-scrollbar-track,.experience-grid::-webkit-scrollbar-track{background:rgba(0,114,229,.07);border-radius:20px;margin:0 18px}.filter-chips::-webkit-scrollbar-thumb,.destination-grid::-webkit-scrollbar-thumb,.hotel-grid::-webkit-scrollbar-thumb,.experience-grid::-webkit-scrollbar-thumb{background:linear-gradient(90deg,#2ec4b6,#0072e5);border:1px solid rgba(255,255,255,.8);border-radius:20px}.filter-chips::-webkit-scrollbar-thumb:hover,.destination-grid::-webkit-scrollbar-thumb:hover,.hotel-grid::-webkit-scrollbar-thumb:hover,.experience-grid::-webkit-scrollbar-thumb:hover{background:#005fbe}.filter-chips::-webkit-scrollbar-button,.destination-grid::-webkit-scrollbar-button,.hotel-grid::-webkit-scrollbar-button,.experience-grid::-webkit-scrollbar-button{display:none;width:0;height:0}
    @media(max-width:600px){.filter-chips,.destination-grid,.hotel-grid,.experience-grid{scrollbar-width:none;-ms-overflow-style:none}.filter-chips::-webkit-scrollbar,.destination-grid::-webkit-scrollbar,.hotel-grid::-webkit-scrollbar,.experience-grid::-webkit-scrollbar{display:none}}
    .offers{background:linear-gradient(135deg,#f5fbfd 0%,#e9f7fa 50%,#edf5fc 100%)}.offers:after{background:radial-gradient(circle at 14% 18%,rgba(46,196,182,.055),transparent 24%),radial-gradient(circle at 86% 82%,rgba(0,114,229,.045),transparent 26%)}.offers .hotel-media img{filter:saturate(.9) brightness(1.035) contrast(.96);transition:filter .35s,transform .7s}.offers .hotel-card:hover .hotel-media img{filter:saturate(1) brightness(1.02) contrast(.99)}.offers .hotel-card{box-shadow:0 10px 32px rgba(0,61,130,.075)}
    .offers .hotel-card,.offers .hotel-card:nth-child(2),.offers .hotel-card:nth-child(3),#why .promise,#why .promise:nth-child(1),#why .promise:nth-child(2),#why .promise:nth-child(3),#why .promise:nth-child(4){border:1px solid #dfe9ed;border-right:3px solid #0072e5;border-top-color:#dfe9ed;border-bottom-color:#dfe9ed}.offers .hotel-card:hover,#why .promise:hover{border-right-color:#005bb8;box-shadow:0 13px 38px rgba(0,61,130,.11)}
    .offers{background:#edf8fc;background-image:linear-gradient(135deg,#f6fcfe 0%,#e8f7fa 52%,#eef6fd 100%)}.offers:before{display:none}.offers:after{background:radial-gradient(circle at 14% 18%,rgba(46,196,182,.045),transparent 24%),radial-gradient(circle at 86% 82%,rgba(0,114,229,.04),transparent 26%)}
    .hero h1{font-size:clamp(36px,5vw,62px);line-height:1.06;margin:10px 0 8px}.hero p{font-size:14px;line-height:1.75;margin-bottom:14px;max-width:570px}.hero-offers{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 14px}.promo-city{padding-left:6px;border:1px solid rgba(255,255,255,.25)}.promo-city strong{min-width:104px;padding:8px 13px;border-radius:10px;background:linear-gradient(135deg,#ffca56,#ffd77a);color:#8f1825;text-align:center;font-size:13px}.city-pop{animation:cityOfferPop .45s ease}@keyframes cityOfferPop{0%{opacity:0;transform:translateY(7px) scale(.95)}100%{opacity:1;transform:none}}
    @media(max-width:600px){.hero h1{font-size:33px}.hero p{font-size:11px;line-height:1.65;margin-bottom:11px}.hero-offers{gap:6px;margin-bottom:11px}.promo-city strong{min-width:82px;padding:6px 8px;font-size:10px}}
    /* Performance: right-sized rotating hero photography */
    .hero-slide:nth-child(2){background-image:url('https://images.unsplash.com/photo-1611892440504-42a792e24d32?auto=format&fit=crop&w=1600&q=78')}.hero-slide:nth-child(3){background-image:url('https://images.unsplash.com/photo-1572252009286-268acec5ca0a?auto=format&fit=crop&w=1600&q=78')}.hero-slide:nth-child(4){background-image:url('https://images.unsplash.com/photo-1511895426328-dc8714191300?auto=format&fit=crop&w=1600&q=78')}
    @media(max-width:600px){.hero .search-field{padding:9px 13px;margin-bottom:6px}.hero .search-btn{margin-top:2px;padding-right:14px;padding-left:14px}}
    .hero-offers{display:grid;justify-items:start;gap:6px}.promo-city{grid-row:1}
    @media(max-width:600px){.hero-offers{gap:5px}}
    .promo-city strong{position:relative;background:linear-gradient(135deg,#0072e5,#2ec4b6);color:#fff;border:1px solid rgba(255,255,255,.35);box-shadow:0 6px 17px rgba(0,61,130,.2)}.promo-city strong:after{content:"";position:absolute;right:18%;left:18%;bottom:3px;height:2px;border-radius:4px;background:#ffd23f}
    .promo-city{min-height:42px;padding:5px 6px 5px 14px;display:flex;align-items:center;gap:9px;border:1px solid rgba(46,196,182,.72);border-radius:14px;background:linear-gradient(135deg,rgba(0,40,86,.84),rgba(0,74,128,.75));box-shadow:0 8px 24px rgba(0,30,67,.2),inset 0 0 0 1px rgba(255,255,255,.06);color:#fff;font-size:11px;font-weight:700}.promo-city>span{font-weight:700;color:#f8fcff}.promo-city strong{background:linear-gradient(135deg,#0072e5,#2ec4b6);color:#fff;border:1px solid rgba(255,255,255,.4);border-radius:10px}.promo-city strong:after{background:#ffd23f}
    @media(max-width:600px){.promo-city{min-height:37px;padding:4px 5px 4px 10px;border-radius:11px}}.hero-content{padding-top:82px}
    @media(max-width:600px){.hero-content{padding-top:75px}}
    html{scroll-padding-top:78px}.offers{overflow:visible;scroll-margin-top:78px}.hotel-grid{padding-top:9px;margin-top:16px;overflow-y:visible}.hotel-card{overflow:hidden;isolation:isolate}
    @media(max-width:600px){html{scroll-padding-top:66px}.offers{scroll-margin-top:66px}.hotel-grid{padding-top:7px}}
    .promo-city strong:after{display:none}
    .sticky-contact .call{background:linear-gradient(145deg,#ffcf43,#ff8b38);color:#003d82;box-shadow:0 7px 18px rgba(255,139,56,.26)}
    .promo-city strong:after{content:none;display:none;background:none}.hero .search-field{min-height:46px;padding:5px 11px}.hero .search-btn{min-height:46px;padding-right:16px;padding-left:16px}
    @media(max-width:600px){.hero .search-field{min-height:43px;padding:6px 10px}.hero .search-btn{min-height:43px}}
    /* Friendly travel mascot peeking from behind the search panel */
    .search-mascot{position:absolute;left:24px;bottom:calc(100% - 3px);z-index:3;width:150px;height:108px;overflow:hidden;pointer-events:none;filter:drop-shadow(0 8px 12px rgba(0,40,86,.18))}.search-mascot img{display:block;width:100%;height:auto;transform-origin:55% 100%;animation:mascotHello 15s cubic-bezier(.35,.05,.2,1) infinite;will-change:transform,opacity}.mascot-speech{position:absolute;left:145px;bottom:calc(100% + 48px);z-index:4;direction:rtl;white-space:nowrap;padding:9px 14px;border:1px solid rgba(255,255,255,.82);border-radius:16px 16px 5px 16px;background:linear-gradient(135deg,#fff,#f2fbff);color:#003d82;font-size:12px;font-weight:900;box-shadow:0 10px 24px rgba(0,40,86,.18);pointer-events:none;animation:mascotSpeech 15s ease infinite}.mascot-speech:after{content:"";position:absolute;left:-8px;bottom:5px;border-width:7px 9px 0 0;border-style:solid;border-color:#f2fbff transparent transparent transparent;transform:rotate(12deg)}@keyframes mascotHello{0%,3%{opacity:0;transform:translateY(105%) rotate(0)}7%{opacity:1;transform:translateY(8%) rotate(0)}9%{transform:translateY(5%) rotate(-3deg)}11%{transform:translateY(5%) rotate(3deg)}13%{transform:translateY(5%) rotate(-2deg)}15%,25%{opacity:1;transform:translateY(5%) rotate(0)}30%,100%{opacity:0;transform:translateY(105%) rotate(0)}}@keyframes mascotSpeech{0%,9%,29%,100%{opacity:0;transform:translateY(8px) scale(.92)}12%,25%{opacity:1;transform:none}}
    @media(max-width:600px){.search-mascot{left:5px;bottom:calc(100% - 2px);width:106px;height:76px;filter:drop-shadow(0 5px 8px rgba(0,40,86,.16))}.mascot-speech{left:90px;bottom:calc(100% + 34px);max-width:175px;white-space:normal;padding:7px 10px;border-radius:13px 13px 4px 13px;font-size:9px;line-height:1.45}}
    .search-panel.mascot-right .search-mascot{left:auto;right:20px}.search-panel.mascot-right .mascot-speech{left:auto;right:145px;border-radius:16px 16px 16px 5px}.search-panel.mascot-right .mascot-speech:after{left:auto;right:-8px;border-width:7px 0 0 9px}.search-panel.mascot-center .search-mascot{left:50%;transform:translateX(-50%)}.search-panel.mascot-center .mascot-speech{left:calc(50% + 55px)}
    @media(max-width:600px){.search-panel.mascot-right .search-mascot{right:4px}.search-panel.mascot-right .mascot-speech{right:90px}.search-panel.mascot-center .search-mascot{left:50%}.search-panel.mascot-center .mascot-speech{left:calc(50% + 35px);bottom:calc(100% + 30px);max-width:135px}}
    @media(prefers-reduced-motion:reduce){.search-mascot,.mascot-speech{display:none}.search-mascot img{animation:none}}
    .menu-btn{padding:0;line-height:1}.menu-btn svg{display:block;width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
    /* Mobile polish: a comfortable header and consistent reading gutters */
    @media(max-width:600px){
      .wrap{width:100%;padding-inline:20px}
      .menu-btn,.icon-btn{width:42px;height:42px;border-radius:13px;font-size:19px;flex:0 0 42px}.hero-content{padding-top:92px;padding-right:28px;padding-bottom:58px;padding-left:20px}.hero h1{font-size:clamp(38px,12vw,48px);line-height:1.12;margin-top:16px}.hero p{font-size:13px;line-height:1.9;margin-bottom:0}.hero-offers{margin-block:18px}.promo-city>span{font-size:13px}
      .search-field input,.search-field select{font-size:16px}
      .experience-card{height:120px}
      section{padding-block:50px}.section-head{margin-bottom:24px}.section-head h2{line-height:1.35}.section-head p{font-size:11px;line-height:1.9}
      .partner-copy{padding:36px 24px}.hotel-body{padding:20px}.promise{padding:18px}.footer-grid{padding-inline:2px}
    }
    /* Compact branded date picker: replaces the oversized mobile browser calendar */
    .date-field{z-index:6}.date-field:after{content:"";position:absolute;left:13px;bottom:13px;width:14px;height:14px;border:2px solid #0072e5;border-radius:4px;background:linear-gradient(#ffd23f 0 3px,transparent 3px);pointer-events:none}.date-field:before{content:"";position:absolute;left:16px;bottom:28px;width:2px;height:4px;border-radius:2px;background:#2ec4b6;box-shadow:6px 0 #2ec4b6;z-index:1}.date-field #checkin{cursor:pointer;padding-left:28px;caret-color:transparent}.date-field.calendar-open{z-index:50}
    .date-picker{position:absolute;top:calc(100% + 8px);right:0;z-index:80;width:276px;padding:12px;border:1px solid rgba(0,114,229,.16);border-radius:18px;background:rgba(255,255,255,.98);box-shadow:0 18px 45px rgba(0,38,84,.24);backdrop-filter:blur(18px);direction:rtl;color:#003d82}.date-picker[hidden]{display:none}.calendar-head{display:grid;grid-template-columns:34px 1fr 34px;align-items:center;direction:ltr;margin-bottom:9px}.calendar-head strong{text-align:center;font-size:12px}.calendar-nav,.calendar-today{border:0;background:#eaf6fa;color:#0072e5;font-weight:900}.calendar-nav{width:31px;height:31px;border-radius:10px;font-size:18px;display:grid;place-items:center}.calendar-nav:disabled{opacity:.3;cursor:not-allowed}.calendar-week,.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.calendar-week span{display:grid;place-items:center;height:22px;color:#71879a;font-size:7px;font-weight:800}.calendar-day{height:30px;border:0;border-radius:9px;background:transparent;color:#12366f;font-size:10px;font-weight:800}.calendar-day:hover{background:#eaf6fa}.calendar-day.today{box-shadow:inset 0 0 0 1.5px #2ec4b6}.calendar-day.selected{background:linear-gradient(135deg,#0072e5,#005ec2);color:#fff;box-shadow:0 5px 12px rgba(0,114,229,.25)}.calendar-day:disabled{color:#c5d0d8;cursor:not-allowed}.calendar-foot{display:flex;justify-content:center;margin-top:9px;padding-top:9px;border-top:1px solid #e5eef2}.calendar-today{min-width:78px;height:29px;border-radius:10px;font-size:8px}
    @media(max-width:600px){.date-picker{right:50%;width:258px;padding:10px;border-radius:16px;transform:translateX(50%)}.calendar-day{height:28px}.calendar-head{margin-bottom:6px}.calendar-foot{margin-top:7px;padding-top:7px}}

    /* Final header, hero, search and logo rules */
    header{position:fixed;z-index:50;top:36px;right:0;left:0;width:100%;height:0;min-height:0;padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none;overflow:visible;pointer-events:none;transition:top .28s ease}
    header.is-scrolled{top:4px}
    .nav{position:relative;width:min(1180px,calc(100% - 28px));height:49px;margin-top:6px;padding:0 16px;display:flex;align-items:center;gap:32px;border:1px solid rgba(0,61,130,.08);border-radius:17px;background:rgba(255,255,255,.96);box-shadow:0 8px 26px rgba(0,43,92,.09);backdrop-filter:blur(0) saturate(1);overflow:hidden;pointer-events:auto;transition:background .35s ease,backdrop-filter .35s ease,box-shadow .35s ease,border-color .35s ease}
    header.is-scrolled .nav{background:rgba(242,249,253,.48);border-color:rgba(255,255,255,.58);backdrop-filter:blur(20px) saturate(1.28);-webkit-backdrop-filter:blur(20px) saturate(1.28);box-shadow:0 9px 28px rgba(0,43,92,.09)}
    .logo{display:flex;align-items:center;gap:7px;margin-left:auto}
    .logo-mark{position:relative;width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;overflow:visible;border-radius:14px 14px 14px 5px;color:#0072e5;font:800 18px "DM Sans";background:linear-gradient(145deg,#ffcf43,#ff8b38);box-shadow:0 9px 24px rgba(255,139,56,.3);animation:logoRevealAfterPlaneBlue 15s 1s linear infinite}
    .logo-mark:before{content:"✈";position:absolute;z-index:6;right:auto;left:-4px;top:38px;width:auto;height:auto;background:none;color:#0072e5;font-size:14px;line-height:1;filter:blur(4px);opacity:0;transform:rotate(-38deg) scale(.65);animation:planeStraightUp 15s 1s linear infinite}
    .logo-mark:after{content:"";position:absolute;z-index:7;display:block;width:9px;height:9px;right:auto;left:-4px;top:-4px;border:2px solid #fff;border-radius:50%;background:#0072e5;box-shadow:0 0 0 3px rgba(0,114,229,.15);animation:dotFromPlane 15s 1s linear infinite}
    .logo-text{display:block;direction:ltr;text-align:left;line-height:1;opacity:1;transform:none}
    .logo-text strong{display:inline-block;font:700 17px "DM Sans";letter-spacing:-.8px;opacity:1;transform:none;text-shadow:none}
    .logo-text small{display:block;width:58px;margin:-1px 0 0 auto;color:var(--muted);font-size:0;letter-spacing:1px;text-align:center;transform:none}
    .logo-text small:after{content:"BOOKING";display:inline-block;font-size:9px;letter-spacing:0}
    .hero{min-height:570px;position:relative;display:grid;align-items:center;isolation:isolate;margin-top:0;background:#071a3d;overflow:hidden}
    .search-panel{position:relative;max-width:760px;margin-bottom:10px;padding:5px;display:grid;grid-template-columns:1.35fr 1fr 1fr auto;gap:5px;border:1px solid rgba(255,255,255,.85);border-bottom:5px solid #2ec4b6;border-radius:20px;background:#fff;color:var(--ink);box-shadow:0 24px 60px rgba(0,34,73,.3);overflow:visible}
    .hero-photo-label{position:absolute;z-index:3;left:28px;bottom:62px;width:310px;min-height:96px;padding:13px 14px;display:grid;grid-template-columns:44px 1fr 58px;align-items:center;gap:11px;direction:ltr;border:1px solid rgba(94,219,255,.42);border-radius:22px;background:linear-gradient(135deg,rgba(0,55,116,.94),rgba(0,37,82,.96));box-shadow:0 12px 30px rgba(0,20,50,.28),inset 0 1px 0 rgba(255,255,255,.12);backdrop-filter:blur(14px);color:#fff;font-size:9px;overflow:hidden}
    .activity-copy{display:grid;gap:2px;direction:rtl;text-align:right}.activity-copy small{color:#ffd23f;font-size:8px;font-weight:800;letter-spacing:1px}.activity-copy strong{color:#fff;font-size:14px;text-shadow:0 2px 9px rgba(0,0,0,.28)}.activity-copy em{color:#dcefff;font-size:8px;font-style:normal}
    .activity-symbol{position:relative;isolation:isolate;grid-column:1;grid-row:1;width:56px;height:56px;display:grid;place-items:center;border:1px solid rgba(46,196,182,.72);border-radius:17px;background:linear-gradient(145deg,rgba(46,196,182,.2),rgba(0,114,229,.13));color:#7eeadd;font-size:23px;box-shadow:inset 0 0 16px rgba(46,196,182,.12),0 5px 14px rgba(0,24,60,.16);backdrop-filter:blur(8px)}
    .activity-symbol svg{display:block;width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
    .activity-pulse{position:relative;grid-column:3;grid-row:1;width:40px;height:40px;display:grid;place-items:center;border:1px solid rgba(255,210,63,.82);border-radius:50%;background:rgba(255,210,63,.13);color:#ffd23f;font-size:17px;box-shadow:inset 0 0 12px rgba(255,210,63,.1),0 0 0 1px rgba(255,210,63,.12)}
    .activity-pulse svg{display:none}.activity-pulse:before{content:"";position:absolute;z-index:2;left:50%;top:50%;width:13px;height:13px;border-radius:50% 50% 50% 0;background:#ffd23f;box-shadow:0 0 9px rgba(255,210,63,.7);transform:translate(-50%,-63%) rotate(-45deg)}.activity-pulse:after{content:"";position:absolute;z-index:1;inset:-7px;border:1px solid rgba(255,210,63,.48);border-radius:50%;animation:locationRadar 1.8s ease-out infinite}
    .activity-line{position:absolute;right:72px;left:20px;bottom:8px;height:2px;background:repeating-linear-gradient(90deg,#ffd23f 0 7px,transparent 7px 13px);background-size:34px 2px;opacity:1;animation:egyptRouteDashes 1.25s linear infinite}.activity-line svg{display:none}.activity-line:after{display:none}.activity-line:before{content:"";position:absolute;z-index:2;right:0;top:-5px;width:10px;height:10px;border:2px solid #fff;border-radius:50%;background:#ffd23f;box-shadow:0 0 5px 2px #fff,0 0 12px 5px #ffd23f,0 0 22px 9px rgba(46,196,182,.48);animation:egyptCalmLight 4.8s ease-in-out infinite}
    .activity-change .activity-copy{animation:activityBrightSwap .5s ease}.activity-change .activity-symbol{animation:activityBrightIcon .55s ease}
    @keyframes logoRevealAfterPlaneBlue{0%,4.8%{color:transparent;background:transparent;box-shadow:none}5.2%{color:#0072e5;background:linear-gradient(145deg,#ffcf43,#ff8b38);box-shadow:0 0 22px rgba(255,210,63,.48);transform:scale(1.08)}6%,98%{color:#0072e5;background:linear-gradient(145deg,#ffcf43,#ff8b38);box-shadow:0 9px 24px rgba(255,139,56,.3);transform:none}98.1%,100%{color:transparent;background:transparent;box-shadow:none}}
    @keyframes planeStraightUp{0%{left:-4px;top:38px;opacity:0;filter:blur(4px);transform:rotate(-35deg) scale(.65)}1%{left:-4px;top:30px;opacity:.28;filter:blur(3px);transform:rotate(-35deg) scale(.72)}2%{left:-4px;top:20px;opacity:.55;filter:blur(2px);transform:rotate(-35deg) scale(.8)}3%{left:-4px;top:10px;opacity:.82;filter:blur(1px);transform:rotate(-35deg) scale(.88)}4%{left:-4px;top:0;opacity:1;filter:none;transform:rotate(-35deg) scale(.95)}5%{left:-4px;top:-4px;opacity:0;filter:none;transform:rotate(-35deg) scale(.35)}5.1%,100%{left:-4px;top:-4px;opacity:0}}
    @keyframes dotFromPlane{0%,4.7%{opacity:0;transform:scale(.3)}5.1%{opacity:1;transform:scale(1.5);box-shadow:0 0 16px rgba(0,114,229,.72)}6%,98%{opacity:1;transform:scale(1);box-shadow:0 0 0 3px rgba(0,114,229,.15)}98.1%,100%{opacity:0;transform:scale(.3)}}
    @keyframes egyptRouteDashes{to{background-position:-34px 0}}@keyframes locationRadar{0%{opacity:.75;transform:scale(.72)}100%{opacity:0;transform:scale(1.3)}}@keyframes activityBrightSwap{0%{opacity:.45;transform:translateY(5px)}100%{opacity:1;transform:none}}@keyframes activityBrightIcon{0%{opacity:.55;transform:scale(.72)}75%{transform:scale(1.08)}100%{opacity:1;transform:none}}@keyframes egyptCalmLight{0%{right:0;opacity:0;transform:scale(.72)}9%{right:0;opacity:.9;transform:scale(.88)}48%{opacity:1;transform:scale(1.08)}91%{right:calc(100% - 10px);opacity:.9;transform:scale(.9)}100%{right:calc(100% - 10px);opacity:0;transform:scale(.72)}}
    @media(max-width:900px){.search-panel{grid-template-columns:1fr 1fr}.hero-photo-label{position:relative;left:auto;bottom:auto;width:min(258px,calc(100% - 32px));min-height:62px;margin:14px auto 0;padding:6px 9px;grid-template-columns:29px 1fr 38px;gap:6px;border-radius:16px;background:linear-gradient(135deg,rgba(0,58,122,.96),rgba(0,38,84,.97));backdrop-filter:blur(11px);transform:none}.activity-symbol{width:37px;height:37px;border-radius:11px}.activity-symbol svg{width:20px;height:20px}.activity-pulse{width:27px;height:27px}.activity-pulse:before{width:10px;height:10px}.activity-pulse:after{inset:-5px}.activity-copy small{font-size:6px}.activity-copy strong{font-size:10px;line-height:1.2}.activity-copy em{font-size:6px}.activity-line{right:48px;left:12px;bottom:5px;height:1px}.activity-line:before{top:-4px;width:8px;height:8px}}
    @media(max-width:600px){header{top:0}.nav{width:calc(100% - 20px);height:60px;margin-top:8px;padding-inline:12px;border-radius:18px;gap:12px}.logo{gap:9px}.logo-mark{width:42px;height:42px;flex-basis:42px;border-radius:14px;font-size:23px}.logo-mark:after{width:11px;height:11px;border-width:3px;top:-3px;left:-3px}.logo-text strong{font-size:18px;line-height:1.05}.logo-text small{margin-top:3px;font-size:7px;letter-spacing:.55px}.hero{min-height:650px}.search-panel{width:calc(100% - 48px);max-width:380px;margin-right:auto;margin-bottom:9px;margin-left:auto;padding:6px;display:block;border-radius:16px}.hero-photo-label{width:min(292px,calc(100% - 24px));min-height:90px;padding:12px 12px 18px;grid-template-columns:32px 1fr 40px;gap:8px}.activity-symbol{width:40px;height:40px}.activity-pulse{width:30px;height:30px}.activity-copy strong{font-size:11px;line-height:1.35}.activity-copy em{font-size:7px;line-height:1.4}.activity-line{right:51px;left:14px;bottom:13px}}
    @media(prefers-reduced-motion:reduce){.logo-mark{color:#0072e5;background:linear-gradient(145deg,#ffcf43,#ff8b38);animation:none}.logo-mark:before{display:none}.logo-mark:after{opacity:1;transform:none;animation:none}}
    .search-panel{max-width:820px;grid-template-columns:1.3fr 1.25fr 1fr auto}
    .calendar-day.in-range{border-radius:7px;background:#e2f3fb;color:#005bb8}.calendar-day.range-start,.calendar-day.range-end{border-radius:9px;background:linear-gradient(135deg,#0072e5,#005ec2);color:#fff;box-shadow:0 5px 12px rgba(0,114,229,.25)}.calendar-hint{display:block;margin-bottom:7px;color:#607b91;font-size:8px;text-align:center}.calendar-hint b{color:#0072e5}
    .date-picker.floating-calendar{position:fixed;right:auto;bottom:auto;z-index:2500;transform:none}
    @media(max-width:600px){.date-picker.floating-calendar{right:auto;transform:none}}
    @media(max-width:900px){.search-panel{grid-template-columns:1fr 1fr}}
    /* Keep the rope endpoint fixed at the mascot's raised hand while the body sways. */
    /* Hidden temporarily; keep the activity card implementation for later reactivation. */
    .hero-photo-label{display:none!important}

/* =============================================================================
   ADDITIONS — everything above this line is the approved sheet, untouched.
   -----------------------------------------------------------------------------
   These exist because the approved page ran on mock data and had no dark mode,
   no autocomplete and no real result states. Nothing here restyles an approved
   component; it adds the parts a live engine needs.
   ========================================================================== */

/* The approved sheet has no [hidden] reset, and an author class beats the user
   agent rule — which is how the staging banner once rendered on every host. */
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- dark skin
   A second skin over the approved palette, never a second palette. The hero is
   a photograph under a blue wash and is already dark, so it is unchanged; only
   the grounds and the ink move. */
:root[data-theme="dark"] {
  --ink: #e8f1ff;
  --ink2: #6cb8ff;
  --muted: #93a2b5;
  --line: #22304a;
  --cream: #0c111b;
  --white: #131b29;
  --shadow: 0 22px 60px rgba(0, 0, 0, .5);
  color-scheme: dark;
}
:root[data-theme="dark"] body { background: #0c111b; color: var(--ink); }
:root[data-theme="dark"] main { background: linear-gradient(180deg, #0c111b, #0e1522 48%, #0c111b); }
:root[data-theme="dark"] .destinations { background: #0c111b; }
:root[data-theme="dark"] .offers { background: linear-gradient(135deg, #101828, #0e1a22 52%, #101726); border-color: #1c2942; }
:root[data-theme="dark"] .offers::after { background: none; }
:root[data-theme="dark"] .hotel-card,
:root[data-theme="dark"] .promise,
:root[data-theme="dark"] .chip { background: #131b29; border-color: #22304a; }
:root[data-theme="dark"] #why { background: linear-gradient(135deg, #101828, #0f1a22 55%, #101726); border-color: #22304a; }
:root[data-theme="dark"] .hero::after { background: linear-gradient(transparent, #0c111b); }
:root[data-theme="dark"] .nav { background: rgba(19, 27, 41, .62); border-color: rgba(255, 255, 255, .1); }
:root[data-theme="dark"] header.is-scrolled .nav { background: rgba(15, 21, 33, .97); }
:root[data-theme="dark"] .icon-btn,
:root[data-theme="dark"] .menu-btn,
:root[data-theme="dark"] .lang-toggle { background: #131b29; border-color: #22304a; color: var(--ink); }
:root[data-theme="dark"] .search-panel { background: #131b29; border-color: rgba(255, 255, 255, .12); }
:root[data-theme="dark"] .search-field input,
:root[data-theme="dark"] .search-field select { color: var(--ink); }
:root[data-theme="dark"] .drawer-panel { background: #0c111b; }

/* --------------------------------------------------------- shared controls
   The language switch is built by /shared/i18n and knows nothing about this
   page, so it is given the approved .icon-btn shape rather than its own. */
.lang-toggle {
  width: 43px; height: 43px;
  border: 1px solid var(--line); border-radius: 14px;
  background: #fff; color: var(--ink);
  font: 800 12px/1 var(--brand-font-display);
}
@media (max-width: 600px) { .lang-toggle { width: 42px; height: 42px; border-radius: 13px; } }

/* The approved nav used .logo/.logo-mark/.logo-text. The lockup now comes from
   /shared/brand as .brand-logo, so it inherits the approved spacing here and
   its own geometry — including the aeroplane — from the shared component. */
.nav .brand-logo { margin-inline-start: auto; }
.drawer-head .brand-logo,
.footer-about .brand-logo { margin: 0; }
.footer-about .brand-word strong, .footer-about .brand-word small { color: #fff; }

/* ------------------------------------------------------- the staging label */
.fixture-banner {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 8px 14px; background: #7c2d12; color: #fff;
  font-size: 12px; font-weight: 700; text-align: center;
}
.fixture-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--sun); }
body.has-fixture-banner header { top: 70px; }
@media (max-width: 600px) { body.has-fixture-banner header { top: 34px; } }

/* ------------------------------------------------------- the city combobox
   The approved page used a <datalist> of six hard-coded cities. This is the
   panel that replaces it, styled to sit under the approved search panel. */
.combo { position: relative; }
.combo-input { width: 100%; padding-inline-end: 42px; }
.combo-actions { position: absolute; inset-inline-end: 0; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 2px; }
.combo-check, .combo-clear { display: none; }
.combo-check { color: var(--aqua); }
.combo-clear { width: 22px; height: 22px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: var(--muted); }
.combo.is-selected .combo-check, .combo.is-selected .combo-clear { display: grid; }
.combo-panel {
  position: absolute; z-index: 40; inset-inline: -6px; top: calc(100% + 12px);
  max-height: 320px; overflow-y: auto; padding: 6px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--white);
  box-shadow: 0 24px 60px rgba(0, 34, 73, .26);
}
.combo-list { list-style: none; margin: 0; padding: 0; }
.combo-option { display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 11px; cursor: pointer; }
.combo-option:hover, .combo-option[aria-selected="true"] { background: rgba(0, 114, 229, .08); }
.combo-option .pin { flex: none; display: grid; place-items: center; color: var(--ink2); }
.combo-option .labels { flex: 1; min-width: 0; display: grid; gap: 2px; }
.combo-option .city { font-size: 13px; font-weight: 700; color: var(--ink); }
.combo-option .city mark { background: rgba(255, 210, 63, .5); color: inherit; border-radius: 3px; }
.combo-option .country { font-size: 10px; color: var(--muted); }
.combo-option .count { flex: none; font-size: 10px; font-weight: 700; color: var(--muted); }
.combo-note { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; color: var(--muted); font-size: 12px; }
.combo-note.is-error { color: #b3261e; }
.combo-note .retry { padding: 6px 12px; border: 1px solid currentColor; border-radius: 9px; background: transparent; color: inherit; font-size: 11px; font-weight: 700; }
.combo-skeleton { display: grid; gap: 8px; padding: 10px; }
.combo-skeleton .sk { height: 32px; border-radius: 9px; }
@media (max-width: 600px) { .combo-panel { position: fixed; inset-inline: 12px; top: auto; max-height: 46vh; } }

/* ------------------------------------------------------------ result states
   The approved page always had hotels because it invented them. A real engine
   has five states and must be able to show four of them honestly. */
.state-panel:empty { display: none; }
.state { display: grid; justify-items: center; gap: 8px; padding: 54px 20px; text-align: center; }
.state-icon { color: var(--ink2); opacity: .55; }
.state h2 { margin: 6px 0 0; font-size: 19px; color: var(--ink); }
.state p { margin: 0; max-width: 420px; color: var(--muted); font-size: 12px; line-height: 1.9; }
.secondary-button { margin-top: 10px; padding: 12px 26px; border: 1px solid var(--ink); border-radius: 12px; background: transparent; color: var(--ink); font-size: 12px; font-weight: 800; }
.secondary-button:hover { background: var(--ink); color: #fff; }
.secondary-button:disabled { opacity: .5; cursor: default; }
.pager { display: flex; justify-content: center; margin-top: 26px; }
.result-summary { color: var(--muted); font-size: 12px; font-weight: 700; }

.skeleton-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 25px; }
.skeleton-card { overflow: hidden; border-radius: 24px; background: #fff; box-shadow: 0 8px 30px rgba(8, 43, 43, .07); }
.sk { background: linear-gradient(90deg, var(--line) 25%, rgba(255, 255, 255, .5) 37%, var(--line) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; }
.sk-img { height: 235px; }
.sk-line { height: 12px; margin: 18px 20px 0; border-radius: 6px; }
.sk-line.short { width: 45%; margin-bottom: 22px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@media (max-width: 900px) { .skeleton-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .skeleton-grid { display: flex; overflow-x: auto; gap: 14px; } .skeleton-card { min-width: 86%; } }

/* The approved card carried a price block and a discount badge. The platform
   models neither, so those two elements are absent from the markup rather than
   filled with a number — every other part of the card is the approved one. */
.hotel-media .thumb-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink2); opacity: .3; font: 800 58px/1 var(--brand-font-display); }
.hotel-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; }
.hotel-facts .tag { padding: 4px 9px; border: 1px solid var(--line); border-radius: 50px; color: var(--muted); font-size: 10px; }
.destination-initial { position: absolute; inset: 0; display: grid; place-items: center; font: 800 72px/1 var(--brand-font-display); color: rgba(255, 255, 255, .22); }
.destination-state { color: var(--muted); font-size: 12px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
:focus-visible { outline: 2px solid var(--ink2); outline-offset: 2px; border-radius: 6px; }

/* Two selectors the approved sheet had no need of: it printed a numeric rating
   inside .rating and used <a> for footer links. */
.stars { color: #bd8712; font-size: 12px; letter-spacing: 1px; }
:root[data-theme="dark"] .stars { color: var(--sun); }
.link-button { padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: 10px; text-align: start; }
.footer-links .link-button:hover { color: #fff; }

/* --------------------------------------------- the approved travel fields
   Two dates share one approved .search-field slot, so the four-column
   composition is unchanged. */
.date-pair { display: flex; align-items: center; gap: 6px; }
.date-pair input { min-width: 0; flex: 1; }
.date-sep { flex: none; color: var(--muted); font-size: 11px; }
.search-field input[type="date"] { color: var(--ink); font-size: 12px; font-weight: 700; }
:root[data-theme="dark"] .search-field input[type="date"] { color-scheme: dark; }

/* "خيارات أكثر" — refinements, never a replacement for the travel fields. */
.filters-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 4px; padding: 8px 13px;
  border: 1px solid rgba(255, 255, 255, .4); border-radius: 50px;
  background: rgba(255, 255, 255, .12);
  color: #fff; font-size: 11px; font-weight: 700;
  backdrop-filter: blur(6px);
}
.filters-toggle:hover { background: rgba(255, 255, 255, .2); }
.advanced-filters {
  max-width: 820px; margin-top: 9px; padding: 10px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--white);
  box-shadow: 0 14px 34px rgba(0, 34, 73, .18);
}
.advanced-filters .search-field { border: 0; }

/* The catalogue-not-availability note. */
.results-note {
  margin: 18px 0 0;
  color: var(--muted); font-size: 11px; line-height: 1.8; text-align: center;
}

/* The card's action and what it opens. .view-offer is the approved button. */
.hotel-detail { display: grid; grid-template-columns: auto 1fr; gap: 7px 12px; margin: 12px 0 0; font-size: 10px; }
.hotel-detail dt { color: var(--muted); }
.hotel-detail dd { margin: 0; font-weight: 700; }