/* ============================================================
   After-Rain Theme  ·  SITE_THEME=rainy
   Inspired by: rainbow arcs, wet leaves in sunlight,
   glistening pavements, petrichor, the bright sky after a storm.

   Palette vs. summer:
     coral  #ff6b6b  →  emerald   #3d9970
     teal   #0a5f71  →  forest    #1a5c3a
     dark   #1f4d5a  →  deep fern #2d7a55
     sun    rgba(255,193,7,…)  →  golden sunbreak
     sea    rgba(13,202,240,…) →  clearing sky / leaf green
   ============================================================ */

/* ---- CSS custom properties ---- */
[data-theme="rainy"] {
    --ar-sun:     rgba(255, 213,  79, 0.28);   /* golden sunbreak       */
    --ar-green:   rgba( 76, 175, 112, 0.24);   /* wet-leaf emerald      */
    --ar-sky:     rgba(100, 181, 246, 0.22);   /* clearing sky          */
    --ar-violet:  rgba(149, 117, 205, 0.16);   /* rainbow violet hint   */
    --ar-amber:   rgba(255, 152,   0, 0.20);   /* warm amber            */
    --ar-border:  rgba( 61, 153, 112, 0.18);   /* soft green border     */
    --ar-lift:    0 1rem 1.8rem rgba(27, 94, 32, 0.13);
    --ar-accent:  #3d9970;   /* primary emerald  */
    --ar-deep:    #1a5c3a;   /* deep forest      */
    --ar-fern:    #2d7a55;   /* mid fern green   */
}

/* ================================================================
   SHIMMER OVERLAY — water droplets catching sunlight
   ================================================================ */

.rain-overlay {
    display: none;
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 5; /* decorative only — must stay below navbar/dropdowns */
    overflow: hidden;
}

[data-theme="rainy"] .rain-overlay {
    display: block;
}

/* Two layered shimmer gradients that drift independently */
.rain-overlay::before,
.rain-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
}

.rain-overlay::before {
    background:
        radial-gradient(ellipse 18% 40% at 12% 35%, rgba(255, 213, 79, 0.09), transparent 70%),
        radial-gradient(ellipse 12% 30% at 88% 60%, rgba(100, 181, 246, 0.07), transparent 65%),
        radial-gradient(ellipse 10% 25% at 55% 15%, rgba(149, 117, 205, 0.06), transparent 60%);
    animation: ar-drift-a 7s ease-in-out infinite alternate;
}

.rain-overlay::after {
    background:
        radial-gradient(ellipse 14% 35% at 70% 80%, rgba(76, 175, 112, 0.07), transparent 65%),
        radial-gradient(ellipse 10% 22% at 30% 70%, rgba(255, 152, 0, 0.05), transparent 60%);
    animation: ar-drift-b 9s ease-in-out infinite alternate;
}

@keyframes ar-drift-a {
    from { transform: translateX(-12px) translateY(-8px); opacity: 0.6; }
    to   { transform: translateX( 12px) translateY( 8px); opacity: 1;   }
}

@keyframes ar-drift-b {
    from { transform: translateX( 10px) translateY( 6px); opacity: 0.5; }
    to   { transform: translateX(-10px) translateY(-6px); opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
    .rain-overlay::before,
    .rain-overlay::after {
        animation: none;
    }
}

/* ================================================================
   SHARED BANNER OVERLAYS
   ================================================================ */

[data-theme="rainy"] #travel-banner .overlay.overlay-darkblue,
[data-theme="rainy"] #food-banner .overlay.overlay-darkblue,
[data-theme="rainy"] #tour-banner .overlay.overlay-darkblue {
    background: linear-gradient(
        180deg,
        rgba(15, 50, 30, 0.68) 0%,
        rgba(20, 65, 38, 0.50) 55%,
        rgba(15, 50, 30, 0.65) 100%
    );
}

