@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
body {
    font-family: 'Space Grotesk', sans-serif;
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Ensure body takes full viewport height */
}

.buffer {
    flex-grow: 1; /* Allows the buffer to take up available space */
}

.telegram-form {
    max-width: 500px;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #f9f9f9;
    margin: 20px auto;
}

.service-card {
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(255, 120, 73, 0.2);
    border-color: rgba(255, 120, 73, 0.3);
}

.pulse-dot {
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.1); }
}

.radio-wave {
    animation: radio-wave 2s ease-in-out infinite;
}

@keyframes radio-wave {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.5; }
}

.gradient-bg {
    background: linear-gradient(135deg, #ff7849 0%, #ffab40 50%, #ffffff 100%);
}

.glass-nav {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.status-online { color: #10b981; }
.status-busy { color: #f59e0b; }
.status-offline { color: #6b7280; }

.floating-element {
    animation: float 6s ease-in-out infinite;
}

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

.progress-ring {
    transition: stroke-dasharray 0.3s ease;
}
.floating-animation {
    animation: float 6s ease-in-out infinite;
}
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}

/* Custom styles for footer icons */
/* Removed as new social icons have their own styling */

/* Dark Mode styles */
body.dark-mode {
    background-color: #1a1a1a;
    color: #e0e0e0; /* Lighter text for dark mode */
}
.dark-mode .service-card {
    background: rgba(80, 80, 80, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.dark-mode .service-card:hover {
    box-shadow: 0 20px 40px rgba(255, 120, 73, 0.4);
    border-color: rgba(255, 120, 73, 0.5);
}
.dark-mode .bg-gray-100 {
    background-color: #333333;
}
.dark-mode .text-gray-600 {
    color: #b0b0b0;
}
.dark-mode .text-gray-800 {
    color: #e0e0e0;
}
.dark-mode .bg-gray-50 {
    background-color: #2a2a2a; /* Slightly cooler dark gray */
}
.dark-mode .bg-gradient-to-r.from-gray-100.to-gray-200 {
    background: linear-gradient(to right, #282828, #333333);
}
.dark-mode .bg-white {
    background-color: #0E121E; /* Slightly cooler dark gray */
}
/* .dark-mode .text-gray-900 {
    color: #e0e0e0;
}*/
.dark-mode .border-gray-700 {
    border-color: #444444;
}
.dark-mode .text-gray-400 {
    color: #a0a0a0;
}
.dark-mode .text-gray-300 {
    color: #c0c0c0;
}
.dark-mode .shop-filter.bg-gray-700 {
    background-color: #444444;
}
.dark-mode .shop-filter.bg-gray-700:hover {
    background-color: #555555;
}
.dark-mode .p-3.bg-gray-800.bg-opacity-50.rounded-lg {
    background-color: rgba(60, 60, 60, 0.5);
}
.dark-mode .bg-gradient-to-r.from-gray-700.to-gray-600 {
    background: linear-gradient(to right, #444444, #3a3a3a);
}
.dark-mode .bg-orange-50 {
    background-color: #fff7ed; /* Light orange for dark mode protip box */
    color: #1f2937; /* Dark text for dark mode protip box */
}

.dark-mode #team-members h2 {
    color: #ffffff; /* White for section titles in dark mode */
}
.dark-mode #team-members h3 {
    color: #ffffff; /* White for team member names in dark mode */
}

/* Styles moved from body.php */
.telegram-form { max-width: 500px; padding: 20px; border: 1px solid #ccc; border-radius: 8px; background-color: #f9f9f9; margin: 20px auto; }
label { display: block; margin-bottom: 8px; font-weight: bold; }
textarea, select { width: 100%; padding: 10px; margin-bottom: 15px; border: 1px solid #ddd; border-radius: 4px; box-sizing: border-box; }
button { background-color: #007bff; color: white; padding: 10px 15px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; }
button:hover { background-color: #0056b3; }
.status { margin-top: 15px; }