/*
 * ==========================================================
 * Öffentliches Bewerbungsformular
 * Ruhiger moderner Stil mit Inter
 * ==========================================================
 */

.public-form-calm {
    --form-font:
        "Inter",
        "Segoe UI",
        Calibri,
        Arial,
        sans-serif;

    --form-bg: #f4f7f5;
    --form-panel: #ffffff;
    --form-panel-soft: #fbfcfb;

    --form-text: #1f2a25;
    --form-text-soft: #68766f;
    --form-text-muted: #98a39e;

    --form-border: rgba(48, 66, 58, 0.13);
    --form-border-strong: rgba(48, 66, 58, 0.20);

    --form-green: #168447;
    --form-green-dark: #116d39;
    --form-green-soft: #eaf7ee;

    --form-shadow:
        0
        14px
        34px
        rgba(38, 53, 46, 0.065);

    --form-shadow-soft:
        0
        7px
        20px
        rgba(38, 53, 46, 0.045);
}

/*
 * ----------------------------------------------------------
 * Базова типографіка
 * ----------------------------------------------------------
 */

.public-form-calm,
.public-form-calm *,
.public-form-calm button,
.public-form-calm input,
.public-form-calm textarea,
.public-form-calm select {
    box-sizing: border-box;

    font-family:
        var(--form-font) !important;
}

.public-form-calm {
    margin: 0;

    color:
        var(--form-text);

    background:
        var(--form-bg) !important;

    font-size:
        15px;

    line-height:
        1.5;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;

    text-rendering:
        optimizeLegibility;
}

.public-form-calm h1,
.public-form-calm h2,
.public-form-calm h3,
.public-form-calm p {
    margin-top: 0;
}

.public-form-calm h1 {
    color:
        #17231f !important;

    font-size:
        42px !important;

    font-weight:
        800 !important;

    letter-spacing:
        -0.055em !important;

    line-height:
        1.12 !important;
}

.public-form-calm h2 {
    color:
        #1b2823 !important;

    font-size:
        20px !important;

    font-weight:
        750 !important;

    letter-spacing:
        -0.025em !important;

    line-height:
        1.2 !important;
}

.public-form-calm h3 {
    color:
        #24312c !important;

    font-size:
        16px !important;

    font-weight:
        700 !important;
}

/*
 * ----------------------------------------------------------
 * Верхня панель з логотипами
 * ----------------------------------------------------------
 */

.public-form-calm header,
.public-form-calm .site-header,
.public-form-calm .page-header,
.public-form-calm .brand-header {
    border-bottom:
        1px
        solid
        rgba(
            48,
            66,
            58,
            0.10
        ) !important;

    background:
        rgba(
            255,
            255,
            255,
            0.94
        ) !important;

    box-shadow:
        0
        3px
        14px
        rgba(
            38,
            53,
            46,
            0.025
        ) !important;
}

.public-form-calm header img,
.public-form-calm .site-header img,
.public-form-calm .page-header img,
.public-form-calm .brand-header img {
    image-rendering:
        auto;

    object-fit:
        contain;
}

/*
 * ----------------------------------------------------------
 * Основна ширина сторінки
 * ----------------------------------------------------------
 */

.public-form-calm main,
.public-form-calm .container,
.public-form-calm .page-container,
.public-form-calm .form-container,
.public-form-calm .application-container {
    max-width:
        1080px !important;

    margin-right:
        auto !important;

    margin-left:
        auto !important;
}

/*
 * ----------------------------------------------------------
 * Малий зелений напис ONLINE-BEWERBUNG
 * ----------------------------------------------------------
 */

.public-form-calm .eyebrow,
.public-form-calm .badge,
.public-form-calm .kicker,
.public-form-calm .form-kicker {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        30px;

    border:
        1px
        solid
        rgba(
            24,
            132,
            71,
            0.08
        ) !important;

    border-radius:
        999px !important;

    padding:
        6px
        13px !important;

    color:
        #13723e !important;

    background:
        var(--form-green-soft) !important;

    font-size:
        11px !important;

    font-weight:
        800 !important;

    letter-spacing:
        0.11em !important;

    text-transform:
        uppercase;
}

/*
 * ----------------------------------------------------------
 * Опис форми
 * ----------------------------------------------------------
 */

