/* ==========================================================================
   Amatak Innovest | Luxury Hospitality Management & Consulting
   Custom Stylesheet (assets/css/style.css)
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Variables & Theme Definitions
   -------------------------------------------------------------------------- */
:root {
    --color-brand-dark: #023b31;
    --color-brand-deep: #062620;
    --color-brand-card: #0b352e;
    --color-brand-gold: #d4af37;
    --color-brand-gold-light: #f3e5ab;
    --color-brand-accent: #65832d;
    --color-brand-accent-hover: #769835;
    --color-text-main: #f3f4f6;
    --color-text-muted: #d1d5db;
    --shadow-gold: 0 10px 25px -5px rgba(212, 175, 55, 0.25);
}

/* ==========================================================================
   DAY MODE (LIGHT THEME) HIGH-CONTRAST OVERRIDES
   Ensures all text, cards, badges, links, lists, modals & footer are crisp
   ========================================================================== */
html:not(.dark) {
    --color-brand-dark: #f4f7f5;
    --color-brand-deep: #ffffff;
    --color-brand-card: #ffffff;
    --color-text-main: #111827;
    --color-text-muted: #374151;
}

html:not(.dark) body {
    background-color: #f4f7f5;
    color: #111827;
}

/* 1. Top Promo Banner: Keep dark luxury emerald bar with bright readable text */
html:not(.dark) #promo-banner {
    background: linear-gradient(to right, #062620, #0b352e, #062620) !important;
    color: #f9fafb !important;
}

html:not(.dark) #promo-banner span,
html:not(.dark) #promo-banner div {
    color: #f9fafb !important;
}

html:not(.dark) #promo-banner .text-\[\#f3e5ab\] {
    color: #f3e5ab !important;
}

html:not(.dark) #promo-banner #countdown-timer,
html:not(.dark) #promo-banner #countdown-timer span {
    color: #d4af37 !important;
}

/* 2. Navigation Bar & Dropdowns */
html:not(.dark) header#navbar {
    background-color: rgba(255, 255, 255, 0.97) !important;
    border-bottom: 1px solid rgba(2, 59, 49, 0.15) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

html:not(.dark) #navbar .font-serif {
    color: #023b31 !important;
}

html:not(.dark) #navbar span.text-\[\#d4af37\] {
    color: #8a6508 !important;
}

html:not(.dark) #navbar nav a,
html:not(.dark) #navbar nav button {
    color: #111827 !important;
    font-weight: 600;
}

html:not(.dark) #navbar nav a:hover,
html:not(.dark) #navbar nav button:hover {
    color: #8a6508 !important;
}

/* Desktop About Dropdown in Day Mode */
html:not(.dark) #navbar nav .group > div {
    background-color: #ffffff !important;
    border: 1px solid rgba(2, 59, 49, 0.2) !important;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12) !important;
}

html:not(.dark) #navbar nav .group > div a {
    color: #1f2937 !important;
}

html:not(.dark) #navbar nav .group > div a:hover {
    background-color: #023b31 !important;
    color: #f3e5ab !important;
}

/* Theme button & Mobile menu button in Navbar */
html:not(.dark) #navbar button[onclick="toggleTheme()"] {
    background-color: #023b31 !important;
    color: #f3e5ab !important;
    border-color: #023b31 !important;
}

html:not(.dark) #navbar button[onclick="toggleMobileMenu()"] {
    color: #023b31 !important;
}

/* Mobile Menu in Day Mode */
html:not(.dark) #mobile-menu {
    background-color: #ffffff !important;
    border-bottom: 1px solid rgba(2, 59, 49, 0.15) !important;
    color: #111827 !important;
}

html:not(.dark) #mobile-menu a {
    color: #111827 !important;
}

html:not(.dark) #mobile-menu a:hover {
    color: #8a6508 !important;
}

html:not(.dark) #mobile-menu span.text-\[\#d4af37\] {
    color: #8a6508 !important;
}

/* 3. Hero Section: Keep crisp light text over the dark hero background photos */
html:not(.dark) #hero h1 {
    color: #ffffff !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

html:not(.dark) #hero p {
    color: #f3f4f6 !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

