:root {
  /* خلفيات أبيض + دافي */
  --bg: #ffffff;
  --bg2: #fff7e1;

  /* نصوص */
  --text: #151515;
  --muted: #6f6b63;

  /* كروت */
  --card: rgba(255, 255, 255, .78);
  --card2: rgba(255, 255, 255, .60);

  /* حدود/ظل */
  --border: rgba(200, 161, 74, .22);
  --shadow: 0 18px 50px rgba(0, 0, 0, .10);

  /* أصفر/ذهبي متناسق مع الشعار */
  --gold: #ffa500;

  /* أزرار (الرئيسي أصفر) */
  --btn: var(--gold);
  --btnText: #1a1a1a;

  /* زر Subtle */
  --btnSub: #ffffff;
  --btnSubText: #1a1a1a;

  /* حقول الإدخال */
  --fieldBg: rgba(255, 255, 255, .86);
  --fieldBorder: rgba(200, 161, 74, .25);
  --fieldFocus: rgba(215, 182, 90, .35);

  /* تدرج / توهج */
  --goldSoft: #ffb000;
  --glowGold: rgba(215, 182, 90, .42);

  /* Orange accent (Enhancement 1+2) */
  --accent: #E65C00;
  --accentGlow: rgba(255, 140, 0, 0.35);
  --accentGlowSoft: rgba(255, 140, 0, 0.18);

  /* خلفية متحركة (إضاءة + تكستشر) */
  --bgGlowA: .07;
  --bgTexA: .08;
  --bgGlowB: .04;
  --bgTexB: .06;
  --bgTexC: .045;
  --texRgb: 20, 18, 14;

}



/* ---------- Global page scale ----------
   NOTE: This does NOT change the user's browser zoom. It scales the site layout itself.
   Set to 0.75 for "75%" default scale.
*/
:root {
  --pageScale: 0.70;
}

/* Preferred (Chrome/Edge/Safari): zoom */
body {
  zoom: var(--pageScale);
}

/* Fallback (Firefox): transform scale */
@supports not (zoom: 1) {
  body {
    transform: scale(var(--pageScale));
    transform-origin: top center;
    width: calc(100% / var(--pageScale));
  }
}

html[data-theme="dark"] {
  --bg: #0c0e10;
  --bg2: #0f1114;
  --text: #f3f4f6;
  --muted: #a9acb3;
  --card: rgba(18, 20, 24, .68);
  --card2: rgba(18, 20, 24, .42);
  --border: rgba(255, 255, 255, .12);
  --shadow: 0 18px 60px rgba(0, 0, 0, .55);
  --btn: #f3f4f6;
  --btnText: #0c0e10;
  --btnSub: rgba(255, 255, 255, .10);
  --btnSubText: #f3f4f6;
  --fieldBg: rgba(0, 0, 0, .28);
  --fieldBorder: rgba(255, 255, 255, .14);
  --fieldFocus: rgba(215, 182, 90, .28);
  --goldSoft: #ffb000;
  --glowGold: rgba(215, 182, 90, .35);

  /* Orange accent (dark — more vivid) */
  --accent: #FF8C00;
  --accentGlow: rgba(255, 140, 0, 0.6);
  --accentGlowSoft: rgba(255, 140, 0, 0.3);

  /* خلفية متحركة (إضاءة + تكستشر) */
  --bgGlowA: .06;
  --bgTexA: .14;
  --bgGlowB: .03;
  --bgTexB: .11;
  --bgTexC: .08;
  --texRgb: 255, 255, 255;

}

* {
  margin: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html,
body {
  height: 100%
}

/* شريط تمرير متناسق مع الثيم + على اليمين */
html,
body {
  scrollbar-width: thin;
}

html,
body {
  scrollbar-color: rgba(255, 255, 255, .28) rgba(255, 255, 255, .08);
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 12px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .06);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .22);
  border-radius: 999px;
  border: 3px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, .32);
}

/* وضع فاتح */
html[data-theme="light"],
html[data-theme="light"] body {
  scrollbar-color: rgba(0, 0, 0, .35) rgba(0, 0, 0, .08);
}

html[data-theme="light"]::-webkit-scrollbar-track,
html[data-theme="light"] body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, .06);
}

html[data-theme="light"]::-webkit-scrollbar-thumb,
html[data-theme="light"] body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .22);
}

html[data-theme="light"]::-webkit-scrollbar-thumb:hover,
html[data-theme="light"] body::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, .32);
}


/* ضبط اتجاه المحتوى RTL مع إبقاء شريط التمرير طبيعي (يمين) */
html {
  direction: ltr;
  overflow-y: auto;
  overflow-x: hidden;
  overflow-anchor: none;
}

body {
  direction: ltr;
  overflow-x: hidden;
  overflow-anchor: none;
}

body>* {
  direction: rtl;
}


html {
  background-color: var(--bg);
  color: var(--text);

  /* خلفية متحركة (نور يمين/يسار + Texture خفيف) */
  background-image:
    radial-gradient(980px 680px at 20% 55%, rgba(255, 255, 255, var(--bgGlowA)), transparent 66%),
    radial-gradient(860px 640px at 82% 70%, rgba(255, 255, 255, .02), transparent 72%),
    radial-gradient(860px 640px at 65% 90%, rgba(255, 255, 255, var(--bgGlowB)), transparent 70%),
    radial-gradient(circle at 15% 25%, rgba(var(--texRgb), var(--bgTexA)) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(135deg, rgba(var(--texRgb), var(--bgTexC)) 0 1px, transparent 1px 10px);

  background-size:
    200% 200%,
    190% 190%,
    220% 220%,
    260px 260px,
    220px 220px;

  background-position:
    0% 50%,
    100% 20%,
    50% 100%,
    0 0,
    0 0;

  background-attachment: fixed;
  animation: bgMotion 18s ease-in-out infinite alternate;
}

@keyframes bgMotion {
  0% {
    background-position:
      0% 50%,
      100% 20%,
      50% 100%,
      0 0,
      0 0;
  }

  100% {
    background-position:
      100% 50%,
      0% 30%,
      60% 0%,
      260px 200px,
      220px -220px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    animation: none !important;
  }
}

body {
  margin: 0;
  font-family: "Cairo", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  color: var(--text);
  background: transparent;
  overflow-x: hidden;
}


/* ---------- Theme switch (smooth + lights on/off) ---------- */
html.themeSwitching *,
html.themeSwitching *::before,
html.themeSwitching *::after {
  transition:
    background-color .55s ease,
    color .55s ease,
    border-color .55s ease,
    box-shadow .55s ease,
    opacity .55s ease,
    filter .55s ease !important;
}

.themeFlash {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: 0;
}

.themeFlash.toLight {
  background:
    radial-gradient(1200px 760px at 50% 30%, rgba(255, 255, 255, .92), transparent 62%),
    radial-gradient(900px 650px at 40% 80%, rgba(255, 255, 255, .18), transparent 65%),
    linear-gradient(0deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0));
  animation: themeToLight 720ms ease-out both;
}

.themeFlash.toDark {
  background:
    radial-gradient(1200px 780px at 50% 35%, rgba(0, 0, 0, .05), rgba(0, 0, 0, .70) 70%),
    linear-gradient(0deg, rgba(0, 0, 0, .30), rgba(0, 0, 0, .55));
  animation: themeToDark 720ms ease-out both;
}

@keyframes themeToLight {
  0% {
    opacity: 0;
  }

  18% {
    opacity: .95;
  }

  100% {
    opacity: 0;
  }
}

@keyframes themeToDark {
  0% {
    opacity: 0;
  }

  20% {
    opacity: .92;
  }

  100% {
    opacity: 0;
  }
}

/* ---------- Splash / preloader ---------- */
html.isLoading,
html.isLoading body {
  overflow: hidden;
}

/* Full-screen overlay */
.splash {
  position: fixed;
  inset: 0;
  z-index: 20000;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(900px 520px at 50% 35%, rgba(215, 182, 90, .10), transparent 62%),
    radial-gradient(750px 520px at 50% 80%, rgba(120, 190, 255, .08), transparent 65%),
    var(--bg);
  color: var(--text);
  opacity: 1;
  transition: opacity .55s ease;
}

.splashInner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 22px 18px;
  text-align: center;
}

.splashInner::before {
  content: "";
  position: absolute;
  inset: -34px -24px;
  border-radius: 28px;
  pointer-events: none;
  background:
    radial-gradient(420px 260px at 50% 35%, rgba(255, 255, 255, .10), transparent 65%),
    radial-gradient(420px 260px at 50% 75%, rgba(0, 0, 0, .18), transparent 70%);
  opacity: .65;
  filter: blur(12px);
}

[data-theme="light"] .splashInner::before {
  background:
    radial-gradient(420px 260px at 50% 35%, rgba(0, 0, 0, .06), transparent 65%),
    radial-gradient(420px 260px at 50% 75%, rgba(200, 161, 74, .12), transparent 70%);
}

.splashLogo {
  width: min(68vw, 340px);
  height: auto;
  position: relative;
  z-index: 1;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 22px 55px rgba(0, 0, 0, .35));
  animation: splashLogoIn 900ms cubic-bezier(.2, .9, .2, 1) both;
}

@keyframes splashLogoIn {
  0% {
    transform: translateY(10px) scale(.92);
    filter: blur(2px) drop-shadow(0 10px 28px rgba(0, 0, 0, .22));
  }

  60% {
    transform: translateY(-2px) scale(1.02);
    filter: blur(0) drop-shadow(0 22px 55px rgba(0, 0, 0, .35));
  }

  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* 3 dots loader */
.splashLoader {
  display: flex;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.splashLoader span {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--btn);
  opacity: .9;
  animation: splashDot 900ms ease-in-out infinite;
}

.splashLoader span:nth-child(2) {
  animation-delay: 120ms;
  opacity: .7;
}

.splashLoader span:nth-child(3) {
  animation-delay: 240ms;
  opacity: .55;
}

@keyframes splashDot {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}

.splashText {
  position: relative;
  z-index: 1;
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--muted);
}

/* Hide animation */
.splash.hide {
  opacity: 0;
  pointer-events: none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .splashLogo {
    animation: none !important;
  }

  .splashLoader span {
    animation: none !important;
  }
}

a {
  color: inherit;
  text-decoration: none
}

a:hover {
  text-decoration: none
}

a:focus-visible {
  outline: 2px solid rgba(200, 161, 74, .55);
  outline-offset: 3px;
  border-radius: 10px;
}

.muted {
  color: var(--muted)
}

.small {
  font-size: .92rem
}

.srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  backdrop-filter: blur(14px);
  background: rgba(255, 255, 255, .45);
  border-bottom: 1px solid var(--border);
}

html[data-theme="dark"] .topbar {
  background: rgba(8, 10, 12, .55);
}

.brandMini {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 160px;
  text-align: right;
  text-decoration: none;
  color: inherit;
}

.brandLogo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: contain;
  flex: 0 0 auto;
  display: block;
}

.brandName {
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--text);
  line-height: 1.1;
}

/* Ensure brand name is clearly visible in dark theme */
html[data-theme="dark"] .brandName {
  color: #fff;
}

.navActions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-inline-start: auto;
}

.nav {
  display: flex;
  gap: 16px;
  margin-inline: auto
}

.nav a {
  padding: 8px 10px;
  border-radius: 999px;
  color: var(--muted);
}

.nav a:hover {
  background: var(--card2);
  color: var(--text)
}

.themeWrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.themeLabel {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: .2px;
  white-space: nowrap;
  user-select: none;
}

html[data-theme="dark"] .themeLabel {
  color: rgba(255, 255, 255, .75);
}

@media (max-width: 560px) {
  .themeLabel {
    display: none;
  }
}

.iconBtn {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 140, 0, 0.4);
  background: radial-gradient(circle at 30% 30%,
      rgba(255, 160, 0, 0.15), rgba(255, 100, 0, 0.05));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    inset 0 0 20px rgba(255, 140, 0, 0.1),
    0 0 15px rgba(255, 140, 0, 0.15);
  cursor: pointer;
  overflow: hidden;
}

html[data-theme="light"] .iconBtn {
  background: radial-gradient(circle at 30% 30%,
      rgba(255, 160, 0, 0.12), rgba(255, 100, 0, 0.04));
  border: 1.5px solid rgba(200, 140, 0, 0.35);
  box-shadow:
    inset 0 0 20px rgba(255, 140, 0, 0.06),
    0 0 12px rgba(255, 140, 0, 0.10);
}

.iconBtn .dot {
  display: block;
  width: 16px;
  height: 16px;
  margin: 0 auto;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #fff, var(--gold));
  border: 1px solid rgba(255, 140, 0, 0.4);
  transform: translateY(1px);
  box-shadow: 0 0 8px rgba(255, 140, 0, 0.2);
}

html[data-theme="dark"] .iconBtn .dot {
  background: radial-gradient(circle at 30% 30%, #fff, #c8a050);
  border-color: rgba(255, 200, 100, 0.3);
  box-shadow: 0 0 10px rgba(255, 160, 0, 0.15);
}

/* ---------- Lucide nav icon buttons ---------- */
.nav-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: all 0.3s ease;
  color: #fff;
}
.nav-icon-btn:hover {
  background: rgba(255,165,0,0.15);
  border-color: rgba(255,165,0,0.4);
  box-shadow: 0 0 12px rgba(255,165,0,0.3);
}
.nav-icon-btn svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
}

html[data-theme="light"] .nav-icon-btn {
  color: #1a1a1a;
  background: rgba(0,0,0,0.04);
  border-color: rgba(0,0,0,0.12);
}
html[data-theme="light"] .nav-icon-btn:hover {
  background: rgba(255,165,0,0.12);
  border-color: rgba(255,140,0,0.35);
  box-shadow: 0 0 12px rgba(255,140,0,0.2);
}

main {
  max-width: 2100px;
  margin: 0 auto;
  padding: 22px 12px 60px;
  position: relative;
  z-index: 1
}

.hero {
  padding: 18px 0 6px;
}

.heroCard {
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow);
  border-radius: 26px;
  padding: 26px 22px;
  display: grid;
  justify-items: center;
  gap: 14px;
  max-width: 860px;
  margin: 0 auto;
}

.heroBrand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 6px 0 14px;
}

.heroLogo {
  width: min(460px, 85vw);
  height: auto;
  object-fit: contain;
  transition: transform .22s ease;
  will-change: transform;
}


/* ---------- Hero logo: subtle floating motion ---------- */
.heroLogoFloat {
  display: inline-block;
  will-change: transform;
  animation: heroLogoFloat 3.8s ease-in-out infinite;
}

