/* Moonya cenovnik: jedan izgled kartica za landing, onboarding (izbor plana) i objašnjenja stavki u HQ Naplati
   (12.10.2026). Podaci i tekstovi su u app/plans-shared.js. UI3 tokeni sa rezervnim vrednostima, jer se fajl
   učitava na tri različite stranice. Bez important pravila. */
.u-plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;text-align:left}
.u-plan-card{position:relative;display:flex;flex-direction:column;gap:16px;min-width:0;padding:30px;border-radius:var(--u-r-xl,34px);background:var(--u-white,#fff);color:var(--u-text,#22252c);font-family:var(--u-font,"Urbanist",Arial,sans-serif);line-height:1.5}
.u-plan-card h3{margin:0;color:var(--u-ink,#0d0e11);font:800 26px/1.05 var(--u-font,"Urbanist",Arial,sans-serif);letter-spacing:-.03em}
.u-plan-card p{margin:0}
.u-plan-card>div>p{color:var(--u-muted,#6f7684)}
.u-plan-price{display:flex;align-items:baseline;gap:8px}
.u-plan-price strong{font-size:56px;font-weight:900;letter-spacing:-.04em;color:var(--u-ink,#0d0e11);line-height:1;font-variant-numeric:tabular-nums}
.u-plan-price span{color:var(--u-muted,#6f7684);font-weight:600}
.u-plan-output{display:grid;gap:2px;padding:12px 14px;border-radius:14px;background:var(--u-card,#f6f7fa)}
.u-plan-output>span{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--u-muted,#6f7684)}
.u-plan-output strong{color:var(--u-ink,#0d0e11)}
.u-plan-card ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-weight:600;font-size:15.5px}
.u-plan-card li{position:relative;padding-left:22px}
.u-plan-card li::before{content:"✓";position:absolute;left:0;top:0;color:var(--u-green,#5fb08a);font-weight:800}
.u-plan-cta{margin-top:auto;display:grid;gap:8px;text-align:center}
.u-plan-cta small{font-size:12.5px;color:var(--u-muted,#6f7684)}
.u-plan-featured{background:var(--u-ink,#0d0e11);color:var(--u-night-text,#e9ecf2)}
.u-plan-featured h3,.u-plan-featured .u-plan-price strong{color:#fff}
.u-plan-featured>div>p,.u-plan-featured .u-plan-price span,.u-plan-featured .u-plan-cta small,.u-plan-featured .u-plan-output>span{color:var(--u-night-muted,#959cab)}
.u-plan-featured .u-plan-output{background:var(--u-night-2,#17191e)}
.u-plan-featured .u-plan-output strong{color:#fff}
/* 17.10: plan izabran na landingu (?plan=) – ista kartica, samo uokvirena */
.u-plan-card.is-selected{box-shadow:0 0 0 3px var(--u-blue,#7f9bd8)}
.u-plan-tag{align-self:flex-start;padding:5px 11px;border-radius:999px;background:var(--u-blue,#7f9bd8);color:var(--u-ink,#0d0e11);font-size:12.5px;font-weight:800}
/* dugme u kartici (onboarding); landing koristi svoje lp-button linkove istog izgleda */
.u-plan-btn{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:50px;padding:0 24px;border:0;border-radius:999px;background:transparent;color:var(--u-ink,#0d0e11);box-shadow:inset 0 0 0 1.5px var(--u-ink,#0d0e11);font:800 15.5px/1.2 var(--u-font,"Urbanist",Arial,sans-serif);text-align:center;cursor:pointer;transition:transform .2s ease,background .2s ease}
.u-plan-btn:hover{background:var(--u-card,#f6f7fa)}
.u-plan-btn.is-light{background:var(--u-white,#fff);box-shadow:none}
.u-plan-btn.is-light:hover{transform:translateY(-2px)}
.u-plan-btn:disabled{opacity:.5;cursor:default;transform:none}
.u-plan-btn:focus-visible{outline:2px solid var(--u-ink,#0d0e11);outline-offset:3px}
.u-plan-featured .u-plan-btn:focus-visible{outline-color:#fff}
/* uža varijanta (unutar prozora za izbor plana): isti izgled, manje mere */
.u-plan-grid.is-compact{gap:12px}
.u-plan-grid.is-compact .u-plan-card{gap:13px;padding:22px;border-radius:var(--u-r-lg,28px)}
.u-plan-grid.is-compact .u-plan-card h3{font-size:22px}
.u-plan-grid.is-compact .u-plan-card>div>p{font-size:14px}
.u-plan-grid.is-compact .u-plan-price strong{font-size:44px}
.u-plan-grid.is-compact .u-plan-card ul{gap:8px;font-size:14px}
.u-plan-grid.is-compact .u-plan-card li{padding-left:20px}
.u-plan-grid.is-compact .u-plan-btn{min-height:48px;padding:0 16px;font-size:15px}
@media (max-width:1060px){.u-plan-grid{grid-template-columns:minmax(0,1fr);max-width:560px;margin-inline:auto}}

/* zaokruženo „i" + oblačić sa objašnjenjem (hover, fokus, dodir) */
.u-info{position:relative;flex:none;display:inline-grid;place-items:center;vertical-align:middle;width:18px;height:18px;margin:-3px 0 0;padding:0;border:1.5px solid currentColor;border-radius:50%;background:transparent;color:var(--u-muted,#6f7684);font:800 11px/1 var(--u-font,"Urbanist",Arial,sans-serif);font-style:normal;text-transform:none;letter-spacing:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.u-info::after{content:"";position:absolute;inset:-12px} /* veća meta za dodir (42 px) bez pomeranja reda */
.u-info:hover,.u-info[aria-expanded="true"]{color:var(--u-ink,#0d0e11)}
.u-info:focus-visible{outline:2px solid var(--u-ink,#0d0e11);outline-offset:2px}
.u-plan-featured .u-info{color:var(--u-night-muted,#959cab)}
.u-plan-featured .u-info:hover,.u-plan-featured .u-info[aria-expanded="true"]{color:#fff}
.u-plan-featured .u-info:focus-visible{outline-color:#fff}
.u-tip{position:fixed;z-index:3000;left:0;top:0;width:max-content;max-width:300px;padding:10px 13px;border-radius:12px;background:var(--u-ink,#0d0e11);color:#fff;box-shadow:0 14px 34px -14px rgba(13,14,17,.6),0 0 0 1px rgba(255,255,255,.14);font:500 13.5px/1.45 var(--u-font,"Urbanist",Arial,sans-serif);letter-spacing:0;text-align:left;text-transform:none;pointer-events:none}
.u-tip[hidden]{display:none}
.u-tip::after{content:"";position:absolute;left:var(--u-tip-arrow,50%);top:100%;width:10px;height:10px;margin:-5px 0 0 -5px;background:inherit;transform:rotate(45deg)}
.u-tip.is-below::after{top:0}
/* tamne kartice u HQ Naplati i PWA (izdvojen plan) */
.u-bill-plan.is-hot .u-info,.m-bill-planc.is-hot .u-info{color:rgba(255,255,255,.7)}
.u-bill-plan.is-hot .u-info:hover,.u-bill-plan.is-hot .u-info[aria-expanded="true"],.m-bill-planc.is-hot .u-info:hover,.m-bill-planc.is-hot .u-info[aria-expanded="true"]{color:#fff}
.u-bill-plan.is-hot .u-info:focus-visible,.m-bill-planc.is-hot .u-info:focus-visible{outline-color:#fff}
.u-bill-credits .u-info{margin:0 0 0 auto}