/* @preserve
 * Package: mzaCore
 * Version: 26.0
 * Build: C260925
 * Copyright © 2025 Monavaz, LLC. All Rights Reserved.
 * @endpreserve
 */
 
 body.block-editor-iframe__body {
    padding: 1em;
    max-width: calc(100% - 2em);
}
body.block-editor-iframe__body a::after { content: unset !important; }
body.block-editor-iframe__body p {
    max-width: unset !important;
    font-size: 18px;
    margin: 1em 0;
}
body.block-editor-iframe__body h1, body.block-editor-iframe__body h2, body.block-editor-iframe__body h3, 
body.block-editor-iframe__body h4, body.block-editor-iframe__body h5, body.block-editor-iframe__body h6 { max-width: unset; }
body.block-editor-iframe__body .block-editor-block-list__block { max-width: unset; }


#__sys_msg {
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    padding: 1em;
}
#__sys_msg ~ * {
    pointer-events: none;
    filter: grayscale(1);
    opacity: 0.25;
    overflow: hidden;
    transition: all var(--mza-core-duration);
}

#__sys_msg > div {
    background-color: var(--mza-core-surface-a00);
    margin: auto;
    z-index: 1;
    padding: 2em;
    border-radius: var(--mza-core-radius);
    margin: 1em;
    max-height: calc(100vh - 6em);
    max-width: calc(100vw - 6em);
    box-shadow: 0px 0px 80px 0px #00000025;
}
#__sys_msg .message-header {
    height: 40px;
    gap: 1em;
}

#__sys_msg .mza-icon {
    --size: 2.5em;
    margin: 0;
    cursor: default;
}
#__sys_msg .mza-icon[data-icon="exclaim"] {
    --color: #FBBC05;
    --hov_color: #FBBC05;
}
#__sys_msg .mza-icon[data-icon="info"] {
    --color: #3086FF;
    --hov_color: #3086FF;
}
#__sys_msg .mza-icon[data-icon="error"] {
    --color: var(--no_good_color);
    --hov_color: var(--no_good_color);
}
#__sys_msg .message-header p {
    margin: 0;
    font-size: 2em;
    font-weight: 700;
    color: var(--mza-core-text-a00);
    text-align: left;
}

#__sys_msg .message-content {
    margin: 2em auto;
    min-height: 1.5em;
    max-height: calc(100svh - 300px);
    min-width: 300px;
    max-width: 400px;
    overflow-y: auto;
    padding-right: 2em;
    font-size: 1em;
    text-align: left;
    color: var(--mza-core-text-a30);
}

#__sys_msg .mza-button { margin: 0; }



.is-link-color {
    --bg_color: var(--link_color) !important;
    --fc_color: var(--link_color) !important;
    --fg_color: var(--hov_link_color) !important;
    --color: var(--link_color) !important;
    --color: var(--link_color) !important;
    --hov_color: var(--hov_link_color) !important;
    color: var(--link_color) !important;
}
.is-no-good-color {
    --bg_color: var(--no_good_color) !important;
    --fc_color: var(--no_good_color) !important;
    --fg_color: var(--hov_no_good_color) !important;
    --color: var(--no_good_color) !important;
    --color: var(--no_good_color) !important;
    --hov_color: var(--hov_no_good_color) !important;
    color: var(--no_good_color) !important;
}
.is-good-color {
    --bg_color: var(--good_color) !important;
    --fc_color: var(--good_color) !important;
    --fg_color: var(--hov_good_color) !important;
    --color: var(--good_color) !important;
    --color: var(--good_color) !important;
    --hov_color: var(--hov_good_color) !important;
    color: var(--good_color) !important; 
}







.mza-button {
    --bg_color: var(--mza-core-tonal-a00);
    --txt_color: var(--mza-core-surface-a00);
    padding: 0;
    height: fit-content;
    background-color: transparent !important;
}
.mza-button[data-align="left"] { margin-left: 0; margin-right: auto; text-align: left; }
.mza-button[data-align="right"] { margin-left: auto; margin-right: 0; text-align: right; }
.mza-button > * {
    transition: all var(--mza-core-duration) ease-in-out;

    background-color: var(--bg_color);
    color: var(--txt_color) !important;
    border: none;
    outline: 0;
    cursor: pointer;

    display: inline-block;
    border-radius: var(--mza-core-radius);
    -webkit-backface-visibility: hidden; 
            backface-visibility: hidden; 
    -webkit-tap-highlight-color: transparent;

    line-height: normal;
    height: fit-content;
    width: fit-content;
    padding: 1em 2em;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
}
.mza-button > *:after { content: unset; }
.mza-button.disabled > * { 
    --bg_color: var(--mza-core-surface-a30);
    cursor: not-allowed; 
}
.mza-button.secondary {
    --bg_color: transparent;
    --txt_color: var(--mza-core-text-a30);
}
.mza-button.full-width { max-width: unset; }
.mza-button.full-width > * {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}
.mza-button div:has(.grecaptcha-badge) { display: none !important; }

