@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Outfit:wght@300;400;500;600;700&display=swap');

/*
 * VILLAGE GREEN THEME
 * Mirrors CutCraft.Web's login page (src/app/components/login) so the
 * Hangfire dashboard sign-in and the customer-facing app share one identity.
 * The stage is deliberately theme-independent: a soft meadow backdrop that
 * pins its own design tokens instead of reading the app's light/dark tokens.
 */
.login-stage {
  --color-bg: #eef1df;
  --color-surface: #fbfcf4;
  --color-surface-alt: #eaefd9;
  --color-surface-hover: #e0e8ca;
  --color-border: rgba(38, 51, 28, 0.16);
  --color-border-strong: rgba(38, 51, 28, 0.34);
  --color-text: #384a2c;
  --color-text-strong: #1f2b17;
  --color-text-muted: #57694a;
  --color-text-faint: #7a8a6a;
  --color-accent: #3f6b2e;
  --color-accent-hover: #2f5222;
  --color-accent-soft: #3f6b2e;
  --color-input-bg: #fbfcf4;
  --color-focus-ring: rgba(63, 107, 46, 0.32);
  --color-danger-text: #b3261e;
  --color-success-text: #2f5222;
  --shadow-md: 0 20px 46px rgba(31, 43, 23, 0.26);
  --color-brand-art: rgba(38, 51, 28, 0.22);
  --logo-glow: drop-shadow(0 0 20px rgba(63, 107, 46, 0.3));
  --color-disabled-bg: rgba(38, 51, 28, 0.12);
  --color-disabled-text: #7a8a6a;
  --color-olive: #6b7d3f;
  --color-mustard: #d1a83f;
  --color-ink: #1f2b17;
  --font-display: 'Alfa Slab One', 'Outfit', 'Segoe UI', sans-serif;

  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  background:
    radial-gradient(circle at 50% 0%, rgba(107, 125, 63, 0.24), transparent 55%),
    repeating-radial-gradient(circle at 0 0, rgba(38, 51, 28, 0.05) 0, rgba(38, 51, 28, 0.05) 1px, transparent 1px, transparent 15px),
    var(--color-bg);
  color: var(--color-text);
  font-family: 'Outfit', 'Segoe UI', sans-serif;
  overflow-x: hidden;
  overflow-y: auto;
}

.stage-glow {
  position: absolute;
  width: 900px;
  height: 900px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.glow-warm {
  top: -28%;
  left: -12%;
  background: radial-gradient(circle, rgba(209, 168, 63, 0.32) 0%, rgba(209, 168, 63, 0) 68%);
  animation: glow-drift-a 28s ease-in-out infinite;
}

.glow-cool {
  bottom: -32%;
  right: -12%;
  background: radial-gradient(circle, rgba(63, 107, 46, 0.3) 0%, rgba(63, 107, 46, 0) 68%);
  animation: glow-drift-b 34s ease-in-out infinite;
}

@keyframes glow-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(150px, 90px, 0); }
}

@keyframes glow-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(-170px, -80px, 0); }
}

.stage-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: clamp(1120px, 76vw, 1440px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(48px, 4vw, 88px);
}

.left-panel {
  position: relative;
  flex: 1 1 560px;
  min-height: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.animal-spotlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 50% 42%, rgba(255, 244, 230, 0.16) 0%, rgba(255, 244, 230, 0.06) 45%, transparent 72%);
}

.right-panel {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.left-copy {
  position: relative;
  z-index: 1;
  max-width: 400px;
  text-align: left;
  margin-top: 8px;
}

.medallion {
  position: relative;
  width: clamp(168px, 11vw, 204px);
  height: clamp(168px, 11vw, 204px);
  margin: 0 0 22px;
}

.medallion-rays {
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--color-mustard) 0deg 9deg, transparent 9deg 18deg);
  opacity: 0.55;
  animation: medallion-spin 90s linear infinite;
}

@keyframes medallion-spin {
  to { transform: rotate(360deg); }
}

.medallion-disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--color-surface);
  border: 4px solid var(--color-ink);
  box-shadow: inset 0 0 0 3px var(--color-mustard), 0 10px 26px rgba(59, 36, 23, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  overflow: hidden;
}

