/* Centralized fixes for intl-tel-input + shared form fields across main site, lp and lp2 */

/* Phone field: wrapper must fill its column like the other fields */
.contact-form .iti {
    display: block;
    width: 100%;
    margin-bottom: 15px;
}

.contact-form .iti input.contact-phone {
    width: 100%;
}

.contact-form .field-inner.iti-group {
    margin: 0;
    padding: 0;
}

/* Placeholder follows the input's own text color on every theme */
.contact-form .contact-phone::placeholder {
    color: inherit;
    opacity: 0.65;
}

/* Message textarea (lp2): text must start top-left, not vertically centered */
.contact-form textarea.contact-message {
    resize: vertical;
    height: auto;
    line-height: normal;
    text-align: left;
}

/* Selected country button: inherit the form's own text color
   (fixes black dial code on dark lp2 banner / invisible on popups) */
.contact-form .iti__selected-country {
    color: inherit;
}

/* Site CSS has `.contact-form .form-group button { display: inline-block }`
   which breaks the iti button layout — outrank it (higher specificity) and
   force flex + nowrap so flag, dial code and arrow stay on one line */
.contact-form .form-group button.iti__selected-country {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    width: auto;
    float: none;
    height: 100%;
}

.contact-form .form-group button.iti__selected-country>* {
    flex: 0 0 auto;
    float: none;
}

.contact-form .form-group .iti__selected-country-primary {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.contact-form .iti__selected-dial-code {
    color: inherit;
    margin-left: 4px;
    white-space: nowrap;
}

.contact-form .iti__arrow {
    border-top-color: currentColor;
    margin-left: 4px;
}

/* Country dropdown: always light + readable regardless of page theme */
.iti__dropdown-content,
.iti__country-list {
    background: #ffffff;
    color: #212529;
}

.iti__country {
    color: #212529;
}

.iti__country .iti__country-name {
    color: #212529;
}

.iti__country .iti__dial-code {
    color: #6c757d;
    margin-left: 6px;
}

.iti__country.iti__highlight {
    background-color: #f1f1f1;
}

/* Dropdown search box: site input styles break it, reset it */
.iti__search-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    height: auto;
    margin: 0;
    padding: 8px 10px;
    background: #ffffff;
    color: #212529;
    border: 0;
    border-bottom: 1px solid #dddddd;
    font: inherit;
    line-height: normal;
    text-align: left;
    box-shadow: none;
    border-radius: 0;
}

.iti__search-input::placeholder {
    color: #999999;
    opacity: 1;
}

/* Site CSS breaks the inline icon glyph; hide it and keep clean padding */
.iti__search-icon {
    display: none;
}

.iti__search-input+.iti__country-list {
    border-top: 0;
}

/* Nested .row (page .row.clearfix + include .row) doubles the -15px
   margins and pushes fields off-center — keep our row flush so the
   fields sit symmetric inside every form container */
.contact-form > .row {
    margin-left: 0;
    margin-right: 0;
}

/* Phone wrapper: render select + tel input as ONE field in every theme.
   Inner controls must have no own border/background — the wrapper carries the look. */
.contact-form .phone-input-wrapper {
    display: flex;
    align-items: center;
    padding: 0;
    overflow: hidden;
}

.contact-form .phone-input-wrapper .contact-country-select {
    border: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    width: auto;
    min-width: 0;
    flex: 0 1 auto;
    max-width: 34%;
    height: 100%;
    padding: 0 26px 0 12px;
    cursor: pointer;
    font-size: 14px;
    color: inherit;
    margin: 0;
}

.contact-form .phone-input-wrapper .contact-country-select option {
    color: #212529;
}

.become-sec .contact-form .contact-submit-btn {
	background: #000!important;
	height: 55px!important;
}


.contact-form .phone-input-wrapper .contact-phone {
    border: 0;
    background: transparent;
    box-shadow: none;
    outline: none;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    padding: 0 10px;
    font-size: inherit;
    color: inherit;
    min-height: 51px;
    border: none !important;
    margin-bottom: 0;
}

.contact-form .phone-input-wrapper .contact-phone::placeholder {
    color: inherit;
    opacity: 0.65;
}

/* lp modal/banner forms (.mb-form-body): sibling inputs are underline-style,
   so the phone row must render as ONE underlined field, not a boxed strip */
.mb-form-body .phone-input-wrapper {
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.35);
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.mb-form-body .phone-input-wrapper .contact-country-select {
    height: 100%;
    font-size: inherit;
}

.mb-form-body .phone-input-wrapper .contact-phone {
    height: 100%;
}

/* lp2 dark theme (.lp-lead-form): fields are dark translucent, submit is gold */
.lp-lead-form .phone-input-wrapper .contact-country-select {
    color: #dfddd6;
}

.lp-lead-form .phone-input-wrapper .contact-phone {
    color: #ffffff;
}

.lp-lead-form .phone-input-wrapper .contact-phone::placeholder {
    color: #888680;
    opacity: 1;
}

.lp-lead-form textarea.contact-message {
    height: auto;
    min-height: 110px;
    line-height: 1.5;
    padding-top: 14px;
    padding-bottom: 14px;
    resize: vertical;
}

.lp-lead-form .contact-submit-btn {
    background: linear-gradient(to right, #F4D03F, #F8D26B, #F4D03F) !important;
    color: #0B0B0B !important;
    border: 0 !important;
    border-radius: 8px;
    height: 48px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
}

.lp-lead-form .contact-submit-btn:hover {
    box-shadow: 0 10px 25px rgba(244, 208, 63, 0.35);
}

/* lp banner forms: submit button must be visible */
.home-banner .contact-submit-btn,
.lp-banner .contact-submit-btn,
.main-banner .contact-submit-btn,
.bannerForm .contact-submit-btn,
.banner-form .contact-submit-btn,
.top-form-v2 .contact-submit-btn {
    background-color: #000000;
    color: #ffffff !important;
}

.home-banner .contact-submit-btn:hover,
.lp-banner .contact-submit-btn:hover,
.main-banner .contact-submit-btn:hover,
.bannerForm .contact-submit-btn:hover,
.banner-form .contact-submit-btn:hover,
.top-form-v2 .contact-submit-btn:hover {
    background-color: #333333;
    color: #ffffff !important;
}