@keyframes heroLogoFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .heroLogoFloat {
    animation: none;
  }
}

.heroLogo:hover {
  transform: scale(1.05);
}

.heroTagline {
  margin: 0;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: .2px;
}

.heroTitle {
  margin: 0;
  font-size: 2.0rem;
  font-weight: 800;
  text-align: center;
}

/* Gradient headline text (safe across browsers)
   - Dark theme: animated gradient text (when supported)
   - Light theme: solid text + subtle animated accent underline (always visible)
*/
.gradientText {
  color: var(--text);
  background: none;
  -webkit-text-fill-color: currentColor;
  text-shadow: none;
}

html[data-theme="light"] .gradientText {
  color: #121212;
  -webkit-text-fill-color: currentColor;
  background: none;
  position: relative;
}

/* Underline removed */
html[data-theme="light"] .gradientText::after,
html[data-theme="dark"] .gradientText::after {
  content: none !important;
  display: none !important;
}


@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  html[data-theme="dark"] .gradientText {
    background: linear-gradient(90deg, var(--gold), #ffffff, var(--goldSoft), #ffffff, var(--gold));
    background-size: 260% 260%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: gradMove 8s ease-in-out infinite;
    text-shadow: 0 10px 40px rgba(0, 0, 0, .28);
  }
}

@media (prefers-reduced-motion: reduce) {

  html[data-theme="dark"] .gradientText,
  html[data-theme="light"] .gradientText::after {
    animation: none !important;
  }
}

@keyframes gradMove {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.heroSub {
  margin: 0 auto;
  text-align: center;
  max-width: 820px;
  line-height: 1.85;
  color: var(--muted);
}

.heroSub strong {
  color: var(--text)
}

.heroActions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding-top: 0;
}

.heroActions .btn:not(.subtle) {
  box-shadow: 0 18px 60px rgba(215, 182, 90, .18), 0 18px 60px rgba(0, 0, 0, .16);
}

html[data-theme="dark"] .heroActions .btn:not(.subtle) {
  box-shadow: 0 22px 70px rgba(215, 182, 90, .16), 0 22px 70px rgba(0, 0, 0, .55);
}

.searchOverlay {
  position: fixed;
  top: calc(var(--topbarH, 76px) + 12px);
  left: 50%;
  width: min(92vw, 720px);
  transform: translateX(-50%) translateY(-12px);
  opacity: 0;
  pointer-events: none;
  z-index: 90;
  transition: transform .18s ease, opacity .18s ease;
}

.searchOverlay.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.searchOverlayPanel {
  border: 1px solid rgba(215, 182, 90, .22);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(255, 255, 255, .84));
  box-shadow: 0 20px 60px rgba(0, 0, 0, .16);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 18px;
}

html[data-theme="dark"] .searchOverlayPanel {
  background:
    linear-gradient(180deg, rgba(15, 18, 21, .96), rgba(15, 18, 21, .88));
  box-shadow: 0 28px 80px rgba(0, 0, 0, .45);
}

.searchOverlayHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.searchOverlayTitle {
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--text);
}

.searchOverlayHint {
  color: var(--muted);
  font-size: .8rem;
  margin-top: 4px;
}

.searchOverlayBody {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.searchOverlayInput {
  width: 100%;
  border-radius: 16px;
  border: 1px solid rgba(215, 182, 90, .22);
  background: rgba(255, 255, 255, .72);
  color: var(--text);
  padding: 14px 16px;
  font: inherit;
  outline: none;
}

html[data-theme="dark"] .searchOverlayInput {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .1);
}

.searchOverlayInput:focus {
  border-color: rgba(215, 182, 90, .45);
  box-shadow: 0 0 0 4px rgba(215, 182, 90, .12);
}

.searchOverlayClear,
.searchOverlayClose {
  border: 1px solid rgba(215, 182, 90, .22);
  background: rgba(215, 182, 90, .08);
  color: var(--text);
  border-radius: 14px;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}

.searchOverlayClear {
  padding: 12px 16px;
  white-space: nowrap;
}

.searchOverlayClose {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex: 0 0 auto;
}

.searchOverlayClear:hover,
.searchOverlayClose:hover {
  background: rgba(215, 182, 90, .16);
  border-color: rgba(215, 182, 90, .42);
  transform: translateY(-1px);
}

@media (max-width: 640px) {
  .searchOverlayBody {
    grid-template-columns: 1fr;
  }

  .searchOverlayClear {
    width: 100%;
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--btn);
  color: var(--btnText);
  font-family: "Cairo", system-ui, sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .14);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn.subtle {
  background: var(--btnSub);
  color: var(--btnSubText);
  border-color: var(--border);
}

html[data-theme="dark"] .btn {
  box-shadow: 0 18px 55px rgba(0, 0, 0, .55);
}

/* Shimmer sweep pseudo-element */
.btn::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .35) 45%, transparent 70%);
  transform: translateX(-130%);
  opacity: .85;
  pointer-events: none;
}

/* Ripple pseudo-element */
.btn::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  top: var(--ripple-y, 50%);
  left: var(--ripple-x, 50%);
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
}

/* --- HOVER state --- */
.btn:hover {
  transform: scale(1.07);
  box-shadow: 0 0 15px var(--accentGlow), 0 22px 70px rgba(0, 0, 0, .22);
  /* filter removed — causes blurry text rasterization */
}

html[data-theme="dark"] .btn:hover {
  box-shadow: 0 0 20px var(--accentGlow), 0 0 40px var(--accentGlowSoft), 0 22px 70px rgba(0, 0, 0, .55);
}

.btn:hover::before {
  animation: btnShine .8s ease forwards;
}

.btn.subtle:hover {
  border-color: var(--accent);
  box-shadow: 0 0 12px var(--accentGlowSoft), 0 18px 55px rgba(0, 0, 0, .18);
}

html[data-theme="dark"] .btn.subtle:hover {
  box-shadow: 0 0 18px var(--accentGlow), 0 18px 55px rgba(0, 0, 0, .45);
}

/* --- ACTIVE / CLICK state --- */
.btn:active {
  transform: scale(0.94);
  box-shadow: 0 0 6px var(--accentGlowSoft), 0 8px 20px rgba(0, 0, 0, .18);
  filter: brightness(0.92);
  transition-duration: 0.15s;
}

/* Ripple trigger */
.btn.btn-ripple::after {
  animation: btnRipple 0.55s ease-out forwards;
}

/* --- FOCUS state --- */
.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px var(--accentGlowSoft), 0 18px 55px rgba(0, 0, 0, .22);
}

/* --- Keyframes --- */
@keyframes btnShine {
  from {
    transform: translateX(-130%);
  }

  to {
    transform: translateX(130%);
  }
}

@keyframes btnRipple {
  0% {
    width: 0;
    height: 0;
    opacity: 0.5;
  }

  100% {
    width: 400px;
    height: 400px;
    opacity: 0;
  }
}

/* Respect reduced motion for buttons */
@media (prefers-reduced-motion: reduce) {
  .btn {
    transition: none !important;
  }

  .btn::before,
  .btn::after {
    animation: none !important;
  }

  .btn:hover {
    transform: none !important;
  }

  .btn:active {
    transform: none !important;
  }
}

.stats {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.stat {
  border: 1px solid var(--border);
  background: var(--card2);
  border-radius: 20px;
  padding: 12px 10px;
  text-align: center;
}

.statNum {
  font-size: 2.3rem;
  font-weight: 900;
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

.statLabel {
  color: var(--muted);
  font-weight: 700
}

/* تلوين رقم الإحصائيات (الثيم الأبيض) + حركة خفيفة عند انتهاء العد */
html[data-theme="light"] .statNum {
  color: var(--gold);
  text-shadow: 0 10px 30px rgba(200, 161, 74, .18);
}

html[data-theme="dark"] .statNum {
  color: var(--goldSoft);
  text-shadow:
    0 0 18px var(--glowGold),
    0 10px 40px rgba(0, 0, 0, .55);
}

.statNum.isDone {
  animation: statPop .35s ease-out;
}

@keyframes statPop {
  0% {
    transform: scale(1);
  }

  55% {
    transform: scale(1.06);
  }

  100% {
    transform: scale(1);
  }
}

.section {
  padding: 34px 0 0;
  content-visibility: auto;
  contain-intrinsic-size: 900px
}

/*
  Paint / render stability fix (desktop):
  Some Chromium builds can fail to paint images inside a multi-column masonry
  until a forced reflow happens (zoom, resize, etc.).
  Disabling content-visibility for the Works section reduces the chances of
  the "white tile" / "image appears only after zoom" glitch.
*/
#works.section {
  content-visibility: visible;
  contain-intrinsic-size: auto;
}

/*
  Reviews slider stability:
  content-visibility can delay layout for offscreen sections, which may prevent
  JS from calculating widths correctly -> empty gaps in the marquee.
  Reviews is lightweight, so we keep it fully laid out.
*/
#reviews.section {
  content-visibility: visible;
  contain-intrinsic-size: auto;
}

.sectionHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.sectionHead h2 {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: .2px;
  padding: 4px 0;
  line-height: 1.3;
  border-bottom: none;
  text-decoration: none;
  transition: filter 0.3s ease;
}

/* Kill any pseudo-elements on headings */
.sectionHead h2::before,
.sectionHead h2::after {
  content: none !important;
  display: none !important;
}

/* Dark mode heading color */
html[data-theme="dark"] .sectionHead h2 {
  color: var(--accent);
  text-shadow: 0 0 20px rgba(255, 140, 0, .35);
}

/* Light mode heading color */
html[data-theme="light"] .sectionHead h2 {
  color: var(--accent);
  text-shadow: none;
}

/* Animated gradient text — Dark mode */
@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  html[data-theme="dark"] .sectionHead h2 {
    background: linear-gradient(135deg, #FF6B00, #FF8C00, #FFB347, #FFCC80, #FFB347, #FF8C00);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
  }
}

/* Animated gradient text — Light mode */
@supports ((-webkit-background-clip:text) or (background-clip:text)) {
  html[data-theme="light"] .sectionHead h2 {
    background: linear-gradient(135deg, #D35400, #E65C00, #FF8C00, #E65C00, #D35400);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
  }
}

/* Gradient sweep animation */
@media (prefers-reduced-motion: no-preference) {
  .sectionHead h2 {
    animation: headingGradientMove 5s ease-in-out infinite;
  }
}

@keyframes headingGradientMove {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

/* Subtle hover brightness */
.sectionHead h2:hover {
  filter: brightness(1.15);
}

@media (prefers-reduced-motion: reduce) {
  .sectionHead h2 {
    animation: none !important;
  }
}

.glass {
  border: 1px solid var(--border);
  background: var(--card);
  border-radius: 22px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .10);
}

.about-timeline {
  margin-top: 24px;
  overflow-x: auto;
  padding: 4px 4px 12px;
  scrollbar-width: thin;
}

.timelineTrack {
  list-style: none;
  margin: 0;
  padding: 22px 0 8px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 1fr);
  gap: 18px;
  min-width: max-content;
  position: relative;
}

.timelineTrack::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 96px;
  right: 96px;
  height: 2px;
  background: linear-gradient(90deg, rgba(215, 182, 90, .18), rgba(215, 182, 90, .9), rgba(215, 182, 90, .18));
}

.timelineStep {
  position: relative;
  min-width: 180px;
  display: grid;
  justify-items: center;
  gap: 8px;
  text-align: center;
  padding: 28px 18px 18px;
  border-radius: 22px;
  border: 1px solid rgba(215, 182, 90, .16);
  background: linear-gradient(180deg, rgba(215, 182, 90, .08), rgba(255, 255, 255, .02));
  box-shadow: 0 18px 44px rgba(0, 0, 0, .08);
}

.timelineStep::before {
  content: "";
  position: absolute;
  top: -2px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--gold);
  border: 4px solid var(--bg);
  box-shadow: 0 0 0 6px rgba(215, 182, 90, .12);
}

html[data-theme="dark"] .timelineStep {
  background: linear-gradient(180deg, rgba(215, 182, 90, .1), rgba(255, 255, 255, .03));
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}

.timelineStepIndex {
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .16em;
  color: var(--muted);
}

.timelineStepIcon {
  font-size: 1.9rem;
  line-height: 1;
}

.timelineStepLabel {
  font-size: 1rem;
  font-weight: 900;
  color: var(--text);
}

/* ── About-section scroll-triggered animations ── */
.animate-hidden {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Gold dot on timeline steps: scale-in with bounce */
.timelineStep.animate-hidden::before {
  transform: scale(0);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.timelineStep.animate-visible::before {
  transform: scale(1);
}

/* Gold connecting line: draw right-to-left */
.timelineTrack.line-hidden::before {
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.7s ease 0.55s;
}

.timelineTrack.line-visible::before {
  transform: scaleX(1);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .animate-hidden {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .timelineStep.animate-hidden::before {
    transition: none !important;
    transform: none !important;
  }

  .timelineTrack.line-hidden::before {
    transition: none !important;
    transform: none !important;
  }
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 42px;
  padding: 0;
  border: none;
  outline: none;
  background: transparent;
  box-shadow: none;
  position: relative;
}

.stats-grid::before {
  content: none;
}

.stats-grid>* {
  position: relative;
  z-index: 1;
}

@media (max-width: 860px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .stats-grid {
    margin-top: 32px;
    padding: 0;
    gap: 14px;
  }
}

.stat-badge {
  position: relative;
  display: grid;
  grid-template-columns: auto;
  grid-template-areas:
    "number"
    "label";
  align-content: center;
  justify-content: center;
  gap: 10px 0;
  min-height: 100px;
  padding: 26px 28px 22px;
  text-align: center;
  direction: ltr;
  background: linear-gradient(168deg, #151820 0%, #0f1117 50%, #12141c 100%);
  border: 1px solid rgba(215, 182, 90, 0.14);
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25),
    0 1px 3px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  transition: border-color 0.35s ease, transform 0.35s cubic-bezier(.2, .9, .3, 1.1), box-shadow 0.35s ease;
}

/* Subtle gold accent line on top edge */
.stat-badge::before {
  content: "";
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 177, 38, 0.5), transparent);
  border-radius: 0 0 4px 4px;
  pointer-events: none;
}

/* Subtle inner shine at the very top */
.stat-badge::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, transparent 100%);
  pointer-events: none;
  border-radius: 20px 20px 0 0;
}

.stat-badge:hover {
  border-color: rgba(215, 182, 90, 0.32);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3),
    0 0 20px rgba(215, 182, 90, 0.08);
  transform: translateY(-3px);
}