.medallion-disc svg {
  width: 46%;
  height: 46%;
  fill: none;
  stroke: var(--color-ink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.medallion-ribbon {
  position: absolute;
  left: -14%;
  right: -14%;
  top: 50%;
  transform: translateY(-50%) rotate(-4deg);
  background: var(--color-accent);
  color: #fffaf0;
  text-align: center;
  padding: 6px 0;
  font-family: 'Outfit', 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.09em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 10px rgba(59, 36, 23, 0.35);
}

.left-title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: clamp(26px, 1.9vw, 32px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--color-accent);
  text-shadow: 1px 1px 0 rgba(59, 36, 23, 0.15);
}

.left-lede {
  margin: 0 0 20px;
  font-size: clamp(14px, 0.95vw, 16px);
  line-height: 1.6;
  color: var(--color-text);
  max-width: 400px;
}

.left-features {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.left-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.4;
}

.feature-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-mustard);
  color: var(--color-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  box-shadow: 0 2px 6px rgba(59, 36, 23, 0.2);
}

@media (max-width: 860px) {
  .left-panel { display: none; }
}

.bg-animals {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bg-animal {
  position: absolute;
  fill: none;
  stroke: var(--color-brand-art);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  --rot: 0deg;
  --drift: -10px;
  --drift-x: 0px;
  --sway: 3deg;
  --flip: 1;
  transform: rotate(var(--rot)) scaleX(var(--flip));
  animation: bg-drift var(--dur, 9s) ease-in-out var(--delay, 0s) infinite;
}

@keyframes bg-drift {
  0%, 100% {
    transform: rotate(var(--rot)) translate3d(0, 0, 0) scale(1) scaleX(var(--flip));
  }
  25% {
    transform: rotate(calc(var(--rot) + var(--sway)))
               translate3d(calc(var(--drift-x) * 0.4), calc(var(--drift) * 0.5), 0)
               scale(1.015) scaleX(var(--flip));
  }
  50% {
    transform: rotate(var(--rot))
               translate3d(var(--drift-x), var(--drift), 0)
               scale(1.03) scaleX(var(--flip));
  }
  75% {
    transform: rotate(calc(var(--rot) - var(--sway)))
               translate3d(calc(var(--drift-x) * 0.4), calc(var(--drift) * 0.5), 0)
               scale(1.015) scaleX(var(--flip));
  }
}

@keyframes swim-ltr {
  0%   { transform: translate3d(-25vw, 0, 0)    rotate(var(--rot)) scaleX(-1); }
  25%  { transform: translate3d(12vw, -16px, 0) rotate(calc(var(--rot) + var(--sway))) scaleX(-1); }
  50%  { transform: translate3d(50vw, 8px, 0)   rotate(var(--rot)) scaleX(-1); }
  75%  { transform: translate3d(88vw, -12px, 0) rotate(calc(var(--rot) - var(--sway))) scaleX(-1); }
  100% { transform: translate3d(125vw, 0, 0)    rotate(var(--rot)) scaleX(-1); }
}

@keyframes swim-rtl {
  0%   { transform: translate3d(125vw, 0, 0)    rotate(var(--rot)) scaleX(1); }
  25%  { transform: translate3d(88vw, -14px, 0) rotate(calc(var(--rot) - var(--sway))) scaleX(1); }
  50%  { transform: translate3d(50vw, 10px, 0)  rotate(var(--rot)) scaleX(1); }
  75%  { transform: translate3d(12vw, -16px, 0) rotate(calc(var(--rot) + var(--sway))) scaleX(1); }
  100% { transform: translate3d(-25vw, 0, 0)    rotate(var(--rot)) scaleX(1); }
}

.fish-tail,
.fish-fin,
.fish-body {
  transform-box: view-box;
}

.fish-tail {
  transform-origin: 90px 40px;
  animation: tail-beat var(--beat, 0.7s) ease-in-out infinite alternate;
}

.fish-fin {
  animation: fin-flutter calc(var(--beat, 0.7s) * 2) ease-in-out infinite alternate;
}

.fin-top    { transform-origin: 59px 18px; }
.fin-bottom { transform-origin: 62px 62px; }

.fish-body {
  transform-origin: 20px 40px;
  animation: body-flex var(--beat, 0.7s) ease-in-out infinite alternate;
}

@keyframes tail-beat {
  from { transform: rotate(-15deg); }
  to   { transform: rotate(15deg); }
}

@keyframes fin-flutter {
  from { transform: rotate(-5deg); }
  to   { transform: rotate(5deg); }
}

@keyframes body-flex {
  from { transform: scaleY(0.97) rotate(-1.5deg); }
  to   { transform: scaleY(1.03) rotate(1.5deg); }
}

@keyframes hen-walk {
  0%   { transform: translate3d(0, 0, 0)            rotate(var(--rot)) scaleX(1); }
  46%  { transform: translate3d(var(--walk), 0, 0)  rotate(var(--rot)) scaleX(1); }
  50%  { transform: translate3d(var(--walk), 0, 0)  rotate(var(--rot)) scaleX(-1); }
  96%  { transform: translate3d(0, 0, 0)            rotate(var(--rot)) scaleX(-1); }
  100% { transform: translate3d(0, 0, 0)            rotate(var(--rot)) scaleX(1); }
}

.hen-body,
.hen-head,
.hen-peck,
.hen-wing,
.hen-tail,
.hen-leg {
  transform-box: view-box;
}

.hen-body {
  transform-origin: 54px 72px;
  animation: hen-bob var(--step, 0.95s) ease-in-out infinite alternate;
}

.hen-leg {
  animation: hen-step var(--step, 0.95s) ease-in-out infinite alternate;
}

.leg-back  { transform-origin: 44px 96px; }
.leg-front { transform-origin: 58px 98px; animation-delay: calc(var(--step, 0.95s) * -1); }

.hen-head {
  transform-origin: 76px 52px;
  animation: hen-head-bob var(--step, 0.95s) ease-in-out infinite alternate;
}

.hen-peck {
  transform-origin: 75px 55px;
  animation: hen-peck-cycle var(--idle, 7.5s) ease-in-out infinite;
}

.hen-wing {
  transform-origin: 35px 64px;
  animation: hen-wing-flick var(--idle, 7.5s) ease-in-out infinite;
}

.hen-tail {
  transform-origin: 23px 62px;
  animation: hen-tail-twitch calc(var(--step, 0.95s) * 2) ease-in-out infinite alternate;
}

@keyframes hen-bob {
  from { transform: translateY(0); }
  to   { transform: translateY(-1.5px); }
}

@keyframes hen-step {
  from { transform: rotate(-14deg); }
  to   { transform: rotate(14deg); }
}

@keyframes hen-head-bob {
  from { transform: translate(2px, 0.5px); }
  to   { transform: translate(-2px, -0.5px); }
}

@keyframes hen-peck-cycle {
  0%, 60%   { transform: rotate(0deg); }
  67%       { transform: rotate(26deg); }
  73%       { transform: rotate(18deg); }
  79%       { transform: rotate(26deg); }
  88%, 100% { transform: rotate(0deg); }
}

@keyframes hen-wing-flick {
  0%, 26%   { transform: rotate(0deg); }
  30%       { transform: rotate(-9deg); }
  35%       { transform: rotate(-1deg); }
  39%       { transform: rotate(-6deg); }
  45%, 100% { transform: rotate(0deg); }
}

@keyframes hen-tail-twitch {
  from { transform: rotate(-3deg); }
  to   { transform: rotate(3deg); }
}

.pos-1 { width: 150px; top: 5%;     left: 4%;   --rot: -3deg;  --dur: 46s;   --delay: 0s;    --walk: 140px; --step: 0.95s; --idle: 7.5s; animation-name: hen-walk; animation-timing-function: linear; }
.pos-7 { width: 120px; top: 11%;    left: 27%;  --rot: 6deg;   --dur: 13s;   --delay: -2s;   --drift: -7px;  --drift-x: 9px;  --sway: 2.5deg; opacity: 0.6; }
.pos-2 { width: 140px; top: 4%;     left: 0;    --rot: 4deg;   --dur: 26s;   --delay: -6s;   --sway: 5deg;   --flip: -1; --beat: 0.62s; animation-name: swim-ltr; animation-timing-function: linear; }
.pos-6 { width: 105px; top: 10%;    left: 76%;  --rot: 2deg;   --dur: 54s;   --delay: -19s;  --walk: 70px;  --step: 1.1s;  --idle: 9s;   opacity: 0.7; animation-name: hen-walk; animation-timing-function: linear; }
.pos-3 { width: 140px; bottom: 6%;  left: 8%;   --rot: -12deg; --dur: 10s;   --delay: -6s;   --drift: -12px; --drift-x: 8px;  --sway: 2.5deg; }
.pos-8 { width: 115px; bottom: 12%; left: 31%;  --rot: -20deg; --dur: 10.5s; --delay: -8s;   --drift: -7px;  --drift-x: -6px; --sway: 2deg;   opacity: 0.6; }
.pos-5 { width: 100px; bottom: 5%;  left: 0;    --rot: -5deg;  --dur: 32s;   --delay: -14s;  --sway: 5deg;   opacity: 0.7; --beat: 0.83s; animation-name: swim-rtl; animation-timing-function: linear; }
.pos-4 { width: 155px; bottom: 11%; left: 78%;  --rot: 10deg;  --dur: 12s;   --delay: -1.5s; --drift: -10px; --drift-x: -5px; --sway: 2deg;   }

@media (max-width: 480px) {
  .pos-5, .pos-6, .pos-7, .pos-8 {
    display: none;
  }
  .pos-4 { left: auto; right: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .bg-animal,
  .fish-tail,
  .fish-fin,
  .fish-body,
  .hen-body,
  .hen-head,
  .hen-peck,
  .hen-wing,
  .hen-tail,
  .hen-leg,
  .stage-glow { animation: none; }
  .pos-2 { left: 52%; }
  .pos-5 { left: 55%; }
}

.login-card {
  position: relative;
  z-index: 1;
  width: min(clamp(400px, 30vw, 460px), 92vw);
  display: grid;
  gap: 16px;
  text-align: center;
  padding: clamp(32px, 2.6vw, 40px) clamp(30px, 2.4vw, 38px) 26px;
  background: var(--color-surface);
  border: 3px solid var(--color-ink);
  border-radius: 14px;
  box-shadow: inset 0 0 0 4px var(--color-mustard), var(--shadow-md);
}

.stamp-badge {
  position: absolute;
  z-index: 2;
  top: -16px;
  right: -14px;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--color-olive);
  color: #fffaf0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Outfit', 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
  border: 2px dashed rgba(255, 250, 240, 0.6);
  transform: rotate(-14deg);
  box-shadow: 0 6px 14px rgba(59, 36, 23, 0.3);
}

.copyright-text {
  position: relative;
  z-index: 1;
  margin: 24px 0 0;
  text-align: center;
  font-size: 11px;
  color: var(--color-text-faint);
}

.brand-logo {
  width: 150px;
  height: 150px;
  object-fit: contain;
  display: block;
  margin: 0 auto -4px;
  filter: var(--logo-glow);
}

.subtitle {
  margin: 0;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--color-ink);
  line-height: 1.4;
}

