/* ==========================================================================
   MISS J BIMBEL CENTER · Birthday popup (Mission: Birthday Popup)
   ---------------------------------------------------------------------------
   Two cheerful states, matching assets/missj-birthday-popup-reference.svg:
   .bp-theme-h1 (blue "H-1" reminder) and .bp-theme-today (red/gold
   "HARI INI!" celebration). Used both on the public homepage
   (assets/js/birthday-popup.js) and inside the admin Students/Teachers
   pages' preview buttons — same stylesheet, same component, so a preview
   is pixel-identical to what a real visitor sees.

   All motion here is hand-rolled CSS (no animation library) and is
   stripped to a simple fade under prefers-reduced-motion.
   ========================================================================== */

.bp-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(21, 35, 71, .5);
  opacity: 0;
  animation: bp-overlay-in .35s ease-out forwards;
}

@keyframes bp-overlay-in { to { opacity: 1; } }

.bp-card {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  overflow-x: hidden;
  background: #FFFDF9;
  border-radius: 34px;
  box-shadow: 0 22px 50px rgba(43, 64, 102, .28);
  border: 4px solid var(--bp-ring, #8ECDF3);
  transform: translateY(28px) scale(.9);
  opacity: 0;
  animation: bp-card-in .5s cubic-bezier(.2, .9, .3, 1.25) .08s forwards, bp-glow-pulse 2.8s ease-in-out 1s infinite alternate;
}

@keyframes bp-card-in {
  60% { opacity: 1; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

@keyframes bp-glow-pulse {
  from { box-shadow: 0 22px 50px rgba(43, 64, 102, .28), 0 0 0 0 var(--bp-glow, rgba(142, 205, 243, .35)); }
  to   { box-shadow: 0 22px 50px rgba(43, 64, 102, .28), 0 0 0 10px var(--bp-glow, rgba(142, 205, 243, 0)); }
}

.bp-theme-h1 {
  --bp-grad-a: #0B92F4; --bp-grad-b: #0755C8;
  --bp-ring: #8ECDF3; --bp-glow: rgba(11, 146, 244, .30);
  --bp-badge-text: #075CC7; --bp-kicker: #FF9E00; --bp-cta-text: #FFFFFF;
}

.bp-theme-today {
  --bp-grad-a: #FF6354; --bp-grad-b: #EE281F;
  --bp-ring: #D62456; --bp-glow: rgba(238, 40, 31, .28);
  --bp-badge-text: #E53127; --bp-kicker: #E53127; --bp-cta-text: #FFFFFF;
}

.bp-header {
  position: relative;
  padding: 22px 64px 22px 24px;
  background: linear-gradient(135deg, var(--bp-grad-a), var(--bp-grad-b));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  overflow: hidden;
}

.bp-header-title {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1rem, 3vw, 1.2rem);
  letter-spacing: .02em;
  white-space: nowrap;
}

.bp-badge {
  flex-shrink: 0;
  background: #fff;
  color: var(--bp-badge-text);
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  font-size: .85rem;
  padding: 8px 16px;
  border-radius: 999px;
  white-space: nowrap;
}

.bp-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, .95);
  color: var(--bp-badge-text);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .15);
  transition: transform .15s ease;
}
.bp-close:hover, .bp-close:focus-visible { transform: scale(1.08); }

.bp-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

.bp-sparkle {
  position: absolute;
  color: #fff;
  opacity: 0;
  font-size: 1.1rem;
  animation: bp-twinkle 2.4s ease-in-out infinite;
}
.bp-sparkle--1 { top: 14%; left: 10%; animation-delay: 0s; }
.bp-sparkle--2 { top: 60%; left: 88%; animation-delay: .6s; font-size: .8rem; }
.bp-sparkle--3 { top: 75%; left: 18%; animation-delay: 1.2s; font-size: .9rem; }

@keyframes bp-twinkle {
  0%, 100% { opacity: 0; transform: scale(.6) rotate(0deg); }
  50% { opacity: .9; transform: scale(1.15) rotate(20deg); }
}

