/* ============================================================================
   MTheme/css/consult-modal.css
   ----------------------------------------------------------------------------
   مدال «درخواست مشاوره رایگان» — نسخهٔ شناور خودکار (hzcm-*)

   کاربر: «وقتی کاربر ۳ تا اسکرول کرد یه مدال زیبا بیاد»
   پالت: سبز برند #006a0d + اکسن #ee8d1a — شیشه‌ای سفید و مینیمال.

   ⚠️ کلاس‌ها با پیشوند hzcm- نام‌گذاری شده‌اند تا با مدال موجود
      (.consult-modal-backdrop در detail-fixes.css) تداخل نکنند.
   ============================================================================ */

.hzcm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(16, 26, 40, .48);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity .24s ease;
}
.hzcm-backdrop[hidden] { display: none; }
.hzcm-backdrop.is-open { opacity: 1; }

.hzcm {
    position: relative;
    width: 100%;
    max-width: 440px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 30px 80px -20px rgba(16, 26, 40, .45);
    overflow: hidden;
    transform: translateY(18px) scale(.97);
    transition: transform .3s cubic-bezier(.2, .8, .3, 1);
}
.hzcm-backdrop.is-open .hzcm { transform: translateY(0) scale(1); }

/* ---------- هدر ---------- */
.hzcm-head {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 20px 22px 14px;
    background: linear-gradient(150deg, rgba(0, 106, 13, .07), rgba(238, 141, 26, .07));
}
.hzcm-ico {
    flex: 0 0 48px;
    width: 48px; height: 48px;
    border-radius: 15px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--brand, #006a0d), #ee8d1a);
    color: #fff;
    font-size: 20px;
    box-shadow: 0 10px 24px -10px rgba(0, 106, 13, .6);
}
.hzcm-head-txt { min-width: 0; padding-inline-end: 30px; }
.hzcm-head-txt h3 {
    margin: 0 0 5px;
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--ink, #16283f);
    line-height: 1.55;
}
.hzcm-head-txt p {
    margin: 0;
    font-size: .8rem;
    line-height: 1.9;
    color: #64748b;
}

.hzcm-x {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    width: 32px; height: 32px;
    border: 1px solid rgba(22, 40, 63, .1);
    border-radius: 50%;
    background: #fff;
    color: #94a3b8;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    transition: color .18s, border-color .18s;
}
.hzcm-x:hover { color: #c0392b; border-color: rgba(192, 57, 43, .35); }

/* ---------- بدنه ---------- */
.hzcm-body {
    padding: 4px 22px 8px;
    overflow-y: auto;
    flex: 1 1 auto;
}

/* چیپ‌های مزیت */
.hzcm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 15px;
}
.hzcm-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(0, 106, 13, .07);
    color: var(--brand, #006a0d);
    font-size: .72rem;
    font-weight: 700;
}
.hzcm-chip i { font-size: .68rem; }

/* بنر «با نام شما ثبت می‌شود» */
.hzcm-who {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 15px;
    padding: 11px 14px;
    border-radius: 13px;
    background: #f0fdf4;
    border: 1px solid rgba(0, 106, 13, .16);
    color: #166534;
    font-size: .78rem;
    line-height: 1.9;
}
.hzcm-who[hidden] { display: none; }
.hzcm-who i { margin-top: 4px; font-size: .85rem; flex: 0 0 auto; }
.hzcm-who b { font-weight: 800; }

/* فیلدها */
.hzcm-field { margin-bottom: 13px; }
.hzcm-field label {
    display: block;
    margin-bottom: 7px;
    font-size: .78rem;
    font-weight: 700;
    color: #475569;
}
.hzcm-field label span { color: #c0392b; }
.hzcm-field label small { color: #98a2b3; font-weight: 500; }

.hzcm-field input,
.hzcm-field textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid rgba(22, 40, 63, .12);
    border-radius: 12px;
    background: #fff;
    font-size: .85rem;
    color: var(--ink, #16283f);
    font-family: inherit;
    transition: border-color .18s, box-shadow .18s;
}
.hzcm-field textarea { resize: vertical; min-height: 62px; }
.hzcm-field input:focus,
.hzcm-field textarea:focus {
    outline: none;
    border-color: var(--brand, #006a0d);
    box-shadow: 0 0 0 3px rgba(0, 106, 13, .1);
}

.hzcm-msg {
    min-height: 18px;
    padding: 2px 0 6px;
    font-size: .77rem;
    font-weight: 600;
    line-height: 1.8;
}
.hzcm-msg.is-ok { color: #17803d; }
.hzcm-msg.is-err { color: #c0392b; }

/* ---------- پایین ---------- */
.hzcm-foot {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 14px 22px 18px;
    border-top: 1px solid #f1f4f8;
    background: #fafbfd;
}

.hzcm-later {
    flex: 0 0 auto;
    padding: 12px 18px;
    border: 1px solid #e6eaf1;
    border-radius: 12px;
    background: #fff;
    color: #64748b;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .18s, color .18s;
}
.hzcm-later:hover { border-color: #cbd5e1; color: #475569; }

.hzcm-submit {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 12px 20px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand, #006a0d), #ee8d1a);
    color: #fff;
    font-size: .85rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 10px 24px -11px rgba(0, 106, 13, .55);
    transition: transform .2s, box-shadow .2s, opacity .2s;
}
.hzcm-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 14px 30px -12px rgba(0, 106, 13, .6);
}
.hzcm-submit:disabled { opacity: .6; cursor: not-allowed; }

/* ---------- موبایل ---------- */
@media (max-width: 560px) {
    .hzcm-backdrop { padding: 12px; align-items: flex-end; }
    .hzcm {
        max-width: 100%;
        max-height: 94vh;
        border-radius: 20px 20px 14px 14px;
    }
    .hzcm-head { padding: 17px 17px 12px; }
    .hzcm-body { padding: 4px 17px 6px; }
    .hzcm-foot { padding: 12px 17px 15px; }
    .hzcm-foot { flex-wrap: wrap; }
    .hzcm-later { flex: 1 1 100%; order: 2; }
    .hzcm-submit { flex: 1 1 100%; order: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .hzcm-backdrop, .hzcm { transition: none; }
}

/* راهنمای زیر کادر متنی — کاربر: «بنویسه در چه زمینه‌ای مشاوره میخواد» */
.hzcm-help {
    display: block;
    margin-top: 6px;
    font-size: .72rem;
    line-height: 1.85;
    color: #94a3b8;
}