/* ================================================================
   Boticas23 Mega Menú — megamenu.css  v2.0
   Matches the original mobile panel design faithfully
   ================================================================ */

/* ── Variables ──────────────────────────────────────────────── */
:root {
    --b23-blue:       #1a4785;
    --b23-blue-light: #2e9fda;
    --b23-green:      #4cae4f;
    --b23-orange:     #e8a84c;
    --b23-pink:       #e87da8;
    --b23-text:       #222;
    --b23-subtext:    #444;
    --b23-divider:    #e8edf4;
    --b23-panel-w:    320px;
    --b23-radius:     0;
    --b23-speed:      .28s;
}

/* ── Wrapper (scoped to widget) ─────────────────────────────── */
.b23-wrap * { box-sizing: border-box; }
.b23-wrap { font-family: 'Segoe UI', Arial, sans-serif; }

/* ================================================================
   TOP BAR
   ================================================================ */
.b23-topbar {
    display: flex;
    align-items: center;
    background: var(--b23-blue);
    padding: 0 12px;
    height: 54px;
    gap: 10px;
    position: relative;
    z-index: 1000;
}

/* Hamburger */
.b23-burger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 26px;
    height: 19px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}
.b23-burger span {
    display: block;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform var(--b23-speed), opacity var(--b23-speed);
}
.b23-burger.is-open span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
.b23-burger.is-open span:nth-child(2) { opacity: 0; }
.b23-burger.is-open span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }

/* Logo */
.b23-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    flex: 1;
}
.b23-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.b23-logo-text small {
    font-size: 8px;
    color: #a8c8e8;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.b23-logo-text strong {
    font-size: 15px;
    color: #fff;
    font-weight: 800;
    letter-spacing: .5px;
}
.b23-logo-text strong em {
    font-style: normal;
    color: var(--b23-blue-light);
}

/* Top-right icons */
.b23-topbar-icons {
    display: flex;
    align-items: center;
    gap: 16px;
}
.b23-topbar-icons a {
    color: #fff;
    display: flex;
    align-items: center;
    opacity: .85;
    transition: opacity .2s;
}
.b23-topbar-icons a:hover { opacity: 1; }

/* ================================================================
   OVERLAY (darkens page when panel opens)
   ================================================================ */
.b23-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1001;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--b23-speed);
}
.b23-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}

/* ================================================================
   SLIDE PANEL
   ================================================================ */
.b23-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--b23-panel-w);
    max-width: 90vw;
    height: 100vh;
    background: #fff;
    z-index: 1002;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform var(--b23-speed) cubic-bezier(.4,0,.2,1);
    box-shadow: 4px 0 30px rgba(0,0,0,.18);
    -webkit-overflow-scrolling: touch;
}
.b23-panel:not([hidden]) { display: block !important; }
.b23-panel.is-open { transform: translateX(0); }

/* Panel header row (close button) */
.b23-panel-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 10px 14px;
    border-bottom: 1px solid var(--b23-divider);
    background: #f7f9fc;
}

.b23-close {
    background: none;
    border: none;
    cursor: pointer;
    color: #666;
    padding: 4px;
    line-height: 0;
    border-radius: 4px;
    transition: color .2s, background .2s;
}
.b23-close:hover { color: var(--b23-blue); background: #eaf2fb; }

/* ================================================================
   PANEL LIST — level 0
   ================================================================ */
.b23-panel-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.b23-pi { border-bottom: 1px solid var(--b23-divider); }

/* Shared row style */
.b23-pi-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 13px 16px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--b23-text);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .4px;
    transition: background .15s, color .15s;
}
.b23-pi-row:hover { background: #f0f5fc; }

.b23-pi-sign {
    font-size: 18px;
    font-weight: 300;
    color: #999;
    line-height: 1;
    transition: transform var(--b23-speed);
    flex-shrink: 0;
}
.b23-pi--open > .b23-pi-toggle > .b23-pi-sign {
    transform: rotate(45deg);
    color: var(--b23-blue);
}

/* ── Link-only items ────────────────────────────────────────── */
.b23-pi--link .b23-pi-link {
    font-weight: 400;
    text-transform: none;
    color: #444;
}
.b23-pi--link .b23-pi-link:hover { color: var(--b23-blue); }

/* ── Medicamentos special (green background) ────────────────── */
.b23-pi--medicamentos > .b23-pi-row {
    background: var(--b23-green);
    color: #fff;
}
.b23-pi--medicamentos > .b23-pi-row:hover {
    background: #3d9440;
}
.b23-pi--medicamentos > .b23-pi-row .b23-pi-sign { color: rgba(255,255,255,.7); }
.b23-pi--medicamentos.b23-pi--open > .b23-pi-toggle > .b23-pi-sign { color: #fff; }

/* ── Promo orange ───────────────────────────────────────────── */
.b23-pi--promo-orange .b23-pi-link {
    background: #fdf0d6;
    color: #9a6000;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.b23-pi--promo-orange .b23-pi-link:hover { background: #f9e5b8; }

/* ── Promo pink ─────────────────────────────────────────────── */
.b23-pi--promo-pink .b23-pi-link {
    background: #fce0ec;
    color: #9a2050;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.b23-pi--promo-pink .b23-pi-link:hover { background: #f8c8dd; }

/* ================================================================
   LEVEL 1 SUBMENU (accordion inside panel)
   ================================================================ */
.b23-sub {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #f8fafd;
    overflow: hidden;
    animation: b23-slide-down var(--b23-speed) ease;
}
.b23-sub[hidden] { display: none; }

@keyframes b23-slide-down {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.b23-si { border-bottom: 1px solid #ecf0f8; }
.b23-si:last-child { border-bottom: none; }

/* Sub row shared */
.b23-si-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 11px 16px 11px 28px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: #333;
    text-decoration: none;
    transition: background .15s, color .15s;
    text-transform: none;
    letter-spacing: 0;
}
.b23-si-row:hover { background: #eaf2fb; color: var(--b23-blue); }

.b23-si--open > .b23-si-toggle > .b23-pi-sign {
    transform: rotate(45deg);
    color: var(--b23-blue);
}

/* ================================================================
   LEVEL 2 SUBSUB MENU
   ================================================================ */
.b23-subsub {
    list-style: none;
    margin: 0;
    padding: 0;
    background: #eef3fb;
    animation: b23-slide-down var(--b23-speed) ease;
}
.b23-subsub[hidden] { display: none; }

.b23-ss-link {
    display: block;
    padding: 9px 16px 9px 44px;
    font-size: 12.5px;
    color: #555;
    text-decoration: none;
    border-bottom: 1px solid #e0e8f5;
    transition: background .15s, color .15s, padding-left .15s;
}
.b23-ss-link:hover {
    background: #ddeaf8;
    color: var(--b23-blue);
    padding-left: 50px;
}
.b23-ss-link:last-child { border-bottom: none; }

.b23-ss-all {
    font-weight: 700;
    color: var(--b23-blue);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .3px;
}
.b23-ss-all:hover { color: var(--b23-blue-light); }