/* assets/css/form-style.css */
.link-crm-native-form {
    max-width: 550px !important;
    margin: 20px auto !important;
    padding: 30px !important;
    background: #fff !important;
    border: 1px solid #eaeaea !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
    font-family: tahoma !important;
    direction: rtl !important;
}

.form-title {
    text-align: center !important;
    color: #333 !important;
    margin-bottom: 25px !important;
    font-size: 1.5rem !important;
}

.form-field-row {
    margin-bottom: 20px !important;
}

.form-field-row label {
    display: block !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
    color: #555 !important;
    font-size: 14px !important;
}

.form-field-row input[type="text"],
.form-field-row input[type="tel"],
.form-field-row input[type="email"],
.form-field-row input[type="number"],
.form-field-row textarea {
    width: 100% !important;
    padding: 12px !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    transition: border-color 0.3s !important;
    box-sizing: border-box !important;
}

.form-field-row input:focus {
    border-color: #5ED0B6 !important;
    outline: none !important;
}


.req {
    color: #d63638 !important;
    margin-right: 2px !important;
    margin-top: 2px !important;
}

.linkcrm-btn {
    width: 100% !important;
    padding: 12px !important;
    background: #5ED0B6 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 16px !important;
    font-weight: bold !important;
}

.linkcrm-btn:hover {
    background: #3ab397 !important;
}

/* استایل فیلدهای عددی LTR */
.link-crm-native-form form input.only-numbers,
.link-crm-native-form form input[type="tel"] {
    direction: ltr !important;
    text-align: left !important;
    display: block !important;
    unicode-bidi: plaintext !important;
    font-family: monospace !important;
}

/* استایل دراپ‌داون جنسیت */
.link-crm-native-form select.crm-select-field {
    width: 100% !important;
    padding: 12px !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    background-color: #fff !important;
    font-family: tahoma !important;
    cursor: pointer !important;
    appearance: none !important;
    background-repeat: no-repeat !important;
    background-position: left 12px center !important;
    background-size: 12px !important;
    box-sizing: border-box !important;
}

.link-crm-native-form input[type="email"] {
    direction: ltr !important;
    text-align: left !important;
}


.ant-slider-wrapper {
    width: 100% !important;
    padding: 10px 0 20px 0 !important;
}


.ant-slider-value {
    color: #1890ff !important; /* رنگ آبی AntD */
    font-weight: bold !important;
}


/* استایل بدنه اسلایدر */
.ant-slider-input {
    -webkit-appearance: none !important;
    width: 100% !important;
    height: 4px !important; /* ضخامت خط */
    background: #f5f5f5 !important;
    border-radius: 2px !important;
    outline: none !important;
    direction: ltr !important;
    cursor: pointer !important;
}


.link-crm-native-form input[readonly] {
    background-color: #f0f0f0 !important;
    cursor: not-allowed !important;
}

.crm-otp-inputs {
    display: flex !important;
    flex-direction: row-reverse !important; /* RTL: رقم اول سمت راست */
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    margin: 16px 0 !important;
}

.otp-box {
    /* ابعاد: aspect-ratio برای حفظ مربع بودن */
    width: 52px !important;
    height: 52px !important;
    aspect-ratio: 1 / 1 !important;

    /* مهم: جلوگیری از تاثیر box-sizing قالب */
    box-sizing: border-box !important;
    padding: 0 !important;
    margin: 0 !important;

    /* تایپوگرافی */
    font-size: 20px !important;
    font-weight: 700 !important;
    font-family: inherit !important;
    line-height: 1 !important;
    text-align: center !important;
    color: #1a1a1a !important;

    /* ظاهر */
    border: 2px solid #d1d5db !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    outline: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;

    /* جلوگیری از resize یا flex-grow */
    flex: 0 0 52px !important;
    max-width: 52px !important;
    min-width: 52px !important;

    /* انیمیشن focus */
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}


.otp-box:focus {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
    background: #f8faff !important;
}
.otp-box.filled {
    border-color: #10b981 !important;
    background: #f0fdf4 !important;
}
/* حذف دکمه‌های بالا و پایین اینپوت number */
.otp-box::-webkit-outer-spin-button,
.otp-box::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* استایل کلی باکس پیام‌ها */
.crm-alert {
    padding: 12px 16px !important;
    border-radius: 8px !important;
    margin-bottom: 20px !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    display: flex !important;
    align-items: center !important;
    border-right: 5px solid !important; /* ایجاد یک نوار رنگی در سمت راست برای زبان فارسی */
    animation: fadeInSlide 0.4s ease-out !important;
}

