/*
 * Portable "centered card" auth layout — built on stock Bootstrap 3/4/5
 * utility + component classes (d-flex, form-control, btn-primary...).
 * Everything Bootstrap can already do is left to Bootstrap, so on a
 * site with a different theme this still renders as a clean, correct
 * Bootstrap card — only the two variables below need to change to
 * re-brand it.
 */
.dgk-auth {
    --dgk-accent: #ff0080;
    --dgk-accent-dark: #cc0066;
    background: #f0f0f1;
    min-height: 100vh;
    /* 100vh on mobile browsers is the *largest* possible viewport and
       doesn't shrink when the on-screen keyboard opens, so a keyboard
       could cover content sized against it. 100dvh tracks the viewport
       that's actually visible; browsers that don't support it just keep
       the 100vh above. */
    min-height: 100dvh;
}

.dgk-auth__wrap {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    /* Plain "center" can push part of a tall step (or a short one, once
       the keyboard eats half the screen) past the edge of the visible
       area with no way to scroll to it — flexbox centers overflow
       symmetrically off both sides instead of keeping it reachable.
       "safe center" keeps the centering when everything fits, and
       automatically falls back to top-aligned + scrollable the moment
       it wouldn't. Declared after the plain value so browsers that
       don't understand "safe" simply keep plain centering. */
    align-items: center;
    align-items: safe center;
    justify-content: center;
    padding: 2rem 1rem;
}

.dgk-auth__card {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    border-radius: 12px;
    box-shadow: 0 1px 20px rgba(0, 0, 0, .08);
}

.dgk-auth__topbar {
    text-align: center;
    padding: 2rem 2.5rem 0;
}

.dgk-auth__topbar img {
    max-height: 34px;
}

.dgk-auth__body {
    padding: 1.5rem 2.5rem 2.5rem;
}

.dgk-auth__title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 .25rem;
}

.dgk-auth .form-control:focus {
    border-color: var(--dgk-accent);
    box-shadow: 0 0 0 .2rem rgba(0, 0, 0, .06);
}

.dgk-auth .btn-primary {
    background-color: var(--dgk-accent);
    border-color: var(--dgk-accent);
}

.dgk-auth .btn-primary:hover,
.dgk-auth .btn-primary:focus {
    background-color: var(--dgk-accent-dark);
    border-color: var(--dgk-accent-dark);
}

/* Hooks used only by the login-register Livewire partials (not part
   of the portable card itself — safe to drop on other sites). The back
   button is positioned relative to .dgk-auth__card (not .auth-widget)
   so it sits in the topbar row next to the logo, even though it's
   rendered inside the Livewire component further down the markup. */
.auth-widget__back {
    position: absolute;
    top: 2rem;
    inset-inline-start: 2.5rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    color: #495057;
    background: #f1f1f2;
    font-size: 1.1rem;
    text-decoration: none;
    border: 0;
}

.auth-widget__back:hover,
.auth-widget__back:focus {
    color: #212529;
    background: #e6e6e7;
}

.auth-widget__back i {
    margin: 0;
}

.auth-widget .form-control {
    font-size: 1rem;
    /* prevents iOS Safari from zooming in on focus (global .form-control is 13px) */
    min-height: 44px;
    border-radius: 8px;
}

.auth-widget .form-label {
    font-weight: 600;
}

.auth-widget .btn:not(.btn-link) {
    border-radius: 8px;
    font-weight: 600;
    min-height: 48px;
}

.auth-widget .auth-form__desc {
    color: #6c757d;
    margin-bottom: 1.25rem;
}

.auth-widget .auth-form__desc--success {
    color: #198754;
}

.auth-widget .auth-form__otp-input {
    letter-spacing: .5em;
    text-align: center;
}

.auth-widget .auth-method-toggle {
    text-align: end;
    margin-bottom: 1.25rem;
}

.auth-widget .auth-method-toggle__link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: none;
    border: 0;
    padding: 0;
    color: #212529;
    font-weight: 600;
    font-size: .9rem;
}

.auth-widget .auth-method-toggle__link:hover,
.auth-widget .auth-method-toggle__link:focus {
    color: var(--dgk-accent-dark);
}

.auth-widget .auth-method-toggle__link i {
    font-size: .7rem;
}

.auth-widget .auth-form__resend {
    text-align: center;
    margin-bottom: 1rem;
}

.auth-widget .auth-form__resend .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    flex-wrap: wrap;
    border: 0;
    background: transparent;
    padding: 0;
    min-height: auto;
    color: #6c757d;
    font-weight: 400;
}

.auth-widget .auth-form__resend .btn:not(:disabled) {
    color: var(--dgk-accent-dark);
    font-weight: 600;
}

/* Placed last on purpose: every rule above this point is unconditional
   (no media query of its own), so this block has to come after all of
   them in source order — otherwise the later unconditional rule would
   win the cascade on small screens too and silently undo the override. */
@media (max-width: 575px) {
    /* Full-bleed on phones: no page backdrop and no card chrome, just a
       plain white screen — the "card" look only makes sense once there's
       room around it. */
    .dgk-auth {
        background: #fff;
    }

    .dgk-auth__wrap {
        padding: 0;
    }

    .dgk-auth__card {
        max-width: 100%;
        margin: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .dgk-auth__topbar {
        padding: 1rem 1.25rem 0;
    }

    .dgk-auth__topbar img {
        max-height: 44px;
    }

    .dgk-auth__body {
        padding: 1rem 1.25rem 1.5rem;
    }

    .auth-widget__back {
        top: 1rem;
        inset-inline-start: 1.25rem;
    }
}