@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700;800&display=swap');
/* Accessibility and HIG polish. Loaded last (includes/ui-assets.php) so it wins the cascade. */

/* Site font: IBM Plex Sans Arabic first (glass-ui.css had system fonts ahead of it). */
:root{--font-ui:"IBM Plex Sans Arabic",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}

/* Text follows the browser/OS text-size setting; sizes are rem with an 11px floor. */
html{font-size:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* Light theme tertiary text: #7d7d83 was 3.67:1 on #f2f2f7. This is 5.1:1. */
html[data-theme="light"]{--text3:#66666b}

/* Arabic joins letters: negative tracking breaks the connections. */
html[dir="rtl"] :is(h1,h2,h3,h4,.surprise-name,.hero-title){letter-spacing:0!important}

/* ── Touch targets: 44 × 44 pt (accessibility.md › Mobility) ── */
.hbtn,.popup-close,.d-back,.profiles-back,.profiles-logout,.profile-close,.manual-subtitle-close{width:44px!important;height:44px!important;min-width:44px;min-height:44px}
.search-page-head .search-back,.search-page-head .search-submit{width:44px!important;height:44px!important;min-height:44px!important}
.profile-edit{position:absolute}
.profile-edit::after{content:"";position:absolute;inset:-8px}
.account-mini-btn,.account-code-copy,.account-switch-profile,.account-profile-delete,.account-tools-disable,.logout-other-devices,.account-renew-btn{min-height:44px!important}
.account-code-copy{min-width:72px}
.account-tools-disable{padding:10px 14px!important}
.notif-dot{width:9px;height:9px}

/* ── Tab bar: icon + single-word label (tab-bars.md › Best practices) ── */
#site-navbar .nav-item,#site-navbar .nav-random,
#site-navbar>.nav-item:not(.nav-random),#site-navbar>.nav-item.nav-random{
  display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  width:100%!important;max-width:72px;min-width:0!important;height:48px!important;border-radius:16px!important}
#site-navbar .nav-item>.nav-icon{width:22px!important;height:22px!important}
#site-navbar .nav-item>.nav-label{display:block!important;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.6875rem;font-weight:650;line-height:1.2;letter-spacing:0;color:inherit}
#site-navbar .nav-item.active:not(.nav-random){color:var(--text)!important}
#site-navbar .nav-random{transform:none!important}
@media(min-width:768px){#site-navbar{width:400px!important;max-width:calc(100% - 24px)!important}}

/* ── Contrast: gradient ends are 4.76:1 / 6.25:1 against white (was 2.95:1) ── */
#site-navbar .nav-item.nav-random,#site-navbar .nav-item.nav-random.active,.swipe-action.accept{color:#fff!important}

/* ── Surprise card: larger type over imagery, scrim reaches full strength lower down ── */
.surprise-meta{font-size:.8125rem}
.surprise-desc{font-size:.875rem;line-height:1.6;color:rgba(255,255,255,.88)}
.surprise-chip{font-size:.6875rem}
.surprise-shade{background:linear-gradient(180deg,transparent 14%,rgba(5,6,9,.2) 36%,rgba(5,6,9,.84) 64%,rgba(5,6,9,.98) 100%)}

/* ── Increase Contrast ── */
@media (prefers-contrast:more){
  :root{--text2:#e5e5ea;--text3:#d1d1d6;--bord:rgba(255,255,255,.4);--bord2:rgba(255,255,255,.62)}
  html[data-theme="light"]{--text2:#2c2c2e;--text3:#48484a;--bord:rgba(0,0,0,.42);--bord2:rgba(0,0,0,.64)}
  .hbtn,.popup-close,.surprise-filters,.swipe-action{border-color:var(--bord2)!important}
}

/* ── Reduce Transparency: opaque bars and sheets, no blur ── */
@media (prefers-reduced-transparency:reduce){
  :root{--shell-header-surface:#14161d;--shell-footer-surface:#14161d;--glass:#14161d;--bg2:#14161d;--bg3:#1d1f28}
  html[data-theme="light"]{--shell-header-surface:#fafafd;--shell-footer-surface:#fafafd;--glass:#ffffff;--bg2:#ffffff;--bg3:#f7f7fa}
  *,*::before,*::after{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}

/* ── Reduce Motion: every animation and transition, not just the Surprise page ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Inactive tabs read as a tab bar, not as five separate buttons. */
#site-navbar .nav-item:not(.nav-random):not(.active){background:transparent!important;border-color:transparent!important}

/* ── CIMAX glass dock: one glass pill holding all five tabs ──
   Only the active tab shows its label. The doubled id outranks the older
   glass-ui.css / ui-shell.css dock rules. Tab height = dock − 2×6 padding − 2×1 border. */
:root{
  --dock-h:64px;--dock-side:14px;--dock-bottom:max(12px,calc(env(safe-area-inset-bottom,0px) + 4px));
  --dock-tab:calc(var(--dock-h) - 14px);
  --shell-dock-height:var(--dock-h);--shell-dock-space:calc(var(--dock-h) + var(--dock-bottom));
  /* Neutral Apple-style material: clear tint, strong blur, bright top edge. */
  --dock-tint:rgba(30,32,42,.34);
  --dock-sheen:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.02) 55%,rgba(255,255,255,.05));
  --dock-edge:rgba(255,255,255,.16);--dock-hi:rgba(255,255,255,.3);
  --dock-ink:rgba(255,255,255,.72);--dock-ink-strong:#fff;
  --dock-shadow:0 10px 30px rgba(0,0,0,.32);
  /* Active tab: a lighter glass lens with the label and icon in CIMAX blue. */
  --dock-lens:rgba(255,255,255,.14);--dock-lens-edge:rgba(255,255,255,.22);--dock-accent:#7ea6ff;
}
html[data-theme="light"]{
  --dock-tint:rgba(255,255,255,.5);
  --dock-sheen:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.15) 55%,rgba(255,255,255,.3));
  --dock-edge:rgba(0,0,0,.08);--dock-hi:#fff;
  --dock-ink:rgba(28,32,48,.6);--dock-ink-strong:#1c2030;
  --dock-shadow:0 10px 28px rgba(30,40,70,.14);
  --dock-lens:rgba(118,118,128,.14);--dock-lens-edge:rgba(255,255,255,.7);--dock-accent:#2557d6;
}
body:has(#site-navbar){padding-bottom:calc(var(--shell-dock-space) + 18px)!important}
/* The nav itself is a transparent frame; the pill inside carries the glass. */
#site-navbar#site-navbar{
  inset:auto var(--dock-side) var(--dock-bottom) var(--dock-side)!important;
  width:auto!important;max-width:460px!important;height:var(--dock-h)!important;margin:0 auto!important;
  padding:0!important;display:flex!important;align-items:stretch!important;gap:0!important;
  border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
#site-navbar#site-navbar .dock-pill{
  position:relative;isolation:isolate;flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:2px;
  padding:6px;border:1px solid var(--dock-edge);border-radius:999px;box-shadow:var(--dock-shadow)}
/* Glass lives on a background layer so icons and text stay sharp. */
#site-navbar .dock-glass{
  position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:var(--dock-sheen),var(--dock-tint);
  box-shadow:inset 0 1px 0 var(--dock-hi),inset 0 -1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(24px) saturate(190%);-webkit-backdrop-filter:blur(24px) saturate(190%)}
/* Tabs: icon only; padding makes an inactive tab a perfect circle. */
#site-navbar#site-navbar .nav-item{
  position:relative!important;isolation:isolate;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:center!important;
  flex:0 0 auto!important;width:auto!important;min-width:0!important;max-width:none!important;height:var(--dock-tab)!important;min-height:0!important;
  padding:0 calc((var(--dock-tab) - 24px) / 2 - 3px)!important;gap:0!important;margin:0!important;
  border:0!important;border-radius:999px!important;background:transparent!important;box-shadow:none!important;
  color:var(--dock-ink)!important;transform:none!important;
  transition:background-color .3s,color .3s,padding .32s cubic-bezier(.2,.8,.2,1),gap .32s,transform .18s!important}
#site-navbar#site-navbar .nav-item>.nav-icon{width:24px!important;height:24px!important;flex-shrink:0}
/* Label is hidden until the tab is active, then slides open. Line-height 1.6 keeps ي/ج dots visible. */
#site-navbar#site-navbar .nav-item>.nav-label{
  display:block!important;max-width:0;opacity:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  font-size:.8125rem;font-weight:650;line-height:1.6!important;padding-bottom:1px;
  transition:max-width .32s cubic-bezier(.2,.8,.2,1),opacity .2s}
