/* FORM CONTAINER */
.custom-form {
    background: #ffffff;
    border-radius: 2rem;
    padding: 10% 5%;
}

/* Inside a modal — strip outer spacing */
.modal-body .custom-form {
    margin: 0 !important;
    padding: 0 !important;
}

/* INPUT CONTAINERS (rows) */
.custom-form .input-container {
    display: flex;
    width: 100%;
    align-items: center;
    align-self: center;
    gap: 1rem;
}

.custom-form .input-container-message {
    display: flex;
    width: 100%;
    margin-bottom: 15px;
    align-items: normal;
    gap: 1rem;
    font-size: 1.5rem;
}

.modal-body .custom-form .input-container {
    line-height: normal;
}

/* INPUT ICON WRAPPER */
.custom-form .input-icon-wrapper {
    width: 100%;
    position: relative;
}

.custom-form .input-icon-wrapper i {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #666;
}

/* CF7 FORM CONTROL — base (overridden by design system in cf7-select-dropdown.css) */
.custom-form .input-icon-wrapper .wpcf7-form-control {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    background: #ffffff;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.custom-form .input-icon-wrapper .wpcf7-form-control:focus {
    outline: none;
    border-color: #199caa;
    box-shadow: 0 0 0 2px rgba(25, 156, 170, 0.2);
}

.custom-form textarea.wpcf7-form-control {
    min-height: 150px;
    max-height: 400px;
    resize: vertical;
}

/* Input/textarea/select typed text color */
.custom-form .input-container .input-icon-wrapper input,
.custom-form .input-container-message .input-icon-wrapper textarea,
.custom-form .input-container .input-icon-wrapper select {
    color: #000000;
}

/* Placeholder color */
.custom-form .input-container .input-icon-wrapper input::placeholder,
.custom-form .input-container-message .input-icon-wrapper textarea::placeholder,
.custom-form .input-container .input-icon-wrapper select option[disabled][selected] {
    color: #747474;
}

/* Hidden input inside custom select */
.custom-select-wrapper input[type="hidden"] {
    color: #000000;
}

/* Remove default bottom spacing on CF7 select */
.custom-form .input-container .input-icon-wrapper select.wpcf7-form-control {
    margin-bottom: 0;
}

/* FIELD TITLE (label) + ASTERISK */
.custom-form .input-container .input-icon-wrapper .field-title,
.custom-form .input-container-message .input-icon-wrapper .field-title {
    font-size: 15px;
    color: #000000;
    margin-bottom: 0;
}

.custom-form .input-container .input-icon-wrapper .field-title .field-asterisk,
.custom-form .input-container-message .input-icon-wrapper .field-title .field-asterisk {
    font-size: 15px;
    color: red;
    font-weight: bold;
}

.custom-form .input-container .field-title {
    text-align: left;
    width: 100%;
    display: block;
    margin: 0;
}

/* WARNING (custom inline message) */
.custom-form .input-icon-wrapper .cf7-warning {
    color: red;
    font-size: 0.875rem;
    display: none;
}

/* Slight gray tone for number-only field hints */
.custom-form input[name="mt4-id"] + .cf7-warning,
.custom-form input[name="your-phone"] + .cf7-warning,
.custom-form input[name="your-intl-phone"] + .cf7-warning {
    margin-left: 5px;
    color: gray;
}

/* CF7 NATIVE VALIDATION TIP */
.custom-form .wpcf7-not-valid-tip {
    color: #dc3545;
    text-align: left;
    font-size: 15px;
    display: block;
    position: relative;
}

.modal-body .custom-form .wpcf7-not-valid-tip {
    display: grid;
    margin-top: 1rem;
}

/* CF7 RESPONSE MESSAGES (success / error / spam) */
.wpcf7 .wpcf7-form.invalid .wpcf7-response-output {
    margin: 0;
    display: block;
}

.wpcf7 .wpcf7-form.failed .wpcf7-response-output,
.wpcf7 .wpcf7-form.invalid .wpcf7-response-output,
.wpcf7 .wpcf7-form.spam .wpcf7-response-output,
.wpcf7 .wpcf7-form.unaccepted .wpcf7-response-output {
    background-color: #ffffff !important;
    border: 1px solid #db4b68 !important;
    color: #db4b68 !important;
    border-radius: 6px !important;
    padding: 12px 15px !important;
    display: block !important;
    margin: 10px 0 !important;
}

