/* ზედა მენიუ Netflix-ის სტილში (2026-10-25, მფლობელის თანხმობით; Figma: OKVWnswuoJ6ULGt7x4GykT).
   ge-custom.css-ის ძველი header/sidebar წესები ბევრ !important-ს შეიცავს, ამიტომ აქ ყველაფერი
   .header.hdr2-ზეა მიბმული (მეტი სპეციფიკურობა) და ფაილი ბოლოს იტვირთება.
   ზემოთ: გამჭვირვალე (მუქი გრადიენტი). ჩამოსქროლვისას (.is-scrolled, app.js initHeaderScroll):
   მუქი ბუნდოვანი ფონი + ქვედა ხაზი.
   ⚠️ ბუნდოვანი ფონი ::before-ზეა და არა თვითონ .header-ზე: .sidebar (მობილურის ქვედა მენიუ,
   position:fixed) .header-ის შიგნითაა, ხოლო backdrop-filter წინაპარზე fixed ელემენტს მის შიგნით
   „მიაბამდა" და ქვედა მენიუ ეკრანის ბოლოდან header-ში ავიდოდა. */

.header.hdr2 {
  --hdr-accent: var(--ge-red, #008170);
  --hdr-glass: rgba(15, 15, 15, .82);
  --hdr-line: rgba(255, 255, 255, .12);
  --hdr-soft: rgba(255, 255, 255, .08);
  --hdr-font: "Noto Sans Georgian", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  height: auto !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)) !important;
  border-bottom: 0 !important;
  isolation: isolate;
}
.header.hdr2::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--hdr-glass); border-bottom: 1px solid var(--hdr-line);
  -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%);
  opacity: 0; transition: opacity .25s ease;
}
.header.hdr2.is-scrolled::before { opacity: 1; }

/* ---- „უყურე მეგობრებთან" ---- */
.header.hdr2 .hdr-watch {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: 0 0 auto;
  height: 40px; padding: 0 16px 0 14px; border-radius: 20px;
  background: var(--hdr-accent); color: #fff !important; text-decoration: none; white-space: nowrap;
  font-family: var(--hdr-font) !important; font-size: 14px; font-weight: 600; line-height: 1;
  transition: background-color .2s ease, transform .15s ease;
}
.header.hdr2 .hdr-watch:hover { background: #009783; }
.header.hdr2 .hdr-watch:active { transform: scale(.96); }
.header.hdr2 .hdr-watch svg { flex: 0 0 auto; }

/* ---- ძებნის ველი (ორივე ზომაზე ყოველთვის ჩანს) ---- */
.header.hdr2 .header-top__search form {
  display: flex !important; align-items: center; height: 40px; margin: 0;
  background: var(--hdr-soft) !important; border: 1px solid var(--hdr-line); border-radius: 20px !important;
  box-shadow: none; overflow: hidden; transition: border-color .2s ease, background-color .2s ease;
}
.header.hdr2 .header-top__search form:focus-within { border-color: var(--hdr-accent); background: rgba(15, 15, 15, .92) !important; }
/* submit ღილაკი ხატულად, ველის მარცხნივ */
.header.hdr2 .header-top__search form button {
  order: -1; flex: 0 0 auto; display: flex !important; align-items: center; justify-content: center;
  width: 40px !important; height: 38px !important; margin: 0 !important; padding: 0 0 0 4px !important;
  border: 0; border-radius: 0 !important; background: transparent !important; box-shadow: none;
  color: rgba(255, 255, 255, .7) !important; font-size: 0 !important; line-height: 0;
}
.header.hdr2 .header-top__search form button i { font-size: 15px; margin: 0 !important; line-height: 1; }
.header.hdr2 .header-top__search input#search {
  flex: 1 1 auto; min-width: 0; width: auto !important; height: 38px !important; margin: 0;
  padding: 0 14px 0 2px !important; border: 0 !important; background: transparent !important; box-shadow: none;
  color: #fff !important; font-family: var(--hdr-font) !important; font-size: 14px; line-height: 38px !important;
}
.header.hdr2 .header-top__search input#search::placeholder { color: rgba(255, 255, 255, .5); opacity: 1; }
.header.hdr2 .header-top__search input#search:focus { outline: none; }

/* ---- ანგარიში ---- */
.header.hdr2 .header-account__toggle {
  width: 36px; height: 36px; flex: 0 0 auto;
  background: var(--hdr-soft); border: 1px solid var(--hdr-line); box-shadow: none;
}

