/* ============================================
   USAGE TRACKER - COKE BOTTLE VISUAL
   ============================================ */
:root {
  --bg: #051F40;
  --header: #32BFFE;
  --accent: #F7771F;
  --secondary: #43D4E3;
  --text: #ffffff;
  --black: #111111;
  --overlay-opacity: 0.8;
  --overlay-color: rgba(5,31,64,var(--overlay-opacity));
}

.landing-widgets-container {
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: auto;
  width: 80%;
}

.usage-tracker-container {
  background: var(--bg);
  border-radius: 2rem;
  padding: 2rem;
  box-shadow: 0 4px 20px var(--header);
  text-align: center;
  width: 30rem;
}

.usage-tracker-title {
  font-size: 2rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 1rem;
  margin-top:1rem;
}

.bottle-wrapper {
  display: flex;
  align-items: center; /* Changed from flex-end */
  justify-content: center;
  gap: 2rem;
  margin-bottom: 1.5rem;
  background: var(--text);
  border-radius:1rem;
  box-shadow: 0 4px 20px var(--header);
}

.bottle-container {
  position: relative;
  width: 6rem;
  height: 20rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bottle-outline {
  position: relative; /* Changed from absolute */
  height: 100%;
  width: auto;
  z-index: 2;
  pointer-events: none;
  object-fit: contain;
}

.bottle-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(180deg, #FFA500 0%, #FF7F00 50%, #E65C00 100%);
  transition: height 1.5s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Encouragement message */
.encouragement-message {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  max-width: 12rem;
  text-align: center;
}

.encouragement-message.level-0 {
  color: #CC6600; /* Darker burnt orange - empty/low */
}

.encouragement-message.level-1 {
  color: #E67300; /* Mid-dark orange - getting started */
}

.encouragement-message.level-2 {
  color: #FF7F00; /* Mid orange - halfway there */
}

.encouragement-message.level-3 {
  color: #FF8300; /* Classic Fanta orange - almost full */
}

.encouragement-message.level-4 {
  color: #FFA500; /* Bright orange - overflowing! */
}

/* Usage stats */
.usage-stats {
  font-size: 1.1rem;
  color: var(--text);
  margin-top: 1rem;
}

.usage-stats strong {
  color: var(--text);
  font-weight: 600;
}

/* Percentage display */
.bottle-percentage {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--secondary);
  margin-bottom: 0.5rem;
  text-align: center;
}

/* Spinner Wheel related */

.main-content-spin {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 30rem;
  aspect-ratio: 1 / 1;
  background: var(--bg);
  border-radius: 1rem;
  box-shadow: 0 4px 20px var(--header);
  padding: 0;
  position: relative;
  margin: 0;
  overflow: visible;
}

.wheel-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  aspect-ratio: 1 / 1;
  margin-bottom: 0;
  border-radius: 50%;
  margin-top: 0;
  padding-top: 0;
}
.main-content-spin h2 {
  font-size: 2rem;
  font-weight: 600;
  color: var(--header);
  margin-bottom: 1rem;
  margin-top:1rem;
}

.wheel-outer {
  width: max(50%,500px);
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 50%;
  background: conic-gradient(
    var(--secondary) 0% 12.5%,
    var(--text) 12.5% 25%,
    var(--secondary) 25% 37.5%,
    var(--text) 37.5% 50%,
    var(--secondary) 50% 62.5%,
    var(--text) 62.5% 75%,
    var(--secondary) 75% 87.5%,
    var(--text) 87.5% 100%
  );
  border: 1rem solid var(--bg);
  box-shadow: 0 0 30px var(--secondary);
  position: relative;
  transition: transform 6s cubic-bezier(0.23,1,0.32,1);
  z-index: 1;
  margin-top: 0;
  padding-top: 0;
}
.wheel-labels-svg {
  width: 100%;
  height: 100%;
  position:absolute; top:0; left:0; pointer-events:none;}

