/* ═══════════════════════════════════════════
   SHARED COUNTER COMPONENT — counter.css
   Used by index.html and losses.html
   ═══════════════════════════════════════════ */

/* COUNTER HERO LAYOUT */
.counter-hero {
  padding: 140px 2rem 4rem;
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-mid) 60%, var(--navy) 100%);
  text-align: center;
  min-height: 90vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.counter-hero-title {
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  font-weight: 800; color: var(--white);
  line-height: 1.2; max-width: 750px;
  margin-bottom: 3.5rem;
}
.counter-hero-title em {
  color: var(--gold); font-style: normal;
}
.counter-eyebrow {
  font-size: 0.75rem; color: var(--gold); text-transform: uppercase;
  letter-spacing: 2.5px; font-weight: 600; margin-bottom: 1rem;
}
.counter-subtitle {
  font-size: clamp(1rem, 2vw, 1.3rem);
  color: var(--gray-light); font-weight: 400;
  margin-bottom: 2.5rem; max-width: 600px;
}

/* COUNTER LABEL (inside panel) */
.counter-label-inside {
  display: none;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s;
}
.counter-label-inside:hover {
  color: #FF6B5A;
}
.info-circle {
  font-size: 0.85em;
  opacity: 0.5;
  transition: opacity 0.2s;
  margin-left: 4px;
}
.counter-label-inside:hover .info-circle {
  opacity: 1;
}

/* 7-SEGMENT LCD PANEL */
.seg-panel {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  padding: clamp(1rem, 2vw, 2rem) clamp(0.6rem, 2vw, 2rem) clamp(0.6rem, 1vw, 1rem);
  margin-bottom: 1rem;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.4);
  max-width: 820px;
}
.seg-digits-row {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: nowrap;
  gap: clamp(3px, 0.6vw, 12px);
  width: 100%;
}

/* 7-SEGMENT DIGIT */
.seg-digit {
  position: relative;
  width: clamp(14px, 3.5vw, 42px);
  height: clamp(26px, 6vw, 72px);
  flex-shrink: 0;
}
.seg-digit span {
  position: absolute;
  background: rgba(231,76,60,0.06);
  border-radius: 1.5px;
  transition: background 0.15s, box-shadow 0.15s;
}
.seg-digit span.on {
  background: var(--red);
  box-shadow: 0 0 6px rgba(231,76,60,0.35);
}
/* Horizontal segments (a, d, g) */
.seg-digit .seg-h {
  left: 12%; right: 12%;
  height: 8%;
}
.seg-digit .seg-a { top: 0; }
.seg-digit .seg-d { bottom: 0; }
.seg-digit .seg-g { top: 46%; }
/* Vertical segments (b, c, e, f) */
.seg-digit .seg-v {
  width: 10%;
  top: 0; bottom: 0;
}
.seg-digit .seg-f { left: 0; top: 4%; bottom: 52%; }
.seg-digit .seg-b { right: 0; top: 4%; bottom: 52%; }
.seg-digit .seg-e { left: 0; top: 52%; bottom: 4%; }
.seg-digit .seg-c { right: 0; top: 52%; bottom: 4%; }

/* SEPARATOR (comma, dot) */
.seg-sep {
  font-size: clamp(1.2rem, 3vw, 3rem);
  font-weight: 800;
  color: rgba(231,76,60,0.35);
  width: clamp(5px, 1vw, 14px);
  text-align: center;
  align-self: flex-end;
  line-height: 1;
  padding-bottom: clamp(1px, 0.3vw, 4px);
  flex-shrink: 0;
}
.seg-sep--dot {
  color: var(--red);
}

/* CENTS DIGITS — smaller, aligned top */
.seg-cents {
  align-self: flex-start;
  margin-top: clamp(2px, 0.4vw, 6px);
}
.seg-cents .seg-digit {
  width: clamp(8px, 2vw, 24px);
  height: clamp(14px, 3.5vw, 42px);
}
.seg-cents .seg-digit span.on {
  background: var(--red);
  opacity: 0.75;
  box-shadow: 0 0 4px rgba(231,76,60,0.25);
}

