/* 
 * Custom CSS for home-new
 * Replicates the design of the reference page
 */

 :root {
    --color-cream: #FAF8F5;
    --color-forest: #3F5E3C;
    --color-forest-hover: #354f32;
    --color-charcoal: #141C10;
    --color-sand: #CEC5B4;
    --color-gold: #D4AF37;
    --font-serif: 'Playfair Display', serif;
    --font-sans: 'Plus Jakarta Sans', sans-serif;
    --font-mono: 'Geist Mono', monospace;
}

body {
    font-family: var(--font-sans);
    background-color: var(--color-cream);
    color: var(--color-charcoal);
}

/* Utilities */
.bg-cream { background-color: var(--color-cream); }
.bg-cream-95 { background-color: rgba(250, 248, 245, 0.95); }
.bg-forest { background-color: var(--color-forest); }
.bg-forest-40 { background-color: rgba(63, 94, 60, 0.4); }
.bg-forest-60 { background-color: rgba(63, 94, 60, 0.6); }
.bg-charcoal-55 { background-color: rgba(20, 28, 16, 0.55); backdrop-filter: blur(12px); }
.bg-white-10 { background-color: rgba(255, 255, 255, 0.1); }
.bg-white-40 { background-color: rgba(255, 255, 255, 0.4); }
.text-forest { color: var(--color-forest) !important; }
.text-forest-70 { color: rgba(63, 94, 60, 0.7); }
.text-forest-80 { color: rgba(63, 94, 60, 0.8); }
.text-charcoal { color: var(--color-charcoal); }
.text-charcoal-50 { color: rgba(20, 28, 16, 0.5); }
.text-charcoal-65 { color: rgba(20, 28, 16, 0.65); }
.text-charcoal-70 { color: rgba(20, 28, 16, 0.7); }
.text-cream { color: var(--color-cream); }
.text-cream-50 { color: rgba(250, 248, 245, 0.5); }
.text-cream-70 { color: rgba(250, 248, 245, 0.7); }
.text-cream-95 { color: rgba(250, 248, 245, 0.95); }
.text-white-75 { color: rgba(255, 255, 255, 0.75); }
.text-white-80 { color: rgba(255, 255, 255, 0.8); }
.text-white-85 { color: rgba(255, 255, 255, 0.85); }
.text-white-90 { color: rgba(255, 255, 255, 0.9); }
.text-gold { color: var(--color-gold); }
.border-sand-60 { border-color: rgba(206, 197, 180, 0.6) !important; }
.border-sand-70 { border-color: rgba(206, 197, 180, 0.7) !important; }
.border-cream-20 { border-color: rgba(250, 248, 245, 0.2) !important; }
.border-white-20 { border-color: rgba(255, 255, 255, 0.2) !important; }

.font-serif { font-family: var(--font-serif); }
.tracking-tight { letter-spacing: -0.025em; }
.tracking-wide { letter-spacing: 0.025em; }
.lh-relaxed { line-height: 1.625; }
.fs-sm { font-size: 0.875rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-xl { max-width: 36rem; }

/* Header */
.header-new {
    transition: background-color 0.5s ease;
}
.header-new.scrolled {
    background-color: var(--color-forest) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}
.hover-bg-white-10:hover {
    background-color: rgba(255, 255, 255, 0.1);
}
.btn-book-now {
    color: var(--color-forest);
}
.btn-book-now::before {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(63,94,60,0.1), transparent);
    transition: transform 0.7s ease;
}
.btn-book-now:hover::before {
    transform: translateX(200%);
}

/* Hero Section */
.hero-vignette {
    background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.1) 40%, rgba(0,0,0,0.6) 100%);
}
.hero-radial-gradient {
    background: radial-gradient(120% 80% at 50% 110%, rgba(63,94,60,0.55) 0%, transparent 55%);
}
.hero-anim-1, .hero-anim-2, .hero-anim-3, .hero-anim-4, .hero-anim-scroll {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeUp 0.8s ease forwards;
}
.hero-anim-1 { animation-delay: 0.1s; }
.hero-anim-2 { animation-delay: 0.3s; }
.hero-anim-3 { animation-delay: 0.5s; }
.hero-anim-4 { animation-delay: 0.7s; }
.hero-anim-scroll { animation-delay: 1.5s; }

