/*
 * Contact Form 7 forms: contact, nanny enrollment, training workshop, cooperation.
 * The form templates reuse the Gravity Forms class names (gform_fields, gfield, gfield_label,
 * ginput_container, gform_footer ...) so qnta_forms.css / main_arabic.css keep applying.
 * This file adds the Gravity Forms "legacy" base styles those forms relied on, mapped to CF7 markup.
 */

/* Base layout */
.qnta-cf7 form {
    text-align: left;
    max-width: 100%;
    margin: 0 auto;
}
/* Contains the floated submit footer (e.g. .rtl .enrollment-form .gform_footer) so it can't overlap the next section */
.qnta-cf7 form::after {
    content: "";
    display: table;
    clear: both;
}
.qnta-cf7 ul.gform_fields {
    margin: 0 !important;
    padding: 0;
    list-style-type: none;
    display: block;
}
.qnta-cf7 li,
.qnta-cf7 form li {
    margin-left: 0 !important;
    list-style: none !important;
    overflow: visible;
}
body .qnta-cf7 ul li.gfield {
    margin-top: 16px;
    padding-top: 0;
}
.qnta-cf7 .wpcf7-form-control-wrap {
    display: block;
}
.qnta-cf7 label.gfield_label {
    font-weight: 700;
    font-size: inherit;
}
.qnta-cf7 .top_label .gfield_label {
    display: inline-block;
    line-height: 1.3;
    clear: both;
}
.qnta-cf7 .gfield_required {
    color: #790000;
    margin-left: 8px; /* GF nested two .gfield_required spans, 4px each */
}
body .qnta-cf7 .top_label div.ginput_container {
    margin-top: 8px;
}

/* Inputs */
.qnta-cf7 input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=file]) {
    font-size: inherit;
    font-family: inherit;
    padding: 5px 4px;
    letter-spacing: normal;
}
.qnta-cf7 textarea {
    font-size: inherit;
    font-family: inherit;
    letter-spacing: normal;
    padding: 6px 8px;
    line-height: 1.5;
    resize: none;
}
.qnta-cf7 select {
    font-size: inherit;
    font-family: inherit;
    letter-spacing: normal;
    line-height: 1.5;
}
.qnta-cf7 select.medium {
    padding: 2px 0 2px 3px;
}
.qnta-cf7 input.medium,
.qnta-cf7 select.medium {
    width: 100%;
}
.qnta-cf7 textarea.medium {
    width: 100%;
    height: 120px;
}
.qnta-cf7 .gform_fileupload_rules {
    font-size: .813em;
    line-height: 1.5;
}

/* Section headings and HTML blocks */
.qnta-cf7 .gsection {
    border-bottom: 1px solid #CCC;
    padding: 0 16px 8px 0;
    margin: 28px 0 28px 0;
}
.qnta-cf7 h2.gsection_title {
    margin: 0 !important;
    padding: 0 !important;
    letter-spacing: normal !important;
    font-weight: 700;
    font-size: 1.25em;
}
.qnta-cf7 ul.gform_fields li.gfield.gfield_html {
    max-width: 100%;
    margin-top: 10px;
}

