/* T178 — iPhone/Safari visual stabilization.
   Scope: homepage atmosphere card, /hotel mobile background, Paymera marks.
   Desktop layouts and payment/business logic are intentionally untouched. */

/* --------------------------------------------------------------------------
   1) Homepage mobile: keep the atmosphere feature as ONE clean image + panel.
      T147 glass parity made the copy panel transparent enough for the shared
      page scene to show through, which reads like a second blurred image on
      iPhone. Preserve the gallery below exactly as-is. */
@media (max-width: 920px) {
  body.nile-home-active #home .home-after-hero-content > .atmosphere-highlight {
    overflow: hidden !important;
    border: 1px solid rgba(222,171,55,.72) !important;
    background: #061523 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: 0 22px 48px rgba(0,0,0,.25) !important;
  }

  body.nile-home-active #home .atmosphere-highlight .photo-panel {
    background: #061523 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  body.nile-home-active #home .atmosphere-highlight .section-copy {
    background: linear-gradient(180deg, #071827 0%, #041321 100%) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important;
  }
}

/* --------------------------------------------------------------------------
   2) /hotel mobile — one real lower scene, no duplicated CSS backgrounds.

   The approved T163 composition used two visual scenes:
   - the hero image belongs only to the upper hero;
   - one lower room scene stays behind the accommodation facts + room catalogue.

   iOS Safari is unreliable with background-attachment: fixed on long pages.
   T178 also painted the same lower image on both body and rooms ::before, which
   created visible seams/duplicate layers. The lower scene is now a real <img>
   element, fixed once behind the page. */
.hotel-experience .hx-hotel-lower-scene {
  display: none;
}

@media (max-width: 720px) {
  html { background: #03111d; }

  body.hotel-experience {
    background: #03111d !important;
  }

  .hotel-experience .hx-hotel-lower-scene {
    position: fixed;
    display: block;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: #03111d;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .hotel-experience .hx-hotel-lower-scene picture,
  .hotel-experience .hx-hotel-lower-scene img {
    display: block;
    width: 100%;
    height: 100%;
  }

  .hotel-experience .hx-hotel-lower-scene img {
    object-fit: cover;
    object-position: center 58%;
    filter: saturate(.84) contrast(1.02) brightness(.48);
  }

  .hotel-experience .hx-hotel-lower-scene::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(2,12,22,.30) 0%, rgba(2,12,22,.42) 42%, rgba(2,12,22,.54) 100%);
  }

  .hotel-experience .hx-hero,
  .hotel-experience .hx-rooms-section,
  .hotel-experience .hx-highlights,
  .hotel-experience .hx-footer {
    position: relative;
    z-index: 1;
  }

  .hotel-experience .hx-rooms-section {
    background: transparent !important;
  }

  .hotel-experience .hx-rooms-section::before {
    background: linear-gradient(180deg, rgba(2,12,22,.28) 0%, rgba(2,12,22,.10) 7%, transparent 16%, transparent 92%, rgba(2,12,22,.30) 100%) !important;
  }

  .hotel-experience .hx-rooms-section > .hx-shell {
    position: relative;
    z-index: 1;
  }
}

@supports (-webkit-touch-callout: none) {
  @media (max-width: 720px) {
    .hotel-experience .hx-hotel-lower-scene {
      -webkit-transform: translate3d(0,0,0);
      transform: translate3d(0,0,0);
    }
  }
}

/* --------------------------------------------------------------------------
   3) Paymera: remove the white tile and let the official green mark sit on a
      restrained dark/glass badge. Works in the hotel facts and booking choice. */
.hotel-experience .hx-payment-icon-paymera-fact,
.hotel-experience .hx-payment-icon-paymera {
  overflow: hidden !important;
  border: 1px solid rgba(72,190,115,.34) !important;
  background: linear-gradient(145deg, rgba(12,34,45,.92), rgba(3,17,29,.96)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 7px 18px rgba(0,0,0,.20),
    0 0 0 1px rgba(72,190,115,.035) !important;
}

.hotel-experience .hx-payment-icon-paymera-fact {
  width: 38px !important;
  height: 38px !important;
  padding: 6px !important;
  border-radius: 11px !important;
}

.hotel-experience .hx-payment-icon-paymera {
  padding: 8px !important;
}

.hotel-experience .hx-payment-icon-paymera-fact img,
.hotel-experience .hx-payment-icon-paymera img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  display: block !important;
  filter: drop-shadow(0 2px 5px rgba(72,190,115,.18)) !important;
}

