/* Prologic redesign - contact page (Figma "Contact" 648:4534).
   Loaded only on the contact page together with home.css and profile.css (page header).
   The form keeps its legacy classes (FormNameDIV3, contactUsFormBTN, ...), so the legacy
   main.css rules for them are overridden here, scoped under .ph-contact. */

/* Main block (648:4540): 100px top/bottom, form card + illustration column, 69px apart */
.ph-contact .ph-contact-main {
    padding: 100px 0;
    background: var(--color-white);
}

.ph-contact .ph-contact-main__row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 69px;
}

.ph-contact .ph-contact-side {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 657px;
}

.ph-contact .ph-contact-illus img {
    display: block;
    width: 657px;
    height: 663px;
    object-fit: contain;
}

/* Contact detail cards (863:4775) */
.ph-contact .ph-contact-cards {
    display: flex;
    gap: 13.635px;
}

.ph-contact .ph-contact-card {
    flex: 1 1 0;
    display: flex;
    align-items: flex-start;
    gap: 6.818px;
    min-height: 137.203px;
    padding: 22.157px 13.635px;
    border: 0.852px solid rgba(0, 0, 0, 0.15);
    border-radius: 6.818px;
    background: var(--color-white);
}

.ph-contact .ph-contact-card__icon {
    flex: none;
    width: 20.453px;
    height: 20.453px;
}

.ph-contact .ph-contact-card__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6.818px;
    min-width: 0;
}

.ph-contact .ph-contact-card__title {
    color: var(--color-black);
    font-family: var(--font-heading) !important;
    font-size: 17.044px;
    line-height: 19.481px;
    font-weight: 600;
}

.ph-contact .ph-contact-card__value {
    color: var(--color-black) !important;
    font-family: var(--font-body) !important;
    font-size: 13.635px;
    line-height: 22.157px;
}

.ph-contact a.ph-contact-card__value:hover {
    color: var(--color-orange) !important;
}

/* Form card (648:4545) */
.ph-contact .ph-contact-form {
    flex: 1 1 0;
    min-width: 0;
    max-width: 794px;
    padding: 32px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    background: var(--color-white);
    filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.1));
}

.ph-contact .contactUsForm {
    display: flex;
    flex-direction: column;
    gap: 24px;
    font-family: var(--font-assistant) !important;
}

.ph-contact .ph-field,
.ph-contact .ph-field.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;
}

.ph-contact .ph-field-row {
    display: flex;
    gap: 24px;
}

.ph-contact .ph-field-row > .ph-field {
    flex: 1 1 0;
}

.ph-contact .ph-field__label {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    color: var(--color-thunder);
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
    text-align: start;
}

/* Legacy main.css sizes these inputs (formInputsAsterix3 etc.) with !important */
.ph-contact .ph-field .form-control {
    width: 100% !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.3) !important;
    border-radius: 8px !important;
    box-shadow: none;
    background: var(--color-white) !important;
    color: var(--color-black) !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    text-align: start;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Message: 3 lines (3 x 24px + 11px padding top/bottom + border = 96px), so no scrollbar shows until a 4th line */
.ph-contact .ph-field textarea.form-control {
    height: 96px !important;
    min-height: 96px;
    padding: 11px 12px !important;
    resize: vertical;
}

.ph-contact .ph-field .form-control::placeholder {
    color: var(--color-black);
    opacity: 1;
}

.ph-contact .ph-field .form-control:focus {
    border-color: var(--color-orange) !important;
    box-shadow: 0 0 0 3px rgba(243, 111, 34, 0.15);
    outline: none;
}

.ph-contact .has-error .form-control {
    border-color: #d9342b !important;
}

.ph-contact .ph-field .help-block {
    margin: 0;
    font-size: 13px;
    color: #d9342b;
}

/* Bootstrap gives the (empty) validator message spans margins; only show them when they have a message */
.ph-contact .ph-field .help-block:empty {
    display: none;
}