.stat-number {
  grid-area: number;
  font-size: clamp(2.05rem, 2vw, 2.55rem);
  font-weight: 800;
  color: #ffb126;
  display: inline-block;
  line-height: 0.92;
  letter-spacing: -0.04em;
  text-shadow: 0 0 14px rgba(255, 177, 38, 0.2);
}

.stat-number::after {
  content: "+";
}

.stat-suffix {
  display: none;
}

.stat-label {
  grid-area: label;
  direction: rtl;
  font-size: 1rem;
  font-weight: 700;
  color: rgba(236, 241, 248, 0.78);
  margin-top: 0;
  display: block;
  line-height: 1.4;
}

[data-theme="light"] .stat-badge {
  background: linear-gradient(168deg, #ffffff 0%, #f8f6f1 50%, #fefefe 100%);
  border: 1px solid rgba(200, 161, 74, 0.22);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06),
    0 1px 3px rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .stat-badge::before {
  background: linear-gradient(90deg, transparent, rgba(200, 141, 30, 0.4), transparent);
}

[data-theme="light"] .stat-badge::after {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, transparent 100%);
}

[data-theme="light"] .stat-badge:hover {
  border-color: rgba(200, 161, 74, 0.38);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08),
    0 0 16px rgba(200, 161, 74, 0.06);
}

[data-theme="light"] .stats-grid {
  border: none;
  outline: none;
  background: transparent;
  box-shadow: none;
}

[data-theme="light"] .stat-label {
  color: rgba(34, 45, 60, 0.72);
}

html[data-theme="dark"] .stat-label {
  color: rgba(236, 241, 248, 0.78);
}

@media (max-width: 640px) {
  .stat-badge {
    min-height: 84px;
    padding: 18px 20px 16px;
    border-radius: 20px;
  }

  .stat-label {
    font-size: 0.95rem;
  }
}

.pad {
  padding: 18px
}

.controls {
  display: grid;
  grid-template-columns: 1.2fr 1fr auto;
  gap: 12px;
  padding: 14px;
}

.control label {
  display: block;
  font-weight: 800;
  font-size: .95rem;
  margin: 0 0 6px
}

.control input,
.control select,
textarea {
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .42);
  padding: 10px 12px;
  color: var(--text);
  outline: none;
  font-family: inherit;
}

html[data-theme="dark"] .control input,
html[data-theme="dark"] .control select,
html[data-theme="dark"] textarea {
  background: rgba(0, 0, 0, .25);
}

.controlBtn {
  display: flex;
  align-items: end
}

.masonry {
  margin-top: 16px;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 10px !important;
  width: 100% !important;
  max-width: 100% !important;
  column-count: unset !important;
  column-gap: unset !important;
  align-items: start;
}

.masonry .work-item,
.masonry>div,
.masonry>a {
  width: 100% !important;
  aspect-ratio: 3 / 2.5 !important;
  break-inside: unset !important;
  overflow: hidden !important;
}

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

@media (max-width: 1200px) {
  .masonry {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .masonry {
    grid-template-columns: 1fr !important;
  }
}

.showcase .masonry {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 920px) {
  .showcase .masonry {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .controls {
    grid-template-columns: 1fr;
  }

  .brandMini {
    min-width: auto
  }

  .nav {
    display: none
  }

  .stats {
    grid-template-columns: 1fr;
  }

  .heroTitle {
    font-size: 1.6rem
  }
}

.workCard {
  width: 100%;
  display: block;
  border: 1px solid var(--border);
  background: var(--card2);
  border-radius: 20px;
  overflow: hidden;
  margin: 0 0 12px;
  break-inside: avoid;
  cursor: zoom-in;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .08);
  transition: transform .18s ease, box-shadow .18s ease;
  position: relative;
  isolation: isolate;
}

.workCard::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s ease;
  background:
    radial-gradient(600px 260px at 50% 0%, rgba(200, 161, 74, .35), transparent 60%),
    radial-gradient(700px 300px at 50% 100%, rgba(120, 190, 255, .18), transparent 60%);
}

.workCard img {
  width: 100%;
  aspect-ratio: 3 / 2.5;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .22s ease, filter .22s ease;
  /*
    Avoid forcing compositor layers for every image.
    On some desktop Chromium builds this interacts badly with multi-column layout
    and can cause "blank until zoom" paint glitches.
  */
}

.workCard:hover,
.workCard:focus-visible {
  transform: translateY(-3px) scale(1.01);
  box-shadow:
    0 18px 44px rgba(0, 0, 0, .14),
    0 0 0 1px rgba(200, 161, 74, .30),
    0 0 28px rgba(200, 161, 74, .18),
    0 0 55px rgba(120, 190, 255, .08);
  outline: none;
}

.workCard:hover::after,
.workCard:focus-visible::after {
  opacity: 1;
}

.workCard:hover img,
.workCard:focus-visible img {
  transform: scale(1.03);
  filter: brightness(1.05) saturate(1.12);
}

.pager {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 16px;
}

.pageInfo {
  margin: 10px 0 0;
  text-align: center
}

/* Section navigation buttons */
.sectionNav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 10px 0 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.sectionNavBtn {
  min-width: 38px;
  height: 38px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--btnSub);
  color: var(--btnSubText);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: all .2s ease;
  font-family: inherit;
}

.sectionNavBtn:hover {
  background: rgba(255, 165, 0, 0.15);
  border-color: var(--gold);
  color: var(--gold);
}

.sectionNavBtn.active {
  background: var(--btn);
  border-color: var(--btn);
  color: var(--btnText);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.faq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 14px
}

.faqItem {
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px;
  background: var(--card2);
}

.faqItem h3 {
  margin: 0 0 6px;
  font-size: 1.1rem
}


/* FAQ mobile */
@media (max-width: 560px) {
  .faq {
    grid-template-columns: 1fr;
  }
}

/* احترام تفضيل تقليل الحركة */

.contactGrid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 12px;
}

@media (max-width: 860px) {
  .contactGrid {
    grid-template-columns: 1fr
  }
}

.contactCard {
  display: block
}

/* WhatsApp link styling (no underline + green title) */
.contactCard,
.contactCard * {
  text-decoration: none !important;
}

.contactCard .contactTitle {
  color: #25D366;
}

html[data-theme="dark"] .contactCard .contactTitle {
  text-shadow: 0 0 14px rgba(37, 211, 102, .16);
}

.contactCard:hover .contactTitle {
  filter: saturate(1.08);
}

.contactTitle {
  font-weight: 900;
  font-size: 1.2rem;
  margin-bottom: 4px
}

.form {
  display: grid;
  gap: 12px
}

.formRow label {
  display: block;
  font-weight: 800;
  margin: 0 0 6px
}

textarea {
  resize: vertical;
  min-height: 110px
}

.formRow input,
.formRow textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--fieldBorder);
  background: var(--fieldBg);
  color: var(--text);
  font: inherit;
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease, background .15s ease;
}

.formRow input::placeholder,
.formRow textarea::placeholder {
  color: var(--muted);
  opacity: .85;
}

.formRow input:focus,
.formRow textarea:focus {
  border-color: rgba(215, 182, 90, .55);
  box-shadow: 0 0 0 3px var(--fieldFocus), inset 0 1px 0 rgba(255, 255, 255, .16);
}

html[data-theme="dark"] .formRow input,
html[data-theme="dark"] .formRow textarea {
  border-color: var(--fieldBorder);
  background: var(--fieldBg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.footer {
  padding: 26px 0 0;
  text-align: center;
}

/* Ensure hidden elements are actually hidden (fixes lightbox showing on load) */
.lightbox[hidden] {
  display: none !important;
}

.lightbox {
  opacity: 0;
  transition: opacity .18s ease;
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .75);
  z-index: 80;
  padding: 20px;
}

.lightbox.open {
  opacity: 1;
}

.lightbox.open .lightboxInner {
  transform: translateY(0) scale(1);
  opacity: 1;
}


.lightboxInner {
  transform: translateY(8px) scale(.96);
  opacity: 0;
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), opacity .18s ease;
  width: min(980px, 96vw);
  border-radius: 22px;
  overflow: hidden;
  background: rgba(0, 0, 0, .25);
  border: 1px solid rgba(255, 255, 255, .18);
  position: relative;
}

.lightboxImg {
  width: 100%;
  object-fit: contain;
  display: block;
  background: rgba(0, 0, 0, .12);
  position: relative;
  z-index: 1;
}

.lightboxImg.lbPop {
  animation: lbPopZoom .26s cubic-bezier(.2, .8, .2, 1);
}

@keyframes lbPopZoom {
  0% {
    transform: scale(.96);
    opacity: 0
  }

  100% {
    transform: scale(1);
    opacity: 1
  }
}

.lbClose {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(0, 0, 0, .35);
  color: #fff;
  cursor: pointer;
  z-index: 7;
  pointer-events: auto;
  touch-action: manipulation;
}

.lbNav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(0, 0, 0, .28);
  color: #fff;
  cursor: pointer;
  z-index: 6;
  pointer-events: auto;
  touch-action: manipulation;
}

.lbPrev {
  inset-inline-start: 10px
}

.lbNext {
  inset-inline-end: 10px
}

/* Hide any under-image captions if present */
.workMeta,
.workCaption {
  display: none !important;
}

/* ---------- Favorites (مفضلة) ---------- */
.workCard .favBtn {
  position: absolute;
  bottom: 12px;
  inset-inline-end: 12px;
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .16);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .22s ease, border-color .22s ease;
}

html[data-theme="dark"] .workCard .favBtn {
  background: rgba(18, 20, 24, .72);
  border-color: rgba(255, 255, 255, .16);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .52);
}

.workCard .favBtn:active {
  transform: scale(.96);
}

.workCard .favBtn .favHeart {
  font-size: 18px;
  line-height: 1;
  color: rgba(20, 22, 26, .92);
  transition: color .18s ease, transform .18s ease, text-shadow .18s ease;
}

html[data-theme="dark"] .workCard .favBtn .favHeart {
  color: rgba(255, 255, 255, .92);
}

.workCard .favBtn.isOn .favHeart {
  color: #ff8a00;
  text-shadow: 0 10px 24px rgba(255, 138, 0, .35);
}

html[data-theme="dark"] .workCard .favBtn.isOn .favHeart {
  color: #ff8a00;
  text-shadow: 0 10px 24px rgba(255, 138, 0, .28);
}

.workCard .favBtn.pop .favHeart {
  animation: favHeartPop .28s ease;
}

@keyframes favHeartPop {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.22);
  }

  100% {
    transform: scale(1);
  }
}

.workCard .favBtn.isOn {
  border-color: rgba(255, 138, 0, .45);
  background: rgba(255, 138, 0, .10);
}

html[data-theme="dark"] .workCard .favBtn.isOn {
  border-color: rgba(242, 201, 76, .42);
  background: rgba(242, 201, 76, .12);
}

/* Floating favorites button */
.favFab {
  position: fixed;
  inset-inline-start: 18px;
  bottom: 18px;
  z-index: 40;
  width: 54px;
  height: 54px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

html[data-theme="dark"] .favFab {
  background: rgba(18, 20, 24, .72);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .48);
}

.favFabIcon {
  color: var(--gold);
  font-size: 18px;
}

.favFabCount {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  background: rgba(215, 182, 90, .18);
  border: 1px solid rgba(215, 182, 90, .35);
  color: var(--text);
}

.favFab:not(.has) .favFabCount {
  opacity: .55;
}

/* Drawer */
.favDrawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .14s ease;
}

.favDrawer.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.favSheet {
  position: absolute;
  inset-inline-end: 16px;
  top: 16px;
  bottom: 16px;
  width: min(420px, calc(100% - 32px));
  border-radius: 18px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .18);
  transform: translateY(10px);
  transition: transform .14s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

html[data-theme="dark"] .favSheet {
  background: rgba(18, 20, 24, .92);
  box-shadow: 0 24px 90px rgba(0, 0, 0, .65);
}

.favDrawer.open .favSheet {
  transform: translateY(0);
}

.favHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 14px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
}

.favTitle {
  font-weight: 900;
  letter-spacing: .2px;
}

.favClose {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, .08);
  background: transparent;
  color: var(--text);
}

html[data-theme="dark"] .favHead {
  border-bottom: 1px solid rgba(255, 255, 255, .10);
}

html[data-theme="dark"] .favClose {
  border-color: rgba(255, 255, 255, .12);
}

.favBody {
  padding: 12px 14px;
  overflow: auto;
  flex: 1;
}

.favEmpty {
  margin: 10px 0 0;
}

.favList {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.favItem {
  display: flex;
  gap: 10px;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 14px;
  padding: 10px;
  background: rgba(255, 255, 255, .75);
}

.favThumb {
  width: 74px;
  height: 74px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(0, 0, 0, .08);
}

.favThumbWrap {
  position: relative;
  width: 74px;
  height: 74px;
  flex: 0 0 auto;
}

.favThumbWrap .favThumb {
  width: 100%;
  height: 100%;
  display: block;
}

.favIdx {
  position: absolute;
  top: -8px;
  right: -8px;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 12px;
  line-height: 1;
  background: rgba(0, 0, 0, .72);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 8px 18px rgba(0, 0, 0, .22);
}

html[data-theme="dark"] .favIdx {
  background: rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .92);
  border-color: rgba(255, 255, 255, .18);
}

.favHelp {
  margin: 6px 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, .08);
  background: rgba(255, 255, 255, .55);
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(20, 22, 26, .88);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.favHelp b {
  font-weight: 900;
}

html[data-theme="dark"] .favHelp {
  border-color: rgba(255, 255, 255, .12);
  background: rgba(18, 20, 24, .40);
  color: rgba(255, 255, 255, .86);
}

html[data-theme="dark"] .favItem {
  background: rgba(18, 20, 24, .62);
  border-color: rgba(255, 255, 255, .12);
}

html[data-theme="dark"] .favThumb {
  border-color: rgba(255, 255, 255, .12);
}

.favInfo {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}

.favTags {
  font-weight: 800;
  font-size: 13px;
}

.favItemBtns {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
}

.favFoot {
  padding: 12px 14px 14px;
  border-top: 1px solid rgba(0, 0, 0, .06);
  display: flex;
  gap: 10px;
}

html[data-theme="dark"] .favFoot {
  border-top: 1px solid rgba(255, 255, 255, .10);
}

/* Feedback when adding to favorites */
.favFab.pulse {
  animation: favPulse 900ms ease-out;
}

