/* ACCOUNT FOUNDATION 3B1-U — LANGKAH KUDA */
:root {
  --lk-account-espresso: #2b1a16;
  --lk-account-walnut: #4e342e;
  --lk-account-walnut-soft: #664138;
  --lk-account-burgundy: #7e2735;
  --lk-account-red: #b7352f;
  --lk-account-gold: #c49346;
  --lk-account-ivory: #fffaf0;
  --lk-account-paper: #fffdf8;
  --lk-account-sand: #eadfce;
  --lk-account-text: #39251f;
  --lk-account-muted: #76584c;
  --lk-account-line: rgba(73, 48, 40, .18);
  --lk-account-night: #1f252b;
  --lk-account-focus: rgba(126, 39, 53, .2);
}

:where(
  .lk-account,
  .lk-pref-page,
  .lk-history-page,
  .lk-following-page,
  .lk-message-page,
  .lk-writer-admin,
  .lk-profile-editor,
  .lk-premium-page,
  .lk-checkout-page,
  .login-shell,
  .kotak-form
) {
  color: var(--lk-account-text);
  font-size: clamp(.9375rem, .9rem + .12vw, 1rem);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

:where(
  .lk-account,
  .lk-pref-page,
  .lk-history-page,
  .lk-following-page,
  .lk-message-page,
  .lk-writer-admin,
  .lk-profile-editor,
  .lk-premium-page,
  .lk-checkout-page,
  .login-shell,
  .kotak-form
) :where(button, .button, [class*="button"], input, select, textarea) {
  min-height: 44px;
}

:where(
  .lk-account,
  .lk-pref-page,
  .lk-history-page,
  .lk-following-page,
  .lk-message-page,
  .lk-writer-admin,
  .lk-profile-editor,
  .lk-premium-page,
  .lk-checkout-page,
  .login-shell,
  .kotak-form
) :focus-visible {
  outline: 3px solid var(--lk-account-focus);
  outline-offset: 3px;
}

@media (max-width: 720px) {
  :where(
    .lk-account, .lk-pref-page, .lk-history-page, .lk-following-page,
    .lk-message-page, .lk-writer-admin, .lk-profile-editor,
    .lk-premium-page, .lk-checkout-page, .login-shell, .kotak-form
  ) {
    font-size: clamp(.875rem, .84rem + .18vw, .9375rem);
  }
}

@media (max-width: 520px) {
  :where(
    .lk-account, .lk-pref-page, .lk-history-page, .lk-following-page,
    .lk-message-page, .lk-writer-admin, .lk-profile-editor,
    .lk-premium-page, .lk-checkout-page, .login-shell, .kotak-form
  ) :where(button, .button, [class*="button"]) {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  :where(
    .lk-account, .lk-pref-page, .lk-history-page, .lk-following-page,
    .lk-message-page, .lk-writer-admin, .lk-profile-editor,
    .lk-premium-page, .lk-checkout-page, .login-shell, .kotak-form
  ) *,
  :where(
    .lk-account, .lk-pref-page, .lk-history-page, .lk-following-page,
    .lk-message-page, .lk-writer-admin, .lk-profile-editor,
    .lk-premium-page, .lk-checkout-page, .login-shell, .kotak-form
  ) *::before,
  :where(
    .lk-account, .lk-pref-page, .lk-history-page, .lk-following-page,
    .lk-message-page, .lk-writer-admin, .lk-profile-editor,
    .lk-premium-page, .lk-checkout-page, .login-shell, .kotak-form
  ) *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* =========================================================
   3X-B5-A4-B2
   AUTH UX POLISH
   Scoped so other account pages remain untouched.
   ========================================================= */

.lk-auth-shell {
    margin:
        clamp(24px, 4vw, 48px)
        auto;
}


.lk-auth-brand {
    padding-top: 4px;
}


.lk-auth-brand-link {
    margin-bottom: 24px;
}


.lk-auth-brand h1 {
    font-size:
        clamp(
            1.95rem,
            4vw,
            3.15rem
        );
}


.lk-auth-brand > p {
    margin-bottom: 0;
}


.lk-auth-role-switch {
    margin-top: 20px;
}


.lk-auth-role {
    appearance: none;

    width: 100%;

    text-align: left;

    font: inherit;

    cursor: pointer;

    transition:
        transform
        var(--lk-transition-fast),
        border-color
        var(--lk-transition-fast),
        background
        var(--lk-transition-fast),
        box-shadow
        var(--lk-transition-fast);
}


.lk-auth-role:hover {
    transform:
        translateY(-1px);

    border-color:
        color-mix(
            in srgb,
            var(--lk-brand-burgundy)
            28%,
            var(--lk-border)
        );
}


.lk-auth-role.is-active {
    color:
        var(--lk-ink);

    border-color:
        color-mix(
            in srgb,
            var(--lk-brand-burgundy)
            46%,
            var(--lk-border)
        );

    background:
        color-mix(
            in srgb,
            var(--lk-brand-burgundy)
            5%,
            var(--lk-surface)
        );

    box-shadow:
        inset 0 3px 0
        var(--lk-brand-burgundy);
}


.lk-auth-card {
    padding:
        clamp(
            22px,
            3vw,
            32px
        );
}


.lk-auth-card-head h2 {
    margin-bottom: 18px;
}


.lk-auth-alert {
    margin-bottom: 16px;

    padding:
        12px 14px;

    border-radius:
        var(--lk-radius-sm);
}


.lk-auth-alert strong {
    font-size: .94rem;
}


.lk-auth-alert p {
    margin-top: 5px;

    font-size: .89rem;

    line-height: 1.5;
}


.lk-auth-alert small {
    margin-top: 6px;

    font-size: .76rem;

    line-height: 1.48;
}


.lk-auth-form {
    gap: 16px;
}


.lk-auth-field {
    gap: 7px;
}


.lk-auth-field input {
    min-height: 46px;
}


.lk-auth-submit {
    min-height: 46px;

    margin-top: 0;
}


.lk-auth-foot {
    margin-top: 20px;

    padding-top: 15px;
}


@media (
    max-width: 820px
) {
    .lk-auth-brand {
        padding-bottom: 0;
    }
}


@media (
    max-width: 560px
) {
    .lk-auth-shell {
        margin-top: 14px;
    }

    .lk-auth-brand-link {
        margin-bottom: 18px;
    }

    .lk-auth-card {
        padding:
            20px 17px;
    }

    .lk-auth-alert {
        padding:
            11px 12px;
    }

    .lk-auth-role {
        min-height: 58px;
    }
}


/* =========================================================
   3X-B5-A4-B2-C
   FINAL AUTH COMPOSITION POLISH
   ========================================================= */

.lk-auth-brand-link {
    margin-bottom: 18px;
}


.lk-auth-logo {
    max-height: 74px;
}


.lk-auth-role-switch {
    margin-top: 10px;

    transform:
        translateY(-24px);
}


.lk-auth-card-head
[data-auth-role-kicker] {
    display: inline-block;

    min-height: 1em;

    color:
        var(--lk-brand-gold);

    transition:
        opacity
        var(--lk-transition-fast);
}


.lk-auth-card {
    align-self: center;
}


@media (
    max-width: 820px
) {
    .lk-auth-role-switch {
        transform: none;

        margin-top: 6px;
    }

    .lk-auth-logo {
        max-height: 68px;
    }
}


@media (
    max-width: 560px
) {
    .lk-auth-logo {
        max-height: 60px;
    }
}