/*! Top Info Bar Component Styles */
/* BEM Naming Convention */
/* Component-specific styles loaded after critical CSS */

/* ==========================================================================
   TOP INFO BAR COMPONENT
   ========================================================================== */

/**
 * Top information bar displaying contact info and trust signals
 * 
 * @component top-info-bar
 * @performance CSS containment applied for optimal rendering
 */

/* Base Component - Inherits critical CSS */

/* Container - Inherits critical CSS */

/* Left Section - Contact Links - Inherits critical CSS */

/* Right Section - Rating Display */
.top-info-bar__right {
  /* Inherits critical CSS */
  margin-left: auto;
}
.top-info-bar {
  contain: layout style paint;
  background-color: var(--color-black);
  width: 100%;
  position: relative;
  z-index: 100;
}

.top-info-bar__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: var(--spacing-sm) var(--spacing-xl);
  gap: var(--spacing-sm);
}

.top-info-bar__left {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
}

.top-info-bar__right {
  display: flex;
  align-items: center;
}

.top-info-bar__link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--color-white);
  text-decoration: none;
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-base);
  line-height: var(--line-height-base);
  transition: opacity 0.2s ease;
  will-change: opacity;
}

.top-info-bar__link:hover {
  opacity: 0.8;
}

.top-info-bar__link--disabled {
  color: var(--color-gray-disabled);
  pointer-events: none;
}

.top-info-bar__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.top-info-bar__text {
  white-space: nowrap;
}

.top-info-bar__rating {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  color: var(--color-white);
}

.top-info-bar__stars {
  display: flex;
  gap: 2px;
}

.top-info-bar__star {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.top-info-bar__rating-text {
  font-family: var(--font-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-base);
  line-height: var(--line-height-base);
  white-space: nowrap;
}
/* ==========================================================================
   LINK STYLES
   ========================================================================== */

.top-info-bar__link {
  /* Inherits critical CSS */
  cursor: pointer;
  position: relative;
}

/* Link variants */
.top-info-bar__link--phone {
  /* Phone number link with icon */
}

.top-info-bar__link--email {
  /* Email address link with icon */
}

.top-info-bar__link--track {
  /* Track order link */
}

.top-info-bar__link--about {
  /* About us link */
}

.top-info-bar__link--contact {
  /* Contact us link */
}
/* Hover state with hardware acceleration */
.top-info-bar__link:hover:not(.top-info-bar__link--disabled) {
  /* Only animate opacity for performance */
  opacity: 0.8;
}

/* Active state */
.top-info-bar__link:active:not(.top-info-bar__link--disabled) {
  opacity: 0.6;
}

/* Disabled state */
.top-info-bar__link--disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ==========================================================================
   ICON STYLES
   ========================================================================== */

.top-info-bar__icon {
  /* Inherits critical CSS */
  display: block;
}

/* Icon color for active links */
.top-info-bar__link:not(.top-info-bar__link--disabled) .top-info-bar__icon {
  color: var(--color-white);
}

/* Icon color for disabled links */
.top-info-bar__link--disabled .top-info-bar__icon {
  color: var(--color-gray-disabled);
}

/* ==========================================================================
   RATING COMPONENT
   ========================================================================== */

/* Rating container - Inherits critical CSS */

/* Stars Container */
.top-info-bar__stars {
  /* Inherits critical CSS */
  align-items: center;
}

/* Individual Star */
.top-info-bar__star {
  /* Inherits critical CSS */
  width: 20px;
  height: 20px;
  display: block;
}

/* Empty stars with reduced opacity */
.top-info-bar__star--empty {
  opacity: 0.3;
  filter: grayscale(100%);
}

/* Rating Text */
.top-info-bar__rating-text {
  /* Inherits critical CSS */
  color: var(--color-white);
}

/* ==========================================================================
   RESPONSIVE DESIGN - MOBILE FIRST
   ========================================================================== */

/* Mobile: 320px - 767px */
@media (max-width: 767px) {
  .top-info-bar {
    height: auto;
    min-height: var(--top-bar-height);
  }

  .top-info-bar__container {
    flex-direction: column;
    gap: var(--spacing-xs);
    align-items: flex-start;
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .top-info-bar__left {
    width: 100%;
    justify-content: space-between;
    gap: var(--spacing-md);
  }

  .top-info-bar__right {
    width: 100%;
    margin-left: 0;
    margin-top: var(--spacing-sm);
  }

  /* Hide less important links on mobile */
  .top-info-bar__link--track,
  .top-info-bar__link--email,
  .top-info-bar__link:nth-child(4),
  .top-info-bar__link:nth-child(3),
  .top-info-bar__link:nth-child(5) {
    display: none;
  }

  .top-info-bar__text {
    font-size: 12px;
  }

  .top-info-bar__icon {
    width: 16px;
    height: 16px;
  }

  .top-info-bar__star {
    width: 16px;
    height: 16px;
  }

  .top-info-bar__rating-text {
    font-size: 12px;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .top-info-bar__link--track {
    display: none;
  }
}

/* Tablet: 768px - 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
  .top-info-bar__container {
    padding: var(--spacing-md) var(--spacing-lg);
  }

  .top-info-bar__left {
    gap: var(--spacing-md);
  }

  /* Hide track order on tablet */
  .top-info-bar__link--track {
    display: none;
  }
}

/* Desktop: 1024px - 1439px */
@media (min-width: 1024px) and (max-width: 1439px) {
  .top-info-bar__container {
    padding: var(--spacing-sm) calc(var(--spacing-xl));
  }
}

/* Wide: 1440px+ */
@media (min-width: 1440px) {
  .top-info-bar__container {
    padding: var(--spacing-sm) calc(var(--spacing-xl));
  }

  .top-info-bar__left {
    gap: calc(var(--spacing-lg) * 1.67);
  }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
  .top-info-bar {
    background-color: transparent;
    color: var(--color-black);
    border-bottom: 1px solid var(--color-black);
  }

  .top-info-bar__link {
    color: var(--color-black);
  }

  .top-info-bar__stars {
    display: none;
  }
}

/* ==========================================================================
   HIGH CONTRAST MODE
   ========================================================================== */

@media (prefers-contrast: high) {
  .top-info-bar {
    border-bottom: 2px solid var(--color-white);
  }

  .top-info-bar__link:hover {
    text-decoration: underline;
  }
}

/* ==========================================================================
   RESPONSIVE DESIGN
   ========================================================================== */

/* Mobile - Hide top info bar on small screens */
@media (max-width: 808px) {
  .top-info-bar {
    display: none;
  }
}