.bp-balloon {
  position: absolute;
  width: 22px;
  height: 28px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  opacity: .85;
  animation: bp-float 5s ease-in-out infinite;
}
.bp-balloon--1 { top: 8%; right: 20%; background: #FFD941; animation-delay: 0s; }
.bp-balloon--2 { top: 22%; right: 8%; background: #FF9F09; width: 16px; height: 21px; animation-delay: 1.4s; }

@keyframes bp-float {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-10px) rotate(4deg); }
}

.bp-confetti {
  position: absolute;
  top: -10px;
  left: calc(var(--i, 0) * 8%);
  width: 7px;
  height: 12px;
  background: var(--confetti-color, #FFD22C);
  opacity: .9;
  animation: bp-confetti-fall 3.2s linear infinite;
  animation-delay: calc(var(--i, 0) * -0.35s);
  border-radius: 2px;
}

@keyframes bp-confetti-fall {
  0%   { transform: translateY(-10px) rotate(0deg); opacity: 0; }
  10%  { opacity: .95; }
  100% { transform: translateY(220px) rotate(340deg); opacity: 0; }
}

.bp-body {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 26px 28px 8px;
}

.bp-avatar {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  overflow: hidden;
  background: #EAF6FE;
  border: 3px solid var(--bp-ring, #8ECDF3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.bp-avatar-initials {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  color: #fff;
}

.bp-text { min-width: 0; }

.bp-kicker {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .03em;
  color: var(--bp-kicker);
  margin: 0 0 4px;
  text-transform: uppercase;
}

.bp-name {
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 4vw, 1.9rem);
  color: #2B4066;
  margin: 0 0 6px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.bp-message {
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #5E7194;
  margin: 0;
}

.bp-date-pill {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 18px;
  border-radius: 20px;
  background: #FFF3D6;
  border: 2px solid #FFC94D;
  color: #B66B00;
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  font-size: .95rem;
}

.bp-cta {
  display: block;
  width: calc(100% - 56px);
  margin: 18px 28px 6px;
  padding: 16px 20px;
  border: none;
  border-radius: 25px;
  background: linear-gradient(135deg, var(--bp-grad-a), var(--bp-grad-b));
  color: var(--bp-cta-text);
  font-family: 'Fredoka', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 10px 22px rgba(43, 64, 102, .18);
}
.bp-cta:hover, .bp-cta:focus-visible { transform: translateY(-2px); }

.bp-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 4px 24px 22px;
  flex-wrap: wrap;
}

.bp-footnote {
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: .8rem;
  color: #5E7194;
  text-align: center;
  margin: 0;
}

.bp-counter {
  font-family: 'Nunito', system-ui, sans-serif;
  font-weight: 700;
  font-size: .8rem;
  color: #5E7194;
  background: #FFF6E8;
  padding: 4px 12px;
  border-radius: 999px;
}

.bp-nav-btn {
  border: none;
  background: #FFF6E8;
  color: #2B4066;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.bp-nav-btn:hover, .bp-nav-btn:focus-visible { background: #FFF3D6; }

/* ---------- Mobile ---------- */
@media (max-width: 520px) {
  .bp-card { max-width: 100%; border-radius: 26px; }
  .bp-header { padding: 18px 56px 18px 18px; }
  .bp-header-title { display: none; }
  .bp-body { flex-direction: column; align-items: flex-start; padding: 22px 20px 4px; gap: 14px; }
  .bp-avatar { width: 72px; height: 72px; }
  .bp-cta { width: calc(100% - 40px); margin: 16px 20px 4px; }
  .bp-footer { padding: 4px 18px 20px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .bp-overlay { animation: none; opacity: 1; }
  .bp-card {
    animation: none;
    transform: none;
    opacity: 1;
  }
  .bp-sparkle, .bp-balloon, .bp-confetti { animation: none; display: none; }
}