/**
 * DTM Installer Offer PRO - theme isolation layer.
 *
 * This file is intentionally loaded after theme/plugin frontend styles.
 * It resets only DTM Offer interactive controls so generic selectors such as
 * button, [type=button], input, .button or .btn cannot alter the component.
 */

html body .dtm-oi-root,
html body .dtm-oi-root * {
    box-sizing: border-box;
}

/* Floating offer trigger: fully isolated from theme button rules. */
html body .dtm-oi-root .dtm-oi-floating-trigger {
    all: unset !important;
    box-sizing: border-box !important;
    position: fixed !important;
    top: var(--dtm-oi-top, 58%) !important;
    z-index: 2147483000 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 42px !important;
    min-height: 176px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 18px 11px !important;
    border: 0 !important;
    border-radius: 10px 0 0 10px !important;
    color: var(--dtm-oi-trigger-text, #fff) !important;
    background: var(--dtm-oi-trigger-accent, #31c73c) !important;
    font-family: var(--dtm-oi-font, Inter, Arial, sans-serif) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    font-style: normal !important;
    line-height: 1 !important;
    letter-spacing: .07em !important;
    text-align: center !important;
    text-decoration: none !important;
    text-shadow: none !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    box-shadow: 0 14px 30px rgba(5, 20, 45, .2) !important;
    outline: 0 !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    transform: translateY(-50%) !important;
    transition: filter .2s ease, box-shadow .2s ease !important;
}

html body .dtm-oi-root.dtm-oi-position-right .dtm-oi-floating-trigger {
    right: 0 !important;
    left: auto !important;
}

html body .dtm-oi-root.dtm-oi-position-left .dtm-oi-floating-trigger {
    right: auto !important;
    left: 0 !important;
    border-radius: 0 10px 10px 0 !important;
}

html body .dtm-oi-root .dtm-oi-floating-trigger > span {
    all: unset !important;
    display: inline-block !important;
    box-sizing: border-box !important;
    color: inherit !important;
    font: inherit !important;
    letter-spacing: inherit !important;
    text-transform: inherit !important;
    white-space: nowrap !important;
    writing-mode: vertical-rl !important;
    transform: rotate(180deg) !important;
}

html body .dtm-oi-root .dtm-oi-floating-trigger:hover,
html body .dtm-oi-root .dtm-oi-floating-trigger:focus-visible {
    filter: brightness(.95) !important;
    box-shadow: 0 18px 38px rgba(5, 20, 45, .28) !important;
    transform: translateY(-50%) !important;
}

/* Inline trigger shortcode. */
html body .dtm-oi-root .dtm-oi-inline-trigger,
html body .dtm-oi-shortcode-wrap > .dtm-oi-inline-trigger {
    all: unset !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 24px !important;
    border: 0 !important;
    border-radius: 10px !important;
    color: #fff !important;
    background: #1769ff !important;
    font-family: var(--dtm-oi-font, Inter, Arial, sans-serif) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    text-shadow: none !important;
    box-shadow: 0 10px 24px rgba(23, 105, 255, .24) !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

/* Modal stacking/positioning cannot be inherited from page builders. */
html body .dtm-oi-root .dtm-oi-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483001 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
}

html body .dtm-oi-root .dtm-oi-panel {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 2147483002 !important;
    float: none !important;
    margin: 0 !important;
}

/* Close button: reset every generic theme button property. */
html body .dtm-oi-root .dtm-oi-panel > button.dtm-oi-close {
    all: unset !important;
    box-sizing: border-box !important;
    position: absolute !important;
    top: 22px !important;
    right: 22px !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 25 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(18, 46, 91, .08) !important;
    border-radius: 999px !important;
    color: #5e7192 !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: 0 10px 26px rgba(24, 53, 96, .12) !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-decoration: none !important;
    text-shadow: none !important;
    outline: 0 !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    transform: none !important;
    transition: transform .2s ease, box-shadow .2s ease !important;
}

html body .dtm-oi-root .dtm-oi-panel > button.dtm-oi-close::before,
html body .dtm-oi-root .dtm-oi-panel > button.dtm-oi-close::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    display: block !important;
    width: 23px !important;
    height: 3px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 3px !important;
    background: #5e7192 !important;
    transform-origin: center !important;
    pointer-events: none !important;
}

html body .dtm-oi-root .dtm-oi-panel > button.dtm-oi-close::before {
    transform: translate(-50%, -50%) rotate(45deg) !important;
}

html body .dtm-oi-root .dtm-oi-panel > button.dtm-oi-close::after {
    transform: translate(-50%, -50%) rotate(-45deg) !important;
}

html body .dtm-oi-root .dtm-oi-panel > button.dtm-oi-close > span {
    display: none !important;
}

html body .dtm-oi-root .dtm-oi-panel > button.dtm-oi-close:hover,
html body .dtm-oi-root .dtm-oi-panel > button.dtm-oi-close:focus-visible {
    transform: rotate(5deg) scale(1.05) !important;
    box-shadow: 0 14px 30px rgba(24, 53, 96, .17) !important;
}

/* Form inputs: reset WooCommerce/theme global form-control rules. */
html body .dtm-oi-root .dtm-oi-form input[type="text"],
html body .dtm-oi-root .dtm-oi-form input[type="email"],
html body .dtm-oi-root .dtm-oi-form input[type="tel"] {
    all: unset !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 47px !important;
    margin: 0 !important;
    padding: 0 15px 0 48px !important;
    border: 1px solid var(--dtm-oi-line, #dce5f1) !important;
    border-radius: 12px !important;
    color: #13213a !important;
    background: #fff !important;
    font-family: var(--dtm-oi-font, Inter, Arial, sans-serif) !important;
    font-size: 14.5px !important;
    font-weight: 500 !important;
    font-style: normal !important;
    line-height: 47px !important;
    letter-spacing: normal !important;
    text-align: left !important;
    text-indent: 0 !important;
    text-transform: none !important;
    box-shadow: inset 0 1px 1px rgba(20, 47, 84, .02) !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
}

html body .dtm-oi-root .dtm-oi-form input[type="text"]::placeholder,
html body .dtm-oi-root .dtm-oi-form input[type="email"]::placeholder,
html body .dtm-oi-root .dtm-oi-form input[type="tel"]::placeholder {
    color: #8b97aa !important;
    opacity: 1 !important;
}

html body .dtm-oi-root .dtm-oi-form input[type="text"]:focus,
html body .dtm-oi-root .dtm-oi-form input[type="email"]:focus,
html body .dtm-oi-root .dtm-oi-form input[type="tel"]:focus {
    border-color: var(--dtm-oi-accent, #1769ff) !important;
    box-shadow: 0 0 0 4px rgba(23, 105, 255, .1) !important;
}

/* Submit button: independent of .button/.btn/[type=submit] theme selectors. */
html body .dtm-oi-root .dtm-oi-form button.dtm-oi-submit {
    all: unset !important;
    box-sizing: border-box !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    width: 100% !important;
    min-height: 52px !important;
    margin: 0 !important;
    padding: 0 26px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 13px !important;
    color: #fff !important;
    background: linear-gradient(100deg, #1783ff, var(--dtm-oi-accent, #1769ff), #0b45d7) !important;
    background-size: 170% 100% !important;
    font-family: var(--dtm-oi-font, Inter, Arial, sans-serif) !important;
    font-size: 16.5px !important;
    font-weight: 850 !important;
    font-style: normal !important;
    line-height: 1 !important;
    letter-spacing: -.01em !important;
    text-align: center !important;
    text-decoration: none !important;
    text-shadow: none !important;
    box-shadow: 0 16px 34px rgba(23, 105, 255, .27) !important;
    outline: 0 !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    transition: transform .2s ease, box-shadow .2s ease, background-position .3s ease, opacity .2s ease !important;
}

html body .dtm-oi-root .dtm-oi-form button.dtm-oi-submit:hover,
html body .dtm-oi-root .dtm-oi-form button.dtm-oi-submit:focus-visible {
    background-position: 100% 0 !important;
    box-shadow: 0 20px 40px rgba(23, 105, 255, .34) !important;
    transform: translateY(-2px) !important;
}

html body .dtm-oi-root .dtm-oi-form button.dtm-oi-submit:disabled {
    cursor: wait !important;
    opacity: .72 !important;
    transform: none !important;
}

/* Theme resets sometimes alter SVG dimensions inside buttons. */
html body .dtm-oi-root .dtm-oi-submit-icon,
html body .dtm-oi-root .dtm-oi-submit-icon svg,
html body .dtm-oi-root .dtm-oi-input-wrap > i,
html body .dtm-oi-root .dtm-oi-input-wrap > i svg {
    box-sizing: border-box !important;
}

@media (max-width: 680px) {
    html body .dtm-oi-root .dtm-oi-panel > button.dtm-oi-close {
        top: 14px !important;
        right: 14px !important;
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
    }

    html body .dtm-oi-root .dtm-oi-form input[type="text"],
    html body .dtm-oi-root .dtm-oi-form input[type="email"],
    html body .dtm-oi-root .dtm-oi-form input[type="tel"] {
        height: 54px !important;
        line-height: 54px !important;
        padding-left: 54px !important;
        font-size: 15px !important;
    }

    html body .dtm-oi-root .dtm-oi-form button.dtm-oi-submit {
        min-height: 58px !important;
        font-size: 16px !important;
    }

    html body .dtm-oi-root .dtm-oi-floating-trigger {
        min-width: 38px !important;
        min-height: 146px !important;
        padding: 14px 9px !important;
        font-size: 10px !important;
    }
}

@media (max-width: 782px) {
    html body .dtm-oi-root[data-show-mobile="0"] .dtm-oi-floating-trigger {
        display: none !important;
    }
}