[data-theme="rainy"] #travel-banner .overlay.overlay-darkblue {
    background:
        radial-gradient(circle at 12% 10%, rgba(255, 213, 79, 0.52), transparent 40%),
        radial-gradient(circle at 80% 82%, rgba(76, 175, 112, 0.42), transparent 42%),
        radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.18), transparent 32%),
        linear-gradient(
            180deg,
            rgba(15, 50, 30, 0.22) 0%,
            rgba(20, 65, 38, 0.12) 55%,
            rgba(15, 50, 30, 0.20) 100%
        );
}

/* ================================================================
   ACCOMMODATION
   ================================================================ */

[data-theme="rainy"] #accommodation-banner .overlay.overlay-darkblue {
    background: linear-gradient(
        180deg,
        rgba(10, 40, 20, 0.78) 0%,
        rgba(18, 62, 34, 0.58) 52%,
        rgba(12, 48, 24, 0.74) 100%
    );
}

[data-theme="rainy"] #accommodation-banner .overlay.overlay-darkblue::before {
    background:
        radial-gradient(ellipse 40% 50% at 18% 22%, rgba(255, 213, 79, 0.48), transparent 55%),
        radial-gradient(ellipse 45% 55% at 78% 76%, rgba(76, 175, 112, 0.40), transparent 58%),
        radial-gradient(circle   at 52% 35%, rgba(149, 117, 205, 0.18), transparent 42%);
}

[data-theme="rainy"] #accommodation-banner .barabara-header {
    text-shadow:
        0 0.35rem 1.1rem rgba(0, 0, 0, 0.50),
        0 0 2.2rem rgba(61, 153, 112, 0.28);
}

[data-theme="rainy"] #accommodation-banner .accommodation-banner-tag {
    background: linear-gradient(90deg, rgba(76, 175, 112, 0.32), rgba(255, 213, 79, 0.28));
}

[data-theme="rainy"] #accredited-accommodation .accommodation-layout-card {
    background:
        radial-gradient(circle at  8% 12%, rgba(255, 213, 79, 0.14), transparent 35%),
        radial-gradient(circle at 92% 85%, rgba(76, 175, 112, 0.14), transparent 36%),
        linear-gradient(180deg, #f6fbf7 0%, #edf8f1 100%);
    border-color: rgba(61, 153, 112, 0.16);
}

[data-theme="rainy"] #accredited-accommodation .accommodation-title {
    text-shadow: 0 0.25rem 1rem rgba(61, 153, 112, 0.22);
}

[data-theme="rainy"] #accredited-accommodation .accommodation-summer-tag {
    color: #2d7a55;
    background: linear-gradient(90deg, rgba(255, 213, 79, 0.26), rgba(76, 175, 112, 0.22));
    border-color: rgba(61, 153, 112, 0.18);
}

/* ================================================================
   HOTEL PROMO CARDS
   ================================================================ */

[data-theme="rainy"] #hotel-package .hotel-promo-card {
    background:
        radial-gradient(circle at 14% 10%, rgba(255, 213, 79, 0.12), transparent 38%),
        radial-gradient(circle at 88% 86%, rgba(76, 175, 112, 0.14), transparent 36%),
        #fff;
    border-color: rgba(61, 153, 112, 0.10);
}

[data-theme="rainy"] #hotel-package .hotel-promo-card:hover {
    box-shadow: 0 1rem 1.8rem rgba(27, 94, 32, 0.13) !important;
}

[data-theme="rainy"] #hotel-package .hotel-promo-card__summer-badge {
    color: #fff;
    background: linear-gradient(90deg, rgba(61, 153, 112, 0.94), rgba(255, 213, 79, 0.88));
    box-shadow: 0 4px 14px rgba(27, 94, 32, 0.24);
}

/* ================================================================
   TOUR PROMO CARDS
   ================================================================ */

[data-theme="rainy"] #tour-packages .tour-promo-card {
    background:
        radial-gradient(circle at 14% 10%, var(--ar-sun),   transparent 38%),
        radial-gradient(circle at 88% 86%, var(--ar-green), transparent 36%),
        #fff;
    border-color: rgba(61, 153, 112, 0.10);
}