@keyframes favPulse {
  0% {
    transform: scale(1);
    box-shadow: var(--shadow);
  }

  35% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(215, 182, 90, .18), var(--shadow);
  }

  100% {
    transform: scale(1);
    box-shadow: var(--shadow);
  }
}

.favFabCount.bump {
  animation: favBump 520ms cubic-bezier(.2, 1.25, .2, 1);
}

@keyframes favBump {
  0% {
    transform: scale(1);
  }

  40% {
    transform: scale(1.22);
  }

  100% {
    transform: scale(1);
  }
}

.favToast {
  position: fixed;
  inset-inline-start: 86px;
  bottom: 22px;
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow);
  color: var(--text);
  direction: rtl;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .18s ease, transform .18s ease;
}

.favToast.show {
  opacity: 1;
  transform: translateY(0);
}

.favToast::before {
  content: "";
  position: absolute;
  inset-inline-start: -7px;
  bottom: 18px;
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, .92);
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transform: rotate(45deg);
}

html[data-theme="dark"] .favToast {
  background: rgba(18, 20, 24, .92);
}

html[data-theme="dark"] .favToast::before {
  background: rgba(18, 20, 24, .92);
}

.favToastText {
  font-weight: 800;
  font-size: 13px;
}

.favToastAction {
  border-radius: 999px;
  border: 1px solid rgba(215, 182, 90, .45);
  background: rgba(215, 182, 90, .18);
  color: var(--text);
  padding: 7px 10px;
  font-weight: 900;
  cursor: pointer;
}

@media (max-width: 520px) {
  .favToast {
    inset-inline-start: 18px;
    bottom: 84px;
  }

  .favToast::before {
    display: none;
  }
}

/* Lightbox meta */
.lbMeta {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 10px 0;
  position: relative;
  z-index: 2;
}

.lbTags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.tagChip {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, .08);
  background: rgba(255, 255, 255, .72);
  font-size: 12px;
  font-weight: 800;
  color: var(--text);
}

.lbBtns {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.lbBtn {
  border-radius: 999px;
  border: 1px solid var(--border);
  padding: 10px 14px;
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-weight: 900;
  cursor: pointer;
}

.lbFav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.lbBtn .favHeart {
  font-size: 18px;
  line-height: 1;
  display: inline-block;
  transition: color .18s ease, transform .18s ease, text-shadow .18s ease;
}

.lbBtn.isOn .favHeart {
  color: #ff8a00;
  text-shadow: 0 10px 24px rgba(255, 138, 0, .30);
}

.lbBtn.isOn {
  background: rgba(255, 138, 0, .10);
  border-color: rgba(255, 138, 0, .45);
  color: inherit;
}

html[data-theme="dark"] .lbBtn.isOn {
  background: rgba(255, 138, 0, .10);
  border-color: rgba(255, 138, 0, .45);
  color: inherit;
}

/* Lightbox layout fix to show tags/buttons */
.lightboxInner {
  display: flex;
  flex-direction: column;
}

.lightboxImg {
  height: auto;
  position: relative;
  z-index: 1;
}

/* --- Overrides: hide tag chips under images (keep tags for search) --- */
.lbTags {
  display: none !important;
}

/* ---------- Animated texture overlay (subtle) ---------- */

/* ---------- Cursor FX ---------- */
/* don't hide the system cursor unless JS enables it */



/* -----------------------------------------------------------
   Smooth reveal animations (no sudden fades)
----------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(10px);
  transition:
    opacity .70s ease,
    transform .70s ease,
    filter .70s ease;
  transition-delay: var(--rDelay, 0ms);
  will-change: opacity, transform, filter;
}

.reveal.in {
  opacity: 1;
  transform: none;
  filter: none;
}

.workCard.reveal {
  transform: none;
  /* avoid conflicts with hover transforms */
}

/* -----------------------------------------------------------
   Skeleton loading for works (prevents image pop)
----------------------------------------------------------- */
@keyframes skShimmer {
  0% {
    background-position: 0% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

.workCard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
  background:
    linear-gradient(90deg,
      rgba(255, 255, 255, .06),
      rgba(255, 255, 255, .14),
      rgba(255, 255, 255, .06));
  background-size: 200% 100%;
  animation: skShimmer 1.25s linear infinite;
}

[data-theme="light"] .workCard::before {
  background:
    linear-gradient(90deg,
      rgba(0, 0, 0, .05),
      rgba(0, 0, 0, .10),
      rgba(0, 0, 0, .05));
}

.workCard.isLoading::before {
  opacity: 1;
}

.workCard img {
  position: relative;
  z-index: 1;
}

.workCard.isLoading img {
  opacity: 0;
}

.workCard.isLoaded img {
  opacity: 1;
  transition: opacity .45s ease;
}

.workCard .favBtn {
  z-index: 2;
}

/* -----------------------------------------------------------
   Presentation toast
----------------------------------------------------------- */
.noticeToast {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(-10px);
  opacity: 0;
  z-index: 9999;
  pointer-events: none;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(10, 12, 14, .75);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  font-weight: 800;
  letter-spacing: .2px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .24);
  transition: opacity .22s ease, transform .22s ease;
}

[data-theme="light"] .noticeToast {
  background: rgba(255, 255, 255, .86);
  color: #101010;
  border-color: rgba(0, 0, 0, .12);
}

.noticeToast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* -----------------------------------------------------------
   Logo / hero effects (premium, subtle)
----------------------------------------------------------- */
@keyframes logoFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-6px);
  }
}

@keyframes titleShine {
  from {
    transform: translateX(-120%);
  }

  to {
    transform: translateX(120%);
  }
}

.heroBrand {
  position: relative;
}

.heroBrand::after {
  content: "";
  position: absolute;
  inset: -26px;
  pointer-events: none;
  opacity: 0;
  filter: blur(26px);
  transition: opacity .35s ease;
  background:
    radial-gradient(380px 180px at 50% 30%, rgba(200, 161, 74, .22), transparent 62%),
    radial-gradient(420px 220px at 50% 85%, rgba(120, 190, 255, .14), transparent 65%);
}

.heroBrand:hover::after {
  opacity: 1;
}

.heroLogo {
  filter: drop-shadow(0 18px 44px rgba(0, 0, 0, .30));
  transition: transform .35s ease, filter .35s ease;
}

[data-theme="dark"] .heroLogo {
  filter:
    drop-shadow(0 18px 44px rgba(0, 0, 0, .38)) drop-shadow(0 0 18px rgba(200, 161, 74, .12));
}

.heroBrand:hover .heroLogo {
  transform: translateY(-4px) scale(1.01);
  filter:
    drop-shadow(0 22px 55px rgba(0, 0, 0, .38)) drop-shadow(0 0 22px rgba(200, 161, 74, .16));
}

@media (prefers-reduced-motion: no-preference) {
  .heroLogo {
    animation: logoFloat 7.5s ease-in-out infinite;
  }
}

.heroTitle {
  position: relative;
}

/* Underline removed */
.heroTitle::after,
.heroCard:hover .heroTitle::after {
  content: none !important;
  display: none !important;
}


/* -----------------------------------------------------------
   Reduce motion: disable animations
----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  .workCard::before {
    animation: none !important;
  }

  .heroLogo {
    animation: none !important;
  }
}


/* Prevent scroll anchoring from fighting our scroll-to-top on pagination */
#works,
#worksGrid {
  overflow-anchor: none;
}


/* =============================
   Patch: Logo hover (no glow)
   ============================= */
.heroBrand::after {
  display: none !important;
}

.heroLogo {
  filter: none !important;
  animation: none !important;
  transform: none;
  transition: transform .22s ease;
  transform-origin: 50% 50%;
}

.heroBrand:hover .heroLogo {
  transform: scale(1.08);
  filter: none !important;
}

/* =============================
   Patch: Lightbox open animation
   ============================= */
@keyframes lbFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes lbPopIn {
  from {
    transform: translateY(10px) scale(.965);
    opacity: 0;
  }

  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes lbImgIn {
  from {
    transform: scale(.985);
    filter: blur(6px);
    opacity: 0;
  }

  to {
    transform: scale(1);
    filter: blur(0);
    opacity: 1;
  }
}

.lightbox:not([hidden]) {
  animation: lbFadeIn .18s ease both;
}

.lightbox:not([hidden]) .lightboxInner {
  animation: lbPopIn .30s cubic-bezier(.2, .8, .2, 1) both;
}

.lightbox:not([hidden]) .lightboxImg {
  animation: lbImgIn .34s cubic-bezier(.2, .8, .2, 1) both;
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {

  .lightbox:not([hidden]),
  .lightbox:not([hidden]) .lightboxInner,
  .lightbox:not([hidden]) .lightboxImg {
    animation: none !important;
    position: relative;
    z-index: 1;
  }
}

/* ================================
   Patch: Logo (remove glow) + Lightbox pop/zoom (visible)
   ================================ */

/* Remove any glow/shadow from hero logo — keep only premium scale on hover */
.heroLogo {
  filter: none !important;
  box-shadow: none !important;
  animation: none !important;
  transition: transform .35s ease !important;
  will-change: transform;
}

.heroBrand:hover .heroLogo {
  transform: scale(1.06) !important;
  filter: none !important;
}

.heroBrand::after {
  display: none !important;
}

/* Ensure Lightbox has a clear pop/zoom effect on open */
.lightbox {
  opacity: 0;
  transition: opacity .28s ease !important;
}

.lightbox.open {
  opacity: 1;
}

.lightboxInner {
  transform: translateY(14px) scale(.92);
  opacity: 0;
  transition: transform .38s cubic-bezier(.2, .8, .2, 1), opacity .25s ease !important;
}

.lightbox.open .lightboxInner {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Animate the image itself (more obvious than before) */
.lightboxImg {
  transform: scale(.92);
  opacity: 0;
  transition: transform .42s cubic-bezier(.2, .8, .2, 1), opacity .25s ease !important;
  position: relative;
  z-index: 1;
}

.lightbox.open .lightboxImg {
  transform: scale(1);
  opacity: 1;
  position: relative;
  z-index: 1;
}

/* Re-trigger pop on next/prev */
.lightboxImg.lbPop {
  animation: lbPopZoom .32s cubic-bezier(.2, .8, .2, 1) both !important;
}

@keyframes lbPopZoom {
  0% {
    transform: scale(.90);
    opacity: .35;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Disable older keyframe animations that could conflict */
.lightbox:not([hidden]) .lightboxInner,
.lightbox:not([hidden]) .lightboxImg {
  animation: none !important;
  position: relative;
  z-index: 1;
}

/* =========================================================
   FIX: Lightbox 70% viewport sizing
   ========================================================= */
.lightboxInner {
  width: 110vw !important;
  max-width: 110vw !important;
  height: 110vh !important;
  max-height: 110vh !important;
}

.lightboxImg {
  width: 100% !important;
  height: 100% !important;
  max-height: 110vh !important;
  object-fit: contain !important;
}

/* =========================================================
   FIX: Smooth hide/show controls on zoom
   ========================================================= */
.lbClose,
.lbPrev,
.lbNext,
.lbFooter,
.lbMeta {
  transition: opacity 0.25s ease !important;
}

/* =========================================================
   FIX: Zoom hint pill (Arabic text)
   ========================================================= */
.lbZoomHint {
  position: absolute;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  padding: 8px 18px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  direction: rtl;
}

.lbZoomHint.show {
  opacity: 1;
}

/* =========================================================
   FIX: Zoom reset button styling
   ========================================================= */
.lbZoomReset {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(0, 0, 0, .35);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  z-index: 7;
  pointer-events: auto;
  touch-action: manipulation;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.lbZoomReset.show {
  opacity: 1;
}



/* =========================================================
   FINAL (User Request): Remove any glow/lighting on hero logo
   - No drop-shadows / radial glow around the logo
   - Only a subtle scale on hover
   ========================================================= */
#heroLogo,
.heroLogo {
  filter: none !important;
  box-shadow: none !important;
}

/* Kill any pseudo-element glow around the brand block */
.heroBrand::before,
.heroBrand::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  filter: none !important;
  background: none !important;
}

/* Subtle hover scale only */
.heroBrand #heroLogo,
.heroBrand .heroLogo {
  transform: scale(1) !important;
  transition: transform .25s ease !important;
  will-change: transform;
}

.heroBrand:hover #heroLogo,
.heroBrand:hover .heroLogo {
  transform: scale(1.04) !important;
}




/* ============================================================
   Patch v11: Logo = no glow, only subtle hover scale
   - Enforces no drop-shadow/filter artifacts from older rules
   - Keeps a premium, simple interaction
============================================================ */
.heroLogo,
#heroLogo {
  filter: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  animation: none !important;
  transform: translateZ(0);
  transition: transform .22s ease !important;
  will-change: transform;
}

.heroBrand::after,
.heroBrand:hover::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  filter: none !important;
}

.heroBrand:hover .heroLogo,
.heroBrand:hover #heroLogo {
  transform: scale(1.04) !important;
}

.heroBrand:not(:hover) .heroLogo,
.heroBrand:not(:hover) #heroLogo {
  transform: scale(1) !important;
}




/* ============================================================
   Patch v11b: heroTitle — underline removed
============================================================ */
[data-theme="dark"] .heroTitle {
  text-shadow: none;
}

[data-theme="dark"] .heroTitle::after,
[data-theme="light"] .heroTitle::after {
  content: none !important;
  display: none !important;
}


/* ============================================================
   Patch v11c: Lightbox pop/zoom (enforced)
============================================================ */
.lightboxImg.lbPop {
  animation: lbPopZoom .32s cubic-bezier(.2, .8, .2, 1) both !important;
}


/* ---------- Background audio ---------- */
.audioWrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.audioBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
}

.audioSvg {
  display: block;
}

.audioBtn .slash {
  display: none;
}

.audioBtn.isPaused .wave1,
.audioBtn.isPaused .wave2 {
  display: none;
}

.audioBtn.isPaused .slash {
  display: block;
}

.audioBtn.isPlaying .slash {
  display: none;
}

.audioBtn.isPlaying .wave1 {
  animation: audioWave 1.2s ease-in-out infinite;
}

.audioBtn.isPlaying .wave2 {
  animation: audioWave 1.2s ease-in-out infinite;
  animation-delay: .15s;
}

