/* TIMLI - Pristopna izjava (multi-step forma) */

.tpi-wrapper {
    width: 100%;
    box-sizing: border-box;
    padding: var(--space-m, 24px);
    background: var(--bg-surface, #fff);
    border-radius: var(--radius-m, 12px);
}

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

/* ─── WELCOME (dodaj-otroka.php) ─── */
.tpi-welcome {
    margin-bottom: var(--space-l);
    padding-bottom: var(--space-m);
    border-bottom: 1px solid var(--border-primary);
}

.tpi-welcome__title {
    font-size: var(--text-xl);
    color: var(--primary);
    margin: 0 0 var(--space-3xs) 0;
}

.tpi-welcome__desc {
    font-size: var(--text-s);
    color: var(--dark-50);
    margin: 0;
}

.tpi-form-intro {
    font-size: var(--text-s);
    color: var(--dark-50);
    margin: 0 0 var(--space-l);
}

/* ─── ŽE PRIJAVLJEN (shortcode [timli_pristopna_izjava] za prijavljene) ─── */
.tpi-already-member {
    max-width: 480px;
    margin: var(--space-xl) auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-m);
}

.tpi-already-member p {
    font-size: var(--text-m);
    color: var(--text-body);
    margin: 0;
}

.tpi-already-member strong {
    color: var(--primary);
}

/* ─── SUCCESS TOAST (dodaj-otroka.php) ─── */
.tpi-success-toast {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    padding: var(--space-m);
    background: color-mix(in srgb, var(--success) 70%, black);
    border-radius: var(--radius-m);
    margin-bottom: var(--space-m);
}

.tpi-success-toast[hidden] {
    display: none;
}

.tpi-success-toast strong {
    font-size: var(--text-m);
    font-weight: 700;
    color: #fff;
}

.tpi-success-toast span {
    font-size: var(--text-s);
    color: rgba(255, 255, 255, 0.85);
}

.tpi-alert {
    padding: var(--space-s, 12px) var(--space-m, 16px);
    border-radius: var(--radius-s, 8px);
    margin-bottom: var(--space-m, 16px);
    font-size: 14px;
    font-weight: 600;
}

.tpi-alert--error {
    background: color-mix(in srgb, var(--apple-red, #ff3b30) 12%, transparent);
    color: var(--apple-red, #ff3b30);
}

.tpi-alert--success {
    background: var(--apple-green, #34c759);
    color: #000;
}

.tpi-test-banner {
    background: #F97316;
    color: #fff;
    font-weight: 700;
    font-size: var(--text-s);
    padding: var(--space-xs) var(--space-m);
    border-radius: var(--radius-m);
    margin-bottom: var(--space-m);
    text-align: center;
}

/* ─── PROGRESS BAR (dinamičen, generira JS glede na tip) ─── */
.tpi-progress {
    margin-bottom: var(--space-l);
}

.tpi-progress__bar {
    height: 3px;
    background: var(--dark-10);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-s);
    overflow: hidden;
}

.tpi-progress__fill {
    height: 100%;
    background: var(--primary);
    border-radius: var(--radius-full);
    transition: width 0.4s ease;
}

.tpi-progress__steps {
    display: flex;
    justify-content: space-between;
    gap: var(--space-xs);
}

.tpi-progress__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
}

.tpi-progress__dot {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    border: 2px solid var(--border-primary);
    background: var(--bg-surface);
    color: var(--dark-40);
    font-size: var(--text-s);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.tpi-progress__dot.active {
    border-color: var(--primary-l-2);
    background: var(--primary-l-2);
    color: #fff;
    transform: scale(1.1);
}

.tpi-progress__dot.done {
    border-color: color-mix(in srgb, var(--success) 70%, black);
    background: color-mix(in srgb, var(--success) 70%, black);
    color: #fff;
}

.tpi-progress__label {
    font-size: var(--text-xs);
    color: var(--dark-30);
    text-align: center;
    line-height: 1.3;
    transition: color 0.2s;
}

.tpi-progress__label.active {
    color: var(--primary);
    font-weight: 600;
    font-size: var(--text-s);
}

.tpi-progress__label.done {
    color: #000;
}

@media (max-width: 480px) {
    .tpi-progress__dot {
        width: 24px;
        height: 24px;
        font-size: var(--text-xs);
    }
    .tpi-progress__label {
        font-size: var(--text-xs);
    }
}

.tpi-panel {
    display: none;
}

.tpi-panel.is-active {
    display: block;
}

.tpi-panel-title {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-main, #1e293b);
    margin: 0 0 var(--space-m, 16px);
}

.tpi-step__header .tpi-panel-title {
    margin-bottom: var(--space-3xs);
}

.tpi-step__desc {
    font-size: var(--text-s);
    color: var(--text-muted, #64748b);
    margin: 0 0 var(--space-m, 16px);
}

/* ─── TYPE CARDS ─── */
.tpi-type-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-m);
    margin-bottom: var(--space-l);
    border-radius: var(--radius-l);
    transition: box-shadow 0.2s ease;
}

.tpi-type-cards--error {
    box-shadow: 0 0 0 2px var(--error);
}

@media (max-width: 600px) {
    .tpi-type-cards {
        grid-template-columns: 1fr;
    }
}

.tpi-type-card {
    cursor: pointer;
    display: flex;
    height: 100%;
}

.tpi-type-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.tpi-type-card__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-s);
    align-items: flex-start;
    padding: var(--space-m);
    background: var(--bg-surface);
    border: 2px solid var(--border-primary);
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-s);
    transition: all 0.25s ease;
    position: relative;
    width: 100%;
}

