/* Styles/race-reminder.css - Sleek Local Time Table for Bento Box */

.race-reminder-container {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.timetable-msg {
  color: var(--text-muted);
  font-size: 0.9rem;
  text-align: center;
  padding: 20px 0;
  font-style: italic;
}

.timetable-msg.error {
  color: #ff4500;
}

.timetable-list {
  display: grid;
  /* Automatically places the sessions side-by-side on desktop, and stacks them on mobile! */
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin-top: 10px;
}

.timetable-item {
  display: flex;
  flex-direction: column; /* Stacks the text vertically inside the mini-card */
  justify-content: center;
  align-items: center;
  text-align: center;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 20px 16px;
  border-radius: 16px;
  transition: all 0.3s ease;
  gap: 12px;
}

.timetable-item:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  transform: translateY(-4px); /* Floats up instead of sliding right */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.tt-left, .tt-right {
  display: flex;
  flex-direction: column; /* Centers all the text cleanly */
  align-items: center;
  gap: 8px;
}

.tt-name {
  font-weight: 800;
  font-size: 1.1rem;
  color: #fff;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.tt-day {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 600;
  text-transform: uppercase;
}

/* Update the colored borders to be on the BOTTOM since the cards are now horizontal */
.session-race {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(225, 6, 0, 0.1));
  border-bottom: 4px solid #e10600;
  border-left: 1px solid rgba(255, 255, 255, 0.05); /* Reset left border */
}

.session-quali {
  border-bottom: 4px solid #34d399;
  border-left: 1px solid rgba(255, 255, 255, 0.05);
}

.session-sprint {
  border-bottom: 4px solid #a78bfa;
  border-left: 1px solid rgba(255, 255, 255, 0.05);
}

/* Past Sessions fade out so you know what's coming next */
.session-past {
  opacity: 0.4;
  filter: grayscale(100%);
}

.session-past:hover {
  opacity: 0.8;
  filter: grayscale(50%);
}

/* ==========================================================
   Timezone Clarity Additions
   ========================================================== */

/* The little note at the top of the box */
.tz-note {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: #10b981; /* A reassuring green color */
  margin-bottom: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(16, 185, 129, 0.1);
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

/* Grouping the time and the timezone abbreviation */
.tt-time-wrapper {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.4);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Remove the background from the original .tt-time since we moved it to the wrapper */
.tt-time {
  background: transparent !important; 
  padding: 0 !important;
}

/* The small "IST" or "EST" text next to the time */
.tt-tz {
  font-size: 0.7rem;
  color: var(--accent);
  font-weight: 800;
  letter-spacing: 1px;
}