/* Radio buttons and checkboxes (GF: ul.gfield_radio > li.gchoice > input + label) */
.qnta-cf7 .ginput_container_radio,
.qnta-cf7 .ginput_container_checkbox {
    overflow: hidden; /* contains the floated radio items */
}
.qnta-cf7 .wpcf7-radio.gfield_radio,
.qnta-cf7 .wpcf7-checkbox.gfield_checkbox {
    display: block;
    margin: 6px 0;
    padding: 0;
}
.qnta-cf7 .gfield_radio .wpcf7-list-item,
.qnta-cf7 .gfield_checkbox .wpcf7-list-item {
    display: block;
    position: relative;
    overflow: hidden;
    margin: 0 0 16px 0;
    padding: 0;
    line-height: 1.2;
}
.qnta-cf7 .gfield_radio .wpcf7-list-item {
    float: left;
}
.qnta-cf7 .wpcf7-form .wpcf7-list-item > label {
    display: inline;
    margin: 0;
    padding: 0;
    font-weight: inherit;
    cursor: pointer;
}
.qnta-cf7 .wpcf7-list-item input[type=radio],
.qnta-cf7 .wpcf7-list-item input[type=checkbox] {
    display: inline-block;
    vertical-align: middle;
    margin-top: 6px;
    margin-left: 1px;
}
.qnta-cf7 .wpcf7-list-item-label {
    display: inline-block;
    padding: 0;
    width: auto;
    max-width: 85%;
    line-height: 1.5;
    font-size: .875em;
    vertical-align: middle;
    white-space: normal;
    cursor: pointer;
}
.qnta-cf7 .gfield_radio .wpcf7-list-item-label {
    margin: 2px 0 0 8px; /* 4px margin + the space GF had between input and label */
}
.qnta-cf7 .gfield_checkbox .wpcf7-list-item-label {
    margin: 0 0 0 4px;
}
.qnta-cf7 .wpcf7-list-item input:checked + .wpcf7-list-item-label {
    font-weight: 700;
}

/* Submit */
.qnta-cf7 .gform_footer {
    position: relative;
    padding: 16px 0 10px 0;
    margin: 16px 0 0 0;
    clear: both;
    width: 100%;
}
.qnta-cf7 .gform_footer input[type=submit] {
    font-size: 1em;
    width: 100%;
    margin: 0 0 16px 0;
}
.qnta-cf7 .wpcf7-spinner {
    position: absolute;
    top: 29px;
}

/* Validation (GF error colours) */
.qnta-cf7 .wpcf7 form .wpcf7-response-output {
    display: none;
}
/* .wpcf7 added so these beat CF7's own styles.css, which loads after this file */
.qnta-cf7 .wpcf7 form.invalid .wpcf7-response-output,
.qnta-cf7 .wpcf7 form.unaccepted .wpcf7-response-output,
.qnta-cf7 .wpcf7 form.payment-required .wpcf7-response-output,
.qnta-cf7 .wpcf7 form.failed .wpcf7-response-output,
.qnta-cf7 .wpcf7 form.aborted .wpcf7-response-output,
.qnta-cf7 .wpcf7 form.spam .wpcf7-response-output {
    display: block;
    width: 100%;
    margin: 8px 0 25px 0;
    padding: 16px 0;
    border: 1px solid #790000;
    border-top-width: 2px;
    border-bottom-width: 2px;
    border-radius: 5px;
    color: #790000;
    font-size: 1em;
    font-weight: 700;
    text-align: center;
    clear: both;
}
.qnta-cf7 ul.gform_fields li.gfield:has(.wpcf7-not-valid-tip) {
    background-color: rgba(255, 223, 224, .25);
    margin-bottom: 6px !important;
    border-top: 1px solid #C89797;
    border-bottom: 1px solid #C89797;
    padding-top: 8px;
    padding-bottom: 6px;
    padding-right: 0;
    box-sizing: border-box;
    /* max-width as in GF: a fixed width would push half-width fields (e.g. Contact phone) onto their own row */
    max-width: calc(100% - 16px) !important;
}
/* Start Message below the floated Email/Phone row, or its wrapper covers the Phone field when that row grows */
.contact_us .qnta-cf7 li.ct_message_field {
    clear: both;
}
.qnta-cf7 li.gfield:has(.wpcf7-not-valid-tip) .gfield_label {
    color: #790000;
    margin-top: 12px;
}
.qnta-cf7 li.gfield:has(.wpcf7-not-valid-tip) div.ginput_container {
    margin-top: 12px;
}
.qnta-cf7 li.gfield:has(.wpcf7-not-valid-tip) input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=file]),
.qnta-cf7 li.gfield:has(.wpcf7-not-valid-tip) textarea {
    border: 1px solid #790000;
}
.qnta-cf7 li.gfield:has(.wpcf7-not-valid-tip) input:not([type=radio]):not([type=checkbox]),
.qnta-cf7 li.gfield:has(.wpcf7-not-valid-tip) textarea,
.qnta-cf7 li.gfield:has(.wpcf7-not-valid-tip) select {
    margin-bottom: 2px;
}
.qnta-cf7 li.gfield:has(.wpcf7-not-valid-tip) .gfield_radio,
.qnta-cf7 li.gfield:has(.wpcf7-not-valid-tip) .gfield_checkbox {
    color: #790000;
}
.qnta-cf7 .wpcf7 .wpcf7-not-valid-tip {
    display: block;
    margin-top: 0;
    padding: 0 16px 10px 0;
    color: #790000;
    font-size: .813em;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: normal;
}
.contact_us .qnta-cf7 .wpcf7 .wpcf7-not-valid-tip {
    margin-top: 9px; /* the contact form had labels/sub-labels "above" in GF */
}
.qnta-cf7 .wpcf7-radio + .wpcf7-not-valid-tip,
.qnta-cf7 .wpcf7-checkbox + .wpcf7-not-valid-tip {
    margin-top: 0;
    clear: both;
}

