/* Tailwind Integration */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* General Styling */
body,
html {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    height: 100%;
    background-color: #121212;
    color: #e0e0e0;
    overflow-x: hidden;
}

/* Page Background */
.page-background,
.hero,
.background-section,
.blog-page,
.login-page,
.about-page,
.contact-page,
.appointment-page {
    @apply bg-cover bg-center bg-no-repeat min-h-screen flex justify-center items-center text-white;
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 0;
}

.page-background::before,
.hero::before,
.background-section::before,
.blog-page::before,
.about-page::before,
.contact-page::before,
.appointment-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index: -1;
}

.login-page::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: none;
    backdrop-filter: none;
    z-index: -1;
}

/* Dark Shade */
.page-shading,
.hero-shading,
.background-section-shading {
    @apply w-full h-full flex flex-col justify-center items-center pt-24 relative z-10;
}

/* Content Overlay */
.content-overlay,
.hero-content,
.background-section-content {
    @apply bg-gray-800 bg-opacity-80 p-12 m-8 rounded-xl text-center w-4/5 max-w-6xl shadow-lg;
    z-index: 10;
    color: #e0e0e0;
}

/* Section Heading */
.section-heading {
    @apply text-4xl md:text-5xl font-bold mb-6 text-blue-500;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
}

/* Decorative Line */
.decorative-line {
    @apply h-1 w-16 bg-gradient-to-r from-blue-500 to-purple-500 my-2 mx-auto;
}