.ph-contact .ph-field .help-block ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* main.css floats and pulls validator messages up over the inputs (.list-unstyled li, margin-top:-87px) */
.ph-contact .ph-field .help-block li,
.ph-contact .ph-field .list-unstyled li {
    float: none !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #d9342b !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

.ph-contact .has-error .ph-field__label {
    color: var(--color-thunder);
}

/* Legacy asterisk helpers are replaced by the "*" in the labels */
.ph-contact .placeholderFormName3,
.ph-contact .placeholderFormPhone3,
.ph-contact .placeholderFormMail3 {
    display: none !important;
}

/* Subject: three radio "chips" (126px wide) */
.ph-contact .ph-subject {
    display: flex;
    gap: 8px;
}

.ph-contact .ph-subject__opt {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.ph-contact .ph-subject__opt input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.ph-contact .ph-subject__opt span {
    display: block;
    width: 126px;
    padding: 12px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    color: var(--color-black);
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
    text-align: start;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.ph-contact .ph-subject__opt:hover span {
    border-color: var(--color-orange);
}

.ph-contact .ph-subject__opt input:checked + span {
    border-color: var(--color-orange);
    background: var(--color-orange-tint);
    color: var(--color-orange);
    font-weight: 600;
}

.ph-contact .ph-subject__opt input:focus-visible + span {
    outline: 2px solid var(--color-orange);
    outline-offset: 2px;
}

/* Checkbox + privacy */
.ph-contact .ph-check.FormCheckBoxDIV5 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    padding: 0 0 4px;
}

.ph-contact .ph-check input[type=checkbox] {
    width: 18px;
    height: 18px;
    margin: 0 !important;
    transform: none;
    accent-color: var(--color-orange);
}

.ph-contact .ph-check label {
    margin: 0;
    color: var(--color-black);
    font-size: 14px;
    line-height: 1.5;
    font-weight: 400;
    text-decoration: underline !important;
}

.ph-contact .ph-check .checkboxErr {
    flex-basis: 100%;
    margin: 0;
    font-size: 13px;
}

.ph-contact .ph-privacy.FormCheckBoxDIV5 {
    margin: -16px 0 0 !important;
}

.ph-contact .ph-privacy .privacy p {
    margin: 0;
    color: var(--color-body);
    font-size: 14px;
    line-height: 1.5;
}

.ph-contact .ph-privacy .privacy a {
    color: var(--color-orange) !important;
    text-decoration: underline !important;
}

/* Submit ("Component 20", full width) */
.ph-contact .ph-submit.BTNGroup {
    width: 100%;
    min-height: 48px;
}

.ph-contact .contactUsFormBTN.btn-primary {
    display: flex;
    width: 100%;
    height: auto;
    padding: 10px 20px !important;
    border: 1px solid var(--color-orange) !important;
    border-radius: 8px;
    background-color: var(--color-orange) !important;
    color: var(--color-white) !important;
    font-size: 20px !important;
    line-height: 22.86px;
    white-space: nowrap;
}

.ph-contact .contactUsFormBTN span {
    position: static;
    transform: none;
    font-family: var(--font-heading) !important;
    font-size: 20px !important;
    font-weight: 600;
}

.ph-contact .contactUsFormBTN.btn-primary:hover,
.ph-contact .contactUsFormBTN.btn-primary:focus-visible {
    background-color: var(--color-white) !important;
    color: var(--color-orange) !important;
}

/* Responsive (Figma only has the 1920 frame) */
@media (max-width: 1499px) {
    .ph-contact .ph-contact-side {
        width: min(657px, 44%);
    }

    .ph-contact .ph-contact-illus img {
        width: 100%;
        height: auto;
    }

    .ph-contact .ph-contact-cards {
        flex-wrap: wrap;
    }

    .ph-contact .ph-contact-card {
        flex: 1 1 160px;
    }
}

@media (max-width: 1099px) {
    .ph-contact .ph-contact-main__row {
        flex-direction: column;
        align-items: stretch;
        gap: 48px;
    }

    .ph-contact .ph-contact-form {
        max-width: none;
    }

    .ph-contact .ph-contact-side {
        width: 100%;
        max-width: 657px;
        align-self: center;
    }
}

@media (max-width: 767px) {
    .ph-contact .ph-contact-main {
        padding: 48px 0;
    }

    .ph-contact .ph-contact-form {
        padding: 20px;
    }

    .ph-contact .ph-field-row {
        flex-direction: column;
        gap: 24px;
    }

    .ph-contact .ph-subject {
        flex-wrap: wrap;
    }

    .ph-contact .ph-subject__opt span {
        width: auto;
        min-width: 96px;
    }

    .ph-contact .contactUsFormBTN.btn-primary {
        white-space: normal;
    }

    .ph-contact .ph-contact-cards {
        flex-direction: column;
    }

    .ph-contact .ph-contact-card {
        flex: none;
        min-height: 0;
    }
}