/* T95 — Refined mobile glass carousel over the live hero video.
   Desktop remains controlled by T88 and is intentionally unchanged. */

.mobile-carousel-controls{display:none;}

@media (max-width:760px){
  :root{
    --t95-card-width:min(60vw,236px);
    --t95-card-height:146px;
    --t95-gold:#efbf52;
    --t95-gold-light:#f8d36d;
  }

  html,body{overflow-x:hidden !important;}
  #home .home-page{gap:0 !important;}

  /* Restore true full-bleed width. the previous mobile layer inherited negative margins while using
     width:100%, which made the hero narrower and shifted it to one side. */
  #home .hero.hero-photo.hero-video-mode{
    position:relative !important;
    width:100vw !important;
    max-width:100vw !important;
    height:100svh !important;
    min-height:720px !important;
    max-height:none !important;
    margin-left:calc(50% - 50vw) !important;
    margin-right:calc(50% - 50vw) !important;
    padding:0 !important;
    overflow:hidden !important;
    isolation:isolate !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }

  #home .hero-cinematic-media,
  #home .hero-waterfall-video{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
  }
  #home .hero-waterfall-video{
    object-fit:cover !important;
    object-position:center center !important;
  }

  #home .hero-overlay{
    background:linear-gradient(180deg,
      rgba(1,7,14,.12) 0%,
      rgba(1,8,16,.04) 30%,
      rgba(1,8,16,.14) 48%,
      rgba(1,8,16,.43) 69%,
      rgba(1,8,16,.72) 100%) !important;
  }

  #home .hero-content{
    position:absolute !important;
    z-index:5 !important;
    top:70px !important;
    right:0 !important;
    bottom:210px !important;
    left:0 !important;
    width:100% !important;
    min-height:0 !important;
    margin:0 !important;
    padding:6px 16px 0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    pointer-events:none !important;
  }

  #home .hero-logo-stage{
    position:relative !important;
    z-index:2 !important;
    flex:0 0 auto !important;
    margin:0 auto !important;
  }

  #home .main-logo{
    width:min(164px,39vw) !important;
    max-width:164px !important;
    height:auto !important;
    margin:0 auto !important;
    filter:drop-shadow(0 12px 24px rgba(0,0,0,.28)) !important;
  }

  #home .hero-copy-block{
    position:relative !important;
    z-index:2 !important;
    width:min(100%,410px) !important;
    margin:auto auto 0 !important;
    padding:8px 10px 7px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:0 !important;
    text-align:center !important;
  }

  #home .hero-copy-block::before{
    content:"" !important;
    position:absolute !important;
    z-index:-1 !important;
    right:-10px !important;
    bottom:-7px !important;
    left:-10px !important;
    height:140px !important;
    border-radius:44% 44% 18px 18px / 24% 24% 18px 18px !important;
    background:linear-gradient(180deg,transparent 0%,rgba(2,11,22,.16) 30%,rgba(2,11,22,.45) 77%,rgba(2,11,22,.57) 100%) !important;
    pointer-events:none !important;
  }

  #home .hero-kicker{
    width:auto !important;
    margin:0 auto 2px !important;
    font-size:clamp(.92rem,3.9vw,1.06rem) !important;
    line-height:1.18 !important;
  }
  #home .hero-kicker::before,
  #home .hero-kicker::after{width:34px !important;flex-basis:34px !important;}

  #home .hero h1{
    margin:0 auto 4px !important;
    padding:4px 4px 5px !important;
    font-size:clamp(1.92rem,8.15vw,2.42rem) !important;
    line-height:1.12 !important;
    white-space:nowrap !important;
  }

  #home .hero-subtitle{
    max-width:335px !important;
    margin:0 auto !important;
    padding:0 4px !important;
    line-height:1.46 !important;
  }
  #home .hero-subtitle::after{
    font-size:clamp(.79rem,3.35vw,.92rem) !important;
    line-height:1.46 !important;
  }

  #home .hero-ornament,
  #home .hero-scroll-cue,
  #home .mobile-hero-cta,
  #home .mobile-destination-section{display:none !important;}

  /* Center card + equal, clearly visible peeks on both sides. */
  #home .hero > .primary-actions{
    position:absolute !important;
    z-index:7 !important;
    right:0 !important;
    bottom:34px !important;
    left:0 !important;
    width:100vw !important;
    max-width:100vw !important;
    height:calc(var(--t95-card-height) + 18px) !important;
    min-height:0 !important;
    margin:0 !important;
    padding:8px calc((100vw - var(--t95-card-width))/2) 10px !important;
    box-sizing:border-box !important;
    transform:none !important;
    display:flex !important;
    grid-template-columns:none !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:10px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    overscroll-behavior-x:contain !important;
    scroll-snap-type:x mandatory !important;
    scroll-padding-inline:calc((100vw - var(--t95-card-width))/2) !important;
    scrollbar-width:none !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-x pan-y !important;
    direction:ltr !important;
    visibility:visible !important;
    pointer-events:auto !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    cursor:grab !important;
  }
  #home .hero > .primary-actions:active{cursor:grabbing !important;}
  #home .hero > .primary-actions::-webkit-scrollbar{display:none !important;}

  #home .hero > .primary-actions .feature-card{
    position:relative !important;
    flex:0 0 var(--t95-card-width) !important;
    width:var(--t95-card-width) !important;
    min-width:var(--t95-card-width) !important;
    height:var(--t95-card-height) !important;
    min-height:var(--t95-card-height) !important;
    margin:0 !important;
    padding:14px 16px 18px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:3px !important;
    overflow:hidden !important;
    direction:rtl !important;
    scroll-snap-align:center !important;
    scroll-snap-stop:always !important;
    border:1px solid rgba(240,195,82,.52) !important;
    border-radius:21px !important;
    background:
      linear-gradient(180deg,rgba(142,198,255,.105) 0%,rgba(78,141,206,.055) 34%,rgba(7,24,43,.16) 100%),
      linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.018) 38%,transparent 58%),
      rgba(2,15,29,.22) !important;
    background-image:
      linear-gradient(180deg,rgba(142,198,255,.105) 0%,rgba(78,141,206,.055) 34%,rgba(7,24,43,.16) 100%),
      linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.018) 38%,transparent 58%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.18),
      inset 0 0 0 1px rgba(255,255,255,.02),
      0 12px 28px rgba(0,0,0,.25) !important;
    -webkit-backdrop-filter:blur(10px) saturate(128%) !important;
    backdrop-filter:blur(10px) saturate(128%) !important;
    opacity:.84 !important;
    transform:scale(.96) !important;
    transform-origin:center !important;
    transition:transform .34s cubic-bezier(.2,.72,.2,1),opacity .28s ease,border-color .28s ease,box-shadow .28s ease !important;
  }

  #home .hero > .primary-actions .feature-card[data-view="hotel"]{order:1 !important;}
  #home .hero > .primary-actions .feature-card[data-view="menu"]{order:2 !important;}
  #home .hero > .primary-actions .feature-card[data-view="booking"]{order:3 !important;}

  #home .hero > .primary-actions .feature-card.is-carousel-active{
    z-index:3 !important;
    opacity:1 !important;
    transform:scale(1) !important;
    border-color:rgba(249,207,99,.94) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.23),
      inset 0 0 0 1px rgba(255,255,255,.025),
      0 17px 34px rgba(0,0,0,.32),
      0 0 22px rgba(86,158,227,.08),
      0 0 16px rgba(239,191,82,.08) !important;
  }

  #home .hero > .primary-actions .feature-card::before{
    content:"" !important;
    position:absolute !important;
    inset:6px !important;
    width:auto !important;
    height:auto !important;
    border:1px solid rgba(201,228,255,.10) !important;
    border-radius:15px !important;
    background:
      linear-gradient(180deg,rgba(255,255,255,.055),transparent 31%),
      radial-gradient(circle at 18% 8%,rgba(188,229,255,.07),transparent 29%) !important;
    pointer-events:none !important;
  }

  #home .hero > .primary-actions .feature-card::after{
    content:"‹" !important;
    position:absolute !important;
    right:15px !important;
    bottom:12px !important;
    left:auto !important;
    width:24px !important;
    height:24px !important;
    transform:none !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:1px solid rgba(244,198,89,.82) !important;
    border-radius:50% !important;
    background:rgba(3,16,29,.27) !important;
    color:#f4c65a !important;
    font:500 1.14rem/1 Arial,sans-serif !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06) !important;
    opacity:.9 !important;
  }

  #home .hero > .primary-actions .feature-card .icon{
    position:static !important;
    width:43px !important;
    height:43px !important;
    min-width:43px !important;
    flex:0 0 43px !important;
    margin:0 auto 2px !important;
    display:block !important;
    transform:none !important;
    background-color:transparent !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
    background-size:contain !important;
    filter:drop-shadow(0 6px 12px rgba(0,0,0,.32)) drop-shadow(0 0 8px rgba(235,185,58,.12)) !important;
  }
  #home .hero > .primary-actions .feature-card .icon-menu{
    width:40px !important;height:40px !important;min-width:40px !important;flex-basis:40px !important;
    background-image:url("assets/custom-icons/cutlery-outline-transparent.png") !important;
  }
  #home .hero > .primary-actions .feature-card .icon-hotel{
    width:52px !important;height:40px !important;min-width:52px !important;flex-basis:40px !important;
    background-image:url("assets/custom-icons/bed-outline-transparent.png") !important;
  }
  #home .hero > .primary-actions .feature-card .icon-calendar{
    width:44px !important;height:44px !important;min-width:44px !important;flex-basis:44px !important;
    background-image:url("assets/custom-icons/calendar-outline-transparent.png") !important;
  }

  #home .hero > .primary-actions .feature-card strong,
  #home .hero > .primary-actions .feature-card[data-view="menu"] strong{
    width:100% !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    display:block !important;
    color:#f2c45a !important;
    font-family:"Tajawal","Cairo",sans-serif !important;
    font-size:clamp(1.04rem,4.7vw,1.23rem) !important;
    font-weight:900 !important;
    line-height:1.18 !important;
    text-align:center !important;
    text-shadow:0 4px 11px rgba(0,0,0,.52) !important;
  }

  #home .hero > .primary-actions .feature-card small{
    width:100% !important;
    min-height:0 !important;
    max-width:198px !important;
    margin:0 auto !important;
    padding:0 16px 0 4px !important;
    display:block !important;
    color:rgba(255,250,240,.88) !important;
    font-family:"Cairo","Tajawal",sans-serif !important;
    font-size:0 !important;
    font-weight:500 !important;
    line-height:1.42 !important;
    text-align:center !important;
    text-shadow:0 3px 9px rgba(0,0,0,.61) !important;
  }
  #home .hero > .primary-actions .feature-card small::after{
    content:attr(data-mobile-copy-ar) !important;
    display:block !important;
    width:100% !important;
    font-size:clamp(.67rem,2.9vw,.77rem) !important;
    line-height:1.42 !important;
  }
  html[lang="en"] #home .hero > .primary-actions .feature-card small::after{content:attr(data-mobile-copy-en) !important;}
  html[lang="tr"] #home .hero > .primary-actions .feature-card small::after{content:attr(data-mobile-copy-tr) !important;}

  /* Compact, self-explanatory controls: arrows + active pagination. */
  #home .mobile-carousel-controls{
    position:absolute !important;
    z-index:9 !important;
    right:50% !important;
    bottom:7px !important;
    transform:translateX(50%) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:9px !important;
    direction:ltr !important;
    pointer-events:auto !important;
    width:max-content !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
  }

  #home .mobile-carousel-arrow{
    width:27px !important;
    height:27px !important;
    min-width:27px !important;
    min-height:27px !important;
    margin:0 !important;
    padding:0 !important;
    display:grid !important;
    place-items:center !important;
    border:1px solid rgba(239,191,82,.58) !important;
    border-radius:50% !important;
    background:rgba(2,15,29,.30) !important;
    color:var(--t95-gold-light) !important;
    font:600 1.08rem/1 Arial,sans-serif !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 5px 14px rgba(0,0,0,.20) !important;
    -webkit-backdrop-filter:blur(8px) !important;
    backdrop-filter:blur(8px) !important;
    cursor:pointer !important;
    transition:transform .2s ease,border-color .2s ease,background .2s ease !important;
  }
  #home .mobile-carousel-arrow:active{transform:scale(.92) !important;}

  #home .mobile-carousel-dots{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;
  }
  #home .mobile-carousel-dot{
    width:6px !important;
    height:6px !important;
    min-width:6px !important;
    min-height:6px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:999px !important;
    background:rgba(218,230,239,.43) !important;
    box-shadow:none !important;
    cursor:pointer !important;
    transition:width .24s ease,background .24s ease,box-shadow .24s ease !important;
  }
  #home .mobile-carousel-dot.is-active{
    width:21px !important;
    background:linear-gradient(90deg,#c98d25,#f5cc68) !important;
    box-shadow:0 0 10px rgba(239,191,82,.23) !important;
  }

  /* A brief, subtle pulse teaches swipe without adding visible wording. */
  @keyframes t95CueLeft{0%,100%{transform:translateX(0)}35%{transform:translateX(-3px)}70%{transform:translateX(1px)}}
  @keyframes t95CueRight{0%,100%{transform:translateX(0)}35%{transform:translateX(3px)}70%{transform:translateX(-1px)}}
  #home .mobile-carousel-controls.is-swipe-cue .mobile-carousel-prev{animation:t95CueLeft .78s ease-in-out 3;}
  #home .mobile-carousel-controls.is-swipe-cue .mobile-carousel-next{animation:t95CueRight .78s ease-in-out 3;}

  #home .booking-policies{margin-top:0 !important;}
}

