/* ==========================================================================
   Pink N Blue Baby Super Market - Children's Day Talent Fest
   Brand Design System & Custom Styles (Mobile-First, 360px+ Ready)
   ========================================================================== */

:root {
  --background: #FFF9F5;
  --foreground: #1A2238;
  --brand-pink: #FF3EA5;
  --brand-pink-light: #FF6FB0;
  --brand-pink-pastel: #FFE3F0;
  --brand-blue: #2E86AB;
  --brand-sky: #5EC8F2;
  --brand-sky-pastel: #E3F5FF;
  --brand-amber: #FFC837;
  --brand-orange: #FF8A3D;
  --brand-emerald: #10B981;
  --font-quicksand: "Quicksand", "Noto Sans Tamil", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-fredoka: "Fredoka", "Quicksand", "Noto Sans Tamil", system-ui, sans-serif;
  --font-inter: "Inter", "Noto Sans Tamil", system-ui, -apple-system, sans-serif;
  --font-tamil: "Noto Sans Tamil", "Quicksand", sans-serif;
}

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-quicksand);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6, .font-display {
  font-family: var(--font-fredoka);
  color: var(--foreground);
}

/* Tamil Typography Comfort & Line Height */
.font-tamil, [lang="ta"] {
  font-family: var(--font-tamil);
  line-height: 1.75;
  letter-spacing: 0.01em;
}

/* Selection highlight matching mypinknblue.in */
::selection {
  background-color: #FF3EA5;
  color: #FFFFFF;
}

/* Custom Brand Scrollbar matching mypinknblue.in */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #FFF0F7;
}
::-webkit-scrollbar-thumb {
  background: #FF6FB0;
  border-radius: 9999px;
  border: 2px solid #FFF0F7;
}
::-webkit-scrollbar-thumb:hover {
  background: #FF3EA5;
}

/* Soft Brand Shadows */
.shadow-soft-sm {
  box-shadow: 0 2px 10px rgba(255, 62, 165, 0.08);
}
.shadow-soft-md {
  box-shadow: 0 8px 24px rgba(26, 34, 56, 0.08);
}
.shadow-soft-lg {
  box-shadow: 0 14px 34px rgba(255, 62, 165, 0.18);
}
.shadow-brand-card {
  box-shadow: 0 20px 50px rgba(46, 134, 171, 0.14);
}
.shadow-hero-card {
  box-shadow: 0 25px 60px rgba(46, 134, 171, 0.22);
}

/* Joyful Light Floating Animations */
@keyframes float-doodle {
  0%, 100% {
    transform: translate3d(0, calc(-1 * var(--doodle-y, 8px)), 0) rotate(calc(-1 * var(--doodle-rot, 4deg)));
  }
  50% {
    transform: translate3d(0, var(--doodle-y, 8px), 0) rotate(var(--doodle-rot, 4deg));
  }
}

@keyframes float-crown {
  0%, 100% {
    transform: translate3d(0, -6px, 0) rotate(-5deg) scale(1);
  }
  50% {
    transform: translate3d(0, 6px, 0) rotate(5deg) scale(1.05);
  }
}

@keyframes twinkle-star {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.85;
  }
  50% {
    transform: scale(1.18) rotate(12deg);
    opacity: 1;
  }
}

