/*
 * DRESSX Virtual Try-On — modal support CSS (WooCommerce build).
 *
 * Mirrors the Magento module's tryon.phtml <style> block: local @font-face,
 * a defensive cascade-isolation reset, and a Tailwind utility shim + theme
 * collision guard. The modal markup (try-on.js) is the saltmurphy build, which
 * is not in a shadow DOM, so we re-scope everything to #__custom_console_modal.
 *
 * Fonts are bundled with the plugin (assets/fonts) and referenced relatively.
 */

/* --- Local fonts (no CDN / base64) --- */
@font-face {
    font-family: 'IowanOldSt BT';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/IowanOldSt-BT.ttf') format('truetype');
}
@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 200 1000;
    font-display: swap;
    src: url('../fonts/Nunito-Variable.ttf') format('truetype');
}

/*
 * Defensive cascade isolation. The host WordPress/WooCommerce theme sets
 * global box-sizing, line-height, link colors, heading/paragraph margins,
 * list styles and form-control appearance that inherit/cascade into the modal
 * and shift its layout. We re-neutralize ONLY inside the modal root, with NO
 * !important and at id-level specificity, so try-on.js's own modal rules
 * (#id .__class — higher specificity AND injected later) always win.
 */
#__custom_console_modal,
#__custom_console_modal *,
#__custom_console_modal *::before,
#__custom_console_modal *::after {
    box-sizing: border-box;
}
#__custom_console_modal {
    line-height: normal;
    letter-spacing: normal;
    text-align: left;
    font-weight: 400;
    font-style: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
}
#__custom_console_modal h1,
#__custom_console_modal h2,
#__custom_console_modal h3,
#__custom_console_modal h4,
#__custom_console_modal h5,
#__custom_console_modal h6,
#__custom_console_modal p,
#__custom_console_modal ul,
#__custom_console_modal ol,
#__custom_console_modal figure,
#__custom_console_modal blockquote {
    margin: 0;
    padding: 0;
}
#__custom_console_modal ul,
#__custom_console_modal ol {
    list-style: none;
}
#__custom_console_modal button,
#__custom_console_modal input,
#__custom_console_modal select,
#__custom_console_modal textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: normal;
    letter-spacing: normal;
    margin: 0;
    color: inherit;
    text-transform: none;
}
#__custom_console_modal button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}
#__custom_console_modal a {
    color: inherit;
    text-decoration: none;
}
#__custom_console_modal img,
#__custom_console_modal svg {
    vertical-align: middle;
}

/*
 * Tailwind utility shim + theme-collision guard. The modal markup tags its SVG
 * icons with the Tailwind utility classes `block` and `size-full`. The host
 * theme has no Tailwind, and many themes (incl. WooCommerce/Storefront and
 * Twenty* defaults) ship their own global `.block` rules. Those cascade onto
 * our icons (same class name) and push them off-position. We re-scope `.block`
 * to the modal root (id-level specificity wins) so it does ONLY what Tailwind
 * intended (display:block) and we neutralize any leaked theme `.block`
 * properties. `.size-full` is re-declared for the same reason.
 */
#__custom_console_modal .block {
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    position: static;
    float: none;
}
#__custom_console_modal .size-full {
    width: 100%;
    height: 100%;
}