html:not(.dark) #hero .text-\[\#f3e5ab\] {
    color: #f3e5ab !important;
}

html:not(.dark) #hero a[href="#services"] {
    background-color: rgba(6, 38, 32, 0.88) !important;
    color: #ffffff !important;
}

/* 4. Section Backgrounds & General Typography in Day Mode */
html:not(.dark) #services,
html:not(.dark) #csr {
    background-color: #eaf0ed !important;
    border-color: rgba(2, 59, 49, 0.12) !important;
}

html:not(.dark) #properties,
html:not(.dark) #contact {
    background-color: #f4f7f5 !important;
}

html:not(.dark) footer {
    background-color: #e2ebe6 !important;
    border-color: rgba(2, 59, 49, 0.15) !important;
}

/* Headings across all content sections */
html:not(.dark) #services h2,
html:not(.dark) #services h3,
html:not(.dark) #properties h2,
html:not(.dark) #properties h3,
html:not(.dark) #csr h2,
html:not(.dark) #contact h2,
html:not(.dark) #contact h3,
html:not(.dark) footer h4,
html:not(.dark) footer .font-serif {
    color: #023b31 !important;
}

/* Section Subtitle Badges (Gold -> Rich Dark Bronze-Gold for high contrast on light backgrounds) */
html:not(.dark) #services span.text-\[\#d4af37\],
html:not(.dark) #properties span.text-\[\#d4af37\],
html:not(.dark) #csr span.text-\[\#d4af37\],
html:not(.dark) #contact span.text-\[\#d4af37\],
html:not(.dark) #contact label.text-\[\#d4af37\] {
    color: #856204 !important;
}

/* Paragraphs & muted text in content sections */
html:not(.dark) #services p,
html:not(.dark) #properties p,
html:not(.dark) #csr p,
html:not(.dark) #contact p {
    color: #374151 !important;
}

html:not(.dark) #csr p strong {
    color: #023b31 !important;
}

/* 5. Management Services Cards */
html:not(.dark) #services .bg-\[\#0b352e\] {
    background-color: #ffffff !important;
    border: 1px solid rgba(2, 59, 49, 0.18) !important;
    box-shadow: 0 10px 25px rgba(2, 59, 49, 0.06) !important;
}

/* Fix service checklist items (were pale #f3e5ab on white background!) */
html:not(.dark) #services ul,
html:not(.dark) #services ul li {
    color: #1f2937 !important;
    font-weight: 500;
}

html:not(.dark) #services ul li i {
    color: #023b31 !important;
}

html:not(.dark) #services a.text-\[\#d4af37\] {
    color: #023b31 !important;
    font-weight: 700;
}

html:not(.dark) #services a.text-\[\#d4af37\]:hover {
    color: #856204 !important;
}

/* 6. Properties Filter Buttons & Cards */
html:not(.dark) .property-filter-btn {
    background-color: #ffffff !important;
    color: #1f2937 !important;
    border: 1px solid rgba(2, 59, 49, 0.25) !important;
    font-weight: 600;
}

html:not(.dark) .property-filter-btn:hover {
    border-color: #023b31 !important;
    color: #023b31 !important;
}

html:not(.dark) .property-filter-btn.bg-\[\#d4af37\] {
    background-color: #023b31 !important;
    color: #f3e5ab !important;
    border-color: #023b31 !important;
}

html:not(.dark) .property-card {
    background-color: #ffffff !important;
    border: 1px solid rgba(2, 59, 49, 0.18) !important;
    box-shadow: 0 10px 25px rgba(2, 59, 49, 0.06) !important;
}

html:not(.dark) .property-card:hover h3 {
    color: #856204 !important;
}

/* Property metadata icons & features */
html:not(.dark) .property-card .text-gray-400,
html:not(.dark) .property-card .text-gray-400 span {
    color: #4b5563 !important;
    font-weight: 500;
}

html:not(.dark) .property-card .text-gray-400 i {
    color: #023b31 !important;
}

/* Fix Price Label ("From $40 / night") which was pale #f3e5ab on white card */
html:not(.dark) .property-card .border-t > span.text-\[\#f3e5ab\] {
    color: #023b31 !important;
    font-weight: 700;
    font-size: 0.8125rem;
}

