/* =================================================================== */
/* DASHBOARD.CSS - استایل‌های اختصاصی صفحه داشبورد (نسخه نهایی)       */
/* =================================================================== */

body {
    background-color: var(--color-white-soft);
    min-height: 101vh;
}

/* 1. منوی کناری (Sidebar Menu) */
.nav.flex-column .nav-item {
    border-right: 5px solid var(--color-white-warm);
    transition: border-right-color 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-black-soft);
}

.nav.flex-column .nav-item:has(> .nav-link.active) {
    border-right-color: var(--color-primary);
}
/* خط فیروزه‌ای سمت راست وقتی صفحهٔ مدیریت دلنوشته فعال است (لینک داخل .heartfelt-nav-row است) */
.nav-item-heartfelt:has(.nav-link.active) {
    border-right-color: var(--color-primary);
}
.nav-item-condolence:has(.nav-link.active) {
    border-right-color: var(--color-primary);
}
.nav.flex-column .nav-link {
    display: block;
    padding-right: 0px;
    padding-left: 0;
    border-radius: 0;
    line-height: 1.5;
    box-sizing: border-box;
    transition: color 0.3s ease;
    font-size: 0.75rem !important;
    text-align: start;
    color: inherit;
}

.nav.flex-column .nav-link:hover,
.nav.flex-column .nav-link.active {
    color: var(--color-primary-hover);
}

.custom-tomb-icon {
    padding-right: 10px;
    padding-left: 10px;
}

/* ==================================
   جدید: مدیریت آیکون‌های فعال/عادی منو (حفظ چیدمان)
   ================================== */

/* ۱. در حالت عادی، آیکون "فعال" (توپُر) را مخفی کن */
.nav-link .icon-active {
  display: none;
}

/* ۲. در حالت عادی، آیکون "نرمال" (توخالی) را نمایش بده
   (چون .custom-tomb-icon است، padding-right: 10px خود را دارد) */
.nav-link .icon-normal {
  display: inline-block;
}

/* ۳. زمانی که لینک "فعال" (active) یا هاور (hover) یا فوکوس (focus) شد: */
.nav-link.active .icon-normal,
.nav-link:hover .icon-normal,
.nav-link:focus .icon-normal {
  /* آیکون "نرمال" (توخالی) را مخفی کن */
  display: none;
}

/* ۴. زمانی که لینک "فعال" (active) یا هاور (hover) یا فوکوس (focus) شد: */
.nav-link.active .icon-active,
.nav-link:hover .icon-active,
.nav-link:focus .icon-active {
  /* آیکون "فعال" (توپُر) را نمایش بده
     (این هم چون .custom-tomb-icon است، padding-right: 10px خود را دارد) */
  display: inline-block;
  /* و رنگ آن را با متن هماهنگ کن */
  color: var(--color-primary-hover);
}

/* 2. کادر ثبت‌نام (Registration Box) */
.registration-box {
    border: 1px solid var(--color-gray-mid);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    margin-bottom: 48px;
}

    .custom-registration-t-n {
        display: flex;
        justify-content: start;
        gap: 35px;
    }

.registration-tex {
    font-weight: bold;
    color: var(--color-black-soft);
    margin-bottom: 10px;
}

.registration-number {
    font-weight: bold;
    color: var(--color-black-soft);
}

.registration-message {
    color: var(--color-gray-dark);
    font-size: 0.625rem;
    text-align: center;
    margin-top: 30px;
}

/* کارت خلاصه احراز هویت: فاصله‌های یکنواخت + تراز RTL */
.verification-success-box .custom-registration-t-n {
    width: 100%;
    justify-content: space-between;
    gap: 24px;
}

.verification-success-box .registration-tex,
.verification-success-box .registration-number {
    flex: 1 1 0;
}

.verification-success-box .custom-registration-t-n + .custom-registration-t-n {
    margin-top: 16px !important;
}

.verification-success-box .registration-tex {
    text-align: right;
}

.verification-success-box .registration-number {
    text-align: left;
}

.verification-success-box .registration-message {
    margin-top: 26px;
}

.registration-box.verification-success-box {
  padding-bottom: 0;
}

.verification-edit-actions {
  width: 100%;
  margin-top: 14px;
  margin-bottom: 14px;
  display: flex;
  justify-content: center;
}

