/* ==========================================================================
   05. Topbar
   ========================================================================== */

.pf-topbar {
  position: relative;
  z-index: 1000;
  padding-top: var(--pf-space-2);
  padding-bottom: var(--pf-space-2);
  font-size: var(--pf-text-sm);
  background-color: var(--pf-topbar-bg, #333333);
  color: var(--pf-topbar-text, #ffffff);
}

@media (max-width: 639px) {
  .pf-topbar {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
    font-size: 0.75rem;
  }
  .pf-topbar__inner {
    justify-content: center !important;
  }
  .pf-topbar__left {
    gap: 0.75rem !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
  }
  .pf-topbar__item:nth-child(2) {
    display: none; /* Keep single phone line on mobile to prevent 2-line stacking */
  }
  .pf-topbar__right {
    display: none; /* Hide topbar social icons on mobile */
  }
}

.pf-topbar__inner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: var(--pf-space-2);
}

.pf-topbar__left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pf-space-4);
}

@media (min-width: 768px) {
  .pf-topbar__left {
    gap: var(--pf-space-6);
  }
}

.pf-topbar__item {
  display: flex;
  align-items: center;
  gap: var(--pf-space-2);
}

.pf-topbar__icon {
  width: 1rem;
  height: 1rem;
  opacity: 0.8;
}

.pf-topbar__link {
  color: currentColor;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.pf-topbar__link:hover {
  opacity: 0.8;
}

.pf-topbar__right {
  font-size: var(--pf-text-sm);
  opacity: 0.9;
}

/* Social icons within topbar */
.pf-topbar-socials {
  display: flex;
  align-items: center;
  gap: var(--pf-space-3);
}

.pf-topbar-socials__icon {
  color: currentColor;
  transition: opacity 0.2s ease;
  font-size: var(--pf-text-sm);
}

.pf-topbar-socials__icon:hover {
  opacity: 0.7;
}

/* --- Language Selector --- */
.pf-language__trigger { display: flex; align-items: center; gap: 0.5rem; color: #ffffff; font-size: 0.875rem; height: 1.75rem; padding-left: 0.5rem; padding-right: 0.5rem; border-radius: 0.25rem; transition: background-color 0.2s; border: none; cursor: pointer; background: transparent; }
.pf-language__trigger:focus { outline: none; box-shadow: none; }
.pf-language__text { color: #ffffff; font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.25rem; }
.pf-language__flag { width: 1rem; height: 1rem; }
.pf-language__icon { width: 0.75rem; height: 0.75rem; transition: transform 0.2s; }
.pf-language__menu { position: absolute; right: 0; top: 100%; margin-top: 0.5rem; width: 12rem; background-color: #ffffff; border-radius: 0.5rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); border: 1px solid #e5e7eb; padding-top: 0.5rem; padding-bottom: 0.5rem; z-index: 50; opacity: 0; visibility: hidden; transform: scale(0.95); transition: all 0.2s; }
.pf-language__trigger[aria-expanded="true"] + .pf-language__menu { opacity: 1; visibility: visible; transform: scale(1); }
.pf-language__option { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 1rem; font-size: 0.875rem; color: #374151; transition: background-color 0.2s; text-decoration: none; }
.pf-language__option:hover { background-color: #f3f4f6; }
.pf-language__option-text { transition: color 0.2s; }
.pf-language__option:hover .pf-language__option-text { color: var(--pawfect-primary, #1d4ed8); }