/* ==========================================================================
   Page: contact  (site/pages/contact/index)
   --------------------------------------------------------------------------
   .ct-ways      four arch-topped panels (the س, as the About pillars): ringed
                 icon in the panel's accent, title, number/address, a line;
                 phones: pill rows (the م) with the icon beside the text
   .ct-message   panel band: arch photo window + privacy note + socials beside
                 the form on a white sheet; JSON status line (contact-form.js)
   .ct-branch    compact branch card (as /branches): city photo on an accent
                 edge, status pill, local time (branch-clock.js), phone /
                 directions; the و rings open from the corner on hover
   ========================================================================== */

/* ── 1. Ways in ───────────────────────────────────────────────────────── */
.ct-ways__grid { display: grid; grid-template-columns: repeat(var(--ways, 4), minmax(0, 1fr));   /* 3 or 4 — WhatsApp/email show only when set */ gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.ct-ways__grid > li { display: flex; }
.ct-way {
    position: relative;
    overflow: hidden;
    display: flex; flex: 1; flex-direction: column; align-items: center; gap: var(--space-2);
    padding: var(--space-12) var(--space-6) var(--space-8);
    border: 1px solid var(--line-strong);
    border-radius: 999px 999px var(--r-xl) var(--r-xl);   /* arch top — the س */
    background: var(--card);
    color: var(--ink);
    text-align: center;
    text-decoration: none;
    transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.ct-way::before {                                         /* accent arch line inside */
    content: "";
    position: absolute; inset: 10px 10px auto;
    height: 70%;
    border: 1.5px solid var(--accent); border-bottom: 0;
    border-radius: 999px 999px 0 0;
    opacity: 0.6;
    pointer-events: none;
}
.ct-way:hover { color: var(--ink); transform: translateY(-4px); border-color: var(--accent); }
.ct-way__icon {
    display: grid; place-items: center;
    width: 64px; height: 64px; margin-bottom: var(--space-3);
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent) 22%, #fff);
    box-shadow: 0 0 0 6px var(--card), 0 0 0 7.5px var(--accent);
    font-size: 1.5rem;
}
.ct-way__title { font-size: var(--fs-xl); font-weight: 400; }
.ct-way__value { font-size: var(--fs-lg); font-weight: 600; }
.ct-way__sub { color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.8; }

/* ── 2. Message ───────────────────────────────────────────────────────── */
.ct-message__grid { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.4fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.ct-message__side { display: grid; gap: var(--space-8); justify-items: start; }
.ct-message__window { width: min(100%, 320px); margin-top: calc(var(--ring-gap) * 5); margin-inline: calc(var(--ring-gap) * 5); }
.ct-message__note { display: flex; gap: var(--space-3); color: var(--ink-soft); line-height: 1.9; }
.ct-message__note .icon { margin-top: 0.4em; color: var(--second-text); }

.ct-social { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); color: var(--ink-soft); font-size: var(--fs-sm); }
.ct-social span { margin-inline-end: var(--space-2); }
.ct-social a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--card); color: var(--ink); transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.ct-social a:hover { background: var(--ink); color: #fff; }

.ct-form { padding: var(--space-10); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--card); }
.ct-form .eyebrow { margin-bottom: var(--space-2); }
.ct-form__title { margin-bottom: var(--space-8); font-size: var(--fs-2xl); }
.ct-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); margin-bottom: var(--space-6); }
.ct-field { display: grid; gap: var(--space-2); align-content: start; }
.ct-field--wide { grid-column: 1 / -1; }
.ct-field label { font-size: var(--fs-sm); font-weight: 500; }
.ct-field em { color: var(--ink-faint); font-style: normal; font-weight: 400; }
.ct-field input:not([type="checkbox"]), .ct-field select, .ct-field textarea {
    width: 100%; min-height: 50px; padding: 0.7em 1em;
    border: 1.5px solid var(--line-strong); border-radius: var(--r-md);
    background: var(--card); font-size: var(--fs-base);
    transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.ct-field textarea { resize: vertical; line-height: 1.8; }
.ct-field input:focus, .ct-field select:focus, .ct-field textarea:focus { outline: none; border-color: var(--second-strong); box-shadow: 0 0 0 3px var(--second-tint-strong); }
.ct-field [aria-invalid="true"] { border-color: var(--danger); }
.ct-field input[dir="ltr"] { text-align: right; }
[dir="ltr"] .ct-field input[dir="ltr"] { text-align: left; }
.ct-error { color: var(--danger); font-size: var(--fs-xs); }
.ct-error:empty { display: none; }
.ct-consent { display: flex; align-items: flex-start; gap: var(--space-3); font-weight: 400 !important; line-height: 1.8; cursor: pointer; }
.ct-consent input { flex-shrink: 0; width: 20px; height: 20px; margin-top: 0.3em; accent-color: var(--ink); }
.ct-consent a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; }
.ct-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.contact-form__status { margin-bottom: var(--space-4); padding: var(--space-3) var(--space-5); border-radius: var(--r-md); font-weight: 500; }
.contact-form__status.is-success { background: color-mix(in srgb, var(--sage) 35%, #fff); }
.contact-form__status.is-error { background: color-mix(in srgb, var(--rose) 22%, #fff); color: var(--danger); }
.ct-form [data-submit]:disabled { opacity: 0.5; cursor: wait; }

/* ── 3. Branches ──────────────────────────────────────────────────────── */
.ct-branches__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin: 0; padding: 0; list-style: none; }
.ct-branch {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex; flex-direction: column;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-xl);
    background: var(--card);
    transition: border-color var(--dur) var(--ease-out);
}
.ct-branch:hover { border-color: var(--ink); }
.ct-branch__photo { display: block; aspect-ratio: 16 / 7; overflow: hidden; border-bottom: 3px solid var(--accent); background: var(--panel); }
.ct-branch__photo img { width: 100%; height: 100%; object-fit: cover; transition: scale 1s var(--ease-out); }
.ct-branch:hover .ct-branch__photo img { scale: 1.05; }
.ct-branch__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-5) var(--space-6) var(--space-6); }
.ct-branch__country { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink-faint); font-size: var(--fs-sm); }
.ct-branch__city { font-size: var(--fs-2xl); font-weight: 300; line-height: 1.2; }
.ct-branch__city a { color: inherit; text-decoration: none; }
.ct-branch__city a:hover { color: var(--second-text); }