/* RED LED INDICATOR */
.seg-led {
  width: clamp(12px, 2vw, 20px); height: clamp(12px, 2vw, 20px);
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 6px rgba(231,76,60,0.6), 0 0 16px rgba(231,76,60,0.3);
  flex-shrink: 0;
  margin-top: auto;
  animation: led-blink 1s ease-in-out infinite;
}
@keyframes led-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(231,76,60,0.6), 0 0 16px rgba(231,76,60,0.3); }
  50% { opacity: 0.2; box-shadow: 0 0 2px rgba(231,76,60,0.2); }
}

/* 14-SEGMENT UNIT DIGITS */
.seg-unit-wrap {
  display: flex; flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  margin-right: clamp(4px, 0.8vw, 14px);
  gap: clamp(6px, 1vw, 12px);
  align-self: stretch;
}
.seg-unit {
  display: inline-flex;
  gap: clamp(1px, 0.3vw, 4px);
}
.seg14 {
  position: relative;
  width: clamp(10px, 2.2vw, 24px);
  height: clamp(16px, 3.8vw, 42px);
  flex-shrink: 0;
}
.seg14 span {
  position: absolute;
  background: rgba(231,76,60,0.06);
  border-radius: 1px;
  transition: background 0.15s, box-shadow 0.15s;
}
.seg14 span.on {
  background: var(--red);
  box-shadow: 0 0 4px rgba(231,76,60,0.3);
}
/* 14-seg horizontals */
.seg14 .u-a  { top: 0; left: 10%; right: 10%; height: 8%; }
.seg14 .u-d  { bottom: 0; left: 10%; right: 10%; height: 8%; }
.seg14 .u-g1 { top: 46%; left: 10%; right: 52%; height: 8%; }
.seg14 .u-g2 { top: 46%; left: 52%; right: 10%; height: 8%; }
/* 14-seg verticals */
.seg14 .u-f  { left: 0; top: 4%; bottom: 52%; width: 10%; }
.seg14 .u-b  { right: 0; top: 4%; bottom: 52%; width: 10%; }
.seg14 .u-e  { left: 0; top: 52%; bottom: 4%; width: 10%; }
.seg14 .u-c  { right: 0; top: 52%; bottom: 4%; width: 10%; }
.seg14 .u-i  { left: 45%; top: 6%; bottom: 54%; width: 10%; }
.seg14 .u-l  { left: 45%; top: 54%; bottom: 6%; width: 10%; }
/* 14-seg diagonals */
.seg14 .u-h  { left: 22%; top: 5%; width: 8%; height: 42%; transform: rotate(-30deg); transform-origin: center; }
.seg14 .u-j  { right: 22%; top: 5%; width: 8%; height: 42%; transform: rotate(30deg); transform-origin: center; }
.seg14 .u-k  { left: 22%; bottom: 5%; width: 8%; height: 42%; transform: rotate(30deg); transform-origin: center; }
.seg14 .u-m  { right: 22%; bottom: 5%; width: 8%; height: 42%; transform: rotate(-30deg); transform-origin: center; }

/* MODE/RESET BUTTONS */
.seg-buttons {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.seg-btn {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gray-light);
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 10px 28px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.1s;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.3), 0 2px 8px rgba(0,0,0,0.2);
}
.seg-btn:hover {
  color: var(--red);
  border-color: rgba(231,76,60,0.4);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.3), 0 0 12px rgba(231,76,60,0.15);
}
.seg-btn:active {
  transform: scale(0.97);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.5);
}
.seg-btn--reset {
  color: var(--gray-light);
  cursor: pointer;
}
.seg-btn--reset:hover {
  color: var(--gold);
  border-color: rgba(212,168,67,0.4);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.3), 0 0 12px rgba(212,168,67,0.15);
}

/* COUNTER SINCE LINE */
.counter-since {
  font-size: 0.82rem; color: var(--gray);
  margin-top: 0.5rem;
}

/* HERO LOGO (inside counter hero) */
.counter-hero .hero-logo {
  width: 180px; height: 180px; margin: 0 auto 2.5rem;
}
.counter-hero .hero-logo img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 768px) {
  .counter-hero .hero-logo { width: 140px; height: 140px; }
}
@media (max-width: 480px) {
  .counter-hero .hero-logo { width: 120px; height: 120px; margin-bottom: 1rem; }
}