/* Poziv na preuzimanje aplikacije Moj eDoktor unutar /alati/ (Petra, 01.11.2026. - dopuna na sve alate).
   Scoped prefiks "appcta-" da ne dira alat-v5.css. Koristi varijable iz .alt (--ink, --g2, --g4, --tqd)
   definirane u alat-v5.css - ova datoteka se uvijek ucitava NAKON njega. Prosireno iz makete
   _review/app-cta-alati/ (30.10.2026.) na sve alate koji nemaju poziv na app. */

.appcta-wrap{margin-top:18px}
.appcta-card{
    display:flex;align-items:center;gap:16px;flex-wrap:wrap;
    background:#f0fbfa;border:1.5px solid #9fe0da;border-radius:20px;
    padding:18px 20px;position:relative;overflow:hidden;
}
.appcta-card::before{
    content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#00968e;
}
.appcta-ic{
    flex:0 0 auto;width:42px;height:42px;border-radius:12px;background:#00968e;color:#fff;
    display:flex;align-items:center;justify-content:center;
}
.appcta-txt{flex:1 1 220px;min-width:0}
.appcta-title{font-family:'Inter Tight',sans-serif;font-weight:700;font-size:.95rem;color:var(--ink);line-height:1.3;margin-bottom:3px}
.appcta-desc{font-size:.8125rem;color:var(--g5,#5b6b80);line-height:1.5;margin:0}
.appcta-badge{flex:0 0 auto;display:inline-flex;line-height:0;margin-left:auto}
.appcta-badge img{display:block;height:40px;width:auto;border-radius:6px}
.appcta-note{font-size:.6875rem;color:var(--g4,#94a3b8);margin-top:8px}

.appcta-card--general .appcta-ic{background:#00968e}

@media(max-width:480px){
    .appcta-card{padding:16px}
    .appcta-badge{margin-left:0;width:100%}
    .appcta-badge img{width:100%;max-width:170px}
}

/* Nikad u aplikaciji - alt-mkt je vec skriven za html.u-app u alat-v5.css; ovdje jos i izravno
   za slucaj da se appcta-wrap koristi izvan .alt .alt-mkt omota (npr. provjera-simptoma, kvizovi). */
html.u-app .appcta-wrap,html.u-twa .appcta-wrap{display:none!important}
/* iPhone/Safari - app ne postoji na iOS-u, nema PWA manifesta za /alati/, poziv se ne prikazuje */
html.ed-ios .appcta-wrap{display:none!important}

/* ===== Traka nakon 2. koristenog alata u posjeti (app-cta.js) ===== */
.appcta-banner{
    position:fixed;left:14px;right:14px;bottom:14px;z-index:500;
    max-width:460px;margin:0 auto;
    background:#fff;border:1.5px solid #9fe0da;border-radius:18px;
    box-shadow:0 18px 44px rgba(11,31,51,.18);
    padding:14px 16px;display:flex;align-items:center;gap:12px;
    transform:translateY(20px);opacity:0;transition:transform .35s,opacity .35s;
}
.appcta-banner.appcta-banner--show{transform:translateY(0);opacity:1}
.appcta-banner-ic{flex:0 0 auto;width:36px;height:36px;border-radius:10px;background:#00968e;color:#fff;display:flex;align-items:center;justify-content:center}
.appcta-banner-txt{flex:1 1 auto;min-width:0;font-size:.8125rem;color:var(--ink,#0f172a);line-height:1.4;font-weight:600}
.appcta-banner-badge{flex:0 0 auto;display:inline-flex;line-height:0}
.appcta-banner-badge img{display:block;height:32px;width:auto}
.appcta-banner-x{flex:0 0 auto;width:26px;height:26px;border:0;background:transparent;color:var(--g4,#94a3b8);cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:50%}
.appcta-banner-x:hover{background:#f1f5f9;color:var(--ink,#0f172a)}
@media(max-width:480px){
    .appcta-banner{flex-wrap:wrap}
    .appcta-banner-txt{order:1;flex:1 1 100%}
    .appcta-banner-badge{order:2}
    .appcta-banner-x{order:3;position:absolute;top:8px;right:8px}
}
html.u-app .appcta-banner,html.u-twa .appcta-banner,html.ed-ios .appcta-banner{display:none!important}