/* Mulai Gym Styles - Mobile First */

/* Import Poppins font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
  /* Theme colors based on mockups */
  --primary: #4B4BEC;
  --secondary: #BEF006;
  --dark: #343434;
  --light: #FFFFFF;
  --background: #F5F5F5;
  --gray: #757575;
  --outline-button-border-width: 3px;
  --navbar-height: 7.5vh; /* Variable for navbar height */
}

/* Bootstrap Overrides */
.text-primary {
  color: var(--primary) !important;
}

.text-secondary {
  color: var(--secondary) !important;
}

/* Ensure specificity for button outlines if needed */
.btn-outline-secondary.text-secondary {
  color: var(--secondary) !important;
}

body {
  font-family: 'Poppins', sans-serif;
  background-color: var(--primary);
  color: var(--light);
  margin: 0;
  padding-top: var(--navbar-height); /* Use variable */
  overflow-x: hidden;
}

/* Navbar styling */
.navbar {
  background: linear-gradient(90deg, #4B4BEC, #6464ef) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  text-align: center;
  height: var(--navbar-height); /* Use variable */
  display: flex;
  align-items: center;
}

.navbar-brand {
  color: var(--light) !important;
  font-weight: 700;
  font-size: 1.5rem;
  margin: 0 auto;
}

.navbar-toggler {
  border: none;
  color: var(--light);
  position: absolute;
  right: 20px;
}

.navbar-toggler i {
  font-size: 1.5rem;
}

/* Buttons */
.btn-primary {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--light) !important;
  border-radius: 8px;
  font-weight: 600;
  padding: 10px 20px;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #3939d1;
  border-color: #3939d1;
}

.btn-secondary {
  background-color: var(--secondary);
  border-color: var(--secondary);
  border-radius: 24px;
  font-weight: 600;
  padding: 10px 24px;
  color: var(--primary) !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
  background-color: #a8d700;
  border-color: #a8d700;
  color: var(--primary) !important;
}

.btn-outline-primary {
  color: var(--primary);
  border-color: var(--primary);
  border-radius: 8px;
  font-weight: 600;
  padding: 10px 20px;
  border-width: var(--outline-button-border-width);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--primary);
  color: var(--light);
  border-width: var(--outline-button-border-width);
}

.btn-outline-secondary {
  color: var(--secondary);
  border-color: var(--secondary);
  border-radius: 24px;
  font-weight: 600;
  padding: 10px 24px;
  border-width: var(--outline-button-border-width);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background-color: var(--secondary);
  color: var(--dark);
  border-width: var(--outline-button-border-width);
}

/* Hero section */
.hero-title {
  font-weight: 700;
  color: var(--secondary);
  margin-bottom: 1.5rem;
  font-size: 2.5rem;
  text-transform: uppercase;
}

/* Feature section */
.feature-section {
  background-color: var(--primary);
  padding: 3rem 1rem;
}

.section-heading {
  color: var(--light);
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 2rem;
}

.feature-icon {
  background-color: var(--light);
  color: var(--primary);
  width: 80px;
  height: 80px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  font-size: 1.5rem;
}

.feature-title {
  font-weight: 600;
  color: var(--light);
  margin-bottom: 0.5rem;
  text-align: center;
}

.feature-text {
  color: var(--light);
  opacity: 0.8;
  text-align: center;
}

/* Section styling */
.section {
  padding: 3rem 1rem;
  background-color: var(--primary);
}

.section-title {
  font-weight: 700;
  margin-bottom: 2rem;
  text-align: center;
  font-size: 1.75rem;
  color: var(--light);
}

/* Forms */
.form-control {
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid #ddd;
}

.form-control::placeholder {
  color: #9393ee !important;
  opacity: 1;
}

.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.25rem rgba(75, 75, 236, 0.25);
}

.form-label {
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--light);
}

/* Offcanvas menu */
.offcanvas {
  background-color: var(--primary);
  width: 50% !important;
  max-width: 50%;
  top: var(--navbar-height); /* Use variable */
  height: calc(100vh - var(--navbar-height) - 10vh); /* Use viewport height percentage instead of fixed pixels */
  margin-top: 0;
  box-sizing: border-box;
  z-index: 1040; /* Below navbar but above backdrop */
  border-top-left-radius: 16px; /* Round the top left corner */
  border-top: none; /* Remove the transparent border */
  position: fixed; /* Fix positioning */
  overflow-y: auto; /* Add scrolling for content that may be cut off */
}

/* Keep navbar above offcanvas backdrop */
.offcanvas-backdrop {
  z-index: 999;
}

.offcanvas-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.offcanvas-title {
  color: var(--light) !important;
}

.offcanvas-header .btn-close {
  background-color: var(--light);
  opacity: 1;
}

.offcanvas-body .nav-link {
  color: var(--light) !important;
  font-size: 1.2rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: 700;
}

.offcanvas-body .nav-link:hover,
.offcanvas-body .nav-link.active {
  color: var(--secondary) !important;
}

/* For smaller devices, ensure offcanvas is not too small */
@media (max-width: 576px) {
  .offcanvas {
    width: 50% !important;
    max-width: none;
  }
}

