/*
Theme Name: Royal Elementor Kit Child
Theme URI: https://dev.partybooth.ae/
Description: Child theme for Royal Elementor Kit – adds mobile & tablet responsive fixes for partybooth.ae
Author: PartyBooth Dev
Author URI: https://dev.partybooth.ae/
Template: royal-elementor-kit
Version: 1.0.0
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: royal-elementor-kit-child
*/


/* ==========================================================================
   0. GLOBAL RESPONSIVE FOUNDATIONS
   ========================================================================== */

html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}

img {
    max-width: 100%;
    height: auto;
}

.elementor-section-wrap,
.elementor .elementor-element,
.e-con,
.e-con-inner {
    max-width: 100vw;
}

/* Mobile nav fix is injected via functions.php in wp_footer to ensure
   it loads AFTER all Elementor / WPR stylesheets. */


/* ==========================================================================
   1. TABLET — max-width: 1024px
   ========================================================================== */

@media screen and (max-width: 1024px) {

    /* --- Prevent horizontal overflow --- */
    body,
    #page-wrap,
    .elementor {
        overflow-x: hidden !important;
        width: 100% !important;
    }

    /* --- Header / Navigation --- */
    .elementor-296 .elementor-element.elementor-element-09ec59c {
        --z-index: 99999 !important;
    }

    .elementor-296 .elementor-element.elementor-element-09ec59c .e-con-inner {
        flex-wrap: wrap;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .elementor-296 .elementor-element.elementor-element-4004c3a {
        flex-wrap: wrap;
    }

    .wpr-nav-menu-container.wpr-nav-menu-horizontal {
        display: none !important;
    }

    .wpr-mobile-nav-menu-container {
        display: block !important;
    }

    .wpr-mobile-toggle-wrap {
        display: flex !important;
    }

    /* --- Hero Section --- */
    .elementor-1367 .elementor-element.elementor-element-2f155f5 {
        min-height: auto !important;
        padding: 80px 20px 60px !important;
    }

    .elementor-1367 .elementor-element.elementor-element-2f155f5 .e-con-inner {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .wpr-advanced-text {
        font-size: 2.2rem !important;
        line-height: 1.3 !important;
    }

    .wpr-advanced-text .wpr-advanced-text-preffix {
        font-size: 2.2rem !important;
    }

    .wpr-anim-text b {
        font-size: 1.4rem !important;
    }

    /* --- Booth Cards Grid (4-col → 2-col) --- */
    .elementor-1367 .elementor-element.elementor-element-6a86718 {
        --grid-template-columns: repeat(2, 1fr) !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .wpr-promo-box {
        min-height: 280px !important;
    }

    /* --- Why Us Section (2-col stays, tighter) --- */
    .elementor-1367 .elementor-element.elementor-element-0db9bdc .e-con-inner {
        flex-wrap: wrap;
        gap: 20px;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .elementor-1367 .elementor-element.elementor-element-96c76af,
    .elementor-1367 .elementor-element.elementor-element-0ae2919 {
        width: 48% !important;
        flex: 0 0 48% !important;
    }

    /* --- Features Section (2x2 grid) --- */
    .elementor-1367 .elementor-element.elementor-element-0252c61,
    .elementor-1367 .elementor-element.elementor-element-64ac134 {
        --grid-template-columns: repeat(2, 1fr) !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* --- Gallery (already 3 cols on tablet via wpr classes) --- */

    /* --- Testimonials Section --- */
    .elementor-1367 .elementor-element.elementor-element-7da162b .e-con-inner {
        flex-wrap: wrap;
    }

    .elementor-1367 .elementor-element.elementor-element-12018b4,
    .elementor-1367 .elementor-element.elementor-element-7a8cffe {
        width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* --- Blog Section --- */
    .elementor-1367 .elementor-element.elementor-element-f21f006 .e-con-inner {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* --- Footer --- */
    .elementor-293 .elementor-element.elementor-element-223a18c {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .elementor-293 .elementor-element.elementor-element-117d5de {
        --flex-direction: column !important;
        flex-direction: column !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 30px 20px;
    }

    .elementor-293 .elementor-element.elementor-element-eb62c1b {
        --width: 100% !important;
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        text-align: center;
    }

    .elementor-293 .elementor-element.elementor-element-ccaac1f,
    .elementor-293 .elementor-element.elementor-element-1b1e640,
    .elementor-293 .elementor-element.elementor-element-2fd260b {
        --width: 100% !important;
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    /* --- About Page: Hero content margins (200px on all sides in desktop) --- */
    .elementor-1549 .elementor-element.elementor-element-fc5e58e {
        --margin-top: 30px !important;
        --margin-bottom: 30px !important;
        --margin-left: 30px !important;
        --margin-right: 30px !important;
        margin: 30px !important;
    }

    /* --- About Page: Hero heading --- */
    .elementor-1549 .elementor-element.elementor-element-4ca0018 .wpr-dual-title {
        font-size: 1.6rem !important;
        line-height: 1.3 !important;
    }

    .elementor-1549 .elementor-element.elementor-element-4ca0018 .wpr-dual-title .second {
        font-size: 2.2rem !important;
    }

    /* --- About Page: Hero background fix --- */
    .elementor-1549 .elementor-element.elementor-element-4b25e9f:not(.elementor-motion-effects-element-type-background),
    .elementor-1549 .elementor-element.elementor-element-4b25e9f > .elementor-motion-effects-container > .elementor-motion-effects-layer {
        background-position: center center !important;
        background-size: cover !important;
    }

    .elementor-1549 .elementor-element.elementor-element-4b25e9f {
        --min-height: auto !important;
        min-height: auto !important;
    }

    /* --- About Page: Hide empty spacer section on tablet --- */
    .elementor-1549 .elementor-element.elementor-element-c185c7e {
        display: none !important;
    }

    /* --- About Page: "Capture Joyful Moments" content section --- */
    .elementor-1549 .e-con.e-parent:last-of-type > .e-con-inner > .e-con:first-child {
        --padding-top: 25px !important;
        --padding-bottom: 25px !important;
        padding-top: 25px !important;
        padding-bottom: 25px !important;
    }

    .elementor-1549 h1 {
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
        text-align: center !important;
        margin-bottom: 15px !important;
    }

    .elementor-1549 .elementor-icon-list-items {
        justify-content: center !important;
    }

    .elementor-1549 .elementor-widget-button .elementor-button-wrapper {
        text-align: center !important;
    }

    /* --- All Section Containers --- */
    .e-con.e-parent > .e-con-inner {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* --- Images --- */
    .elementor-widget-image img,
    .wpr-promo-box-bg-image,
    .wpr-grid-image-wrap img,
    .wpr-logo-image img {
        width: 100%;
        height: auto;
    }
}


/* ==========================================================================
   2. MOBILE — max-width: 768px
   ========================================================================== */

@media screen and (max-width: 768px) {

    /* --- Overflow control --- */
    body,
    html,
    #page-wrap {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    .elementor,
    .elementor-element,
    .e-con,
    .e-con-inner,
    .e-con.e-parent,
    .e-con.e-child,
    .elementor-widget-wrap,
    .elementor-widget {
        max-width: 100% !important;
    }

    /* --- Header / Navigation --- */
    .elementor-296 .elementor-element.elementor-element-09ec59c {
        --z-index: 99999 !important;
        padding: 10px 15px !important;
    }

    .elementor-296 .elementor-element.elementor-element-09ec59c .e-con-inner {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .elementor-296 .elementor-element.elementor-element-4004c3a {
        flex-wrap: wrap !important;
        border-radius: 12px !important;
    }

    .elementor-296 .elementor-element.elementor-element-5cf1342 {
        width: 40% !important;
        flex: 0 0 40% !important;
    }

    .elementor-296 .elementor-element.elementor-element-7cbacd4 {
        width: 60% !important;
        flex: 0 0 60% !important;
    }

    .wpr-nav-menu-container.wpr-nav-menu-horizontal {
        display: none !important;
    }

    .wpr-mobile-nav-menu-container {
        display: block !important;
    }

    .wpr-mobile-toggle-wrap {
        display: flex !important;
        text-align: right;
        justify-content: flex-end;
    }

    /* "Book now" / "Launch App" button container - hide on mobile */
    .elementor-296 .elementor-element.elementor-element-9038da8 {
        display: none !important;
    }

    /* --- Hero Section --- */
    .elementor-1367 .elementor-element.elementor-element-2f155f5 {
        min-height: auto !important;
        padding: 60px 15px 40px !important;
        background-size: cover !important;
        background-position: center !important;
    }

    .elementor-1367 .elementor-element.elementor-element-2f155f5 .e-con-inner {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .elementor-1367 .elementor-element.elementor-element-f7bef2e {
        width: 100% !important;
        padding: 0 !important;
    }

    .wpr-advanced-text {
        font-size: 1.6rem !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }

    .wpr-advanced-text .wpr-advanced-text-preffix {
        font-size: 1.6rem !important;
    }

    .wpr-anim-text b {
        font-size: 1rem !important;
    }

    /* Hero description text */
    .elementor-1367 .elementor-element.elementor-element-1c96abe {
        text-align: center !important;
        font-size: 14px !important;
    }

    /* Hero CTA button */
    .elementor-1367 .elementor-element.elementor-element-071e081 {
        text-align: center !important;
    }

    .elementor-1367 .elementor-element.elementor-element-071e081 .wpr-button-wrap {
        justify-content: center;
    }

    /* --- Booth Cards Grid (4-col → 1-col) --- */
    .elementor-1367 .elementor-element.elementor-element-6a86718 {
        --grid-template-columns: 1fr !important;
        grid-template-columns: 1fr !important;
    }

    .wpr-promo-box {
        min-height: 250px !important;
    }

    /* --- Section Headings --- */
    .elementor-heading-title.elementor-size-default {
        font-size: 1.4rem !important;
        line-height: 1.3 !important;
    }

    h2.elementor-heading-title {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* --- "Why Us" Section (2-col → 1-col stack) --- */
    .elementor-1367 .elementor-element.elementor-element-0db9bdc .e-con-inner {
        flex-direction: column !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .elementor-1367 .elementor-element.elementor-element-96c76af,
    .elementor-1367 .elementor-element.elementor-element-0ae2919 {
        width: 100% !important;
        flex: 0 0 100% !important;
    }

    .elementor-1367 .elementor-element.elementor-element-0ae2919 img {
        width: 100% !important;
        height: auto !important;
        max-width: 320px;
        margin: 0 auto;
        display: block;
    }

    /* --- Features Section (grids → 1-col) --- */
    .elementor-1367 .elementor-element.elementor-element-670c8f8 {
        flex-direction: column !important;
    }

    .elementor-1367 .elementor-element.elementor-element-0252c61,
    .elementor-1367 .elementor-element.elementor-element-64ac134 {
        --grid-template-columns: 1fr !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }

    /* --- Gallery Section --- */
    .elementor-1367 .elementor-element.elementor-element-775f573 .e-con-inner {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .wpr-media-grid .wpr-grid-item {
        width: 50% !important;
    }

    /* --- Testimonials Section (stack) --- */
    .elementor-1367 .elementor-element.elementor-element-7da162b .e-con-inner {
        flex-direction: column !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .elementor-1367 .elementor-element.elementor-element-12018b4,
    .elementor-1367 .elementor-element.elementor-element-7a8cffe {
        width: 100% !important;
        flex: 0 0 100% !important;
    }

    .wpr-testimonial-item {
        padding: 15px !important;
    }

    .wpr-testimonial-content {
        font-size: 14px !important;
    }

    /* --- Blog Section --- */
    .elementor-1367 .elementor-element.elementor-element-f21f006 .e-con-inner {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .wpr-grid-filters {
        flex-wrap: wrap !important;
        gap: 5px;
        justify-content: center;
    }

    .wpr-grid-filters li {
        margin-bottom: 5px;
    }

    /* --- Footer (all columns → stacked) --- */
    .elementor-293 .elementor-element.elementor-element-223a18c {
        padding: 40px 15px 20px !important;
    }

    .elementor-293 .elementor-element.elementor-element-117d5de {
        --flex-direction: column !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 25px !important;
    }

    .elementor-293 .elementor-element.elementor-element-eb62c1b,
    .elementor-293 .elementor-element.elementor-element-ccaac1f,
    .elementor-293 .elementor-element.elementor-element-1b1e640,
    .elementor-293 .elementor-element.elementor-element-2fd260b {
        --width: 100% !important;
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-right: 0 !important;
        text-align: center !important;
    }

    /* --- About Page: Hero section --- */
    .elementor-1549 .elementor-element.elementor-element-4b25e9f {
        --min-height: auto !important;
        min-height: auto !important;
        --padding-top: 30px !important;
        --padding-bottom: 30px !important;
        --padding-left: 0px !important;
        --padding-right: 0px !important;
        padding: 30px 0 !important;
    }

    .elementor-1549 .elementor-element.elementor-element-4b25e9f:not(.elementor-motion-effects-element-type-background),
    .elementor-1549 .elementor-element.elementor-element-4b25e9f > .elementor-motion-effects-container > .elementor-motion-effects-layer {
        background-position: center center !important;
        background-size: cover !important;
    }

    .elementor-1549 .elementor-element.elementor-element-fc5e58e {
        --margin-top: 10px !important;
        --margin-bottom: 10px !important;
        --margin-left: 0px !important;
        --margin-right: 0px !important;
        margin: 10px 0 !important;
        width: 100% !important;
        --width: 100% !important;
    }

    .elementor-1549 .elementor-element.elementor-element-7368118 {
        --container-widget-width: 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .elementor-1549 .elementor-element.elementor-element-7368118 .elementor-image-box-wrapper {
        text-align: center !important;
    }

    .elementor-1549 .elementor-element.elementor-element-7368118 .elementor-image-box-title {
        font-size: 1rem !important;
        text-align: center !important;
    }

    .elementor-1549 .elementor-element.elementor-element-4ca0018 {
        text-align: center !important;
    }

    .elementor-1549 .elementor-element.elementor-element-4ca0018 .wpr-dual-title {
        font-size: 1.3rem !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }

    .elementor-1549 .elementor-element.elementor-element-4ca0018 .wpr-dual-title .second {
        font-size: 2rem !important;
        line-height: 1.2 !important;
    }

    .elementor-1549 .elementor-element.elementor-element-e14b45b {
        font-size: 13px !important;
        line-height: 1.6 !important;
        text-align: center !important;
        padding: 0 15px !important;
    }

    .elementor-1549 .elementor-element.elementor-element-e4c4029 {
        text-align: center !important;
    }

    .elementor-1549 .elementor-element.elementor-element-e4c4029 .wpr-button-wrap {
        justify-content: center !important;
    }

    /* --- About Page: Hide empty spacer section on mobile --- */
    .elementor-1549 .elementor-element.elementor-element-c185c7e {
        display: none !important;
    }

    /* --- About Page: "Capture Joyful Moments" content --- */
    .elementor-1549 .e-con.e-parent:last-of-type > .e-con-inner > .e-con:first-child {
        --padding-top: 20px !important;
        --padding-bottom: 20px !important;
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    .elementor-1549 h1 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        text-align: center !important;
        margin-bottom: 12px !important;
    }

    .elementor-1549 .elementor-icon-list-items {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    .elementor-1549 .elementor-icon-list-item {
        margin-bottom: 5px !important;
    }

    .elementor-1549 .elementor-widget-button .elementor-button-wrapper {
        text-align: center !important;
        margin-top: 10px !important;
    }

    .elementor-1549 .elementor-button {
        display: inline-block !important;
        padding: 12px 30px !important;
    }

    /* --- About Page: Carousel section --- */
    .elementor-1549 .wpr-image-carousel-wrap {
        gap: 10px !important;
    }

    .elementor-1549 .wpr-image-carousel-wrap .slick-slide img {
        border-radius: 8px !important;
    }

    .elementor-293 .elementor-element.elementor-element-eb62c1b .wpr-logo {
        justify-content: center;
    }

    .elementor-293 .elementor-element.elementor-element-eb62c1b .wpr-logo-image {
        margin: 0 auto;
    }

    .elementor-293 .elementor-heading-title {
        text-align: center !important;
    }

    .elementor-293 .elementor-widget-text-editor {
        text-align: center !important;
    }

    .elementor-293 .elementor-social-icons-wrapper {
        justify-content: center !important;
    }

    /* Footer copyright bar */
    .elementor-293 .elementor-element.elementor-element-79a77be {
        text-align: center !important;
    }

    /* --- All Section Containers --- */
    .e-con.e-parent > .e-con-inner {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* --- All Elementor Container children → full width --- */
    .e-con.e-parent .e-con.e-child {
        max-width: 100% !important;
    }

    /* --- Typography scaling --- */
    .elementor-widget-text-editor {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    .elementor-image-box-title {
        font-size: 1.3rem !important;
    }

    /* --- Icon list items --- */
    .elementor-icon-list-items {
        padding-left: 0 !important;
    }

    .elementor-icon-list-text {
        font-size: 14px !important;
    }

    /* --- Buttons --- */
    .wpr-button-wrap {
        text-align: center !important;
    }

    .wpr-button {
        padding: 10px 20px !important;
        font-size: 14px !important;
    }

    /* --- Images universal --- */
    .elementor-widget-image img {
        width: 100% !important;
        height: auto !important;
    }

    .wpr-promo-box-bg-image {
        background-size: cover !important;
        background-position: center !important;
    }
}


/* ==========================================================================
   3. SMALL MOBILE — max-width: 480px
   ========================================================================== */

@media screen and (max-width: 480px) {

    /* --- Header tighter --- */
    .elementor-296 .elementor-element.elementor-element-09ec59c {
        padding: 8px 10px !important;
    }

    .elementor-296 .elementor-element.elementor-element-5cf1342 {
        width: 35% !important;
        flex: 0 0 35% !important;
    }

    .elementor-296 .elementor-element.elementor-element-7cbacd4 {
        width: 65% !important;
        flex: 0 0 65% !important;
    }

    .wpr-logo-image {
        max-width: 60px !important;
    }

    /* --- Hero Section --- */
    .elementor-1367 .elementor-element.elementor-element-2f155f5 {
        padding: 50px 10px 30px !important;
    }

    .wpr-advanced-text {
        font-size: 1.25rem !important;
    }

    .wpr-advanced-text .wpr-advanced-text-preffix {
        font-size: 1.25rem !important;
    }

    .wpr-anim-text b {
        font-size: 0.85rem !important;
    }

    /* --- Section headings smaller --- */
    .elementor-heading-title.elementor-size-default {
        font-size: 1.15rem !important;
    }

    /* --- Booth cards --- */
    .wpr-promo-box {
        min-height: 220px !important;
    }

    .wpr-promo-box-title span {
        font-size: 1rem !important;
    }

    .wpr-promo-box-description {
        font-size: 13px !important;
    }

    /* --- Gallery (1-col on small mobile) --- */
    .wpr-media-grid .wpr-grid-item {
        width: 100% !important;
    }

    /* --- Blog filters scroll --- */
    .wpr-grid-filters {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        padding-bottom: 8px;
    }

    .wpr-grid-filters li {
        flex-shrink: 0;
    }

    /* --- Testimonials --- */
    .wpr-testimonial-content {
        font-size: 13px !important;
        line-height: 1.5 !important;
    }

    .wpr-testimonial-name {
        font-size: 14px !important;
    }

    .wpr-testimonial-title {
        font-size: 12px !important;
    }

    /* --- About Page: Hero --- */
    .elementor-1549 .elementor-element.elementor-element-4b25e9f {
        --padding-top: 20px !important;
        --padding-bottom: 20px !important;
        padding: 20px 0 !important;
    }

    .elementor-1549 .elementor-element.elementor-element-4ca0018 .wpr-dual-title {
        font-size: 1.15rem !important;
    }

    .elementor-1549 .elementor-element.elementor-element-4ca0018 .wpr-dual-title .second {
        font-size: 1.6rem !important;
    }

    .elementor-1549 .elementor-element.elementor-element-e14b45b {
        font-size: 12px !important;
        padding: 0 10px !important;
    }

    .elementor-1549 h1 {
        font-size: 1.3rem !important;
    }

    /* --- Footer --- */
    .elementor-293 .elementor-element.elementor-element-223a18c {
        padding: 30px 10px 15px !important;
    }

    .elementor-293 .elementor-heading-title {
        font-size: 13px !important;
    }

    .elementor-293 .elementor-element.elementor-element-38be365 .elementor-heading-title {
        font-size: 11px !important;
        line-height: 1.5 !important;
    }

    .elementor-293 .elementor-widget-text-editor {
        font-size: 12px !important;
    }

    /* --- Typography --- */
    .elementor-widget-text-editor {
        font-size: 13px !important;
    }

    .elementor-icon-list-text {
        font-size: 13px !important;
    }

    /* --- Buttons --- */
    .wpr-button {
        padding: 8px 16px !important;
        font-size: 13px !important;
    }

    /* --- All containers padding --- */
    .e-con.e-parent > .e-con-inner {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* --- Images --- */
    .elementor-widget-image img {
        width: 100% !important;
        height: auto !important;
    }
}