/**
 * Locale-based Content Visibility
 *
 * This CSS file provides utility classes to show/hide content based on user locale.
 * Works in conjunction with the locale body classes added via WordPress body_class filter.
 *
 * Body classes added:
 * - locale-tw: Taiwan users (zh_TW)
 * - locale-non-tw: All non-Taiwan users
 * - locale-{code}: Specific locale (e.g., locale-en-us, locale-zh-hk)
 *
 * Usage:
 * <div class="dw-show-tw">[elementor-template id="8070"]</div>
 * <div class="dw-show-non-tw">[elementor-template id="9999"]</div>
 */

/* ========================================================================
   Taiwan-Specific Content Visibility
   ======================================================================== */

/* Hide Taiwan content by default */
.dw-show-tw {
    display: none !important;
}

/* Show Taiwan content only for Taiwan locale */
body.locale-tw .dw-show-tw {
    display: block !important;
}

/* ========================================================================
   Non-Taiwan Content Visibility
   ======================================================================== */

/* Hide non-Taiwan content by default */
.dw-show-non-tw {
    display: none !important;
}

/* Show non-Taiwan content only for non-Taiwan locales */
body.locale-non-tw .dw-show-non-tw {
    display: block !important;
}

/* ========================================================================
   Additional Granular Locale Classes (Optional)
   ======================================================================== */

/* Hide by default */
.dw-show-en,
.dw-show-hk,
.dw-show-cn {
    display: none !important;
}

/* Show for specific locales */
body.locale-en-us .dw-show-en,
body.locale-en-gb .dw-show-en {
    display: block !important;
}

body.locale-zh-hk .dw-show-hk {
    display: block !important;
}

body.locale-zh-cn .dw-show-cn {
    display: block !important;
}

/* ========================================================================
   Flex and Inline Display Support
   ======================================================================== */

/*
   For content that needs to maintain flex or inline display,
   use these modifier classes with the base visibility classes.

   Usage:
   <div class="dw-show-tw dw-display-flex">...</div>
   <span class="dw-show-non-tw dw-display-inline">...</span>
*/

/* Taiwan content - flex display */
body.locale-tw .dw-show-tw.dw-display-flex {
    display: flex !important;
}

/* Taiwan content - inline display */
body.locale-tw .dw-show-tw.dw-display-inline {
    display: inline !important;
}

/* Taiwan content - inline-block display */
body.locale-tw .dw-show-tw.dw-display-inline-block {
    display: inline-block !important;
}

/* Non-Taiwan content - flex display */
body.locale-non-tw .dw-show-non-tw.dw-display-flex {
    display: flex !important;
}

/* Non-Taiwan content - inline display */
body.locale-non-tw .dw-show-non-tw.dw-display-inline {
    display: inline !important;
}

/* Non-Taiwan content - inline-block display */
body.locale-non-tw .dw-show-non-tw.dw-display-inline-block {
    display: inline-block !important;
}

/* ========================================================================
   Elementor Compatibility
   ======================================================================== */

/*
   Elementor sections/columns may have their own display properties.
   These rules ensure locale visibility works within Elementor content.
*/

/* Ensure Elementor widgets respect locale visibility */
.elementor-widget-wrap .dw-show-tw,
.elementor-widget-wrap .dw-show-non-tw,
.elementor-element .dw-show-tw,
.elementor-element .dw-show-non-tw {
    width: 100%;
}

/* Maintain Elementor section structure when hidden */
body.locale-non-tw .elementor-section .dw-show-tw,
body.locale-tw .elementor-section .dw-show-non-tw {
    height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
}