.mza-button.secondary .mza-button-icon { --txt_color: var(--mza-core-tonal-a00); }
.mza-button-icon {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 1em;
    padding: 12px 2em 12px 1em;
}

.mza-button-icon .mza-icon {
    margin: 0;
    --size: 28px;
    --color: var(--txt_color);
    --hov_color: var(--txt_color);
}
.mza-button-icon .mza-icon[data-icon="chevron_left"] { --size: 35px; }

.mza-button-icon * { transition: all var(--mza-core-duration) ease-in-out; }




.mza-carousel {
    --bg_color: var(--mza-core-surface-a10);
    --fc_color: var(--mza-core-text-a50);
    --fg_color: var(--mza-core-surface-a50);
    --pack_height: 250px;

    display: flex;
    align-items: flex-start;
    position: relative;
    margin-bottom: 3em;
    height: calc(var(--pack_height) + 2em + 1.5em);
}
.mza-carousel[data-align="center"] { justify-content: center; }
.mza-carousel[data-align="left"] { justify-content: flex-start; }
.mza-carousel[data-align="right"] { justify-content: flex-end; }

.mza-carousel-stack {
    position: relative;
    display: flex;
    align-items: center;
    height: var(--pack_height);
    width: 100%;
}
.mza-carousel[data-align="center"] .mza-carousel-stack { justify-content: center; }
.mza-carousel[data-align="left"] .mza-carousel-stack { justify-content: flex-start; }
.mza-carousel[data-align="right"] .mza-carousel-stack { justify-content: flex-end; }

.mza-carousel .mza-container { 
    --bg_color: var(--mza-core-surface-a10);

    background-color: var(--bg_color);
    cursor: pointer;
    position: absolute;
    z-index: 2;
    margin: 0;
    max-width: 400px;
    height: var(--pack_height);
    border-radius: var(--mza-core-radius);
    width: 80%;
    opacity: 1;
    transition: all calc(var(--mza-core-duration) * 2) ease-in-out;
}
.mza-carousel .mza-container[data-profile="hidden"] { 
    z-index: -1; 
    opacity: 0; 
    transform: translatex(var(--multi)) scale(0); 
}
.mza-carousel .mza-container[data-profile="inactive"] { 
    z-index: 1;
    transform: translatex(var(--multi)) scale(0.9); 
}

.mza-carousel .mza-container > div {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100% - 4em);
    width: calc(100% - 4em);
    padding: 2em;
    opacity: 1;
    flex-wrap: wrap;
}
.mza-carousel .mza-container[data-profile="hidden"] > div,
.mza-carousel .mza-container[data-profile="inactive"] > div { 
    opacity: 0.35; 
    pointer-events: none;
}

.mza-carousel .mza-container .cover-img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
}
.mza-carousel .mza-container .cover-img > a,
.mza-carousel .mza-container .cover-img img {
    object-fit: cover;
    display: block;
    height: 100%;
    width: 100%;
    padding: 0;
    border-radius: var(--mza-core-radius);
}


.mza-carousel-index-hld { 
    height: fit-content;
    width: 100%;
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 0;
    max-width: 400px;
    width: 80%;
}
.mza-carousel-index {
    height: auto;
    width: fit-content;
    display: flex;
    align-items: center;
    margin: 0;
    column-gap: 0.5em;
    background-color: var(--bg_color);
    border-radius: 1em;
    padding: 0.5em;
    
    transition: all var(--mza-core-duration) ease-in-out;
}
.mza-carousel-index > div { 
    position: relative; 
    height: 0.5em;
    width: 0.5em;
    border-radius: 0.25em;
    margin: 0;
    background-color: var(--fg_color);
    cursor: pointer;
    transition: all var(--mza-core-duration) ease-in-out;
}
.mza-carousel-index > div[data-profile="active"] {
    width: 3em;
    overflow: hidden;
}
.mza-carousel-index > div[data-profile="active"]::after { 
    content: "";
    width: 0;
    height: 0.5em;
    min-width: 10%;
    margin-left: -10%;
    border-radius: 0.625em;
    background-color: var(--fc_color);
    position: absolute;
    top: 0;
    left: 0;
    animation: mza-carousel-index-playing var(--timer) linear;
    animation-fill-mode: forwards;
}
.mza-carousel-index > div[data-profile="inactive"]::after {
    content: unset;
    background-color: var(--fg_color);
}

