/* site.css - Project custom styles for Mbp.Web.DeltagareMvcCore */
/* Bootstrap 5 is loaded separately via ~/lib/bootstrap/css/bootstrap.min.css */
/* ===== Skip to content (tillgänglighet) ===== */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 10000;
    background: #62269e;
    color: #fff !important;
    font-weight: 700;
    font-size: 16px;
    padding: 12px 20px;
    text-decoration: none;
    border-radius: 0 0 4px 0;
    transition: top 0.1s;
}

.skip-to-content:focus {
    top: 0;
    outline: 3px solid #fff;
    outline-offset: 2px;
}
/* ===== End Skip to content ===== */

/* ===== Base overrides ===== */
body {
    color: #000;
    font-family: Calibri, Arial, sans-serif;
    font-size: 19px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
    /* Sticky footer */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.layout-main-content {
    flex: 1 0 auto;
}

/* Begränsa all innehållsbredd till 1032px — gäller header, main och footer */
.container {
    max-width: 1032px !important;
}

/* Footer ska aldrig krympa */
.layout-footer {
    flex-shrink: 0;
}

input, button, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

h1, h2, h3, h4, h5, h6 {
    font-family: BauWebPro, Calibri, Arial, sans-serif;
}

a {
    color: #000;
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: Calibri, Arial, sans-serif;
    font-size: 19px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

a:hover, a:focus {
    color: #00374a;
    text-decoration: underline;
}

figure {
    margin: 0;
}

img {
    vertical-align: middle;
}

img:not(.img-articlePage) {
    /* width: 100%; — intentionally commented out, Bootstrap handles this */
    height: auto;
}

/* Fixed-size icon — overrides the height:auto above */
.anmalanOppenIkon {
    width: 24px !important;
    height: 26px !important;
    margin-right: 8px !important;
}

footer#footer img:not(.footer-logo-img) {
    width: auto;
}

hr {
    margin-top: 24.7px;
    margin-bottom: 24.7px;
    border: 0;
    border-top: 1px solid #f2f2f2;
}

p {
    margin: 0 0 12.35px;
}

ul, ol {
    margin-top: 0;
    margin-bottom: 12.35px;
}

/* ===== Forms — project overrides on top of Bootstrap 5 ===== */

label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 700;
}

.form-group {
    margin-bottom: 15px;
}

