/* Final mobile fit layer. Loaded last to neutralize older mobile overrides. */
@media (max-width: 760px) {
  :root {
    --mf-olive: #2f4a27;
    --mf-green: #5f7a3a;
    --mf-gold: #c9a45a;
    --mf-orange: #e8a12e;
    --mf-bg: #f7efe1;
    --mf-ivory: #fffdf7;
    --mf-card: #eef6ea;
    --mf-pool: #54bfd0;
    --mf-text: #1f2a1f;
    --mf-muted: #61715f;
    --mf-line: rgba(201, 164, 90, 0.24);
    --mf-shadow: 0 16px 36px rgba(47, 74, 39, 0.12);
  }

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

  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    background:
      radial-gradient(circle at 18% 8%, rgba(84, 191, 208, 0.16), transparent 34%),
      linear-gradient(180deg, #fffdf7 0%, #f7efe1 46%, #eef6ea 100%) !important;
    color: var(--mf-text) !important;
    scroll-padding-top: 92px !important;
  }

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

  img {
    max-width: 100% !important;
  }

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

  .container {
    padding-inline: 16px !important;
    margin-inline: auto !important;
  }

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

  .reveal,
  .reveal.in-view {
    opacity: 1 !important;
    transform: none !important;
  }

  .site-header,
  .site-header.scrolled {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    min-height: 64px !important;
    height: 64px !important;
    display: grid !important;
    grid-template-columns: 96px minmax(0, 1fr) 48px !important;
    align-items: center !important;
    gap: 8px !important;
    direction: ltr !important;
    padding: 8px !important;
    border-radius: 24px !important;
    background: rgba(255, 253, 247, 0.96) !important;
    border: 1px solid rgba(201, 164, 90, 0.28) !important;
    box-shadow: 0 18px 44px 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::before,
  .site-header::after {
    display: none !important;
    content: none !important;
  }

  .site-header .header-cta {
    grid-column: 1 !important;
    justify-self: start !important;
    width: 96px !important;
    min-width: 0 !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #e8a12e, #d88a1c) !important;
    color: #fffdf7 !important;
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    position: static !important;
    transform: none !important;
    box-shadow: 0 10px 22px rgba(232, 161, 46, 0.24) !important;
  }

  .site-header .brand,
  .site-header .brand:hover {
    grid-column: 2 !important;
    justify-self: center !important;
    width: 100% !important;
    height: 48px !important;
    min-width: 0 !important;
    max-width: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    overflow: visible !important;
  }

  .site-header .brand .brand-mark {
    width: min(158px, 46vw) !important;
    max-width: 46vw !important;
    height: 48px !important;
    flex: 0 1 158px !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;
    position: static !important;
    inset: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

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

  .site-header .nav-toggle {
    grid-column: 3 !important;
    justify-self: end !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    min-height: 48px !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 0 !important;
    margin: 0 !important;
    position: static !important;
    inset: auto !important;
    border-radius: 18px !important;
    border: 1px solid rgba(47, 74, 39, 0.18) !important;
    background: linear-gradient(180deg, #fffdf7, #eef6ea) !important;
    background-image: none !important;
    box-shadow: 0 10px 24px rgba(47, 74, 39, 0.1) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    z-index: 2 !important;
  }

  .site-header .nav-toggle span {
    display: block !important;
    width: 24px !important;
    height: 3px !important;
    border-radius: 999px !important;
    background: #17352d !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

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

  .main-nav {
    position: absolute !important;
    top: 74px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    display: none !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 12px !important;
    border-radius: 22px !important;
    background: rgba(255, 253, 247, 0.98) !important;
    border: 1px solid var(--mf-line) !important;
    box-shadow: var(--mf-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;
    border-radius: 16px !important;
    color: var(--mf-text) !important;
    background: #f8fbf2 !important;
    text-decoration: none !important;
  }

  .hero {
    min-height: auto !important;
    padding: 94px 0 28px !important;
    display: block !important;
    background: #eef6ea !important;
    color: var(--mf-text) !important;
    overflow: hidden !important;
  }

  .hero-bg {
    inset: 0 !important;
    opacity: 0.72 !important;
    background-position: center top !important;
    filter: saturate(1.04) contrast(1.02) !important;
  }

  .hero-overlay {
    inset: 0 !important;
    background:
      linear-gradient(180deg, rgba(238, 246, 234, 0.74) 0%, rgba(84, 191, 208, 0.34) 44%, rgba(247, 239, 225, 0.88) 100%),
      linear-gradient(90deg, rgba(47, 74, 39, 0.18), rgba(255, 253, 247, 0.16)) !important;
  }

  .flower-field {
    opacity: 0.45 !important;
    overflow: hidden !important;
    clip-path: inset(0) !important;
  }

  .flower-field span {
    width: 12px !important;
    height: 12px !important;
  }

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

  .hero-logo-showcase {
    display: none !important;
  }

  .hero-wide-logo {
    width: min(230px, 68vw) !important;
    max-width: 230px !important;
    height: auto !important;
    margin: 8px auto 14px !important;
    padding: 0 !important;
    display: block !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    position: relative !important;
    overflow: visible !important;
  }

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

  .hero .eyebrow {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto 10px !important;
    font-size: 0.84rem !important;
    line-height: 1.5 !important;
    color: var(--mf-gold) !important;
    text-shadow: none !important;
  }

  .hero h1 {
    width: 100% !important;
    max-width: 330px !important;
    margin: 0 auto 10px !important;
    font-size: 2.08rem !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
    color: #fffdf7 !important;
    text-align: center !important;
    white-space: normal !important;
    text-shadow: 0 12px 28px rgba(31, 42, 31, 0.34) !important;
  }

  .hero-content > p:not(.eyebrow),
  #heroSubtitle {
    width: min(100%, 336px) !important;
    max-width: 336px !important;
    margin: 0 auto !important;
    font-size: 0.98rem !important;
    line-height: 1.7 !important;
    font-weight: 600 !important;
    color: #fffdf7 !important;
    text-align: center !important;
    text-shadow: 0 10px 24px rgba(31, 42, 31, 0.32) !important;
    overflow-wrap: anywhere !important;
  }

  .hero-actions {
    width: min(100%, 358px) !important;
    max-width: 358px !important;
    margin: 20px auto 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .btn,
  .hero-actions .btn {
    width: 100% !important;
    min-height: 54px !important;
    padding: 0 16px !important;
    border-radius: 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    letter-spacing: 0 !important;
  }

  .btn-primary,
  .hero-actions .btn-primary {
    background: linear-gradient(135deg, #e8a12e, #d98c1d) !important;
    color: #fffdf7 !important;
    box-shadow: 0 14px 28px rgba(232, 161, 46, 0.28) !important;
  }

  .btn-glass,
  .hero-actions .btn-glass {
    background: rgba(255, 253, 247, 0.92) !important;
    color: var(--mf-olive) !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
  }

  .hero-metrics {
    width: min(100%, 358px) !important;
    max-width: 358px !important;
    margin: 16px auto 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    border-radius: 22px !important;
    background: rgba(255, 253, 247, 0.92) !important;
    border: 1px solid rgba(201, 164, 90, 0.22) !important;
    box-shadow: var(--mf-shadow) !important;
    color: var(--mf-text) !important;
    overflow: hidden !important;
  }

  .hero-metrics div {
    min-height: 72px !important;
    padding: 12px 7px !important;
    display: grid !important;
    align-content: center !important;
    gap: 4px !important;
    border-top: 0 !important;
    border-inline-start: 1px solid rgba(201, 164, 90, 0.18) !important;
  }

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

  .hero-metrics b {
    color: var(--mf-olive) !important;
    font-size: 0.86rem !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
  }

  .hero-metrics span {
    color: var(--mf-muted) !important;
    font-size: 0.67rem !important;
    line-height: 1.35 !important;
    margin: 0 !important;
  }

  .hero-luxury-tags {
    width: min(100%, 358px) !important;
    max-width: 358px !important;
    margin: 12px auto 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .hero-luxury-tags span {
    min-height: 40px !important;
    padding: 8px 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: rgba(255, 253, 247, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.78) !important;
    color: var(--mf-olive) !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

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

  .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 {
    margin-inline: auto !important;
    max-width: 340px !important;
    font-size: 1.72rem !important;
    line-height: 1.28 !important;
    letter-spacing: 0 !important;
    color: var(--mf-olive) !important;
  }

  .section-head p,
  .section-copy p,
  .booking-copy p,
  .contact-card p {
    max-width: 340px !important;
    margin-inline: auto !important;
    font-size: 0.96rem !important;
    line-height: 1.75 !important;
    color: var(--mf-muted) !important;
  }

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

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

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

  .feature-grid article {
    min-height: 132px !important;
    padding: 16px 12px !important;
    text-align: center !important;
  }

  .feature-grid article h3,
  .facility-card h3,
  .price-card h3 {
    font-size: 1rem !important;
    line-height: 1.35 !important;
    color: var(--mf-olive) !important;
  }

  .feature-grid article p {
    font-size: 0.82rem !important;
    line-height: 1.55 !important;
  }

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

  .facility-card .body,
  .review-card,
  .price-card,
  .price-overview,
  .contact-card,
  .booking-copy {
    padding: 18px !important;
  }

  .pricing {
    padding-top: 34px !important;
  }

  .pricing-head {
    margin-bottom: 12px !important;
  }

  .price-card {
    display: grid !important;
    gap: 14px !important;
  }

  .price-card.featured {
    background: linear-gradient(180deg, rgba(255, 253, 247, 0.96), rgba(255, 247, 226, 0.96)) !important;
    border-color: rgba(201, 164, 90, 0.36) !important;
  }

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

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

  .price-value,
  .price-card strong {
    color: var(--mf-olive) !important;
  }

  .price-columns,
  .eid-prices {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .price-period,
  .price-columns span,
  .eid-prices span {
    min-height: 58px !important;
    border-radius: 18px !important;
    padding: 10px 6px !important;
    background: var(--mf-card) !important;
    border: 1px solid rgba(47, 74, 39, 0.08) !important;
    text-align: center !important;
    font-size: 0.78rem !important;
    line-height: 1.45 !important;
  }

  .booking-section {
    padding-top: 34px !important;
  }

  .booking-layout {
    padding-inline: 16px !important;
  }

  .booking-copy {
    position: relative !important;
    top: auto !important;
  }

  .legend {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  .legend span {
    min-height: 38px !important;
    padding: 8px 11px !important;
    border-radius: 999px !important;
    background: rgba(255, 253, 247, 0.9) !important;
    font-size: 0.8rem !important;
  }

  .booking-panel {
    width: 100% !important;
    max-width: 100% !important;
  }

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

  .calendar-toolbar {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
  }

  .calendar-toolbar h3 {
    margin: 0 !important;
    text-align: center !important;
    font-size: 1.32rem !important;
    line-height: 1.3 !important;
    color: var(--mf-olive) !important;
  }

  .calendar-toolbar button {
    width: 44px !important;
    height: 44px !important;
    border-radius: 16px !important;
    background: #fffdf7 !important;
    border: 1px solid rgba(84, 191, 208, 0.22) !important;
    color: var(--mf-olive) !important;
  }

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

  .weekdays span {
    padding: 0 0 7px !important;
    text-align: center !important;
    font-size: 0.64rem !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    color: var(--mf-muted) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  .day-cell {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 50px !important;
    padding: 5px 2px !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 2px !important;
    border-radius: 14px !important;
    border: 1px solid rgba(47, 74, 39, 0.08) !important;
    background: #fffdf7 !important;
    color: var(--mf-text) !important;
    box-shadow: none !important;
  }

  .day-cell b {
    display: block !important;
    font-size: 0.88rem !important;
    line-height: 1 !important;
    color: var(--mf-text) !important;
  }

  .day-cell small {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 16px !important;
    padding: 2px 5px !important;
    border-radius: 999px !important;
    font-size: 0.54rem !important;
    line-height: 1 !important;
    font-weight: 800 !important;
  }

  .day-cell.available,
  .day-cell.status-available {
    background: #e6fbf5 !important;
    border-color: rgba(20, 184, 166, 0.34) !important;
  }

  .day-cell.partial,
  .day-cell.partially-booked,
  .day-cell.status-partial {
    background: #fff4d8 !important;
    border-color: rgba(232, 161, 46, 0.48) !important;
  }

  .day-cell.booked,
  .day-cell.status-booked,
  .day-cell.full {
    background: #fff0ef !important;
    border-color: rgba(214, 65, 65, 0.38) !important;
  }

  .gallery-tabs {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding: 2px 2px 8px !important;
    scrollbar-width: none !important;
  }

  .gallery-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .gallery-tabs button {
    flex: 0 0 auto !important;
    min-height: 40px !important;
    border-radius: 999px !important;
    padding: 0 14px !important;
    font-size: 0.86rem !important;
  }

  .gallery-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !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;
    border: 1px solid var(--mf-line) !important;
    box-shadow: 0 12px 24px rgba(47, 74, 39, 0.1) !important;
    background: linear-gradient(135deg, #fffdf7, #eef6ea) !important;
    overflow: hidden !important;
  }

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

  .gallery-item img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
  }

  body.modal-open {
    overflow: hidden !important;
    padding-bottom: 0 !important;
  }

  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;
    width: 100dvw !important;
    height: 100dvh !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.34) !important;
    backdrop-filter: blur(12px) !important;
  }

  .modal-card {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
    left: 10px !important;
    right: 10px !important;
    inset-inline: 10px !important;
    width: auto !important;
    max-width: none !important;
    height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px) !important;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px) !important;
    display: block !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    scroll-behavior: smooth !important;
    border-radius: 26px !important;
    background: rgba(255, 253, 247, 0.98) !important;
    border: 1px solid var(--mf-line) !important;
    box-shadow: 0 26px 70px rgba(31, 42, 31, 0.22) !important;
    transform: none !important;
  }

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

  .modal-close {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 18px) !important;
    left: 18px !important;
    right: auto !important;
    width: 44px !important;
    height: 44px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    z-index: 2600 !important;
    background: #fffdf7 !important;
    color: var(--mf-text) !important;
    border: 1px solid rgba(47, 74, 39, 0.12) !important;
  }

  .quick-booking-form {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 100% !important;
    padding: 58px 14px 26px !important;
    display: grid !important;
    gap: 12px !important;
    direction: rtl !important;
    overflow: visible !important;
  }

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

  .modal-date-state,
  .modal-price-row span,
  .field input,
  .field select,
  .field textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 50px !important;
    border-radius: 18px !important;
    background: var(--mf-card) !important;
    border: 1px solid rgba(47, 74, 39, 0.08) !important;
    color: var(--mf-text) !important;
  }

  .modal-price-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .modal-price-row span {
    flex: 1 1 150px !important;
    min-height: 46px !important;
    padding: 9px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    font-size: 0.82rem !important;
    line-height: 1.35 !important;
    text-align: center !important;
  }

  .modal-price-row span b,
  .modal-price-row span small {
    display: block !important;
    line-height: 1.2 !important;
  }

  .modal-shift-cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .modal-shift-card {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 112px !important;
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    grid-template-areas:
      "icon main"
      "icon price"
      "icon status" !important;
    align-items: center !important;
    gap: 6px 10px !important;
    padding: 13px !important;
    border-radius: 22px !important;
    background: rgba(238, 246, 234, 0.78) !important;
    border: 1px solid rgba(84, 191, 208, 0.22) !important;
    text-align: right !important;
    overflow: hidden !important;
  }

  .modal-shift-card.is-available {
    background: linear-gradient(145deg, rgba(238, 246, 234, 0.96), rgba(239, 255, 251, 0.94)) !important;
    border-color: rgba(84, 191, 208, 0.48) !important;
    box-shadow: inset 0 0 0 1px rgba(84, 191, 208, 0.12), 0 12px 28px rgba(47, 74, 39, 0.08) !important;
  }

  .modal-shift-card.is-booked,
  .modal-shift-card.disabled {
    background: linear-gradient(145deg, rgba(255, 244, 242, 0.96), rgba(255, 253, 247, 0.92)) !important;
    border-color: rgba(207, 74, 74, 0.28) !important;
    opacity: 0.78 !important;
  }

  .modal-shift-icon {
    grid-area: icon !important;
    width: 44px !important;
    height: 44px !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.08rem !important;
    line-height: 1.3 !important;
    color: var(--mf-olive) !important;
    white-space: normal !important;
  }

  .modal-shift-main small {
    display: block !important;
    direction: ltr !important;
    unicode-bidi: isolate !important;
    font-size: 0.82rem !important;
    color: var(--mf-muted) !important;
  }

  .modal-shift-price {
    grid-area: price !important;
    justify-self: start !important;
    max-width: 100% !important;
    padding: 6px 9px !important;
    border-radius: 999px !important;
    background: rgba(95, 122, 58, 0.12) !important;
    color: var(--mf-green) !important;
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

  .modal-shift-card.is-booked .modal-shift-price,
  .modal-shift-card.disabled .modal-shift-price {
    color: #9c2f2f !important;
    background: rgba(207, 74, 74, 0.10) !important;
  }

  .modal-shift-status {
    grid-area: status !important;
    justify-self: start !important;
    max-width: 100% !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }

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

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

  .field {
    display: grid !important;
    gap: 6px !important;
  }

  .field label {
    font-size: 0.9rem !important;
    color: var(--mf-text) !important;
  }

  .field textarea {
    min-height: 96px !important;
    resize: vertical !important;
  }

  .floating-whatsapp {
    display: none !important;
  }

  .mobile-bottom-bar {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
    width: auto !important;
    max-width: none !important;
    min-height: 60px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    padding: 7px !important;
    border-radius: 24px !important;
    background: rgba(255, 253, 247, 0.96) !important;
    border: 1px solid var(--mf-line) !important;
    box-shadow: var(--mf-shadow) !important;
    backdrop-filter: blur(16px) !important;
    z-index: 1150 !important;
  }

  .mobile-bottom-bar a {
    width: 100% !important;
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 18px !important;
    background: var(--mf-card) !important;
    border: 1px solid rgba(47, 74, 39, 0.08) !important;
    color: var(--mf-olive) !important;
    font-size: 0.84rem !important;
    font-weight: 800 !important;
    text-decoration: none !important;
  }

  .mobile-bottom-bar a:last-child {
    background: linear-gradient(135deg, #20c7b3, #12a391) !important;
    color: #fffdf7 !important;
    border-color: transparent !important;
  }
}

@media (max-width: 380px) {
  .site-header,
  .site-header.scrolled {
    left: 10px !important;
    right: 10px !important;
    grid-template-columns: 86px minmax(0, 1fr) 46px !important;
    gap: 6px !important;
    padding: 7px !important;
  }

  .site-header .header-cta {
    width: 86px !important;
    height: 46px !important;
    font-size: 0.8rem !important;
  }

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

  .site-header .brand .brand-mark {
    width: min(138px, 43vw) !important;
    max-width: 43vw !important;
    height: 46px !important;
    flex: 0 1 138px !important;
  }

  .hero {
    padding-top: 90px !important;
  }

  .hero-wide-logo {
    width: min(210px, 64vw) !important;
  }

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

  #heroSubtitle {
    font-size: 0.9rem !important;
  }

  .container,
  .hero-content,
  .booking-layout {
    padding-inline: 12px !important;
  }

  .day-cell {
    min-height: 47px !important;
    border-radius: 13px !important;
  }

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

  .day-cell small {
    font-size: 0.5rem !important;
    padding-inline: 4px !important;
  }

  .feature-grid {
    gap: 10px !important;
  }

  .modal-card {
    left: 8px !important;
    right: 8px !important;
    inset-inline: 8px !important;
    height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 14px) !important;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 14px) !important;
  }
}

/* Booking modal guard for mobile browsers that report a wider layout viewport. */
@media (max-width: 1200px), (max-device-width: 1200px) {
  .booking-modal.active,
  .booking-modal:target {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    display: block !important;
    padding: 0 !important;
    overflow: hidden !important;
    z-index: 2600 !important;
  }

  .booking-modal.active .modal-card,
  .booking-modal:target .modal-card {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 8px) !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 8px) !important;
    left: 10px !important;
    right: 10px !important;
    inset-inline: 10px !important;
    width: auto !important;
    max-width: none !important;
    height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px) !important;
    max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 16px) !important;
    transform: none !important;
    margin: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
  }

  .booking-modal.active .modal-close,
  .booking-modal:target .modal-close {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 18px) !important;
    left: 18px !important;
    right: auto !important;
    z-index: 2700 !important;
  }
}

