/*
    Login redesign (designs 1c desktop / 1e mobile).
    Agency theming is automatic: every colour below resolves through the
    --eC-primary* variables that shared_elements/main/colors.html sets per subdomain.

    Scoping:
      .ec-login  - the split-screen page chrome, used only by templates/login/*.
      .ec-auth   - the form internals in shared_elements/auth_form/inner_form.html,
                   which is ALSO embedded in publicproperty/visitproperty/anonymous_users.html.
                   Keep .ec-auth rules self-contained so that page stays presentable.
*/

/* ---------- page chrome (1c) ---------- */

/*
    The login page has no navbar or footer, so the card is centred against the full
    viewport height. margin:auto on the card (rather than only align-items:center)
    keeps the top reachable when the viewport is shorter than the card.
*/
.ec-login {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 3vh 0;
    box-sizing: border-box;
}

.ec-login__card {
    margin: auto;
    width: 100%;
    max-width: 1100px;
    display: grid;
    grid-template-columns: 460px 1fr;
    min-height: 640px;
    background: var(--ks-white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 2px 3px 5px rgba(var(--eC-primary-darker-rgb), 0.1);
}

/* Left brand panel */
.ec-login__brand {
    background: linear-gradient(160deg, var(--eC-primary), var(--eC-primary-darker));
    padding: 56px 48px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Text block centred vertically; the foot line stays pinned to the bottom */
.ec-login__brand-body {
    margin-block: auto;
}

/* Agency banner, above "Innskráning", spanning the full width of the form column */
.ec-login__panel-logo {
    margin: 0 0 32px;
}

.ec-login__panel-logo a {
    display: block;
}

.ec-login__panel-logo img {
    display: block;
    width: 100%;
    height: auto;
    /* tall/square logos would otherwise dominate the card; wide banners hit the width first */
    max-height: 120px;
    object-fit: contain;
    object-position: left center;
}

/* Text fallback when an agency has no logobanner uploaded */
.ec-login__brand-name {
    display: block;
    font: 400 26px "Work Sans", sans-serif;
    color: var(--eC-primary-darker);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

.ec-login__headline {
    font: 300 34px/1.25 "Work Sans", sans-serif;
    color: #fff;
    margin: 0 0 28px;
}

.ec-login__steps {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.ec-login__step {
    display: flex;
    gap: 14px;
    align-items: baseline;
}

.ec-login__step-num {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(253, 253, 253, .18);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex: none;
}

.ec-login__step-text {
    color: rgba(253, 253, 253, .9);
    font-size: 15px;
}

.ec-login__brand-foot {
    margin: 0;
    font-size: 12px;
    color: rgba(253, 253, 253, .6);
}

/* "Kerfið á bak við þjónustuna er [e]casa" note above the Auðkenni line */
.ec-login__powered-by {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(253, 253, 253, .85);
}

.ec-login__powered-by a {
    color: #fff;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.ec-login__powered-by a:hover {
    color: rgba(253, 253, 253, .8);
}

/* Right form panel */
.ec-login__panel {
    background: var(--ks-white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px;
}

.ec-login__panel-inner {
    width: 100%;
    max-width: 380px;
}

.ec-login__title {
    font: 300 32px "Work Sans", sans-serif;
    color: var(--ks-black-2);
    margin: 0 0 8px;
}

.ec-login__sub {
    margin: 0 0 28px;
    font-size: 14px;
    color: var(--ks-grey);
}

.ec-login__help {
    margin: 18px 0 0;
    text-align: center;
    font-size: 13px;
}

.ec-login__help a {
    color: var(--eC-primary);
    text-decoration: none;
}

.ec-login__help a:hover {
    color: var(--eC-primary-darker);
    text-decoration: underline;
}

/* ---------- form internals (shared) ---------- */

/*
   Segmented tab control, replacing the underline tabs in main.css.
   NOTE: .tab-selected is required by static/js/main/auth_form.js - it is the class
   the script adds and removes to track the active tab (see auth_form.js:189-193).
   Restyle it, never rename it.
*/
.ec-auth__tabs {
    display: flex;
    background: #f0f2f5;
    border-radius: 8px;
    padding: 4px;
    gap: 4px;
    margin-bottom: 24px;
    border: 0;
}

.ec-auth__tabs .login-switch-btn {
    flex: 1;
    border: none;
    border-bottom: none;
    border-radius: 6px;
    background: transparent;
    color: var(--ks-grey);
    font: 400 14px "Roboto", sans-serif;
    padding: 11px 0;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.ec-auth__tabs .login-switch-btn p {
    margin: 0;
}

.ec-auth__tabs .login-switch-btn:disabled {
    cursor: default;
    opacity: .6;
}

.ec-auth__tabs .login-switch-btn.tab-selected {
    background: var(--ks-white);
    color: var(--eC-primary-darker);
    font-weight: 500;
    border-bottom: none;
    box-shadow: 0 1px 4px rgba(var(--eC-primary-darker-rgb), .18);
}

.ec-auth__tab-icon {
    margin-right: 8px;
}

/* Field */
.ec-auth__label {
    display: block;
    font: 500 13px "Roboto", sans-serif;
    color: var(--ks-black-2);
    margin-bottom: 8px;
}

.ec-auth .login-widget {
    border: 1px solid var(--ks-lightgrey);
    border-radius: 6px;
    height: 54px;
    display: flex;
    background: var(--ks-white);
    transition: border-color .15s ease;
}

.ec-auth .login-widget:focus-within {
    border-color: var(--eC-primary);
}

.ec-auth .login-widget input {
    width: 100%;
    height: 100%;
    border: none;
    background: transparent;
    text-align: center;
    font: 400 24px "Roboto", sans-serif;
    letter-spacing: 2px;
    color: #505253;
    outline: none;
    border-radius: 6px;
}

.ec-auth .login-widget input.is-invalid {
    color: var(--ks-danger);
}

.ec-auth__helper {
    margin: 10px 0 0;
    font-size: 12.5px;
    color: var(--ks-grey);
}

.ec-auth__submit {
    margin-top: 24px;
}

/* ---------- waiting state ---------- */

.ec-auth__waiting {
    text-align: center;
    padding: 8px 0 0;
}

.ec-auth__spinner {
    width: 56px;
    height: 56px;
    margin: 0 auto 20px;
    border-radius: 50%;
    border: 4px solid rgba(var(--eC-primary-rgb), .2);
    border-top-color: var(--eC-primary);
    animation: ec-login-spin 1s linear infinite;
}

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

.ec-auth__waiting-title {
    font: 300 24px "Work Sans", sans-serif;
    color: var(--ks-black-2);
    margin: 0 0 6px;
}

.ec-auth__waiting-body {
    font-size: 14px;
    color: var(--ks-grey);
    margin: 0 0 26px;
}

.ec-auth__code {
    display: inline-block;
    background: rgba(var(--eC-primary-rgb), .1);
    border-radius: 10px;
    padding: 14px 34px;
    margin-bottom: 26px;
    font: 300 44px "Work Sans", sans-serif;
    letter-spacing: 8px;
    color: var(--eC-primary-darker);
}

/* Stays out of the layout until the poll response actually carries a code */
.ec-auth__code:empty {
    display: none;
}

/* Server-driven status line. Kept because it carries real Auðkenni status and error
   text; the design's instructional copy above it is static. */
.ec-auth__status {
    display: block;
    font-size: 12.5px;
    color: var(--ks-grey);
    margin: 0 0 20px;
}

.ec-auth__cancel-row {
    margin-top: 4px;
}

.ec-auth__cancel {
    padding: 12px 34px;
    border: 1px solid var(--ks-lightgrey);
    border-radius: 6px;
    background: transparent;
    color: var(--eC-text-primary);
    font: 400 14px "Roboto", sans-serif;
    cursor: pointer;
}

.ec-auth__cancel:hover {
    border-color: var(--ks-grey);
}

/* ---------- responsive (1e, stacks under 768px) ---------- */

@media (max-width: 991.98px) {
    .ec-login__card {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .ec-login__brand {
        padding: 36px 32px;
        gap: 28px;
    }

    .ec-login__headline {
        font-size: 28px;
        margin-bottom: 22px;
    }

    .ec-login__panel {
        padding: 40px 32px;
    }
}

@media (max-width: 767.98px) {
    /* Break out of the bootstrap .container gutters in main.html so the mobile
       layout runs edge to edge. Uses the viewport rather than a fixed gutter
       value so it holds regardless of what padding the ancestors carry. */
    .ec-login {
        padding: 0;
        width: 100vw;
        max-width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }

    .ec-login__card {
        border-radius: 0;
        box-shadow: none;
        background: var(--ks-background-primary);
        /* full viewport: there is no navbar or footer to subtract any more */
        min-height: 100vh;
        margin: 0;
        grid-template-rows: 1fr;
    }

    /* Brand panel is hidden; the banner stays at the top of the form panel */
    .ec-login__brand {
        display: none;
    }

    .ec-login__panel-logo {
        margin-bottom: 24px;
    }

    .ec-login__panel-logo img {
        max-height: 80px;
    }

    .ec-login__panel-logo .ec-login__brand-name {
        font-size: 20px;
    }

    .ec-login__panel {
        background: var(--ks-background-primary);
        align-items: stretch;
        padding: 36px 20px 0;
    }

    .ec-login__panel-inner {
        max-width: none;
        display: flex;
        flex-direction: column;
        flex: 1;
    }

    .ec-login__title {
        font-size: 30px;
    }

    .ec-auth__tabs {
        background: #eceef1;
        border-radius: 10px;
        margin-bottom: 26px;
    }

    /* >= 44px hit targets */
    .ec-auth__tabs .login-switch-btn {
        border-radius: 8px;
        padding: 13px 0;
        min-height: 44px;
    }

    .ec-auth .login-widget {
        height: 56px;
        border-radius: 8px;
    }

    .ec-auth .login-widget input {
        font-size: 26px;
        letter-spacing: 3px;
        border-radius: 8px;
    }

    .ec-auth__helper {
        font-size: 13px;
        margin-top: 12px;
    }

    /* Submit pinned to the bottom of the viewport */
    .ec-login .ec-auth__submit {
        position: sticky;
        bottom: 0;
        margin-top: auto;
        padding: 16px 0 28px;
        background: linear-gradient(rgba(245, 245, 245, 0), var(--ks-background-primary) 40%);
    }

    .ec-login .ec-auth__submit .button-base {
        padding: 17px;
        font-size: 17px;
        border-radius: 8px;
    }

    .ec-auth__code {
        font-size: 36px;
        letter-spacing: 6px;
        padding: 12px 24px;
    }
}