/* ================= დესკტოპი ================= */
@media (min-width: 1025px) {
  .header.hdr2 .header-top { height: 76px !important; padding: 0 !important; gap: 0; align-items: center; transition: height .25s ease; }
  .header.hdr2.is-scrolled .header-top { height: 64px !important; }

  /* ლოგოს სიმაღლე ბექოფისის პარამეტრია (base.html), აქ მხოლოდ ჩამოსქროლვისას ვაპატარავებთ */
  .header.hdr2 .header-top__logo { order: 0; margin-right: 40px; }
  .header.hdr2 .header-top__logo img { transform-origin: left center; transition: transform .25s ease; }
  .header.hdr2.is-scrolled .header-top__logo img { transform: scale(.85); }

  .header.hdr2 .sidebar { order: 1; flex: 1 1 auto; min-width: 0; }
  .header.hdr2 .sidebar .navbar-nav { justify-content: flex-start; gap: 26px; }
  .header.hdr2 .sidebar .nav-item { flex: 0 0 auto; }
  .header.hdr2 .sidebar .nav-link {
    height: auto; width: auto; padding: 10px 0 !important; gap: 0; overflow: visible;
    background: transparent !important; color: rgba(255, 255, 255, .72) !important;
    font-family: var(--hdr-font) !important; transform: none !important; transition: color .2s ease;
  }
  .header.hdr2 .sidebar .nav-link::before { display: none !important; }
  .header.hdr2 .sidebar .nav-link::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 3px; border-radius: 2px;
    background: var(--hdr-accent); opacity: 0; transform: scaleX(.3); transition: opacity .2s ease, transform .25s ease;
  }
  .header.hdr2 .sidebar .nav-link:hover,
  .header.hdr2 .sidebar .nav-link.active { color: #fff !important; background: transparent !important; transform: none !important; }
  .header.hdr2 .sidebar .nav-link.active::after { opacity: 1; transform: none; }
  .header.hdr2 .sidebar .nav-link svg,
  .header.hdr2 .sidebar .nav-link .nav-link__img { display: none !important; }
  .header.hdr2 .sidebar .nav-link .pt-xl-2 {
    display: block !important; font-size: 14px; font-weight: 500 !important; letter-spacing: 0;
    font-feature-settings: normal; text-transform: none; overflow: visible !important;
  }
  .header.hdr2 .sidebar .nav-link.active .pt-xl-2 { font-weight: 600 !important; }

  .header.hdr2 .hdr-watch { order: 2; margin-left: 20px; }
  .header.hdr2 .header-top__search { order: 3; flex: 0 0 auto; width: 260px !important; margin-left: 12px; }
  .header.hdr2 .header-top__right { order: 4; margin-left: 12px; }
}
/* ვიწრო დესკტოპი: „უყურე მეგობრებთან" ხატულად, ძებნა ვიწროდ, ბმულები უფრო მჭიდროდ */
@media (min-width: 1025px) and (max-width: 1279px) {
  .header.hdr2 .header-top__logo { margin-right: 24px; }
  .header.hdr2 .sidebar .navbar-nav { gap: 18px; }
  .header.hdr2 .sidebar .nav-link .pt-xl-2 { font-size: 13.5px; }
  .header.hdr2 .hdr-watch { width: 40px; padding: 0; margin-left: 12px; }
  .header.hdr2 .hdr-watch__label { display: none; }
  .header.hdr2 .header-top__search { width: 210px !important; }
}

