/* =====================================================================
   VEDER — osvježen izgled javnog sajta
   Učitava se POSLIJE postojećih stilova i presvlači ih.
   Struktura stranica se ne mijenja.

   Glavna boja je boja logotipa #354567 - koriste je dugmad, linkovi,
   ikonice i aktivni elementi. Tamniji tonovi iste porodice sluze za
   panele i stanje pri prelasku misem.
   ===================================================================== */

:root{
  --v-ponoc:#222C45;
  --v-dubina:#3E5179;
  --v-signal:#354567;
  --v-signal-tih:#EDF0F8;
  --v-mint:#0FBD8C;
  --v-mint-tih:#E6F9F2;

  --v-magla:#F5F7FB;
  --v-povrs:#FFFFFF;
  --v-povrs-2:#F9FBFE;
  --v-linija:#E4E9F2;
  --v-linija-2:#D2DBE9;

  --v-tekst:#0F1A2B;
  --v-tekst-2:#4A5A72;
  --v-tekst-3:#8595AC;

  --v-r-sitno:12px;
  --v-r-panel:20px;
  --v-r-veliko:28px;

  --v-sj-1:0 1px 2px rgba(15,26,43,.04);
  --v-sj-2:0 2px 6px rgba(15,26,43,.04), 0 14px 32px -16px rgba(15,26,43,.16);
  --v-sj-3:0 24px 56px -20px rgba(27,36,64,.4);
}

[data-theme="dark"]{
  --v-magla:#070D18;
  --v-povrs:#101A2B;
  --v-povrs-2:#0C1422;
  --v-linija:#1D2838;
  --v-linija-2:#2A3850;
  --v-tekst:#E8EEF8;
  --v-tekst-2:#9BABC4;
  --v-tekst-3:#64748B;
  --v-signal-tih:#232E48;
  --v-mint-tih:#0D2A22;
}

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

/* ---------------------------------------------------------------
   TIPOGRAFIJA — jedan ritam kroz cijelu stranicu
   --------------------------------------------------------------- */
h1,h2,h3{ letter-spacing:-.03em; }

.hero h1{ font-weight:800; line-height:1.08; }
.sec-head h2{ font-weight:800; letter-spacing:-.03em; }
.sec-head p{ color:var(--v-tekst-2); }

.eyebrow{
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--v-signal);
}

/* Novac i brojevi — poravnate cifre */
.price, .amount, .premija, .wallet-card strong{
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}

/* ---------------------------------------------------------------
   DUGMAD
   --------------------------------------------------------------- */