.form-control {
    margin-bottom: 12.8px;
    min-height: 46.7px; /* WCAG 1.4.4: min-height i stället för fast height */
    height: auto;
    padding: 10px 15px;
    font-size: 19px;
    line-height: 1.3;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.form-control:focus {
    border-color: #62269e;
    outline: 0;
    box-shadow: 0 0 0 3.2px rgba(98, 38, 158, 0.25);
}

select.form-control {
    min-height: 46.7px; /* WCAG 1.4.4: min-height i stället för fast height */
    height: auto;
}

textarea.form-control {
    height: auto;
}

/* ===== End Forms ===== */

/* Egen lokal css för nya HP-anmälan */

@font-face {
    font-family: BauWebPro-Bold;
    src: url("BauWebPro-Bold.eot");
}

@font-face {
    font-family: BauWebPro-BoldItalic;
    src: url("BauWebPro-BoldItalic.eot");
}

@font-face {
    font-family: BauWebPro-Medium;
    src: url("BauWebPro-Medium.eot");
}

@font-face {
    font-family: BauWebPro-Bold;
    src: url("BauWebPro-Bold.woff") format("woff");
}

@font-face {
    font-family: BauWebPro-BoldItalic;
    src: url("BauWebPro-BoldItalic.woff") format("woff");
}

@font-face {
    font-family: BauWebPro-Medium;
    src: url("BauWebPro-Medium.woff") format("woff");
}

.top_info_box {
    background-color: #EFE9F5;
    padding: 24px 16px;
}

.bildruta {
    margin-left: -10px;
    margin-right: -10px;
    margin-top: 16px;
}

.viktigtMeddelande_info_box {
    background-color: rgba(228, 38, 53, 0.38);
    margin-left: -10px;
    margin-right: -10px;
    padding: 20.8px 17.6px;
    margin-bottom: 16px;
}

.top_info_box p {
    margin-bottom: 8px;
    font-size: medium;
}

@media screen and (min-width: 1200px) {
    .paddingSidorKolumn2Desktop {
        padding-right: 80px;
    }
}

@media screen and (min-width: 991px) and (max-width: 1200px) {
    /* tog bort, startsidans högra sidebar trycks i hop i detta span
    .paddingSidorKolumn2Desktop {
        padding-left: 112px;
        padding-right: 112px;
    }*/
    .paddingSidorEndastKolumn1Desktop {
        padding-left: 112px;
        padding-right: 208px;
    }
}

/* ------- Styling för desktop ------- */
@media screen and (min-width: 991px) {
    body {
        color: #000;
        font-family: Calibri, Arial, sans-serif;
        font-size: 19px;
        font-style: normal;
        font-weight: 400;
        line-height: 25px;
    }

    body p {
        color: #000;
        font-family: Calibri, Arial, sans-serif;
        font-size: 19px;
        font-style: normal;
        font-weight: 400;
        line-height: 25px;
    }

    h1 {
        color: #000;
        font-family: BauWebPro, Arial, Verdana;
        font-size: 36px;
        font-style: normal;
        font-weight: 700;
        line-height: 39px;
        margin-bottom: 24px;
    }

    h2 {
        color: #000;
        font-family: BauWebPro, Arial, Verdana;
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: 26px;
        margin-bottom: 24px;
    }

    h3 {
        color: #000;
        font-family: BauWebPro, Arial, Verdana;
        font-size: 19px;
        font-style: normal;
        font-weight: 700;
        line-height: 21px;
        margin-bottom: 24px;
    }

    h4 {
        color: #000;
        font-family: Calibri, Arial, sans-serif;
        font-size: 19px;
        font-style: normal;
        font-weight: 700;
        line-height: 21px;
    }

    .top_info_box {
        padding-left: 16px;
        padding-right: 16px;
    }

    .viktigtMeddelande_info_box {
        margin-top: 16px;
        padding-left: 30px;
        padding-right: 30px;
    }

    .btn-block {
        display: block;
        width: fit-content;
        margin-right: 0;
        margin-bottom: 8px;
    }

    .btn-block + .btn-block {
        margin-top: 0;
    }

    /* Knappraden: primary till höger på desktop */
    .btn-block-group {
        display: flex;
        flex-direction: row;
        gap: 24px;
        align-items: center;
        flex-wrap: wrap;
    }

    .pageHeader_grey {
        padding-left: 30px;
        padding-right: 30px;
        margin-left: -30px;
        margin-right: -30px;
        min-height: 112px;
    }

    .extern-lank {
        color: #006E96;
        font-family: Calibri, Arial, sans-serif;
        font-size: 19px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px; /* This sets the line-height for wrapped text */
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-decoration-skip-ink: none;
        text-decoration-thickness: auto;
        text-underline-offset: auto;
        text-underline-position: from-font;
        /* Add spacing around the link to maintain overall spacing */
        padding-top: 8.8px;
        padding-bottom: 8.8px;
        display: inline;
        /* Add these properties to handle long text */
        word-break: break-all;
        overflow-wrap: break-word;
        white-space: normal;
        max-width: 100%;
    }

    .extern-lank-bold {
        color: #006E96;
        font-family: Calibri, Arial, sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 24px; /* This sets the line-height for wrapped text */
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-decoration-skip-ink: none;
        text-decoration-thickness: auto;
        text-underline-offset: auto;
        text-underline-position: from-font;
        /* Add spacing around the link to maintain overall spacing */
        padding-top: 8.8px;
        padding-bottom: 8.8px;
        display: inline;
        /* Add these properties to handle long text */
        word-break: break-all;
        overflow-wrap: break-word;
        white-space: normal;
        max-width: 100%;
    }

    .form-control {
        max-width: 592px;
    }

    .accordion-button_information {
        font-family: Calibri, Arial, sans-serif;
        font-size: 19px;
        font-style: normal;
        font-weight: 700;
        line-height: 25px;
        padding-left: 48px;
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .checkboxPul {
        margin-top: 12.8px !important;
        height: 20px;
        width: 20px;
        line-height: 44px;
    }

    .margin_top_kolumn2 {
        margin-top: 24px;
    }

    .inforuta_gra_ram_startsida {
        padding: 32px;
    }

    .top_info_box h3 {
        color: var(--Gråskala-Svart, #000);
        font-feature-settings: 'liga' off, 'clig' off;
        font-family: Calibri, Arial, sans-serif;
        font-size: 19px;
        font-style: normal;
        font-weight: 700;
        line-height: 25px;
        margin-bottom: 8px;
        display: inline;
    }

    .minskadMarginRight {
        margin-right: 0 !important;
    }
}

/* ------- Slut Styling för desktop ------- */


@media screen and (min-width: 1400px) {
    .paddingSidorEndastKolumn1Desktop {
        padding-left: 112px;
        padding-right: 208px;
    }
}

@media screen and (min-width: 1201px) and (max-width: 1400px) {
    .paddingSidorEndastKolumn1Desktop {
        padding-left: 112px;
        padding-right: 208px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1201px) {
    .paddingSidorEndastKolumn1Desktop {
        padding-left: 112px;
        padding-right: 208px;
    }
}


/* ------- Styling för mobil ------- */
@media screen and (max-width: 991px) {
    .paddingSidorKolumn2Desktop {
        margin-top: 48px;
    }

    body {
        color: #000;
        font-family: Calibri, Arial, sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 25px;
    }

    body p {
        color: #000;
        font-family: Calibri, Arial, sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 25px;
    }

    .modal-dialog {
        width: 90%;
        min-width: 100px;
        margin: auto;
        margin-top: 160px;
    }

    .modal-content {
        max-width: 400px;
        margin: auto;
    }

    .top_info_box {
        padding-left: 20px;
    }

    .viktigtMeddelande_info_box {
        padding-left: 20px;
    }

    h1 {
        color: #000;
        font-family: BauWebPro, Arial, Verdana;
        font-size: 21px;
        font-style: normal;
        font-weight: 700;
        line-height: 26px;
        margin-bottom: 24px;
    }

    h2 {
        color: #000;
        font-family: BauWebPro, Arial, Verdana;
        font-size: 19px;
        font-style: normal;
        font-weight: 700;
        line-height: 25px;
        margin-bottom: 24px;
    }

    h3 {
        color: #000;
        font-family: BauWebPro, Arial, Verdana;
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 25px;
        margin-bottom: 24px;
    }

    h4 {
        color: #000;
        font-family: Calibri, Arial, sans-serif;
        font-size: 17px;
        font-style: normal;
        font-weight: 700;
        line-height: 25px;
    }

    label {
        color: var(--Gråskala-Svart, #000);
        font-feature-settings: 'liga' off, 'clig' off;
        font-family: Calibri, Arial, sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 20px;
    }

    /*   .btn-block {
        max-width: 576px;
    }*/
    .pageHeader_grey {
        margin-left: -20px;
        margin-right: -20px;
        min-height: 72px;
    }

    .extern-lank {
        color: #006E96;
        font-family: Calibri, Arial, sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px; /* This sets the line-height for wrapped text */
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-decoration-skip-ink: none;
        text-decoration-thickness: auto;
        text-underline-offset: auto;
        text-underline-position: from-font;
        /* Add spacing around the link to maintain overall spacing */
        padding-top: 8.8px;
        padding-bottom: 8.8px;
        display: inline;
        /* Add these properties to handle long text */
        word-break: break-all;
        overflow-wrap: break-word;
        white-space: normal;
        max-width: 100%;
    }

    .extern-lank-bold {
        color: #006E96;
        font-family: Calibri, Arial, sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 24px; /* This sets the line-height for wrapped text */
        text-decoration-line: underline;
        text-decoration-style: solid;
        text-decoration-skip-ink: none;
        text-decoration-thickness: auto;
        text-underline-offset: auto;
        text-underline-position: from-font;
        /* Add spacing around the link to maintain overall spacing */
        padding-top: 8.8px;
        padding-bottom: 8.8px;
        display: inline;
        /* Add these properties to handle long text */
        word-break: break-all;
        overflow-wrap: break-word;
        white-space: normal;
        max-width: 100%;
    }

    .radio-inline, .checkbox-inline {
        margin-bottom: 16px;
        vertical-align: text-top;
        max-width: 288px;
    }

    .margin-top-mobil {
        margin-top: 16px;
    }

    .accordion-button_information {
        font-family: Calibri, Arial, sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 18px;
        /*border-top: solid 1.6px #dee2e6;
    margin-left: -10px;
    margin-right: -10px;*/
        /*padding: 30px 10px*/
    }

    .margin_top_kolumn2 {
        margin-top: 80px;
    }

    .padding0 {
        padding: 0;
    }

    .inforuta_gra_ram_startsida {
        padding: 32px 16px;
    }

    .checkboxPul {
        margin-top: 12.8px !important;
        height: 20px;
        width: 20px;
        line-height: 44px;
    }

    .inforuta_gra_ram h3 {
        color: var(--Grskala-Svart, #000);
        font-feature-settings: 'liga' off, 'clig' off;
        font-family: Calibri, Arial, sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 20px;
        margin-bottom: 8px;
        display: inline;
    }

    .top_info_box h3 {
        color: var(--Gråskala-Svart, #000);
        font-feature-settings: 'liga' off, 'clig' off;
        font-family: Calibri, Arial, sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 20px;
        margin-bottom: 8px;
        display: inline;
    }


    .meny-oversiktval-maxwidth {
        max-width: 64px;
    }

    .meny-minapersonuppgifterval-maxwidth {
        max-width: 168px;
    }

    .meny-provresultatval-maxwidth {
        max-width: 144px;
    }

    .paddingSidorkolumn1Desktop {
        width: 100%;
        max-width: 100%;
    }

    .login-methods {
        max-width: 100%;
        width: 100%;
        margin-bottom: 24px;
    }

    .btn,
    .button {
        font-size: 18px;
        font-weight: 700;
        white-space: normal; /* WCAG 1.4.4: tillåt radbrytning på mobil */
    }

    /* Säkerställ 18px även om Bootstrap btn-sm används */
    .btn.btn-sm,
    .button.btn-sm {
        font-size: 18px;
    }

    .btn-back {
        font-size: 18px;
    }

    .login-methods .btn {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 18px;
        font-weight: 700;
        white-space: normal; /* WCAG 1.4.4 */
    }

    .login-help {
        margin-top: 12px;
    }

    .home-login-status-row .login-methods {
        margin-bottom: 0;
    }

    .home-login-status-row .paddingSidorKolumn2Desktop {
        margin-top: 48px;
    }
}

@media screen and (min-width: 1200px) {
    .home-login-status-row .paddingSidorKolumn2Desktop {
        padding-right: 0;
    }

    .button.btn-primary,
    .btn.btn-primary,
    .button.btn-outline-secondary,
    .btn.btn-outline-secondary {
        font-size: 18px;
    }
}


/* ------- Slut Styling för mobil ------- */

@media screen and (max-width: 767px) {

    .minWidthMobil {
        display: block !important;
        min-width: 100%;
    }
}

.top_info_box_Paragraf {
    margin-bottom: 0
}

.pageHeader_grey {
    margin-left: -10px;
    margin-right: -10px;
    padding: 16px 10px
}

.loginruta {
    margin-top: 24px;
}

.logout {
    /*margin-top: 24px;*/
    text-align: right;
}

.center_info_box {
    margin-top: 32px;
}

.accordion-item:first-of-type {
    border-top: none;
}

.accordion-button_information:hover {
    background-color: #E5E5E5 !important;
}

li {
    margin-bottom: 8px;
}

.margin-top_32px {
    margin-top: 32px;
}

.margin-top_48px {
    margin-top: 48px;
}

.margin-bottom_16px {
    margin-bottom: 16px;
}

.margin-left_16px {
    margin-left: 16px;
}

.displayInline {
    display: inline;
}

.form-control-fodelsedatum {
    border-radius: 0px;
    border: 1px solid #000;
    min-height: 48px; /* WCAG 1.4.4: min-height i stället för fast height */
    height: auto;
    font-size: 19px;
    display: inline;
    width: 180px;
    padding: 6px;
}

@media screen and (max-width: 767px), print and (max-width: 767px) {
    .form-control-fodelsedatum {
        display: block;
    }
}

/* Knappar - lila tema */

/* Base .btn — purple fill by default, matching master design */
.button,
.btn {
    background: #62269e;
    color: #FFF;
    text-decoration: none;
    border-radius: 0;
    border: none;
    display: inline-flex;
    gap: 6px;
    min-height: 48px; /* WCAG 1.4.4: min-height i stället för fast height så texten får plats vid 200% textstorlek */
    height: auto;
    justify-content: center;
    align-items: center;
    flex-shrink: 1; /* WCAG 1.4.4: tillåt krympning i flex-kontext vid stor textstorlek */
    width: fit-content;
    white-space: normal; /* WCAG 1.4.4: tillåt radbrytning vid stor textstorlek */
    word-break: break-word; /* WCAG 1.4.4: bryt långa ord vid 200% textstorlek */
    padding: 14px 20px;
    font-size: 19px;
    font-weight: 700;
}

.button:focus, .button:active,
.btn:focus,
.btn:active {
    color: #FFF;
    outline: 0;
    box-shadow: 0 0 0 3.2px rgba(98, 38, 158, 0.35);
}

.button.btn-outline-secondary:focus,
.button.btn-outline-secondary:active,
.btn.btn-outline-secondary:focus,
.btn.btn-outline-secondary:active {
    color: #000;
    outline: 0;
    box-shadow: 0 0 0 3.2px rgba(0, 0, 0, 0.2);
}

.button:hover, .button.disabled:hover,
.btn:hover,
.btn.disabled:hover {
    background: #8151b1;
    color: #FFF;
}

/* Primary button — explicit purple (same as base, kept for specificity) */
.button.btn-primary,
.btn.btn-primary {
    background: #62269e;
    color: #FFF;
    border: none;
    padding: 14px 20px;
    font-size: 19px;
}

.button.btn-primary:hover,
.btn.btn-primary:hover {
    background: #B093CF;
    color: #FFF;
}

.button.btn-primary:focus, .button.btn-primary:active,
.btn.btn-primary:focus,
.btn.btn-primary:active {
    background: #62269e;
    color: #FFF;
    text-decoration: underline;
    border: 2px solid #62269E !important;
}

/* Outline / secondary button — white with black border */
.button.btn-outline-secondary,
.btn.btn-outline-secondary {
    background: #FFF;
    color: #000;
    border: 1px solid #000;
    padding: 14px 20px;
    font-size: 19px;
}

.button.btn-outline-secondary:hover,
.btn.btn-outline-secondary:hover {
    background: #f2f2f2;
    color: #000;
}


/* Disabled state */
.btn.disabled, .btn:disabled, fieldset:disabled .btn {
    pointer-events: none;
    opacity: .65;
    color: #FFF;
    background-color: #62269e !important;
    border-color: #62269e !important;
}

/* Disabled state — outline/secondary keeps white background */
.btn.btn-outline-secondary.disabled,
.btn.btn-outline-secondary:disabled {
    color: #000 !important;
    background-color: #FFF !important;
    border-color: #000 !important;
}

.button.cancel,
.btn.cancel {
    background: #000;
    color: #FFF;
    padding-left: 20px;
    padding-right: 20px;
}

.button.inactive,
.btn.inactive {
    background: #9B9C9E;
    cursor: default;
}

.btn-wide {
    display: inline-flex;
    padding: 14px 20px;
    min-width: 0;
    min-height: 48px; /* WCAG 1.4.4: ingen fast height */
    height: auto;
    white-space: normal; /* WCAG 1.4.4: tillåt radbrytning vid 200% textstorlek */
    word-break: break-word;
}

.anmalan-content .btn-block-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 12px;
}

.anmalan-content .btn-block-group > * {
    width: 100%;
    max-width: 100%;
}

.anmalan-content .btn-block-group form,
.anmalan-content .btn-block-group form .btn-block {
    width: 100%;
    max-width: 100%;
}

.anmalan-content .btn-block-group .btn-block {
    margin-bottom: 0;
}

.anmalan-content .btn-block-group > :only-child {
    grid-column: 1 / -1;
}

@media (max-width: 767px) {
    :root {
        --mbp-mobile-vertical-gap: 12px;
    }

    .btn-wide {
        width: 100%;
        justify-content: center;
    }

    /* Accordion-knappar tar full bredd på mobil */
    .btn-block {
        width: 100%;
        max-width: 100%;
        margin-right: 0;
        margin-bottom: 0;
    }

    .btn-block + .btn-block {
        margin-top: 0;
    }

    /* Knappraden: stapla vertikalt på mobil, primary längst ner */
    .btn-block-group {
        flex-direction: column;
        align-items: stretch;
        gap: var(--mbp-mobile-vertical-gap);
    }

    .btn-block-group .btn-block {
        width: 100%;
        max-width: 100%;
    }
}

/* Back-link button */
.btn-back {
    background: none;
    border: none;
    color: #000;
    padding: 0;
    font-family: Calibri, Arial, sans-serif;
    font-size: 16px;
    text-decoration: underline;
    cursor: pointer;
    white-space: normal; /* WCAG 1.4.4 */
    word-break: break-word;
    height: auto;
}

.btn-back:hover {
    color: #62269e;
}


/* Slut knappar lila tema */

.accordion-button-anmalan {
    background-color: #D8C9E7;
    border-radius: 0;
    font-family: Calibri, Arial, sans-serif;
    font-size: 19px;
    font-weight: 700;
}

.accordion-header-anmalan {
    margin-top: 16px;
    border-top: none !important;
}

.accordion-button-anmalan:not(.collapsed) {
    background-color: #D8C9E7;
    box-shadow: none;
    color: #000
}

.anmalan-accordion .accordion-item,
.anmalan-accordion .accordion-item:first-of-type,
.anmalan-accordion .accordion-item:last-of-type,
.anmalan-accordion .accordion-button,
.anmalan-accordion .accordion-button.collapsed,
.anmalan-accordion .accordion-button:not(.collapsed) {
    border-radius: 0 !important;
}

@media (max-width: 991px) {
    .anmalan-content .btn-block-group {
        grid-template-columns: 1fr;
    }

    .anmalan-content .btn-block-group > *,
    .anmalan-content .btn-block-group .btn-block {
        width: 100%;
        max-width: 100%;
    }
}

@media screen and (min-width: 992px) {
    .anmalan-content {
        max-width: 760px;
    }
}

/* WCAG 2.4.11: tydligt fokusindikator vid tangentbordsnavigering för accordion-knappar i anmälningsflödet */
.accordion-button:focus-visible {
    outline: 3px solid #62269e;
    outline-offset: -3px;
    box-shadow: none;
}

.accordion-button:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

.accordion-header {
    /*margin-top: 16px;*/
    border-top-width: thin;
    border-top-color: #D8C9E7;
}

.accordion-button.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.accordion-button.disabled:hover {
    background-color: inherit;
}

.accordion-button.disabled::after {
    opacity: 0.5;
}

.accordion-item-info {
    border-bottom: none;
}

.tillbaka {
    margin-bottom: 16px;
}

button.tillbaka-lank {
    background: none;
    border: none;
    padding: 0;
    color: #000;
    text-decoration: underline;
    cursor: pointer;
    font-size: 19px;
    font-family: Calibri, Arial, sans-serif;
    font-style: normal;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap; /* WCAG 1.4.4: tillåt radbrytning vid 200% textstorlek */
    gap: 4px;
    white-space: normal;
    word-break: break-word;
}

button.tillbaka-lank:hover,
button.tillbaka-lank:focus {
    color: #00374a;
    text-decoration: underline;
}

@media screen and (max-width: 991px) {
    a.tillbaka-lank {
        font-size: 18px;
    }
}

span.field-validation-valid {
    display: none;
}

/* WCAG / DIGG: Fältspecifikt felmeddelande – tydligt, synligt och kopplat till fältet */
span.field-validation-error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 4px;
    color: #C62828;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
}

/* Prefix-ikon via ::before — dold för skärmläsare (aria-hidden via decorative content) */
span.field-validation-error::before {
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23C62828'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

/* Fältet självt – röd ram vid fel (kompletterar aria-invalid) */
.input-validation-error,
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
    border-color: #C62828 !important;
    border-width: 2px !important;
    box-shadow: inset 0 0 0 1px #C62828;
}

/* Valideringssammanfattning */
.validation-summary-errors {
    background-color: #F7E5EF;
    border: 1px solid #C62828;
    border-radius: 7px;
    padding: 16px;
    margin-bottom: 16px;
}

.validation-summary-errors ul {
    list-style: none;
    margin: 8px 0 0 0;
    padding: 0;
    color: #C62828;
    font-weight: 600;
}

.validation-summary-errors ul li + li {
    margin-top: 4px;
}

.validation-summary-errors ul li::before {
    content: '– ';
}

.utan-elegitimation-summary ul {
    color: #000;
}

.utan-elegitimation-summary ul li::before {
    content: '';
}

/* Ledtext (hint) under label, ovanför input-fältet */
.form-text {
    display: block;
    margin-top: -2px;
    margin-bottom: 4px;
    font-size: 16px;
    color: #555;
}


.hp-popover-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    vertical-align: middle;
}

/* In anmälan, keep info icons compact to avoid legend/layout distortion. */
.anmalan-content .hp-popover-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    line-height: 0;
    vertical-align: middle;
}

.anmalan-content .hp-popover-icon img {
    display: block;
    width: 20px;
    height: 20px;
    margin: 0;
}

.hp-popover-icon:hover {
    cursor: pointer;
}

.hp-info-blue {
    background-color: #EBF3F7;
    padding: 24px 12px;
    border-radius: 7px;
}

.hp-info-grey-anpassningar {
    background-color: #F2F2F2;
    padding: 24px 12px;
}

.hp-info-i {
    background-color: #EBF3F7;
    padding-left: 8px;
}

.hp-info-grey {
    background-color: #F2F2F2;
    padding: 24px 12px;
    border-radius: 7px;
}

.hp-info-tidigareAnpassning {
    background-color: #F2F2F2;
    padding: 24px 12px;
}

.hp-info-red {
    background-color: #F7E5EF;
    border: 1px solid #C62828;
    padding: 24px 12px;
    border-radius: 7px;
}

.hp-info-purple {
    background-color: #EFE9F5;
    padding: 24px 12px;
    border-radius: 7px;
}

.hp-info-green {
    border: 2px solid #2A7D3F !important;
    padding: 48px 24px !important;
}

.anmald-puff {
    padding: 24px !important;
}

.komplettera-intyg-puff {
    padding: 24px 12px;
}

.komplettera-intyg-title {
    margin: 0;
}

.komplettera-intyg-text {
    margin-top: 12px;
    margin-bottom: 0;
}

.meddelandepuff {
    padding: 32px;
    border-radius: 0;
}

/* Min sida: mer luft i sekretessboxens listor */
.sekretess-info-box ul,
.sekretess-info-box ol {
    margin-bottom: 16px;
    padding-left: 1.5rem;
}

.sekretess-info-box li {
    margin-bottom: 12px;
}

.sekretess-info-box li:last-child {
    margin-bottom: 0;
}

.meddelandepuff-titel {
    margin-top: 0;
    margin-bottom: 0;
}

/* Saniterad HTML-innehåll i meddelandepuffar på Min sida.
   Ger <p>, <ul>, <li> rätt rytm och typsnittsstorlek utan att
   störa layouten runtomkring. */
.mbp-kort-html p {
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.mbp-kort-html p:last-child {
    margin-bottom: 0;
}

.mbp-kort-html ul,
.mbp-kort-html ol {
    margin-top: 0;
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
}

.mbp-kort-html li {
    margin-bottom: 0.25rem;
}

.mbp-kort-html li:last-child {
    margin-bottom: 0;
}

.mbp-kort-html a {
    color: inherit;
    text-decoration: underline;
}

/* AnmälanStatusComponent: följ samma rytm som meddelandepuffarna i MinSida */
.anmalan-status-component {
    margin-top: 0;
}

.anmalan-status-component .btn,
.anmalan-status-component .btn-block {
    margin-top: 24px;
    margin-bottom: 0;
    margin-left: 0;
}

@media screen and (max-width: 991px) {
    .anmalan-status-component .btn,
    .anmalan-status-component .btn.btn-sm,
    .anmalan-status-component .btn-block {
        width: 100%;
        max-width: 100%;
        font-size: 18px;
    }
}

@media screen and (max-width: 991px) {
    .meddelandepuff .btn,
    .meddelandepuff .btn.btn-sm,
    .meddelandepuff .button,
    .meddelandepuff .button.btn-sm {
        width: 100%;
        max-width: 100%;
        font-size: 18px;
    }
}

.hp-error-panel {
    background-color: rgba(228, 38, 53, 0.38);
    border: 1px solid #C62828;
    padding: 32px 16px;
}

.hp-error-panel label {
    display: inline;
}

.paneler-info-anmalan {
    border: 1px solid #D6D6D6;
    padding: 24px 12px;
    margin-top: 24px;
    border-radius: 7px;
}

.divBorderTop {
    margin-top: 24px;
    border-top: #CCCCCC;
    border-top-style: solid;
    border-top-width: thin;
    padding-top: 16px;
}

.borderTopAnmalan {
    border-top: #CCCCCC;
    border-top-style: solid;
    border-top-width: thin;
    margin-left: -8px;
    margin-right: -8px;
}

.borderLeftIntyg {
    border-left: #62269E;
    border-left-style: solid;
    border-left-width: 4px;
    padding-left: 8px;
}

.paddingLeft_accordionButton {
    padding-left: 72px;
}


.pageHeader_grey {
    padding: 0;
    background-color: #f5f5f5;
}

.siteLogoTextWrapper {
    display: flex;
    align-items: center;
    padding: 16px 0;
    flex-wrap: wrap; /* tillåt loggan att wrapa vid extremt liten skärm/hög zoom */
    gap: 8px;
}

.siteHeaderLogoImage {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.siteHeaderLogoImage img {
    display: block;
    height: auto;
}

.siteHeaderLogoImage:hover {
    text-decoration: none;
    opacity: 0.85;
}

.siteHeaderLogoText {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 3.2px;
}

.siteHeaderLogoText h1 {
    font-family: BauWebPro, Arial, Verdana, sans-serif;
    color: #000;
    font-size: large;
    font-weight: 400;
    line-height: 1.1;
    margin: 0;
    padding: 0;
    border-left: none;
}

.siteHeaderLogoText span {
    font-family: BauWebPro, Arial, Verdana, sans-serif;
    color: #62269E;
    font-size: clamp(19px, 4vw, 36px); /* skalas ned vid liten skärm/hög zoom */
    font-weight: 700;
    line-height: 1.1;
    border-left: none;
    word-break: break-word;
}

.siteHeaderLogoText:hover {
    opacity: 0.8;
}

.verticalDivider {
    width: 1px;
    height: 64px;
    background-color: #666666;
}

/* Small screens (Mobile) */
@media screen and (max-width: 767px) {
    .siteLogoTextWrapper {
        width: 100%;
        min-width: 0;
        flex-wrap: nowrap;
        gap: 4px;
        padding: 12px 0;
    }

    .siteLogoTextWrapper img {
        flex-shrink: 1;
        min-width: 0;
        max-width: 134px;
        width: clamp(88px, 30vw, 134px);
        height: auto;
    }

    .siteHeaderLogoImage.logoSmallScreens {
        width: 80px;
    }

    .siteHeaderLogoImage.logoLargeScreens {
        display: none !important;
    }

    .verticalDivider {
        margin: 0 5px;
        height: 40px;
        width: 1px;
    }

    .siteHeaderLogoText h1 {
        font-size: clamp(16px, 5vw, 24px);
    }

    .siteHeaderLogoText span {
        font-size: clamp(14px, 4.6vw, 19px);
        padding-left: 8px;
        overflow-wrap: anywhere;
    }

    .siteHeaderLogoText {
        min-width: 0;
    }
}

/* Medium screens and up */
@media screen and (min-width: 768px) {
    .siteLogoTextWrapper {
        flex-direction: row;
        align-items: center;
    }

    .siteLogoTextWrapper img {
        max-width: 189px;
        width: 100%;
        height: auto;
        padding-right: 16px;
    }

    .siteHeaderLogoImage.logoSmallScreens {
        display: none !important;
    }

    .siteHeaderLogoImage.logoLargeScreens {
        max-width: 140px;
        width: 100%;
    }

    .siteHeaderLogoText h1 {
        font-size: clamp(20px, 3vw, 36px);
    }

    .siteHeaderLogoText span {
        font-size: clamp(20px, 3vw, 36px);
        padding-left: 16px;
    }
}

/* ---- Slut Sidhuvud ------- */

/* ===== Mobile hamburger menu ===== */

/* Text inside the toggler button */
.navbar-toggler-mbp-text {
    color: #FFF;
    font-family: Calibri, Arial, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 25px;
}

@media screen and (max-width: 991.98px) {
    /* Break the navbar out of the parent .container's padding so it spans edge-to-edge */
    .navbar-mbp {
        margin-left: calc(var(--bs-gutter-x, 24px) * -.5);
        margin-right: calc(var(--bs-gutter-x, 24px) * -.5);
    }

    /* Remove Bootstrap container-fluid padding */
    .navbar-mbp-inner {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Full-width purple toggle button */
    .navbar-toggler-mbp {
        display: flex;
        width: 100%;
        padding: 12px;
        justify-content: flex-end;
        align-items: center;
        gap: 10px;
        background: #62269E;
        border: none;
        border-radius: 0;
        margin: 0;
        box-shadow: none;
    }

    .navbar-toggler-mbp:hover {
        background: #8151b1;
    }

    .navbar-toggler-mbp:focus {
        box-shadow: none;
        outline: 2px solid rgba(255, 255, 255, 0.6);
        outline-offset: -4px;
    }

    .navbar-mbp .navbar-collapse {
        padding: 10px;
    }

    #navbarNav {
        border-bottom: 1px solid #62269E;
    }

    .navbar-mbp .navbar-nav .nav-link {
        display: inline-block;
        margin-left: 0;
        padding-left: 0;
        padding-right: 0;
        font-size: 18px;
        line-height: 22px;
    }
}

/* ===== End Mobile hamburger menu ===== */

@media (min-width: 992px) {
    .navbar-expand-lg .navbar-nav {
        flex-direction: row;
        margin-right: 64px;
        gap: 40px;
    }

    .navbar-mbp-inner {
        justify-content: flex-end !important;
    }

    /* Desktop menu only: 18px text, gap hanterar avstånd */
    .navbar-mbp .navbar-nav .nav-link {
        font-size: 18px;
        margin-left: 0;
    }
}

.navbar-collapse {
    flex-grow: 0;
}

.nav-link {
    color: #000000;
    font-family: Calibri, Arial, sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin-left: 0;
    padding: 0 !important;
}

.nav-link.active {
    color: #62269E !important;
    border-bottom: solid 2px #62269e;
    padding-bottom: 3.2px;
}

.nav-link:hover {
    color: #62269E;
    text-decoration: none;
}

.show {
    margin-bottom: 16px;
}

.inforuta_gra_ram {
    border-radius: 7px;
    border: 1px solid var(--Grskala-Gr-20, #CCC);
    background: #FFF;
    display: flex;
    padding: 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    margin-bottom: 16px;
}

.inforuta_gra_ram_startsida {
    border-radius: 7px;
    border: 1px solid var(--Grskala-Gr-20, #CCC);
    background: #FFF;
    align-self: stretch;
    margin-bottom: 16px;
    margin-left: -8px;
    margin-right: -8px;
    margin-top: 24px;
}

.input-validation-error {
    border-color: red !important;
}

.validation-message-multiline {
    white-space: pre-line;
}

.kompletteraBanner {
    background-color: #B00060;
    color: #FFF;
    text-align: center;
    font-feature-settings: 'liga' off, 'clig' off;
    font-family: Calibri, Arial, sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    padding-left: 8px;
    padding-right: 8px;
}

/* ===== Provdag/plats och personuppgifter – info-rader i mina anmälningar ===== */
/* Tillåter radbrytning vid liten skärm/hög zoom (WCAG 1.4.4) */
.divBorderTop > div,
.paneler-info-anmalan > div,
.paneler-info-anmalan .margin-bottom_1rem > div {
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
}

/* ===== Footer ===== */

#footer {
    background-color: #F2F2F2;
    padding-top: 32px;
    padding-bottom: 48px;
    min-height: 252px;
}

#footer a {
    display: inline-block;
}

#footer .extern-lank {
    padding-top: 0;
    padding-bottom: 0;
}

#footer p {
    margin-bottom: 5px;
}

#footer ul {
    font-size: 14px;
    list-style: none;
    padding-left: 0;
}

#footer ul li {
    margin-bottom: 0;
}

/* Footer columns — flexbox, fixed 48px gap between columns */
.footer-columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 48px;
    min-height: 172px;
}

