/* Sdílené, explicitně pojmenované části veřejných formulářů. */
.phone-control {
    display: flex;
    width: 100%;
    align-items: stretch;
}

.phone-prefix {
    display: inline-flex;
    min-height: 43px;
    padding: 0 12px;
    border: 1px solid var(--pb-control-border);
    border-right: 0;
    border-radius: 8px 0 0 8px;
    background: #eceff1;
    color: #626970;
    align-items: center;
    justify-content: center;
    font-weight: 750;
    white-space: nowrap;
}

.phone-control > input[type="tel"],
.phone-control > input[type="text"] {
    min-width: 0;
    margin: 0 !important;
    border-radius: 0 8px 8px 0 !important;
}

/* Jednotný ovladač pro zobrazení hesla; tlačítko zůstává viditelné i u prázdného pole. */
.password-control {
    position: relative;
    display: block;
    width: 100%;
}

.password-control > input[type="password"],
.password-control > input[type="text"] {
    padding-right: 48px !important;
}

.password-control > .password-toggle {
    position: absolute;
    top: 50%;
    right: 5px;
    width: 36px;
    min-height: 34px;
    margin: 0;
    padding: 7px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #596168;
    cursor: pointer;
    transform: translateY(-50%);
}

.password-control > .password-toggle:hover,
.password-control > .password-toggle:focus-visible {
    background: #eef0f2;
    color: var(--pb-orange-dark);
    outline: none;
}

.password-control > .password-toggle:focus-visible {
    box-shadow: 0 0 0 2px rgba(255, 122, 33, .28);
}

.password-control > .password-toggle svg {
    display: block;
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.password-control > .password-toggle .password-eye-closed,
.password-control > .password-toggle[aria-pressed="true"] .password-eye-open {
    display: none;
}

.password-control > .password-toggle[aria-pressed="true"] .password-eye-closed {
    display: block;
}

/* Dočasná kompatibilita tlačítek, která postupně dostanou významové třídy. */
.tlacitkozlute {
    display: inline-block;
    width: auto;
    min-height: 38px;
    margin: 5px;
    padding: 7px 11px;
    border: 1px solid var(--pb-orange-dark);
    border-radius: 7px;
    background: var(--pb-orange);
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}

.tlacitkozlute:hover,
.tlacitkozlute:focus-visible {
    background: var(--pb-orange-dark);
    color: #fff;
    outline: none;
}