/**
 * Creedy Child — Responsive Fixes
 *
 * Fixes for layout breakage, non-responsive slider images,
 * and Elementor page overflow issues on all devices.
 *
 * IMPORTANT: After updating this file, clear Elementor cache:
 * 1. WordPress Admin → Elementor → Tools → Regenerate Files & Data
 * 2. Or run: wp elementor flush-css
 * 3. Hard refresh browser (Cmd+Shift+R)
 */

/* ============================================================
   0. GLOBAL OVERFLOW PROTECTION (load first)
   ============================================================ */

/* Prevent ANY element from causing horizontal scroll */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
}

/* Theme wrapper should not constrain Elementor sections */
.wrapper,
.inner-wrapper {
    overflow-x: visible !important;
    max-width: none !important;
    width: 100% !important;
}

/* ============================================================
   1. GLOBAL IMAGE RESPONSIVE (reinforce parent theme)
   ============================================================ */

/* Ensure ALL images, videos, iframes are responsive */
img,
video,
picture img,
figure img {
    max-width: 100% !important;
    height: auto !important;
}

/* Fix Elementor images with hard-coded heights */
.elementor img[style*="height"],
.elementor-widget-image img {
    height: auto !important;
}

/* Prevent iframes from overflowing */
.elementor iframe,
iframe {
    max-width: 100% !important;
}

/* ============================================================
   2. ELEMENTOR SLIDER / CAROUSEL RESPONSIVE
   ============================================================ */

/* 
 * IMPORTANT: The hero slider (wdt-advanced-carousel) uses background-image
 * on div.wdt-section-bgeffects-image, NOT <img> tags. The <img> tags inside
 * slides are hidden (display:none) helper elements.
 * 
 * Do NOT apply width:100% to wdt-advanced-carousel slide images — this
 * breaks the carousel layout and hides background images.
 *
 * Only apply responsive sizing to actual carousel WIDGETS:
 * - elementor-widget-image-carousel (Elementor built-in)
 * - elementor-widget-media-carousel  
 * - wdt-carousel-holder (product carousel)
 * - bxslider (blog gallery)
 */

/* -- ALL carousel containers -- clip overflow (safe, doesn't break layout) -- */
.wdt-carousel-holder .swiper,
.wdt-advanced-carousel .swiper,
.elementor-widget-image-carousel .swiper,
.elementor-widget-slideshow .swiper,
.elementor-widget-media-carousel .swiper,
.elementor-background-slideshow,
[class*="carousel"] .swiper,
[class*="slider"] .swiper {
    overflow: hidden !important;
}

/* -- Carousel WIDGET slide images -- responsive sizing (NOT hero slider) -- */
.elementor-widget-image-carousel .swiper-slide img,
.elementor-widget-slideshow .swiper-slide img,
.elementor-widget-media-carousel .swiper-slide img,
.wdt-carousel-holder .swiper-slide img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover;
}

/* -- Carousel widget container width constraints -- */
.wdt-carousel-holder,
.elementor-widget-image-carousel,
.elementor-widget-slideshow,
.elementor-widget-media-carousel {
    max-width: 100% !important;
    width: 100% !important;
    overflow: hidden !important;
}

/*
 * -- Carousel slide background images --
 * Inside wdt-advanced-carousel, each slide contains an Elementor template
 * with a stretched section that has a background image div.
 * The section width is controlled by Swiper JS. The background image div
 * must fill the slide, not the viewport.
 */
.wdt-advanced-carousel .swiper-slide .wdt-section-bgeffects-image {
    background-size: cover !important;
    background-position: center center !important;
    width: 100% !important;
    height: 100% !important;
}

/* Fix bxslider images (used in blog gallery) */
.bx-wrapper .bx-viewport {
    height: auto !important;
    overflow: hidden !important;
}

.bx-wrapper img {
    width: 100% !important;
    height: auto !important;
}

/* Fix Elementor background slideshow */
.elementor-background-slideshow__slide__image {
    background-size: cover !important;
    background-position: center center !important;
    width: 100% !important;
    height: 100% !important;
}

/* ============================================================
   3. ELEMENTOR SECTIONS — UNIVERSAL STRETCH / FULL-WIDTH FIX
   ============================================================ */