/* Keep badges overlaid on property photos bright & readable */
html:not(.dark) .property-card .relative.h-64 .text-\[\#f3e5ab\] {
    color: #f3e5ab !important;
}

html:not(.dark) .property-card .relative.h-64 .text-white {
    color: #ffffff !important;
}

/* Property Card "Website" button */
html:not(.dark) .property-card a.bg-\[\#023b31\] {
    background-color: #023b31 !important;
    color: #ffffff !important;
    border-color: #023b31 !important;
}

html:not(.dark) .property-card a.bg-\[\#023b31\]:hover {
    background-color: #0b352e !important;
    color: #f3e5ab !important;
}

/* 7. CSR Section Button & Icons */
html:not(.dark) #csr .bg-\[\#d4af37\]\/20 {
    background-color: #023b31 !important;
    color: #f3e5ab !important;
}

html:not(.dark) #csr a.bg-\[\#023b31\] {
    background-color: #023b31 !important;
    color: #ffffff !important;
    border-color: #023b31 !important;
}

html:not(.dark) #csr a.bg-\[\#023b31\]:hover {
    background-color: #d4af37 !important;
    color: #000000 !important;
}

/* 8. Contact Section & Form Inputs */
html:not(.dark) #contact .bg-\[\#062620\] {
    background-color: #ffffff !important;
    border: 1px solid rgba(2, 59, 49, 0.18) !important;
    box-shadow: 0 10px 25px rgba(2, 59, 49, 0.06) !important;
}

html:not(.dark) #contact a.text-gray-200,
html:not(.dark) #contact p.text-gray-200 {
    color: #111827 !important;
    font-weight: 500;
}

html:not(.dark) #contact a.text-gray-200:hover {
    color: #856204 !important;
}

html:not(.dark) input,
html:not(.dark) select,
html:not(.dark) textarea {
    background-color: #f8faf9 !important;
    color: #111827 !important;
    border: 1px solid rgba(2, 59, 49, 0.3) !important;
}

html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
    color: #6b7280 !important;
}

/* 9. Footer Readability in Day Mode */
html:not(.dark) footer p,
html:not(.dark) footer ul,
html:not(.dark) footer li,
html:not(.dark) footer a {
    color: #374151 !important;
}

html:not(.dark) footer a:hover {
    color: #023b31 !important;
    font-weight: 600;
}

html:not(.dark) footer .border-t p {
    color: #4b5563 !important;
}

html:not(.dark) footer .border-t p.text-\[\#d4af37\] {
    color: #023b31 !important;
    font-weight: 600;
}

html:not(.dark) footer a.w-9.h-9 {
    background-color: #023b31 !important;
    color: #f3e5ab !important;
}

html:not(.dark) footer a.w-9.h-9:hover {
    background-color: #d4af37 !important;
    color: #000000 !important;
}

/* 10. Modals & Live Toast Notifications in Day Mode */
html:not(.dark) #property-modal > div,
html:not(.dark) #about-modal > div,
html:not(.dark) #legal-modal > div,
html:not(.dark) #message-box > div {
    background-color: #ffffff !important;
    border: 2px solid #023b31 !important;
    color: #111827 !important;
}

html:not(.dark) #property-modal h3,
html:not(.dark) #about-modal h3,
html:not(.dark) #about-modal h4,
html:not(.dark) #legal-modal h3,
html:not(.dark) #message-box h3 {
    color: #023b31 !important;
}

html:not(.dark) #property-modal p,
html:not(.dark) #about-modal p,
html:not(.dark) #about-modal div.text-gray-300,
html:not(.dark) #legal-modal p,
html:not(.dark) #message-box div.text-gray-300,
html:not(.dark) #message-box p {
    color: #1f2937 !important;
}

html:not(.dark) #about-modal strong,
html:not(.dark) #message-box strong {
    color: #023b31 !important;
}

html:not(.dark) #about-modal .text-\[\#d4af37\],
html:not(.dark) #about-modal .text-\[\#f3e5ab\],
html:not(.dark) #message-box .text-\[\#f3e5ab\] {
    color: #856204 !important;
    font-weight: 600;
}

