/* Tukaj definiramo glavne barve, ki jih bomo uporabljali po celi strani */
:root{
  --bg1:#0f172a;   /* temno modro ozadje */
  --bg2:#1e293b;   /* druga barva ozadja */
  --card:rgba(255,255,255,0.06); /* prosojna barva za kartice */
  --border:rgba(255,255,255,0.10); /* rob kartic */
  --text:#ffffff;  /* glavna barva teksta */
  --muted:#cbd5e1; /* svetlejši tekst */
  --glow1: rgba(99,102,241,0.35); /* vijoličen sijaj */
  --glow2: rgba(168,85,247,0.30); /* drugi sijaj */
}

/* Da padding in border ne povečujeta velikosti elementov */
*{ box-sizing:border-box; }

/* Osnovni izgled strani */
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);

  /* animirano gradient ozadje */
  background: linear-gradient(-45deg, var(--bg1), var(--bg2), #312e81, #581c87);
  background-size: 400% 400%;
  animation: gradient 12s ease infinite;

  min-height:100vh; /* da stran zapolni celo višino */
}

/* animacija premikanja gradienta */
@keyframes gradient{
  0%{ background-position:0% 50%;}
  50%{ background-position:100% 50%;}
  100%{ background-position:0% 50%;}
}

/* dodatni glow efekt v ozadju */
.bg{
  position:fixed;
  inset:0;
  pointer-events:none; /* da ne blokira klikov */
  background:
    radial-gradient(800px 400px at 20% 10%, var(--glow1), transparent 60%),
    radial-gradient(900px 450px at 80% 30%, var(--glow2), transparent 60%);
  filter: blur(2px);
  opacity: 0.9;
}

/* zgornji del strani (logo + naslov) */
.header{ padding: 22px 18px 6px; }

/* logo in naslov sta v isti vrsti */
.brand{
  max-width: 1050px;
  margin: 0 auto;
  display:flex;
  align-items:center;
  gap:14px;
}

/* izgled logotipa */
.logo{
  width: 62px;
  height: 62px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.08);
  box-shadow: 0 0 30px rgba(168,85,247,0.25);
  object-fit: cover;
}

/* naslov aplikacije */
.title{ font-weight: 900; font-size: 28px; }

/* opis pod naslovom */
.subtitle{ color: var(--muted); margin-top: 2px; font-size: 14px; }

/* glavni container strani */
.container{
  max-width: 1050px;
  margin: 0 auto;
  padding: 14px 18px 30px;
}

/* razporeditev v dve koloni */
.grid{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 18px;
}

/* na manjših ekranih je samo ena kolona */
@media (max-width: 980px){
  .grid{ grid-template-columns: 1fr; }
}

/* izgled kartic (glass efekt) */
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 16px;
  backdrop-filter: blur(10px);
}

/* naslov kartice */
.card-title{ font-weight:800; margin-bottom: 10px; }

/* okvir za video kamere */
.video-wrap{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
}

/* video iz kamere */
video{
  width: 100%;
  display:block;
  max-height:440px;
  position: relative;
  z-index: 1;
}
/* animacija skeniranja čez kamero */
.scan{
  position:absolute;
  inset:0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(168,85,247,0.18) 45%,
    rgba(99,102,241,0.22) 55%,
    transparent 100%
  );
  transform: translateY(-120%);
  animation: scan 1.2s ease-in-out infinite;
}

/* animacija skeniranja */
@keyframes scan{
  0%{ transform: translateY(-120%); }
  100%{ transform: translateY(120%); }
}

/* overlay ko je kamera ugasnjena */
.cam-off{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  font-size:20px;
  color:white;
  background: rgba(0,0,0,0.6);
}

/* gumbi */
.row{ display:flex; gap: 10px; margin-top: 12px; flex-wrap:wrap; }

/* glavni gumb */
.btn{
  background: linear-gradient(90deg, #6366f1, #a855f7);
  border: none;
  padding: 11px 16px;
  border-radius: 14px;
  color: white;
  font-weight: 800;
  cursor: pointer;
}

/* efekt ko greš z miško čez gumb */
.btn:hover{
  transform: translateY(-1px) scale(1.02);
}

/* gumb ko je onemogočen */
.btn:disabled{
  opacity: 0.65;
}

/* drugi stil gumba */
.btn.secondary{
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border);
}

/* namig uporabniku */
.hint{ margin-top: 12px; color: var(--muted); font-size: 13px; }

/* status tekst */
.status{
  margin-top: 10px;
  font-size: 13px;
}

/* rezultat */
.result{ display:flex; flex-direction:column; gap: 8px; }

/* oznaka za rezultat */
.pill{
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 900;
}

/* opis rezultata */
.desc{ color: var(--muted); }

/* sekcije */
.section{ margin-top: 14px; }

/* naslov sekcije */
.section-title{ font-weight: 800; }

/* container za barve */
.swatches{ display:flex; flex-wrap:wrap; gap:10px; }

/* posamezen kvadratek barve */
.swatch{
  width: 44px;
  height: 44px;
  border-radius: 14px;
}

/* efekt ko greš z miško čez barvo */
.swatch:hover{ transform: scale(1.06); }

/* footer */
.footer{
  margin-top: 16px;
  font-size: 12px;
  text-align:center;
}

/* če je element hidden naj bo res skrit */
#camOff[hidden]{
  display: none !important;
}

#outfitColor{
  margin-top: 10px;
}

.video-wrap{
  position: relative;
}

#outfitOverlay {
  position: absolute;
  bottom: 5px;
  left: 31%;
  width: 42%;
  height: 34%;
  background: transparent;
  opacity: 0.9;
  pointer-events: none;
  z-index: 999;

  clip-path: polygon(
    15% 0%,
    85% 0%,
    100% 30%,
    85% 100%,
    15% 100%,
    0% 30%
  );

  border-radius: 18px;
}