.public-form-calm .intro,
.public-form-calm .subtitle,
.public-form-calm .description,
.public-form-calm main > p {
    max-width:
        800px;

    color:
        var(--form-text-soft) !important;

    font-size:
        16px !important;

    font-weight:
        450 !important;

    line-height:
        1.6 !important;
}

/*
 * ----------------------------------------------------------
 * Кроки 1–4
 * ----------------------------------------------------------
 */

.public-form-calm .steps,
.public-form-calm .stepper,
.public-form-calm .progress-steps {
    margin:
        22px
        0
        24px !important;
}

.public-form-calm .step,
.public-form-calm .step-number,
.public-form-calm .progress-step {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        32px !important;

    height:
        32px !important;

    border:
        2px
        solid
        #d1ddd7 !important;

    border-radius:
        50% !important;

    color:
        #7b8983 !important;

    background:
        #ffffff !important;

    font-size:
        13px !important;

    font-weight:
        700 !important;
}

.public-form-calm .step.active,
.public-form-calm .step.current,
.public-form-calm .step-number.active,
.public-form-calm .progress-step.active {
    border-color:
        var(--form-green) !important;

    color:
        #ffffff !important;

    background:
        var(--form-green) !important;
}

/*
 * ----------------------------------------------------------
 * Повідомлення про успішне надсилання
 * ----------------------------------------------------------
 */

.public-form-calm .success,
.public-form-calm .alert-success,
.public-form-calm .success-message,
.public-form-calm [class*="success"] {
    border:
        1px
        solid
        rgba(
            24,
            132,
            71,
            0.08
        ) !important;

    border-radius:
        14px !important;

    color:
        #1d7141 !important;

    background:
        #eaf7ee !important;

    font-size:
        14px !important;

    font-weight:
        550 !important;

    box-shadow:
        none !important;
}

/*
 * ----------------------------------------------------------
 * Основні картки блоків
 * ----------------------------------------------------------
 */

.public-form-calm section,
.public-form-calm .form-card,
.public-form-calm .step-card,
.public-form-calm .application-card,
.public-form-calm .card {
    border:
        1px
        solid
        var(--form-border) !important;

    border-radius:
        18px !important;

    background:
        var(--form-panel) !important;

    box-shadow:
        var(--form-shadow) !important;
}

.public-form-calm section {
    overflow:
        hidden;
}

.public-form-calm .section-heading,
.public-form-calm .card-heading,
.public-form-calm .step-heading {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        13px;

    border-bottom:
        1px
        solid
        rgba(
            48,
            66,
            58,
            0.09
        );

    padding:
        18px
        20px
        15px;
}

.public-form-calm .section-heading p,
.public-form-calm .card-heading p,
.public-form-calm .step-heading p {
    margin:
        4px
        0
        0;

    color:
        var(--form-text-soft) !important;

    font-size:
        13px !important;

    font-weight:
        500 !important;
}

/*
 * Номери блоків 01, 02, 03...
 */

.public-form-calm .section-heading > span,
.public-form-calm .card-heading > span,
.public-form-calm .step-heading > span,
.public-form-calm .section-number {
    display:
        inline-flex;

    flex:
        0
        0
        auto;

    align-items:
        center;

    justify-content:
        center;

    width:
        38px !important;

    height:
        38px !important;

    border-radius:
        12px !important;

    color:
        #13723e !important;

    background:
        var(--form-green-soft) !important;

    font-size:
        13px !important;

    font-weight:
        800 !important;
}

/*
 * ----------------------------------------------------------
 * Поля форми
 * ----------------------------------------------------------
 */

.public-form-calm label {
    color:
        #2d3b35 !important;

    font-size:
        13px !important;

    font-weight:
        650 !important;

    line-height:
        1.3 !important;
}

.public-form-calm label > span {
    display:
        block;

    margin-bottom:
        7px;
}

.public-form-calm input,
.public-form-calm textarea,
.public-form-calm select {
    width:
        100%;

    border:
        1px
        solid
        rgba(
            48,
            66,
            58,
            0.16
        ) !important;

    border-radius:
        12px !important;

    color:
        #1f2b26 !important;

    background:
        #ffffff !important;

    font-size:
        14px !important;

    font-weight:
        500 !important;

    line-height:
        1.45 !important;

    box-shadow:
        none !important;

    transition:
        border-color
        0.18s
        ease,
        box-shadow
        0.18s
        ease,
        background-color
        0.18s
        ease !important;
}

