/*
 * Mabellshop.pl — mobile header for Shoptet Classic
 * Production v3: CSS-only, consolidated; search exists only when opened and menu-close ghost clicks are blocked without hiding controls.
 * Loaded after the project CSS files.
 */

@media (max-width: 767px) {
  body.mobile {
    --mabell-info-height: 31px;
    --mabell-header-height: 70px;
    --mabell-header-gap: 8px;
    --mabell-search-height: 46px;
    --mabell-header-total: calc(var(--mabell-info-height) + var(--mabell-header-height));
  }

  /* ---------------------------------------------------------
   * Page flow
   * Shoptet's new Classic header is fixed. Mabell keeps the old
   * non-sticky behaviour, so the header is positioned in the page
   * and the content receives one explicit top offset.
   * --------------------------------------------------------- */
  body.mobile .overall-wrapper {
    position: relative !important;
    padding-top: calc(var(--mabell-header-total) + var(--mabell-header-gap)) !important;
  }

  body.mobile.ordering-process .overall-wrapper {
    padding-top: var(--mabell-header-height) !important;
  }

  body.mobile.search-window-visible .overall-wrapper {
    padding-top: calc(
      var(--mabell-header-total) +
      var(--mabell-search-height) +
      var(--mabell-header-gap)
    ) !important;
  }

  body.mobile.ordering-process.search-window-visible .overall-wrapper {
    padding-top: calc(
      var(--mabell-header-height) +
      var(--mabell-search-height) +
      var(--mabell-header-gap)
    ) !important;
  }

  /* ---------------------------------------------------------
   * Information strip and white header row
   * --------------------------------------------------------- */
  body.mobile .site-msg.information {
    position: absolute !important;
    inset: 0 0 auto !important;
    width: 100% !important;
    height: var(--mabell-info-height) !important;
    min-height: var(--mabell-info-height) !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 40 !important;
  }

  body.mobile .top-navigation-bar {
    position: absolute !important;
    inset: var(--mabell-info-height) 0 auto !important;
    width: 100% !important;
    height: var(--mabell-header-height) !important;
    margin: 0 !important;
    background: #fff !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16) !important;
    transform: none !important;
    transition: none !important;
    z-index: 40 !important;
  }

  body.mobile.ordering-process .top-navigation-bar {
    top: 0 !important;
  }

  body.mobile .top-navigation-bar > .container {
    position: relative !important;
    width: 100% !important;
    height: var(--mabell-header-height) !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  body.mobile .top-navigation-tools,
  body.mobile .responsive-tools {
    width: 100% !important;
    height: var(--mabell-header-height) !important;
  }

  body.mobile .responsive-tools {
    position: relative !important;
    padding: 15px 0 !important;
  }

  /* ---------------------------------------------------------
   * Header controls
   * --------------------------------------------------------- */
  body.mobile .responsive-tools > a[data-target="navigation"],
  body.mobile .responsive-tools > a[data-target="search"],
  body.mobile .responsive-tools > a[data-target="login"] {
    display: flex !important;
    position: absolute !important;
    top: 15px !important;
    bottom: auto !important;
    height: 40px !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    color: #000 !important;
    line-height: 1 !important;
    transform: none !important;
    z-index: 60 !important;
  }

  body.mobile .responsive-tools > a[data-target="navigation"]::before,
  body.mobile .responsive-tools > a[data-target="search"]::before,
  body.mobile .responsive-tools > a[data-target="login"]::before {
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    margin: 0 !important;
    line-height: 1 !important;
    transform: none !important;
  }

  body.mobile .responsive-tools > a[data-target="navigation"] {
    right: auto !important;
    left: 0 !important;
    width: 40px !important;
    padding: 4px !important;
  }

  body.mobile .responsive-tools > a[data-target="navigation"]::before {
    color: #000 !important;
    background: transparent !important;
    border-radius: 0 !important;
    font-size: 22px !important;
  }

  body.mobile .responsive-tools > a[data-target="search"] {
    display: flex !important;
    visibility: visible !important;
    right: auto !important;
    left: 42px !important;
    width: 40px !important;
    padding: 4px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Shoptet hides this trigger in the new Classic header; Mabell restores it. */
  body.mobile .responsive-tools > a[data-target="login"] {
    display: flex !important;
    visibility: visible !important;
    right: 44px !important;
    left: auto !important;
    width: 32px !important;
    padding: 4px 0 !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }

  body.mobile .responsive-tools > a[data-target="login"]::before {
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    line-height: 32px !important;
    text-align: center !important;
  }

  /* ---------------------------------------------------------
   * Logo, cart and search live in #header, over the white row.
   * --------------------------------------------------------- */
  body.mobile #header {
    position: absolute !important;
    inset: var(--mabell-header-total) 0 auto !important;
    width: 100% !important;
    height: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    transform: none !important;
    transition: none !important;
    z-index: 41 !important;
  }

  body.mobile.ordering-process #header {
    top: var(--mabell-header-height) !important;
  }

  body.mobile #header > .navigation-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding-right: 10px !important;
    padding-left: 10px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  body.mobile #header .header-top,
  body.mobile #header .site-name-wrapper,
  body.mobile #header .navigation-buttons {
    height: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.mobile #header .site-name {
    display: block !important;
    visibility: visible !important;
    position: absolute !important;
    top: calc(-1 * var(--mabell-header-height)) !important;
    right: auto !important;
    left: 50% !important;
    width: 145px !important;
    height: var(--mabell-header-height) !important;
    margin: 0 !important;
    opacity: 1 !important;
    transform: translateX(-50%) !important;
    z-index: 2 !important;
  }

  body.mobile #header .site-name a {
    display: flex !important;
    width: 145px !important;
    height: var(--mabell-header-height) !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.mobile #header .site-name img {
    display: block !important;
    position: static !important;
    width: 145px !important;
    height: auto !important;
    max-width: 145px !important;
    max-height: 45px !important;
    margin: 0 !important;
    padding: 0 !important;
    object-fit: contain !important;
    transform: translateY(-2px) !important;
  }

  /* Cart trigger on normal storefront pages. */
  body.mobile:not(.ordering-process) #header .cart-count {
    display: flex !important;
    visibility: visible;
    position: absolute !important;
    top: -55px !important;
    right: 8px !important;
    bottom: auto !important;
    left: auto !important;
    width: 36px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    color: #000 !important;
    background: transparent !important;
    overflow: visible !important;
    transform: none !important;
    z-index: 60 !important;
    transition: visibility 0s linear 220ms !important;
  }

  body.mobile.ordering-process #header .cart-count,
  body.mobile #header .cart-count .cart-price {
    display: none !important;
  }

  body.mobile #header .cart-count::before {
    content: "" !important;
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    margin: 0 !important;
    font-size: 0 !important;
    background: transparent url("https://www.mabellshop.pl/user/documents/upload/MojeUpravy/taska.svg") center / contain no-repeat !important;
  }

  body.mobile #header .cart-count i {
    display: block !important;
    position: absolute !important;
    top: 1px !important;
    right: -1px !important;
    min-width: 13px !important;
    height: 13px !important;
    padding: 0 3px !important;
    border-radius: 10px !important;
    background: #000 !important;
    color: #fff !important;
    font-size: 9px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    line-height: 13px !important;
    text-align: center !important;
  }

  /* ---------------------------------------------------------
   * Search panel — inset like Mabell.sk and part of page flow.
   * --------------------------------------------------------- */
  body.mobile #header .search {
    position: absolute !important;
    top: 0 !important;
    right: 10px !important;
    left: 10px !important;
    width: auto !important;
    min-height: var(--mabell-search-height) !important;
    margin: 0 !important;
    padding: 6px 0 8px !important;
    box-sizing: border-box !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    border: 0 !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14) !important;
  }

  body.mobile #header .search form,
  body.mobile #header .search .search-form,
  body.mobile #header .search .compact-form,
  body.mobile #header .search fieldset,
  body.mobile #header .search .search-whisperer {
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    background: #fff !important;
  }

  body.mobile #header .search fieldset {
    padding: 0 !important;
  }

  @keyframes mabell-search-drop {
    from { transform: translateY(-8px); }
    to   { transform: translateY(0); }
  }

  body.mobile.search-window-visible #header .search {
    display: block !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    transform-origin: top center !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    animation: mabell-search-drop 140ms ease-out both !important;
  }

  /* ---------------------------------------------------------
   * Login and mini-cart panels begin below the header shadow.
   * --------------------------------------------------------- */
  body.mobile .popup-widget.login-widget,
  body.mobile .popup-widget.cart-widget {
    top: calc(var(--mabell-header-total) + var(--mabell-header-gap)) !important;
    bottom: 0 !important;
    height: auto !important;
    max-height: calc(100dvh - var(--mabell-header-total) - var(--mabell-header-gap)) !important;
    padding-top: 0 !important;
    background: #fff !important;
    z-index: 35 !important;
  }

  body.mobile.ordering-process .popup-widget.login-widget,
  body.mobile.ordering-process .popup-widget.cart-widget {
    top: var(--mabell-header-height) !important;
    max-height: calc(100dvh - var(--mabell-header-height)) !important;
  }

  /* ---------------------------------------------------------
   * Native Shoptet side menu remains visually untouched.
   * An invisible shield covers only the login hit area while the
   * menu is open and for 500 ms after it closes. This blocks the
   * delayed mobile click without hiding or moving the login icon.
   * --------------------------------------------------------- */
  body.mobile.navigation-window-visible #navigation {
    z-index: 100 !important;
  }

  body.mobile .responsive-tools::after {
    content: "";
    position: absolute;
    top: 15px;
    right: 44px;
    width: 32px;
    height: 40px;
    background: transparent;
    visibility: hidden;
    pointer-events: auto;
    z-index: 70;
    transition: visibility 0s linear 500ms;
  }

  body.mobile.navigation-window-visible .responsive-tools::after {
    visibility: visible;
    transition-delay: 0s;
  }
}