[data-theme="rainy"] #tour-packages .tour-promo-card:hover {
    box-shadow: var(--ar-lift) !important;
}

[data-theme="rainy"] #tour-packages .tour-promo-card__summer-badge {
    color: #fff;
    background: linear-gradient(90deg, rgba(61, 153, 112, 0.94), rgba(255, 213, 79, 0.88));
    box-shadow: 0 4px 14px rgba(27, 94, 32, 0.24);
}

/* ================================================================
   TOUR BANNER
   ================================================================ */

[data-theme="rainy"] #tour-banner .overlay.overlay-darkblue {
    background:
        radial-gradient(circle at 14% 10%, rgba(255, 213, 79, 0.50), transparent 40%),
        radial-gradient(circle at 80% 82%, rgba(76, 175, 112, 0.42), transparent 42%),
        radial-gradient(circle at 50% 20%, rgba(255, 255, 255, 0.16), transparent 32%),
        linear-gradient(
            180deg,
            rgba(15, 50, 30, 0.24) 0%,
            rgba(20, 65, 38, 0.14) 55%,
            rgba(15, 50, 30, 0.22) 100%
        );
}

[data-theme="rainy"] #tour-banner .tour-banner-tag {
    background: linear-gradient(90deg, rgba(61, 153, 112, 0.60), rgba(255, 213, 79, 0.52));
    border-color: rgba(255, 255, 255, 0.62);
    box-shadow: 0 0.45rem 1rem rgba(15, 50, 30, 0.28);
}

/* ================================================================
   ITINERARIES
   ================================================================ */

[data-theme="rainy"] #itineraries .tour-itineraries__summer-tag {
    color: #2d7a55;
    background: linear-gradient(90deg, rgba(255, 213, 79, 0.28), rgba(76, 175, 112, 0.24));
    border-color: rgba(61, 153, 112, 0.18);
}

[data-theme="rainy"] #itineraries .tour-itinerary-card {
    background:
        radial-gradient(circle at 10%  8%, rgba(255, 213, 79, 0.10), transparent 34%),
        radial-gradient(circle at 92% 88%, rgba(76, 175, 112, 0.10), transparent 34%),
        #ffffff;
    border-color: rgba(61, 153, 112, 0.10);
}

[data-theme="rainy"] #itineraries .tour-itinerary-card .card-body {
    border-top-color: rgba(61, 153, 112, 0.10);
}

[data-theme="rainy"] #itineraries .tour-plan-card {
    background:
        radial-gradient(circle at 12% 10%, rgba(255, 213, 79, 0.08), transparent 36%),
        radial-gradient(circle at 90% 86%, rgba(76, 175, 112, 0.08), transparent 36%),
        #ffffff;
    border-color: rgba(61, 153, 112, 0.12);
}

[data-theme="rainy"] #itineraries .tour-plan-day {
    border-color: rgba(61, 153, 112, 0.16);
}

[data-theme="rainy"] #itineraries .tour-plan-gallery__img {
    border-color: rgba(61, 153, 112, 0.20);
}

/* ================================================================
   TOUR OFFCANVAS
   ================================================================ */

[data-theme="rainy"] .tour-offcanvas .offcanvas-header {
    background: linear-gradient(90deg, rgba(61, 153, 112, 0.26), rgba(255, 213, 79, 0.22));
}

[data-theme="rainy"] .tour-offcanvas .offcanvas-body {
    background:
        radial-gradient(circle at 10%  8%, rgba(255, 213, 79, 0.07), transparent 35%),
        radial-gradient(circle at 90% 90%, rgba(76, 175, 112, 0.09), transparent 35%),
        #f4fbf6;
}

[data-theme="rainy"] .tour-offcanvas .card-body.bg-white {
    border-color: rgba(61, 153, 112, 0.16);
}

[data-theme="rainy"] .tour-offcanvas .unordered-list > li p.text-muted {
    border-left-color: rgba(76, 175, 112, 0.50);
}

/* ================================================================
   TOUR FEES PANEL
   ================================================================ */

