/* ============================================================
   YELLA.UZ — Mobile Header (Airy Minimal + Pastel Accents)
   Scope: mobile only (<= 767px). Desktop untouched.
   ============================================================ */

@media (max-width: 767px) {
  :root {
    --yella-mob-header-h: 56px;
    --yella-mob-bg: #FAFBFF;
    --yella-mob-surface: rgba(255, 255, 255, 0.92);
    --yella-mob-border: rgba(17, 24, 39, 0.10);
    --yella-mob-text: #12131A;
    --yella-mob-muted: rgba(18, 19, 26, 0.55);
    --yella-mob-accent-1: #C9FF6B; /* мягкий лайм */
    --yella-mob-accent-2: #A7F3FF; /* пастельный аква */
    --yella-mob-shadow: 0 10px 30px rgba(17, 24, 39, 0.06);
  }

  /* Header: лёгкий градиент + без тяжёлой рамки/тени */
  html body .up-header,
  html body header.up-header,
  html body .up-header.fix-header,
  html body .up-header.h-sticky {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: linear-gradient(
      135deg,
      rgba(201, 255, 107, 0.18),
      rgba(167, 243, 255, 0.14) 55%,
      rgba(250, 251, 255, 0.98)
    ) !important;
    background-color: #FFFFFF !important;
    border-bottom: 1px solid var(--yella-mob-border) !important;
    box-shadow: none !important;
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
  }

  html body .up-header > .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  html body .up-header > .container > .row {
    min-height: var(--yella-mob-header-h) !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* ── 1. MENU CATALOG — open fully, no cuts ── */
  html body .up-header .up-header__left,
  html body .up-header .up-header__right,
  html body .up-header .up-header__logo-top {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }

  /* ── 5. LOGO — 10% smaller, 5px closer to catalog button ── */
  html body .up-header__logo-mobile img,
  html body .up-header__logo-desktop img,
  html body #logo img {
    max-height: 25px !important; /* 10% smaller than 28px */
    width: auto !important;
  }
  html body .up-header__logo-top {
    margin-right: 4px !important; /* 5px closer to catalog */
  }

  /* ── 4. ICONS — bolder, larger ── */
  /* Auth & Cart — bigger, bolder */
  html body .up-header__btn-mobile-menu,
  html body #cart > .btn,
  html body .box-cart #cart > .btn,
  html body .box-cart .dropdown-toggle,
  html body .box-account .btn-account {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    border-radius: 14px !important;
    border: 1px solid var(--yella-mob-border) !important;
    background: var(--yella-mob-surface) !important;
    box-shadow: none !important;
    color: var(--yella-mob-text) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s, border-color 0.2s !important;
  }
  html body .up-header__btn-mobile-menu:hover,
  html body #cart > .btn:hover,
  html body .box-cart .dropdown-toggle:hover {
    border-color: rgba(17, 24, 39, 0.16) !important;
    background: #F0F0F0 !important;
  }
  html body .box-account .btn-account {
    border: none !important;
    background: transparent !important;
  }
  html body .box-account .btn-account:hover {
    background: rgba(17,24,39,0.05) !important;
  }

  /* Icon color */
  html body .up-header__btn-mobile-menu i,
  html body .up-header__btn-mobile-menu .up-icon-22,
  html body #cart > .btn i,
  html body #cart > .btn .up-icon-22,
  html body .box-cart .btn i,
  html body .box-cart .btn:hover i,
  html body .box-cart .btn:hover .up-icon-22,
  html body .box-account .btn-account i,
  html body .box-account .btn-account .up-icon-account {
    color: var(--yella-mob-text) !important;
    font-size: 20px !important; /* slightly bolder */
  }

  /* Cart badge */
  html body #cart .cart-quantity,
  html body .light-theme #cart .cart-quantity {
    background: linear-gradient(135deg, var(--yella-mob-accent-1), var(--yella-mob-accent-2)) !important;
    color: #0B0C10 !important;
    border: 1px solid rgba(11, 12, 16, 0.08) !important;
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.10) !important;
  }

  /* Hide text labels in header on mobile */
  html body .up-header .text-a-icon,
  html body #cart .cart-total,
  html body #cart .cart-total-price,
  html body #cart .cart-text,
  html body #cart .ch-c-name,
  html body #cart .ch-c-price {
    display: none !important;
  }

  /* ── 2. MOBILE SEARCH ROW ── */
  .yella-mob-search,
  .search-wrapper.visible-xs {
    background: transparent !important;
    border-bottom: 0 !important;
    padding: 10px 0 12px !important;
    position: sticky !important;
    top: var(--yella-mob-header-h) !important;
    z-index: 999 !important;
  }

  .yella-mob-search .container,
  .search-wrapper.visible-xs .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .yella-mob-search .header-search,
  .search-wrapper.visible-xs .header-search {
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 16px !important;
    background: var(--yella-mob-surface) !important;
    border: 1px solid var(--yella-mob-border) !important;
    box-shadow: var(--yella-mob-shadow) !important;
    overflow: visible !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
  }

  .yella-mob-search .header-search .form-control,
  .search-wrapper.visible-xs .header-search .form-control {
    height: 40px !important;
    font-size: 14px !important;
    color: var(--yella-mob-text) !important;
  }

  .yella-mob-search .header-search .form-control::placeholder,
  .search-wrapper.visible-xs .header-search .form-control::placeholder {
    color: var(--yella-mob-muted) !important;
  }

  /* Search button — gray default, BLUE on hover/active */
  .yella-mob-search .header-search .btn-search,
  .search-wrapper.visible-xs .header-search .btn-search {
    height: 42px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color 0.2s, text-shadow 0.2s !important;
  }
  .yella-mob-search .header-search .btn-search i,
  .yella-mob-search .header-search .btn-search .up-icon-search {
    color: #8A8F98 !important;
    font-size: 17px !important;
    transition: color 0.2s ease, text-shadow 0.2s ease !important;
  }
  .yella-mob-search .header-search .btn-search:hover i,
  .yella-mob-search .header-search .btn-search:active i,
  .yella-mob-search .header-search:focus-within .btn-search i {
    color: #2563EB !important;
    text-shadow: 0 0 8px rgba(37,99,235,0.4), 0 0 2px rgba(37,99,235,0.3) !important;
  }

  /* ── 2. HIDE MICROPHONE / VOICE SEARCH ── */
  .yella-mob-search .btn-voice-search,
  .yella-mob-search .btn-mic,
  .yella-mob-search .group_voice_search,
  .yella-mob-search .header-search .group_voice_search,
  .search-wrapper.visible-xs .btn-voice-search,
  .search-wrapper.visible-xs .btn-mic,
  .search-wrapper.visible-xs .group_voice_search {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: none !important;
  }

  /* ── HIDE BOTTOM FIXED PANEL ── */
  html body #fm-fixed-mobile-bottom,
  html body .fm-fixed-mobile-bottom,
  html body .mob-fix-panel.fm_type_design_bottom_3 {
    display: none !important;
    visibility: hidden !important;
  }
}