/* Winter/Christmas Seasonal Theme Overrides */

/* Christmas/Holiday Color Palette:
   - Primary Red: #C41E3A (crimson)
   - Deep Green: #228B22 (forest green)
   - Gold: #FFD700 (gold)
   - Dark Red: #8B0000 (dark red)
   - Light Green: #90EE90 (light green)
   - Warm White: #FFF8F0 (warm off-white)
   - Deep Green Accent: #006400 (dark green)
*/

/* Body and background updates */
body {
    background: #FFF8F0 !important; /* Warm off-white */
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        radial-gradient(circle at 20% 80%, rgba(196, 30, 58, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(34, 139, 34, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(255, 215, 0, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: -1;
}

/* Headings - Christmas colors */
h2 {
    color: #C41E3A !important; /* Crimson red */
}

h3 {
    color: #228B22 !important; /* Forest green */
}

/* Links - Christmas colors */
a:link,
a:visited {
    color: #C41E3A !important; /* Crimson red */
}

a:hover,
a:active {
    color: #8B0000 !important; /* Dark red */
}

/* Buttons - Christmas themed */
a.btn {
    background-color: #C41E3A !important; /* Crimson red */
    background: linear-gradient(135deg, #C41E3A 0%, #8B0000 100%) !important;
    box-shadow: 0 4px 15px rgba(196, 30, 58, 0.3) !important;
    transition: all 0.3s ease !important;
    color: #ffffff !important; /* White text for contrast */
}

a.btn:hover {
    background: linear-gradient(135deg, #8B0000 0%, #C41E3A 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(196, 30, 58, 0.4) !important;
    color: #ffffff !important; /* White text on hover */
}

a.btn.grey {
    background: linear-gradient(135deg, #228B22 0%, #006400 100%) !important;
    color: #ffffff !important; /* White text for contrast */
}

a.btn.grey:hover {
    background: linear-gradient(135deg, #006400 0%, #228B22 100%) !important;
    transform: translateY(-2px) !important;
    color: #ffffff !important; /* White text on hover */
}

/* Home banner button text fix */
.home-banner a.btn {
    color: #ffffff !important;
}

.home-banner p.button {
    color: #ffffff !important; /* Change button text to white */
}

input[type=submit] {
    background: linear-gradient(135deg, #C41E3A 0%, #8B0000 100%) !important;
    box-shadow: 0 4px 15px rgba(196, 30, 58, 0.3) !important;
}

input[type=submit]:hover {
    background: linear-gradient(135deg, #8B0000 0%, #C41E3A 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(196, 30, 58, 0.4) !important;
}

/* Navigation bar - keep default background, only change link colors */

.main-bar-nav a {
    color: #C41E3A !important; /* Crimson red */
}

.main-bar-nav a.active {
    color: #228B22 !important; /* Forest green */
}

.main-bar-nav a:hover {
    color: #8B0000 !important; /* Dark red */
}

/* Home banner - winter overlay */
.home-banner {
    position: relative;
}

.home-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(180deg, rgba(196, 30, 58, 0.1) 0%, transparent 30%),
        linear-gradient(0deg, rgba(34, 139, 34, 0.1) 0%, transparent 30%);
    pointer-events: none;
    z-index: 1;
}

.home-banner > * {
    position: relative;
    z-index: 2;
}

/* Keep banner-image-socials absolutely positioned and on the right */
.banner-image-socials {
    position: absolute !important;
    bottom: 0 !important;
    right: 0 !important;
    left: auto !important;
    padding: 1rem 2rem 1rem 1rem !important; /* Adjusted for right positioning */
    z-index: 3 !important;
}

.home-banner p.button {
    color: #C41E3A !important;
}

/* Page banner */
.page-banner::before {
    background-color: rgba(196, 30, 58, 0.15) !important;
}

.page-banner-text h1 {
    color: #C41E3A !important;
    text-shadow: 2px 2px 4px rgba(196, 30, 58, 0.3);
}

/* Sections - Christmas backgrounds */
.section {
    background: #FFF8F0 !important;
}

.section.grey {
    background: linear-gradient(135deg, #FFF8F0 0%, #FFE8E8 100%) !important;
}

.section.green {
    background: linear-gradient(135deg, #228B22 0%, #006400 100%) !important;
    border-top: 4px dashed rgba(255, 255, 255, 0.3) !important;
    border-bottom: 4px dashed rgba(255, 255, 255, 0.3) !important;
}

.section.green .section-inner h2 {
    color: #fff !important;
}

.section.border-top {
    border-top: 3px solid #C41E3A !important;
}

/* Feature images - Christmas filter */
.home-feature-image {
    position: relative;
}

.home-feature-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(196, 30, 58, 0.1) 0%, rgba(34, 139, 34, 0.1) 100%);
    border-radius: 1rem;
    pointer-events: none;
    z-index: 1;
}

/* Suite cards - Christmas accents */
.suite-container {
    border: 2px solid #C41E3A !important;
}

.suite-details h3 {
    color: #C41E3A !important;
}

.spec-item {
    background: #FFE8E8 !important;
    color: #8B0000 !important;
}

.accommodation-section h2 {
    color: #C41E3A !important;
}

/* Footer - Christmas tones */
.footer {
    background: linear-gradient(135deg, #FFE8E8 0%, #FFF8F0 100%) !important;
    border-top: 2px solid #C41E3A;
}

/* Form elements */
.contact-form,
.contact-details {
    border: 2px solid #FFE8E8 !important;
    box-shadow: 0 10px 30px rgba(196, 30, 58, 0.15) !important;
}

.contact-form input[type=text]:focus,
.contact-form input[type=email]:focus,
.contact-form textarea:focus,
.booking-form input:focus,
.booking-form textarea:focus,
.booking-form select:focus {
    border-color: #C41E3A !important;
    box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.1) !important;
}

/* Pricing section */
.boarding h2 {
    color: #228B22 !important;
}

.boarding li {
    color: #C41E3A !important;
}

/* Winter-themed tick icon - replace with transparent SVG checkmark */
.boarding .tick {
    /* Hide the original JPG image with white background */
    display: none;
}

/* Create transparent SVG checkmark in Christmas red color */
.boarding::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    width: 72px;
    height: 72px;
    /* Transparent SVG checkmark in Christmas red (#C41E3A) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cpath fill='none' stroke='%23C41E3A' stroke-width='6' stroke-linecap='round' stroke-linejoin='round' d='M18 36 L30 48 L54 24'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    z-index: 1;
    pointer-events: none;
}

/* Hide pricing banner during winter season */
.pricing-banner {
    display: none !important;
}

/* Hide the entire section containing pricing banner on home page */
body.home .section.grey.border-top {
    display: none !important;
}

/* Navigation Links Section - Christmas Styling */
.nav-links-grid {
    margin-top: 2rem;
}

.nav-link-card {
    background: linear-gradient(135deg, #FFF8F0 0%, #FFE8E8 100%) !important;
    border: 2px solid #C41E3A !important;
    box-shadow: 0 4px 15px rgba(196, 30, 58, 0.2) !important;
}

.nav-link-card:hover {
    border-color: #228B22 !important;
    box-shadow: 0 8px 25px rgba(196, 30, 58, 0.3) !important;
    transform: translateY(-5px);
}

.nav-link-content h3 {
    color: #C41E3A !important;
}

.nav-link-card:hover .nav-link-content h3 {
    color: #228B22 !important;
}

.nav-link-content p {
    color: #8B0000 !important;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
}

/* Home section banner */
.home-section-banner {
    border-top: 4px solid #C41E3A !important;
    border-bottom: 4px solid #C41E3A !important;
}

/* Suite image overlay */
.suite-image-overlay {
    background: rgba(196, 30, 58, 0.85) !important;
}

/* Gallery items - Christmas shadows */
.image-gallery .image-item-inner {
    border: 2px solid #FFE8E8 !important;
    box-shadow: 0 4px 12px rgba(196, 30, 58, 0.2) !important;
}

/* Contact success message */
.contact-form .success {
    color: #228B22 !important;
    border-color: #228B22 !important;
}

/* Falling Snow Animation */
@keyframes snowFall1 {
    0% {
        transform: translateY(-100vh) translateX(0);
        opacity: 0;
    }
    10% {
        transform: translateY(-90vh) translateX(5px);
        opacity: 1;
    }
    90% {
        transform: translateY(90vh) translateX(15px);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) translateX(20px);
        opacity: 0;
    }
}

@keyframes snowFall2 {
    0% {
        transform: translateY(-100vh) translateX(0);
        opacity: 0;
    }
    10% {
        transform: translateY(-90vh) translateX(-3px);
        opacity: 1;
    }
    90% {
        transform: translateY(90vh) translateX(-12px);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) translateX(-15px);
        opacity: 0;
    }
}

@keyframes snowFall3 {
    0% {
        transform: translateY(-100vh) translateX(0);
        opacity: 0;
    }
    10% {
        transform: translateY(-90vh) translateX(8px);
        opacity: 1;
    }
    90% {
        transform: translateY(90vh) translateX(25px);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) translateX(30px);
        opacity: 0;
    }
}

@keyframes snowFall4 {
    0% {
        transform: translateY(-100vh) translateX(0);
        opacity: 0;
    }
    10% {
        transform: translateY(-90vh) translateX(-6px);
        opacity: 1;
    }
    90% {
        transform: translateY(90vh) translateX(-20px);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) translateX(-25px);
        opacity: 0;
    }
}

@keyframes snowFall5 {
    0% {
        transform: translateY(-100vh) translateX(0);
        opacity: 0;
    }
    10% {
        transform: translateY(-90vh) translateX(2px);
        opacity: 1;
    }
    90% {
        transform: translateY(90vh) translateX(8px);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) translateX(10px);
        opacity: 0;
    }
}

@keyframes snowFall6 {
    0% {
        transform: translateY(-100vh) translateX(0);
        opacity: 0;
    }
    10% {
        transform: translateY(-90vh) translateX(-8px);
        opacity: 1;
    }
    90% {
        transform: translateY(90vh) translateX(-25px);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) translateX(-30px);
        opacity: 0;
    }
}

@keyframes snowFall7 {
    0% {
        transform: translateY(-100vh) translateX(0);
        opacity: 0;
    }
    10% {
        transform: translateY(-90vh) translateX(7px);
        opacity: 1;
    }
    90% {
        transform: translateY(90vh) translateX(20px);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) translateX(25px);
        opacity: 0;
    }
}

@keyframes snowFall8 {
    0% {
        transform: translateY(-100vh) translateX(0);
        opacity: 0;
    }
    10% {
        transform: translateY(-90vh) translateX(-2px);
        opacity: 1;
    }
    90% {
        transform: translateY(90vh) translateX(-8px);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) translateX(-10px);
        opacity: 0;
    }
}

@keyframes snowFall9 {
    0% {
        transform: translateY(-100vh) translateX(0);
        opacity: 0;
    }
    10% {
        transform: translateY(-90vh) translateX(10px);
        opacity: 1;
    }
    90% {
        transform: translateY(90vh) translateX(30px);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) translateX(35px);
        opacity: 0;
    }
}

@keyframes snowFall10 {
    0% {
        transform: translateY(-100vh) translateX(0);
        opacity: 0;
    }
    10% {
        transform: translateY(-90vh) translateX(-5px);
        opacity: 1;
    }
    90% {
        transform: translateY(90vh) translateX(-17px);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) translateX(-20px);
        opacity: 0;
    }
}