[data-theme="rainy"] .tour-fees-panel {
    background:
        radial-gradient(circle at   0%   0%, rgba(255, 213, 79, 0.08), transparent 32%),
        radial-gradient(circle at 100% 100%, rgba(76, 175, 112, 0.10), transparent 34%),
        #fff;
}

[data-theme="rainy"] .tour-fees-panel__title {
    color: #2d7a55;
}

[data-theme="rainy"] .tour-fees-panel__lead {
    color: #1a5c3a;
}

[data-theme="rainy"] .tour-fees-panel__chip {
    color: #1a5c3a;
    border-color: rgba(61, 153, 112, 0.40);
    box-shadow: 0 2px 12px rgba(27, 94, 32, 0.09);
}

[data-theme="rainy"] .tour-fees-panel__chip i {
    color: #3d9970;
}

[data-theme="rainy"] .tour-fees-panel > .card {
    border-color: rgba(61, 153, 112, 0.16) !important;
}

[data-theme="rainy"] .tour-fees-panel .row.g-0 > .col-md-3 {
    background: linear-gradient(160deg, rgba(255, 213, 79, 0.14), rgba(76, 175, 112, 0.12));
    border-right-color: rgba(61, 153, 112, 0.18);
}

[data-theme="rainy"] .tour-fees-panel .row.g-0 > .col-md-3 p {
    color: #1a5c3a;
}

[data-theme="rainy"] .tour-fees-subgroup {
    background: linear-gradient(135deg, rgba(255, 213, 79, 0.06), rgba(76, 175, 112, 0.08));
    border-color: rgba(61, 153, 112, 0.16);
}

[data-theme="rainy"] .tour-fees-subgroup__title {
    color: #1a5c3a;
}

[data-theme="rainy"] .tour-fees-subgroup__meta {
    color: #2d7a55;
}

[data-theme="rainy"] .tour-fees-item {
    border-color: rgba(61, 153, 112, 0.14);
}

[data-theme="rainy"] .tour-fees-item:hover {
    box-shadow: 0 0.5rem 1.1rem rgba(61, 153, 112, 0.14);
}

[data-theme="rainy"] .tour-fees-item__name {
    color: #3d9970;
}

[data-theme="rainy"] .tour-fees-dl dt {
    color: #1a5c3a;
}

[data-theme="rainy"] .tour-fees-dl dd {
    color: #2d7a55;
}

/* ================================================================
   TRANSPORTATION CARDS
   ================================================================ */

[data-theme="rainy"] #transportation-directory .card {
    border-color: var(--ar-border);
}

[data-theme="rainy"] #transportation-directory .card.border-start {
    background:
        radial-gradient(circle at 12% 10%, rgba(255, 213, 79, 0.09), transparent 36%),
        radial-gradient(circle at 88% 90%, rgba(76, 175, 112, 0.10), transparent 36%),
        #fff;
}

[data-theme="rainy"] #transportation-directory .card.border-start:hover {
    box-shadow: var(--ar-lift) !important;
}

/* ================================================================
   HOMEPAGE HERO
   ================================================================ */

[data-theme="rainy"] .default-banner .welcome-background::before {
    background:
        radial-gradient(circle at 16% 16%, rgba(255, 213, 79, 0.44), transparent 42%),
        radial-gradient(circle at 84% 78%, rgba(76, 175, 112, 0.36), transparent 44%),
        radial-gradient(circle at 52% 20%, rgba(149, 117, 205, 0.14), transparent 30%),
        linear-gradient(
            180deg,
            rgba(15, 50, 30, 0.18) 0%,
            rgba(20, 65, 38, 0.10) 55%,
            rgba(15, 50, 30, 0.16) 100%
        ) !important;
}

/* ================================================================
   HOMEPAGE SPOTLIGHT
   ================================================================ */

[data-theme="rainy"] .homepage-spotlight .spotlight-pill {
    border-color: rgba(61, 153, 112, 0.40);
    box-shadow: 0 2px 10px rgba(27, 94, 32, 0.09);
}

