/* =========================================================
   MOĀNĀ CAFÉ — "Ocean Shine" skin
   Loaded AFTER styles.css. Pure look-and-feel layer:
   glassy ocean background, scattered shells, shiny cards.
   ========================================================= */
:root {
  --ocean-img: url("assets/ocean-bg.webp");
  --shell-img: url("assets/shell-1.webp");
  --star-img: url("assets/starfish.webp");
  --glass: rgba(255, 255, 255, 0.62);
  --glass-strong: rgba(255, 255, 255, 0.82);
  --glass-border: rgba(255, 255, 255, 0.75);
  --shine: 0 24px 60px -26px rgba(11, 57, 70, 0.45);
}

/* ---------- Ocean everywhere ---------- */
html { background: #cdeff8; }

body {
  background: var(--ocean-img) center top / cover no-repeat fixed,
    linear-gradient(180deg, #eaf8fc 0%, #bfe9f6 40%, #8fd8ee 100%);
  background-color: #d9f1fa;
  position: relative;
}

/* Sun shimmer + depth wash over the photo so text stays readable */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(255, 255, 255, 0.85), transparent 62%),
    radial-gradient(900px 700px at 8% 100%, rgba(143, 216, 238, 0.5), transparent 65%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(234, 248, 252, 0.35));
}

/* Floating shells + starfish scattered across the whole page */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background-image: var(--shell-img), var(--star-img), var(--shell-img), var(--star-img),
    var(--shell-img);
  background-repeat: no-repeat;
  background-position: 4vw 16vh, 90vw 8vh, 84vw 74vh, 12vw 86vh, 62vw 44vh;
  background-size: 140px, 110px, 180px, 96px, 78px;
  animation: shellDrift 22s var(--ease) infinite alternate;
}

@keyframes shellDrift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(0, -16px, 0); }
}

/* Lift real content above the ocean layers.
   .tide-gauge و .fab-whatsapp مش هنا: الاتنين position:fixed من styles.css
   وعندهم z-index أعلى أصلا (500 و 450). حطهم هنا كان بيلغي الـfixed
   فزرار الواتساب كان بينزل في آخر الصفحة وبيطلع بره الشاشة من الشمال. */
section,
footer { position: relative; z-index: 1; }

/* Sections become translucent glass instead of flat fills */
.about, .specials, .menu-teaser, .gallery, .vibes, .menu-section,
.social-platforms, .feed-section, .reviews-section, .location-section,
.transit-section, .page-hero, .site-footer, .drink-detail-section {
  background: transparent !important;
}
.about::before, .specials::before, .menu-teaser::before, .gallery::before,
.vibes::before, .menu-section::before, .site-footer::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.15)) !important;
  backdrop-filter: blur(2px);
}

/* Extra scattered shells inside big sections */
.about::after, .gallery::after, .menu-section::after, .vibes::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image: var(--shell-img), var(--star-img);
  background-repeat: no-repeat;
  background-position: 96% 12%, 2% 78%;
  background-size: 120px, 88px;
}

/* ---------- Glossy header ---------- */
.site-header {
  z-index: 400;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.55)) !important;
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: 0 10px 30px -22px rgba(11, 57, 70, 0.6);
}
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 14px 34px -24px rgba(11, 57, 70, 0.75);
}
.nav a {
  position: relative;
  color: var(--navy);
  font-weight: 500;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 2px;
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform .35s var(--ease);
  background: linear-gradient(90deg, var(--teal-bright), var(--aqua-4));
}
.nav a:hover::after, .nav a.is-current::after { transform: scaleX(1); }
.brand__mark {
  border-radius: 14px;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 6px 14px rgba(11, 57, 70, 0.25));
}

/* ---------- Shiny cards & glass surfaces ---------- */
.special-card,
.vibe-card,
.menu-list,
.menu-panel__feature,
.hero__feature,
.g-item,
.about__media,
.map-embed,
.platform-card,
.review-card,
.info-card,
.drink-card-large {
  background: var(--glass) !important;
  backdrop-filter: blur(14px) saturate(1.25);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shine);
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}

/* the "shine" — a slow glare sweeping across the glass */
.special-card::after,
.vibe-card::after,
.g-item::after,
.hero__feature::after,
.about__media::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -40%;
  width: 40%;
  height: 220%;
  transform: rotate(18deg) translateX(-120%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  transition: transform 1.1s var(--ease);
  pointer-events: none;
}
.special-card:hover::after,
.vibe-card:hover::after,
.g-item:hover::after,
.hero__feature:hover::after,
.about__media:hover::after { transform: rotate(18deg) translateX(420%); }