.public-form-calm input,
.public-form-calm select {
    min-height:
        48px !important;

    padding:
        11px
        13px !important;
}

.public-form-calm textarea {
    min-height:
        98px;

    padding:
        12px
        13px !important;

    resize:
        vertical;
}

.public-form-calm input::placeholder,
.public-form-calm textarea::placeholder {
    color:
        var(--form-text-muted) !important;

    font-weight:
        450 !important;
}

.public-form-calm input:focus,
.public-form-calm textarea:focus,
.public-form-calm select:focus {
    border-color:
        rgba(
            24,
            132,
            71,
            0.52
        ) !important;

    outline:
        none !important;

    background:
        #ffffff !important;

    box-shadow:
        0
        0
        0
        4px
        rgba(
            24,
            132,
            71,
            0.08
        ) !important;
}

/*
 * ----------------------------------------------------------
 * Внутрішня сітка полів
 * ----------------------------------------------------------
 */

.public-form-calm .form-grid,
.public-form-calm .grid,
.public-form-calm .fields-grid {
    gap:
        17px
        16px !important;

    padding:
        18px
        20px
        20px !important;
}

/*
 * ----------------------------------------------------------
 * Checkbox та Radio
 * ----------------------------------------------------------
 */

.public-form-calm input[type="checkbox"],
.public-form-calm input[type="radio"] {
    width:
        17px !important;

    height:
        17px !important;

    min-height:
        auto !important;

    accent-color:
        var(--form-green);

    cursor:
        pointer;
}

.public-form-calm .choice,
.public-form-calm .option,
.public-form-calm .checkbox-label {
    border:
        1px
        solid
        var(--form-border) !important;

    border-radius:
        11px !important;

    padding:
        10px
        12px !important;

    color:
        #47564f !important;

    background:
        #fbfcfb !important;

    font-size:
        13px !important;

    font-weight:
        550 !important;
}

/*
 * ----------------------------------------------------------
 * Нижній блок навігації
 * ----------------------------------------------------------
 */

.public-form-calm .bottom-actions,
.public-form-calm .form-actions,
.public-form-calm .navigation-actions,
.public-form-calm .step-actions {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    border-top:
        1px
        solid
        rgba(
            48,
            66,
            58,
            0.09
        ) !important;

    padding:
        16px
        20px !important;

    background:
        #fbfcfb !important;
}

/*
 * ----------------------------------------------------------
 * Кнопки
 * ----------------------------------------------------------
 */

.public-form-calm button,
.public-form-calm .button,
.public-form-calm .btn,
.public-form-calm input[type="submit"],
.public-form-calm input[type="button"] {
    min-height:
        44px;

    border:
        1px
        solid
        var(--form-border) !important;

    border-radius:
        11px !important;

    padding:
        10px
        16px !important;

    color:
        #34423c !important;

    background:
        linear-gradient(
            180deg,
            #ffffff
            0%,
            #f4f7f5
            100%
        ) !important;

    font-size:
        14px !important;

    font-weight:
        700 !important;

    line-height:
        1.2 !important;

    box-shadow:
        var(--form-shadow-soft) !important;

    cursor:
        pointer;

    transition:
        transform
        0.18s
        ease,
        box-shadow
        0.18s
        ease,
        border-color
        0.18s
        ease,
        background-color
        0.18s
        ease !important;
}

.public-form-calm button:hover,
.public-form-calm .button:hover,
.public-form-calm .btn:hover,
.public-form-calm input[type="submit"]:hover,
.public-form-calm input[type="button"]:hover {
    border-color:
        var(--form-border-strong) !important;

    background:
        #ffffff !important;

    box-shadow:
        0
        9px
        22px
        rgba(
            38,
            53,
            46,
            0.08
        ) !important;

    transform:
        translateY(
            -1px
        );
}

/*
 * Основна зелена кнопка Weiter / Senden
 */

.public-form-calm button[type="submit"],
.public-form-calm .primary,
.public-form-calm .btn-primary,
.public-form-calm .button-primary,
.public-form-calm .next-button,
.public-form-calm .submit-button {
    border-color:
        var(--form-green) !important;

    color:
        #ffffff !important;

    background:
        var(--form-green) !important;

    box-shadow:
        0
        8px
        18px
        rgba(
            24,
            132,
            71,
            0.18
        ) !important;
}

