@import url('https://fonts.googleapis.com/css2?family=El+Messiri:wght@400..700&display=swap');

/* ============================================================
   TOPBAR COMPONENT — THEME 5 (Japanese Cyberpunk Compartment Block)
   Identity: Ultra-Compact Japanese Cyberpunk, Crimson Vermilion & Pearl White
   Layout:   Prioritized Ticker & Contact, Sharp Box Compartments
   Tokens:   100% Custom CSS Tokens (--ebtb7-*) defined on root
   ============================================================ */

.ebtb7-bar {
  /* =========================================================
     CSS TOKENS (Complete Variable System)
     ========================================================= */
  --ebtb7-font-family: 'El Messiri', sans-serif;
  
  /* Color Palette Tokens */
  --ebtb7-bg-color: #09090b;
  --ebtb7-bg-gradient: linear-gradient(90deg, #09090b 0%, #18181b 50%, #09090b 100%);
  --ebtb7-text-color: #f8fafc;
  --ebtb7-text-muted: #a1a1aa;
  --ebtb7-accent-color: #dc2626;
  --ebtb7-accent-glow: #ef4444;
  
  --ebtb7-border-color: rgba(248, 250, 252, 0.15);
  --ebtb7-bar-border-bottom: 2px solid #dc2626;
  --ebtb7-line-bg: linear-gradient(90deg, transparent, #dc2626, transparent);
  
  --ebtb7-stat-bg: rgba(24, 24, 27, 0.8);
  --ebtb7-stat-color: #a1a1aa;
  --ebtb7-stat-val-color: #ffffff;
  --ebtb7-stat-border: 1px solid rgba(248, 250, 252, 0.15);
  
  --ebtb7-ticker-bg: #18181b;
  --ebtb7-ticker-border: 1px solid #dc2626;
  --ebtb7-ticker-item-color: #f8fafc;
  --ebtb7-ticker-sep-color: #dc2626;
  
  --ebtb7-social-bg: #18181b;
  --ebtb7-social-color: #a1a1aa;
  --ebtb7-social-border: 1px solid rgba(248, 250, 252, 0.15);
  --ebtb7-social-hover-bg: #dc2626;
  --ebtb7-social-hover-color: #ffffff;
  --ebtb7-social-hover-border: #dc2626;
  
  --ebtb7-box-shadow-bar: 0 2px 10px rgba(220, 38, 38, 0.15);
  --ebtb7-box-shadow-social-hover: 0 0 8px rgba(220, 38, 38, 0.5);
  
  /* Compact Height & Spacing Tokens */
  --ebtb7-max-width: 1280px;
  --ebtb7-padding-y: 0.25rem;
  --ebtb7-padding-x: 1.5rem;
  --ebtb7-gap-container: 1rem;
  --ebtb7-gap-cluster: 0.85rem;
  --ebtb7-gap-contact: 0.85rem;
  --ebtb7-gap-social: 0.35rem;
  --ebtb7-gap-ticker: 0.75rem;
  
  --ebtb7-container-flex-dir: row;
  --ebtb7-container-justify: space-between;
  --ebtb7-ticker-max-width: 380px;
  --ebtb7-social-size: 26px;
  
  --ebtb7-stat-radius: 0px;
  --ebtb7-social-radius: 0px;
  
  /* Typography Tokens */
  --ebtb7-font-size-ticker: 0.8rem;
  --ebtb7-font-size-stat: 0.78rem;
  --ebtb7-font-size-link: 0.78rem;
  --ebtb7-font-size-social: 0.76rem;
  
  --ebtb7-font-weight-bold: 800;
  --ebtb7-font-weight-semi: 700;
  --ebtb7-font-weight-normal: 600;
  
  /* Transitions & Animations */
  --ebtb7-transition-fast: all 0.2s ease;
  --ebtb7-anim-ticker-duration: 20s;

  direction: rtl;
  box-sizing: border-box;
  font-family: var(--ebtb7-font-family);
  background: var(--ebtb7-bg-gradient);
  color: var(--ebtb7-text-color);
  position: relative;
  overflow: hidden;
  border-bottom: var(--ebtb7-bar-border-bottom);
  box-shadow: var(--ebtb7-box-shadow-bar);
  width: 100%;
}

.ebtb7-bar *, .ebtb7-bar *::before, .ebtb7-bar *::after {
  box-sizing: border-box;
}

.ebtb7-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ebtb7-line {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 1px;
  background: var(--ebtb7-line-bg);
}

.ebtb7-container {
  max-width: var(--ebtb7-max-width);
  margin-inline: auto;
  padding-inline: var(--ebtb7-padding-x);
  padding-block: var(--ebtb7-padding-y);
  display: flex;
  flex-direction: var(--ebtb7-container-flex-dir);
  align-items: center;
  justify-content: var(--ebtb7-container-justify);
  gap: var(--ebtb7-gap-container);
  position: relative;
  z-index: 2;
  width: 100%;
}

.ebtb7-cluster-c { order: -2; }
.ebtb7-cluster-a { order: -1; }
.ebtb7-cluster-b { order: 1; }

.ebtb7-cluster {
  display: flex;
  align-items: center;
  gap: var(--ebtb7-gap-cluster);
  flex-wrap: wrap;
  justify-content: center;
}

.ebtb7-ticker {
  overflow: hidden;
  position: relative;
  max-width: var(--ebtb7-ticker-max-width);
  width: 100%;
  white-space: nowrap;
  border: var(--ebtb7-ticker-border);
  padding: 0.12rem 0.6rem;
  background: var(--ebtb7-ticker-bg);
}

.ebtb7-ticker-track {
  display: inline-flex;
  gap: var(--ebtb7-gap-ticker);
  animation: ebtb7-scroll-t5 var(--ebtb7-anim-ticker-duration) linear infinite;
}

.ebtb7-ticker-track:hover {
  animation-play-state: paused;
}

.ebtb7-ticker-item {
  font-size: var(--ebtb7-font-size-ticker);
  color: var(--ebtb7-ticker-item-color);
  font-weight: var(--ebtb7-font-weight-normal);
}

.ebtb7-ticker-sep {
  color: var(--ebtb7-ticker-sep-color);
}

.ebtb7-stat {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--ebtb7-font-size-stat);
  color: var(--ebtb7-stat-color);
  border: var(--ebtb7-stat-border);
  padding: 0.18rem 0.6rem;
  border-radius: var(--ebtb7-stat-radius);
  background: var(--ebtb7-stat-bg);
  white-space: nowrap;
}

.ebtb7-stat-val {
  font-weight: var(--ebtb7-font-weight-semi);
  color: var(--ebtb7-stat-val-color);
}

.ebtb7-contact-group {
  display: flex;
  align-items: center;
  gap: var(--ebtb7-gap-contact);
  flex-wrap: wrap;
  justify-content: center;
}

.ebtb7-link {
  color: var(--ebtb7-text-muted);
  text-decoration: none;
  font-size: var(--ebtb7-font-size-link);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  transition: var(--ebtb7-transition-fast);
  white-space: nowrap;
}

.ebtb7-link:hover {
  color: var(--ebtb7-accent-glow);
}

.ebtb7-social-group {
  display: flex;
  align-items: center;
  gap: var(--ebtb7-gap-social);
}

.ebtb7-social-icon {
  width: var(--ebtb7-social-size);
  height: var(--ebtb7-social-size);
  border-radius: var(--ebtb7-social-radius);
  background: var(--ebtb7-social-bg);
  border: var(--ebtb7-social-border);
  color: var(--ebtb7-social-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: var(--ebtb7-font-size-social);
  transition: var(--ebtb7-transition-fast);
  aspect-ratio: 1 / 1;
}

.ebtb7-social-icon:hover {
  background: var(--ebtb7-social-hover-bg);
  color: var(--ebtb7-social-hover-color);
  border-color: var(--ebtb7-social-hover-border);
  box-shadow: var(--ebtb7-box-shadow-social-hover);
}

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

/* ============================================================
   RESPONSIVE MEDIA QUERIES (Standard 12 Blocks)
   ============================================================ */

/* 1. max-width: 320px */
@media (max-width: 320px) {
  .ebtb7-bar {
    --ebtb7-padding-x: 0.5rem;
    --ebtb7-padding-y: 0.25rem;
    --ebtb7-gap-container: 0.35rem;
    --ebtb7-container-flex-dir: column;
    --ebtb7-ticker-max-width: 260px;
    --ebtb7-font-size-ticker: 0.75rem;
    --ebtb7-font-size-link: 0.75rem;
    --ebtb7-social-size: 24px;
  }
  .ebtb7-cluster-b, .ebtb7-social-group { display: none; }
}

/* 2. min-width: 321px and max-width: 375px */
@media (min-width: 321px) and (max-width: 375px) {
  .ebtb7-bar {
    --ebtb7-padding-x: 0.75rem;
    --ebtb7-padding-y: 0.25rem;
    --ebtb7-gap-container: 0.4rem;
    --ebtb7-container-flex-dir: column;
    --ebtb7-ticker-max-width: 300px;
    --ebtb7-font-size-ticker: 0.78rem;
    --ebtb7-social-size: 24px;
  }
  .ebtb7-cluster-b { display: none; }
}

/* 3. min-width: 376px and max-width: 425px */
@media (min-width: 376px) and (max-width: 425px) {
  .ebtb7-bar {
    --ebtb7-padding-x: 0.85rem;
    --ebtb7-padding-y: 0.25rem;
    --ebtb7-gap-container: 0.45rem;
    --ebtb7-container-flex-dir: column;
    --ebtb7-ticker-max-width: 340px;
  }
  .ebtb7-cluster-b { display: none; }
}

/* 4. min-width: 426px and max-width: 480px */
@media (min-width: 426px) and (max-width: 480px) {
  .ebtb7-bar {
    --ebtb7-padding-y: 0.25rem;
    --ebtb7-gap-container: 0.5rem;
    --ebtb7-container-flex-dir: column;
    --ebtb7-ticker-max-width: 380px;
  }
  .ebtb7-cluster-b { display: none; }
}

/* 5. min-width: 481px and max-width: 600px */
@media (min-width: 481px) and (max-width: 600px) {
  .ebtb7-bar {
    --ebtb7-padding-y: 0.28rem;
    --ebtb7-gap-container: 0.55rem;
    --ebtb7-container-flex-dir: column;
    --ebtb7-ticker-max-width: 440px;
  }
  .ebtb7-stat { display: none; }
}

/* 6. min-width: 601px and max-width: 768px */
@media (min-width: 601px) and (max-width: 768px) {
  .ebtb7-bar {
    --ebtb7-padding-y: 0.28rem;
    --ebtb7-gap-container: 0.65rem;
    --ebtb7-ticker-max-width: 310px;
    --ebtb7-container-justify: space-between;
  }
}

/* 7. min-width: 769px and max-width: 1024px */
@media (min-width: 769px) and (max-width: 1024px) {
  .ebtb7-bar {
    --ebtb7-padding-x: 1.2rem;
    --ebtb7-padding-y: 0.28rem;
    --ebtb7-ticker-max-width: 350px;
  }
}

/* 8. min-width: 1025px and max-width: 1280px */
@media (min-width: 1025px) and (max-width: 1280px) {
  .ebtb7-bar {
    --ebtb7-max-width: 1180px;
    --ebtb7-padding-y: 0.28rem;
  }
}

/* 9. min-width: 1281px and max-width: 1440px */
@media (min-width: 1281px) and (max-width: 1440px) {
  .ebtb7-bar {
    --ebtb7-max-width: 1320px;
    --ebtb7-padding-y: 0.28rem;
  }
}

/* 10. min-width: 1441px and max-width: 1920px */
@media (min-width: 1441px) and (max-width: 1920px) {
  .ebtb7-bar {
    --ebtb7-max-width: 1600px;
    --ebtb7-padding-y: 0.32rem;
  }
}

/* 11. min-width: 1921px */
@media (min-width: 1921px) {
  .ebtb7-bar {
    --ebtb7-max-width: 1800px;
    --ebtb7-padding-y: 0.35rem;
    --ebtb7-ticker-max-width: 580px;
  }
}

/* 12. prefers-reduced-motion: reduce */
@media (prefers-reduced-motion: reduce) {
  .ebtb7-ticker-track { animation: none; }
  .ebtb7-social-icon, .ebtb7-link { transition: none; }
}