.verification-edit-toggle {
  width: calc((100% - 20px) / 3);
  min-width: 0;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-navy-deep);
  border-radius: 4px;
  padding: 6px 2px;
  font-size: 0.75rem;
}

.verification-edit-toggle:hover,
.verification-edit-toggle:focus,
.verification-edit-toggle:active {
  background-color: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
  color: var(--color-navy-deep) !important;
  box-shadow: none;
}

.verification-edit-area {
  width: 100%;
  margin-top: 30px;
  margin-bottom: 30px;
  padding-top: 0;
  text-align: right;
}

.verification-edit-title {
  text-align: center;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-black-soft);
  margin-top: 10px;
  margin-bottom: 22px;
}

.verification-edit-row + .verification-edit-row {
  margin-top: 12px;
}

.verification-edit-label {
  display: block;
  font-size: 0.75rem;
  margin-bottom: 6px;
  color: var(--color-black-soft);
}

.verification-edit-input {
  font-size: 0.875rem;
}

.verification-otp-message {
  font-size: 0.7rem;
  color: var(--color-gray-dark);
  margin-bottom: 6px;
}

.verification-edit-buttons {
  margin-top: 30px;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: stretch;
  justify-content: flex-start;
}

.verification-edit-actions-row {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
}

/* در حالت ویرایش: ارتفاع کارت فقط به اندازه محتوا + فاصله 20px بالا/پایین */
.registration-box.verification-success-box.is-editing {
  padding-top: 20px;
  padding-bottom: 20px;
}

.registration-box.verification-success-box.is-editing .verification-edit-area {
  margin-top: 0;
  margin-bottom: 0;
}

.registration-box.verification-success-box.is-editing .verification-edit-buttons {
  margin-top: 30px;
  margin-bottom: 10px;
}

/* دکمه‌های پایین فرم: هم‌استایل دکمه‌های هدر (پس‌زمینه سفید، فونت 12px) */
#verification-resend-otp,
#verification-cancel,
#verification-cancel-otp {
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 2px;
  font-size: 0.75rem;
  border-radius: 4px;
  white-space: nowrap;
  color: var(--color-black-soft);
  background-color: #fff;
  border: 1px solid var(--color-navy-deep);
  text-decoration: none;
}

#verification-save,
#verification-confirm-otp {
  flex: 1 1 0;
  min-width: 0;
  padding: 6px 2px;
  font-size: 0.75rem;
  border-radius: 4px;
  white-space: nowrap;
  color: var(--color-navy-deep);
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
  text-decoration: none;
}

#verification-resend-otp:hover,
#verification-resend-otp:focus,
#verification-resend-otp:active,
#verification-cancel:hover,
#verification-cancel:focus,
#verification-cancel:active,
#verification-cancel-otp:hover,
#verification-cancel-otp:focus,
#verification-cancel-otp:active {
  border-color: var(--color-gray-mid);
  background-color: var(--color-gray-mid);
  color: var(--color-black-soft);
  box-shadow: none;
}

#verification-save:hover,
#verification-save:focus,
#verification-save:active,
#verification-confirm-otp:hover,
#verification-confirm-otp:focus,
#verification-confirm-otp:active {
  background-color: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
  color: var(--color-navy-deep) !important;
  box-shadow: none;
}

.verification-edit-error {
  color: #b42318;
  font-size: 0.75rem;
  margin-bottom: 10px;
}

/* 3 ساختار احراز هویت */
.authentication-box {
    border: 1px solid var(--color-gray-mid);
    border-radius: 8px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start; 
    margin-bottom: 100px;
}

.authentication-title {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 30px;
}

.authentication-content {
    display: flex;
    flex-direction: column;
    align-items: start;
}

.static-form-section {
    display: flex;
    flex-direction: column;
}

.authentication-header {
    font-size: 0.75rem;
    text-align: justify;
    margin-bottom: 30px;
    line-height: 1.8;
}

.attention1,
.attention2 {
    font-size: 0.75rem;
    margin-bottom: 5px;
}

.attention3,
.attention4 {
    font-size: .625rem;
    margin-bottom: 5px;
}

.authentication-select1,
.authentication-select2 {
    font-size: 0.75rem;
    margin-bottom: 30px;
    padding: 8px 12px;
    border-color: var(--color-gray-mid);
}

