/*
Theme Name: Jolly Cinema Custom
Theme URI: http://jollydistrict.com
Author: Jolly District
Author URI: http://jollydistrict.com
Description: High-fidelity custom theme for Jolly Cinema, based on the Yotako design and built with Tailwind CSS.
Version: 1.0.0
Text Domain: jolly-cinema-custom
*/

/* Base styles for the theme */
/* ===== FULL WIDTH RESET ===== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

body {
    background-color: #000000 !important;
    color: #ffffff;
    margin: 0 !important;
    padding: 0 !important;
    padding-top: 6rem !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    position: relative;
}

/* WordPress wrapper divs - allow centering while maintaining base layout */
#page,
.site,
#main-content,
.site-content,
#content {
    width: 100% !important;
    margin: 0;
    padding: 0;
}

/* Main element - removed !important from max-width to allow containers to work */
#primary,
.site-main {
    width: 100%;
    margin: 0 auto;
}

/* ===== ELEMENTOR OVERRIDES ===== */
/* Elementor adds padding/margin to its sections and containers */
.elementor-section,
.elementor-container,
.elementor-column-wrap,
.elementor-widget-wrap,
.e-con,
.e-con-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Elementor Page Builder body class fix */
body.elementor-page .site-main,
body.elementor-page #primary {
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}




/* Global Premium Background Design System - Subtly Centered Glow */
body::before {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle at center, 
        rgba(136, 5, 206, 0.45) 0%, 
        rgba(160, 31, 156, 0.15) 40%, 
        rgba(255, 0, 108, 0.05) 70%, 
        transparent 70%);
    filter: blur(80px);
    z-index: -1;
    pointer-events: none;
    opacity: 0.4;
}

body::after {
    content: "";
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.05) 0%, transparent 60%);
    z-index: -1;
    pointer-events: none;
    opacity: 0.3;
}

html::after {
    content: "";
    position: fixed;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.015) 1px, transparent 1px);
    background-size: 60px 60px;
    z-index: -1;
    pointer-events: none;
    opacity: 0.2;
}

/* Base body styles */
body {
    background-color: #000000 !important;
    color: #ffffff;
    margin: 0 !important;
    padding: 0 !important;
    padding-top: 6rem !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    position: relative;
}

/* Keep page content above the global glow */
#page,
.site,
#main-content,
.site-main,
.woocommerce,
.woocommerce-page,
body.single-product .site-main,
body.woocommerce-cart .site-main,
body.woocommerce-checkout .site-main {
    position: relative;
    z-index: 1;
}

/* Global Prevent Horizontal Scroll for Mobile and Add Breathing Room */
@media (max-width: 768px) {
    html,
    body {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Add horizontal padding to main content areas on mobile */
    .container,
    .w-full.px-4,
    .site-main section > div,
    .theater-info-card {
        padding-left: 0rem !important;
        padding-right: 0rem !important;
    }

  @media (max-width: 768px) {
    .hero-carousel-section > div {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

    /* Remove extra mobile side padding on single product pages */
    body.single-product .container,
    body.single-product .site-main,
    body.single-product .site-main section > div,
    body.single-product .woocommerce,
    body.single-product .woocommerce-product-gallery,
    body.single-product .product {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Ensure header/footer also have padding on mobile */
    #main-header .container,
    #colophon .container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}



/* CTA Highlight and Blink — Premium Glowing Button */
@keyframes cta-blink {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 0 20px 4px rgba(244, 0, 108, 0.6), 0 0 60px 10px rgba(160, 31, 156, 0.3);
        background: linear-gradient(135deg, #A01F9C, #f4006c);
    }
    50% { 
        transform: scale(1.1);
        box-shadow: 0 0 40px 12px rgba(244, 0, 108, 1), 0 0 90px 20px rgba(160, 31, 156, 0.6);
        background: linear-gradient(135deg, #f4006c, #A01F9C);
    }
}

@keyframes cta-ring {
    0%   { transform: scale(0.9); opacity: 0.8; }
    100% { transform: scale(1.7); opacity: 0; }
}

.btn-booknow {
    animation: cta-blink 1.8s infinite ease-in-out !important;
    border: 2px solid rgba(255, 255, 255, 0.25) !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 14px 40px !important;
    font-size: 1.1rem !important;
    letter-spacing: 0.25em !important;
    border-radius: 16px !important;
}

/* Glow ring that expands outward */
.btn-booknow::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    border: 2px solid rgba(244, 0, 108, 0.8);
    animation: cta-ring 1.8s infinite ease-out;
    pointer-events: none;
}

/* Light sweep shine */
.btn-booknow::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -80%;
    width: 40%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transform: rotate(25deg);
    animation: cta-sweep 2.5s infinite;
    pointer-events: none;
}

@keyframes cta-sweep {
    0%   { left: -80%; }
    40%  { left: 130%; }
    100% { left: 130%; }
}

/* ===== 2XL+ SCREEN BREATHING ROOM ===== */
/* Prevent content from stretching to the very edges on ultra-wide screens */
@media (min-width: 1536px) {
    /* Global alignment for 2XL+ Screens */
    .container, 
    .site-header .container, 
    .md\:container,
    .max-w-4xl,
    .max-w-6xl,
    footer .container {
        max-width: 1440px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 5% !important;
        padding-right: 5% !important;
    }

    .site-main, 
    #main-header .container,
    #colophon .container,
    .checkout-layout-grid {
        max-width: 1440px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Ensure checkout and cards don't bridge the entire screen width */
    .checkout-layout-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 50px;
        padding: 20px 0 160px;
        background: transparent;
        color: #fff;
        min-height: 100vh;
    }
    .booking-card,
    .theater-info-card {
        max-width: 1440px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* =========================================
   REMOVE LEFT & RIGHT PADDING GLOBALLY
   (WITHOUT TOUCHING EXISTING CODE)
========================================= */

/* Remove container padding */
.no-side-padding .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}

/* Override Tailwind padding classes */
.no-side-padding .px-6,
.no-side-padding .px-4,
.no-side-padding .px-8,
.no-side-padding .px-10,
.no-side-padding .px-12 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Mobile padding fixes */
.no-side-padding .px-2 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Prevent overflow issues */
.no-side-padding {
    overflow-x: hidden;
}

/* Full width sections */
.no-side-padding section {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Fix inner content alignment (optional tweak) */
.no-side-padding .container > * {
    padding-left: 0 !important;
    padding-right: 0 !important;
}