/* ===================================================================
   T1X2 SPIN — stilovi
   =================================================================== */
:root{
  --t1x2-bg:#0b1220;
  --t1x2-bg2:#111a2e;
  --t1x2-gold:#f5c542;
  --t1x2-gold2:#ffdf7e;
  --t1x2-text:#e8eefc;
  --t1x2-muted:#93a1c0;
  --t1x2-ok:#22c55e;
  --t1x2-accent:#6d5efc;
}

/* ---------- Promo baner ---------- */
.t1x2-banner{
  cursor:pointer; user-select:none;
  border-radius:14px; padding:2px;
  background:linear-gradient(90deg,var(--t1x2-gold),#ff7a59,var(--t1x2-accent));
  background-size:200% 100%;
  animation:t1x2-shift 6s linear infinite;
  box-shadow:0 8px 24px rgba(109,94,252,.25);
}
.t1x2-banner-inner{
  display:flex; align-items:center; gap:12px;
  background:var(--t1x2-bg); border-radius:12px;
  padding:12px 16px; color:var(--t1x2-text); font:600 15px/1.2 system-ui,Segoe UI,Arial;
}
.t1x2-banner-badge{
  font:800 11px/1 system-ui; letter-spacing:.5px;
  background:var(--t1x2-gold); color:#231a00; padding:5px 8px; border-radius:6px;
}
.t1x2-banner-text b{ color:var(--t1x2-gold2); }
@keyframes t1x2-shift{ to{ background-position:200% 0; } }

/* ---------- Modal ---------- */
.t1x2-modal{
  position:fixed; inset:0; z-index:99999; display:none;
  align-items:center; justify-content:center;
  background:rgba(4,8,18,.78); backdrop-filter:blur(4px);
  padding:16px;
}
.t1x2-modal.open{ display:flex; }
.t1x2-card{
  position:relative; width:min(476px,96vw); max-height:94vh; overflow-y:auto;
  margin-top:25px;
  background:radial-gradient(120% 100% at 50% 0%,var(--t1x2-bg2),var(--t1x2-bg));
  border:1px solid rgba(245,197,66,.25); border-radius:20px;
  padding:20px 18px 22px; color:var(--t1x2-text);
  box-shadow:0 24px 80px rgba(0,0,0,.6);
  text-align:center;
  -webkit-overflow-scrolling:touch;
}
.t1x2-card.t1x2-win{ animation:t1x2-cardglow 1.4s ease-out; }
@keyframes t1x2-cardglow{
  0%{ box-shadow:0 0 0 rgba(245,197,66,0); }
  30%{ box-shadow:0 0 60px rgba(245,197,66,.6),0 24px 80px rgba(0,0,0,.6); }
  100%{ box-shadow:0 24px 80px rgba(0,0,0,.6); }
}
.t1x2-close{
  position:absolute; top:10px; right:12px; width:34px; height:34px;
  border:none; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.08); color:var(--t1x2-text);
  font-size:22px; line-height:1;
}
.t1x2-close:hover{ background:rgba(255,255,255,.16); }
.t1x2-title{
  margin:2px 0 8px; font:800 26px/1 system-ui; letter-spacing:1px;
}
.t1x2-title span{ color:var(--t1x2-gold); }
.t1x2-notice{
  font:500 13px/1.4 system-ui; color:var(--t1x2-muted);
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);
  border-radius:10px; padding:9px 12px; margin:6px 0 20px;
}

/* ---------- Točak ---------- */
.t1x2-wheel-wrap{
  position:relative; width:min(82vw,420px); aspect-ratio:1/1; margin:0 auto;
}
#t1x2-wheel{
  width:100%; height:100%;
  border-radius:50%;
  box-shadow:0 0 0 8px #0b1220,0 0 0 12px var(--t1x2-gold),0 18px 50px rgba(0,0,0,.55);
}
.t1x2-pointer{
  position:absolute; top:-4px; left:50%; transform:translateX(-50%);
  width:0; height:0; z-index:5;
  border-left:15px solid transparent; border-right:15px solid transparent;
  border-top:26px solid var(--t1x2-gold);
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.5));
}
.t1x2-confetti{
  position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:6;
}

