/* BVT 360 login. Loaded from hooks.py via web_include_css.
   Scoped with :has() so only pages showing the login card are touched. */
body:has(.page-card) {
  background: radial-gradient(1100px 560px at 50% -12%, #2B3F78 0%, rgba(43,63,120,0) 62%),
              linear-gradient(160deg, #0E1730 0%, #1C2B57 55%, #16224A 100%);
  background-attachment: fixed;
  min-height: 100vh;
}
body:has(.page-card) .page-card-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}
body:has(.page-card) .page-card {
  width: 100%;
  max-width: 408px;
  background: #fff;
  border: 0;
  border-radius: 16px;
  padding: 34px 30px 28px;
  box-shadow: 0 24px 60px rgba(6,12,30,.45), 0 2px 6px rgba(6,12,30,.25);
}
body:has(.page-card) .page-card-head {
  text-align: center;
  margin-bottom: 22px;
}
body:has(.page-card) .page-card-head img {
  width: 56px;
  height: auto;
  margin-bottom: 12px;
}
body:has(.page-card) .page-card-head h4 {
  color: #1C2B57;
  font-weight: 600;
}
body:has(.page-card) .page-card-head::after {
  content: "Bon Voyage Travel";
  display: block;
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8A94A8;
}
body:has(.page-card) .form-control {
  min-height: 42px;
  border-radius: 10px;
  background: #F4F6FA;
  border: 1px solid #E2E7F0;
  color: #1C2B57;
}
body:has(.page-card) .form-control:focus {
  background: #fff;
  border-color: #1C2B57;
  box-shadow: 0 0 0 3px rgba(28,43,87,.15);
}
body:has(.page-card) .btn-primary {
  background: #1C2B57;
  border-color: #1C2B57;
  min-height: 44px;
  border-radius: 10px;
  font-weight: 500;
}
body:has(.page-card) .btn-primary:hover {
  background: #16224A;
  border-color: #16224A;
}
body:has(.page-card) .btn:focus-visible,
body:has(.page-card) a:focus-visible {
  outline: 3px solid #C7D2E8;
  outline-offset: 2px;
}
body:has(.page-card) a {
  color: #1C2B57;
}
@media (prefers-reduced-motion: reduce) {
  body:has(.page-card) * { transition: none !important; animation: none !important; }
}
body:has(.page-card) {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
body:has(.page-card) .page-card-container {
  display: block;
  width: 100%;
  max-width: 408px;
  min-height: 0;
  background: #fff;
  border-radius: 16px;
  padding: 34px 28px 28px;
  box-shadow: 0 24px 60px rgba(6,12,30,.45), 0 2px 6px rgba(6,12,30,.25);
}
body:has(.page-card) .page-card {
  background: transparent;
  box-shadow: none;
  border: 0;
  padding: 0;
  max-width: none;
}
body:has(.page-card) .form-control:-webkit-autofill,
body:has(.page-card) .form-control:-webkit-autofill:hover,
body:has(.page-card) .form-control:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #F4F6FA inset;
  -webkit-text-fill-color: #1C2B57;
}
@media (max-width: 480px) {
  body:has(.page-card) { padding: 16px; }
  body:has(.page-card) .page-card-container { padding: 26px 20px 22px; border-radius: 14px; }
}
body:has(.page-card) div:has(> .page-card-head):has(> .page-card) {
  width: 100%;
  max-width: 408px;
  margin: 0 auto;
  background: #fff;
  border-radius: 16px;
  padding: 34px 28px 28px;
  box-shadow: 0 24px 60px rgba(6,12,30,.45), 0 2px 6px rgba(6,12,30,.25);
}
body:has(.page-card) .page-card,
body:has(.page-card) .page-card-head {
  background: transparent;
  box-shadow: none;
  border: 0;
  padding: 0;
  margin: 0;
  max-width: none;
}
body:has(.page-card) .page-card-head {
  text-align: center;
  margin-bottom: 20px;
}
body:has(.page-card) .page-card-head h4 {
  color: #1C2B57;
  font-size: 19px;
  margin: 0;
}
body:has(.page-card) .app-logo {
  width: 56px;
  height: auto;
  margin: 0 auto 12px;
  display: block;
}
body:has(.page-card) .page-card-head { display: none; }
body:has(.page-card) .page-card {
  max-width: 408px;
  margin: 0 auto;
  background-color: #fff;
  background-image: url("/files/bvt-eagle.png");
  background-repeat: no-repeat;
  background-position: center 30px;
  background-size: 56px auto;
  border-radius: 16px;
  padding: 100px 28px 28px;
  box-shadow: 0 24px 60px rgba(6,12,30,.45), 0 2px 6px rgba(6,12,30,.25);
}
body:has(.page-card) .page-card:has(.form-login)::before {
  content: "Sign in to BVT 360";
  display: block;
  text-align: center;
  color: #1C2B57;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 4px;
}
body:has(.page-card) .page-card:has(.form-login)::after {
  content: "Bon Voyage Travel";
  display: block;
  text-align: center;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8A94A8;
  margin-bottom: 24px;
}
@media (max-width: 480px) {
  body:has(.page-card) .page-card { padding: 92px 20px 24px; border-radius: 14px; }
}
body:has(.page-card) .page-card-head { display: none; }
body:has(.page-card) .page-card {
  max-width: 420px;
  margin: 0 auto;
  background-color: #fff;
  background-image: url("/files/logo_bvt_512.png");
  background-repeat: no-repeat;
  background-position: center 34px;
  background-size: 64px auto;
  border-radius: 20px;
  padding: 118px 32px 30px;
  box-shadow: 0 24px 60px rgba(6,12,30,.45), 0 2px 6px rgba(6,12,30,.25);
}
body:has(.page-card) .page-card:has(.form-login)::before {
  content: "Sign in to BVT 360";
  display: block;
  text-align: center;
  color: #17366b;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 6px;
}
body:has(.page-card) .page-card:has(.form-login)::after {
  content: "Bon Voyage Travel";
  display: block;
  text-align: center;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8392aa;
  margin-bottom: 26px;
}
@media (max-width: 480px) {
  body:has(.page-card) .page-card { padding: 108px 22px 24px; border-radius: 16px; }
}
body:has(.page-card) .page-card {
  display: flex;
  flex-direction: column;
  background-image: url("/files/bvt-eagle.png");
  background-position: center 32px;
  background-size: 76px auto;
  padding-top: 124px;
}
body:has(.page-card) .page-card:has(.form-login)::before { order: -2; }
body:has(.page-card) .page-card:has(.form-login)::after {
  order: -1;
  margin-bottom: 26px;
}
@keyframes bvt-ripple {
  0%   { transform: translate(-50%,-50%) scale(.35); opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(3.1); opacity: 0; }
}
body:has(.page-card) { position: relative; overflow: hidden; }
body:has(.page-card)::before,
body:has(.page-card)::after {
  content: "";
  position: absolute;
  inset: auto;
  top: 50%;
  left: 50%;
  width: 62vh;
  height: 62vh;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: repeating-radial-gradient(circle,
    rgba(255,255,255,.075) 0 2px,
    rgba(255,255,255,.000) 2px 46px);
  animation: bvt-ripple 9s cubic-bezier(.22,.61,.36,1) infinite;
  will-change: transform, opacity;
}
body:has(.page-card)::after { animation-delay: 4.5s; }
body:has(.page-card) .page-card { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  body:has(.page-card)::before,
  body:has(.page-card)::after {
    animation: none;
    transform: translate(-50%,-50%) scale(1.6);
    opacity: .5;
  }
}
body:has(.page-card) {
  background-color: #0E1730 !important;
  background-image:
    linear-gradient(160deg, rgba(14,23,48,.84) 0%, rgba(28,43,87,.80) 55%, rgba(22,34,74,.91) 100%),
    linear-gradient(90deg, rgba(14,23,48,0) 30%, #0E1730 64%),
    url("/assets/bvt_360/images/bvt-reception.jpg") !important;
  background-size: auto, auto, auto 100% !important;
  background-position: center, center, left center !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-attachment: scroll, scroll, scroll !important;
}
@media (min-width: 1100px) {
  body:has(.page-card) .page-card-container {
    justify-content: flex-end !important;
    padding-right: 10vw !important;
  }
}