/* Falling snowflake elements - created via JavaScript */
.falling-snowflake {
    position: fixed;
    top: 0;
    font-size: 2rem;
    z-index: 9998;
    pointer-events: none;
    opacity: 0;
    user-select: none;
    color: #ffffff;
    text-shadow: 0 0 8px rgba(255, 255, 255, 1);
    will-change: transform;
    transform: translateY(-100vh);
}

.falling-snowflake.snowflake1 {
    animation: snowFall1 8s linear infinite;
    font-size: 1.2rem;
    opacity: 0.9;
    left: 10%;
}

.falling-snowflake.snowflake2 {
    animation: snowFall2 10s linear infinite 0.1s;
    font-size: 1.5rem;
    opacity: 0.8;
    left: 20%;
}

.falling-snowflake.snowflake3 {
    animation: snowFall3 12s linear infinite 0.2s;
    font-size: 1.8rem;
    opacity: 0.7;
    left: 30%;
}

.falling-snowflake.snowflake4 {
    animation: snowFall4 9s linear infinite 0.05s;
    font-size: 1.3rem;
    opacity: 0.85;
    left: 40%;
}

.falling-snowflake.snowflake5 {
    animation: snowFall5 11s linear infinite 0.15s;
    font-size: 1.6rem;
    opacity: 0.75;
    left: 50%;
}

