/* ==========================================================================
   Zafrya — Contact page (modern white)
   Clean white cards, neutral charcoal accents, soft shadows.
   Styles the contact-form shortcode + the google-map shortcode.
   The form markup is rendered by Botble; we only restyle stable classes
   (.contact-form, .contact-form-input, .contact-button, .contact-column-*),
   so all functionality (AJAX submit, validation) stays intact.
   ========================================================================== */

:root {
    --zc-bg: #ffffff;
    --zc-card: #ffffff;
    --zc-field: #f4f5f6;          /* input background */
    --zc-field-focus: #ffffff;
    --zc-ink: #1a1a1a;            /* buttons / dark accent */
    --zc-ink-hover: #000000;
    --zc-heading: #1a1a1a;
    --zc-text: #444444;
    --zc-muted: #8a8f96;
    --zc-border: #ececec;
    --zc-radius: 22px;
    --zc-radius-sm: 12px;
    --zc-shadow: 0 18px 45px -24px rgba(0, 0, 0, 0.25);
    --zc-shadow-sm: 0 6px 18px -10px rgba(0, 0, 0, 0.2);
}

.zaf-contact {
    padding: 70px 0 50px;
}

/* ---- Top grid: form + newsletter ---- */
.zaf-contact-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
    align-items: start;
}

.zaf-contact-form-card {
    background: var(--zc-card);
    border-radius: var(--zc-radius);
    padding: 36px 34px 40px;
    box-shadow: var(--zc-shadow);
    border: 1px solid var(--zc-border);
}

.zaf-contact-title {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: clamp(24px, 2.6vw, 32px);
    font-weight: 800;
    color: var(--zc-heading);
    margin: 0 0 22px;
}

/* ---- Form fields (Botble markup, restyled) ---- */
.zaf-contact-form .contact-form-row {
    margin-left: -8px;
    margin-right: -8px;
}
.zaf-contact-form .contact-form-row > [class*="contact-column-"],
.zaf-contact-form .contact-form-row > [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
}

.zaf-contact-form .contact-form-group {
    margin-bottom: 18px;
}

/* Clean placeholder-driven look — hide visible labels but keep them
   available to screen readers (accessibility preserved). */
.zaf-contact-form label:not(.contact-form-check-label) {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.zaf-contact-form .contact-form-input,
.zaf-contact-form input[type="text"],
.zaf-contact-form input[type="email"],
.zaf-contact-form input[type="tel"],
.zaf-contact-form input[type="number"],
.zaf-contact-form textarea,
.zaf-contact-form select {
    width: 100%;
    background: var(--zc-field);
    border: 1.5px solid transparent;
    border-radius: var(--zc-radius-sm);
    padding: 16px 20px;
    font-size: 15px;
    line-height: 1.4;
    color: var(--zc-text);
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.zaf-contact-form .contact-form-input::placeholder,
.zaf-contact-form textarea::placeholder {
    color: #a4a9b0;
}

.zaf-contact-form .contact-form-input:focus,
.zaf-contact-form textarea:focus,
.zaf-contact-form select:focus {
    outline: none;
    background: var(--zc-field-focus);
    border-color: var(--zc-ink);
    box-shadow: 0 0 0 4px rgba(26, 26, 26, 0.08);
}

.zaf-contact-form textarea {
    min-height: 130px;
    resize: vertical;
}

/* Terms checkbox row — compact and inline */
.zaf-contact-form .contact-form-check,
.zaf-contact-form [class*="agree_terms"] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}
.zaf-contact-form input[type="checkbox"] {
    accent-color: var(--zc-ink);
    width: 17px;
    height: 17px;
    margin: 0;
    flex: 0 0 auto;
    cursor: pointer;
}
.zaf-contact-form .contact-form-check-label,
.zaf-contact-form label.contact-form-check-label {
    font-size: 13.5px;
    color: var(--zc-muted);
    margin: 0;
    cursor: pointer;
}
.zaf-contact-form .contact-form-check-label a { color: var(--zc-ink); text-decoration: underline; }

/* Validation errors (neutral, no red theme — uses a soft alert only) */
.zaf-contact-form .is-invalid,
.zaf-contact-form .contact-form-input.is-invalid {
    border-color: #d99 !important;
    background: #fcf6f6;
}
.zaf-contact-form .invalid-feedback,
.zaf-contact-form .text-danger,
.zaf-contact-form .help-block {
    display: block;
    font-size: 12.5px;
    color: #c25b5b;
    margin-top: 6px;
}

/* Submit button — charcoal pill */
.zaf-contact-form .contact-button,
.zaf-contact-form button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--zc-ink);
    color: #fff;
    border: none;
    border-radius: var(--zc-radius-sm);
    padding: 15px 44px;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.22s ease, transform 0.12s ease, box-shadow 0.22s ease;
}
.zaf-contact-form .contact-button:hover,
.zaf-contact-form button[type="submit"]:hover {
    background: var(--zc-ink-hover);
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.45);
}
.zaf-contact-form .contact-button:active,
.zaf-contact-form button[type="submit"]:active {
    transform: scale(0.98);
}
.zaf-contact-form .contact-button.button-loading,
.zaf-contact-form button[type="submit"].button-loading {
    opacity: 0.75;
    pointer-events: none;
}