/* حفظ فاصله‌ای برابر با فاصله label کد ملی تا دراپ‌دان ملیت */
#name-input-wrapper {
    margin-top: 25px;
}

.authentication-select1:focus,
.authentication-select2:focus {
    box-shadow: none;
    border-color: var(--color-primary);
}

.submit-button-wrapper {
    width: 100%;
    display: flex;
    justify-content: center; 
    padding: 47px 30px 0 30px;
    height: 88px;
}

.submit-button-wrapper .btn {
    width: 75%;
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-navy-deep);
}

.authentication-box .form-control {
    padding: 5px 12px;
}

.authentication-box .form-control::placeholder {
    font-size: 0.75rem;
    color: var(--color-gray-mid); 
    opacity: 1; 
}

.submit-button-wrapper .btn:hover {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
}

.is-hidden {
    display: none;
}
/* 4. دکمه خروج (Logout Button) - ساختار نهایی */
.dashboard-house-icon {
    padding-left: 15px;
    font-size: 14px;
}

.logout-menu-item {
    font-size: 0.75rem;
    color: var(--color-black-soft);
    border: 1px solid var(--color-primary);
    background-color: var(--color-primary);
    border-radius: 4px;
    padding: 6px 12px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.logout-menu-item:hover,
.logout-menu-item:active {
    background-color: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
}

.logout-button-wrapper {
    display: flex;
    justify-content: end;
    margin-bottom: 20px;
}


/* 5. فوتر (Footer) */
#page-footer {
    background-color: var(--color-white-aqua);
    height: 45px;
    font-size: 0.75rem;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0 1rem;
    flex-shrink: 0;
}

#page-footer .enamad-gallery {
    display: flex;
    align-items: center;
}

#page-footer .enamad-gallery img {
    height: 35px;
    width: auto;
    object-fit: contain;
}

#page-footer .footer-text {
    text-align: center;
    flex-grow: 1;
    font-size: 0.6rem;
    color: var(--color-gray-mid);
    line-height: 1.5;
}