html:not(.dark) #property-modal div.p-4.rounded-xl {
    background-color: #eef3f0 !important;
    border-color: rgba(2, 59, 49, 0.2) !important;
}

html:not(.dark) #property-modal div.p-4.rounded-xl .text-\[\#d4af37\] {
    color: #023b31 !important;
}

html:not(.dark) #property-modal .relative.h-60 > div {
    background-color: #023b31 !important;
    color: #f3e5ab !important;
}

html:not(.dark) #property-modal a[href="#contact"] {
    background-color: #023b31 !important;
    color: #ffffff !important;
}

html:not(.dark) #property-modal button[onclick="closePropertyModal()"],
html:not(.dark) #about-modal button[onclick="closeAboutModal()"],
html:not(.dark) #legal-modal button[onclick="closeLegalModal()"] {
    color: #374151 !important;
}

/* Toast Alert in Day Mode */
html:not(.dark) #toast-container > div {
    background-color: #ffffff !important;
    border: 2px solid #023b31 !important;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) !important;
}

html:not(.dark) #toast-container span.text-\[\#d4af37\] {
    color: #023b31 !important;
    font-weight: 700;
}

html:not(.dark) #toast-container #toast-text {
    color: #111827 !important;
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   Animations & Keyframes
   -------------------------------------------------------------------------- */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulseGold {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.4);
    }
    50% {
        box-shadow: 0 0 0 12px rgba(212, 175, 55, 0);
    }
}

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

.animate-fade-in {
    animation: fadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.pulse-gold {
    animation: pulseGold 2s infinite;
}

/* --------------------------------------------------------------------------
   Typography & Gradients
   -------------------------------------------------------------------------- */
.gold-gradient-text {
    background: linear-gradient(135deg, #f3e5ab 0%, #d4af37 50%, #aa820a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.gold-gradient-bg {
    background: linear-gradient(135deg, #d4af37 0%, #aa820a 100%);
}

.gold-gradient-bg:hover {
    background: linear-gradient(135deg, #f3e5ab 0%, #d4af37 100%);
}

.gold-border {
    border-color: rgba(212, 175, 55, 0.3);
}

.gold-border:hover {
    border-color: rgba(212, 175, 55, 0.8);
}

/* --------------------------------------------------------------------------
   Custom Scrollbar
   -------------------------------------------------------------------------- */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #023b31;
}

html:not(.dark) ::-webkit-scrollbar-track {
    background: #e2ebe6;
}

::-webkit-scrollbar-thumb {
    background: #d4af37;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #aa820a;
}

/* --------------------------------------------------------------------------
   Cards, Transitions & Hover Effects
   -------------------------------------------------------------------------- */
.property-card {
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.property-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.5), 0 0 15px rgba(212, 175, 55, 0.2);
}

html:not(.dark) .property-card:hover {
    box-shadow: 0 20px 35px -10px rgba(2, 59, 49, 0.18), 0 0 15px rgba(2, 59, 49, 0.08) !important;
}

.hero-slide {
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.hero-dot {
    transition: all 0.3s ease;
}

/* --------------------------------------------------------------------------
   Forms & Feedback
   -------------------------------------------------------------------------- */
input:focus, select:focus, textarea:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.4);
}

.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.8;
}

.btn-loading .spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    border-top-color: #000;
    animation: spin 0.8s linear infinite;
    margin-right: 0.5rem;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Toast Container */
#toast-container {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
}

/* Fallback Logo Monogram */
.logo-badge {
    background: linear-gradient(135deg, #d4af37 0%, #aa820a 100%);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

/* --------------------------------------------------------------------------
   Back to Top Floating Button
   -------------------------------------------------------------------------- */
#backToTop {
    position: fixed;
    right: 50px;
    bottom: 30px;
    width: 64px;
    height: 64px;
    border: none;
    background: #7F9360;
    color: white;
    font-size: 24px;
    cursor: pointer;
    border-radius: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 9999;
}

#backToTop.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#backToTop:hover {
    background: #687A4D;
}