/* =====================================================================
   CODEPOINTER — SHARED SITE-WIDE STYLES
   File: cp-common.css
   Purpose:
     1. Make the top navbar truly fixed (desktop + mobile) on every page.
     2. Consistent Demo / Counselling / Student ERP / College ERP side
        buttons + popup form + success popup, on every page.
     3. Loading state for submit buttons ("processing..." feedback).
     4. Full-screen confetti / firecracker celebration canvas.
     5. Mobile popup fix — popup always shows ABOVE every other button
        (fixes "Explore Program" button floating over the popup issue).
   Loaded LAST on every page so these rules win the cascade.
===================================================================== */

/* ---------- 1. FIXED NAVBAR (desktop + mobile) ---------- */
nav{
    position:fixed !important;
    top:16px !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    margin:0 !important;
    z-index:100000 !important;
    box-sizing:border-box;
}

/* push page content down so the fixed nav never overlaps it */
body{
    padding-top:92px !important;
}

@media(max-width:768px){
    nav{
        top:10px !important;
        width:94% !important;
    }
    body{
        padding-top:78px !important;
    }
}

/* ---------- 2. LEFT SIDE FIXED ACTION BUTTONS ---------- */
.cp-left-side-buttons{
    position:fixed;
    left:0;
    top:50%;
    transform:translateY(-50%);
    display:flex;
    flex-direction:column;
    gap:2px;
    z-index:100050;
}

.cp-side-btn{
    width:42px;
    height:105px;
    display:flex;
    align-items:center;
    justify-content:center;
    writing-mode:vertical-rl;
    transform:rotate(180deg);
    color:#fff;
    font-size:11px;
    font-weight:700;
    cursor:pointer;
    user-select:none;
    transition:.3s;
    border:none;
}

.cp-side-btn:hover{
    filter:brightness(1.12);
}

