/* ================================================================
   M2 IST — Contact / "تواصل معنا" · Cinematic design system (ist-cn-*)
   Map-as-hero + floating glass contact card. Brand colors only.
   Depends on .ist-story variables (--s-*) from about-story.css.
   ================================================================ */

/* =====================================================
   HERO — full-bleed map + floating glass card
   ===================================================== */
.ist-cn-hero {
    position: relative;
    min-height: clamp(640px, 92vh, 940px);
    display: flex;
    align-items: center;
    background: var(--s-ink);
    overflow: hidden;
    padding: clamp(120px, 16vh, 200px) 0 clamp(60px, 8vh, 110px);
}

/* live map fills the whole hero, sits behind everything.
   It is wider than the viewport and anchored to the visual RIGHT edge,
   so the embed's centered marker (our office) lands in the open LEFT area
   (clear of the glass card) at ~28vw from the left. */
.ist-cn-hero__map {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: auto;
    width: 144vw;
    z-index: 0;
}
.ist-cn-hero__map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(.25) contrast(1.05);
}

/* legibility gradient — pointer-events:none keeps the map interactive */
.ist-cn-hero__veil {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(5, 20, 31, .96) 0%, rgba(5, 20, 31, .82) 34%, rgba(5, 20, 31, .25) 60%, rgba(5, 20, 31, 0) 78%),
        radial-gradient(ellipse 60% 60% at 88% 14%, rgba(85, 200, 232, .16), transparent 60%),
        radial-gradient(ellipse 50% 60% at 12% 90%, rgba(124, 58, 237, .18), transparent 62%);
}
[dir="rtl"] .ist-cn-hero__veil {
    background:
        linear-gradient(270deg, rgba(5, 20, 31, .96) 0%, rgba(5, 20, 31, .82) 34%, rgba(5, 20, 31, .25) 60%, rgba(5, 20, 31, 0) 78%),
        radial-gradient(ellipse 60% 60% at 12% 14%, rgba(85, 200, 232, .16), transparent 60%),
        radial-gradient(ellipse 50% 60% at 88% 90%, rgba(124, 58, 237, .18), transparent 62%);
}

.ist-cn-hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 510px) 1fr;
    gap: 40px;
    align-items: center;
    width: 100%;
}

/* custom brand marker — sits exactly on the embed's centered office point.
   (0,0) of .ist-cn-marker is the location point; children build upward. */
.ist-cn-marker {
    position: absolute;
    top: 48.2%;
    left: 28.2vw;
    z-index: 2;
    pointer-events: none;
}
.ist-cn-marker__dot {
    position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px;
    border-radius: 50%; background: var(--s-cyan);
    box-shadow: 0 0 0 3px rgba(5, 20, 31, .55), 0 0 16px rgba(85, 200, 232, .9);
}
.ist-cn-marker__ping,
.ist-cn-marker__ping--2 {
    position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px;
    border-radius: 50%; border: 2px solid var(--s-cyan);
    animation: istCnRadar 2.6s ease-out infinite;
}
.ist-cn-marker__ping--2 { animation-delay: 1.3s; }
@keyframes istCnRadar {
    0% { transform: scale(1); opacity: .85; }
    100% { transform: scale(8); opacity: 0; }
}
/* teardrop: sharp corner points DOWN; its tip rests exactly on the dot (0,0).
   28px square → half-diagonal ≈ 19.8px below center, so center sits 20px above the dot. */
.ist-cn-marker__pin {
    position: absolute; left: 0; top: 0; width: 30px; height: 32px;
    transform: translate(-50%, -15px) rotate(-45deg);
    border-radius: 50% 50% 50% 0;
    background: linear-gradient(135deg, var(--s-cyan), var(--s-violet));
    box-shadow: 0 12px 26px -6px rgba(0, 0, 0, .65);
}
.ist-cn-marker__pin::after {
    content: ""; position: absolute; inset: 8px; background: #fff; border-radius: 50%;
}
.ist-cn-marker__label {
    position: absolute; bottom: 52px; left: 50%; transform: translateX(-50%);
    white-space: nowrap; padding: 8px 14px; border-radius: 999px;
    background: rgba(5, 20, 31, .72); border: 1px solid rgba(85, 200, 232, .45);
    backdrop-filter: blur(8px); color: #fff; font-size: 12.5px; font-weight: 700;
    box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .7);
}
.ist-cn-marker__label i { color: var(--s-cyan); margin-inline-end: 5px; }