.special-card:hover,
.vibe-card:hover,
.g-item:hover,
.platform-card:hover,
.review-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 34px 70px -30px rgba(11, 57, 70, 0.6);
}

/* ---------- Buttons ---------- */
.btn {
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn--solid, .btn--navy {
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-bright) 55%, var(--aqua-4) 100%) !important;
  color: #fff !important;
  box-shadow: 0 18px 38px -16px rgba(30, 140, 147, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  border: none;
}
.btn--ghost {
  background: var(--glass-strong) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--navy) !important;
  backdrop-filter: blur(10px);
}
.btn:hover { transform: translateY(-3px); }
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .8s var(--ease);
}
.btn:hover::before { transform: translateX(120%); }

.badge, .price, .eyebrow { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); }
.badge {
  background: var(--glass-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(8px);
}

/* ---------- Headlines get an ocean gradient ---------- */
h1, h2 { letter-spacing: -0.5px; }
.specials__title, .vibes__title, .about__copy h2, .menu-teaser h2, .gallery h2,
.menu-section h2, .page-hero h1 {
  background: linear-gradient(100deg, var(--navy) 10%, var(--teal) 55%, var(--aqua-4) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Footer glass ---------- */
.site-footer {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(207, 240, 250, 0.75)) !important;
  backdrop-filter: blur(10px);
  color: var(--navy);
}
.site-footer a:hover { color: var(--teal); }

/* ---------- Tide gauge & floating CTA ---------- */
.tide-gauge__water {
  background: linear-gradient(180deg, var(--aqua-4), var(--teal-bright)) !important;
  box-shadow: 0 0 18px rgba(47, 180, 190, 0.8);
}
.fab-whatsapp { box-shadow: 0 18px 40px -14px rgba(16, 40, 47, 0.6); }

/* =========================================================
   HERO — cup on the left, copy on the right
   ========================================================= */
.hero {
  background: transparent;
  overflow: hidden;
}
.hero__bg { opacity: 0.25 !important; filter: saturate(1.1) blur(1px); }
.hero__scrim {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(234, 248, 252, 0.4)) !important;
}

.hero__inner.hero--split {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  align-items: center;
  gap: 48px;
  padding-top: 140px;
  padding-bottom: 120px;
  text-align: left;
}

.hero__cup {
  position: relative;
  display: flex;
  justify-content: center;
}
.hero__cup img {
  width: min(100%, 430px);
  filter: drop-shadow(0 40px 60px rgba(11, 57, 70, 0.35));
  animation: cupFloat 6s ease-in-out infinite;
}
.hero__cup::before {
  content: "";
  position: absolute;
  inset: 6% 4% 4% 4%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.85), rgba(159, 225, 240, 0.35) 55%, transparent 72%);
  filter: blur(10px);
  z-index: -1;
}
.hero__cup::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 58%;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(11, 57, 70, 0.28), transparent 70%);
  filter: blur(6px);
}

@keyframes cupFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-18px) rotate(2deg); }
}