/* ---------- Dugme / rezultat ---------- */
.t1x2-spin-btn{
  margin:18px auto 6px; display:block; min-width:180px;
  padding:14px 28px; border:none; border-radius:14px; cursor:pointer;
  font:800 17px/1 system-ui; letter-spacing:1px; color:#231a00;
  background:linear-gradient(180deg,var(--t1x2-gold2),var(--t1x2-gold));
  box-shadow:0 8px 22px rgba(245,197,66,.35);
  transition:transform .08s ease,filter .15s ease;
}
.t1x2-spin-btn:hover{ filter:brightness(1.05); }
.t1x2-spin-btn:active{ transform:translateY(1px); }
.t1x2-spin-btn:disabled{
  background:#2a3350; color:#8090b0; cursor:not-allowed; box-shadow:none;
}
.t1x2-result{
  min-height:22px; margin:10px 4px 0; font:600 15px/1.4 system-ui;
}
.t1x2-result.win{ color:var(--t1x2-gold2); text-shadow:0 0 18px rgba(245,197,66,.5); }
.t1x2-result.lose{ color:var(--t1x2-muted); }
.t1x2-result a{ color:var(--t1x2-gold); font-weight:700; }

/* ---------- Kladionice / otključavanje ---------- */
.t1x2-bookmakers{ margin-top:16px; text-align:left; }
.t1x2-bm-title{ font:600 13px/1.3 system-ui; color:var(--t1x2-muted); margin-bottom:8px; }
.t1x2-bm-row{
  display:flex; flex-direction:column; gap:6px;
  padding:10px 12px; margin-bottom:8px; border-radius:10px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06);
}
.t1x2-bm-top{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.t1x2-bm-name{ font:700 14px/1 system-ui; min-width:88px; }
.t1x2-bm-input{
  flex:1 1 120px; min-width:110px; padding:8px 10px; border-radius:8px;
  border:1px solid rgba(255,255,255,.14); background:#0c1424; color:var(--t1x2-text);
  font:500 16px system-ui; letter-spacing:.5px; /* 16px = iOS ne zumira na fokus */
}
.t1x2-bm-save{
  padding:8px 14px; border:none; border-radius:8px; cursor:pointer;
  font:700 13px system-ui; color:#231a00; background:var(--t1x2-gold);
}
.t1x2-bm-save:hover{ filter:brightness(1.05); }
.t1x2-bm-open{
  font:600 12px/1.3 system-ui; color:var(--t1x2-gold); text-decoration:none;
}
.t1x2-bm-open:hover{ text-decoration:underline; }
.t1x2-bm-id{ font:500 13px/1.3 system-ui; color:var(--t1x2-text); }
.t1x2-bm-id b{ color:var(--t1x2-gold2); letter-spacing:.5px; }
.t1x2-bm-ok{ font:700 12px system-ui; color:var(--t1x2-ok); }

@media (max-width:420px){
  .t1x2-title{ font-size:22px; }
  .t1x2-bm-name{ min-width:100%; }
}

/* ================= Lep scrollbar u modalu ================= */
.t1x2-card{ scrollbar-width:thin; scrollbar-color:var(--t1x2-gold) rgba(255,255,255,.06); }
.t1x2-card::-webkit-scrollbar{ width:10px; }
.t1x2-card::-webkit-scrollbar-track{ background:rgba(255,255,255,.05); border-radius:10px; margin:8px 0; }
.t1x2-card::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--t1x2-gold2),var(--t1x2-gold));
  border-radius:10px; border:2px solid var(--t1x2-bg2);
}
.t1x2-card::-webkit-scrollbar-thumb:hover{ filter:brightness(1.08); }

