/* ═══════════════════════════════════════════════════════
   GIPS MOBILE SIDEBAR  —  Assets/css/gips-sidebar.css
   Global International Public School, Dabra
   Requires: Bootstrap 5, FontAwesome 6, Poppins font
   ═══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root {
    --sb-bg:        #0b3d2e;
    --sb-bg-head:   rgba(0, 0, 0, .22);
    --sb-bg-footer: rgba(0, 0, 0, .28);
    --sb-hover:     rgba(255, 255, 255, .07);
    --sb-active:    rgba(240, 184, 0, .13);
    --sb-divider:   rgba(255, 255, 255, .10);
    --sb-ico-bg:    rgba(255, 255, 255, .11);
    --sb-gold:      #F0B800;
    --sb-gold2:     #FFD740;
    --sb-green-mid: #1a6348;
    --sb-white:     #ffffff;
    --sb-muted:     rgba(255, 255, 255, .52);
    --sb-font:      'Poppins', 'Nunito', sans-serif;
}

/* ── Prevent body scroll when sidebar is open ── */
body.sb-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* ── Dark overlay behind sidebar ── */
#gipsSidebarOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .54);
    z-index: 1049;
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity .32s ease;
}
#gipsSidebarOverlay.open {
    opacity: 1;
    pointer-events: all;
}

/* ── Sidebar drawer ── */
#gipsSidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 300px;
    max-width: 88vw;
    background: var(--sb-bg);
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform .32s cubic-bezier(.4, 0, .2, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: var(--sb-font);
}
#gipsSidebar.open {
    transform: translateX(0);
}

/* ── Header ── */
.sb-header {
    background: var(--sb-bg-head);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    border-bottom: 1px solid var(--sb-divider);
}
.sb-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sb-badge {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--sb-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    color: var(--sb-bg);
    flex-shrink: 0;
    overflow: hidden;
}
.sb-badge img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 10px;
}
.sb-title {
    color: var(--sb-white);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.3;
}
.sb-title small {
    display: block;
    color: var(--sb-muted);
    font-size: 9.5px;
    font-weight: 400;
}
.sb-close {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, .10);
    border: none;
    color: var(--sb-white);
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    flex-shrink: 0;
    line-height: 1;
}
.sb-close:hover {
    background: rgba(255, 255, 255, .22);
}

/* ── Scrollable nav body ── */
.sb-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 0 4px;
}
.sb-body::-webkit-scrollbar       { width: 3px; }
.sb-body::-webkit-scrollbar-track { background: transparent; }
.sb-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 10px; }

/* ── Single nav link ── */
.sb-link {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 16px;
    color: var(--sb-white);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: var(--sb-font);
}
.sb-link:hover         { background: var(--sb-hover); color: var(--sb-white); }
.sb-link.active        { background: var(--sb-active); color: var(--sb-gold); }
.sb-link .sb-ico {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--sb-ico-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    transition: background .2s;
    color: var(--sb-white);
}
.sb-link.active .sb-ico { background: var(--sb-gold); color: var(--sb-bg); }
.sb-link:hover  .sb-ico { background: rgba(255,255,255,.18); }

/* ── Accordion group header ── */
.sb-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 16px;
    cursor: pointer;
    user-select: none;
    transition: background .2s;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: var(--sb-font);
}
.sb-group-header:hover  { background: var(--sb-hover); }
.sb-group-header.active { background: var(--sb-active); }

.sb-group-left {
    display: flex;
    align-items: center;
    gap: 11px;
}
.sb-group-ico {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--sb-ico-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
    transition: background .2s;
    color: var(--sb-white);
}
.sb-group-header.active .sb-group-ico { background: var(--sb-gold); color: var(--sb-bg); }

.sb-group-label {
    color: var(--sb-white);
    font-size: 13px;
    font-weight: 500;
}
.sb-group-header.active .sb-group-label { color: var(--sb-gold); }

.sb-arrow {
    color: var(--sb-muted);
    font-size: 11px;
    transition: transform .28s ease;
    flex-shrink: 0;
}
.sb-group-header.active .sb-arrow {
    transform: rotate(180deg);
    color: var(--sb-gold);
}

/* ── Accordion submenu ── */
.sb-submenu {
    overflow: hidden;
    max-height: 0;
    transition: max-height .32s cubic-bezier(.4, 0, .2, 1);
}
.sb-submenu.open {
    max-height: 700px;
}

.sb-sub-item {
    display: flex;
    align-items: center;
    padding: 9px 16px 9px 46px;
    color: rgba(255, 255, 255, .70);
    font-size: 12px;
    font-weight: 400;
    cursor: pointer;
    text-decoration: none;
    transition: all .2s;
    position: relative;
    font-family: var(--sb-font);
}
.sb-sub-item::before {
    content: '';
    position: absolute;
    left: 34px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    transition: background .2s;
}
.sb-sub-item:hover {
    color: var(--sb-white);
    background: rgba(255, 255, 255, .05);
    padding-left: 50px;
}
.sb-sub-item:hover::before {
    background: var(--sb-gold);
}

/* ── Divider ── */
.sb-divider {
    border: none;
    border-top: 1px solid var(--sb-divider);
    margin: 6px 16px;
}

/* ── Footer CTA buttons ── */
.sb-footer {
    flex-shrink: 0;
    padding: 12px 14px;
    background: var(--sb-bg-footer);
    display: flex;
    gap: 8px;
    border-top: 1px solid var(--sb-divider);
}
.sb-btn-apply {
    flex: 1;
    padding: 12px 8px;
    background: var(--sb-gold);
    color: var(--sb-bg);
    border: none;
    border-radius: 10px;
    font-family: var(--sb-font);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: .3px;
    transition: background .2s, transform .15s;
}
.sb-btn-apply:hover  { background: var(--sb-gold2); transform: translateY(-1px); }
.sb-btn-apply:active { transform: scale(.97); }

.sb-btn-enquire {
    flex: 1;
    padding: 12px 8px;
    background: var(--sb-green-mid);
    color: var(--sb-white);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 10px;
    font-family: var(--sb-font);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, transform .15s;
}
.sb-btn-enquire:hover  { background: #215a3e; transform: translateY(-1px); border-color: rgba(255,255,255,.35); }
.sb-btn-enquire:active { transform: scale(.97); }

/* ── Hamburger toggler button (inside navbar) ── */
.gips-toggler {
    background: var(--sb-bg) !important;
    border: none !important;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    padding: 0;
    transition: background .2s;
    flex-shrink: 0;
}
.gips-toggler span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--sb-gold);
    border-radius: 2px;
    transition: all .3s;
}
.gips-toggler:hover { background: #1a6348 !important; }