[data-theme="rainy"] .homepage-spotlight .spotlight-pill i {
    color: #3d9970;
}

[data-theme="rainy"] .homepage-spotlight .title h1.barabara {
    color: #3d9970 !important;
    text-shadow: 0 2px 18px rgba(61, 153, 112, 0.30);
}

[data-theme="rainy"] .homepage-spotlight .title h5[lang="english"],
[data-theme="rainy"] .homepage-spotlight .title h5[lang="chinese"] {
    color: #1a5c3a !important;
}

[data-theme="rainy"] .homepage-spotlight #carouselCaptions .carousel-inner {
    box-shadow:
        0 18px 40px rgba(27, 94, 32, 0.12),
        0  6px 18px rgba(61, 153, 112, 0.10);
}

[data-theme="rainy"] .homepage-spotlight #carouselCaptions .carousel-indicators [data-bs-target] {
    border-color: rgba(61, 153, 112, 0.40);
}

[data-theme="rainy"] .homepage-spotlight #carouselCaptions .carousel-indicators .active {
    background-color: #3d9970;
    border-color: #fff;
}

[data-theme="rainy"] .homepage-spotlight #carouselCaptions .carousel-control-prev,
[data-theme="rainy"] .homepage-spotlight #carouselCaptions .carousel-control-next {
    box-shadow: 0 5px 16px rgba(61, 153, 112, 0.24);
}

[data-theme="rainy"] .homepage-spotlight #carouselCaptions .carousel-control-prev-icon,
[data-theme="rainy"] .homepage-spotlight #carouselCaptions .carousel-control-next-icon {
    filter: invert(48%) sepia(55%) saturate(500%) hue-rotate(108deg) brightness(88%);
}

@media (min-width: 768px) {
    [data-theme="rainy"] .homepage-spotlight #carouselCaptions .carousel-caption > h3,
    [data-theme="rainy"] .homepage-spotlight #carouselCaptions .carousel-caption > .h3 {
        color: #1a5c3a !important;
    }

    [data-theme="rainy"] .homepage-spotlight #carouselCaptions .carousel-caption > p {
        color: #2d7a55;
    }
}

/* ================================================================
   WATER SPLASH SPOTS — modal + spotlight carousel
   ================================================================ */

[data-theme="rainy"] .rainy-splash-layer {
    position: absolute;
    pointer-events: none;
}

[data-theme="rainy"] .homepage-spotlight #carouselCaptions {
    position: relative;
}

[data-theme="rainy"] .homepage-spotlight #carouselCaptions .rainy-splash-layer {
    inset: 0;
    z-index: 3;
    border-radius: 18px;
    overflow: hidden;
}

[data-theme="rainy"] .homepage-spotlight #carouselCaptions .carousel-caption,
[data-theme="rainy"] .homepage-spotlight #carouselCaptions .carousel-indicators,
[data-theme="rainy"] .homepage-spotlight #carouselCaptions .carousel-control-prev,
[data-theme="rainy"] .homepage-spotlight #carouselCaptions .carousel-control-next,
[data-theme="rainy"] .homepage-spotlight #carouselCaptions .middle-text-right {
    z-index: 4;
}

[data-theme="rainy"] .rainy-splash {
    position: absolute;
    transform-origin: center center;
    animation: rainy-splash-shimmer 2.8s ease-in-out infinite alternate;
}

[data-theme="rainy"] .rainy-splash--drop {
    border-radius: 50% 50% 50% 50% / 55% 55% 45% 45%;
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95), rgba(144, 202, 249, 0.72) 38%, rgba(61, 153, 112, 0.28) 68%, transparent 72%);
    box-shadow:
        0 0 0.35rem rgba(100, 181, 246, 0.45),
        0 0.25rem 0.6rem rgba(61, 153, 112, 0.18);
}

[data-theme="rainy"] .rainy-splash--ring {
    border-radius: 50%;
    background: transparent;
    border: 2px solid rgba(100, 181, 246, 0.42);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.35),
        inset 0 0 0.55rem rgba(144, 202, 249, 0.28);
}

