/* =====================
   Header Styles (Mycopon — Clean, No Color Override)
   ===================== */

.site-header {
  position: sticky;
  top: 0;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  z-index: 999;
}

.header-row {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  position: relative; /* برای جای‌گیری لوگو */
}

/* =====================
   Logo (size only — keep SVG native colors)
   ===================== */

/* لینک لوگو (متن لینک روی رنگ لوگو اثری ندارد چون img/svg را رنگ نمی‌کنیم) */
.header-logo a,
.site-branding a {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--accent);
  text-decoration: none;
  line-height: 0;
  cursor: pointer;
}

/* تصویر لوگو به‌صورت <img> (SVG فایل) */
.header-logo a img,
.site-branding img.custom-logo {
  height: auto !important;
  width: auto !important;
  max-height: 56px !important;   /* اندازه دسکتاپ */
  object-fit: contain;
  display: block;
  vertical-align: middle;
  transition: none !important;
  transform: none !important;
  opacity: 1 !important;
  filter: none !important;
  box-shadow: none !important;
}

/* اگر لوگو inline SVG شد، فقط اندازه را ست کن — هیچ رنگی اعمال نشود */
.site-branding.header-logo svg {
  height: 56px !important;
  width: auto !important;
  display: inline-block !important;
  vertical-align: middle !important;
  transition: none !important;
  transform: none !important;
  filter: none !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* جای لوگو به‌عنوان عضو گرید (نه absolute که به سرچ ضربه بزند) */
.header-logo,
.site-branding {
  position: static;
  justify-self: start;  /* در RTL = راست */
  align-self: center;
  margin: 0 0 0 8px;
  line-height: 0;
  text-align: right;
}

/* هیچ قانون رنگی روی مسیرهای SVG اعمال نکن! (اگر قبلاً داشتی حذف کن) */
/* مثال‌های ممنوع که باید حذف شده باشند:
   .site-branding.header-logo svg { color: ... }
   .site-branding.header-logo svg * { fill: currentColor !important }
   .site-branding.header-logo svg path, .site-branding.header-logo svg g { fill: inherit/unset !important }
*/

/* عنوان و توضیح متنی سایت را پنهان کن اگر کنار لوگو چاپ می‌شود */
.site-title,
.site-description {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* =====================
   Search (fixed)
   ===================== */
.mc-search {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 65px;
  padding: 6px;
  background: var(--white);
  min-height: 56px;
  box-sizing: border-box;
}
.mc-search input[type="text"] {
  flex: 1;
  height: 44px;
  border: none;
  outline: none;
  background: transparent;
  padding: 0 10px;
  font-size: .95rem;
  padding-inline-end: 48px; /* فضای سمت آیکن */
  box-sizing: border-box;
}
.mc-search input[type="text"]::placeholder {
  color: var(--muted-light);
  opacity: .72;
}
.submit-form {
  position: absolute;
  inset-inline-end: 8px;
  top: 50%;
  transform: translateY(-50%);

  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  appearance: none;
  -webkit-appearance: none;

  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;

  border-radius: 50%;

  color: var(--muted);
  text-decoration: none;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}
.submit-form i {
  font-size: 16px;
  line-height: 1;
}

/* =====================
   Search Results (preview dropdown)
   ===================== */
.store-search-results {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 6px);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 24px var(--shadow-08);
  padding: 8px;
  z-index: 9999;
  display: none;
}
.store-search-results.show { display: block; }

.store-search-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 340px;
  overflow: auto;
}

/* هر آیتم در نتایج سرچ */
.store-suggestion {
  display: flex;
  flex-direction: row;  /* لوگو بیاد راست */
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
}
.store-suggestion:hover { background: var(--surface-soft); }