@keyframes fadeUp {
    to { opacity: 1; transform: translateY(0); }
}

.eyebrow {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

/* Glass Panel Form */
.glass-panel {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}
.search-field {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: background 0.3s;
}
.search-field:hover {
    background: rgba(255, 255, 255, 0.12);
}
.search-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: rgba(255, 255, 255, 0.65);
    font-weight: 600;
}
.search-input, .search-select {
    background: transparent;
    border: none;
    color: white;
    font-size: 0.875rem;
    font-weight: 500;
    outline: none;
}
.search-input::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.6;
    cursor: pointer;
}
.search-select {
    appearance: none;
    cursor: pointer;
}
.search-select option {
    color: var(--color-charcoal);
    background: var(--color-cream);
}
.btn-search {
    background-color: var(--color-forest);
    color: var(--color-cream);
    border: none;
    transition: all 0.3s;
}
.btn-search:hover {
    background-color: var(--color-forest-hover);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* Scroll Indicator */
.scroll-indicator {
    opacity: 0.7;
}
.scroll-text {
    font-size: 0.7rem;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color: white;
}
.scroll-line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.7), transparent);
    position: relative;
    overflow: hidden;
}
.scroll-dot {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 16px;
    background: var(--color-cream);
    animation: scrollDot 2s infinite ease-in-out;
}
@keyframes scrollDot {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(40px); }
}

/* Property Cards */
.property-card {
    transition: all 0.5s ease;
}
.property-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 45px -25px rgba(20,28,16,0.4);
    border-color: rgba(63,94,60,0.3) !important;
}
.property-image-wrapper {
    aspect-ratio: 4/3;
}
.property-img {
    transition: transform 0.9s cubic-bezier(0.16,1,0.3,1);
}
.property-card:hover .property-img {
    transform: scale(1.07);
}
.property-gradient-overlay {
    background: linear-gradient(to top, rgba(20,28,16,0.35), transparent);
}
.badge-category {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}
.badge-rating {
    font-size: 0.65rem;
    font-weight: 600;
    backdrop-filter: blur(12px);
}
.dot-indicator {
    width: 6px;
    height: 6px;
    display: inline-block;
}
.price-from {
    font-size: 0.6rem;
    letter-spacing: 0.18em;
}
.price-value {
    font-size: 1.125rem;
}
.price-unit {
    font-size: 0.65rem;
}
.property-location {
    font-size: 0.65rem;
    letter-spacing: 0.05em;
}
.property-title {
    font-size: 1.125rem;
}
.property-amenities {
    font-size: 0.7rem;
}
.separator {
    width: 1px;
    height: 12px;
}
.property-footer-text {
    font-size: 0.65rem;
}
.property-book-link {
    font-size: 0.75rem;
}
.group-hover-move {
    transition: transform 0.3s ease;
}
.property-card:hover .group-hover-move {
    transform: translate(2px, -2px);
}
.btn-book-hero:hover .group-hover-translate-x {
    transform: translateX(4px);
}
.hover-text-charcoal:hover {
    color: var(--color-charcoal) !important;
}
.hover-text-white:hover {
    color: white !important;
}
.hover-text-cream:hover {
    color: var(--color-cream) !important;
}
.transition-colors {
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

/* Animations */
.reveal-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}
.reveal-up.active {
    opacity: 1;
    transform: translateY(0);
}
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }

/* Section Padding */
.section-pad {
    padding-top: 5rem;
    padding-bottom: 5rem;
}
@media (min-width: 992px) {
    .section-pad {
        padding-top: 7rem;
        padding-bottom: 7rem;
    }
}