.falling-snowflake.snowflake6 {
    animation: snowFall6 13s linear infinite 0.25s;
    font-size: 1.4rem;
    opacity: 0.8;
    left: 60%;
}

.falling-snowflake.snowflake7 {
    animation: snowFall7 9.5s linear infinite 0.08s;
    font-size: 1.7rem;
    opacity: 0.7;
    left: 70%;
}

.falling-snowflake.snowflake8 {
    animation: snowFall8 10.5s linear infinite 0.12s;
    font-size: 1.3rem;
    opacity: 0.85;
    left: 80%;
}

.falling-snowflake.snowflake9 {
    animation: snowFall9 11.5s linear infinite 0.22s;
    font-size: 1.5rem;
    opacity: 0.75;
    left: 90%;
}

.falling-snowflake.snowflake10 {
    animation: snowFall10 12.5s linear infinite 0.03s;
    font-size: 1.4rem;
    opacity: 0.8;
    left: 15%;
}

/* Falling Christmas Elements Animation */
@keyframes christmasFall1 {
    0% {
        transform: translateY(-100vh) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        transform: translateY(-90vh) translateX(12px) rotate(10deg);
        opacity: 1;
    }
    90% {
        transform: translateY(90vh) translateX(18px) rotate(350deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) translateX(25px) rotate(360deg);
        opacity: 0;
    }
}