/* 6. پیام هشدار سفارشی (Custom Alert Toast) */
.dashboard-alert-toast {
    position: fixed;
    /* برای قرارگیری در وسط صفحه */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    background-color: var(--color-black-soft, #333); /* استفاده از متغیرهای شما با یک فال‌بک */
    color: var(--color-white, #fff);
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 1060; /* بالاتر از اکثر المان‌ها */
    
    /* انیمیشن محو شدن */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    
    text-align: center;
    font-size: 0.875rem; /* کمی بزرگتر از متن‌های عادی برای خوانایی */
}

/* کلاسی که برای نمایش اضافه می‌شود */
.dashboard-alert-toast.show {
    opacity: 1;
    visibility: visible;
}

/* 7. استایل‌های ریسپانسیو (Responsive) */
@media (min-width: 576px) and (max-width: 767.98px) {
    .registration-box,
    .authentication-box {
        width: 350px;
        padding: 20px;
    }

    .custom-registration-t-n {
        display: flex;
        justify-content: center;
        gap: 35px;
    }

    .registration-tex {
        margin-bottom: 0;
    }
}

@media (min-width: 768px) {
    .registration-box,
    .authentication-box {
        width: 470px;
        padding: 47px 20px;
    }

    .custom-registration-t-n {
        display: flex;
        justify-content: center;
        gap: 50px;
    }

    .registration-tex {
        font-size: 1.25rem;
        margin-bottom: 0;
    }

    .registration-number {
        font-size: 1.25rem;
    }

    .registration-message {
        font-size: 0.75rem;
    }

    .authentication-title {
    font-size: 1.25rem;
}
}

/* ========== Responsive account menu (≤ 991.98px) ========== */
@media (max-width: 991.98px) {

  /* The mobile menu is fixed; reserve content space with CSS instead of an item inside <ul>. */
  .mobile-menu-spacer {
    display: none !important;
  }

  main .custom-col-managment ~ .col-12 {
    padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  }

  main .custom-col-managment {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    width: 100%;
    min-height: calc(78px + env(safe-area-inset-bottom, 0px));
    height: auto;
    z-index: 1040;
    padding: 0 0 env(safe-area-inset-bottom, 0px) !important;
    background: var(--color-white-soft);
    border-top: 1px solid var(--color-white-warm);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.06);
  }

  main .custom-col-managment > ul.nav.flex-column {
    direction: rtl;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0;
    width: 100%;
    height: 78px;
    margin: 0 !important;
    padding: 0 8px !important;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }

  main .custom-col-managment > ul.nav.flex-column::-webkit-scrollbar {
    display: none;
  }

  main .custom-col-managment .nav.flex-column .nav-item {
    flex: 0 0 96px;
    min-width: 96px;
    max-width: 112px;
    background: transparent;
    border-right: 0 !important;
    border-top: 3px solid var(--color-white-warm);
    display: flex;
    justify-content: center;
    align-items: stretch;
    position: relative;
    transition: background-color 0.2s ease, border-top-color 0.2s ease, color 0.2s ease;
    cursor: pointer;
    scroll-snap-align: center;
  }

  main .custom-col-managment .nav.flex-column .nav-item-heartfelt,
  main .custom-col-managment .nav.flex-column .nav-item-condolence,
  main .custom-col-managment .nav.flex-column .nav-item:has(.fa-message),
  main .custom-col-managment .nav.flex-column .nav-item:has(.fa-receipt) {
    flex-basis: 108px;
    min-width: 108px;
  }

  main .custom-col-managment .nav.flex-column .nav-item:has(.nav-link.active) {
    border-top-color: var(--color-primary-hover);
    background-color: var(--color-white-aqua);
  }

  main .custom-col-managment .nav.flex-column .nav-item:hover {
    border-top-color: var(--color-primary-hover);
    background-color: var(--color-white-soft);
  }

  main .custom-col-managment .heartfelt-nav-row {
    width: 100%;
    height: 100%;
    gap: 0 !important;
    justify-content: center;
    align-items: stretch !important;
  }

  main .custom-col-managment .heartfelt-chevron-btn,
  main .custom-col-managment .heartfelt-filters-collapse {
    display: none !important;
  }

  main .custom-col-managment .nav.flex-column .nav-link,
  main .custom-col-managment .heartfelt-nav-row .nav-link {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
    height: 100%;
    min-width: 0;
    padding: 0 4px !important;
    text-align: center;
    white-space: normal;
    line-height: 1.35;
    font-size: 0.62rem !important;
    color: var(--color-gray-dark);
    transition: color 0.2s ease;
  }

  main .custom-col-managment .custom-tomb-icon {
    padding: 0 !important;
    margin: 0 0 5px 0 !important;
    font-size: 1.25rem;
    line-height: 1;
    transition: color 0.2s ease;
  }

  main .custom-col-managment .nav-link .icon-normal {
    display: block !important;
  }

  main .custom-col-managment .nav-link .icon-active {
    display: none !important;
  }

  main .custom-col-managment .nav-item:has(.nav-link.active) .icon-normal,
  main .custom-col-managment .nav-item:hover .icon-normal {
    display: none !important;
  }

  main .custom-col-managment .nav-item:has(.nav-link.active) .icon-active,
  main .custom-col-managment .nav-item:hover .icon-active {
    display: block !important;
  }

  main .custom-col-managment .nav.flex-column .nav-link.active,
  main .custom-col-managment .nav.flex-column .nav-item:hover .nav-link,
  main .custom-col-managment .nav.flex-column .nav-item:hover .custom-tomb-icon {
    color: var(--color-primary-hover) !important;
  }
}

/* Center main column content only on pages that contain profile boxes */
main .col-12.col-lg-9:has(.registration-box),
main .col-12.col-lg-9:has(.authentication-box) {
  display: flex;
  flex-direction: column;
  align-items: center;        /* افقی وسط‌چین */
}

/* اطمینان از مرکز شدن خود باکس‌ها حتی اگر والد فلکس نباشد */
.registration-box,
.authentication-box {
  margin-inline: auto;        /* معادل auto برای راست/چپ در RTL/LTR */
}

/* ===== Auth Required Modal ===== */
#authRequiredModal .modal-content {
  border-radius: 12px;
  border: 1px solid var(--color-white-warm);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
#authRequiredModal .modal-title {
  font-size: 1rem;
  color: var(--color-black-soft);
}
#authRequiredModal .modal-body {
  font-size: 0.875rem;
  color: var(--color-gray-dark);
}