.mza-carousel[data-style="wrap"] .mza-container[data-profile="hidden"] { transform: translatex(calc(var(--multi) * 0.5)) scale(0.9); }
.mza-carousel[data-style="wrap"] .mza-container[data-profile="inactive"] { opacity: 0.5; transform: translatex(calc(var(--multi) * 0.5)) scale(0.9); }



.mza-checkbox { 
    display: flex;
    align-items: center;
    justify-content: start;
    margin: 1em 1em 1em 0;
    gap: 1em;
    font-size: 1em;
    color: var(--mza-core-text-a00);
    transition: all var(--mza-core-duration) ease-in-out;
}
.mza-checkbox .mza-icon {
    --color: white;
    --hov_color: white;
    --bg_color: var(--good_color);
    --hov_bg_color: var(--good_color);
    --size: 24px;
    --weight: 3px;
    margin: 0;
}
.mza-checkbox .mza-icon > svg {
    height: 66.67% !important;
    width: 66.67% !important;
}
.mza-checkbox .mza-icon.on { 
    --bg_color: var(--no_good_color);
    --hov_bg_color: var(--no_good_color);
}



.mza-droplet { 
    --bg_color: var(--mza-core-surface-a10);
    --fg_color: var(--mza-core-text-a00);
    --ic_color: var(--fg_color);
    --transition: calc(var(--dur) * var(--mza-core-duration));
            

    position: relative; 
    background-color: var(--bg_color);
    padding: 1em; 
    border-radius: var(--mza-core-radius);
    margin-bottom: 1em;
    height: 43px;
    overflow: hidden;
    transition: all var(--transition) ease-in-out;
}

.mza-droplet[data-align="center"] { margin-left: auto; margin-right: auto; }
.mza-droplet[data-align="left"] { margin-left: 0; margin-right: auto; }
.mza-droplet[data-align="right"] { margin-left: auto; margin-right: 0; }

