/* Global CSS - Putthari Real Estate */

:root {
    /* Brand Colors (Extracted from Logo - Inverted) */
    --bg-color: #E4D9BB;
    /* Pale Gold/Beige (Site Background) */
    --brand-brown: #684424;
    /* Logo Background Color */
    --brand-gold: #E4D9BB;
    /* Logo Text Color */
    --accent-color: #684424;
    /* Deep Brown (Accents) */
    --highlight-color: #684424;
    /* Deep Brown (Highlight) */
    --text-color: #684424;
    /* Deep Brown (Primary Text) */
    --text-muted: rgba(104, 68, 36, 0.9);
    /* Darkened for better contrast */
    --text-subtle: rgba(104, 68, 36, 0.7);
    /* Darkened for better contrast */

    /* Fonts */
    --font-primary: 'Earth Tone Regular', 'Bodoni MT', 'Didot', 'Georgia', serif;
    --font-heading: 'Earth Tone Regular', 'Bodoni MT', 'Didot', 'Georgia', serif;
    /* Premium Serif Stack */

    /* Z-Index Layers */
    --z-header: 1000;
    --z-overlay: 900;
    --z-modal: 1100;
    --z-default: 1;
    --z-negative: -1;

    /* Spacing */
    --section-padding: 80px 20px;

    /* Rough Edge Mask (Torn Paper Style - Four Sided) */
    --rough-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M0,15 L50,5 L100,12 L150,8 L200,15 L250,5 L300,10 L350,15 L400,8 L450,12 L500,5 L550,15 L600,10 L650,5 L700,12 L750,8 L800,15 L850,5 L900,10 L950,15 L1000,15 L990,50 L995,100 L985,150 L995,200 L990,250 L985,300 L995,350 L990,400 L985,450 L995,500 L990,550 L985,600 L995,650 L990,700 L985,750 L995,800 L990,850 L985,900 L995,950 L990,1000 L950,985 L900,995 L850,990 L800,985 L750,995 L700,990 L650,985 L600,995 L550,990 L500,985 L450,995 L400,990 L350,985 L300,995 L250,990 L200,985 L150,995 L100,990 L50,985 L0,985 L10,950 L5,900 L15,850 L10,800 L5,750 L15,700 L10,650 L5,600 L15,550 L10,500 L5,450 L15,400 L10,350 L5,300 L15,250 L10,200 L5,150 L15,100 L10,50 Z' fill='black'/%3E%3C/svg%3E");
}

.rough-edge-mask {
    mask-image: var(--rough-mask);
    -webkit-mask-image: var(--rough-mask);
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
}

.organic-textured-bg {
    background-color: var(--bg-color);
    background-image:
        radial-gradient(circle at 5% 5%, rgba(184, 134, 11, 0.02) 0%, transparent 50%),
        radial-gradient(circle at 95% 95%, rgba(184, 134, 11, 0.02) 0%, transparent 50%);
}

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    width: 100%;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--font-primary);
    line-height: 1.6;
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
    /* Prevent horizontal scroll */
}

main {
    width: 100%;
    margin: 0;
    padding: 0;
    display: block;
}

/* Typography */
h1 {
    font-size: 3.2rem;
}

h2 {
    font-size: 2.5rem;
}

h3 {
    font-size: 1.8rem;
}

p {
    font-size: 1.1rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: normal;
    color: var(--accent-color);
    margin-bottom: 1rem;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

ul {
    list-style: none;
}

/* Base Classes */
.container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}

.section-wrapper {
    width: 100%;
    position: relative;
    /* Removed z-index to allow fixed children to propagate to root stacking context */
}

/* Scrollbar Customization */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: var(--bg-color);
}

::-webkit-scrollbar-thumb {
    background: var(--accent-color);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--highlight-color);
}

/* Font Face */
@font-face {
    font-family: 'Earth Tone Regular';
    src: url('../fonts/EarthTone-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Global Loader */
#global-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bg-color);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

#global-loader.hidden {
    opacity: 0;
    visibility: hidden;
}

.loader-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.loader-logo {
    width: 120px;
    height: auto;
    margin-bottom: 20px;
    opacity: 0.8;
}

.coffee-beans {
    display: flex;
    gap: 15px;
}

.coffee-bean {
    width: auto;
    height: 35px;
    /* slightly smaller bounce icon */
    animation: bean-bounce 1.5s infinite ease-in-out;
}

.coffee-bean:nth-child(2) {
    animation-delay: 0.2s;
}

.coffee-bean:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes bean-bounce {

    0%,
    80%,
    100% {
        transform: scale(0.8) translateY(0);
        opacity: 0.5;
    }

    40% {
        transform: scale(1.1) translateY(-10px);
        opacity: 1;
    }
}

/* Floating Action Buttons */
/* Primary Button - Refined Outline Style */
.btn-cta {
    display: inline-block;
    padding: 12px 32px;
    /* Increased padding */
    background: transparent;
    color: var(--brand-brown);
    font-family: var(--font-primary);
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border: 1px solid var(--brand-brown);
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.btn-cta:hover {
    background: var(--brand-brown);
    color: var(--bg-color);
    box-shadow: 0 4px 12px rgba(104, 68, 36, 0.2);
}

/* Header specific override for btn-cta */
#main-header .btn-cta {
    background: var(--brand-brown);
    color: var(--brand-gold);
    border-color: var(--brand-brown);
    padding: 8px;
}

#main-header .btn-cta:hover {
    background: transparent;
    color: #ffffff;
    border-color: #ffffff;
}