/* دکمه‌ها: هر کدام 48% عرض، مطابق گاید رنگی شما */
#authRequiredModal .modal-footer {
  display: flex;
  gap: 4%;
  padding-top: 0;
}
#authRequiredModal .modal-footer .btn {
  width: 48%;
  height: 40px;
  font-size: 0.875rem;
  border-radius: 8px;
  box-shadow: none;
}

/* انجام می‌دهم = primary با hover/focus روی primary-hover */
#authRequiredModal #authModalConfirmBtn {
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
  color: var(--color-navy-deep);
}
#authRequiredModal #authModalConfirmBtn:hover,
#authRequiredModal #authModalConfirmBtn:active,
#authRequiredModal #authModalConfirmBtn:focus {
  background-color: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
  color: var(--color-navy-deep);
  box-shadow: none;
}

/* بعداً انجام می‌دهم = بدون بک‌گراند؛ در hover/focus کادر و متن به primary-hover */
#authRequiredModal #authModalLaterBtn {
  background-color: transparent;
  border: 1px solid transparent;
  color: var(--color-black-soft);
}
#authRequiredModal #authModalLaterBtn:hover,
#authRequiredModal #authModalLaterBtn:active,
#authRequiredModal #authModalLaterBtn:focus {
  background-color: transparent;
  border-color: var(--color-primary-hover);
  color: var(--color-primary-hover);
  box-shadow: none;
}

/* Auth modal look & feel to match favorites delete modal */
#authGateModal .modal-content {
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
#authGateModal .modal-header,
#authGateModal .modal-footer {
  border: 0 !important; /* مثل confirmRemoveModal */
}

/* دکمه‌ها کنار هم با عرض برابر (48%) */
#authGateModal .modal-footer {
  display: flex;
}
#authGateModal .modal-footer .btn {
  width: 48%;
  height: 40px;
  font-size: 0.875rem;
  border-radius: 8px;
  box-shadow: none;
}

#authGateModal #authGateDoBtn.btn-primary {
    background-color: var(--color-primary);
    border: 1px solid var(--color-primary);
    color: var(--color-navy-deep);
}

/* ظاهر رنگ‌ها: primary برای انجام، secondary برای بعداً */
#authGateModal #authGateDoBtn.btn-primary:hover,
#authGateModal #authGateDoBtn.btn-primary:active,
#authGateModal #authGateDoBtn.btn-primary:focus {
  background-color: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
}
#authGateModal #authGateLaterBtn.btn-secondary:focus {
  box-shadow: none;
}

