/*------------------------------------FOOTER CSS -----------------------------------------------------*/


footer{
    background: linear-gradient(135deg,#0f172a,#1e1b4b,#0b1220);
    /*background:var(--dark);*/
    color:#cbd5e1;
    padding:40px 0;
    position:relative;
    overflow:hidden;
}

footer a{
    color:#e5e7eb;
    transition:0.3s;
    text-decoration:none !important; /* remove underline */
    /*text-decoration:underline;*/
    font-size:14px;
}

footer a:hover{
    color:#ffffff !important;
    transform:translateX(6px);
    text-decoration:none !important; /* keep it removed on hover */
}

footer ul li a{
    display:inline-block;
    padding:2px 0;
}

footer .text-secondary{
    color:#cbd5e1 !important;
}

.footer-link{
    display:flex;
    align-items:center;
    gap:6px;
    padding:3px 0;
}

.footer-social a{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,0.08);
    transition:0.3s;
}

.footer-social a:hover{
    background:rgba(255,255,255,0.2);
    transform:scale(1.1);
}

.footer-title{
    font-weight:700;
    color:#fff;
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
}

/* TEXT + ICON SPACING CONTROL */
.footer-title-text{
    gap: 6px; /* space between left icon and text */
}

.footer-section ul{
    list-style:none;
    padding-left:0;
}

/* MOBILE FOOTER DROPDOWN ICON FIX */
@media(max-width:768px){

    footer .accordion-button{
        position: relative;
        padding-right: 35px;
    }

    /* Use Bootstrap default arrow but make it WHITE */
    footer .accordion-button::after{
        filter: invert(1) brightness(2); /* makes arrow white on dark bg */
        transform: rotate(0deg);
        transition: transform 0.3s ease;
    }

    /* Rotate when open */
    footer .accordion-button:not(.collapsed)::after{
        transform: rotate(180deg);
    }
    
    #quickLinksFooter ul,
    #externalLinksFooter ul{
        text-align: center;
    }

    #quickLinksFooter .footer-link,
    #externalLinksFooter .footer-link{
        justify-content: center;   /* center icon + text */
        text-align: center;
    }

    /* Optional: better spacing */
    #quickLinksFooter li,
    #externalLinksFooter li{
        margin-bottom: 6px;
    }
}

/* FIX FOOTER ACCORDION HEADINGS VISIBILITY */
footer .accordion-button{
    color:#ffffff !important;
    font-weight:600;
    padding-left:0;
    background:transparent !important;
    box-shadow:none !important;
    width: 100%;
    gap: 12px; /* space between text block and chevron */
}

/* OPTIONAL: better spacing */
footer .accordion-button span{
    flex: 1;
}

/* CHEVRON STYLE */
.footer-chevron{
    font-size: 14px;
    color: #fff;
    transition: transform 0.3s ease;
}

/* ROTATION */
footer .accordion-button:not(.collapsed) .footer-chevron{
    transform: rotate(180deg);
}

footer h6 i,
footer .accordion-button i{
    font-size:20px;
    vertical-align:middle;
    opacity:0.9;
}

footer .accordion-button:not(.collapsed){
    color:#ffffff !important;
    background:rgba(255,255,255,0.08) !important;
}

footer .accordion-button::after{
    /*filter:brightness(0) invert(1);  makes arrow white */
    filter: invert(1);
    display: none !important;
}

/* Hover + tap feedback */
footer .accordion-button:hover{
    opacity: 0.9;
}

/* Smooth open feel */
footer .collapse{
    transition: all 0.35s ease;
}

/* remove Bootstrap default spacing issues in dark footer */
footer .accordion-item{
    background:transparent !important;
}

footer .bg-opacity-25{
    background: rgba(255,255,255,0.06) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.08);
    transition: 0.3s;
}

footer .bg-opacity-25:hover{
    transform: translateY(-4px);
    background: rgba(255,255,255,0.09) !important;
}

footer small a{
    color:#e5e7eb !important;
    text-decoration:none;
    border-bottom:1px dashed rgba(255,255,255,0.3);
    transition:0.3s;
}

footer small a:hover{
    color:#fff !important;
    border-bottom:1px solid #fff;
}

/* ===== VISITOR COUNTER PREMIUM UI ===== */

.visitor-wrapper{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:30px;
    margin-top:10px;
}

