/* =========================================================================
   Diia Web Replica — main.css
   Tokens, reset, typography, layout shell, bottom navigation
   ========================================================================= */

/* ---- Fonts ------------------------------------------------------------- */
@font-face {
  font-family: 'e-Ukraine';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/e-Ukraine-Light.woff2') format('woff2');
}
@font-face {
  font-family: 'e-Ukraine';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/e-Ukraine-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'e-Ukraine';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/e-Ukraine-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'e-Ukraine';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/e-Ukraine-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'e-Ukraine Head';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/e-UkraineHead-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'e-Ukraine Head';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/e-UkraineHead-Bold.woff2') format('woff2');
}

/* ---- Design tokens ----------------------------------------------------- */
:root {
  --brand-blue: #0560FD;
  --brand-blue-soft: rgba(5, 96, 253, 0.08);

  --text-primary: #1F1F1F;
  --text-secondary: #5C6670;
  --text-muted: #8E8E93;
  --text-placeholder: #A5ADB7;

  --surface: #FFFFFF;
  --surface-glass: rgba(255, 255, 255, 0.62);
  --surface-soft: #F2F4F7;

  --line: rgba(0, 0, 0, 0.06);
  --line-strong: rgba(0, 0, 0, 0.1);

  --accent-danger: #FF3B30;
  --accent-success-bg: #A8E063;
  --accent-success-fg: #1F5A13;

  --black: #000000;
  --white: #FFFFFF;

  /* Page backgrounds — rich multi-stop gradients for smooth animated flow */
  --bg-feed:     linear-gradient(135deg, #D9E5EE 0%, #C9D9E6 20%, #E2DFEA 40%, #D4E0EA 60%, #C9DAE6 80%, #D9E5EE 100%);
  --bg-docs:     linear-gradient(135deg, #D2E2E6 0%, #E0DAE6 25%, #ECD5DA 50%, #E8DDE7 75%, #D2E2E6 100%);
  --bg-services: linear-gradient(135deg, #DCE8EE 0%, #D4E4E1 25%, #C9DAD4 50%, #D4E4E1 75%, #DCE8EE 100%);
  --bg-menu:     linear-gradient(135deg, #DCE5EC 0%, #C9D4DE 25%, #D8D6E4 50%, #C9D4DE 75%, #DCE5EC 100%);
  --bg-auth:     linear-gradient(180deg, #AFC9DC 0%, #BCD0D3 32%, #CFDAC3 62%, #E5E9C5 100%);

  --shadow-card: 0 6px 24px rgba(13, 31, 66, 0.06);
  --shadow-strong: 0 12px 40px rgba(13, 31, 66, 0.10);

  --r-xs: 12px;
  --r-sm: 16px;
  --r-md: 20px;
  --r-lg: 24px;
  --r-xl: 28px;
  --r-2xl: 32px;

  --phone-w: 470px;
  --phone-h: 930px;

  --nav-h: 82px;
  --nav-bg: #0E0E10;
  --nav-fg: #FFFFFF;
  --nav-fg-dim: rgba(255, 255, 255, 0.55);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* Hide scrollbars everywhere — still allow scrolling */
html, body, *, *::before, *::after { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { width: 0 !important; height: 0 !important; display: none !important; }
body {
  font-family: 'e-Ukraine', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.35;
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background: #0b1220;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
h1, h2, h3, h4, h5, p { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
input { font: inherit; color: inherit; border: 0; outline: 0; background: transparent; }
ul, ol { list-style: none; padding: 0; margin: 0; }

/* ---- Desktop frame (phone mock) --------------------------------------- */
.phone {
  position: relative;
  width: var(--phone-w);
  height: var(--phone-h);
  max-height: 100vh;
  background-image: var(--bg-feed);
  background-size: 360% 360%;
  background-position: 0% 50%;
  overflow: hidden;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255,255,255,0.04);
  border-radius: 44px;
  isolation: isolate;
  animation: bg-shift 18s ease-in-out infinite;
}

@keyframes bg-shift {
  0%   { background-position: 0% 50%; }
  25%  { background-position: 100% 30%; }
  50%  { background-position: 100% 70%; }
  75%  { background-position: 30% 100%; }
  100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .phone { animation: none; }
}
/* Compact / phone-ish viewports: phone takes full viewport */
@media (max-width: 530px), (max-height: 960px) {
  :root { --phone-w: 100vw; }
  body { background: var(--bg-feed); }
  .phone {
    width: 100vw;
    height: 100vh;
    max-width: 470px;
    max-height: 930px;
    border-radius: 0;
    box-shadow: none;
  }
}

/* Per-page backgrounds — only override image, keep size/animation */
body[data-page="feed"]     .phone { background-image: var(--bg-feed); }
body[data-page="documents"] .phone { background-image: var(--bg-docs); }
body[data-page="services"]  .phone { background-image: var(--bg-services); }
body[data-page="menu"]      .phone { background-image: var(--bg-menu); }
body[data-page="auth"]      .phone {
  background-image: var(--bg-auth);
  background-size: 100% 150%;
  background-position: 0% 0%;
  animation: auth-bg-drift 16s ease-in-out infinite;
}
@keyframes auth-bg-drift {
  0%, 100% { background-position: 0% 0%; }
  50%      { background-position: 0% 100%; }
}

body[data-page="feed"], body[data-page="documents"], body[data-page="services"], body[data-page="menu"], body[data-page="auth"] {
  background: #0b1220;
}
@media (max-width: 530px) {
  body[data-page="feed"]     { background-image: var(--bg-feed); background-color: transparent; }
  body[data-page="documents"] { background-image: var(--bg-docs); background-color: transparent; }
  body[data-page="services"]  { background-image: var(--bg-services); background-color: transparent; }
  body[data-page="menu"]      { background-image: var(--bg-menu); background-color: transparent; }
  body[data-page="auth"]      { background-image: var(--bg-auth); background-color: transparent; }
}

/* ---- Main scroll area -------------------------------------------------- */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.screen__scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding-top: 18px;
  padding-bottom: calc(var(--nav-h) + 12px);
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.page-title {
  font-family: 'e-Ukraine Head', 'e-Ukraine', sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.1;
  letter-spacing: -0.3px;
  padding: 14px 24px 18px;
}
.page-title--with-sub { padding-bottom: 4px; }
.page-subtitle {
  padding: 0 24px 18px;
  font-size: 14px;
  color: var(--text-muted);
}

/* ---- Bottom navigation (black & white) -------------------------------- */
.tab-bar {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  /* Icons sit in the top portion; the extra 3% height fills with solid
     black below the icons so the bar visually reaches the phone edge. */
  height: calc(var(--nav-h) + var(--phone-h) * 0.03);
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  padding: 12px 8px calc(env(safe-area-inset-bottom, 0px) + 18px + var(--phone-h) * 0.03);
  background: var(--nav-bg);
  color: var(--nav-fg);
  border-top: 1px solid rgba(255, 255, 255, 0.04);
  z-index: 30;
}
.tab {
  flex: 1 1 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px 4px;
  color: var(--nav-fg-dim);
  position: relative;
  border-radius: 14px;
  transition: transform 0.18s var(--ease-out), color 0.18s var(--ease-out);
}
.tab:active { transform: scale(0.94); }
.tab__icon { width: 28px; height: 28px; color: inherit; display: block; }
.tab__icon .solid { display: none; }
.tab__icon .outline { display: block; }
.tab__label {
  font-family: 'e-Ukraine', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0;
  color: inherit;
}
.tab--active { color: var(--nav-fg); }
.tab--active .tab__label { font-weight: 600; }
.tab--active .tab__icon .solid { display: block; }
.tab--active .tab__icon .outline { display: none; }

.tab__dot {
  position: absolute;
  top: 4px;
  right: calc(50% - 18px);
  width: 8px;
  height: 8px;
  background: var(--accent-danger);
  border-radius: 50%;
  border: 2px solid var(--nav-bg);
}

/* Section label helper used across pages */
.section-label {
  padding: 8px 24px 10px;
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 400;
}

/* Utility */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}