/**
 * /firma/prihlaseni/ a /firma/vstup/
 * 1rem = 10px (html 62.5%).
 */

.hp-fl-page {
    margin-top: 0 !important;
    padding: 24px 0 48px;
}

.hp-fl {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(260px, 2fr);
    gap: 24px;
    align-items: start;
}

.hp-fl--single {
    grid-template-columns: minmax(0, 640px);
}

.hp-fl-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 28px 28px 24px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.hp-fl-card h1,
.hp-fl-card h2 {
    margin: 0 0 8px;
    font-size: 2.6rem;
    line-height: 1.25;
    font-weight: 700;
    color: #1e293b;
}

.hp-fl-card h2 {
    font-size: 2.2rem;
}

.page-content .hp-fl-lead,
.hp-fl-page .hp-fl-lead {
    margin: 0 0 20px;
    font-size: 1.6rem;
    line-height: 1.5;
    color: #475569;
}

.hp-fl-tabs {
    display: flex;
    gap: 8px;
    margin: 0 0 18px;
}

.hp-fl-tab {
    appearance: none;
    border: 1px solid #cbd5e1;
    background: #f8fafc;
    color: #334155;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 1.4rem;
    line-height: 1.3;
    cursor: pointer;
}

.hp-fl-tab[aria-selected="true"] {
    background: #1d4e89;
    border-color: #1d4e89;
    color: #fff;
}

.hp-fl-field {
    margin: 0 0 14px;
}

.hp-fl-field label {
    display: block;
    margin: 0 0 6px;
    font-size: 1.4rem;
    font-weight: 600;
    color: #334155;
}

.hp-fl-field input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    height: 44px;
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #fff;
    font-size: 1.6rem;
    line-height: 1.4;
    color: #1e293b;
}

.hp-fl-hint,
.page-content .hp-fl-hint,
.hp-fl-page .hp-fl-hint {
    margin: 0 0 16px;
    font-size: 1.5rem;
    line-height: 1.45;
    color: #475569;
}

.hp-fl-foot,
.page-content .hp-fl-foot,
.hp-fl-page .hp-fl-foot {
    margin: 14px 0 0;
    font-size: 1.4rem;
    line-height: 1.45;
    color: #64748b;
}

.hp-fl-switch,
.page-content .hp-fl-switch,
.hp-fl-page .hp-fl-switch {
    margin: 12px 0 0;
}

.hp-fl-textlink {
    appearance: none;
    border: 0;
    background: none;
    padding: 0;
    color: #1d4e89;
    font-size: 1.4rem;
    text-decoration: underline;
    cursor: pointer;
}

.hp-fl-error,
.page-content .hp-fl-error,
.hp-fl-page .hp-fl-error {
    margin: 0 0 12px;
    font-size: 1.4rem;
    line-height: 1.4;
    color: #9f1239;
}

.hp-fl-note {
    margin: 0;
    padding: 14px 16px;
    border-radius: 6px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.hp-fl-note--warn {
    background: #fffbeb;
    border-color: #fde68a;
}

.page-content .hp-fl-note p,
.hp-fl-page .hp-fl-note p {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.5;
    color: #334155;
}

.hp-fl-submit {
    display: inline-block;
    text-align: center;
}

.hp-fl-card--aside .hp-fl-submit {
    margin-top: 4px;
}

.hp-fl-side {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
}

.hp-fl-why,
.page-content .hp-fl-why,
.hp-fl-page .hp-fl-why {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
}

.hp-fl-why li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 12px;
    font-size: 1.5rem;
    line-height: 1.4;
    color: #334155;
}

.hp-fl-why li:last-child {
    margin-bottom: 0;
}

.hp-fl-why img {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin-top: 1px;
}

.hp-fl-why--free {
    color: #1d8eb8;
    font-weight: 700;
}

@media (max-width: 767px) {
    .hp-fl {
        grid-template-columns: 1fr;
    }

    .hp-fl-card {
        padding: 20px 16px 18px;
    }

    .hp-fl-tabs {
        flex-wrap: wrap;
    }
}

/* Přihlášení odkazem z e-mailu (lib/jt-firma/jt-firma-magic.php): primárně nahoře, heslo sbalené pod ním */
.hp-fl-magic { margin: 0 0 18px; }
.hp-fl-magic .hp-fl-note { margin: 0 0 14px; }
.hp-fl-heslo { margin-top: 6px; border-top: 1px solid #e2e8f0; padding-top: 12px; }
.hp-fl-heslo > summary { cursor: pointer; font-size: 1.5rem; font-weight: 700; color: #0a6fc2; text-decoration: underline; list-style: none; padding: 6px 0; }
.hp-fl-heslo > summary::-webkit-details-marker { display: none; }
.hp-fl-heslo[open] > summary { margin-bottom: 10px; }