.tpi-type-card:hover .tpi-type-card__inner {
    border-color: var(--primary-40);
    box-shadow: var(--shadow-m);
    transform: translateY(-2px);
}

.tpi-type-card input:checked + .tpi-type-card__inner {
    border-color: var(--primary);
    background: var(--primary-5);
    box-shadow: 0 0 0 3px var(--primary-20), var(--shadow-m);
}

.tpi-type-card__icon {
    color: var(--primary-l-1);
    transition: color 0.25s ease;
    padding-top: 2px;
}

.tpi-type-card__icon svg {
    width: 2.5em;
    height: 2.5em;
    fill: currentColor;
}

.tpi-type-card input:checked + .tpi-type-card__inner .tpi-type-card__icon {
    color: var(--primary);
}

.tpi-type-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
}

.tpi-type-card__heading {
    font-size: var(--text-m);
    font-weight: 700;
    color: var(--text-title);
    letter-spacing: 0.03em;
}

.tpi-type-card__text {
    font-size: var(--text-s);
    color: var(--text-body);
    line-height: 1.5;
}

.tpi-type-card__check {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    border: 2px solid var(--border-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
    color: transparent;
}

.tpi-type-card input:checked + .tpi-type-card__inner .tpi-type-card__check {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.tpi-type-card__check svg {
    width: 14px;
    height: 14px;
}

.tpi-field {
    margin-bottom: var(--space-s, 12px);
}

.tpi-field--grow {
    flex: 2;
}

.tpi-field--sm {
    flex: 0 0 100px;
}

.tpi-field-row {
    display: flex;
    gap: var(--space-s, 12px);
}

.tpi-field-row .tpi-field {
    flex: 1;
}

.tpi-field label {
    display: block;
    font-size: var(--text-s);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .3px;
    margin-bottom: 4px;
    color: var(--primary);
}

/* Barva je ista kot pri oznaki polja - siva je brala kot onemogočeno
   besedilo, zato je testna uporabnica spregledala, da je polje neobvezno.
   Velikost in teža ostaneta manjši, da oznaka ostane glavna.
   Velja za vse obrazce, ki uporabljajo ta CSS: pristopna izjava, dodajanje
   otroka in moj profil. */
.tpi-optional {
    font-size: var(--text-xs);
    color: var(--primary);
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    margin-left: var(--space-3xs);
}

/* Namig pod oznako Podpis - pove, kako se podpišeš na računalniku in kako
   na zaslonu na dotik. Isti razred uporabimo povsod, kjer je podpisna
   ploskev. */
/* Namig stoji v ISTI vrsti kot oznaka (je znotraj <label>), enako kot
   "(neobvezno)". Pri ozkem zaslonu se prelomi v naslednjo vrsto sam. */
.tpi-hint {
    display: inline;
    font-size: var(--text-xs);
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    /* Ista barva kot "(neobvezno)" - obe sta pomožni besedili ob oznaki
       polja in naj bereta enako. */
    color: var(--primary);
    margin-left: var(--space-3xs);
    line-height: 1.45;
}

/* Pojasnilo v svoji vrstici (Moj profil, podporno članstvo). */
.tpi-hint--vrstica {
    display: block;
}

.tpi-hint[hidden] {
    display: none;
}

.tpi-field input[type="text"],
.tpi-field input[type="email"],
.tpi-field input[type="password"],
.tpi-field input[type="number"],
.tpi-field input[type="date"],
.tpi-field input[type="file"] {
    width: 100%;
    padding: 5px 10px;
    border: 1px solid var(--primary-l-3, #d9def7);
    border-radius: var(--radius-s, 8px);
    color: var(--text-main, #1e293b);
    background: var(--bg-body, #fff);
    box-sizing: border-box;
}

.tpi-input {
    font-size: calc(var(--text-s) * 1.2);
}

.tpi-field input:focus {
    outline: none;
    border-color: var(--primary, #4f46e5);
}

.tpi-toast {
    display: none;
    align-items: flex-start;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-s);
    border-radius: var(--radius-m);
    font-size: var(--text-s);
    margin-top: var(--space-3xs);
    line-height: 1.5;
}

.tpi-toast--visible {
    display: flex;
}

.tpi-toast--warn {
    background: var(--error-10);
    border: 1px solid var(--error);
    color: var(--error);
}

.tpi-toast--warn a {
    color: var(--error);
    font-weight: 600;
    text-decoration: underline;
}

.tpi-toast__icon {
    display: inline-flex;
    flex-shrink: 0;
    line-height: 0;
}

.tpi-toast__icon svg {
    width: 0.88em;
    height: 0.88em;
    fill: currentColor;
}

.tpi-toast__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tpi-toast__links {
    display: flex;
    gap: var(--space-s);
    margin-top: var(--space-3xs);
    flex-wrap: wrap;
}

.tpi-toast__links a {
    font-weight: 600;
    text-decoration: underline;
    font-size: var(--text-xs);
}

.tpi-input--error {
    border-color: var(--error) !important;
    background: var(--error-10) !important;
}

/* ─── PASS TOGGLE ─── */
.tpi-pass-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.tpi-pass-wrap .tpi-input {
    padding-right: 44px;
    width: 100%;
}

.tpi-pass-toggle {
    position: absolute;
    right: 12px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--dark-40);
    padding: 4px;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

.tpi-pass-toggle:hover {
    color: var(--primary);
}

.tpi-pass-toggle svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

/* ─── PASS HINTS (prikaz ob focusu) ─── */
.tpi-pass-hints {
    margin-top: var(--space-3xs);
}

.tpi-pass-hints__intro {
    margin: 0 0 var(--space-3xs) 0;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--dark-40);
}

/* ─── PASS STRENGTH ─── */
.tpi-pass-strength {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.tpi-pass-strength__bar {
    flex: 1;
    height: 4px;
    background: var(--dark-10);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.tpi-pass-strength__fill {
    height: 100%;
    width: 0%;
    border-radius: var(--radius-full);
    transition: width 0.3s ease, background 0.3s ease;
}

.tpi-pass-strength__label {
    font-size: var(--text-xs);
    font-weight: 600;
    min-width: 48px;
}

/* ─── PASS RULES ─── */
.tpi-pass-rules {
    list-style: none;
    padding: 0;
    margin: var(--space-3xs) 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.tpi-pass-rule {
    font-size: var(--text-s);
    color: var(--dark-40);
    padding-left: var(--space-m);
    line-height: 1.3;
    position: relative;
    transition: color 0.2s;
}

.tpi-pass-rule::before {
    content: "×";
    position: absolute;
    left: 0;
    font-weight: 700;
    color: var(--dark-30);
}

.tpi-pass-rule--ok {
    color: var(--text-body);
}

.tpi-pass-rule--ok::before {
    content: "✓";
    color: var(--success);
}

.tpi-pass-rule--fail::before {
    content: "×";
    color: var(--error);
}

/* ─── RADIO KOT GUMB (v celoti klikabilen) ─── */
.tpi-radio-group {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.tpi-radio-btn {
    cursor: pointer;
    flex: 1;
    min-width: 80px;
}

.tpi-radio-btn input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.tpi-radio-btn span {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border: 2px solid var(--border-primary);
    border-radius: var(--radius-m);
    background: var(--bg-surface);
    font-size: var(--text-s);
    font-weight: 500;
    color: var(--text-body);
    transition: all 0.2s ease;
    text-align: center;
}

.tpi-radio-btn:hover span {
    border-color: var(--primary);
    background: var(--primary-5);
    color: var(--primary);
}

.tpi-radio-btn input:checked + span {
    background: var(--primary);
    color: var(--primary-l-4);
    border-color: var(--primary);
    font-weight: 600;
}

/* Podporni član — leva poravnava, ne raztegnjeno čez celo širino */
.tpi-radio-group--compact {
    justify-content: flex-start;
}

.tpi-radio-group--compact .tpi-radio-btn {
    flex: 0 0 auto;
}

.tpi-radio-group--compact .tpi-radio-btn span {
    white-space: nowrap;
}

@media (max-width: 480px) {
    .tpi-radio-group {
        flex-direction: column;
    }
    .tpi-radio-btn {
        width: 100%;
    }
    .tpi-radio-group--compact .tpi-radio-btn span {
        white-space: normal;
    }
}

.tpi-radio-group--error .tpi-radio-btn span {
    border-color: var(--error);
}

.tpi-radio-group--error::after {
    content: "Prosimo, izberite eno od možnosti.";
    display: block;
    width: 100%;
    font-size: var(--text-xs);
    color: var(--error);
    margin-top: var(--space-3xs);
}

.tpi-field-hint {
    margin: 2px 0 var(--space-2xs, 6px);
    font-size: var(--text-s);
    color: var(--text-muted, #64748b);
    line-height: 1.4;
}

.tpi-consent {
    display: flex;
    align-items: flex-start;
    gap: var(--space-s);
    padding: var(--space-s, 12px);
    border: 1px solid var(--primary-l-3, #d9def7);
    border-radius: var(--radius-s, 8px);
    margin-bottom: var(--space-2xs, 8px);
    cursor: pointer;
    line-height: 1.5;
}

/* Neoznačeno obvezno soglasje - isti jezik kot .tpi-radio-group--error
   (rdeč okvir + napis pod vsebino). */
.tpi-consent--error {
    border-color: var(--error);
    background: var(--error-10);
}

.tpi-consent--error .tpi-consent__text::after {
    content: "To soglasje je obvezno – prosimo, označite ga.";
    display: block;
    margin-top: var(--space-3xs, 4px);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--error);
}

/* Končna potrditev: .tpi-input--error ji da ozadje, okvirja pa nima - brez
   tega ni bilo videti, da manjka. */
.tpi-checkbox.tpi-input--error {
    padding: var(--space-xs, 8px) var(--space-s, 12px);
    border: 1px solid var(--error);
    border-radius: var(--radius-s, 8px);
}

.tpi-checkbox.tpi-input--error span::after {
    content: "Prosimo, potrdite pred oddajo.";
    display: block;
    margin-top: var(--space-3xs, 4px);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--error);
}

.tpi-consent__text {
    font-size: 13px;
    color: var(--text-body, #334155);
    line-height: 1.4;
}

.tpi-consent__text strong {
    display: block;
    color: var(--text-main, #1e293b);
    margin-bottom: 2px;
}

.tpi-checkbox {
    display: flex;
    align-items: center;
    gap: var(--space-s);
    margin: var(--space-m, 16px) 0;
    font-size: 13px;
    color: var(--text-body, #334155);
    cursor: pointer;
    line-height: 1.5;
}

/* ─── SOGLASJA + FINALNI CHECKBOX — enako veliki (22px) ─── */
.tpi-consent input[type="checkbox"],
.tpi-checkbox input[type="checkbox"] {
    width: 22px;
    height: 22px;
    min-width: 22px;
    accent-color: var(--primary);
    cursor: pointer;
    margin-top: 2px;
    flex-shrink: 0;
}

.tpi-checkbox input[type="checkbox"] {
    margin-top: 0;
}

.tpi-signature-wrap {
    border: 1px dashed var(--primary-l-2, #b9c2ee);
    border-radius: var(--radius-s, 8px);
    background: var(--bg-body, #fff);
    margin-bottom: var(--space-2xs, 8px);
}

.tpi-signature-wrap--error {
    border-color: var(--error);
    border-style: solid;
}

/* Oba obrazca: pristopna izjava (#tpi-) in dodajanje otroka (#tdo-).
   Prej je bilo pravilo samo za prvega, zato je platno v drugem ostalo pri
   500 px iz HTML atributa - videti je bilo ozko sredi širokega okvirja,
   desni del pa sploh ni bil platno.
   Notranjo ločljivost uskladi JS (glej uskladiVelikost()). */
#tpi-signature-pad,
#tdo-signature-pad {
    width: 100%;
    height: 180px;
    display: block;
    touch-action: none;
}

.tpi-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-m, 20px);
}

.tpi-step-error {
    margin: var(--space-2xs) 0 0 0;
    font-size: var(--text-s);
    color: var(--error);
    text-align: right;
}

/* Generično sporočilo v dodaj-otroka.php (enokoraška forma) - lastna,
   ožja pravila namesto spreminjanja deljenega .tpi-step-error zgoraj,
   ker ta isti razred uporablja tudi pristopna-izjava.php za štiri
   ločene korakovne opombe, kjer position:sticky ne bi imel smisla. */
/* moj-profil.php - brez paddinga na wrapperju (že obdan s presledkom v
   Bricks tab vsebini), ne vpliva na pristopna-izjava/dodaj-otroka */
#up-wrapper {
    padding: 0;
}

/* Toast v moj-profil.php - manj paddinga in bel tekst kot privzeti .tpi-alert */
#up-alert {
    padding: var(--space-2xs) var(--space-s);
    color: #fff;
}

#tdo-form-error {
    margin: var(--space-2xs) 0 var(--space-xs) 0;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg-surface, #fff);
    padding: var(--space-2xs) 0;
}

.tpi-field-error {
    margin-top: var(--space-3xs);
    font-size: var(--text-xs);
    color: var(--error);
}

.tpi-btn-spinner {
    display: inline-block;
    flex-shrink: 0;
    width: 11px;
    height: 11px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: tpi-spin 0.7s linear infinite;
    transform-origin: 50% 50%;
    vertical-align: middle;
    margin-right: var(--space-3xs);
}

@keyframes tpi-spin {
    to {
        transform: rotate(360deg);
    }
}

.tpi-btn {
    padding: 12px 24px;
    border-radius: var(--radius-s, 8px);
    font-size: 14px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: opacity .15s ease;
}

.tpi-btn:hover {
    opacity: .9;
}

.tpi-btn--primary {
    background: var(--primary, #4f46e5);
    color: #fff;
}

.tpi-btn--ghost {
    background: transparent;
    color: var(--text-muted, #64748b);
    border: 1px solid var(--primary-l-3, #d9def7);
}

.tpi-btn--sm {
    padding: 6px 14px;
    font-size: 12px;
}

.tpi-btn--full {
    width: 100%;
    margin-top: var(--space-xs);
}

/* ─── GUMB "Dodaj otroka" ─── */
.tpi-btn--add-otrok {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    width: 100%;
    padding: var(--space-s) var(--space-m);
    background: #F97316;
    color: #fff;
    border: none;
    border-radius: var(--radius-m);
    font-size: calc(var(--text-s) * 1.2);
    font-weight: 700;
    cursor: pointer;
    margin-top: var(--space-s);
    position: relative;
}

.tpi-btn--add-otrok svg {
    width: 1.2em;
    height: 1.2em;
    flex-shrink: 0;
}

@keyframes tpi-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.5); }
    70%  { box-shadow: 0 0 0 10px rgba(249, 115, 22, 0); }
    100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); }
}

.tpi-btn--pulse {
    animation: tpi-pulse 2s ease-in-out infinite;
}

.tpi-btn--pulse:hover {
    animation: none;
    background: #EA6C0A;
    transform: translateY(-1px);
    box-shadow: var(--shadow-m);
}

/* ─── INFO BOX (npr. "otroka boste dodali v naslednjem koraku") ─── */
.tpi-info-box {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    padding: var(--space-s) var(--space-m);
    border-radius: var(--radius-s);
    background: var(--primary-l-4, #eef1ff);
    color: var(--primary);
    font-size: var(--text-s);
    margin-top: var(--space-s);
}

.tpi-info-box__icon {
    display: inline-flex;
    flex-shrink: 0;
    line-height: 0;
}

.tpi-info-box__icon svg {
    width: 1.1em;
    height: 1.1em;
    fill: currentColor;
}

/* ─── REPEATER: OTROCI ─── */
.tpi-otrok-block {
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-m);
    padding: var(--space-m);
    margin-bottom: var(--space-s);
    background: var(--bg-surface);
}

.tpi-otrok-block__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-s);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--border-primary);
    font-size: var(--text-m);
    color: var(--primary);
    font-weight: 700;
}

.tpi-otrok-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--dark-40);
    font-size: var(--text-m);
    padding: 2px 6px;
    border-radius: var(--radius-s);
    transition: all 0.2s;
}