.footer-col {
    flex: 0 1 fit-content;
    font-size: 14px;
}

.footer-col-logo {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.footer-logo-img,
img.footer-logo-img {
    height: 50px !important;
    width: auto !important;
    display: block;
}

.footerHeader {
    color: #000;
    font-family: BauWebPro, Arial, Verdana, sans-serif;
    font-size: 18px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 8px;
}

/* Stack columns on small screens */
@media screen and (max-width: 767px) {
    .footer-columns {
        flex-direction: column;
        gap: 24px;
    }

    .footer-col {
        flex: none;
        width: 100%;
    }

    .footer-col-logo {
        justify-content: flex-start;
    }
}

.hidden {
    display: none !important;
}

.hidden-print {
    margin-top: 80px !important;
    /* shown on screen; hidden when printing */
}

@media print {
    .hidden-print {
        display: none !important;
    }
}

.footerHeader {
    color: #000;
    font-family: BauWebPro, Arial, Verdana, sans-serif;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}

.footerColumn {
    margin-bottom: 15px;
}

.footerColumn a,
.footerColumn p {
    font-size: 14px;
    line-height: 1.6;
}

.equal {
    display: flex;
    flex-wrap: wrap;
}


.uhr_color_none_bg {
    background-color: transparent;
}

/* ===== Spacing utilities (replacing Bootstrap mt-2/mt-3/mt-5) ===== */
.mt-mbp-16 {
    margin-top: 16px !important;
}

.mt-mbp-24 {
    margin-top: 24px !important;
}

.mt-mbp-48 {
    margin-top: 48px !important;
}

.mb-mbp-48 {
    margin-bottom: 48px !important;
}


/* ===== End Spacing utilities ===== */

.login-methods {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    max-width: 448px;
}

/* Login-methods buttons are full-width with arrow on the right */
.login-methods .btn {
    width: 100%; /* WCAG 1.4.4: full bredd så text inte klipps vid 200% textstorlek */
    max-width: 448px;
    height: auto;
    min-height: 48px;
    white-space: normal;
    word-break: break-word; /* WCAG 1.4.4 */
    margin-bottom: 12px;
    justify-content: space-between;
    min-width: unset;
    font-size: 19px;
    font-weight: 700;
}

.login-methods .btn-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;
    gap: 32px;
    width: 100%;
}