.error-msg {
  font-size: 13px;
  color: var(--color-danger-text);
  text-align: center;
  padding: 0 2px;
}

.success-msg {
  font-size: 13px;
  color: var(--color-success-text);
  text-align: center;
  padding: 0 2px;
}

.footer-text {
  margin: 8px 0 0;
  color: var(--color-text-muted);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.mobile-otp-form {
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.form-section {
  display: grid;
  gap: 16px;
}

.form-group {
  text-align: left;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--color-text);
}

.form-control {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: 6px;
  background: var(--color-input-bg);
  color: var(--color-text-strong);
  font-size: 14px;
  font-family: 'Outfit', 'Segoe UI', sans-serif;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.form-control::placeholder {
  color: var(--color-text-faint);
}

.form-control:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.mobile-input-wrap {
  display: flex;
  align-items: stretch;
}

.country-code {
  display: flex;
  align-items: center;
  padding: 0 12px;
  border: 1px solid var(--color-border-strong);
  border-right: none;
  border-radius: 6px 0 0 6px;
  background: var(--color-surface-alt);
  color: var(--color-text);
  font-size: 14px;
  font-weight: 500;
}

.mobile-input {
  border-radius: 0 6px 6px 0;
}

.mobile-input:focus {
  position: relative;
  z-index: 1;
}

.step-progress {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border-strong);
  transition: background 0.2s ease, transform 0.2s ease;
}

.step-dot.completed {
  background: var(--color-accent-soft);
}

.step-dot.active {
  background: var(--color-accent);
  transform: scale(1.25);
}

.otp-input {
  text-align: center;
  letter-spacing: 2px;
  font-size: 18px;
  font-weight: 600;
}

.otp-hint {
  margin: -8px 0 0;
  text-align: center;
  font-size: 11px;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

.otp-header {
  padding: 8px 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

.otp-header p {
  margin: 4px 0;
}

.otp-phone {
  font-weight: 600;
  color: var(--color-text-strong);
  font-size: 14px;
}

.link-row {
  text-align: center;
  margin: -4px 0 0;
}

.btn-link {
  background: none;
  border: none;
  padding: 4px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Outfit', 'Segoe UI', sans-serif;
  color: var(--color-accent-soft);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.2s ease;
}

.btn-link:hover:not(:disabled) {
  color: var(--color-accent);
  text-decoration: underline;
}

.btn-link:disabled {
  color: var(--color-text-faint);
  cursor: not-allowed;
}

.btn-primary,
.btn-secondary {
  padding: 12px 16px;
  border-radius: 6px;
  border: none;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Outfit', 'Segoe UI', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-link:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.btn-primary {
  width: 100%;
  background: var(--color-accent);
  color: #fff;
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-accent-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-primary:disabled {
  background: var(--color-disabled-bg);
  color: var(--color-disabled-text);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.btn-secondary {
  width: 100%;
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--color-surface-hover);
  border-color: var(--color-text-faint);
}