/*
 * Front-end styles for the WooPlus header bar.
 *
 * The header bar appears at the top of the page on mobile devices when enabled
 * via the WooPlus settings.  It contains three interactive areas: a
 * hamburger button on the right, a central logo or site name and a
 * search button on the left.  When fixed, the bar remains at the top of
 * the viewport and reserves vertical space so that content below does
 * not slide underneath.  Styles are responsive and only apply on
 * screens narrower than 768 px.
 */

@media (max-width: 767px) {
  /* Base container */
  .wooplus-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    width: 100%;
    padding: 0 12px;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1;
    /* Raise the header bar above the navbar and overlay elements so that
       the menu list and social icons are not hidden underneath.  The
       previous value of 9999 could clash with other elements using the
       same stacking context (e.g. the navigation bar).  Assigning
       progressive z-index values across the header, menu and search
       overlay resolves this layering issue. */
    z-index: 10002;
  }
  .wooplus-header-bar.fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  .wooplus-header-bar.relative {
    position: relative;
  }

  /* Buttons */
  .wooplus-header-hamburger,
  .wooplus-header-search-btn {
    background: none;
    border: none;
    padding: 8px;
    margin: 0;
    line-height: 0;
    cursor: pointer;
    color: inherit;
  }
  /* Hide default hamburger lines and instead display a custom image. */
  .wooplus-header-hamburger-icon,
  .wooplus-header-hamburger-icon::before,
  .wooplus-header-hamburger-icon::after {
    content: none;
    width: 0;
    height: 0;
  }
  /* Ensure button images have consistent sizing */
  .wooplus-header-bar button img {
    width: 24px;
    height: 24px;
    display: block;
  }
  /* Logo */
  .wooplus-header-logo img {
    max-height: 40px;
  }
  .wooplus-header-site-name {
    font-weight: bold;
    font-size: 16px;
  }
  /* Remove default search pseudo element.  The icon is provided via an <img> tag in the markup. */
  .wooplus-header-search-icon::before {
    content: none;
  }

  /* Menu overlay container.  Hidden off-screen by default.  We use
     transform rather than left/right to allow smooth transitions.
     When .open is added via JS the transform is reset.  The effect
     classes specify the starting position for slide effects. */
  #wooplus-header-menu {
    position: fixed;
    /* The top and height values are set dynamically via JS when the menu is opened
       to ensure it starts below the header bar.  Defaults here are overridden. */
    top: 0;
    bottom: 0;
    width: 80%;
    max-width: 300px;
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    overflow-y: auto;
    /* Layer the menu below the header bar but above the search overlay */
    z-index: 10001;
    /* Slide in from the right by default. */
    right: 0;
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }
  /* Slide from right effect: no additional properties needed since this is now
     the default.  The class remains for backward compatibility. */
  #wooplus-header-menu.slide-right {
    right: 0;
    transform: translateX(100%);
  }
  /* Overlay effect: full width, no slide transform */
  #wooplus-header-menu.overlay {
    width: 100%;
    max-width: none;
  }
  /* When menu is open, reset transform to show it */
  #wooplus-header-menu.open {
    transform: translateX(0);
  }
  #wooplus-header-menu.open.overlay {
    transform: none;
  }
  /* Close button inside menu */
  #wooplus-header-menu .wooplus-header-menu-close {
    background: none;
    border: none;
    font-size: 28px;
    color: #333;
    padding: 15px;
    line-height: 1;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
  }
  /* Navigation list styling inside menu */
  #wooplus-header-menu .wooplus-header-menu-items {
    list-style: none;
    margin: 0;
    padding: 0 16px 16px;
  }
  #wooplus-header-menu .wooplus-header-menu-items li {
    margin: 0;
    border-bottom: 1px solid #f2f2f2;
  }
  #wooplus-header-menu .wooplus-header-menu-items li a {
    display: block;
    padding: 12px 0;
    color: #333;
    text-decoration: none;
  }
  #wooplus-header-menu .wooplus-header-menu-items li a:hover {
    color: #007aff;
  }

  /* Search overlay.  Hidden by default; visible when .open is added via JS. */
  #wooplus-header-search {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    /* Position the search overlay beneath the menu and header bar */
    z-index: 10000;
    align-items: center;
    justify-content: center;
  }
  #wooplus-header-search.open {
    display: flex;
  }
  .wooplus-header-search-container {
    position: relative;
    background: #fff;
    border-radius: 8px;
    width: 90%;
    max-width: 500px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  .wooplus-header-search-container input {
    width: 100%;
    /* Add left padding to avoid overlap with close button */
    padding: 8px 12px 8px 44px;
    margin-bottom: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
  }
  .wooplus-header-search-close {
    /* Style the search close button as a circular dark icon with white cross. */
    background: rgba(0, 0, 0, 0.8);
    border: none;
    width: 32px;
    height: 32px;
    font-size: 20px;
    color: #fff;
    line-height: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    /* Place the close button inside the container at the top-left corner */
    top: 8px;
    left: 8px;
    right: auto;
    cursor: pointer;
    z-index: 10;
  }
  #wooplus-header-search-results ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  #wooplus-header-search-results li {
    margin: 5px 0;
  }
  #wooplus-header-search-results a {
    color: #007aff;
    text-decoration: none;
  }
  #wooplus-header-search-results a:hover {
    text-decoration: underline;
  }


  /* Visual styles derived from the navigation bar styles for consistency. */
  .wooplus-header-bar.style-glass {
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    color: #111;
  }
  .wooplus-header-bar.style-android {
    background: #ffffff;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    color: #333;
  }
  .wooplus-header-bar.style-gradient {
    background: linear-gradient(45deg, #007aff, #00c6ff);
    color: #ffffff;
  }
  .wooplus-header-bar.style-light {
    background: #f8f9fa;
    border-bottom: 1px solid #e5e5e5;
    color: #333;
  }
  .wooplus-header-bar.style-dark {
    background: #212529;
    color: #f8f9fa;
  }
  .wooplus-header-bar.style-glass-rounded {
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(15px) saturate(180%);
    -webkit-backdrop-filter: blur(15px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 0 0 16px 16px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    color: #111;
  }
  .wooplus-header-bar.style-android-rounded {
    background: #ffffff;
    border-bottom: 1px solid #e0e0e0;
    border-radius: 0 0 16px 16px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    color: #333;
  }
  .wooplus-header-bar.style-neumorphic {
    background: #e0e0e0;
    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.15), inset -3px -3px 6px rgba(255, 255, 255, 0.7);
    color: #333;
  }
  .wooplus-header-bar.style-gradient-rainbow {
    background: linear-gradient(45deg, #f72585, #b5179e, #7209b7, #3a0ca3, #4361ee, #4cc9f0);
    color: #ffffff;
  }
  .wooplus-header-bar.style-frosted-dark {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(15px) saturate(120%);
    -webkit-backdrop-filter: blur(15px) saturate(120%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
  }
  .wooplus-header-bar.style-bottom-spacing {
    background: #ffffff;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    margin-bottom: 16px;
    color: #333;
  }

  /* Social icons section at the bottom of the menu.  This section uses
     the Bootstrap Icons font included with the WooPlus plugin.  The
     @font‑face rule ensures the icons load correctly when this
     stylesheet is enqueued independently of other modules. */
  @font-face {
    font-family: 'bootstrap-icons';
    src: url('../../../assets/fonts/bootstrap-icons.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
  .wooplus-header-socials {
    display: flex;
    justify-content: center;
    padding: 16px 0;
    border-top: 1px solid #f2f2f2;
  }
  .wooplus-header-socials a {
    margin: 0 6px;
    font-size: 22px;
    text-decoration: none;
    color: inherit;
  }
  .wooplus-header-socials a:hover {
    color: #007aff;
  }
  /* Define only the glyphs we need for social networks using their
     Unicode codepoints from Bootstrap Icons v1.11.3.  If additional
     icons are required, add them here along with their codes. */
  .bi-instagram::before { content: "\F437"; }
  .bi-telegram::before  { content: "\F5B3"; }
  /* Eitaa and Bale icons are provided via inline images instead of glyphs. */
  .bi-facebook::before  { content: "\F344"; }
  .bi-twitter::before   { content: "\F5EF"; }
  .bi-youtube::before   { content: "\F62B"; }

  /* Style images inside the socials container */
  .wooplus-header-socials img {
    width: 22px;
    height: 22px;
    display: block;
  }
}