/* =========================================================
   Barber2Be Academy — checkout / admin
   Istite tokeni kako index.html: ink, panel, gold, cream
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700;800&display=swap');

:root{
  --ink:#0b0b0c;
  --panel:#141416;
  --gold:#c9a24b;
  --goldlight:#e6c878;
  --cream:#f3ede0;
  --line:rgba(255,255,255,.10);
  --muted:rgba(243,237,224,.60);
  --faint:rgba(243,237,224,.40);
  --ok:#5ec27e;
  --err:#e0645c;
  --warn:#d9a441;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body.page{
  margin:0;
  min-height:100vh;
  background:var(--ink);
  color:var(--cream);
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding:48px 20px;
}

.shell{max-width:1100px;margin:0 auto}
.shell--narrow{max-width:520px}
.shell--mid{max-width:860px}

/* ---------- Tipografija ---------- */
.eyebrow{
  margin:0 0 14px;
  color:var(--gold);
  font-size:11px;
  font-weight:700;
  letter-spacing:.3em;
  text-transform:uppercase;
}
.title{
  font-family:'Anton',sans-serif;
  font-weight:400;
  font-size:clamp(28px,5vw,44px);
  line-height:1.05;
  margin:0 0 16px;
  text-transform:uppercase;
  letter-spacing:.01em;
}
.subtitle{
  font-family:'Anton',sans-serif;
  font-weight:400;
  font-size:20px;
  text-transform:uppercase;
  margin:0 0 12px;
}
.lede{color:var(--muted);font-size:15px;line-height:1.65;margin:0 0 28px}
.small{font-size:12px;color:var(--faint);line-height:1.6}
code{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:.9em;
  color:var(--goldlight);
  background:rgba(201,162,75,.08);
  padding:2px 6px;
}
.plain{margin:0;padding-left:18px}
.plain li{margin:4px 0}

/* ---------- Karticki ---------- */
.card{
  background:var(--panel);
  border:1px solid var(--line);
  padding:32px;
}
.card + .card{margin-top:20px}

.summary{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:4px 0;
  margin:0 0 28px;
}
.summary__row{
  display:flex;justify-content:space-between;gap:16px;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.summary__row:last-child{border-bottom:none}
.summary__key{color:var(--faint);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.summary__val{font-weight:600;font-size:14px;text-align:right}
.summary__val--price{font-family:'Anton',sans-serif;font-size:26px;color:var(--gold);font-weight:400}

.features{list-style:none;margin:0 0 28px;padding:0}
.features li{
  display:flex;align-items:center;gap:12px;
  padding:8px 0;color:var(--muted);font-size:14px;
}
.features li::before{
  content:'';width:18px;height:1px;background:var(--gold);flex:0 0 18px;
}

/* ---------- Layout na checkout ---------- */
.split{display:grid;grid-template-columns:1fr;gap:20px}
@media(min-width:860px){
  .split{grid-template-columns:1.15fr .85fr;align-items:start}
}

/* ---------- Formi ---------- */
.form{display:flex;flex-direction:column;gap:18px}
.form__row{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:560px){.form__row{grid-template-columns:1fr 1fr}}

.field{display:flex;flex-direction:column;gap:8px}
.field__label{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:600;
}
.field__input{
  width:100%;
  background:#0f0f11;
  border:1px solid var(--line);
  color:var(--cream);
  font-family:inherit;
  font-size:15px;
  padding:14px 16px;
  transition:border-color .2s ease;
}
.field__input::placeholder{color:rgba(243,237,224,.25)}
.field__input:focus{outline:none;border-color:var(--gold)}
.field__input:focus-visible{outline:2px solid var(--goldlight);outline-offset:2px}
.field__hint{font-size:12px;color:var(--faint)}
.field--error .field__input{border-color:var(--err)}
.field__error{font-size:12px;color:var(--err)}

.check{
  display:flex;gap:12px;align-items:flex-start;
  font-size:13px;color:var(--muted);line-height:1.55;
}
.check input{margin-top:3px;accent-color:var(--gold);width:16px;height:16px;flex:0 0 16px}
.check a{color:var(--gold)}

/* ---------- Kopcinja ---------- */
.btn{
  display:inline-block;
  border:1px solid transparent;
  font-family:inherit;font-weight:700;font-size:14px;
  letter-spacing:.06em;text-transform:uppercase;
  padding:16px 32px;
  cursor:pointer;text-align:center;text-decoration:none;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.btn--gold{background:var(--gold);color:var(--ink)}
.btn--gold:hover{background:var(--goldlight)}
.btn--ghost{background:transparent;color:var(--cream);border-color:rgba(243,237,224,.3)}
.btn--ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn--full{width:100%}
.btn:focus-visible{outline:2px solid var(--goldlight);outline-offset:3px}

/* ---------- Poraki ---------- */
.note{
  border:1px solid var(--line);
  border-left-width:3px;
  padding:16px 18px;
  margin:0 0 20px;
  font-size:14px;line-height:1.6;
  background:rgba(255,255,255,.02);
}
.note--ok{border-left-color:var(--ok)}
.note--err{border-left-color:var(--err)}
.note--warn{border-left-color:var(--warn)}

/* ---------- Znaci na doverba ---------- */
.trust{
  margin-top:24px;text-align:center;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
}

/* ---------- Statusni oznaki ---------- */
.tag{
  display:inline-block;
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 10px;border:1px solid currentColor;
}
.tag--paid{color:var(--ok)}
.tag--pending{color:var(--warn)}
.tag--failed{color:var(--err)}
.tag--cancelled{color:var(--faint)}

/* ---------- Tabela (admin) ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);background:var(--panel)}
table.data{width:100%;border-collapse:collapse;font-size:14px;min-width:820px}
table.data th{
  text-align:left;padding:14px 16px;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  border-bottom:1px solid var(--line);white-space:nowrap;
}
table.data td{padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:middle}
table.data tr:last-child td{border-bottom:none}
table.data tr:hover td{background:rgba(255,255,255,.02)}
table.data a{color:var(--gold);text-decoration:none}
table.data a:hover{text-decoration:underline}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;color:var(--muted)}

/* ---------- Admin lenta ---------- */
.bar{
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  margin:0 0 28px;padding-bottom:20px;border-bottom:1px solid var(--line);
}
.bar__links{display:flex;gap:20px;align-items:center;font-size:13px}
.bar__links a{color:var(--muted);text-decoration:none}
.bar__links a:hover{color:var(--gold)}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin:0 0 28px}
.stat{border:1px solid var(--line);padding:20px;background:var(--panel)}
.stat__num{font-family:'Anton',sans-serif;font-size:30px;color:var(--gold);line-height:1;margin:0 0 6px}
.stat__label{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

.filters{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px}
.filters input,.filters select{
  background:#0f0f11;border:1px solid var(--line);color:var(--cream);
  padding:11px 14px;font-family:inherit;font-size:14px;
}
.filters input:focus,.filters select:focus{outline:none;border-color:var(--gold)}

.pager{display:flex;gap:10px;justify-content:center;margin-top:24px;font-size:13px}
.pager a,.pager span{padding:9px 15px;border:1px solid var(--line);color:var(--muted);text-decoration:none}
.pager a:hover{border-color:var(--gold);color:var(--gold)}
.pager .is-active{background:var(--gold);color:var(--ink);border-color:var(--gold);font-weight:700}

/* ---------- Loader (redirect kon banka) ---------- */
.loader{
  width:44px;height:44px;margin:0 auto 24px;
  border:2px solid rgba(201,162,75,.2);
  border-top-color:var(--gold);
  border-radius:50%;
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}