/* Cards */
.card {
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
  margin-bottom: 1.5rem;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.card-title {
  font-weight: 600;
}

/* Footer */
footer {
  background-color: #3a3ad1 !important;
}

/* Mobile container for consistent mobile view */
.mobile-container {
  max-width: 576px;
  margin: 0 auto;
  background-color: var(--primary);
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding-top: 0; /* Remove any additional top padding as body padding handles it */
}

/* Promo box */
.promo-box {
  background: linear-gradient(90deg, #bef006, #ffffff);
  color: var(--primary);
  border-radius: 15px;
  padding: 15px 30px;
  display: inline-block;
  font-weight: bold;
  font-style: italic;
  text-align: left;
}

/* Media Queries */
@media (min-width: 768px) {
  .content-wrapper {
    width: 60%;
  }
  
  .hero-section {
    text-align: left;
    padding: 4rem 2rem;
    margin-top: 0; /* Remove this since we have body padding already */
  }
  
  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-subtitle {
    font-size: 1.2rem;
    color: var(--light);
  }
  
  .section {
    padding: 5rem 2rem;
  }
  
  .section-title {
    font-size: 2.25rem;
    color: var(--light);
  }
  
  .section.bg-white .section-title {
    color: var(--light);
  }
  
  .section.bg-white {
    background-color: var(--primary) !important;
  }
}

/* Ensure content containers have proper spacing */
.container, .mobile-container {
  padding-top: 0; /* Remove any additional top padding as body padding handles it */
}

/* Full width container overrides */
.container-fluid {
  padding-left: 0 !important;
  padding-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.container-fluid.px-4 {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

section {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Feature cards */
.feature-cards {
  padding: 0.5rem;
  margin: 0 auto;
  max-width: 100%;
}

.feature-card {
  overflow: hidden;
  border-radius: 0.5rem;
  margin-bottom: 1.25rem;
}

.feature-card .feature-icon {
  width: 100%;
  height: 100%;
  padding: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.feature-card .feature-content {
  border-top-right-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  padding: 0.75rem 1rem;
  min-height: 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.feature-card h3 {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 0.1rem;
  line-height: 1.2;
}

.feature-card p {
  font-size: 0.9rem;
  line-height: 1.2;
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .feature-cards {
    padding: 1rem;
    max-width: 90%;
  }
  
  .feature-card {
    margin-bottom: 1.5rem;
  }
  
  .feature-card h3 {
    font-size: 1.5rem;
  }
  
  .feature-card p {
    font-size: 1.1rem;
  }
  
  .feature-card .feature-content {
    min-height: 80px;
  }
}

@keyframes dancing {
  0% { transform: translateX(0) rotate(0deg); }
  25% { transform: translateX(15px) rotate(2deg); }
  50% { transform: translateX(0) rotate(0deg); }
  75% { transform: translateX(-15px) rotate(-2deg); }
  100% { transform: translateX(0) rotate(0deg); }
}

.dancing-text-top {
  animation: dancing 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  display: inline-block;
}

.dancing-text-bot {
  animation: dancing 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  animation-delay: 0.75s;
  display: inline-block;
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(15px); }
  50% { transform: translateX(0); }
  75% { transform: translateX(-15px); }
  100% { transform: translateX(0); }
}

.shake-text-top {
  animation: shake 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  display: inline-block;
}

.shake-text-bot {
  animation: shake 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  animation-delay: 1s;
  display: inline-block;
}

/* Membership Tier Colors */
/* Bronze/Copper Tier - Gym Reguler */
.tier-bronze {
  background: linear-gradient(135deg, #faf0e6 0%, #e6b87d 25%, #cd7f32 50%, #b8722c 75%, #e8c5a0 100%);
  border: 2px solid #b8722c;
  box-shadow: 0 6px 15px rgba(205, 127, 50, 0.4), inset 0 1px 4px rgba(255, 255, 255, 0.7), inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}

.tier-bronze-strong {
  background: linear-gradient(135deg, #faf0e6 0%, #e6b87d 25%, #cd7f32 50%, #b8722c 75%, #e8c5a0 100%);
  border: 2px solid #b8722c;
  box-shadow: 0 12px 35px rgba(205, 127, 50, 0.8), inset 0 2px 8px rgba(255, 255, 255, 0.7), inset 0 -2px 4px rgba(0, 0, 0, 0.1);
}

/* Silver Tier - Kelas Pemula */
.tier-silver {
  background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 25%, #d5d5d5 50%, #c8c8c8 75%, #e0e0e0 100%);
  border: 2px solid #b8b8b8;
  box-shadow: 0 6px 15px rgba(180, 180, 180, 0.4), inset 0 1px 4px rgba(255, 255, 255, 0.7), inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}

.tier-silver-strong {
  background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 25%, #d5d5d5 50%, #c8c8c8 75%, #e0e0e0 100%);
  border: 2px solid #b8b8b8;
  box-shadow: 0 12px 35px rgba(180, 180, 180, 0.8), inset 0 2px 8px rgba(255, 255, 255, 0.7), inset 0 -2px 4px rgba(0, 0, 0, 0.1);
}

/* Gold Tier - Semi Private */
.tier-gold {
  background: linear-gradient(135deg, #faf6e8 0%, #f7e98e 25%, #f4d03f 50%, #f1c40f 75%, #f8e596 100%);
  border: 2px solid #d4ac0d;
  box-shadow: 0 6px 15px rgba(244, 208, 63, 0.4), inset 0 1px 4px rgba(255, 255, 255, 0.7), inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}

.tier-gold-strong {
  background: linear-gradient(135deg, #faf6e8 0%, #f7e98e 25%, #f4d03f 50%, #f1c40f 75%, #f8e596 100%);
  border: 2px solid #d4ac0d;
  box-shadow: 0 12px 35px rgba(244, 208, 63, 0.8), inset 0 2px 8px rgba(255, 255, 255, 0.7), inset 0 -2px 4px rgba(0, 0, 0, 0.1);
}

/* Semi Private - luxury/Gojek style (ribbon, bright gold gradient, sparkle) */
.tier-gold-luxury {
  background: linear-gradient(135deg, #fffde7 0%, #fef9c3 25%, #fef08a 50%, #fde047 75%, #fef3c7 100%);
  border: 2px solid #eab308;
  box-shadow: 0 10px 30px rgba(250, 204, 21, 0.35), inset 0 1px 4px rgba(255, 255, 255, 0.8);
  position: relative;
  overflow: hidden;
  padding-top: 36px !important;
}

.tier-gold-luxury-ribbon {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(90deg, #ca8a04, #eab308, #facc15);
  color: #1c1917;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 5px 12px;
  text-align: center;
  overflow: hidden;
}

.tier-gold-luxury-ribbon::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 50%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg);
  animation: ramadanRibbonShimmer 4s ease-in-out infinite;
  pointer-events: none;
}

.tier-gold-luxury-ribbon i {
  font-size: 0.55rem;
  margin-right: 4px;
}

/* Diamond/Blue Tier - Private Trainer */
.tier-diamond {
  background: linear-gradient(135deg, #f0f8ff 0%, #d6ebff 25%, #b9f2ff 50%, #9de8ff 75%, #d1f0ff 100%);
  border: 2px solid #5bb3e6;
  box-shadow: 0 6px 15px rgba(185, 242, 255, 0.4), inset 0 1px 4px rgba(255, 255, 255, 0.7), inset 0 -1px 2px rgba(0, 0, 0, 0.1);
}

.tier-diamond-strong {
  background: linear-gradient(135deg, #f0f8ff 0%, #d6ebff 25%, #b9f2ff 50%, #9de8ff 75%, #d1f0ff 100%);
  border: 2px solid #5bb3e6;
  box-shadow: 0 12px 35px rgba(185, 242, 255, 0.8), inset 0 2px 8px rgba(255, 255, 255, 0.7), inset 0 -2px 4px rgba(0, 0, 0, 0.1);
}

/* Tier indicator dots */
.tier-bronze .tier-dot {
  background-color: #cd7f32;
}

.tier-silver .tier-dot, .tier-silver-strong .tier-dot {
  background-color: #c0c0c0;
}

.tier-gold .tier-dot, .tier-gold-strong .tier-dot {
  background-color: #ffd700;
}

.tier-diamond .tier-dot, .tier-diamond-strong .tier-dot {
  background-color: #b9f2ff;
}

/* Class list page - purple background, no white borders */
.classes-list-page .list-group,
.classes-list-page .list-group-item {
  background-color: transparent !important;
}

.classes-list-page {
  background-color: transparent;
}

/* Homepage: Google rating badge + curated member reviews */
.reviews-section {
  padding: 10px 0 40px;
  color: var(--light);
  /* Kenapa Mulai above is min-height:100vh and ends well short of its own
     bottom, so close some of that dead space without touching the section. */
  margin-top: -6vh;
}

.reviews-title {
  font-weight: 700;
  font-size: 1.6rem;
  text-align: center;
  margin-bottom: 14px;
}

.reviews-badge {
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 20px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #fff;
  color: var(--dark);
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(20, 20, 80, 0.2);
}

.reviews-badge:hover {
  color: var(--dark);
  box-shadow: 0 10px 26px rgba(20, 20, 80, 0.28);
}

.reviews-badge-score {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  color: var(--primary);
}

.reviews-badge-meta {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.reviews-badge-stars {
  color: #f5a623;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

.reviews-badge-count {
  font-size: 0.78rem;
  color: var(--gray);
  white-space: nowrap;
}

.reviews-badge-go {
  font-size: 0.75rem;
  color: var(--gray);
}

/* Swipeable on phones, so a long review does not turn into a wall of text */
.reviews-scroller {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 0 14px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.reviews-scroller::-webkit-scrollbar {
  display: none;
}

.review-card {
  flex: 0 0 86%;
  scroll-snap-align: center;
  margin: 0;
  padding: 16px;
  border-radius: 16px;
  background: #fff;
  color: var(--dark);
  text-align: left;
  box-shadow: 0 6px 18px rgba(20, 20, 80, 0.16);
  display: flex;
  flex-direction: column;
}

.review-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.review-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
}

.review-name {
  margin: 0;
  font-weight: 700;
  font-size: 0.95rem;
}

.review-stars {
  color: #f5a623;
  font-size: 0.72rem;
  letter-spacing: 1px;
}

.review-text {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #444;
  white-space: pre-line;
}

.review-link {
  margin-top: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
}

.reviews-cta {
  display: inline-block;
  margin-top: 6px;
  padding: 10px 22px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.7);
  color: var(--light);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}

.reviews-cta:hover {
  background: #fff;
  color: var(--primary);
}

/* No wrap-to-grid at wider viewports on purpose. The homepage lives inside a
   500px .mobile-container at every screen size, so a min-width media query fires
   while the column is still narrow and turns the carousel into one tall stack of
   full-width cards. It stays a swipe carousel everywhere. */

/* Membership expiry / come back nudge on the account page */
.membership-nudge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 14px;
  color: #fff;
  box-shadow: 0 8px 22px rgba(20, 20, 80, 0.18);
}

.membership-nudge-body {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 200px;
  flex: 1 1 240px;
}

.membership-nudge-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  font-size: 1rem;
}

.membership-nudge-warning {
  background: linear-gradient(135deg, #f0a500 0%, #e08600 100%);
}

.membership-nudge-urgent {
  background: linear-gradient(135deg, #f2683c 0%, #de4b2a 100%);
}

/* Sits on the purple page background, so it needs an edge to read as a card */
.membership-nudge-expired {
  background: linear-gradient(135deg, #7a72ff 0%, #5751f0 100%);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

/* No-show record on the account page. Three levels: a locked booking, a warning
   on the last free strike, and a quiet history line. Sits on the purple page
   background, so each level brings its own surface. */
.class-penalty {
  padding: 14px 16px;
  border-radius: 14px;
  color: #fff;
  box-shadow: 0 8px 22px rgba(20, 20, 80, 0.18);
}

.class-penalty-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.class-penalty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  font-size: 0.95rem;
}

.class-penalty-banned {
  background: linear-gradient(135deg, #f2683c 0%, #de4b2a 100%);
}

.class-penalty-warning {
  background: linear-gradient(135deg, #f0a500 0%, #e08600 100%);
}

/* The history state is not bad news, so it stays quiet against the purple */
.class-penalty-history {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.32);
  box-shadow: none;
}

.class-penalty-list {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.28);
  font-size: 0.78rem;
}

.class-penalty-miss {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 2px 0;
}

.class-penalty-date {
  opacity: 0.85;
  white-space: nowrap;
}

.class-penalty-more {
  opacity: 0.8;
  font-style: italic;
  padding-top: 2px;
}

/* Visit habit tiles on the account page */
.habit-stat + .habit-stat {
  border-left: 1px solid #eee;
}

.habit-stat-icon {
  color: var(--primary);
  font-size: 0.95rem;
}

.habit-stat-value {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--dark);
  line-height: 1.1;
}

.habit-stat-label {
  font-size: 0.68rem;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ===== Belajar Gizi ===================================================== */

.gizi-lead {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  max-width: 30rem;
  margin: 0 auto 1.25rem;
}

/* Progress ring, drawn with a conic gradient so no JS or SVG is needed */
.gizi-ring {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: conic-gradient(var(--primary) calc(var(--pct) * 1%), #e9e9f5 0);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gizi-ring span {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--dark);
}

.gizi-level-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--gray);
}

.gizi-level-name {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--dark);
  line-height: 1.2;
}

.gizi-level-note {
  font-size: 0.78rem;
  color: var(--gray);
}

.gizi-chapter-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  margin-bottom: 12px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(20, 20, 80, 0.12);
  text-decoration: none;
  color: inherit;
}

.gizi-chapter-card:hover {
  text-decoration: none;
  color: inherit;
  transform: translateY(-2px);
  transition: transform 0.2s;
}

.gizi-chapter-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(75, 75, 236, 0.1);
  color: var(--primary);
  font-size: 1.1rem;
}

.gizi-chapter-kicker {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--primary);
  font-weight: 700;
}

.gizi-chapter-title {
  font-weight: 700;
  color: var(--dark);
  line-height: 1.2;
}

.gizi-chapter-sub {
  font-size: 0.8rem;
  color: var(--gray);
  line-height: 1.3;
}

.gizi-chapter-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
  font-size: 0.7rem;
  color: var(--gray);
}

.gizi-chapter-score {
  color: #1f8f4e;
  font-weight: 700;
}

.gizi-chapter-go {
  flex-shrink: 0;
  color: #c9c9dd;
}

.gizi-medal {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f6;
  color: #b9b9c9;
  font-size: 1rem;
}

.gizi-medal-lg {
  width: 60px;
  height: 60px;
  margin: 0 auto 8px;
  font-size: 1.6rem;
}

.gizi-medal-emas {
  background: linear-gradient(135deg, #ffe07a 0%, #f0a500 100%);
  color: #7a5200;
}

.gizi-medal-perak {
  background: linear-gradient(135deg, #f2f2f6 0%, #c2c2cf 100%);
  color: #5c5c66;
}

.gizi-medal-perunggu {
  background: linear-gradient(135deg, #f0cba8 0%, #c98a4b 100%);
  color: #6b3f16;
}

.gizi-levels {
  margin-top: 1.25rem;
  text-align: center;
}

.gizi-levels-title {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 6px;
}

.gizi-level-chip {
  display: inline-block;
  margin: 0 3px 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 0.7rem;
}

.gizi-level-chip.is-current {
  background: #fff;
  color: var(--primary);
  font-weight: 700;
}

/* --- the chapter stepper --- */
.gizi-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.gizi-topbar-count {
  margin-left: auto;
  flex-shrink: 0;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
}

.gizi-back {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.gizi-back:hover {
  background: rgba(255, 255, 255, 0.3);
  color: #fff;
}

.gizi-topbar-title {
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
}

.gizi-stepbar {
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  overflow: hidden;
  margin-bottom: 14px;
}

.gizi-stepbar-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--secondary);
  transition: width 0.25s ease;
}

.gizi-step[hidden] {
  display: none;
}

/* Each step rises in as it becomes the current one. `is-live` is added by the
   script, so a browser with JS off never animates and never waits. */
.gizi-step.is-live > * {
  animation: mgRise 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes mgRise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.gizi-card {
  background: #fff;
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 12px;
  box-shadow: 0 6px 20px rgba(20, 20, 80, 0.14);
}

.gizi-card-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.3;
  margin-bottom: 10px;
}

.gizi-card-body {
  font-size: 0.9rem;
  line-height: 1.55;
  color: #4a4a55;
  margin-bottom: 10px;
}

.gizi-highlight {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(75, 75, 236, 0.08);
  color: var(--primary);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.4;
}

.gizi-note {
  margin-top: 8px;
  font-size: 0.7rem;
  color: var(--gray);
  font-style: italic;
}

.gizi-quiz-kicker {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--primary);
  font-weight: 700;
  margin-bottom: 6px;
}

.gizi-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gizi-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 12px;
  border: 2px solid #e8e8f0;
  border-radius: 12px;
  background: #fff;
  text-align: left;
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--dark);
  transition: transform 0.12s ease, border-color 0.15s ease, background 0.15s ease;
}

.gizi-choice:active {
  transform: scale(0.98);
}

.gizi-choice:disabled {
  opacity: 1; /* a disabled choice is still the answer, keep it readable */
}

.gizi-choice-key {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f0f0f7;
  color: var(--gray);
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gizi-choice.is-correct {
  border-color: #2fa15e;
  background: rgba(47, 161, 94, 0.08);
}

.gizi-choice.is-correct .gizi-choice-key {
  background: #2fa15e;
  color: #fff;
}

.gizi-choice.is-wrong {
  border-color: #e0655a;
  background: rgba(224, 101, 90, 0.08);
  animation: giziShake 0.32s ease;
}

.gizi-choice.is-wrong .gizi-choice-key {
  background: #e0655a;
  color: #fff;
}

/* The one they tapped, when it was right: a small pop so the tap feels answered */
.gizi-choice.is-picked {
  animation: giziPop 0.34s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes giziPop {
  0% { transform: scale(1); }
  45% { transform: scale(1.035); }
  100% { transform: scale(1); }
}

@keyframes giziShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.gizi-explain {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}

.gizi-explain[hidden] {
  display: none;
}

.gizi-verdict {
  font-weight: 700;
  margin-bottom: 4px;
}

.gizi-verdict.is-correct {
  color: #2fa15e;
}

.gizi-verdict.is-wrong {
  color: #e0655a;
}

/* --- the feedback sheet: slides up over the thumb after an answer --- */
.gizi-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1035;
  transform: translateY(102%);
  transition: transform 0.26s cubic-bezier(0.16, 1, 0.3, 1);
  background: #fff;
  border-radius: 20px 20px 0 0;
  border-top: 4px solid #d8d8e4;
  box-shadow: 0 -10px 30px rgba(20, 20, 80, 0.22);
}

.gizi-sheet[hidden] {
  display: none;
}

.gizi-sheet.is-open {
  transform: translateY(0);
}

.gizi-sheet-inner {
  max-width: 680px;
  margin: 0 auto;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
}

.gizi-sheet-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.gizi-sheet-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.85rem;
  background: #b9b9c9;
}

.gizi-sheet-verdict {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--dark);
}

.gizi-sheet-text {
  font-size: 0.88rem;
  line-height: 1.55;
  color: #4a4a55;
  margin-bottom: 12px;
}

.gizi-sheet.is-right {
  border-top-color: #2fa15e;
}

.gizi-sheet.is-right .gizi-sheet-icon {
  background: #2fa15e;
}

.gizi-sheet.is-right .gizi-sheet-verdict {
  color: #1f8f4e;
}

.gizi-sheet.is-wrong {
  border-top-color: #e0655a;
}

.gizi-sheet.is-wrong .gizi-sheet-icon {
  background: #e0655a;
}

.gizi-sheet.is-wrong .gizi-sheet-verdict {
  color: #c1483d;
}

/* --- true / false rows --- */
.gizi-verdicts {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.gizi-verdict-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  animation: mgRise 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--i) * 60ms);
}

.gizi-verdict-mark {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-top: 1px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.7rem;
}

.gizi-verdict-mark.is-true {
  background: #2fa15e;
}

.gizi-verdict-mark.is-false {
  background: #e0655a;
}

.gizi-verdict-claim {
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--dark);
  line-height: 1.3;
}

.gizi-verdict-note {
  font-size: 0.8rem;
  line-height: 1.45;
  color: #4a4a55;
}

/* --- the two data blocks --- */
.gizi-bars {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.gizi-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gizi-bar-label {
  flex: 0 0 38%;
  font-size: 0.76rem;
  color: var(--dark);
  line-height: 1.2;
}

.gizi-bar-track {
  flex: 1 1 auto;
  height: 14px;
  border-radius: 4px;
  background: #f2f2f8;
  overflow: hidden;
}

.gizi-bar {
  height: 100%;
  border-radius: 4px;
  background: var(--primary);
  transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.gizi-bar.is-muted {
  background: #c9c9dd;
}

.gizi-bar-value {
  flex: 0 0 2.2rem;
  text-align: right;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--dark);
}

.gizi-bar-unit {
  margin-top: 6px;
  text-align: right;
  font-size: 0.68rem;
  color: var(--gray);
}

.gizi-swap {
  display: flex;
  gap: 8px;
}

.gizi-plate {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px;
  border-radius: 12px;
  background: #f6f6fa;
}

.gizi-plate.is-after {
  background: rgba(75, 75, 236, 0.08);
}

.gizi-plate-label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  color: var(--gray);
  margin-bottom: 6px;
}

.gizi-plate.is-after .gizi-plate-label {
  color: var(--primary);
}

.gizi-plate-items {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  font-size: 0.76rem;
  line-height: 1.45;
  color: #4a4a55;
}

.gizi-plate-stat {
  font-size: 0.76rem;
  color: var(--gray);
}

.gizi-plate-stat strong {
  color: var(--dark);
}

.gizi-swap-delta {
  display: flex;
  gap: 8px;
  margin: 12px 0;
}

.gizi-swap-delta span {
  flex: 1 1 0;
  text-align: center;
  padding: 6px;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  background: #f2f2f8;
  color: var(--gray);
}

.gizi-swap-delta .is-good {
  background: rgba(47, 161, 94, 0.1);
  color: #1f8f4e;
}

.gizi-swap-delta .is-up {
  background: rgba(224, 101, 90, 0.1);
  color: #c1483d;
}

/* --- the result screen --- */
.gizi-medal-lg.is-live {
  animation: giziMedalIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes giziMedalIn {
  0% { opacity: 0; transform: scale(0.5) rotate(-18deg); }
  60% { transform: scale(1.08) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

.gizi-result-score {
  font-size: 2rem;
  font-weight: 700;
  color: var(--dark);
  line-height: 1;
}

.gizi-result-label {
  font-size: 0.8rem;
  color: var(--gray);
}

.gizi-result-level {
  margin-top: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary);
}

.gizi-trainer {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #eee;
}

/* body sets white text for the purple page, so anything inside a white card
   has to name its own colour or it disappears */
.gizi-trainer-title {
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 4px;
}

.gizi-disclaimer {
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--gray);
}

.gizi-signin-note {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 0.8rem;
}

.gizi-signin-note a {
  color: #fff;
  font-weight: 700;
}

/* --- Kuis Harian --- */
.daily-teaser {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  margin-bottom: 12px;
  border-radius: 14px;
  background: linear-gradient(135deg, #6a6af2 0%, #4B4BEC 100%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  text-decoration: none;
}

.daily-teaser:hover {
  color: #fff;
  text-decoration: none;
}

/* Answered: steps back so an unanswered question is the thing that stands out */
.daily-teaser.is-done {
  background: rgba(255, 255, 255, 0.14);
}

.daily-teaser-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  font-size: 1.05rem;
}

.daily-teaser-kicker {
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.85;
  font-weight: 700;
}

.daily-teaser-title {
  font-weight: 700;
  line-height: 1.25;
}

.daily-teaser-note {
  font-size: 0.75rem;
  opacity: 0.9;
}

.daily-teaser .gizi-chapter-go {
  color: rgba(255, 255, 255, 0.75);
}

/* What everyone else picked, on the choice they picked it for */
.daily-split {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gray);
}

.gizi-choice.is-correct .daily-split {
  color: #1f8f4e;
}

.gizi-choice.is-wrong .daily-split {
  color: #c1483d;
}

.daily-split-note {
  margin-top: 8px;
  font-size: 0.7rem;
  color: var(--gray);
  font-style: italic;
}

.daily-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
}

.daily-footer[hidden] {
  display: none;
}

.daily-footer-line {
  flex: 1 1 60%;
  min-width: 160px;
  font-size: 0.82rem;
}

.daily-footer-line a {
  color: #fff;
  font-weight: 700;
}

/* Confetti, only for a perfect chapter. Plain divs falling; no library, and the
   script skips it entirely under prefers-reduced-motion. */
.gizi-confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1030;
}

.gizi-confetti-bit {
  position: absolute;
  top: -12px;
  width: 8px;
  height: 12px;
  border-radius: 2px;
  animation-name: giziFall;
  animation-timing-function: linear;
  animation-fill-mode: both;
}

@keyframes giziFall {
  from { opacity: 1; transform: translateY(0) rotate(0); }
  to { opacity: 0; transform: translateY(105vh) rotate(540deg); }
}

/* Chapter cards on the index arrive in sequence rather than all at once */
.gizi-chapter-card {
  animation: mgRise 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--i) * 45ms);
}

