/* ===== BankID modal ===== */

.bankid-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex; /* <- riktig centrering */
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.bankid-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.55); /* lite mörkare, Kivra-känsla */
}

.bankid-modal__dialog {
    position: relative;
    width: 520px; /* fast “kivra-bredd” */
    max-width: calc(100vw - 32px);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 24px 80px rgba(0,0,0,.35);
    padding: 24px;
    z-index: 1;
    animation: bankid-pop .18s ease-out;
}

@keyframes bankid-pop {
    from {
        transform: scale(.98);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.bankid-modal__spinner {
    position: absolute;
    inset: 0;
    display: none; /* visas bara vid loading */
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.75);
    border-radius: 8px;
    z-index: 2;
}

    .bankid-modal__spinner::after {
        content: "";
        width: 42px;
        height: 42px;
        border: 3px solid #e6e6e6;
        border-top-color: #FF7A00; /* JobOffice orange */
        border-radius: 50%;
        animation: bankid-spin .8s linear infinite;
    }

@keyframes bankid-spin {
    to {
        transform: rotate(360deg);
    }
}


.bankid-modal__close:hover {
    background: #f3f3f3;
}

.bankid-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start; /* ← VIKTIGT */
    padding: 0 0 6px 0;
    position: relative; /* för stäng-knappen */
}

.bankid-modal__brand {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    margin-left: 0;
}

.bankid-modal__logo {
    height: 48px;
    width: auto;
    display: block;
}

.bankid-modal__title {
    font-size: 20px; /* större */
    line-height: 1.2;
    font-weight: 500; /* mindre tung än 700/800 */
    color: #111;
    letter-spacing: -0.2px;
}

.bankid-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #111;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    opacity: .8;
    margin-top: 10px;
}

.bankid-modal__close:hover {
    background: #f3f3f3;
    opacity: 1;
}



/* QR block */
.bankid-modal__qrwrap {
    display: flex;
    justify-content: center;
    margin: 10px 0 6px;
}

/* FAST kvadrat som matchar QR-storlek (Kivra-känsla) */
.bankid-modal__frame {
    position: relative;
    width: 260px; /* SAMMA som QR */
    height: 260px;
    display: grid;
    place-items: center; /* ← riktig pixel-centrering */
}

/* QR i mitten, lite luft runt */
.bankid-modal__qr {
    width: 250px; /* QR storlek */
    height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bankid-modal__qr svg {
    width: 250px;
    height: 250px;
    display: block;
}

.bankid-modal__qr img {
    width: 260px;
    height: 260px;
    display: block;
}

/* Hörn: tight runt QR (inte runt hela modal) */
.bankid-modal__corners {
    position: absolute;
    inset: 10px; /* ← AVSTÅND TILL QR */
    pointer-events: none;
}

.bankid-modal__corners::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
    /* top-left */
    linear-gradient(#FF7A00,#FF7A00) left top / 16px 3px no-repeat, linear-gradient(#FF7A00,#FF7A00) left top / 3px 16px no-repeat,
    /* top-right */
    linear-gradient(#FF7A00,#FF7A00) right top / 16px 3px no-repeat, linear-gradient(#FF7A00,#FF7A00) right top / 3px 16px no-repeat,
    /* bottom-left */
    linear-gradient(#FF7A00,#FF7A00) left bottom / 16px 3px no-repeat, linear-gradient(#FF7A00,#FF7A00) left bottom / 3px 16px no-repeat,
    /* bottom-right */
    linear-gradient(#FF7A00,#FF7A00) right bottom / 16px 3px no-repeat, linear-gradient(#FF7A00,#FF7A00) right bottom / 3px 16px no-repeat;
}


/* Text under QR */
.bankid-modal__msg {
    text-align: center;
    font-size: 14px;
    color: #303030;
    margin: 6px 0 10px 0;
    font-weight: 500;
}

/* Instruction box */
.bankid-modal__instructions {
    background: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.bankid-modal__instructions ol {
    margin: 0;
    padding-left: 18px;
}

/*.bankid-modal__cancel {
    margin-top: 14px;
    width: 100%;
    border: 0;
    background: transparent;
    font-weight: 600;
    color: #111;
    padding: 10px 0 6px 0;
    cursor: pointer;
    text-decoration: underline;
}*/

.bankid-modal__cancel {
    border: 0;
    width: 100%;
    background: transparent;
    border-radius: 10px;
    padding: 10px 14px;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.bankid-modal__cancel:hover {
    background: #f3f3f3;
}

.bankid-modal__cancel:active {
    background: #e9e9e9;
}

.bankid-modal__cancel:focus-visible {
    outline: 3px solid rgba(0,0,0,.15);
    outline-offset: 2px;
}


/* Mobile safety: hide modal on small screens if it ever gets triggered */
@media (max-width: 480px) {
    .bankid-modal__dialog {
        width: 100%;
    }
}