.btn{
  border-radius:var(--v-r-sitno);
  font-weight:700;
  letter-spacing:-.01em;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active{ transform:translateY(1px); }

.btn-primary{
  background:var(--v-signal);
  border-color:var(--v-signal);
  box-shadow:0 10px 24px -12px var(--v-signal);
}
.btn-primary:hover{
  background:#2A374F;
  border-color:#2A374F;
  box-shadow:0 14px 28px -12px var(--v-signal);
}

.btn-outline{
  border:1px solid var(--v-linija-2);
  background:transparent;
  color:var(--v-tekst);
}
.btn-outline:hover{ border-color:var(--v-signal); color:var(--v-signal); background:var(--v-signal-tih); }

.btn-ghost{ color:var(--v-tekst-2); }
.btn-ghost:hover{ color:var(--v-signal); }

/* ---------------------------------------------------------------
   HERO
   --------------------------------------------------------------- */
.hero-overlay{
  background:linear-gradient(100deg, rgba(27,36,64,.9) 0%, rgba(27,36,64,.66) 45%, rgba(27,36,64,.28) 100%);
}

.hero-panel{
  border-radius:var(--v-r-veliko);
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  box-shadow:var(--v-sj-3);
}

.hero-btns .btn{ min-height:50px; padding:0 26px; }

/* Oznake ispod naslova */
.badge{
  border-radius:999px;
  padding:5px 13px;
  font-size:.78rem;
  font-weight:700;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
}



/* ---------------------------------------------------------------
   KARTICE — tri nivoa, ne isti izgled svuda
   --------------------------------------------------------------- */



.mini-list li{ color:var(--v-tekst-2); font-size:.87rem; line-height:1.65; }
.mini-list i{ color:var(--v-mint); }

/* Zašto Veder — mirne kartice, bez sjenke */
.why-card{
  border:1px solid var(--v-linija);
  border-radius:var(--v-r-panel);
  background:var(--v-povrs);
  box-shadow:none;
  transition:border-color .18s ease, background .18s ease;
}
.why-card:hover{ border-color:var(--v-linija-2); background:var(--v-povrs-2); transform:none; }
.why-card h3{ font-size:1.02rem; font-weight:700; }
.why-card p{ color:var(--v-tekst-2); font-size:.9rem; line-height:1.65; }



/* Digitalna sekcija */
.digital-section{ background:var(--v-povrs-2); }
.digital-copy h2{ font-weight:800; }
.digital-copy p{ color:var(--v-tekst-2); line-height:1.7; }

.phone-mock{
  border-radius:34px;
  box-shadow:var(--v-sj-3);
  border:1px solid var(--v-linija);
}
.wallet-card{
  border-radius:var(--v-r-panel);
  background:linear-gradient(135deg, var(--v-ponoc), var(--v-dubina));
  color:#fff;
  box-shadow:var(--v-sj-2);
}
.portal-card{
  border:1px solid var(--v-linija);
  border-radius:var(--v-r-panel);
  background:var(--v-povrs);
  box-shadow:var(--v-sj-1);
}
.portal-card-icon{ border-radius:13px; background:var(--v-mint-tih); color:#0B7A5C; }

/* Poziv na akciju pri dnu — jedini tamni panel */
.cta-band{
  border-radius:var(--v-r-veliko);
  background:linear-gradient(135deg, var(--v-ponoc), var(--v-dubina));
  box-shadow:var(--v-sj-3);
  position:relative;
  overflow:hidden;
}
.cta-band::after{
  content:'';
  position:absolute;
  right:-90px; top:-130px;
  width:360px; height:360px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(15,189,140,.2), transparent 70%);
  pointer-events:none;
}
.cta-band-wrap{ position:relative; z-index:1; }
.cta-band h2{ color:#fff; font-weight:800; }
.cta-band p{ color:#B9C9E4; }
.cta-band .btn-primary{ background:#fff; border-color:#fff; color:var(--v-dubina); box-shadow:none; }
.cta-band .btn-primary:hover{ background:#E6EAF4; border-color:#E6EAF4; color:var(--v-dubina); }
.cta-band .btn-outline{ border-color:rgba(255,255,255,.3); color:#fff; }
.cta-band .btn-outline:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.5); color:#fff; }

/* Naslovi sekcija */
.sec-head{ margin-bottom:34px; }
.section{ padding:72px 0; }

@media(max-width:768px){
  .section{ padding:48px 0; }
  .sec-head{ margin-bottom:26px; }
  .hero-btns .btn{ width:100%; justify-content:center; }
}

/* =====================================================================
   PRIJAVA I REGISTRACIJA
   ===================================================================== */

.auth-page-bg{
  background:
    radial-gradient(900px 500px at 15% -10%, rgba(53,69,103,.14), transparent 60%),
    radial-gradient(700px 420px at 100% 110%, rgba(15,189,140,.1), transparent 60%),
    var(--v-magla);
}

.auth-card{
  border:1px solid var(--v-linija);
  border-radius:var(--v-r-veliko);
  background:var(--v-povrs);
  box-shadow:var(--v-sj-2);
  padding:34px 32px;
}

.auth-icon-badge{
  width:52px; height:52px;
  border-radius:17px;
  background:linear-gradient(135deg, var(--v-ponoc), var(--v-dubina));
  color:#fff;
  display:grid; place-items:center;
  font-size:1.4rem;
  box-shadow:0 10px 24px -12px rgba(27,36,64,.6);
}

.auth-title{
  font-size:1.5rem;
  font-weight:800;
  letter-spacing:-.03em;
  color:var(--v-tekst);
}
.auth-subtitle{ color:var(--v-tekst-2); font-size:.92rem; }

/* Polja */
.auth-form .form-group label{
  font-size:.78rem;
  font-weight:700;
  color:var(--v-tekst-2);
  letter-spacing:0;
  text-transform:none;
}
.auth-form input{
  min-height:48px;
  border:1px solid var(--v-linija-2);
  border-radius:var(--v-r-sitno);
  background:var(--v-povrs-2);
  color:var(--v-tekst);
  font-size:.95rem;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.auth-form input:focus{
  outline:none;
  border-color:var(--v-signal);
  background:var(--v-povrs);
  box-shadow:0 0 0 4px var(--v-signal-tih);
}
.auth-form input::placeholder{ color:var(--v-tekst-3); }

.auth-submit{
  min-height:50px;
  border-radius:var(--v-r-sitno);
  background:var(--v-signal);
  font-weight:700;
  font-size:.98rem;
  box-shadow:0 12px 26px -14px var(--v-signal);
  transition:background .15s, box-shadow .15s, transform .15s;
}
.auth-submit:hover{ background:#2A374F; box-shadow:0 16px 30px -14px var(--v-signal); }
.auth-submit:active{ transform:translateY(1px); }

.auth-forgot{ color:var(--v-tekst-2); font-size:.85rem; font-weight:600; }
.auth-forgot:hover{ color:var(--v-signal); }

/* Razdjelnik iznad Google prijave */
.auth-oauth-divider,
.auth-divider{ color:var(--v-tekst-3); font-size:.8rem; font-weight:600; }
.auth-oauth-divider .line,
.auth-divider .line{ background:var(--v-linija); height:1px; }

.auth-google-btn{
  min-height:48px;
  border:1px solid var(--v-linija-2);
  border-radius:var(--v-r-sitno);
  background:var(--v-povrs);
  color:var(--v-tekst);
  font-weight:700;
  font-size:.92rem;
  transition:border-color .15s, background .15s;
}
.auth-google-btn:hover{ border-color:var(--v-linija-2); background:var(--v-povrs-2); }

.auth-footer-text{ color:var(--v-tekst-2); font-size:.88rem; }
.auth-footer-text a{ color:var(--v-signal); font-weight:700; }

/* Poruka o zaključanom nalogu */
.disabled-backdrop{ backdrop-filter:blur(5px); background:rgba(27,36,64,.5); }
.disabled-box{
  border-radius:var(--v-r-veliko);
  border:1px solid var(--v-linija);
  background:var(--v-povrs);
  box-shadow:var(--v-sj-3);
  padding:28px;
}
.disabled-title{ font-size:1.1rem; font-weight:800; letter-spacing:-.02em; }
.disabled-msg{ color:var(--v-tekst-2); font-size:.9rem; line-height:1.7; }
.disabled-actions .btn{ min-height:44px; }

@media(max-width:520px){
  .auth-card{ padding:26px 20px; border-radius:var(--v-r-panel); }
  .auth-title{ font-size:1.3rem; }
  .auth-form input, .auth-google-btn{ font-size:16px; }
  .auth-submit{ font-size:1rem; }
}