.gizi-chapter-emoji {
  font-size: 1.35rem;
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  .gizi-step.is-live > *,
  .gizi-verdict-row,
  .gizi-chapter-card,
  .gizi-medal-lg.is-live,
  .gizi-choice.is-wrong,
  .gizi-choice.is-picked {
    animation: none;
  }

  .gizi-sheet,
  .gizi-bar,
  .gizi-choice {
    transition: none;
  }
}

/* Progress teaser on the account page */
.gizi-akun-card {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.gizi-akun-card:hover {
  color: inherit;
  text-decoration: none;
}

/* "Save to home screen" hint at the bottom of the account page. Sits on the
   purple page background, so it needs its own edge to read as a card. */
.install-hint {
  position: relative;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 1.5rem;
  padding: 12px 40px 12px 14px;
  border-radius: 14px;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

/* Text keeps the row; on a narrow phone the button drops to its own line
   instead of squeezing the copy into four words per line. */
.install-hint-text {
  flex: 1 1 55%;
  min-width: 160px;
}

#install-hint-action {
  margin-left: auto;
}

.install-hint[hidden] {
  display: none;
}

.install-hint-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}

.install-hint-title {
  font-size: 0.9rem;
}

.install-hint-note {
  opacity: 0.9;
  line-height: 1.35;
}