#main-header.scrolled .btn-cta {
    background: var(--brand-gold);
    color: var(--brand-brown) !important;
    /* Text is brown when scrolled */
    border-color: var(--brand-gold);
}

/* Enquire Now Modal */
.enquire-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(4px);
}

.enquire-modal-overlay.open {
    opacity: 1;
    visibility: visible;
}

.enquire-modal {
    background: var(--bg-color);
    width: 90%;
    max-width: 500px;
    padding: 40px;
    border-radius: 8px;
    position: relative;
    transform: translateY(30px);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
}

.enquire-modal-overlay.open .enquire-modal {
    transform: translateY(0);
}

.modal-close-btn {
    position: absolute;
    top: 15px;
    right: 20px;
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--brand-brown);
    cursor: pointer;
    line-height: 1;
    font-weight: 300;
}

.enquire-modal h3 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 5px;
    font-family: var(--font-heading);
}

.enquire-modal p {
    text-align: center;
    font-size: 0.9rem;
    opacity: 0.8;
    margin-bottom: 25px;
}

.enquire-modal .form-group {
    margin-bottom: 20px;
}

.enquire-modal input,
.enquire-modal select,
.enquire-modal textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid rgba(104, 68, 36, 0.3);
    background: rgba(255, 255, 255, 0.5);
    border-radius: 4px;
    font-family: var(--font-primary);
    font-size: 1rem;
    color: var(--brand-brown);
}

.enquire-modal input:focus {
    outline: none;
    border-color: var(--brand-brown);
    background: #fff;
}

.enquire-modal .btn-submit {
    width: 100%;
    padding: 14px;
    background: var(--brand-brown);
    color: var(--bg-color);
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: background 0.3s ease;
    margin-top: 10px;
}

.enquire-modal .btn-submit:hover {
    background: #4a2e16;
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}

.modal-overlay.open {
    display: flex;
}

.confirmation-modal {
    background: #fff;
    padding: 40px;
    border-radius: 15px;
    max-width: 450px;
    width: 90%;
    text-align: center;
    position: relative;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    animation: modalPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes modalPop {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.confirmation-modal .success-icon {
    font-size: 60px;
    color: var(--brand-gold);
    margin-bottom: 20px;
}

.confirmation-modal h3 {
    font-family: var(--font-heading);
    color: var(--brand-brown);
    font-size: 2rem;
    margin-bottom: 15px;
}

.confirmation-modal p {
    color: #666;
    margin-bottom: 30px;
    line-height: 1.6;
}

.confirmation-modal .btn-primary {
    width: 100%;
    padding: 15px;
    font-size: 1.1rem;
}

.floating-actions {
    position: fixed;
    bottom: 30px;
    right: 30px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    z-index: 1000;
}

.fab-item {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
}

.fab-item:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
    color: #fff;
}

.fab-item.whatsapp {
    background-color: #25D366;
}

.fab-item.call {
    background-color: var(--brand-brown);
}

.fab-item.enquire-fab {
    background-color: var(--brand-brown);
    display: flex;
    /* Visible globally */
}

.floating-actions-left {
    display: none; /* We are moving the element into the right container */
}

@media (min-width: 1025px) {
    .fab-item.enquire-fab {
        position: fixed;
        bottom: 30px;
        left: 30px;
    }
}

@media (max-width: 1024px) {
    .floating-actions {
        bottom: 45px;
        right: 20px;
    }

    .floating-actions-left {
        display: none;
    }

    .fab-item {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }
}

/* Floating Brochure Button (Vertical Left Side) */
.floating-brochure-btn {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 1000;
    background-color: var(--brand-brown);
    color: #fff;
    padding: 20px 18px;
    border-radius: 0 8px 8px 0;
    text-decoration: none;
    font-weight: bold;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, padding 0.3s ease, font-size 0.3s ease, letter-spacing 0.3s ease;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    letter-spacing: 2px;
    font-size: 0.9rem;
    white-space: nowrap;
}

.floating-brochure-btn.scrolled {
    padding: 15px 10px;
    font-size: 0.75rem;
    letter-spacing: 1px;
}

.floating-brochure-btn:hover {
    transform: translateY(-50%) translateX(5px);
    box-shadow: 3px 0 15px rgba(0, 0, 0, 0.4);
    background-color: var(--brand-gold);
    color: var(--brand-brown);
}

@media (max-width: 768px) {
    .floating-brochure-btn {
        padding: 6px 4px;
        font-size: 0.55rem;
        letter-spacing: 0.3px;
        border-radius: 0 5px 5px 0;
    }

    .floating-brochure-btn.scrolled {
        padding: 4px 3px;
        font-size: 0.45rem;
        letter-spacing: 0.1px;
    }
}

/* Form Feedback Styles */
.form-feedback {
    margin-top: 15px;
    padding: 12px;
    border-radius: 4px;
    text-align: center;
    font-weight: bold;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.form-feedback.success {
    background-color: rgba(76, 217, 100, 0.15);
    color: #28a745;
    border: 1px solid rgba(76, 217, 100, 0.3);
}

.form-feedback.error {
    background-color: rgba(255, 59, 48, 0.15);
    color: #dc3545;
    border: 1px solid rgba(255, 59, 48, 0.3);
}

.form-feedback.info {
    background-color: rgba(0, 122, 255, 0.1);
    color: #007aff;
    border: 1px solid rgba(0, 122, 255, 0.2);
}

.hidden {
    display: none !important;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}