.mza-droplet-title { 
    display: flex;
    height: 43px;
    justify-content: flex-start;
    align-items: center;
    padding-left: 25px;
}
.mza-droplet-title p { 
    cursor: pointer;
    text-align: left;
    font-size: 1em;
    flex-grow: 1;
    color: var(--fg_color);
    margin: 0;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mza-droplet-title .mza-icon { 
    --color: var(--ic_color) !important;
    --hov_color: var(--ic_color) !important;
    --size: 25px;
}
.mza-droplet-content { display: block; padding: 0 25px 1px; margin-top: 1em; z-index: 1; }
.mza-droplet.triggered { height: calc(var(--maxsize) + 75px) }



.mza-emoji {
    --font-size: calc(var(--size) * 1px);

    position: relative;
    top: calc(var(--font-size) * 0.15); 
    height: var(--font-size);
    width: var(--font-size);
	object-fit: cover;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 5px;
    transition: all var(--mza-core-duration) ease-in-out;
}

.mza-emoji[data-align="center"] { display: block; margin-left: auto; margin-right: auto; }
.mza-emoji[data-align="left"] { display: inline-block; margin-left: 0; margin-right: auto; }
.mza-emoji[data-align="right"] { display: block; margin-left: auto; margin-right: 0; }

div.has-mza-emoji * { display: inline; }



.mza-fliplet, .mza-fliplet * { transition: all calc(var(--mza-core-duration) * 2) ease-in-out; }
.mza-fliplet {
	--alt_color: var(--mza-core-accent-a00);
    --bg_color: var(--mza-core-surface-a10);
    --btn_bg_color: #00000026;
    --btn_fc_color: #0000001a;
    --btn_fg_color: #FFF;

	-webkit-tap-highlight-color: transparent;

	background-color: var(--bg_color);
	position: relative;
	display: block;
	height: auto;
	min-height: 317px;
	width: 100%;
	margin: 1em auto;
	border-radius: var(--mza-core-radius);
}


.mza-fliplet[data-align="left"] { margin-left: 0; margin-right: auto; }
.mza-fliplet[data-align="right"] { margin-left: auto; margin-right: 0; }

.mza-fliplet.has-full-height { min-height: 550px; height: 100%; }
.mza-fliplet.has-ombre { background: linear-gradient(-30deg, var(--bg_color) 0%, var(--alt_color) 100%); }

.mza-fliplet > .mza-icon {
    --bg_color: var(--btn_bg_color);
    --color: var(--btn_fg_color);
    --hov_bg_color: var(--btn_fc_color);
    --hov_color: var(--btn_fg_color);
    --size: 40px;
	margin: 0 !important;
	position: absolute !important;
    top: calc(var(--mza-core-radius) + 5px) !important; 
    right: calc(var(--mza-core-radius) + 5px) !important;
}
.mza-fliplet > .mza-icon > svg {
    --weight: 2px;
    height: 25px !important;
    width: 25px !important;
}
.mza-fliplet > .mza-container { 
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 2em;
	display: flex;
	border-radius: var(--mza-core-radius); 
    height: unset;
    width: unset;
    margin: 0;
    background: unset;
}
.mza-fliplet > .mza-container > div { 
	display: flex;
	justify-content: center; 
    height: calc(100% - 4em);
    width: calc(100% - 4em);
    padding: 2em;
}

.mza-fliplet > .mza-container:nth-child(1) > div { flex-direction: column; }
.mza-fliplet > .mza-container:nth-child(1) > div > *:nth-child(1) { flex: 1; }

.mza-fliplet > .mza-container:nth-child(2) { opacity: 0; z-index: -1; }
.mza-fliplet > .mza-container:nth-child(2) > div { align-items: center; }

.mza-fliplet > .mza-container[data-align="left"] > div * { text-align: left; margin-left: 0 !important; margin-right: auto !important; }
.mza-fliplet > .mza-container[data-align="center"] > div * { text-align: center;  margin-left: auto !important; margin-right: auto !important; }
.mza-fliplet > .mza-container[data-align="right"] > div * { text-align: right; margin-left: auto !important; margin-right: 0 !important; }

.mza-fliplet.triggered > .mza-container:nth-child(1) { opacity: 0; }
.mza-fliplet.triggered > .mza-container:nth-child(2) { opacity: 1; z-index: unset; }

.mza-fliplet > .mza-container:nth-child(2) > div {
	opacity: 0;
	width: 100%;
    transform: translateY(-2em);
    transition: all calc(var(--mza-core-duration) * 4) ease-in-out;
}
.mza-fliplet.triggered > .mza-container:nth-child(2) > div {
	opacity: 1; 
    transform: translateY(0);
}

.mza-fliplet.triggered, .mza-fliplet > .mza-container:nth-child(2) { background-color: var(--alt_color); }



.mza-icon {
    --bg_color: var(--mza-core-surface-a20);
    --color: var(--mza-core-tonal-a00);
    --hov_bg_color: var(--mza-core-surface-a50);
    --hov_color: var(--mza-core-tonal-a30);
    --size: 60px;
    --weight: 1.5px;
    
    height: var(--size);
    width: var(--size);
    cursor: pointer;
    margin: 1em;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all var(--mza-core-duration) ease-in-out;
}
.mza-icon[data-align="left"] { margin-left: 0; margin-right: auto; }
.mza-icon[data-align="right"] { margin-left: auto; margin-right: 0; }
.mza-icon.disabled {
    --color: var(--mza-core-text-a30) !important;
    --hov_color: var(--mza-core-text-a30) !important;
    cursor: not-allowed;
    opacity: 0.5;
}

.mza-icon.enclosed-circle:before { border-radius: 50%; }
.mza-icon.enclosed-square:before { border-radius: calc(var(--size) / 3); }
.mza-icon.enclosed-circle:before, .mza-icon.enclosed-square:before { 
    content: ' ';
    position: absolute;
    top: 0; 
    bottom: 0; 
    left: 0;
    right: 0;
    background-color: var(--bg_color);
    transition: all var(--mza-core-duration) ease-in-out;
}
.mza-icon svg {
    height: 100%;
    width: 100%;
    z-index: 1;
    transition: all var(--mza-core-duration) ease-in-out;
}
.mza-icon.enclosed-circle svg,.mza-icon.enclosed-square svg {
    height: 50%;
    width: 50%;
}

.mza-icon path {
    transition: stroke var(--mza-core-duration) ease-in-out, fill var(--mza-core-duration) ease-in-out;
}
.mza-icon svg path[thickness="border"], .mza-icon svg path[thickness="dashed"], .mza-icon svg path[thickness="full"] {
	stroke: var(--color);
	fill: transparent;
	stroke-width: var(--weight);
	stroke-linecap: round; 
	stroke-linejoin: round;
}
.mza-icon svg path[thickness="dashed"] { stroke-dasharray: 0.5,3; }
.mza-icon svg path[thickness="fill"], .mza-icon svg path[thickness="full"] { fill: var(--color); }

p:has(.mza-icon) { display: inline-flex; }
p .mza-icon {
    --size: 20px;
    display: inline-block;
    margin: 0 2px;
}



.mza-incrementor {
    --bg_color: var(--mza-core-surface-a10);
    --fc_color: var(--mza-core-tonal-a50);
    --fg_color: var(--mza-core-tonal-a00);
    --color: var(--mza-core-text-a50);
    background-color: var(--bg_color);
    border-radius: 100px !important;
    padding: 1em;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 2em);
    margin: 1em auto;
}
.mza-incrementor[data-align="left"] { margin-left: 0 !important; margin-right: auto !important; }
.mza-incrementor[data-align="right"] { margin-left: auto !important; margin-right: 0 !important; }