.install-hint-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 16px;
  line-height: 1;
}

/* Upcoming class rows on the account page. The row is no longer one big anchor,
   because it now carries its own Kalender / Ajak Temen links and an anchor
   cannot sit inside an anchor. The top part stays a full-width tap target. */
.upcoming-class-row {
  padding: 12px 14px;
}

.upcoming-class-plain {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}

.upcoming-class-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.upcoming-class-link:hover {
  text-decoration: none;
  color: inherit;
}

.upcoming-class-icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.upcoming-class-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}

/* The row buttons are secondary to the class itself, so trim the 10px/20px the
   theme gives every outline button down to something that fits inside a card. */
.upcoming-class-actions .btn {
  padding-top: 4px;
  padding-bottom: 4px;
  border-width: 2px;
  font-size: 0.78rem;
}

/* Visit milestone progress, under the habit tiles. Progress is inside the
   current step, so it moves every few visits instead of crawling to 300. */
.visit-milestone {
  padding: 0 6px;
}

.visit-milestone-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--primary);
}

.visit-milestone-next {
  font-size: 0.68rem;
  color: var(--gray);
}

.visit-milestone-track {
  height: 6px;
  border-radius: 999px;
  background: #ececf5;
  overflow: hidden;
}

.visit-milestone-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #6a6af2 0%, var(--primary) 100%);
}

