.mqail-host { } .mqail-shortcode-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
margin: 0;
padding: 7px 11px;
border: 0;
border-radius: 4px;
background: var(--mqail-shortcode-bg, rgba(17,17,17,.94));
box-shadow: none;
color: var(--mqail-shortcode-color, #fff);
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
font-weight: 700;
line-height: 1;
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.mqail-shortcode-trigger:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
} .mqail-trigger--portal {
position: fixed !important;
z-index: var(--mqail-z, 50) !important;
pointer-events: auto !important;
touch-action: manipulation;
} .mqail-trigger--portal,
.mqail-trigger--portal:hover,
.mqail-trigger--portal:focus,
.mqail-trigger--portal:active {
pointer-events: auto !important;
z-index: var(--mqail-z, 50) !important;
isolation: isolate !important;
}
.mqail-trigger--portal > * {
pointer-events: none !important;
} .mqail-trigger--baked {
overflow: hidden;
}
.mqail-trigger--baked:focus-visible {
outline: 2px solid rgba(255,255,255,.9);
outline-offset: 2px;
}
.mqail-trigger--commerce {
pointer-events: auto !important;
visibility: visible !important;
opacity: 1 !important;
box-shadow: 0 1px 3px rgba(0,0,0,.16);
isolation: isolate;
min-height: 24px;
} .mqail-commerce-inline-slot {
display: flex;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
width: 100%;
margin: 7px 0 10px;
padding: 0;
position: relative;
z-index: 2;
pointer-events: auto;
}
.mqail-commerce-inline-slot--single {
margin-top: 9px;
margin-bottom: 12px;
}
.mqail-commerce-inline-slot--archive {
position: absolute !important;
display: flex !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
z-index: 1000 !important;
pointer-events: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
.mqail-commerce-inline-slot--archive.mqail-archive-overlay-ready {
visibility: visible !important;
opacity: 1 !important;
}
.mqail-commerce-inline-slot--archive .mqail-commerce-inline-button {
pointer-events: auto !important;
}
.mqail-commerce-inline-button {
--mqail-inline-bg: rgba(17,17,17,.94);
--mqail-inline-color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-height: 25px;
max-width: 100%;
margin: 0;
padding: 6px 9px;
border: 0;
border-radius: 4px;
background: var(--mqail-inline-bg) !important;
background-color: var(--mqail-inline-bg) !important;
box-shadow: none;
color: var(--mqail-inline-color) !important;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-weight: 700;
line-height: 1;
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
pointer-events: auto;
appearance: none;
-webkit-appearance: none;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.mqail-commerce-inline-slot--archive .mqail-commerce-inline-button {
font-size: 11px;
min-height: 24px;
padding: 5px 8px;
}
.mqail-commerce-inline-button:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
} .mqail-commerce-server-slot {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
position: relative !important;
transform: none !important;
}
.mqail-commerce-server-slot .mqail-commerce-server-button {
display: inline-flex !important;
visibility: visible !important;
opacity: 1 !important;
position: static !important;
transform: none !important;
z-index: auto !important;
} .mqail-commerce-server-slot.mqail-commerce-inline-slot--archive {
position: absolute !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
z-index: 1000 !important;
}
.mqail-commerce-server-slot.mqail-commerce-inline-slot--archive .mqail-commerce-server-button {
position: static !important;
pointer-events: auto !important;
}  .mqail-single-gallery-anchor {
position: relative !important;
}
.mqail-single-gallery-trigger {
--mqail-single-bg: rgba(17,17,17,.94);
--mqail-single-color: #fff;
position: absolute !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
box-sizing: border-box;
margin: 0 !important;
border: 0 !important;
background: var(--mqail-single-bg) !important;
background-color: var(--mqail-single-bg) !important;
color: var(--mqail-single-color) !important;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
font-weight: 700;
line-height: 1;
white-space: nowrap;
flex-wrap: nowrap !important;
text-decoration: none;
box-shadow: none !important;
cursor: pointer;
pointer-events: auto !important;
touch-action: manipulation;
-webkit-appearance: none;
appearance: none;
-webkit-tap-highlight-color: transparent;
z-index: var(--mqail-single-z, var(--mqail-z, 50)) !important;
transition: none !important;
transform: none !important;
}
.mqail-single-gallery-trigger[hidden] { display: none !important; }
.mqail-single-gallery-trigger:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .mqail-commerce-server-slot[data-mqail-commerce-context="single"] { display: none !important; } .mqail-host > img {
display: block;
margin-right: auto !important;
margin-left: auto !important;
}
.mqail-viewer .screen-reader-text {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.mqail-media-status {
display: grid;
place-items: center;
box-sizing: border-box;
min-height: 120px;
padding: 20px;
border: 1px solid #dcdcde;
border-radius: 6px;
background: #f6f7f7;
color: #1d2327;
text-align: center;
}
.mqail-download-disabled {
pointer-events: none;
opacity: .6;
}
.mqail-native-context-cover {
position: fixed;
z-index: 2147483646;
box-sizing: border-box;
margin: 0;
pointer-events: none;
}
.mqail-viewer[hidden] { display: none !important; }
.mqail-viewer {
position: fixed;
inset: 0;
z-index: calc(var(--mqail-z, 50) + 100000);
display: grid;
place-items: center;
box-sizing: border-box;
padding: max(clamp(12px, 3vw, 32px), env(safe-area-inset-top)) max(clamp(12px, 3vw, 32px), env(safe-area-inset-right)) max(clamp(12px, 3vw, 32px), env(safe-area-inset-bottom)) max(clamp(12px, 3vw, 32px), env(safe-area-inset-left));
}
.mqail-viewer__backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, .86);
}
.mqail-viewer__dialog {
position: relative;
z-index: 1;
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
gap: 12px;
box-sizing: border-box;
width: min(1400px, 100%);
max-height: calc(100dvh - 24px);
padding: clamp(12px, 2vw, 20px);
border-radius: 9px;
background: #111;
color: #fff;
box-shadow: 0 20px 80px rgba(0, 0, 0, .45);
}
.mqail-viewer__media {
display: grid;
place-items: center;
min-height: 120px;
overflow: hidden;
}
.mqail-viewer__media img {
display: block;
max-width: 100%;
max-height: calc(100dvh - 150px);
margin: auto;
object-fit: contain;
}
.mqail-viewer__close {
position: absolute;
top: 6px;
right: 8px;
z-index: 2;
width: 44px;
height: 44px;
border: 0;
border-radius: 50%;
background: rgba(0, 0, 0, .72);
color: #fff;
font-size: 30px;
line-height: 1;
cursor: pointer;
}
.mqail-viewer__download {
justify-self: center;
padding: 9px 14px;
border-radius: 5px;
background: #fff;
color: #111;
font-weight: 700;
text-decoration: none;
}
.mqail-viewer__label {
justify-self: center;
}
.mqail-viewer__close:focus-visible,
.mqail-viewer__download:focus-visible,
.mqail-viewer__label:focus-visible {
outline: 3px solid #72aee6;
outline-offset: 3px;
}
.mqail-viewer__status {
text-align: center;
}
html.mqail-viewer-open { overflow: hidden; }
@media (max-width: 480px) {
.mqail-viewer { padding: 6px; }
.mqail-viewer__dialog { max-height: calc(100dvh - 12px); padding: 8px; }
.mqail-viewer__media img { max-height: calc(100dvh - 120px); }
}
.mqail-commerce-inline-button,
.mqail-shortcode-trigger,
.mqail-single-gallery-trigger {
font-family: var(--mqail-font-family, inherit) !important;
font-weight: var(--mqail-font-weight, 700) !important;
letter-spacing: var(--mqail-letter-spacing, 0) !important;
text-transform: var(--mqail-text-transform, none) !important;
border-radius: var(--mqail-radius, 4px) !important;
}
.mqail-commerce-inline-button,
.mqail-single-gallery-trigger {
min-height: 24px;
}
.mqail-shortcode-trigger,
.mqail-shortcode-trigger:hover,
.mqail-shortcode-trigger:focus,
.mqail-shortcode-trigger:focus-visible,
.mqail-shortcode-trigger:active {
background: var(--mqail-shortcode-bg, rgba(17,17,17,.94)) !important;
background-color: var(--mqail-shortcode-bg, rgba(17,17,17,.94)) !important;
color: var(--mqail-shortcode-color, #fff) !important;
border-color: transparent !important;
box-shadow: none !important;
filter: none !important;
transition: none !important;
}
.mqail-commerce-inline-button,
.mqail-commerce-inline-button:hover,
.mqail-commerce-inline-button:focus,
.mqail-commerce-inline-button:focus-visible,
.mqail-commerce-inline-button:active,
.mqail-commerce-server-button,
.mqail-commerce-server-button:hover,
.mqail-commerce-server-button:focus,
.mqail-commerce-server-button:focus-visible,
.mqail-commerce-server-button:active {
background: var(--mqail-inline-bg, rgba(17,17,17,.94)) !important;
background-color: var(--mqail-inline-bg, rgba(17,17,17,.94)) !important;
color: var(--mqail-inline-color, #fff) !important;
border-color: transparent !important;
box-shadow: none !important;
filter: none !important;
transition: none !important;
}
.mqail-single-gallery-trigger,
.mqail-single-gallery-trigger:hover,
.mqail-single-gallery-trigger:focus,
.mqail-single-gallery-trigger:focus-visible,
.mqail-single-gallery-trigger:active {
background: var(--mqail-single-bg, rgba(17,17,17,.94)) !important;
background-color: var(--mqail-single-bg, rgba(17,17,17,.94)) !important;
color: var(--mqail-single-color, #fff) !important;
border-color: transparent !important;
box-shadow: none !important;
filter: none !important;
transition: none !important;
} .mqail-trigger--background-hitbox {
pointer-events: auto !important;
cursor: pointer !important;
touch-action: manipulation !important;
min-width: 28px !important;
min-height: 24px !important;
}
.mqail-trigger--background-hitbox > * {
pointer-events: none !important;
} .mqail-trigger > *,
.mqail-single-gallery-trigger > *,
.mqail-commerce-inline-button > *,
.mqail-commerce-server-button > * {
pointer-events: none !important;
} .mqail-trigger--elementor-portal {
position: absolute !important;
z-index: var(--mqail-z, 50) !important;
pointer-events: auto !important;
isolation: isolate;
min-width: 32px;
min-height: 28px;
} .mqail-single-gallery-trigger {
min-width: 44px !important;
min-height: 34px !important;
} .mqail-trigger::after,
.mqail-single-gallery-trigger::after {
content: "";
position: absolute;
inset: -8px -10px;
display: block;
pointer-events: auto;
background: transparent;
border: 0;
} .mqail-commerce-server-slot,
.mqail-commerce-server-slot[data-mqail-commerce-context="archive"],
.mqail-commerce-server-slot[data-mqail-commerce-context="single"] {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
} .mqail-trigger--elementor-portal::after {
pointer-events: none !important;
}
.mqail-trigger--elementor-portal {
cursor: pointer !important;
} .mqail-trigger--elementor-portal {
z-index: var(--mqail-z, 50) !important;
pointer-events: auto !important;
touch-action: manipulation !important;
}
.mqail-trigger--elementor-portal,
.mqail-trigger--elementor-portal * {
cursor: pointer !important;
}
.mqail-trigger--elementor-portal > * {
pointer-events: none !important;
} .mqail-trigger--elementor-portal { position: absolute !important; } .mqail-trigger--lightbox,
.mqail-trigger--lightbox:hover,
.mqail-trigger--lightbox:focus,
.mqail-trigger--lightbox:active {
font-size: clamp(11px, 1.1vw, 14px) !important;
min-width: 0 !important;
min-height: 24px !important;
max-height: 34px !important;
line-height: 1 !important;
z-index: 10020 !important;
}
.mqail-trigger--lightbox::after {
inset: -5px -6px !important;
}