/* Final customer login theme: light form and animated briefcase scene. */
:root {
  --login-bg: #f8f8fc;
  --login-panel: #fff;
  --login-surface: #fff;
  --login-field: #fbfbfd;
  --login-border: #e4e4ef;
  --login-text: #17172b;
  --login-muted: #6f7187;
  --login-gold: #4f46e5;
  --login-gold-strong: #4338ca;
  --login-danger: #dc3545;
}

body { color: var(--login-text); background: #f6f5fa; }
.user-briefcase-login {
  background:
    radial-gradient(circle at 18% 12%, rgba(124,58,237,.09), transparent 29%),
    radial-gradient(circle at 82% 86%, rgba(79,70,229,.08), transparent 31%),
    linear-gradient(140deg, #fcfcfe 0%, #f2f1f7 100%);
}
.user-briefcase-login .admin-login__panel {
  border-color: rgba(79,70,229,.13);
  background: rgba(255,255,255,.92);
  box-shadow: 0 28px 70px rgba(67,56,202,.11), 0 3px 10px rgba(35,35,58,.04);
}
.user-briefcase-login .admin-login__form-side {
  color: #17172b;
  background: radial-gradient(circle at 100% 0, rgba(79,70,229,.035), transparent 34%), #fff;
}
.user-briefcase-login .admin-login__intro h1 { color: #18172d; }
.user-briefcase-login .admin-login__intro p { color: #72758c; }
.user-briefcase-login .admin-login__eyebrow { color: #4f46e5 !important; }
.user-briefcase-login .admin-login__field label { color: #33334b; }
.user-briefcase-login .admin-login__label-row a,
.user-briefcase-login .admin-login__security a { color: #4f46e5; }
.user-briefcase-login .admin-login__input-wrap {
  border-color: #e3e2ec;
  background: #fbfbfd;
}
.user-briefcase-login .admin-login__input-wrap:focus-within {
  border-color: rgba(79,70,229,.65);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(79,70,229,.085);
}
.user-briefcase-login .admin-login__input-wrap > svg { stroke: #7d8ca2; }
.user-briefcase-login .admin-login__input-wrap input { color: #172033; }
.user-briefcase-login .admin-login__input-wrap input::placeholder { color: #94a3b8; }
.user-briefcase-login .admin-login__input-wrap input:-webkit-autofill,
.user-briefcase-login .admin-login__input-wrap input:-webkit-autofill:hover,
.user-briefcase-login .admin-login__input-wrap input:-webkit-autofill:focus,
.user-briefcase-login .admin-login__input-wrap input:-webkit-autofill:active {
  -webkit-text-fill-color: #172033;
  caret-color: #172033;
  -webkit-box-shadow: 0 0 0 1000px #fbfbfd inset;
  box-shadow: 0 0 0 1000px #fbfbfd inset;
}
.user-briefcase-login .admin-login__password-toggle { color: #718096; }
.user-briefcase-login .admin-login__password-toggle:hover,
.user-briefcase-login .admin-login__password-toggle:focus-visible {
  color: #4f46e5;
  background: rgba(79,70,229,.08);
}
.user-briefcase-login .admin-login__submit {
  color: #fff;
  background: linear-gradient(135deg, #635bff 0%, #4f46e5 58%, #4338ca 100%);
  box-shadow: 0 14px 28px rgba(79,70,229,.2);
}
.user-briefcase-login .admin-login__submit:hover { box-shadow: 0 18px 34px rgba(79,70,229,.27); }
.user-briefcase-login .admin-login__security { color: #718096; }
.user-briefcase-login .admin-login__security svg { stroke: #8291a6; }
.user-briefcase-login .admin-login__alert {
  color: #b42336;
  border-color: #f2c8cf;
  background: #fff3f5;
}
.user-briefcase-login .admin-login__alert--success {
  color: #087a55;
  border-color: #bdebd9;
  background: #effcf7;
}
.user-briefcase-login .admin-login__copyright { color: #9495a5; }

.user-briefcase-login .admin-login__panel { overflow: visible; }
.user-briefcase-login .admin-login__form-side { overflow: hidden; border-radius: 28px 0 0 28px; }
[dir="ltr"] .user-briefcase-login .admin-login__form-side { border-radius: 0 28px 28px 0; }
.user-briefcase-login .admin-login__visual { overflow: hidden; border-radius: 0 28px 28px 0; }
[dir="ltr"] .user-briefcase-login .admin-login__visual { border-radius: 28px 0 0 28px; }

.js .user-briefcase-login:not(.is-lit) .admin-login__form-side {
  opacity: 0;
  clip-path: circle(4% at 0 72%);
  transform: translateX(-42%) scale(.35);
  transform-origin: left 72%;
}
[dir="ltr"] .js .user-briefcase-login:not(.is-lit) .admin-login__form-side {
  clip-path: circle(4% at 100% 72%);
  transform: translateX(42%) scale(.35);
  transform-origin: right 72%;
}
.user-briefcase-login .admin-login__form-side {
  transition: opacity .7s ease, clip-path 1s cubic-bezier(.16,.8,.2,1), transform 1s cubic-bezier(.16,.8,.2,1);
}
.user-briefcase-login.is-lit .admin-login__form-side { opacity: 1; clip-path: circle(150% at 0 72%); transform: translateX(0) scale(1); }
[dir="ltr"] .user-briefcase-login.is-lit .admin-login__form-side { clip-path: circle(150% at 100% 72%); }

.user-briefcase-login .admin-login__visual-copy { z-index: 6; }
.briefcase-scene { position: absolute; z-index: 5; inset: 185px 0 0; overflow: hidden; }
.briefcase-floor { position: absolute; right: 9%; bottom: 72px; left: 9%; height: 2px; background: linear-gradient(90deg, transparent, rgba(79,70,229,.18), transparent); }
.briefcase-floor::after { content: ""; position: absolute; left: 50%; bottom: -18px; width: 210px; height: 36px; border-radius: 50%; background: rgba(71,64,145,.12); filter: blur(10px); transform: translateX(-50%); }
.briefcase-glow { position: absolute; left: 50%; bottom: 56px; width: 40px; height: 40px; border-radius: 50%; opacity: 0; background: #fff6b4; box-shadow: 0 0 35px #ffe77b, 0 0 100px rgba(99,91,255,.42); transform: translateX(-50%); transition: opacity .5s ease, transform .7s ease; }
.briefcase-opening .briefcase-glow, .briefcase-complete .briefcase-glow { opacity: .95; transform: translateX(-50%) scale(4.2); }

.briefcase-actor { position: absolute; left: 50%; bottom: 74px; width: 255px; height: 270px; transform: translateX(-430px); }
[dir="ltr"] .briefcase-actor { transform: translateX(430px); }
.briefcase-walking .briefcase-actor { animation: briefcaseWalkIn 1.75s cubic-bezier(.25,.72,.3,1) forwards; }
[dir="ltr"] .briefcase-walking .briefcase-actor { animation-name: briefcaseWalkInFromRight; }
.briefcase-arrived .briefcase-actor { transform: translateX(-50%); }

.briefcase-sprite {
  position: absolute;
  inset: 0;
  background-image: url('../img/login/businessman-sprite.webp');
  background-repeat: no-repeat;
  background-size: 400% 300%;
  background-position: 0 0;
  filter: drop-shadow(0 14px 14px rgba(54,48,97,.18));
  opacity: 0;
  transition: opacity .16s linear, transform .35s ease;
  will-change: opacity;
}
.briefcase-sprite--current { opacity: 1; }
[dir="ltr"] .briefcase-sprite { transform: scaleX(-1); }
.briefcase-sprite.is-frame-visible { opacity: 1; }
.briefcase-sprite.is-frame-hidden { opacity: 0; }

.briefcase-person { position: absolute; left: 38px; bottom: 8px; width: 104px; height: 252px; transform-origin: 50% 82%; transition: transform .65s cubic-bezier(.3,.8,.3,1), bottom .65s ease; }
[dir="ltr"] .briefcase-person { right: 38px; left: auto; transform: scaleX(-1); }
.briefcase-person__head { position: absolute; z-index: 4; top: 0; left: 29px; width: 47px; height: 53px; border-radius: 48% 48% 45% 45%; background: #efb486; box-shadow: inset -7px -4px 0 rgba(173,96,61,.12); }
.briefcase-person__head::before { content: ""; position: absolute; top: -5px; right: -1px; left: -1px; height: 22px; border-radius: 50% 55% 30% 20%; background: #3e3048; transform: rotate(-5deg); }
.briefcase-person__head::after { content: ""; position: absolute; right: 5px; bottom: 9px; width: 20px; height: 9px; border-radius: 0 0 50% 50%; border-bottom: 4px solid #70462f; }
.briefcase-person__head i { position: absolute; z-index: 2; top: 25px; right: 12px; width: 4px; height: 4px; border-radius: 50%; background: #292336; }
.briefcase-person__body { position: absolute; z-index: 3; top: 46px; left: 18px; width: 72px; height: 105px; border-radius: 22px 22px 13px 13px; background: linear-gradient(90deg, #4f46e5 0 48%, #5e55ec 48%); box-shadow: inset -8px 0 0 rgba(30,24,95,.08); }
.briefcase-person__body::before { content: ""; position: absolute; top: 0; left: 26px; border-right: 10px solid transparent; border-left: 10px solid transparent; border-top: 20px solid #fff; }
.briefcase-person__tie { position: absolute; top: 16px; left: 34px; width: 6px; height: 36px; background: #26233d; clip-path: polygon(50% 0,100% 18%,75% 100%,25% 100%,0 18%); }
.briefcase-person__arm { position: absolute; z-index: 2; top: 57px; width: 19px; height: 100px; border-radius: 12px; background: #4b43d2; transform-origin: 50% 9px; }
.briefcase-person__arm::after { content: ""; position: absolute; right: 1px; bottom: -7px; width: 17px; height: 20px; border-radius: 50%; background: #efb486; }
.briefcase-person__arm--back { left: 8px; transform: rotate(12deg); }
.briefcase-person__arm--case { right: 5px; transform: rotate(-18deg); }
.briefcase-person__leg { position: absolute; z-index: 1; top: 139px; width: 25px; height: 101px; border-radius: 10px 10px 7px 7px; background: #2d3046; transform-origin: 50% 8px; }
.briefcase-person__leg::after { content: ""; position: absolute; bottom: -5px; width: 38px; height: 16px; border-radius: 12px 12px 6px 6px; background: #fff; box-shadow: 0 3px 8px rgba(55,49,99,.14); }
.briefcase-person__leg--back { left: 25px; }
.briefcase-person__leg--front { right: 20px; }

.briefcase-walking:not(.briefcase-arrived) .briefcase-person__leg--back { animation: briefcaseLegBack .42s ease-in-out infinite alternate; }
.briefcase-walking:not(.briefcase-arrived) .briefcase-person__leg--front { animation: briefcaseLegFront .42s ease-in-out infinite alternate; }
.briefcase-walking:not(.briefcase-arrived) .briefcase-person__arm--back { animation: briefcaseArmBack .42s ease-in-out infinite alternate; }
.briefcase-walking:not(.briefcase-arrived) .briefcase-person__arm--case { animation: briefcaseArmCase .42s ease-in-out infinite alternate; }

.briefcase-case { position: absolute; z-index: 8; right: 5px; bottom: 18px; width: 100px; height: 69px; border: 4px solid #5a341e; border-radius: 9px; background: linear-gradient(145deg, #a76535, #714124); box-shadow: 0 13px 20px rgba(67,44,88,.22), inset 0 -8px 0 rgba(74,35,15,.12); transform-origin: 20% 100%; transition: right .65s ease, bottom .65s ease, transform .65s ease; }
[dir="ltr"] .briefcase-case { right: auto; left: 5px; }
.briefcase-case::after { content: ""; position: absolute; right: 0; left: 0; top: 27px; height: 3px; background: rgba(71,33,15,.45); }
.briefcase-case__handle { position: absolute; top: -23px; left: 32px; width: 31px; height: 22px; border: 5px solid #653b23; border-bottom: 0; border-radius: 9px 9px 0 0; }
.briefcase-case__lid { position: absolute; z-index: -1; right: -4px; bottom: 49px; left: -4px; height: 26px; border: 4px solid #5a341e; border-radius: 8px 8px 3px 3px; background: #98603a; transform-origin: bottom; transition: transform .65s cubic-bezier(.2,.9,.25,1); }
.briefcase-case__lock { position: absolute; z-index: 2; top: 24px; width: 9px; height: 12px; border-radius: 2px; background: #f4cc68; }
.briefcase-case__lock--one { left: 20px; }.briefcase-case__lock--two { right: 20px; }

.briefcase-kneeling .briefcase-person { bottom: -2px; transform: translate(-10px, 42px) rotate(12deg) scale(.86); }
[dir="ltr"] .briefcase-kneeling .briefcase-person { transform: translate(10px, 42px) rotate(-12deg) scaleX(-1) scale(.86); }
.briefcase-kneeling .briefcase-person__leg--back { transform: rotate(62deg); height: 75px; }
.briefcase-kneeling .briefcase-person__leg--front { transform: rotate(-47deg); height: 78px; }
.briefcase-kneeling .briefcase-person__arm--case { transform: rotate(-63deg); }
.briefcase-kneeling .briefcase-case { right: -5px; bottom: 0; transform: rotate(0); }
[dir="ltr"] .briefcase-kneeling .briefcase-case { right: auto; left: -5px; }
.briefcase-opening .briefcase-case__lid, .briefcase-complete .briefcase-case__lid { transform: perspective(110px) rotateX(-115deg); }
.briefcase-opening .briefcase-case { box-shadow: 0 13px 20px rgba(67,44,88,.2), 0 -24px 55px rgba(255,224,102,.7); }
.briefcase-complete .briefcase-person { opacity: .22; transform: translate(-15px, 45px) scale(.8); transition: opacity .6s ease, transform .6s ease; }
.briefcase-status { position: absolute; right: 0; bottom: 28px; left: 0; margin: 0; color: #696b82; font-size: 12px; text-align: center; opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; }
.briefcase-kneeling .briefcase-status { opacity: 1; transform: translateY(0); }
.briefcase-complete .briefcase-status { opacity: 0; }

@keyframes briefcaseWalkIn { from { transform: translateX(-430px); } to { transform: translateX(-50%); } }
@keyframes briefcaseWalkInFromRight { from { transform: translateX(430px); } to { transform: translateX(-50%); } }
@keyframes briefcaseLegBack { from { transform: rotate(22deg); } to { transform: rotate(-24deg); } }
@keyframes briefcaseLegFront { from { transform: rotate(-23deg); } to { transform: rotate(24deg); } }
@keyframes briefcaseArmBack { from { transform: rotate(-16deg); } to { transform: rotate(22deg); } }
@keyframes briefcaseArmCase { from { transform: rotate(-12deg); } to { transform: rotate(-26deg); } }

@media (max-width: 900px) {
  .user-briefcase-login .admin-login__panel { overflow: hidden; }
  .user-briefcase-login .admin-login__visual, [dir="ltr"] .user-briefcase-login .admin-login__visual { min-height: 420px; border-radius: 28px 28px 0 0; }
  .user-briefcase-login .admin-login__form-side, [dir="ltr"] .user-briefcase-login .admin-login__form-side { border-radius: 0 0 28px 28px; }
  .briefcase-scene { inset: 115px 0 0; transform: scale(.72); transform-origin: bottom center; }
  .js .user-briefcase-login:not(.is-lit) .admin-login__form-side { clip-path: circle(4% at 50% 0); transform: translateY(-30%) scale(.35); transform-origin: 50% 0; }
  .user-briefcase-login.is-lit .admin-login__form-side { clip-path: circle(160% at 50% 0); transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .briefcase-actor { animation: none !important; transform: translateX(-50%); }
  .briefcase-case__lid { transform: perspective(110px) rotateX(-115deg); }
  .briefcase-sprite { animation: none !important; background-position: 100% 100%; }
  .briefcase-sprite--current { opacity: 1; }
  .briefcase-sprite--next { opacity: 0; }
  .user-briefcase-login .admin-login__form-side { transition: none; }
}

/* Smooth 30fps production motion; the generated sprite remains a static fallback. */
.user-briefcase-login .admin-login__visual {
  background: #eb996c;
}
.user-briefcase-login .admin-login__grid,
.user-briefcase-login .admin-login__orbit,
.user-briefcase-login .admin-login__ambient,
.user-briefcase-login .briefcase-floor,
.user-briefcase-login .briefcase-glow {
  display: none;
}
.user-briefcase-login .admin-login__visual::before {
  opacity: 1;
  border-color: rgba(255,255,255,.34);
  background: transparent;
  box-shadow: none;
}
.user-briefcase-login .admin-login__visual::after { display: none; }
.user-briefcase-login .admin-login__visual-copy h2 { color: #fff; }
.user-briefcase-login .admin-login__visual-copy p { color: rgba(255,255,255,.82); }
.user-briefcase-login .admin-login__visual-copy span { color: #fff; border-color: rgba(255,255,255,.42); background: rgba(255,255,255,.13); }

.user-briefcase-login .briefcase-actor,
.user-briefcase-login.briefcase-walking .briefcase-actor,
[dir="ltr"] .user-briefcase-login .briefcase-actor,
[dir="ltr"] .user-briefcase-login.briefcase-walking .briefcase-actor {
  left: 50%;
  bottom: 34px;
  width: 300px;
  height: 372px;
  animation: none;
  transform: translateX(-50%);
}

.briefcase-motion {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .18s ease;
}
[dir="ltr"] .briefcase-motion { transform: scaleX(-1); }
.briefcase-video-ready .briefcase-motion { opacity: 1; }
.briefcase-sprite--fallback { display: none; opacity: 1; background-position: 0 0; }
.briefcase-motion-fallback .briefcase-motion { display: none; }
.briefcase-motion-fallback .briefcase-sprite--fallback { display: block; }

@media (max-width: 900px) {
  .user-briefcase-login .briefcase-actor,
  .user-briefcase-login.briefcase-walking .briefcase-actor,
  [dir="ltr"] .user-briefcase-login .briefcase-actor,
  [dir="ltr"] .user-briefcase-login.briefcase-walking .briefcase-actor {
    bottom: 0;
    transform: translateX(-50%) scale(.82);
    transform-origin: bottom center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .briefcase-motion { display: none; }
  .briefcase-sprite--fallback { display: block; background-position: 100% 100%; }
}