@media (max-width: 720px) {
  .hotel-experience .hx-payment-fact {
    align-items: center !important;
    text-align: center !important;
  }

  .hotel-experience .hx-payment-icon-paymera-fact {
    width: 24px !important;
    height: 24px !important;
    padding: 0 !important;
    margin: 0 auto 5px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  .hotel-experience .hx-payment-icon-paymera {
    padding: 7px !important;
  }
}


/* --------------------------------------------------------------------------
   T185 — iOS Safari hotel hero cleanup.
   Safari can promote glass/backdrop layers around the inner-page header/hero
   into a visible rectangular compositing surface even after the mobile copy
   background is transparent. On the homepage those layers do not exist in
   this form, so the content feels visually cleaner. Remove only those paint
   surfaces on iOS phones; do not move the header or alter safe-area geometry. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 720px) {
    .hotel-experience .site-header.unified-site-header,
    .hotel-experience .hx-hero-content,
    .hotel-experience .hx-hero-copy {
      background-color: transparent !important;
      background-image: none !important;
      border-color: transparent !important;
      box-shadow: none !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
    }

    .hotel-experience .site-header.unified-site-header::before {
      display: none !important;
      content: none !important;
    }

    .hotel-experience .hx-hero-copy {
      border: 0 !important;
      border-radius: 0 !important;
    }
  }
}

/* --------------------------------------------------------------------------
   T193 — iOS 26: remove viewport-constrained paint layers from /hotel.

   WebKit 26 may create a solid top-bar color extension when a fixed/sticky
   painted layer touches an obscured viewport inset. The hotel page had two
   such full-viewport layers: body::before and .hx-hotel-lower-scene.

   Keep the approved T185 hero/header geometry unchanged. On iOS only, make
   the lower room atmosphere a document-bound absolute scene instead of a
   viewport-fixed scene, and remove the decorative fixed body layer. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 720px) {
    body.hotel-experience {
      position: relative !important;
      isolation: isolate;
    }

    body.hotel-experience::before {
      content: none !important;
      display: none !important;
      position: static !important;
      background: none !important;
      opacity: 0 !important;
    }

    .hotel-experience .hx-hotel-lower-scene {
      position: absolute !important;
      top: 850px !important;
      right: 0 !important;
      bottom: 0 !important;
      left: 0 !important;
      width: 100% !important;
      height: auto !important;
      min-height: 0 !important;
      z-index: 0 !important;
      overflow: hidden !important;
      pointer-events: none !important;
      background: #03111d !important;
      -webkit-transform: none !important;
      transform: none !important;
      backface-visibility: visible !important;
      -webkit-backface-visibility: visible !important;
    }

    .hotel-experience .hx-hotel-lower-scene picture,
    .hotel-experience .hx-hotel-lower-scene img {
      display: none !important;
    }

    .hotel-experience .hx-hotel-lower-scene::after {
      content: "" !important;
      position: absolute !important;
      inset: 0 !important;
      background: linear-gradient(
        180deg,
        rgba(2,12,22,.30) 0%,
        rgba(2,12,22,.42) 35%,
        rgba(2,12,22,.54) 72%,
        rgba(2,12,22,.66) 100%
      ) !important;
    }

    /* Keep the fixed toast out of the render tree until it is actually used. */
    .hotel-experience .hx-toast:not(.show) {
      display: none !important;
    }
  }
}

