/* ==========================================================================
   SS SKIN AND HAIR CLINIC - Stylesheet for Marquee Motion & App Utility
   ========================================================================== */

/* Font Imports */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800;900&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

/* Color Variables */
:root {
    --color-champagne-light: #E8D5B7;
    --color-champagne: #C6A56D;
    --color-champagne-dark: #A8874E;
    --color-ivory: #FAF6F0;
    --color-ivory-light: #FFFDF9;
    --color-charcoal: #1F0A0E;
    --color-charcoal-body: #3D2B2E;
    --color-border: #ECE5DA;
    --color-emerald: #059669;
}

/* Smooth Scrolling & Zero-Horizontal-Overflow Control */
html, body {
    scroll-behavior: smooth;
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-text-size-adjust: 100%;
}

img, iframe, video, object, embed, section, div, header, footer {
    max-width: 100% !important;
}

/* Bulletproof Mobile & Cross-Browser Infinite Marquee Keyframes */
@-webkit-keyframes marquee {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
    }
}

@keyframes marquee {
    0% {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
    }
}

.animate-marquee {
    display: flex !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    min-width: 200% !important;
    -webkit-animation: marquee 22s linear infinite !important;
    animation: marquee 22s linear infinite !important;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.animate-marquee:hover {
    -webkit-animation-play-state: paused !important;
    animation-play-state: paused !important;
}

.marquee-content {
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    gap: 2rem !important;
    white-space: nowrap !important;
}

/* Glassmorphism & Accent Utilities */
.glass-header {
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(236, 229, 218, 0.8);
}

.glass-card {
    background: rgba(255, 253, 249, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(236, 229, 218, 0.9);
    border-radius: 20px;
    box-shadow: 0 10px 30px -10px rgba(31, 10, 14, 0.05);
}

.gold-gradient-text {
    background: linear-gradient(135deg, #B08E56 0%, #C6A56D 50%, #9A7B3E 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #C6A56D;
}

/* Mobile Safe Bottom Padding to prevent Floating WhatsApp/Call bar from overlapping content */
@media (max-width: 767px) {
    body {
        padding-bottom: 72px;
    }
    
    .mobile-headline-fit {
        word-break: break-word;
        hyphens: auto;
        line-height: 1.25 !important;
    }
}

/* Scrollbar Customization */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #FAF6F0; }
::-webkit-scrollbar-thumb { background: #C6A56D; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #B08E56; }