/*

Theme Name: C.S.S. Luxury

Author: C.S.S. Team

Version: 1.3.1

Description: Premium property amenities and lifestyle management theme.

*/



/* --- CSS VARIABLES: THE MATERIAL ENGINE --- */

:root {

    --bg-main: #050505;

    --text-main: #FFFFFF;

    --text-muted: #A1A1AA;

    --accent: #D4AF37; 

    --border-color: rgba(255, 255, 255, 0.1);

    

    --platter-bg: rgba(20, 20, 20, 0.6);

    --platter-border: rgba(255, 255, 255, 0.08);

    --platter-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);

    --platter-hover-bg: rgba(30, 30, 30, 0.9);

    --platter-hover-shadow: 0 15px 40px rgba(212, 175, 55, 0.2); 

    --platter-hover-border: #D4AF37;



    --nav-glass: rgba(15, 15, 15, 0.75);

    --nav-border: rgba(212, 175, 55, 0.2);



    --btn-bg: transparent;

    --btn-text: #FFFFFF;

    --btn-border: #D4AF37;

    --btn-hover-bg: #D4AF37;

    --btn-hover-text: #000000;



    --input-bg: rgba(0,0,0,0.4);

    --input-border: rgba(255,255,255,0.1);

    --input-focus: #D4AF37;



    --text-halo: 0 4px 20px rgba(0,0,0,0.9), 0 0 40px rgba(0,0,0,1);



    --nav-bg: rgba(5, 5, 5, 0.95);

    --phone-bg: #000000;

    --phone-border: #222222;

    --toggle-bg: rgba(255,255,255,0.1);

    --toggle-knob: #D4AF37;

}



body.light-mode {

    --bg-main: transparent; 

    --text-main: #1A1814; 

    --text-muted: #5C5A54; 

    --accent: #B88B2D; 

    --border-color: rgba(184, 139, 45, 0.2); 

    

    --platter-bg: rgba(253, 251, 247, 0.85); 

    --platter-border: rgba(184, 139, 45, 0.4); 

    --platter-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);

    --platter-hover-bg: rgba(255, 255, 255, 1);

    --platter-hover-shadow: 0 15px 40px rgba(184, 139, 45, 0.15); 

    --platter-hover-border: #B88B2D; 



    --nav-glass: rgba(253, 251, 247, 0.85);

    --nav-border: rgba(184, 139, 45, 0.3);



    --btn-bg: #FDFBF7;

    --btn-text: #B88B2D;

    --btn-border: #B88B2D;

    --btn-hover-bg: #B88B2D;

    --btn-hover-text: #FFFFFF;



    --input-bg: rgba(255,255,255,0.6);

    --input-border: rgba(184, 139, 45, 0.3);

    --input-focus: #B88B2D;



    --text-halo: 0 4px 20px rgba(253,251,247,0.9), 0 0 50px rgba(253,251,247,1);



    --nav-bg: rgba(253, 251, 247, 0.95);

    --phone-bg: #FDFBF7;

    --phone-border: rgba(184, 139, 45, 0.5); 

    --toggle-bg: rgba(184, 139, 45, 0.1);

    --toggle-knob: #B88B2D;

}



/* --- BASE APPLICATION BREAKOUT --- */

html, body {

    max-width: 100%;

    overflow-x: hidden !important;

    margin: 0;

    padding: 0;

}



#css-master-wrapper {

    background-color: #050505;

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

    min-height: 100vh;

    overflow-x: clip; 

    position: relative;

    -webkit-font-smoothing: antialiased;

    width: 100%; 

}



/* --- THE LIGHT MODE WIPE LAYER --- */

#light-mode-wipe {

    position: fixed; inset: 0; z-index: 0; 

    background: radial-gradient(circle at 15% 0%, #FFFFFF 0%, #FDFBF7 40%, #F2EFE9 100%);

    clip-path: circle(0% at 90% 40px);

    transition: clip-path 1.2s cubic-bezier(0.64, 0.04, 0.35, 1);

    pointer-events: none;

}

body.light-mode #light-mode-wipe { clip-path: circle(150vw at 90% 40px); }



/* --- TEXT OVERRIDES --- */

.text-adaptive-main { color: var(--text-main) !important; transition: color 0.8s ease !important; }

.text-adaptive-muted { color: var(--text-muted) !important; transition: color 0.8s ease !important; }

.text-adaptive-accent { color: var(--accent) !important; transition: color 0.8s ease !important; }

.border-adaptive { border-color: var(--border-color) !important; transition: border-color 0.8s ease !important; }

.bg-adaptive-accent { background-color: var(--accent) !important; transition: background-color 0.8s ease !important; }

.hero-text-halo { text-shadow: var(--text-halo); transition: text-shadow 1.2s ease; }



/* --- THE LOGO SWITCHER SYSTEM --- */

.css-nav-logo img {

    height: 100px !important; 

    width: auto !important;

    margin-left: -15px; 

    margin-top: -30px; 

    margin-bottom: -30px; 

}



@media (max-width: 1024px) {

    .css-nav-logo img {

        height: 45px !important; 

        margin: 0; 

        transform: scale(1.4); 

        transform-origin: left center;

    }

}



.css-nav-logo .logo-dark { display: block; }

.css-nav-logo .logo-light { display: none; }

.css-nav-logo .logo-gold { display: none; }



body.light-mode .css-nav-logo .logo-dark { display: none; }

body.light-mode .css-nav-logo .logo-light { display: block; }

body.gold-mode .css-nav-logo .logo-dark { display: none; }