.login-help {
    line-height: 1;
}
.login-help p {
    font-size:smaller;
    padding: 0;
    margin: 0;
}

.login-help a {
    text-decoration: none;
    font-size: smaller;
    padding: 0;
}

.login-help a:hover {
    text-decoration: underline;
}

/* Login/create-account flows: keep button size consistent across e-leg and without e-leg */
.login-methods .btn {
    padding: 14px 20px;
}

/* Keep global mobile button size at 18px; placed late so it overrides base 19px rules above. */
@media screen and (max-width: 991px) {
    .btn,
    .button,
    .btn.btn-sm,
    .button.btn-sm,
    .btn.btn-primary,
    .button.btn-primary,
    .btn.btn-outline-secondary,
    .button.btn-outline-secondary,
    .btn-back,
    .login-methods .btn {
        font-size: 18px;
    }

    /* Mobil: action-knappar ska ta full tillgänglig bredd */
    .btn:not(.btn-close):not(.navbar-toggler):not(.btn-back),
    .button:not(.btn-back),
    input[type="submit"].btn,
    input[type="submit"].button {
        width: 100%;
        max-width: 100%;
    }
}

.arrow {
    flex-shrink: 0;
}

.login-arrow {
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}

/* ===== Custom accordion (Index.cshtml step-by-step) ===== */