/* Compact date booking card: opens instantly from calendar, then expands only after choosing a free shift. */
.booking-modal.compact-booking.active:not(.form-open) {
  display: grid !important;
  place-items: center !important;
  padding: 16px !important;
  background: rgba(5, 15, 11, 0.48) !important;
}

.booking-modal.compact-booking.active:not(.form-open) .modal-backdrop {
  background:
    radial-gradient(circle at 22% 18%, rgba(84, 191, 208, 0.18), transparent 260px),
    radial-gradient(circle at 82% 10%, rgba(201, 164, 90, 0.18), transparent 280px),
    rgba(5, 12, 9, 0.78) !important;
  backdrop-filter: blur(18px) saturate(1.05) !important;
}

.booking-modal.compact-booking.active:not(.form-open) .modal-card {
  width: min(560px, calc(100vw - 28px)) !important;
  max-width: min(560px, calc(100vw - 28px)) !important;
  height: auto !important;
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 86px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  display: block !important;
  border-radius: 30px !important;
  background:
    linear-gradient(150deg, rgba(9, 42, 33, 0.98), rgba(13, 57, 45, 0.98)),
    #092a21 !important;
  border: 1px solid rgba(201, 164, 90, 0.34) !important;
  box-shadow: 0 30px 86px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 253, 247, 0.08) !important;
}