.mza-incrementor.is-outlined {
    background-color: transparent;
    outline-width: 2px;
    outline-color: var(--fg_color);
    outline-style: solid;
}
.mza-incrementor p {
    display: flex;
    flex-direction: row;
    gap: 0.25em;
    align-items: center;
    justify-content: center;

    font-size: 1em;
    padding: 0;
    margin: 0;
    flex-grow: 1;
    max-width: unset;
    text-align: center;
    color: var(--color);
}
.mza-incrementor p span { opacity: 0.75; }

.mza-incrementor .mza-icon {
    --size: 25px;
    --color: var(--fg_color);
    --hov_color: var(--fc_color);
    margin: 0;
}
.mza-incrementor .mza-icon {
    --size: 25px;
    --color: var(--fg_color);
    --hov_color: var(--fc_color);
    margin: 0;
}
.mza-incrementor .mza-icon.inactive[data-icon="close"], 
.mza-incrementor .mza-icon.inactive[data-icon="minus"] {
    display: none;
}
.mza-incrementor .mza-icon.inactive[data-icon="minus"] { opacity: 0.25; }



.mza-input {
    transition: all var(--mza-core-duration) ease-in-out;
    -webkit-tap-highlight-color: transparent;
    -webkit-backface-visibility: hidden; 
            backface-visibility: hidden;

    --af_color: #FBBC05;
    --bg_color: var(--mza-core-surface-a10);
    --color: var(--mza-core-text-a30);
    --ic_color: var(--color);
    --fc_color: var(--mza-core-tonal-a00);
    --fg_color: var(--mza-core-text-a50);
    
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin: 0 auto 1.5em;
}
.mza-input[data-align="left"] { margin-left: 0; margin-right: auto; }
.mza-input[data-align="right"] { margin-left: auto; margin-right: 0; }

.mza-input:has(textarea) { align-items: flex-start; }
.mza-input input {
    transition: all var(--mza-core-duration) ease-in-out;
            
    -webkit-tap-highlight-color: transparent;
    -webkit-backface-visibility: hidden; 
            backface-visibility: hidden;
    height: 75px;
    width: 100%;
    background-color: var(--bg_color);
    border-radius: var(--mza-core-radius);
    border: none;
    color: var(--color);
    outline-width: 2px;
    outline-color: transparent;
    outline-style: solid;
    margin: 0;
    font-size: 1em;
    padding: 0 25px;
}
.mza-input textarea {
    transition: outline var(--mza-core-duration) ease-in-out;
    -webkit-tap-highlight-color: transparent;
    backface-visibility: hidden;
    min-height: 75px;
    width: 100%;
    background-color: var(--bg_color);
    border-radius: var(--mza-core-radius);
    border: none;
    color: var(--color);
    outline: transparent solid 2px;
    margin: 0px;
    font-size: 1em;
    padding: 40px 25px 25px;
    resize: vertical;
}

.mza-input label {
    transition: all var(--mza-core-duration) ease-in-out;
    margin: 0;
    position: absolute;
    left: 0;
    padding: 0 25px;
    width: fit-content;
    height: fit-content;
    color: var(--fg_color);
    font-size: 1em;
    font-weight: 500;
}
.mza-input textarea + label { padding-top: 20px; }

.mza-input .mza-icon {
    --color: var(--ic_color) !important;
    --hov_color: var(--ic_color) !important;
    --size: 25px;
    position: absolute;
    right: 25px;
    margin: 0;
}

.mza-input:has(.mza-icon) input { padding-right: 60px; }
.mza-input input[type="password"] { font-size: 16px !important; letter-spacing: 0.25em; }
.mza-input input::-ms-reveal, .mza-input input::-ms-clear { display: none; }