.hero__copy { display: grid; gap: 20px; justify-items: start; }
.hero__copy .hero__title { font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.02; }
.hero__copy .hero__title span {
  background: linear-gradient(100deg, var(--teal) 0%, var(--aqua-4) 60%, #bfe9f6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__copy .hero__tagline { max-width: 46ch; }
.hero__copy .hero__cta { justify-content: flex-start; }
.hero__logo { width: clamp(150px, 18vw, 220px); mix-blend-mode: multiply; }
.hero__badge {
  background: var(--glass-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px -14px rgba(11, 57, 70, 0.5);
}
.hero__feature {
  background: var(--glass-strong) !important;
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
}

@media (max-width: 900px) {
  .hero__inner.hero--split {
    grid-template-columns: 1fr;
    padding-top: 118px;
    padding-bottom: 70px;
    gap: 28px;
  }
  .hero__cup { order: -1; }
  .hero__cup img { width: min(72%, 300px); }
  body::after { background-size: 96px, 74px, 120px, 66px, 54px; opacity: 0.4; }
}

/* keep the featured card clear of the hero copy */
@media (min-width: 1080px) {
  .hero__feature { right: 3%; bottom: 6%; width: 230px; }
}

/* ---------- Hero polish: real ocean behind, tighter copy column ---------- */
.hero { background: transparent !important; }
.hero__bg { opacity: 0 !important; }
.hero__scrim {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, rgba(234, 248, 252, 0.15) 45%, rgba(159, 225, 240, 0.35) 100%) !important;
}
.hero__inner.hero--split { padding-top: 120px; padding-bottom: 100px; }
.hero__copy { max-width: 620px; padding-right: 8px; }
.hero__copy .hero__tagline { max-width: 40ch; }
.hero__logo {
  width: clamp(120px, 13vw, 168px);
  border-radius: 18px;
  box-shadow: 0 18px 40px -22px rgba(11, 57, 70, 0.55);
  margin-bottom: 4px;
}
@media (min-width: 1080px) {
  .hero__feature { width: 250px; right: 2%; bottom: 5%; }
  .hero__copy { max-width: 560px; }
}

/* keep the coral badge readable over glass */
.badge--coral {
  background: linear-gradient(135deg, var(--coral), #f0866a) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.5);
  text-shadow: none;
}

/* tighter hero height so the page starts with content, not empty water */
.hero { min-height: 92vh; }
@media (min-height: 1000px) { .hero { min-height: 78vh; } }

/* ============================================================
   SHELL NAV + SHELL TABS + FLOATING MOĀNĀ DRINKS
   ============================================================ */

/* --- Shell-shaped selectable items (nav links & menu tabs) --- */
.nav a,
.menu-tab {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 16px 22px 12px !important;
  min-width: 104px;
  border: 1px solid rgba(255, 255, 255, .7) !important;
  border-radius: 52% 52% 44% 44% / 66% 66% 34% 34% !important;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(255,255,255,.96) 0%, rgba(238,250,253,.9) 42%, rgba(190,232,243,.92) 100%),
    repeating-conic-gradient(from 200deg at 50% 6%, rgba(255,255,255,.75) 0deg 4deg, rgba(148,205,222,.28) 4deg 8deg) !important;
  box-shadow:
    inset 0 2px 6px rgba(255,255,255,.9),
    0 10px 22px -14px rgba(11, 57, 70, .55) !important;
  color: #0b3946 !important;
  font-weight: 600;
  letter-spacing: .01em;
  transition: transform .28s ease, box-shadow .28s ease, filter .28s ease;
}
.nav a::after { display: none !important; }
.nav a:hover,
.menu-tab:hover {
  transform: translateY(-3px) rotate(-1deg);
  filter: saturate(1.1);
  box-shadow: inset 0 2px 6px rgba(255,255,255,.9), 0 16px 26px -14px rgba(11,57,70,.6) !important;
}
.nav a.is-current,
.menu-tab.is-active {
  background:
    radial-gradient(120% 90% at 50% 8%, #ffffff 0%, #d9f3fb 45%, #7fd4e8 100%),
    repeating-conic-gradient(from 200deg at 50% 6%, rgba(255,255,255,.8) 0deg 4deg, rgba(28,133,163,.25) 4deg 8deg) !important;
  color: #07323d !important;
  box-shadow: inset 0 2px 8px rgba(255,255,255,.95), 0 14px 30px -14px rgba(11,57,70,.7) !important;
}
.menu-tabs { gap: 12px !important; flex-wrap: wrap; }

@media (max-width: 900px) {
  .nav a, .menu-tab { min-width: 88px; padding: 13px 16px 10px !important; font-size: .9rem; }
}

/* --- Floating Moānā drinks ---
   عمود الكلام 1180px. الزينة كانت متحطوطة بنسبة مئوية من عرض القسم
   فكانت بتقع فوق العناوين. دلوقتي في الفراغ جنب العمود, ومتخفية
   أصلا لو الفراغ ده مش موجود. */
.about, .specials, .menu-teaser, .gallery, .vibes, .menu-section, .page-hero { position: relative; }

@media (min-width: 1460px) {
  .about::after,
  .specials::before,
  .menu-teaser::after,
  .gallery::after,
  .vibes::before,
  .menu-section::after,
  .page-hero::after {
    content: "";
    position: absolute;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: .85;
    filter: drop-shadow(0 18px 26px rgba(11, 57, 70, .28));
    z-index: 0;
    animation: drinkFloat 9s ease-in-out infinite;
  }


  .about::after {
    width: 108px; height: 150px; right: calc(50% - 590px - 124px); top: 6%;
    background-image: url("assets/float-mango.webp");
  }
  .specials::before {
    width: 96px; height: 134px; left: calc(50% - 590px - 124px); bottom: 6%;
    background-image: url("assets/float-watermelon.webp");
    animation-delay: 1.4s;
  }
  .menu-teaser::after {
    width: 100px; height: 140px; left: calc(50% - 590px - 124px); top: 8%;
    background-image: url("assets/float-kiwi.webp");
    animation-delay: .8s;
  }
  .gallery::after {
    width: 96px; height: 134px; right: calc(50% - 590px - 124px); top: 4%;
    background-image: url("assets/float-watermelon.webp");
    animation-delay: 2.1s;
  }
  .vibes::before {
    width: 104px; height: 146px; right: calc(50% - 590px - 124px); bottom: 8%;
    background-image: url("assets/float-mango.webp");
    animation-delay: 1s;
  }
  .menu-section::after {
    width: 104px; height: 146px; right: calc(50% - 590px - 124px); top: 3%;
    background-image: url("assets/float-kiwi.webp");
    animation-delay: .5s;
  }
  .page-hero::after {
    width: 96px; height: 134px; left: calc(50% - 590px - 124px); bottom: 14%;
    background-image: url("assets/float-mango.webp");
    animation-delay: 1.8s;
  }
}

@keyframes drinkFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-16px) rotate(2deg); }
}
@media (max-width: 780px) {
  .about::after, .specials::before, .menu-teaser::after, .gallery::after,
  .vibes::before, .menu-section::after, .page-hero::after { display: none; }
}

