/* ==============================================
   PRO-AQUA MOBILE MENU v2.0
   ============================================== */

:root { --pa-turquoise: #00bcd4; }

/* ── HEADER ── */
.pa-mobile-header {
    display: none;
    background: #000;
    height: 60px;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 99999;
    box-shadow: 0 2px 14px rgba(0,0,0,.55);
}
.pa-header-left { display:flex; align-items:center; gap:13px; }

/* ── HAMBURGUER ── */
.pa-hamburger {
    display:flex; flex-direction:column; gap:5px;
    cursor:pointer; padding:6px;
    background:none; border:none; outline:none;
    -webkit-tap-highlight-color:transparent;
}
.pa-hamburger span {
    display:block; width:22px; height:2px;
    background:#fff; border-radius:2px;
    transition:all .28s ease; transform-origin:center;
}
.pa-hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.pa-hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.pa-hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* ── LOGO ── */
.pa-mobile-header .pa-header-logo,
.pa-mobile-header .pa-header-logo a {
    display:flex !important; align-items:center !important;
    line-height:0 !important; text-decoration:none !important;
}
.pa-mobile-header .pa-header-logo img,
.pa-mobile-header .pa-header-logo a img {
    width:auto !important; max-width:none !important;
    max-height:none !important; min-height:unset !important;
    filter:brightness(0) invert(1) !important;
    display:block !important; object-fit:contain !important;
    margin:0 !important; padding:0 !important;
    border:none !important; box-shadow:none !important; transform:none !important;
}
.pa-logo-text {
    color:#fff; font-size:16px; font-weight:800;
    letter-spacing:1px; text-transform:uppercase; white-space:nowrap;
}

/* ── 4 ÍCONES ── */
.pa-header-icons { display:flex; align-items:center; gap:16px; }
.pa-icon-btn {
    color:#fff; text-decoration:none !important;
    background:none; border:none; outline:none; cursor:pointer;
    position:relative; display:flex; align-items:center; justify-content:center;
    padding:0; opacity:.88; transition:opacity .18s, color .18s;
    -webkit-tap-highlight-color:transparent;
}
.pa-icon-btn:hover { opacity:1; color:var(--pa-turquoise); }
.pa-icon-btn svg { width:22px; height:22px; }

/* Badge carrinho */
.pa-cart-badge {
    position:absolute; top:-7px; right:-8px;
    background:var(--pa-turquoise); color:#fff;
    font-size:10px; min-width:17px; height:17px; border-radius:9px;
    display:flex; align-items:center; justify-content:center;
    font-weight:700; padding:0 4px; line-height:1; pointer-events:none;
}

/* ── BUSCA INLINE ── */
.pa-search-bar {
    display:none; position:fixed; top:60px; left:0; right:0;
    background:#111; z-index:99998;
    border-bottom:2px solid var(--pa-turquoise);
    padding:10px 14px;
    animation:paSlideDown .22s ease;
}
.pa-search-bar.open { display:block; }
@keyframes paSlideDown {
    from { opacity:0; transform:translateY(-10px); }
    to   { opacity:1; transform:translateY(0); }
}
.pa-search-bar form { display:flex; align-items:center; gap:8px; }
.pa-search-input {
    flex:1; background:#222; border:1px solid #333; color:#fff;
    border-radius:6px; padding:9px 13px; font-size:14px;
    outline:none; transition:border-color .18s;
}
.pa-search-input:focus { border-color:var(--pa-turquoise); }
.pa-search-input::placeholder { color:#666; }
.pa-search-submit {
    background:var(--pa-turquoise); border:none; border-radius:6px;
    color:#fff; padding:8px 12px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:opacity .18s;
}
.pa-search-submit:hover { opacity:.85; }
.pa-search-submit svg { width:18px; height:18px; }
.pa-search-close {
    background:none; border:none; color:#888;
    font-size:18px; cursor:pointer; padding:4px 6px;
    border-radius:4px; line-height:1; transition:color .18s;
}
.pa-search-close:hover { color:#fff; }

/* ── OVERLAY ── */
.pa-overlay {
    display:none; position:fixed; inset:0;
    background:rgba(0,0,0,.56); z-index:100000;
    opacity:0; transition:opacity .3s ease;
}
.pa-overlay.active { display:block; opacity:1; }

/* ── SIDEBAR ── */
.pa-sidebar {
    position:fixed; top:0; left:-290px;
    width:285px; height:100vh; background:#000;
    z-index:100001; display:flex; flex-direction:column;
    transition:left .32s cubic-bezier(.4,0,.2,1); overflow:hidden;
}
.pa-sidebar.open { left:0; }

.pa-sidebar-head {
    background:#111; padding:0 18px; height:60px;
    display:flex; align-items:center; justify-content:space-between;
    border-bottom:1px solid #2a2a2a; flex-shrink:0;
}
.pa-sidebar-head img {
    width:auto !important; max-width:none !important;
    filter:brightness(0) invert(1) !important;
    display:block !important; object-fit:contain !important; margin:0 !important;
}
.pa-sidebar-close {
    background:none; border:none; color:#666; font-size:22px;
    cursor:pointer; padding:4px 8px; border-radius:4px; line-height:1;
    transition:color .18s, background .18s;
}
.pa-sidebar-close:hover { color:#fff; background:#222; }

/* ── NAV ── */
.pa-sidebar-nav {
    flex:1; overflow-y:auto; padding:6px 0 12px;
    scrollbar-width:thin; scrollbar-color:#2a2a2a transparent;
}
.pa-sidebar-nav::-webkit-scrollbar { width:4px; }
.pa-sidebar-nav::-webkit-scrollbar-thumb { background:#2a2a2a; border-radius:4px; }

.pa-nav-label {
    padding:14px 20px 5px; color:#444; font-size:10px;
    font-weight:700; text-transform:uppercase; letter-spacing:2px;
}
.pa-label-turquoise { color:var(--pa-turquoise) !important; }

.pa-nav-item,
.pa-wp-menu > li > a {
    display:flex !important; align-items:center; gap:12px;
    padding:13px 20px !important;
    color:#ddd !important; text-decoration:none !important;
    font-size:14px !important; font-weight:500 !important;
    border-bottom:1px solid rgba(255,255,255,.06) !important;
    transition:background .18s, padding-left .18s !important;
    cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.pa-nav-item:hover, .pa-wp-menu > li > a:hover {
    background:#181818 !important; padding-left:26px !important; color:#fff !important;
}
.pa-nav-item--active, .pa-wp-menu > li.current-menu-item > a {
    color:#fff !important; background:#141414 !important;
}
.pa-nav-item svg { width:18px; height:18px; flex-shrink:0; opacity:.5; }

/* Item turquesa */
.pa-item-turquoise { color:var(--pa-turquoise) !important; }
.pa-item-turquoise svg { stroke:var(--pa-turquoise) !important; opacity:.8 !important; }
.pa-item-turquoise:hover { color:#fff !important; background:#0d2b2e !important; }

/* Badge dentro do item */
.pa-nav-badge {
    margin-left:auto; background:var(--pa-turquoise); color:#fff;
    font-size:10px; min-width:18px; height:18px; border-radius:9px;
    display:inline-flex; align-items:center; justify-content:center;
    padding:0 5px; font-weight:700;
}

/* Bloco Minha Conta */
.pa-account-block { border-top:1px solid rgba(0,188,212,.15); margin-top:6px; }

/* Submenu */
.pa-submenu { background:#0a0a0a; border-bottom:1px solid rgba(255,255,255,.05); }
.pa-nav-subitem {
    display:block !important; padding:10px 20px 10px 46px !important;
    color:#999 !important; font-size:13px !important;
    text-decoration:none !important;
    border-bottom:1px solid rgba(255,255,255,.04) !important;
    transition:background .15s, color .15s !important;
}
.pa-nav-subitem:hover { background:#111 !important; color:#fff !important; }

/* Reset wp_nav_menu */
.pa-wp-menu { list-style:none !important; margin:0 !important; padding:0 !important; }
.pa-wp-menu li { margin:0 !important; padding:0 !important; list-style:none !important; }

/* ── FOOTER ── */
.pa-sidebar-footer {
    padding:14px 16px; border-top:1px solid #1a1a1a;
    display:flex; gap:10px; flex-shrink:0;
}
.pa-btn {
    flex:1; padding:10px; border-radius:6px; font-size:13px;
    font-weight:700; text-align:center; cursor:pointer;
    text-decoration:none !important; transition:opacity .18s; display:block;
}
.pa-btn:hover { opacity:.82; }
.pa-btn-light { background:#fff; color:#000 !important; }
.pa-btn-dark  { background:#1e1e1e; color:#ccc !important; border:1px solid #333; }

/* ── MEDIA QUERY ── */
@media (max-width: 767px) {
    .pa-mobile-header { display:flex; }
    body { padding-top:60px !important; }
}
@media (min-width: 768px) {
    .pa-mobile-header,
    .pa-sidebar,
    .pa-overlay,
    .pa-search-bar { display:none !important; }
    body { padding-top:0 !important; }
}
