/* KidBank – kb.all.css (brand v2) */
:root {
  --kb-indigo: #545def;
  --kb-indigo-700: #3f49d9;
  --kb-indigo-800: #303ab3;
  --kb-lime: #c6ff65;
  --kb-cream: #fffdeb;
  --kb-orange: #ff6a2e;
  --kb-lilac: #c88cdc;
  --kb-ink: #111322;

  --kb-radius-sm: 10px;
  --kb-radius-md: 14px;
  --kb-radius-lg: 18px;
  --kb-radius-pill: 999px;

  --kb-space-1: 4px;
  --kb-space-2: 8px;
  --kb-space-3: 12px;
  --kb-space-4: 16px;
  --kb-space-5: 20px;
  --kb-space-6: 24px;
  --kb-space-8: 32px;

  --kb-shadow-1: 0 8px 30px rgba(0,0,0,.10);
  --kb-shadow-2: 0 16px 40px rgba(0,0,0,.14);

  --kb-ease: cubic-bezier(.2,.8,.2,1);
}

/* Root + brand */
.kb {
  min-height: 100svh;
  color: var(--kb-cream);
  background: transparent;
  position: relative;
  overflow-x: hidden;
  font-family: Century Gothic, "Avenir Next", Poppins, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
.kb[data-theme="parent"], .kb[data-theme="child"] {
  --kb-text: #ffffff;
  --kb-muted: rgba(255,255,255,.82);
  --kb-surface: rgba(255,255,255,.12);
  --kb-surface-2: rgba(255,255,255,.18);
  --kb-border: rgba(255,255,255,.20);
  --kb-chip-bg: rgba(198,255,101,.18);
  --kb-chip-fg: #1b1b1b;
  --kb-progress-track: rgba(255,255,255,.25);
  --kb-progress-fill: var(--kb-lime);
}

/* Painted gradient & soft shapes (matches brand slides) */
.kb::before{
  content:"";
  position:fixed; inset:-10vh -10vw; z-index:-1; pointer-events:none;
  background:
    radial-gradient(72rem 42rem at 12% 10%, rgba(86,70,255,.28), transparent 60%),
    radial-gradient(60rem 36rem at 88% 18%, rgba(68,210,255,.20), transparent 60%),
    radial-gradient(56rem 40rem at 28% 100%, rgba(255,207,83,.18), transparent 65%),
    linear-gradient(180deg, var(--kb-indigo) 0%, var(--kb-indigo-700) 50%, var(--kb-indigo-800) 100%);
  background-attachment: fixed;
  filter: saturate(1.02);
}

/* Surfaces (cards, tables, headers) */
.kb .kb-card, .kb .card-rounded, .kb .card {
  background: var(--kb-surface);
  border: 1px solid var(--kb-border);
  border-radius: var(--kb-radius-lg);
  box-shadow: var(--kb-shadow-1);
  color: #fff;
}
.kb .card-header{ background: var(--kb-surface-2)!important; border-bottom:1px solid var(--kb-border); color:#fff; }
.kb .table { color: #fff; }
.kb .table thead th { background: var(--kb-surface-2); color:#fff; border-color: var(--kb-border); }
.kb .table td, .kb .table th{ border-color: var(--kb-border); }

/* Section chips / nav pills */
.kb .kb-chip{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius: var(--kb-radius-pill);
  background: var(--kb-chip-bg); color: var(--kb-chip-fg);
  font-weight: 800; letter-spacing:.2px; border:1px solid rgba(0,0,0,.08);
  box-shadow: 0 6px 0 rgba(0,0,0,.10);
}
.kb .kb-chip .icon{ width:1.2em; height:1.2em; }

/* Buttons (brand CTA) */
.kb .btn-primary, .kb .kb-btn--primary{
  background: linear-gradient(180deg, var(--kb-orange), #ff5a19);
  border: none; color: #fff; font-weight: 800;
  border-radius: var(--kb-radius-pill);
  padding: 10px 18px;
  box-shadow: 0 10px 0 rgba(0,0,0,.12);
  transition: transform var(--kb-ease) .12s, box-shadow var(--kb-ease) .12s, filter .12s;
}
.kb .btn-primary:hover{ transform: translateY(-1px); filter: brightness(1.05); }
.kb .btn-outline-secondary{ background: rgba(255,255,255,.10); border-color: var(--kb-border); color:#fff; }

/* Progress bars (goals/stars) */
.kb .progress{ background: var(--kb-progress-track)!important; height: 12px; border-radius: 999px; }
.kb .progress-bar{ background: var(--kb-lime)!important; }

/* Forms */
.kb .form-control, .kb .form-select, .kb .form-check-input{
  background: rgba(255,255,255,.10); color:#fff; border-color: var(--kb-border);
}
.kb .form-control::placeholder{ color: rgba(255,255,255,.7); }
.kb .form-check-label{ color:#fff; }

/* Fix dropdown option visibility */
.kb .form-select option{
  background: #1b2346; color:#fff;
}
.kb .form-select option:hover{
  background: var(--kb-indigo); color:#fff;
}

/* Fix modal inputs with explicit background/text colors */
.kb .form-control.bg-white, .kb .form-select.bg-white{
  background: #fff !important;
}
.kb .form-control.text-dark, .kb .form-select.text-dark{
  color: #1a202c !important;
}

/* Make form labels more visible */
.kb .form-label{
  color: rgba(255,255,255,.95);
  font-weight: 600;
}

/* Navbar polish */
.kb .navbar{ background: rgba(255,255,255,.12)!important; border-bottom:1px solid var(--kb-border); backdrop-filter: blur(8px); }
.kb .navbar .nav-link, .kb .navbar .navbar-brand{ color:#fff!important; font-weight:700; }
.kb .navbar .badge{ background: rgba(0,0,0,.3); }

/* Unlockable icon tiles */
.kb .icon-choice{
  background: rgba(255,255,255,.10);
  border: 2px dashed rgba(255,255,255,.30);
  border-radius: var(--kb-radius-md);
  padding: 12px;
  transition: transform .12s var(--kb-ease), box-shadow .12s var(--kb-ease);
}
.kb .icon-choice:hover{ transform: translateY(-2px); box-shadow: var(--kb-shadow-2); }
.kb .icon-choice.border-primary{ box-shadow: 0 0 0 3px var(--kb-lime); border-color: transparent!important; }

/* Utilities */
.kb .muted{ color: var(--kb-muted); }
.kb .shadow-soft{ box-shadow: var(--kb-shadow-1); }
.kb a{ color: #fff; }
.kb .text-warning{ color: #ffd056!important; }
.kb .text-primary{ color: #9ec3ff!important; }
.kb .bg-white{ background: rgba(255,255,255,.12)!important; }

/* Corner mascots (optional DOM imgs with these classes) */
.kb .kb-mascot{ position: fixed; z-index: 0; width: clamp(120px, 18vw, 260px); filter: drop-shadow(0 10px 30px rgba(0,0,0,.25)); opacity:.95; pointer-events:none; }
.kb .kb-mascot--tr{ top: 24px; right: 24px; transform: rotate(-2deg); }
.kb .kb-mascot--tl{ top: 24px; left: 24px; transform: rotate(2deg); }
.kb .kb-mascot--br{ bottom: 24px; right: 24px; transform: rotate(2deg); }
.kb .kb-mascot--bl{ bottom: 24px; left: 24px; transform: rotate(-2deg); }
@media (max-width: 560px){
  .kb .kb-mascot{ width: clamp(88px, 32vw, 160px); opacity: .7; }
}

/* Child page extras migrated from inline */
.kb[data-theme="child"] .goal-img { height: 80px; width: auto; object-fit: contain; }
@media (max-width:576px){ .kb[data-theme="child"] .goal-img { height: 64px; } }
.kb[data-theme="child"] .floating-star{
  position:fixed; pointer-events:none; font-size:18px; opacity:0; transform:translateY(0);
  transition:transform .8s ease, opacity .8s ease; z-index:9999;
}

/* Ensure sizing never overflows containers */
.kb, .kb * { box-sizing: border-box; }

/* Wrapper: centers content; hero sits behind via ::before */
.kb-login-wrap{
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: clamp(20px, 4vw, 48px);
}

/* Hero as background — never pushes layout */
.kb-login-wrap::before{
  content:"";
  position: fixed; /* stays put; doesn't affect layout */
  left: 3vw;
  bottom: 6vh;
  width: min(46vw, 560px);
  height: min(46vw, 560px);
  background: url("/assets/brand/kidbank-hero.png") no-repeat left bottom / contain;
  pointer-events: none;
  z-index: 0; /* behind cards (kb cards have z>0 via shadow) */
  filter: drop-shadow(0 18px 40px rgba(0,0,0,.25));
}

/* Headline */
.kb-login-head{ text-align: center; color:#fff; z-index: 1; }
.kb-login-heading{ font-size: clamp(28px, 5vw, 40px); font-weight: 900; margin: 6px 0 2px; }
.kb-login-sub{ font-size: clamp(14px, 2.2vw, 18px); color: rgba(255,255,255,.85); }

/* Card */
.kb-login-card{
  z-index: 1;
  padding: clamp(20px, 3.5vw, 28px);
  max-width: 520px;
  width: 100%;
  margin-inline: auto;
  overflow: hidden; /* clip any focus ring/eye overflow */
  backdrop-filter: blur(6px);
}

/* On wide screens, align card to the right to balance the hero */
@media (min-width: 992px){
  .kb-login-card{ margin-left: auto; }
}

/* Inputs + password eye */
.kb-input{
  width: 100%;
  background: rgba(255,255,255,.10);
  color:#fff;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 15px;
  outline: none;
}
.kb-input::placeholder{ color: rgba(255,255,255,.72); }
.kb-input:focus{
  box-shadow: 0 0 0 3px rgba(198,255,101,.25);
  border-color: rgba(198,255,101,.75);
}

.kb-password{ position: relative; width: 100%; }
.kb-password .kb-input{ padding-right: 46px; }
.kb-eye{
  position:absolute;
  right: 10px; top: 50%; transform: translateY(-50%);
  inline-size: 36px; block-size: 36px;
  display:grid; place-items:center;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  cursor: pointer;
}

/* Mobile: Move background hero to the top center and keep form higher */
@media (max-width: 920px){
  .kb-login-wrap{
    /* add top padding roughly equal to hero height so text/form don't overlap it */
    padding-top: calc(min(80vw, 520px) + 32px);
  }
  .kb-login-wrap::before{
    position: absolute; /* scoped to wrapper on mobile */
    left: 50%; transform: translateX(-50%);
    top: 24px; bottom: auto;
    width: min(80vw, 520px);
    height: min(80vw, 520px);
    background-position: center top;
  }
  .kb-login-card{ margin-inline: auto; } /* center card on phones */
}