.mza-input:focus-within { --fg_color: var(--fc_color); }
.mza-input:focus-within input, 
.mza-input:focus-within textarea { outline-color: var(--fg_color); }

.mza-input:has(input:is(:-webkit-autofill, :autofill)), 
.mza-input:has(textarea:is(:-webkit-autofill, :autofill)) {
    --fc_color: var(--af_color) !important;
    --color: var(--af_color) !important;
}
.mza-input input:is(:-webkit-autofill, :autofill),
.mza-input textarea:is(:-webkit-autofill, :autofill) {
    transition: background-color 5000s ease-in-out 0s;
    caret-color: var(--mza-core-text-a30);
    -webkit-text-fill-color: var(--color);
}

.mza-input input:-webkit-autofill, .mza-input input:autofill,
.mza-input:focus-within input, .mza-input input:not(:placeholder-shown) { padding-top: 10px; }

.mza-input textarea:-webkit-autofill + label , .mza-input textarea:autofill + label,
.mza-input:focus-within textarea + label, .mza-input textarea:not(:placeholder-shown) + label {
    font-size: 0.875em;
}
.mza-input input:-webkit-autofill + label , .mza-input input:autofill + label,
.mza-input:focus-within input + label, .mza-input input:not(:placeholder-shown) + label {
    transform: translateY(calc(-100% + 2px));
    font-size: 0.875em;
}
.mza-input:not(:focus-within) input:not(:placeholder-shown) + label,
.mza-input:not(:focus-within) textarea:not(:placeholder-shown) + label { opacity: 0.5; }
.mza-input:focus-within label { opacity: 1; }


.mza-input.masked input::placeholder { font-family: monospace; letter-spacing: 0.25em; }


.mza-input.slim {
    --bg_color: var(--mza-core-surface-a00);
    --color: var(--mza-core-text-a30);
    --fg_color: var(--mza-core-text-a50);
    max-width: unset;
    margin: 0;
}
.mza-input.slim .mza-icon {
    --color: var(--fg_color) !important;
    --hov_color: var(--fg_color) !important;
    right: 5px;
}

.mza-input.slim input, .mza-input.slim label { padding-left: 0; padding-right: 0; }
.mza-input.slim:has(.mza-icon) input { padding-right: 40px; }
.mza-input.slim input { height: 40px; outline: none; border-radius: 0; padding-top: 10px; }
.mza-input.slim input::placeholder { color: var(--color); filter: opacity(35%); }
.mza-input.slim:focus-within {
    --fg_color: var(--fc_color);
    box-shadow: 0 2px 0 var(--fg_color); 
}
.mza-input.slim:not(:focus-within) label { opacity: 0.5; }
.mza-input.slim label { transform: translateY(calc(-100% + 2px)); font-size: 0.875em; }

.hidden-input {
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
    position: absolute !important;
    z-index: -99 !important;
}

.mza-input input[required] + label::after,
.mza-input textarea[required] + label::after {
    content: ' *';
    color: var(--no_good_color);
}



.mza-select {
    --af_color: #FBBC05;
    --bg_color: var(--mza-core-surface-a10);
    --color: var(--mza-core-text-a30);
    --ic_color: var(--color);
    --fc_color: var(--mza-core-tonal-a00);
    --fg_color: var(--mza-core-text-a50);
    
    transition: all var(--mza-core-duration) ease-in-out;
    
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    width: 100%;
    max-width: 100%;
    margin: 0 auto 1.5em;
        
    background-color: var(--bg_color);
    border-radius: var(--mza-core-radius);
    outline-width: 2px;
    outline-color: transparent;
    outline-style: solid;
}
.mza-select[data-align="left"] { margin-left: 0; margin-right: auto; }
.mza-select[data-align="right"] { margin-left: auto; margin-right: 0; }

.mza-select .mza-input {
    --af_color: inherit;
    --bg_color: inherit;
    --color: inherit;
    --ic_color: inherit;
    --fc_color: inherit;
    --fg_color: inherit;
    margin: 0;
    z-index: 11;
}
.mza-select .mza-input input { outline: none !important; }

.mza-select-list {
    transition: all var(--mza-core-duration) ease-in-out;
    max-height: 0;
    overflow: hidden;
    width: calc(100% - 2em);
    padding: 0 1em;
    z-index: 10;
}
.mza-select-list > div {
    position: relative;
    max-height: calc(60px * 2);
    overflow-y: auto; 
    padding-right: 1em;
    width: calc(100% - 1em);
}