.wpcf7 .wpcf7-form.sent .wpcf7-response-output {
    background-color: #ffffff !important;
    border: 1px solid #199caa !important;
    color: #199caa !important;
    border-radius: 6px !important;
    padding: 12px 15px !important;
    display: block !important;
    margin: 10px 0 !important;
}

/* INTL-TEL INPUT — phone field padding */
input.wpcf7-form-control.wpcf7-intl_tel.wpcf7-validates-as-required.wpcf7-intl-tel {
    padding-right: 50px !important;
}

/* ARABIC / RTL SUPPORT */
html[lang="ar"] .custom-form .input-container,
html[lang="ar"] .custom-form .input-container-message {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 1rem;
    font-size: 1.5rem;
}

html[lang="ar"] .custom-form .input-container-message {
    margin-bottom: 15px;
    align-items: normal;
}

/* RTL — icon last, input first */
html[lang="ar"] .custom-form .input-container p,
html[lang="ar"] .custom-form .input-container-message p {
    order: 2;
    margin-left: 10px;
}

html[lang="ar"] .custom-form .input-container .input-icon-wrapper,
html[lang="ar"] .custom-form .input-container-message .input-icon-wrapper {
    order: 1;
    flex: 1;
}

/* RTL — invalid state flips order */
html[lang="ar"] .invalid .custom-form .input-container p,
html[lang="ar"] .invalid .custom-form .input-container-message p {
    order: 1;
    margin-left: 10px;
}

html[lang="ar"] .invalid .custom-form .input-container .input-icon-wrapper,
html[lang="ar"] .invalid .custom-form .input-container-message .input-icon-wrapper {
    order: 2;
    flex: 1;
}

/* RTL — text alignment for inputs */
html[lang="ar"] .custom-form .input-container .input-icon-wrapper p .wpcf7-form-control,
html[lang="ar"] .custom-form .input-container-message .input-icon-wrapper p .wpcf7-form-control {
    padding: 1rem;
    text-align: right;
}

/* RTL — intl-tel flag container */
html[lang="ar"] .intl-tel-input.allow-dropdown .flag-container,
html[lang="ar"] .intl-tel-input.separate-dial-code .flag-container {
    right: 0 !important;
    left: auto !important;
    direction: rtl;
    padding: 0 6px 0 0 !important;
}

html[lang="ar"] .intl-tel-input .selected-flag {
    display: flex;
    flex-direction: row;
    padding: 0 17px 0 0 !important;
}

html[lang="ar"] .wpcf7-form-control.wpcf7-intl_tel.wpcf7-validates-as-required.wpcf7-intl-tel.your-intl-phone {
    padding-right: 50px !important;
}

html[lang="ar"] .intl-tel-input .country-list .country {
    padding: 5px 12px;
    text-align: right;
}

html[lang="ar"] .intl-tel-input .country-list .country .dial-code {
    padding-right: 10px;
}

html[lang="ar"] .custom-form .input-container .input-icon-wrapper p .wpcf7-form-control.country-selector {
    padding: 0 1rem 0 0;
    text-align: right;
    direction: rtl;
}

/* International Telephone */
/* Force International Telephone Input to full width */
.custom-form .input-icon-wrapper .wpcf7-form-control-wrap.intl_tel-phone {
    display: block;
    width: 100%;
}

.custom-form .intl-tel-input,
.custom-form .intl-tel-input.allow-dropdown,
.custom-form .intl-tel-input.separate-dial-code {
    display: block !important;
    width: 100% !important;
    position: relative;
}

/* Ensure the actual phone input fills the container */
.custom-form .intl-tel-input input.wpcf7-intl-tel,
.custom-form .intl-tel-input input[type="tel"] {
    width: 100% !important;
    box-sizing: border-box;
    padding-left: 52px !important; /* Space for flag dropdown */
}

/* RTL adjustment */
html[lang="ar"] .custom-form .intl-tel-input input.wpcf7-intl-tel,
html[lang="ar"] .custom-form .intl-tel-input input[type="tel"] {
    padding-left: 1rem !important;
    padding-right: 52px !important;
}

/* Prevent message warning emoji become size bigger */
img.emoji {
    display: none;
}