.public-form-calm button[type="submit"]:hover,
.public-form-calm .primary:hover,
.public-form-calm .btn-primary:hover,
.public-form-calm .button-primary:hover,
.public-form-calm .next-button:hover,
.public-form-calm .submit-button:hover {
    border-color:
        var(--form-green-dark) !important;

    background:
        var(--form-green-dark) !important;
}

/*
 * ----------------------------------------------------------
 * Нижній колонтитул
 * ----------------------------------------------------------
 */

.public-form-calm footer,
.public-form-calm .footer,
.public-form-calm .page-footer {
    color:
        #7c8983 !important;

    font-size:
        11px !important;

    font-weight:
        500 !important;
}

/*
 * ----------------------------------------------------------
 * Адаптація
 * ----------------------------------------------------------
 */

@media (max-width: 760px) {
    .public-form-calm h1 {
        font-size:
            34px !important;
    }

    .public-form-calm .form-grid,
    .public-form-calm .grid,
    .public-form-calm .fields-grid {
        grid-template-columns:
            1fr !important;

        gap:
            14px !important;

        padding:
            16px !important;
    }

    .public-form-calm .section-heading,
    .public-form-calm .card-heading,
    .public-form-calm .step-heading {
        padding:
            16px;
    }

    .public-form-calm .bottom-actions,
    .public-form-calm .form-actions,
    .public-form-calm .navigation-actions,
    .public-form-calm .step-actions {
        padding:
            14px
            16px !important;
    }
}

/* BEGIN PUBLIC FORM LOGO POSITION OVERRIDE */
.public-form-calm .topbar .brand.brand-logos {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 22px !important;
    margin-left: 120px !important;
    padding-left: 0 !important;
    width: auto !important;
}

.public-form-calm .topbar .brand-logo {
    display: block !important;
    width: auto !important;
    object-fit: contain !important;
}

.public-form-calm .topbar .brand-logo.ve-logo {
    height: 54px !important;
    max-height: 54px !important;
}

.public-form-calm .topbar .brand-logo.worklife-logo {
    height: 40px !important;
    max-height: 40px !important;
}

@media (max-width: 1200px) {
    .public-form-calm .topbar .brand.brand-logos {
        margin-left: 60px !important;
        gap: 18px !important;
    }

    .public-form-calm .topbar .brand-logo.ve-logo {
        height: 50px !important;
        max-height: 50px !important;
    }

    .public-form-calm .topbar .brand-logo.worklife-logo {
        height: 37px !important;
        max-height: 37px !important;
    }
}

@media (max-width: 768px) {
    .public-form-calm .topbar .brand.brand-logos {
        margin-left: 20px !important;
        gap: 14px !important;
    }

    .public-form-calm .topbar .brand-logo.ve-logo {
        height: 42px !important;
        max-height: 42px !important;
    }

    .public-form-calm .topbar .brand-logo.worklife-logo {
        height: 31px !important;
        max-height: 31px !important;
    }
}
/* END PUBLIC FORM LOGO POSITION OVERRIDE */

/* BEGIN PUBLIC FORM LOGO RIGHT/BOTTOM ALIGN */
.public-form-calm .topbar {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-end !important;
    padding-right: 110px !important;
    padding-left: 24px !important;
}

.public-form-calm .topbar .brand.brand-logos {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: flex-end !important;
    gap: 14px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    width: auto !important;
    max-width: none !important;
}

.public-form-calm .topbar .brand-logo {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    object-fit: contain !important;
    align-self: flex-end !important;
    vertical-align: bottom !important;
}

.public-form-calm .topbar .brand-logo.ve-logo {
    height: 43px !important;
    max-height: 43px !important;
    margin-bottom: 0 !important;
}

.public-form-calm .topbar .brand-logo.worklife-logo {
    height: 32px !important;
    max-height: 32px !important;
    margin-bottom: 0 !important;
}

@media (max-width: 1200px) {
    .public-form-calm .topbar {
        padding-right: 70px !important;
    }

    .public-form-calm .topbar .brand.brand-logos {
        gap: 12px !important;
    }

    .public-form-calm .topbar .brand-logo.ve-logo {
        height: 40px !important;
        max-height: 40px !important;
    }

    .public-form-calm .topbar .brand-logo.worklife-logo {
        height: 30px !important;
        max-height: 30px !important;
    }
}

