/* GEN-I 2FA enrollment wizard — matches the Figma designs.
   Reuses theme chrome (header/logo/lang, .image-mojgeni-bg gradient) + tokens.
   Type: Proxima Nova — body 18px/400/0, titles 36px/700, link-buttons 18px/700/2%.
   Spacing scale uses margin-BOTTOM only (no stacking): 24 title, 40 section, 28 button gap. */

.twofa-main {
    width: 100%;
    justify-content: center;
}

.twofa-content {
    width: 100%;
    max-width: 744px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
    font-family: 'proxima-nova', sans-serif;
}

.twofa-content .welcome-header {
    font-family: 'proxima-nova', sans-serif;
    font-weight: 700;
    font-size: 36px;
    letter-spacing: 0;
    margin-bottom: 48px;
}

.twofa-content .welcome-header-text,
.twofa-content p {
    font-family: 'proxima-nova', sans-serif;
    font-weight: 400;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 1.5;
    max-width: 744px;
    margin: 0 auto 40px;
    color: #5a6b73;
}

/* Primary teal action button — 264 x 44, 4px radius, login "Prijava" styling */
.twofa-btn {
    display: inline-block;
    width: 264px;
    height: 44px;
    padding: 0 16px;
    border: none;
    border-radius: 4px;
    background-color: #00A796;
    box-shadow: 0px 4px 0px 0px #038477;
    color: #fff;
    font-family: 'proxima-nova', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 44px;
    letter-spacing: 0;
    cursor: pointer;
    transition: background-color .2s ease;
}

.twofa-btn:hover { background-color: #15BFAC; }

.twofa-btn:disabled,
.twofa-btn[disabled] {
    background-color: #a6b1b5;
    box-shadow: 0px 4px 0px 0px #7f8a8d;
    cursor: not-allowed;
}

/* Secondary "> text" link-style submit buttons (Skip / Cancel / Resend):
   Proxima Nova 18px Bold, 2% letter-spacing */
.twofa-linkbtn {
    position: relative;
    background: none;
    border: none;
    padding: 0 0 0 16px;
    color: var(--geni-modra);
    font-family: 'proxima-nova', sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    cursor: pointer;
}

.twofa-linkbtn::before {
    content: ">";
    position: absolute;
    left: 0;
    top: 0;
}

.twofa-linkbtn:hover { text-decoration: underline; }
a.twofa-linkbtn { display: inline-block; text-decoration: none; }
a.twofa-linkbtn:hover { text-decoration: underline; }
.twofa-linkbtn:disabled { opacity: .5; cursor: default; text-decoration: none; }

/* Action stack (primary + secondary links). Gap governs button->link spacing. */
.twofa-actions {
    margin-top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
}

/* "Remember this device" under the code boxes, left-aligned with them (Figma: 24px below the
   boxes, 16px box, 8px to the label). Drawn by hand like the radios: the theme styles inputs. */
.twofa-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    max-width: 340px;
    margin: 8px auto 24px;
    cursor: pointer;
    font-family: 'proxima-nova', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    color: #004c6a;
    text-align: left;
}

.twofa-remember input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 16px !important;
    height: 16px !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid #79a0af !important;
    border-radius: 2px !important;
    background: #f2f5f5 !important;
    box-shadow: none !important;
    cursor: pointer;
}

.twofa-remember input[type="checkbox"]:checked {
    border-color: #004c6a !important;
    background: #004c6a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat !important;
}

