/* Booking Paris Transfer admin: the sign-in screen (stage C3-login). Palette and logo rules of docs/BRAND.md: the logo
   stays black (white on dark), green is used around it. Loaded after admin.css on the sign-in page only (pages.mjs
   loginPage, body class "bpt-login"), so these rules win over the older .login-page ones there. No images other than
   the logo; works from 320 px wide. */
.bpt-login {
  --bpt-green: #16A34A; --bpt-green-strong: #15803D; --bpt-green-dark: #14532D; --bpt-green-bright: #3CC878;
  --bpt-green-light: #DCFCE7; --bpt-green-tint: #F0FDF4; --bpt-ink: #0B0F0C;
  --ink: var(--bpt-ink); --focus: rgba(21, 128, 61, .32); --amber-line: var(--bpt-green-strong); --btn: var(--bpt-green-strong);
}
.login-page.bpt-login {
  min-height: 100vh;
  background: radial-gradient(120% 70% at 50% 0%, var(--bpt-green-light) 0%, var(--bpt-green-tint) 45%, #FFFFFF 100%) fixed;
}
.bpt-login .login { padding: 72px 16px 40px; }
.bpt-login .login-card {
  width: min(480px, 100%); padding: 0 36px 30px; overflow: hidden;
  border: 1px solid #D7EBDD; border-radius: 18px; box-shadow: 0 24px 60px rgba(20, 83, 45, .14), 0 2px 6px rgba(20, 83, 45, .06);
}
.bpt-login .login-card::before {
  content: ""; display: block; height: 6px; margin: 0 -36px 28px;
  background: linear-gradient(90deg, var(--bpt-green), var(--bpt-green-bright), var(--bpt-green-strong));
}
.bpt-login .login-brand { gap: 6px; }
.bpt-login .logo-login img { display: block; width: 190px; height: auto; }
.bpt-login .login-brand .brand-sub { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--bpt-green-dark); }
.bpt-login .login-card h1 { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; margin: 18px 0 22px; color: var(--bpt-ink); }
.bpt-login .login-form { gap: 18px; }
.bpt-login .login-form .label { font-size: 16px; font-weight: 600; color: var(--bpt-ink); }
.bpt-login .input-ic > .i { left: 16px; width: 22px; height: 22px; color: var(--bpt-green-strong); }
.bpt-login .input-ic input { height: 54px !important; padding-left: 52px !important; font-size: 17.5px !important; border-radius: 12px !important; }
.bpt-login .input-ic input[type=password] { padding-right: 56px !important; }
.bpt-login .login-form input:focus { border-color: var(--bpt-green-strong); box-shadow: 0 0 0 3px var(--focus); }
.bpt-login .login-form .hint { font-size: 14.5px; }
.bpt-login .remember { align-items: center; font-size: 16px; font-weight: 500; color: var(--bpt-ink); }
.bpt-login .remember input { width: 20px; height: 20px; accent-color: var(--bpt-green-strong); }
.bpt-login .login-form .btn-primary {
  margin-top: 4px; height: 54px; font-size: 18px; font-weight: 700; border-radius: 12px; color: #FFFFFF;
  background: linear-gradient(135deg, var(--bpt-green), var(--bpt-green-strong)); box-shadow: 0 8px 20px rgba(21, 128, 61, .25);
}
.bpt-login .login-form .btn-primary:hover { background: linear-gradient(135deg, var(--bpt-green-strong), var(--bpt-green-dark)); }
.bpt-login .form-notice { background: var(--bpt-green-tint); border: 1px solid #BBF7D0; color: var(--bpt-green-dark); }
.bpt-login .login-foot { font-size: 14px; margin-top: 22px; }
@media (prefers-color-scheme: dark) {
  .bpt-login { --ink: #F1F5F2; --bpt-ink: #F1F5F2; --focus: rgba(60, 200, 120, .35); }
  .login-page.bpt-login { background: radial-gradient(120% 70% at 50% 0%, #133222 0%, #0B1A12 50%, #0B0F0C 100%) fixed; }
  .bpt-login .login-card { background: #111A15; border-color: #1E3A2B; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }
  .bpt-login .login-brand .brand-sub { color: #86EFAC; }
  .bpt-login .input-ic > .i { color: #86EFAC; }
  .bpt-login .login-form input:focus { border-color: var(--bpt-green-bright); }
  .bpt-login .form-notice { background: #0B1A12; border-color: #1E3A2B; color: #BBF7D0; }
}
@media (max-width: 520px) {
  .bpt-login .login { padding: 28px 12px; }
  .bpt-login .login-card { padding: 0 20px 24px; }
  .bpt-login .login-card::before { margin: 0 -20px 22px; }
  .bpt-login .logo-login img { width: 160px; }
  .bpt-login .login-card h1 { font-size: 28px; margin: 14px 0 18px; }
}