[data-theme="rainy"] .rainy-splash--burst {
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.75) 0%, rgba(144, 202, 249, 0.55) 22%, transparent 24%),
        radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, rgba(100, 181, 246, 0.4) 18%, transparent 20%);
    background-size: 100% 100%, 100% 100%;
    box-shadow:
        0.55rem 0 0 -0.15rem rgba(144, 202, 249, 0.55),
        -0.55rem 0 0 -0.15rem rgba(144, 202, 249, 0.55),
        0 0.55rem 0 -0.15rem rgba(144, 202, 249, 0.55),
        0 -0.55rem 0 -0.15rem rgba(144, 202, 249, 0.55);
}

@keyframes rainy-splash-shimmer {
    from {
        filter: brightness(1);
        transform: scale(1) rotate(var(--splash-rotate, 0deg));
    }
    to {
        filter: brightness(1.18);
        transform: scale(1.1) rotate(var(--splash-rotate, 0deg));
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-theme="rainy"] .rainy-splash {
        animation: none;
    }
}

/* ================================================================
   VIDEO SECTION OVERLAY (overrides inline style)
   ================================================================ */

[data-theme="rainy"] .video-area .overlay {
    background:
        radial-gradient(ellipse 50% 45% at 15% 20%, rgba(255, 213, 79, 0.46), transparent 55%),
        radial-gradient(ellipse 55% 45% at 85% 78%, rgba(76, 175, 112, 0.42), transparent 58%),
        linear-gradient(135deg, rgba(61, 153, 112, 0.30), rgba(149, 117, 205, 0.18)) !important;
}

/* ================================================================
   TOUR FIESTA SECTION
   ================================================================ */

[data-theme="rainy"] .tour-fiesta-section {
    background: linear-gradient(185deg, #f4fbf6 0%, #edf8f1 48%, #f9fbf4 100%);
}

[data-theme="rainy"] .tour-fiesta-section::after {
    background:
        radial-gradient(ellipse 58% 42% at 10% 12%, rgba(255, 213, 79, 0.22), transparent 58%),
        radial-gradient(ellipse 52% 48% at 92% 78%, rgba(76, 175, 112, 0.18), transparent 52%),
        radial-gradient(circle   at 48%  0%, rgba(149, 117, 205, 0.10), transparent 40%),
        linear-gradient(
            185deg,
            rgba(244, 251, 246, 0.90) 0%,
            rgba(237, 248, 241, 0.84) 48%,
            rgba(249, 251, 244, 0.92) 100%
        );
}

[data-theme="rainy"] .tour-fiesta-title {
    color: #3d9970 !important;
    text-shadow: 0 2px 20px rgba(61, 153, 112, 0.30);
}

[data-theme="rainy"] .tour-fiesta-lead {
    color: #1a5c3a !important;
}

[data-theme="rainy"] .tour-fiesta-pill {
    color: #1a5c3a;
    border-color: rgba(61, 153, 112, 0.40);
    box-shadow: 0 2px 12px rgba(27, 94, 32, 0.09);
}

[data-theme="rainy"] .tour-fiesta-pill i {
    color: #3d9970;
}

[data-theme="rainy"] .tour-fiesta-card {
    box-shadow:
        0 14px 38px rgba(27, 94, 32, 0.13),
        0  6px 18px rgba(61, 153, 112, 0.10);
}

[data-theme="rainy"] .tour-fiesta-card:hover {
    box-shadow:
        0 20px 48px rgba(27, 94, 32, 0.18),
        0 10px 26px rgba(61, 153, 112, 0.14);
}

[data-theme="rainy"] .tour-fiesta-section .card-body-overlay {
    background: linear-gradient(
        180deg,
        rgba(15, 70, 35, 0.80) 0%,
        rgba(10, 55, 25, 0.90) 100%
    ) !important;
}

[data-theme="rainy"] .tour-fiesta-section .middle-text-left {
    -webkit-text-stroke-color: rgba(61, 153, 112, 0.9);
    text-shadow:
        0 2px 14px rgba(0, 0, 0, 0.45),
        0 0 20px rgba(255, 213, 79, 0.28);
}

[data-theme="rainy"] .tour-fiesta-section .dot {
    color: #a8d5b8 !important;
}

[data-theme="rainy"] .tour-fiesta-section .splide__arrow {
    box-shadow: 0 4px 16px rgba(61, 153, 112, 0.24);
}

[data-theme="rainy"] .tour-fiesta-section .splide__arrow svg {
    fill: #3d9970 !important;
}

[data-theme="rainy"] .tour-fiesta-section .splide__pagination__page {
    background: rgba(26, 92, 58, 0.28);
}

[data-theme="rainy"] .tour-fiesta-section .splide__pagination__page.is-active {
    background: #3d9970 !important;
}

/* ================================================================
   MODAL — AFTER-RAIN SHIFT
   ================================================================ */

/* Warm golden-green wash over the beach background photo */
[data-theme="rainy"] #subscribeModal .summer-modal__face::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 24px;
    pointer-events: none;
    /* Warm golden-green wash over the beach background photo */
    background:
        radial-gradient(ellipse 55% 45% at 20% 25%, rgba(255, 213, 79, 0.38), transparent 60%),
        radial-gradient(ellipse 50% 55% at 80% 75%, rgba(76, 175, 112, 0.32), transparent 58%),
        radial-gradient(circle   at 55% 10%, rgba(149, 117, 205, 0.16), transparent 40%),
        linear-gradient(160deg, rgba(61, 153, 112, 0.28), rgba(255, 213, 79, 0.22));
    z-index: 1;
}