.accordion-container {
    margin-top: 24px;
}

.accordion-container .accordion-item {
    border-top: 1px solid #666666;
}

.accordion-container .accordion-item:last-child {
    border-bottom: none;
}

.accordion-container .accordion-header {
    width: 100%;
    padding: 24px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    flex-wrap: nowrap; /* WCAG 1.4.4: nowrap så ikonen inte radbryts; texten radbryts internt via .step-text */
    gap: 16px;
    font-family: Calibri, Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-align: left;
    color: #333;
    transition: background-color 0.3s ease;
    min-height: 48px; /* WCAG 1.4.4 */
    height: auto;
    white-space: normal;
    word-break: break-word;
}

.accordion-container .accordion-header:hover {
    background-color: #f9f9f9;
}

.accordion-container .accordion-header:focus {
    outline: 2px solid #62269e;
    outline-offset: -2px;
    box-shadow: none;
}

.accordion-container .accordion-header:focus:not(:focus-visible) {
    outline: none;
}

.step-number {
    flex-shrink: 0;
    font-weight: 700;
    color: #333;
}

.step-text {
    flex: 1 1 0;
    min-width: 0;
}

.accordion-icon {
    flex-shrink: 0;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    transition: transform 0.3s ease;
}

.accordion-container .accordion-item.active .accordion-icon {
    transform: rotate(180deg);
}