/* منوی بازشونده مدیریت دلنوشته — فلش + دو فیلتر با چک‌باکس مربعی */
.nav-item-heartfelt {
  flex-direction: column;
  align-items: stretch;
}
.nav-item-heartfelt .heartfelt-nav-row {
  width: 100%;
  gap: 30px !important; /* فاصله بین متن منو و فلش (با d-flex در HTML) */
  flex-wrap: nowrap;
  align-items: center;
}
.nav-item-heartfelt .heartfelt-nav-row .nav-link {
  flex: 1 1 0;
  min-width: 0;
  padding-inline-start: 0 !important;
}
/* فلش مثل index (آکاردئون خدمات خاکسپاری): همان ::after با SVG و اندازه 1rem */
.nav-item-heartfelt .heartfelt-chevron-btn {
  color: var(--color-gray-dark);
  text-decoration: none;
  min-width: auto;
  padding: 0.5rem 0 !important;
  margin: 0;
  margin-inline-end: 30px; /* فاصله ۳۰px از سمت چپ در RTL */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.nav-item-heartfelt .heartfelt-chevron-btn::after {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-inline-start: 2px;
  background-image: none;
  mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  background-color: var(--color-gray-dark) !important;
  transition: transform 0.2s ease-in-out;
}
.nav-item-heartfelt .heartfelt-chevron-btn:hover::after,
.nav-item-heartfelt .heartfelt-chevron-btn[aria-expanded="true"]::after {
  background-color: var(--color-gray-dark) !important;
}
.nav-item-heartfelt .heartfelt-chevron-btn[aria-expanded="true"]::after {
  transform: rotate(180deg);
}
.nav-item-heartfelt .heartfelt-chevron-btn.chevron-disabled {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}
/* تراز ابتدای مربع چک‌باکس با «م» مدیریت: پدینگ راست آیکون (10px) + عرض آیکون (0.75rem) + پدینگ چپ آیکون (10px) */
.nav-item-heartfelt .heartfelt-filters-collapse {
  width: 100%;
  padding-right: calc(20px + 0.75rem);
  padding-left: 0;
  padding-bottom: 0.5rem;
  box-sizing: border-box;
}
.nav-item-heartfelt .heartfelt-filter-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  padding-right: 0;
  padding-left: 0;
  margin-right: 0;
  margin-left: 0;
  font-size: 0.75rem;
  color: var(--color-black-soft);
  direction: rtl;
}
.nav-item-heartfelt .heartfelt-filter-option .form-check-input {
  position: relative;
  z-index: 1;
  width: 1rem;
  height: 1rem;
  margin: 0;
  border-radius: 2px;
  border-color: var(--color-gray-mid);
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: none;
  outline: none;
}
.nav-item-heartfelt .heartfelt-filter-option .form-check-input:checked {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}
.nav-item-heartfelt .heartfelt-filter-option .form-check-input:focus,
.nav-item-heartfelt .heartfelt-filter-option .form-check-input:active {
  box-shadow: none !important;
  outline: none !important;
}
/* سایهٔ دایره‌ای دور چک‌باکس — با کلاس heartfelt-ring-active (هر کلیک از JS اضافه می‌شود) */
.nav-item-heartfelt .heartfelt-filter-option {
  position: relative;
}
.nav-item-heartfelt .heartfelt-filter-option::before {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: rgba(80, 184, 176, 0.35);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
.nav-item-heartfelt .heartfelt-filter-option.heartfelt-ring-active::before {
  opacity: 1;
  animation: heartfelt-checkbox-ring 1s ease-out forwards;
}
@keyframes heartfelt-checkbox-ring {
  0% {
    opacity: 1;
    transform: translateY(-50%) scale(1);
  }
  50% {
    opacity: 0.6;
    transform: translateY(-50%) scale(1.15);
  }
  100% {
    opacity: 0;
    transform: translateY(-50%) scale(1.2);
  }
}
.nav-item-heartfelt .heartfelt-filter-option .form-check-label {
  cursor: pointer;
}

/* منوی مدیریت پیام های تسلیت — همان ظاهر و رفتار مدیریت دلنوشته */
.nav-item-condolence {
  flex-direction: column;
  align-items: stretch;
}
.nav-item-condolence .heartfelt-nav-row {
  width: 100%;
  gap: 30px !important;
  flex-wrap: nowrap;
  align-items: center;
}
.nav-item-condolence .heartfelt-nav-row .nav-link {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  padding-inline-start: 0 !important;
}
.nav-item-condolence .heartfelt-chevron-btn {
  color: var(--color-gray-dark);
  text-decoration: none;
  min-width: auto;
  padding: 0.5rem 0 !important;
  margin: 0;
  margin-inline-end: 30px; /* فاصله ۳۰px از سمت چپ در RTL */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
}
.nav-item-condolence .heartfelt-chevron-btn::after {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-inline-start: 2px;
  background-image: none;
  mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='currentColor'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  background-color: var(--color-gray-dark) !important;
  transition: transform 0.2s ease-in-out;
}
.nav-item-condolence .heartfelt-chevron-btn:hover::after,
.nav-item-condolence .heartfelt-chevron-btn[aria-expanded="true"]::after {
  background-color: var(--color-gray-dark) !important;
}
.nav-item-condolence .heartfelt-chevron-btn[aria-expanded="true"]::after {
  transform: rotate(180deg);
}
.nav-item-condolence .heartfelt-chevron-btn.chevron-disabled {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}
.nav-item-condolence .heartfelt-filters-collapse {
  width: 100%;
  padding-right: calc(20px + 0.75rem);
  padding-left: 0;
  padding-bottom: 0.5rem;
  box-sizing: border-box;
}
.nav-item-condolence .heartfelt-filter-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0;
  padding-right: 0;
  padding-left: 0;
  margin-right: 0;
  margin-left: 0;
  font-size: 0.75rem;
  color: var(--color-black-soft);
  direction: rtl;
}
.nav-item-condolence .heartfelt-filter-option .form-check-input {
  position: relative;
  z-index: 1;
  width: 1rem;
  height: 1rem;
  margin: 0;
  border-radius: 2px;
  border-color: var(--color-gray-mid);
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: none;
  outline: none;
}
.nav-item-condolence .heartfelt-filter-option .form-check-input:checked {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}
.nav-item-condolence .heartfelt-filter-option .form-check-input:focus,
.nav-item-condolence .heartfelt-filter-option .form-check-input:active {
  box-shadow: none !important;
  outline: none !important;
}
.nav-item-condolence .heartfelt-filter-option {
  position: relative;
}
.nav-item-condolence .heartfelt-filter-option::before {
  content: '';
  position: absolute;
  right: -6px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: rgba(80, 184, 176, 0.35);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
.nav-item-condolence .heartfelt-filter-option.heartfelt-ring-active::before {
  opacity: 1;
  animation: heartfelt-checkbox-ring 1s ease-out forwards;
}
.nav-item-condolence .heartfelt-filter-option .form-check-label {
  cursor: pointer;
}

/* تب‌های افقی صفحه مدیریت دلنوشته — مثل مدیریت خدمات ترحیم */
#managementHeartfeltTab.nav-tabs {
  border-bottom: 1px solid var(--color-gray-mid);
  margin-bottom: 56px;
}
#managementHeartfeltTab .nav-item {
  flex-grow: 1;
}
#managementHeartfeltTab.nav-tabs .nav-link {
  border: none;
  color: var(--color-navy-deep);
  text-align: center;
  transition: color 0.3s ease;
}
#managementHeartfeltTab.nav-tabs .nav-link:focus {
  box-shadow: none;
}
#managementHeartfeltTab.nav-tabs .nav-link.active {
  background-color: transparent;
  color: var(--color-primary-hover);
  border-bottom: 3px solid var(--color-primary-hover);
  margin-bottom: -1px;
}
#managementHeartfeltTab.nav-tabs .nav-link:not(.active):hover {
  color: var(--color-primary-hover);
}