@keyframes christmasFall2 {
    0% {
        transform: translateY(-100vh) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        transform: translateY(-90vh) translateX(-8px) rotate(-10deg);
        opacity: 1;
    }
    90% {
        transform: translateY(90vh) translateX(-15px) rotate(350deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) translateX(-22px) rotate(360deg);
        opacity: 0;
    }
}

@keyframes christmasFall3 {
    0% {
        transform: translateY(-100vh) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        transform: translateY(-90vh) translateX(15px) rotate(15deg);
        opacity: 1;
    }
    90% {
        transform: translateY(90vh) translateX(28px) rotate(345deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) translateX(35px) rotate(360deg);
        opacity: 0;
    }
}

@keyframes christmasFall4 {
    0% {
        transform: translateY(-100vh) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        transform: translateY(-90vh) translateX(-12px) rotate(-15deg);
        opacity: 1;
    }
    90% {
        transform: translateY(90vh) translateX(-25px) rotate(345deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) translateX(-32px) rotate(360deg);
        opacity: 0;
    }
}

@keyframes christmasFall5 {
    0% {
        transform: translateY(-100vh) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        transform: translateY(-90vh) translateX(5px) rotate(8deg);
        opacity: 1;
    }
    90% {
        transform: translateY(90vh) translateX(12px) rotate(352deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) translateX(18px) rotate(360deg);
        opacity: 0;
    }
}

