/* =========================================================

Side Navigation Scrollbar Styling

========================================================= */

.sidebar-content::-webkit-scrollbar {

width: 8px;

}

.sidebar-content::-webkit-scrollbar-track {

background: rgba(255, 255, 255, 0.1);  

border-radius: 10px;

}

.sidebar-content::-webkit-scrollbar-thumb {

background-color: rgba(255, 255, 255, 0.2);  

border-radius: 10px;

}

.sidebar-content::-webkit-scrollbar-thumb:hover {

background-color: rgba(255, 255, 255, 0.3);

}

/* =========================================================

Two-Line Hamburger Icon CSS

========================================================= */

.two-line-hamburger {

display: flex;  

flex-direction: column;  

justify-content: space-between;  

width: 24px;  

height: 16px;  

cursor: pointer;  

padding: 2px 0;  

box-sizing: border-box;

}

.two-line-hamburger span {

display: block;  

height: 2px;  

width: 100%;  

background-color: white;  

border-radius: 2px;

}

/* =========================================================

Header Animation on Scroll

========================================================= */

.mobile-header-top {

transition: transform 0.3s ease-in-out;

}

.mobile-header-top.hidden-on-scroll {

transform: translateY(-100%);

}

.location-dot-icon {

animation: pulse-dot 1.5s infinite;

}

@keyframes pulse-dot {

0% { transform: scale(1); opacity: 1; }  

50% { transform: scale(1.2); opacity: 0.8; }  

100% { transform: scale(1); opacity: 1; }

}

@media (min-width: 768px) {

.mobile-header-top.hidden-on-scroll {  

    transform: translateY(0);  

}

}

/* =========================================================

Glassmorphism Cards

========================================================= */

.glassmorphism {

background-color: rgba(255, 255, 255, 0.15);  

backdrop-filter: blur(5px);  

border: 1px solid transparent;  

box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}

.glassmorphism.border-green {

border-color: rgba(74, 222, 128, 0.4);

}

.glassmorphism.border-red {

border-color: rgba(248, 113, 113, 0.4);

}

/* =========================================================

Animated Card Appearance

========================================================= */

.animated-card {

opacity: 0;  

transform: translateY(20px);  

transition: opacity 0.5s ease-out, transform 0.5s ease-out;

}

.animated-card.is-visible {

opacity: 1;  

transform: translateY(0);

}

/* =========================================================

Spin / Spin-Reverse Animations

========================================================= */

@keyframes spin {

from { transform: rotate(0deg); }  

to { transform: rotate(360deg); }

}

@keyframes spin-reverse {

from { transform: rotate(360deg); }  

to { transform: rotate(0deg); }

}

.animate-spin {

animation: spin 1s linear infinite;

}

.animate-spin-reverse {

animation: spin-reverse 1s linear infinite;

}

/* =========================================================

Sthana AI - CSS for smooth fade transitions

========================================================= */

.hidden {

display: none;

}

.fade-in {

opacity: 1;  

transition: opacity 0.3s ease-in-out;

}

.fade-out {

opacity: 0;  

transition: opacity 0.3s ease-in-out;

}

/* =========================================================

Loading Spinner & Typing Messages

========================================================= */

.loading-overlay {

position: fixed;  

inset: 0;  

background: rgba(255, 255, 255, 0.9);  

display: flex;  

flex-direction: column;  

align-items: center;  

justify-content: center;  

z-index: 9999;  

font-family: 'Mukta', sans-serif;

}

/* Spinner Ring */

.spinner-ring {

position: relative;  

width: 64px;  

height: 64px;  

margin-bottom: 16px;

}

.spinner-ring img {

position: absolute;  

width: 48px;  

height: 48px;  

border-radius: 50%;  

top: 50%;  

left: 50%;  

transform: translate(-50%, -50%);

}

.spinner-ring svg {

transform: rotate(-90deg);  

width: 64px;  

height: 64px;

}

.spinner-ring circle {

fill: none;  

stroke-width: 6;  

stroke-linecap: round;

}

.spinner-ring .ring-bg {

stroke: rgba(11, 74, 133, 0.2);

}

.spinner-ring .ring-fg {

stroke: #0B4A85;  

stroke-dasharray: 30;  

stroke-dashoffset: 30;  

transform-origin: 50% 50%;  

animation: ring-rotate 2s linear infinite, ring-complete 2s ease-in-out infinite;

}

/* Ring Complete/Incomplete Animation */

@keyframes ring-complete {

0% { stroke-dashoffset: 30; }  

50% { stroke-dashoffset: 0; }  

100% { stroke-dashoffset: 30; }

}

/* Ring rotation */

@keyframes ring-rotate {

0% { transform: rotate(0deg); }  

100% { transform: rotate(360deg); }

}

/* Loading Messages */

.loading-message {

font-size: 16px;  

font-weight: 500;  

color: #0B4A85;  

margin-top: 12px;  

text-align: center;  

min-height: 24px;

}

/* Bouncing Dots */

.typing-dots {

display: inline-block;  

margin-left: 6px;

}

.typing-dots span {

display: inline-block;  

width: 6px;  

height: 6px;  

margin: 0 1px;  

background: #0B4A85;  

border-radius: 50%;  

opacity: 0.6;  

animation: bounce 1s infinite;

}

.typing-dots span:nth-child(1) { animation-delay: 0s; }

.typing-dots span:nth-child(2) { animation-delay: 0.2s; }

.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce {

0%, 80%, 100% { transform: scale(0.6); opacity: 0.3; }  

40% { transform: scale(1); opacity: 1; }

}

/* Optional: fade-in/out for loading container */

#loading-state-container.fade-in {

opacity: 1;  

transition: opacity 0.3s ease-in-out;

}

#loading-state-container.fade-out {

opacity: 0;  

transition: opacity 0.3s ease-in-out;

}