/**
 * Bali Green Spa - Footer Offer Widget Styles
 * Updated with scroll-triggered animations
 *
 * @package Bali Green Spa
 * @since 1.0.0
 */

/* CSS Custom Properties for easy customization */
:root {
    --bali-offer-primary: #4caf50;
    --bali-offer-secondary: #388e3c;
    --bali-offer-accent: #A0DE47;
    --bali-offer-white: #ffffff;
    --bali-offer-light-gray: #f1f1f1;
    --bali-offer-shadow: rgba(0, 0, 0, 0.2);
    --bali-offer-border-radius: 10px;
    --bali-offer-transition: all 0.3s ease;

    /* Overlay-specific variables */
    --bali-overlay-bg: linear-gradient(135deg, #66bb6a 0%, #4caf50 25%, #43a047 50%, #388e3c 75%, #2e7d32 100%) !important;;
    --bali-overlay-gradient: rgba(76, 175, 80, 0.92);
    --bali-overlay-blur: 15px;
    --bali-overlay-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    --bali-overlay-border: rgba(255, 255, 255, 0.15);
    --bali-overlay-offset: -80px; /* How much to overlap */
}

/* Footer styles */
a {
    color: var(--bali-offer-accent);
}

.site-primary-footer-wrap[data-section="section-primary-footer-builder"] {
    padding-top: 100px;
}

/* ========================================
   Footer Banner
   ======================================== */

/* Main banner container - INITIAL HIDDEN STATE */
.footer-offer-banner {
    background: linear-gradient(135deg, #66bb6a 0%, #4caf50 25%, #43a047 50%, #388e3c 75%, #2e7d32 100%);
    color: var(--bali-offer-white);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 30px 0;
    border-radius: var(--bali-offer-border-radius);
    box-shadow: none;
    margin: 0;
    max-width: none;
    width: 100%;
    position: relative;
    overflow: hidden;

    /* INITIAL STATE - Hidden and positioned for animation */
    opacity: 0;
    transform: translateY(100px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Inner container for content spacing */
.footer-offer-banner > .offer-text,
.footer-offer-banner > .rotating-offers {
    position: relative;
    z-index: 2;
}

/* Create a wrapper effect with pseudo-element */
.footer-offer-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1200px;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px;
    box-sizing: border-box;
    z-index: 1;
}

/* Ensure content uses the full width available */
.footer-offer-banner {
    justify-content: space-between;
    padding: 30px 40px;
    max-width: 1200px;
    margin: 0 auto;
    gap: 40px;
}

/* ANIMATED STATE - Applied when banner comes into view */
.footer-offer-banner.bali-animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Subtle gradient overlay for depth */
.footer-offer-banner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 30%, rgba(0, 0, 0, 0.1) 100%);
    pointer-events: none;
    z-index: 1;
}

/* Full-width banner container */
.footer-offer-section {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Full-width utility class */
.footer-offer-full-width .footer-offer-banner,
.footer-offer-banner {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    border-radius: var(--bali-offer-border-radius);
    box-shadow: none;
}

/* Ensure content is above overlay */
.footer-offer-banner > * {
    position: relative;
    z-index: 2;
}

/* ========================================
   OVERLAY STYLES - Footer Integration
   ======================================== */

/* Option 1: Overlay Top of Footer */
.footer-offer-overlay-container {
    position: relative;
    z-index: 10;
    margin-bottom: var(--bali-overlay-offset);
    margin-top: -240px;
}

.footer-offer-overlay-container .footer-offer-banner {
    position: relative;
    z-index: 15;
    margin: 0 auto 20px auto;
    background: var(--bali-overlay-bg);
    backdrop-filter: blur(var(--bali-overlay-blur));
    -webkit-backdrop-filter: blur(var(--bali-overlay-blur));
    box-shadow: var(--bali-overlay-shadow);

    /* Override the initial hidden state for overlay containers */
    opacity: 0;
    transform: translateY(150px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

/* Overlay animation when in view */
.footer-offer-overlay-container .footer-offer-banner.bali-animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Footer adjustments for overlay */
.footer-offer-overlay-container ~ .site-footer,
.site-footer:has(.footer-offer-overlay-container) {
    padding-top: 140px;
    position: relative;
    z-index: 5;
}

/* Option 2: Fixed Bottom Overlay (Sticky) */
.footer-offer-fixed-overlay {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: var(--bali-overlay-bg);
    backdrop-filter: blur(var(--bali-overlay-blur));
    -webkit-backdrop-filter: blur(var(--bali-overlay-blur));
    border-top: 1px solid var(--bali-overlay-border);
    box-shadow: 0 -4px 20px var(--bali-offer-shadow);

    /* Start hidden and slide up from bottom */
    transform: translateY(100%);
    transition: transform 0.6s ease-in-out;
}

.footer-offer-fixed-overlay.bali-animate-in {
    transform: translateY(0);
}

.footer-offer-fixed-overlay .footer-offer-banner {
    background: transparent;
    margin: 0;
    padding: 15px 20px;
    box-shadow: none;
    border-radius: var(--bali-offer-border-radius);
    border: none;
    opacity: 1;
    transform: translateY(0);
    transition: none;
}

/* Body padding for fixed overlay */
body:has(.footer-offer-fixed-overlay) {
    padding-bottom: 120px;
}

/* Hide when scrolling up (optional) */
body.scrolling-up .footer-offer-fixed-overlay {
    transform: translateY(100%);
}

body.scrolling-down .footer-offer-fixed-overlay {
    transform: translateY(0);
}

/* Option 3: Floating Above Footer */
.footer-offer-floating {
    position: relative;
    z-index: 20;
    margin-bottom: var(--bali-overlay-offset);
    transition: var(--bali-offer-transition);
}

.footer-offer-floating .footer-offer-banner {
    background: var(--bali-overlay-bg);
    backdrop-filter: blur(var(--bali-overlay-blur));
    -webkit-backdrop-filter: blur(var(--bali-overlay-blur));
    border: 1px solid var(--bali-overlay-border);
    box-shadow: var(--bali-overlay-shadow);

    /* Initial state for floating */
    opacity: 0;
    transform: translateY(80px) scale(0.95);
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Animated state for floating */
.footer-offer-floating .footer-offer-banner.bali-animate-in {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Animate on scroll */
.footer-offer-floating .footer-offer-banner.bali-animate-in:hover {
    transform: translateY(-5px) scale(1);
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.2);
}

/* Footer background adjustment for floating */
.footer-offer-floating ~ .site-footer {
    background: linear-gradient(to bottom, transparent 0%, var(--ast-global-color-6, #f8f8f8) 80px);
    padding-top: 100px;
}

/* Option 4: Absolute Positioned Over Footer */
.footer-offer-absolute {
    position: relative;
}

.footer-offer-absolute .footer-offer-banner {
    position: absolute;
    top: var(--bali-overlay-offset);
    left: 50%;
    transform: translateX(-50%) translateY(120px);
    z-index: 10;
    background: var(--bali-overlay-bg);
    backdrop-filter: blur(12px);
    border: 1px solid var(--bali-overlay-border);
    box-shadow: var(--bali-overlay-shadow);
    width: calc(100% - 40px);
    opacity: 0;
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.footer-offer-absolute .footer-offer-banner.bali-animate-in {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Semi-transparent footer background for absolute positioning */
.site-footer:has(.footer-offer-absolute) .ast-footer-overlay {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(5px);
}

/* ========================================
   MAIN CONTENT STYLES
   ======================================== */

/* Left section - main content */
.offer-text {
    max-width: 60%;
    color: var(--bali-offer-white);
}

.offer-text h3 {
    margin: 0 0 8px 0;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--bali-offer-white);
}

.offer-text p {
    margin: 8px 0 16px 0;
    font-size: 1.1rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.95);
}

/* Call-to-action button */
.offer-btn {
    display: inline-block;
    margin-top: 12px;
    background-color: var(--bali-offer-white);
    color: var(--bali-offer-secondary) !important;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 1rem;
    transition: var(--bali-offer-transition);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    border: 2px solid transparent;
    cursor: pointer;
}

.offer-btn:hover,
.offer-btn:focus {
    background-color: var(--bali-offer-light-gray);
    color: var(--bali-offer-secondary) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    border-color: var(--bali-offer-white);
}

/* Right section - rotating offers */
.rotating-offers {
    flex: 1;
    text-align: center;
    color: var(--bali-offer-white);
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.offers-title {
    font-size: 1.8rem;
    margin: 0 0 12px 0;
    font-weight: 700;
}

/* Individual offer slides */
.offer-slide {
    display: none;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.4;
    min-height: 60px;
    flex-direction: column;
    justify-content: center;
}

.offer-slide.active {
    display: flex;
    animation: fadeInUp 0.8s ease-in-out;
}

.offer-slide p {
    margin: 0 0 4px 0;
    color: var(--bali-offer-white);
    font-size: 1.2rem;
}

.offer-slide p strong {
    font-weight: 700;
}

/* Price styling */
.price {
    display: block;
    font-weight: 800;
    font-size: 1.5rem;
    margin-top: 4px;
    color: var(--bali-offer-accent);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    letter-spacing: 0.5px;
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInFromBottom {
    from {
        opacity: 0;
        transform: translateY(100px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Staggered animation for content elements */
.footer-offer-banner.bali-animate-in .offer-text {
    animation: fadeInUp 0.6s ease-out 0.2s both;
}

.footer-offer-banner.bali-animate-in .rotating-offers {
    animation: fadeInUp 0.6s ease-out 0.4s both;
}

/* Initial hidden state for content */
.footer-offer-banner .offer-text,
.footer-offer-banner .rotating-offers {
    opacity: 0;
    transform: translateY(30px);
}

.footer-offer-banner.bali-animate-in .offer-text,
.footer-offer-banner.bali-animate-in .rotating-offers {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 768px) {
    .footer-offer-banner {
        flex-direction: column;
        text-align: center;
        align-items: center;
        padding: 25px 20px;
        gap: 25px;

        /* Mobile initial state */
        transform: translateY(80px);
    }

    .footer-offer-banner.bali-animate-in {
        transform: translateY(0);
    }

    .offer-text {
        max-width: 100%;
        text-align: center;
    }

    .offer-text h3 {
        font-size: 1.4rem;
    }

    .offer-text p {
        font-size: 1rem;
    }

    .offers-title {
        font-size: 1.5rem;
    }

    .offer-slide {
        font-size: 1.3rem;
    }

    .price {
        font-size: 1.3rem;
    }

    /* Mobile overlay adjustments */
    .footer-offer-overlay-container {
        margin-bottom: -100px;
    }

    .footer-offer-overlay-container .footer-offer-banner {
        transform: translateY(120px);
        width: 100vw;
        margin-left: calc(-50vw + 50%);
    }

    .footer-offer-overlay-container .footer-offer-banner.bali-animate-in {
        transform: translateY(0);
    }

    .footer-offer-overlay-container ~ .site-footer,
    .site-footer:has(.footer-offer-overlay-container) {
        padding-top: 120px;
    }

    .footer-offer-floating {
        margin-bottom: -60px;
    }

    .footer-offer-floating .footer-offer-banner {
        transform: translateY(60px) scale(0.95);
        width: 100vw;
        margin-left: calc(-50vw + 50%);
    }

    .footer-offer-floating .footer-offer-banner.bali-animate-in {
        transform: translateY(0) scale(1);
    }

    .footer-offer-floating ~ .site-footer {
        padding-top: 80px;
    }

    .footer-offer-fixed-overlay .footer-offer-banner {
        padding: 12px 15px;
    }

    body:has(.footer-offer-fixed-overlay) {
        padding-bottom: 100px;
    }
}

@media (max-width: 480px) {
    .footer-offer-banner {
        padding: 15px 20px;
        margin: 15px auto;
        border-radius: 8px;
        transform: translateY(60px);
    }

    .footer-offer-banner.bali-animate-in {
        transform: translateY(0);
    }

    .offer-text h3 {
        font-size: 1.3rem;
    }

    .offer-text p {
        font-size: 0.95rem;
    }

    .offer-btn {
        padding: 10px 20px;
        font-size: 0.95rem;
    }

    .offers-title {
        font-size: 1.3rem;
    }

    .offer-slide {
        font-size: 1.1rem;
    }

    .offer-slide p {
        font-size: 1rem;
    }

    .price {
        font-size: 1.2rem;
    }

    /* Small mobile overlay adjustments */
    .footer-offer-overlay-container {
        margin-bottom: -80px;
    }

    .footer-offer-overlay-container .footer-offer-banner {
        transform: translateY(100px);
    }

    .footer-offer-overlay-container .footer-offer-banner.bali-animate-in {
        transform: translateY(0);
    }

    .footer-offer-overlay-container ~ .site-footer,
    .site-footer:has(.footer-offer-overlay-container) {
        padding-top: 100px;
    }

    body:has(.footer-offer-fixed-overlay) {
        padding-bottom: 90px;
    }
}

/* ========================================
   WIDGET SPECIFIC STYLES
   ======================================== */

/* Widget-specific styling */
.widget.bali-footer-offer-widget {
    margin-bottom: 30px;
}

.widget.bali-footer-offer-widget .footer-offer-banner {
    margin: 0;
}

/* Admin widget form styling */
.bali-widget-form h4 {
    margin: 15px 0 10px 0;
    padding: 8px 0;
    border-bottom: 2px solid var(--bali-offer-primary);
    color: var(--bali-offer-secondary);
    font-weight: 600;
}

.bali-widget-form .widefat {
    margin-bottom: 5px;
}

/* ========================================
   ACCESSIBILITY & SPECIAL CASES
   ======================================== */

/* Accessibility improvements */
.offer-btn:focus {
    outline: 2px solid var(--bali-offer-accent);
    outline-offset: 2px;
}

/* Focus visible for keyboard navigation */
.offer-btn:focus-visible {
    outline: 3px solid var(--bali-offer-accent);
    outline-offset: 3px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --bali-overlay-bg: rgba(0, 100, 0, 0.98);
        --bali-overlay-border: #ffffff;
    }

    .footer-offer-banner {
        background: #006600;
        border: 2px solid #ffffff;
    }

    .offer-btn {
        border: 2px solid var(--bali-offer-secondary);
    }

    .offers-title,
    .price {
        color: #ffff00;
        text-shadow: 1px 1px 2px #000000;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .footer-offer-banner,
    .footer-offer-banner *,
    .offer-slide,
    .offer-btn,
    .footer-offer-overlay-container .footer-offer-banner,
    .footer-offer-floating .footer-offer-banner,
    .footer-offer-fixed-overlay,
    .footer-offer-absolute .footer-offer-banner {
        animation: none !important;
        transition: none !important;
    }

    .footer-offer-banner {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    .footer-offer-banner .offer-text,
    .footer-offer-banner .rotating-offers {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    .offer-btn:hover,
    .footer-offer-floating .footer-offer-banner.bali-animate-in:hover {
        transform: none !important;
    }
}

/* Print styles */
@media print {
    .footer-offer-banner {
        background: var(--bali-offer-primary) !important;
        color: var(--bali-offer-white) !important;
        box-shadow: none !important;
        position: static !important;
        transform: none !important;
        opacity: 1 !important;
    }

    .footer-offer-banner .offer-text,
    .footer-offer-banner .rotating-offers {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    .offer-btn {
        background: var(--bali-offer-white) !important;
        color: var(--bali-offer-secondary) !important;
        border: 2px solid var(--bali-offer-secondary) !important;
    }

    .footer-offer-fixed-overlay,
    .footer-offer-floating,
    .footer-offer-overlay-container {
        position: static !important;
        margin: 0 !important;
        z-index: auto !important;
    }
}

/* ========================================
   DARK MODE SUPPORT
   ======================================== */

@media (prefers-color-scheme: dark) {
    :root {
        --bali-overlay-bg: rgba(56, 142, 60, 0.95);
        --bali-overlay-border: rgba(255, 255, 255, 0.2);
    }

    .footer-offer-banner {
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    }

    .offer-btn {
        background-color: rgba(255, 255, 255, 0.95);
        color: var(--bali-offer-secondary) !important;
    }
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Hide banner utility */
.footer-offer-hidden {
    display: none !important;
}

/* Compact version utility */
.footer-offer-compact .footer-offer-banner {
    padding: 20px 30px;
}

.footer-offer-compact .offer-text h3 {
    font-size: 1.3rem;
}

.footer-offer-compact .offers-title {
    font-size: 1.4rem;
}

/* Contained version utility - for when you want the old boxed style */
.footer-offer-contained .footer-offer-banner {
    margin: 20px auto;
    border-radius: var(--bali-offer-border-radius);
    box-shadow: 0 4px 12px var(--bali-offer-shadow);
    width: auto;
    margin-left: auto;
    margin-right: auto;
}

/* Half overlay container - only affects when in this specific container */
.footer-offer-half-overlay {
    position: relative;
    z-index: 50;
    margin-bottom: -60px; /* Half of banner height */
    margin-top: -60px;    /* Pull up into content */
}

/* Banner styling ONLY when inside half overlay container */
.footer-offer-half-overlay .footer-offer-banner {
    position: relative;
    z-index: 55;
    margin: 0 auto;
    background: rgba(76, 175, 80, 0.92);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.15);
    min-height: 120px;
    display: flex;
    align-items: center;

    /* Visual enhancements for split effect */
    border-top: 3px solid rgba(255, 255, 255, 0.3);
    border-bottom: 3px solid rgba(0, 0, 0, 0.2);

    /* Initial state for half overlay */
    opacity: 0;
    transform: translateY(100px);
}

.footer-offer-half-overlay .footer-offer-banner.bali-animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Content padding ONLY when half overlay is present */
body:has(.footer-offer-half-overlay) .site-content,
body:has(.footer-offer-half-overlay) #content,
body:has(.footer-offer-half-overlay) .entry-content {
    padding-bottom: 80px;
}

/* Footer padding ONLY when half overlay is present */
body:has(.footer-offer-half-overlay) .site-footer {
    padding-top: 80px;
    position: relative;
    z-index: 45;
}

/* Fallback for browsers that don't support :has() */
.footer-offer-half-overlay-active .site-content,
.footer-offer-half-overlay-active #content,
.footer-offer-half-overlay-active .entry-content {
    padding-bottom: 80px;
}

.footer-offer-half-overlay-active .site-footer {
    padding-top: 80px;
    position: relative;
    z-index: 45;
}

/* Mobile adjustments - ONLY for half overlay */
@media (max-width: 768px) {
    .footer-offer-half-overlay {
        margin-bottom: -50px;
        margin-top: -50px;
    }

    .footer-offer-half-overlay .footer-offer-banner {
        min-height: 100px;
        padding: 15px 20px;
        transform: translateY(80px);
    }

    .footer-offer-half-overlay .footer-offer-banner.bali-animate-in {
        transform: translateY(0);
    }

    body:has(.footer-offer-half-overlay) .site-content,
    body:has(.footer-offer-half-overlay) #content,
    body:has(.footer-offer-half-overlay) .entry-content,
    .footer-offer-half-overlay-active .site-content,
    .footer-offer-half-overlay-active #content,
    .footer-offer-half-overlay-active .entry-content {
        padding-bottom: 70px;
    }

    body:has(.footer-offer-half-overlay) .site-footer,
    .footer-offer-half-overlay-active .site-footer {
        padding-top: 70px;
    }
}

@media (max-width: 480px) {
    .footer-offer-half-overlay {
        margin-bottom: -40px;
        margin-top: -40px;
    }

    .footer-offer-half-overlay .footer-offer-banner {
        min-height: 80px;
        padding: 12px 15px;
        transform: translateY(60px);
    }

    .footer-offer-half-overlay .footer-offer-banner.bali-animate-in {
        transform: translateY(0);
    }

    body:has(.footer-offer-half-overlay) .site-content,
    body:has(.footer-offer-half-overlay) #content,
    body:has(.footer-offer-half-overlay) .entry-content,
    .footer-offer-half-overlay-active .site-content,
    .footer-offer-half-overlay-active #content,
    .footer-offer-half-overlay-active .entry-content {
        padding-bottom: 60px;
    }

    body:has(.footer-offer-half-overlay) .site-footer,
    .footer-offer-half-overlay-active .site-footer {
        padding-top: 60px;
    }
}