/* --- 1. VARIABLES & RESET --- */
:root {
  --brb-bg: rgba(196, 178, 0, 0.98);
  --brb-bg-dark: #8c892e;
  --brb-pill-bg: rgba(0, 0, 0, 0.1);
  --brb-text: #111;
  --brb-height-desktop: 90px;
  --brb-height-mobile: auto;
  --transition-speed: 0.3s;
  --font-main: "Roboto", "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Only add bottom padding when bar exists */
body.has-brb {
  padding-bottom: var(--brb-height-desktop);
  font-family: var(--font-main);
}

/* --- 2. MAIN REGISTER BAR CONTAINER --- */
.brb-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--brb-bg);
  color: var(--brb-text);
  z-index: 1000;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  transition: transform var(--transition-speed) ease;
  overflow: visible;
}

.brb-container.is-closed { transform: translateY(100%); }

.brb-inner {
  max-width: 1200px;
  margin: 0 auto;
  height: var(--brb-height-desktop);
  display: flex;
  align-items: center;
  gap: 18px;
  justify-content: space-between;
  padding: 0 20px;
  position: relative;
  z-index: 10;
}

/* --- 3. CLOSE/OPEN TAB (The Arrow) --- */
.brb-toggle-tab {
  position: absolute;
  top: -30px;
  right: 20px;
  width: 36px;
  height: 30px;
  background-color: var(--brb-bg-dark);
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.2s;
  z-index: 20;
}

.brb-toggle-tab:hover { background-color: #6e6b20; }

.arrow-icon {
  border: solid #000;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 4px;
  transform: rotate(45deg);
  transition: transform var(--transition-speed);
}

.brb-container.is-closed .arrow-icon { transform: rotate(225deg); }

/* --- 4. LEFT: INFO PILL --- */
.brb-info { width: min(1200px, 100%); }

.brb-date { font-weight: 500; font-size: 1rem; margin-bottom: 2px; }

.brb-location {
  margin-top: 10px;
  font-size: 1rem;
  opacity: 0.8;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 350px;
}

/* --- 5. MIDDLE: COUNTDOWN TIMER --- */
.brb-countdown { display: flex; align-items: flex-end; }

.timer-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 50px;
}

.timer-num {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.timer-label {
  font-size: 0.6rem;
  font-weight: 600;
  margin-top: 4px;
  opacity: 0.7;
}

.timer-colon {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: rgba(0, 0, 0, 0.4);
}

.slide-up { animation: slideUpAnim 0.3s ease-out; }

@keyframes slideUpAnim {
  0% { transform: translateY(10px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* --- 6. RIGHT: BUTTON --- */
.brb-btn {
  background-color: #000;
  color: #fff;
  border: none;
  padding: 15px 35px;
  font-size: 1rem;
  font-family: var(--font-main);
  font-weight: 700;
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: background 0.2s;
}

.brb-btn:hover { background-color: #333; }

/* --- 7. MOBILE TEASER BAR --- */
#mobile-teaser {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--brb-bg);
  color: #000;
  padding: 12px 20px;
  align-items: center;
  justify-content: space-between;
  z-index: 999;
  cursor: pointer;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
}

#mobile-teaser span { font-weight: 400; font-size: 16px; }

/* --- 8. RESPONSIVE DESIGN (Mobile) --- */
@media (max-width: 900px) {
  .brb-container { box-shadow: none !important; }

  .brb-inner {
    flex-direction: column;
    height: auto;
    padding: 20px 15px;
    gap: 15px;
  }

  .brb-info { width: 100%; text-align: center; background: none; }

  .brb-location { max-width: 100%; white-space: normal; }

  .brb-toggle-tab { background: var(--brb-bg) !important; }

  .brb-toggle-tab .arrow-icon { margin-top: -2px; }

  .brb-container.is-closed ~ #mobile-teaser { display: flex; }
}