/* 02-header.css — Shared headers, chat header, transparent home header + banner blur, header icon buttons.
   Part of the old css/styles.css (lines 126–291); unused rules since removed.
   The number is the load order: later files override earlier ones, exactly
   as later lines in the single file used to. Keep them linked in order. */

/* ── Headers (shared) ── */
.header-home, .header-category, .header-subcategory,
.header-makay-table, .header-search, .header-plastay, .header-chat {
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  color: #333;
  padding: 0 1rem;
  /* push content below the status bar / notch */
  padding-top: env(safe-area-inset-top, 0px);
  display: flex; align-items: center; justify-content: space-between;
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 1000;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  font-size: 0.9rem;
  transition: all 0.3s ease;
  /* visual nav bar = 56px; total element height includes the safe-area top */
  height: calc(56px + env(safe-area-inset-top, 0px));
  min-height: calc(56px + env(safe-area-inset-top, 0px));
  box-sizing: border-box;
}
.header-home.hidden, .header-category.hidden, .header-subcategory.hidden,
.header-makay-table.hidden, .header-search.hidden,
.header-plastay.hidden, .header-chat.hidden { display: none; }

/* Plastay header count badge */
.plastay-header-count {
  background: #eef1f9;
  color: #19378C;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.plastay-header-count.hidden { display: none; }

/* Chat fixed header elements */
.header-chat .chat-back-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: #19378C;
  display: flex;
  flex-shrink: 0;
}
.chat-header-person {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.chat-header-avatar {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  background: #eef1f9;
}
.chat-header-text { min-width: 0; }
.chat-header-name {
  font-weight: 700;
  font-size: 14px;
  color: #1a1a2e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-header-sub {
  font-size: 11px;
  color: #888;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-header-price-fixed {
  font-size: 14px;
  font-weight: 700;
  color: #27ae60;
  flex-shrink: 0;
  margin-left: 8px;
}

.header-left  { display: flex; align-items: center; gap: 0.4rem; font-weight: 600; }
.header-right { display: flex; align-items: center; gap: 0.4rem; }

/* Blurred brand image fills the gap between top of screen and banner */
#headerBannerBlur {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: calc(56px + env(safe-area-inset-top, 0px));
  z-index: 998; /* behind header (1000) and header backdrop (999) */
  background-size: cover;
  background-position: center top;
  filter: blur(20px) brightness(0.65) saturate(1.5);
  transform: scale(1.1); /* overshoot to hide blur edges */
  transition: opacity 0.4s ease;
  opacity: 0;
  pointer-events: none;
}
#headerBannerBlur.visible { opacity: 1; }

/* Transparent home header — fully clear so #headerBannerBlur shows through */
.header-home.transparent {
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
}
.header-home.transparent .header-left,
.header-home.transparent .header-right { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.header-home.transparent .search-bar {
  background: rgba(0,0,0,0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
}
.header-home.transparent .search-bar::placeholder { color: rgba(255,255,255,0.6); }
.header-home.transparent .search-icon { color: rgba(255,255,255,0.8); }

/* ── Header icon buttons (bell + messages) ─────────────────────────────── */
.header-icon-btn {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  padding: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #555;
  transition: background 0.18s, color 0.18s;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.header-icon-btn .material-symbols-rounded { font-size: 19px; color: inherit; }
.header-icon-btn:active { background: rgba(0,0,0,0.07); }

/* Transparent state — frosted pill keeps icons legible on any banner image */
.header-home.transparent .header-icon-btn {
  color: #fff;
  background: rgba(0,0,0,0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  padding: 4px;
}
.header-home.transparent .header-icon-btn:active { background: rgba(0,0,0,0.45); }

/* ── Expanded Search Header ── */
/* NOTE: height/padding-top are inherited from the shared .header-* rule above.
   Only override the horizontal/bottom padding here — never height or padding-top. */