/* استایل پیام موفقیت (سبز) */
.crm-alert-success {
    background-color: #ecfdf5 !important;
    color: #065f46 !important;
    border-right-color: #10b981 !important;
}

/* استایل پیام خطا (قرمز) */
.crm-alert-error {
    background-color: #fef2f2 !important;
    color: #991b1b !important;
    border-right-color: #ef4444 !important;
}

/* انیمیشن ظاهر شدن پیام */
@keyframes fadeInSlide {
    from {
        opacity: 0 !important;
        transform: translateY(-10px) !important;
    }
    to {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}
/* اصلاح کانتینر راهنما */
.crm-otp-help {
    background: #f0f4f8 !important;
    color: #4a5568 !important;
    padding: 10px 15px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    margin: 15px auto !important; /* تغییر از 15px 0 به 15px auto برای وسط‌چین شدن */
    display: flex !important; /* تغییر از inline-flex به flex */
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border: 1px solid #dbeafe !important;
    max-width: 90% !important; /* جلوگیری از چسبیدن به لبه‌ها در موبایل */
}

/* اطمینان از وسط‌چین بودن کل بخش OTP */
.crm-otp-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* استایل لیبل OTP */
.crm-otp-label {
    margin-bottom: 20px !important;
    font-weight: bold !important;
    color: #333 !important;
    display: block !important;
    width: 100% !important;
}
.form-field-row input.is-readonly {
    background-color: #f5f5f5 !important; /* خاکستری روشن */
    color: #777 !important; /* متن کمرنگ‌تر */
    cursor: not-allowed !important; /* تغییر نشانگر موس به علامت ممنوع */
    border-style: dashed !important; /* خط‌چین شدن حاشیه برای تمایز بیشتر */
}

.form-field-row input.is-readonly:focus {
    box-shadow: none !important;
    border-color: #5ED0B6 !important;
}

.form-header {
    text-align: center !important;
    margin-bottom: 30px !important;
}

.form-title {
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #1a202c !important; /* رنگ تیره و با ابهت */
    margin: 0 0 10px 0 !important;
    letter-spacing: -0.5px !important;
}

.title-underline {
    width: 50px !important;
    height: 4px !important;
    background: linear-gradient(90deg, #3498db, #2ecc71) !important; /* گرادینت آبی به سبز */
    margin: 0 auto !important;
    border-radius: 10px !important;
}

/* اگر عنوان خیلی طولانی بود */
@media (max-width: 480px) {
    .form-title {
        font-size: 19px !important;
    }
}
/* ظرف اصلی لودینگ */
.crm-loading-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(4px) !important; /* مات کردن محتویات زیر لودینگ */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 999 !important;
    border-radius: 12px !important;
    animation: fadeIn 0.3s ease !important;
}

/* محتوای داخلی لودینگ */
.crm-loading-content {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* استایل اسپینر مدرن */
.crm-spinner {
    width: 50px !important;
    height: 50px !important;
    border: 3px solid rgba(52, 152, 219, 0.1) !important;
    border-top: 3px solid #3498db !important;
    border-radius: 50% !important;
    animation: spin 0.8s linear infinite !important;
    margin-bottom: 15px !important;
}

/* متن اصلی */
.crm-loading-text {
    font-weight: bold !important;
    color: #2c3e50 !important;
    font-size: 16px !important;
    margin-bottom: 5px !important;
}

/* متن فرعی */
.crm-loading-subtext {
    font-size: 12px !important;
    color: #7f8c8d !important;
}

/* انیمیشن چرخش */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* انیمیشن ظاهر شدن لایه */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


/* ۱. کلیات مشترک برای همه فیلدها */
.crm-custom-field {
    width: 100% !important;
    height: 48px !important;
    padding: 10px 15px 10px 45px !important; /* پدینگ ۴۵ پیکسل برای جای آیکون */
    border: 2px solid #ddd !important;
    border-radius: 8px !important;
    background-repeat: no-repeat !important;
    background-position: 12px center !important; /* محل قرارگیری آیکون */
    background-size: 20px 20px !important;
    transition: all 0.3s ease !important;
    font-size: 15px !important;
    color: #444 !important;
    outline: none !important;
}

/* ۲. استایل فوکوس و وضعیت خطا (مشترک) */
.crm-custom-field:focus {
    border-color: #5ED0B6 !important;
    box-shadow: 0 0 8px rgba(4, 56, 64, 0.2) !important;
    background-color: #fff !important;
}

.crm-custom-field:invalid:not(:placeholder-shown) {
    border-color: #ff5252 !important;
    background-color: #fff8f8 !important;
}

/* ۳. تغییرات اختصاصی بر اساس تایپ */

/* --- موبایل --- */
.crm-type-phone {
    direction: ltr !important;
    text-align: left !important;
    font-weight: bold !important;
    letter-spacing: 1px !important;
}

/* --- کد ملی --- */
.crm-type-national {
    direction: ltr !important;
    text-align: left !important;
    letter-spacing: 3px !important;
}

/* --- متن معمولی (نام و نام خانوادگی) --- */
.crm-type-text {
    direction: rtl !important;
    text-align: right !important;
    padding: 10px 45px 10px 15px !important; /* جابجایی پدینگ برای متن فارسی */
    background-position: right 12px center !important; /* آیکون در سمت راست */
}
/* ظرف اصلی دکمه‌ها */
.crm-radio-group {
    display: flex !important;
    gap: 12px !important;
    margin-top: 5px !important;
}

/* مخفی کردن دایره پیش‌فرض رادیو */
.crm-radio-item input[type="radio"] {
    display: none !important;
}

/* استایل دکمه‌های کاستوم */
.crm-radio-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 10px 20px !important;
    border: 2px solid #ddd !important;
    border-radius: 8px !important;
    background: #fff !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !important;
    color: #666 !important;
    min-width: 100px !important;
}

/* استایل آیکون‌های داخل دکمه */
.crm-radio-icon {
    width: 18px !important;
    height: 18px !important;
    stroke: #043840 !important;
}

/* وضعیت انتخاب شده (Checked) */
.crm-radio-item input[type="radio"]:checked + .crm-radio-button {
    border-color: #5ED0B6 !important;
    color: #043840 !important;
}

.crm-radio-item input[type="radio"]:checked + .crm-radio-button .crm-radio-icon {
    stroke: #043840 !important;
}

/* هاور (Hover) */
.crm-radio-button:hover {
    border-color: #5ED0B6 !important;
    color: #043840 !important;
}

/* انیمیشن کوچک هنگام کلیک */
.crm-radio-button:active {
    transform: scale(0.95) !important;
}
.crm-radio-group.crm-full-width {
    display: flex !important;
    width: 100% !important;
    gap: 8px !important; /* فاصله بین دو دکمه */
    margin-top: 5px !important;
}
.crm-radio-item {
    flex: 1 !important; /* این خط جادوی تمام‌عرض شدن است */
    display: flex !important;
}

/* --- فیلد تاریخ --- */
.crm-type-date {
    direction: ltr !important;
    text-align: left !important;
    padding: 10px 15px 10px 45px !important;
    background-position: 12px center !important;
    cursor: pointer !important;
    background-color: #f9f9f9 !important;
}

/* جلوگیری از بیرون زدن تقویم از کادر */
.datepicker-plot-area {
    font-family: tahoma, arial !important;
    direction: rtl !important;
}


/* --- فیلد شهر --- */
.crm-type-city {
    direction: rtl !important;
    text-align: right !important;
    padding: 10px 45px 10px 15px !important; /* پدینگ راست برای آیکون */
    background-position: right 12px center !important; /* قرارگیری آیکون در سمت راست */
}

/* تغییر رنگ آیکون در حالت فوکوس برای فیلد شهر */
.crm-type-city:focus {
}

/* --- فیلد ایمیل --- */
.crm-type-email {
    direction: ltr !important; /* ایمیل همیشه چپ‌چین است */
    text-align: left !important;
    padding: 10px 15px 10px 45px !important; /* آیکون در سمت چپ */
    background-position: 12px center !important;
}

/* تغییر رنگ آیکون در حالت فوکوس */
.crm-type-email:focus {
}

/* --- فیلد تلفن ثابت --- */
.crm-type-landing-phone {
    direction: ltr !important;
    text-align: left !important;
    padding: 10px 15px 10px 45px !important;
    background-position: 12px center !important;
    /* آیکون تلفن ثابت */
}

/* تغییر رنگ آیکون در حالت فوکوس */
.crm-type-landing-phone:focus {
}

/* --- فیلد کد پستی --- */
.crm-type-zip {
    direction: ltr !important;
    text-align: left !important;
    padding: 10px 15px 10px 45px !important;
    background-position: 12px center !important;
    letter-spacing: 2px !important; /* فاصله بین اعداد برای دقت بیشتر در تایپ */
    font-family: monospace !important;
    font-weight: bold !important;
    /* آیکون صندوق پستی */
}

/* تغییر رنگ آیکون در حالت فوکوس */
.crm-type-zip:focus {
}

/* کانتینر اصلی فیلدها برای جلوگیری از بیرون زدگی */
.crm-field-container {
    width: 100% !important;
    position: relative !important;
    box-sizing: border-box !important;
}

/* اصلاح استایل تکست‌اریا */
.crm-type-textarea {
    width: 100% !important; /* حتما تمام عرض کانتینر را بگیرد */
    max-width: 100% !important; /* به هیچ وجه از والد بزرگتر نشود */
    min-height: 80px !important; /* ارتفاع کمتر برای شلوغ نشدن فرم */
    padding: 10px 12px !important;
    box-sizing: border-box !important; /* عرض شامل پدینگ شود */
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    display: block !important;
}

/* هینت فشرده و کوچک زیر فیلد */
.crm-hint-text {
    font-size: 11px !important;
    color: #888 !important;
    margin-top: 4px !important;
    padding-right: 5px !important;
    line-height: 1.4 !important;
    border-right: 2px solid #043840 !important; /* یک خط ظریف برای تمایز */
    padding-right: 8px !important;
}
.crm-question-hint {
    display: flex !important;
    align-items: flex-start !important;
    gap: 6px !important;
    color: #666 !important;
    font-size: 12.5px !important;
    margin-bottom: 8px !important;
    margin-top: 8px !important;
    line-height: 1.5 !important;
    background: #f0f7f8 !important; /* یک پس‌زمینه بسیار ملایم */
    padding: 8px 12px !important;
    border-radius: 6px !important;
    border-right: 3px solid #5ED0B6 !important; /* خط رنگی کنار راهنما */
}

.crm-question-hint svg {
    margin-top: 2px !important;
    flex-shrink: 0 !important;
    color: #043840 !important;
}

/* حذف دکمه‌های بالا و پایین فیلد عدد */
.crm-type-number::-webkit-inner-spin-button,
.crm-type-number::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}
.crm-type-number {
    -moz-appearance: textfield !important; /* برای فایرفاکس */
    width: 100% !important; /* حتما تمام عرض کانتینر را بگیرد */
    max-width: 100% !important; /* به هیچ وجه از والد بزرگتر نشود */
    padding: 10px 12px !important;
    box-sizing: border-box !important; /* عرض شامل پدینگ شود */
    border: 1px solid #ddd !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    display: block !important;
    direction: ltr !important;
}

