/* SnoopyWap – "Stari telefon". Telefon je predmet: ima iste boje u obe teme; okolina koristi promenljive sajta. */

.stl-okvir { max-width: 380px; margin: 0 auto; }

/* ---- kućište ---- */
.stl-telefon {
  position: relative;
  padding: 12px 14px 16px;
  border-radius: 46px 46px 64px 64px / 40px 40px 56px 56px;
  background: linear-gradient(155deg, #5b7096 0%, #3c4d70 38%, #27324d 100%);
  box-shadow: inset 0 2px 1px rgba(255, 255, 255, .35), inset 0 -8px 14px rgba(0, 0, 0, .35),
    inset 3px 0 6px rgba(255, 255, 255, .08), 0 16px 34px rgba(15, 20, 45, .35);
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.stl-slusalica { display: flex; justify-content: center; gap: 5px; height: 12px; align-items: center; }
.stl-slusalica i { width: 14px; height: 4px; border-radius: 2px; background: #141a2a; box-shadow: 0 1px 0 rgba(255, 255, 255, .22); }

/* ---- tamno staklo sa ekranom ---- */
.stl-staklo {
  margin-top: 4px;
  padding: 5px 14px 14px;
  border-radius: 20px 20px 46px 46px / 18px 18px 26px 26px;
  background: linear-gradient(180deg, #171c2b, #0c0f19);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 0 rgba(255, 255, 255, .12), 0 -1px 0 rgba(0, 0, 0, .4);
}
.stl-znak {
  height: 18px; line-height: 18px; text-align: center;
  font: italic 800 12px/18px var(--sans, system-ui, sans-serif);
  letter-spacing: 2px; color: #c5cde0;
}
.stl-ekran-okvir {
  position: relative;
  padding: 6px 7px;
  border-radius: 6px;
  background: #a9c36d;
  box-shadow: 0 0 0 2px #05070c, 0 0 14px rgba(190, 225, 110, .28);
}
.stl-ekran-okvir::after {                   /* senka ivice i odsjaj stakla */
  content: ''; position: absolute; inset: 0; border-radius: 6px; pointer-events: none;
  box-shadow: inset 0 3px 7px rgba(20, 35, 10, .45), inset 0 -1px 3px rgba(20, 35, 10, .2);
  background: linear-gradient(125deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 32%);
}
.stl-ekran { display: block; max-width: 100%; height: auto; margin: 0 auto; touch-action: none; cursor: pointer; image-rendering: pixelated; }

/* ---- tasteri (zajedničko) ---- */
.stl-t, .stl-str {
  -webkit-appearance: none; appearance: none;
  margin: 0; padding: 0; border: 0;
  font: inherit; color: #1a2136;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.stl-t {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px;
  background: linear-gradient(180deg, #f6f8fc 0%, #d5dbe8 55%, #b9c1d3 100%);
  box-shadow: 0 2px 0 #6f7890, 0 4px 6px rgba(0, 0, 0, .38), inset 0 1px 0 #fff;
  transition: transform .05s, box-shadow .05s, filter .05s;
}
.stl-t:active, .stl-t.stl-prit {
  transform: translateY(2px);
  box-shadow: 0 0 0 #6f7890, 0 1px 3px rgba(0, 0, 0, .4), inset 0 2px 4px rgba(40, 50, 80, .35);
  filter: brightness(.93);
}
.stl-t:focus-visible, .stl-str:focus-visible { outline: 3px solid #ffd23f; outline-offset: 2px; }

/* ---- meki tasteri, slušalice i navigacioni taster ---- */
.stl-komande {
  display: grid; grid-template-columns: minmax(44px, 1fr) 132px minmax(44px, 1fr);
  gap: 8px; align-items: stretch;
  margin-top: 10px;
}
.stl-kol { display: flex; flex-direction: column; gap: 8px; }
.stl-kol .stl-t { flex: 1 1 0; }
.stl-kol:first-child .stl-meki { border-radius: 22px 12px 12px 12px; }
.stl-kol:first-child .stl-zovi { border-radius: 12px 12px 12px 22px; }
.stl-kol:last-child .stl-meki { border-radius: 12px 22px 12px 12px; }
.stl-kol:last-child .stl-kraj { border-radius: 12px 12px 22px 12px; }
.stl-crta { display: block; width: 22px; height: 5px; border-radius: 3px; background: #33415f; }
.stl-zovi { color: #12803a; }
.stl-kraj { color: #c8202f; }
.stl-zovi svg { transform: rotate(-135deg); }
.stl-zovi svg, .stl-kraj svg { display: block; }

.stl-krst {
  display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px);
  grid-template-areas: ". gore ." "levo ok desno" ". dole .";
  width: 132px; height: 132px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 30%, #fbfcfe 0%, #d3d9e6 55%, #aab3c7 100%);
  box-shadow: 0 2px 0 #6f7890, 0 5px 8px rgba(0, 0, 0, .4), inset 0 1px 0 #fff;
}
.stl-str { display: flex; align-items: center; justify-content: center; background: transparent; border-radius: 50%; }
.stl-gore { grid-area: gore; } .stl-dole { grid-area: dole; } .stl-levo { grid-area: levo; } .stl-desno { grid-area: desno; }
.stl-ok {
  grid-area: ok;
  background: radial-gradient(circle at 40% 32%, #6d81a8, #33415f 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 0 0 3px rgba(60, 75, 110, .25);
}
.stl-str span { display: block; width: 0; height: 0; border: 8px solid transparent; }
.stl-gore span { border-bottom-color: #33415f; border-top-width: 0; }
.stl-krst .stl-dole span { border-top-color: #33415f; border-bottom-width: 0; }
.stl-levo span { border-right-color: #33415f; border-left-width: 0; }
.stl-desno span { border-left-color: #33415f; border-right-width: 0; }
.stl-ok span { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #dfe5f1; }
.stl-str:active, .stl-str.stl-prit { filter: brightness(.82); background-color: rgba(51, 65, 95, .16); }
.stl-ok:active, .stl-ok.stl-prit { filter: brightness(1.25); }

/* ---- tastatura sa brojevima ---- */
.stl-tastatura { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 8px; margin-top: 10px; }
.stl-broj { flex-direction: column; gap: 1px; height: 46px; border-radius: 12px 12px 18px 18px / 10px 10px 16px 16px; }
.stl-cifra { font: 800 20px/1 var(--sans, system-ui, sans-serif); }
.stl-slova { font: 700 12px/1 var(--mono, monospace); letter-spacing: 1px; color: #3c486a; min-height: 12px; }
.stl-razmak { width: 16px; height: 5px; min-height: 0; margin-top: 4px; border: 2px solid #3c486a; border-top: 0; box-sizing: border-box; }

.stl-mikrofon { width: 26px; height: 4px; margin: 10px auto 0; border-radius: 2px; background: #141a2a; box-shadow: 0 1px 0 rgba(255, 255, 255, .2); }

/* ---- ispod telefona (boje teme) ---- */
.stl-ispod { margin-top: 16px; text-align: center; color: var(--tekst); }
.stl-zvuk { min-height: 44px; cursor: pointer; }
.stl-pomoc { margin: 14px 0 0; text-align: left; font-size: 15px; line-height: 1.5; color: var(--slabo); }
.stl-dalje {
  margin-top: 14px; padding: 14px;
  border: 1px solid var(--ivica); border-radius: var(--radius, 16px);
  background: var(--kartica2); text-align: left;
}
.stl-dalje[hidden] { display: none; }
.stl-dalje-naslov { margin: 0 0 6px; font-size: 15px; color: var(--slabo); }
.stl-dalje-tekst { margin: 0 0 12px; font-size: 16px; color: var(--tekst); overflow-wrap: anywhere; white-space: pre-wrap; -webkit-user-select: text; user-select: text; }
.stl-dalje-dugmad { display: flex; flex-wrap: wrap; gap: 8px; }
.stl-dalje-dugmad .dugme { cursor: pointer; }
.stl-dalje-dugmad .dugme[hidden] { display: none; }
.stl-dalje-stanje { margin: 8px 0 0; min-height: 1.4em; font-size: 15px; color: var(--akcent-t); }
.stl-dalje-stanje:empty { display: none; }

@media (max-width: 340px) {
  .stl-telefon { padding-left: 10px; padding-right: 10px; }
  .stl-staklo { padding-left: 10px; padding-right: 10px; }
}