/* Al Farouk Visitor Odometer — v3 | compact charcoal/gold | desktop + mobile */
/* Replace the previous farouk-odometer.css with this entire file. */

.visitor-counter,
.mobile-visitor-counter {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  min-height: 27px;
  line-height: 1;
  direction: ltr;
}

/* Variables on both desktop and mobile odometer elements */
#visitorCount.farouk-odometer,
#visitorCountMobile.farouk-odometer,
.visitor-counter .farouk-odometer,
.mobile-visitor-counter .farouk-odometer {
  --fc-digit-width: 17px;
  --fc-digit-height: 26px;
  --fc-digit-color: #e4b85f;
  --fc-digit-font-size: 17px;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 2px;
  direction: ltr;
  unicode-bidi: isolate;
  height: var(--fc-digit-height);
  min-height: var(--fc-digit-height);
  white-space: nowrap;
  vertical-align: middle;
  font-family: Arial, Tahoma, sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* One self-contained, vertically aligned number window */
.farouk-odometer .fc-window {
  box-sizing: border-box;
  position: relative;
  display: block;
  flex: 0 0 var(--fc-digit-width);
  width: var(--fc-digit-width);
  height: var(--fc-digit-height);
  min-width: 0;
  min-height: 0;
  padding: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid #655334;
  border-radius: 3px;
  background: linear-gradient(180deg, #34352f 0%, #292a25 47%, #1a1d1a 52%, #2a2c27 100%);
  box-shadow: inset 0 1px 1px rgba(255, 229, 172, .12), inset 0 -1px 2px rgba(0, 0, 0, .42);
  vertical-align: middle;
}

/* Thin center split line, like a mechanical counter */
.farouk-odometer .fc-window::after {
  content: '';
  position: absolute;
  z-index: 2;
  pointer-events: none;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(0, 0, 0, .52);
  box-shadow: 0 1px 0 rgba(232, 186, 91, .11);
}

/* Important: keep track and every number exactly the same height. */
.farouk-odometer .fc-strip {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  line-height: 1;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.farouk-odometer .fc-strip.is-moving {
  transition: transform 720ms cubic-bezier(.18, .76, .22, 1);
}

.farouk-odometer .fc-number {
  box-sizing: border-box;
  display: flex;
  flex: 0 0 var(--fc-digit-height);
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--fc-digit-height);
  min-height: var(--fc-digit-height);
  max-height: var(--fc-digit-height);
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--fc-digit-color);
  font-family: Arial, Tahoma, sans-serif;
  font-size: var(--fc-digit-font-size);
  font-weight: 700;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0;
  text-indent: 0;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .75);
  font-variant-numeric: tabular-nums;
}

/* Text shown before JS initializes */
.farouk-odometer .fc-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--fc-digit-height);
  color: var(--fc-digit-color);
  font: 700 var(--fc-digit-font-size)/1 Arial, Tahoma, sans-serif;
  letter-spacing: 2px;
  white-space: nowrap;
}

/* Desktop header: reserve space for the current five-digit count */
.visitor-counter { min-width: 93px; }

/* Mobile header: slightly smaller cards to avoid crowding */
@media (max-width: 767px) {
  .visitor-counter,
  .mobile-visitor-counter {
    min-height: 24px;
  }

  #visitorCount.farouk-odometer,
  #visitorCountMobile.farouk-odometer,
  .visitor-counter .farouk-odometer,
  .mobile-visitor-counter .farouk-odometer {
    --fc-digit-width: 15px;
    --fc-digit-height: 23px;
    --fc-digit-font-size: 15px;
    gap: 1.5px;
  }

  .visitor-counter,
  .mobile-visitor-counter { min-width: 82px; }

  .mobile-visitor-label {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
  }
}

@media (max-width: 380px) {
  #visitorCount.farouk-odometer,
  #visitorCountMobile.farouk-odometer,
  .visitor-counter .farouk-odometer,
  .mobile-visitor-counter .farouk-odometer {
    --fc-digit-width: 14px;
    --fc-digit-height: 22px;
    --fc-digit-font-size: 14px;
    gap: 1px;
  }
  .visitor-counter,
  .mobile-visitor-counter { min-width: 75px; }
}

@media (prefers-reduced-motion: reduce) {
  .farouk-odometer .fc-strip.is-moving {
    transition: none !important;
  }
}