/* فاصله بین سوالات */
.crm-question-wrapper {
    margin-bottom: 25px !important;
    width: 100% !important;
}

.crm-question-label {
    display: block !important;
    font-weight: bold !important;
    margin-bottom: 8px !important;
    font-size: 14px !important;
    color: #333 !important;
}

/* کانتینر کل گزینه‌ها */
.crm-checkbox-group {
    display: flex !important;
    flex-direction: column !important;
}

/* باکس هر گزینه */
.crm-checkbox-card {
    display: flex !important;
    justify-content: space-between !important; /* ایجاد فاصله بین متن (راست) و مربع (چپ) */
    align-items: center !important;
    background: #fff !important;
    border: 1px solid #eee !important;
    padding: 12px 15px !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02) !important;
}

.crm-checkbox-card:hover {
    border-color: #5ED0B6 !important;
    background-color: #f9fbfc !important;
}

/* وقتی چک‌باکس انتخاب می‌شود، کل باکس کمی تغییر رنگ دهد (اختیاری) */
.crm-checkbox-card:has(input:checked) {
    border-color: #5ED0B6 !important;
    background-color: rgba(4, 56, 64, 0.03) !important;
}

/* متن سمت راست */
.crm-checkbox-label-text {
    font-size: 14px !important;
    color: #444 !important;
    font-weight: 500 !important;
}