@media only screen and (min-width: 641px) {
    .qnta-cf7 ul.gform_fields li.gfield {
        padding-right: 16px;
    }
    .qnta-cf7 .top_label input.medium,
    .qnta-cf7 .top_label select.medium {
        width: calc(50% - 8px);
    }
    .qnta-cf7 form.invalid .top_label input.medium,
    .qnta-cf7 form.invalid .top_label select.medium {
        width: 50%;
    }
    .qnta-cf7 textarea.medium {
        height: 160px;
    }
    .qnta-cf7 .gsection {
        margin: 28px 16px 28px 0;
    }
    .qnta-cf7 .gfield_radio .wpcf7-list-item,
    .qnta-cf7 .gfield_checkbox .wpcf7-list-item {
        margin: 0 0 8px 0;
        line-height: 1.3;
    }
    .qnta-cf7 .gform_footer input[type=submit] {
        display: inline-block;
        width: auto;
        margin: 0 16px 0 0;
    }
}
@media only screen and (max-width: 641px) {
    .qnta-cf7 input:not([type=radio]):not([type=checkbox]):not([type=file]) {
        line-height: 2;
        min-height: 2rem;
    }
    .qnta-cf7 .gform_fileupload_rules {
        display: block;
        margin-bottom: 8px;
    }
    .qnta-cf7 .wpcf7-list-item-label {
        width: 85%;
    }
    /* the label wraps under the radio here, so there is no space before it */
    .qnta-cf7 .gfield_radio .wpcf7-list-item-label {
        margin-left: 4px;
    }
    .corporate-form .qnta-cf7 .gfield_radio .wpcf7-list-item-label {
        margin-left: 8px;
    }
}
/* Theme rules that targeted the GF choice <li>/<label> (qnta_forms.css, max-width: 767px) */
@media screen and (max-width: 767px) {
    .corporate-form .qnta-cf7 .wpcf7-list-item {
        width: 100% !important;
        float: left !important;
        margin-right: 0 !important;
        margin-bottom: 0 !important;
    }
    .corporate-form .qnta-cf7 .wpcf7-list-item-label,
    .training-form .qnta-cf7 .wpcf7-list-item-label {
        font-size: 14px !important;
    }
}
/* Training workshop list: first nine workshops at half width on tablet (was .gchoice_3_20_1-9) */
@media screen and (min-width: 768px) and (max-width: 1199px) {
    .training-form .qnta-cf7 .trn_workshop_mark_field .wpcf7-list-item:nth-child(-n+9) {
        width: 50%;
    }
}