/* "Jam Kosong" strip on the account page. Bar height is how busy an hour
   usually is, so the short bars are the quiet ones and they carry the brand
   colour: the card is pointing at a good time to come, not warning anyone off. */
.quiet-hours-sub {
  font-size: 0.72rem;
  color: var(--gray);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.quiet-hours-chip {
  flex-shrink: 0;
  background: rgba(75, 75, 236, 0.1);
  color: var(--primary);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.quiet-hours-strip {
  display: flex;
  align-items: flex-end;
  gap: 3px;
}

.quiet-hours-col {
  flex: 1 1 0;
  min-width: 0;
}

/* A baseline rule, not a shaded column: a shaded column reads as a bar and the
   current hour then looks like the busiest one. */
.quiet-hours-col.is-now .quiet-hours-track {
  border-bottom: 2px solid var(--primary);
  margin-bottom: -2px;
}

.quiet-hours-track {
  height: 42px;
  display: flex;
  align-items: flex-end;
}

.quiet-hours-bar {
  width: 100%;
  border-radius: 4px 4px 0 0;
  background: #dcdce8;
}

.quiet-hours-bar.level-quiet {
  background: var(--primary);
}

.quiet-hours-bar.level-medium {
  background: #b9b9e8;
}

.quiet-hours-tick {
  height: 14px;
  text-align: center;
  font-size: 0.6rem;
  line-height: 14px;
  color: var(--gray);
}

.quiet-hours-now {
  color: var(--primary);
  font-weight: 700;
}

.quiet-hours-legend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.68rem;
  color: var(--gray);
  white-space: nowrap;
}

.quiet-hours-swatch {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  display: inline-block;
}

.quiet-hours-swatch.level-quiet {
  background: var(--primary);
}

.quiet-hours-swatch.level-busy {
  background: #dcdce8;
}

.quiet-hours-note {
  margin-top: 6px;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--gray);
}

/* How full a class is, on the class list cards */
.class-capacity {
  height: 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.class-capacity-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--primary);
  transition: width 0.3s ease;
}

.class-capacity-fill.is-low {
  background: #fd7e14;
}

.class-capacity-fill.is-full {
  background: #dc3545;
}

/* Initials of members already booked, so a class shows who is coming */
.class-attendees {
  display: flex;
  align-items: center;
}

.class-attendee {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-right: -6px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  border: 2px solid #fff;
  cursor: default;
}

.class-attendee-more {
  background: #6c757d;
  font-size: 0.65rem;
}

/* Shown once per day when the member already holds their max classes that day */
.class-day-cap-note {
  background: rgba(255, 243, 205, 0.96);
  color: #6b4e00;
  border-left: 4px solid #ffc107;
  border-radius: 10px;
  padding: 10px 14px;
}

/* Class list filter chips - compact Gojek style */
.class-filter-bar {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 8px 12px;
}

.class-filter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.class-filter-row:last-child {
  margin-bottom: 0;
}

.class-filter-label {
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  min-width: 40px;
}

.class-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  flex: 1;
}

.class-filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.15);
  color: white;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}

.class-filter-chip i {
  font-size: 0.6rem;
  margin-right: 3px;
}

.class-filter-chip:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.7);
}

.class-filter-chip:active {
  transform: scale(0.97);
}

.class-filter-chip.active {
  background: var(--secondary);
  border-color: var(--secondary);
  color: var(--primary);
}

/* ==========================================
   Ramadan Section Styles
   ========================================== */

/* Hero Ramadan banner - tappable teaser in the hero */
.ramadan-hero-banner {
  display: block;
  margin: 3vh auto 0;
  max-width: 320px;
  padding: 12px 18px;
  background: linear-gradient(135deg, rgba(190, 240, 6, 0.18) 0%, rgba(255, 255, 255, 0.08) 100%);
  border: 1.5px solid rgba(190, 240, 6, 0.45);
  border-radius: 14px;
  text-decoration: none;
  color: white;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, border-color 0.2s;
}