@keyframes christmasFall6 {
    0% {
        transform: translateY(-100vh) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        transform: translateY(-90vh) translateX(-18px) rotate(-12deg);
        opacity: 1;
    }
    90% {
        transform: translateY(90vh) translateX(-30px) rotate(348deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) translateX(-38px) rotate(360deg);
        opacity: 0;
    }
}

@keyframes christmasFall7 {
    0% {
        transform: translateY(-100vh) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        transform: translateY(-90vh) translateX(20px) rotate(20deg);
        opacity: 1;
    }
    90% {
        transform: translateY(90vh) translateX(35px) rotate(340deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) translateX(42px) rotate(360deg);
        opacity: 0;
    }
}

@keyframes christmasFall8 {
    0% {
        transform: translateY(-100vh) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        transform: translateY(-90vh) translateX(-5px) rotate(-8deg);
        opacity: 1;
    }
    90% {
        transform: translateY(90vh) translateX(-10px) rotate(352deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) translateX(-15px) rotate(360deg);
        opacity: 0;
    }
}

@keyframes christmasFall9 {
    0% {
        transform: translateY(-100vh) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        transform: translateY(-90vh) translateX(22px) rotate(18deg);
        opacity: 1;
    }
    90% {
        transform: translateY(90vh) translateX(38px) rotate(342deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) translateX(45px) rotate(360deg);
        opacity: 0;
    }
}

@keyframes christmasFall10 {
    0% {
        transform: translateY(-100vh) translateX(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        transform: translateY(-90vh) translateX(-22px) rotate(-18deg);
        opacity: 1;
    }
    90% {
        transform: translateY(90vh) translateX(-38px) rotate(342deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) translateX(-45px) rotate(360deg);
        opacity: 0;
    }
}

/* Falling Christmas elements - created via JavaScript */
.falling-christmas {
    position: fixed;
    top: 0;
    font-size: 2.5rem;
    z-index: 9998;
    pointer-events: none;
    opacity: 0;
    user-select: none;
    will-change: transform;
    transform: translateY(-100vh);
}

.falling-christmas.christmas1 {
    animation: christmasFall1 14s linear infinite;
    font-size: 2rem;
    opacity: 0.6;
    left: 12%;
}

.falling-christmas.christmas2 {
    animation: christmasFall2 16s linear infinite 0.1s;
    font-size: 2.5rem;
    opacity: 0.55;
    left: 25%;
}

.falling-christmas.christmas3 {
    animation: christmasFall3 13s linear infinite 0.2s;
    font-size: 1.8rem;
    opacity: 0.6;
    left: 38%;
}

.falling-christmas.christmas4 {
    animation: christmasFall4 15s linear infinite 0.05s;
    font-size: 2.2rem;
    opacity: 0.55;
    left: 52%;
}

.falling-christmas.christmas5 {
    animation: christmasFall5 17s linear infinite 0.15s;
    font-size: 2.8rem;
    opacity: 0.5;
    left: 65%;
}

.falling-christmas.christmas6 {
    animation: christmasFall6 12s linear infinite 0.08s;
    font-size: 2rem;
    opacity: 0.6;
    left: 78%;
}

.falling-christmas.christmas7 {
    animation: christmasFall7 18s linear infinite 0.12s;
    font-size: 1.5rem;
    opacity: 0.65;
    left: 8%;
}

.falling-christmas.christmas8 {
    animation: christmasFall8 14.5s linear infinite 0.03s;
    font-size: 2.3rem;
    opacity: 0.55;
    left: 35%;
}

.falling-christmas.christmas9 {
    animation: christmasFall9 16.5s linear infinite 0.18s;
    font-size: 2.6rem;
    opacity: 0.5;
    left: 58%;
}

.falling-christmas.christmas10 {
    animation: christmasFall10 13.5s linear infinite 0.22s;
    font-size: 1.9rem;
    opacity: 0.6;
    left: 72%;
}

/* Add sparkle effect for winter */
@media (prefers-reduced-motion: no-preference) {
    /* Sparkle effect can be added if needed */
}