/* Lift modal body above the colour wash */
[data-theme="rainy"] #subscribeModal .summer-modal__face .modal-body {
    z-index: 3;
}

[data-theme="rainy"] #subscribeModal .summer-title {
    color: #3b2a7a;
    text-shadow: 0 2px 12px rgba(149, 117, 205, 0.25);
}

[data-theme="rainy"] #subscribeModal .summer-copy {
    color: #3b2a7a;
}

[data-theme="rainy"] #subscribeModal .summer-primary-btn {
    background: linear-gradient(135deg, rgba(149, 117, 205, 0.96), rgba(255, 213, 79, 0.92));
    box-shadow: 0 8px 18px rgba(149, 117, 205, 0.30);
}

[data-theme="rainy"] #subscribeModal .summer-secondary-link {
    color: #6f4acb;
}

[data-theme="rainy"] #subscribeModal .summer-close {
    color: #3b2a7a;
}

[data-theme="rainy"] #subscribeModal .summer-input {
    border-color: rgba(149, 117, 205, 0.35);
    background: rgba(244, 251, 246, 0.92);
}

/* Wet flora assets — no colour filter needed */
[data-theme="rainy"] #subscribeModal .deco-flora-back-left,
[data-theme="rainy"] #subscribeModal .deco-flora-back-right,
[data-theme="rainy"] #subscribeModal .deco-flora-front-left,
[data-theme="rainy"] #subscribeModal .deco-flora-front-right {
    filter: none;
}

/* Jasmine must sit above the rainy color wash (::after), like the pink flowers */
[data-theme="rainy"] #subscribeModal .deco-jasmine-right-top-2,
[data-theme="rainy"] #subscribeModal .deco-jasmine-right-top-3,
[data-theme="rainy"] #subscribeModal .deco-jasmine-right-bottom-2,
[data-theme="rainy"] #subscribeModal .deco-jasmine-right-bottom-3 {
    filter: hue-rotate(-20deg) saturate(1.3) brightness(1.1);
    z-index: 10;
}

@media (max-width: 991.98px) {
    [data-theme="rainy"] #subscribeModal .summer-modal__face::after {
        border-radius: 20px;
    }
}

@media (max-width: 575.98px) {
    [data-theme="rainy"] #subscribeModal .summer-modal__face::after {
        border-radius: 16px;
    }
}