/* نگهدارنده مربع سمت چپ */
.crm-checkbox-input-wrapper {
    position: relative !important;
    width: 22px !important;
    height: 22px !important;
}

.crm-checkbox-input-wrapper input {
    position: absolute !important;
    opacity: 0 !important;
    cursor: pointer !important;
}

/* خودِ مربع انتخاب */
.crm-checkbox-custom {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 22px !important;
    width: 22px !important;
    background-color: #fff !important;
    border: 2px solid #ddd !important;
    border-radius: 6px !important;
    transition: all 0.2s !important;
}

/* حالت انتخاب شده */
.crm-checkbox-input-wrapper input:checked ~ .crm-checkbox-custom {
    background-color: #5ED0B6 !important;
    border-color: #5ED0B6 !important;
}

/* علامت تیک */
.crm-checkbox-custom:after {
    content: "" !important;
    position: absolute !important;
    display: none !important;
    left: 7px !important;
    top: 3px !important;
    width: 5px !important;
    height: 10px !important;
    border: solid white !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}

.crm-checkbox-input-wrapper input:checked ~ .crm-checkbox-custom:after {
    display: block !important;
}

/* کانتینر گروهی رادیوها */
.crm-radio-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 10px !important;
}

/* باکس هر گزینه رادیو */
.crm-radio-card {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: #fff !important;
    border: 1px solid #eee !important;
    padding: 12px 15px !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.crm-radio-card:hover {
    border-color: #5ED0B6 !important;
    background-color: #f9fbfc !important;
}

/* تغییر رنگ پس‌زمینه در صورت انتخاب شدن */
.crm-radio-card:has(input:checked) {
    border-color: #5ED0B6 !important;
    background-color: rgba(4, 56, 64, 0.03) !important;
}

.crm-radio-label-text {
    font-size: 14px !important;
    color: #444 !important;
    font-weight: 500 !important;
}

/* نگهدارنده دایره سمت چپ */
.crm-radio-input-wrapper {
    position: relative !important;
    width: 22px !important;
    height: 22px !important;
}

.crm-radio-input-wrapper input {
    position: absolute !important;
    opacity: 0 !important;
    cursor: pointer !important;
}

/* خودِ دایره رادیو */
.crm-radio-custom {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    height: 15px !important;
    width: 15px !important;
    background-color: #fff !important;
    border: 2px solid #ddd !important;
    border-radius: 50% !important; /* تبدیل به دایره */
    transition: all 0.2s !important;
}

/* حالت انتخاب شده */
.crm-radio-input-wrapper input:checked ~ .crm-radio-custom {
    border-color: #5ED0B6 !important;
}

/* نقطه وسط دایره در حالت انتخاب */
.crm-radio-custom:after {
    content: "" !important;
    position: absolute !important;
    display: none !important;
    width: 15px !important;
    height: 15px !important;
    border-radius: 50% !important;
    background: #5ED0B6 !important;
}

.crm-radio-input-wrapper input:checked ~ .crm-radio-custom:after {
    display: block !important;
}

.crm-rating-container {
    padding: 40px 15px 20px !important;
    margin-bottom: 20px !important;
}

.crm-range-wrapper {
    position: relative !important;
    width: 100% !important;
    height: 10px !important;
}

/* مارکرها (عدد + دایره) */
.crm-range-markers {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important; /* جلوگیری از تداخل با کلیک اسلایدر */
}

.crm-marker {
    position: absolute !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    transform: translateX(50%) !important; /* تراز کردن مرکز مارکر با درصد */
}

/* دایره‌های کوچک روی خط */
.crm-marker-dot {
    width: 6px !important;
    height: 6px !important;
    background: #ccc !important;
    border-radius: 50% !important;
    margin-top: 2px !important;
    z-index: 1 !important;
}

/* اعداد بالای دایره‌ها */
.crm-marker-num {
    position: absolute !important;
    top: -25px !important;
    font-size: 12px !important;
    color: #888 !important;
    font-weight: bold !important;
}

/* استایل اسلایدر */
.crm-modern-range {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    height: 10px !important;
    border-radius: 5px !important;
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    outline: none !important;
    margin: 0 !important;
    cursor: pointer !important;
    /* گرادینت برای پر شدن از راست به چپ */
    background-image: linear-gradient(to left, #5ED0B6 var(--value), #eee var(--value)) !important;
}

/* دکمه لغزنده (Thumb) */
.crm-modern-range::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    background: #5ED0B6 !important;
    border: 3px solid #fff !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 3 !important;
}

.crm-modern-range::-moz-range-thumb {
    width: 20px !important;
    height: 20px !important;
    background: #5ED0B6 !important;
    border: 3px solid #fff !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3) !important;
    cursor: pointer !important;
    z-index: 3 !important;
}

/* اصلاح تراز اولین و آخرین عدد برای بیرون نزدن از کادر */
.crm-marker[style*="right: 0%"] { transform: translateX(0); }
.crm-marker[style*="right: 100%"] { transform: translateX(100%); }

/* کانتینر اصلی برای چیدمان دوتایی */
.crm-yesno-group {
    display: flex !important;
    gap: 15px !important;
    margin-top: 10px !important;
}

/* استایل هر کارت */
.crm-yesno-card {
    flex: 1 !important; /* هر دو باکس عرض مساوی می‌گیرند */
    position: relative !important;
    cursor: pointer !important;
}

/* مخفی کردن دایره رادیو پیش‌فرض */
.crm-yesno-card input {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* محتوای داخل کارت */
.crm-yesno-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px !important;
    border: 2px solid #eee !important;
    border-radius: 8px !important;
    background: #fff !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
}



.crm-yesno-label {
    font-size: 14px !important;
    font-weight: bold !important;
    color: #666 !important;
}

/* استایل حالت انتخاب شده (بله - سبز یا رنگ سازمانی) */
.crm-yesno-card input:checked + .crm-yesno-content {
    border-color: #5ED0B6 !important;
    background-color: #fff !important;
}

.crm-yesno-card input:checked + .crm-yesno-content .crm-yesno-label {
    color: #5ED0B6 !important;
}

.crm-yesno-card input:checked + .crm-yesno-content  {
    color: #5ED0B6 !important;
}

/* هاور ملایم */
.crm-yesno-card:hover .crm-yesno-content {
    border-color: #ddd !important;
}

/* کانتینر فیلد زمان */
.crm-time-field-wrapper {
    width: 100% !important;
}

.crm-input-icon-container {
    position: relative !important;
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
}
/* استایل ورودی زمان */
.crm-type-time {
    width: 100% !important;
    padding: 12px 15px 12px 45px !important; /* پدینگ اضافه در سمت چپ برای آیکون */
    border: 1px solid #ddd !important;
    border-radius: 10px !important;
    font-family: inherit !important;
    font-size: 15px !important;
    outline: none !important;
    direction: ltr !important; /* ساعت همیشه چپ‌چین باشد بهتر است */
    text-align: right !important; /* اما مقدار داخل آن راست‌چین نمایش داده شود */
    height: 10px !important;
}

/* استایل آیکون ساعت */
.crm-field-icon {
    position: absolute !important;
    left: 15px !important;
    z-index: 0 !important; /* زیرِ لایه شفاف تقویم باشد تا مانع کلیک نشود */
    color: #043840 !important;
    pointer-events: none !important; /* اجازه عبور کلیک به لایه زیرین */
}

/* تغییر رنگ بوردر هنگام فوکوس */
.crm-type-time:focus {
    border-color: #043840 !important;
    box-shadow: 0 0 0 3px rgba(4, 56, 64, 0.1) !important;
}

/* استایل برای مرورگرهای مختلف (حذف ظاهر پیش‌فرض در صورت نیاز) */
.crm-type-time::-webkit-calendar-picker-indicator {
    background: transparent !important;
    bottom: 0 !important;
    color: transparent !important;
    cursor: pointer !important;
    height: auto !important;
    left: 0 !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    width: auto !important;
}

/* حذف آیکون پیش‌فرض تقویم در کروم و سایر مرورگرها */
/* حذف آیکون اصلی و گسترش آن روی کل فیلد برای باز شدن با کلیک */
.crm-custom-field::-webkit-calendar-picker-indicator {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    background: transparent !important; /* آیکون غیب می‌شود اما کلیک می‌خورد */
    color: transparent !important;
    -webkit-appearance: none;
}

.crm-custom-field[type="date"],
.crm-custom-field[type="time"] {
    position: relative !important;
    background: #fff !important; /* حذف آیکون‌های احتمالی پس‌زمینه مرورگر */
}

/* برای اطمینان بیشتر در فیلد تاریخ و زمان */
.crm-type-date, .crm-type-time {
    padding-left: 45px !important;
    position: relative !important;
    z-index: 1 !important; /* لایه فیلد بالا باشد */
}
/* استایل کلی فیلد (بدون تغییر در طراحی قبلی) */
.crm-type-date {
    width: 100% !important;
    height: 10px !important;
    padding: 12px 15px 12px 45px !important;
    border: 1px solid #ddd !important;
    border-radius: 10px !important;
    direction: ltr !important;
    text-align: right !important;
    position: relative !important;
    z-index: 1 !important;
}

/* تنظیم جایگاه آیکون خودمان */
.crm-input-icon-container .crm-field-icon {
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 2 !important;
    color: #043840 !important;
    pointer-events: none !important; /* کلیک از روی آیکون رد شود و به فیلد برسد */
}

/* استایل اختصاصی برای DateTime */
.crm-type-datetime {
    width: 100% !important;
    height: 10px !important;
    padding: 12px 15px 12px 45px !important;
    border: 1px solid #ddd !important;
    border-radius: 10px !important;
    direction: ltr !important;
    text-align: right;
    background-color: #fff !important;
    position: relative !important;
}

/* حل مشکل باز نشدن و حذف آیکون دوم در کروم */
.crm-type-datetime::-webkit-calendar-picker-indicator {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    background: transparent !important;
    color: transparent !important;
    -webkit-appearance: none !important;
    z-index: 2 !important;
}

/* آیکون ما در سمت چپ */
.crm-datetime-field-wrapper .crm-field-icon {
    position: absolute !important;
    left: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #043840 !important;
    z-index: 1 !important;
    pointer-events: none !important;
}
/* Loading Overlay Styles */
.crm-processing {
    position: relative !important;
    pointer-events: none !important;
}
.crm-loading-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(255,255,255,0.8) !important;
    z-index: 100 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
}
.crm-spinner {
    width: 40px !important;
    height: 40px !important;
    border: 4px solid #f3f3f3 !important;
    border-top: 4px solid #3498db !important;
    border-radius: 50% !important;
    animation: crm-spin 1s linear infinite !important;
    margin-bottom: 10px !important;
}
@keyframes crm-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.crm-edit-phone-wrapper {
    text-align: center !important;
    margin-bottom: 16px !important;
}

.crm-edit-phone-btn,
.crm-resend-btn {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    font-size: 12px !important;
    font-family: inherit !important;
    color: #94a3b8 !important;
    cursor: pointer !important;
    text-decoration: underline !important;
    text-decoration-style: dashed !important;
    text-underline-offset: 3px !important;
    transition: color 0.15s !important;
    box-shadow: none !important;
}
.crm-edit-phone-btn:hover{
    background-color: white !important;
    color: #475569 !important;
}
/* ── Resend OTP ── */
.crm-resend-wrapper {
    text-align: center !important;
    margin-top: 12px !important;
}

.crm-resend-btn {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    font-size: 12px !important;
    font-family: inherit !important;
    color: #94a3b8 !important;
    cursor: default !important;
    text-decoration: none !important;
    transition: color 0.15s !important;
}

.crm-resend-btn.ready {
    color: #475569 !important;
    cursor: pointer !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

.crm-resend-btn.ready:hover {
    color: #1e293b !important;
}
.crm-resend-btn:disabled {
    cursor: default !important;
    text-decoration: none !important;
}
.crm-otp-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: 12px !important;
    padding: 0 2px !important;
    gap: 28px !important;
}