.ramadan-hero-banner::before,
.ramadan-hero-banner::after {
  content: '✦';
  position: absolute;
  font-size: 0.55rem;
  color: var(--secondary);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  animation: ramadanSparkle 2.8s ease-in-out infinite;
}

.ramadan-hero-banner::before {
  top: 10px;
  right: 48px;
  animation-delay: 0s;
}

.ramadan-hero-banner::after {
  bottom: 8px;
  left: 28px;
  font-size: 0.4rem;
  animation-delay: 1.4s;
}

.ramadan-hero-sparkle {
  position: absolute;
  font-size: 0.5rem;
  color: var(--secondary);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  animation: ramadanSparkle 2.8s ease-in-out infinite;
}

.ramadan-hero-sparkle::before {
  content: '✦';
}

.ramadan-hero-sparkle:nth-child(4) { font-size: 0.6rem; }
.ramadan-hero-sparkle:nth-child(5) { font-size: 0.35rem; }
.ramadan-hero-sparkle:nth-child(6) { font-size: 0.45rem; }
.ramadan-hero-sparkle:nth-child(7) { font-size: 0.4rem; }

.ramadan-hero-banner:hover {
  transform: translateY(-2px);
  border-color: var(--secondary);
  color: white;
}

.ramadan-hero-banner:active {
  transform: scale(0.98);
}

.ramadan-hero-banner-large {
  margin-top: 4vh;
  max-width: 340px;
  padding: 16px 22px;
  border-radius: 16px;
}

.ramadan-hero-banner-large .ramadan-hero-banner-title {
  font-size: 1.05rem;
}

.ramadan-hero-banner-large .ramadan-hero-banner-sub {
  font-size: 0.8rem;
}

.ramadan-hero-banner-large .ramadan-hero-banner-crescent {
  font-size: 2rem;
}

.ramadan-hero-banner-glow {
  position: absolute;
  top: -50%;
  left: -60%;
  width: 80%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(190, 240, 6, 0.12), transparent);
  transform: skewX(-20deg);
  animation: ramadanShimmer 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes ramadanShimmer {
  0% { left: -60%; }
  100% { left: 140%; }
}

@keyframes ramadanSparkle {
  0%, 100% { opacity: 0; transform: scale(0.5) rotate(0deg); }
  15%      { opacity: 1; transform: scale(1.2) rotate(20deg); }
  30%      { opacity: 0.9; transform: scale(1) rotate(-10deg); }
  50%      { opacity: 0; transform: scale(0.4) rotate(0deg); }
}

.ramadan-hero-banner-content {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.ramadan-hero-banner-crescent {
  font-size: 1.8rem;
  color: var(--secondary);
  line-height: 1;
  flex-shrink: 0;
}

.ramadan-hero-banner-body {
  display: flex;
  flex-direction: column;
  text-align: left;
  flex: 1;
  min-width: 0;
}

.ramadan-hero-banner-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--secondary);
  letter-spacing: 0.3px;
}

.ramadan-hero-banner-sub {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 1px;
}

.ramadan-hero-banner-arrow {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(190, 240, 6, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--secondary);
  font-size: 0.65rem;
  animation: ramadanArrowBounce 2s ease-in-out infinite;
}

@keyframes ramadanArrowBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

.ramadan-section {
  background: var(--primary);
  padding: 48px 0 24px;
  text-align: center;
  color: white;
}

/* Section header (Gojek-style: label left, counter right) */
.ramadan-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 0 2px;
}

.ramadan-section-label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.ramadan-counter {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  font-variant-numeric: tabular-nums;
}

/* Shared block spacing */
.ramadan-carousel-block,
.ramadan-image-block {
  max-width: 500px;
  margin: 0 auto 36px;
}

/* Standalone images */
.ramadan-img {
  width: 100%;
  display: block;
  border-radius: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* Link row below image */
.ramadan-link-row {
  text-align: right;
  margin-top: 10px;
  padding-right: 2px;
}

.ramadan-text-link {
  color: var(--secondary);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s;
}

.ramadan-text-link:hover {
  opacity: 0.8;
  color: var(--secondary);
}

.ramadan-text-link i {
  font-size: 0.7rem;
  margin-left: 4px;
  transition: transform 0.2s;
}

.ramadan-text-link:hover i {
  transform: translateX(3px);
}

/* Carousel */
.ramadan-carousel {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
  position: relative;
}

.ramadan-carousel .carousel-inner {
  border-radius: 16px;
}

.ramadan-carousel .carousel-item {
  transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

.ramadan-carousel-img {
  width: 100%;
  height: auto;
  display: block;
}

/* Nav bar below carousel (prev / dots / next) */
.ramadan-carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 14px 0 4px;
}

.ramadan-nav-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 2px solid rgba(190, 240, 6, 0.3);
  background: transparent;
  color: var(--secondary);
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.ramadan-nav-btn:hover {
  background: rgba(190, 240, 6, 0.15);
  border-color: var(--secondary);
}

.ramadan-nav-btn:active {
  transform: scale(0.92);
}

/* Dots */
.ramadan-dots {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ramadan-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.25);
  cursor: pointer;
  transition: background 0.25s, width 0.25s, border-radius 0.25s;
}

.ramadan-dot.active {
  width: 24px;
  border-radius: 4px;
  background: var(--secondary);
}

/* CTA block */
.ramadan-cta-block {
  max-width: 500px;
  margin: 8px auto 0;
  padding: 0 2px;
}

.ramadan-cta-text {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 14px;
}

.ramadan-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #25D366;
  color: white;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 12px 28px;
  border-radius: 100px;
  text-decoration: none;
  transition: background 0.15s, transform 0.15s;
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
}

.ramadan-wa-btn:hover {
  background: #1fb855;
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37, 211, 102, 0.4);
}

.ramadan-wa-btn:active {
  transform: translateY(0);
}

/* Ramadan Light class card */
.ramadan-light-card {
  background: linear-gradient(135deg, #f7ffd9 0%, #e8f5a0 50%, #d4eb6a 100%);
  border: 2px solid var(--secondary);
  box-shadow: 0 8px 24px rgba(190, 240, 6, 0.35), inset 0 1px 4px rgba(255, 255, 255, 0.8);
  position: relative;
  overflow: hidden;
  padding-top: 38px !important;
}

@keyframes ramadanSparkleLight {
  0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  20%      { opacity: 0.9; transform: scale(1.1) rotate(15deg); }
  35%      { opacity: 0.8; transform: scale(0.9) rotate(-8deg); }
  55%      { opacity: 0; transform: scale(0.3) rotate(0deg); }
}

.ramadan-light-ribbon {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: var(--secondary);
  color: var(--primary);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 5px 12px;
  text-align: center;
  overflow: hidden;
}

.ramadan-light-ribbon::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 50%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transform: skewX(-20deg);
  animation: ramadanRibbonShimmer 3.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes ramadanRibbonShimmer {
  0%   { left: -60%; }
  100% { left: 160%; }
}

.ramadan-light-ribbon i {
  font-size: 0.6rem;
  margin-right: 4px;
}

.ramadan-light-subtitle {
  display: block;
  font-size: 0.75rem;
  color: #3d5a00;
  font-weight: 500;
  margin-top: 2px;
  font-style: italic;
}

/* Scroll-triggered reveal animations */
.ramadan-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.ramadan-reveal.ramadan-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger each block: 2nd +100ms, 3rd +200ms, etc. */
.ramadan-reveal:nth-child(2) { transition-delay: 0.1s; }
.ramadan-reveal:nth-child(3) { transition-delay: 0.2s; }
.ramadan-reveal:nth-child(4) { transition-delay: 0.3s; }
.ramadan-reveal:nth-child(5) { transition-delay: 0.4s; }

/* Carousel image subtle scale-in on slide */
.ramadan-carousel .carousel-item.active .ramadan-carousel-img {
  animation: ramadanSlideIn 0.4s ease-out;
}

@keyframes ramadanSlideIn {
  from { opacity: 0.7; transform: scale(0.97); }
  to   { opacity: 1;   transform: scale(1); }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .ramadan-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .ramadan-carousel .carousel-item.active .ramadan-carousel-img,
  .ramadan-hero-banner::before,
  .ramadan-hero-banner::after,
  .ramadan-hero-sparkle,
  .ramadan-hero-banner-glow,
  .ramadan-light-ribbon::after,
  .tier-gold-luxury-ribbon::after {
    animation: none;
  }
}
/* ===== Papan Peringkat ================================================== */

.board-lead {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.88rem;
  max-width: 32rem;
  margin: 0 auto 1.25rem;
}

.board-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.board-tab {
  flex: 1 1 0;
  text-align: center;
  padding: 9px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.15s ease, background 0.2s ease;
}

.board-tab:hover {
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.25);
}