.tpi-otrok-remove:hover {
    background: var(--error-10);
    color: var(--error);
}

/* ─── UPLOAD ZONE (slika, s predogledom) ─── */
.tpi-upload-zone {
    position: relative;
    border: 2px dashed var(--border-primary);
    border-radius: var(--radius-m);
    background: var(--bg-surface);
    transition: all 0.2s ease;
    overflow: hidden;
    cursor: pointer;
}

.tpi-upload-zone:hover {
    border-color: var(--primary);
    background: var(--primary-5);
}

.tpi-upload-zone--filled {
    border-style: solid;
    border-color: var(--primary-40);
}

.tpi-upload-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
    width: 100%;
    height: 100%;
}

.tpi-upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: var(--space-l) var(--space-m);
    color: var(--dark-40);
    text-align: center;
}

.tpi-upload-placeholder svg {
    width: 2rem;
    height: 2rem;
    color: var(--primary-l-1);
}

.tpi-upload-placeholder__title {
    font-size: var(--text-s);
    font-weight: 600;
    color: var(--primary);
}

.tpi-upload-placeholder__sub {
    font-size: var(--text-xs);
    color: var(--dark-30);
}

.tpi-upload-preview {
    position: relative;
    padding: var(--space-s);
    text-align: center;
}

.tpi-upload-preview__img {
    max-height: 160px;
    max-width: 100%;
    border-radius: var(--radius-s);
    object-fit: cover;
}

.tpi-upload-remove {
    position: relative;
    z-index: 3;
    display: block;
    margin: var(--space-xs) auto 0;
    background: var(--error-10);
    color: var(--error);
    border: none;
    border-radius: var(--radius-s);
    padding: var(--space-3xs) var(--space-s);
    font-size: var(--text-xs);
    cursor: pointer;
    transition: all 0.2s;
}

.tpi-upload-remove:hover {
    background: var(--error);
    color: #fff;
}

.tpi-upload-error {
    font-size: var(--text-xs);
    color: var(--error);
    padding: var(--space-3xs) var(--space-xs);
    margin-top: var(--space-3xs);
}

.tpi-upload-zone--error {
    border-color: var(--error);
}

.tpi-upload-zone--error::after {
    content: "Prosimo, dodajte fotografijo.";
    display: block;
    font-size: var(--text-xs);
    color: var(--error);
    padding: var(--space-3xs) var(--space-s) var(--space-s);
    text-align: center;
}

@media (max-width: 600px) {
    .tpi-field-row {
        flex-direction: column;
    }
    .tpi-wrapper {
        padding-top: var(--space-xs);
    }
}