/* =========================================================

   AETHEL REALTY — CONTACT PAGE

   IMPORTANT:

   Global menu + global footer remain controlled by style.css.

   This file only styles the Contact page.

========================================================= */

/* =========================================================

   PAGE

========================================================= */

.contact-page-body {

    margin: 0;

    overflow-x: hidden;

    background: #ffffff;

    color: #090909;

}

.contact-main {

    width: 100%;

    overflow: hidden;

}

.contact-main *,

.contact-main *::before,

.contact-main *::after {

    box-sizing: border-box;

}

.contact-shell {

    width: 100%;

    max-width: 1500px;

    margin: 0 auto;

    padding-left: 40px;

    padding-right: 40px;

}

.contact-label {

    display: block;

    font-size: 10px;

    font-weight: 600;

    line-height: 1;

    letter-spacing: .025em;

    text-transform: uppercase;

    color: #0f6868;

}

/* =========================================================

   HEADER

========================================================= */

.contact-page-body .contact-nav {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    z-index: 10001;

}

/* =========================================================

   LOGO

========================================================= */

.contact-page-body .contact-logo {

    position: relative;

    display: block;

}

.contact-page-body .contact-logo .logo__mark {

    display: block;

    filter: none !important;

    transition:

        opacity .35s ease,

        visibility .35s ease;

}

/* CLOSED MENU */

.contact-page-body .contact-logo__black {

    position: relative;

    display: block;

    opacity: 1 !important;

    visibility: visible !important;

    filter: none !important;

}

/* OPEN MENU LOGO */

.contact-page-body .contact-logo__brand {

    position: absolute;

    top: 0;

    left: 0;

    display: block;

    opacity: 0 !important;

    visibility: hidden !important;

    pointer-events: none;

    filter: none !important;

}

/* MENU OPEN */

.contact-page-body.menu-open .contact-logo__black {

    opacity: 0 !important;

    visibility: hidden !important;

}

.contact-page-body.menu-open .contact-logo__brand {

    opacity: 1 !important;

    visibility: visible !important;

    filter: none !important;

}

/* =========================================================

   HAMBURGER

========================================================= */

.contact-page-body .contact-nav .nav-toggle {

    color: #090909 !important;

    border-color: #090909 !important;

}

.contact-page-body .contact-nav .nav-toggle span {

    background-color: #090909 !important;

}

/* MENU OPEN */

.contact-page-body.menu-open .contact-nav .nav-toggle {

    color: #ffffff !important;

    border-color: #ffffff !important;

}

.contact-page-body.menu-open .contact-nav .nav-toggle span {

    background-color: #ffffff !important;

}

/* =========================================================

   CONTACT HERO

========================================================= */

.contact-hero {

    position: relative;

    width: 100%;

    min-height: 100vh;

    padding:

        165px 0 125px;

    background: #ffffff;

}

/* =========================================================

   HERO LAYOUT

========================================================= */

.contact-layout {

    display: grid;

    grid-template-columns:

        minmax(0, 1.05fr) minmax(420px, .72fr);

    gap:

        clamp(70px, 9vw, 145px);

    align-items: start;

}

/* =========================================================

   LEFT INTRO

========================================================= */

.contact-intro {

    min-width: 0;

}

.contact-intro h1 {

    width: 100%;

    max-width: 780px;

    margin:

        72px 0 0;

    font-size:

        clamp(66px, 7.4vw, 112px);

    font-weight: 500;

    line-height: .8;

    letter-spacing: -.067em;

    text-transform: uppercase;

    color: #090909;

}

.contact-intro h1>span {

    display: block;

}

.contact-intro h1 .contact-intro__accent {

    color: #0f6868;

}

/* =========================================================

   INTRO COPY

========================================================= */

