/* =============================================
   SAMAH LASER CENTER - Main Stylesheet v2
   ============================================= */

/* --- Dark Mode Variables --- */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #fdf4ff;
    --bg-card: #ffffff;
    --text-primary: #2e1065;
    --text-secondary: #6b7280;
    --border-color: rgba(217,70,239,0.1);
}
.dark {
    --bg-primary: #0f0a1a;
    --bg-secondary: #1a1028;
    --bg-card: #1f1535;
    --text-primary: #f3e8ff;
    --text-secondary: #c4b5d4;
    --border-color: rgba(217,70,239,0.15);
}

html { scroll-behavior: smooth; }
body {
    font-family: 'Tajawal', sans-serif;
    background: var(--bg-secondary);
    color: var(--text-primary);
    transition: background 0.3s ease, color 0.3s ease;
}

/* --- Gradient Utilities --- */
.text-gradient {
    background: linear-gradient(135deg, #d946ef, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.bg-gradient-primary {
    background: linear-gradient(135deg, #d946ef, #8b5cf6);
}

/* --- Hero --- */
.hero-bg {
    background: linear-gradient(rgba(253, 244, 255, 0.85), rgba(253, 244, 255, 0.95)),
                url('https://images.unsplash.com/photo-1515377905703-c4788e51af15?q=80&w=2070&auto=format&fit=crop') center/cover no-repeat;
}
.dark .hero-bg {
    background: linear-gradient(rgba(15, 10, 26, 0.88), rgba(26, 16, 40, 0.92)),
                url('https://images.unsplash.com/photo-1515377905703-c4788e51af15?q=80&w=2070&auto=format&fit=crop') center/cover no-repeat;
}
.hero-blob-1 {
    position: absolute;
    top: 5rem;
    right: 2.5rem;
    width: 12rem;
    height: 12rem;
    background: rgba(217, 70, 239, 0.2);
    border-radius: 50%;
    filter: blur(3rem);
    opacity: 0.7;
    animation: blobPulse 4s ease-in-out infinite;
}
.hero-blob-2 {
    position: absolute;
    bottom: 5rem;
    left: 2.5rem;
    width: 16rem;
    height: 16rem;
    background: rgba(139, 92, 246, 0.2);
    border-radius: 50%;
    filter: blur(3rem);
    opacity: 0.7;
    animation: blobPulse 4s ease-in-out infinite;
    animation-delay: 2s;
}
@keyframes blobPulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.1); opacity: 0.9; }
}

/* --- FAQ Accordion --- */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details[open] summary ~ * { animation: sweep 0.5s ease-in-out; }
@keyframes sweep {
    0% { opacity: 0; transform: translateY(-10px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* --- Scroll Animations --- */
.fade-in, .fade-in-left, .fade-in-right, .fade-in-scale {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in { transform: translateY(30px); }
.fade-in-left { transform: translateX(-30px); }
.fade-in-right { transform: translateX(30px); }
.fade-in-scale { transform: scale(0.95); }
.fade-in.visible, .fade-in-left.visible, .fade-in-right.visible, .fade-in-scale.visible {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
}

/* --- Mobile Menu --- */
.mobile-menu-enter {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
}
.mobile-menu-open {
    max-height: 400px;
    opacity: 1;
}

/* --- Countdown --- */
@keyframes countdownPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}
.countdown-animate { animation: countdownPulse 2s ease-in-out infinite; }

/* --- Gallery Lightbox --- */
.lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(8px);
    z-index: 200;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}
.lightbox-overlay.open { display: flex; }
.lightbox-overlay img {
    max-width: 90vw;
    max-height: 85vh;
    border-radius: 1.5rem;
    box-shadow: 0 25px 60px rgba(0,0,0,0.5);
    animation: lightboxIn 0.3s ease-out;
}
@keyframes lightboxIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}
.lightbox-close {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    color: white;
    font-size: 2rem;
    cursor: pointer;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    transition: background 0.2s;
}
.lightbox-close:hover { background: rgba(255,255,255,0.3); }
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 2.5rem;
    cursor: pointer;
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.15);
    border-radius: 50%;
    transition: background 0.2s;
}
.lightbox-nav:hover { background: rgba(255,255,255,0.3); }
.lightbox-nav.prev { right: 1.5rem; }
.lightbox-nav.next { left: 1.5rem; }
.lightbox-counter {
    position: absolute;
    bottom: 1.5rem;
    color: rgba(255,255,255,0.6);
    font-size: 0.9rem;
}

/* --- Dark mode navbar --- */
.dark #navbar {
    background: rgba(15, 10, 26, 0.9) !important;
    border-color: rgba(255,255,255,0.05);
}
.dark #navbar a { color: #c4b5d4; }
.dark #navbar a:hover { color: #d946ef; }
.dark #navbar .text-dark { color: #f3e8ff; }
.dark #mobile-menu { background: rgba(15, 10, 26, 0.95) !important; border-color: rgba(255,255,255,0.05); }
.dark #mobile-menu a { color: #c4b5d4; }
.dark #mobile-menu a:hover { background: rgba(217,70,239,0.1); }

