/* ═══════════════════════════════════════════════════════════════════════
   terios.css — samo ono što postoji na Terios stranici
   Zajednički deo je u base.css i mora se učitati pre ovog fajla.

   Terios nosi svoju boju: base.css je crven (Kolmex/Arriva), pa se ovde
   menjaju tokeni umesto da se prepisuju pojedinačna pravila.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --brand:#2E86A8;        /* tamnija od logotipa — mora da nosi beo tekst */
  --brand-deep:#1f6480;
  --brand-soft:#e4f2f8;
  --terios-light:#6EB2CC; /* boja logotipa, za tamne podloge */
}

.btn--primary{background:linear-gradient(180deg,#3fa0c4,#25778f);box-shadow:0 10px 26px -10px rgba(46,134,168,.75)}
.btn--primary:hover{box-shadow:0 16px 32px -10px rgba(46,134,168,.8)}
.hero::before{
  background:
    radial-gradient(58% 46% at 50% -6%, rgba(46,134,168,.34), transparent 68%),
    radial-gradient(40% 36% at 88% 22%, rgba(110,178,204,.16), transparent 72%);
}
.hero h1 em{color:var(--terios-light)}
.brand svg{width:150px}
@media (max-width:560px){.brand svg{width:108px}}   /* logotip je širok, pravi mesta dugmetu */
.footer__brand>svg{width:150px}     /* ne dira mali Kolmex logo u .by */
.cta-box{background:linear-gradient(135deg,#141c33,#12283a 60%,#0f3446)}
/* na tamnoj podlozi base.css koristi crvenu direktno, ne token */
.dark-zone .card__ico{background:rgba(110,178,204,.18);color:var(--terios-light)}
.dark-zone .card__num{color:var(--terios-light)}

/* ── traka stanja razvoja ───────────────────────────────────────────── */
.status{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;
  background:rgba(110,178,204,.1);border:1px solid rgba(110,178,204,.28);border-radius:var(--r-md);
  padding:14px 20px;margin-top:clamp(28px,4vw,44px)}
.status b{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--terios-light);background:rgba(110,178,204,.16);border-radius:999px;padding:5px 11px}
.status span{font-size:.92rem;color:rgba(255,255,255,.68)}

/* ── tok: numerisani koraci ─────────────────────────────────────────── */
.flow{display:grid}
.flow__item{display:grid;grid-template-columns:56px minmax(0,1fr);gap:20px;align-items:start;
  padding:22px 0;border-top:1px solid var(--ink-line)}
.flow__item:last-child{border-bottom:1px solid var(--ink-line)}
.flow__no{font-family:var(--mono);font-weight:500;font-size:.9rem;color:var(--terios-light);
  background:rgba(110,178,204,.16);border-radius:10px;width:42px;height:42px;display:grid;place-items:center}
.flow__item h3{margin-bottom:5px}
.flow__item p{color:rgba(255,255,255,.56);font-size:.94rem;max-width:70ch}
@media (max-width:620px){.flow__item{grid-template-columns:1fr;gap:11px}}

/* ── replika kiosk ekrana ───────────────────────────────────────────────
   Iste jedinice kao kod Arrive: 1px dizajna na 1280px širine = 0.078125cqw,
   pa se ekran skalira tačno bez obzira na širinu kolone. */
.tkwrap{container-type:inline-size;width:100%;max-width:940px;margin-inline:auto}
.tkscreen{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:12px;
  background:linear-gradient(160deg,#101c24,#0a1116 60%,#080b0e);color:#fff;
  border:1px solid rgba(255,255,255,.1);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3.1cqw;padding:4cqw}
.tkscreen::before{content:'';position:absolute;inset:0;
  background:radial-gradient(60% 50% at 50% 0,rgba(110,178,204,.18),transparent 70%)}
.tkscreen>*{position:relative;z-index:2}
.tk-logo{width:14cqw;opacity:.95}
.tk-hi{font-size:1.1cqw;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.tk-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2cqw;width:100%}
.tk-tile{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);border-radius:1.6cqw;
  padding:3.4cqw 2cqw;display:flex;flex-direction:column;align-items:center;gap:1.1cqw;text-align:center}
.tk-tile.on{background:rgba(110,178,204,.16);border-color:rgba(110,178,204,.5)}
.tk-ico{font-size:3.6cqw;line-height:1}
.tk-tl{font-size:2cqw;font-weight:700;letter-spacing:-.02em}
.tk-ts{font-size:1.05cqw;color:rgba(255,255,255,.5)}
.tk-foot{font-size:1cqw;color:rgba(255,255,255,.4);letter-spacing:.1em;text-transform:uppercase}

/* drugi ekran: identifikacija i plaćanje */
.tkscreen--pay{justify-content:center;gap:2.4cqw}
.tk-name{font-size:3.4cqw;font-weight:800;letter-spacing:-.03em}
.tk-rows{width:100%;max-width:56cqw;display:grid;gap:.6cqw}
.tk-row{display:flex;justify-content:space-between;align-items:center;padding:1.2cqw 0;
  border-bottom:1px solid rgba(255,255,255,.12);font-size:1.6cqw}
.tk-row span{color:rgba(255,255,255,.5)}
.tk-row b{font-weight:700}
.tk-due{background:rgba(110,178,204,.12);border:1px solid rgba(110,178,204,.3);border-radius:1.2cqw;
  padding:1.6cqw 3cqw;text-align:center}
.tk-due b{display:block;font-size:4.2cqw;font-weight:800;line-height:1;color:var(--terios-light)}
.tk-due small{font-size:1.05cqw;color:rgba(255,255,255,.5)}
.tk-pay{background:linear-gradient(135deg,#3fa0c4,#25778f);border-radius:1cqw;
  padding:1.5cqw 5cqw;font-size:1.7cqw;font-weight:700}

@supports not (container-type:inline-size){
  .tk-tl{font-size:17px}.tk-name{font-size:26px}.tk-due b{font-size:34px}
  .tk-ico{font-size:28px}.tk-pay{font-size:14px}
}

/* prekidač ekrana kioska */
.tktabs{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;margin:0 0 clamp(20px,3vw,30px)}
.tktab{font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;padding:8px 14px;border-radius:999px;
  border:1px solid var(--ink-line);color:rgba(255,255,255,.6);background:rgba(255,255,255,.04);transition:.18s}
.tktab:hover{color:#fff;border-color:rgba(255,255,255,.3)}
.tktab[aria-selected="true"]{background:var(--terios-light);border-color:var(--terios-light);color:#0b1b22;font-weight:600}
.tkpanel{display:none}
.tkpanel.on{display:block}

/* ── ekrani u telefonu ──────────────────────────────────────────────── */
/* okvir telefona (.pbody/.pscreen) je u base.css — ovde je samo sadržaj */
.tp{padding:10px;display:grid;gap:8px;align-content:start;flex:1;background:#f4f6f8;color:#111}
.tp-top{background:#0b1b22;color:#fff;margin:-10px -10px 2px;padding:11px 12px}
.tp-top small{display:block;font-family:var(--mono);font-size:7px;letter-spacing:.14em;color:rgba(255,255,255,.5)}
.tp-top b{display:block;font-size:12px;font-weight:800;letter-spacing:-.03em;margin-top:3px}
.tp-card{background:#fff;border:1px solid #e6e9ed;border-radius:10px;padding:9px 10px;display:grid;gap:3px}
.tp-card b{font-size:10px;font-weight:800}
.tp-card small{font-size:8px;color:#8b9199}
.tp-badge{justify-self:start;font-size:7.5px;font-weight:700;padding:2px 7px;border-radius:99px;
  background:#e4f2f8;color:#1f6480}
.tp-badge.warn{background:#fffbeb;color:#b45309}
.tp-qr{width:74px;height:74px;margin:2px auto;border-radius:8px;background:
  repeating-linear-gradient(90deg,#111 0 4px,#fff 4px 8px),repeating-linear-gradient(#111 0 4px,#fff 4px 8px);
  background-blend-mode:multiply;border:4px solid #fff;box-shadow:0 0 0 1px #e6e9ed}
.tp-row{display:flex;justify-content:space-between;font-size:8.5px;padding:4px 0;border-bottom:1px solid #eef0f3}
.tp-row span{color:#8b9199}
.tp-row b{font-weight:700}
.tp-btn{background:#2E86A8;color:#fff;text-align:center;font-size:9px;font-weight:800;padding:8px;border-radius:8px}

/* ── raspored grupnih treninga ──────────────────────────────────────── */
.sched{display:grid;gap:8px}
.sched-row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;gap:14px;align-items:center;
  background:rgba(255,255,255,.05);border:1px solid var(--ink-line);border-radius:12px;padding:12px 15px}
.sched-row .t{font-family:var(--mono);font-size:.82rem;color:var(--terios-light)}
.sched-row b{display:block;font-size:.95rem;color:#fff;letter-spacing:-.01em}
.sched-row small{display:block;font-size:.8rem;color:rgba(255,255,255,.5);margin-top:2px}
.sched-row .cap{font-family:var(--mono);font-size:.68rem;padding:4px 10px;border-radius:999px;
  background:rgba(110,178,204,.14);color:var(--terios-light);white-space:nowrap}
.sched-row .cap.full{background:rgba(255,255,255,.07);color:rgba(255,255,255,.45)}
@media (max-width:560px){
  .sched-row{grid-template-columns:52px minmax(0,1fr);row-gap:8px}
  .sched-row .cap{grid-column:2}
}

/* ── kartice sa oznakom stanja ──────────────────────────────────────── */
.rdy{display:grid;gap:9px}
.rdy div{display:grid;grid-template-columns:22px 1fr;gap:11px;align-items:start;font-size:.92rem;color:rgba(255,255,255,.72);line-height:1.5}
.rdy i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal;
  font-size:.62rem;font-weight:700;flex:none;margin-top:1px}
.rdy .ok{background:var(--lime);color:var(--lime-ink)}
.rdy .wip{background:rgba(110,178,204,.2);color:var(--terios-light)}