/* =========================================================
   WEB APP: boje paketa (order/web-app.php)
   Učitava se POSLIJE order.css i mijenja samo ono što je kod Office paketa narandžasto, plus dodatke ove stranice.
   Boje paketa su iste kao na stranici sa cjenovnikom: #47aca0 (naslov), #96dbcf (svijetla), #38988e / #2a7771 (tamne).
========================================================= */

.op--webapp {
    --app: #47aca0;
    --app-d: #2a7771;
    --app-m: #38988e;
    --app-l: #96dbcf;
}

/* naslov "WEB APP" iznad forme */
.op--webapp .intro h1 em {
    background: linear-gradient(100deg, var(--app) 0%, var(--app-d) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* naslov "WEB APP" u sažetku (tamna kartica, pa svjetlija nijansa da se dobro čita) */
.op--webapp .sum h3 span {
    color: var(--app-l);
}

/* početna cijena vrste sistema */
.op--webapp .opt-p {
    color: var(--app-m);
}

/* kartice vrsta: pet kartica u dvije kolone, posljednja preko cijele širine */
.op--webapp #stepType .opts--2 > .opt:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

/* cijena u redu funkcije i oznaka "Preporučeno" */
.op--webapp .ap-p,
.op--webapp .ap-rec {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font: 600 12px/1.5 var(--head);
    font-style: normal;
    vertical-align: middle;
    white-space: nowrap;
}

.op--webapp .ap-p {
    background: rgba(127, 127, 127, .13);
    color: var(--muted);
}

.op--webapp .ap-rec {
    background: var(--app-m);
    color: #fff;
}

.op--webapp .ap-rec[hidden] {
    display: none;
}

/* prekidač + otvoreni izbor ispod njega izgledaju kao jedna kartica */
.op--webapp .row-wrap > .orow.is-on:not([disabled]) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.op--webapp .row-wrap > .lang {
    margin-top: 0;
    padding: 16px 18px 18px;
    border: 1.5px solid var(--main);
    border-top: 1px solid var(--border);
    border-radius: 0 0 13px 13px;
    background: #fff;
}

.op--webapp .pay-t {
    margin: 0 0 12px;
    font: 600 13px/1 var(--head);
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--muted);
}

/* ako je broj jezika neparan, posljednje polje ide preko cijele širine */
.op--webapp .lang-grid .f:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

@media (max-width: 760px) {
    .op--webapp #stepType .opts--2 {
        grid-template-columns: 1fr;
    }
}