/* لوگوی برند در سمت راست */
.store-suggestion .logo {
  order: -1;            /* همیشه اول بیاد */
  width: 28px;
  height: 28px;
  border-radius: 6px;
  object-fit: cover;
}
.store-suggestion .txt {
  flex: 1;
  color: var(--ink);
  font-size: .95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* موبایل: اصلاح نتایج جستجو */
@media (max-width: 768px) {
  .store-suggestion {
    gap: 6px;
    padding: 8px 10px;
  }
  .store-suggestion .logo {
    width: 22px;
    height: 22px;
    border-radius: 4px;
  }
  .store-suggestion .txt {
    font-size: .85rem;
  }
}


/* =====================
   Auth links
   ===================== */
.header-auth {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.header-auth a {
  color: var(--brand);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  font-size: .95rem;
}
.header-auth a:hover { text-decoration: underline; }
.header-auth i { margin-inline-end: 4px; }

.header-auth a + a {
  position: relative;
  padding-inline-start: 8px;
  margin-inline-start: 8px;
}
.header-auth a + a::before {
  content: "|";
  position: absolute;
  inset-inline-start: 0;
  color: var(--muted-header);
  font-weight: normal;
}

/* =====================
   Responsive Layout
   ===================== */
.header-row > * { min-width: 0; }

@media (max-width: 991.98px) {
  .header-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "logo auth"
      "search search";
    gap: 10px;
    padding: 10px 16px;
  }

  .header-logo,
  .site-branding {
    max-width: 60vw;
    overflow: visible;
    white-space: nowrap;
  }

  .header-auth {
    grid-area: auth;
    justify-self: end;
    gap: 8px;
    white-space: nowrap;
    flex-wrap: nowrap;
  }
  .header-auth a { font-size: .92rem; line-height: 1.2; }

  .site-search,
  .mc-search { grid-area: search; }
  .mc-search { min-height: 58px; padding: 6px 8px; border-radius: 20px; }
  .mc-search input[type="text"] { height: 44px; padding-inline-end: 48px; }
  .submit-form { width: 38px; height: 38px; }
}

@media (max-width: 575.98px) {
  .header-row { gap: 8px; padding: 12px 16px; }

  .header-logo,
  .site-branding { max-width: 50vw; }

  .header-auth a { font-size: .9rem; }
  .header-auth a + a { padding-inline-start: 6px; margin-inline-start: 6px; }

  .mc-search { min-height: 54px; padding: 5px 7px; border-radius: 16px; }
  .mc-search input[type="text"] { height: 42px; font-size: .95rem; padding-inline-end: 44px; }
  .submit-form { width: 34px; height: 34px; }
}

/* =====================
   Logo Responsive Sizes
   ===================== */
@media (max-width: 1024px) {
  .header-logo a img,
  .site-branding img.custom-logo,
  .site-branding.header-logo svg {
    max-height: 48px !important;
    height: auto !important;
  }
}
@media (max-width: 640px) {
  .header-logo a img,
  .site-branding img.custom-logo,
  .site-branding.header-logo svg {
    max-height: 40px !important;
    height: auto !important;
  }
}

/* ===== Mobile Logo Fix (append to the end) ===== */

/* مطمئن شو والد گرید لوگو رو نمی‌بُره */
.header-row { position: relative; overflow: visible; }
.header-row > * { min-width: 0; }

/* لوگو همیشه قابل نمایش باشد */
.site-branding.header-logo {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;   /* عضو گرید بماند */
  z-index: 10;
  line-height: 0;
}

/* خود لوگو (img یا inline svg) */
.site-branding.header-logo img,
.site-branding.header-logo svg {
  display: inline-block !important;
  width: auto !important;
  height: 40px !important;       /* اندازه موبایل */
  max-width: 100% !important;
  vertical-align: middle !important;
  opacity: 1 !important;
}

/* چیدمان موبایل: جای لوگو/سرچ/اکانت را مشخص کن */
@media (max-width: 991.98px){
  .header-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "logo  auth"
      "search search";
    gap: 10px;
    padding: 10px 16px;
  }

  .site-branding.header-logo { grid-area: logo; justify-self: start; }
  .header-auth { grid-area: auth; justify-self: end; }
  .site-search, .mc-search { grid-area: search; }

  /* ارتفاع سرچ کمی کمتر از دسکتاپ تا جا برای لوگو باشد */
  .mc-search { min-height: 54px; padding: 6px 8px; }
}
@media (max-width: 640px){
  .site-branding.header-logo img,
  .site-branding.header-logo svg { height: 36px !important; } /* خیلی کوچک‌ترها */
}

/* اگر جایی در تم، تصویر لوگو در موبایل مخفی می‌شد، این‌ها خنثی‌اش می‌کند */
@media (max-width: 991.98px){
  .site-branding.header-logo img,
  .site-branding.header-logo svg {
    display: inline-block !important;
  }
}

/* ========================================
   FINAL MOBILE HEADER OVERRIDE
   Hide login/register in mobile header.
   Keep logo + full-width search only.
======================================== */
@media (max-width: 768px) {

  .header-auth {
    display: none !important;
  }

  .header-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "logo"
      "search" !important;

    gap: 10px !important;
    padding: 12px 16px !important;

    overflow: visible !important;
  }

  .site-branding.header-logo,
  .header-logo,
  .site-branding {
    grid-area: logo !important;
    justify-self: start !important;
    align-self: center !important;

    width: auto !important;
    max-width: 100% !important;

    margin: 0 !important;
  }

  .site-search,
  .mc-search {
    grid-area: search !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .mc-search {
    min-height: 54px !important;
    padding: 5px 7px !important;
    border-radius: 16px !important;
  }

  .mc-search input[type="text"] {
    height: 42px !important;
    font-size: .95rem !important;
    padding-inline-end: 44px !important;
  }

  .submit-form {
    width: 34px !important;
    height: 34px !important;
  }

  .site-branding.header-logo img,
  .site-branding.header-logo svg {
    display: inline-block !important;
    width: auto !important;
    height: 36px !important;
    max-width: 100% !important;
  }
}