.wheel-labels-svg text {
  font-size: 1.5rem;
  font-family: inherit;
  font-weight: bold;
  fill: var(--bg);
}

.center-spin-button {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
  font-weight: bold;
  color: var(--accent);
  background: var(--text);
  border-radius: 50%;
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0.2rem 1.5rem var(--header);
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  border: 0.2rem solid var(--header);
  z-index: 20;
  transition: transform 0.1s;
}
.center-spin-button:active {
  transform: translate(-50%, -50%) scale(0.95);
}
.pointer-arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 15;
  pointer-events: none;
}
.pointer-arrow svg {
  width: 8rem;
  height: 8rem;
  display: block;
}
.prompt-result {
  background: var(--text);
  color: var(--bg);
  border-radius: 1rem;
  padding: 0.7rem 1rem;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  box-shadow: 0 0.1rem 0.35rem var(--secondary);
  min-height: 2rem;
  display: flex;
  line-height: 1;
  align-items: center;
  justify-content: center;
  word-break: break-word;
  letter-spacing: 0.01em;
  margin: 1rem auto;   
  transition: background 0.16s;
  border: 2px solid var(--secondary);
  max-width: 80%;
}

/* News Ticker related */

.news-ticker-container {
  width: 100%;
  overflow: hidden;
  padding: 1rem 0;
  position: relative;
  border-top: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  margin-bottom:2rem;
  min-height: 4rem; 
}

.news-ticker-wrapper {
  display: flex;
  width: 100%;
  overflow: hidden;
}

.news-ticker-content {
  display: flex;
  white-space: nowrap;
  animation: scroll-ticker 250s linear infinite;
  gap: 2rem;
  will-change: transform;
}

.news-ticker-content:hover {
  animation-play-state: paused;
}

.ticker-item {
  color: var(--text);
  font-size: 1.5rem;
  font-weight: 500;
  padding: 0 2rem;
  display: inline-flex;
  align-items: center;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}


@keyframes scroll-ticker {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.pro-tip-card {
  border-radius: 1rem;
  padding: 1.5rem;
  margin: 2rem auto;
  width: 50%;
  box-shadow: 0 4px 12px rgba(185, 231, 253, 0.884);
  text-align: center;
}

.pro-tip-header {
  color: var(--accent);
  font-size: 1.5rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}

.pro-tip-content {
  color: var(--text);
  font-size: 1.2rem;
  line-height: 1.6;
}

/* === MOBILE MEDIA QUERY === */
@media (max-width: 1366px) {
  html {
    font-size: 12px;  /* 1rem = 12px for mobile */
  }
  .pro-tip-card {
    padding: 1rem;
    margin: 1rem;
  }
  .news-ticker-content {
    animation: scroll-ticker 80s linear infinite;
  }
  /* Stack widgets vertically on mobile */
  .landing-widgets-container {
    flex-direction: column;
    align-items: center;
    width: 95%;
    gap: 1.5rem;
  }
  
  /* Make both containers responsive */
  .usage-tracker-container {
    width: 90%;
    max-width: 30rem;
    height: auto;
    min-height: 30rem;
  }
  
  .content-container {
    width: 90%;
    max-width: 30rem;
    height: auto;
    min-height: 30rem;
  }
  
  /* Spinner adjustments */
  .wheel-outer {
    width: 90vw;
    aspect-ratio: 1 / 1;
    min-width: 220px;
    max-width: 98vw;
    height: auto;
  }
    
  .center-spin-button {
    font-size: 1.8rem;
    width: 80px;
    height: 80px;
  }
  
  .prompt-result {
    font-size: 1.08rem;
    padding: 0.8rem 0.5rem;
    min-height: 1.5rem;
  }
  
  .pointer-arrow svg {
    width: 100px;
    height: 100px;
  }
  
  /* Bottle adjustments */
  .bottle-wrapper {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  
  .encouragement-message {
    max-width: 100%;
    text-align: center;
  }
}