/*
 * base.css - Global resets and base styles for the Winsom app.
 * This file includes CSS resets and default styles applied globally.
 */
 :root {
     --primary-color: #1482b7;
     --secondary-color: #eeab4a;
     --tertiary-color: #6FB7D0;
     --link-color: #000000;
 }
 
/*
 * balloons.css - component for random balloons.
 * This file contains styles for the balloon generator function.
 */
.balloon-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}

.balloon {
  position: absolute;
  bottom: -80px;
  width: 36px;
  height: 50px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  animation: floatBalloon 4s ease-in forwards;
}

.balloon::after {
  content: "";
  position: absolute;
  width: 2px;
  height: 20px;
  background: #999;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
}

/* Colors */
.balloon.red    { background: radial-gradient(circle at 30% 30%, #ff5ca3, #e20074); }
.balloon.blue   { background: radial-gradient(circle at 30% 30%, #4da6ff, #007bff); }
.balloon.green  { background: radial-gradient(circle at 30% 30%, #6de195, #28a745); }
.balloon.yellow { background: radial-gradient(circle at 30% 30%, #fff176, #fbc02d); }
.balloon.purple { background: radial-gradient(circle at 30% 30%, #d0a9f5, #9b59b6); }
.balloon.orange { background: radial-gradient(circle at 30% 30%, #ffcc80, #ff9800); }

@keyframes floatBalloon {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translateY(-120vh);
    opacity: 0;
  }
}

/*
 * confettic.css - component for random confetti
 * This file contains styles for the confetti generator function.
 */
.confetti-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}

.confetti-piece {
  --left: 50%;
  --delay: 0s;
  --rotation: 0deg;
  --fall: 120vh;
  --spin: 360deg;

  position: absolute;
  top: -10px;
  left: var(--left);
  width: 8px;
  height: 14px;
  border-radius: 2px;
  opacity: 0.85;
  animation: confetti-fall 3s linear forwards;
  animation-delay: var(--delay);
  transform: rotate(var(--rotation));
}

/* Color variants */
.confetti-color-1 { background-color: #FFC700; }
.confetti-color-2 { background-color: #FF0000; }
.confetti-color-3 { background-color: #2E3192; }
.confetti-color-4 { background-color: #41BBC7; }
.confetti-color-5 { background-color: #7F00FF; }

/* Animation keyframes */
@keyframes confetti-fall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(var(--fall)) rotate(var(--spin));
    opacity: 0;
  }
}

/*
 * components.css - Styles for reusable UI components.
 * This file contains styles for common UI elements (buttons, cards, etc.).
 */

.page-content.primary {
    background-color: var(--primary-color);
}

/* 64px */
.h1.secondary {
    color: var(--secondary-color);
}

/* 32px */
.h2.secondary {
    color: var(--secondary-color);
}

.badge.secondary {
    background-color: var(--secondary-color);
}

.card.collection-card {
    background-color: #E4E4E8 !important;
    border: 1px solid #EAEAEA; /* Very subtle */
    border-radius: 8px;
}

.card.collection-card .placeholder-style {
    color: #999;
    font-weight: 400;
}

#repeater-1944 .card.primary,
#repeater-1933 .card.primary,
#repeater-1832 .card.primary,
#repeater-1820 .card.primary,
#repeater-1353 .card.primary {
    background-color: var(--tertiary-color);
}

.badge-container {
  display: flex;
  justify-content: flex-start;  /* Align all badges to the left */
  align-items: center;          /* Vertically center if needed */
  flex-wrap: wrap;              /* Optional: allows wrapping if too many badges */
  gap: 4px;                     /* Consistent spacing between badges */
}

.badge-gold {
    background-color: gold;
    color: black;
}

.badge-silver {
    background-color: silver;
    color: black;
}

.badge-bronze {
    background-color: #cd7f32; /* bronze tone */
    color: white;
}

/*
 * forms.css - Styles for forms, inputs, and buttons.
 * This file defines form-specific styling for inputs, labels, and form layouts.
 */
.button.primary {
    background-color: var(--primary-color);
}

.button.secondary {
    background-color: var(--secondary-color);
}

.button.tertiary {
    background-color: var(--tertiary-color);
}

/*
 * layout.css - Layout containers and structural styles.
 * This file defines overall page layout and common container styling.
 */
 
/*
 * overrides.css - One-off custom adjustments and CSS overrides.
 * This file is loaded last to provide any final tweaks or override previous styles.
 */
.accordion-list .item-title {
    font-weight: 500;
}

.link.back {
    color: var(--link-color);
}

.tab-link.tab-link-active {
    color: var(--link-color);
}

.block-title .title {
    font-size: 1.2em;
}

.card .card-img-top {
    height: 100px;
    object-fit: cover;
}

.badge-container .badge {
  margin: 0;                    /* Remove any margin set by Framework7 */
}

.progressbar.computed-progress {
  height: 17px;
  background: #e0e0e0;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 6px;
}

.progressbar.computed-progress span {
  background: var(--tertiary-color);
  border-radius: 999px;
}