/* ========================================
   2026 UX fixes — Search placement/size
======================================== */
.submit-form {
  right: 10px !important;
  left: auto !important;
  inset-inline-start: auto !important;
  inset-inline-end: auto !important;
  width: 40px !important;
  height: 40px !important;
}

.submit-form .mc-icon,
.submit-form svg {
  width: 23px !important;
  height: 23px !important;
}

.mc-search input[type="text"] {
  padding-right: 52px !important;
  padding-left: 12px !important;
}

@media (max-width: 768px) {
  .mc-search {
    border-radius: 26px !important;
  }

  .submit-form {
    right: 9px !important;
    width: 40px !important;
    height: 40px !important;
  }

  .submit-form .mc-icon,
  .submit-form svg {
    width: 23px !important;
    height: 23px !important;
  }

  .mc-search input[type="text"] {
    padding-right: 52px !important;
    padding-left: 10px !important;
  }
}


/* ===== Fix: larger mobile search icon ===== */
@media (max-width: 768px) {
  .mc-search .submit-form {
    width: 44px !important;
    height: 44px !important;
    right: 7px !important;
  }

  .mc-search .submit-form .mc-icon,
  .mc-search .submit-form svg {
    width: 27px !important;
    height: 27px !important;
  }

  .mc-search input[type="text"] {
    padding-right: 56px !important;
  }
}


/* ========================================
   Mobile search icon — stronger override
======================================== */
@media (max-width: 768px) {
  .site-header .site-search .mc-search .submit-form {
    right: 6px !important;
    left: auto !important;
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;

    width: 48px !important;
    height: 48px !important;
  }

  .site-header .site-search .mc-search .submit-form > svg.mc-icon,
  .site-header .site-search .mc-search .submit-form > svg {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    flex: 0 0 32px !important;

    transform: scale(1.12);
    transform-origin: center;
  }

  .site-header .site-search .mc-search input[type="text"] {
    padding-right: 64px !important;
  }
}

@media (max-width: 480px) {
  .site-header .site-search .mc-search .submit-form > svg.mc-icon,
  .site-header .site-search .mc-search .submit-form > svg {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    flex-basis: 34px !important;
  }
}


/* v5: mobile search icon slightly smaller */
@media (max-width: 768px) {
  .site-header .site-search .mc-search .submit-form {
    width: 42px !important;
    height: 42px !important;
  }

  .site-header .site-search .mc-search .submit-form > svg.mc-icon,
  .site-header .site-search .mc-search .submit-form > svg {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    flex: 0 0 25px !important;
    transform: none !important;
  }

  .site-header .site-search .mc-search input[type="text"] {
    padding-right: 54px !important;
  }
}

@media (max-width: 480px) {
  .site-header .site-search .mc-search .submit-form > svg.mc-icon,
  .site-header .site-search .mc-search .submit-form > svg {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    flex-basis: 26px !important;
  }
}


/* v6: search icon tone + tighter spacing */
.site-search .mc-search .submit-form,
.site-search .mc-search .submit-form .mc-icon,
.site-search .mc-search .submit-form svg {
  color: var(--muted) !important;
  opacity: .72;
}

.site-search .mc-search input[type="text"] {
  padding-right: 46px !important;
}

@media (max-width: 768px) {
  .site-header .site-search .mc-search .submit-form {
    right: 4px !important;
  }

  .site-header .site-search .mc-search input[type="text"] {
    padding-right: 47px !important;
  }

  .site-header .site-search .mc-search .submit-form,
  .site-header .site-search .mc-search .submit-form .mc-icon,
  .site-header .site-search .mc-search .submit-form svg {
    opacity: .66;
  }
}

@media (min-width: 769px) {
  .site-header .site-search .mc-search .submit-form {
    right: 8px !important;
  }

  .site-header .site-search .mc-search input[type="text"] {
    padding-right: 48px !important;
  }
}
@media (max-width: 768px) {
  .site-header .site-search .mc-search input[type="text"] {
    font-size: 16px !important;
  }
}