/* Vishwakarma Travels admin sign-in */
* { box-sizing: border-box; }

body.login-page {
    position: relative;
    display: flex;
    min-height: 100vh;
    height: auto;
    align-items: center;
    justify-content: center;
    overflow-x: hidden;
    margin: 0;
    padding: 40px 20px;
    color: #182132;
    background:
        radial-gradient(circle at 12% 12%,rgba(215,25,45,.11),transparent 27%),
        radial-gradient(circle at 88% 84%,rgba(13,33,63,.13),transparent 31%),
        #f4f7fb;
    font-family: Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    -webkit-font-smoothing: antialiased;
}

.travel-bg-animation { position: fixed; z-index: 0; overflow: hidden; inset: 0; pointer-events: none; }
.bg-watermark { position: absolute; top: 50%; left: 50%; width: min(62vw,760px); opacity: .025; transform: translate(-50%,-50%); }
.bg-watermark img { width: 100%; height: auto; filter: grayscale(1); }
.cloud, .airplane-path, .map-pin { display: none; }

.login-box { position: relative; z-index: 2; width: min(100%,430px); }
.login-logo { margin-bottom: 22px; text-align: center; }
.login-logo a { display: inline-flex; align-items: center; gap: 12px; color: var(--brand-navy); text-decoration: none; }
.login-logo__mark { display: block; overflow: hidden; width: 54px; height: 54px; border: 1px solid #e0e6ef; border-radius: 13px; background: #fff; box-shadow: 0 8px 24px rgba(13,33,63,.08); }
.login-logo__mark img { width: 100%; height: 100%; object-fit: cover; }
.login-logo__copy { display: flex; align-items: flex-start; flex-direction: column; line-height: 1.05; }
.login-logo__copy b { color: var(--brand-navy); font-size: 1.18rem; font-weight: 800; letter-spacing: -.02em; }
.login-logo__copy small { margin-top: 6px; color: var(--brand-red); font-size: .65rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }

.login-box .card { overflow: hidden; border: 1px solid #e0e6ef; border-radius: 22px; color: #182132; background: #fff; box-shadow: 0 26px 70px rgba(13,33,63,.14); }
.login-box .card-header { padding: 32px 34px 8px; border: 0; background: #fff; text-align: left !important; }
.login-badge { display: inline-flex; min-height: 30px; align-items: center; gap: 7px; margin-bottom: 14px; padding: 0 10px; border-radius: 999px; color: var(--brand-red); background: #fff0f2; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.login-box .card-header h1 { margin: 0 0 8px; color: var(--brand-navy); font-size: 1.8rem; font-weight: 800; letter-spacing: -.04em; }
.login-box-msg { margin: 0; padding: 0; color: #697386; font-size: .9rem; line-height: 1.55; text-align: left; }
.login-box .card-body { padding: 24px 34px 30px; }

.login-box .form-group { margin-bottom: 18px !important; }
.login-box .form-group > label { display: block; margin-bottom: 7px; color: var(--brand-navy); font-size: .76rem; font-weight: 800; }
.login-box .input-group { position: relative; margin: 0; }
.login-box .form-control { height: 50px; padding: 0 46px 0 14px; border: 1px solid #dce2eb; border-radius: 11px !important; color: #182132; background: #f8fafc; box-shadow: none !important; font-size: .91rem; transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease; }
.login-box .form-control::placeholder { color: #9aa4b4; }
.login-box .form-control:focus { border-color: var(--brand-red); background: #fff; box-shadow: 0 0 0 3px rgba(215,25,45,.11) !important; outline: 0; }
.login-box .input-group-append { position: absolute; z-index: 4; top: 50%; right: 5px; transform: translateY(-50%); }
.login-box .input-group-text { padding: 9px 10px; border: 0; color: #7d8796; background: transparent; cursor: pointer; transition: color 160ms ease; }
.login-box .input-group-text:hover { color: var(--brand-red); }

.is-invalid { border-color: #dc3545 !important; }
.invalid-feedback { display: block; margin-top: 6px; color: #dc3545; font-size: .75rem; }
.login-alert { margin-bottom: 18px; padding: 11px 13px; border: 1px solid #f3c2c8; border-radius: 10px; color: #a70f20; background: #fff2f4; font-size: .8rem; font-weight: 700; }

.icheck-primary input[type="checkbox"] { position: absolute; opacity: 0; }
.icheck-primary label { position: relative; margin: 0; padding-left: 27px; color: #566174; cursor: pointer; font-size: .79rem; font-weight: 700; user-select: none; }
.icheck-primary label::before { position: absolute; top: 50%; left: 0; width: 18px; height: 18px; border: 1px solid #ccd4df; border-radius: 5px; background: #fff; content: ""; transform: translateY(-50%); transition: border-color 160ms ease, background-color 160ms ease; }
.icheck-primary input:checked + label::before { border-color: var(--brand-red); background: var(--brand-red); }
.icheck-primary input:checked + label::after { position: absolute; top: 50%; left: 4px; color: #fff; content: "\f00c"; font-family: "Font Awesome 5 Free"; font-size: .62rem; font-weight: 900; transform: translateY(-50%); }

.login-actions { margin-top: 23px !important; }
.login-box .btn-primary { display: inline-flex; width: 100%; height: 48px; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 11px; color: #fff; background: var(--brand-red); box-shadow: 0 10px 25px rgba(215,25,45,.23); font-size: .88rem; font-weight: 800; transition: transform 150ms cubic-bezier(.23,1,.32,1), background-color 180ms ease, box-shadow 180ms ease; }
.login-box .btn-primary:hover, .login-box .btn-primary:focus { color: #fff; background: #ad1020; box-shadow: 0 14px 30px rgba(215,25,45,.3); }
.login-box .btn-primary:active { transform: scale(.97); }

.login-footer-links { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 25px; padding-top: 20px; border-top: 1px solid #edf0f4; }
.login-footer-links a, .login-footer-links span { color: #697386; font-size: .74rem; font-weight: 700; }
.login-footer-links a { transition: color 160ms ease; }
.login-footer-links a:hover { color: var(--brand-red); }
.login-footer-links i { margin-right: 5px; color: var(--brand-red); }

@media (max-width:575.98px) {
    body.login-page { align-items: flex-start; padding: 28px 14px; }
    .login-logo { margin-bottom: 17px; }
    .login-box .card-header { padding: 27px 22px 8px; }
    .login-box .card-body { padding: 21px 22px 25px; }
    .login-actions > div + div { margin-top: 14px; }
    .login-footer-links { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion:reduce) {
    .login-box .form-control, .login-box .btn-primary, .login-box .input-group-text, .login-footer-links a { transition-duration: .01ms; }
}
