/* Premium paketi (mockup paketi.html). Okvir je u alati-v2.css. */
body.ziher-paketi-v2 #masthead,
body.ziher-paketi-v2 #colophon,
body.ziher-paketi-v2 .entry-header,
body.ziher-paketi-v2 #ziher-brko-fab,
body.ziher-paketi-v2 #ast-scroll-top{display:none!important}
body.ziher-paketi-v2,
body.ziher-paketi-v2 #page,
body.ziher-paketi-v2 .site-content,
body.ziher-paketi-v2 .ast-container,
body.ziher-paketi-v2 #primary,
body.ziher-paketi-v2 #main{margin:0!important;padding:0!important;max-width:none!important;width:100%!important;background:#060a15!important}

#app .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#app .payoff{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:var(--r);border:1px solid rgba(245,163,10,.35);background:var(--osoft);color:#ffe2a8}
#app .payoff div{display:grid;gap:2px;font-size:14px}
#app .payoff span{color:#e9d6ad}
#app .payoff[hidden]{display:none!important}
#app .bivsi{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:14px 16px;border-radius:var(--r);border:1px solid rgba(34,192,138,.35);background:linear-gradient(90deg,var(--gsoft),transparent 70%),var(--card)}
#app .bivsi .grow{flex:1 1 240px;display:grid;gap:2px;min-width:0}
#app .bivsi b{font-size:15px}
#app .bivsi span{font-size:13px;color:var(--mut)}