@keyframes audioWave {

  0%,
  100% {
    opacity: .55;
  }

  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {

  .audioBtn.isPlaying .wave1,
  .audioBtn.isPlaying .wave2 {
    animation: none !important;
  }
}



/* ---------- Floating Auto Presentation Button ---------- */
.autoShowFab {
  position: fixed;
  inset-inline-start: 18px;
  /* RTL: right, LTR: left */
  bottom: 86px;
  /* sits above the favorites FAB */
  z-index: 45;
  border: 1px solid var(--border);
  background: rgba(18, 20, 24, .62);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--text);
  border-radius: 999px;
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow:
    0 14px 40px rgba(0, 0, 0, .32),
    0 0 0 1px rgba(215, 182, 90, .10),
    0 0 24px rgba(215, 182, 90, .10);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, box-shadow .25s ease;
  font-weight: 900;
  letter-spacing: .2px;
  white-space: nowrap;
}

html[data-theme="light"] .autoShowFab {
  background: rgba(255, 255, 255, .78);
  box-shadow:
    0 14px 36px rgba(0, 0, 0, .12),
    0 0 0 1px rgba(200, 161, 74, .14),
    0 0 22px rgba(200, 161, 74, .10);
}

.autoShowFab.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.autoShowFab:hover {
  box-shadow:
    0 18px 54px rgba(0, 0, 0, .40),
    0 0 0 1px rgba(215, 182, 90, .18),
    0 0 34px rgba(215, 182, 90, .16);
}

.autoShowFab:active {
  transform: translateY(1px);
}

.autoShowIcon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(215, 182, 90, .22), rgba(215, 182, 90, .08));
  border: 1px solid rgba(215, 182, 90, .22);
  color: var(--goldSoft);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .25);
  font-size: 16px;
}

.autoShowFab.active .autoShowIcon {
  background: linear-gradient(180deg, rgba(215, 182, 90, .30), rgba(215, 182, 90, .14));
  border-color: rgba(215, 182, 90, .32);
  box-shadow: 0 12px 26px rgba(215, 182, 90, .12), 0 18px 52px rgba(0, 0, 0, .35);
}

.autoShowText {
  font-size: .95rem;
  line-height: 1;
}

@media (max-width: 520px) {
  .autoShowFab {
    bottom: 92px;
    padding: 10px 12px;
  }

  .autoShowText {
    font-size: .90rem;
  }
}



/* ---------- Lightbox: thumbnails + progress ---------- */
.lbFooter {
  padding: 10px 12px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  z-index: 2;
}

.lbProgress {
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .10);
  overflow: hidden;
  position: relative;
}

html[data-theme="light"] .lbProgress {
  background: rgba(0, 0, 0, .06);
  border-color: rgba(0, 0, 0, .08);
}

.lbProgressFill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg,
      rgba(215, 182, 90, 0),
      rgba(215, 182, 90, .95),
      rgba(215, 182, 90, .55));
  transition: width .22s ease;
}

.lbCounter {
  position: absolute;
  top: -18px;
  inset-inline-end: 2px;
  font-size: .85rem;
  font-weight: 800;
  color: rgba(255, 255, 255, .78);
  text-shadow: 0 10px 28px rgba(0, 0, 0, .55);
  user-select: none;
}

html[data-theme="light"] .lbCounter {
  color: rgba(20, 20, 20, .72);
  text-shadow: 0 10px 22px rgba(0, 0, 0, .10);
}

.lbThumbs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.lbThumbs::-webkit-scrollbar {
  height: 8px;
}

.lbThumbs::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, .16);
  border-radius: 999px;
}

html[data-theme="light"] .lbThumbs::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, .12);
}

.lbThumb {
  flex: 0 0 auto;
  width: 64px;
  height: 46px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(0, 0, 0, .18);
  cursor: pointer;
  opacity: .82;
  scroll-snap-align: center;
  transition: transform .14s ease, opacity .14s ease, border-color .14s ease, box-shadow .18s ease;
}

html[data-theme="light"] .lbThumb {
  border-color: rgba(0, 0, 0, .10);
  background: rgba(255, 255, 255, .65);
}

.lbThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.02);
  transform: scale(1.02);
}

.lbThumb:hover {
  opacity: .96;
  transform: translateY(-1px);
}

.lbThumb:active {
  transform: translateY(0) scale(.98);
}

.lbThumb.isActive {
  opacity: 1;
  border-color: rgba(215, 182, 90, .75);
  box-shadow:
    0 0 0 2px rgba(215, 182, 90, .14),
    0 18px 50px rgba(0, 0, 0, .45);
}

@media (max-width: 520px) {
  .lbThumb {
    width: 56px;
    height: 40px;
    border-radius: 10px;
  }

  .lbCounter {
    top: -16px;
    font-size: .8rem;
  }
}


/* Auto slideshow button placed inside Works header */
.autoShowInline {
  position: static;
  inset: auto;
  bottom: auto;
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.worksHead {
  align-items: center;
}

@media (max-width: 560px) {
  .worksHead {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .worksHead .autoShowInline {
    order: 3;
    margin-top: 6px;
  }
}



/* Works grid: cards look comfy and consistent */
#worksGrid.masonry .workCard {
  margin: 0 !important;
  aspect-ratio: 3 / 2.5 !important;
  cursor: zoom-in;
  overflow: hidden !important;
  break-inside: unset !important;
}

#worksGrid.masonry .workCard img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}


/* Hero underline removed */
.heroCard:hover .heroTitle::after {
  content: none !important;
  display: none !important;
}






/* ---------------- Brand orange for titles + stats (updated for gradient text) ---------------- */
:root {
  --brandOrange: #ffa500;
  --brandOrangeSoft: #ffb000;
  --brandOrangeGlow: rgba(255, 165, 0, .70);
}

/* Stats orange — dark */
html[data-theme="dark"] .statNum,
html[data-theme="dark"] .statNumber,
html[data-theme="dark"] .statValue {
  color: var(--brandOrangeSoft) !important;
  text-shadow:
    0 0 18px var(--brandOrangeGlow),
    0 10px 40px rgba(0, 0, 0, .55);
}

/* Stats orange — light */
html[data-theme="light"] .statNum,
html[data-theme="light"] .statNumber,
html[data-theme="light"] .statValue {
  color: var(--brandOrange) !important;
  text-shadow: none;
}

/* ---------- WhatsApp icon in Contact section ---------- */
.wa-icon {
  display: inline-flex;
  align-items: center;
  margin-inline-end: 6px;
  vertical-align: middle;
}

.wa-icon .fa-whatsapp {
  color: #25D366;
  font-size: 1.2em;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Pulse animation every 2s */
@media (prefers-reduced-motion: no-preference) {
  .wa-icon .fa-whatsapp {
    animation: waPulse 2s ease-in-out infinite;
  }
}

@keyframes waPulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.15);
  }
}

/* On hover over contact card: rotate the icon 360deg */
.contactCard:hover .wa-icon .fa-whatsapp {
  animation: none;
  transform: rotate(360deg);
}



/* ---------------- Desktop scale (cross-browser) ----------------
   Note: we cannot force browser zoom. This scales the site layout on desktop.
   Uses CSS zoom where supported, and transform+width fallback (Firefox).
*/
:root {
  --siteScale: .75;
}

/* Apply only on desktop-like devices */
@media (hover:hover) and (pointer:fine) {
  html.dp-zoom {
    zoom: var(--siteScale);
  }

  html.dp-transform body {
    transform: scale(var(--siteScale));
    transform-origin: top center;
    width: calc(100% / var(--siteScale));
    min-height: calc(100vh / var(--siteScale));
  }

  html.dp-transform {
    overflow-x: hidden;
  }
}

/* ==================== DYNAMIC REVIEWS SECTION ==================== */

#reviews {
  --reviews-gold: #F5A623;
  --reviews-bg: #0f1117;
  --reviews-border: rgba(245, 166, 35, .22);
  --reviews-text: #aaa;
  --reviews-track-gap: 20px;
  --carousel-duration: 30s;
}

.reviewsHeader {
  display: grid;
  gap: 12px;
  margin-bottom: 24px;
}

.reviewsHead {
  margin-bottom: 0;
  align-items: center;
  flex-wrap: wrap;
}

.reviewsSummary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid rgba(245, 166, 35, .24);
  border-radius: 999px;
  background: rgba(15, 17, 23, .92);
  box-shadow: 0 -2px 12px rgba(245, 166, 35, .10);
  white-space: nowrap;
}

.summaryStars {
  color: var(--reviews-gold);
  font-size: 1.15rem;
  line-height: 1;
}

.summaryText {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: rgba(255, 255, 255, .78);
}

.avgRating {
  color: #fff;
  font-size: 1.24rem;
  font-weight: 900;
}

.avgSep,
.totalReviews {
  color: rgba(255, 255, 255, .72);
  font-weight: 700;
}

.reviewsSubtitle {
  margin: 0;
  text-align: center;
  color: rgba(255, 255, 255, .62);
}

#reviews,
.reviewsRailWrap {
  overflow: visible;
}

.reviewsRailWrap {
  width: 100%;
}

.liveReviews {
  position: relative;
  margin-inline: auto;
  box-sizing: border-box;
}

/* ── Arrow Slider ── */
.reviewsSlider {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.sliderViewport {
  overflow: hidden;
  flex: 1;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 2%, black 98%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 2%, black 98%, transparent 100%);
}

/* ── Centered layout (1-4 reviews) ── */
.reviewsCentered {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  direction: rtl;
}

.sliderTrack {
  display: flex;
  gap: 20px;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
  direction: ltr;
}

.sliderBtn {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(245, 166, 35, 0.4);
  background: rgba(15, 17, 23, 0.9);
  color: #F5A623;
  font-size: 1.6rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s, opacity 0.2s;
  z-index: 2;
}

.sliderBtn:hover {
  background: rgba(245, 166, 35, 0.12);
  border-color: rgba(245, 166, 35, 0.7);
}

.sliderBtn:disabled {
  opacity: 0.25;
  cursor: default;
}

/* ── New review highlight ── */
.liveReviewCard.review-new {
  border-color: #F5A623 !important;
  box-shadow: 0 0 0 2px rgba(245, 166, 35, 0.6),
              0 0 24px rgba(245, 166, 35, 0.4),
              0 0 48px rgba(245, 166, 35, 0.15);
  animation: reviewGoldPulse 2.5s ease-out forwards;
}

@keyframes reviewGoldPulse {
  0%  { box-shadow: 0 0 0 2px rgba(245,166,35,0.8), 0 0 32px rgba(245,166,35,0.6); }
  60% { box-shadow: 0 0 0 2px rgba(245,166,35,0.4), 0 0 48px rgba(245,166,35,0.2); }
  100%{ box-shadow: 0 0 0 1px rgba(245,166,35,0.15), 0 8px 24px rgba(0,0,0,0.4); }
}

.reviewsLoading,
.liveReviewsEmpty {
  min-width: min(360px, calc(100vw - 48px));
  padding: 34px 22px;
  margin-inline: auto;
  text-align: center;
  color: rgba(255, 255, 255, .62);
  border-radius: 18px;
  border: 1px dashed rgba(245, 166, 35, .18);
  background: rgba(15, 17, 23, .9);
}

.liveReviewCard {
  position: relative;
  flex: 0 0 300px;
  width: 300px;
  min-width: 300px;
  max-width: 300px;
  min-height: 0;
  height: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 20px;
  border: 1px solid rgba(245, 166, 35, 0.15);
  border-left: 3px solid var(--reviews-gold);
  border-radius: 16px;
  background: linear-gradient(145deg, #13161e, #0c0f14);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  direction: rtl;
  text-align: right;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, opacity .22s ease;
}

/* Centered mode: cards adapt width */
.reviewsCentered .liveReviewCard {
  flex: 1 1 260px;
  min-width: 260px;
  max-width: 420px;
  width: auto;
}

.liveReviewCard.review-entry {
  opacity: 0;
  transform: translateY(28px);
}

#reviews.reviews-entered .liveReviewCard.review-entry {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity .6s ease,
    transform .6s ease,
    box-shadow .22s ease,
    border-color .22s ease;
  transition-delay: calc(var(--review-index, 0) * 100ms);
}

.liveReviewCard:hover {
  transform: translateY(-4px);
  border-color: rgba(245, 166, 35, .28);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.46);
}

.review-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 165, 0, 0.1);
  border: 1.5px solid rgba(255, 165, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.review-avatar svg {
  width: 26px;
  height: 26px;
  color: #f5a623;
  stroke-width: 1.6;
}

.liveReviewHead {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.liveReviewName {
  color: #fff;
  font-weight: 900;
  font-size: 1rem;
  text-align: right;
}

.liveReviewStars {
  color: var(--reviews-gold);
  direction: ltr;
  text-align: right;
  font-size: .92rem;
  letter-spacing: .12em;
}

.liveReviewText {
  margin: 0;
  flex: 1;
  color: #999;
  line-height: 1.75;
  text-align: right;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.liveReviewDate {
  display: block;
  margin-top: auto;
  padding-top: 14px;
  text-align: left;
  font-size: 11px;
  color: #555;
}

.reviewsAction {
  display: flex;
  justify-content: center;
  margin-top: 12px;
}

.reviewsAddBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 210px;
  padding: 13px 24px;
  border: 1px solid var(--reviews-gold);
  border-radius: 999px;
  background: transparent;
  color: var(--reviews-gold);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(245, 166, 35, .10), 0 18px 36px rgba(0, 0, 0, .18);
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease, color .18s ease;
}

.reviewsAddBtn:hover {
  transform: translateY(-2px);
  background: rgba(245, 166, 35, .08);
  box-shadow: inset 0 0 0 1px rgba(245, 166, 35, .20), 0 24px 44px rgba(0, 0, 0, .26);
}

.reviewsAddBtn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(245, 166, 35, .18), inset 0 0 0 1px rgba(245, 166, 35, .20);
}

.reviewsAddBtnIcon {
  font-size: 1.1rem;
  line-height: 1;
}

.reviewDrawerOverlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  align-items: end;
  background: rgba(4, 6, 10, 0);
  pointer-events: none;
  transition: background-color .3s ease;
}

.reviewDrawerOverlay.open {
  background: rgba(4, 6, 10, .72);
  pointer-events: auto;
}

