/* WPSitesKit — Mobile Sidebar (whole theme sidebar as a drawer)
   Desktop is untouched: the inline <style> hides toggle/backdrop above the
   breakpoint and the drawer only takes over positioning on mobile. */

/* Toggle — hidden on desktop by the inline min-width rule */
.wsk-msb-toggle {
    align-items: center;
    gap: 10px;
    background: var(--wsk-msb-accent, #bc0000);
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
}

/* Bar variant — full width, where the sidebar used to sit */
.wsk-msb-toggle-bar {
    display: flex;
    width: 100%;
    padding: 14px 18px;
    border-radius: 10px;
    text-align: left;
    margin: 12px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.10);
    letter-spacing: .01em;
}
.wsk-msb-toggle-bar .wsk-msb-toggle-text { flex: 1; }
.wsk-msb-toggle-bar:active { transform: scale(.99); }

/* Shortcode button — compact, drop it in a header */
.wsk-msb-sc-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--wsk-msb-accent, #bc0000);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
    transition: filter .15s ease, transform .1s ease;
}
.wsk-msb-sc-btn:hover { filter: brightness(1.08); }
.wsk-msb-sc-btn:active { transform: scale(.97); }
.wsk-msb-sc-bars { display:inline-flex; flex-direction:column; gap:3px; width:18px; height:14px; justify-content:center; }
.wsk-msb-sc-bars span { display:block; height:2px; width:100%; background:currentColor; border-radius:2px; }

/* FAB variant — bottom centre, clear of corner buttons */
.wsk-msb-toggle-fab {
    display: inline-flex;
    position: fixed;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    padding: 12px 22px;
    border-radius: 999px;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
    z-index: 99997;
}

/* Hamburger bars */
.wsk-msb-bars { display:inline-flex; flex-direction:column; gap:4px; width:20px; height:16px; justify-content:center; }
.wsk-msb-bars span { display:block; height:2px; width:100%; background:currentColor; border-radius:2px; transition:transform .25s, opacity .2s; }
.wsk-msb-toggle.is-open .wsk-msb-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.wsk-msb-toggle.is-open .wsk-msb-bars span:nth-child(2) { opacity: 0; }
.wsk-msb-toggle.is-open .wsk-msb-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Caret (bar only) */
.wsk-msb-caret { width:9px; height:9px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .25s; }
.wsk-msb-toggle.is-open .wsk-msb-caret { transform: rotate(-135deg); }

/* ── Drawer ───────────────────────────────────────────────────────── */
.wsk-msb-drawer {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 86%;
    max-width: 360px;
    background: #fff;
    z-index: 99999;
    padding: 54px 18px calc(24px + env(safe-area-inset-bottom));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: transform .3s ease;
    box-shadow: 0 0 28px rgba(0,0,0,.2);
}
.wsk-msb-left  { left: 0;  transform: translateX(-105%); }
.wsk-msb-right { right: 0; transform: translateX(105%); }
.wsk-msb-drawer.is-open { transform: translateX(0); }

.wsk-msb-close {
    position: absolute;
    top: 10px; right: 12px;
    width: 36px; height: 36px;
    border: none; background: transparent;
    font-size: 28px; line-height: 1; color: #333;
    cursor: pointer;
}

/* Sidebar sits naturally inside the drawer */
.wsk-msb-drawer .wsk-msb-moved {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
}

/* Backdrop */
.wsk-msb-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 99998;
    opacity: 0;
    transition: opacity .28s ease;
}
.wsk-msb-backdrop.is-visible { opacity: 1; }

body.wsk-msb-locked { overflow: hidden; }

/* Below the breakpoint: neutralise the sidebar's in-flow copy spot.
   The sidebar is physically moved into the drawer, so nothing remains in
   the content flow; the placeholder keeps layout stable. */
.wsk-msb-placeholder { width: 100%; height: 0; }