@keyframes wave-flow {
  0% {
    transform: translateZ(0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes swim-across {
  0% {
    transform: translate3d(-180px, 0, 0);
  }
  100% {
    transform: translate3d(calc(100vw + 50px), 0, 0);
  }
}

@keyframes sway-bunting {
  0%, 100% {
    transform: rotate(-1deg);
  }
  50% {
    transform: rotate(1deg);
  }
}

.floating-doodle-gpu {
  animation: float-doodle var(--doodle-dur, 5s) ease-in-out infinite;
  will-change: transform;
}

.floating-crown-gpu {
  animation: float-crown 4.2s ease-in-out infinite;
  will-change: transform;
}

.twinkle-star-gpu {
  animation: twinkle-star 3.5s ease-in-out infinite;
  will-change: transform, opacity;
}

.animate-wave-flow {
  animation: wave-flow 18s linear infinite;
  will-change: transform;
}

.animate-swim-across {
  animation: swim-across 22s linear infinite;
  will-change: transform;
}

.bunting-sway {
  animation: sway-bunting 6s ease-in-out infinite;
  transform-origin: top center;
}

/* Visually Hidden Utility (Accessible for Honeypot & Screen Readers) */
.visually-hidden {
  position: absolute;
  clip-path: inset(50%);
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  white-space: nowrap;
}

/* Form Controls & Deferred Validation (:user-invalid & Fallback) */
.form-input,
.form-select {
  width: 100%;
  font-size: 1rem; /* >= 16px prevents iOS auto-zoom */
  min-height: 52px;
  padding: 0.75rem 1rem;
  border-radius: 1rem;
  border: 2px solid #FBCFE8; /* pink-200 */
  background-color: #FFFFFF;
  color: #1A2238;
  font-weight: 600;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.form-input::placeholder {
  color: #9CA3AF;
  font-weight: 500;
}

.form-input:hover,
.form-select:hover {
  border-color: #F472B6;
}

.form-input:focus-visible,
.form-select:focus-visible {
  outline: 3px solid rgba(255, 62, 165, 0.35);
  outline-offset: 2px;
  border-color: #FF3EA5;
  background-color: #FFFFFF;
}

/* Custom Dropdown Arrow for <select> */
.form-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23FF3EA5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1.25rem;
  padding-right: 2.75rem;
}

/* Modern Web Guidance: :user-invalid & .user-invalid-fallback */
.form-input:user-invalid,
.form-select:user-invalid,
.form-input.user-invalid-fallback,
.form-select.user-invalid-fallback {
  border-color: #DC2626;
  background-color: #FEF2F2;
}

.form-input:user-valid,
.form-select:user-valid,
.form-input.user-valid-fallback,
.form-select.user-valid-fallback {
  border-color: #10B981;
}

.field-error {
  display: none;
  color: #B91C1C;
  font-size: 0.85rem;
  font-weight: 700;
  margin-top: 0.375rem;
  align-items: center;
  gap: 0.35rem;
}

.form-input:user-invalid ~ .field-error,
.form-select:user-invalid ~ .field-error,
.form-input.user-invalid-fallback ~ .field-error,
.form-select.user-invalid-fallback ~ .field-error,
.field-error.is-visible {
  display: flex;
}

/* Native Checkbox & Radio Accent Color & Touch Target */
input[type="checkbox"],
input[type="radio"] {
  accent-color: #FF3EA5;
  width: 1.35rem;
  height: 1.35rem;
  cursor: pointer;
  flex-shrink: 0;
}

/* Competition Multi-Select Card Checkboxes */
.comp-checkbox-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 56px;
  padding: 0.75rem 1rem;
  border-radius: 1rem;
  border: 2px solid #E5E7EB;
  background-color: #FFFFFF;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.comp-checkbox-card:hover {
  border-color: #F9A8D4;
  background-color: #FFF9FB;
}

.comp-checkbox-card:has(input:checked) {
  border-color: #FF3EA5;
  background-color: #FFE3F0;
  box-shadow: 0 4px 14px rgba(255, 62, 165, 0.14);
}

.comp-checkbox-card:has(input:focus-visible) {
  outline: 3px solid #2E86AB;
  outline-offset: 2px;
}

/* Semantic Indeterminate <progress> Loading Spinner (Modern Web Guidance) */
@property --arc-start {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@property --arc-end {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@property --progress-dash-animation {
  syntax: "*";
  inherits: false;
  initial-value: , progress-dash 3s ease-in-out infinite;
}

progress.loading-spinner:indeterminate::-webkit-progress-bar,
progress.loading-spinner:indeterminate::-webkit-progress-value,
progress.loading-spinner:indeterminate::-moz-progress-bar {
  display: none;
  background: none;
}

progress.loading-spinner[hidden],
progress.loading-spinner.hidden {
  display: none !important;
}

progress.loading-spinner:indeterminate {
  --_from: calc(90deg + var(--arc-start, 0deg));
  --_to: calc(90deg + var(--arc-end, 158deg));
  --size: 22px;
  --thickness: 3px;
  --spinner-color: #FFFFFF;
  --track-color: rgba(255, 255, 255, 0.3);
  --spinner-duration: 1.2s;
  --_used-spinner-duration: var(--spinner-duration);

  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  appearance: none;
  border: 0;
  background: conic-gradient(
      from var(--_from),
      var(--spinner-color) calc(var(--_to) - var(--_from)),
      transparent 0
    )
    var(--track-color);

  animation:
    progress-spin var(--_used-spinner-duration) linear infinite
    var(--progress-dash-animation, );
}

@supports (background-clip: border-area) {
  progress.loading-spinner:indeterminate {
    background-clip: border-area;
    border: var(--thickness) solid transparent;
    background-origin: border-box;
  }
}

@supports not (background-clip: border-area) {
  progress.loading-spinner:indeterminate {
    --clip-boundary: calc(100% - var(--thickness));
    -webkit-mask-image: radial-gradient(
      farthest-side,
      transparent var(--clip-boundary),
      black var(--clip-boundary)
    );
    mask-image: radial-gradient(
      farthest-side,
      transparent var(--clip-boundary),
      black var(--clip-boundary)
    );
    border: 0;
  }
}

@keyframes progress-spin {
  to {
    rotate: 1turn;
  }
}

@keyframes progress-dash {
  from {
    --arc-start: 0deg;
    --arc-end: 3deg;
  }
  50% {
    --arc-start: 100deg;
    --arc-end: 358deg;
  }
  to {
    --arc-start: 360deg;
    --arc-end: 363deg;
  }
}

/* Reduced Motion Accessibility */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .floating-doodle-gpu,
  .floating-crown-gpu,
  .twinkle-star-gpu,
  .animate-wave-flow,
  .animate-swim-across,
  .bunting-sway {
    animation: none !important;
  }
  progress.loading-spinner:indeterminate {
    --_used-spinner-duration: 6s;
  }
}

/* 360px Ultra-Small Screen Refinements */
@media (max-width: 380px) {
  .countdown-box {
    min-width: 68px;
    padding: 0.5rem 0.35rem;
  }
  .hero-title-text {
    font-size: 1.85rem;
    line-height: 1.18;
  }
}