/* ═══════════════════════════════════════════════════════
   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;
    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; }
 
        /* ════════════════════════════════════════════════════
           GIPS MASTER PAGE — INLINE STYLES (YELLOW THEME)
        ════════════════════════════════════════════════════ */

        /* ── Hide top bar & default toggler on mobile ── */
        @media (max-width: 991px) {
            .top-bar {
                display: none !important;
            }

            .navbar-toggler {
                display: none !important;
            }

            
        }

        /* ── Hero section ── */
        .hero-bg {
            height: 580px;
            background: linear-gradient(135deg, #1a1a2e, #7a3800);
            display: flex;
            align-items: center;
        }

        @media (max-width: 768px) {
            .hero-bg {
                height: 70vh;
                min-height: 420px;
            }

            .carousel-caption {
                bottom: 10px;
                padding-top: 10px;
            }

            .hero-title {
                font-size: 22px;
                line-height: 1.2;
            }

            .hero-subtitle {
                font-size: 14px;
            }
        }

        /* ════════════════════════════════════════════════════
           HAMBURGER BUTTON — Yellow Theme
        ════════════════════════════════════════════════════ */
        .gips-toggler {
            background: #F0B800 !important;
            border: none !important;
            width: 42px;
            height: 42px;
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 5px;
            cursor: pointer;
            padding: 0;
            flex-shrink: 0;
            transition: background .2s, transform .15s;
            box-shadow: 0 3px 10px rgba(240,184,0,.4);
        }

            .gips-toggler span {
                display: block;
                width: 20px;
                height: 2.5px;
                background: #1a1a2e !important;
                border-radius: 3px;
                transition: all .3s;
            }

            .gips-toggler:hover {
                background: #ffc800 !important;
                transform: scale(1.07);
            }

        /* ════════════════════════════════════════════════════
           MOBILE SIDEBAR — Full Yellow Override
           (overrides gips-sidebar.css which uses green)
        ════════════════════════════════════════════════════ */

        /* ── Scroll lock: overflow only — NO position:fixed ──
           position:fixed was causing the blank screen bug      */
        body.sb-open {
            overflow: hidden !important;
        }

        /* ── Overlay: covers page but stays behind sidebar ── */
        #gipsSidebarOverlay {
            position: fixed !important;
            top: 0 !important;
            left: 0 !important;
            right: 0 !important;
            bottom: 0 !important;
            background: rgba(10, 10, 20, 0.55) !important;
            z-index: 1049 !important;
            display: block !important;
            opacity: 0 !important;
            pointer-events: none !important;
            transition: opacity .32s ease !important;
        }

            #gipsSidebarOverlay.open {
                opacity: 1 !important;
                pointer-events: all !important;
            }

        /* ── Sidebar panel styling ── */
        #gipsSidebar {
            background: #1a1a2e !important;
            border-right: 3px solid #F0B800 !important;
            z-index: 1050 !important;
        }

            /* ── Sidebar header ── */
            #gipsSidebar .sb-header {
                background: rgba(0,0,0,.35) !important;
                border-bottom: 2px solid #F0B800 !important;
            }

            #gipsSidebar .sb-badge {
               
                color: #1a1a2e !important;
            }

            #gipsSidebar .sb-close {
                background: rgba(240,184,0,.2) !important;
                color: #F0B800 !important;
                border: 1px solid rgba(240,184,0,.35) !important;
            }

                #gipsSidebar .sb-close:hover {
                    background: #F0B800 !important;
                    color: #1a1a2e !important;
                }

            /* ── Nav links hover & active ── */
            #gipsSidebar .sb-link:hover,
            #gipsSidebar .sb-group-header:hover {
                background: rgba(240,184,0,.10) !important;
            }

            #gipsSidebar .sb-link.active {
                background: rgba(240,184,0,.18) !important;
                color: #F0B800 !important;
            }

                #gipsSidebar .sb-link.active .sb-ico {
                    background: #F0B800 !important;
                    color: #1a1a2e !important;
                }

            #gipsSidebar .sb-ico {
                background: rgba(240,184,0,.15) !important;
                color: rgba(255,255,255,.85) !important;
            }

            /* ── Accordion group header active ── */
            #gipsSidebar .sb-group-header.active {
                background: rgba(240,184,0,.15) !important;
            }

                #gipsSidebar .sb-group-header.active .sb-group-label {
                    color: #F0B800 !important;
                }

                #gipsSidebar .sb-group-header.active .sb-arrow {
                    color: #F0B800 !important;
                }

                #gipsSidebar .sb-group-header.active .sb-group-ico {
                    background: #F0B800 !important;
                    color: #1a1a2e !important;
                }

            #gipsSidebar .sb-group-ico {
                background: rgba(240,184,0,.15) !important;
                color: rgba(255,255,255,.85) !important;
            }

            /* ── Sub-items ── */
            #gipsSidebar .sb-sub-item:hover {
                color: #fff !important;
                background: rgba(240,184,0,.08) !important;
            }

                #gipsSidebar .sb-sub-item:hover::before {
                    background: #F0B800 !important;
                }

            /* ── Divider ── */
            #gipsSidebar .sb-divider {
                border-color: rgba(240,184,0,.2) !important;
            }

            /* ── Footer CTA buttons ── */
            #gipsSidebar .sb-footer {
                background: rgba(0,0,0,.35) !important;
                border-top: 1px solid rgba(240,184,0,.25) !important;
            }

            #gipsSidebar .sb-btn-apply {
                background: #F0B800 !important;
                color: #1a1a2e !important;
                font-weight: 700 !important;
            }

                #gipsSidebar .sb-btn-apply:hover {
                    background: #ffd740 !important;
                }

            #gipsSidebar .sb-btn-enquire {
                background: rgba(240,184,0,.12) !important;
                border: 1.5px solid rgba(240,184,0,.45) !important;
                color: #F0B800 !important;
            }

                #gipsSidebar .sb-btn-enquire:hover {
                    background: rgba(240,184,0,.25) !important;
                }

        .fab {
            text-decoration: none !important;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 45px;
            height: 45px;
            border-radius: 50%;
        }

            .fab:hover,
            .fab:focus,
            .fab:active {
                text-decoration: none !important;
            }

            .fab i {
                text-decoration: none !important;
            }
        /*==========================
      NEWS TICKER
===========================*/

        .news-ticker {
            height: 48px;
            background: #002147;
            overflow: hidden;
            display: flex;
            align-items: center;
        }

        .ticker-label {
            background: #ff9800;
            color: #fff;
            font-weight: 700;
            padding: 0 20px;
            height: 48px;
            display: flex;
            align-items: center;
            white-space: nowrap;
            z-index: 2;
        }

        .ticker-wrap {
            flex: 1;
            overflow: hidden;
            position: relative;
        }

        .ticker-content {
            display: flex;
            width: max-content;
            animation: ticker 50s linear infinite;
        }

        .ticker-items {
            display: flex;
            align-items: center;
            white-space: nowrap;
        }

        .ticker-item {
            display: inline-flex;
            align-items: center;
            padding-right: 70px;
            font-size: 15px;
            color: #fff;
            font-weight: 500;
        }

            .ticker-item i {
                color: #ffc107;
                margin-right: 10px;
            }

        .news-ticker:hover .ticker-content {
            animation-play-state: paused;
        }

        @keyframes ticker {
            from {
                transform: translateX(0);
            }

            to {
                transform: translateX(-50%);
            }
        }
        /* ── GLOBAL OVERFLOW GUARD (fixes sideways scroll on mobile) ── */
        html, body {
            max-width: 100%;
            overflow-x: hidden;
        }

        img, svg, iframe, video {
            max-width: 100%;
        }

        .navbar-brand, .brand-text, .container-fluid, .row, [class*="col-"] {
            min-width: 0;
        }

        @media (max-width: 991px) {
            .brand-text h5 {
                font-size: .95rem;
                white-space: normal;
                line-height: 1.25;
            }

            .brand-text small {
                font-size: .7rem;
            }

            .navbar-brand {
                max-width: calc(100% - 56px);
                overflow: hidden;
            }
        }