/* BalkanLoop - izgled za js/dodaci3.js i js/dodaci4.js (7.11.2026., TikTok dodaci, treći dio). */

/* --- odgovor videom na komentar --- */
.dd3-odgv { display: inline-block; margin-top: 4px; font-size: 13px; }

/* --- više opcija: dodatni redovi --- */
.dd3-up .dd3-r { justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--line); }
.dd3-up .dd3-r small { color: var(--dim); }

/* --- naljepnice na videu (uređivač i tok) --- */
.dd3-platno { position: relative; width: min(100%, 300px); aspect-ratio: 9 / 16; margin: 0 auto 10px; border-radius: 14px; overflow: hidden; background: #000; touch-action: none; }
.dd3-platno video { width: 100%; height: 100%; object-fit: cover; display: block; }
.dd3-sloj { position: absolute; inset: 0; z-index: 3; }
.dd3-sloj.dd3-tok { pointer-events: none; }
.dd3-n { position: absolute; transform: translate(-50%, -50%); line-height: 1; user-select: none; cursor: grab; text-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.dd3-n.on { outline: 2px dashed var(--amber); outline-offset: 4px; border-radius: 8px; }
.dd3-emoji { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; margin: 6px 0; }
.dd3-emoji button { font-size: 24px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 6px 0; cursor: pointer; }
.dd3-alat { display: flex; gap: 8px; justify-content: center; margin-bottom: 6px; }

/* --- glas preko videa --- */
.dd3-vo .dd2-tv canvas { width: 100%; max-height: 46vh; display: block; object-fit: contain; }

/* --- šablon od slika --- */
.dd3-slike { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; }
.dd3-sl { position: relative; aspect-ratio: 3 / 4; border-radius: 10px; overflow: hidden; }
.dd3-sl img { width: 100%; height: 100%; object-fit: cover; }
.dd3-sl button { position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .6); color: #fff; cursor: pointer; }
.dd3-dodajsl { aspect-ratio: 3 / 4; border-radius: 10px; border: 2px dashed var(--line); background: var(--card); color: var(--amber); font: 700 26px/1 system-ui, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; }
.dd3-dodajsl small { font-size: 11px; color: var(--dim); font-weight: 500; }
.dd3-sab-pr { display: none; }

/* --- nacrti u oblaku --- */
.dd3-nlista { display: flex; flex-direction: column; gap: 8px; max-height: 55vh; overflow: auto; margin: 8px 0; }
.dd3-nac { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.dd3-nac span { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.dd3-nac small { color: var(--dim); }

/* --- premijera, koautor (u toku) --- */
.dd3-prem { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: rgba(10, 6, 4, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #fff; text-align: center; }
.dd3-prem b { font: 800 26px/1.1 var(--display); }
.dd3-prem span { font-size: 18px; color: #ffc55e; font-weight: 700; }
.dd3-ko { display: inline-flex; align-items: center; gap: 4px; margin: 0 0 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .25);
  background: rgba(0, 0, 0, .35); color: #fff; font: 600 12px/1.2 system-ui, sans-serif; cursor: pointer; }

/* --- vrijeme u aplikaciji --- */
.dd3-graf { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; align-items: end; height: 140px; margin: 12px 0 6px; }
.dd3-graf div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 4px; }
.dd3-graf i { display: block; width: 70%; background: var(--amber); border-radius: 6px 6px 2px 2px; min-height: 2px; }
.dd3-graf small { color: var(--dim); font-size: 11px; }

/* --- efekti lica --- */
.screen.dd2-zeleni .dd2-lice { bottom: calc(180px + var(--safe-b)); }
.screen.dd2-zeleni .dd2-lice button { min-width: 64px; font-size: 18px; line-height: 1.1; }
.screen.dd2-zeleni .dd-poruka { bottom: calc(246px + var(--safe-b)); }
.screen.dd2-zeleni[data-mode="rec"] .dd2-lice { display: flex; }

/* --- na mreži, video poziv --- */
.dd4-status { color: var(--dim); }
.dd4-status.on { color: #3fbf6f; font-weight: 700; }
.dd4-zovi { font-size: 18px; }
.screen.dd4-poziv { background: #000; }
.dd4-dalj { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #111; }
.dd4-blizu { position: absolute; right: 14px; top: calc(70px + var(--sat)); width: 110px; height: 160px; object-fit: cover; border-radius: 14px; border: 2px solid rgba(255, 255, 255, .7); transform: scaleX(-1); background: #222; z-index: 3; }
.dd4-ptop { position: absolute; left: 0; right: 0; top: calc(16px + var(--sat)); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 2px; color: #fff; text-shadow: 0 1px 3px #000; }
.dd4-ptop b { font-size: 18px; }
.dd4-pbar { position: absolute; left: 0; right: 0; bottom: calc(30px + var(--safe-b)); z-index: 3; display: flex; justify-content: center; gap: 22px; }
.dd4-pb { width: 60px; height: 60px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .22); color: #fff; font-size: 24px; cursor: pointer; }
.dd4-pb.crveno { background: #e5533d; transform: rotate(135deg); }
.dd4-pb.zeleno { background: #2e9d5b; }
.dd4-pb.iskljuceno { background: rgba(255, 255, 255, .85); filter: grayscale(1); }
.dd4-zvoni { position: absolute; left: 12px; right: 12px; top: calc(12px + var(--sat)); z-index: 80; display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-radius: 18px; background: #211915; color: #fbf1e3; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); animation: dd4zv 1s ease-in-out infinite alternate; }
.dd4-zvoni > div { flex: 1; display: flex; flex-direction: column; }
.dd4-zvoni .dd4-pb { width: 48px; height: 48px; font-size: 20px; }
@keyframes dd4zv { from { transform: translateY(0); } to { transform: translateY(3px); } }

/* --- uživo: pitanja i borba --- */
.dd4-uz { position: absolute; left: 10px; right: 10px; top: calc(110px + var(--sat)); z-index: 6; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.dd4-upit { background: rgba(255, 255, 255, .94); color: #1a1108; border-radius: 12px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; max-width: 80%; }
.dd4-upit small { color: #8a5a10; font-weight: 700; font-size: 11px; }
.dd4-borba { background: rgba(0, 0, 0, .55); border-radius: 12px; padding: 8px 10px; color: #fff; }
.dd4-bime { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; }
.dd4-btraka { height: 10px; border-radius: 5px; background: #2b8ad6; overflow: hidden; margin: 6px 0; }
.dd4-btraka i { display: block; height: 100%; background: #e5533d; transition: width .4s; }
.dd4-ubtn { position: absolute; left: 12px; bottom: calc(150px + var(--safe-b)); z-index: 7; display: flex; flex-direction: column; gap: 8px; }
.dd4-ubtn button { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(0, 0, 0, .5); color: #fff; font-size: 20px; cursor: pointer; }
.dd4-ubtn i { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; border-radius: 9px; background: #e5533d; color: #fff; font: 700 11px/18px system-ui, sans-serif; font-style: normal; }

/* ===== js/dodaci5.js ===== */
/* izgled teksta */
.dd5-stil { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px; }
.dd5-red { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dd5-stil button { min-width: 40px; height: 34px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--text); font-size: 15px; font-weight: 700; cursor: pointer; }
.dd5-stil button.on { border-color: var(--amber); box-shadow: 0 0 0 2px rgba(244, 166, 42, .35); }
.dd5-stil .dd5-boja { min-width: 30px; width: 30px; height: 30px; border-radius: 50%; padding: 0; }
.text-ov.dd5-box { background: rgba(0, 0, 0, .55); border-radius: 10px; padding: 4px 10px; }
.dd2-sub.dd5-sv { background: none; font-size: 26px; font-weight: 800; text-shadow: 0 2px 6px rgba(0, 0, 0, .85); bottom: 40%; }
.dd5-blj { color: #e5a03d; font-size: 13px; margin: 6px 0; }
.dd5-bljb { margin: 0 0 6px; color: #ffc55e; font: 700 12px/1.2 system-ui, sans-serif; text-shadow: 0 1px 2px #000; }
.dd5-pomoc { display: block; margin: 2px 0 8px; }
.dd5-opisi { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 12px; }
.dd5-opis { text-align: left; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; cursor: pointer; }
.chips .chip.on { border-color: var(--amber); }

/* naljepnice u trakama */
.dd5-tf { display: flex; flex-direction: column; gap: 4px; margin: 6px 0; }
.dd5-tf small { color: var(--dim); }
.dd5-odg { display: flex; align-items: center; gap: 8px; }
.dd5-odg .dd2-in { margin: 2px 0; }
.dd5-nal { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); z-index: 8; width: min(80%, 300px); padding: 12px; border-radius: 16px;
  background: rgba(255, 255, 255, .95); color: #1a1108; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); display: flex; flex-direction: column; gap: 6px; text-align: center; }
.dd5-nal b { font-size: 16px; }
.dd5-nal button { position: relative; overflow: hidden; display: flex; justify-content: space-between; padding: 9px 12px; border-radius: 10px; border: 1px solid #ddd; background: #f6f1ea; color: #1a1108; font: 600 14px/1.2 system-ui, sans-serif; cursor: pointer; }
.dd5-nal button i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(43, 179, 163, .25); }
.dd5-nal button span, .dd5-nal button em { position: relative; font-style: normal; }
.dd5-nal button.tacno { border-color: #2e9d5b; background: #e3f5ea; }
.dd5-nal button.netacno { border-color: #e5533d; background: #fbe6e2; }
.dd5-nal-link a { display: flex; flex-direction: column; gap: 2px; color: #1a1108; text-decoration: none; font-weight: 800; font-size: 16px; }
.dd5-nal-link small { color: #777; font-weight: 500; font-size: 12px; }
.dd5-odb { display: flex; justify-content: center; gap: 8px; }
.dd5-odb span { display: flex; flex-direction: column; align-items: center; background: #1a1108; color: #ffc55e; border-radius: 10px; padding: 6px 8px; min-width: 48px; }
.dd5-odb i { font: 800 22px/1 var(--display); font-style: normal; }
.dd5-odb small { color: #fbf1e3; font-size: 10px; }

/* uvid i studio */
.dd5-sati { height: 100px; grid-template-columns: repeat(24, 1fr); gap: 2px; }
.dd5-zbir { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.dd5-zbir div { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; align-items: center; }
.dd5-zbir b { font: 800 22px/1.1 var(--display); }
.dd5-zbir small { color: var(--dim); }
.dd5-tabela { overflow-x: auto; padding-bottom: 24px; }
.dd5-tabela table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dd5-tabela th { text-align: left; color: var(--dim); font-weight: 600; padding: 6px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dd5-tabela td { padding: 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.dd5-tabela td img { width: 40px; height: 56px; object-fit: cover; border-radius: 6px; display: block; }
.dd5-tabela td b { display: block; font-weight: 600; }
.dd5-tabela td small { color: var(--dim); }
.dd5-tabela tr[data-vid] { cursor: pointer; }
.screen.dd5-studio .ubody { max-width: 1100px; margin: 0 auto; }

/* zdravlje i disanje */
.dd5-zbtn { flex-direction: column; align-items: stretch; }
.dd5-dis { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-height: 60vh; text-align: center; }
.dd5-krug { width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #8ee3d6, #2bb3a3 60%, #1d6f66); box-shadow: 0 0 60px rgba(43, 179, 163, .45); transform: scale(1); }
.dd5-dis b { font: 700 24px/1.2 var(--display); }
.dd5-dis small { color: var(--dim); }

/* kviz uživo */
.dd5-igra { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 8; width: min(86%, 320px); padding: 12px; border-radius: 16px;
  background: rgba(255, 255, 255, .95); color: #1a1108; display: flex; flex-direction: column; gap: 6px; text-align: center; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.dd5-igra small { color: #8a5a10; font-weight: 700; }
.dd5-igra button { position: relative; overflow: hidden; display: flex; justify-content: space-between; padding: 9px 12px; border-radius: 10px; border: 1px solid #ddd; background: #f6f1ea; color: #1a1108; font: 600 14px/1.2 system-ui, sans-serif; cursor: pointer; }
.dd5-igra button:disabled { cursor: default; }
.dd5-igra button i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(43, 179, 163, .25); }
.dd5-igra button span, .dd5-igra button em { position: relative; font-style: normal; }
.dd5-igra button.izabrano { border-color: var(--amber); }
.dd5-igra button.tacno { border-color: #2e9d5b; background: #e3f5ea; }
.dd5-igra button.netacno { border-color: #e5533d; background: #fbe6e2; }

/* 7.11. dodaci7: pretplata na autora */
.dd7-prof { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; justify-content: center; }
.dd7-chip { background: rgba(244, 166, 42, .14); border-color: rgba(244, 166, 42, .55); }
.dd7-chip.on { background: rgba(244, 166, 42, .3); color: #ffd9a0; }
.dd7-body .dd7-cijena { font-size: 18px; margin: 4px 0; }
.dd7-body .dd7-opis { margin: 4px 0 8px; }
.dd7-body .dd7-lista { margin: 6px 0 10px 18px; padding: 0; color: var(--dim); }
.dd7-body .dd7-dugmad { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.dd7-body .dd7-cijene .chip.on { background: rgba(244, 166, 42, .25); border-color: rgba(244, 166, 42, .7); }
.dd7-body .dd7-opisin { width: 100%; box-sizing: border-box; }
.dd7-body .dd7-h4 { margin: 14px 0 4px; }
.dd7-body .mali { font-size: 12px; color: var(--dim); }
.dd7-zn { display: inline-block; margin: 0 0 6px; padding: 3px 9px; border-radius: 999px; background: rgba(244, 166, 42, .25); color: #ffd9a0; font-size: 12px; font-weight: 700; }

/* 7.11. dodaci8 */
.dd8-sheet .mali { font-size: 12px; color: var(--dim); }
.dd8-sheet textarea, .dd8-sheet input[type=text], .dd8-sheet input[type=datetime-local], .dd8-sheet .dd8-pin { width: 100%; box-sizing: border-box; margin: 4px 0 8px; }
.dd8-sheet .dd8-h { margin: 14px 0 4px; }
.dd8-traka { height: 10px; border-radius: 6px; background: rgba(255,255,255,.12); overflow: hidden; margin: 10px 0; }
.dd8-traka i { display: block; height: 100%; width: 0; background: var(--accent, #f4a62a); transition: width .3s; }
.dd8-pinz { display: inline-block; font-size: 11px; font-weight: 700; color: #ffd9a0; margin-right: 6px; }
.dd8-pinb { font-size: 12px; margin-left: 6px; }
.dd8-tekst .dd8-prev { width: 100%; max-width: 270px; aspect-ratio: 9/16; display: block; margin: 0 auto 10px; border-radius: 14px; }
.dd8-tekst .dd8-ttxt { width: 100%; box-sizing: border-box; }
.dd8-red { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 8px 0; }
.dd8-poz { width: 36px; height: 36px; border-radius: 50%; border: 2px solid transparent; }
.dd8-poz.on { border-color: #fff; }
.dd8-red .chip.on { background: rgba(244,166,42,.25); border-color: rgba(244,166,42,.7); }
.dd8-prof { margin: 4px 0; }
.dd8-chips { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.dd8-najava { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center; padding: 8px 10px; margin: 6px 0; border-radius: 12px; background: rgba(229,83,61,.15); border: 1px solid rgba(229,83,61,.45); }
.dd8-najava span { color: var(--dim); }
.dd8-fan, .dd8-ur { display: flex; gap: 8px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--glass-line, rgba(255,255,255,.08)); }
.dd8-fan span { flex: 1; } .dd8-fan small, .dd8-ur small { color: var(--dim); }
.dd8-ur { flex-direction: column; gap: 2px; }
.dd8-fan.ja, .dd8-ur.ja { color: #ffd9a0; }
.dd8-brava { position: fixed; inset: 0; z-index: 9999; background: rgba(16,12,10,.96); display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.dd8-brava div { max-width: 340px; display: flex; flex-direction: column; gap: 12px; }
.dd8-brava b { font-size: 22px; }
.dd8-bez-uzivo .ulive, .dd8-bez-uzivo [data-live], .dd8-bez-uzivo .navlive { display: none !important; }

/* 8.11. dodaci9: promocija, dva koraka, porodica */
section.post .dd9-promo { position: absolute; left: 12px; top: calc(env(safe-area-inset-top, 0px) + 70px); z-index: 4; padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,.55); color: #ffd36b; font-size: 12px; font-weight: 700; pointer-events: none; }
.dd9-paketi { display: grid; gap: 8px; margin: 10px 0; }
.dd9-akt { color: #7fdc9a; font-weight: 700; }
.dd9-polje { width: 100%; box-sizing: border-box; padding: 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: inherit; font-size: 18px; letter-spacing: 2px; margin: 8px 0; }
.dd9-kod { display: grid; gap: 4px; text-align: center; padding: 12px; margin: 10px 0; border-radius: 14px; background: rgba(255,200,60,.12); }
.dd9-kod b { font-size: 32px; letter-spacing: 6px; color: #ffd36b; }
.dd9-dijete { width: 100%; text-align: left; cursor: pointer; }.dd9-zbroj { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 4px; }
.dd9-zbroj div { background: rgba(255,255,255,.06); border-radius: 12px; padding: 10px 6px; text-align: center; display: grid; gap: 2px; }
.dd9-zbroj b { font-size: 18px; color: #ffd36b; }
.dd9-zbroj small, .dd9-uslov small { opacity: .75; font-size: 11.5px; }
.dd9-uslov { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid rgba(255,255,255,.07); }
.dd9-uslov b { font-weight: 600; font-size: 14px; }
.dd9-prav { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; margin: 10px 0; }