/* --------------------------------------------------------------------------
   T194 — keep the T193 no-fixed iOS fix, but restore the lower room scene to
   its original image and a natural visual proportion.

   T193 solved Safari's top-bar extension by removing viewport-fixed layers,
   but its 8200px derivative made the second room image look vertically
   stretched. T194 uses the original 941×1672 image, object-fit: cover (never
   distorted), then fades it cleanly into the approved navy page background. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 720px) {
    .hotel-experience .hx-hotel-lower-scene {
      top: 850px !important;
      right: 0 !important;
      bottom: auto !important;
      left: 0 !important;
      width: 100% !important;
      height: clamp(760px, 210vw, 1000px) !important;
      min-height: 0 !important;
      background: #03111d !important;
      overflow: hidden !important;
    }

    .hotel-experience .hx-hotel-lower-scene picture {
      display: block !important;
      position: absolute !important;
      inset: 0 !important;
      width: 100% !important;
      height: 100% !important;
    }

    .hotel-experience .hx-hotel-lower-scene img {
      display: block !important;
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      object-position: center 58% !important;
      filter: saturate(.84) contrast(1.02) brightness(.48) !important;
      transform: none !important;
      -webkit-transform: none !important;
    }

    .hotel-experience .hx-hotel-lower-scene::after {
      content: "" !important;
      position: absolute !important;
      inset: 0 !important;
      background: linear-gradient(
        180deg,
        rgba(2,12,22,.28) 0%,
        rgba(2,12,22,.38) 44%,
        rgba(2,12,22,.58) 68%,
        rgba(3,17,29,.90) 88%,
        #03111d 100%
      ) !important;
    }
  }
}

/* --------------------------------------------------------------------------
   T200 — iOS Safari: keep ONE true fixed lower room scene without exposing a
   viewport-edge fixed box to WebKit's content-inset color extension sampler.

   WebKit 26 detects viewport-constrained boxes near the top/bottom edges and
   may create an opaque color-extension pocket. The visual scene still needs
   to behave like desktop (one fixed room image), so the fixed containing box
   is intentionally a transparent 1×1 anchor at the center of the viewport.
   Its absolute image/veil children overflow from that center anchor to cover
   the visible viewport. The painted room stays fixed, while the fixed box
   itself does not border an obscured viewport edge.

   Scope: /hotel, iPhone Safari only. Header/hero geometry and booking logic
   remain unchanged. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 720px) {
    body.hotel-experience::before {
      content: none !important;
      display: none !important;
      position: static !important;
      background: none !important;
      opacity: 0 !important;
    }

    .hotel-experience .hx-hotel-lower-scene {
      position: fixed !important;
      display: block !important;
      top: 50% !important;
      left: 50% !important;
      right: auto !important;
      bottom: auto !important;
      width: 1px !important;
      height: 1px !important;
      min-width: 0 !important;
      min-height: 0 !important;
      z-index: 0 !important;
      overflow: visible !important;
      pointer-events: none !important;
      background: transparent !important;
      background-color: transparent !important;
      box-shadow: none !important;
      border: 0 !important;
      opacity: 1 !important;
      transform: none !important;
      -webkit-transform: none !important;
      backface-visibility: visible !important;
      -webkit-backface-visibility: visible !important;
    }

    .hotel-experience .hx-hotel-lower-scene picture {
      display: block !important;
      position: absolute !important;
      top: 50% !important;
      left: 50% !important;
      width: 100vw !important;
      height: 100vh !important;
      min-width: 100vw !important;
      min-height: 100vh !important;
      overflow: hidden !important;
      transform: translate(-50%, -50%) !important;
      -webkit-transform: translate(-50%, -50%) !important;
      background: transparent !important;
      border: 0 !important;
    }

    .hotel-experience .hx-hotel-lower-scene img {
      display: block !important;
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      object-position: center 58% !important;
      filter: saturate(.84) contrast(1.02) brightness(.48) !important;
      transform: none !important;
      -webkit-transform: none !important;
    }

    .hotel-experience .hx-hotel-lower-scene::after {
      content: "" !important;
      position: absolute !important;
      top: 50% !important;
      left: 50% !important;
      width: 100vw !important;
      height: 100vh !important;
      transform: translate(-50%, -50%) !important;
      -webkit-transform: translate(-50%, -50%) !important;
      background-image: linear-gradient(
        180deg,
        rgba(2,12,22,.30) 0%,
        rgba(2,12,22,.42) 42%,
        rgba(2,12,22,.54) 100%
      ) !important;
      background-color: transparent !important;
      pointer-events: none !important;
    }

    .hotel-experience .hx-hero,
    .hotel-experience .hx-rooms-section,
    .hotel-experience .hx-highlights,
    .hotel-experience .hx-footer {
      position: relative !important;
      z-index: 1 !important;
    }

    .hotel-experience .hx-rooms-section {
      background: transparent !important;
    }

    .hotel-experience .hx-rooms-section::before {
      background: linear-gradient(
        180deg,
        rgba(2,12,22,.28) 0%,
        rgba(2,12,22,.10) 7%,
        transparent 16%,
        transparent 92%,
        rgba(2,12,22,.30) 100%
      ) !important;
    }
  }
}


/* --------------------------------------------------------------------------
   T202 — Arabic RTL isolation for T200's decorative fixed hotel scene.

   The page itself remains RTL in Arabic. Only the aria-hidden visual scene is
   forced into an isolated LTR formatting context so iOS WebKit does not apply
   RTL fixed-layer geometry/compositing to the full-screen decorative image.
   EN/TR and all hotel content/layout remain unchanged. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 720px) {
    .hotel-experience .hx-hotel-lower-scene,
    .hotel-experience .hx-hotel-lower-scene picture,
    .hotel-experience .hx-hotel-lower-scene img,
    .hotel-experience .hx-hotel-lower-scene::after {
      direction: ltr !important;
      unicode-bidi: isolate !important;
    }
  }
}


/* --------------------------------------------------------------------------
   T213 — iOS Safari bottom tint fix: remove dormant fixed toast from viewport.

   WebKit can derive the bottom scroll-pocket tint from fixed elements near the
   obscured toolbar edge. The hotel page always contains #hxToast, even while
   visually hidden. On iPhone Safari only, keep that toast completely out of
   the viewport-constrained layer tree. It becomes document-absolute only when
   shown; JS places it at the current visual viewport once per notification.
   The hotel background architecture is intentionally untouched. */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 720px) {
    body.hotel-experience .hx-toast {
      display: none !important;
      position: absolute !important;
      top: 0 !important;
      bottom: auto !important;
      left: 16px !important;
      right: 16px !important;
      width: auto !important;
      max-width: 420px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      transform: none !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }

    body.hotel-experience .hx-toast.show {
      display: block !important;
      opacity: 1 !important;
    }
  }
}