body.gold-mode .css-nav-logo .logo-light { display: none; }

body.gold-mode .css-nav-logo .logo-gold { display: block; }



/* --- PLATTER SYSTEM --- */

.apple-platter {

    background: var(--platter-bg);

    backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);

    border: 1px solid var(--platter-border); border-radius: 2rem; 

    box-shadow: var(--platter-shadow); transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);

}

.apple-platter.interactive:hover {

    background: var(--platter-hover-bg); border-color: var(--platter-hover-border);

    transform: translateY(-5px); box-shadow: var(--platter-hover-shadow);

}



/* --- BUTTONS --- */

.aero-btn {

    background: var(--btn-bg); border: 1px solid var(--btn-border); color: var(--btn-text) !important;

    backdrop-filter: blur(10px); letter-spacing: 1px; text-transform: uppercase; font-size: 13px; font-weight: 600;

    padding: 16px 45px; border-radius: 999px; transition: all 0.5s ease; cursor: pointer; box-shadow: 0 4px 15px rgba(0,0,0,0.1); 

    display: inline-block; text-align: center;

}

.aero-btn:hover {

    background: var(--btn-hover-bg); color: var(--btn-hover-text) !important; border-color: var(--btn-hover-bg);

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); transform: translateY(-2px);

}

.aero-btn.sending { opacity: 0.7; pointer-events: none; cursor: wait; }

.aero-btn.success { background: #10B981 !important; border-color: #10B981 !important; color: white !important; pointer-events: none; }

.aero-btn.error { background: #EF4444 !important; border-color: #EF4444 !important; color: white !important; }



.partner-btn {

    background: transparent; border: 1px solid var(--accent); color: var(--accent) !important;

    backdrop-filter: blur(10px); transition: all 0.4s ease; display: inline-block;

    padding: 9px 22px; border-radius: 999px; font-size: 12px; font-weight: 700;

    text-transform: uppercase; letter-spacing: 0.1em; box-shadow: 0 4px 15px rgba(0,0,0,0.1);

}

body.light-mode .partner-btn {

    background: rgba(253, 251, 247, 0.9); 

}

.partner-btn:hover {

    background: var(--accent) !important; color: #FFFFFF !important; border-color: var(--accent); transform: scale(1.05);

}



/* --- FORM INPUTS --- */

.css-input {

    width: 100%; background: var(--input-bg);

    border: 1px solid var(--input-border); color: var(--text-main);

    padding: 1rem 1.5rem; border-radius: 1rem; font-family: 'Inter', sans-serif;

    transition: all 0.4s ease; backdrop-filter: blur(10px);

}

.css-input:focus {

    outline: none; border-color: var(--input-focus); box-shadow: 0 0 15px rgba(184, 139, 45, 0.2);

}

.css-input::placeholder { color: var(--text-muted); opacity: 0.7; }



/* --- THEME SWITCHER --- */

.theme-switch {

    width: 48px; height: 26px; border-radius: 20px;

    background: var(--toggle-bg); border: 1px solid var(--border-color);

    position: relative; cursor: pointer; transition: all 0.8s ease; display: flex; align-items: center; padding: 4px;

}

.theme-switch-knob {

    width: 16px; height: 16px; border-radius: 50%; background: var(--toggle-knob);

    transition: transform 0.8s cubic-bezier(0.64, 0.04, 0.35, 1), background-color 0.8s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.3);

}



/* --- MOBILE MENU --- */

.menu-toggle-btn {

    position: fixed; top: 1.5rem; right: 1.5rem; z-index: 9999 !important; 

    background: var(--platter-bg); backdrop-filter: blur(20px); border: 1px solid var(--platter-border);

    width: 45px; height: 45px; border-radius: 50%; display: flex; align-items: center; justify-content: center;

    cursor: pointer; transition: all 0.5s ease; box-shadow: var(--platter-shadow);

}

.menu-toggle-btn:hover { transform: scale(1.05); }



.menu-overlay {

    position: fixed; top: 0; left: 0; width: 100%; height: 100%;

    background: var(--nav-bg); backdrop-filter: blur(30px);

    z-index: 9998; opacity: 0; pointer-events: none;

    transition: opacity 0.8s ease, background-color 1.2s ease; display: flex; align-items: center; justify-content: center;

}

.menu-overlay.active { opacity: 1 !important; pointer-events: auto !important; }



.menu-link {

    font-family: 'Playfair Display', serif; font-size: 2.5rem; text-decoration: none;

    transition: color 0.8s ease, opacity 0.5s, transform 0.5s; opacity: 0; transform: translateY(20px);

}

.menu-overlay.active .menu-link { opacity: 1; transform: translateY(0); transition-delay: 0.1s; }

.menu-link:hover { color: var(--accent) !important; }



/* --- ANIMATIONS --- */

.animate-bounce-lux { animation: bounceLux 3s ease-in-out infinite; }

@keyframes bounceLux { 

    0%, 100% { transform: translateY(0); opacity: 0.3; } 

    50% { transform: translateY(-12px); opacity: 1; } 

}



* { -webkit-tap-highlight-color: transparent !important; }

*:focus, *:active { outline: none !important; box-shadow: none !important; }

.js-loaded .reveal-up { opacity: 0; transform: translateY(40px); transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1); }

.reveal-left { opacity: 0; transform: translateX(-40px); transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1); }

.reveal-right { opacity: 0; transform: translateX(40px); transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1); }

.in-view { opacity: 1 !important; transform: translate(0, 0) !important; }