.booking-modal.compact-booking.active:not(.form-open) .modal-media,
.booking-modal.compact-booking.active:not(.form-open) .modal-price-row,
.booking-modal.compact-booking.active:not(.form-open) .modal-date-row .field,
.booking-modal.compact-booking.active:not(.form-open) .modal-form-detail {
  display: none !important;
}

.booking-modal.compact-booking.active:not(.form-open) .modal-close {
  position: absolute !important;
  top: 16px !important;
  left: 16px !important;
  right: auto !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 50% !important;
  background: rgba(255, 253, 247, 0.94) !important;
  color: #092a21 !important;
  border: 0 !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22) !important;
  z-index: 3 !important;
}

.booking-modal.compact-booking.active:not(.form-open) .quick-booking-form {
  min-height: 0 !important;
  padding: 42px 28px 28px !important;
  display: grid !important;
  gap: 14px !important;
  color: #fffdf7 !important;
}

.booking-modal.compact-booking.active:not(.form-open) .quick-booking-form .eyebrow {
  justify-self: center !important;
  margin: 0 !important;
  color: #c9a45a !important;
  font-size: 0.86rem !important;
}

.booking-modal.compact-booking.active:not(.form-open) .quick-booking-form h2 {
  margin: 0 42px 0 0 !important;
  color: #fffdf7 !important;
  font-size: clamp(1.55rem, 6vw, 2.05rem) !important;
  line-height: 1.2 !important;
  text-align: center !important;
  letter-spacing: 0 !important;
}