.dark .bg-white { background: var(--bg-card) !important; }
.dark .bg-secondary { background: var(--bg-secondary) !important; }
.dark .text-dark { color: var(--text-primary) !important; }
.dark .text-gray-600, .dark .text-gray-700, .dark .text-gray-500, .dark .text-gray-400 { color: var(--text-secondary) !important; }
.dark .text-gray-800 { color: var(--text-primary) !important; }
.dark .border-pink-50, .dark .border-pink-100, .dark .border-gray-100 { border-color: var(--border-color) !important; }
.dark .bg-gray-200, .dark .bg-gray-50 { background: rgba(255,255,255,0.05) !important; }
.dark .shadow-sm, .dark .shadow-md, .dark .shadow-lg, .dark .shadow-xl, .dark .shadow-2xl { box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important; }
.dark .hover\:shadow-xl:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.4) !important; }
.dark .hover\:bg-pink-50:hover { background: rgba(217,70,239,0.1) !important; }
.dark .bg-white\/80 { background: rgba(15, 10, 26, 0.85) !important; backdrop-filter: blur(12px); }
.dark .bg-white\/95 { background: rgba(15, 10, 26, 0.95) !important; }
.dark footer { background: var(--bg-card) !important; border-color: var(--border-color) !important; }
.dark .grayscale { opacity: 0.6; }

/* --- Dark toggle button --- */
.dark-toggle {
    position: fixed;
    top: 5.5rem;
    left: 1rem;
    z-index: 45;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    border: none;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    background: white;
    color: #2e1065;
}
.dark-toggle:hover { transform: scale(1.1); }
.dark .dark-toggle {
    background: #1f1535;
    color: #fbbf24;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

/* --- Cookie Consent --- */
.cookie-consent {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    left: 1rem;
    max-width: 400px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 1.25rem;
    padding: 1.25rem;
    box-shadow: 0 20px 50px rgba(0,0,0,0.15);
    z-index: 300;
    display: none;
    animation: fadeInUp 0.5s ease-out;
}
.cookie-consent.show { display: block; }
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- Language Switcher --- */
.lang-switcher { direction: ltr; display: flex; align-items: center; }
.lang-btn {
    background: transparent;
    color: #9ca3af;
    cursor: pointer;
    font-family: 'Tajawal', sans-serif;
    border: none;
    outline: none;
    line-height: 1.2;
}
.lang-btn.active {
    background: linear-gradient(135deg, #d946ef, #8b5cf6);
    color: white;
}
.lang-switcher .lang-btn:first-child.active { border-radius: 999px 0 0 999px; }
.lang-switcher .lang-btn:last-child.active { border-radius: 0 999px 999px 0; }
.lang-btn:hover:not(.active) { color: #d946ef; }
.dark .lang-btn.active { color: white; }
.dark .lang-btn:hover:not(.active) { color: #f3e8ff; }
.dark .lang-switcher { border-color: rgba(255,255,255,0.15) !important; }

/* --- Sticky Mobile Bar --- */
.sticky-booking-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 40;
    backdrop-filter: blur(12px);
    transform: translateY(100%);
    transition: transform 0.3s ease;
}
.sticky-booking-bar.visible { transform: translateY(0); }
.dark .sticky-booking-bar { background: rgba(15, 10, 26, 0.95) !important; }

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    .fade-in, .fade-in-left, .fade-in-right, .fade-in-scale { opacity: 1; transform: none; }
    html { scroll-behavior: auto; }
    .hero-blob-1, .hero-blob-2 { animation: none; }
    .countdown-animate { animation: none; }
    * { animation-duration: 0.01ms !important; }
}

/* --- Slideshow Layer --- */
.hero-bg { position: relative; }
.slideshow-layer { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.slideshow-layer .slideshow-slide {
    position: absolute; inset: 0; background-size: cover; background-position: center;
    opacity: 0; transition: opacity 1.5s ease-in-out, transform 0.8s ease-in-out;
}
.slideshow-layer .slideshow-slide.active { opacity: 1; z-index: 1; }
.hero-bg > .max-w-4xl { position: relative; z-index: 2; }

/* --- Secondary Slideshow --- */
#slideshow2-track::-webkit-scrollbar { display: none; }
.slideshow2-slide { scroll-snap-align: center; }
.slideshow2-nav {
    opacity: 0;
    transition: opacity 0.3s ease;
}
#slideshow2-container:hover .slideshow2-nav { opacity: 1; }

/* --- Dark mode fixes for secondary slideshow --- */
.dark .slideshow2-slide {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}
.dark .slideshow2-nav { background: rgba(31, 21, 53, 0.9) !important; color: #d946ef; }

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: linear-gradient(135deg, #d946ef, #8b5cf6); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #c026d3; }