/*
 * POLIA FORMULÁROV FRONTENDU AKO V BACKENDE (Vojto 6. 10. 2026)
 * =============================================================================
 * Registrácia, pokladňa, Môj profil (.pk-pole, .pk-volba): rovnaké správanie
 * ako polia Backendu (štandard fGaWyseJ):
 *   - výška 45 px, zaoblenie 10 px, text 16 px Light, odsadenie 20 px
 *   - prázdne pole: okraj #CCC, názov je vnútri ako placeholder (#CCC)
 *   - vyplnené / s kurzorom: okraj #000, názov sa presunie na hornú hranu
 *     (13 px, biele pozadie, 0 5 px) - trieda je-vyplnene (js/app.js)
 *   - povinné = červená hviezdička, pole len na čítanie = sivé #E5E5E5
 *   - rádio / checkbox: 18 px čierne (vybrané plné), text 16 px Light, 10 px
 * Farby pozadia a okraja z Nastavenia → Farebnosť → Formulárové prvky
 * prebíjajú tieto hodnoty (layouts/app.blade.php).
 */
.pk-pole {
    position: relative;
    display: block;
}

.pk-pole input,
.pk-pole select {
    height: 45px;
    padding: 0 20px;
    border: 1px solid #CCCCCC;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 300;
    color: #000000;
    transition: border-color .15s;
}

.pk-pole select {
    padding-right: 42px;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M1.5 1.5L8 8l6.5-6.5' fill='none' stroke='%23000000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 15px center;
    cursor: pointer;
}

/* Názov poľa: prázdne = placeholder vnútri poľa. */
.pk-pole-popis {
    top: 50%;
    left: 21px;
    transform: translateY(-50%);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.2;
    color: #CCCCCC;
    transition: top .15s, font-size .15s, color .15s;
}

/* Vyplnené alebo s kurzorom: čierny okraj, názov na hornej hrane.
   !important - farba okraja z Farebnosti platí pre prázdne pole (ako #CCC
   v Backende), vyplnené je vždy čierne. */
.pk-pole.je-vyplnene input,
.pk-pole.je-vyplnene select,
.pk-pole:focus-within input,
.pk-pole:focus-within select,
.pk-pole--select input,
.pk-pole--select select {
    border-color: #000000 !important;
}

.pk-pole.je-vyplnene .pk-pole-popis,
.pk-pole:focus-within .pk-pole-popis,
.pk-pole--select .pk-pole-popis {
    top: 0;
    left: 15px;
    padding: 0 5px;
    background: #FFFFFF;
    font-size: 13px;
    color: #000000;
}

.pk-pole input:focus,
.pk-pole select:focus {
    outline: none;
    border-color: #000000;
}

/* Pole len na čítanie - sivé pozadie (štandard disabled). */
.pk-pole--sive input {
    background: #E5E5E5 !important;
    color: #7F7F7F;
}

.pk-pole--sive .pk-pole-popis {
    background: linear-gradient(#FFFFFF 50%, #E5E5E5 50%) !important;
}

/* Chyba overenia - červený okraj. */
.pk-pole--chyba input,
.pk-pole--chyba select {
    border-color: #E4202A !important;
}

/* Rádio a checkbox ako v Backende. */
.pk-volba {
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 300;
    color: #000000;
}

.pk-volba input[type="radio"],
.pk-volba input[type="checkbox"] {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 2px solid #000000;
    background: #FFFFFF;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.pk-volba input[type="radio"] {
    border-radius: 50%;
}

.pk-volba input[type="checkbox"] {
    border-radius: 3px;
}

.pk-volba input:checked {
    background-color: #000000;
    background-repeat: no-repeat;
    background-position: center;
}

.pk-volba input[type="checkbox"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.3l3 3 6-6.6' fill='none' stroke='%23FFFFFF' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 13px 13px;
}

.pk-volba input[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='3.2' fill='%23FFFFFF'/%3E%3C/svg%3E");
    background-size: 14px 14px;
}

/* Viacriadkový text pri checkboxe - políčko hore. */
.pk-volba--mala,
.pk-suhlas {
    align-items: flex-start;
}

/* Skupina rádií Som súkromná osoba / Som firma - bez rámika, ako v Backende. */
.pf-typ {
    padding: 0 !important;
    border: 0 !important;
}