.booking-modal.compact-booking.active:not(.form-open) .modal-date-row {
  display: block !important;
}

.booking-modal.compact-booking.active:not(.form-open) .modal-date-state {
  min-height: 44px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 10px 14px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(201, 164, 90, 0.18) !important;
  background: rgba(255, 253, 247, 0.08) !important;
  color: rgba(255, 253, 247, 0.76) !important;
  font-size: 0.92rem !important;
  line-height: 1.55 !important;
  text-align: center !important;
}

.booking-modal.compact-booking.active:not(.form-open) .modal-date-state.partial {
  color: #f2d58c !important;
  background: rgba(232, 161, 46, 0.12) !important;
  border-color: rgba(232, 161, 46, 0.32) !important;
}

.booking-modal.compact-booking.active:not(.form-open) .modal-date-state.full {
  color: #ffb7ad !important;
  background: rgba(201, 77, 77, 0.12) !important;
  border-color: rgba(201, 77, 77, 0.30) !important;
}

.booking-modal.compact-booking.active:not(.form-open) .modal-shift-cards {
  display: grid !important;
  gap: 12px !important;
  margin-top: 6px !important;
}

.booking-modal.compact-booking.active:not(.form-open) .modal-shift-card {
  min-height: 92px !important;
  grid-template-columns: 48px minmax(0, 1fr) auto !important;
  grid-template-areas:
    "icon main status"
    "icon main price" !important;
  padding: 14px 16px !important;
  border-radius: 24px !important;
  background: rgba(255, 253, 247, 0.055) !important;
  border: 1px solid rgba(255, 253, 247, 0.10) !important;
  box-shadow: inset 0 1px 0 rgba(255, 253, 247, 0.055) !important;
  opacity: 1 !important;
}