.board-tab:active {
  transform: scale(0.98);
}

.board-tab.is-active {
  background: #fff;
  color: var(--primary);
  border-color: #fff;
}

.board-months {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.85);
}

.board-months select {
  flex: 1 1 auto;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 0.8rem;
}

.board-months option {
  color: var(--dark);
}

/* --- the member's own points, first thing on the page --- */
.board-mine {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  margin-bottom: 16px;
  border-radius: 18px;
  background: linear-gradient(135deg, #ffffff 0%, #f3f3ff 100%);
  box-shadow: 0 10px 26px rgba(20, 20, 80, 0.2);
  animation: mgRise 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* A soft brand-coloured glow behind the avatar, so the card is not flat white */
.board-mine-glow {
  position: absolute;
  top: -40px;
  left: -30px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(75, 75, 236, 0.18), transparent 70%);
  pointer-events: none;
}

.board-mine > *:not(.board-mine-glow) {
  position: relative;
}

.board-mine-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray);
}

.board-mine-total {
  font-size: 1.9rem;
  font-weight: 700;
  line-height: 1;
  color: var(--dark);
  font-variant-numeric: tabular-nums;
}

.board-mine-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin-top: 5px;
}

.board-avatar {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(75, 75, 236, 0.1);
  color: var(--primary);
  font-weight: 700;
  font-size: 1.1rem;
}

.board-avatar-mine {
  background: linear-gradient(135deg, #6a6af2, #4B4BEC);
  color: #fff;
  box-shadow: 0 4px 12px rgba(75, 75, 236, 0.4);
}

.board-avatar-sm {
  width: 32px;
  height: 32px;
  font-size: 0.8rem;
}

/* --- podium: second, first, third, winner raised --- */
.board-podium {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  margin-bottom: 14px;
}

.board-step {
  flex: 1 1 0;
  min-width: 0;
  padding: 12px 5px 10px;
  border-radius: 16px;
  text-align: center;
  background: #fff;
  box-shadow: 0 8px 22px rgba(20, 20, 80, 0.2);
  animation: mgRise 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--i) * 90ms);
}

.board-step .board-avatar {
  margin: 0 auto 6px;
  width: 38px;
  height: 38px;
  font-size: 0.95rem;
}

/* Source order is 1, 2, 3; flex order puts the winner in the middle. */
.board-step-1 {
  order: 2;
  padding-top: 16px;
  padding-bottom: 14px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #fff9e6 0%, #ffe9ab 100%);
  border: 1px solid #f5cf6a;
}

/* A slow sheen across the winner's card. Cheap, and it draws the eye once. */
.board-step-1::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -60%;
  width: 40%;
  height: 220%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.75) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(18deg);
  animation: boardSheen 4.5s ease-in-out 1.2s infinite;
  pointer-events: none;
}

.board-step-2 {
  order: 1;
  background: linear-gradient(160deg, #ffffff 0%, #e9ebf4 100%);
  border: 1px solid #d7dae6;
}

.board-step-3 {
  order: 3;
  background: linear-gradient(160deg, #fff6ee 0%, #f3ddc6 100%);
  border: 1px solid #e0c09a;
}

.board-step.is-me {
  outline: 3px solid var(--secondary);
  outline-offset: -1px;
}

.board-crown {
  font-size: 1.05rem;
  line-height: 1;
  margin-bottom: 5px;
  position: relative;
  z-index: 1;
}

.board-step-1 .board-crown {
  color: #e9a100;
  font-size: 1.4rem;
}

.board-step-2 .board-crown {
  color: #9a9ab0;
}

.board-step-3 .board-crown {
  color: #bd7f43;
}

.board-step-name {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}

.board-step-total {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: 1;
}

.board-step-rank {
  font-size: 0.64rem;
  color: var(--gray);
  position: relative;
  z-index: 1;
}

/* The five sources, two per line, inside a podium card */
.board-step-counts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px 3px;
  margin-top: 7px;
  padding-top: 6px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  position: relative;
  z-index: 1;
}

.board-step-counts .board-count:last-child {
  grid-column: span 2;
}

/* --- the rest of the top 30 --- */
.board-list {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(20, 20, 80, 0.18);
  margin-bottom: 16px;
}

.board-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  animation: mgRise 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(280ms + var(--i) * 35ms);
}

.board-row + .board-row {
  border-top: 1px solid #f1f1f7;
}

/* How far along the leader's total this member is, as a bar behind the row.
   Grows from zero once, so the list has some life when it lands. */
.board-row-bar {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, rgba(75, 75, 236, 0.13), rgba(75, 75, 236, 0.03));
  animation: boardGrow 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(380ms + var(--i) * 35ms);
  pointer-events: none;
}

.board-row > *:not(.board-row-bar) {
  position: relative;
}

.board-row.is-me {
  background: rgba(190, 240, 6, 0.2);
}

.board-row.is-me .board-row-bar {
  background: linear-gradient(90deg, rgba(120, 160, 0, 0.2), rgba(190, 240, 6, 0.05));
}

.board-rank {
  flex-shrink: 0;
  width: 20px;
  text-align: right;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--gray);
  font-variant-numeric: tabular-nums;
}

.board-name {
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--dark);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-counts {
  display: flex;
  gap: 7px;
}

.board-count {
  font-size: 0.66rem;
  color: var(--gray);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.board-count i {
  margin-right: 2px;
  opacity: 0.75;
}

.board-count.is-big {
  font-size: 0.76rem;
}

.board-count.is-miss {
  color: #c1483d;
  font-weight: 700;
}

.board-total {
  flex-shrink: 0;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
}

.board-miss {
  color: #c1483d;
}

.board-legend {
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
}

.board-legend-title {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 700;
  opacity: 0.85;
  margin-bottom: 6px;
}

.board-legend-row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.8rem;
  padding: 3px 0;
}

.board-legend-row i {
  width: 18px;
  opacity: 0.8;
}

.board-legend .board-miss {
  color: #ffd0c9;
}

.board-legend-note {
  margin-top: 8px;
  font-size: 0.7rem;
  opacity: 0.8;
  line-height: 1.4;
}

@keyframes boardGrow {
  from { width: 0; }
  to { width: var(--share); }
}