.twofa-remember input[type="checkbox"]:focus-visible { outline: 2px solid #004c6a; outline-offset: 2px; }
.twofa-remember input[type="checkbox"]:disabled { opacity: .5; cursor: default; }

/* Resend link sits under the code boxes, with clear air before the confirm button */
.twofa-resend-line {
    display: inline-block;
    margin: 0 0 44px;
}

/* Which-2FA method cards: same card as the portal's settings (.rb-card), 232 x 258.
   48px above and below; the top margin collapses with the subtitle's 40px. */
.twofa-methods {
    display: flex;
    gap: 24px;
    justify-content: center;
    margin: 48px 0;
    flex-wrap: wrap;
}

.twofa-method {
    /* Fixed size, so a long e-mail wraps inside the card instead of growing it, and the radios
       of neighbouring cards stay level. */
    box-sizing: border-box;
    width: 232px;
    height: 258px;
    /* Content sits 24px from the card's outer edge (Figma), border included. */
    padding: 23px;
    border: 1px solid rgba(0, 76, 106, 0.5);
    border-radius: 4px;
    box-shadow: 0 3px 3px 0 rgba(0, 76, 106, 0.2);
    background: #fff;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    overflow: hidden;
    transition: border-color .2s ease;
}

.twofa-method:hover { border-color: #004c6a; }

/* 2px border, so 1px less padding keeps the content in place. */
.twofa-method--selected {
    border: 2px solid #004c6a;
    padding: 22px;
}

/* Icons from Figma, 50 x 50; 24px down to the title (8px here plus the card's 16px gap). */
.twofa-method__icon {
    flex: 0 0 auto;
    display: block;
    width: 50px;
    height: 50px;
    margin-bottom: 8px;
    color: #004c69;
}

.twofa-method--disabled { opacity: .5; cursor: not-allowed; }

.twofa-method__title {
    /* Narrow enough that the two-word labels wrap onto two rows, as in the design. */
    max-width: 11ch;
    text-align: center;
    line-height: 24px;
    color: #004c6a;
    font-family: 'proxima-nova', sans-serif;
    font-weight: 700;
    font-size: 18px;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.twofa-method__desc,
.twofa-method__value {
    max-width: 100%;
    text-align: center;
    font-size: 14px;
    line-height: 18px;
    overflow-wrap: anywhere;
}

/* "Edit details" cards (Figma): 48px from the title (32px plus the card's 16px gap), 14/17. */
.twofa-method__desc { margin-top: 32px; line-height: 17px; color: #5a6066; }
.twofa-method__value { font-weight: 700; line-height: 17px; color: #5a6066; }

/* At most two rows, so a very long e-mail cannot push the radio out of line; the rest ends
   in "..." and the full address is in the hover title (and on the next screen). */
.twofa-method__value {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

/* Radio as in the portal: 16px circle, blue border and a 10px blue dot when checked. Drawn by
   hand because the theme gives inputs width, padding and a shadow. Pinned to the card's bottom. */
.twofa-method input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    flex: 0 0 auto;
    width: 16px !important;
    height: 16px !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: auto 0 0 !important;
    border: 1px solid rgba(0, 76, 106, 0.5) !important;
    border-radius: 50% !important;
    background: rgba(242, 245, 245, 0.5) !important;
    box-shadow: none !important;
    outline: none;
    cursor: pointer;
}

.twofa-method input[type="radio"]:checked {
    border-color: #004c6a !important;
    background: #f2f5f5 radial-gradient(circle, #004c6a 0 5px, transparent 5.5px) !important;
}

.twofa-method input[type="radio"]:focus-visible { outline: 2px solid #004c6a; outline-offset: 2px; }

/* Six-box verification code: 50 x 60 boxes, 8px apart (Figma) */
.twofa-code-boxes {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin: 0 0 16px;
}

.twofa-code-box {
    box-sizing: border-box;
    width: 50px !important;
    height: 60px;
    min-width: 0 !important;
    padding: 0 !important;
    text-align: center;
    font-family: 'proxima-nova', sans-serif;
    font-size: 28px;
    font-weight: 700;
    color: var(--body-color-text);
    border: 1px solid #004c6a;
    border-radius: 4px;
    background: rgba(254, 254, 254, 0.5);
}

.twofa-code-box:focus { outline: none; border-color: #00A796; }

/* Wrong or expired code: red boxes until the user types again. */
.twofa-code-boxes--error .twofa-code-box,
.twofa-code-boxes--error .twofa-code-box:focus { border-color: #ea4335; }

/* Validation error under the code boxes (wrong / expired code on the login screen).
   Sits between the boxes and the resend link, so both keep their own spacing. */
.twofa-error {
    display: block;
    margin: -4px 0 16px;
    font-family: 'proxima-nova', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #ea4335;
}

/* 2FA screens' header: the same as the portal's registration header (.public-header in
   MyGeniPortals.Libraries _header.scss and the responsive files), logo at its natural size.
   The theme's own header switches at 900px with other sizes, so each step is set here. */
.header--2fa { height: auto; }
/* 48 + 43 (logo) + 33 = 124px; fixed so the b2b logo (42px) gives the same height. */
.header--2fa .header-content {
    box-sizing: border-box;
    height: 124px;
    padding: 48px 156px 33px;
}
/* Block, so the logo link's line box (the theme gives links 18px text) adds no space under it. */
.header--2fa .header__logo a,
.header--2fa .header__logo img { display: block; }
.header--2fa .header__logo img { width: auto; height: auto; }

.language-selector .lang-divider { pointer-events: none; }

/* Language selector as on the portal. The template's line breaks between SL, | and EN would
   render as spaces on top of the 12px margins (the portal's markup has none); flex drops them.
   The portal also gives each tag a normal line height, which sets the text a little lower. */
.header--2fa .language-selector { display: flex; align-items: flex-start; }
.header--2fa .language-selector .lang { line-height: normal; }
.header--2fa .language-selector a.lang:hover { opacity: 1; }

@media (max-width: 1024px) {
    .header--2fa .header-content {
        max-width: 744px;
        margin: 0 auto;
        padding: 48px 0 33px;
    }
}

@media (max-width: 767px) {
    .header--2fa { height: 86px; }
    .header--2fa .header-content {
        height: auto;
        max-width: none;
        margin: 0;
        padding: 16px 20px;
    }
    .header--2fa .header__logo img { width: 120px; height: 26.2px; }
}

/* Phones, following the 320px designs. */
@media (max-width: 640px) {
    .twofa-content .welcome-header { font-size: 28px; margin-bottom: 24px; }
    .twofa-content .welcome-header-text,
    .twofa-content p { font-size: 16px; margin-bottom: 32px; }

    /* Method cards: one row you swipe through, the next card peeking in from the right. The row
       runs to the screen edges (negative margin) so the peek reaches the edge, while snapping
       keeps each card aligned with the text above. */
    .twofa-methods {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 16px;
        margin: 32px -24px;
        padding: 2px 24px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 24px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .twofa-methods::-webkit-scrollbar { display: none; }
    .twofa-method { flex: 0 0 232px; scroll-snap-align: start; }

    .twofa-btn { width: 100%; }

    /* Six boxes must fit a 320px screen (about 272px inside the padding): they share the row
       rather than keep a fixed width. */
    .twofa-code-boxes { gap: 8px; }
    .twofa-code-box { width: calc((100% - 40px) / 6) !important; max-width: 48px; height: 52px; font-size: 22px; }

    .twofa-footer { margin-top: 48px; }
}

/* --- Footer under the primary actions: thin rule, then link-style buttons ------------ */
.twofa-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    max-width: 664px;
    margin: 72px auto 0;
    padding-top: 24px;
    border-top: 1px solid #c9d2d6;
}

.twofa-footer__text {
    font-family: 'proxima-nova', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #5a6b73;
}

.twofa-footer__divider {
    color: #5a6b73;
    opacity: .4;
}

/* Footer buttons sit on one line, so drop the block spacing the link style adds. */
.twofa-footer .twofa-linkbtn { margin: 0; }

/* The code screens' footer links are plain text - no ">" chevron. The chooser's
   "Edit details" keeps the chevron, matching the other link-style buttons. */
.twofa-footer--plain .twofa-linkbtn { padding-left: 0; }
.twofa-footer--plain .twofa-linkbtn::before { content: none; }

/* Enable screen: more air between the text and the button (design: ~76px glyph to button). */
.twofa-content .welcome-header-text--enable { margin-bottom: 72px; }
@media (max-width: 640px) {
    .twofa-content .welcome-header-text--enable { margin-bottom: 48px; }
}

/* Enable screen: wider, darker hairline rule under the button (design: 744px, 0.5px #004c6a). */
.twofa-footer--enable {
    max-width: 744px;
    margin-top: 76px;
    border-top: .5px solid #004c6a;
}
@media (max-width: 640px) {
    .twofa-footer--enable { margin-top: 48px; }
}

/* Maintenance notice (Figma): the whole text 36px bold, centred, 44px lines, starting well
   below where the other screens put their title. */
/* Wide enough for "Na portalu potekajo redna vzdrževalna dela." on one line (about 714px). */
.twofa-content--maintenance { max-width: 840px; }

.twofa-content .welcome-header.twofa-maintenance {
    margin: 135px auto 0;
    line-height: 44px;
}
/* The login page's overrides.css hides <br> in .welcome-header on desktop; these lines must break. */
.twofa-content .welcome-header.twofa-maintenance br { display: inline; }
@media (max-width: 640px) {
    .twofa-content .welcome-header.twofa-maintenance { margin-top: 48px; line-height: 36px; }
}

/* --- Frequently asked questions ----------------------------------------------------- */
/* 936px of cards (Figma) plus the content's 24px side padding. */
.twofa-content--faq { max-width: 984px; text-align: left; }

/* "Back" points the other way. */
.twofa-back {
    display: inline-block;
    margin: 0 0 24px;
}

.twofa-back::before { content: "<"; }

.faq-title {
    font-family: 'proxima-nova', sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: var(--geni-modra);
    margin: 0 0 48px;
    text-align: left;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* Room under the last question before the page ends. */
    padding-bottom: 24px;
}

/* Question cards as in Figma: no border, a soft blue shadow all round, 70px high. */
.faq-item {
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 0 5px 3px rgba(0, 76, 106, 0.2);
}

.faq-item__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-sizing: border-box;
    min-height: 70px;
    padding: 12px 24px;
    cursor: pointer;
    list-style: none;
    font-family: 'proxima-nova', sans-serif;
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--geni-modra);
}

/* Hide the native disclosure triangle in both engines; we draw our own chevron. */
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::marker { content: ""; }

.faq-item__chevron {
    flex: 0 0 auto;
    width: 17px;
    height: 8px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='8' viewBox='0 0 17 8'%3E%3Cpath d='M16.5 .4L8.5 7.4.5.4' fill='none' stroke='%23004C6A'/%3E%3C/svg%3E") no-repeat center;
    transition: transform .2s ease;
}

.faq-item[open] .faq-item__chevron { transform: rotate(180deg); }

.faq-item__a {
    padding: 0 24px 24px;
    font-family: 'proxima-nova', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #5a6b73;
}

/* Answers may carry a link (e.g. the support address); the base theme does not style
   links inside body copy, so without this they read as plain text. */
.faq-item__a a {
    color: var(--geni-modra);
    text-decoration: underline;
}

.faq-item__a a:hover { text-decoration: none; }

@media (max-width: 768px) {
    .faq-item__q { min-height: 56px; padding: 12px 16px; font-size: 16px; line-height: 20px; }
    .faq-item__a { padding: 0 16px 20px; font-size: 16px; }
    .faq-title { font-size: 28px; }
}

/* --- "Add a phone number" step ------------------------------------------------------ */
.twofa-field {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    max-width: 510px;
    margin: 0 auto 40px;
    text-align: left;
}

.twofa-field__label {
    font-family: 'proxima-nova', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--geni-modra);
}

/* Country code + national number sit side by side, as two separate boxes. */
.twofa-phone {
    display: flex;
    align-items: stretch;
    gap: 6px;
    width: 100%;
}

.twofa-phone__prefix,
.twofa-phone__number {
    /* The base theme is content-box, so without this the padding and border are added to the
       widths below and the two fields no longer fit their row. */
    box-sizing: border-box;
    height: 48px;
    padding: 0 16px;
    font-family: 'proxima-nova', sans-serif;
    font-size: 18px;
    color: var(--body-color-text);
    border: 1px solid #b7c2c7;
    border-radius: 4px;
    background: #fff;
}

.twofa-phone__prefix {
    width: 72px;
    flex: 0 0 72px;
    padding: 0 6px;
    text-align: center;
    font-weight: 700;
    color: var(--geni-modra);
}

.twofa-phone__number {
    flex: 1 1 auto;
    min-width: 0;
    background: #f7f9fa;
}

.twofa-phone__prefix:focus,
.twofa-phone__number:focus { outline: none; border-color: #00A796; }

.twofa-field__input {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    font-family: 'proxima-nova', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: var(--body-color-text);
    border: 1px solid #b7c2c7;
    border-radius: 4px;
    background: #fff;
}

.twofa-field__input:focus { outline: none; border-color: #00A796; }

.twofa-field__hint {
    font-family: 'proxima-nova', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--geni-modra);
}

/* "+ Add a phone number" shown on the SMS card when no number is on file: styled like the
   number it stands in for. */
.twofa-method__add {
    color: inherit;
    font-weight: inherit;
}