/* ═══════════════════════════════════════════════════════════════
   /Contact — modern landing for the support page.
   Layout uses dedicated CSS Grid (no Bootstrap row/col). Local
   `--contact-*` tokens flip in dark mode so cards/inputs sit on
   the page bg instead of fighting it. The hero is intentionally
   minimal — no gradient box and no duplicate <h1>; the breadcrumb
   partial owns the canonical heading. Shares the brand palette
   (navy → teal → mint) with /Plan but no longer mirrors its
   mask-clipped hero — see resources/assets/css/index/pages/plan.css
   if you want that treatment back.
   ═══════════════════════════════════════════════════════════════ */

/* Shared section title atom (used across channels, form, FAQ, closing) */
.contact-section-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--contact-heading, #1a3a5c);
    text-align: center;
    margin: 0 0 12px;
    position: relative;
    padding-bottom: 14px;
}
.contact-section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #0f6e6e, #18bb7c);
}
.contact-section-desc {
    text-align: center;
    color: var(--contact-text-muted, #6b7280);
    font-size: 14px;
    margin: 0 auto 28px;
    max-width: 640px;
    line-height: 1.7;
}


/* ─── 1. INTRO ─────────────────────────────────────────────────── */
/* Minimal, modern intro band. No gradient box, no decorative blobs,
 * no duplicate heading — the breadcrumb partial owns the canonical
 * <h1>. Just a centered badge, a lead paragraph, two CTAs, and two
 * inline stat chips. Reads instantly on mobile and avoids the cost
 * of stacked gradients + backdrop-filter blur. */
.contact-intro {
    max-width: 760px;
    margin: 16px auto 0;
    padding: 8px 12px 0;
    text-align: center;
    color: var(--contact-text, #374151);
}
.contact-intro__badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(135deg, rgba(15,110,110,.10), rgba(24,187,124,.10));
    color: var(--contact-heading, #0f6e6e);
    padding: 6px 16px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 16px;
    border: 1px solid rgba(15,110,110,.18);
}
.contact-intro__badge svg { color: #18bb7c; }
.contact-intro__desc {
    color: var(--contact-text-muted, #6b7280);
    font-size: 15px;
    line-height: 1.8;
    max-width: 600px;
    margin: 0 auto 22px;
}
.contact-intro__cta {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 22px;
}
.contact-intro__cta-primary,
.contact-intro__cta-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.contact-intro__cta-primary {
    background: linear-gradient(135deg, #18bb7c, #0f9d5e);
    color: #fff;
    box-shadow: 0 6px 14px rgba(24,187,124,.28);
}
.contact-intro__cta-primary:hover {
    transform: translateY(-2px);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 10px 20px rgba(24,187,124,.36);
}
.contact-intro__cta-ghost {
    background: transparent;
    border: 1px solid var(--contact-card-border, #d1d5db);
    color: var(--contact-heading, #1a3a5c);
}
.contact-intro__cta-ghost:hover {
    background: rgba(15,110,110,.06);
    color: var(--contact-heading, #1a3a5c);
    text-decoration: none;
    transform: translateY(-2px);
}

/* Inline stat chips — replaces the old 3-up grid of stat tiles. */
.contact-intro__chips {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}
.contact-intro__chip {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--contact-card-bg, #f3f4f6);
    border: 1px solid var(--contact-card-border, #e5e7eb);
    font-size: 12px;
    color: var(--contact-text-muted, #6b7280);
}
.contact-intro__chip strong {
    color: var(--contact-heading, #1a3a5c);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: -.2px;
}


/* ─── 2. CHANNELS GRID ─────────────────────────────────────────── */
.contact-channels {
    margin: 44px auto 0;
    max-width: 1180px;
    padding: 0 8px;
}
.contact-channels__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 4px;
}
.contact-channel-card {
    background: var(--contact-card-bg, #fff);
    border: 1px solid var(--contact-card-border, #e5e7eb);
    border-radius: 14px;
    padding: 22px 22px 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.contact-channel-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(15,110,110,.10);
    border-color: var(--contact-card-border-hover, #0f6e6e);
}
.contact-channel-card__group {
    font-size: 16px;
    font-weight: 700;
    color: var(--contact-heading, #1a3a5c);
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--contact-divider, #eef1f4);
}
.contact-channel-card__items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.contact-channel-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.contact-channel-item__icon {
    flex-shrink: 0;
    width: 38px; height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--contact-icon-bg, linear-gradient(135deg, rgba(24,187,124,.12), rgba(15,110,110,.10)));
    color: var(--contact-icon-fg, #0f6e6e);
}
.contact-channel-item--telegram .contact-channel-item__icon {
    background: var(--contact-icon-bg-telegram, rgba(34,158,217,.12));
    color: var(--contact-icon-fg-telegram, #229ed9);
}
.contact-channel-item--whatsapp .contact-channel-item__icon {
    background: var(--contact-icon-bg-whatsapp, rgba(37,211,102,.14));
    color: var(--contact-icon-fg-whatsapp, #1faa54);
}
.contact-channel-item--email .contact-channel-item__icon {
    background: var(--contact-icon-bg-email, rgba(99,102,241,.12));
    color: var(--contact-icon-fg-email, #6366f1);
}
.contact-channel-item__icon svg { width: 18px; height: 18px; }
.contact-channel-item__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.contact-channel-item__label {
    font-size: 12px;
    color: var(--contact-text-muted, #6b7280);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
}
.contact-channel-item__value,
.contact-channel-item__value a {
    font-size: 14px;
    color: var(--contact-text, #1f2937);
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.5;
    text-decoration: none;
}
.contact-channel-item__value a:hover { color: #0f6e6e; text-decoration: none; }
.contact-channel-item__value.ltr { direction: ltr; text-align: left; }
[dir="rtl"] .contact-channel-item__value.ltr { text-align: right; }

/* Click-to-reveal pill for WhatsApp — the number itself is held in
 * a data-attribute and decoded on first interaction, so crawlers
 * never see it. Styled to read as a soft link, not a submit button.
 * `font-family` is set explicitly to the project's custom face
 * because <button> elements get a UA stylesheet font that does NOT
 * inherit from body — `font: inherit` alone is not enough on Chrome
 * and Safari. Used for email, telegram, and WhatsApp reveal targets. */
/* NOTE: .contact-reveal styling now lives in
 * resources/assets/scss/components/_contact-reveal.scss — imported
 * site-wide via app.scss so the footer reveal buttons (which render on
 * every page) work without depending on the page-scoped contact bundle. */


/* ─── 3. FORM SECTION ──────────────────────────────────────────── */
.contact-form-section {
    margin: 64px auto 0;
    max-width: 1180px;
    padding: 0 8px;
    scroll-margin-top: 80px;
}
.contact-form-section__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 36px;
    align-items: start;
}
.contact-form-section__intro { padding-top: 6px; }
.contact-form-section__intro .contact-section-title {
    text-align: right;
    margin-bottom: 14px;
}
[dir="ltr"] .contact-form-section__intro .contact-section-title { text-align: left; }
.contact-form-section__intro .contact-section-title::after { left: 0; transform: none; }
[dir="ltr"] .contact-form-section__intro .contact-section-title::after { left: 0; right: auto; }
.contact-form-section__intro-desc {
    color: var(--contact-text-muted, #6b7280);
    font-size: 14px;
    line-height: 1.75;
    margin: 0 0 18px;
}
.contact-form-section__highlights {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.contact-form-section__highlights li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--contact-text, #374151);
}
.contact-form-section__highlights svg {
    width: 18px; height: 18px;
    flex-shrink: 0;
    color: #18bb7c;
}

/* Form card */
.contact-form-card {
    background: var(--contact-card-bg, #fff);
    border: 1px solid var(--contact-card-border, #e5e7eb);
    border-radius: 16px;
    padding: 28px 26px;
    box-shadow: 0 4px 16px rgba(15,110,110,.06);
}
.contact-form-card .email_server_responce { margin-bottom: 6px; }
.contact-form-card .contact-form { margin: 0; }
.contact-form-card .form-group { margin-bottom: 16px; }
.contact-form-card .form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--contact-heading, #1a3a5c);
    margin-bottom: 6px;
}
.contact-form-card .form-group input[type="text"],
.contact-form-card .form-group input[type="email"],
.contact-form-card .form-group textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 14px;
    border: 1px solid var(--contact-input-border, #d1d5db);
    border-radius: 10px;
    background: var(--contact-input-bg, #f9fafb);
    color: var(--contact-text, #1f2937);
    font-size: 14px;
    line-height: 1.5;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.contact-form-card .form-group input:focus,
.contact-form-card .form-group textarea:focus {
    outline: none;
    border-color: #0f6e6e;
    background: var(--contact-card-bg, #fff);
    box-shadow: 0 0 0 3px rgba(15,110,110,.12);
}
.contact-form-card textarea.mh-150 { min-height: 150px; resize: vertical; }

.contact-form-card .send-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 6px;
}
.contact-form-card .send-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    background: linear-gradient(135deg, #18bb7c, #0f9d5e);
    color: #fff !important;
    border: none;
    box-shadow: 0 6px 16px rgba(24,187,124,.28);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}
.contact-form-card .send-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(24,187,124,.38);
    color: #fff !important;
}
.contact-form-card .send-btn svg { width: 16px; height: 16px; }


/* ─── 4. FAQ ───────────────────────────────────────────────────── */
.contact-faq {
    margin: 64px auto 0;
    max-width: 880px;
    padding: 0 8px;
}
.contact-faq__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.contact-faq__item {
    background: var(--contact-card-bg, #fff);
    border: 1px solid var(--contact-card-border, #e5e7eb);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.contact-faq__item[open] {
    border-color: var(--contact-card-border-hover, #0f6e6e);
    box-shadow: 0 6px 16px rgba(15,110,110,.08);
}
.contact-faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 20px;
    font-size: 14px;
    font-weight: 600;
    color: var(--contact-heading, #1a3a5c);
    cursor: pointer;
    list-style: none;
}
.contact-faq__q::-webkit-details-marker { display: none; }
.contact-faq__chev {
    flex-shrink: 0;
    color: var(--contact-text-muted, #6b7280);
    transition: transform .2s ease;
}
.contact-faq__item[open] .contact-faq__chev { transform: rotate(180deg); }
.contact-faq__a {
    padding: 0 20px 16px;
    margin: 0;
    color: var(--contact-text-muted, #4b5563);
    font-size: 14px;
    line-height: 1.75;
}


/* ─── 5. CLOSING CTA ───────────────────────────────────────────── */
.contact-closing {
    margin: 64px auto 8px;
    max-width: 1180px;
    padding: 0 8px;
}
.contact-closing__card {
    background:
        radial-gradient(circle at 90% 10%, rgba(24,187,124,.25) 0%, transparent 50%),
        linear-gradient(135deg, #0e2a47 0%, #1a3a5c 55%, #0f6e6e 100%);
    border-radius: 16px;
    padding: 36px 36px;
    color: #fff;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    align-items: center;
    box-shadow: 0 10px 30px rgba(15,110,110,.25);
}
.contact-closing__title {
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 8px;
    letter-spacing: -.3px;
}
.contact-closing__desc {
    color: rgba(255,255,255,.86);
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}
.contact-closing__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.contact-closing__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 26px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 10px;
    text-decoration: none;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.contact-closing__btn--primary {
    background: #fff;
    color: #0f6e6e;
    box-shadow: 0 6px 16px rgba(0,0,0,.18);
}
.contact-closing__btn--primary:hover {
    transform: translateY(-2px);
    color: #0a5252;
    text-decoration: none;
}
.contact-closing__btn--ghost {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.40);
    color: #fff;
}
.contact-closing__btn--ghost:hover {
    background: rgba(255,255,255,.18);
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
}


/* ─── Responsive tweaks ───────────────────────────────────────── */
@media (max-width: 991px) {
    .contact-form-section__grid { grid-template-columns: 1fr; gap: 24px; }
    .contact-form-section__intro .contact-section-title { text-align: center; }
    .contact-form-section__intro .contact-section-title::after { left: 50%; transform: translateX(-50%); }
    .contact-form-section__intro-desc { text-align: center; }
    .contact-form-section__highlights { align-items: center; }
}

@media (max-width: 767px) {
    .contact-intro { margin-top: 8px; padding: 0 8px; }
    .contact-intro__desc { font-size: 14px; }
    .contact-intro__cta-primary,
    .contact-intro__cta-ghost { padding: 11px 22px; font-size: 13px; width: 100%; justify-content: center; }

    .contact-section-title { font-size: 18px; margin-bottom: 18px; }

    .contact-channels,
    .contact-form-section,
    .contact-faq,
    .contact-closing { margin-top: 48px; }

    .contact-form-card { padding: 22px 18px; }
    .contact-form-card .send-row { justify-content: stretch; }
    .contact-form-card .send-btn { width: 100%; justify-content: center; }

    .contact-closing__card {
        grid-template-columns: 1fr;
        padding: 28px 22px;
        text-align: center;
    }
    .contact-closing__actions { width: 100%; justify-content: center; }
    .contact-closing__btn { flex: 1 1 100%; justify-content: center; }
}

@media (max-width: 480px) {
    .contact-intro__chips { gap: 6px; }
    .contact-intro__chip { padding: 5px 12px; font-size: 11px; }
    .contact-intro__chip strong { font-size: 13px; }
}


/* ═══════════════════════════════════════════════════════════════
   Dark mode — override --contact-* tokens so cards and inputs sit
   on the page bg instead of fighting it. Mirrors the dual-trigger
   pattern from resources/assets/scss/abstracts/_tokens.scss:
     1. explicit [data-theme="dark"] opt-in
     2. @media (prefers-color-scheme: dark) when the user has not
        explicitly chosen light.
   Local vars map to global tokens so brand drift stays in one place.
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
    --contact-card-bg:           var(--color-bg-tertiary);    /* #2a2a2a */
    --contact-card-border:       var(--color-border);         /* #3f3f3f */
    --contact-card-border-hover: var(--color-primary);        /* emerald-500 */
    --contact-heading:           var(--color-text);           /* #ececec */
    --contact-text:              var(--color-text);
    --contact-text-muted:        var(--color-text-secondary); /* #b4b4b4 */
    --contact-divider:           var(--color-border-light);
    --contact-input-bg:          var(--color-bg-secondary, #1f1f1f);
    --contact-input-border:      var(--color-border);
    --contact-icon-bg:           linear-gradient(135deg, rgba(16,185,129,.18) 0%, rgba(29,155,240,.12) 100%);
    --contact-icon-fg:           var(--color-primary);
    --contact-icon-bg-telegram:  rgba(34,158,217,.18);
    --contact-icon-fg-telegram:  #5ab8e4;
    --contact-icon-bg-whatsapp:  rgba(37,211,102,.18);
    --contact-icon-fg-whatsapp:  #4cd980;
    --contact-icon-bg-email:     rgba(99,102,241,.18);
    --contact-icon-fg-email:     #a5a8ff;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --contact-card-bg:           var(--color-bg-tertiary);
        --contact-card-border:       var(--color-border);
        --contact-card-border-hover: var(--color-primary);
        --contact-heading:           var(--color-text);
        --contact-text:              var(--color-text);
        --contact-text-muted:        var(--color-text-secondary);
        --contact-divider:           var(--color-border-light);
        --contact-input-bg:          var(--color-bg-secondary, #1f1f1f);
        --contact-input-border:      var(--color-border);
        --contact-icon-bg:           linear-gradient(135deg, rgba(16,185,129,.18) 0%, rgba(29,155,240,.12) 100%);
        --contact-icon-fg:           var(--color-primary);
        --contact-icon-bg-telegram:  rgba(34,158,217,.18);
        --contact-icon-fg-telegram:  #5ab8e4;
        --contact-icon-bg-whatsapp:  rgba(37,211,102,.18);
        --contact-icon-fg-whatsapp:  #4cd980;
        --contact-icon-bg-email:     rgba(99,102,241,.18);
        --contact-icon-fg-email:     #a5a8ff;
    }
}