/* =====================================================
   PRO-F — CONTACT PAGE  (loads AFTER app.css)
   Hero banner + breadcrumb come from app.css (shared hero).
   Fonts, colours, section spacing, headings, buttons,
   photo-frame, dark section come from app.css.
   ===================================================== */

/* ---------- LAYOUT ---------- */
.contact-main .section-head { margin-bottom: 48px; }
.contact-layout { --bs-gutter-x: 26px; --bs-gutter-y: 26px; }

/* ---------- LEFT INFO PANEL (dark) ---------- */
.contact-info-panel {
    position: relative; overflow: hidden; display: flex; flex-direction: column;
    padding: clamp(27px, 3.4vw, 43px); background: var(--navy-deep); color: #fff;
}
.contact-info-panel::after {
    content: ""; position: absolute; right: -80px; top: -90px; width: 220px; height: 220px;
    border: 1px solid #ffffff1b; border-radius: 50%;
    box-shadow: 0 0 0 28px #ffffff08, 0 0 0 58px #ffffff06; pointer-events: none;
}
.contact-info-panel .contact-small { color: #8de0ae; }
.contact-info-panel h3 { margin: 0px 0 0; color: #fff; font: 500 clamp(27px, 3vw, 35px)/1.2 var(--font-display); }
.contact-info-intro { max-width: 330px; margin: 13px 0 30px; color: #c3d2dc; line-height: 1.75; }
.contact-info-item {
    position: relative; z-index: 1; display: grid; grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px; padding: 22px 0; border-top: 1px solid #ffffff20;
}
/*.contact-icon { display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid #ffffff38; border-radius: 50%; color: #9be0b5; }*/
.contact-icon { display: grid; place-items: center; width: 39px; height: 39px; border: 1px solid #ffffff; border-radius: 50%; color: #ffffff; }
.contact-icon:hover  { display: grid; place-items: center; transform: translateY(-2px); background-color: var(--emerald); width: 39px; height: 39px; border: 1px solid #9be0b5; border-radius: 50%; color: #ffffff; }
.contact-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.contact-info-item h4 { margin: 1px 0 9px; color: #fff; font-size: 14px; font-weight: 700; }
.contact-info-item p, .contact-info-item a { display: block; margin: 0; color: #c3d2dc; font-size: 15px; line-height: 1.8; overflow-wrap: anywhere; }
.contact-info-item a { width: fit-content; transition: color .2s; }
.contact-info-item a:hover { color: #9be0b5; }
.contact-info-item a span { margin-left: 5px; color: #9be0b5; }
.contact-info-footer {
    display: flex; align-items: flex-start; gap: 10px; margin-top: auto; padding-top: 27px;
    color: #a9c0ce; font-size: 11px; line-height: 1.6; letter-spacing: .025em;
}
.contact-footer-dot { flex: 0 0 7px; width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: var(--emerald); }
@media (max-width: 767.98px) {
    .contact-main .section-head { margin-bottom: 32px; }
    .contact-layout { --bs-gutter-x: 18px; }
}

/* ---------- FORM CARD ---------- */
.contact-form-card {
    position: relative;
    padding: 46px;
    background: #fff;
    border: var(--image-border);
    border-radius: var(--image-radius);
    box-shadow: var(--image-shadow);
}
.contact-form-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    border-radius: var(--image-radius) var(--image-radius) 0 0;
    /*background: var(--emerald);*/
}
.contact-small { 
    gap: 12px;
        margin-bottom: 10px;
        color: var(--navy);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .18em;
        text-transform: capitalize;
    }
.contact-form-card h3 { margin: 10px 0 10px; color: var(--navy-deep); font: 500 clamp(26px, 2.6vw, 32px)/1.25 var(--font-display); }
.contact-form-sub { margin: 0 0 28px; color: var(--muted); }

.contact-form-card .form-label { margin-bottom: 6px; color: var(--navy-deep); font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.contact-form-card .form-control,
.contact-form-card .form-select {
    min-height: 52px;
    padding: 12px 16px;
    border: 1px solid #d6dfe4;
    border-radius: 0;
    background-color: var(--paper);
    color: var(--ink);
    font-size: 15px;
    box-shadow: none;
    transition: border-color .2s, background-color .2s;
}
.contact-form-card textarea.form-control { min-height: 140px; resize: vertical; }
.contact-form-card .form-control:focus,
.contact-form-card .form-select:focus { border-color: var(--navy); background-color: #fff; outline: 0; box-shadow: 0 0 0 3px #35a66f26; }
.contact-form-card .form-control.is-invalid,
.contact-form-card .was-validated .form-control:invalid,
#contactForm.was-validated .form-control:invalid { border-color: #c0392b; background-image: none; }
.contact-form-card .invalid-feedback { font-size: 12.5px; }
#contactForm.was-validated .form-control:invalid ~ .invalid-feedback { display: block; }

.contact-submit { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: 30px; text-align: center; }
/*.contact-submit .btn { min-width: 205px; }*/
.contact-submit small { color: #7d8a93; font-size: 12px; }
.contact-submit .btn[disabled] { opacity: .7; pointer-events: none; }

.contact-alert { margin-bottom: 24px; padding: 14px 18px; font-size: 14.5px; font-weight: 600; }
.contact-alert.success { background: var(--mint); border-left: 4px solid var(--emerald); color: var(--emerald-dark); }

@media (max-width: 650px) { .contact-form-card { padding: 30px 22px; } }

/* ---------- MAP ---------- */
.contact-map { height: 420px; }
.contact-map iframe { display: block; width: 100%; height: 100%; border: 0; filter: saturate(.85); }
@media (max-width: 760px) { .contact-map { height: 320px; } }


/* Inline validation errors */
.field-error {
    display: block;
    margin-top: 5px;
    color: #dc2626;
    font-size: 13px;
    line-height: 1.45;
}

.field-error:empty {
    display: none;
}

.contact-form-card .form-control.field-invalid,
.contact-form-card .form-select.field-invalid {
    border-color: #dc2626 !important;
}

.message-counter {
    display: block;
    margin-top: 5px;
    text-align: right;
    color: #6b7280;
    font-size: 12px;
}