/* card style */
.visitor-box{
    background:rgba(255,255,255,0.08);
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:16px;
    padding:15px 20px;
    min-width:260px;
    text-align:center;
    transition:0.3s ease;
}

.visitor-box:hover{
    transform:translateY(-5px);
    background:rgba(255,255,255,0.12);
    box-shadow:0 10px 25px rgba(0,0,0,0.25);
}

/* title */
.visitor-title{
    font-size:13px;
    color:#cbd5e1;
    margin-bottom:10px;
    letter-spacing:0.5px;
}

/* digit container */
.visitor-digits{
    display:flex;
    justify-content:center;
    gap:6px;
}

/* each digit */
.visitor-digits li{
    list-style:none;
    width:32px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:18px;
    border-radius:8px;

    background:linear-gradient(135deg,#4f46e5,#06b6d4);
    color:#fff;

    box-shadow:0 6px 15px rgba(79,70,229,0.4);

    transition:0.3s;
}

/* hover animation */
.visitor-box:hover .visitor-digits li{
    transform:translateY(-3px);
}

/* responsive */
@media(max-width:768px){
    .visitor-box{
        min-width:100%;
    }
}

/* IP DISPLAY (MATCHES UI THEME) */

.visitor-ip{
    display:inline-block;
    padding:8px 14px;
    border-radius:10px;

    font-weight:600;
    font-size:14px;
    letter-spacing:0.5px;

    background:linear-gradient(135deg,#4f46e5,#06b6d4);
    color:#fff;

    box-shadow:0 6px 15px rgba(79,70,229,0.4);
    transition:0.3s ease;
    word-break:break-all;
}

/* hover sync */
.visitor-box:hover .visitor-ip{
    transform:translateY(-2px);
}

/* IP DISPLAY (MATCHES UI THEME) */

.visitor-ip{
    display:inline-block;
    padding:8px 14px;
    border-radius:10px;

    font-weight:600;
    font-size:14px;
    letter-spacing:0.5px;

    background:linear-gradient(135deg,#4f46e5,#06b6d4);
    color:#fff;

    box-shadow:0 6px 15px rgba(79,70,229,0.4);
    transition:0.3s ease;
    word-break:break-all;
}

/* hover sync */
.visitor-box:hover .visitor-ip{
    transform:translateY(-2px);
}

/* FLOATING PILL */
#scrollPill{
    position:fixed;
    bottom:25px;
    right:25px;
    z-index:9999;

    display:flex;
    align-items:center;
    gap:12px;

    padding:10px 14px;
    border-radius:50px;

    /* 🔥 FIXED BACKGROUND */
    background:rgba(15, 23, 42, 0.75);   /* dark glass */
    backdrop-filter:blur(14px);

    border:1px solid rgba(255,255,255,0.15);

    color:#fff;
    outline:1px solid rgba(255,255,255,0.08);

    font-weight:600;
    font-size:13px;

    box-shadow:0 10px 30px rgba(0,0,0,0.35);

    cursor:pointer;

    opacity:0;
    transform:translateY(20px);
    transition:all 0.3s ease;
}

/* SHOW */
#scrollPill.show{
    opacity:1;
    transform:translateY(0);
}

/* hover */
#scrollPill:hover{
    transform:translateY(-4px) scale(1.04);
    box-shadow:0 18px 40px rgba(0,0,0,0.4);
}

#scrollPill::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50px;

    background:linear-gradient(135deg,#4f46e5,#06b6d4);
    opacity:0.15;

    z-index:-1;
}

/* icon */
.pill-icon{
    width:34px;
    height:34px;
    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;
    background:linear-gradient(135deg,#4f46e5,#06b6d4);
}

/* content */
.pill-content{
    display:flex;
    flex-direction:column;
    line-height:1.1;
}

#pillTime{
    font-size:13px;
    font-weight:700;
}

#pillDate{
    font-size:10px;
    opacity:0.8;
}

/* IST badge */
.pill-zone{
    font-size:10px;
    padding:3px 6px;
    border-radius:8px;

    background:linear-gradient(135deg,#4f46e5,#06b6d4);
}

/* divider */
.pill-divider{
    width:1px;
    height:20px;
    background:rgba(255,255,255,0.4);
}

/* seconds animation */
@keyframes tick{
    0%{transform:scale(1);}
    50%{transform:scale(1.1);}
    100%{transform:scale(1);}
}

.tick{
    animation:tick 1s ease;
}