.zaf-contact-form .contact-message {
    border-radius: var(--zc-radius-sm);
    padding: 12px 16px;
    margin-top: 12px;
    font-size: 14px;
}
.zaf-contact-form .contact-success-message { background: #eef7f1; color: #2c7a55; }
.zaf-contact-form .contact-error-message { background: #fcf2f2; color: #c25b5b; }

/* ---- Newsletter card (dark contrast, modern) ---- */
.zaf-contact-news {
    background: var(--zc-ink);
    border-radius: var(--zc-radius);
    padding: 32px 28px;
    color: #fff;
    box-shadow: var(--zc-shadow);
}
.zaf-contact-news-title {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 24px;
    font-weight: 800;
    margin: 0 0 12px;
    color: #fff;
}
.zaf-contact-news-desc {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 22px;
}
.zaf-news-form { display: flex; flex-direction: column; gap: 12px; }
.zaf-news-input {
    width: 100%;
    background: #fff;
    border: none;
    border-radius: var(--zc-radius-sm);
    padding: 14px 18px;
    font-size: 15px;
    color: var(--zc-text);
    box-sizing: border-box;
}
.zaf-news-input:focus {
    outline: none;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18);
}
.zaf-news-btn {
    width: 100%;
    background: #fff;
    color: var(--zc-ink);
    border: none;
    border-radius: var(--zc-radius-sm);
    padding: 14px 0;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.22s ease, transform 0.12s ease;
}
.zaf-news-btn:hover { background: #ececec; }
.zaf-news-btn:active { transform: scale(0.98); }
/* While submitting, Botble adds .btn-loading (text -> transparent + a spinner).
   On this white button the default white spinner is invisible, making the button
   look empty. Force a dark spinner so the loading state is visible. */
.zaf-news-btn.btn-loading::after { color: var(--zc-ink, #1a1a1a) !important; }

/* ---- Info cards row ---- */
.zaf-contact-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 24px;
}
.zaf-info-card {
    background: var(--zc-card);
    border-radius: var(--zc-radius);
    padding: 30px 28px;
    border: 1px solid var(--zc-border);
    box-shadow: var(--zc-shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.zaf-info-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--zc-shadow);
}
.zaf-info-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--zc-field);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
}
.zaf-info-icon img { object-fit: contain; }
.zaf-info-content { color: var(--zc-text); font-size: 14px; line-height: 1.6; }
.zaf-info-content :is(h1,h2,h3,h4,h5) {
    font-size: 19px;
    font-weight: 800;
    color: var(--zc-heading);
    margin: 0 0 8px;
}
.zaf-info-content p { margin: 0 0 6px; }
.zaf-info-content a { color: var(--zc-ink); }

.zaf-info-social-title { font-size: 19px; font-weight: 800; color: var(--zc-heading); margin: 0 0 10px; }
.zaf-info-social { display: flex; gap: 10px; flex-wrap: wrap; }
.zaf-info-social a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--zc-field);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--zc-ink);
    transition: background 0.2s ease, color 0.2s ease;
}
.zaf-info-social a:hover { background: var(--zc-ink); color: #fff; }

/* ---- Google map shortcode (separate section on the page) ---- */
.tp-map-area {
    padding-bottom: 70px;
}
.tp-map-area .tp-map-wrapper {
    border-radius: var(--zc-radius);
    overflow: hidden;
    box-shadow: var(--zc-shadow);
    line-height: 0;
    font-size: 0;
}
/* Kill the inline margin-bottom on the core map wrapper that shows as a
   white stripe inside the rounded card. */
.tp-map-area .google-map-iframe {
    margin-bottom: 0 !important;
    display: block;
    line-height: 0;
}
.tp-map-area .tp-map-iframe iframe {
    width: 100%;
    min-height: 380px;
    display: block;
    vertical-align: bottom;
    border: 0;
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
    .zaf-contact-grid { grid-template-columns: 1fr; }
    .zaf-contact-info { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 575.98px) {
    .zaf-contact { padding: 44px 0 30px; }
    .zaf-contact-form-card { padding: 24px 20px 28px; }
    .zaf-contact-info { grid-template-columns: 1fr; }
    .zaf-contact-form .contact-form-row > [class*="col-"] { width: 100%; flex: 0 0 100%; max-width: 100%; }
    .tp-map-area .tp-map-iframe iframe { min-height: 300px; }
}