/*
 * Elementor "Stretch Section" uses JS to set inline styles on sections.
 * When themes have container padding/margins, the stretched section
 * doesn't reach full viewport width. This CSS forces it.
 *
 * IMPORTANT: These rules must NOT apply inside carousel/slider contexts.
 * Carousel slides have their own JS-calculated widths. Forcing 100vw
 * inside a swiper-slide breaks the carousel layout.
 *
 * NOTE: Inline styles from Elementor JS have specificity (0,0,0) but
 * are applied directly to element. CSS with !important overrides them.
 */

/* -- Force stretched sections to truly be full width --
   BUT exclude sections inside carousel/slider (those have JS-calculated widths) */
:not(.swiper-slide):not(.swiper-container):not([class*="carousel"]):not([class*="slider"]) > .elementor-section.elementor-section-stretched,
:not(.swiper-slide):not(.swiper-container):not([class*="carousel"]):not([class*="slider"]) > .elementor-section.elementor-section-full_width,
body:not(.elementor-editor-active) .elementor-section.elementor-section-stretched:not(.swiper-slide *),
body:not(.elementor-editor-active) .elementor-section.elementor-section-full_width:not(.swiper-slide *) {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
}

/* -- Fix Elementor container inside stretched sections (outside carousel) -- */
:not(.swiper-slide):not(.swiper-container):not([class*="carousel"]):not([class*="slider"]) > .elementor-section.elementor-section-stretched > .elementor-container,
:not(.swiper-slide):not(.swiper-container):not([class*="carousel"]):not([class*="slider"]) > .elementor-section.elementor-section-full_width > .elementor-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* -- Fix inner sections inside stretched parent (outside carousel) -- */
:not(.swiper-slide):not(.swiper-container):not([class*="carousel"]):not([class*="slider"]) .elementor-section.elementor-section-stretched .elementor-inner-section,
:not(.swiper-slide):not(.swiper-container):not([class*="carousel"]):not([class*="slider"]) .elementor-section.elementor-section-full_width .elementor-inner-section {
    width: 100% !important;
    max-width: 100% !important;
}

/*
 * -- Carousel slide background images --
 * Inside wdt-advanced-carousel, each slide contains an Elementor template
 * with a stretched section that has a background image div.
 * The section width is controlled by Swiper JS. The background image div
 * must fill the slide, not the viewport.
 */
.wdt-advanced-carousel .swiper-slide .wdt-section-bgeffects-image {
    background-size: cover !important;
    background-position: center center !important;
    width: 100% !important;
    height: 100% !important;
}

/*
 * Home hero slider (page 19) contains Elementor section templates 61/83/84.
 * Keep Swiper's wrapper free to calculate transforms, but force each visible
 * fade slide and the template inside it to occupy the full carousel viewport.
 */
.elementor-19 .elementor-element.elementor-element-3940db8,
.elementor-19 .elementor-element.elementor-element-3940db8 > .elementor-widget-container,
#wdt-advanced-carousel-3940db8,
#wdt-advanced-carousel-swiper-3940db8 {
    width: 100% !important;
    max-width: 100% !important;
}

#wdt-advanced-carousel-3940db8 .swiper-slide,
#wdt-advanced-carousel-3940db8 .swiper-slide .wdt-content-item,
#wdt-advanced-carousel-3940db8 .swiper-slide .elementor {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

#wdt-advanced-carousel-3940db8 .swiper-slide .wdt-content-item {
    display: block !important;
    overflow: hidden !important;
}

/*
 * Live fallback for WDT section background effects.
 * The slider template backgrounds are normally injected by WDT JS from
 * data-settings. Keep a static CSS background so production still shows
 * the hero image if that script fails or initializes late.
 */
.elementor-61 .elementor-element.elementor-element-123ce72 {
    background-image: url("/wp-content/uploads/2023/05/slider-1.png") !important;
}

.elementor-83 .elementor-element.elementor-element-123ce72 {
    background-image: url("/wp-content/uploads/2023/05/slider-2.png") !important;
}

.elementor-84 .elementor-element.elementor-element-123ce72 {
    background-image: url("/wp-content/uploads/2023/05/slider-3.png") !important;
}

