/* Stilovi za kalkulatore koji se prikazuju u iframeu na /kalkulatori/ (zamjena za stari /css/compiled.css) */

@font-face { font-display: swap; font-family: Roboto; font-style: normal; font-weight: 400; src: url(/fonts/roboto-v49-latin_latin-ext-regular.woff2) format("woff2"); }
@font-face { font-display: swap; font-family: Roboto; font-style: normal; font-weight: 700; src: url(/fonts/roboto-v49-latin_latin-ext-700.woff2) format("woff2"); }
@font-face { font-display: swap; font-family: Roboto Slab; font-style: normal; font-weight: 400; src: url(/fonts/roboto-slab-v36-latin_latin-ext-regular.woff2) format("woff2"); }

:root {
    --clr-white: hsla(0, 0%, 100%, 1);
    --clr-neutral-50: hsla(210, 50%, 98%, 1);
    --clr-neutral-100: hsla(210, 11%, 96%, 1);
    --clr-neutral-400: hsla(0, 0%, 88%, 1);
    --clr-neutral-700: hsla(0, 0%, 47%, 1);
    --clr-primary-500: hsla(217, 59%, 25%, 1);
    --clr-primary-600: hsla(217, 59%, 20%, 1);
    --clr-secondary-500: hsla(40, 100%, 54%, 1);
    --clr-dark-500: hsla(0, 0%, 15%, 1);
    --clr-danger: hsla(0, 75%, 45%, 1);
    --ff-primary: "Roboto", sans-serif;
    --ff-secondary: "Roboto Slab", serif;
    --radius: .5rem;
    --btn-radius: 1.25rem;
}

*, *:before, *:after { box-sizing: border-box; }

html, body { height: auto; }

/* Visina iframea se računa iz visine body-ja - margin 0 i flow-root da se uračunaju svi elementi */
body {
    margin: 0;
    padding: 0 0 1rem;
    display: flow-root;
    font-family: var(--ff-primary);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--clr-dark-500);
    background: var(--clr-white);
}

.clearfix { clear: both; }

/* Forma */
.fieldset-bg {
    background: var(--clr-neutral-50);
    border: 1px solid var(--clr-neutral-400);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.25rem;
}

.row-fluid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.5rem;
}

.row-fluid > .clearfix { display: none; }

@media (max-width: 40em) {
    .row-fluid { grid-template-columns: minmax(0, 1fr); }
}

.input-container { position: relative; }

.input-container > label {
    display: block;
    margin-bottom: .375rem;
    font-weight: 700;
    font-size: .9375rem;
    color: var(--clr-primary-500);
}

.input-container input[type="text"],
.input-container input[type="number"],
.input-container select {
    width: 100%;
    height: 2.75rem;
    padding: .5rem .75rem;
    border: 1px solid var(--clr-neutral-400);
    border-radius: var(--radius);
    background-color: var(--clr-white);
    font: inherit;
    color: inherit;
}

.input-container input:focus,
.input-container select:focus {
    outline: 2px solid var(--clr-primary-500);
    outline-offset: -1px;
}

/* Checkbox / radio - stari markup: input (skriven) + label + div.check / div.checkbox */
.filters ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.filters li { position: relative; }

.filters input[type="radio"],
.filters input[type="checkbox"] { position: absolute; opacity: 0; width: 1.125rem; height: 1.125rem; margin: 0; top: .125rem; left: 0; }

.filters li label {
    display: block;
    position: relative;
    z-index: 2;
    cursor: pointer;
    padding-left: 1.75rem;
    line-height: 1.375rem;
    font-size: .9375rem;
}

.filters .check,
.filters .checkbox {
    position: absolute;
    top: .125rem;
    left: 0;
    width: 1.125rem;
    height: 1.125rem;
    border: 1px solid var(--clr-neutral-700);
    background: var(--clr-white);
    z-index: 1;
    transition: border-color .2s, background-color .2s;
}

.filters .check { border-radius: 50%; }
.filters .checkbox { border-radius: .25rem; }

.filters .check::before,
.filters .checkbox::before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
}

.filters .check::before { width: .5rem; height: .5rem; border-radius: 50%; }
.filters .checkbox::before { width: .3125rem; height: .625rem; border: solid transparent; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }

.filters input[type="radio"]:checked ~ .check { border-color: var(--clr-primary-500); }
.filters input[type="radio"]:checked ~ .check::before { background: var(--clr-primary-500); }
.filters input[type="checkbox"]:checked ~ .checkbox { border-color: var(--clr-primary-500); background: var(--clr-primary-500); }
.filters input[type="checkbox"]:checked ~ .checkbox::before { border-color: var(--clr-white); }
.filters input:focus-visible ~ .check,
.filters input:focus-visible ~ .checkbox { outline: 2px solid var(--clr-secondary-500); outline-offset: 2px; }

.field-validation-error {
    display: block;
    margin-top: .25rem;
    font-size: .8125rem;
    color: var(--clr-danger);
}

/* Gumb */
.btn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.75rem;
    padding: .375rem 2rem;
    margin: 0 .5rem .5rem 0;
    border: 2px solid var(--clr-primary-500);
    border-radius: var(--btn-radius);
    background-color: var(--clr-primary-500);
    color: var(--clr-white);
    font-family: var(--ff-secondary);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 .25rem .75rem #0000001a;
    transition: background-color .3s, border-color .3s;
    -webkit-appearance: none;
    appearance: none;
}

.btn-submit:hover,
.btn-submit:focus-visible { background-color: var(--clr-primary-600); border-color: var(--clr-primary-600); }

/* Rezultati */
table.calc,
table.tblplan {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0;
    font-size: .9375rem;
}

table.calc th,
table.calc td,
table.tblplan td {
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--clr-neutral-400);
    text-align: left;
    vertical-align: top;
}

table.calc th { font-weight: 700; color: var(--clr-primary-500); background: var(--clr-neutral-100); }

/* Prazni razmaknici iz starog markupa */
table.calc td[colspan="2"]:empty { padding: .25rem; border-bottom: 0; }

table.calc .aRight,
.aRight { text-align: right; white-space: nowrap; }

.calcvalue,
.labBold { font-variant-numeric: tabular-nums; }

.labBold { font-weight: 700; }

table.tblplan { table-layout: fixed; }
table.tblplan tr:first-child td { font-weight: 700; color: var(--clr-primary-500); background: var(--clr-neutral-100); }

@media (max-width: 40em) {
    table.calc th, table.calc td, table.tblplan td { padding: .375rem .5rem; font-size: .875rem; }
}