/* Section 3 & 4 Specific */
.section-3 {
    background: linear-gradient(to bottom, var(--color-cream), var(--color-cream), rgba(206,197,180,0.4));
}
.orb-top-right {
    top: -8rem; right: -8rem; width: 24rem; height: 24rem;
    background: radial-gradient(circle, rgba(176,136,66,0.18), transparent 70%);
    filter: blur(24px);
}
.orb-bottom-left {
    bottom: -10rem; left: -8rem; width: 28rem; height: 28rem;
    background: radial-gradient(circle, rgba(63,94,60,0.18), transparent 70%);
    filter: blur(24px);
}
.stats-grid {
    background-color: rgba(206,197,180,0.6);
}
.feature-card {
    transition: all 0.5s ease;
}
.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 60px -30px rgba(20,28,16,0.35);
    border-color: rgba(63,94,60,0.3) !important;
}
.feature-gradient {
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(63,94,60,0.4), transparent);
}
.feature-card:hover .feature-gradient {
    opacity: 1;
}
.feature-card:hover .feature-icon {
    background-color: var(--color-forest);
    color: var(--color-cream);
}
.bg-forest-8 { background-color: rgba(63,94,60,0.08); }

/* Events Section */
.event-bg-gradient {
    background: radial-gradient(60% 50% at 80% 0%, rgba(176,136,66,0.20), transparent 70%), 
                radial-gradient(60% 50% at 0% 100%, rgba(63,94,60,0.25), transparent 70%);
}
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.snap-x { scroll-snap-type: x mandatory; }
.snap-start { scroll-snap-align: start; }
.hover-border-cream-25:hover { border-color: rgba(250,248,245,0.25) !important; }
.package-img-wrapper { aspect-ratio: 4/5; }
.package-card:hover .package-img { transform: scale(1.08); }
.package-gradient-1 { background: linear-gradient(to top, rgba(63,94,60,0.85), rgba(63,94,60,0.4), transparent); opacity: 0.9; }
.package-gradient-1-gold { background: linear-gradient(to top, rgba(138,106,50,0.85), rgba(138,106,50,0.4), transparent); opacity: 0.9; }
.package-gradient-1-moss { background: linear-gradient(to top, rgba(85,107,47,0.85), rgba(85,107,47,0.4), transparent); opacity: 0.9; }
.package-gradient-1-clay { background: linear-gradient(to top, rgba(164,133,96,0.85), rgba(164,133,96,0.4), transparent); opacity: 0.9; }
.package-gradient-2 { background: linear-gradient(to top, rgba(20,28,16,0.95), rgba(20,28,16,0.3), transparent); }
.badge-package { font-size: 0.65rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.bg-gold { background-color: var(--color-gold); }
.bg-moss { background-color: #556b2f; }
.bg-clay { background-color: #a48560; }
.text-moss { color: #556b2f !important; }
.text-clay { color: #a48560 !important; }
.custom-event-banner {
    background: linear-gradient(to right, rgba(63,94,60,0.3), rgba(63,94,60,0.15), rgba(212,175,55,0.2));
}
.btn-gold {
    background-color: var(--color-gold);
    border: none;
}
.btn-gold:hover {
    background-color: rgba(212,175,55,0.9);
    transform: translateY(-2px);
}
.shadow-gold {
    box-shadow: 0 18px 40px -16px rgba(176,136,66,0.55);
}

/* Section 5 Specific */
.bg-gradient-sand-transparent {
    background: linear-gradient(to right, transparent, var(--color-sand), transparent);
}
.hover-translate-y:hover {
    transform: translateY(-4px);
}
.shadow-forest {
    box-shadow: 0 18px 40px -16px rgba(63,94,60,0.55);
}
.hover-shadow-lg:hover {
    box-shadow: 0 30px 60px -30px rgba(20,28,16,0.35);
}
.group-hover-bg-forest:hover {
    background-color: var(--color-forest) !important;
    color: var(--color-cream) !important;
}
.group:hover .group-hover-text-forest-15 {
    color: rgba(63,94,60,0.15) !important;
}

/* Section 6 Specific */
.section-6 {
    background: linear-gradient(to bottom, rgba(206,197,180,0.4), var(--color-cream), var(--color-cream));
}
.orb-center {
    width: 40rem; height: 40rem;
    background: radial-gradient(circle, rgba(63,94,60,0.16), transparent 70%);
    filter: blur(24px);
}
.shadow-review {
    box-shadow: 0 30px 80px -40px rgba(20,28,16,0.4);
}
.quote-icon {
    top: 1.5rem; right: 2rem;
}
.review-dot {
    cursor: pointer;
}
.review-dot:hover {
    background-color: rgba(63,94,60,0.5) !important;
}
.review-dot.active {
    background-color: var(--color-forest) !important;
}

/* Section 7, 8, 9 Specific */
.btn-instagram {
    background-color: #E1306C;
    border: none;
}
.btn-instagram:hover {
    background-color: #c12a5e;
    color: white;
}
.shadow-pink {
    box-shadow: 0 18px 40px -16px rgba(225,48,108,0.5);
}
.group-hover-translate-up-right {
    transition: transform 0.3s;
}
.group:hover .group-hover-translate-up-right {
    transform: translate(2px, -2px);
}
.image-zoom-slow {
    transition: transform 900ms cubic-bezier(0.16,1,0.3,1);
}
.group:hover .image-zoom-slow {
    transform: scale(1.1);
}
.bg-gradient-dark-bottom {
    background: linear-gradient(to top, rgba(20,28,16,0.7), transparent);
}
.group-hover-opacity-100 {
    transition: opacity 0.3s;
}
.group:hover .group-hover-opacity-100 {
    opacity: 1 !important;
}
.bg-charcoal-0 {
    background-color: rgba(20,28,16,0);
}
.group:hover .group-hover-bg-charcoal-35 {
    background-color: rgba(20,28,16,0.35) !important;
}
.css-columns {
    column-count: 1;
    column-gap: 1rem;
}
@media (min-width: 576px) {
    .css-columns { column-count: 2; }
}
@media (min-width: 992px) {
    .css-columns { column-count: 3; column-gap: 1.5rem; }
}
.column-fill-balance {
    column-fill: balance;
}
.bg-charcoal-65 {
    background-color: rgba(20,28,16,0.65);
}
.orb-cta {
    background: radial-gradient(80% 60% at 50% 100%, rgba(63,94,60,0.6), transparent 70%);
}
.bg-cream-40 {
    background-color: rgba(250,248,245,0.4);
}
.shadow-cta {
    box-shadow: 0 18px 40px -12px rgba(0,0,0,0.55);
}
.hover-shadow-cta:hover {
    box-shadow: 0 24px 50px -12px rgba(0,0,0,0.65);
}
.btn-glass {
    background-color: rgba(255,255,255,0.1);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(250,248,245,0.4);
}
.btn-glass:hover {
    background-color: rgba(255,255,255,0.2);
    border-color: rgba(250,248,245,0.6);
    color: var(--color-cream);
}

/* Weddings & Events Pixel Perfect Fixes */
.events-section {
    background-color: var(--color-charcoal);
    color: var(--color-cream);
}
.pkg-card {
    width: 280px;
    background-color: rgba(20, 28, 16, 0.4);
    cursor: pointer;
}
@media (min-width: 576px) {
    .pkg-card { width: 340px; }
}
@media (min-width: 992px) {
    .pkg-card { width: 380px; }
}
.pkg-img-wrapper { aspect-ratio: 4/5; }
.pkg-img {
    transition: transform 900ms cubic-bezier(0.16,1,0.3,1);
}
.pkg-card:hover .pkg-img { transform: scale(1.08); }
.pkg-card:hover { border-color: rgba(250,248,245,0.25) !important; }
.pkg-gradient-1 { background: linear-gradient(to top, rgba(63,94,60,0.85), rgba(63,94,60,0.4), transparent); opacity: 0.9; }
.pkg-gradient-1-gold { background: linear-gradient(to top, rgba(138,106,50,0.85), rgba(138,106,50,0.4), transparent); opacity: 0.9; }
.pkg-gradient-1-moss { background: linear-gradient(to top, rgba(85,107,47,0.85), rgba(85,107,47,0.4), transparent); opacity: 0.9; }
.pkg-gradient-1-clay { background: linear-gradient(to top, rgba(164,133,96,0.85), rgba(164,133,96,0.4), transparent); opacity: 0.9; }
.pkg-gradient-2 { background: linear-gradient(to top, rgba(20,28,16,0.95), rgba(20,28,16,0.3), transparent); }

.badge-package-num, .badge-package-guests {
    font-size: 0.65rem;
    font-weight: 600;
    backdrop-filter: blur(12px);
    background-color: rgba(20, 28, 16, 0.55);
    color: var(--color-cream);
    border: 1px solid rgba(250, 248, 245, 0.2);
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
}
.badge-package-num {
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.375rem 0.75rem;
    gap: 0.375rem;
}
.badge-package-guests {
    padding: 0.375rem 0.625rem;
    gap: 0.25rem;
}
.pkg-title {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 600;
}
@media (min-width: 992px) { .pkg-title { font-size: 1.875rem; } }

/* Review section precise fixes */
.review-slide {
    width: 100%;
}
.text-balance {
    text-wrap: balance;
}

/* Footer specific utilities */
.pt-20 { padding-top: 5rem !important; }
.pb-8 { padding-bottom: 2rem !important; }
.h-px { height: 1px !important; }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
.from-transparent { --tw-gradient-from: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(0, 0, 0, 0)); }
.via-gold-40 { --tw-gradient-stops: var(--tw-gradient-from), rgba(176, 136, 66, 0.4), var(--tw-gradient-to, rgba(176, 136, 66, 0)); }
.to-transparent { --tw-gradient-to: transparent; }
.footer-glow { top: -5rem; right: 25%; height: 18rem; width: 18rem; filter: blur(3rem); background: radial-gradient(circle, rgba(176,136,66,0.4), transparent 70%); }
.max-w-7xl { max-width: 80rem !important; }
.px-5 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
.gy-10 { --bs-gutter-y: 2.5rem; }
.max-h-16 { max-height: 4rem !important; }
.fs-sm { font-size: 0.875rem !important; }
.fs-xs { font-size: 0.75rem !important; }
.fs-lg { font-size: 1.125rem !important; }
.mt-7 { margin-top: 1.75rem !important; }
.bg-white-8 { background-color: rgba(255, 255, 255, 0.08) !important; }
.bg-white-5 { background-color: rgba(255, 255, 255, 0.05) !important; }
.border-cream-15 { border-color: rgba(239, 235, 229, 0.15) !important; }
.border-cream-10 { border-color: rgba(239, 235, 229, 0.1) !important; }
.pl-10 { padding-left: 2.5rem !important; }
.pr-4 { padding-right: 1rem !important; }
.py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
.placeholder-cream-45::placeholder { color: rgba(239, 235, 229, 0.45) !important; }
.focus-outline-none:focus { outline: none !important; box-shadow: none !important; }
.focus-border-gold-60:focus { border-color: rgba(176, 136, 66, 0.6) !important; }
.focus-bg-white-12:focus { background-color: rgba(255, 255, 255, 0.12) !important; }
.hover-bg-gold-90:hover { background-color: rgba(176, 136, 66, 0.9) !important; }
.h-10 { height: 2.5rem !important; }
.w-10 { width: 2.5rem !important; }
.h-9 { height: 2.25rem !important; }
.w-9 { width: 2.25rem !important; }
.hover-border-gold:hover { border-color: #B08842 !important; }
.group-hover-translate-x-05:hover { transform: translateX(0.125rem); }
.pt-15 { padding-top: 0.375rem !important; }
.break-all { word-break: break-all !important; }
.mt-14 { margin-top: 3.5rem !important; }
.pt-6 { padding-top: 1.5rem !important; }
@media (min-width: 992px) {
    .px-lg-8 { padding-left: 2rem !important; padding-right: 2rem !important; }
    .gx-lg-12 { --bs-gutter-x: 3rem; }
    .fs-lg-base { font-size: 1rem !important; }
}

/* Planning Custom specific */
.bg-forest-900 { background-color: #2b3323 !important; }
.btn-gold { background-color: #B08842 !important; color: #1e1e1e !important; }

/* Guest Stories Carousel specific */
.snap-x { scroll-snap-type: x mandatory; }
.snap-center { scroll-snap-align: center; }

/* Home hero datepicker: opens below by default, but home-new.js flips it above the
   search bar (this class) whenever there isn't room below — the bar sits at the bottom
   of the hero on load, and near the top once the visitor scrolls, so the right side
   depends on where the bar currently is. Scoped to .hero-section so the properties-page
   picker is unaffected. */
.hero-section .datepicker.dp-open-above {
    top: auto !important;
    bottom: 100%;
    margin-bottom: 12px;
}