.accordion-content {
    /* WCAG 1.4.4: använd grid-animation i stället för max-height,
       så text aldrig klipps vid 200% textstorlek */
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
    padding: 0 16px;
}

.accordion-content > * {
    overflow: hidden;
}

.accordion-container .accordion-item.active .accordion-content {
    grid-template-rows: 1fr;
    padding: 0 24px 24px 24px;
}

.accordion-content p {
    margin-top: 0;
    margin-bottom: 0;
    font-size: 19px;
    color: #333333;
    line-height: 1.4; /* WCAG 1.4.4: relativ line-height i stället för fast px-värde */
}

@media screen and (max-width: 767px) {
    .accordion-container .accordion-header {
        justify-content: space-between;
    }

    .accordion-container .step-text {
        min-width: 0;
    }

    .login-methods .btn,
    .btn-wide {
        font-size: 18px;
    }
}

/* Konto/EjAnvisad spacing and typography */
.ej-anvisad-lead {
    margin-top: 48px;
    margin-bottom: 12px;
    font-family: BauWebPro, Arial, Verdana, sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 25px;
}

.ej-anvisad-body {
    margin-top: 0;
    margin-bottom: 48px;
}

.kontaktuppgifter-form-group-telefon {
    margin-bottom: 0;
}

.kontaktuppgifter-form .telefonnummer-input {
    margin-bottom: 24px;
}

