/* Modern Colorful Carnival Theme
   Poppins (heading) + Inter (body)
   Fresh palette for vibrancy, clarity & accessibility
*/

/* ===========================
   Palette (Modern Carnival)
   =========================== */
:root{
  --primary-red:  #E63946; /* bold */
  --accent-yellow:#FFD166; /* vibrant */
  --fresh-green: #06D6A0; /* fresh */
  --bright-blue: #118AB2; /* contrast */
  --dark:        #1D1D1F;
  --muted:       #6C757D;
  --bg:          #F8F9FA;
  --glass:       rgba(255,255,255,0.06);
  --glass-2:     rgba(255,255,255,0.12);
  --card-shadow: 0 10px 30px rgba(17, 138, 178, 0.06);
  --radius-lg:   16px;
  --radius-md:   12px;
}

/* ---------------------------
   Base
   --------------------------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: var(--bg);
  color: var(--dark);
  margin:0;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.55;
}

/* Navbar */
.navbar{
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(14, 21, 33, 0.04);
  padding: .8rem 0;
}
.brand-badge{
  background: linear-gradient(135deg,var(--primary-red),var(--bright-blue));
  color:white;
  font-weight:800;
  padding:6px 10px;
  border-radius:8px;
  font-family:'Poppins',sans-serif;
}
.brand-title{
  font-weight:700;
  color:var(--dark);
  font-family:'Poppins',sans-serif;
}

/* Buttons */
.btn-cta{
  background: linear-gradient(90deg,var(--fresh-green),var(--accent-yellow));
  border: none;
  color: #0f1720;
  font-weight:700;
  padding: .6rem 1.2rem;
  border-radius: 999px;
  box-shadow: 0 8px 30px rgba(6,214,160,0.12);
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn-cta:hover{ transform: translateY(-3px); box-shadow: 0 18px 50px rgba(6,214,160,0.16); }
.btn-login{ background: transparent; border: 1px solid rgba(17,138,178,0.08); color:var(--dark); }

/* Hero */
.section-hero{
  position: relative;
  min-height: 88vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding-top:4.5rem;
}
.hero-media, .hero-image, .hero-video{ position:absolute; inset:0; z-index:1; }
.hero-video{ width:100%; height:100%; object-fit:cover; filter:brightness(.7) saturate(1.05); }
.hero-overlay{
  position:absolute; inset:0; z-index:2;
  background: linear-gradient(135deg, rgba(22,22,25,0.3), rgba(6,214,160,0.06) 60%);
}
.hero-content{ position:relative; z-index:4; padding: 80px 24px; max-width:1100px; }

/* Badges */
.pill{ padding:8px 12px; border-radius:999px; font-weight:600; display:inline-flex; gap:8px; align-items:center; }
.badge-athletes{ background: linear-gradient(90deg,var(--bright-blue),var(--fresh-green)); color:white; }
.badge-prizes{ background: linear-gradient(90deg,var(--accent-yellow),#FFB86B); color:#1D1D1D; }
.badge-org{ background: linear-gradient(90deg,#fff, rgba(255,255,255,0.06)); color:#111; border:1px solid rgba(0,0,0,0.05) }

/* Countdown */
.countdown-wrapper{ max-width:520px; margin:0 auto; }
.time-box{ min-width:86px; background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); border-radius:12px; padding:14px 12px; box-shadow: var(--card-shadow); }
.time-value{ font-size:2.4rem; font-weight:800; color:#fff; text-shadow: 0 6px 18px rgba(0,0,0,0.25); }
.time-unit{ font-size:.8rem; color:rgba(255,255,255,0.85); font-weight:600; text-transform:uppercase; letter-spacing:.6px }

/* Sections */
.section-announcements{ padding:4.5rem 0; position:relative; }
.glass{ background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); border-radius:var(--radius-lg); box-shadow: 0 6px 30px rgba(12,12,12,0.06); border:1px solid rgba(255,255,255,0.04); padding:8px; }

/* Announcement area */
.announcement-swiper-wrapper{ padding:12px; min-height:140px; overflow:visible; }
.announcement-card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:12px;
  padding:12px 16px;
  display:flex;
  align-items:flex-start;
  gap:14px;
  cursor:pointer;
  color:var(--dark);
  border-left:4px solid rgba(0,0,0,0.04);
  transition: transform .28s cubic-bezier(.2,.9,.3,1), box-shadow .28s;
}
.announcement-card .icon-wrap{ font-size:1.6rem; width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg,var(--bright-blue),var(--fresh-green)); color:white; flex-shrink:0;}
.announcement-card h6{ margin:0; font-weight:700; font-family:'Poppins',sans-serif; color:var(--dark) }
.announcement-card p{ margin:0; color:var(--muted); font-size:.92rem; }

.announcement-card:hover{ transform: translateY(-6px); box-shadow: 0 20px 40px rgba(17,138,178,0.06); }

/* Priority styles */
.ann-priority-high{ border-left-color: var(--primary-red); box-shadow: 0 14px 30px rgba(230,57,70,0.06); }
.ann-priority-medium{ border-left-color: var(--accent-yellow); box-shadow: 0 14px 30px rgba(255,209,102,0.06); }
.ann-priority-low{ border-left-color: var(--fresh-green); box-shadow: 0 14px 30px rgba(6,214,160,0.06); }

/* Pagination */
.announcement-pagination{ display:flex; gap:8px; align-items:center; justify-content:flex-start; padding-left:8px; }
.announcement-pagination .swiper-pagination-bullet{ width:10px; height:10px; background:rgba(0,0,0,0.08); border-radius:50% }
.announcement-pagination .swiper-pagination-bullet-active{ background:var(--dark); transform:scale(1.2); }

/* Weather card */
.weather-card{ border-radius:12px; padding:16px; box-shadow: var(--card-shadow); color:var(--dark); }
.weather-card img{ display:inline-block; margin-bottom:6px; }

/* Sport card */
.sport-card{ border-radius:12px; text-align:center; transition: transform .25s ease, box-shadow .25s ease; }
.sport-card img{ max-width:120px; border-radius:12px; margin: 0 auto 8px; box-shadow:0 12px 30px rgba(17,138,178,0.05); }
.sport-card:hover{ transform: translateY(-8px); box-shadow: 0 30px 60px rgba(17,138,178,0.06); }

/* ---------------------------
   Event Filters
   --------------------------- */
.event-filters {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.btn-filter {
  background: transparent;
  border-radius: 999px;
  border: 1px solid rgba(17,138,178,0.15);
  padding: 8px 14px;
  font-weight: 700;
  color: var(--dark);
  transition: all 0.3s ease;
}

.btn-filter:hover {
  background: rgba(17,138,178,0.05);
}

.btn-filter.active {
  background: linear-gradient(90deg, var(--bright-blue), var(--fresh-green));
  color: white;
  box-shadow: 0 8px 24px rgba(17,138,178,0.2);
}

/* ---------------------------
   Event Card (Glassmorphism)
   --------------------------- */
.event-card {
  border-radius: 16px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.event-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.15);
}

.event-card h5 {
  margin: 0;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--dark);
}

.event-card p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 0.95rem;
}

