/* Refined look for the two sign-in screens (tbLoginId / tbLoginPassword). Loaded after each page's own
   gold-theme <style>, so it only restyles - markup, ids and behaviour are untouched. Delete the <link>
   in either page to get the previous look back. */

:root {
    --lg-gold-1: #22a58f;
    --lg-gold-2: #0f6b63;
    --lg-ink: #16302d;
    --lg-line: #d3e5e1;
}

body { background: #eef6f4; -webkit-font-smoothing: antialiased; }

/* ---------- panel ---------- */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 30px #fff inset !important; }
.login-panel {
    background: linear-gradient(180deg, #fbfefd 0%, #eaf4f1 100%) !important;
    box-shadow: -14px 0 40px rgba(11, 63, 59, .16) !important;
    justify-content: center;
}
.login-panel .panel-inner { padding: 44px 44px 28px !important; max-width: 460px; width: 100%; margin: 0 auto; flex: 0 0 auto !important; }
.login-panel .brand-logo { height: 58px; filter: drop-shadow(0 4px 10px rgba(15, 107, 99, .22)); }

/* ---------- heading ---------- */
.welcome { margin: 38px 0 26px !important; min-height: 0 !important; }
.welcome .t { font-size: 26px !important; font-weight: 800 !important; color: var(--lg-ink) !important; letter-spacing: -.2px; }
.welcome .s { margin-top: 6px; font-size: 14px !important; color: #5f7a76 !important; }

/* ---------- outlined text field (Material) ---------- */
.login-panel .mdc-text-field {
    height: 58px; border-radius: 14px !important; background: #fff !important; box-shadow: 0 1px 2px rgba(11, 63, 59, .06);
    transition: box-shadow .15s;
}
.login-panel .mdc-text-field .mdc-notched-outline__leading { border-radius: 14px 0 0 14px !important; width: 14px !important; }
.login-panel .mdc-text-field .mdc-notched-outline__trailing { border-radius: 0 14px 14px 0 !important; }
.login-panel .mdc-text-field .mdc-notched-outline__leading,
.login-panel .mdc-text-field .mdc-notched-outline__notch,
.login-panel .mdc-text-field .mdc-notched-outline__trailing { border-color: var(--lg-line) !important; border-width: 1.5px !important; }
.login-panel .mdc-text-field:hover .mdc-notched-outline__leading,
.login-panel .mdc-text-field:hover .mdc-notched-outline__notch,
.login-panel .mdc-text-field:hover .mdc-notched-outline__trailing { border-color: #9fcfc7 !important; }
.login-panel .mdc-text-field--focused { box-shadow: 0 0 0 4px rgba(34, 165, 143, .20); }
.login-panel .mdc-text-field--focused .mdc-notched-outline__leading,
.login-panel .mdc-text-field--focused .mdc-notched-outline__notch,
.login-panel .mdc-text-field--focused .mdc-notched-outline__trailing { border-color: var(--lg-gold-2) !important; }
.login-panel .mdc-text-field__input { font-size: 16px !important; color: var(--lg-ink); padding-left: 16px !important; }
.login-panel .mdc-floating-label { color: #6f8985 !important; padding-left: 2px; }

/* ---------- primary action: full-width button, links underneath ---------- */
.login-panel .login-actions { display: flex !important; flex-direction: column-reverse; gap: 14px; margin: 22px 0 0 !important; }
.login-panel .login-actions > [class*="col-"] { float: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
.login-panel .login-actions .pull-right,
.login-panel .login-actions .pull-left { float: none !important; }
.login-panel .btn-gold {
    display: flex !important; align-items: center; justify-content: center; width: 100% !important; height: 50px !important;
    border-radius: 14px !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: .2px;
    box-shadow: 0 10px 22px rgba(15, 107, 99, .32) !important; transition: transform .1s, box-shadow .15s, filter .15s;
}
.login-panel .btn-gold:hover { filter: brightness(1.05); box-shadow: 0 12px 26px rgba(15, 107, 99, .38) !important; }
.login-panel .btn-gold:active { transform: translateY(1px); box-shadow: 0 5px 12px rgba(15, 107, 99, .30) !important; }
.login-panel .login-actions .link-gold { display: inline-flex; margin: 0 auto; float: none !important; }
.login-panel .login-actions br { display: none; }
.login-panel .login-actions > div:first-child { text-align: center; }
.login-panel .help-link { font-size: 13px !important; font-weight: 600; }

/* ---------- identity card (password step) ---------- */
.id-card {
    background: #fff !important; border: 1px solid var(--lg-line) !important; border-radius: 16px !important;
    padding: 14px 16px !important; margin: 26px 0 20px !important; box-shadow: 0 4px 14px rgba(11, 63, 59, .08);
}
.id-card .row { display: flex; align-items: center; }
.id-card [class*="col-xs-"] { float: none; padding-top: 0 !important; }
.id-card .col-xs-3 { width: 76px; flex: none; }
.id-card .col-xs-9 { flex: 1; min-width: 0; }
.id-card .greet { font-size: 12.5px !important; color: #6f8985 !important; margin: 0 0 2px !important; }
.id-card .email { font-size: 15px; font-weight: 700 !important; color: var(--lg-ink) !important; word-break: break-all; }
.id-card img { width: 56px !important; height: 56px !important; object-fit: cover; border: 3px solid #cfe6e1 !important; box-shadow: 0 2px 8px rgba(11, 63, 59, .18); }

/* ---------- remember me, secondary button, language ---------- */
.login-panel .mdc-form-field { font-size: 13.5px; color: #4f6a66; }
.login-panel #btnSignInDifferent,
.login-panel .btn-outline-gold {
    height: 46px !important; border-radius: 14px !important; font-weight: 600; border-width: 1.5px !important; background: #fff !important;
}
.login-panel .btn-outline-gold:hover { background: #eaf6f3 !important; }
.login-panel #txtLang {
    height: 44px; border: 1.5px solid var(--lg-line) !important; border-radius: 12px !important; background: #fff !important;
    color: #4f6a66; font-size: 13.5px; box-shadow: none !important;
}

/* ---------- hero ---------- */
.login-hero .hero-caption .kicker { font-size: 14px; letter-spacing: .26em; }
.login-hero:after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 20% 100%, rgba(0, 0, 0, .35), transparent 60%); pointer-events: none; }

/* ---------- small screens ---------- */
@media (max-width: 767px) {
    .login-panel { box-shadow: none !important; justify-content: flex-start; }
    .login-panel .panel-inner { padding: 96px 22px 24px !important; max-width: none; }
    .welcome { margin: 26px 0 20px !important; }
    .welcome .t { font-size: 22px !important; }
}

/* keep the Remember me / Login As / Demo row inside the panel edges */
.login-panel .panel-inner > .row { margin-left: 0; margin-right: 0; }
.login-panel .panel-inner > .row > [class*="col-xs-"] { padding-left: 0; padding-right: 0; }