/* reset and box-sizing */
.rci-widget,
.rci-widget * {
    box-sizing: border-box;
}

/* کانتینر اصلی */
.rci-widget {
    background: #fff;
    border-radius: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 1000px;
    margin: auto;
    font-family: 'Yekan Bakh', sans-serif;
}

/* دکمه‌های بالا */
.rci-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}

/* ثابت نگه داشتن اندازه دکمه‌ها (مورد انتظار) */
.rci-btn {
    flex: 0 0 212px;
    width: 212px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #E6EBED;
    border-radius: 24px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: #212121;
    transition: all 0.18s ease;
}

.rci-btn img {
    width: 28px;
    height: 28px;
}

.rci-btn.active {
    background: #DDE6F2;
    border: 1px solid #00397C;
    box-shadow: 0px 0px 10px rgba(0, 57, 124, 0.25);
}

/* هاور دکمه‌ها */
.rci-btn:hover {
    background: #F0F4F8; /* یه آبی خیلی روشن و ملایم */
    transform: translateY(-2px); /* یه افکت نرم برای جذابیت */
    box-shadow: 0 4px 12px rgba(0, 57, 124, 0.15); /* سایه هماهنگ با رنگ آبی نفتی */
}


/* فرم ورودی‌ها (پایینی) */
.rci-form {
    display: flex;
    align-items: flex-end;
    gap: 24px;
    /* کمی جمع‌تر برای جا شدن در لپ‌تاپ */
    flex-wrap: nowrap;
    justify-content: center;
    width: 100%;
    overflow: visible;
}

.rci-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 326px;
}

.rci-field label {
    font-weight: 700;
    font-size: 14px;
    color: #7A7A7A;
    text-align: right;
}

/* ورودی‌ها و select */
.rci-field select,
.rci-field input {
    width: 100%;
    height: 48px;
    background: #E6EBED;
    border: 0.5px solid #D8D8D8;
    border-radius: 14px;
    padding: 0 14px;
    font-size: 16px;
    color: #212121;
}

/* دکمه محاسبه */
#rci-calc {
    width: 120px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #00397C;
    color: #fff;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    font-weight: 600;
}

/* آیکون محاسبه */
#rci-calc img {
    width: 24px;
    height: 24px;
}

/* فیلد نتیجه (کوچکتر) */
#rci-result {
    width: 240px;
    height: 48px;
    border-radius: 12px;
    border: 1px solid #ddd;
    padding: 0 12px;
    font-size: 16px;
    color: #555;
}

/* پیام خطا */
.rci-error {
    color: red;
    font-size: 14px;
    margin-top: 8px;
}

/* فقط روی دراپ‌دان ما */
.rci-select + .select2 {
    width: 100% !important;
    height: 48px !important;
    font-size: 16px;
}
/* وقتی Select2 لود میشه، کمی استایل هماهنگ می‌کنیم */
.rci-select + .select2 .select2-selection {
    height: 48px !important;
    display: flex;
    align-items: center;
    background: #E6EBED;
    border-radius: 12px;
    border: 1px solid #ccc;
    padding: 0 12px;
}

.rci-select + .select2 .select2-selection__rendered {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ریسپانسیو موبایل */
@media (max-width: 900px) {
    .rci-form {
        flex-wrap: wrap;
        gap: 16px;
    }

    .rci-field {
        width: 100%;
        max-width: 480px;
    }

    .rci-btn {
        flex-basis: calc(50% - 12px);
        width: auto;
    }
}
.select2-results__option img,
.select2-selection__rendered img {
    display: inline-block !important;
    width: 24px !important;
    height: 24px !important;
}
/* اطمینان از نمایش تصویر در selection (کادر بسته) */
.rci-widget .select2-container--default .select2-selection--single .select2-selection__rendered {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 8px !important;
}

/* گزینه‌های dropdown */
.rci-widget .select2-dropdown .select2-results__option {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
}

/* اندازه و رفتار تصویر */
.rci-widget .select2-container--default .select2-selection__rendered img,
.rci-widget .select2-dropdown .select2-results__option img {
    width: 24px !important;
    height: 24px !important;
    object-fit: contain !important;
    display: inline-block !important;
}
/* تغییر فقط در موبایل */
@media (max-width: 768px) {
  .rci-buttons {
    flex-direction: column;   /* دکمه‌ها زیر هم */
    gap: 12px;                /* فاصله بین دکمه‌ها */
    align-items: stretch;     /* دکمه‌ها تمام عرض */
  }

  .rci-btn {
    flex: unset;              /* محدودیت flex حذف بشه */
    width: 100% !important;   /* تمام عرض */
    height: 64px;             /* ارتفاع کمتر برای موبایل */
    font-size: 16px;          /* متن کمی کوچیک‌تر */
    gap: 8px;                 /* فاصله متن و آیکون */
  }

  .rci-btn img {
    width: 24px;              /* آیکون کوچیک‌تر */
    height: 24px;
  }

  .rci-form {
    flex-direction: column;   /* فیلدها زیر هم */
    align-items: stretch;
    gap: 16px;
  }

  .rci-field,
  .rci-form select,
  .rci-form input,
  .rci-form button,
  #rci-result {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* جلوگیری از دو خطی شدن متن در دکمه‌ها */
.rci-btn span {
    white-space: nowrap;      /* همیشه در یک خط بماند */
    overflow: hidden;         /* متن اضافی مخفی شود */
    text-overflow: ellipsis;  /* سه‌نقطه در صورت نیاز */
    font-size: 15px;          /* کمی کوچک‌تر برای جلوگیری از شکست خط */
}