.reviewDrawerBackdrop {
  position: absolute;
  inset: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.reviewDrawer {
  position: relative;
  width: min(760px, calc(100vw - 24px));
  max-height: min(84vh, 760px);
  margin: 0 auto max(12px, env(safe-area-inset-bottom));
  padding: 14px 18px 24px;
  overflow-y: auto;
  border: 1px solid var(--reviews-border);
  border-radius: 28px 28px 0 0;
  background: linear-gradient(180deg, rgba(15, 17, 23, .98), rgba(10, 12, 18, .98));
  box-shadow: 0 -24px 64px rgba(0, 0, 0, .46);
  transform: translateY(100%);
  opacity: 0;
  transition: transform .36s cubic-bezier(.2, .8, .2, 1), opacity .24s ease;
  pointer-events: auto;
}

.reviewDrawerOverlay.open .reviewDrawer {
  transform: translateY(0);
  opacity: 1;
}

.reviewDrawerHandle {
  width: 58px;
  height: 5px;
  margin: 0 auto 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
}

.reviewDrawerHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.reviewDrawerIntro h3,
.reviewDrawerIntro p {
  margin: 0;
}

.reviewDrawerIntro h3 {
  font-size: 1.2rem;
  font-weight: 900;
  color: #fff;
}

.reviewDrawerIntro p {
  margin-top: 6px;
}

.reviewDrawerClose {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(245, 166, 35, .24);
  border-radius: 50%;
  background: rgba(255, 255, 255, .03);
  color: #fff;
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}

.reviewDrawerClose:hover {
  transform: rotate(90deg);
  border-color: rgba(245, 166, 35, .46);
  background: rgba(245, 166, 35, .08);
}

.reviewDrawerClose:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(245, 166, 35, .16);
}

body.reviewDrawerOpen {
  overflow: hidden;
}

.reviewForm {
  display: grid;
  gap: 14px;
}

.reviewForm .formRow label {
  display: block;
  margin-bottom: 8px;
  color: rgba(255, 255, 255, .9);
  font-weight: 700;
}

.reviewForm .formRow input,
.reviewForm .formRow textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(255, 255, 255, .04);
  color: #fff;
  font: inherit;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.reviewForm .formRow textarea {
  min-height: 128px;
  resize: vertical;
}

.reviewForm .formRow input::placeholder,
.reviewForm .formRow textarea::placeholder {
  color: rgba(255, 255, 255, .42);
}

.reviewForm .formRow input:focus,
.reviewForm .formRow textarea:focus {
  border-color: rgba(245, 166, 35, .48);
  box-shadow: 0 0 0 3px rgba(245, 166, 35, .12);
  background: rgba(255, 255, 255, .05);
}

.starSelector {
  display: flex;
  gap: 8px;
  direction: ltr;
}

.starBtn {
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px;
  background: rgba(255, 255, 255, .03);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .14s ease, background-color .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.starBtn .starIcon {
  font-size: 1.5rem;
  line-height: 1;
  color: rgba(255, 255, 255, .4);
  opacity: .75;
  transition: color .14s ease, opacity .14s ease, transform .14s ease, text-shadow .14s ease;
}

.starBtn:hover {
  transform: translateY(-2px);
  border-color: rgba(245, 166, 35, .38);
}

.starBtn:hover .starIcon,
.starBtn.hovered .starIcon {
  color: var(--reviews-gold);
  opacity: .82;
}

.starBtn.selected {
  border-color: rgba(245, 166, 35, .5);
  background: rgba(245, 166, 35, .10);
  box-shadow: 0 12px 26px rgba(245, 166, 35, .08);
}

.starBtn.selected .starIcon {
  color: var(--reviews-gold);
  opacity: 1;
  transform: scale(1.08);
  text-shadow: 0 4px 16px rgba(245, 166, 35, .26);
}

.fieldError {
  margin-top: 6px;
  color: #ff7d62;
  font-size: .88rem;
  font-weight: 700;
}

.reviewStatus {
  min-height: 1.3em;
  margin-top: 2px;
  color: rgba(255, 255, 255, .7);
}

#reviewForm .btn {
  width: 100%;
  justify-content: center;
}

html[data-theme="light"] #reviews {
  --reviews-border: rgba(230, 92, 0, .16);
}

html[data-theme="light"] #reviews .reviewsSummary {
  border-color: rgba(230, 92, 0, .18);
  background: linear-gradient(160deg, rgba(255, 255, 255, .98) 0%, rgba(255, 248, 235, .96) 58%, rgba(255, 244, 220, .90) 100%);
  box-shadow: 0 14px 34px rgba(230, 92, 0, .10), 0 3px 10px rgba(0, 0, 0, .05);
}

html[data-theme="light"] #reviews .summaryStars {
  text-shadow: 0 4px 12px rgba(245, 166, 35, .18);
}

html[data-theme="light"] #reviews .summaryText {
  color: rgba(47, 36, 24, .82);
}

html[data-theme="light"] #reviews .avgRating {
  color: #24160b;
}

html[data-theme="light"] #reviews .avgSep,
html[data-theme="light"] #reviews .totalReviews,
html[data-theme="light"] #reviews .reviewsSubtitle {
  color: rgba(92, 70, 47, .76);
}

html[data-theme="light"] #reviews .sliderBtn {
  border-color: rgba(230, 92, 0, .18);
  background: rgba(255, 255, 255, .95);
  color: #d97800;
  box-shadow: 0 10px 24px rgba(230, 92, 0, .08), 0 3px 8px rgba(0, 0, 0, .04);
}

html[data-theme="light"] #reviews .sliderBtn:hover {
  background: linear-gradient(180deg, rgba(255, 248, 235, .98), rgba(255, 242, 212, .95));
  border-color: rgba(230, 92, 0, .32);
}

html[data-theme="light"] #reviews .reviewsLoading,
html[data-theme="light"] #reviews .liveReviewsEmpty {
  color: rgba(92, 70, 47, .74);
  border-color: rgba(230, 92, 0, .16);
  background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 248, 235, .92));
  box-shadow: 0 12px 28px rgba(0, 0, 0, .05);
}

html[data-theme="light"] #reviews .liveReviewCard {
  border-color: rgba(230, 92, 0, .14);
  border-left-color: rgba(245, 166, 35, .92);
  background: linear-gradient(165deg, rgba(255, 255, 255, .99) 0%, rgba(255, 250, 242, .97) 58%, rgba(255, 244, 220, .94) 100%);
  box-shadow: 0 18px 38px rgba(104, 74, 28, .10), 0 6px 16px rgba(0, 0, 0, .04);
}

html[data-theme="light"] #reviews .liveReviewCard.review-new {
  box-shadow: 0 0 0 2px rgba(245, 166, 35, .38),
    0 18px 36px rgba(230, 92, 0, .16),
    0 8px 20px rgba(0, 0, 0, .06);
  animation: reviewGoldPulseLight 2.5s ease-out forwards;
}

html[data-theme="light"] #reviews .liveReviewCard:hover {
  border-color: rgba(230, 92, 0, .26);
  box-shadow: 0 22px 42px rgba(230, 92, 0, .12), 0 10px 24px rgba(0, 0, 0, .06);
}

html[data-theme="light"] #reviews .review-avatar {
  background: linear-gradient(180deg, rgba(255, 179, 0, .16), rgba(255, 140, 0, .08));
  border-color: rgba(230, 92, 0, .24);
}

html[data-theme="light"] #reviews .review-avatar svg {
  color: #d97706;
}

html[data-theme="light"] #reviews .liveReviewName {
  color: #2a1a0e;
}

html[data-theme="light"] #reviews .liveReviewText {
  color: rgba(87, 65, 41, .88);
}

html[data-theme="light"] #reviews .liveReviewDate {
  color: rgba(146, 104, 56, .82);
}

@keyframes reviewGoldPulseLight {
  0% {
    box-shadow: 0 0 0 2px rgba(245, 166, 35, .72), 0 0 0 8px rgba(245, 166, 35, .18), 0 18px 36px rgba(230, 92, 0, .16);
  }

  60% {
    box-shadow: 0 0 0 2px rgba(245, 166, 35, .34), 0 0 0 14px rgba(245, 166, 35, .08), 0 20px 38px rgba(230, 92, 0, .12);
  }

  100% {
    box-shadow: 0 18px 38px rgba(104, 74, 28, .10), 0 6px 16px rgba(0, 0, 0, .04);
  }
}

@media (max-width: 760px) {
  .reviewsHeader {
    margin-bottom: 18px;
  }

  .reviewsHead {
    gap: 12px;
  }

  .reviewsSummary {
    min-height: 46px;
    padding-inline: 18px;
  }

  .liveReviews {
    padding: 20px 12px 28px;
  }

  .reviewDrawer {
    width: 100vw;
    max-height: 86vh;
    margin: 0;
    padding: 14px 16px 20px;
    border-radius: 24px 24px 0 0;
  }

  .starSelector {
    flex-wrap: wrap;
  }
}

/* ==================== ADMIN PANEL (Redesigned) ==================== */

.adminOverlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s ease, visibility .22s ease;
}

.adminOverlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.adminPanel {
  width: min(1340px, calc(100% - 24px));
  max-height: calc(100vh - 32px);
  height: calc(100vh - 32px);
  border-radius: 22px;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: 0 28px 90px rgba(0, 0, 0, .35);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(12px) scale(.97);
  transition: transform .22s cubic-bezier(.2, .8, .2, 1);
}

.adminOverlay.open .adminPanel {
  transform: translateY(0) scale(1);
}

html[data-theme="dark"] .adminPanel {
  background: rgba(18, 20, 24, .96);
  box-shadow: 0 28px 100px rgba(0, 0, 0, .65);
}

/* --- Admin Header --- */
.adminHead {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.adminTitle {
  font-weight: 900;
  font-size: 1.15rem;
  margin-inline-end: auto;
}

.adminHeadActions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.adminPreviewBtn {
  padding: 8px 16px;
  border-radius: 12px;
  border: 1px solid rgba(59, 130, 246, .35);
  background: rgba(59, 130, 246, .08);
  color: var(--text);
  cursor: pointer;
  font-weight: 800;
  font-size: .85rem;
  transition: background .12s ease, transform .12s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.adminPreviewBtn:hover {
  background: rgba(59, 130, 246, .16);
  transform: translateY(-1px);
}

.adminClose {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s ease;
  flex-shrink: 0;
}

.adminClose:hover {
  background: rgba(215, 182, 90, .08);
}

/* --- Tabs --- */
.adminTabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  padding: 0 18px;
  flex-shrink: 0;
  overflow-x: auto;
  gap: 2px;
}

.adminTab {
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 800;
  font-size: .88rem;
  border: none;
  background: none;
  color: var(--muted);
  border-bottom: 3px solid transparent;
  transition: color .12s ease, border-color .12s ease;
  white-space: nowrap;
}

.adminTab:hover {
  color: var(--text);
}

.adminTab.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* --- Split Layout (Main + Sidebar) --- */
.adminSplit {
  flex: 1;
  display: flex;
  overflow: hidden;
  min-height: 0;
}

.adminMain {
  flex: 1;
  overflow: auto;
  padding: 18px;
  min-width: 0;
}

.adminTabContent {
  display: none;
}

.adminTabContent.active {
  display: block;
}

/* --- File Manager Sidebar --- */
.fileManager {
  width: 320px;
  flex-shrink: 0;
  border-inline-start: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: rgba(0, 0, 0, .02);
}

html[data-theme="dark"] .fileManager {
  background: rgba(255, 255, 255, .02);
}

.fmHead {
  padding: 14px 14px 10px;
  border-bottom: 1px solid var(--border);
  font-weight: 900;
  font-size: .95rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fmBody {
  flex: 1;
  overflow: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Upload Zone */
.fmUploadZone {
  border: 2px dashed rgba(215, 182, 90, .35);
  border-radius: 16px;
  padding: 24px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .12s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  position: relative;
}

.fmUploadZone:hover,
.fmUploadZone.dragActive {
  border-color: var(--gold);
  background: rgba(215, 182, 90, .06);
  transform: scale(1.01);
}

.fmUploadZone.dragActive {
  background: rgba(215, 182, 90, .10);
  border-style: solid;
}

.fmUploadIcon {
  font-size: 2rem;
  line-height: 1;
  opacity: .7;
}

.fmUploadText {
  font-weight: 700;
  font-size: .85rem;
  color: var(--muted);
}

.fmUploadHint {
  font-size: .75rem;
  color: var(--muted);
  opacity: .7;
}

/* Upload Progress */
.fmUploads {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fmUploadItem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card2, rgba(255, 255, 255, .5));
  font-size: .8rem;
}

html[data-theme="dark"] .fmUploadItem {
  background: rgba(255, 255, 255, .04);
}

.fmUploadItem .fmUpName {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 700;
}

.fmProgressWrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.fmProgressBar {
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: rgba(215, 182, 90, .12);
  overflow: hidden;
}

.fmProgressFill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), #f0c040);
  transition: width .15s ease;
  width: 0%;
}

.fmProgressText {
  font-size: .72rem;
  color: var(--muted);
  font-weight: 700;
}

.fmUploadDone {
  color: #22c55e;
  font-weight: 800;
  font-size: .75rem;
}

/* File Manager Thumbnail Grid */
.fmThumbGrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.fmThumb {
  position: relative;
  border: 2px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  cursor: grab;
  aspect-ratio: 1;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.fmThumb:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
}

.fmThumb:active {
  cursor: grabbing;
}

