/* ==========================================================================
   3Bee auth pages (login / register / forgot): shared rules (PHASE 24 → P9 B4)
   Loaded after tokens.css + base.css and before the page CSS, which keeps
   only page-local rules (checkbox ids, the remember row).
   Colours, motion and focus come from the --bee-* tokens; only the values
   that exist nowhere else in the product stay auth-local.

   Breakpoints follow the tokens.css contract (max-width 768 / 430 / 360,
   plus the short-desktop (min-width: 769px) and (max-height: 900px) band);
   the Turnstile-driven card compaction starts at 390 (decision U6).
   The card padding steps live in the templates: p-6 → md:p-10 → lg:p-14.
   ========================================================================== */
:root {
  --auth-r-card: 32px;
  --auth-shadow-card: var(--bee-e1), 0 24px 56px -16px rgba(228, 150, 9, 0.14);
  --auth-control-h: 60px;               /* documents the h-[60px] pill controls */
}

/* Warm ambient background glow matching Figma Group 1 vector mesh */
.bg-figma-mesh {
  background-color: var(--bee-surface);
  background-image:
    radial-gradient(ellipse 120% 80% at 50% 100%, rgba(244, 197, 66, 0.45) 0%, rgba(228, 150, 9, 0.28) 35%, rgba(255, 255, 255, 0.1) 75%, var(--bee-surface) 100%),
    radial-gradient(circle at 10% 90%, rgba(244, 197, 66, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 90% 90%, rgba(228, 150, 9, 0.25) 0%, transparent 50%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Card depth: a navy contact layer plus the warm amber ambient (B5); the
   32px radius is the auth-local exception to the radius scale (D3). */
.auth-card {
  box-shadow: var(--auth-shadow-card);
  border-radius: var(--auth-r-card);
}

/* Headings use the brand display face (the shell's Manrope + Jakarta pair) */
.logo-title,
.auth-card h2 {
  font-family: var(--bee-font-head);
}

/* Placeholders double as the only visible label: AA muted ink */
.input-container input::placeholder {
  color: var(--bee-muted);
  opacity: 1;
}

/* Gold CTA: the canonical gradient (#E49609 → #F4C542, left to right), a
   navy label (D1) and a layered gold shadow. Hover lives in the
   (hover: hover) and (pointer: fine) block below; the press is a scale. */
.auth-cta {
  background-image: var(--bee-gold-fill);
  box-shadow: var(--bee-shadow-gold);
  color: var(--bee-on-gold);
  transition: transform var(--bee-dur-1) var(--bee-ease-out),
              box-shadow var(--bee-dur-2) var(--bee-ease-out),
              filter var(--bee-dur-2) var(--bee-ease-out),
              opacity var(--bee-dur-2) var(--bee-ease-out);
}

.auth-cta:not(:disabled):active {
  transform: translateY(0) scale(var(--bee-press-scale));
}

.auth-cta:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Text links (incl. the terms links and resend): one AA link colour */
.auth-link {
  color: var(--bee-link);
  text-underline-offset: 2px;
  transition: color var(--bee-dur-2) var(--bee-ease-out);
}

/* One disabled look for every "Kirim ulang" button (login, register, forgot) */
.resend-btn:disabled {
  color: var(--bee-muted);
  text-decoration: none;
  cursor: not-allowed;
}

/* Success screens: one short pop instead of an endless bounce */
.auth-pop {
  animation: auth-pop 360ms var(--bee-ease-out) backwards;
}

@keyframes auth-pop {
  0% { opacity: 0; transform: scale(0.8); }
  60% { transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

/* Card (login) and step (register / forgot) entrance. A backwards fill holds
   no transform once it ends (bee-rise lives in base.css). */
.login-card-anim,
.step-section {
  animation: bee-rise var(--bee-dur-3) var(--bee-ease-out) backwards;
}

/* Fields: pill containers and OTP boxes share the .bee-field focus pattern —
   a gold-ink border (the 3:1 indicator) plus a decorative gold halo; the
   transparent outline keeps an indicator in forced-colors mode. */
.input-container:focus-within,
.otp-box:focus {
  border-color: var(--bee-gold-ink);
  box-shadow: var(--bee-focus-halo);
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* Error state: one danger border, wash and ring for every field */
.has-error .input-container,
.otp-box.otp-box-error {
  border-color: var(--bee-danger);
  background-color: var(--bee-danger-wash);
  box-shadow: var(--bee-focus-halo-danger);
}

/* An errored field that has focus still reads as focused */
.has-error .input-container:focus-within,
.otp-box.otp-box-error:focus {
  box-shadow: var(--bee-focus-halo-danger), 0 0 0 1px var(--bee-danger);
}

/* Field and code messages share the danger ink of the errored border */
.error-message,
.otp-error-message {
  color: var(--bee-danger);
}

.has-error .error-message {
  display: block !important;
  animation: shake 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.otp-box-error {
  animation: shake 0.3s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
  40%, 60% { transform: translate3d(3px, 0, 0); }
}

/* OTP: six equal cells that shrink with the card (fits 360 with no
   overflow) and grow back to the 64×80 desktop boxes. */
.otp-boxes-container {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(6px, 2vw, 14px);
  width: 100%;
  max-width: 448px;
}

.otp-box {
  width: 100%;
  min-width: 0;
  height: clamp(56px, 9vw, 80px);
}

/* A long address in the code prompt wraps inside the card */
#otp-destination {
  overflow-wrap: anywhere;
}

/* Password eye: a 44×44 target inside the pill (the input keeps its pr-8,
   so the text box still ends clear of the button). */
.password-toggle {
  right: 8px;
  width: var(--bee-touch);
  height: var(--bee-touch);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bee-r-pill);
  color: var(--bee-muted);              /* the glyph is the only label: 3:1+ */
  transition: color var(--bee-dur-2) var(--bee-ease-out);
}

.password-toggle:focus-visible {
  outline: var(--bee-focus-ring);
  outline-offset: var(--bee-focus-offset);
  color: var(--bee-ink);
}

/* Button loading state */
.btn-loading {
  position: relative;
  cursor: wait !important;
  opacity: 0.85 !important;
}

.spinner {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  border: 2.5px solid rgba(15, 23, 42, 0.25);
  border-radius: 50%;
  border-top-color: var(--bee-ink);
  animation: bee-spin 0.6s linear infinite;
  margin-right: 0.5rem;
  vertical-align: middle;
}

/* Hide helper class */
.hidden {
  display: none !important;
}

/* ---- Hover: only for a real hovering pointer, never on disabled -------- */
@media (hover: hover) and (pointer: fine) {
  .auth-cta:not(:disabled):hover {
    filter: brightness(1.05);
    box-shadow: var(--bee-shadow-gold), var(--bee-glow-gold);
  }
  .auth-link:not(:disabled):hover {
    color: var(--bee-link-hover);
    text-decoration: underline;
  }
  .password-toggle:hover {
    color: var(--bee-ink);
  }
}

/* ---- Touch: text actions and checkbox rows become 44px targets, and the
        mesh scrolls (a landscape phone can sit in the short-desktop band,
        above the 768 step) --------------------------------------------- */
@media (pointer: coarse) {
  .bg-figma-mesh {
    background-attachment: scroll;
  }
  .resend-btn,
  #forgot-password-link,
  .signup-link,
  .signin-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--bee-touch);
    padding: 0 6px;
    margin-inline: -6px;              /* the target grows, the text gap does not */
  }
  .remember-row,
  .checkbox-container {
    min-height: var(--bee-touch);
  }
}

/* ---- Short desktop: register step 3 keeps its CTA above a 900px fold ---- */
@media (min-width: 769px) and (max-height: 900px) {
  body.bg-figma-mesh {
    padding-top: 24px;
    padding-bottom: 24px;
  }
  body.bg-figma-mesh > main {
    padding: 40px 48px;
  }
  .logo-wrapper img {
    height: 48px;
  }
  .divider {
    margin: 24px 0;
  }
}

/* ---- Short 769-1023 windows keep the md:p-10 inline padding (40, not the
        48 above), so they match the tall windows of the same width ------- */
@media (min-width: 769px) and (max-width: 1023px) and (max-height: 900px) {
  body.bg-figma-mesh > main {
    padding-inline: 40px;
  }
}

/* ---- ≤768: the mesh scrolls with the page (no fixed-layer repaint) ------ */
@media (max-width: 768px) {
  .bg-figma-mesh {
    background-attachment: scroll;
  }
}

/* ---- ≤430: the +62 prefix gives the phone input room ------------------- */
@media (max-width: 430px) {
  #group-phone > .flex {
    gap: 8px;
  }
  #group-phone > .flex > div:first-child {
    width: 72px;
  }
  #group-phone .input-container {
    padding-left: 16px;
    padding-right: 16px;
  }
  #group-phone .input-icon {
    display: none;
  }
}

/* ---- ≤390: Turnstile (a fixed 300px) fits the card content box. With the
        default 16px body and 24px card padding it spilled up to ~7px at
        361-381px, so the compaction starts at 390 (decision U6). --------- */
@media (max-width: 390px) {
  body.bg-figma-mesh {
    padding-left: 12px;
    padding-right: 12px;
  }
  body.bg-figma-mesh > main {
    padding: 20px 16px;
    border-radius: 24px;
  }
}