/* ============================================================
   UNIFIED CONTACT FORM SECTION
   ============================================================ */
:root {
    --mdm-blue: #2B6DF5;
    --mdm-blue-light: #4A84F7;
    --mdm-muted: #9ca3af;
}

.mdm-contact-dark {
    background: #000;
    padding: 100px 0;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.mdm-contact-dark::before {
    content: '';
    position: absolute;
    top: -19%;
    left: -8%;
    width: 600px;
    height: 800px;
    background: url('../images/smart-edge/Ellipse 1 .png') no-repeat center center;
    background-size: contain;
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 0;
}

.mdm-contact-dark::after {
    content: '';
    position: absolute;
    top: -87px;
    right: 1%;
    width: 800px;
    height: 800px;
    background: url('../images/smart-edge/Ellipse 2.png') no-repeat center center;
    background-size: contain;
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 0;
}

.mdm-contact-wrap {
    display: flex;
    gap: 60px;
    align-items: flex-start;
    position: relative;
    z-index: 2;
}

.mdm-contact-left {
    width: 40%;
}

.mdm-contact-left h2 {
    font-size: 40px;
    font-weight: 500;
    line-height: 54px;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
}

.mdm-contact-left p {
    color: var(--mdm-muted);
    font-size: 16px;
    line-height: 1.6;
}

.mdm-contact-right {
    width: 60%;
}

/* CF7 Custom Overrides for Dark Mode */
.mdm-contact-right .wpcf7 form {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.mdm-contact-right .wpcf7 form .form-group p {
    width: 100% !important;
    margin-bottom: 0 !important;
}

/* Suppress all CF7 line-breaks that break flex layout */
.mdm-contact-right .wpcf7 form br {
    display: none;
}

.mdm-contact-right .wpcf7 form>div.form-row,
.mdm-contact-right .wpcf7 form>div,
.mdm-contact-right .wpcf7 form>p {
    width: 100%;
    margin-bottom: 0 !important;
    padding: 0;
}

.mdm-contact-right .wpcf7-form-control-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Pseudo-labels using CF7 data-name */
.mdm-contact-right .wpcf7-form-control-wrap[data-name]::before {
    color: #a1a1aa;
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 8px;
    display: block;
}

.mdm-contact-right .wpcf7-form-control-wrap[data-name="full_name"]::before {
    content: "FULL NAME";
}

.mdm-contact-right .wpcf7-form-control-wrap[data-name="fullname"]::before {
    content: "FULL NAME";
}

.mdm-contact-right .wpcf7-form-control-wrap[data-name="phone"]::before {
    content: "PHONE";
}

.mdm-contact-right .wpcf7-form-control-wrap[data-name="email"]::before {
    content: "EMAIL ADDRESS";
}

.mdm-contact-right .wpcf7-form-control-wrap[data-name="job_title"]::before {
    content: "JOB TITLE";
}

.mdm-contact-right .wpcf7-form-control-wrap[data-name="company"]::before {
    content: "COMPANY";
}

.mdm-contact-right .wpcf7-form-control-wrap[data-name="city"]::before {
    content: "CITY";
}

.mdm-contact-right .wpcf7-form-control-wrap[data-name="message"]::before {
    content: "MESSAGE";
}

/* Half-width fields */
.mdm-contact-right .wpcf7 form .form-row:has([data-name="full_name"]),
.mdm-contact-right .wpcf7 form .form-row:has([data-name="fullname"]),
.mdm-contact-right .wpcf7 form .form-row:has([data-name="phone"]),
.mdm-contact-right .wpcf7 form .form-row:has([data-name="job_title"]),
.mdm-contact-right .wpcf7 form .form-row:has([data-name="company"]),
.mdm-contact-right .wpcf7 form p:has([data-name="full_name"]),
.mdm-contact-right .wpcf7 form p:has([data-name="fullname"]),
.mdm-contact-right .wpcf7 form p:has([data-name="phone"]),
.mdm-contact-right .wpcf7 form p:has([data-name="job_title"]),
.mdm-contact-right .wpcf7 form p:has([data-name="company"]) {
    width: calc(50% - 10px);
}

.mdm-contact-right label {
    display: none;
}

.mdm-contact-right input[type="text"],
.mdm-contact-right input[type="email"],
.mdm-contact-right input[type="tel"],
.mdm-contact-right textarea {
    width: 100%;
    background: #1a1a1f;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #fff;
    padding: 15px 20px;
    border-radius: 8px;
    font-size: 15px;
    outline: none;
    transition: border-color 0.3s;
    font-family: inherit;
}

.mdm-contact-right input:focus,
.mdm-contact-right textarea:focus {
    border-color: var(--mdm-blue);
}

.mdm-contact-right textarea {
    min-height: 120px;
    resize: vertical;
}

.mdm-contact-right .wpcf7-submit {
    background: var(--mdm-blue);
    color: #fff;
    border: none;
    padding: 15px 40px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.3s;
    margin-top: 10px;
}

.mdm-contact-right .wpcf7-submit:hover {
    background: var(--mdm-blue-light);
}

/* ============================================================
   RESPONSIVE STYLES
   ============================================================ */
/* Tablet — 991px */
@media (max-width: 991px) {
    .mdm-contact-wrap {
        flex-direction: column;
        gap: 30px;
    }

    .mdm-contact-left,
    .mdm-contact-right {
        width: 100%;
    }
}

/* Mobile — 767px */
@media (max-width: 767px) {

    .mdm-contact-right .wpcf7 form .form-row:has([data-name]),
    .mdm-contact-right .wpcf7 form p:has([data-name]) {
        width: 100%;
    }

    .mdm-contact-dark::before,
    .mdm-contact-dark::after {
        display: none;
    }
}