.fmThumb.fmSelected {
  border-color: var(--gold, #D7B65A);
  box-shadow: 0 0 0 2px var(--gold, #D7B65A), 0 0 12px rgba(215, 182, 90, 0.4);
}

.fmThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fmThumbName {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 4px 6px;
  background: rgba(0, 0, 0, .65);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fmThumbDel {
  position: absolute;
  top: 4px;
  inset-inline-end: 4px;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: none;
  background: rgba(220, 53, 69, .85);
  color: #fff;
  cursor: pointer;
  font-size: .7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .12s ease;
}

.fmThumb:hover .fmThumbDel {
  opacity: 1;
}

.fmEmpty {
  text-align: center;
  color: var(--muted);
  font-size: .82rem;
  padding: 16px 8px;
  opacity: .7;
}

/* --- Admin Image Grid (Gallery) --- */
.adminAddBar {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.adminAddBar input[type="text"] {
  flex: 1;
  min-width: 180px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--fieldBg);
  color: var(--text);
  font: inherit;
  outline: none;
}

.adminAddBar input[type="text"]:focus {
  border-color: rgba(215, 182, 90, .55);
  box-shadow: 0 0 0 3px var(--fieldFocus);
}

.adminHistoryBar {
  display: flex;
  gap: 6px;
  margin: 8px 0 4px;
  flex-wrap: wrap;
  align-items: center;
}

/* Page Tabs (paginated admin view) */
.adminPageTabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.adminPageTab {
  padding: 7px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 800;
  font-size: .78rem;
  transition: all .12s ease;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.adminPageTab:hover {
  color: var(--text);
  border-color: var(--gold);
  background: rgba(215, 182, 90, .06);
}

.adminPageTab.active {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(215, 182, 90, .10);
}

.adminPageCount {
  font-size: .7rem;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(215, 182, 90, .15);
  color: var(--gold);
  font-weight: 900;
}

.adminPageHeader {
  font-weight: 900;
  font-size: .9rem;
  padding: 10px 0 8px;
  margin-top: 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Image Grid */
.adminImageGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
  position: relative;
}

/* Empty section drop zone */
.adminEmptyZone {
  grid-column: 1 / -1;
  min-height: 200px;
  border: 2px dashed rgba(255, 165, 0, 0.4);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--muted, #888);
  font-size: 14px;
  cursor: default;
  transition: all .2s ease;
}

.adminEmptyZone.dragHover {
  border-color: #FFD700;
  background: rgba(255, 215, 0, 0.08);
  color: #FFD700;
}

.adminEmptyIcon {
  font-size: 32px;
}

.adminImgCard {
  position: relative;
  border: 2px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  cursor: grab;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  aspect-ratio: 1;
}

.adminImgCard:active {
  cursor: grabbing;
}

.adminImgCard.dragging {
  opacity: .4;
  border-color: var(--gold);
  transform: scale(.92);
  z-index: 10;
}

.adminImgCard img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.adminImgIdx {
  position: absolute;
  bottom: 4px;
  inset-inline-start: 4px;
  min-width: 22px;
  height: 20px;
  padding: 0 5px;
  border-radius: 6px;
  background: rgba(0, 0, 0, .7);
  color: #fff;
  font-size: .65rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.adminImgDel {
  position: absolute;
  top: 5px;
  inset-inline-end: 5px;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: none;
  background: rgba(220, 53, 69, .85);
  color: #fff;
  cursor: pointer;
  font-size: .8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .12s ease;
}

.adminImgCard:hover .adminImgDel {
  opacity: 1;
}

/* Drag & Drop Indicators */
/* Insert indicator: glowing line between cards */
.adminDropInsert {
  position: absolute;
  width: 4px;
  top: 0;
  bottom: 0;
  background: var(--gold);
  border-radius: 999px;
  z-index: 20;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(215, 182, 90, .5), 0 0 20px rgba(215, 182, 90, .25);
  opacity: 0;
  transition: opacity .12s ease;
}

.adminDropInsert.show {
  opacity: 1;
}

/* Swap indicator: subtle gold border on the card */
.adminImgCard.swapTarget {
  box-shadow: 0 0 0 3px #FFD700 inset !important;
  border-color: #FFD700 !important;
}

/* Dragging source card fades */
.adminImgCard.dragging {
  opacity: 0.35;
  filter: grayscale(0.5);
}

/* Drop insertion line via pseudo-elements on cards */
.adminImgCard.drop-before::before {
  content: '';
  position: absolute;
  right: -6px;
  top: 0;
  width: 3px;
  height: 100%;
  background: #FFD700;
  box-shadow: 0 0 8px #FFD700;
  border-radius: 3px;
  z-index: 999;
  pointer-events: none;
}

.adminImgCard.drop-after::after {
  content: '';
  position: absolute;
  left: -6px;
  top: 0;
  width: 3px;
  height: 100%;
  background: #FFD700;
  box-shadow: 0 0 8px #FFD700;
  border-radius: 3px;
  z-index: 999;
  pointer-events: none;
}

/* --- Edit History --- */
.editHistory {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.historyEntry {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card2, rgba(255, 255, 255, .5));
  transition: background .12s ease;
}

html[data-theme="dark"] .historyEntry {
  background: rgba(255, 255, 255, .03);
}

.historyEntry:hover {
  background: rgba(215, 182, 90, .04);
}

.historyIcon {
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.historyInfo {
  flex: 1;
  min-width: 0;
}

.historyAction {
  font-weight: 800;
  font-size: .82rem;
  margin-bottom: 2px;
}

.historyTime {
  font-size: .72rem;
  color: var(--muted);
}

.historyRevert {
  padding: 5px 10px;
  border-radius: 8px;
  border: 1px solid rgba(215, 182, 90, .3);
  background: rgba(215, 182, 90, .06);
  color: var(--text);
  cursor: pointer;
  font-weight: 800;
  font-size: .72rem;
  transition: all .12s ease;
  flex-shrink: 0;
  align-self: center;
}

.historyRevert:hover {
  background: rgba(215, 182, 90, .14);
  border-color: var(--gold);
}

.historyEmpty {
  text-align: center;
  color: var(--muted);
  padding: 32px 16px;
  font-size: .88rem;
}

/* --- Tag Manager --- */
.tagManagerBar {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.tagManagerBar input[type="text"] {
  flex: 1;
  min-width: 180px;
  padding: 10px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: var(--fieldBg);
  color: var(--text);
  font: inherit;
  outline: none;
}

.tagManagerBar input[type="text"]:focus {
  border-color: rgba(215, 182, 90, .55);
  box-shadow: 0 0 0 3px var(--fieldFocus);
}

.tagManagerStats {
  font-size: .82rem;
  color: var(--muted);
  margin-bottom: 12px;
  font-weight: 700;
}

.tagManagerStats strong {
  color: var(--gold);
}

.tagList {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tagItem {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card2, rgba(255, 255, 255, .5));
  overflow: hidden;
  transition: border-color .12s ease, box-shadow .12s ease;
}

html[data-theme="dark"] .tagItem {
  background: rgba(255, 255, 255, .03);
}

.tagItem:hover {
  border-color: rgba(215, 182, 90, .35);
}

.tagItem.expanded {
  border-color: var(--gold);
  box-shadow: 0 4px 18px rgba(215, 182, 90, .08);
}

.tagItem.tagDropTarget {
  border-color: #22c55e;
  background: rgba(34, 197, 94, .06);
  box-shadow: 0 0 0 2px rgba(34, 197, 94, .2);
}

.tagItemHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  cursor: pointer;
  transition: background .12s ease;
}

.tagItemHeader:hover {
  background: rgba(215, 182, 90, .04);
}

.tagItemInfo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.tagItemName {
  font-weight: 800;
  font-size: .88rem;
}

.tagBadge {
  font-size: .7rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(215, 182, 90, .15);
  color: var(--gold);
  font-weight: 900;
}

.tagItemActions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.tagExpandBtn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: .7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .12s ease;
}

.tagExpandBtn:hover {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(215, 182, 90, .06);
}

.tagDelBtn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(220, 53, 69, .3);
  background: rgba(220, 53, 69, .06);
  color: var(--text);
  cursor: pointer;
  font-size: .75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .12s ease;
}

.tagDelBtn:hover {
  background: rgba(220, 53, 69, .16);
  border-color: rgba(220, 53, 69, .5);
}

.tagItemBody {
  padding: 0 14px 14px;
  border-top: 1px solid var(--border);
}

.tagAddImageRow {
  display: flex;
  gap: 8px;
  margin: 12px 0 10px;
  align-items: center;
}

.tagAddSelect {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--fieldBg);
  color: var(--text);
  font: inherit;
  font-size: .8rem;
  outline: none;
}

.tagAddSelect:focus {
  border-color: rgba(215, 182, 90, .55);
  box-shadow: 0 0 0 3px var(--fieldFocus);
}

.tagImagesGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 8px;
}

.tagImgThumb {
  position: relative;
  border: 2px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1;
  transition: border-color .12s ease, transform .12s ease;
}

.tagImgThumb:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
}

.tagImgThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tagImgThumb[draggable="true"] {
  cursor: grab;
}

.tagImgThumb[draggable="true"]:active {
  cursor: grabbing;
}

.tagImgName {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 3px 5px;
  background: rgba(0, 0, 0, .65);
  color: #fff;
  font-size: .6rem;
  font-weight: 700;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tagImgDel {
  position: absolute;
  top: 4px;
  inset-inline-end: 4px;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: none;
  background: rgba(220, 53, 69, .85);
  color: #fff;
  cursor: pointer;
  font-size: .65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .12s ease;
}

.tagImgThumb:hover .tagImgDel {
  opacity: 1;
}

.tagEmptyImages {
  text-align: center;
  color: var(--muted);
  font-size: .82rem;
  padding: 16px 8px;
  opacity: .7;
}

/* --- Analytics Dashboard --- */
.analyticsContainer {
  padding: 4px;
}

.analyticsLoading {
  text-align: center;
  padding: 40px 10px;
  color: var(--muted);
  font-size: .95rem;
}

.analyticsHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 8px 14px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 14px;
  font-size: .85rem;
  color: var(--muted);
}

.analyticsHeader strong {
  color: var(--gold);
}

.analyticsRefreshBtn {
  font-size: 12px !important;
  padding: 5px 14px !important;
}

.analyticsGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

@media (max-width: 900px) {
  .analyticsGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .analyticsGrid {
    grid-template-columns: 1fr;
  }
}

.analyticsCard {
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  background: var(--card2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.analyticsCardTitle {
  font-weight: 700;
  font-size: .88rem;
  color: var(--gold);
  margin-bottom: 4px;
  text-align: center;
}

.analyticsThumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid var(--border);
  margin: 4px 0;
}

.analyticsCardValue {
  font-size: .82rem;
  color: var(--muted);
  font-weight: 600;
}

.analyticsSearchVal {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--gold);
  margin: 6px 0;
  direction: rtl;
}

.analyticsMuted {
  color: var(--muted);
  font-size: .78rem;
  opacity: .6;
  padding: 10px 0;
}

/* Bar chart rows */
.analyticsBarRow {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 5px;
}

.analyticsBarLabel {
  min-width: 60px;
  text-align: right;
  font-size: .78rem;
  color: var(--txt);
  font-weight: 600;
  white-space: nowrap;
}

.analyticsBarTrack {
  flex: 1;
  height: 12px;
  background: rgba(255, 255, 255, .06);
  border-radius: 6px;
  overflow: hidden;
}

.analyticsBarFill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), #f5c542);
  border-radius: 6px;
  min-width: 2px;
  transition: width .4s ease;
}

.analyticsBarCount {
  min-width: 28px;
  text-align: left;
  font-size: .72rem;
  color: var(--muted);
  font-weight: 700;
}

/* Category card */
.analyticsCategoryCard {
  margin-top: 14px;
  flex-direction: column;
  align-items: stretch;
}

.analyticsCatList {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 6px 0;
}

.analyticsCatTag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid rgba(215, 182, 90, .25);
  background: rgba(215, 182, 90, .06);
  font-size: .8rem;
  color: var(--txt);
}

.analyticsCatTag strong {
  color: var(--gold);
  font-size: .82rem;
}

.analyticsHeaderActions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.analyticsLiveCard,
.analyticsSection {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--card2);
  padding: 16px;
  margin-top: 14px;
}

.analyticsLiveHead,
.analyticsSectionHead,
.analyticsToolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.analyticsLiveStatus {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .95rem;
  color: var(--txt);
}

.analyticsStatusDot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
}

.analyticsStatusDot.is-live {
  background: #2ecc71;
  box-shadow: 0 0 0 6px rgba(46, 204, 113, .12);
}

.analyticsStatusDot.is-idle {
  background: rgba(255, 255, 255, .28);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .05);
}

.analyticsToggleBtn,
.analyticsDangerBtn {
  font-size: 12px !important;
  padding: 6px 12px !important;
}

.analyticsDangerBtn {
  background: rgba(220, 38, 38, .12) !important;
  border-color: rgba(220, 38, 38, .35) !important;
  color: #ffb4b4 !important;
}

.analyticsActiveList {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.analyticsActiveRow,
.visitorProfileRow,
.analyticsSearchLogRow,
.analyticsSearchRow {
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  background: rgba(255, 255, 255, .03);
}

.analyticsActiveRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  flex-wrap: wrap;
}

.analyticsActiveMeta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  color: var(--muted);
  font-size: .8rem;
}

.analyticsSectionHead {
  margin-bottom: 14px;
}

.analyticsSectionTitle {
  color: var(--gold);
  font-weight: 800;
  font-size: 1rem;
}

.analyticsSectionSub {
  color: var(--muted);
  font-size: .78rem;
  margin-top: 2px;
}

.analyticsSummaryGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.analyticsSummaryCard {
  border: 1px solid rgba(215, 182, 90, .2);
  border-radius: 14px;
  padding: 14px;
  background: rgba(215, 182, 90, .06);
  display: grid;
  gap: 6px;
}

.analyticsSummaryCard span {
  color: var(--muted);
  font-size: .78rem;
}

.analyticsSummaryCard strong {
  color: var(--gold);
  font-size: 1.2rem;
}

.analyticsFilterRow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.analyticsFilterBtn,
.analyticsTabBtn,
.analyticsPageBtn {
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .03);
  color: var(--muted);
  border-radius: 999px;
  padding: 7px 13px;
  cursor: pointer;
  transition: all .15s ease;
  font-size: .78rem;
  font-weight: 700;
}

.analyticsFilterBtn.active,
.analyticsTabBtn.active,
.analyticsPageBtn:hover:not(:disabled) {
  border-color: rgba(215, 182, 90, .35);
  background: rgba(215, 182, 90, .12);
  color: var(--gold);
}

.analyticsPageBtn:disabled {
  opacity: .4;
  cursor: default;
}

.analyticsList {
  display: grid;
  gap: 10px;
}

.visitorProfileRow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px;
}

.visitorProfileMain,
.visitorProfileSide {
  display: grid;
  gap: 6px;
}

.visitorProfileTop {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.visitorProfileMeta,
.visitorProfileSide span {
  color: var(--muted);
  font-size: .8rem;
}

.visitorProfileSide strong {
  color: var(--gold);
}

.visitorBadge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: .72rem;
  font-weight: 800;
  border: 1px solid transparent;
}

.visitorBadge.badge-new {
  background: rgba(59, 130, 246, .14);
  border-color: rgba(59, 130, 246, .28);
  color: #9ec5ff;
}

.visitorBadge.badge-returning {
  background: rgba(245, 158, 11, .14);
  border-color: rgba(245, 158, 11, .28);
  color: #ffd27d;
}

.visitorBadge.badge-loyal {
  background: rgba(34, 197, 94, .14);
  border-color: rgba(34, 197, 94, .28);
  color: #9ef0b4;
}

.analyticsPagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  color: var(--muted);
  font-size: .8rem;
}

.analyticsToolbar {
  margin-bottom: 14px;
}

.analyticsSearchInput {
  width: min(100%, 280px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .03);
  color: var(--txt);
  padding: 10px 12px;
}

.analyticsSearchInput:focus {
  outline: none;
  border-color: rgba(215, 182, 90, .35);
  box-shadow: 0 0 0 3px rgba(215, 182, 90, .1);
}