.kontaktuppgifter-submit {
    margin-top: 0;
}

/* Anmalan - Ange behov av anpassning */
#FormBehovAvAnpassning {
    margin-bottom: 0;
}

/* Anmälan: håll exakt 24px mellan sista fält och knapprad i steg 2/2b */
.anmalan-step-body {
    padding-bottom: 0;
}

.anmalan-step-actions {
    padding-top: 24px !important;
}

/* Personuppgifter-steget: undvik extra underkant på readonly-fält */
.anmalan-personuppgifter-grid .form-group,
.anmalan-personuppgifter-grid .form-control {
    margin-bottom: 0;
}

/* Intyg-steget: sista kortet ska inte addera extra avstånd till knappraden */
#intyg-body .intyg-card:last-child {
    margin-bottom: 0 !important;
}

#FormBehovAvAnpassning .form-group,
.behov-anpassning-form .form-group {
    margin-bottom: 0;
}

#FormBehovAvAnpassning > .form-group:first-of-type,
.behov-anpassning-form > .form-group:first-of-type {
    margin-top: 24px;
    margin-bottom: 0;
}

#FormBehovAvAnpassning fieldset > legend,
.behov-anpassning-form fieldset > legend {
    font-family: Calibri, Arial, sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 25px;
    margin-bottom: 12px;
}

.behov-anpassning-form .form-group > label,
.behov-anpassning-form .form-group > div > label {
    font-family: Calibri, Arial, sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 25px;
    margin-bottom: 12px;
}

#FormBehovAvAnpassning fieldset,
.behov-anpassning-form fieldset {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

#anpassning-av-provet > .form-group,
#anpassning-av-provsituation > .form-group {
    margin-top: 24px !important;
    margin-bottom: 0;
}

#FormBehovAvAnpassning .radio label,
#FormBehovAvAnpassning .form-check-label,
.behov-anpassning-form .radio label,
.behov-anpassning-form .form-check-label {
    font-weight: 400;
    font-size: 19px;
}

#FormBehovAvAnpassning .anpassning-divider {
    margin: 24px 0 !important;
}

.anpassning-divider {
    margin-left: 24px;
    margin-right: 24px;
}

.anmalan-intyg-modal .anmalan-intyg-modal-dialog {
    max-width: 800px;
}

.anmalan-intyg-modal .modal-content {
    border-radius: 7px;
    border: 1px solid #cccccc;
}

.anmalan-intyg-modal .modal-body {
    padding: 48px;
}

.anmalan-intyg-modal .modal-body h2 {
    margin-top: 0;
    margin-bottom: 24px;
}

.anmalan-intyg-modal .modal-body p {
    margin-bottom: 12px;
}

.anmalan-intyg-modal .modal-footer {
    border-top: none;
    padding: 0 48px 48px;
    justify-content: flex-end;
}

/* Session timeout popup (kop till layoutens "kopa sig tid"-dialog) */
.session-timeout-modal {
    z-index: 9999;
}

.session-timeout-dialog {
    max-width: 800px;
    margin: 24px auto;
}

.session-timeout-content {
    border: 1px solid #cccccc;
    border-radius: 7px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
    padding: 48px;
}

.session-timeout-header {
    padding: 0;
    border: 0;
}

.session-timeout-title {
    margin: 0;
    font-family: BauWebPro, Arial, Verdana, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;
}

.session-timeout-body {
    padding: 0;
    margin-top: 48px;
}

.session-timeout-body p {
    margin: 0;
}

.session-timeout-footer {
    padding: 0;
    margin-top: 48px;
    border: 0;
    justify-content: flex-end;
    gap: 24px;
}

.session-timeout-footer .btn {
    min-height: 48px;
    margin: 0;
}

@media screen and (min-width: 992px) {
    .btn-block-group,
    .session-timeout-footer {
        gap: 24px;
    }
}

@media screen and (max-width: 991px) {
    .session-timeout-dialog {
        width: calc(100% - 32px);
        max-width: 560px;
        margin: 16px auto;
    }

    .session-timeout-content {
        max-width: none;
        padding: 24px;
    }

    .session-timeout-title {
        font-size: 21px;
        line-height: 1.25;
    }

    .session-timeout-body {
        margin-top: 32px;
    }

    .session-timeout-footer {
        margin-top: 32px;
        flex-wrap: wrap;
        justify-content: flex-end;
        column-gap: 24px;
        row-gap: var(--mbp-mobile-vertical-gap, 12px);
    }

    .session-timeout-footer .btn {
        width: auto;
        min-width: 220px;
        justify-content: center;
    }
}

/* Anmalan - Granska och betala */
#granska-body {
    padding-top: 0;
}

#granska-body .granska-main-title {
    margin-top: 24px;
}

#granska-body .granska-divider {
    margin: 24px 0 !important;
    padding-top: 0;
}

#granska-body .granska-info-list > div {
    margin-bottom: 12px;
}

#granska-body .granska-info-list > div:last-child {
    margin-bottom: 0;
}

#granska-body .granska-kostnad-box {
    margin-top: 24px;
}

#granska-body .granska-kostnad-box > * + * {
    margin-top: 24px;
}

#granska-body .granska-kostnad-box p {
    margin: 0;
}

#granska-body .granska-kostnad-box ul {
    margin: 0;
}

#granska-body .granska-kostnad-box li + li {
    margin-top: 12px;
}

#granska-body .granska-kostnad-avgift {
    margin: 0 0 24px;
    font-weight: 700;
}

#granska-body .granska-kostnad-villkor {
    margin: 0;
}

#granska-body .granska-kostnad-info-box {
    margin: 0;
}

/* Anmalan - Plats och datum */
.val-av-provort-day-box {
    margin-bottom: 12px;
}

.val-av-provort-day-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.val-av-provort-day-value {
    font-weight: 700;
    text-align: right;
    margin-left: auto;
}

.val-av-provort-info-box {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.val-av-provort-info-icon {
    flex-shrink: 0;
    margin-top: 0;
}

.val-av-provort-info-text {
    margin: 0;
}

#val-av-provort-body {
    padding-bottom: 0;
}

.val-av-provort-actions {
    padding-top: 24px !important;
}

.mina-anmalningar-actions-row {
    gap: 24px;
}

/* Avdelande sträck i accordion-body – 24px visst avstånd ovan och under */
.mbp-accordion-body .divBorderTop {
    margin-top: 24px;
    padding-top: 24px;
}

/* Första sträcket direkt i accordion-body ska inte lägga på extra marginal
   eftersom accordion-body redan har 24px padding-top */
.mbp-accordion-body > .divBorderTop:first-child {
    margin-top: 0;
}

#komplettering-sektion {
    padding: 24px 12px !important;
}

/* Anmalan - Anpassningar och intyg (dynamiska ID:n intyg-body-{id}) */
[id^="intyg-body-"] {
    padding-top: 24px;
}

#intyg-body {
    padding-top: 24px;
}

#intyg-body .intyg-intro-box {
    margin-bottom: 24px;
}

#intyg-body .intyg-section-title {
    margin-top: 24px;
    margin-bottom: 24px;
}

