/*---------- CONTACT - popup -----------*/
.wm-contact-container {width: clamp(300px, calc(200px + 36vw), 96vw); position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; pointer-events: none; filter: drop-shadow(2px 4px 50px black); text-align: center; transition: opacity 0.5s; z-index: 9;}
.wm-contact-container.active {opacity: 1; pointer-events: auto;}
.wm-contact-container form {display: flex; align-items: start; flex-direction: column; width: 90%; margin: var(--size-30px) auto;}
.wm-contact-container input, .wm-contact-container textarea {box-sizing: border-box; width: 100%; resize: vertical;}
.wm-contact-container input {height: 40px;}
.wm-contact-container textarea {height: 80px;}
.close-popup {position: absolute; top: -3px; right: 3px; background: unset; border: unset;}

.wm-contact-container {background: var(--wp--preset--color--light-1); padding: 20px; box-sizing: border-box; border-radius: 12px;}

/*---------- Form -----------*/
.wm-contact-container form {display: flex; align-items: start; flex-direction: column; width: 90%;
margin: 30px auto;}
.wm-contact-container input, .wm-contact-container textarea {margin-bottom: 10px;}
.close-popup {font-size:40px;}
.wm-contact-container h1, .wm-contact-container p {color: var(--wp--preset--color--dark-1);}

/*---------- Button -----------*/
.wm-contact-form button, .close-popup {transition: color 0.5s ease, background 0.5s ease, border-color 0.5s ease;}
.wm-contact-form button {background: var(--wp--preset--color--dark-1); color: var(--wp--preset--color--light-1); padding: 10px 25px; border: 1px solid; border-color: var(--wp--preset--color--light-3); border-radius: 6px;}

.close-popup, .wm-contact-form button:hover {color: var(--wp--preset--color--dark-1);}

.wm-contact-form button:hover {background: var(--wp--preset--color--light-3);  border-color: var(--wp--preset--color--dark-1); color: var(--wp--preset--color--dark-1);}

.close-popup:hover {color: var(--wp--preset--color--light-3);}