#app .plans{display:grid;gap:14px;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch}
@container app (max-width:1000px){#app .plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container app (max-width:560px){#app .plans{grid-template-columns:1fr;gap:10px}}
#app .plan{position:relative;display:flex;flex-direction:column;gap:12px;padding:20px 18px 18px;border-radius:var(--r);border:1px solid var(--line2);background:linear-gradient(180deg,var(--card2),var(--card));cursor:pointer;min-width:0}
#app .plan:hover{border-color:rgba(255,255,255,.22)}
#app .plan input{position:absolute;opacity:0;pointer-events:none}
#app .plan:has(input:focus-visible){outline:2px solid var(--green);outline-offset:3px}
#app .plan:has(input:checked){border-color:var(--green);box-shadow:0 0 0 1px var(--green),0 22px 50px -28px rgba(34,192,138,.6)}
#app .plan.feat{border-color:rgba(245,163,10,.45);background:radial-gradient(120% 80% at 100% 0,rgba(245,163,10,.16),transparent 60%),linear-gradient(180deg,var(--card2),var(--card))}
#app .plan.feat:has(input:checked){border-color:var(--green)}
#app .tag{position:absolute;top:-11px;left:18px;height:22px;padding:0 10px;border-radius:999px;background:var(--orange);color:#1b1102;font-size:11px;font-weight:800;letter-spacing:.06em;display:flex;align-items:center}
#app .pl-h{display:flex;align-items:center;justify-content:space-between;gap:10px}
#app .pl-h b{font-size:17px;font-weight:800}
#app .radio{width:22px;height:22px;border-radius:50%;border:2px solid var(--line2);display:grid;place-items:center;flex:none}
#app .plan:has(input:checked) .radio{border-color:var(--green);background:var(--green)}
#app .plan:has(input:checked) .radio::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--ink)}
#app .price{display:flex;align-items:baseline;gap:6px}
#app .price b{font-size:36px;font-weight:800;letter-spacing:-.03em;line-height:1}
#app .price span{color:var(--mut);font-size:14px}
#app .dur{font-size:14px;color:#d3d9e6}
#app .until{font-size:13px;color:var(--mut);padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.04)}
#app .until b{color:var(--fg)}
#app .pl-meta{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12px;color:var(--mut);margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
#app .pl-meta b{color:var(--fg);font-weight:600}
@container app (max-width:560px){
#app .plan{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h price" "dur dur" "until until" "meta meta";gap:6px 12px;padding:16px}
#app .pl-h{grid-area:h;flex-direction:row-reverse;justify-content:flex-end}
#app .price{grid-area:price;justify-self:end}
#app .dur{grid-area:dur}
#app .until-w{grid-area:until}
#app .pl-meta{grid-area:meta;margin-top:4px}
#app .price b{font-size:26px}
#app .tag{top:-10px;left:16px}
}
#app .plan.off{opacity:.55;cursor:default}
#app .plan.off:hover{border-color:var(--line2)}
#app .until-w{display:grid;gap:8px;min-width:0}
#app .until.warn{background:var(--osoft);color:#ffe2a8}
#app .plan .btn.sm{align-self:flex-start}
#app .cmp{margin:0;font-size:14px;color:var(--mut);text-align:center}
#app .cmp b{color:var(--fg)}

#app .ft{border-radius:var(--r);border:1px solid var(--line2);background:var(--card);overflow:hidden}
#app .ft-r{display:grid;grid-template-columns:minmax(0,1fr) 96px 96px;align-items:center;gap:8px;padding:12px 16px;border-top:1px solid var(--line);font-size:14px}
#app .ft-r:first-child{border-top:0}
#app .ft-hd{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);background:rgba(255,255,255,.02)}
#app .ft-hd .pcol{color:var(--orange)}
#app .ft-r>span:not(:first-child){text-align:center}
#app .ft-r small{display:block;color:var(--mut);font-size:12px}
#app .yes{color:var(--green);font-weight:800}
#app .no{color:var(--mut2)}
#app .part{font-size:12px;color:#c3cce0}
#app .ft-r>span:last-child{background:rgba(245,163,10,.05);margin:-12px 0;padding:12px 0;align-self:stretch;display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap}
@container app (max-width:560px){#app .ft-r{grid-template-columns:minmax(0,1fr) 72px 72px;padding:12px}}

#app .loy{border-radius:var(--r);padding:20px;border:1px solid var(--line2);background:radial-gradient(100% 120% at 0 0,rgba(34,192,138,.10),transparent 55%),var(--card);display:grid;gap:18px}
#app .loy h2{font-size:20px;font-weight:800;margin-top:8px}
#app .loy p{margin:6px 0 0;color:var(--mut);font-size:14px;max-width:62ch}
#app .prog{display:grid;gap:10px;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.04)}
#app .prog-top{display:flex;align-items:center;gap:12px}
#app .prog-top div{display:grid;gap:2px;min-width:0}
#app .prog-top b{font-size:15px}
#app .prog-top span{font-size:13px;color:var(--mut)}
#app .prog .bar{height:10px}
#app .prog .bar i{background:linear-gradient(90deg,var(--ring2),var(--ring1))}
#app .ladder{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}
@container app (max-width:760px){#app .ladder{grid-template-columns:repeat(2,minmax(0,1fr))}}
#app .ladder li{display:grid;gap:6px;padding:12px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.02)}
#app .ladder li.got{border-color:rgba(34,192,138,.35)}
#app .ladder li.next{border-color:rgba(245,163,10,.45);background:var(--osoft)}
#app .lm{display:flex;align-items:center;gap:8px}
#app .lm i{width:14px;height:14px;border-radius:50%;flex:none;box-shadow:0 0 0 3px rgba(255,255,255,.04)}
#app .lm b{font-size:13px}
#app .ladder .pts-n{font-size:20px;font-weight:800}
#app .ladder .gift{font-size:12px;color:var(--mut)}
#app .ladder .gift b{color:var(--orange);font-weight:700}
#app .faq p{padding:0 16px 16px!important}

#app .buybar{position:sticky;bottom:0;z-index:45;margin-top:-80px;padding:12px max(16px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));background:linear-gradient(180deg,transparent,rgba(6,10,21,.92) 30%);pointer-events:none}
#app .bb-in{pointer-events:auto;max-width:760px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 16px;padding:12px 12px 10px 18px;border-radius:20px;background:rgba(16,26,51,.92);backdrop-filter:blur(12px);border:1px solid var(--line2);box-shadow:0 20px 50px -20px rgba(0,0,0,.8)}
#app .bb-sel{display:grid;line-height:1.2}
#app .bb-sel span{font-size:13px;color:var(--mut);white-space:nowrap}
#app .bb-sel b{font-size:22px;font-weight:800;white-space:nowrap}
#app .bb-note{grid-column:1/-1;margin:0;font-size:12px;color:var(--mut2)}
#app .bb-in .btn[disabled]{background:rgba(255,255,255,.08);color:var(--mut);cursor:not-allowed;filter:none}
body.ziher-paketi-v2.has-buybar #app .fab{bottom:calc(140px + env(safe-area-inset-bottom,0px))}
@container app (max-width:560px){
#app .bb-in{grid-template-columns:1fr}
#app .bb-in .btn{width:100%}
}