/* ================= Info dugme ================= */
.t1x2-info{
  position:absolute; top:12px; left:14px; width:30px; height:30px; z-index:4;
  border:1px solid rgba(245,197,66,.5); border-radius:50%; cursor:pointer;
  background:rgba(245,197,66,.12); color:var(--t1x2-gold);
  font:800 15px/1 Georgia,serif; font-style:italic;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, transform .1s ease;
}
.t1x2-info:hover{ background:rgba(245,197,66,.22); }
.t1x2-info:active{ transform:scale(.94); }

/* ================= Popup: Pravila / uslovi ================= */
.t1x2-rules{
  position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center;
  padding:18px; background:rgba(4,8,18,.72); backdrop-filter:blur(4px);
  opacity:0; visibility:hidden; transform:scale(1.01);
  transition:opacity .22s ease, visibility .22s ease, transform .22s ease;
}
.t1x2-rules.show{ opacity:1; visibility:visible; transform:scale(1); }
.t1x2-rules-box{
  position:relative; width:min(480px,96vw); max-height:82vh; max-height:82dvh; overflow-y:auto;
  background:radial-gradient(120% 100% at 50% 0%,var(--t1x2-bg2),var(--t1x2-bg));
  border:1px solid rgba(245,197,66,.3); border-radius:18px; padding:22px 20px 20px;
  color:var(--t1x2-text); box-shadow:0 24px 80px rgba(0,0,0,.6);
  transform:translateY(14px) scale(.97); transition:transform .26s cubic-bezier(.2,.8,.2,1);
  scrollbar-width:thin; scrollbar-color:var(--t1x2-gold) rgba(255,255,255,.06);
}
.t1x2-rules.show .t1x2-rules-box{ transform:translateY(0) scale(1); }
.t1x2-rules-box::-webkit-scrollbar{ width:9px; }
.t1x2-rules-box::-webkit-scrollbar-track{ background:rgba(255,255,255,.05); border-radius:10px; }
.t1x2-rules-box::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,var(--t1x2-gold2),var(--t1x2-gold)); border-radius:10px; border:2px solid var(--t1x2-bg2); }
.t1x2-rules-box h3{ margin:0 0 12px; color:var(--t1x2-gold); font:800 19px/1.2 system-ui; padding-right:34px; }
.t1x2-rules-body{ font:400 14px/1.6 system-ui; color:#cdd8f0; }
.t1x2-rules-body p{ margin:0 0 11px; }
.t1x2-rules-body b{ color:var(--t1x2-text); }
.t1x2-rules-close{
  position:absolute; top:12px; right:12px; width:32px; height:32px; border:none; border-radius:50%;
  cursor:pointer; background:rgba(255,255,255,.08); color:var(--t1x2-text); font-size:20px; line-height:1;
}
.t1x2-rules-close:hover{ background:rgba(255,255,255,.16); }

/* ================= Mobilni: modal preko cele stranice, veći točak ================= */
@media (max-width:560px){
  .t1x2-modal{ padding:0; }
  .t1x2-card{
    width:100vw; max-width:100vw; height:100vh; height:100dvh; max-height:none;
    border-radius:0; border-left:none; border-right:none;
    padding:16px 14px 26px;
    padding-top:calc(16px + env(safe-area-inset-top));
    padding-bottom:calc(26px + env(safe-area-inset-bottom));
    display:flex; flex-direction:column;
  }
  .t1x2-title{ font-size:24px; margin-top:6px; }
  .t1x2-wheel-wrap{ width:min(92vw, 62dvh); }
  .t1x2-close{ top:calc(12px + env(safe-area-inset-top)); right:14px; width:38px; height:38px; font-size:24px; }
  .t1x2-info{ top:calc(14px + env(safe-area-inset-top)); left:16px; width:34px; height:34px; }
  .t1x2-spin-btn{ min-width:200px; padding:16px 30px; font-size:18px; }
}

/* =====================================================================
   ANTI-KOLIZIJA SA TEMOM SAJTA
   Tema gađa elemente (a, h2, h3, input, button) i to procuri u modal.
   Ovde to neutralizujemo — skovano pod #t1x2-spin-modal (visoka specifičnost)
   + !important na osobinama koje teme najčešće menjaju.
   ===================================================================== */

/* box-sizing za sve u widgetu (da padding ne razbija širine) */
#t1x2-spin-banner, #t1x2-spin-banner *,
.t1x2-modal, .t1x2-modal *,
.t1x2-rules, .t1x2-rules *{ box-sizing:border-box; }

/* --- Linkovi (tema pregazi boju 'a' -> crveni) --- */
.t1x2-modal a, .t1x2-rules a{ text-decoration:none; }
.t1x2-result a, .t1x2-bm-open{ color:var(--t1x2-gold) !important; }
.t1x2-result a:hover, .t1x2-bm-open:hover{ color:var(--t1x2-gold2) !important; text-decoration:underline; }

/* --- Inputi (tema postavi belu pozadinu / crn tekst / margine) --- */
#t1x2-spin-modal .t1x2-bm-input{
  background:#0c1424 !important; color:var(--t1x2-text) !important;
  border:1px solid rgba(255,255,255,.14) !important; border-radius:8px !important;
  margin:0 !important; height:42px !important; line-height:normal !important;
  -webkit-appearance:none; appearance:none; box-shadow:none !important; outline:none;
  font:500 16px system-ui !important; /* 16px = iOS Safari ne zumira modal na fokus */
}
#t1x2-spin-modal .t1x2-bm-input::placeholder{ color:#7d8db0 !important; opacity:1; }
#t1x2-spin-modal .t1x2-bm-input:focus{ border-color:var(--t1x2-gold) !important; }
/* Razmak ispod poslednje kladionice (da toolbar ne prekrije zadnjeg partnera) */
#t1x2-spin-modal .t1x2-bookmakers{ padding-bottom:calc(30px + env(safe-area-inset-bottom)); }