.booking-modal.compact-booking.active:not(.form-open) .modal-shift-card.is-available {
  background: linear-gradient(145deg, rgba(10, 72, 57, 0.98), rgba(8, 50, 40, 0.98)) !important;
  border-color: rgba(84, 191, 208, 0.42) !important;
}

.booking-modal.compact-booking.active:not(.form-open) .modal-shift-card.active {
  border-color: rgba(201, 164, 90, 0.58) !important;
  box-shadow: 0 0 0 3px rgba(201, 164, 90, 0.13), inset 0 1px 0 rgba(255, 253, 247, 0.08) !important;
}

.booking-modal.compact-booking.active:not(.form-open) .modal-shift-card.disabled {
  background: rgba(255, 253, 247, 0.045) !important;
  border-color: rgba(255, 253, 247, 0.08) !important;
  opacity: 0.42 !important;
}

.booking-modal.compact-booking.active:not(.form-open) .modal-shift-icon {
  grid-area: icon !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 16px !important;
  background: rgba(201, 164, 90, 0.13) !important;
  color: #f0cc79 !important;
  border: 1px solid rgba(201, 164, 90, 0.22) !important;
  display: grid !important;
  place-items: center !important;
}

.booking-modal.compact-booking.active:not(.form-open) .modal-shift-main b {
  color: #fffdf7 !important;
  font-size: 1.2rem !important;
}