.event-card .badge {
  margin-top: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
}



/* Gallery */
#gallery .carousel-item .card{ border-radius:12px; overflow:hidden; box-shadow: 0 12px 40px rgba(0,0,0,0.06); }
#gallery img{ display:block; width:100%; height:220px; object-fit:cover }

/* Modal image */
#modalImage{ max-height:80vh; object-fit:contain; }

/* Sticky Upload */
.sticky-upload-btn{ position:fixed; right:28px; bottom:28px; display:flex; gap:10px; align-items:center; z-index:1060; }
.sticky-upload-btn button{ width:56px; height:56px; display:flex; align-items:center; justify-content:center; border-radius:50%; box-shadow: 0 12px 40px rgba(230,57,70,0.12); border:none }
.upload-label{ background:rgba(0,0,0,0.6); color:white; padding:6px 10px; border-radius:8px; font-weight:700; opacity:0; transform:translateY(4px); transition:all .18s; }
.sticky-upload-btn:hover .upload-label{ opacity:1; transform:translateY(0) }

/* Neon header */
.neon-3d{ font-family:'Poppins',sans-serif; color:var(--dark); font-weight:800; letter-spacing:0.6px; text-align:center; margin-bottom:2rem; }

.event-card lottie-player {
    min-width: 140px;
    min-height: 140px;
    background: rgba(0,0,0,0.02);
    border-radius: 12px;
    display: block;
    margin: 0 auto 16px;
}

/* Responsive */
@media (max-width: 768px){
  .time-value{ font-size:1.6rem; }
  .hero-content{ padding: 48px 18px; }
  .announcement-pagination{ justify-content:center; }
  .announcement-swiper-wrapper{ min-height:120px; }
  .upload-label{ display:none; }
}