@media (max-width:760px) and (max-height:780px){
  :root{--t95-card-height:136px;--t95-card-width:min(60vw,220px);}
  #home .hero.hero-photo.hero-video-mode{min-height:650px !important;}
  #home .hero-content{top:58px !important;bottom:194px !important;}
  #home .main-logo{width:min(138px,33vw) !important;}
  #home .hero-copy-block{padding:5px 7px 4px !important;}
  #home .hero-copy-block::before{height:122px !important;}
  #home .hero-kicker{font-size:.84rem !important;}
  #home .hero h1{font-size:clamp(1.72rem,7.7vw,2.08rem) !important;}
  #home .hero-subtitle::after{font-size:.72rem !important;}
  #home .hero > .primary-actions{bottom:32px !important;height:calc(var(--t95-card-height) + 14px) !important;padding-block:6px 8px !important;}
  #home .hero > .primary-actions .feature-card{padding:10px 14px 15px !important;border-radius:19px !important;}
  #home .hero > .primary-actions .feature-card .icon{width:38px !important;height:38px !important;min-width:38px !important;flex-basis:38px !important;}
  #home .hero > .primary-actions .feature-card .icon-hotel{width:47px !important;height:36px !important;min-width:47px !important;flex-basis:36px !important;}
  #home .mobile-carousel-controls{bottom:5px !important;}
}

@media (max-width:380px){
  #home .hero-content{padding-inline:10px !important;}
  #home .hero h1{font-size:clamp(1.74rem,8vw,2.06rem) !important;}
}

@media (prefers-reduced-motion:reduce){
  #home .hero > .primary-actions{scroll-behavior:auto !important;}
  #home .hero > .primary-actions .feature-card,
  #home .mobile-carousel-controls.is-swipe-cue .mobile-carousel-arrow{transition:none !important;animation:none !important;}
}