/**
 * Contact form custom styling — override Gravity Forms theme
 * Loaded when contact block is rendered.
 */

/* Override Gravity Forms theme CSS variables */
.contact-form-shortcode [id^="gform_wrapper"] {
    --gf-color-primary: #b84626 !important;
    --gf-color-primary-rgb: 184, 70, 38 !important;
    --gf-color-primary-contrast: #fff !important;
    --gf-color-primary-darker: #9f3d21 !important;
    --gf-color-primary-lighter: #d4643e !important;
}

/* form-box shadow */
#contact_us .form-box {
    box-shadow: 0px 11px 20px rgba(184, 70, 38, 0.1) !important;
}

.contact-form-shortcode .gform_wrapper {
    margin: 0;
}

.contact-form-shortcode .gform_heading {
    display: none;
}

/* Grid: row-gap 12px, col-gap 20px */
.contact-form-shortcode .gform_wrapper .gform_body .gform_fields {
    row-gap: 12px !important;
    column-gap: 20px !important;
}

/* Ẩn 2 field gốc của Phone Code & Your Phone — JS sẽ build wrapper thay thế */
.contact-form-shortcode .gform_wrapper .gfield--width-quarter,
.contact-form-shortcode .gform_wrapper .gfield--width-three-quarter {
    display: none !important;
}

/* Phone wrapper: span 6 columns (half width) */
.contact-form-shortcode .gform_wrapper .gfield-phone-wrapper {
    grid-column: span 6 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 0 !important;
}

.contact-form-shortcode .gfield-phone-wrapper .gfield-phone-label {
    display: none !important;
}

.contact-form-shortcode .gfield-phone-wrapper .gfield-phone-label .req {
    color: #b84626 !important;
    font-weight: 400 !important;
}

/* Phone field container: flex, border, rounded-full */
.contact-form-shortcode .gfield-phone-inner {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    min-height: 52px !important;
    border: 1.5px solid #e5e5e5 !important;
    border-radius: 9999px !important;
    background: white !important;
    position: relative !important;
    overflow: visible !important;
}

/* Phone Code select bên trái */
body .contact-form-shortcode .gfield-phone-inner select.gfield_select,
body .contact-form-shortcode .gfield-phone-inner select {
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    border: none !important;
    border-right: 1.5px solid #e5e5e5 !important;
    border-radius: 0 !important;
    padding: 8px 36px 8px 16px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #4d4d4f !important;
    cursor: pointer !important;
    outline: none !important;
    box-shadow: none !important;
    min-height: 0 !important;
    height: 100% !important;
    flex-shrink: 0 !important;
    line-height: 24px !important;
}

@media (min-width: 768px) {
    body .contact-form-shortcode .gfield-phone-inner select.gfield_select,
    body .contact-form-shortcode .gfield-phone-inner select {
        padding: 9px 36px 12px 20px !important;
        font-size: 16px !important;
        line-height: 28px !important;
    }
}

/* Chevron arrow cho select */
.contact-form-shortcode .gfield-phone-select-wrap {
    position: relative !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: stretch !important;
}

.contact-form-shortcode .gfield-phone-select-wrap::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    right: 14px !important;
    width: 16px !important;
    height: 16px !important;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.99965 10.3337C7.82458 10.334 7.65117 10.2997 7.4894 10.2328C7.32762 10.1658 7.18067 10.0676 7.05699 9.94368L3.52832 6.41435L4.47099 5.47168L7.99965 9.00035L11.5283 5.47168L12.471 6.41435L8.94232 9.94301C8.81869 10.067 8.67176 10.1654 8.50999 10.2324C8.34821 10.2995 8.17477 10.3339 7.99965 10.3337Z' fill='%234D4D4D'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    transform: translateY(-50%) !important;
    pointer-events: none !important;
}

/* Phone input bên phải */
body .contact-form-shortcode .gfield-phone-inner input[type="tel"] {
    flex: 1 !important;
    align-self: stretch !important;
    border: none !important;
    border-radius: 0 !important;
    border-top-right-radius: 9999px !important;
    border-bottom-right-radius: 9999px !important;
    background: transparent !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    color: #4d4d4f !important;
    outline: none !important;
    box-shadow: none !important;
    min-height: 52px !important;
    height: auto !important;
    line-height: 24px !important;
}

@media (min-width: 768px) {
    body .contact-form-shortcode .gfield-phone-inner input[type="tel"] {
        padding: 9px 24px 12px !important;
        font-size: 16px !important;
        line-height: 28px !important;
    }
}

.contact-form-shortcode .gfield-phone-inner select::placeholder,
.contact-form-shortcode .gfield-phone-inner input::placeholder,
.contact-form-shortcode .ginput_container input::placeholder,
.contact-form-shortcode .ginput_container textarea::placeholder,
.contact-form-shortcode .ginput_container select::placeholder {
    color: #939598 !important;
    opacity: 1 !important;
}

