/* ============================================================================
   ADONIS — Persian "تماس با ما" (Contact) page
   Depends on tokens.css + fa-new/home.css + fa-new/about.css
   ============================================================================ */

.fa-contact {
    background: var(--adonis-fa-new-paper, #fff);
    color: var(--color-text, #2D3340);
}

/* ── Quick contact links (under intro text) ───────────────────────────────── */
.fa-contact-quick {
    list-style: none;
    margin: 1.6rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.fa-contact-quick li {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 1.05rem;
    color: var(--color-text, #2D3340);
    overflow-wrap: anywhere;
    word-break: break-word;
}
.fa-contact-quick i {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--adonis-blue-600, #1E5AA8);
    background: var(--adonis-blue-100, #EAF2FF);
    flex-shrink: 0;
}
.fa-contact-quick a {
    color: var(--color-text, #2D3340);
    transition: color 0.2s ease;
}
.fa-contact-quick a:hover { color: var(--adonis-blue-600, #1E5AA8); }

/* ── Social icons ─────────────────────────────────────────────────────────── */
.fa-contact-social {
    display: flex;
    gap: 0.7rem;
    margin-top: 1.4rem;
}
.fa-contact-social a {
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    font-size: 1.25rem;
    color: #fff;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.fa-contact-social a:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(11, 27, 51, 0.22);
}
.fa-contact-social--wa { background: #25D366; }
.fa-contact-social--tg { background: #29A9EB; }
.fa-contact-social--ig { background: linear-gradient(135deg, #F58529, #DD2A7B, #8134AF); }

/* ── 3) Branches / offices ────────────────────────────────────────────────── */
.fa-contact-branches { background: var(--adonis-gray-50, #F5F7FA); }
.fa-contact-branches-list {
    display: flex;
    flex-direction: column;
    gap: 2.2rem;
}
.fa-contact-branch {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 0;
    background: #fff;
    border: 1px solid var(--color-border, #E2E6ED);
    border-radius: var(--adonis-fa-new-radius-lg, 28px);
    overflow: hidden;
    box-shadow: var(--shadow-md, 0 4px 16px rgba(11,27,51,0.12));
    transition: transform 0.3s var(--adonis-fa-new-ease, ease), box-shadow 0.3s ease;
}
.fa-contact-branch:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl, 0 20px 60px rgba(11,27,51,0.20));
}
.fa-contact-branch--alt { direction: ltr; }
.fa-contact-branch--alt > * { direction: rtl; }

.fa-contact-branch-media {
    display: flex;
    flex-direction: column;
    background: #071527;
}
.fa-contact-branch-video,
.fa-contact-branch-img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
    background: #071527;
}
.fa-contact-branch-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: #071527;
}
.fa-contact-branch-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.fa-contact-branch-map {
    position: relative;
    width: 100%;
    flex: 1;
    min-height: 200px;
    background: var(--adonis-gray-50, #F5F7FA);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.fa-contact-branch-map iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.fa-contact-branch-body {
    padding: clamp(1.6rem, 3vw, 2.6rem);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
}
.fa-contact-branch-name {
    font-size: 1.45rem;
    font-weight: 800;
    margin: 0;
    color: var(--color-text-heading, #0B1B33);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.fa-contact-branch-name i { color: var(--adonis-gold, #C9A961); }
.fa-contact-branch-desc {
    font-size: 1rem;
    line-height: 2;
    color: var(--color-text, #2D3340);
}
/* Directions button text/icon must stay white — overrides the global
   ".adonis-fa-new-body a { color: inherit }" rule from home.css. */
.fa-contact-branch-body .fa-about-office-dir,
.fa-contact-branch-body .fa-about-office-dir:link,
.fa-contact-branch-body .fa-about-office-dir:visited,
.fa-contact-branch-body .fa-about-office-dir:hover,
.fa-contact-branch-body .fa-about-office-dir i { color: #fff; }

/* ── 4) Contact form ──────────────────────────────────────────────────────── */
.fa-contact-form-section { background: #fff; }
.fa-contact-form-wrap {
    max-width: 760px;
    margin: 0 auto;
    background: var(--adonis-gray-50, #F5F7FA);
    border: 1px solid var(--color-border, #E2E6ED);
    border-radius: var(--adonis-fa-new-radius-lg, 28px);
    padding: clamp(1.8rem, 4vw, 3rem);
    box-shadow: var(--shadow-md, 0 4px 16px rgba(11,27,51,0.12));
}
.fa-contact-form-wrap .adonis-fa-new-section-head { margin-bottom: 1.8rem; }
.fa-contact-form-wrap .adonis-fa-new-section-title { color: var(--color-text-heading, #0B1B33); }
.fa-contact-form-wrap .adonis-fa-new-section-lead { color: var(--color-text-muted, #5A6478); }

.fa-contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}
.fa-contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.1rem;
}
.fa-contact-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.fa-contact-form-group label {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text-heading, #0B1B33);
}
.fa-required { color: #E2574C; }
.fa-contact-form-group input,
.fa-contact-form-group textarea {
    width: 100%;
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--color-border, #E2E6ED);
    border-radius: 14px;
    background: #fff;
    font-family: inherit;
    font-size: 1rem;
    color: var(--color-text, #2D3340);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.fa-contact-form-group input:focus,
.fa-contact-form-group textarea:focus {
    outline: none;
    border-color: var(--adonis-blue-600, #1E5AA8);
    box-shadow: 0 0 0 3px rgba(30, 90, 168, 0.14);
}
.fa-contact-form-group textarea { resize: vertical; min-height: 110px; }
.fa-contact-submit {
    align-self: flex-start;
    margin-top: 0.4rem;
    cursor: pointer;
}
.fa-contact-submit-loading { display: inline-flex; align-items: center; gap: 0.4rem; }
.fa-contact-form-note {
    margin: 0.4rem 0 0;
    font-size: 0.98rem;
    font-weight: 600;
    min-height: 1.4em;
}
.fa-contact-form-note.is-success { color: #1E8E3E; }
.fa-contact-form-note.is-error { color: #E2574C; }

/* ── Elegant consult-style card (reuses .fa-consult-* from home.css) ───────── */
.fa-contact-form-card {
    max-width: 560px;
    margin: 0 auto;
    background: linear-gradient(145deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 24px;
    padding: clamp(1.6rem, 4vw, 2.4rem) clamp(1.4rem, 4vw, 2.4rem);
    box-shadow: 0 25px 80px rgba(11, 27, 51, 0.16), 0 0 0 1px rgba(11, 27, 51, 0.04);
}
/* form title — darker per request */
.fa-contact-form-card .fa-consult-modal-title { color: #070d18; }
/* country dropdown items — isolated from the shared modal's JS binding */
.cp-country-item {
    padding: 0.75rem 1rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: #0B1F3A;
    transition: background 0.15s ease;
}
.cp-country-item:hover { background: #f1f5f9; }

@media (max-width: 480px) {
    .fa-contact-form-card {
        padding: 1.3rem 1.1rem;
        border-radius: 18px;
    }
}

/* prevent long emails / map links from overflowing their card */
.fa-about-office-info li,
.fa-about-office-info a { overflow-wrap: anywhere; word-break: break-word; }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .fa-contact-branch,
    .fa-contact-branch--alt { grid-template-columns: 1fr; direction: rtl; }
    .fa-contact-branch-map { min-height: 240px; aspect-ratio: 16 / 9; flex: none; }
    .fa-contact-branches-list { gap: 1.6rem; }
}

/* Tablets / large phones */
@media (max-width: 768px) {
    .fa-contact-branch-video,
    .fa-contact-branch-img,
    .fa-contact-branch-frame { aspect-ratio: 16 / 9; }
    .fa-contact-branch-body { padding: 1.4rem 1.25rem; gap: 0.85rem; }
    .fa-contact-branch-name { font-size: 1.25rem; }
    .fa-contact-branch-desc { font-size: 0.97rem; line-height: 1.9; }
    .fa-contact-quick li { font-size: 1rem; }
    .fa-contact-form-row { grid-template-columns: 1fr; }
    .fa-contact-submit { align-self: stretch; text-align: center; justify-content: center; }
}

/* Small phones */
@media (max-width: 480px) {
    .fa-contact-quick { margin-top: 1.2rem; gap: 0.6rem; }
    .fa-contact-quick li { font-size: 0.95rem; gap: 0.6rem; }
    .fa-contact-quick i { width: 34px; height: 34px; font-size: 0.9rem; }
    .fa-contact-social { gap: 0.55rem; margin-top: 1.1rem; flex-wrap: wrap; }
    .fa-contact-social a { width: 42px; height: 42px; font-size: 1.15rem; }

    .fa-contact-branch { border-radius: var(--adonis-fa-new-radius, 18px); }
    .fa-contact-branch:hover { transform: none; }
    .fa-contact-branch-map { min-height: 200px; }
    .fa-contact-branch-body { padding: 1.2rem 1.05rem; }
    .fa-contact-branch-name { font-size: 1.15rem; flex-wrap: wrap; }
    .fa-about-office-info li { font-size: 0.95rem; line-height: 1.8; }
    .fa-about-office-dir { width: 100%; justify-content: center; }

    .fa-contact-form-wrap {
        padding: 1.4rem 1.1rem;
        border-radius: var(--adonis-fa-new-radius, 18px);
    }
    .fa-contact-form-wrap .adonis-fa-new-section-head { margin-bottom: 1.3rem; }
    .fa-contact-form-group input,
    .fa-contact-form-group textarea { font-size: 16px; /* avoids iOS zoom on focus */ }
}