/* --- QR menu card --- */
.qr-card {
  display: flex;
  align-items: center;
  gap: 22px;
  margin: 0 auto 36px;
  max-width: 620px;
  padding: 20px 24px;
  border-radius: 26px;
  background: linear-gradient(140deg, rgba(255,255,255,.92), rgba(214,242,250,.8));
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 24px 46px -28px rgba(11,57,70,.6);
  backdrop-filter: blur(8px);
}
.qr-card img {
  width: 132px; height: 132px; flex: none;
  border-radius: 18px; background: #fff; padding: 8px;
  box-shadow: 0 12px 24px -16px rgba(11,57,70,.7);
}
.qr-card h3 { margin: 0 0 6px; }
.qr-card p { margin: 0; opacity: .85; font-size: .95rem; }
@media (max-width: 620px) { .qr-card { flex-direction: column; text-align: center; } }

/* --- Drink poster grid --- */
.drink-posters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 22px;
  margin: 26px 0 38px;
}
.drink-poster {
  margin: 0;
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 20px 38px -26px rgba(11,57,70,.65);
  transition: transform .3s ease, box-shadow .3s ease;
  display: flex;
  flex-direction: column;
}
.drink-poster:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 44px -24px rgba(11,57,70,.7);
}
/* البوسترات 3:4 وفيها الشعار فوق والكلام تحت, والإطار المربع كان بيقص ربعها */
.drink-poster img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  background-color: var(--aqua-1);
}
.drink-poster figcaption {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  flex: 1;
  background: transparent;
}
.drink-poster figcaption span,
.drink-poster figcaption i {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.05rem;
  line-height: 1.3;
  background: linear-gradient(120deg, var(--teal-bright), var(--teal) 55%, #0b5c6b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.drink-poster figcaption p {
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.45;
  font-style: italic;
  margin-top: 2px;
}
.drink-poster figcaption b {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 600;
  color: var(--gold);
  margin-top: auto;
  padding-top: 8px;
  -webkit-text-fill-color: initial;
  background: none;
}

/* --- Thumbnails on individual drinks --- */
.li-thumb {
  float: right;
  width: 54px; height: 54px;
  margin: 0 0 6px 12px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 10px 18px -12px rgba(11,57,70,.7);
}

/* ---- Moānā drink-name lettering (matches the hero "Ocean Breeze") ---- */
.li-row > span:first-child,
.menu-list li > .li-row > span:first-of-type {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.01em;
  background: linear-gradient(120deg, var(--teal-bright), var(--teal) 55%, #0b5c6b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.li-row > span:first-child em { font-style: italic; }
.li-row > b {
  -webkit-text-fill-color: initial;
  background: none;
  color: var(--navy);
}