/* ============================================================
   Contact page (/Page/Contact) — "Холбоо барих".
   Scoped under .ct so it can't affect other pages.
   Keeps the tab ids (#contact-tab/#feedback-tab) and the
   bootstrap grid on #form-col/#map-col (toggled by the JS).
   ============================================================ */

.ct {
    --ct-brand: #3f51b5;
    --ct-brand-d: #2c3a91;
    --ct-brand-l: #5c6bc0;
    --ct-accent: #ff7a59;
    --ct-ink: #16225a;
    --ct-body: #4d5468;
    --ct-muted: #8a90a2;
    --ct-line: #e4e7f2;
    --ct-bg-soft: #f6f7fb;
    --ct-radius: 18px;
    --ct-shadow: 0 22px 46px -22px rgba(22, 27, 51, .32);
    --ct-shadow-sm: 0 12px 26px -16px rgba(22, 27, 51, .26);

    font-family: 'Roboto', 'Segoe UI', system-ui, sans-serif;
    color: var(--ct-body);
    padding-bottom: 80px;
}
.ct * { box-sizing: border-box; }
.ct h1, .ct h2, .ct h3, .ct h4 { font-family: 'Montserrat', 'Roboto', sans-serif; color: var(--ct-ink); margin: 0; }
.ct__wrap { max-width: 1140px; margin: 0 auto; padding: 0 22px; }

/* ---------- Hero + tabs ---------- */
.ct-hero {
    position: relative;
    overflow: hidden;
    text-align: center;
    color: #fff;
    padding: 56px 22px 80px;
    background: linear-gradient(130deg, var(--ct-brand-d), var(--ct-brand) 55%, var(--ct-brand-l));
}
.ct-hero::before,
.ct-hero::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .08); }
.ct-hero::before { width: 300px; height: 300px; top: -140px; right: -60px; }
.ct-hero::after { width: 220px; height: 220px; bottom: -110px; left: -50px; background: rgba(255, 122, 89, .18); }
.ct-hero__eyebrow {
    position: relative; display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
    color: #fff; background: rgba(255, 255, 255, .15); border: 1px solid rgba(255, 255, 255, .25);
    padding: 7px 16px; border-radius: 999px; margin-bottom: 22px;
}

/* segmented tab control (overrides the view's old inline <style>) */
.ct .tab-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    padding: 5px;
}
.ct .tab-title {
    display: inline-block;
    padding: 11px 26px;
    border-radius: 999px;
    font-family: 'Montserrat', 'Roboto', sans-serif;
    font-size: 15px !important;
    font-weight: 600;
    line-height: 1;
    color: rgba(255, 255, 255, .85);
    cursor: pointer;
    transition: background .25s ease, color .25s ease;
    white-space: nowrap;
}
.ct .active-tab {
    background: #fff;
    color: var(--ct-brand) !important;
    font-size: 15px !important;       /* override the old 48px */
    box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .4);
}
.ct .inactive-tab { color: rgba(255, 255, 255, .8); background: transparent; }
.ct .four-dot { display: none !important; }

.ct-hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; line-height: 0; }
.ct-hero__wave svg { width: 100%; height: 56px; display: block; }

/* ---------- Body ---------- */
.ct-body { position: relative; margin-top: -42px; }
.ct-body .contact-inner.row { margin-left: -12px; margin-right: -12px; }
.ct-body [id="form-col"], .ct-body [id="map-col"] { padding: 0 12px; margin-bottom: 24px; }

/* ---------- Form / info card ---------- */
.ct-card {
    background: #fff;
    border: 1px solid var(--ct-line);
    border-radius: var(--ct-radius);
    box-shadow: var(--ct-shadow);
    padding: 30px 28px;
    height: 100%;
}
.ct #tab-content h3 {
    font-size: 19px; font-weight: 700; color: var(--ct-ink); margin-bottom: 14px;
}
.ct #tab-content > p { font-size: 15px; color: var(--ct-body); line-height: 1.7; margin-bottom: 20px; }
.ct .address-list { list-style: none; margin: 0; padding: 0; }
.ct .address-list li {
    display: flex; align-items: center; gap: 13px;
    padding: 13px 0;
    border-top: 1px solid var(--ct-line);
    font-size: 15px; color: var(--ct-ink); font-weight: 500;
}
.ct .address-list li:first-child { border-top: 0; }
.ct .address-list li i {
    flex: none; width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 10px; font-size: 15px; color: #fff;
    background: linear-gradient(135deg, var(--ct-brand-l), var(--ct-brand));
}

/* social */
.ct-social { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--ct-line); }
.ct-social ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; }
.ct-social li a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--ct-bg-soft); border: 1px solid var(--ct-line);
    color: var(--ct-brand);
    transition: background .25s ease, color .25s ease, transform .25s ease;
}
.ct-social li a svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.ct-social li a:hover { background: #1877f2; color: #fff; border-color: transparent; transform: translateY(-3px); }

/* ---------- Map ---------- */
.ct-map {
    width: 100%;
    min-height: 480px;
    border-radius: var(--ct-radius);
    overflow: hidden;
    box-shadow: var(--ct-shadow);
    background: var(--ct-bg-soft);
}

/* fallback shown when the map can't load (billing/auth error) */
.ct-fallback {
    background: #fff;
    border: 1px solid var(--ct-line);
    border-radius: var(--ct-radius);
    box-shadow: var(--ct-shadow);
    padding: 26px 28px;
    min-height: 280px;
}
.ct-fallback__head {
    display: flex; align-items: center; gap: 10px;
    font-family: 'Montserrat', 'Roboto', sans-serif;
    font-size: 17px; font-weight: 700; color: var(--ct-ink);
    margin-bottom: 18px;
}
.ct-fallback__head i {
    width: 36px; height: 36px; flex: none;
    display: grid; place-items: center; border-radius: 10px;
    font-size: 15px; color: #fff;
    background: linear-gradient(135deg, var(--ct-brand-l), var(--ct-brand));
}
.ct-fallback ul { list-style: none; margin: 0; padding: 0; }
.ct-fallback li {
    padding: 14px 0;
    border-top: 1px solid var(--ct-line);
}
.ct-fallback li:first-child { border-top: 0; padding-top: 0; }
.ct-fallback li strong { display: block; font-size: 15.5px; color: var(--ct-ink); margin-bottom: 4px; }
.ct-fallback li span { font-size: 14.5px; color: var(--ct-body); line-height: 1.55; }
@media (max-width: 767px) {
    .ct-map { min-height: 340px; }
    .ct .tab-title { padding: 10px 16px; font-size: 13.5px !important; }
}