/* status pill — as .br-status on /branches */
.ct-branch__status {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: 0.3em 0.9em;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    color: var(--ink-soft);
    font-size: var(--fs-xs);
}
.ct-branch__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--panel-deep); }
.ct-branch__status.is-open { border-color: var(--second); color: var(--second-text); }
.ct-branch__status.is-open::before { background: var(--second); box-shadow: 0 0 0 3px var(--second-tint-strong); }

.ct-branch__time { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--ink-soft); font-size: var(--fs-sm); }
.ct-branch__time .icon { color: var(--second-text); }
.ct-branch__time time { color: var(--ink); font-weight: 600; }
.ct-branch__links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: auto; padding-top: var(--space-3); font-size: var(--fs-sm); }
.ct-branch__links a { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--link); }

/* the و rings in the accent, peeking from the corner */
.ct-branch__rings { position: absolute; z-index: -1; inset-inline-end: -64px; bottom: -64px; width: 150px; height: 150px; pointer-events: none; }
.ct-branch__rings i {
    position: absolute;
    inset: calc(var(--k, 0) * 16px);
    border: 1.5px solid var(--accent);
    border-radius: 50%;
    opacity: 0.45;
    transform: scale(0.85);
    transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out);
}
.ct-branch__rings i:nth-child(2) { --k: 1; }
.ct-branch__rings i:nth-child(3) { --k: 2; }
.ct-branch:hover .ct-branch__rings i { transform: scale(1.12); opacity: 0.9; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1199.98px) {
    .ct-ways__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ct-branches__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    .ct-message__grid { grid-template-columns: 1fr; }
    .ct-message__side { order: 2; }
    .ct-message__window { display: none; }
}
@media (max-width: 767.98px) {
    .ct-branches__grid { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    /* Pill rows (the م): icon beside the text */
    .ct-ways__grid { grid-template-columns: 1fr; gap: var(--space-3); }
    .ct-way {
        display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-4); row-gap: 0; align-items: center;
        padding: var(--space-4) var(--space-6) var(--space-4) var(--space-4);
        border-radius: var(--r-pill);
        text-align: start;
    }
    [dir="rtl"] .ct-way { padding: var(--space-4) var(--space-4) var(--space-4) var(--space-6); }
    .ct-way::before { inset: 5px; height: auto; border-bottom: 1.5px solid var(--accent); border-radius: var(--r-pill); opacity: 0.35; }
    .ct-way__icon { grid-row: span 3; width: 48px; height: 48px; margin: 0; box-shadow: 0 0 0 4px var(--card), 0 0 0 5.5px var(--accent); font-size: 1.2rem; }
    .ct-way__title { font-size: var(--fs-lg); }
    .ct-way__value { font-size: var(--fs-base); }
    .ct-way__sub { font-size: var(--fs-xs); }
    .ct-form { padding: var(--space-6) var(--space-5); }
    .ct-fields { grid-template-columns: 1fr; }
    .ct-form [data-submit] { width: 100%; }
}