/* تب‌های افقی صفحه مدیریت پیام های تسلیت — همان استایل مدیریت دلنوشته */
#managementCondolenceTab.nav-tabs {
  border-bottom: 1px solid var(--color-gray-mid);
  margin-bottom: 56px;
}
#managementCondolenceTab .nav-item {
  flex-grow: 1;
}
#managementCondolenceTab.nav-tabs .nav-link {
  border: none;
  color: var(--color-navy-deep);
  text-align: center;
  transition: color 0.3s ease;
}
#managementCondolenceTab.nav-tabs .nav-link:focus {
  box-shadow: none;
}
#managementCondolenceTab.nav-tabs .nav-link.active {
  background-color: transparent;
  color: var(--color-primary-hover);
  border-bottom: 3px solid var(--color-primary-hover);
  margin-bottom: -1px;
}
#managementCondolenceTab.nav-tabs .nav-link:not(.active):hover {
  color: var(--color-primary-hover);
}

/* مدال مشاهده دلنوشته — دو دکمه فیروزه‌ای (ویرایش) و سفید (حذف) مثل مدال انتخاب شهر */
#viewHeartfeltModal .modal-body {
  text-align: justify;
  padding: 1rem !important;
  border-left: 1rem solid transparent;
  border-right: 1rem solid transparent;
}
#viewHeartfeltModal .modal-footer {
  padding: 1rem;
  border: 0 !important;
}
#viewHeartfeltModal .modal-footer .custom-btn-modal1,
#viewHeartfeltModal .modal-footer .custom-btn-modal2 {
  height: 40px;
  font-size: 0.875rem;
  border-radius: 8px;
}