.booking-modal.compact-booking.active:not(.form-open) .modal-shift-main small {
  color: rgba(255, 253, 247, 0.56) !important;
}

.booking-modal.compact-booking.active:not(.form-open) .modal-shift-price {
  background: rgba(95, 122, 58, 0.28) !important;
  color: #b8df66 !important;
  font-weight: 900 !important;
}

.booking-modal.compact-booking.active:not(.form-open) .modal-shift-status {
  background: linear-gradient(135deg, #e8a12e, #c9a45a) !important;
  color: #17352d !important;
  font-weight: 900 !important;
  box-shadow: 0 12px 26px rgba(232, 161, 46, 0.24) !important;
}

.booking-modal.compact-booking.active:not(.form-open) .modal-shift-card.disabled .modal-shift-status {
  background: rgba(255, 253, 247, 0.10) !important;
  color: rgba(255, 253, 247, 0.78) !important;
  box-shadow: none !important;
}

.booking-modal.compact-booking.active:not(.form-open) .modal-inquiry-card {
  min-height: 56px !important;
  margin-top: 4px !important;
  border-radius: 20px !important;
  border: 1px solid rgba(255, 253, 247, 0.13) !important;
  background: rgba(255, 253, 247, 0.08) !important;
  color: #fffdf7 !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
}

.booking-modal.compact-booking.form-open .modal-card {
  scroll-behavior: smooth !important;
}

.booking-modal.compact-booking.form-open .modal-media,
.booking-modal.compact-booking.form-open .modal-price-row,
.booking-modal.compact-booking.form-open .modal-inquiry-card,
.booking-modal.compact-booking.form-open .modal-shift-card:not(.active) {
  display: none !important;
}

.booking-modal.compact-booking.form-open .quick-booking-form {
  gap: 10px !important;
}

.booking-modal.compact-booking.form-open .modal-shift-cards {
  display: block !important;
}

.booking-modal.compact-booking.form-open .modal-shift-card.active {
  min-height: 84px !important;
  padding: 12px 14px !important;
  grid-template-columns: 44px minmax(0, 1fr) auto !important;
  grid-template-areas:
    "icon main status"
    "icon main price" !important;
  border-radius: 22px !important;
}

.booking-modal.compact-booking.form-open .modal-shift-main b {
  font-size: 1.12rem !important;
}

@media (max-width: 520px), (max-device-width: 520px) {
  .booking-modal.compact-booking.active:not(.form-open) {
    padding: 10px !important;
  }

  .booking-modal.compact-booking.active:not(.form-open) .modal-card {
    width: min(370px, calc(100vw - 20px)) !important;
    max-width: min(370px, calc(100vw - 20px)) !important;
    border-radius: 28px !important;
  }

  .booking-modal.compact-booking.active:not(.form-open) .quick-booking-form {
    padding: 40px 18px 20px !important;
    gap: 12px !important;
  }

  .booking-modal.compact-booking.active:not(.form-open) .quick-booking-form h2 {
    margin-inline: 36px 0 !important;
  }

  .booking-modal.compact-booking.active:not(.form-open) .modal-shift-card {
    min-height: 78px !important;
    padding: 10px !important;
    gap: 4px 8px !important;
    grid-template-columns: 40px minmax(0, 1fr) auto !important;
    grid-template-areas:
      "icon main status"
      "icon main price" !important;
  }

  .booking-modal.compact-booking.active:not(.form-open) .modal-shift-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 14px !important;
  }

  .booking-modal.compact-booking.active:not(.form-open) .modal-shift-main {
    gap: 2px !important;
  }

  .booking-modal.compact-booking.active:not(.form-open) .modal-shift-main b {
    font-size: 1.04rem !important;
    line-height: 1.22 !important;
  }

  .booking-modal.compact-booking.active:not(.form-open) .modal-shift-main small {
    font-size: 0.76rem !important;
  }

  .booking-modal.compact-booking.active:not(.form-open) .modal-shift-price,
  .booking-modal.compact-booking.active:not(.form-open) .modal-shift-status {
    padding: 5px 8px !important;
    font-size: 0.7rem !important;
  }
}