/* Mobile Premium Nature UI - final mobile layer */
@media (max-width: 760px) {
  :root {
    --m-olive: #2f4a27;
    --m-green: #5f7a3a;
    --m-gold: #c9a45a;
    --m-orange: #e8a12e;
    --m-bg: #f7efe1;
    --m-ivory: #fffdf7;
    --m-card: #eef6ea;
    --m-pool: #54bfd0;
    --m-text: #1f2a1f;
    --m-muted: #64705e;
    --m-line: rgba(201, 164, 90, 0.24);
    --m-shadow: 0 18px 42px rgba(47, 74, 39, 0.12);
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box !important;
    min-width: 0;
  }

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    background: linear-gradient(180deg, #fffdf7 0%, #f7efe1 42%, #eef6ea 100%) !important;
    color: var(--m-text) !important;
    scroll-padding-top: 96px !important;
  }

  body {
    padding-bottom: 92px !important;
    font-family: "Tajawal", "Cairo", system-ui, sans-serif !important;
  }

  .page-shell,
  main,
  .section,
  .container {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .container {
    padding-inline: 14px !important;
    margin-inline: 0 !important;
  }

  .section:not(.hero) {
    padding: 34px 0 !important;
  }

  /* Header */
  .site-header,
  .site-header.scrolled {
    position: fixed !important;
    inset: 14px 14px auto 14px !important;
    width: auto !important;
    max-width: none !important;
    height: 70px !important;
    min-height: 70px !important;
    display: grid !important;
    grid-template-columns: 92px minmax(0, 1fr) 52px !important;
    align-items: center !important;
    gap: 8px !important;
    direction: ltr !important;
    padding: 8px 10px !important;
    border-radius: 24px !important;
    background: rgba(255, 253, 247, 0.94) !important;
    border: 1px solid rgba(201, 164, 90, 0.28) !important;
    box-shadow: 0 18px 42px rgba(47, 74, 39, 0.16) !important;
    backdrop-filter: blur(18px) saturate(1.1) !important;
    transform: none !important;
    overflow: visible !important;
    z-index: 1200 !important;
  }

  .site-header::after,
  .site-header::before {
    display: none !important;
  }

  .site-header .header-cta {
    grid-column: 1 !important;
    width: 92px !important;
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 !important;
    border-radius: 18px !important;
    font-size: 0.9rem !important;
    line-height: 1 !important;
    justify-self: start !important;
    position: static !important;
    transform: none !important;
  }

  .site-header .brand,
  .site-header .brand:hover {
    grid-column: 2 !important;
    width: 100% !important;
    height: 52px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    position: static !important;
    transform: none !important;
    background: transparent !important;
    overflow: hidden !important;
  }

  .site-header .brand .brand-mark {
    width: min(154px, 100%) !important;
    height: 52px !important;
    display: block !important;
    position: static !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .site-header .brand .brand-mark img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  .site-header .brand > span:not(.brand-mark) {
    display: none !important;
  }

  .site-header .nav-toggle {
    grid-column: 3 !important;
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    min-height: 52px !important;
    display: inline-flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    justify-self: end !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    border-radius: 18px !important;
    background:
      linear-gradient(var(--m-text), var(--m-text)) center 17px / 22px 2px no-repeat,
      linear-gradient(var(--m-text), var(--m-text)) center 25px / 22px 2px no-repeat,
      linear-gradient(var(--m-text), var(--m-text)) center 33px / 22px 2px no-repeat,
      var(--m-ivory) !important;
    border: 1px solid var(--m-line) !important;
    box-shadow: 0 10px 24px rgba(47, 74, 39, 0.1) !important;
    transform: none !important;
  }

  .site-header .nav-toggle span {
    display: none !important;
    width: 22px !important;
    height: 2px !important;
    border-radius: 99px !important;
    background: var(--m-text) !important;
  }

  .mobile-menu-button,
  .site-header .mobile-menu-button {
    display: none !important;
  }

  .main-nav {
    position: absolute !important;
    top: 82px !important;
    inset-inline: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: none !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 12px !important;
    background: rgba(255, 253, 247, 0.98) !important;
    border: 1px solid var(--m-line) !important;
    border-radius: 22px !important;
    box-shadow: var(--m-shadow) !important;
  }

  .main-nav.open {
    display: grid !important;
  }

  .main-nav a {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--m-text) !important;
    background: #f8fbf2 !important;
    border-radius: 16px !important;
  }

  /* Hero */
  .hero {
    min-height: auto !important;
    padding: 104px 0 34px !important;
    display: block !important;
    background: var(--m-bg) !important;
    overflow: hidden !important;
  }

  .hero-bg,
  .hero-overlay {
    inset: 0 !important;
    border-radius: 0 !important;
  }

  .hero-bg {
    opacity: 0.86 !important;
    background-position: center top !important;
  }

  .hero-overlay {
    background:
      linear-gradient(180deg, rgba(255, 253, 247, 0.4), rgba(238, 246, 234, 0.68)),
      linear-gradient(90deg, rgba(84, 191, 208, 0.34), rgba(247, 239, 225, 0.36)) !important;
  }

  .hero-content {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 16px !important;
    transform: none !important;
    text-align: center !important;
    direction: rtl !important;
    overflow: hidden !important;
  }

  .hero-wide-logo {
    width: 238px !important;
    max-width: 72vw !important;
    height: auto !important;
    margin: 12px auto 16px !important;
    padding: 0 !important;
    display: block !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .hero-wide-logo img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }

  .hero .eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 12px !important;
    font-size: 0.9rem !important;
    color: #fff4cf !important;
    text-shadow: 0 8px 20px rgba(47, 74, 39, 0.28) !important;
  }

  .hero h1 {
    display: block !important;
    width: 100% !important;
    max-width: 300px !important;
    margin: 0 auto 10px !important;
    font-size: 2rem !important;
    line-height: 1.18 !important;
    font-weight: 800 !important;
    text-align: center !important;
    white-space: nowrap !important;
    color: #fffdf7 !important;
    text-shadow: 0 14px 30px rgba(31, 42, 31, 0.32) !important;
    overflow: visible !important;
  }

  .hero-content > p:not(.eyebrow),
  #heroSubtitle {
    display: block !important;
    width: 100% !important;
    max-width: 315px !important;
    margin: 0 auto !important;
    font-size: 0.92rem !important;
    line-height: 1.75 !important;
    font-weight: 500 !important;
    text-align: center !important;
    color: #fffdf7 !important;
    text-shadow: 0 10px 24px rgba(31, 42, 31, 0.3) !important;
    overflow-wrap: normal !important;
  }

  .hero-actions {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin: 24px 0 !important;
  }

  .hero-actions .btn,
  .btn {
    width: 100% !important;
    min-height: 54px !important;
    border-radius: 18px !important;
    font-size: 1rem !important;
  }

  .hero-metrics {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    margin: 0 !important;
    border-radius: 24px !important;
    background: rgba(255, 253, 247, 0.9) !important;
    box-shadow: var(--m-shadow) !important;
    overflow: hidden !important;
  }

  .hero-metrics div {
    padding: 18px 14px !important;
    border-top: 1px solid var(--m-line) !important;
    border-inline-start: 0 !important;
  }

  .hero-metrics div:first-child {
    border-top: 0 !important;
  }

  .hero-luxury-tags {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 18px 0 0 !important;
    padding: 0 2px !important;
  }

  .hero-luxury-tags span {
    width: 100% !important;
    max-width: 100% !important;
    padding: 9px 8px !important;
    border-radius: 999px !important;
    text-align: center !important;
    white-space: nowrap !important;
    font-size: 0.8rem !important;
    color: var(--m-olive) !important;
    background: rgba(255, 253, 247, 0.92) !important;
    border: 1px solid rgba(255, 255, 255, 0.74) !important;
  }

  .hero-photo-rail,
  .scroll-cue {
    display: none !important;
  }

  /* Cards and sections */
  .section-head,
  .section-copy,
  .booking-copy {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }

  .section-head h2,
  .section-copy h2,
  .booking-copy h2,
  .contact-card h2 {
    font-size: 1.95rem !important;
    line-height: 1.3 !important;
    color: var(--m-olive) !important;
  }

  .split,
  .booking-layout,
  .cards-grid,
  .feature-grid,
  .pricing-grid,
  .reviews-grid,
  .contact-card {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .feature-grid article,
  .facility-card,
  .price-card,
  .review-card,
  .calendar-card,
  .booking-copy,
  .contact-card {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 24px !important;
    background: rgba(255, 253, 247, 0.9) !important;
    border: 1px solid var(--m-line) !important;
    box-shadow: var(--m-shadow) !important;
    overflow: hidden !important;
  }

  .facility-card .image {
    height: 178px !important;
    margin: 10px 10px 0 !important;
    border-radius: 20px !important;
  }

  .facility-card .body,
  .feature-grid article,
  .review-card {
    padding: 18px !important;
  }

  /* Calendar */
  .booking-copy {
    position: relative !important;
    top: auto !important;
    padding: 22px 18px !important;
  }

  .legend {
    justify-content: center !important;
  }

  .legend span {
    min-height: 40px !important;
    padding: 8px 12px !important;
    font-size: 0.84rem !important;
  }

  .calendar-card {
    padding: 16px !important;
  }

  .calendar-toolbar {
    gap: 10px !important;
  }

  .calendar-toolbar h3 {
    font-size: 1.35rem !important;
  }

  .calendar-toolbar button {
    width: 44px !important;
    height: 44px !important;
    border-radius: 16px !important;
  }

  .weekdays,
  .calendar-grid {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
  }

  .weekdays span {
    font-size: 0.66rem !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  .day-cell {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 54px !important;
    padding: 5px 2px !important;
    border-radius: 14px !important;
  }

  .day-cell b {
    font-size: 0.92rem !important;
  }

  .day-cell small {
    font-size: 0.56rem !important;
    padding: 3px 5px !important;
  }

  /* Gallery */
  .gallery-tabs {
    display: flex !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    padding-bottom: 4px !important;
  }

  .gallery-tabs button {
    flex: 0 0 auto !important;
  }

  .gallery-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .gallery-item,
  .gallery-item:nth-child(1),
  .gallery-item:nth-child(6),
  .gallery-item:nth-child(7) {
    grid-column: auto !important;
    width: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 20px !important;
    background: linear-gradient(135deg, #fffdf7, #eef6ea) !important;
    border: 1px solid var(--m-line) !important;
    box-shadow: var(--m-shadow) !important;
  }

  .gallery-item img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    background: linear-gradient(135deg, #fffdf7, #eef6ea) !important;
  }

  .gallery-item:first-child {
    grid-column: span 2 !important;
    aspect-ratio: 1.75 / 1 !important;
  }

  /* Pricing */
  .price-overview,
  .price-card {
    padding: 18px !important;
  }

  .price-card-head {
    display: grid !important;
    justify-items: center !important;
    text-align: center !important;
    gap: 10px !important;
  }

  .price-card-head h3 {
    font-size: 1.55rem !important;
  }

  .price-columns,
  .eid-prices,
  .modal-price-row,
  .modal-actions,
  .form-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .price-period,
  .price-columns span,
  .eid-prices span {
    border-radius: 20px !important;
  }

  /* Booking modal */
  body.modal-open .site-header,
  body.modal-open .mobile-bottom-bar,
  body.modal-open .floating-whatsapp {
    display: none !important;
  }

  .booking-modal,
  .booking-modal.active {
    position: fixed !important;
    inset: 0 !important;
    display: none !important;
    padding: 0 !important;
    overflow: hidden !important;
    z-index: 2200 !important;
  }

  .booking-modal.active {
    display: block !important;
  }

  .modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(31, 42, 31, 0.42) !important;
    backdrop-filter: blur(12px) !important;
  }

  .modal-card {
    position: fixed !important;
    inset: 12px !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    display: block !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    border-radius: 28px !important;
    background: rgba(255, 253, 247, 0.98) !important;
    border: 1px solid var(--m-line) !important;
    box-shadow: 0 28px 70px rgba(31, 42, 31, 0.24) !important;
    transform: none !important;
  }

  .modal-media {
    display: none !important;
  }

  .modal-close {
    position: fixed !important;
    top: 24px !important;
    left: 24px !important;
    right: auto !important;
    width: 46px !important;
    height: 46px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    z-index: 2600 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .quick-booking-form {
    width: 100% !important;
    max-width: 100% !important;
    padding: 58px 16px 96px !important;
    display: grid !important;
    gap: 12px !important;
    direction: rtl !important;
    overflow: hidden !important;
  }

  .quick-booking-form h2 {
    max-width: 100% !important;
    margin: 0 !important;
    font-size: 1.78rem !important;
    line-height: 1.25 !important;
    text-align: center !important;
    white-space: normal !important;
    color: var(--m-olive) !important;
  }

  .modal-price-row span {
    min-height: 62px !important;
    border-radius: 18px !important;
    background: var(--m-card) !important;
  }

  .field,
  .field input,
  .field select,
  .field textarea,
  .modal-date-state {
    width: 100% !important;
    max-width: 100% !important;
  }

  .field input,
  .field select,
  .field textarea,
  .modal-date-state {
    min-height: 52px !important;
    border-radius: 18px !important;
    background: var(--m-ivory) !important;
    color: var(--m-text) !important;
  }

  .modal-shift-cards {
    display: grid !important;
    gap: 12px !important;
  }

  .modal-shift-card {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 146px !important;
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    grid-template-areas:
      "icon main"
      "icon price"
      "icon status" !important;
    align-items: center !important;
    gap: 8px 12px !important;
    padding: 16px !important;
    border-radius: 22px !important;
    text-align: right !important;
    overflow: hidden !important;
  }

  .modal-shift-icon {
    grid-area: icon !important;
    width: 50px !important;
    height: 50px !important;
    position: static !important;
    align-self: start !important;
  }

  .modal-shift-main {
    grid-area: main !important;
    display: grid !important;
    gap: 4px !important;
    padding: 0 !important;
    text-align: right !important;
  }

  .modal-shift-main b {
    display: block !important;
    font-size: 1.16rem !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    color: var(--m-olive) !important;
  }

  .modal-shift-main small {
    display: block !important;
    direction: ltr !important;
    unicode-bidi: isolate !important;
    font-size: 0.86rem !important;
    line-height: 1.4 !important;
    color: var(--m-muted) !important;
  }

  .modal-shift-price {
    grid-area: price !important;
    justify-self: start !important;
    max-width: 100% !important;
    white-space: nowrap !important;
  }

  .modal-shift-status {
    grid-area: status !important;
    justify-self: start !important;
    max-width: 100% !important;
    white-space: nowrap !important;
  }

  .modal-inquiry-card {
    width: 100% !important;
    min-height: 54px !important;
    border-radius: 18px !important;
  }

  /* Bottom actions */
  .floating-whatsapp {
    display: none !important;
  }

  .mobile-bottom-bar {
    position: fixed !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 12px !important;
    width: auto !important;
    max-width: none !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    padding: 8px !important;
    border-radius: 24px !important;
    background: rgba(255, 253, 247, 0.94) !important;
    border: 1px solid var(--m-line) !important;
    box-shadow: var(--m-shadow) !important;
    backdrop-filter: blur(16px) !important;
    z-index: 1150 !important;
  }

  .mobile-bottom-bar a {
    width: 100% !important;
    min-height: 46px !important;
    border-radius: 18px !important;
    font-size: 0.84rem !important;
    text-decoration: none !important;
  }
}

@media (max-width: 360px) {
  .site-header,
  .site-header.scrolled {
    grid-template-columns: 82px minmax(0, 1fr) 48px !important;
    gap: 6px !important;
  }

  .site-header .header-cta {
    width: 82px !important;
    font-size: 0.82rem !important;
  }

  .site-header .nav-toggle {
    width: 48px !important;
    min-width: 48px !important;
  }

  .hero h1 {
    font-size: 1.78rem !important;
  }

  .hero-content > p:not(.eyebrow),
  #heroSubtitle {
    font-size: 0.86rem !important;
  }

  .modal-shift-card {
    grid-template-columns: 48px minmax(0, 1fr) !important;
    padding: 14px !important;
  }
}