/* Arabic */
.rtl .qnta-cf7 form,
.rtl .qnta-cf7 input,
.rtl .qnta-cf7 textarea,
.rtl .qnta-cf7 select,
.rtl .qnta-cf7 .gform_footer {
    text-align: right;
    direction: rtl;
}
.rtl .qnta-cf7 form {
    text-align: right !important;
}
.rtl .qnta-cf7 .gform_footer input[type=submit] {
    text-align: center; /* GF right-aligned the button text in Arabic; keep it centred */
}
body.rtl .qnta-cf7 ul,
body.rtl .qnta-cf7 ul li {
    margin-right: 0 !important;
    padding-right: 0 !important;
}
/* Contact Us: main_arabic.css pulls the submit button 80px up beside the CAPTCHA,
   so keep the CAPTCHA's 28% indent (cleared by the reset above) or the two overlap */
@media only screen and (min-width: 1200px) {
    body.rtl .contact_us .qnta-cf7 ul li.ct_captcha_field {
        margin-right: 28% !important;
    }
}
.rtl .qnta-cf7 ul.gform_fields li.gfield {
    padding-left: 16px;
}
.rtl .qnta-cf7 .gfield_required {
    margin-left: 0;
    margin-right: 8px;
}
.rtl .qnta-cf7 .gsection {
    padding: 0 0 8px 16px;
}
.rtl .qnta-cf7 .gfield_radio .wpcf7-list-item {
    float: right;
}
.rtl .qnta-cf7 .wpcf7-list-item input[type=radio],
.rtl .qnta-cf7 .wpcf7-list-item input[type=checkbox] {
    float: right;
    margin-left: 0;
    margin-right: 1px;
}
.rtl .qnta-cf7 .gfield_radio .wpcf7-list-item-label,
.rtl .qnta-cf7 .gfield_checkbox .wpcf7-list-item-label {
    margin: 0 8px 0 0;
}
@media only screen and (min-width: 641px) {
    .rtl .qnta-cf7 .gform_footer input[type=submit] {
        margin: 0 0 0 16px;
    }
}
.rtl .qnta-cf7 .wpcf7 form .wpcf7-response-output {
    text-align: right;
}
.rtl .qnta-cf7 ul.gform_fields li.gfield:has(.wpcf7-not-valid-tip) {
    padding-right: 16px !important;
}

@media only screen and (max-width: 641px) {
    .rtl .qnta-cf7 {
        padding-right: 16px;
    }
    .rtl .qnta-cf7 .gform_footer {
        padding-left: 16px;
    }
    .rtl .qnta-cf7 .gform_footer .gform_button {
        text-align: center !important;
    }
}