.analyticsSearchTable,
.analyticsSearchLog {
  display: grid;
  gap: 10px;
}

.analyticsSearchRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
}

.analyticsSearchCell {
  color: var(--muted);
  font-size: .82rem;
}

.analyticsSearchQuery,
.analyticsSearchLogQuery {
  color: var(--txt);
  font-weight: 700;
}

.analyticsSearchLogRow {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
}

.analyticsSearchLogMeta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: .78rem;
}

@media (max-width: 900px) {
  .analyticsSummaryGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {

  .analyticsActiveRow,
  .visitorProfileRow,
  .analyticsPagination {
    flex-direction: column;
    align-items: stretch;
  }

  .analyticsSearchRow {
    grid-template-columns: 1fr;
  }

  .analyticsSearchInput {
    width: 100%;
  }
}

/* --- Search Clear Button --- */
.control {
  position: relative;
}

#searchInput {
  padding-left: 52px;
}

.searchClearBtn {
  position: absolute;
  left: 6px;
  bottom: 8px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid rgba(215, 182, 90, .35);
  background: rgba(215, 182, 90, .10);
  color: var(--gold);
  cursor: pointer;
  font-weight: 800;
  font-size: .72rem;
  transition: all .12s ease;
  z-index: 2;
  line-height: 1;
}

.searchClearBtn:hover {
  background: rgba(215, 182, 90, .22);
  border-color: var(--gold);
}

/* Hide native search input clear button */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

/* --- Admin Review List --- */
.adminReviewList {
  display: grid;
  gap: 10px;
}

.adminReviewItem {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  background: var(--card2);
}

.adminReviewInfo {
  flex: 1;
}

.adminReviewDel {
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid rgba(220, 53, 69, .35);
  background: rgba(220, 53, 69, .08);
  color: #dc3545;
  cursor: pointer;
  font-weight: 800;
  font-size: .88rem;
  transition: background .12s ease, transform .12s ease;
}

.adminReviewDel:hover {
  background: rgba(220, 53, 69, .18);
  transform: translateY(-1px);
}

/* --- Visitor Stats Widget --- */
.adminFooter {
  border-top: 1px solid var(--border);
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  font-size: .8rem;
}

.visitorStat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(59, 130, 246, .04);
  font-weight: 800;
}

.visitorStatVal {
  color: var(--gold);
  font-size: .9rem;
}

/* --- Preview Overlay --- */
.previewOverlay {
  position: fixed;
  inset: 0;
  z-index: 50000;
  background: #000;
  display: flex;
  flex-direction: column;
  animation: pvFadeIn .25s ease both;
}

@keyframes pvFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.previewBar {
  height: 44px;
  background: rgba(18, 20, 24, .92);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 16px;
  flex-shrink: 0;
}

.previewBarLabel {
  color: rgba(255, 255, 255, .7);
  font-weight: 700;
  font-size: .82rem;
}

.previewCloseBtn {
  padding: 6px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  cursor: pointer;
  font-weight: 800;
  font-size: .8rem;
  transition: background .12s ease;
}

.previewCloseBtn:hover {
  background: rgba(255, 255, 255, .16);
}

.previewFrame {
  flex: 1;
  border: none;
  width: 100%;
}

/* --- Responsive --- */
@media (max-width: 860px) {
  .adminSplit {
    flex-direction: column;
  }

  .fileManager {
    width: 100%;
    max-height: 280px;
    border-inline-start: none;
    border-top: 1px solid var(--border);
  }

  .fmThumbGrid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 560px) {
  .adminPanel {
    width: 100%;
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
  }

  .adminImageGrid {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  }

  .adminTabs {
    gap: 0;
  }

  .adminTab {
    padding: 8px 10px;
    font-size: .78rem;
  }

  .fileManager {
    max-height: 240px;
  }
}


/* ============================================================
   Enhancement: Liquid Glass Section Heading Wrappers
============================================================ */
.section-heading-wrapper {
  display: inline-block;
  padding: 8px 26px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff8c00, #ffa500, #ff6b00);
  border: none;
  box-shadow: 0 4px 20px rgba(200, 151, 58, 0.4);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  z-index: 1;
  transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.5s ease;
  opacity: 0;
  transform: translateY(20px);
}

.section-heading-wrapper.in-view {
  opacity: 1;
  transform: none;
}

/* Shimmer sweep */
.section-heading-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  animation: badgeShimmer 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes badgeShimmer {
  0% {
    left: -75%;
  }

  100% {
    left: 125%;
  }
}

/* Override heading text to dark on gold background */
.section-heading-wrapper h2 {
  color: #0a0a0a !important;
  -webkit-text-fill-color: #0a0a0a !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  text-shadow: none !important;
  font-weight: 800;
}

/* Both themes — same gold pill */
html[data-theme="dark"] .section-heading-wrapper,
html[data-theme="light"] .section-heading-wrapper {
  background: linear-gradient(135deg, #ff8c00, #ffa500, #ff6b00) !important;
  border: none !important;
  box-shadow: 0 4px 20px rgba(200, 151, 58, 0.4) !important;
}

/* Hover — both themes */
.section-heading-wrapper:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 28px rgba(200, 151, 58, 0.6) !important;
}

.section-heading-wrapper:hover h2 {
  text-shadow: none !important;
}

/* Reduced motion: no entrance or shimmer animation */
@media (prefers-reduced-motion: reduce) {
  .section-heading-wrapper {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .section-heading-wrapper::after {
    animation: none !important;
  }
}


/* ============================================================
   Enhancement: Cinematic Scroll Transitions
============================================================ */
.section-exit {
  animation: sectionExit 0.3s ease-out forwards;
}

.section-enter {
  animation: sectionEnter 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes sectionExit {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.97);
  }
}

@keyframes sectionEnter {
  0% {
    opacity: 0;
    transform: scale(0.97) translateY(30px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Orange flash sweep */
.section-flash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none;
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 140, 0, 0.12) 40%,
      rgba(255, 140, 0, 0.25) 50%,
      rgba(255, 140, 0, 0.12) 60%,
      transparent 100%);
  animation: flashSweep 0.5s ease-out forwards;
}

html[data-theme="light"] .section-flash {
  background: linear-gradient(90deg,
      transparent 0%,
      rgba(230, 92, 0, 0.08) 40%,
      rgba(230, 92, 0, 0.15) 50%,
      rgba(230, 92, 0, 0.08) 60%,
      transparent 100%);
}

@keyframes flashSweep {
  0% {
    transform: translateX(-100%);
    opacity: 1;
  }

  70% {
    opacity: 1;
  }

  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {

  .section-exit,
  .section-enter {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .section-flash {
    display: none !important;
  }
}


/* ============================================================
   FIX: Submit button height + width reduction
============================================================ */
button[type="submit"],
.submit-btn,
input[type="submit"] {
  padding: 10px 28px !important;
  font-family: "Cairo", system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  letter-spacing: 0.01em !important;
  -webkit-font-smoothing: antialiased !important;
  line-height: 1.4 !important;
  min-height: unset !important;
  height: auto !important;
  max-width: 280px !important;
  margin: 8px auto !important;
  display: block !important;
}

/* ============================================================
   FIX: Button hover scale — clean rendering
============================================================ */
.btn {
  transform-origin: center;
}


/* ============================================================
   About Section — Fluent Emoji Cards
============================================================ */
.about-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 8px;
}

@media (max-width: 768px) {
  .about-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .about-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Card --- */
.about-card {
  border-radius: 20px;
  padding: 28px 24px;
  text-align: center;
  border: 1px solid rgba(255, 140, 0, 0.2);
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  transform: translateY(24px);
}

.about-card.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Dark theme card */
html[data-theme="dark"] .about-card {
  background: #0F1215;
  border-color: rgba(255, 140, 0, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

/* Light theme card */
html[data-theme="light"] .about-card {
  background: #ffffff;
  border-color: rgba(255, 140, 0, 0.2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* Hover — Dark */
html[data-theme="dark"] .about-card:hover {
  border-color: rgba(255, 140, 0, 0.5);
  box-shadow: 0 8px 32px rgba(255, 140, 0, 0.2), 0 12px 40px rgba(0, 0, 0, 0.3);
  transform: translateY(-6px);
  background: #151a1e;
}

/* Hover — Light */
html[data-theme="light"] .about-card:hover {
  border-color: rgba(255, 140, 0, 0.5);
  box-shadow: 0 8px 32px rgba(255, 140, 0, 0.15), 0 12px 40px rgba(0, 0, 0, 0.06);
  transform: translateY(-6px);
  background: #fff;
}

/* --- Emoji --- */
.card-emoji img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  display: block;
  margin: 0 auto 14px;
  transition: transform 0.3s ease;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.about-card:hover .card-emoji img {
  transform: scale(1.2) rotate(-5deg);
}

/* --- Card Title --- */
.card-title {
  font-weight: 800;
  color: var(--accent);
  font-size: 1.1rem;
  margin: 0 0 8px;
}

/* --- Card Description --- */
.card-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  margin: 0;
}

html[data-theme="dark"] .card-desc {
  color: rgba(255, 255, 255, 0.7);
}

html[data-theme="light"] .card-desc {
  color: rgba(0, 0, 0, 0.6);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .about-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .card-emoji img {
    transition: none !important;
  }
}


/* ============================================================
   FIX: Remove outline from theme + audio toggle buttons
============================================================ */
#themeToggle,
#audioToggle {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

#themeToggle:focus,
#themeToggle:focus-visible,
#audioToggle:focus,
#audioToggle:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}


/* ============================================================
   Reset Statistics — Button, Modal & Confirm Dialog
============================================================ */

/* Red reset button next to refresh */
.analyticsResetBtn {
  background: linear-gradient(135deg, #e53935, #b71c1c) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 700;
  font-size: 13px;
  padding: 6px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: filter .18s ease, transform .12s ease;
}

.analyticsResetBtn:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
}

.analyticsResetBtn:active {
  transform: translateY(0) scale(.97);
}

/* Reset modal overlay */
.resetStatsModal {
  position: fixed;
  inset: 0;
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: resetFadeIn .18s ease both;
}

@keyframes resetFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Modal content card */
.resetStatsContent {
  background: #1a1d22;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 16px;
  width: 92%;
  max-width: 460px;
  padding: 0;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .55);
  animation: resetSlideIn .22s cubic-bezier(.2, .8, .2, 1) both;
  max-height: 85vh;
  overflow-y: auto;
}

@keyframes resetSlideIn {
  from {
    transform: translateY(12px) scale(.96);
    opacity: 0;
  }

  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.resetStatsHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-size: 16px;
  font-weight: 800;
  color: #fff;
}

.resetStatsClose {
  background: none;
  border: none;
  color: rgba(255, 255, 255, .5);
  font-size: 20px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  transition: color .15s ease;
}

.resetStatsClose:hover {
  color: #fff;
}

/* Sections */
.resetSection {
  padding: 16px 20px;
}

.resetSectionTitle {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, .8);
  margin-bottom: 12px;
}

.resetDivider {
  height: 1px;
  background: rgba(255, 255, 255, .08);
  margin: 0 20px;
}

/* Checkbox list */
.resetCheckboxList {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.resetCheckbox {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .06);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
  color: rgba(255, 255, 255, .85);
  font-size: 14px;
  font-weight: 600;
}

.resetCheckbox:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .12);
}

.resetCheckbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #e53935;
  cursor: pointer;
  flex-shrink: 0;
}

/* Reset type button */
.resetTypeBtn {
  width: 100%;
  background: linear-gradient(135deg, #e53935, #b71c1c) !important;
  color: #fff !important;
  border: none !important;
  font-size: 14px;
  font-weight: 700;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: filter .18s ease;
}

.resetTypeBtn:hover {
  filter: brightness(1.15);
}

/* Period buttons grid */
.resetPeriodGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.resetPeriodBtn {
  font-size: 13px !important;
  padding: 10px 6px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  text-align: center;
}

.resetPeriodBtnDanger {
  background: linear-gradient(135deg, #e53935, #b71c1c) !important;
  color: #fff !important;
  border: none !important;
  font-size: 13px;
  padding: 10px 6px;
  border-radius: 10px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: filter .18s ease;
}

.resetPeriodBtnDanger:hover {
  filter: brightness(1.15);
}

/* Confirmation overlay */
.resetConfirmOverlay {
  position: fixed;
  inset: 0;
  z-index: 100002;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, .72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: resetFadeIn .14s ease both;
}

.resetConfirmBox {
  background: #1a1d22;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 14px;
  padding: 24px 28px;
  text-align: center;
  max-width: 380px;
  width: 88%;
  box-shadow: 0 20px 56px rgba(0, 0, 0, .50);
  animation: resetSlideIn .20s cubic-bezier(.2, .8, .2, 1) both;
}

.resetConfirmText {
  color: rgba(255, 255, 255, .9);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 20px;
  line-height: 1.6;
}

.resetConfirmActions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.resetConfirmBtn {
  background: linear-gradient(135deg, #e53935, #b71c1c) !important;
  color: #fff !important;
  border: none !important;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 28px;
  border-radius: 10px;
  cursor: pointer;
  transition: filter .18s ease;
}

.resetConfirmBtn:hover {
  filter: brightness(1.15);
}

.resetCancelBtn {
  font-weight: 700 !important;
  font-size: 14px !important;
  padding: 10px 28px !important;
  border-radius: 10px !important;
}

/* ---------- Cancel search button ---------- */
#clearSearchBtn {
  display: none;
  align-items: center;
  gap: 8px;
  margin: 0 auto 20px auto;
  padding: 8px 20px;
  border-radius: 999px;
  background: rgba(255, 60, 60, 0.1);
  border: 1px solid rgba(255, 60, 60, 0.3);
  color: #ff6b6b;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.3s ease;
}
#clearSearchBtn:hover {
  background: rgba(255, 60, 60, 0.2);
  box-shadow: 0 0 12px rgba(255, 60, 60, 0.2);
}

/* ============================================================
   Fix: Mobile chat sizing
============================================================ */
@media (max-width: 768px) {
  iframe[title="chat widget"],
  iframe[title="chat widget minimized"] {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
  }
}

@keyframes sectionPulse {
  0% {
    box-shadow: 0 0 0 rgba(255, 165, 0, 0);
  }

  50% {
    box-shadow: 0 0 40px rgba(255, 165, 0, 0.3);
  }

  100% {
    box-shadow: 0 0 0 rgba(255, 165, 0, 0);
  }
}

.section-highlight {
  animation: sectionPulse 1.2s ease forwards;
}