/* Custom Tailwind CSS Extensions */
.btn {
    @apply bg-gradient-to-r from-blue-500 to-purple-500 text-white font-bold py-2 px-4 rounded-full transition-all duration-300;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.btn:hover {
    @apply bg-gradient-to-r from-blue-700 to-purple-700 transform scale-105;
}

/* Navbar Styling */
.navbar {
    @apply fixed top-0 left-0 w-full bg-gray-900 bg-opacity-90 text-white shadow-xl z-50 py-4;
    backdrop-filter: blur(10px);
}

.nav-links {
    @apply flex justify-end space-x-6;
}

.nav-links a {
    @apply text-white px-4 py-2 rounded-full text-sm font-medium transition duration-300;
}

.nav-links a:hover,
.nav-links a.active {
    @apply text-blue-400;
}

/* Hero Section */
.hero {
    @apply min-h-screen flex items-center justify-center text-white text-center relative z-10;
}

.hero h1,
.services h2,
.additional-services h2,
.contact-us h1,
.contact-form h2,
.blog-page h1,
.blog-detail-page h1,
.login-page h1,
.signup-page h1,
.appointment-page h1 {
    @apply text-5xl font-extrabold mb-4;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
}

.hero p,
.services p,
.additional-services p,
.contact-us p,
contact-form p,
.blog-page p,
.blog-detail-page p,
.login-page p,
.signup-page p,
.appointment-page p {
    @apply text-xl mb-8;
}

/* Service Card, Blog Post, Team Member Styling */
.service-card,
.blog-post {
    @apply p-8 shadow-xl rounded-xl transition-transform duration-300 hover:shadow-2xl bg-gray-800 bg-opacity-90 backdrop-filter backdrop-blur-lg text-white flex flex-col items-center;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform: translateY(0);
}

.service-card:hover,
.blog-post:hover {
    transform: translateY(-10px);
}

.service-card img,
.blog-post img {
    @apply w-full h-48 object-cover mb-4 rounded-lg;
}

.service-card h3,
.blog-post h3 {
    @apply text-3xl font-bold mb-2 text-blue-500;
}

.service-card p,
.blog-post p {
    @apply text-base;
}

/* Blog Post Styling */
.blog-post img {
    @apply w-full h-64 object-cover mb-4 rounded-lg;
}

.blog-post h3 {
    @apply text-3xl font-bold mb-2;
}

.blog-post p {
    @apply text-base;
}

/* Login, Signup, and Appointment Forms */
.form-container {
    @apply max-w-md mx-auto p-8 bg-gray-900 shadow-2xl rounded-2xl text-white bg-opacity-90 backdrop-filter backdrop-blur-lg;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.form-container input,
.form-container textarea,
.form-container select {
    @apply w-full p-3 mb-4 border border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-opacity-80 bg-gray-700 text-white;
}

.form-container button {
    @apply bg-gradient-to-r from-blue-500 to-purple-500 text-white p-3 rounded-full w-full transition-transform duration-300;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.form-container button:hover {
    @apply bg-gradient-to-r from-blue-700 to-purple-700 transform scale-105;
}

/* Toggle Button */
.toggle-btn {
    @apply text-blue-600 mt-4 underline cursor-pointer;
}

/* Appointments List */
.appointments-list {
    @apply mt-6;
}

.appointment-item {
    @apply p-4 mb-4 bg-gray-900 text-white shadow-md rounded-lg flex justify-between items-center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.appointment-details p {
    @apply mb-2;
}

.appointment-actions .btn {
    @apply mr-2;
}

.appointment-actions .btn-update {
    @apply bg-yellow-500 text-black;
}

.appointment-actions .btn-delete {
    @apply bg-red-500 text-white;
}

/* Logout Button */
.logout-btn {
    @apply text-white bg-red-500 py-2 px-4 rounded-full hover:bg-red-700 transition-transform duration-300;
}

/* Contact Form Styling */
.contact-form {
    @apply max-w-lg mx-auto p-8 bg-gray-900 shadow-2xl rounded-2xl text-white bg-opacity-90 backdrop-filter backdrop-blur-lg;
}

.contact-form input,
.contact-form textarea {
    @apply w-full p-3 mb-4 border rounded-lg bg-gray-700 border-gray-600 text-white;
}

.contact-form button {
    @apply bg-gradient-to-r from-blue-500 to-purple-500 text-white p-3 rounded-full w-full transition-transform duration-300;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.contact-form button:hover {
    @apply bg-gradient-to-r from-blue-700 to-purple-700 transform scale-105;
}

/* Newsletter Section */
.newsletter {
    @apply max-w-lg mx-auto p-6 bg-gray-900 text-white shadow-2xl rounded-2xl;
}

.newsletter h2 {
    @apply text-2xl font-bold mb-4 text-blue-400;
}

.newsletter p {
    @apply text-base mb-4;
}

.newsletter form {
    @apply flex items-center;
}

.newsletter input {
    @apply flex-grow p-2 border border-gray-600 rounded-l-full focus:outline-none bg-gray-700 text-white;
}

.newsletter button {
    @apply bg-gradient-to-r from-blue-500 to-purple-500 text-white py-2 px-4 rounded-r-full hover:bg-gradient-to-r from-blue-700 to-purple-700 transition-transform duration-300;
}

/* Blog Management Section */
.admin-dashboard {
    @apply p-8 bg-gray-900 shadow-2xl rounded-2xl text-white bg-opacity-90 backdrop-filter backdrop-blur-lg;
}

.admin-dashboard h1 {
    @apply text-3xl font-bold mb-6 text-blue-400;
}

.admin-dashboard .form-container {
    @apply mb-8;
}

.admin-dashboard .blog-list {
    @apply mt-8;
}

.admin-dashboard .blog-item {
    @apply p-4 mb-4 bg-gray-800 text-white shadow-2xl rounded-2xl flex justify-between items-center;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-dashboard .blog-item .btn {
    @apply mr-2;
}

.admin-dashboard .blog-item .btn-edit {
    @apply bg-yellow-500 text-black;
}

.admin-dashboard .blog-item .btn-delete {
    @apply bg-red-500 text-white;
}

@layer utilities {
    .bg-dark-shade {
        @apply bg-black bg-opacity-50;
    }
}

/* Footer Styling */
.footer {
    @apply bg-gray-900 text-white py-6 mt-auto w-full;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer p {
    @apply text-sm;
}

body {
    @apply min-h-screen flex flex-col;
}

main {
    @apply flex-grow;
}

/* Page Specific Backgrounds */
.blog-page {
    background-image: url('../styles/images/blog-background.jpg');
    background-size: cover;
    background-position: center;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.login-page {
    background-image: url('../styles/images/login-background.jpg');
    background-size: cover;
    background-position: center;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-page {
    background-image: url('../styles/images/about-background.png');
}

.contact-page {
    background-image: url('../styles/images/contact-background.jpg');
}

.appointment-page {
    background-image: url('../styles/images/appointment-background.jpg');
    background-size: cover;
    background-position: center;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Responsive Design Adjustments */
@media (max-width: 768px) {

    .content-overlay,
    .hero-content,
    .background-section-content {
        @apply p-6 m-4 rounded-lg w-full max-w-full;
    }

    .hero h1,
    .services h2,
    .additional-services h2,
    .contact-us h1,
    .contact-form h2,
    .blog-page h1,
    .blog-detail-page h1,
    .login-page h1,
    .signup-page h1,
    .appointment-page h1 {
        @apply text-3xl;
    }

    .hero p,
    .services p,
    .additional-services p,
    .contact-us p,
    .contact-form p,
    .blog-page p,
    .blog-detail-page p,
    .login-page p,
    .signup-page p,
    .appointment-page p {
        @apply text-base mb-4;
    }

    .navbar {
        @apply py-2;
    }

    .nav-links {
        @apply flex-col space-y-3 text-center;
    }

    .nav-links a {
        @apply px-2 py-1 text-sm;
    }

    .service-card,
    .blog-post {
        @apply p-4 mb-4 rounded-lg w-full max-w-full;
    }

    .service-card h3,
    .blog-post h3 {
        @apply text-2xl;
    }

    .service-card p,
    .blog-post p {
        @apply text-sm;
    }

    .form-container {
        @apply p-4 rounded-lg;
    }

    .form-container input,
    .form-container textarea,
    .form-container select {
        @apply p-2;
    }

    .form-container button {
        @apply p-2;
    }

    .newsletter {
        @apply p-4 rounded-lg;
    }

    .newsletter h2 {
        @apply text-xl;
    }

    .newsletter p {
        @apply text-sm;
    }

    .newsletter form {
        @apply flex-col items-stretch;
    }

    .newsletter input {
        @apply p-2 mb-2 rounded-l-lg rounded-r-lg;
    }

    .newsletter button {
        @apply p-2;
    }

    .admin-dashboard {
        @apply p-4 rounded-lg;
    }

    .admin-dashboard h1 {
        @apply text-xl;
    }

    .admin-dashboard .form-container {
        @apply p-2;
    }

    .admin-dashboard .blog-item {
        @apply p-2 mb-2 rounded-lg;
    }

    .footer {
        @apply py-4;
    }

    .footer p {
        @apply text-xs;
    }
}

/* Transition Effects */
.fade-enter {
    opacity: 0.01;
}

.fade-enter.fade-enter-active {
    opacity: 1;
    transition: opacity 300ms ease-in;
}

.fade-exit {
    opacity: 1;
}

.fade-exit.fade-exit-active {
    opacity: 0.01;
    transition: opacity 300ms ease-in;
}