/* مدال دلنوشته های دریافتی: متن کامل، دکمه ثبت (راست) و حذف (چپ) */
#viewHeartfeltReceivedModal .modal-body {
  text-align: justify;
  padding: 1rem !important;
  padding-bottom: 2rem !important;
  border-left: 1rem solid transparent;
  border-right: 1rem solid transparent;
}
/* مدال پیام تسلیت دریافتی: نام در بالای کادر */
#viewHeartfeltReceivedModal .received-condolence-modal-name {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-navy-deep, #333);
  margin-bottom: 0.75rem;
}
#viewHeartfeltReceivedModal .received-condolence-modal-text {
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* پیش‌نمایش پیام تسلیت نوع ۱ در مدال — هم‌سبک biography.html (condolence-mesege-type1) */
#viewHeartfeltReceivedModal .modal-condolence-received-preview.condolence-mesege-type1,
#viewHeartfeltModal .modal-condolence-received-preview.condolence-mesege-type1 {
  padding: 0;
  margin-top: 0;
  width: 100%;
  border: none;
  border-radius: 0;
}
#viewHeartfeltReceivedModal .modal-condolence-received-preview .title-condolence-mesage,
#viewHeartfeltModal .modal-condolence-received-preview .title-condolence-mesage {
  margin-top: 0;
  color: var(--color-black-soft);
  font-weight: bold;
  text-align: center;
}
#viewHeartfeltReceivedModal .modal-condolence-received-preview .name-recipient-condolence,
#viewHeartfeltModal .modal-condolence-received-preview .name-recipient-condolence {
  font-size: 0.875rem;
  margin-top: 20px;
  text-align: center;
  color: var(--color-primary-hover);
}
#viewHeartfeltReceivedModal .modal-condolence-received-preview .text-condolence-message,
#viewHeartfeltModal .modal-condolence-received-preview .text-condolence-message {
  margin-top: 20px;
  color: var(--color-black-soft);
  text-align: justify;
  font-size: 0.875rem;
}
#viewHeartfeltReceivedModal .modal-condolence-received-preview .name-giving-condolence,
#viewHeartfeltModal .modal-condolence-received-preview .name-giving-condolence {
  font-size: 0.875rem;
  margin-top: 20px;
  text-align: start;
  color: var(--color-primary-hover);
  margin-bottom: 10px;
}
#viewHeartfeltModal .modal-body:has(.modal-condolence-received-preview) {
  padding-bottom: 2rem !important;
}
/* مدال دلنوشته دریافتی: نام در بالای کادر */
#viewHeartfeltReceivedModal .received-heartfelt-modal-name {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-navy-deep, #333);
  margin-bottom: 0.75rem;
}
#viewHeartfeltReceivedModal .received-heartfelt-modal-text {
  white-space: pre-wrap;
  word-wrap: break-word;
}
#viewHeartfeltReceivedModal .modal-footer {
  padding: 1rem;
  border: 0 !important;
}
#viewHeartfeltReceivedModal .modal-footer .custom-btn-modal1,
#viewHeartfeltReceivedModal .modal-footer .custom-btn-modal2 {
  height: 40px;
  font-size: 0.875rem;
  border-radius: 8px;
}

/* حالت ویرایش: فضای نوشتن دلنوشته مثل صفحه heartfelt.html */
#viewHeartfeltModal .modal-body.view-heartfelt-edit {
  text-align: right;
}
#viewHeartfeltModal .heartfelt-card.view-heartfelt-form {
  width: 100%;
  background-color: transparent;
  border-radius: 8px;
  padding-block: 20px 16px;
  padding-inline: 1rem;
  margin: 0;
}
#viewHeartfeltModal .heartfelt-card .heartfelt-label {
  display: block;
  margin-bottom: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-gray-dark);
}
#viewHeartfeltModal .heartfelt-card .heartfelt-input {
  width: 100%;
  box-sizing: border-box;
  text-align: right;
  border-radius: 8px;
  height: 44px;
}
#viewHeartfeltModal .heartfelt-card .heartfelt-input::placeholder {
  color: var(--color-gray-mid);
  font-size: 0.8rem;
}
#viewHeartfeltModal .heartfelt-card .heartfelt-textarea {
  border-radius: 14px;
  min-height: 120px;
  resize: none;
  text-align: right;
}
#viewHeartfeltModal .heartfelt-card .heartfelt-textarea::placeholder {
  color: var(--color-gray-mid);
  font-size: 0.8rem;
}

/* Verification success card tuning */
.verification-success-box .registration-tex,
.verification-success-box .registration-number,
.verification-success-box .registration-message {
  font-size: 80%;
}

/* Swap text alignment between the two columns in this card */
.verification-success-box .registration-tex {
  text-align: left;
}

.verification-success-box .registration-number {
  text-align: right;
}