/* glass contact card */
.ist-cn-card {
    position: relative;
    background: linear-gradient(160deg, rgba(10, 22, 40, .9), rgba(5, 16, 31, .82));
    border: 1px solid rgba(85, 200, 232, .35);
    border-radius: 22px;
    padding: clamp(26px, 3vw, 40px);
    backdrop-filter: blur(18px);
    box-shadow:
        0 40px 90px -40px rgba(0, 0, 0, .8),
        0 0 0 1px rgba(255, 255, 255, .04) inset,
        0 0 60px -20px rgba(85, 200, 232, .4);
}
.ist-cn-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: 22px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(85, 200, 232, .6), transparent 40%, transparent 60%, rgba(124, 58, 237, .5));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.ist-cn-card__head { margin-bottom: clamp(18px, 2.4vw, 26px); }
.ist-cn-card__title {
    font-family: var(--s-font); font-weight: 800;
    font-size: clamp(1.5rem, 2.8vw, 2.1rem); line-height: 1.2; letter-spacing: -.02em;
    color: #fff; margin: 12px 0 0;
}
.ist-cn-card__title .hl { color: var(--s-cyan); }
.ist-cn-card__sub {
    margin: 10px 0 0; font-size: clamp(.95rem, 1.2vw, 1.02rem);
    line-height: 1.8; color: rgba(255, 255, 255, .72);
}

/* form */
.ist-cn-form .ist-cn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 520px) { .ist-cn-form .ist-cn-row { grid-template-columns: 1fr; } }
.ist-cn-field { margin-bottom: 14px; }
.ist-cn-field label {
    display: block; font-size: 13px; font-weight: 700;
    color: rgba(255, 255, 255, .82); margin-bottom: 7px;
}
.ist-cn-input,
.ist-cn-textarea {
    width: 100%;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 12px;
    padding: 13px 15px;
    color: #fff;
    font-family: var(--s-font);
    font-size: .98rem;
    transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
    outline: none;
}
.ist-cn-input::placeholder,
.ist-cn-textarea::placeholder { color: rgba(255, 255, 255, .4); }
.ist-cn-input:focus,
.ist-cn-textarea:focus {
    border-color: var(--s-cyan);
    background: rgba(85, 200, 232, .08);
    box-shadow: 0 0 0 4px rgba(85, 200, 232, .14);
}
.ist-cn-textarea { min-height: 120px; resize: vertical; line-height: 1.7; }
.ist-cn-form .ist-cn-submit {
    width: 100%; margin-top: 6px;
    border: 0; cursor: pointer;
    font-family: var(--s-font); font-weight: 800; font-size: 1.02rem;
    color: #05141f; border-radius: 12px; padding: 15px 20px;
    background: linear-gradient(110deg, var(--s-cyan), #9b8cff);
    background-size: 180% auto;
    transition: background-position .5s ease, transform .25s ease, box-shadow .25s ease;
    box-shadow: 0 18px 40px -18px rgba(85, 200, 232, .7);
}
.ist-cn-form .ist-cn-submit:hover { background-position: 100% center; transform: translateY(-2px); }
.ist-cn-form .ist-cn-submit:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.ist-cn-honey { position: absolute !important; left: -9999px; top: -9999px; }

.ist-cn-form .output_message { margin-bottom: 12px; }
.ist-cn-form #result { display: block; margin-top: 10px; }
.ist-cn-form #result .alert { display: none; }

@media (max-width: 900px) {
    .ist-cn-hero { min-height: 0; padding-top: clamp(96px, 14vh, 150px); display: block; }
    .ist-cn-hero__map { position: relative; width: 100%; right: auto; left: auto; height: 300px; }
    .ist-cn-hero__veil { display: none; }
    .ist-cn-marker { display: none; }
    .ist-cn-hero__inner { grid-template-columns: 1fr; gap: 0; }
}

/* =====================================================
   Channels — grid of contact methods (dark)
   ===================================================== */
.ist-cn-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(14px, 1.8vw, 20px);
}
@media (max-width: 860px) { .ist-cn-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ist-cn-grid { grid-template-columns: 1fr; } }

