/* JoyPet Mobile Menu – FRONTEND */

/* Ẩn mặc định, chỉ hiển thị trong media query (fallback 768px) */
.jpm-header-wrap,
.jpm-bottom-nav {
    display: none;
}

/* Fallback nếu inline CSS chưa kịp inject */
@media (max-width: 768px) {

    .jpm-header-wrap {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999;
        background: #ffffff;
        box-shadow: 0 2px 4px rgba(0,0,0,.08);
        display: block;
    }

    .jpm-header-inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 8px 12px;
    }

    .jpm-header-logo img {
        max-height: 40px;
        width: auto;
    }

    .jpm-site-title {
        font-size: 18px;
        font-weight: 700;
        text-decoration: none;
        color: #222;
    }

    /* =========================
       HAMBURGER BUTTON
       ========================= */
    .jpm-menu-toggle {
        border: none;
        background: transparent;
        cursor: pointer;
        padding: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 28px;   /* vùng chứa 3 gạch */
        height: 20px;
        box-sizing: content-box;
    }

    /* Ẩn hoàn toàn 3 span bên trong, ta không dùng nữa */
    .jpm-menu-toggle .jpm-bar {
        display: none !important;
    }

    /* Vẽ 3 gạch ngang bằng 1 pseudo + box-shadow */
    .jpm-menu-toggle::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        height: 2px;
        top: 2px;
        background-color: #ff6f3c; /* màu mặc định; nếu muốn động, chỉnh ở inline CSS PHP */
        border-radius: 999px;
        box-shadow:
            0 6px 0 0 #ff6f3c,
            0 12px 0 0 #ff6f3c;   /* 2 gạch phía dưới */
    }

    /* =========================
       OFFCANVAS NAV
       ========================= */
    .jpm-offcanvas-nav {
        position: fixed;
        top: 56px;
        bottom: 52px;
        left: 0;
        width: 260px;
        background: #ffffff;
        box-shadow: 2px 0 8px rgba(0,0,0,.12);
        transform: translateX(-100%);
        transition: transform .25s ease;
        overflow-y: auto;
        padding: 12px 0;
        z-index: 9998;
    }

    .jpm-offcanvas-nav.jpm-offcanvas-right {
        left: auto;
        right: 0;
        transform: translateX(100%);
        box-shadow: -2px 0 8px rgba(0,0,0,.12);
    }

    body.jpm-menu-open .jpm-offcanvas-nav {
        transform: translateX(0);
    }

    .jpm-offcanvas-nav .jpm-menu {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .jpm-offcanvas-nav .jpm-menu li a {
        display: block;
        padding: 10px 16px;
        text-decoration: none;
        color: #333;
        font-size: 15px;
    }

    .jpm-offcanvas-nav .jpm-menu li a:hover {
        background: #f5f5f5;
    }

    /* =========================
       BOTTOM NAV
       ========================= */

    .jpm-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9999;
        background: #ffffff;
        box-shadow: 0 -2px 4px rgba(0,0,0,.08);
        display: block;
    }

    .jpm-bottom-menu {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
    }

    .jpm-bottom-item {
        flex: 1 1 0;
        text-align: center;
    }

    .jpm-bottom-item a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 8px 4px 10px;
        text-decoration: none;
        font-size: 11px;
        color: #444;
    }

    .jpm-bottom-item .jpm-bottom-icon {
        display: block;
        font-size: 20px;
        line-height: 1;
        margin-bottom: 2px;
    }

    .jpm-bottom-item .jpm-bottom-text {
        display: block;
        line-height: 1.2;
    }

    /* chừa chỗ cho header & bottom */
    body {
        padding-top: 56px;
        padding-bottom: 52px;
    }
}
/* FORCE FIX HAMBURGER JOYPET */
@media (max-width: 768px) {

  /* Tắt mọi pseudo cũ nếu có */
  .jpm-header-wrap .jpm-menu-toggle::before,
  .jpm-header-wrap .jpm-menu-toggle::after {
      content: none !important;
  }

  .jpm-header-wrap .jpm-menu-toggle {
      position: relative !important;
      display: block !important;
      width: 30px !important;
      height: 22px !important;
      padding: 0 !important;
      margin: 0 !important;

      /* RESET hoàn toàn style nút để không còn hình tròn */
      border: 0 !important;
      background: transparent !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      outline: none !important;
  }

  .jpm-header-wrap .jpm-menu-toggle:hover,
  .jpm-header-wrap .jpm-menu-toggle:focus {
      border: 0 !important;
      background: transparent !important;
      box-shadow: none !important;
      outline: none !important;
  }

  /* 3 gạch hamburger – dùng chính 3 span có sẵn */
  .jpm-header-wrap .jpm-menu-toggle .jpm-bar {
      position: absolute !important;
      left: 0 !important;
      right: 0 !important;
      height: 2px !important;
      /*background: #ff6f3c !important;  */
      border-radius: 999px !important;
      display: block !important;
  }

  .jpm-header-wrap .jpm-menu-toggle .jpm-bar:nth-child(1) {
      top: 2px !important;
  }

  .jpm-header-wrap .jpm-menu-toggle .jpm-bar:nth-child(2) {
      top: 10px !important;
  }

  .jpm-header-wrap .jpm-menu-toggle .jpm-bar:nth-child(3) {
      top: 18px !important;
  }
}

/* không show text fallback message */
.jpm-no-menu {
    display: none;
}