#mt-forms-wrapper {
    font-family: var(--mt-forms-font-family, inherit);
    font-size: var(--mt-forms-font-size, 16px);
    font-weight: var(--mt-forms-font-weight, 400);
    background: var(--mt-forms-bg, #eef1f5); /* Connected to Settings */
    padding: 60px 20px;
    border-radius: var(--mt-forms-radius, 12px);
    overflow-y: auto;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    opacity: 0;
    animation: mt-fade-in 0.5s ease forwards;
}

@keyframes mt-fade-in {
    to { opacity: 1; }
}

#mt-forms-wrapper * {
    box-sizing: border-box;
}

.mt-form-header {
    width: 100%;
    max-width: var(--mt-forms-width, 640px);
    background: var(--mt-forms-bg, #eef1f5);
    padding: 40px;
    border-radius: var(--mt-forms-radius, 12px);
    border: 1px solid transparent;
    transition: all 0.3s ease;
    margin-bottom: 30px;
    text-align: center;
}

.mt-glass-active .mt-form-header {
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 10px 10px 20px #d1d9e6, -10px -10px 20px #ffffff;
}

.mt-form-title {
    margin: 0 0 12px 0;
    font-family: var(--mt-forms-h-family, inherit);
    font-size: var(--mt-forms-h-size, 32px);
    color: var(--mt-forms-h-color, #1a202c);
    font-weight: var(--mt-forms-h-weight, 800);
}

.mt-form-desc {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--mt-forms-desc-color, #4a5568);
}

#mt-forms-main {
    width: 100%;
    max-width: var(--mt-forms-width, 640px);
}

.mt-field-group {
    background: var(--mt-forms-field-bg, #f8fafc);
    padding: 30px;
    border-radius: var(--mt-forms-radius, 12px);
    margin-bottom: 20px;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    width: 100%;
    overflow-wrap: break-word;
}

.mt-glass-active .mt-field-group {
    box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.mt-glass-active .mt-field-group:focus-within {
    box-shadow: 12px 12px 24px #cbd5e1, -12px -12px 24px #ffffff;
}

.mt-label {
    display: block;
    margin-bottom: 20px;
    font-size: var(--mt-forms-q-size, 18px);
    font-weight: var(--mt-forms-q-weight, 600);
    color: var(--mt-forms-q-color, #1a202c);
}

.mt-label .required {
    color: #d93025;
}

.mt-input, .mt-textarea, .mt-select {
    width: 100%;
    max-width: 100%;
    background: var(--mt-forms-input-bg, #eef1f5);
    border: 1px solid rgba(0,0,0,0.05); /* Subtle border when shadows are off */
    padding: 14px 18px;
    font-family: inherit;
    font-size: 15px;
    color: #4a5568;
    outline: none;
    border-radius: var(--mt-forms-radius, 12px);
    transition: all 0.2s ease;
    margin: 0;
    box-sizing: border-box;
    display: block;
}

.mt-glass-active .mt-input, 
.mt-glass-active .mt-textarea, 
.mt-glass-active .mt-select {
    border: none;
    box-shadow: inset 4px 4px 8px #d1d9e6, inset -4px -4px 8px #ffffff;
}

.mt-glass-active .mt-input:focus, 
.mt-glass-active .mt-textarea:focus, 
.mt-glass-active .mt-select:focus {
    box-shadow: inset 6px 6px 12px #cbd5e1, inset -6px -6px 12px #ffffff;
}

.mt-textarea {
    resize: vertical;
    min-height: 100px;
}

.mt-option-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    cursor: pointer;
    font-size: 14px;
    color: #202124;
    padding: 8px 12px;
    border-radius: var(--mt-forms-radius, 5px);
    transition: background 0.2s ease;
}

.mt-option-label:hover {
    background: var(--mt-forms-option-hover, #f8fafc);
}

/* Custom Centered Radio & Checkboxes */
.mt-option-label input[type="radio"], 
.mt-option-label input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border: 1px solid rgba(255,255,255,0.8);
    background: var(--mt-forms-input-bg, #eef1f5);
    border-radius: 50%; /* Radio */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 2px 2px 5px #d1d9e6, -2px -2px 5px #ffffff;
    position: relative;
    flex-shrink: 0;
    margin: 0;
}

.mt-option-label input[type="checkbox"] {
    border-radius: 6px; /* Checkbox */
}

/* The Dot for Radio */
.mt-option-label input[type="radio"]::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--mt-forms-accent, #002eff);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46);
}

/* The Check for Checkbox - CSS Drawn for better centering */
.mt-option-label input[type="checkbox"]::before {
    content: "";
    width: 6px;
    height: 10px;
    border: solid var(--mt-forms-accent, #002eff);
    border-width: 0 2px 2px 0;
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg) scale(0);
    opacity: 0;
    transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46);
}

.mt-option-label input[type="radio"]:checked::before {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.mt-option-label input[type="checkbox"]:checked::before {
    transform: translate(-50%, -50%) rotate(45deg) scale(1);
    opacity: 1;
}

.mt-option-label input:checked {
    box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #ffffff;
}

.mt-submit-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-top: 24px;
}

.mt-submit-btn {
    background: var(--mt-forms-button, var(--mt-forms-accent, #002eff)) !important; /* Button Color */
    color: var(--mt-forms-button-text, #ffffff) !important;
    border: none !important;
    padding: 16px 32px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: var(--mt-forms-radius, 12px) !important;
    cursor: pointer !important;
    box-shadow: 6px 6px 12px #d1d9e6, -6px -6px 12px #ffffff !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.mt-submit-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 8px 8px 16px #cbd5e1, -8px -8px 16px #ffffff !important;
    background: var(--mt-forms-hover, #001ecb) !important;
    color: var(--mt-forms-hover-text, #ffffff) !important;
    filter: brightness(1.1) !important; /* Subtle glow on hover */
}

.mt-submit-btn:active {
    box-shadow: inset 4px 4px 8px rgba(0,0,0,0.1), inset -4px -4px 8px #ffffff;
    transform: translateY(0);
}

#mt-form-msg {
    font-size: 14px;
    padding: 10px;
    border-radius: var(--mt-forms-radius, 5px);
    display: none;
    width: 100%;
}

#mt-form-msg.success {
    display: block;
    background: #e6fffa;
    color: #234e52;
    border: 1px solid #81e6d9;
}

#mt-form-msg.error {
    display: block;
    background: #fff5f5;
    color: #9b2c2c;
    border: 1px solid #feb2b2;
}

/* Success Popup */
.mt-success-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

.mt-popup-content {
    background: #ffffff;
    padding: 40px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
    max-width: 400px;
    width: 90%;
    animation: mt-popup-show 0.3s ease-out;
}

@keyframes mt-popup-show {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.mt-popup-content h2 {
    margin: 20px 0 0;
    font-size: 18px;
    color: #1a202c;
    font-family: var(--mt-forms-font-family, sans-serif);
}

.mt-checkmark-circle {
    width: 60px;
    height: 60px;
    background: #48bb78;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    animation: mt-check-pulse 1s infinite;
}

.mt-checkmark {
    width: 30px;
    height: 15px;
    border-left: 4px solid white;
    border-bottom: 4px solid white;
    transform: rotate(-45deg);
    margin-top: -5px;
}

@keyframes mt-check-pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(72,187,120, 0.4); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 20px rgba(72,187,120, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(72,187,120, 0); }
}

/* Mobile Responsiveness */
@media (max-width: 600px) {
    #mt-forms-wrapper {
        padding: 20px 10px;
    }
    
    .mt-form-title {
        font-size: 24px;
    }
}