.contact-form-shortcode .gfield-phone-inner:focus-within {
    border-color: #b84626 !important;
}

.contact-form-shortcode .gfield {
    margin: 0;
}

.contact-form-shortcode .gfield_label,
.contact-form-shortcode .gform-field-label {
    display: block !important;
    margin-bottom: 8px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 24px !important;
    color: #4d4d4f !important;
}

@media (min-width: 768px) {
    .contact-form-shortcode .gfield_label,
    .contact-form-shortcode .gform-field-label {
        font-size: 16px !important;
        line-height: 28px !important;
    }
}

/* Ẩn chữ "(Required)", thay bằng dấu * qua ::before */
.contact-form-shortcode .gfield_required_text {
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
}

.contact-form-shortcode .gfield_required_text::before {
    content: " *" !important;
    font-size: 16px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
    color: #b84626 !important;
}

.contact-form-shortcode .gfield_required {
    color: #b84626 !important;
    font-weight: 400 !important;
}

.contact-form-shortcode .ginput_container select,
.contact-form-shortcode .ginput_container input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.contact-form-shortcode .ginput_container textarea {
    width: 100% !important;
    border: 1.5px solid #e5e5e5 !important;
    background: #fff !important;
    color: #4d4d4f !important;
    outline: none !important;
    box-shadow: none !important;
}

body .contact-form-shortcode .gform_wrapper .ginput_container select,
body .contact-form-shortcode .gform_wrapper .ginput_container input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) {
    min-height: 52px !important;
    border-radius: 9999px !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    line-height: 24px !important;
    vertical-align: middle !important;
}

@media (min-width: 768px) {
    body .contact-form-shortcode .gform_wrapper .ginput_container select,
    body .contact-form-shortcode .gform_wrapper .ginput_container input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) {
        padding: 9px 20px 12px 20px !important;
        font-size: 16px !important;
        line-height: 28px !important;
    }
}

body .contact-form-shortcode .gform_wrapper .ginput_container_select select {
    padding: 8px 44px 8px 16px !important;
}

@media (min-width: 768px) {
    body .contact-form-shortcode .gform_wrapper .ginput_container_select select {
        padding: 9px 44px 12px 20px !important;
    }
}

.contact-form-shortcode .ginput_container textarea {
    min-height: 140px !important;
    border-radius: 24px !important;
    padding: 14px 20px !important;
    resize: vertical !important;
}

.contact-form-shortcode .ginput_container select:focus,
.contact-form-shortcode .ginput_container input:focus,
.contact-form-shortcode .ginput_container textarea:focus {
    border-color: #b84626 !important;
}

.contact-form-shortcode .ginput_container_select {
    position: relative;
}

.contact-form-shortcode .ginput_container_select select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 44px;
    cursor: pointer;
}

.contact-form-shortcode .ginput_container_select::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 18px;
    width: 10px;
    height: 10px;
    border-right: 2px solid #1a1a1a;
    border-bottom: 2px solid #1a1a1a;
    transform: translateY(-60%) rotate(45deg);
    pointer-events: none;
}

.contact-form-shortcode .gform_footer,
.contact-form-shortcode .gform_page_footer {
    margin-top: 20px;
}

.contact-form-shortcode .gform_button,
.contact-form-shortcode input[type="submit"],
.contact-form-shortcode .gform_button.button,
.contact-form-shortcode .gform-theme .gform_button,
.contact-form-shortcode .gform-theme input[type="submit"] {
    min-height: 52px !important;
    padding: 12px 32px !important;
    border: 0 !important;
    border-radius: 9999px !important;
    background: #b84626 !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.contact-form-shortcode .gform_button:hover,
.contact-form-shortcode input[type="submit"]:hover,
.contact-form-shortcode .gform_button.button:hover {
    background: #9f3d21 !important;
}

.contact-form-shortcode .gfield_validation_message,
.contact-form-shortcode .validation_message {
    margin-top: 8px;
    font-size: 13px;
    color: #d92d20;
}

/* Checkbox custom styling */
.contact-form-shortcode .gfield--type-checkbox .gfield_label {
    display: none !important;
}

.contact-form-shortcode .gfield--type-checkbox .ginput_container_checkbox {
    margin: 0 !important;
}

.contact-form-shortcode .gchoice {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
}

.contact-form-shortcode .gfield-choice-input[type="checkbox"] {
    flex-shrink: 0 !important;
    width: 24px !important;
    height: 24px !important;
    min-height: auto !important;
    border-radius: 4px !important;
    border: 1.5px solid #e5e5e5 !important;
    background: #fff !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer !important;
    margin-top: 2px !important;
    padding: 0 !important;
    position: relative !important;
    transition: background-color 0.15s, border-color 0.15s !important;
}

.contact-form-shortcode .gfield-choice-input[type="checkbox"]:checked {
    background-color: #b84626 !important;
    border-color: #b84626 !important;
}

.contact-form-shortcode .gfield-choice-input[type="checkbox"]:checked::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 13px !important;
    height: 10px !important;
    background-image: url("data:image/svg+xml,%3Csvg width='13' height='10' viewBox='0 0 13 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.3775 1.08329L4.42874 9.72323L0 4.90938L1.17749 3.82609L4.42874 7.36006L11.2 0L12.3775 1.08329Z' fill='white'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    display: block !important;
}

.contact-form-shortcode .gform-field-label--type-inline {
    cursor: pointer !important;
    color: #4d4d4d !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
}

/* Force Work email to span 6 (half width beside phone) */
.contact-form-shortcode .gform_wrapper #field_4_16 {
    grid-column: span 6 !important;
}