.mza-select .mza-container {
    transition: all var(--mza-core-duration) ease-in-out;
    -webkit-tap-highlight-color: transparent;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
       
    background-color: var(--bg_color);
    border-radius: var(--mza-core-radius);
    color: var(--color);
    height: 60px;
    width: calc(100% - 50px 1em);
    margin: 0 1em 0 0;
    font-size: 1em;
    padding: 0 25px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.mza-select .mza-container.queried { opacity: 0.75; }
.mza-select .mza-container.selected { background: var(--fc_color); --color: white; }
.mza-select .mza-container .mza-icon { margin: 0 1em 0 0; }
.mza-select .mza-container * { font-size: inherit; color: inherit; }
.mza-select.triggered { --fg_color: var(--fc_color); --ic_color: var(--fc_color); outline-color: var(--fg_color); }
.mza-select.triggered .mza-select-list { max-height: calc(1em + (60px * 2)); padding: 0 1em 1em; }
    


.mza-selector {
    --fc_color: var(--mza-core-tonal-a00);

    display: block;
    margin: 2em auto;
    width: 100%;
    outline:none;
}

.mza-selector > div {
    display: flex;
    flex-direction: row;
    width: 100%;
    gap: 1em;
    max-width: calc(100% - 4px);
    margin: 2px;
    flex-wrap: wrap;
}

.mza-selector > div > .mza-container {
    --bg_color: var(--mza-core-surface-a10);
    background-color: var(--bg_color);
    cursor: pointer;
    outline-width: 2px;
    outline-color: transparent;
    outline-style: solid;
    margin: 0;
    border-radius: var(--mza-core-radius);
    transition: outline-width calc(var(--mza-core-duration) / 2) ease-in-out, transform var(--mza-core-duration) ease-in-out;
}
.mza-selector > div > .mza-container > div {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(100% - 4em);
    width: calc(100% - 4em);
    padding: 2em;
}
.mza-selector > div > .mza-container.queried { transform: translate(0, -0.5em); }
.mza-selector > div > .mza-container.active { outline-color: var(--fc_color); }

.mza-selector.is-constrained { height: fit-content; width: 100%; }
.mza-selector.is-constrained > div > .mza-container > div > img {
    border-radius: var(--mza-core-radius);
    height: 100%;
    width: 100%;
    max-height: 132px;
    object-fit: cover;
}
.mza-selector.is-constrained > div > .mza-container {
    height: 100%; 
    max-height: 132px;
    width: 100%; 
    max-width: calc(50% - 0.5em);
    min-width: calc(50% - 0.5em);
}

.mza-selector.is-vertical > div { width: fit-content; flex-direction: column; }

.mza-selector[data-align="left"] { margin-left: 0; margin-right: auto; }
.mza-selector[data-align="right"] { margin-left: auto; margin-right: 0; }
.mza-selector[data-align="center"] > div,
.mza-selector[data-align="left"] > div { justify-content: flex-start; }
.mza-selector[data-align="right"] > div { justify-content: flex-end; }


    
.mza-slider {
    --value: 50%;
    --info: "";
    --bg_color: var(--mza-core-surface-a10);
    --fg_color: var(--mza-core-tonal-a00);
    --dark_color: var(--mza-core-text-a00);
    --light_color: var(--mza-core-surface-a00);

    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1em auto;
    height: 3em;
    width: 100%;
    cursor: pointer;
    background: var(--bg_color);
    border-radius: 1.5em;
}
.mza-slider[data-align="left"] { margin-left: 0; margin-right: auto; }
.mza-slider[data-align="right"] { margin-left: auto; margin-right: 0; }
  
.mza-slider::before {
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    left: 0;
    right: calc(100% - var(--value));
    background: var(--fg_color);
    border-radius: 1.5em;
    min-width: 3em;
} 
.mza-slider::after {
    -webkit-text-fill-color: transparent;

    opacity: 0;
    position: relative;
    content: var(--info);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    width: 100%;
    color: var(--dark_color);
    border-radius: 1.5em;
    background-clip: text;
    background-image: linear-gradient(90deg, var(--light_color) var(--value), var(--dark_color) var(--value));
    transition: opacity var(--mza-core-duration) ease-in-out;
    transition-delay: 1s;

    font-size: 1.75em;
    line-height: 2em;
    font-weight: 700;
}



.mza-switch-box { margin: 0 0 2em; display: flex; align-items: center; justify-content: space-between; gap: 2em; }
.mza-switch-box > div { display: flex; flex-direction: column; gap: 0.5em; }
.mza-switch-box p { margin: 0; }
.mza-switch-title { color: var(--mza-core-text-a00); font-size: 1em; }
.mza-switch-info { font-size: 1em; }

.mza-switch {
    --off_bg_color: var(--mza-core-surface-a50);
    --off_fg_color: var(--mza-core-surface-a00);
    --on_bg_color: var(--good_color);
    --on_fg_color: var(--mza-core-surface-a00);

    position: relative;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 30px;
    cursor: pointer;
}
.mza-switch[data-align="center"] { display: block; margin-left: auto; margin-right: auto; }
.mza-switch[data-align="left"] { display: inline-block; margin-left: 0; margin-right: auto; }
.mza-switch[data-align="right"] { display: block; margin-left: auto; margin-right: 0; }

.mza-switch::before {
    content: "";
    transition: all var(--mza-core-duration) ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 100px;
    background-color: var(--off_bg_color);
}

.mza-switch::after {
    content: "";
    transition: all var(--mza-core-duration) ease-in-out;  
    position: absolute;
    height: 26px;
    width: 26px;
    left: 2px;
    bottom: 2px;
    border-radius: 100px;
    background-color: var(--off_fg_color);
}
.mza-switch:has(input:checked)::before { background-color: var(--on_bg_color); }
.mza-switch:has(input:focus)::before{ box-shadow: 0 0 1px var(--on_bg_color); }
.mza-switch:has(input:checked)::after { transform: translateX(10px); background-color: var(--on_fg_color); }









html.dark-mode .mza-fliplet {
	--btn_bg_color:#ffffff1a;
	--btn_fc_color:#ffffff26;
}
html.light-mode .mza-fliplet {
    --btn_bg_color: #00000026;
    --btn_fc_color: #0000001a;
}
@media (prefers-color-scheme: dark) {
    html.default-colors.mza-fliplet {
        --btn_bg_color:#ffffff1a;
        --btn_fc_color:#ffffff26;
    }
}
@media (prefers-color-scheme: light) {
    html.default-colors .mza-fliplet {
        --btn_bg_color: #00000026;
        --btn_fc_color: #0000001a;
    }
}
@supports (scrollbar-color:auto) {
    .mza-select .mza-select-list > div {
        scrollbar-color: var(--color) var(--bg_color);
    }
}
@media only screen and (min-width: 600px) {
    .mza-input, .mza-select, .mza-slider.is-constrained  { max-width: 350px; }
    .mza-droplet.is-constrained, .mza-incrementor.is-constrained  { max-width: 318px; }
    .mza-fliplet.is-constrained { max-width: 500px; }

    .mza-selector.is-constrained > div > .mza-container { max-width: 132px; min-width: unset; }
    .mza-selector[data-align="center"] > div { justify-content: center; }
}
@media (hover: none) {
    .mza-button.has-touch:not(.disabled) > * {
        opacity: 0.75 !important;
        transform: scale(0.97);
    }
    .mza-button.secondary.has-touch:not(.disabled) > * {
        --bg_color: var(--mza-core-surface-a30);
    }

    .mza-icon.has-touch:not(.disabled) {
        --color: var(--hov_color) !important;
        --bg_color: var(--hov_bg_color) !important;
        transform: scale(0.97);
    }
    
    .mza-selector > div > .mza-container.has-touch { transform: translate(0,-0.5em) scale(0.97); }

    .mza-slider.has-touch::after { opacity: 1; transition-delay: 0s; }
}
@media (hover: hover) {
    .mza-button:not(.disabled) *:hover {
        opacity: 0.75 !important;
    }
    .mza-button.secondary:not(.disabled) > *:hover {
        --bg_color: var(--mza-core-surface-a30);
    }

    .mza-checkbox ~ label .mza-icon:hover { opacity: 0.5; }
    
    .mza-icon:not(.disabled):hover { --color: var(--hov_color) !important; --bg_color: var(--hov_bg_color) !important; }
    
    .mza-input:not(:focus-within):hover { opacity: 0.75; }
    .mza-input.slim:not(:focus-within):hover { box-shadow: 0 2px 0 var(--fg_color); }

    .mza-select .mza-container:hover { opacity: 0.75; }

    .mza-selector > div > .mza-container:hover {
        transform: translate(0,-0.5em);
    }
	
    .mza-slider:hover::after { opacity: 1; transition-delay: 0s; }



    .mza-button:not(.disabled) *:active { transform: scale(0.97); }
    
    .mza-icon:not(.disabled):active { transform: scale(0.97); }

    .mza-selector > div > .mza-container:active { transform: translate(0,-0.5em) scale(0.97); }
}



@keyframes mza-carousel-index-playing { 0% { width: 0 } to { width: 110% }}