.cp-college-erp-btn{
    background:linear-gradient(180deg,#ec4899,#be185d);
    box-shadow:0 0 15px rgba(236,72,153,.8),0 0 25px rgba(236,72,153,.5);
}

.cp-student-erp-btn{
    background:linear-gradient(180deg,#f59e0b,#ea580c);
    box-shadow:0 0 15px rgba(245,158,11,.8),0 0 25px rgba(245,158,11,.5);
}

.cp-counselling-btn{
    background:linear-gradient(180deg,#2563eb,#7c3aed);
    box-shadow:0 0 15px rgba(37,99,235,.8),0 0 30px rgba(124,58,237,.5);
    animation:cpCounsellingGlow 1.5s infinite alternate;
}

.cp-demo-btn{
    background:linear-gradient(180deg,#22c55e,#15803d);
    box-shadow:0 0 15px rgba(34,197,94,.8),0 0 30px rgba(34,197,94,.5);
    animation:cpDemoGlow 1.5s infinite alternate;
}

@keyframes cpCounsellingGlow{
    from{box-shadow:0 0 12px #2563eb,0 0 25px #2563eb;}
    to{box-shadow:0 0 20px #7c3aed,0 0 40px #7c3aed;}
}
@keyframes cpDemoGlow{
    from{box-shadow:0 0 12px #22c55e,0 0 25px #22c55e;}
    to{box-shadow:0 0 20px #16a34a,0 0 40px #16a34a;}
}

@media(max-width:768px){
    .cp-side-btn{
        width:28px;
        height:72px;
        font-size:8px;
        font-weight:600;
    }
}

/* ---------- 3. COUNSELLING / DEMO POPUP ---------- */
.cp-counselling-popup{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.75);
    backdrop-filter:blur(8px);
    display:none;
    justify-content:center;
    align-items:flex-start;
    padding:20px;
    z-index:2147483000;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
}

.cp-popup-box{
    width:900px;
    max-width:100%;
    max-height:none;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    background:#0b1023;
    backdrop-filter:blur(25px);
    border:1px solid rgba(255,255,255,.1);
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 0 40px rgba(37,99,235,.25),0 0 80px rgba(124,58,237,.15);
    animation:cpPopupShow .4s ease;
    position:relative;
}

@keyframes cpPopupShow{
    from{transform:scale(.85);opacity:0;}
    to{transform:scale(1);opacity:1;}
}

.cp-popup-left{
    padding:40px;
    text-align:center;
    background:linear-gradient(135deg,rgba(37,99,235,.18),rgba(124,58,237,.18));
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}

.cp-popup-left img{
    width:150px;
    max-width:80%;
    border-radius:10px;
    background:#fff;
    padding:6px;
    animation:cpFloatAi 3s ease-in-out infinite;
}

@keyframes cpFloatAi{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-10px);}
}

.cp-popup-left h3{
    color:#fff;
    margin-top:18px;
    font-size:19px;
}

.cp-popup-left p{
    color:rgba(255,255,255,.75);
    font-size:13.5px;
    line-height:1.7;
    margin-top:10px;
}

.cp-popup-right{
    padding:40px;
    background:#0e1430;
}

.cp-popup-right h2{
    color:#fff;
    margin-bottom:20px;
}

.cp-popup-right input{
    width:100%;
    padding:14px;
    margin-bottom:14px;
    border-radius:10px;
    border:1px solid rgba(255,255,255,.15);
    background:rgba(255,255,255,.05);
    color:#fff;
    font-size:14px;
    box-sizing:border-box;
}

.cp-popup-right input::placeholder{
    color:rgba(255,255,255,.45);
}

.cp-popup-right button[type="submit"]{
    width:100%;
    padding:15px;
    border:none;
    border-radius:10px;
    background:linear-gradient(45deg,#4f46e5,#06b6d4);
    color:#fff;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:.25s;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
}

.cp-popup-right button[type="submit"]:hover{
    filter:brightness(1.08);
}

.cp-popup-right button[type="submit"]:disabled{
    opacity:.85;
    cursor:not-allowed;
}

.cp-close-popup{
    position:absolute;
    top:16px;
    right:20px;
    color:#fff;
    font-size:20px;
    cursor:pointer;
    z-index:5;
    opacity:.8;
}

.cp-close-popup:hover{
    opacity:1;
}

@media(max-width:768px){
    .cp-popup-box{
        grid-template-columns:1fr;
    }
    .cp-popup-left{
        padding:26px 20px;
    }
    .cp-popup-right{
        padding:26px 20px;
    }
}

/* ---------- Spinner shown inside the submit button while processing ---------- */
.cp-btn-spinner{
    width:18px;
    height:18px;
    border:3px solid rgba(255,255,255,.35);
    border-top-color:#fff;
    border-radius:50%;
    display:inline-block;
    animation:cpSpin .7s linear infinite;
}

@keyframes cpSpin{
    to{transform:rotate(360deg);}
}

/* ---------- 4. SUCCESS POPUP ---------- */
.cp-success-popup{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.8);
    backdrop-filter:blur(8px);
    display:none;
    justify-content:center;
    align-items:flex-start;
    padding:20px;
    z-index:2147483100;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
}

.cp-success-box{
    background:#0b1023;
    border:1px solid rgba(255,255,255,.1);
    border-radius:22px;
    padding:44px 34px;
    text-align:center;
    max-width:420px;
    width:100%;
    margin:auto;
    animation:cpPopupShow .4s ease;
    box-shadow:0 0 60px rgba(6,182,212,.3);
}

.cp-success-check{
    width:80px;
    height:80px;
    margin:0 auto 18px;
    border-radius:50%;
    background:linear-gradient(135deg,#22c55e,#06b6d4);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:38px;
    color:#fff;
    box-shadow:0 0 30px rgba(34,197,94,.55);
}

.cp-success-box h2{
    color:#fff;
    margin-bottom:10px;
}

.cp-success-box p{
    color:rgba(255,255,255,.75);
    line-height:1.7;
    font-size:14px;
    margin-bottom:22px;
}

.cp-success-box button{
    padding:13px 34px;
    border:none;
    border-radius:30px;
    background:linear-gradient(45deg,#4f46e5,#06b6d4);
    color:#fff;
    font-weight:600;
    cursor:pointer;
    font-size:14px;
}

/* ---------- 5. CONFETTI / FIRECRACKER CANVAS ---------- */
#cpConfettiCanvas{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
    z-index:2147483200;
}

/* ---------- 6. TOAST (used for "Coming Soon" ERP buttons) ---------- */
.cp-toast{
    position:fixed;
    bottom:30px;
    left:50%;
    transform:translateX(-50%) translateY(20px);
    background:#0b1023;
    border:1px solid rgba(255,255,255,.15);
    color:#fff;
    padding:14px 26px;
    border-radius:12px;
    font-size:14px;
    z-index:2147483300;
    opacity:0;
    transition:.3s;
    box-shadow:0 10px 30px rgba(0,0,0,.4);
}

.cp-toast.cp-show{
    opacity:1;
    transform:translateX(-50%) translateY(0);
}

/* ---------- 8. SLIDING INFO MARQUEE BAR ----------
   "MSME . Government of India Registered . Colleges Approved . Industry Approved"
   Shown just below the navbar and again just above the footer on every page. */
.cp-marquee-bar{
    width:100%;
    overflow:hidden;
    background:rgba(255,255,255,.04);
    backdrop-filter:blur(15px);
    border-top:1px solid rgba(255,255,255,.08);
    border-bottom:1px solid rgba(255,255,255,.08);
    position:relative;
    z-index:9000;
}

.cp-marquee-track{
    display:flex;
    width:max-content;
    animation:cpMarqueeScroll 22s linear infinite;
}

.cp-marquee-track span{
    display:flex;
    align-items:center;
    white-space:nowrap;
    padding:10px 30px;
    color:#e2e8f0;
    font-size:13.5px;
    font-weight:600;
    letter-spacing:.4px;
}

.cp-marquee-track span i{
    color:#06b6d4;
    margin-right:10px;
    font-size:12px;
}

/* Slow LEFT -> RIGHT motion (content starts off-screen left, glides to the right) */
@keyframes cpMarqueeScroll{
    from{ transform:translateX(-50%); }
    to{ transform:translateX(0%); }
}

@media(max-width:768px){
    .cp-marquee-track span{
        padding:8px 18px;
        font-size:11.5px;
    }
    .cp-marquee-track{
        animation-duration:16s;
    }
}

/* ---------- 9. MOBILE STACKING SAFETY NET ----------
   Whenever ANY CodePointer popup is open, forcibly push every other
   clickable element on the page behind it. This guarantees buttons
   like "Explore Programs" can never render above the popup on mobile,
   regardless of page-specific z-index quirks. */
body.cp-popup-open .my-hero-btn,
body.cp-popup-open .nav-btn,
body.cp-popup-open nav,
body.cp-popup-open .floating-contact,
body.cp-popup-open .cp-left-side-buttons,
body.cp-popup-open .ai-help{
    z-index:1 !important;
}