/* ============================================================
   glass-surface.css — Full port of GlassSurface.jsx + site styles
   Fixed: replaced light-dark() and color-mix(in oklch) with
          explicit rgba values for maximum browser compatibility.
   ============================================================ */

/* ── Core container ── */
.glass-surface {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 0.26s ease-out;
}

/* Hidden SVG that holds the displacement-map filter */
.glass-surface__filter {
  width: 100%;
  height: 100%;
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  z-index: -1;
}

/* Content wrapper on top */
.glass-surface__content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: inherit;
  position: relative;
  z-index: 1;
}

/* ──────────────────────────────────────────────
   SVG path  (Chrome / Edge — displacement maps)
   ────────────────────────────────────────────── */
.glass-surface--svg {
  /* light-dark(hsl(0 0% 100% / frost), ...) → explicit light value */
  background: hsl(0 0% 100% / var(--glass-frost, 0));
  backdrop-filter: var(--filter-id, url(#glass-filter)) saturate(var(--glass-saturation, 1));
  box-shadow:
    /* color-mix(in oklch, black, transparent 85%) → rgba(0,0,0,0.15) */
    0 0  2px  1px rgba(0,0,0,0.15) inset,
    0 0 10px  4px rgba(0,0,0,0.10) inset,
    0px  4px 16px rgba(17,17,26,.05),
    0px  8px 24px rgba(17,17,26,.05),
    0px 16px 56px rgba(17,17,26,.05),
    0px  4px 16px rgba(17,17,26,.05) inset,
    0px  8px 24px rgba(17,17,26,.05) inset,
    0px 16px 56px rgba(17,17,26,.05) inset;
}

/* ──────────────────────────────────────────────
   Fallback  (Safari / Firefox / no SVG support)
   ────────────────────────────────────────────── */
.glass-surface--fallback {
  background: rgba(255,255,255,0.35);
  backdrop-filter: blur(16px) saturate(1.8) brightness(1.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.8) brightness(1.05);
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow:
    0 8px 32px 0 rgba(31,38,135,.18),
    0 2px 16px 0 rgba(31,38,135,.10),
    inset 0  1px 0 0 rgba(255,255,255,.5),
    inset 0 -1px 0 0 rgba(255,255,255,.25);
}

@media (prefers-color-scheme: dark) {
  .glass-surface--fallback {
    background: rgba(255,255,255,.10);
    backdrop-filter: blur(16px) saturate(1.8) brightness(1.2);
    -webkit-backdrop-filter: blur(16px) saturate(1.8) brightness(1.2);
    border: 1px solid rgba(255,255,255,.20);
    box-shadow:
      inset 0  1px 0 0 rgba(255,255,255,.2),
      inset 0 -1px 0 0 rgba(255,255,255,.1);
  }
}

@supports not (backdrop-filter: blur(10px)) {
  .glass-surface--fallback {
    background: rgba(255,255,255,.55);
    box-shadow:
      inset 0  1px 0 0 rgba(255,255,255,.6),
      inset 0 -1px 0 0 rgba(255,255,255,.3);
  }
  .glass-surface--fallback::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(255,255,255,.15);
    border-radius: inherit;
    z-index: -1;
  }
  @media (prefers-color-scheme: dark) {
    .glass-surface--fallback { background: rgba(0,0,0,.4); }
    .glass-surface--fallback::before { background: rgba(255,255,255,.05); }
  }
}

.glass-surface:focus-visible {
  outline: 2px solid #007aff;
  outline-offset: 2px;
}

/* ============================================================
   SECTION 2 — Site-specific: Bottom Navigation Pill
   ============================================================ */

@keyframes glass-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.glass-nav-wrapper {
  position: fixed;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  left: 0;
  right: 0;
  margin-inline: auto;
  z-index: 9999;
  width: min(540px, 92vw);
}

.glass-bottom-nav {
  width: 100%;
  height: 70px;
  border-radius: 35px;
  --glass-frost: 0.15;
  --glass-saturation: 1.8;
}

.glass-bottom-nav .glass-surface__content {
  padding: 0 20px;
  justify-content: space-around;
}

/* Shimmer sweep */
.glass-bottom-nav::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: inherit;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0)   20%,
    rgba(255,255,255,0.22) 48%,
    rgba(255,255,255,0)   80%
  );
  background-size: 200% 100%;
  animation: glass-shimmer 4s linear infinite;
  pointer-events: none;
  z-index: 2;
}

/* ── Nav items ── */
.glass-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  text-decoration: none;
  color: #D32F2F;
  transition: color 0.25s ease, transform 0.2s ease;
  flex: 1;
  padding: 8px 0;
  border-radius: 24px;
  position: relative;
  text-shadow: 0 2px 6px rgba(0,0,0,0.4);
}

.glass-nav-item:hover,
.glass-nav-item.active {
  color: #B71C1C;
  transform: translateY(-2px);
}

.glass-nav-item svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.2s ease;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.3));
}

.glass-nav-item:hover svg,
.glass-nav-item.active svg {
  transform: scale(1.15);
  filter: drop-shadow(0 0 7px rgba(211,47,47,0.7));
}

.glass-nav-item span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-family: 'Tajawal', sans-serif;
}

.glass-nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #D32F2F;
  box-shadow: 0 0 8px rgba(211,47,47,0.8);
}