@media (max-width: 767px) {
    .contact-form-shortcode .gform_fields {
        grid-template-columns: 1fr;
    }

    .contact-form-shortcode .gform_wrapper .gfield-phone-wrapper,
    .contact-form-shortcode .gform_wrapper #field_4_16.gfield--type-email {
        grid-column: 1 / -1 !important;
    }

    .contact-form-shortcode .gform_wrapper [class*="gfield--width-"] {
        grid-column: 1 / -1 !important;
    }
}

/* Submit button wrapper with icon (input[type=submit] không support ::after) */
.gform-btn-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: #b84626 !important;
    border-radius: 9999px !important;
    padding: 8px 8px 8px 20px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
    min-height: 49px !important;
}

@media (min-width: 1440px) {
    .gform-btn-wrapper {
        padding: 8px 8px 8px 24px !important;
    }
}

.gform-btn-wrapper:hover {
    background: #9f3d21 !important;
}

.gform-btn-wrapper input[type="submit"],
.contact-form-shortcode .gform-btn-wrapper input[type="submit"] {
    background: transparent !important;
    border: none !important;
    color: white !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    padding: 0 0 3px 0 !important;
    min-height: 0 !important;
    height: auto !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    box-shadow: none !important;
    line-height: 1.5 !important;
}

.gform-btn-wrapper input[type="submit"]:hover {
    background: transparent !important;
}

.gform-btn-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 9999px !important;
    background: white !important;
    flex-shrink: 0 !important;
}

.gform-btn-icon svg {
    width: 10px !important;
    height: auto !important;
}

/* ========================================
   CONTACT FORM: Phone Code + Phone Number + Work Email
   Combined phone wrapper (built by JS contact-form.js fallback)
   ======================================== */

/* Phone inner: rounded-[24px] matching training-calendar */
.contact-form-shortcode .gform_wrapper .gfield-phone-wrapper .gfield-phone-inner {
    border-radius: 24px !important;
}

.contact-form-shortcode .gform_wrapper .gfield-phone-wrapper .gfield-phone-inner input[type="tel"] {
    border-top-right-radius: 24px !important;
    border-bottom-right-radius: 24px !important;
    border-radius: 0 !important;
}

/* ========================================
   TRAINING CALENDAR POPUP overrides
   Scoped to avoid affecting Contact form
   ======================================== */
[data-popup-id="training-calendar-popup"] .contact-form-shortcode .gform_wrapper .gfield--width-third.gfield--type-select,
[data-popup-id="training-calendar-popup"] .contact-form-shortcode .gform_wrapper .gfield--width-third.gfield--type-phone {
    display: none !important;
}

/* Force email (width-third) to span half-width */
[data-popup-id="training-calendar-popup"] .contact-form-shortcode .gform_wrapper .gfield--width-third {
    grid-column: span 6 !important;
}

/* Phone wrapper: half width, paired with email */
[data-popup-id="training-calendar-popup"] .contact-form-shortcode .gform_wrapper .gfield-phone-wrapper {
    grid-column: span 6 !important;
}

/* Phone inner: rounded-[24px] như reference */
[data-popup-id="training-calendar-popup"] .contact-form-shortcode .gfield-phone-inner {
    border-radius: 24px !important;
}

[data-popup-id="training-calendar-popup"] .contact-form-shortcode .gfield-phone-inner input[type="tel"] {
    border-top-right-radius: 24px !important;
    border-bottom-right-radius: 24px !important;
}

/* Form success state toggle */
.form-box.is-submitted .form-box__content {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.form-box.is-submitted .form-box__success {
    opacity: 1;
    visibility: visible;
}

/* Hide Gravity Forms validation summary banner (we use per-field messages) */
.contact-form-shortcode .gform_validation_errors,
.contact-form-shortcode .validation_error {
    display: none !important;
}