/* --- Dugmad: poravnanje "Sačuvaj" sa inputom + boje bez uticaja teme --- */
#t1x2-spin-modal .t1x2-bm-top{ align-items:center; }
#t1x2-spin-modal .t1x2-bm-save{
  margin:0 !important; height:42px !important; line-height:1 !important;
  padding:0 16px !important; border:none !important; border-radius:8px !important;
  display:inline-flex; align-items:center; justify-content:center;
  color:#231a00 !important; background:var(--t1x2-gold) !important;
  text-transform:none !important; box-shadow:none !important; font:700 13px system-ui !important;
  min-height:0 !important; width:auto !important;
}
#t1x2-spin-modal .t1x2-spin-btn{
  text-transform:none !important; border:none !important; height:auto !important;
  color:#231a00 !important;
}

/* --- Naslov "T1X2 SPIN" (tema h2 može dodati traku/uppercase) --- */
#t1x2-spin-modal .t1x2-title{
  background:none !important; border:none !important; box-shadow:none !important;
  height:auto !important; min-height:0 !important; line-height:1 !important;
  padding:0 !important; margin:2px 0 8px !important; text-transform:none !important;
  color:var(--t1x2-text) !important;
}
#t1x2-spin-modal .t1x2-title span{ color:var(--t1x2-gold) !important; }

/* --- Naslov u Pravilima (poprimio .module h3: siva traka, uppercase, box-shadow) --- */
#t1x2-spin-modal .t1x2-rules-box h3{
  margin:0 0 12px !important; padding:0 34px 0 0 !important;
  height:auto !important; min-height:0 !important; line-height:1.2 !important;
  background:none !important; color:var(--t1x2-gold) !important;
  text-transform:none !important; letter-spacing:normal !important;
  border:none !important; box-shadow:none !important;
  font:800 19px/1.2 system-ui,Segoe UI,Arial !important; text-align:left !important;
}
/* Pravila: čitljivije levo poravnato (nasleđivalo je center od .t1x2-card) */
#t1x2-spin-modal .t1x2-rules-box{ text-align:left !important; }
#t1x2-spin-modal .t1x2-rules-body{ text-align:left !important; }
#t1x2-spin-modal .t1x2-rules-body p{ color:#cdd8f0 !important; }
#t1x2-spin-modal .t1x2-rules-body b{ color:var(--t1x2-text) !important; }