/* ================= მობილური / პლანშეტი ================= */
@media (max-width: 1024px) {
  /* ზემოთ: ანგარიში | ლოგო (ცენტრში) | მეგობრებთან ყურება; ქვემოთ: ძებნა მთელ სიგანეზე */
  .header.hdr2 .header-top {
    display: grid !important; grid-template-columns: 36px 1fr 36px;
    grid-template-areas: "acc logo watch" "search search search";
    align-items: center; row-gap: 10px; padding: 8px 0 12px !important;
    /* .header .row-ს width:100% !important აქვს (ge-custom.css), ამიტომ row-ის -15px მარჯინი მარჯვნივ
       არ ფართოვდება: მარცხნივ 15px რჩება, მარჯვნივ 45px. გაზომილი 375px-ზე, ვასწორებთ */
    width: calc(100% + 30px) !important;
  }
  .header.hdr2 .header-top__right { display: contents !important; }
  .header.hdr2 .header-account__toggle { grid-area: acc; position: static !important; transform: none !important; margin: 0 !important; }
  .header.hdr2 .header-search-toggle,
  .header.hdr2 .header-search-close { display: none !important; }
  .header.hdr2 .header-top__logo {
    grid-area: logo; justify-self: center; position: static !important; left: auto; top: auto;
    transform: none !important; visibility: visible !important;
  }
  .header.hdr2 .header-top__logo img { height: 36px !important; }
  .header.hdr2 .hdr-watch { grid-area: watch; width: 36px; height: 36px; padding: 0; border-radius: 50%; }
  .header.hdr2 .hdr-watch__label { display: none; }
  .header.hdr2 .header-top__search {
    grid-area: search; display: block !important; position: relative !important; inset: auto; right: auto;
    width: auto !important; opacity: 1 !important; pointer-events: auto !important; transform: none !important;
    background: transparent !important;
  }
  .header.hdr2 #search_autocomplete { left: 0 !important; right: 0; }

  /* ---- ქვედა მენიუ ---- */
  .header.hdr2 .sidebar {
    height: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
    background: var(--hdr-glass) !important; border-top: 1px solid var(--hdr-line); box-shadow: none;
    -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%);
  }
  .header.hdr2 .sidebar .navbar-nav { height: 64px; }
  .header.hdr2 .sidebar .nav-link {
    height: 64px; gap: 4px; padding: 6px 1px !important;
    color: rgba(255, 255, 255, .5) !important; font-family: var(--hdr-font) !important;
  }
  /* ხატულა „აბში": აქტიურზე მწვანე ფონი, padding-ით 22px ნახატი 52×28 ყუთში */
  .header.hdr2 .sidebar .nav-link svg,
  .header.hdr2 .sidebar .nav-link .nav-link__img {
    box-sizing: border-box; width: 52px !important; height: 28px !important; padding: 3px 15px;
    border-radius: 14px; opacity: .65; object-fit: contain; transition: background-color .2s ease, opacity .2s ease;
  }
  .header.hdr2 .sidebar .nav-link .pt-xl-2 { font-size: 10px; font-weight: 500 !important; letter-spacing: 0; line-height: 1.2; }
  .header.hdr2 .sidebar .nav-link.active { color: #fff !important; }
  .header.hdr2 .sidebar .nav-link.active svg,
  .header.hdr2 .sidebar .nav-link.active .nav-link__img { background: rgba(0, 129, 112, .32); opacity: 1; }
  .header.hdr2 .sidebar .nav-link.active svg:not(.nav-ico-fill),
  .header.hdr2 .sidebar .nav-link.active svg:not(.nav-ico-fill) path,
  .header.hdr2 .sidebar .nav-link.active svg:not(.nav-ico-fill) rect,
  .header.hdr2 .sidebar .nav-link.active svg:not(.nav-ico-fill) circle { stroke: #fff !important; }
  .header.hdr2 .sidebar .nav-link.active .pt-xl-2 { font-weight: 600 !important; }
}

/* ════════ „ეფექტური" ზედა მენიუ (2026-10-25, მფლობელი: „ცოტა ეფექტური გახადე, ძალიან სადაა") ════════
   პუნქტები აბებად, საკუთარი აიქონით (menu_item.icon — მობილურის ქვედა მენიუს იგივე); hover — რბილი
   განათება და მწვანე აიქონი; აქტიური — მწვანე ჩარჩო და ნათება. შრიფტი საიტისაა (BPG Mrgvlovani Caps),
   არა Noto. „უყურე მეგობრებთან" ძველი ღილაკია, ქვედა მწვანე ხაზი არ არის (მფლობელს არ მოეწონა). */
.header.hdr2 { --hdr-font: "BPG Mrgvlovani Caps", "BPG Mrgvlovani", sans-serif; }
.header.hdr2 .header-top__search input#search { font-family: "BPG Mrgvlovani", sans-serif !important; }
@media (min-width: 1025px) {
  .header.hdr2 .sidebar .navbar-nav { gap: 6px !important; }
  .header.hdr2 .sidebar .nav-link {
    display: inline-flex !important; align-items: center; gap: 8px !important;
    padding: 9px 14px !important; border-radius: 999px !important; border: 1px solid transparent;
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .25s ease, transform .2s ease !important;
  }
  .header.hdr2 .sidebar .nav-link::after { display: none !important; }
  .header.hdr2 .sidebar .nav-link svg, .header.hdr2 .sidebar .nav-link .nav-link__img {
    display: block !important; width: 18px !important; height: 18px !important; flex: 0 0 18px;
    color: rgba(255, 255, 255, .6); transition: color .2s ease, transform .25s ease;
  }
  .header.hdr2 .sidebar .nav-link .pt-xl-2 { font-size: 14px; font-weight: 600 !important; padding: 0 !important; line-height: 1; }
  .header.hdr2 .sidebar .nav-link:hover {
    background: rgba(255, 255, 255, .07) !important; color: #fff !important; transform: translateY(-1px) !important;
  }
  .header.hdr2 .sidebar .nav-link:hover svg { color: #2fd3b9; transform: scale(1.08); }
  .header.hdr2 .sidebar .nav-link.active {
    color: #fff !important;
    background: linear-gradient(135deg, rgba(0, 165, 142, .32), rgba(0, 129, 112, .14)) !important;
    border-color: rgba(47, 211, 185, .45) !important;
    box-shadow: 0 0 0 1px rgba(0, 165, 142, .12), 0 6px 20px rgba(0, 129, 112, .28);
  }
  .header.hdr2 .sidebar .nav-link.active svg { color: #2fd3b9; }
  /* ლოგო — რბილი ნათება მაუსის მიტანისას */
  .header.hdr2 .header-top__logo a { display: block; transition: filter .25s ease; }
  .header.hdr2 .header-top__logo a:hover { filter: drop-shadow(0 0 10px rgba(47, 211, 185, .45)); }
}
/* ძებნა — ფოკუსზე მწვანე ნათება */
.header.hdr2 .header-top__search form:focus-within { box-shadow: 0 0 0 3px rgba(0, 165, 142, .25), 0 6px 22px rgba(0, 0, 0, .35); }
/* ანგარიში — hover-ზე მწვანე რგოლი */
.header.hdr2 .header-account__toggle { transition: border-color .2s ease, box-shadow .2s ease; }
.header.hdr2 .header-account__toggle:hover { border-color: rgba(47, 211, 185, .6); box-shadow: 0 0 0 3px rgba(0, 165, 142, .18); }
@media (prefers-reduced-motion: reduce) {
  .header.hdr2 .sidebar .nav-link:hover { transform: none !important; }
}

/* აიქონები უფრო დიდი (2026-10-29, მფლობელი) — ზედა მენიუს აბებში 18→20px (22-ზე „თრეილერები" ღილაკის ქვეშ ექცეოდა), ტელეფონის ქვედა მენიუში 22→24px,
   ძებნის ღილაკი 15→18px. აიქონები Remix Icon fill-ია (_menu_icons.html). */
@media (min-width: 1025px) {
  .header.hdr2 .sidebar .nav-link svg, .header.hdr2 .sidebar .nav-link .nav-link__img {
    width: 20px !important; height: 20px !important; flex: 0 0 20px;
  }
  .header.hdr2 .sidebar .nav-link { padding: 9px 11px !important; gap: 7px !important; }
}
@media (max-width: 1024px) {
  .header.hdr2 .sidebar .nav-link svg,
  .header.hdr2 .sidebar .nav-link .nav-link__img { width: 56px !important; height: 32px !important; padding: 4px 16px; }
}
.header.hdr2 .header-top__search form button i { font-size: 18px; }

/* ტელეფონის ქვედა მენიუ body-ს ბოლოშია (.hdr-dock, base.html — iPhone Safari-ზე sticky header-ის შიგნით სქროლვისას
   ცახცახებდა, 2026-11-02). თავად .hdr-dock უხილავი ყუთია: header-ის ყველა სტილი (sticky, ფონი, ზომა) ნულდება.
   z-index 900 = header-ისა, ანუ მენიუ სხვა ელემენტებთან ზუსტად ისე ლაგდება, როგორც ადრე. */
.header.hdr2.hdr-dock {
  position: relative !important; top: auto !important; z-index: 900 !important;
  height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important;
  border: 0 !important; background: none !important; box-shadow: none !important; isolation: auto;
}
.header.hdr2.hdr-dock::before { display: none !important; }
/* backdrop-filter fixed ელემენტზე iPhone-ზე ყოველ კადრს ხელახლა ხატავს და სქროლვას ახტუნებს —
   ბუნდოვნების ნაცვლად თითქმის გაუმჭვირვალე ფონი (გარეგნობა თითქმის იგივეა) */
@media (max-width: 1024px) {
  .header.hdr2 .sidebar {
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    background: rgba(15, 15, 15, .97) !important;
  }
}