.ist-cn-ch {
    display: flex; align-items: flex-start; gap: 16px; text-decoration: none;
    background: rgba(255, 255, 255, .04); border: 1px solid var(--s-line-dark);
    border-radius: 18px; padding: clamp(20px, 2.4vw, 28px);
    transition: transform .28s ease, border-color .28s ease, background .28s ease, box-shadow .28s ease;
}
.ist-cn-ch:hover {
    transform: translateY(-6px); border-color: rgba(85, 200, 232, .5);
    background: rgba(85, 200, 232, .06); box-shadow: 0 26px 54px -30px rgba(85, 200, 232, .5);
    text-decoration: none;
}
.ist-cn-ch__ico {
    flex: 0 0 auto; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
    background: linear-gradient(135deg, rgba(85, 200, 232, .2), rgba(124, 58, 237, .2));
    color: var(--s-cyan); font-size: 1.3rem;
}
.ist-cn-ch__name { display: block; font-weight: 800; font-size: 1.05rem; color: #fff; }
.ist-cn-ch__val { display: block; margin-top: 4px; font-size: .92rem; color: rgba(255, 255, 255, .7); line-height: 1.7; }
.ist-cn-ch__val[dir="ltr"] { direction: ltr; }
.ist-cn-ch__cta { display: inline-block; margin-top: 8px; font-size: .82rem; font-weight: 700; color: var(--s-cyan); }
.ist-cn-ch__cta i { font-size: .75em; margin-inline-start: 4px; }

/* social row */
.ist-cn-social { display: flex; gap: 10px; margin-top: 10px; }
.ist-cn-social a {
    width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
    color: rgba(255, 255, 255, .82); background: rgba(255, 255, 255, .05);
    border: 1px solid var(--s-line-dark); transition: all .25s ease; text-decoration: none;
}
.ist-cn-social a:hover { color: #05141f; background: var(--s-cyan); border-color: var(--s-cyan); transform: translateY(-3px); }
.ist-cn-social i { font-size: 16px; line-height: 1; }
.ist-cn-social__svg { width: 16px; height: 16px; display: block; flex-shrink: 0; }

/* =====================================================
   Visit — address + hours (light)
   ===================================================== */
.ist-cn-visit {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(18px, 2.4vw, 28px);
    align-items: stretch;
}
@media (max-width: 760px) { .ist-cn-visit { grid-template-columns: 1fr; } }

.ist-cn-vcard {
    background: #fff; border: 1px solid var(--s-line-light); border-radius: 18px;
    padding: clamp(24px, 3vw, 34px);
}
.ist-cn-vcard h3 {
    display: flex; align-items: center; gap: 12px;
    font-size: 1.2rem; font-weight: 800; color: var(--s-ink); margin: 0 0 14px;
}
.ist-cn-vcard h3 i { color: var(--s-cyan-deep); }
.ist-cn-vcard p { color: var(--s-text-dark); line-height: 1.9; font-size: 1rem; margin: 0 0 16px; }

.ist-cn-hours { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ist-cn-hours li {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding-bottom: 12px; border-bottom: 1px dashed var(--s-line-light);
    color: var(--s-text-dark); font-size: .96rem;
}
.ist-cn-hours li:last-child { border-bottom: 0; padding-bottom: 0; }
.ist-cn-hours b { color: var(--s-ink); font-weight: 800; }
.ist-cn-hours .ist-cn-247 { color: var(--s-cyan-deep); font-weight: 800; }

/* =====================================================
   FAQ — search + Q&A (light alt), keeps custom.js hooks
   ===================================================== */
.ist-cn-faq__layout {
    display: grid;
    grid-template-columns: clamp(260px, 32%, 360px) 1fr;
    gap: clamp(20px, 3vw, 40px);
    align-items: start;
}
@media (max-width: 860px) { .ist-cn-faq__layout { grid-template-columns: 1fr; } }

.ist-cn-search {
    position: relative; margin-bottom: 18px;
}
.ist-cn-search i {
    position: absolute; inset-inline-start: 16px; top: 50%; transform: translateY(-50%);
    color: var(--s-cyan-deep); pointer-events: none;
}
.ist-cn-search input {
    width: 100%; border: 1px solid var(--s-line-light); border-radius: 14px;
    background: #fff; padding: 14px 16px; padding-inline-start: 44px;
    font-family: var(--s-font); font-size: .98rem; color: var(--s-ink);
    outline: none; transition: border-color .25s ease, box-shadow .25s ease;
}
.ist-cn-search input:focus { border-color: var(--s-cyan); box-shadow: 0 0 0 4px rgba(85, 200, 232, .14); }

.ist-cn-faq__nav { position: sticky; top: 100px; }
.ist-cn-faq__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ist-cn-faq__nav a {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 11px 14px; border-radius: 12px; text-decoration: none;
    color: var(--s-text-dark); font-size: .95rem; font-weight: 600;
    border: 1px solid transparent; transition: all .22s ease;
}
.ist-cn-faq__nav a:hover { background: var(--s-paper-2); border-color: var(--s-line-light); color: var(--s-ink); text-decoration: none; }
.ist-cn-faq__nav a i { color: var(--s-cyan-deep); font-size: .8rem; flex-shrink: 0; }

.ist-cn-qa { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ist-cn-qa > li {
    background: #fff; border: 1px solid var(--s-line-light); border-radius: 16px;
    padding: clamp(18px, 2.2vw, 26px);
    scroll-margin-top: 100px;
    transition: border-color .25s ease, box-shadow .25s ease;
}
.ist-cn-qa > li:target,
.ist-cn-qa > li:hover { border-color: rgba(85, 200, 232, .5); box-shadow: 0 18px 44px -28px rgba(8, 145, 178, .4); }
.ist-cn-qa h6 {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 1.08rem; font-weight: 800; color: var(--s-ink); margin: 0 0 8px;
}
.ist-cn-qa h6 i { color: var(--s-cyan-deep); margin-top: 4px; }
.ist-cn-qa p { color: var(--s-text-dark); line-height: 1.9; font-size: .98rem; margin: 0; }

@media (prefers-reduced-motion: reduce) {
    .ist-cn-marker__ping,
    .ist-cn-marker__ping--2 { animation: none; }
}