/*
|--------------------------------------------------------------------------
| File: assets/safaru-home/css/mobile-booking.css
| SAFARU Mobile Hero + Booking Sheet
|--------------------------------------------------------------------------
| Mobile-only additive rules. Desktop design remains unchanged.
*/
.mobile-header-actions,.mobile-nav-backdrop,.mobile-nav-drawer,.booking-sheet-backdrop,.booking-sheet{display:none}

@media (max-width:700px){
  /* Header: brand + Book Your Holiday + hamburger. */
  .site-header{width:calc(100% - 28px);height:70px;padding-top:0;align-items:center}
  .site-header .header-actions{display:none}
  .mobile-header-actions{display:flex;align-items:center;gap:8px;justify-self:end;position:relative;z-index:42}
  .mobile-book-button{border:1px solid rgba(255,255,255,.62);border-radius:999px;background:rgba(8,23,39,.22);color:#fff;padding:9px 11px;font:700 9px/1 Arial,sans-serif;white-space:nowrap;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
  .mobile-menu-button{width:35px;height:35px;border:1px solid rgba(255,255,255,.48);border-radius:50%;background:rgba(8,23,39,.22);padding:9px 8px;display:flex;flex-direction:column;justify-content:center;gap:4px}
  .mobile-menu-button span{display:block;width:100%;height:1px;background:#fff}

  /* Pull the story and wheel upward without changing their character. */
  .hero{min-height:900px}
  .hero__layout{width:calc(100% - 36px);padding:70px 0 0}
  .hero-copy{width:84%;max-width:350px}
  .hero-copy__kicker{margin-bottom:11px}
  .hero-copy h1{font-size:42px;margin-bottom:16px}
  .hero-copy p{font-size:13px;line-height:1.48;max-width:325px}
  .hero-copy__actions{margin-top:18px;gap:11px}
  .primary-cta{padding:13px 18px}
  .experience-stage{top:455px;width:410px;height:410px}
  .hero-footer{bottom:15px}

  /* Desktop compact search is intentionally removed on phones. */
  .hero-stay-search{display:none!important}

  /* Mobile navigation drawer. */
  .mobile-nav-backdrop{display:block;position:fixed;inset:0;z-index:80;background:rgba(2,10,16,.58);opacity:0;visibility:hidden;transition:.25s;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
  .mobile-nav-backdrop.is-open{opacity:1;visibility:visible}
  .mobile-nav-drawer{display:flex;position:fixed;z-index:81;top:0;right:0;bottom:0;width:min(82vw,330px);padding:25px 22px 28px;background:rgba(8,23,39,.94);color:#fff;transform:translateX(105%);transition:transform .32s cubic-bezier(.22,.78,.18,1);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);flex-direction:column}
  .mobile-nav-drawer.is-open{transform:translateX(0)}
  .mobile-nav-drawer__head{display:flex;justify-content:space-between;align-items:center;padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.16);font-size:10px;font-weight:800;letter-spacing:.18em}
  .mobile-nav-drawer__head button{width:36px;height:36px;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:transparent;color:#fff;font-size:24px;line-height:1}
  .mobile-nav-drawer nav{display:flex;flex-direction:column;padding:18px 0}
  .mobile-nav-drawer nav a{display:flex;justify-content:space-between;color:#fff;padding:14px 2px;border-bottom:1px solid rgba(255,255,255,.1);font:500 19px/1.2 Georgia,serif}
  .mobile-nav-drawer nav b{font:400 15px Arial,sans-serif;opacity:.55}
  .mobile-nav-drawer__actions{margin-top:auto;display:grid;gap:10px}
  .mobile-nav-drawer__actions a{display:block;border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:12px 15px;color:#fff;text-align:center;font-size:11px;font-weight:700}

  /* Semi-transparent half-screen booking sheet. */
  .booking-sheet-backdrop{display:block;position:fixed;inset:0;z-index:90;background:rgba(3,11,18,.58);opacity:0;visibility:hidden;transition:.25s;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
  .booking-sheet-backdrop.is-open{opacity:1;visibility:visible}
  .booking-sheet{display:block;position:fixed;z-index:91;left:0;right:0;bottom:0;min-height:54svh;max-height:76svh;padding:10px 20px 24px;border-radius:25px 25px 0 0;background:rgba(248,244,235,.96);color:#081727;transform:translateY(105%);transition:transform .36s cubic-bezier(.22,.78,.18,1);box-shadow:0 -20px 60px rgba(0,0,0,.28);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);overflow:auto}
  .booking-sheet.is-open{transform:translateY(0)}
  .booking-sheet__handle{width:44px;height:4px;border-radius:10px;background:rgba(8,23,39,.2);margin:0 auto 16px}
  .booking-sheet__head{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:16px}
  .booking-sheet__head span{display:block;font-size:9px;font-weight:800;letter-spacing:.2em;color:#b76232;margin-bottom:6px}
  .booking-sheet__head h2{margin:0;font:500 26px/1.05 Georgia,serif;letter-spacing:-.02em}
  .booking-sheet__head button{flex:0 0 36px;width:36px;height:36px;border:1px solid rgba(8,23,39,.18);border-radius:50%;background:transparent;color:#081727;font-size:23px;line-height:1}
  .booking-sheet__form{display:grid;gap:10px}
  .booking-sheet__form label{display:block;padding:10px 12px;border:1px solid rgba(8,23,39,.14);border-radius:13px;background:rgba(255,255,255,.62)}
  .booking-sheet__form label>span{display:block;margin-bottom:5px;font-size:8px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;opacity:.62}
  .booking-sheet__form input,.booking-sheet__form select{width:100%;height:26px;border:0;outline:0;background:transparent;color:#081727;font:600 13px Arial,sans-serif}
  .booking-sheet__dates{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .booking-sheet__submit{min-height:48px;border:0;border-radius:14px;background:#f6a45f;color:#081727;font-size:13px;font-weight:800}.booking-sheet__submit b{margin-left:14px;font-size:17px}
  body.safaru-overlay-open{overflow:hidden}
}

@media (max-width:420px){
  .brand__name{font-size:22px}.brand__tagline{font-size:6px}
  .mobile-book-button{padding:8px 9px;font-size:8px}
  .hero{min-height:875px}
  .hero__layout{padding-top:64px}
  .hero-copy h1{font-size:38px}
  .hero-copy p{font-size:12.5px}
  .experience-stage{top:435px;width:385px;height:385px}
  .booking-sheet{min-height:56svh}
}