/* Date picker (Gravity Forms legacy date picker look) */
.gform-legacy-datepicker.ui-datepicker {
    height: auto;
    margin: 5px auto 0;
    font: 9pt Arial, sans-serif;
    min-width: 216px;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
}
.gform-legacy-datepicker.ui-datepicker a {
    text-decoration: none;
}
.gform-legacy-datepicker.ui-datepicker table {
    border-collapse: collapse;
    width: 100%;
}
.gform-legacy-datepicker.ui-datepicker .ui-datepicker-header {
    background-color: #666;
    border-color: #666;
    border-style: solid;
    border-width: 1px 0 0 0;
    box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, .2);
    color: #e0e0e0;
    font-weight: bold;
    line-height: 31px;
    min-height: 31px !important;
    text-shadow: 1px -1px 0px #000;
}
.gform-legacy-datepicker.ui-datepicker .ui-datepicker-header .ui-icon {
    display: none;
}
.gform-legacy-datepicker.ui-datepicker .ui-datepicker-title {
    text-align: center;
}
.gform-legacy-datepicker.ui-datepicker .ui-datepicker-title select {
    margin-top: 2.5%;
}
.gform-legacy-datepicker.ui-datepicker .ui-datepicker-prev,
.gform-legacy-datepicker.ui-datepicker .ui-datepicker-next {
    display: inline-block;
    width: 30px;
    height: 30px;
    text-align: center;
    cursor: pointer;
    background-image: url('../img/datepicker-arrow.png');
    background-repeat: no-repeat;
    line-height: 600%;
    overflow: hidden;
}
.gform-legacy-datepicker.ui-datepicker .ui-datepicker-prev {
    float: left;
    background-position: center -30px;
}
.gform-legacy-datepicker.ui-datepicker .ui-datepicker-next {
    float: right;
    background-position: center 0px;
}
.gform-legacy-datepicker.ui-datepicker thead {
    background: linear-gradient(to bottom, #f7f7f7 0%, #f1f1f1 100%);
    border-bottom: 1px solid #bbb;
}
.gform-legacy-datepicker.ui-datepicker th {
    text-transform: uppercase;
    text-align: center;
    font-size: 6pt;
    padding: 5px 0;
    color: #666666;
    text-shadow: 1px 0px 0px #fff;
}
.gform-legacy-datepicker.ui-datepicker tbody td {
    padding: 0;
    border-top: 1px solid #bbb;
    border-right: 1px solid #bbb;
}
.gform-legacy-datepicker.ui-datepicker tbody td:last-child {
    border-right: 0px;
}
.gform-legacy-datepicker.ui-datepicker tbody tr {
    border-bottom: 1px solid #bbb;
}
.gform-legacy-datepicker.ui-datepicker tbody tr:last-child {
    border-bottom: 0;
}
.gform-legacy-datepicker.ui-datepicker td span,
.gform-legacy-datepicker.ui-datepicker td a {
    display: inline-block;
    font-weight: bold;
    text-align: center;
    width: 100%;
    height: 30px;
    line-height: 30px;
    color: #666666;
    text-shadow: 1px 1px 0 #fff;
}
.gform-legacy-datepicker.ui-datepicker .ui-datepicker-calendar .ui-state-default {
    background: linear-gradient(to bottom, #ededed 0%, #dedede 100%);
    box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);
}
.gform-legacy-datepicker.ui-datepicker .ui-datepicker-calendar .ui-state-hover {
    background: #f7f7f7;
}
.gform-legacy-datepicker.ui-datepicker .ui-datepicker-calendar .ui-state-active {
    background: #FFF2AA;
    border: 1px solid #c19163;
    color: #666;
    box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
    text-shadow: 0px 1px 0px #FFF;
    position: relative;
    margin: -1px;
}
.gform-legacy-datepicker.ui-datepicker .ui-datepicker-unselectable .ui-state-default {
    background: #f4f4f4;
    color: #b4b3b3;
}
.gform-legacy-datepicker.ui-datepicker .ui-datepicker-calendar td:first-child .ui-state-active {
    width: 29px;
    margin-left: 0;
}
.gform-legacy-datepicker.ui-datepicker .ui-datepicker-calendar td:last-child .ui-state-active {
    width: 29px;
    margin-right: 0;
}
.gform-legacy-datepicker.ui-datepicker .ui-datepicker-calendar tr:last-child .ui-state-active {
    height: 29px;
    margin-bottom: 0;
}
.gform-legacy-datepicker.ui-datepicker td.ui-datepicker-unselectable.ui-state-disabled {
    background-color: #d7d7d7;
}
.gform-legacy-datepicker.ui-datepicker table.ui-datepicker-calendar {
    margin: 0 !important;
}
body #ui-datepicker-div.gform-legacy-datepicker[style] {
    z-index: 9999 !important;
}
.gform-legacy-datepicker.ui-datepicker .ui-datepicker-header .ui-datepicker-month,
.gform-legacy-datepicker.ui-datepicker .ui-datepicker-header .ui-datepicker-year {
    border-width: 1px;
    display: inline-block;
    font-size: 0.75rem;
    line-height: 1;
    padding-bottom: 3px;
    padding-left: 3px;
    padding-top: 3px;
}
.gform-legacy-datepicker.ui-datepicker .ui-datepicker-header .ui-datepicker-month {
    max-height: 25px;
    max-width: 40%;
}
.gform-legacy-datepicker.ui-datepicker .ui-datepicker-header .ui-datepicker-year {
    max-height: 25px;
    max-width: 30%;
}