.contact-intro__text {

    width: 100%;

    max-width: 385px;

    margin:

        62px 0 0 18%;

    font-size: 17px;

    font-weight: 400;

    line-height: 1.7;

    letter-spacing: normal;

    color: var(--body-text, #55534C);

}

/* =========================================================

   MARKETS

========================================================= */

.contact-markets {

    display: flex;

    flex-wrap: wrap;

    gap:

        10px 26px;

    margin:

        38px 0 0 18%;

}

.contact-markets span {

    display: block;

    font-size: 9px;

    font-weight: 600;

    line-height: 1;

    letter-spacing: .035em;

    text-transform: uppercase;

    color: rgba(0, 0, 0, .4);

}

/* =========================================================

   FORM WRAPPER

========================================================= */

.contact-form-wrap {

    width: 100%;

    max-width: 510px;

    margin-left: auto;

    padding-top: 3px;

}

.contact-form__head {

    margin-bottom: 45px;

}

.contact-form__head>span {

    display: block;

    font-size: 10px;

    font-weight: 600;

    line-height: 1;

    letter-spacing: .025em;

    text-transform: uppercase;

    color: #0f6868;

}

.contact-form__head p {

    margin:

        14px 0 0;

    font-size: 17px;

    font-weight: 400;

    line-height: 1.7;

    letter-spacing: normal;

    color: var(--body-text, #55534C);

}

/* =========================================================

   FORM

========================================================= */

.contact-form {

    width: 100%;

}

/* =========================================================

   STANDARD FORM FIELD

========================================================= */

.form-field {

    position: relative;

    width: 100%;

    margin-bottom: 30px;

    border-bottom:

        1px solid rgba(0, 0, 0, .18);

    transition:

        border-color .3s ease;

}

.form-field:focus-within {

    border-bottom-color: #0f6868;

}

/* =========================================================

   LABEL

========================================================= */

.form-field label {

    display: block;

    margin-bottom: 11px;

    font-size: 9px;

    font-weight: 600;

    line-height: 1;

    letter-spacing: .025em;

    text-transform: uppercase;

    color: rgba(0, 0, 0, .46);

}

/* =========================================================

   STANDARD INPUT / SELECT / TEXTAREA

========================================================= */

.form-field>input,

.form-field>select,

.form-field>textarea {

    display: block;

    width: 100%;

    margin: 0;

    padding:

        0 0 14px;

    border: 0;

    border-radius: 0;

    outline: none;

    background-color: transparent;

    font-family: inherit;

    font-size: 16px;

    font-weight: 400;

    line-height: 1.4;

    letter-spacing: -.015em;

    color: #090909;

    box-shadow: none;

}

/* =========================================================

   PLACEHOLDERS

========================================================= */

.form-field>input::placeholder,

.form-field>textarea::placeholder,

.phone-number::placeholder {

    color: rgba(0, 0, 0, .28);

    opacity: 1;

}

/* =========================================================

   STANDARD SELECT

   Interested In + Market

========================================================= */

.form-field>select {

    padding-right: 32px;

    cursor: pointer;

    appearance: none;

    -webkit-appearance: none;

    background-image:

        linear-gradient(45deg,

            transparent 50%,

            #0f6868 50%),

        linear-gradient(135deg,

            #0f6868 50%,

            transparent 50%);

    background-position:

        calc(100% - 8px) 7px,

        calc(100% - 3px) 7px;

    background-size:

        5px 5px,

        5px 5px;

    background-repeat: no-repeat;

}

.form-field>select:invalid {

    color: rgba(0, 0, 0, .38);

}

.form-field>select option {

    color: #090909;

    background: #ffffff;

}

/* =========================================================

   PHONE FIELD

   One single clean row:

   IN +91 ▼    Phone number

   -------------------------

========================================================= */

.form-field--phone {

    border-bottom: 0;

    margin-bottom: 30px;

}

.form-field--phone:focus-within {

    border-bottom: 0;

}

/* =========================================================

   PHONE ROW

========================================================= */

.phone-row {

    display: flex;

    align-items: center;

    width: 100%;

    min-height: 43px;

    border-bottom:

        1px solid rgba(0, 0, 0, .18);

    transition:

        border-color .3s ease;

}

.phone-row:focus-within {

    border-bottom-color: #0f6868;

}

/* =========================================================

   PHONE COUNTRY CODE

========================================================= */

.phone-code {

    flex:

        0 0 115px;

    width: 115px;

    min-width: 115px;

    margin: 0;

    padding:

        0 27px 14px 0;

    border: 0 !important;

    border-radius: 0 !important;

    outline: none !important;

    background-color: transparent;

    font-family: inherit;

    font-size: 16px;

    font-weight: 400;

    line-height: 1.4;

    letter-spacing: -.015em;

    color: #090909;

    cursor: pointer;

    appearance: none;

    -webkit-appearance: none;

    box-shadow: none !important;

    /* SAME MINIMAL ARROW */

    background-image:

        linear-gradient(45deg,

            transparent 50%,

            #0f6868 50%),

        linear-gradient(135deg,

            #0f6868 50%,

            transparent 50%);

    background-position:

        calc(100% - 12px) 8px,

        calc(100% - 7px) 8px;

    background-size:

        5px 5px,

        5px 5px;

    background-repeat: no-repeat;

}

.phone-code option {

    color: #090909;

    background: #ffffff;

}

/* =========================================================

   PHONE NUMBER

========================================================= */

.phone-number {

    flex: 1;

    width: auto;

    min-width: 0;

    margin: 0;

    padding:

        0 0 14px 18px;

    border: 0 !important;

    border-radius: 0 !important;

    outline: none !important;

    background: transparent !important;

    font-family: inherit;

    font-size: 16px;

    font-weight: 400;

    line-height: 1.4;

    letter-spacing: -.015em;

    color: #090909;

    box-shadow: none !important;

    appearance: none;

    -webkit-appearance: none;

}

/* =========================================================

   PHONE INVALID STATE

========================================================= */

.phone-row:has(.phone-number.is-invalid) {

    border-bottom-color: #0f6868;

}

.phone-number.is-invalid {

    color: #090909;

}

/* =========================================================

   REMOVE BROWSER PHONE DECORATION

========================================================= */

.phone-number::-webkit-contacts-auto-fill-button {

    visibility: hidden;

    display: none !important;

    pointer-events: none;

    position: absolute;

    right: 0;

}

/* =========================================================

   TEXTAREA

========================================================= */

.form-field>textarea {

    min-height: 90px;

    resize: vertical;

}

/* =========================================================

   AUTOFILL

========================================================= */

.form-field input:-webkit-autofill,

.form-field input:-webkit-autofill:hover,

.form-field input:-webkit-autofill:focus,

.phone-number:-webkit-autofill,

.phone-number:-webkit-autofill:hover,

.phone-number:-webkit-autofill:focus {

    -webkit-text-fill-color: #090909;

    -webkit-box-shadow:

        0 0 0 1000px #ffffff inset;

    transition:

        background-color 9999s ease-out 0s;

}

/* =========================================================

   SUBMIT BUTTON

========================================================= */

.contact-submit {

    display: flex;

    justify-content: space-between;

    align-items: center;

    width: 100%;

    margin-top: 44px;

    padding:

        19px 22px;

    border: 0;

    border-radius: 0;

    background: #0f6868;

    font-family: inherit;

    color: #ffffff;

    cursor: pointer;

    transition:

        background-color .3s ease;

}

.contact-submit>span:first-child {

    font-size: 10px;

    font-weight: 600;

    line-height: 1;

    letter-spacing: .025em;

    text-transform: uppercase;

}

.contact-submit__arrow {

    display: block;

    font-size: 18px;

    line-height: 1;

    transition:

        transform .35s cubic-bezier(.22, 1, .36, 1);

}

/* =========================================================

   BUTTON HOVER

========================================================= */

@media (hover: hover) {

    .contact-submit:hover {

        background: #095758;

    }

    .contact-submit:hover .contact-submit__arrow {

        transform:

            translate(3px, -3px);

    }

}

/* =========================================================

   SUCCESS MESSAGE

========================================================= */

.contact-success {

    display: none;

    padding:

        55px 0 20px;

}

.contact-success.is-visible {

    display: block;

}

.contact-success>span {

    display: block;

    font-size:

        clamp(38px, 4vw, 58px);

    font-weight: 500;

    line-height: .9;

    letter-spacing: -.055em;

    color: #0f6868;

}

.contact-success p {

    width: 100%;

    max-width: 300px;

    margin:

        26px 0 0;

    font-size: 17px;

    font-weight: 400;

    line-height: 1.7;

    letter-spacing: normal;

    color: var(--body-text, #55534C);

}

/* =========================================================

   DIRECT CONTACT

========================================================= */

.contact-direct {

    position: relative;

    width: 100%;

    padding:

        105px 0 115px;

    background: #fcfaf5;

}

.contact-direct__grid {

    display: grid;

    grid-template-columns:

        22% minmax(0, 1fr);

    align-items: start;

}

.contact-direct__content {

    min-width: 0;

}

/* =========================================================

   DIRECT EMAIL

========================================================= */

.contact-direct__email {

    display: inline-block;

    max-width: 100%;

    margin: 0;

    text-decoration: none;

    font-size:

        clamp(38px, 4.6vw, 70px);

    font-weight: 500;

    line-height: .9;

    letter-spacing: -.06em;

    color: #090909;

    overflow-wrap: anywhere;

    transition:

        color .3s ease;

}

@media (hover: hover) {

    .contact-direct__email:hover {

        color: #0f6868;

    }

}

/* =========================================================

   DIRECT CONTACT BOTTOM

========================================================= */

.contact-direct__bottom {

    display: grid;

    grid-template-columns:

        minmax(0, 1fr) 280px;

    gap: 60px;

    align-items: end;

    margin-top: 78px;

}

/* =========================================================

   DIRECT PHONE

========================================================= */

.contact-direct__phone {

    width: fit-content;

    text-decoration: none;

    font-size: 18px;

    font-weight: 500;

    line-height: 1.3;

    letter-spacing: -.025em;

    color: #090909;

    transition:

        color .3s ease;

}

@media (hover: hover) {

    .contact-direct__phone:hover {

        color: #0f6868;

    }

}

/* =========================================================

   DIRECT MARKETS

========================================================= */

.contact-direct__markets>span {

    display: block;

    margin-bottom: 12px;

    font-size: 9px;

    font-weight: 600;

    line-height: 1;

    letter-spacing: .025em;

    text-transform: uppercase;

    color: #0f6868;

}

.contact-direct__markets p {

    margin: 0;

    font-size: 12px;

    font-weight: 400;

    line-height: 1.5;

    letter-spacing: -.01em;

    color: rgba(0, 0, 0, .5);

}

/* =========================================================

   GLOBAL FOOTER CONNECTION

   Footer styling itself remains in style.css

========================================================= */

.contact-direct+.clean-footer {

    margin-top: 0;

}

/* =========================================================

   REVEAL

========================================================= */

.contact-reveal {

    opacity: 0;

    transform:

        translateY(18px);

    transition:

        opacity .8s ease,

        transform .9s cubic-bezier(.22, 1, .36, 1);

}

.contact-reveal.is-visible {

    opacity: 1;

    transform:

        translateY(0);

}

/* =========================================================

   TABLET

========================================================= */

@media screen and (max-width: 1100px) {

    .contact-shell {

        padding-left: 24px;

        padding-right: 24px;

    }

    .contact-hero {

        padding:

            145px 0 105px;

    }

    .contact-layout {

        grid-template-columns:

            minmax(0, .95fr) minmax(380px, .75fr);

        gap: 55px;

    }

    .contact-intro h1 {

        font-size:

            clamp(58px, 7vw, 82px);

    }

    .contact-intro__text,

    .contact-markets {

        margin-left: 0;

    }

    .contact-direct__grid {

        grid-template-columns:

            180px minmax(0, 1fr);

    }

}

/* =========================================================

   MOBILE

========================================================= */

@media screen and (max-width: 760px) {

    .contact-shell {

        padding-left: 20px;

        padding-right: 20px;

    }

    /* HERO */

    .contact-hero {

        min-height: 0;

        padding:

            115px 0 85px;

    }

    .contact-layout {

        display: block;

    }

    /* INTRO */

    .contact-intro h1 {

        max-width: 100%;

        margin-top: 54px;

        font-size: 52px;

        line-height: .84;

        letter-spacing: -.06em;

    }

    .contact-intro__text {

        max-width: 310px;

        margin:

            40px 0 0;

        font-size: 16px;

        line-height: 1.7;

    }

    .contact-markets {

        gap:

            9px 18px;

        margin:

            32px 0 0;

    }

    /* FORM */

    .contact-form-wrap {

        max-width: none;

        margin:

            75px 0 0;

        padding: 0;

    }

    .contact-form__head {

        margin-bottom: 38px;

    }

    .form-field {

        margin-bottom: 27px;

    }

    .form-field>input,

    .form-field>select,

    .form-field>textarea {

        font-size: 16px;

    }

    /* PHONE */

    .phone-code {

        flex-basis: 108px;

        width: 108px;

        min-width: 108px;

        padding-right: 25px;

        font-size: 16px;

    }

    .phone-number {

        padding-left: 14px;

        font-size: 16px;

    }

    /* BUTTON */

    .contact-submit {

        margin-top: 38px;

    }

    /* DIRECT CONTACT */

    .contact-direct {

        padding:

            78px 0 85px;

    }

    .contact-direct__grid {

        display: block;

    }

    .contact-direct__content {

        margin-top: 42px;

    }

    .contact-direct__email {

        font-size: 32px;

        line-height: .95;

    }

    .contact-direct__bottom {

        display: block;

        margin-top: 52px;

    }

    .contact-direct__phone {

        font-size: 17px;

    }

    .contact-direct__markets {

        margin-top: 38px;

    }

}

/* =========================================================

   SMALL MOBILE

========================================================= */

@media screen and (max-width: 430px) {

    .contact-intro h1 {

        font-size: 46px;

    }

    .phone-code {

        flex-basis: 102px;

        width: 102px;

        min-width: 102px;

    }

    .phone-number {

        padding-left: 12px;

    }

    .contact-direct__email {

        font-size: 29px;

    }

}

/* =========================================================

   VERY SMALL MOBILE

========================================================= */

@media screen and (max-width: 360px) {

    .contact-intro h1 {

        font-size: 42px;

    }

    .phone-code {

        flex-basis: 98px;

        width: 98px;

        min-width: 98px;

        font-size: 15px;

    }

    .phone-number {

        padding-left: 10px;

        font-size: 15px;

    }

    .contact-direct__email {

        font-size: 27px;

    }

}

/* =========================================================

   REDUCED MOTION

========================================================= */

@media (prefers-reduced-motion: reduce) {

    .contact-reveal {

        opacity: 1;

        transform: none;

        transition: none;

    }

    .contact-submit,

    .contact-submit__arrow,

    .contact-direct__email,

    .contact-direct__phone {

        transition: none;

    }

}

/* =========================================================
   INTERNATIONAL PHONE PICKER - CLEAN INLINE DROPDOWN
   The country list stays anchored to the phone field.
   Flags are intentionally hidden; names and codes remain.
========================================================= */
.contact-page-body .contact-main,
.contact-page-body .contact-hero,
.contact-page-body .contact-layout,
.contact-page-body .contact-form-wrap,
.contact-page-body .contact-form,
.contact-page-body .form-field--phone,
.contact-page-body .phone-row--intl {
    overflow: visible !important;
}

.contact-page-body .phone-row.phone-row--intl {
    display: block;
    position: relative;
    width: 100%;
    min-height: 44px;
}

.contact-page-body .phone-row--intl .iti {
    display: block;
    position: relative;
    width: 100%;
}

.contact-page-body .phone-row--intl input.phone-number {
    display: block;
    width: 100%;
    min-width: 0;
    height: 44px;
    margin: 0;
    padding: 0 12px 12px 92px !important;
    border: 0 !important;
    outline: 0;
    background: transparent;
    box-shadow: none;
    font: inherit;
    font-size: 16px;
    color: #090909;
}

.contact-page-body .phone-row--intl .iti__country-container {
    position: absolute;
    inset: 0 auto 0 0;
    z-index: 3;
}

.contact-page-body .phone-row--intl .iti__selected-country {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 7px;
    padding: 0 8px 12px 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.contact-page-body .iti__selected-country-primary {
    display: flex;
    align-items: center;
    gap: 5px;
}

.contact-page-body .iti__flag,
.contact-page-body .iti__country-list .iti__flag {
    display: none !important;
}

.contact-page-body .iti__selected-dial-code {
    display: inline-block;
    color: #090909;
    font-size: 15px;
    white-space: nowrap;
}

.contact-page-body .iti__arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #0f6868;
    border-bottom: 0;
    margin-left: 4px;
}

/* Let intl-tel-input position its inline dropdown naturally. */
.contact-page-body .iti__dropdown-content {
    z-index: 10020;
    background: #fff;
    color: #090909;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, .12);
}



/* =========================================
   AETHEL REALTY - COUNTRY DROPDOWN FIX
   ========================================= */

/* Phone field becomes positioning reference */
.contact-page-body .phone-row--intl .iti {
    position: relative !important;
    width: 100% !important;
}

/* Prevent clipping */
.contact-page-body .contact-main,
.contact-page-body .contact-hero,
.contact-page-body .contact-layout,
.contact-page-body .contact-form-wrap,
.contact-page-body .contact-form,
.contact-page-body .form-field--phone,
.contact-page-body .phone-row--intl {
    overflow: visible !important;
}

/* Country dropdown positioned below phone field */
.contact-page-body .phone-row--intl .iti__dropdown-content {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    width: 320px !important;
    max-width: calc(100vw - 40px) !important;
    z-index: 999999 !important;
    background: #ffffff !important;
    border: 1px solid #dddddd !important;
    box-shadow: 0 12px 35px rgba(0,0,0,0.12) !important;
}

/* Country list scrolling */
.contact-page-body .iti__country-list {
    max-height: 240px !important;
    overflow-y: auto !important;
}

/* Hide country flags */
.contact-page-body .iti__flag {
    display: none !important;
}


/* ==========================================
   AETHEL REALTY - COUNTRY DROPDOWN DESIGN
   ========================================== */

.contact-page-body .phone-row--intl .iti__dropdown-content {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 320px !important;
    max-width: calc(100vw - 40px) !important;
    padding: 0 !important;
    background: #ffffff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 4px !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12) !important;
    z-index: 999999 !important;
    font-family: inherit !important;
    font-size: 14px !important;
}

/* Search area */
.contact-page-body .iti__search-input {
    display: block !important;
    width: calc(100% - 24px) !important;
    margin: 12px !important;
    padding: 10px 12px !important;
    border: 1px solid #dddddd !important;
    border-radius: 3px !important;
    outline: none !important;
    background: #ffffff !important;
    font-family: inherit !important;
    font-size: 13px !important;
    color: #090909 !important;
    box-sizing: border-box !important;
}

.contact-page-body .iti__search-input:focus {
    border-color: #0f6868 !important;
}

/* Country list */
.contact-page-body .iti__country-list {
    display: block !important;
    max-height: 250px !important;
    overflow-y: auto !important;
    padding: 5px 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* Country row */
.contact-page-body .iti__country {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 14px !important;
    margin: 0 !important;
    cursor: pointer !important;
    font-family: inherit !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #090909 !important;
}

/* Hover */
.contact-page-body .iti__country:hover,
.contact-page-body .iti__country.iti__highlight {
    background: #eff6f5 !important;
}

/* Country name */
.contact-page-body .iti__country-name {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #090909 !important;
}

/* Dial code */
.contact-page-body .iti__dial-code {
    margin-left: auto !important;
    font-size: 12px !important;
    color: #777777 !important;
}

/* Hide flags */
.contact-page-body .iti__flag {
    display: none !important;
}

/* Results messages */
.contact-page-body .iti__no-results,
.contact-page-body .iti__search-results-text {
    padding: 10px 14px !important;
    font-size: 12px !important;
    color: #777777 !important;
}

/* Selected country */
.contact-page-body .iti__country.iti__active {
    background: #eff6f5 !important;
}

/* Mobile */
@media (max-width: 600px) {
    .contact-page-body .phone-row--intl .iti__dropdown-content {
        width: min(320px, calc(100vw - 40px)) !important;
    }
}



/* ==========================================
   AETHEL REALTY - FINAL DROPDOWN VISIBILITY FIX
   ========================================== */

/* Respect plugin's hidden state */
.contact-page-body .iti__dropdown-content.iti__hide,
.contact-page-body .iti__dropdown-content[hidden],
.contact-page-body .iti__country-list[hidden],
.contact-page-body .iti__country[hidden],
.contact-page-body .iti__hide {
    display: none !important;
}

/* Proper dropdown position */
.contact-page-body .phone-row--intl .iti {
    position: relative !important;
}

.contact-page-body .phone-row--intl .iti__dropdown-content {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 320px !important;
    max-width: calc(100vw - 40px) !important;
    z-index: 999999 !important;
}

/* Normal country list visibility */
.contact-page-body .iti__country-list {
    max-height: 240px !important;
    overflow-y: auto !important;
}

/* Hide flags */
.contact-page-body .iti__flag {
    display: none !important;
}

/* Hide accessibility-only text visually */
.contact-page-body .iti__a11y-text,
.contact-page-body .iti__sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Don't force hidden elements to display */
.contact-page-body .iti__country[aria-hidden="true"] {
    display: none !important;
}