/* Ge grå anpassningskort luft från accordion-kanterna */
#intyg-body .row.hp-info-grey,
[id^="intyg-body-"] .row.hp-info-grey {
    margin-left: 0;
    margin-right: 0;
}

/* Behåll luft efter statusruta i både statiskt och dynamiskt intyg-body */
#intyg-body .hp-info-purple,
[id^="intyg-body-"] .hp-info-purple {
    margin-bottom: 24px;
}

#intyg-body .intyg-card .intyg-anpassning-title {
    margin-top: 0;
    margin-bottom: 24px;
}

#intyg-body .intyg-krav-lista {
    margin-top: 24px;
}

#intyg-body .intyg-krav-lista ul {
    margin-top: 0;
}

#intyg-body .intyg-upload-block {
    margin-top: 24px;
    margin-bottom: 24px;
}

#intyg-body .intyg-upload-button {
    margin-top: 24px;
    margin-bottom: 24px;
}

.konto-redigera-form .btn-block {
    margin-bottom: 0;
}

.konto-redigera-form .btn-block-group {
    margin-bottom: 24px;
}

.konto-redigera-form .konto-redigera-last-form-group {
    margin-bottom: 0;
}

.konto-redigera-form .konto-redigera-last-form-group .form-control {
    margin-bottom: 0;
}

.konto-redigera-actions-row {
    margin-top: 24px;
}

@media screen and (max-width: 991px) {
    .ej-anvisad-lead {
        margin-top: 24px;
    }

    .ej-anvisad-button {
        width: 100%;
    }

    #behov-av-anpassning-body .hp-info-blue {
        margin-left: 12px;
        margin-right: 12px;
    }

    .anmalan-intyg-modal .anmalan-intyg-modal-dialog {
        width: calc(100% - 32px);
        max-width: 560px;
        margin: 16px auto;
    }

    .anmalan-intyg-modal .modal-content {
        max-width: none;
    }

    .anmalan-intyg-modal .modal-body {
        padding: 24px;
    }

    .anmalan-intyg-modal .modal-footer {
        padding: 0 24px 24px;
    }

    .anmalan-intyg-modal .modal-footer .btn {
        width: 100%;
    }

    .meddelandepuff {
        margin-left: calc(var(--bs-gutter-x, 24px) * -.5);
        margin-right: calc(var(--bs-gutter-x, 24px) * -.5);
        padding: 24px;
        border-radius: 0;
    }

    .anmalan-accordion {
        margin-left: calc(var(--bs-gutter-x, 24px) * -.5);
        margin-right: calc(var(--bs-gutter-x, 24px) * -.5);
    }
}

/* ===== Dropzone / file upload ===== */

.dropzone-container {
    border: 2px dashed #B093CF;
    border-radius: 4px;
    padding: 32px 16px;
    text-align: center;
    background-color: #faf7fd;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.dropzone-container:hover,
.dropzone-container.dz-drag-hover {
    background-color: #EFE9F5;
}

.dz-message {
    margin: 0;
    font-family: Calibri, Arial, sans-serif;
    font-size: 16px;
    color: #555;
}

/* ===== Info message (upload confirmation etc.) ===== */

.info-message {
    background-color: #EBF3F7;
    border-left: 4px solid #006E96;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-family: Calibri, Arial, sans-serif;
    font-size: 16px;
}

/* ===== SVG icon size utilities ===== */

/* Inline icon used next to text (info, warning, external-link etc.) */
.icon-inline {
    height: 20px;
    width: auto;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Larger decorative icon (e.g. MinSida feature icons) */
.icon-lg {
    height: 32px;
    width: auto;
    vertical-align: middle;
    flex-shrink: 0;
}

/* ===== Radio buttons (custom) ===== */

.radio {
    margin-bottom: 8px;
}

/* Gemensam indragsklass för radioknapp-listor i anpassningsformulär */
.margin-left_1rem {
    margin-left: 1rem;
}

.synskada-radio {
    margin-top: 8px;
}

/* ===== Lockout page ===== */

.lockout {
    margin-top: 48px;
    text-align: center;
}

/* ===== Label hover info ===== */

.label-hover-info {
    margin-bottom: 8px;
}

/* ===== Mina anmälningar - Accordion ===== */

.mbp-accordion-item {
    border: 1px solid #d4d4d4;
    border-radius: 0;
    overflow: visible; /* WCAG 1.4.4: overflow:hidden kan klippa text vid 200% textstorlek */
}

.mbp-accordion-button {
    background-color: #f7f4fb;
    color: #000;
    font-family: BauWebPro, Calibri, Arial, sans-serif;
    font-size: 19px;
    font-weight: 700;
    padding: 16px 20px;
    box-shadow: none;
    border: none;
    border-radius: 0 !important;
}

.mbp-accordion-button:not(.collapsed) {
    background-color: #efe9f5;
    color: #000;
    box-shadow: none;
}

.mbp-accordion-button::after {
    filter: none;
}

.mbp-accordion-button:focus-visible {
    /* WCAG 2.4.11: tydligt fokusindikator vid tangentbordsnavigering */
    outline: 3px solid #62269e;
    outline-offset: -3px;
    box-shadow: none;
}

.mbp-accordion-button:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

.mbp-accordion-item,
.mbp-accordion-item:first-of-type,
.mbp-accordion-item:last-of-type,
.mbp-accordion-button,
.mbp-accordion-button.collapsed,
.mbp-accordion-button:not(.collapsed) {
    border-radius: 0 !important;
}

.mbp-accordion-provdag {
    font-size: 19px;
}

.mbp-accordion-body {
    background-color: #fff;
    padding: 24px 12px;
}

.mbp-anmälan-info-rad {
    display: flex;
    flex-wrap: wrap; /* WCAG 1.4.4: tillåt radbrytning vid stor textstorlek */
    margin-bottom: 8px;
    font-size: 19px;
    font-family: Calibri, Arial, sans-serif;
    overflow-wrap: break-word;
    word-break: break-word;
    min-width: 0;
}

.mbp-info-label {
    font-weight: 700;
    min-width: 128px;
    flex-shrink: 0; /* etiketten bryts inte, värdet wrapar till nästa rad */
}

.mbp-badge-betald {
    background-color: #1a6e31;
    color: #fff;
    font-family: Calibri, Arial, sans-serif;
    font-weight: 400;
    font-size: 15px;
    padding: 0.35em 0.75em;
}

.mbp-badge-ej-betald {
    background-color: #6c757d;
    color: #fff;
    font-family: Calibri, Arial, sans-serif;
    font-weight: 400;
    font-size: 15px;
    padding: 0.35em 0.75em;
}

.mbp-btn-hantera {
    background-color: #62269e;
    border-color: #62269e;
    color: #fff;
    font-family: Calibri, Arial, sans-serif;
    font-size: 19px;
    padding: 8px 24px;
    min-height: 48px; /* WCAG 1.4.4 */
    height: auto;
    white-space: normal; /* WCAG 1.4.4: tillåt radbrytning vid 200% textstorlek */
    word-break: break-word;
}

.mbp-btn-hantera:hover,
.mbp-btn-hantera:focus {
    background-color: #4e1d7e;
    border-color: #4e1d7e;
    color: #fff;
}

@media screen and (max-width: 767px) {
    .mina-anmalningar-actions-row .btn {
        width: 100%;
    }
}