#site-navbar#site-navbar .nav-item:hover{color:var(--dock-ink-strong)!important}
#site-navbar#site-navbar .nav-item:active{transform:scale(.94)!important}
/* Active tab: glass lens with its label, tinted CIMAX blue. */
#site-navbar#site-navbar .nav-item.active{
  flex-shrink:1!important;gap:6px!important;padding:0 14px 0 16px!important;
  background:var(--dock-lens)!important;color:var(--dock-accent)!important;
  box-shadow:inset 0 0 0 .5px var(--dock-lens-edge),inset 0 1px 0 var(--dock-lens-edge)!important}
html[dir="rtl"] #site-navbar#site-navbar .nav-item.active{padding:0 16px 0 14px!important}
#site-navbar#site-navbar .nav-item.active>.nav-label{max-width:110px;opacity:1}
/* Small phones: shrink everything a little so all five fit. */
@media(max-width:360px){
  :root{--dock-h:58px;--dock-side:10px}
  html #site-navbar#site-navbar .nav-item.active,html[dir="rtl"] #site-navbar#site-navbar .nav-item.active{padding:0 11px!important;gap:5px!important}
}
@media (prefers-reduced-transparency:reduce){
  :root{--dock-tint:#1a1c26;--dock-sheen:none}
  html[data-theme="light"]{--dock-tint:#fafafd}
}