.elementor-61 .elementor-element.elementor-element-123ce72,
.elementor-83 .elementor-element.elementor-element-123ce72,
.elementor-84 .elementor-element.elementor-element-123ce72 {
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

/* -- Inside carousel slides: stretched sections should match slide width, NOT viewport -- */
.wdt-advanced-carousel .swiper-slide .elementor-section.elementor-section-stretched,
.wdt-advanced-carousel .swiper-slide .elementor-section.elementor-section-full_width {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    left: 0 !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
}

.wdt-advanced-carousel .swiper-slide .elementor-section.elementor-section-stretched > .elementor-container,
.wdt-advanced-carousel .swiper-slide .elementor-section.elementor-section-full_width > .elementor-container {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* -- Fix template sections inside carousel slides (elementor-61, elementor-83, elementor-84) -- */
.elementor-61 .elementor-element.elementor-element-123ce72,
.elementor-83 .elementor-element.elementor-element-123ce72,
.elementor-84 .elementor-element.elementor-element-123ce72 {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
}

.elementor-61 .elementor-element.elementor-element-123ce72 > .elementor-container,
.elementor-83 .elementor-element.elementor-element-123ce72 > .elementor-container,
.elementor-84 .elementor-element.elementor-element-123ce72 > .elementor-container {
    width: 100% !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ============================================================
   4. ELEMENTOR HERO SECTION (post-46) — SPECIFIC DECORATIVE ELEMENTS
   ============================================================ */

/* 
 * IMPORTANT: All selectors below use `body:not(.rtl)` prefix to match
 * post-46.css specificity (0,5,2). Without this prefix, our rules are
 * overridden by Elementor's `body:not(.rtl) .elementor-XX ...` selectors.
 * Enqueue priority is 9999 so this file loads AFTER post-XX.css.
 */

/* -- HERO SECTION: Universal overflow containment -- */
body:not(.rtl) .elementor-section.elementor-section-stretched,
body:not(.rtl) .elementor-section.elementor-section-full_width {
    overflow: hidden !important;
}

/* -- ALL absolute positioned widgets inside sections -- contain them -- */
body:not(.rtl) .elementor-section .elementor-element.elementor-absolute {
    max-width: 100% !important;
}

/* -- Prevent negative positioning from causing overflow -- */
body:not(.rtl) .elementor-element[class*="elementor-element-"][style*="left: -"],
body:not(.rtl) .elementor-element[class*="elementor-element-"][style*="right: -"] {
    max-width: calc(100% + 200px) !important;
}

/* -- Specific post-46 decorative elements (from database dump) -- */

/* --- DESKTOP (1025px+) — Contain decorative elements inside section --- */
@media (min-width: 1025px) {
    /* Hero section: clip everything that overflows */
    body:not(.rtl) .elementor-46 .elementor-element.elementor-element-2b5b6da {
        overflow: hidden !important;
    }

    /* Bottom spacer/fill band — was 110% width + left:-130px */
    body:not(.rtl) .elementor-46 .elementor-element.elementor-element-d34056d {
        width: 100% !important;
        max-width: 100% !important;
        --container-widget-width: 100%;
        left: 0 !important;
    }

    /* Decorative image right side — was right:-165px */
    body:not(.rtl) .elementor-46 .elementor-element.elementor-element-e42eb28 {
        right: 0 !important;
    }

    /* Decorative image bottom-right — was right:-60px */
    body:not(.rtl) .elementor-46 .elementor-element.elementor-element-7b30c96 {
        right: 0 !important;
    }

    /* Large decorative icon — was left:-105px, cutting off "Giới Thiệu" text */
    body:not(.rtl) .elementor-46 .elementor-element.elementor-element-41ef011 {
        left: 20px !important;
    }
}

/* --- TABLET (768px–1024px) — scale down decorative elements --- */
@media (min-width: 768px) and (max-width: 1024px) {
    body:not(.rtl) .elementor-46 .elementor-element.elementor-element-2b5b6da {
        overflow: hidden !important;
    }

    body:not(.rtl) .elementor-46 .elementor-element.elementor-element-d34056d {
        --spacer-size: 800px !important;
        width: 100% !important;
        max-width: 100% !important;
        --container-widget-width: 100%;
        left: 0 !important;
    }

    body:not(.rtl) .elementor-46 .elementor-element.elementor-element-e42eb28 {
        height: 300px !important;
        right: 0 !important;
    }

    body:not(.rtl) .elementor-46 .elementor-element.elementor-element-7b30c96 {
        height: 180px !important;
        right: 0 !important;
    }

    body:not(.rtl) .elementor-46 .elementor-element.elementor-element-41ef011 {
        left: 20px !important;
    }

    body:not(.rtl) .elementor-46 .elementor-element.elementor-element-2b5b6da > .elementor-shape-bottom svg {
        height: 600px !important;
    }
}

/* --- MOBILE (< 768px) — hide decorative elements entirely --- */
@media (max-width: 767px) {
    /* Hide large decorative icons/shapes that overflow */
    body:not(.rtl) .elementor-46 .elementor-element.elementor-element-41ef011,
    body:not(.rtl) .elementor-46 .elementor-element.elementor-element-e42eb28,
    body:not(.rtl) .elementor-46 .elementor-element.elementor-element-7b30c96,
    body:not(.rtl) .elementor-46 .elementor-element.elementor-element-d34056d {
        display: none !important;
    }

    /* Shape SVG at bottom — scale down */
    body:not(.rtl) .elementor-46 .elementor-element.elementor-element-2b5b6da > .elementor-shape-bottom svg {
        height: 300px !important;
    }
}

/* ============================================================
   4. ELEMENTOR SECTIONS / CONTAINERS — MOBILE STACKING
   ============================================================ */

/* Force columns to stack on mobile */
@media (max-width: 767px) {
    .elementor-section .elementor-container {
        flex-direction: column !important;
    }

    .elementor-column {
        width: 100% !important;
    }

    .elementor-widget-wrap > .elementor-element {
        width: 100% !important;
    }

    /* Reset any absolute positioning inside sections */
    .elementor-section .elementor-element.elementor-absolute {
        position: relative !important;
    }

    /* Fix sections with stretched width */
    .elementor-section.elementor-section-stretched {
        width: 100% !important;
        left: 0 !important;
    }
}

/* Tablet — allow 2 columns where appropriate */
@media (min-width: 768px) and (max-width: 1024px) {
    .elementor-section .elementor-container {
        flex-wrap: wrap !important;
    }
}

/* ============================================================
   5. CONTAINER / LAYOUT FIXES
   ============================================================ */

/* Prevent horizontal scroll on mobile */
@media (max-width: 767px) {
    html, body {
        overflow-x: hidden !important;
    }

    /* Container padding on mobile */
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
        width: 100% !important;
    }

    /* Elementor container */
    .elementor-section .elementor-container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Remove negative margins that cause overflow */
    [class*="elementor-element"] {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ============================================================
   6. HEADER — MOBILE RESPONSIVE
   ============================================================ */

@media (max-width: 767px) {
    /* Home header position */
    .home:not(.blog) #header-wrapper {
        position: relative !important;
        margin-bottom: 0 !important;
    }

    /* Logo / site title sizing */
    .site-branding img {
        max-width: 150px !important;
        height: auto !important;
    }

    /* Navigation toggle button */
    .menu-toggle,
    .mobile-menu-toggle,
    .wdt-menu-toggle {
        min-width: 44px !important;
        min-height: 44px !important;
    }
}

/* ============================================================
   7. TYPOGRAPHY — RESPONSIVE
   ============================================================ */

@media (max-width: 767px) {
    h1, .elementor-heading-title.h1 {
        font-size: clamp(1.5rem, 5vw, 2rem) !important;
        line-height: 1.2 !important;
    }

    h2, .elementor-heading-title.h2 {
        font-size: clamp(1.25rem, 4vw, 1.75rem) !important;
        line-height: 1.3 !important;
    }

    h3, .elementor-heading-title.h3 {
        font-size: clamp(1.125rem, 3vw, 1.5rem) !important;
    }

    p, .elementor-text-container {
        font-size: 1rem !important;
        line-height: 1.6 !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    h1, .elementor-heading-title.h1 {
        font-size: clamp(2rem, 4vw, 2.5rem) !important;
    }

    h2, .elementor-heading-title.h2 {
        font-size: clamp(1.5rem, 3vw, 2rem) !important;
    }
}

/* ============================================================
   8. BUTTONS / TOUCH TARGETS
   ============================================================ */

@media (max-width: 767px) {
    button,
    a[role="button"],
    .elementor-button,
    input[type="submit"],
    input[type="button"],
    .wc-block-grid__product-add-to-cart a,
    .woocommerce a.button,
    .woocommerce button.button,
    .woocommerce input.button {
        min-height: 44px !important;
        padding: 12px 20px !important;
        font-size: 14px !important;
    }

    /* Full-width buttons on mobile */
    .elementor-button-wrapper .elementor-button {
        width: 100% !important;
        text-align: center !important;
    }
}

/* ============================================================
   9. FORMS — MOBILE RESPONSIVE
   ============================================================ */

@media (max-width: 767px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="password"],
    input[type="search"],
    input[type="number"],
    textarea,
    select,
    .wpcf7-form-control-wrap input,
    .wpcf7-form-control-wrap textarea,
    .elementor-field {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 16px !important; /* prevents iOS zoom on focus */
        min-height: 44px !important;
    }

    /* Form rows → stack vertically */
    .wpcf7-form .form-row-col-2,
    .elementor-form .elementor-col-md-6 {
        display: flex !important;
        flex-direction: column !important;
    }
}

/* ============================================================
   10. WOOCOMMERCE / PRODUCT GRIDS
   ============================================================ */

@media (max-width: 767px) {
    .woocommerce ul.products {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .woocommerce ul.products li.product {
        width: 100% !important;
        margin: 0 !important;
    }

    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: 13px !important;
    }

    .woocommerce ul.products li.product .price {
        font-size: 13px !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

/* Single product images */
.woocommerce-product-gallery__wrapper img,
.wdt-product-image-gallery-container img {
    width: 100% !important;
    height: auto !important;
}

/* ============================================================
   11. BLOG / POST LISTINGS
   ============================================================ */

@media (max-width: 767px) {
    .tpl-blog-holder .column {
        width: 100% !important;
    }

    .blog-entry .entry-thumb img {
        width: 100% !important;
        height: auto !important;
    }

    /* Blog gallery slider images */
    .blog-entry .entry-gallery-post-slider li img {
        width: 100% !important;
        height: auto !important;
    }
}

/* ============================================================
   12. FOOTER
   ============================================================ */

@media (max-width: 767px) {
    #footer .elementor-widget-social-icons .elementor-grid {
        justify-content: center !important;
    }

    #footer .elementor-column {
        width: 100% !important;
        margin-bottom: 30px !important;
    }
}

/* ============================================================
   13. TABLES — HORIZONTAL SCROLL ON MOBILE
   ============================================================ */

@media (max-width: 767px) {
    .entry-content table,
    table.wp-block-table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* ============================================================
   14. ELEMENTOR SPECIFIC FIXES
   ============================================================ */

/* Spacer widgets that cause overflow */
@media (max-width: 767px) {
    .elementor-widget-spacer {
        display: none !important;
    }
}

/* Divider widgets */
@media (max-width: 767px) {
    .elementor-widget-divider {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* Fix widget widths that are set to auto/unset */
@media (max-width: 767px) {
    .elementor-widget.elementor-widget__width-auto,
    .elementor-widget.elementor-widget__width-initial {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Elementor shape dividers — scale down on mobile */
@media (max-width: 767px) {
    .elementor-shape-bottom svg,
    .elementor-shape-top svg {
        height: 50px !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .elementor-shape-bottom svg,
    .elementor-shape-top svg {
        height: 100px !important;
    }
}

/* ============================================================
   15. REDUCED MOTION (Accessibility)
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .elementor-background-slideshow {
        transition: none !important;
    }
}

/* ============================================================
   16. SAFE AREA INSETS (notch phones — iPhone X+)
   ============================================================ */

body {
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
}

@media (max-width: 767px) {
    .elementor-section.elementor-section-stretched {
        padding-left: env(safe-area-inset-left, 0) !important;
        padding-right: env(safe-area-inset-right, 0) !important;
    }
}

/* ============================================================
   17. HOVER vs TOUCH — disable hover effects on touch devices
   ============================================================ */

@media (hover: none) and (pointer: coarse) {
    .elementor:hover .elementor-element,
    .blog-entry:hover .entry-thumb,
    li.product:hover .product-thumb {
        transform: none !important;
        box-shadow: none !important;
    }
}