/* ============================================================
   AWallet, shared styles
   Loaded by index.html and politika-privatnosti.html
   ============================================================ */

/* ---------- Alta brand webfonts ----------
   Currently served from altapay.rs, which sends open CORS headers.
   TODO: copy the four files into ./assets/fonts/ and repoint these
   once the MarkPro webfont licence for this domain is confirmed.
------------------------------------------------------------- */
@font-face {
  font-family: 'MarkPro';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('https://altapay.rs/wp-content/uploads/2023/06/MarkPro.woff2') format('woff2'),
       url('https://altapay.rs/wp-content/uploads/2023/06/MarkPro.woff') format('woff');
}
@font-face {
  font-family: 'MarkPro Heavy';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('https://altapay.rs/wp-content/uploads/2023/06/MarkPro-Heavy.woff2') format('woff2'),
       url('https://altapay.rs/wp-content/uploads/2023/06/MarkPro-Heavy.woff') format('woff');
}

/* ---------- base ---------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: #fff; }
::selection { background: #D20000; color: #fff; }

.stack { line-height: 1.04; }

/* diagonal cut, same device the Alta site uses between bands */
.cut-b { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 46px), 0 100%); }

/* ---------- entrance animations ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
.rise { opacity: 0; animation: rise .85s cubic-bezier(.16,1,.3,1) forwards; }

@keyframes phoneIn { from { opacity: 0; transform: translateY(48px) scale(.96); } to { opacity: 1; transform: none; } }
.phone-in { opacity: 0; animation: phoneIn 1.1s cubic-bezier(.16,1,.3,1) .3s forwards; }

@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee { animation: slide 38s linear infinite; }

/* ---------- scroll reveal ---------- */
.rv { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.rv.in { opacity: 1; transform: none; }

/* ---------- interactive ---------- */
.btn { transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease, background-color .2s ease, color .2s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.card-hov { transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; }
.card-hov:hover { transform: translateY(-6px); box-shadow: 0 24px 45px -24px rgba(0,0,0,.28); }

.lang-on { background: #D20000; color: #fff; }

/* ============================================================
   Legal pages, long form prose
   Scoped to .legal so it cannot leak into the landing page.
   ============================================================ */
.legal { color: #575756; line-height: 1.75; }

.legal h2 {
  font-family: 'MarkPro Heavy', Poppins, ui-sans-serif, sans-serif;
  color: #3C3C3B;
  font-size: 1.5rem;
  line-height: 1.25;
  margin: 3rem 0 1rem;
  scroll-margin-top: 100px;
}
.legal h2:first-child { margin-top: 0; }

.legal h3 {
  font-family: 'MarkPro Heavy', Poppins, ui-sans-serif, sans-serif;
  color: #3C3C3B;
  font-size: 1.0625rem;
  margin: 2rem 0 .625rem;
}

.legal p { margin: 0 0 1.125rem; }
.legal p:last-child { margin-bottom: 0; }

.legal ul { margin: 0 0 1.125rem; padding: 0; list-style: none; }
.legal ul li { position: relative; padding-left: 1.375rem; margin-bottom: .625rem; }
.legal ul li::before {
  content: ''; position: absolute; left: 0; top: .7em;
  width: 6px; height: 6px; border-radius: 9999px; background: #D20000;
}

.legal a { color: #D20000; text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: #8C0000; }

.legal strong { color: #3C3C3B; font-weight: 600; }

/* definition style table used for the controller identity block */
.legal .facts { width: 100%; border-collapse: collapse; margin: 0 0 1.125rem; }
.legal .facts th,
.legal .facts td { text-align: left; vertical-align: top; padding: .75rem 0; border-bottom: 1px solid #E6E6E6; }
.legal .facts th { width: 42%; font-weight: 400; color: #7A7A7A; padding-right: 1.5rem; }
.legal .facts td { color: #3C3C3B; }

@media (max-width: 640px) {
  .legal .facts th, .legal .facts td { display: block; width: auto; padding-right: 0; }
  .legal .facts th { border-bottom: 0; padding-bottom: .125rem; }
}

/* in page table of contents */
.toc a {
  display: block; padding: .5rem 0; color: #575756;
  text-decoration: none; border-bottom: 1px solid #E6E6E6;
  transition: color .2s ease;
}
.toc a:last-child { border-bottom: 0; }
.toc a:hover { color: #D20000; }

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise, .phone-in, .marquee { animation: none !important; opacity: 1 !important; transform: none !important; }
  .rv { opacity: 1 !important; transform: none !important; transition: none; }
  .btn:hover, .card-hov:hover { transform: none; }
}