@media (max-width: 768px) {
    .public-form-calm .topbar {
        padding-right: 20px !important;
        padding-left: 20px !important;
    }

    .public-form-calm .topbar .brand.brand-logos {
        gap: 10px !important;
    }

    .public-form-calm .topbar .brand-logo.ve-logo {
        height: 34px !important;
        max-height: 34px !important;
    }

    .public-form-calm .topbar .brand-logo.worklife-logo {
        height: 25px !important;
        max-height: 25px !important;
    }
}
/* END PUBLIC FORM LOGO RIGHT/BOTTOM ALIGN */

/* BEGIN PUBLIC FORM COMPACT HERO OVERRIDE */

/*
 * Верхній блок ONLINE-BEWERBUNG / Bewerbungsformular:
 * компактніший шрифт та менша висота.
 */
body.public-form-calm
.hero {
    min-height:
        0 !important;

    margin-bottom:
        16px !important;

    padding:
        15px
        20px
        16px !important;
}

body.public-form-calm
.hero
.badge {
    min-height:
        22px !important;

    margin-bottom:
        6px !important;

    padding:
        3px
        10px !important;

    font-size:
        9px !important;

    line-height:
        1.1 !important;

    letter-spacing:
        0.10em !important;
}

body.public-form-calm
.hero
h1 {
    margin:
        0
        0
        6px !important;

    font-size:
        31px !important;

    line-height:
        1.04 !important;

    letter-spacing:
        -0.045em !important;
}

body.public-form-calm
.hero
p {
    max-width:
        900px !important;

    margin:
        0 !important;

    font-size:
        13px !important;

    line-height:
        1.42 !important;
}

/*
 * На невеликих екранах блок залишається акуратним.
 */
@media (max-width: 768px) {
    body.public-form-calm
    .hero {
        padding:
            13px
            15px
            14px !important;
    }

    body.public-form-calm
    .hero
    h1 {
        font-size:
            27px !important;
    }

    body.public-form-calm
    .hero
    p {
        font-size:
            12px !important;
    }
}

/* END PUBLIC FORM COMPACT HERO OVERRIDE */

/* BEGIN PUBLIC FORM WHATSAPP SHARE STYLES */

/*
 * WhatsApp-Button rechts oben im Titelblock.
 */
body.public-form-calm
.hero {
    position:
        relative !important;

    padding-right:
        212px !important;
}

body.public-form-calm
.public-whatsapp-share {
    position:
        absolute !important;

    top:
        15px !important;

    right:
        17px !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    gap:
        8px !important;

    min-height:
        38px !important;

    border:
        1px
        solid
        rgba(
            22,
            132,
            71,
            0.24
        ) !important;

    border-radius:
        11px !important;

    padding:
        8px
        12px !important;

    color:
        #11733e !important;

    background:
        #f2fbf5 !important;

    box-shadow:
        0
        4px
        11px
        rgba(
            38,
            53,
            46,
            0.045
        ) !important;

    font-family:
        "Inter",
        "Segoe UI",
        Calibri,
        Arial,
        sans-serif !important;

    font-size:
        12px !important;

    font-weight:
        750 !important;

    line-height:
        1.15 !important;

    text-decoration:
        none !important;

    white-space:
        nowrap !important;

    transition:
        background-color
        0.18s
        ease,
        border-color
        0.18s
        ease,
        color
        0.18s
        ease,
        transform
        0.18s
        ease !important;
}

body.public-form-calm
.public-whatsapp-share:hover {
    border-color:
        #168447 !important;

    color:
        #ffffff !important;

    background:
        #168447 !important;

    transform:
        translateY(
            -1px
        ) !important;
}

body.public-form-calm
.public-whatsapp-share-icon {
    width:
        18px !important;

    height:
        18px !important;

    fill:
        currentColor !important;

    flex:
        0
        0
        auto !important;
}

/*
 * На вузьких екранах кнопка переходить під опис,
 * щоб не перекривати заголовок.
 */
@media (max-width: 900px) {
    body.public-form-calm
    .hero {
        padding-right:
            20px !important;
    }

    body.public-form-calm
    .public-whatsapp-share {
        position:
            static !important;

        margin-top:
            11px !important;
    }
}

/* END PUBLIC FORM WHATSAPP SHARE STYLES */