@keyframes boardSheen {
  0% { left: -60%; }
  35%, 100% { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
  .board-mine,
  .board-step,
  .board-row {
    animation: none;
  }

  .board-step-1::after {
    animation: none;
    display: none;
  }

  .board-row-bar {
    animation: none;
    width: var(--share);
  }
}

/* ===== Shared motion ==================================================== */

/* Every button gets a small press. Cheap, and it makes the whole site feel
   like something that responds rather than a page that reloads. */
.btn {
  transition: transform 0.12s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.btn:active {
  transform: scale(0.97);
}

/* Bars and rings animate to their final size, set by mulai.js from data-grow
   and data-ring. Both are already correct without JS. */
.class-capacity-fill,
.visit-milestone-fill {
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.gizi-ring {
  transition: none; /* the sweep is driven by --pct, not a transition */
}

/* The habit tiles and any other counted number: keep the width steady while the
   digits change, so nothing jumps around mid-count. */
.habit-stat-value,
.board-mine-total,
.gizi-result-score {
  font-variant-numeric: tabular-nums;
}

/* Kuis Harian teaser breathes while today's question is unanswered, and stops
   the moment it is done. One nudge, not a distraction. */
.mg-js .daily-teaser:not(.is-done) .daily-teaser-icon {
  animation: mgPulse 2.6s ease-in-out infinite;
}

@keyframes mgPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.45); }
  50% { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
}

/* Class cards lift a little under the finger */
.class-card-wrapper .list-group-item,
.class-card-wrapper > div {
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.class-filter-chip {
  transition: transform 0.12s ease, background-color 0.2s ease, color 0.2s ease;
}

.class-filter-chip:active {
  transform: scale(0.96);
}

/* Flash messages arrive rather than appear */
.mg-js .alert {
  animation: mgPop 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes mgPop {
  from { opacity: 0; transform: translateY(-10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .class-capacity-fill,
  .visit-milestone-fill,
  .class-filter-chip {
    transition: none;
  }

  .btn:active,
  .class-filter-chip:active {
    transform: none;
  }

  .mg-js .daily-teaser:not(.is-done) .daily-teaser-icon,
  .mg-js .alert {
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
   Class rules: the cancellation deadline where it matters, and the guide page.

   The notes are the important half. They sit on class cards, on the class page
   and on the account page, and they are how most members will actually learn
   the rule: not by reading a guide, but by seeing "batalin sebelum jam 13:15"
   on the class they are holding.
   --------------------------------------------------------------------------- */
.class-rule-note {
  background: rgba(255, 255, 255, 0.92);
  color: #4a4a68;
  border-left: 4px solid #4b4bec;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 0.82rem;
  line-height: 1.45;
}

.class-rule-note a {
  color: #4b4bec;
  font-weight: 700;
}

.class-rule-note-warn {
  background: rgba(255, 243, 205, 0.96);
  color: #6b4e00;
  border-left-color: #ffc107;
}

.class-rule-note-warn a {
  color: #6b4e00;
  text-decoration: underline;
}

.class-rules-link,
.class-day-cap-link {
  color: #bef006;
  font-weight: 700;
  text-decoration: none;
}

.class-day-cap-link {
  color: #6b4e00;
  text-decoration: underline;
  white-space: nowrap;
}

.class-rules-link:hover {
  color: #bef006;
  text-decoration: underline;
}

.class-closure-note {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 12px;
  padding: 12px 16px;
  color: #fff;
}

/* Aturan Kelas page. Big type, one idea per card, and a worked example under
   each rule, because an example is what a member repeats back to a friend. */
.rules-page .rules-lead {
  color: rgba(255, 255, 255, 0.92);
  font-size: 1rem;
  line-height: 1.6;
}

.rule-card {
  background: #fff;
  color: #2f2f45;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 10px 26px rgba(20, 20, 80, 0.16);
}

.rule-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.rule-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #4b4bec;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 800;
}

.rule-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #2f2f45;
  line-height: 1.3;
}

.rule-body {
  font-size: 0.98rem;
  line-height: 1.6;
  margin-bottom: 14px;
}

.rule-example {
  background: #f4f4fb;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 0.92rem;
  line-height: 1.55;
}

.rule-example-title {
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6c6c8a;
  margin-bottom: 8px;
}

.rule-case {
  padding: 8px 0;
}

.rule-case-ok {
  color: #1c7c4a;
}

.rule-case-bad {
  color: #c0392b;
}

.rule-list {
  margin: 0 0 14px 0;
  padding-left: 20px;
  font-size: 0.92rem;
  line-height: 1.7;
}

.rule-why {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed #d9d9ea;
  font-size: 0.86rem;
  line-height: 1.6;
  color: #5c5c78;
}

/* The deadline drawn rather than described: green up to the cut-off, red after
   it. Members who skip the paragraph still get the shape of the rule.

   The line between the two colours is the whole point, so the tick and its
   label sit on that line, not at the end of the bar. Both the bar and the tick
   are positioned from --cut, so moving the split moves the label with it. */
.rule-timeline {
  --cut: 60%;
  margin: 4px 0 16px;
}

.rule-timeline-bar {
  display: flex;
  border-radius: 10px;
  overflow: hidden;
  font-size: 0.76rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
}

.rule-timeline-safe {
  flex: 0 0 var(--cut);
  background: #2e9e63;
  padding: 10px 6px;
}

.rule-timeline-late {
  flex: 1 1 auto;
  background: #d9534f;
  padding: 10px 6px;
}

.rule-timeline-axis {
  position: relative;
  height: 36px;
}

.rule-timeline-point {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 0.72rem;
  line-height: 1.3;
  color: #6c6c8a;
  text-align: center;
}

/* The tick itself, a short line carrying the eye down from the split. Same
   height on both, or the two labels sit on different baselines and the row
   reads as crooked. */
.rule-timeline-point::before {
  content: "";
  width: 2px;
  height: 12px;
  margin-bottom: 4px;
  border-radius: 1px;
  background: currentColor;
}

.rule-timeline-point-cut {
  left: var(--cut);
  transform: translateX(-50%);
  font-weight: 800;
  color: #2f2f45;
}

.rule-timeline-point-cut::before {
  width: 3px;
}

.rule-timeline-point-end {
  right: 0;
  align-items: flex-end;
  text-align: right;
}

/* On a small phone the two labels run into each other. The deadline is the one
   that matters, so the other one wraps and gives way. */
@media (max-width: 380px) {
  .rule-timeline-axis {
    height: 50px;
  }

  .rule-timeline-point-end {
    max-width: 4.5em;
  }
}

.rule-summary {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 16px;
  padding: 18px 20px;
  color: #fff;
}

.rule-summary-title {
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 12px;
}

.rule-summary-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 7px 0;
  font-size: 0.94rem;
  line-height: 1.5;
}

.rule-summary-item i {
  color: #bef006;
  width: 22px;
  flex-shrink: 0;
  margin-top: 3px;
}

.rules-help {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.88rem;
}

.rules-help a {
  color: #bef006;
  font-weight: 700;
}

.class-penalty-link {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
}

.class-penalty-kind {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 0.72rem;
  font-weight: 700;
}

/* Same link on a light strip rather than the coloured penalty card, where white
   text would simply vanish. */
.rules-inline-link {
  color: #4b4bec;
  font-weight: 700;
  text-decoration: underline;
}

/* Over the allowance, but tonight's run has not locked them yet. Same weight as
   banned, since the outcome is already decided. */
.class-penalty-pending {
  background: linear-gradient(135deg, #f2683c 0%, #de4b2a 100%);
}