@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@700&display=swap');

:root { --login-ink: #2d0b49; --login-muted: #72657d; --login-paper: #fffbff; --login-lime: #eadcff; --login-line: #e7ddea; --login-purple: #4E147E; }
* { box-sizing: border-box; }
body { min-height: 100vh !important; margin: 0 !important; font-family: 'DM Sans', sans-serif !important; color: var(--login-ink) !important; background: #240b3a !important; }

.login_header { position: fixed !important; top: 0 !important; left: 0 !important; z-index: 5 !important; width: 100% !important; height: 88px !important; padding: 0 5vw !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; background: transparent !important; box-shadow: none !important; }
.login_header img { width: 44px !important; height: 44px !important; max-height: 44px !important; padding: 5px !important; object-fit: contain !important; background: var(--login-paper) !important; border-radius: 14px !important; box-shadow: 0 8px 22px rgba(0,0,0,.16) !important; }
.login-brand-fallback { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 14px; background: var(--login-lime); color: var(--login-ink); font-size: .85rem; font-weight: 700; letter-spacing: -.06em; }
.login_header h3 { margin: 0 0 0 12px !important; font-size: 1.2rem !important; font-weight: 700 !important; letter-spacing: -.04em !important; color: #fff !important; }

.login_section { position: relative !important; display: flex !important; align-items: center !important; min-height: 100vh !important; padding: 112px 24px 48px !important; overflow: hidden !important; background: radial-gradient(circle at 12% 18%,rgba(197,143,236,.28),transparent 23rem),radial-gradient(circle at 94% 88%,rgba(78,20,126,.68),transparent 27rem),#240b3a !important; }
.login_section::before,.login_section::after { position: absolute; content: ''; border: 1px solid rgba(234,220,255,.20); border-radius: 50%; pointer-events: none; }
.login_section::before { width: 34rem; height: 34rem; right: -14rem; top: -14rem; }.login_section::after { width: 22rem; height: 22rem; left: -11rem; bottom: -11rem; }
.login-shell { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1fr) 470px; gap: clamp(48px,9vw,160px); align-items: center; width: min(100%,1400px); margin: 0 auto; }.login-hero h1 { margin: 0; color: #fff; font-family: 'Playfair Display',serif; font-size: clamp(2.8rem,4.2vw,5rem); font-weight: 700; line-height: .98; letter-spacing: -.065em; }.login-hero p { max-width: 340px; margin: 64px 0 0; color: rgba(255,255,255,.67); font-size: 1rem; line-height: 1.55; }.login-shell .container { width: 100% !important; max-width: none !important; padding: 0 !important; }.login-shell .row { margin: 0 !important; }.login-shell .row > .col-md-12 { display: flex; flex-direction: column; align-items: stretch; width: 100%; padding: 0; }

.login_box,.login_box.bg-white,.login_box.rounded { position: relative !important; width: min(100%,470px) !important; margin: 0 !important; padding: 48px !important; text-align: left !important; background: var(--login-paper) !important; border: 1px solid rgba(255,255,255,.55) !important; border-radius: 24px !important; box-shadow: 0 28px 70px rgba(0,0,0,.28) !important; }
.login_box::before { content: 'FOODPAPA  /  STAFF PORTAL'; display: block; margin-bottom: 20px; color: var(--login-purple); font-size: .69rem; font-weight: 700; letter-spacing: .13em; }
.login_box h3 { margin: 0 0 30px !important; font-family: 'Playfair Display',serif !important; font-size: clamp(2rem,4vw,2.6rem) !important; font-weight: 700 !important; line-height: 1.05 !important; letter-spacing: -.055em !important; color: var(--login-ink) !important; text-align: left !important; }
.login_box h3::after { content: 'Good to see you. Sign in to keep your team moving.'; display: block; margin-top: 12px; font-family: 'DM Sans',sans-serif; font-size: .95rem; font-weight: 400; line-height: 1.55; letter-spacing: 0; color: var(--login-muted); }

#login-form,.form-group,.input-group { width: 100% !important; }.form-group { margin-bottom: 18px !important; }.form-group label:not([for="checkbox-signup"]) { display: block !important; margin: 0 0 7px !important; font-size: .78rem !important; font-weight: 700 !important; color: var(--login-ink) !important; }
.form-control { width: 100% !important; height: 54px !important; padding: 0 16px !important; border: 1px solid var(--login-line) !important; border-radius: 12px !important; background: #fff !important; color: var(--login-ink) !important; font-family: inherit !important; font-size: .95rem !important; box-shadow: none !important; }.form-control::placeholder { color: #9a8ca5 !important; }.form-control:focus { border-color: var(--login-purple) !important; box-shadow: 0 0 0 4px rgba(78,20,126,.16) !important; }
.input-group { display: flex !important; flex-wrap: nowrap !important; }.input-group-append { display: flex !important; }.input-group-append .btn,.toggle-password { height: 54px !important; min-width: 54px !important; border: 1px solid var(--login-line) !important; border-left: 0 !important; border-radius: 0 12px 12px 0 !important; color: #607067 !important; background: #fff !important; }.input-group > .form-control { min-width: 0 !important; border-radius: 12px 0 0 12px !important; }

.forgot_pswd { margin: -4px 0 20px !important; text-align: right; }.forgot_pswd a { color: var(--login-purple) !important; font-size: .84rem !important; font-weight: 700 !important; text-decoration: none !important; }.forgot_pswd a:hover { text-decoration: underline !important; }
#checkbox-signup { width: 17px !important; height: 17px !important; margin: 1px 8px 0 0 !important; accent-color: var(--login-purple); vertical-align: top; }#checkbox-signup + label { color: var(--login-muted) !important; font-size: .84rem !important; line-height: 1.35; }

.btn-primary,#submit-login,#submit-next { width: 100% !important; min-height: 54px !important; border: 0 !important; border-radius: 12px !important; background: var(--login-purple) !important; color: #fff !important; font-family: inherit !important; font-size: .95rem !important; font-weight: 700 !important; box-shadow: 0 10px 20px rgba(78,20,126,.28) !important; transition: transform .2s ease,background .2s ease,box-shadow .2s ease !important; }.btn-primary:hover,#submit-login:hover,#submit-next:hover { transform: translateY(-2px); background: #3a0e61 !important; box-shadow: 0 14px 26px rgba(78,20,126,.38) !important; }
#signup-client-next,.btn-secondary { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 52px !important; border: 1px solid var(--login-line) !important; border-radius: 12px !important; background: transparent !important; color: var(--login-ink) !important; font-weight: 700 !important; }
a.mb-3.height_50.rounded.f-w-500 { border: 1px solid var(--login-line) !important; border-radius: 12px !important; background: #fff !important; color: var(--login-ink) !important; }p.position-relative.my-4 { color: var(--login-muted) !important; font-size: .72rem !important; font-weight: 700 !important; letter-spacing: .08em; }
.my-3.d-flex.flex-column.flex-grow-1 { width: min(100%,470px); margin: 18px 0 0 !important; text-align: center; }.change-lang { color: rgba(255,255,255,.75) !important; font-size: .8rem; }

@media (max-width:899px) { .login-shell { display: block; width: 100%; }.login-hero { display: none; }.login_box,.login_box.bg-white,.login_box.rounded { margin: 0 auto !important; } }
@media (max-width:640px) { .login_header { height: 72px !important; padding: 0 20px !important; }.login_header img { width: 36px !important; height: 36px !important; max-height: 36px !important; border-radius: 11px !important; }.login-brand-fallback { width: 36px; height: 36px; border-radius: 11px; }.login_header h3 { font-size: 1rem !important; }.login_section { display: flex !important; align-items: center !important; justify-content: center !important; padding: 88px 14px 20px !important; }.login_section .row > .col-md-12 { align-items: stretch; }.login_box,.login_box.bg-white,.login_box.rounded { width: 100% !important; padding: 32px 24px !important; border-radius: 20px !important; }.login_box h3 { margin-bottom: 24px !important; }.my-3.d-flex.flex-column.flex-grow-1 { width: 100%; } }