/* ============================================================
   HEADER & TOPBAR STYLES
   segma-commerce-theme/assets/css/header.css
   ============================================================ */

/* ── TOP BAR ───────────────────────────────────────────────── */
.segma-topbar {
  background: var(--clr-topbar);
  color: var(--clr-white);
  height: var(--topbar-h);
  font-size: 12px;
  font-weight: 600;
  overflow: hidden;
}

.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 8px;
}

.topbar-phone a {
  color: var(--clr-white);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.topbar-phone a:hover { opacity: 0.85; }

.topbar-marquee-wrapper {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  display: flex;
  align-items: center;
}

.topbar-marquee {
  display: inline-flex;
  gap: 30px;
  animation: marqueeScroll 15s linear infinite;
  white-space: nowrap;
}

.marquee-item {
  font-size: 13px;
  font-weight: 600;
  opacity: 0.95;
}

@keyframes marqueeScroll {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

.topbar-social {
  display: flex;
  align-items: center;
  gap: 8px;
}

.social-icon {
  color: var(--clr-white);
  opacity: 0.9;
  transition: opacity var(--transition), transform var(--transition);
  display: flex;
  align-items: center;
}

.social-icon:hover { opacity: 1; transform: scale(1.15); }

/* ── MAIN HEADER ────────────────────────────────────────────── */
.segma-header {
  background: var(--clr-white);
  border-bottom: 1px solid var(--clr-border);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  gap: 12px;
}

/* Cart */
.header-cart {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--clr-text);
  flex-shrink: 0;
  transition: color var(--transition);
}

.header-cart:hover { color: var(--clr-primary); }

.cart-icon-wrap {
  position: relative;
  display: flex;
}

.cart-count {
  position: absolute;
  top: -8px;
  left: -8px;
  background: var(--clr-primary);
  color: var(--clr-white);
  font-size: 10px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
  transition: transform 0.3s cubic-bezier(.34,1.56,.64,1);
}

.cart-count.bump {
  transform: scale(1.4);
}

/* Search + Categories */
.header-search-wrap {
  flex: 1;
  max-width: 600px;
}

.search-categories-group {
  display: flex;
  align-items: center;
  border: 2px solid var(--clr-primary);
  border-radius: var(--radius-sm);
  overflow: visible;
  background: var(--clr-white);
  position: relative;
}

/* Search input */
.header-search-form {
  display: flex;
  align-items: center;
  flex: 1;
  height: 38px;
}

.search-input {
  flex: 1;
  border: none;
  outline: none;
  padding: 0 12px;
  font-size: 13px;
  color: var(--clr-text);
  background: transparent;
  direction: rtl;
  height: 100%;
}

.search-input::placeholder { color: #bbb; }

.search-btn {
  background: var(--clr-primary);
  color: var(--clr-white);
  border: none;
  width: 42px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm); /* LTR end = left in RTL */
  transition: background var(--transition);
  flex-shrink: 0;
}

.search-btn:hover { background: var(--clr-primary-dark); }

/* Logo */
.header-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.site-logo-img {
  height: 48px;
  width: auto;
  object-fit: contain;
}

.logo-fallback {
  display: flex;
  align-items: center;
}

/* ── MOBILE SEARCH BAR ──────────────────────────────────────── */
.mobile-search-bar {
  display: none;
  background: #fff;
  border-top: 1px solid var(--clr-border);
  padding: 8px 0;
}

.mobile-search-bar.is-open {
  display: block;
}

.mobile-search-form {
  display: flex;
  border: 1.5px solid var(--clr-primary);
  border-radius: var(--radius-sm);
  overflow: hidden;
  height: 40px;
}

.mobile-search-form input {
  flex: 1;
  border: none;
  outline: none;
  padding: 0 12px;
  font-size: 14px;
  background: transparent;
  direction: rtl;
}

.mobile-search-form button {
  background: var(--clr-primary);
  color: #fff;
  border: none;
  width: 44px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .topbar-marquee-wrapper { display: flex; } /* Marquee is visible on mobile */
  .topbar-phone a { font-size: 11px; }

  .header-inner {
    flex-wrap: nowrap;
    height: 60px;
    padding: 0 10px;
    gap: 10px;
  }

  .header-logo { order: 4; margin-right: 0; }
  .header-search-wrap { order: 3; flex: 1; display: flex; justify-content: flex-end; padding-left: 10px; }
  .header-search-wrap .search-categories-group { display: none; } /* Hide complex search on mobile */
  .mobile-menu-toggle { order: 1; display: flex; }
  .header-cart { order: 2; margin-right: auto; }

  .mobile-search-bar { display: none; } /* Handle mobile search via a toggle script later if needed */
}

@media (min-width: 769px) {
  .mobile-search-bar { display: none !important; }
}

/* Navigation links (optional, for future use) */
.header-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  list-style: none;
}

.header-nav a {
  font-size: 14px;
  font-weight: 600;
  color: var(--clr-text);
  transition: color var(--transition);
}

.header-nav a:hover { color: var(--clr-primary); }