/* =====================================================================
   Beneficiary V2 — "My Family" screen
   Built on UX4G design tokens (public/css/UX4G/variables.css).
   Dedicated stylesheet; existing Beneficiary styles untouched.
   All classes prefixed benv2_ to avoid collisions.
   Layout & styling tuned to match the PT Website 2.0 Figma reference.
   ===================================================================== */

.benv2_wrapper {
  background-color: var(--ux4g-color-neutral-100, #f5f5f5);
  min-height: 100vh;
  padding: var(--ux4g-space-9, 32px);
  font-family: inherit;
  color: var(--ux4g-color-neutral-900, #171717);
}

.benv2_container {
  max-width: 1180px;
  margin: 0 auto;
}

/* ---------------------------------------------------------------------
   Welcome banner
   --------------------------------------------------------------------- */
.benv2_banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ux4g-space-7, 20px);
  background: linear-gradient(135deg, #f3f8ff 0%, #fdfbff 55%, #ffffff 100%);
  border: 1px solid var(--ux4g-color-neutral-200, #e5e5e5);
  border-radius: 20px;
  padding: var(--ux4g-space-9, 32px) var(--ux4g-space-10, 40px);
  margin-bottom: var(--ux4g-space-9, 32px);
  box-shadow: 0 1px 2px rgba(38, 97, 224, 0.05);
  overflow: hidden;
}

.benv2_banner_text {
  min-width: 0;
  z-index: 1;
}

.benv2_welcome_chip {
  gap: var(--ux4g-space-2, 4px);
  background-color: var(--ux4g-color-primary-100-changed);
  color: var(--ux4g-color-primary-600-changed);
  padding: 2px 8px;
  margin-bottom: var(--ux4g-space-5, 12px);
  border-radius: 999px;
}

.benv2_banner_title {
  color: var(--ux4g-color-neutral-900, #171717);
}

.benv2_banner_sub {
  color: var(--ux4g-color-neutral-700, #404040);
}

/* illustration sits inside a soft circular blob */
.benv2_banner_art {
  position: relative;
  flex: none;
  width: 170px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.benv2_banner_art::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 45%, #eaf2ff 0%, #f3f0ff 70%, transparent 72%);
  z-index: 0;
}

.benv2_banner_art img,
.benv2_banner_art .benv2_img_ph {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* image placeholder look (until real asset is added) */
.benv2_img_ph {
  background: repeating-linear-gradient(45deg, #eef2fb, #eef2fb 8px, #e4eaf6 8px, #e4eaf6 16px);
  color: var(--ux4g-color-neutral-500, #737373);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.65rem;
  text-align: center;
  border-radius: 12px;
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------------------
   Section heading
   --------------------------------------------------------------------- */
.benv2_section_head {
  display: flex;
  align-items: center;
  gap: var(--ux4g-space-4, 8px);
  margin-bottom: var(--ux4g-space-7, 20px);
}

.benv2_section_title {
  color: var(--ux4g-color-neutral-900);
  margin: 0;
}

.benv2_count_chip {
  gap: var(--ux4g-space-2, 4px);
  background-color: var(--ux4g-color-primary-100-changed, #e6efff);
  color: var(--ux4g-color-primary-600-changed, #2661e0);
  padding: 2px 8px;
  border-radius: 999px;
}

/* ---------------------------------------------------------------------
   Layout: members grid (left) + side column (right)
   --------------------------------------------------------------------- */
.benv2_layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: var(--ux4g-space-8, 24px);
  align-items: start;
}

.benv2_members_grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ux4g-space-7, 20px);
}

.bene_no_data_img {
  margin: 0 auto;
}

.beneficiary_no_data_available_wrapper {
  background-color: var(--ux4g-color-neutral-0);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 350px;
}

.benv2_side_col {
  display: flex;
  flex-direction: column;
  gap: var(--ux4g-space-6, 16px);
}

/* ---------------------------------------------------------------------
   Family member card
   --------------------------------------------------------------------- */
.benv2_card {
  position: relative;
  background-color: var(--ux4g-color-neutral-0, #ffffff);
  border: 1px solid var(--ux4g-color-neutral-200, #e5e5e5);
  border-radius: 18px;
  padding: var(--ux4g-space-7, 20px);
  box-shadow: 0 1px 2px rgba(23, 23, 23, 0.04);
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.benv2_card:hover {
  border-color: var(--ux4g-color-primary-600-changed, #acc9ff);
  box-shadow: 0 6px 18px rgba(38, 97, 224, 0.12);
  transform: translateY(-2px);
}

/* Non-interactive card (e.g. pending-approval beneficiary): no pointer, no hover lift. */
.benv2_card.is-static {
  cursor: default;
}

.benv2_card.is-static:hover {
  border-color: var(--ux4g-color-neutral-200, #e5e5e5);
  box-shadow: 0 1px 2px rgba(23, 23, 23, 0.04);
  transform: none;
}

.benv2_card:focus-visible {
  outline: 2px solid var(--ux4g-color-primary-600-changed, #2661e0);
  outline-offset: 2px;
}

.benv2_card_top {
  display: flex;
  align-items: flex-end;
  gap: var(--ux4g-space-5, 12px);
}

.benv2_avatar {
  flex: none;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--ux4g-color-neutral-100, #f5f5f5);
}

.benv2_avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.benv2_avatar .benv2_img_ph {
  border-radius: 50%;
  font-size: 1.4rem;
}

.benv2_member_info {
  flex: 1;
  min-width: 0;
}

.benv2_member_name {
  color: var(--ux4g-color-neutral-900, #171717);
  margin: 0;
}

.benv2_member_age {
  color: var(--ux4g-color-neutral-500, #737373);
  margin: 2px 0 0;
}

/* three-dots menu pinned to top-right corner */
.benv2_menu_wrap {
  position: absolute;
  top: var(--ux4g-space-5, 12px);
  right: var(--ux4g-space-5, 12px);
  z-index: 5;
}

.benv2_card_menu {
  background: transparent;
  border: none;
  color: var(--ux4g-color-neutral-500, #737373);
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  border-radius: 8px;
  font-size: 1rem;
}

.benv2_card_menu:hover,
.benv2_card_menu:focus-visible {
  background-color: var(--ux4g-color-neutral-100, #f5f5f5);
  color: var(--ux4g-color-neutral-900, #171717);
  outline: none;
}

/* three-dots dropdown (Services / Profile) */
.benv2_menu_dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 7;
  min-width: 150px;
  background-color: var(--ux4g-color-neutral-0, #ffffff);
  border: 1px solid var(--ux4g-color-neutral-200, #e5e5e5);
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(23, 23, 23, 0.14);
  padding: var(--ux4g-space-3, 6px);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.benv2_menu_item {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ux4g-color-neutral-900, #171717);
  padding: var(--ux4g-space-4, 8px) var(--ux4g-space-5, 12px);
  border-radius: 8px;
}

.benv2_menu_item:hover,
.benv2_menu_item:focus-visible {
  background-color: var(--ux4g-color-primary-100-changed);
  color: var(--ux4g-color-primary-600-changed, #2661e0);
  outline: none;
}

/* status badge (right of the info block) */
.benv2_badge {
  flex: none;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 8px;
}

.benv2_badge.is-warning {
  background-color: var(--ux4g-color-orange-100, #ffe7bf);
  color: var(--ux4g-color-orange-800, #ad4e00);
}

.benv2_badge.is-error {
  background-color: var(--ux4g-color-red-100, #ffecee);
  color: var(--ux4g-color-red-800, #8a1a16);
}

.benv2_badge.is-success {
  background-color: var(--ux4g-color-green-100, #ddf8d8);
  color: var(--ux4g-color-green-800, #00522c);
}

.benv2_badge.is-neutral {
  background-color: var(--ux4g-color-neutral-100, #f5f5f5);
  color: var(--ux4g-color-neutral-700, #404040);
}

/* activity strip inside the card */
.benv2_activity {
  display: flex;
  align-items: center;
  gap: var(--ux4g-space-5, 12px);
  background-color: var(--ux4g-color-neutral-50, #fafafa);
  border-radius: 14px;
  padding: var(--ux4g-space-5, 12px) var(--ux4g-space-6, 16px);
  margin-top: var(--ux4g-space-6, 16px);
}

.benv2_activity_icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.benv2_activity_icon.tone-blue {
  background-color: var(--ux4g-color-primary-100-changed);
  color: var(--ux4g-color-primary-600-changed, #2661e0);
}

.benv2_activity_icon.tone-green {
  background-color: var(--ux4g-color-green-100, #ddf8d8);
  color: var(--ux4g-color-green-800);
}

.benv2_activity_icon.tone-purple {
  background-color: var(--ux4g-color-tertiary-100, #e9daf3);
  color: var(--ux4g-color-tertiary-600, #8e55b3);
}

.benv2_activity_text {
  flex: 1;
  min-width: 0;
}

.benv2_activity_name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ux4g-color-neutral-900, #171717);
  margin: 0;
}

.benv2_activity_date {
  font-size: 0.74rem;
  color: var(--ux4g-color-neutral-500, #737373);
  margin: 1px 0 0;
}

.benv2_activity_pill {
  flex: none;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
}

.benv2_activity_pill.is-success {
  background-color: var(--ux4g-color-green-100, #ddf8d8);
  color: var(--ux4g-color-green-800, #00522c);
}

.benv2_activity_pill.is-error {
  background-color: var(--ux4g-color-red-100, #ffecee);
  color: var(--ux4g-color-red-800, #8a1a16);
}

.benv2_activity_pill.is-neutral {
  background-color: var(--ux4g-color-neutral-100, #f5f5f5);
  color: var(--ux4g-color-neutral-700, #404040);
}

/* pending-approval note (replaces the activity strip) */
.benv2_pending_note {
  display: flex;
  align-items: center;
  gap: var(--ux4g-space-3, 6px);
  font-size: 0.8rem;
  color: var(--ux4g-color-neutral-700, #404040);
  margin-top: var(--ux4g-space-6, 16px);
}

.benv2_pending_dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--ux4g-color-orange-600, #fa8c16);
  flex: none;
}

/* ---------------------------------------------------------------------
   Add Beneficiary card (dashed)
   --------------------------------------------------------------------- */
.benv2_add_card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ux4g-space-6, 16px);
  background-color: var(--ux4g-color-neutral-0);
  border: 2px dashed var(--ux4g-color-primary-600-changed);
  padding: var(--ux4g-space-5);
}

.benv2_add_head {
  display: flex;
  align-items: center;
  gap: var(--ux4g-space-3, 6px);
  margin-bottom: var(--ux4g-space-4, 8px);
}

.benv2_add_title {
  color: var(--ux4g-color-neutral-900, #171717);
  margin: 0;
}

.benv2_new_chip {
  gap: var(--ux4g-space-2, 4px);
  background-color: var(--ux4g-color-primary-100-changed, #e6efff);
  color: var(--ux4g-color-primary-600-changed, #2661e0);
  padding: 2px 8px;
  border-radius: 999px;
}

.benv2_add_desc {
  color: var(--ux4g-color-neutral-700, #404040);
  margin: 0;
}

.benv2_add_btn {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background-color: var(--ux4g-color-primary-600-changed, #2661e0);
  color: var(--ux4g-color-neutral-0, #ffffff);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(38, 97, 224, 0.3);
  transition: background-color 0.15s ease;
}

.benv2_add_btn:hover,
.benv2_add_btn:focus-visible {
  background-color: var(--ux4g-color-primary-700, #3d239f);
  outline: none;
}

/* ---------------------------------------------------------------------
   Notices
   --------------------------------------------------------------------- */
.benv2_notice {
  display: flex;
  align-items: flex-start;
  gap: var(--ux4g-space-4, 8px);
  border-radius: 14px;
  padding: var(--ux4g-space-5, 12px) var(--ux4g-space-6, 16px);
  font-size: 0.83rem;
  line-height: 1.5;
}

.benv2_notice.is-info {
  background-color: var(--ux4g-color-cyan-100);
  color: var(--ux4g-color-neutral-700);
}

.benv2_notice .benv2_notice_icon {
  color: var(--ux4g-color-cyan-600);
}

.benv2_notice.is-warning {
  background-color: var(--ux4g-color-red-100, #ffecee);
  color: var(--ux4g-color-neutral-700);
}

.benv2_notice.is-warning .benv2_notice_icon {
  flex: none;
  color: var(--ux4g-color-red-600);
}

.benv2_help_link {
  display: inline-block;
  margin-top: var(--ux4g-space-3, 6px);
  color: var(--ux4g-color-primary-600-changed, #2661e0);
  text-decoration: none;
}

.benv2_help_link:hover {
  text-decoration: underline;
}



/* ---------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------- */
@media (max-width: 991px) {
  .benv2_layout {
    grid-template-columns: 1fr;
  }

  .benv2_side_col {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .benv2_side_col>* {
    flex: 1 1 260px;
  }
}

@media (max-width: 680px) {
  .benv2_wrapper {
    padding: var(--ux4g-space-6, 16px);
            padding-bottom: 80px;
  }

  .benv2_members_grid {
    grid-template-columns: 1fr;
  }

  .benv2_side_col {
    flex-direction: column;
  }

  .benv2_banner {
    flex-direction: column-reverse;
    align-items: flex-start;
    text-align: left;
    padding: var(--ux4g-space-8, 24px);
  }

  .benv2_banner_art {
    width: 130px;
    height: 100px;
  }

  .benv2_banner_title {
    font-size: 1.6rem;
  }

  .benv2_add_card {
    flex-direction: row;
  }

      .benv2_side_col>* {
        flex: 1 1 auto;
    }
}

/* =====================================================================
   Beneficiary V2 — "Services" page
   Reuses the tokens/patterns above; benv2_svc_ prefix for new pieces.
   ===================================================================== */

/* breadcrumb */
.benv2_breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--ux4g-space-4, 8px);
  font-size: 0.85rem;
  margin-bottom: var(--ux4g-space-5, 12px);
}

.benv2_crumb {
  display: inline-flex;
  align-items: center;
  gap: var(--ux4g-space-3, 6px);
  color: var(--ux4g-color-neutral-700, #404040);
  text-decoration: none;
  font-weight: 500;
}

.benv2_crumb:hover {
  color: var(--ux4g-color-primary-600-changed, #2661e0);
}

.benv2_crumb_home {
  font-size: 0.8rem;
}

.benv2_crumb.is-current {
  color: var(--ux4g-color-neutral-900, #171717);
  font-weight: 600;
}

.benv2_crumb_sep {
  color: var(--ux4g-color-neutral-300, #d9d9d9);
}

/* page title */
.benv2_page_title {
  color: #00237E;
  margin: 0 0 var(--ux4g-space-7, 20px);
}

/* beneficiary header card */
.benv2_svc_header {
  display: flex;
  align-items: center;
  gap: var(--ux4g-space-6, 16px);
  background-color: var(--ux4g-color-neutral-0, #ffffff);
  border: 1px solid var(--ux4g-color-neutral-200, #e5e5e5);
  border-radius: 18px;
  padding: var(--ux4g-space-6, 16px) var(--ux4g-space-7, 20px);
  box-shadow: 0 1px 2px rgba(23, 23, 23, 0.04);
  margin-bottom: var(--ux4g-space-9, 32px);
}

.benv2_svc_avatar {
  width: 56px;
  height: 56px;
}

.benv2_svc_header_info {
  flex: 1;
  min-width: 0;
}

.benv2_svc_category {
  display: inline-flex;
  align-items: center;
  background-color: var(--ux4g-color-primary-100-changed);
  color: var(--ux4g-color-primary-600-changed, #2661e0);
  padding: 4px 8px;
  border-radius: 999px;
}

/* section header (title + subtitle + count chip) */
.benv2_svc_section_head {
  align-items: flex-start;
  justify-content: space-between;
}

.benv2_svc_section_sub {
  color: var(--ux4g-color-neutral-500, #737373);
  margin-bottom: 0;
}

/* service grid */
.benv2_svc_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ux4g-space-7, 20px);
}

/* service card */
.benv2_svc_card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--ux4g-space-6, 16px);
  border: 1px solid transparent;
  border-radius: 18px;
  padding: var(--ux4g-space-7, 20px);
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}

.benv2_svc_card:hover {
  box-shadow: 0 8px 20px rgba(23, 23, 23, 0.1);
  transform: translateY(-2px);
}

.benv2_svc_card:focus-visible {
  outline: 2px solid var(--ux4g-color-primary-600-changed, #2661e0);
  outline-offset: 2px;
}

/* info (ⓘ) button top-right */
.benv2_svc_info {
  position: absolute;
  top: var(--ux4g-space-6, 16px);
  right: var(--ux4g-space-6, 16px);
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--ux4g-color-primary-600-changed, #2661e0);
  padding: 2px;
  line-height: 1;
  border-radius: 50%;
}

.benv2_svc_info:hover,
.benv2_svc_info:focus-visible {
  opacity: 0.75;
  outline: none;
}

/* card head: icon tile + titles */
.benv2_svc_head {
  display: flex;
  align-items: center;
  gap: var(--ux4g-space-5, 12px);
  padding-right: var(--ux4g-space-8, 24px);
  /* room for info button */
}

.benv2_svc_icon {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 1.25rem;
}

.benv2_svc_title {
  color: var(--ux4g-color-neutral-900, #171717);
  margin: 0;
}

.benv2_svc_subtitle {
  color: var(--ux4g-color-neutral-500, #737373);
  margin: 0 0;
}

/* card footer: stats + chevron */
.benv2_svc_foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ux4g-space-5, 12px);
}

.benv2_svc_stats {
  display: flex;
  align-items: stretch;
  gap: var(--ux4g-space-6, 16px);
  min-width: 0;
}

.benv2_svc_divider {
  width: 1px;
  align-self: stretch;
  background-color: rgba(23, 23, 23, 0.12);
}

.benv2_svc_stat {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.benv2_svc_arrow {
  margin-right: 3px;
  font-size: 0.72rem;
}

.benv2_svc_arrow.up {
  color: var(--ux4g-color-green-800);
}

.benv2_svc_arrow.down {
  color: var(--ux4g-color-red-600, #db372d);
}

.benv2_svc_chevron {
  flex: none;
  font-size: 0.95rem;
}

/* ---------------------------------------------------------------------
   Service card themes (tinted bg + solid icon + themed text/chevron)
   --------------------------------------------------------------------- */
.benv2_svc_card.theme-blue {
  background: linear-gradient(180deg, var(--ux4g-bg-secondary-links-50) 0%, var(--ux4g-color-neutral-0) 100%);
  border: 1px solid var(--ux4g-bg-Colors-Blue-100, #E7F2FF)
}

.benv2_svc_card.theme-blue .benv2_svc_icon {
  background-color: var(--ux4g-color-primary-600-changed, #2661e0);
}

.benv2_svc_card.theme-blue .benv2_svc_stat_value,
.benv2_svc_card.theme-blue .benv2_svc_stat_sub,
.benv2_svc_card.theme-blue .benv2_svc_chevron {
  color: var(--ux4g-color-blue-600);
}

.benv2_svc_card.theme-orange {
  background: linear-gradient(180deg, #FFF7FC 0%, var(--ux4g-color-neutral-0) 100%);
  border: 1px solid var(--ux4g-color-pink-100, #FFECF6)
}

.benv2_svc_card.theme-orange .benv2_svc_icon {
  background-color: #F2A90F;
}

.benv2_svc_card.theme-orange .benv2_svc_stat_value,
.benv2_svc_card.theme-orange .benv2_svc_stat_sub,
.benv2_svc_card.theme-orange .benv2_svc_chevron {
  color: #F2A90F;
}

.benv2_svc_card.theme-purple {
  background: linear-gradient(180deg, #F7ECFE 0%, var(--ux4g-color-neutral-0) 100%);
  border: 1px solid #F7ECFE;
}

.benv2_svc_card.theme-purple .benv2_svc_icon {
  background-color: var(--ux4g-color-tertiary-600);
}

.benv2_svc_card.theme-purple .benv2_svc_stat_value,
.benv2_svc_card.theme-purple .benv2_svc_stat_sub,
.benv2_svc_card.theme-purple .benv2_svc_chevron {
  color: #9254EA;
}

.benv2_svc_card.theme-green {
  background: linear-gradient(180deg, var(--ux4g-color-green-50) 0%, var(--ux4g-color-neutral-0) 100%);
  border: 1px solid var(--ux4g-color-green-100, #DDF8D8)
}

.benv2_svc_card.theme-green .benv2_svc_icon {
  background-color: var(--ux4g-color-green-600);
}

.benv2_svc_card.theme-green .benv2_svc_stat_value,
.benv2_svc_card.theme-green .benv2_svc_stat_sub,
.benv2_svc_card.theme-green .benv2_svc_chevron {
  color: var(--ux4g-color-green-600);
}

.benv2_svc_card.theme-pink {
  background: linear-gradient(180deg, #FFF7FC 0%, var(--ux4g-color-neutral-0) 100%);
  border: 1px solid var(--ux4g-color-pink-100, #FFECF6)
}

.benv2_svc_card.theme-pink .benv2_svc_icon {
  background-color: #DC258D;
}

.benv2_svc_card.theme-pink .benv2_svc_stat_value,
.benv2_svc_card.theme-pink .benv2_svc_stat_sub,
.benv2_svc_card.theme-pink .benv2_svc_chevron {
  color: #DC258D;
}

.benv2_svc_card.theme-lime {
  background: linear-gradient(180deg, #F2FFBF 0%, var(--ux4g-color-neutral-0) 100%);
  border: 1px solid F2FFBF;
}

.benv2_svc_card.theme-lime .benv2_svc_icon {
  background-color: #A0D911;
}

.benv2_svc_card.theme-lime .benv2_svc_stat_value,
.benv2_svc_card.theme-lime .benv2_svc_stat_sub,
.benv2_svc_card.theme-lime .benv2_svc_chevron {
  color: #A0D911;
}

/* ---------------------------------------------------------------------
   Services page — responsive
   --------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .benv2_svc_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .benv2_svc_grid {
    grid-template-columns: 1fr;
  }

  .benv2_svc_header {
    padding: var(--ux4g-space-5, 12px) var(--ux4g-space-6, 16px);
  }
}

/* =====================================================================
   Beneficiary V2 — "Take Home Ration (THR)" detail page
   Reuses tokens/patterns above; benv2_thr_ / benv2_ prefixes.
   ===================================================================== */

/* two-column layout: main (left) + side (right) */
.benv2_thr_layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 50%;
  gap: var(--ux4g-space-8, 24px);
  align-items: start;
}

.benv2_home_visit_layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30%;
  gap: var(--ux4g-space-8, 24px);
  align-items: start;
}

.benv2_thr_main,
.benv2_thr_side {
  display: flex;
  flex-direction: column;
  gap: var(--ux4g-space-7, 20px);
  /* allow the columns to shrink below their content so the horizontally
     scrolling video carousel stays contained instead of widening the grid
     (which was breaking the mobile stack) */
  min-width: 0;
}

/* ---------------- hero card ---------------- */
.benv2_thr_hero {
  position: relative;
  background-color: var(--ux4g-bg-Colors-Blue-100);
  border-radius: 24px;
  padding: var(--ux4g-space-8, 24px);
  overflow: hidden;
}

.benv2_thr_hero_art {
  position: absolute;
  top: var(--ux4g-space-none);
  right: var(--ux4g-space-none);
  /* width: 96px;
  height: 96px; */
}

.benv2_thr_hero_title {
  color: var(--ux4g-color-blue-900);
  max-width: 60%;
}

/* white stat box inside hero */
.benv2_thr_stat_box {
  position: relative;
  background-color: var(--ux4g-color-neutral-0, #ffffff);
  border-radius: 14px;
  padding: var(--ux4g-space-6, 16px) var(--ux4g-space-7, 20px);
  box-shadow: 0 1px 3px rgba(38, 97, 224, 0.08);
}

.benv2_thr_stat {
  display: flex;
  align-items: baseline;
  gap: var(--ux4g-space-3, 6px);
}

.benv2_thr_stat_num {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--ux4g-color-neutral-900, #171717);
  line-height: 1;
}

.benv2_thr_stat_unit {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ux4g-color-neutral-700, #404040);
}

.benv2_thr_stat_label {
  color: var(--ux4g-color-neutral-500, #737373);
  margin: 2px 0 0;
}

.benv2_thr_stat_date {
  position: absolute;
  right: var(--ux4g-space-7, 20px);
  bottom: var(--ux4g-space-6, 16px);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ux4g-color-neutral-700, #404040);
}

/* "Did you receive THR?" row */
.benv2_thr_ask {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--ux4g-space-5, 12px);
  margin-top: var(--ux4g-space-6, 16px);
}

.benv2_thr_ask_label {
  color: var(--ux4g-color-neutral-700, #404040);
}

.benv2_thr_ask_btns {
  display: flex;
  gap: var(--ux4g-space-5, 12px);
}

.benv2_thr_btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ux4g-space-3, 6px);
  min-width: 110px;
  justify-content: center;
  background-color: transparent;
  border: 1px solid var(--ux4g-color-primary-600-changed, #acc9ff);
  padding: var(--ux4g-space-4) var(--ux4g-space-6, 16px);
  color: var(--ux4g-color-primary-600-changed, #2661e0);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.benv2_thr_btn:hover,
.benv2_thr_btn:focus-visible {
  background-color: var(--ux4g-color-primary-100-changed);
  outline: none;
}

.benv2_thr_btn.is-active-yes {
  background-color: var(--ux4g-color-green-600, #128937);
  border-color: var(--ux4g-color-green-600, #128937);
  color: var(--ux4g-color-neutral-0);
}

.benv2_thr_btn.is-active-no {
  background-color: var(--ux4g-color-red-600, #db372d);
  border-color: var(--ux4g-color-red-600, #db372d);
  color: var(--ux4g-color-neutral-0);
}

/* disabled Yes/No (no-data state) */
.benv2_thr_btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  color: var(--ux4g-color-neutral-500, #737373);
  border-color: var(--ux4g-color-neutral-300, #d9d9d9);
}

.benv2_thr_btn:disabled:hover {
  background-color: var(--ux4g-color-neutral-0, #ffffff);
}

/* ---------------- THR/HCM: stat box as a single label | date row ---------------- */
.benv2_thr_stat_box_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ux4g-space-5, 12px);
}

.benv2_thr_stat_date_inline {
  color: var(--ux4g-color-neutral-900, #171717);
  white-space: nowrap;
}

.benv2_thr_stat_date_inline.is-na {
  color: var(--ux4g-color-neutral-900, #171717);
}

/* ---------------- THR/HCM: month accordion ---------------- */
.benv2_thrm_panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--ux4g-space-5, 12px) var(--ux4g-space-7, 20px);
}

.benv2_thrm_group {
  border-bottom: 1px solid var(--ux4g-color-neutral-200, #e5e5e5);
}

.benv2_thrm_group:last-child {
  border-bottom: none;
}

.benv2_thrm_head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ux4g-space-5, 12px);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--ux4g-space-6, 16px) 0;
  text-align: left;
}

.benv2_thrm_month {
  color: var(--ux4g-color-neutral-900, #171717);
}

.benv2_thrm_head_right {
  display: inline-flex;
  align-items: center;
  gap: var(--ux4g-space-5, 12px);
}

.benv2_thrm_count {
  color: var(--ux4g-color-neutral-500);
}

.benv2_thrm_chevron {
  font-size: 0.8rem;
  color: var(--ux4g-color-primary-600-changed, #2661e0);
}

/* entries revealed when a month is open */
.benv2_thrm_entries {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ux4g-space-5, 12px);
  padding-bottom: var(--ux4g-space-6, 16px);
}

.benv2_thrm_entry {
  display: flex;
  align-items: center;
  gap: var(--ux4g-space-5, 12px);
  background-color: var(--ux4g-color-neutral-50, #fafafa);
  border: 1px solid var(--ux4g-color-neutral-200, #e5e5e5);
  border-radius: 12px;
  padding: var(--ux4g-space-5, 12px);
}

.benv2_thrm_entry_text {
  min-width: 0;
}

.benv2_thrm_entry_type {
  color: var(--ux4g-color-neutral-900, #171717);
  margin: 0;
}

.benv2_thrm_entry_dur {
  color: var(--ux4g-color-neutral-700);
  margin: 2px 0 0;
}

/* ---------------- generic white panel ---------------- */
.benv2_panel {
  background-color: var(--ux4g-color-neutral-0, #ffffff);
  border-radius: 16px;
  padding: var(--ux4g-space-7, 20px);
  box-shadow: 0px 6px 16px -4px #0000000A;
}

.benv2_panel_title {
  color: var(--ux4g-color-neutral-900, #171717);
  margin: 0 0 var(--ux4g-space-6, 16px);
}

/* ---------------- collected this month ---------------- */
.benv2_collected_list {
  display: flex;
  flex-direction: column;
  gap: var(--ux4g-space-5, 12px);
}

.benv2_collected_item {
  display: flex;
  align-items: center;
  gap: var(--ux4g-space-5, 12px);
  background-color: var(--ux4g-color-neutral-50, #fafafa);
  border-radius: 14px;
  padding: var(--ux4g-space-5, 12px) var(--ux4g-space-6, 16px);
}

.benv2_date_tile {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background-color: var(--ux4g-color-primary-100-changed);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.benv2_date_day {
  color: var(--ux4g-color-neutral-900);
}

.benv2_date_month {
  color: var(--ux4g-color-blue-600);
  margin-top: 2px;
}

.benv2_collected_text {
  flex: 1;
  min-width: 0;
}

.benv2_collected_title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ux4g-color-neutral-900, #171717);
  margin: 0;
}

.benv2_collected_note {
  font-size: 0.78rem;
  color: var(--ux4g-color-neutral-500, #737373);
  margin: 2px 0 0;
}

.benv2_collected_status {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--ux4g-space-3, 6px);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ux4g-color-green-800);
}

/* ---------------- reminder ---------------- */
.benv2_reminder {
  display: flex;
  align-items: center;
  gap: var(--ux4g-space-6, 16px);
  background-color: var(--ux4g-color-neutral-0, #ffffff);
  border: 1px solid var(--ux4g-color-neutral-200, #e5e5e5);
  border-radius: 18px;
  padding: var(--ux4g-space-7, 20px);
  box-shadow: 0 1px 2px rgba(23, 23, 23, 0.04);
}

.benv2_reminder_icon {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background-color: var(--ux4g-color-primary-100-changed);
  color: var(--ux4g-color-primary-600-changed, #2661e0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}

.benv2_reminder_title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ux4g-color-primary-600-changed, #2661e0);
  margin: 0;
  line-height: 1.3;
}

.benv2_reminder_sub {
  font-size: 0.8rem;
  color: var(--ux4g-color-neutral-500, #737373);
  margin: 4px 0 0;
}

/* ---------------- last 6 months ---------------- */
.benv2_months {
  display: flex;
  justify-content: space-between;
  gap: var(--ux4g-space-4, 8px);
}

.benv2_month {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ux4g-space-3, 6px);
}

.benv2_month_dot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: #ffffff;
}

.benv2_month_dot.state-full {
  background-color: var(--ux4g-color-primary-600-changed, #2661e0);
}

.benv2_month_dot.state-part {
  background: linear-gradient(90deg, var(--ux4g-color-primary-600-changed, #2661e0) 50%, #c9dcff 50%);
}

.benv2_month_dot.state-none {
  background-color: var(--ux4g-color-red-100, #ffecee);
  color: var(--ux4g-color-red-600, #db372d);
}

.benv2_month_dot.state-current {
  background-color: var(--ux4g-color-primary-100-changed);
  color: var(--ux4g-color-primary-600-changed, #2661e0);
  border: 1.5px dashed var(--ux4g-color-primary-600-changed, #2661e0);
}

.benv2_month_label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ux4g-color-neutral-700, #404040);
}

.benv2_months_legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ux4g-space-5, 12px);
  margin-top: var(--ux4g-space-6, 16px);
}

.benv2_legend_item {
  display: inline-flex;
  align-items: center;
  gap: var(--ux4g-space-3, 6px);
  font-size: 0.72rem;
  color: var(--ux4g-color-neutral-700, #404040);
}

.benv2_legend_dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
}

.benv2_legend_dot.state-full {
  background-color: var(--ux4g-color-primary-600-changed, #2661e0);
}

.benv2_legend_dot.state-part {
  background: linear-gradient(90deg, var(--ux4g-color-primary-600-changed, #2661e0) 50%, #c9dcff 50%);
}

.benv2_legend_dot.state-none {
  background-color: var(--ux4g-color-red-600, #db372d);
}

/* ---------------- tips ---------------- */
.benv2_tips_art {
  width: 100%;
  border-radius: 14px;
  margin-bottom: var(--ux4g-space-5);
}

.benv2_tips_title {
  color: var(--ux4g-color-neutral-900, #171717);
  margin: 0;
}

.benv2_tips_sub {
  color: var(--ux4g-color-neutral-500, #737373);
  margin: 4px 0 var(--ux4g-space-5, 12px);
}

/* ---------------- THR page responsive ---------------- */
@media (max-width: 991px) {
  .benv2_thr_layout {
    grid-template-columns: 1fr;
  }

  .benv2_home_visit_layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .benv2_thr_hero_title {
    margin-right: 0;
  }

  .benv2_thr_stat_date {
    position: static;
    display: block;
    margin-top: 4px;
  }

  .benv2_thr_ask {
    flex-direction: column;
    align-items: stretch;
  }

  .benv2_thr_ask_btns {
    width: 100%;
  }

  .benv2_thr_btn {
    flex: 1;
  }

  /* THR/HCM month-accordion entries stack on phones */
  .benv2_thrm_entries {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   Beneficiary V2 — "Hot Cooked Meal (HCM)" detail page
   Reuses the THR layout/panels; adds orange hero, week chips, days circles.
   ===================================================================== */

/* orange hero variant */
.benv2_thr_hero.is-orange {
  background: linear-gradient(135deg, #ffe6c2 0%, #fff0dc 60%, #fff6ec 100%);
  border-color: var(--ux4g-color-orange-300, #ffc973);
}

.benv2_thr_hero.is-orange .benv2_thr_hero_title {
  color: var(--ux4g-color-orange-800, #ad4e00);
}

.benv2_thr_hero.is-orange .benv2_thr_btn {
  border-color: var(--ux4g-color-orange-300, #ffc973);
  color: var(--ux4g-color-orange-800, #ad4e00);
}

.benv2_thr_hero.is-orange .benv2_thr_btn:hover,
.benv2_thr_hero.is-orange .benv2_thr_btn:focus-visible {
  background-color: var(--ux4g-color-secondary-100, #ffebd6);
}

/* Yes stays blue (primary) when active per reference */
.benv2_thr_hero.is-orange .benv2_thr_btn.is-active-yes {
  background-color: var(--ux4g-color-primary-600-changed, #2661e0);
  border-color: var(--ux4g-color-primary-600-changed, #2661e0);
  color: #ffffff;
}

.benv2_thr_hero.is-orange .benv2_thr_btn.is-active-no {
  background-color: var(--ux4g-color-red-600, #db372d);
  border-color: var(--ux4g-color-red-600, #db372d);
  color: #ffffff;
}

/* HCM stat title (no big number in this hero) */
.benv2_hcm_stat_title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ux4g-color-neutral-900, #171717);
  margin: 0;
}

/* orange reminder variant */
.benv2_reminder.is-orange .benv2_reminder_icon {
  background-color: var(--ux4g-color-secondary-100, #ffebd6);
  color: var(--ux4g-color-orange-600, #fa8c16);
}

.benv2_reminder.is-orange .benv2_reminder_title {
  color: var(--ux4g-color-orange-800, #ad4e00);
}

/* ---------------- HCM this week ---------------- */
.benv2_week {
  display: flex;
  justify-content: space-between;
  gap: var(--ux4g-space-4, 8px);
}

.benv2_week_chip {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ux4g-space-4, 8px);
  border: 1px solid var(--ux4g-color-neutral-200, #e5e5e5);
  border-radius: 12px;
  padding: var(--ux4g-space-5, 12px) var(--ux4g-space-3, 6px);
}

.benv2_week_icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

.benv2_week_icon.state-received {
  background-color: var(--ux4g-color-green-100, #ddf8d8);
  color: var(--ux4g-color-green-800);
}

.benv2_week_icon.state-none {
  background-color: var(--ux4g-color-red-100, #ffecee);
  color: var(--ux4g-color-red-600, #db372d);
}

.benv2_week_icon.state-pending {
  background-color: var(--ux4g-color-primary-100-changed);
  color: var(--ux4g-color-primary-600-changed, #2661e0);
}

.benv2_week_label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ux4g-color-neutral-700, #404040);
}

/* legend dots for the week states */
.benv2_legend_dot.state-received {
  background-color: var(--ux4g-color-green-800);
}

.benv2_legend_dot.state-notreceived {
  background-color: var(--ux4g-color-red-600, #db372d);
}

.benv2_legend_dot.state-pending {
  background-color: var(--ux4g-color-primary-600-changed, #2661e0);
}

/* ---------------- HCM received (days circles) ---------------- */
.benv2_days_row {
  display: flex;
  justify-content: space-between;
  gap: var(--ux4g-space-3, 6px);
}

.benv2_days_col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ux4g-space-3, 6px);
}

.benv2_days_circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  line-height: 1;
}

.benv2_days_num {
  font-size: 0.82rem;
  font-weight: 800;
}

.benv2_days_unit {
  font-size: 0.44rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-top: 1px;
}

.benv2_days_circle.tone-orange {
  background-color: var(--ux4g-color-orange-600, #fa8c16);
}

.benv2_days_circle.tone-red {
  background-color: var(--ux4g-color-red-600, #db372d);
}

.benv2_days_circle.tone-green {
  background-color: var(--ux4g-color-green-600, #128937);
}

/* ---------------- HCM page responsive ---------------- */
@media (max-width: 680px) {
  .benv2_week {
    flex-wrap: wrap;
  }

  .benv2_week_chip {
    flex: 1 1 28%;
  }

  .benv2_days_row {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--ux4g-space-5, 12px);
  }
}

/* =====================================================================
   Beneficiary V2 — "Growth Monitoring" detail page
   Reuses panel/layout; benv2_gm_ prefix for new pieces.
   ===================================================================== */

/* panel head: eyebrow + date chip */
.benv2_gm_panel_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--ux4g-space-6, 16px);
}

.benv2_gm_eyebrow {
  color: var(--ux4g-color-neutral-500, #737373);
  margin: 0;
}

.benv2_gm_date_chip {
  color: var(--ux4g-color-neutral-900);
  background-color: var(--ux4g-color-neutral-200);
  padding: 4px 8px;
}

/* height + weight tiles */
.benv2_gm_tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ux4g-space-6, 16px);
  margin-bottom: var(--ux4g-space-6, 16px);
}

.benv2_gm_tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ux4g-space-3, 6px);
  border-radius: 14px;
  padding: var(--ux4g-space-6, 16px);
  text-align: center;
  box-shadow: 0px 2px 14px 0px #0000000A;
}

.benv2_gm_tile.is-height {
  background: linear-gradient(180deg, var(--ux4g-color-green-50) 0%, var(--ux4g-color-neutral-0) 100%);
  border: 1px solid var(--ux4g-color-green-100)
}

.benv2_gm_tile.is-weight {
  background: linear-gradient(180deg, var(--ux4g-color-red-50) 0%, var(--ux4g-color-neutral-0) 100%);
  border: 1px solid var(--ux4g-color-red-100);
}

.benv2_gm_tile_label {
  display: inline-flex;
  align-items: center;
  gap: var(--ux4g-space-3, 6px);
  color: var(--ux4g-color-neutral-500);
}

.benv2_gm_tile_value {
  color: var(--ux4g-color-neutral-900, #171717);
  margin: 0;
}

.benv2_gm_tile_unit {
  color: var(--ux4g-color-neutral-500, #737373);
}

/* ---------------- Growth Monitoring: Latest Assessment tiles as full-width rows
   (label on the left, big value on the right) — stacked vertically. Scoped to
   .benv2_gm_tiles_rows so the GWG 3-tile grid stays unchanged. ---------------- */
.benv2_gm_tiles.benv2_gm_tiles_rows {
  display: flex;
  flex-direction: column;
  gap: var(--ux4g-space-5, 12px);
}

.benv2_gm_tiles_rows .benv2_gm_tile {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  padding: var(--ux4g-space-6, 16px) var(--ux4g-space-7, 20px);
}

.benv2_gm_tiles_rows .benv2_gm_tile_value {
  font-size: 2rem;
  display: inline-flex;
  align-items: baseline;
  gap: var(--ux4g-space-3, 6px);
}

/* delta pills */
.benv2_gm_pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

.benv2_gm_pill.is-up {
  background-color: var(--ux4g-color-green-100, #ddf8d8);
  color: var(--ux4g-color-green-800);
}

.benv2_gm_pill.is-down {
  background-color: var(--ux4g-color-red-100, #ffecee);
  color: var(--ux4g-color-red-600, #db372d);
}

.benv2_gm_pill.is-warn {
  background-color: var(--ux4g-color-orange-100, #ffe7bf);
  color: var(--ux4g-color-orange-800, #ad4e00);
}

/* alerts */
.benv2_gm_alert {
  display: flex;
  align-items: flex-start;
  gap: var(--ux4g-space-5, 12px);
  border-radius: 12px;
  padding: var(--ux4g-space-5, 12px) var(--ux4g-space-6, 16px);
  margin-bottom: var(--ux4g-space-5, 12px);
}

.benv2_gm_alert.is-error {
  background-color: var(--ux4g-color-red-100, #ffecee);
}

.benv2_gm_alert.is-warning {
  background-color: var(--ux4g-color-orange-100, #ffe7bf);
}

.benv2_gm_alert_icon {
  flex: none;
  font-size: 1rem;
  line-height: 1.4;
}

.benv2_gm_alert.is-error .benv2_gm_alert_icon {
  color: var(--ux4g-color-red-60);
}

.benv2_gm_alert.is-warning .benv2_gm_alert_icon {
  color: var(--ux4g-color-orange-600, #fa8c16);
}

.benv2_gm_alert_title {
  margin: 0 0 2px;
  color: var(--ux4g-color-red-800);
}

.benv2_gm_alert.is-error .benv2_gm_alert_title {
  color: var(--ux4g-color-red-800, #8a1a16);
}

.benv2_gm_alert.is-warning .benv2_gm_alert_title {
  color: var(--ux4g-color-orange-800, #ad4e00);
}

.benv2_gm_alert_text {
  color: var(--ux4g-color-neutral-900);
  margin: 0;
}

/* standard reference */
.benv2_gm_ref_head {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ux4g-color-neutral-500, #737373);
  margin: var(--ux4g-space-6, 16px) 0 var(--ux4g-space-5, 12px);
}

.benv2_gm_ref_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ux4g-space-5, 12px);
  padding: var(--ux4g-space-4, 8px) 0;
  border-top: 1px solid var(--ux4g-color-neutral-200, #e5e5e5);
}

.benv2_gm_ref_label {
  display: inline-flex;
  align-items: center;
  gap: var(--ux4g-space-3, 6px);
  font-size: 0.85rem;
  color: var(--ux4g-color-neutral-700, #404040);
}

.benv2_gm_ref_icon {
  color: var(--ux4g-icon-status-info, #13c2c2);
}

.benv2_gm_ref_value {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ux4g-color-neutral-900, #171717);
  background-color: var(--ux4g-color-neutral-0, #ffffff);
  border: 1px solid var(--ux4g-color-neutral-200, #e5e5e5);
  border-radius: 8px;
  padding: 4px 12px;
  white-space: nowrap;
}

/* ---------------- growth summary timeline ---------------- */
.benv2_gm_summary_title {
  margin-bottom: 2px;
}

.benv2_gm_summary_sub {
  color: var(--ux4g-color-neutral-500, #737373);
  margin: 0 0 var(--ux4g-space-6, 16px);
}

.benv2_gm_timeline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ux4g-space-5, 12px);
}

.benv2_gm_tl_card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ux4g-space-3, 6px);
  background-color: var(--ux4g-color-neutral-50, #fafafa);
  border: 1px solid var(--ux4g-color-neutral-200, #e5e5e5);
  border-radius: 14px;
  padding: var(--ux4g-space-5, 12px) var(--ux4g-space-4, 8px);
}

.benv2_gm_tl_card.is-latest {
  background-color: var(--ux4g-color-primary-100-changed);
  border: 2px solid var(--ux4g-color-primary-600-changed, #2661e0);
}

.benv2_gm_tl_flag {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--ux4g-color-primary-600-changed, #2661e0);
  color: var(--ux4g-color-neutral-0);
  border-radius: 999px;
  padding: 2px 6px;
  white-space: nowrap;
}

.benv2_gm_tl_date {
  color: var(--ux4g-color-neutral-700, #404040);
}

.benv2_gm_tl_art {
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--ux4g-color-neutral-100, #f5f5f5);
  padding: var(--ux4g-space-7);
}

.benv2_gm_tl_card.is-latest .benv2_gm_tl_art {
  background-color: #cfe0ff;
}

/* Growth Summary: non-latest cards show a greyed illustration; the latest
   card keeps its colour (scoped to .benv2_gm_timeline so GWG is unaffected) */
.benv2_gm_timeline .benv2_gm_tl_card:not(.is-latest) .benv2_gm_tl_art img {
  filter: grayscale(1);
  opacity: 0.65;
}

/* Growth Summary: latest card metrics box uses the pink tint (matches design) */
.benv2_gm_timeline .benv2_gm_tl_card.is-latest .benv2_gm_tl_metrics {
  background-color: var(--ux4g-color-red-100);
  border: 1px solid var(--ux4g-color-red-100);
}

.benv2_gm_tl_metrics {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  background-color: var(--ux4g-color-neutral-0, #ffffff);
  border-radius: 8px;
  padding: var(--ux4g-space-4, 8px);
  width: 100%;
  border: 1px solid var(--ux4g-color-neutral-300, #D9D9D9)
}

.benv2_gm_tl_h {
  color: var(--ux4g-color-neutral-900, #171717);
}

.benv2_gm_tl_w {
  color: var(--ux4g-color-neutral-500);
}

.benv2_gm_tl_card.is-latest .benv2_gm_tl_w {
  color: var(--ux4g-color-red-800);
}

.benv2_gm_tl_pill {
  width: 100%;
  justify-content: center;
}

/* age line under the date in each timeline card */
.benv2_gm_tl_age {
  color: var(--ux4g-color-neutral-500, #737373);
  margin-top: 0;
}

/* indicator rows (Stunting / Underweight / Wasting) inside a timeline card */
.benv2_gm_tl_inds {
  display: flex;
  flex-direction: column;
  gap: var(--ux4g-space-4, 8px);
  width: 100%;
  text-align: center;
}

.benv2_gm_tl_ind {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.benv2_gm_tl_ind_label {
  color: var(--ux4g-color-neutral-700, #404040);
}

.benv2_gm_tl_ind_val {
  color: var(--ux4g-color-neutral-900, #171717);
}

.benv2_gm_tl_ind_val.is-danger {
  color: var(--ux4g-color-red-800);
}

.benv2_gm_tl_ind_val.is-muted {
  color: var(--ux4g-color-neutral-500, #737373);
}

/* Growth Summary empty state (no data) */
.benv2_gm_empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--ux4g-space-9, 32px) var(--ux4g-space-6, 16px);
}

.benv2_gm_empty_icon {
  position: relative;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background-color: #EFEFEF;
  color: #D7D7D7;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin-bottom: var(--ux4g-space-6, 16px);
}

.benv2_gm_empty_x1,
.benv2_gm_empty_x2 {
  position: absolute;
  left: 24px;
  font-size: 0.7rem;
  color: var(--ux4g-color-red-600, #db372d);
}

.benv2_gm_empty_x1 {
  top: 30px;
}

.benv2_gm_empty_x2 {
  top: 50px;
}

.benv2_gm_empty_text {
  color: var(--ux4g-color-neutral-700, #404040);
  margin: 0;
}

/* ---------------- Growth page responsive ---------------- */
@media (max-width: 680px) {
  .benv2_gm_tiles {
    grid-template-columns: 1fr;
  }

  .benv2_gm_ref_row {
    flex-wrap: wrap;
  }
}

/* =====================================================================
   Beneficiary V2 — "BMI" detail page (adolescent girls)
   Reuses Growth Monitoring tiles + timeline; adds the BMI status tile,
   the big BMI value, the status pill, and the per-card weight/BMI boxes.
   ===================================================================== */

/* Current BMI Status tile — green tint (matches the design) */
.benv2_gm_tile.is-bmi {
  background: linear-gradient(180deg, var(--ux4g-color-green-50, #f2fcef) 0%, var(--ux4g-color-neutral-0) 100%);
  border: 1px solid var(--ux4g-color-green-100, #ddf8d8);
}

/* big BMI value in the status tile */
.benv2_bmi_big {
  font-size: 2rem;
}

/* green "Normal" status pill (latest tile + timeline BMI box) */
.benv2_bmi_status_pill {
  display: inline-flex;
  align-items: center;
  background-color: var(--ux4g-color-green-100, #ddf8d8);
  color: var(--ux4g-color-green-800, #00522c);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}

/* timeline weight pill (reuses the metrics box; white, single value) */
.benv2_bmi_tl_weight {
  margin-top: var(--ux4g-space-3, 6px);
}

/* timeline BMI box: "BMI" label, value, status pill — centered */
.benv2_bmi_tl_box {
  gap: 3px;
}

.benv2_bmi_tl_val {
  color: var(--ux4g-color-neutral-900, #171717);
}

/* latest card: weight pill + BMI box use the pink tint like Growth Summary */
.benv2_gm_timeline .benv2_gm_tl_card.is-latest .benv2_bmi_tl_weight,
.benv2_gm_timeline .benv2_gm_tl_card.is-latest .benv2_bmi_tl_box {
  background-color: var(--ux4g-color-red-100);
  border: 1px solid var(--ux4g-color-red-100);
}

/* =====================================================================
   Beneficiary V2 — "Gestational Weight Gain" detail page
   Reuses Growth Monitoring tiles/alerts/reference; adds 3-tile grid,
   green success alert, and the 4-card ANC timeline.
   ===================================================================== */

/* neutral pill (e.g. "Stable") */
.benv2_gm_pill.is-neutral {
  background-color: var(--ux4g-color-neutral-100, #f5f5f5);
  color: var(--ux4g-color-neutral-700, #404040);
}

/* green success alert */
.benv2_gm_alert.is-success {
  background-color: var(--ux4g-color-green-100, #ddf8d8);
}

.benv2_gm_alert.is-success .benv2_gm_alert_icon {
  color: var(--ux4g-color-green-800);
}

.benv2_gm_alert.is-success .benv2_gm_alert_title {
  color: var(--ux4g-color-green-800, #00522c);
}

/* 3-tile grid (Height / Weight / Hemoglobin) */
.benv2_gwg_tiles {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.benv2_gm_tile.is-weightgain {
  background-color: #fbffe8;
  border: 1px solid #e4ef9c;
}

.benv2_gm_tile.is-hb {
  background: linear-gradient(180deg, var(--ux4g-color-red-50) 0%, var(--ux4g-color-neutral-0) 100%);
  border: 1px solid var(--ux4g-color-red-100);
}

/* ---------------- ANC summary timeline (4 cards) ---------------- */
.benv2_gwg_timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ux4g-space-4, 8px);
}

.benv2_gwg_tl_card {
  padding-top: var(--ux4g-space-7, 20px);
}

/* order flag floats on the top border, like the Growth "LATEST" badge */
.benv2_gwg_tl_flag {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #ffffff;
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}

.benv2_gwg_tl_flag.order-first,
.benv2_gwg_tl_flag.order-second {
  background-color: var(--ux4g-color-primary-600-changed, #2661e0);
}

.benv2_gwg_tl_flag.order-third,
.benv2_gwg_tl_flag.order-fourth {
  background-color: var(--ux4g-color-neutral-300, #d9d9d9);
  color: var(--ux4g-color-neutral-700, #404040);
}

/* active cards: yellow illustration tile + pink metrics box (matches design) */
.benv2_gwg_tl_card:not(.is-pending) .benv2_gm_tl_art {
  background-color: #ffd93b;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ux4g-space-3, 6px);
}

.benv2_gwg_tl_card:not(.is-pending) .benv2_gm_tl_art img {
  object-fit: contain;
}

.benv2_gwg_metrics {
  background-color: var(--ux4g-color-red-100);
  border: 1px solid var(--ux4g-color-red-100)
}

/* grayed pending card */
.benv2_gwg_tl_card.is-pending {
  background-color: var(--ux4g-color-neutral-50, #fafafa);
  border: 1px solid var(--ux4g-color-neutral-200, #e5e5e5);
}

.benv2_gwg_tl_card.is-pending .benv2_gm_tl_art {
  filter: grayscale(1);
  opacity: 0.65;
}

.benv2_gwg_pending {
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

.benv2_gwg_pending_text {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ux4g-color-neutral-500, #737373);
  text-align: center;
}

/* ---------------- GWG page responsive ---------------- */
@media (max-width: 991px) {
  .benv2_gwg_tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .benv2_gwg_tiles {
    grid-template-columns: 1fr;
  }

  .benv2_gwg_timeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ux4g-space-5, 12px);
  }
}

/* =====================================================================
   Beneficiary V2 — "Home Visit" detail page
   Reuses hero/ask/panel; benv2_hv_ / benv2_ms_ prefixes for new pieces.
   ===================================================================== */

/* purple hero variant */
.benv2_thr_hero.is-purple {
  background: linear-gradient(135deg, #e3d7f7 0%, #ece3fa 60%, #f3edfc 100%);
  border-color: var(--ux4g-color-tertiary-300, #c8a3e0);
}

.benv2_hv_datechip {
  display: inline-flex;
  align-items: center;
  background-color: var(--ux4g-color-neutral-0, #ffffff);
  color: var(--ux4g-colors-purple-900-new);
  padding: 0px 8px;
  margin-bottom: var(--ux4g-space-5, 12px);
}

.benv2_hv_hero_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ux4g-space-5, 12px);
  flex-wrap: wrap;
}

.benv2_hv_title {
  color: var(--ux4g-colors-purple-900-new);
  margin: 0;
  max-width: 100%;
}

.benv2_hv_completed {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--ux4g-space-3, 6px);
  background-color: var(--ux4g-color-green-100, #ddf8d8);
  color: var(--ux4g-color-green-800, #00522c);
  padding: 0px 8px;
}

/* "Missed" variant of the hero status pill */
.benv2_hv_completed.is-missed {
  background-color: var(--ux4g-color-red-100, #ffecee);
  color: var(--ux4g-color-red-800, #8a1a16);
}

/* ---------------- Upcoming Visit card ---------------- */
.benv2_hv_upcoming {
  display: flex;
  align-items: center;
  gap: var(--ux4g-space-6, 16px);
}

.benv2_hv_upcoming_icon {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background-color: var(--ux4g-color-primary-100-changed, #e6efff);
  color: var(--ux4g-color-primary-600-changed, #2661e0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}

.benv2_hv_upcoming_chip {
  display: inline-flex;
  align-items: center;
  background-color: var(--ux4g-color-tertiary-100);
  color: var(--ux4g-color-tertiary-600);
  border-radius: 999px;
  padding: 0px 8px;
  margin-bottom: var(--ux4g-space-3, 6px);
}

.benv2_hv_upcoming_date {
  color: var(--ux4g-color-primary-600-changed);
  margin: 0;
}

.benv2_hv_upcoming_sub {
  color: var(--ux4g-color-neutral-500, #737373);
  margin: 2px 0 0;
}

/* ---------------- Last Visit hero extras ---------------- */
.benv2_hv_referred {
  font-size: 0.82rem;
  color: var(--ux4g-color-neutral-700, #404040);
  margin: var(--ux4g-space-4, 8px) 0 var(--ux4g-space-5, 12px);
}

/* Observations button (hero + history card) */
.benv2_hv_obs_btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ux4g-space-3, 6px);
  background-color: var(--ux4g-color-neutral-0, #ffffff);
  border: 1px solid var(--ux4g-color-neutral-200, #e5e5e5);
  border-radius: 8px;
  padding: var(--ux4g-space-4, 8px) var(--ux4g-space-5, 12px);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ux4g-color-neutral-900, #171717);
  cursor: pointer;
}

.benv2_hv_obs_btn:hover,
.benv2_hv_obs_btn:focus-visible {
  border-color: var(--ux4g-color-primary-600-changed, #acc9ff);
  outline: none;
}

.benv2_hv_obs_btn_hero {
  margin-bottom: var(--ux4g-space-6, 16px);
}

.benv2_hv_obs_count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #ffffff;
}

.benv2_hv_obs_count.tone-danger {
  background-color: var(--ux4g-color-red-600, #db372d);
}

.benv2_hv_obs_count.tone-success {
  background-color: var(--ux4g-color-green-600, #128937);
}

/* ---------------- Home Visit History (right column list) ---------------- */
.benv2_hv_history_list {
  display: flex;
  flex-direction: column;
  gap: var(--ux4g-space-5, 12px);
}

/* vertical history card (stacked) — scoped so it beats the horizontal
   .benv2_hvh_row defined later in the file */
.benv2_hv_history_list .benv2_hvh_card {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ux4g-space-4, 8px);
  background-color: var(--ux4g-color-neutral-50, #fafafa);
  border: 1px solid var(--ux4g-color-neutral-200, #e5e5e5);
  border-radius: 12px;
  padding: var(--ux4g-space-6, 16px);
}

.benv2_hvh_body {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--ux4g-space-4, 8px);
}

.benv2_hvh_meta_row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2px var(--ux4g-space-5, 12px);
}

/* milestones need attention */
.benv2_hv_ms_title {
  line-height: 1.25;
}

.benv2_hv_flagged {
  background-color: var(--ux4g-color-orange-100, #ffe7bf);
  color: var(--ux4g-color-orange-800, #ad4e00);
}

.benv2_ms_grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ux4g-space-6, 16px);
}

.benv2_ms_card {
  background-color: var(--ux4g-color-neutral-0, #ffffff);
  border: 1px solid var(--ux4g-color-neutral-200, #e5e5e5);
  border-radius: 16px;
  padding: var(--ux4g-space-6, 16px);
  box-shadow: 0 1px 2px rgba(23, 23, 23, 0.04);
}

.benv2_ms_head {
  display: flex;
  align-items: flex-start;
  gap: var(--ux4g-space-5, 12px);
  margin-bottom: var(--ux4g-space-5, 12px);
}

.benv2_ms_icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.benv2_ms_icon.tone-purple {
  background-color: var(--ux4g-color-tertiary-100, #e9daf3);
  color: var(--ux4g-color-tertiary-600, #8e55b3);
}

.benv2_ms_icon.tone-green {
  background-color: var(--ux4g-color-green-100, #ddf8d8);
  color: var(--ux4g-color-green-800);
}

.benv2_ms_question {
  flex: 1;
  min-width: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--ux4g-color-neutral-900, #171717);
  margin: 0;
  line-height: 1.3;
}

.benv2_ms_answer {
  flex: none;
  font-size: 0.72rem;
  font-weight: 600;
  background-color: var(--ux4g-color-orange-100, #ffe7bf);
  color: var(--ux4g-color-orange-800, #ad4e00);
  border-radius: 999px;
  padding: 3px 12px;
}

.benv2_ms_advisory {
  background-color: var(--ux4g-color-neutral-50, #fafafa);
  border-radius: 10px;
  padding: var(--ux4g-space-5, 12px);
}

.benv2_ms_advisory_head {
  display: flex;
  align-items: center;
  gap: var(--ux4g-space-3, 6px);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ux4g-icon-status-info, #13c2c2);
  margin: 0 0 4px;
}

.benv2_ms_advisory_text {
  font-size: 0.8rem;
  color: var(--ux4g-color-neutral-700, #404040);
  margin: 0;
  line-height: 1.4;
}

/* ---------------- last 6 months stats ---------------- */
.benv2_hv_stats_title {
  margin: 0;
}

.benv2_hv_list_link {
  display: inline-flex;
  align-items: center;
  gap: var(--ux4g-space-3, 6px);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ux4g-color-primary-600-changed, #2661e0);
  text-decoration: none;
}

.benv2_hv_list_link:hover {
  text-decoration: underline;
}

.benv2_hv_stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ux4g-space-5, 12px);
}

.benv2_hv_stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ux4g-space-3, 6px);
  border: 1px solid var(--ux4g-color-neutral-200, #e5e5e5);
  border-radius: 14px;
  padding: var(--ux4g-space-6, 16px) var(--ux4g-space-4, 8px);
  text-align: center;
}

.benv2_hv_stat_icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.benv2_hv_stat_icon.is-done {
  background-color: var(--ux4g-color-green-100, #ddf8d8);
  color: var(--ux4g-color-green-800);
}

.benv2_hv_stat_icon.is-missed {
  background-color: var(--ux4g-color-red-100, #ffecee);
  color: var(--ux4g-color-red-600, #db372d);
}

.benv2_hv_stat_icon.is-upcoming {
  background-color: var(--ux4g-color-primary-100-changed);
  color: var(--ux4g-color-primary-600-changed, #2661e0);
}

.benv2_hv_stat_num {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--ux4g-color-neutral-900, #171717);
}

.benv2_hv_stat_num.is-upcoming {
  color: var(--ux4g-color-primary-600-changed, #2661e0);
}

.benv2_hv_stat_label {
  font-size: 0.72rem;
  color: var(--ux4g-color-neutral-500, #737373);
}

/* ---------------- watch home visit videos ---------------- */
.benv2_hv_videos_section {
  /* margin-top: var(--ux4g-space-9, 32px); */
}

.benv2_hv_videos_title {
  margin: 0 0 var(--ux4g-space-6, 16px);
}

/* react-slick carousel: give each slide a horizontal gutter and keep arrows
   from overlapping the cards */
.benv2_hv_videos_slider {
  /* margin: 0 -8px; */
}

.benv2_hv_videos_slider .slick-slide>div {
  padding: 0 var(--ux4g-space-4, 8px);
}

.benv2_hv_video {
  background-color: var(--ux4g-color-neutral-0, #ffffff);
  border: 1px solid var(--ux4g-color-neutral-200, #e5e5e5);
  border-radius: 14px;
  padding: var(--ux4g-space-4, 8px);
  box-shadow: 0 1px 2px rgba(23, 23, 23, 0.04);
}

.benv2_hv_video_thumb {
  position: relative;
  width: 100%;
  height: 130px;
  border-radius: 10px;
  overflow: hidden;
  background-color: #f6ead2;
  margin-bottom: var(--ux4g-space-4, 8px);
}

.benv2_hv_video_play {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background-color: var(--ux4g-color-red-600, #db372d);
  color: #ffffff;
  font-size: 0.72rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.benv2_hv_video_play:hover,
.benv2_hv_video_play:focus-visible {
  background-color: var(--ux4g-color-red-600-hover, #b3251e);
  outline: none;
}

.benv2_hv_video_title {
  color: var(--ux4g-color-neutral-900);
  margin: 0 0 var(--ux4g-space-4, 8px);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.benv2_hv_video_dur {
  font-size: 0.72rem;
  color: var(--ux4g-color-neutral-500, #737373);
}

/* ---------------- Home Visit page responsive ---------------- */
@media (max-width: 680px) {

  /* tighten the videos section gap when it stacks under the hero */
  .benv2_hv_videos_section {
    margin-top: var(--ux4g-space-7, 20px);
  }

  /* Observations button + View Feedback align left in stacked history cards */
  .benv2_hv_obs_btn,
  .benv2_hvh_feedback {
    align-self: flex-start;
  }
}

/* =====================================================================
   Beneficiary V2 — Home Visit clickable block + Home Visit History page
   ===================================================================== */

/* clickable visit block inside the Home Visit hero */
.benv2_hv_visit_block {
  cursor: pointer;
  border-radius: 12px;
  padding: var(--ux4g-space-4, 8px);
  margin: calc(-1 * var(--ux4g-space-4, 8px)) calc(-1 * var(--ux4g-space-4, 8px)) var(--ux4g-space-4, 8px);
  transition: background-color 0.15s ease;
}

.benv2_hv_visit_block:hover {
  background-color: rgba(255, 255, 255, 0.45);
}

.benv2_hv_visit_block:focus-visible {
  outline: 2px solid var(--ux4g-color-tertiary-600, #8e55b3);
  outline-offset: 2px;
}

/* ---------------- Home Visit History list ---------------- */
.benv2_hvh_list {
  display: flex;
  flex-direction: column;
  gap: var(--ux4g-space-6, 16px);
}

.benv2_hvh_row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ux4g-space-6, 16px);
  background-color: var(--ux4g-color-neutral-0, #ffffff);
  border: 1px solid var(--ux4g-color-neutral-200, #e5e5e5);
  border-radius: 16px;
  padding: var(--ux4g-space-6, 16px) var(--ux4g-space-7, 20px);
  box-shadow: 0 1px 2px rgba(23, 23, 23, 0.04);
}

.benv2_hvh_main {
  display: flex;
  align-items: flex-start;
  gap: var(--ux4g-space-6, 16px);
  min-width: 0;
}

.benv2_hvh_status {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--ux4g-space-3, 6px);
  padding: 0px 8px;
  white-space: nowrap;
}

.benv2_hvh_status.is-completed {
  background-color: var(--ux4g-color-green-100, #ddf8d8);
  color: var(--ux4g-color-green-800, #00522c);
}

.benv2_hvh_status.is-missed {
  background-color: var(--ux4g-color-red-100, #ffecee);
  color: var(--ux4g-color-red-800, #8a1a16);
}

.benv2_hvh_body {
  min-width: 0;
}

.benv2_hvh_title_row {
  display: flex;
  align-items: center;
  gap: var(--ux4g-space-5, 12px);
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.benv2_hvh_title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ux4g-color-neutral-900, #171717);
  margin: 0;
}

.benv2_hvh_attention {
  display: inline-flex;
  align-items: center;
  gap: var(--ux4g-space-3, 6px);
  background-color: var(--ux4g-color-neutral-0, #ffffff);
  border: 1px solid var(--ux4g-color-neutral-200, #e5e5e5);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--ux4g-color-neutral-900, #171717);
  cursor: pointer;
}

.benv2_hvh_attention:hover,
.benv2_hvh_attention:focus-visible {
  border-color: var(--ux4g-color-orange-600, #fa8c16);
  outline: none;
}

.benv2_hvh_attention_count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--ux4g-color-orange-600, #fa8c16);
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 700;
}

.benv2_hvh_meta {
  font-size: 0.8rem;
  color: var(--ux4g-color-neutral-500, #737373);
  margin: 2px 0 0;
}

.benv2_hvh_feedback {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--ux4g-space-3, 6px);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ux4g-color-primary-600-changed, #2661e0);
  text-decoration: none;
  white-space: nowrap;
}

.benv2_hvh_feedback:hover {
  text-decoration: underline;
}

/* ---------------- Home Visit History responsive ---------------- */
@media (max-width: 680px) {
  .benv2_hvh_row {
    flex-direction: column;
    align-items: flex-start;
  }

  .benv2_hvh_main {
    flex-direction: column;
    gap: var(--ux4g-space-4, 8px);
  }

  .benv2_hvh_feedback {
    align-self: flex-start;
  }
}

/* =====================================================================
   Beneficiary V2 — "ECCE (Early Childhood Care & Education)" page
   Reuses hero/days-circle/alert; adds lime hero + calendar with dots.
   ===================================================================== */

/* lime hero variant */
.benv2_thr_hero.is-lime {
  background: linear-gradient(135deg, #dff17f 0%, #e8f79a 55%, #f0fbc0 100%);
  border-color: #cfe86a;
}

.benv2_ecce_title {
  color: #4f6b0a;
  margin: 0 var(--ux4g-space-12, 56px) 2px 0;
  max-width: 60%;
}

.benv2_ecce_sub {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ux4g-color-neutral-900, #171717);
  margin: 0 0 var(--ux4g-space-6, 16px);
}

.benv2_thr_hero.is-lime .benv2_thr_btn {
  border-color: #b7d84f;
  color: #4f6b0a;
}

.benv2_thr_hero.is-lime .benv2_thr_btn:hover,
.benv2_thr_hero.is-lime .benv2_thr_btn:focus-visible {
  background-color: #eef7c8;
}

/* disabled Yes/No in the lime hero (ECCE not-conducted / sunday) — muted */
.benv2_thr_hero.is-lime .benv2_thr_btn:disabled {
  background-color: transparent;
  border-color: var(--ux4g-color-neutral-300, #d9d9d9);
  color: var(--ux4g-color-neutral-500, #737373);
  opacity: 0.7;
  cursor: not-allowed;
}

.benv2_thr_hero.is-lime .benv2_thr_btn.is-active-yes {
  background-color: var(--ux4g-color-green-600, #128937);
  border-color: var(--ux4g-color-green-600, #128937);
  color: var(--ux4g-color-neutral-0);
}

.benv2_thr_hero.is-lime .benv2_thr_btn.is-active-no {
  background-color: var(--ux4g-color-red-600, #db372d);
  border-color: var(--ux4g-color-red-600, #db372d);
  color: var(--ux4g-color-neutral-0);
}

.benv2_ecce_link {
  display: inline-flex;
  align-items: center;
  gap: var(--ux4g-space-3, 6px);
  margin-top: var(--ux4g-space-6, 16px);
}

/* ---------------- calendar ---------------- */
.benv2_ecce_cal_title {
  text-align: center;
}

.benv2_cal_grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.benv2_cal_dow {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--ux4g-color-neutral-500, #737373);
  padding-bottom: var(--ux4g-space-4, 8px);
}

.benv2_cal_cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ux4g-color-neutral-900, #171717);
  border-radius: 8px;
}

.benv2_cal_cell.is-muted {
  color: var(--ux4g-color-neutral-300, #d9d9d9);
  font-weight: 500;
}

.benv2_cal_cell.is-today {
  background-color: var(--ux4g-color-primary-100-changed);
  color: var(--ux4g-color-primary-600-changed, #2661e0);
  font-weight: 700;
}

.benv2_cal_dots {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 3px;
}

.benv2_cal_dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.benv2_cal_dot.is-conducted {
  background-color: var(--ux4g-color-primary-600-changed, #2661e0);
}

.benv2_cal_dot.is-attendance {
  background-color: var(--ux4g-color-orange-600, #fa8c16);
}

.benv2_cal_legend {
  justify-content: center;
}

.benv2_legend_dot.is-conducted {
  background-color: var(--ux4g-color-primary-600-changed, #2661e0);
}

.benv2_legend_dot.is-attendance {
  background-color: var(--ux4g-color-orange-600, #fa8c16);
}

.benv2_ecce_alert {
  margin-bottom: 0;
}

/* ---------------- ECCE page responsive ---------------- */
@media (max-width: 680px) {
  .benv2_ecce_title {
    max-width: 100%;
    margin-right: 0;
    font-size: 1.35rem;
  }

  .benv2_days_row {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--ux4g-space-5, 12px);
  }
}

/* =====================================================================
   Beneficiary V2 — "My Tickets" (Help & Complaints) page
   Reuses breadcrumb/layout; benv2_tk_ prefix for new pieces.
   ===================================================================== */

.benv2_tk_title_h {
  /* margin-bottom: 4px; */
}

.benv2_tk_subtitle {
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--ux4g-color-primary-600-changed, #2661e0);
  margin: 0 0 var(--ux4g-space-8, 24px);
}

/* ---------------- ticket list ---------------- */
.benv2_tk_list {
  display: flex;
  flex-direction: column;
  gap: var(--ux4g-space-6, 16px);
}

.benv2_tk_row {
  display: flex;
  align-items: center;
  gap: var(--ux4g-space-5, 12px);
  background-color: var(--ux4g-color-neutral-0, #ffffff);
  border: 1px solid var(--ux4g-color-neutral-200, #e5e5e5);
  border-radius: 16px;
  padding: var(--ux4g-space-6, 16px) var(--ux4g-space-7, 20px);
  box-shadow: 0 1px 2px rgba(23, 23, 23, 0.04);
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.benv2_tk_row:hover {
  border-color: var(--ux4g-color-primary-600-changed, #acc9ff);
  box-shadow: 0 4px 12px rgba(38, 97, 224, 0.1);
  transform: translateY(-1px);
}

.benv2_tk_row:focus-visible {
  outline: 2px solid var(--ux4g-color-primary-600-changed, #2661e0);
  outline-offset: 2px;
}

.benv2_tk_row_body {
  flex: 1;
  min-width: 0;
}

.benv2_tk_title {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ux4g-color-neutral-900, #171717);
  margin: 0;
}

.benv2_tk_meta {
  font-size: 0.8rem;
  color: var(--ux4g-color-neutral-500, #737373);
  margin: 3px 0 0;
}

.benv2_tk_status {
  flex: none;
  padding: 4px 10px;
  white-space: nowrap;
}

.benv2_tk_status.is-open {
  background-color: var(--ux4g-color-orange-100, #ffe7bf);
  color: var(--ux4g-color-orange-800, #ad4e00);
}

.benv2_tk_status.is-closed,
.benv2_tk_status.is-appeal-closed,
.benv2_tk_status.is-resolved {
  background-color: var(--ux4g-color-green-100, #ddf8d8);
  color: var(--ux4g-color-green-800, #00522c);
}

.benv2_tk_status.is-pending {
  background-color: var(--ux4g-color-orange-100, #ffe7bf);
  color: var(--ux4g-color-orange-800, #ad4e00);
}

.benv2_tk_chevron {
  flex: none;
  color: var(--ux4g-color-neutral-500, #737373);
  font-size: 0.85rem;
}

/* ---------------- ticket card: 3 labelled columns ---------------- */
.benv2_tk_card {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  gap: var(--ux4g-space-6, 16px);
  background-color: var(--ux4g-color-neutral-0, #ffffff);
  border: 1px solid var(--ux4g-color-neutral-200, #e5e5e5);
  border-radius: 16px;
  padding: var(--ux4g-space-7, 20px) var(--ux4g-space-8, 24px);
  box-shadow: 0 1px 2px rgba(23, 23, 23, 0.04);
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.benv2_tk_card:hover {
  border-color: var(--ux4g-color-primary-600-changed, #acc9ff);
  box-shadow: 0 4px 12px rgba(38, 97, 224, 0.1);
  transform: translateY(-1px);
}

.benv2_tk_card:focus-visible {
  outline: 2px solid var(--ux4g-color-primary-600-changed, #2661e0);
  outline-offset: 2px;
}

.benv2_tk_field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.benv2_tk_field_label {
  color: var(--ux4g-color-neutral-500, #737373);
}

.benv2_tk_field_value {
  color: var(--ux4g-color-neutral-900, #171717);
}

.benv2_tk_status_col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
}

.benv2_tk_status_date {
  color: var(--ux4g-color-neutral-900, #171717);
}

/* ---------------- actions row (below the list) ---------------- */
.benv2_tk_actions_row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ux4g-space-6, 16px);
  margin-top: var(--ux4g-space-7, 20px);
}

/* ---------------- action cards (side column) ---------------- */
.benv2_tk_action {
  display: flex;
  align-items: center;
  gap: var(--ux4g-space-5, 12px);
  width: 100%;
  text-align: left;
  background-color: var(--ux4g-color-neutral-0, #ffffff);
  border: 1px solid var(--ux4g-color-neutral-200, #e5e5e5);
  border-radius: 16px;
  padding: var(--ux4g-space-6, 16px) var(--ux4g-space-7, 20px);
  box-shadow: 0 1px 2px rgba(23, 23, 23, 0.04);
}

button.benv2_tk_action {
  cursor: pointer;
  font-family: inherit;
}

.benv2_tk_action.is-primary {
  background-color: var(--ux4g-color-primary-600-changed, #2661e0);
}

.benv2_tk_action.is-primary:hover,
.benv2_tk_action.is-primary:focus-visible {
  background-color: var(--ux4g-color-primary-700, #3d239f);
  outline: none;
}

.benv2_tk_action_icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  background-color: #4E8FF8;
  color:var(--ux4g-color-neutral-50);
}

.benv2_tk_action_icon.is-soft {
  background-color: var(--ux4g-bg-Colors-Blue-100);
  color: var(--ux4g-color-blue-600);
}

.benv2_tk_action_text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.benv2_tk_action_title {
  color: var(--ux4g-color-neutral-900);
}

.benv2_tk_action.is-primary .benv2_tk_action_title {
  color: var(--ux4g-color-neutral-0);
}

.benv2_tk_action_sub {
  color: var(--ux4g-color-neutral-500);
}

.benv2_tk_action.is-primary .benv2_tk_action_sub {
  color: var(--ux4g-color-primary-200-new);
}

.benv2_tk_action_chevron {
  flex: none;
  color: var(--ux4g-color-neutral-0);
}

.benv2_tk_action_dir {
  flex: none;
  color: var(--ux4g-color-primary-600-changed);
}

.benv2_tk_link {
  text-decoration: underline;
  color: var(--ux4g-color-neutral-900, #171717);
}

/* empty state (No Tickets Found) */
.benv2_tk_empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--ux4g-space-9, 32px) var(--ux4g-space-6, 16px);
}

.benv2_tk_empty_art {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: var(--ux4g-color-primary-100-changed);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ux4g-color-neutral-500, #737373);
  font-size: 3.4rem;
  margin-bottom: var(--ux4g-space-7, 20px);
}

.benv2_tk_empty_text {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ux4g-color-neutral-700, #404040);
  margin: 0;
}

/* ---------------- My Tickets responsive ---------------- */
@media (max-width: 680px) {
  .benv2_tk_subtitle {
    font-size: 0.9rem;
  }

  /* ticket card: stack the three columns; status aligns left */
  .benv2_tk_card {
    grid-template-columns: 1fr;
    gap: var(--ux4g-space-5, 12px);
  }

  .benv2_tk_status_col {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    width: 100%;
  }

  /* action cards stack on mobile */
  .benv2_tk_actions_row {
    grid-template-columns: 1fr;
  }
}

/* =====================================================================
   Beneficiary V2 — "Profile" page
   Mirrors old-design profile (BeneficaryProfileDetailsV1) in the V2 look.
   benv2_pf_ prefix for all pieces.
   ===================================================================== */

/* shared label used across id-block / grid / care tiles */
.benv2_pf_label {
  display: block;
  color: var(--ux4g-color-neutral-500, #737373);
  margin: 0;
}

/* shared green verification tick */
.benv2_pf_tick {
  width: 16px;
  height: 16px;
  object-fit: contain;
  vertical-align: middle;
  margin-left: 2px;
}

/* ---------------- Top row: header card (left) + Aadhaar panel (right) --------- */
.benv2_pf_toprow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--ux4g-space-7, 20px);
  align-items: stretch;
  margin-top: var(--ux4g-space-6, 16px);
}

/* let the shared header card fill the left column height */
.benv2_pf_toprow_card {
  min-width: 0;
}

.benv2_pf_toprow_card .benv2_svc_header {
  height: 100%;
  margin: 0;
}

/* ---------------- Aadhaar / eKYC / Face block ---------------- */
.benv2_pf_idblock {
  background-color: var(--ux4g-color-primary-100-changed);
  border-radius: 10px;
  padding: var(--ux4g-space-5, 12px) var(--ux4g-space-6, 16px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.benv2_pf_idrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ux4g-space-6, 16px);
  padding: var(--ux4g-space-4, 8px) 0;
  flex-wrap: wrap;
}

.benv2_pf_idrow_border {
  border-top: 1px solid var(--ux4g-bg-secondary-links-100, #d9e7ff);
}

.benv2_pf_idcol {
  min-width: 0;
}

.benv2_pf_idcol_right {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.benv2_pf_idval {
  display: inline-flex;
  align-items: center;
  gap: var(--ux4g-space-2, 4px);
  color: var(--ux4g-color-neutral-900, #171717);
  margin: 2px 0 0;
}

.benv2_pf_idaction {
  display: inline-flex;
  align-items: center;
  gap: var(--ux4g-space-4, 8px);
  flex-wrap: wrap;
}

.benv2_pf_ekyc_date {
  font-size: 0.72rem;
  color: var(--ux4g-color-neutral-500, #737373);
}

/* face thumbnail */
.benv2_pf_facecol {
  display: inline-flex;
  align-items: center;
  gap: var(--ux4g-space-3, 6px);
  min-width: 0;
}

.benv2_pf_face_thumb {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--ux4g-color-neutral-0, #ffffff);
  flex: none;
}

.benv2_pf_face_ph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--ux4g-color-neutral-0, #ffffff);
  color: var(--ux4g-color-neutral-400, #a3a3a3);
  font-size: 0.75rem;
}

.benv2_pf_face_label {
  margin: 0;
}

/* primary button (Recapture / Complete eKYC) */
.benv2_pf_btn {
  background-color: var(--ux4g-color-primary-600-changed, #2661e0);
  color: #ffffff;
  border: none;
  border-radius: 20px;
  padding: var(--ux4g-space-3, 6px) var(--ux4g-space-5, 12px);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--ux4g-space-3, 6px);
  transition: background-color 0.15s ease;
}

.benv2_pf_btn:hover:not(:disabled),
.benv2_pf_btn:focus-visible:not(:disabled) {
  background-color: var(--ux4g-color-primary-700, #3d239f);
  outline: none;
}

.benv2_pf_btn:disabled {
  background-color: var(--ux4g-color-neutral-200, #e5e5e5);
  color: var(--ux4g-color-neutral-500, #737373);
  cursor: not-allowed;
}

.benv2_pf_info {
  color: var(--ux4g-color-neutral-400, #a3a3a3);
  font-size: 0.95rem;
  cursor: help;
}

/* ---------------- White card: key info + Divyangta ---------------- */
.benv2_pf_card {
  background-color: var(--ux4g-color-neutral-0, #ffffff);
  border: 1px solid var(--ux4g-color-neutral-200, #e5e5e5);
  border-radius: 16px;
  padding: var(--ux4g-space-7, 20px) var(--ux4g-space-8, 24px);
  margin-top: var(--ux4g-space-7, 20px);
  box-shadow: 0 1px 2px rgba(23, 23, 23, 0.04);
}

/* ---------------- Key information / Divyangta grid ---------------- */
.benv2_pf_detailgrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--ux4g-space-7, 20px) var(--ux4g-space-7, 20px);
}

.benv2_pf_detailgrid_tight {
  margin-top: var(--ux4g-space-5, 12px);
}

.benv2_pf_detailcell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.benv2_pf_detailval {
  color: var(--ux4g-color-neutral-900, #171717);
  word-break: break-word;
}

/* ---------------- section heads (Divyangta / Care Profile) ---------------- */
.benv2_pf_section_head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ux4g-space-5, 12px);
  flex-wrap: wrap;
}

.benv2_pf_divyangta_head {
  margin-top: var(--ux4g-space-7, 20px);
}

.benv2_pf_section_title {
  color: var(--ux4g-color-neutral-500);
  margin: 0;
}

.benv2_pf_addlink {
  background: none;
  border: none;
  padding: 0;
  color: var(--ux4g-color-primary-600-changed, #2661e0);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--ux4g-space-3, 6px);
}

.benv2_pf_addlink:hover,
.benv2_pf_addlink:focus-visible {
  text-decoration: underline;
  outline: none;
}

/* ---------------- Care Profile ---------------- */
.benv2_pf_care {
  margin-top: var(--ux4g-space-8, 24px);
}

.benv2_pf_care_title {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ux4g-color-neutral-500, #737373);
  margin: 0;
}

.benv2_pf_section_date {
  font-size: 0.72rem;
  color: var(--ux4g-color-neutral-400, #a3a3a3);
}

/* two columns: left stacks Height/Weight + ABHA, right is Wasting/Stunting */
.benv2_pf_caregrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ux4g-space-6, 16px);
  margin-top: var(--ux4g-space-5, 12px);
  align-items: start;
}

.benv2_pf_carecol {
  display: flex;
  flex-direction: column;
  gap: var(--ux4g-space-6, 16px);
  min-width: 0;
}

.benv2_pf_caretile {
  background-color: var(--ux4g-color-neutral-0, #ffffff);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: var(--ux4g-space-5, 12px);
  min-height: 72px;
}

.benev2_care_profile_img_wrap {
  border-radius: 12px 0 0 12px;
  min-height: 72px;
  min-width: 79px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.benev2_care_profile_img_wrap.bene_profile_hw_bg {
  background-color: #FFEADD;
}

.benev2_care_profile_img_wrap.bene_profile_aadhar_bg {
  background-color: var(--ux4g-color-cyan-100);
}

.benev2_care_profile_img_wrap.bene_profile_wsu_bg {
  background-color: #EFF6AB;
}

.benv2_pf_caretile_info {
  display: flex;
  align-items: center;
  gap: var(--ux4g-space-8, 24px);
  flex-wrap: wrap;
  min-width: 0;
  flex: 1;
}

.benv2_pf_caretile_info_3 {
  justify-content: space-around;
  gap: var(--ux4g-space-6, 16px);
}

.benv2_pf_caretile_val {
  color: var(--ux4g-color-neutral-900, #171717);
  margin: 2px 0 0;
  display: flex;
  align-items: center;
  gap: var(--ux4g-space-2, 4px);
}

.benv2_pf_caretile_abha_addr {
  color: var(--ux4g-color-neutral-600, #525252);
  margin: 0;
  margin-left: auto;
}

.benv2_pf_notlinked {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ux4g-color-red-600, #db372d);
  margin: 2px 0 0;
}

/* ---------------- Profile page responsive ---------------- */
@media (max-width: 991px) {
  .benv2_pf_toprow {
    grid-template-columns: 1fr;
  }

  .benv2_pf_detailgrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .benv2_pf_caregrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .benv2_pf_detailgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .benv2_pf_caretile_abha_addr {
    margin-left: 0;
    flex-basis: 100%;
  }
}

@media (max-width: 420px) {
  .benv2_pf_detailgrid {
    grid-template-columns: 1fr;
  }

  .benv2_pf_idrow {
    flex-direction: column;
    align-items: flex-start;
  }

  .benv2_pf_idcol_right {
    align-items: flex-start;
    text-align: left;
  }

  .benv2_pf_idaction {
    width: 100%;
    justify-content: space-between;
  }
}

/* link to Rejected/Inactive from the family section header */
.benv2_family_inactive_link {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--ux4g-space-3, 6px);
  font-size: 0.85rem;
}

/* =====================================================================
   Beneficiary V2 — "Rejected/Inactive Beneficiaries" page
   Reuses avatar/category/name; benv2_ib_ prefix for new pieces.
   ===================================================================== */

.benv2_ib_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ux4g-space-7, 20px);
  margin-bottom: var(--ux4g-space-8, 24px);
  align-items: start;
}

.benv2_ib_card {
  background-color: var(--ux4g-color-neutral-0, #ffffff);
  border: 1px solid #E2E8F0E5;
  border-radius: 16px;
  padding: var(--ux4g-space-7, 20px);
  box-shadow: 0px 1px 3px -1px #0000000A;
}

.benv2_ib_head {
  display: flex;
  align-items: center;
  gap: var(--ux4g-space-5, 12px);
  margin-bottom: var(--ux4g-space-6, 16px);
}

.benv2_ib_avatar {
  width: 52px;
  height: 52px;
}

.benv2_ib_info {
  min-width: 0;
}

/* pink reason box */
.benv2_ib_reason {
  background-color: var(--ux4g-color-red-100, #ffecee);
  padding: var(--ux4g-space-5, 12px) var(--ux4g-space-6, 16px);
}

.benv2_ib_reason_head {
  display: flex;
  align-items: center;
  gap: var(--ux4g-space-3, 6px);
  margin: 0 0 var(--ux4g-space-4, 8px);
}

.benv2_ib_reason_icon {
  color: var(--ux4g-color-red-800);
  font-size: 0.9rem;
}

.benv2_ib_reason_title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ux4g-color-red-800);
}

.benv2_ib_reason_text {
  font-size: 0.82rem;
  color: var(--ux4g-color-neutral-700, #404040);
  margin: 0;
  line-height: 1.45;
  padding-left: calc(0.9rem + var(--ux4g-space-3, 6px));
}

/* ---------------- Need Help (full-width) ---------------- */
.benv2_ib_help {
  background-color: #D0E4FF;
  border-radius: 16px;
  padding: var(--ux4g-space-7, 20px) var(--ux4g-space-8, 24px);
  box-shadow: 0px 2px 4px -2px #0000001A;
}

.benv2_ib_help_top {
  display: flex;
  align-items: flex-start;
  gap: var(--ux4g-space-5, 12px);
}

.benv2_ib_help_icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background-color: var(--ux4g-color-neutral-0, #ffffff);
  color: var(--ux4g-color-primary-600-changed, #2661e0);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
}

.benv2_ib_help_title {
  color: var(--ux4g-color-neutral-900, #171717);
  margin: 0 0 4px;
}

.benv2_ib_help_text {
  color: var(--ux4g-color-neutral-900, #171717);
  margin: 0;
}

.benv2_ib_help_foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ux4g-space-5, 12px);
  flex-wrap: wrap;
  margin-top: var(--ux4g-space-6, 16px);
  padding-top: var(--ux4g-space-4);
  border-top: 1px solid var(--ux4g-color-neutral-0);
}

.benv2_ib_help_line {
  color: var(--ux4g-color-neutral-700, #404040);
}

.benv2_ib_support_btn {
  width: auto;
}

/* ---------------- Inactive page responsive ---------------- */
@media (max-width: 991px) {
  .benv2_ib_grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .benv2_ib_grid {
    grid-template-columns: 1fr;
  }

  .benv2_ib_help_foot {
    flex-direction: column;
    align-items: flex-start;
  }

  .benv2_ib_support_btn {
    width: 100%;
  }
}

/* =====================================================================
   Beneficiary V2 — "Ticket Details" page
   Reuses panel + Yes/No buttons; benv2_td_ prefix for new pieces.
   ===================================================================== */

.benv2_td_panel {
  padding: var(--ux4g-space-9, 32px);
}

/* detail grid (2-col label/value pairs) */
.benv2_td_grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--ux4g-space-7, 20px) var(--ux4g-space-9, 32px);
}

.benv2_td_field {
  min-width: 0;
}

.benv2_td_label {
  display: block;
  color: var(--ux4g-color-neutral-500, #737373);
  margin-bottom: 4px;
}

.benv2_td_value {
  color: var(--ux4g-color-neutral-900, #171717);
  line-height: 1.5;
}

/* submission date field carries the status pill top-right */
.benv2_td_status_field {
  position: relative;
}

.benv2_td_status {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 0.7rem;
  font-weight: 600;
  background-color: var(--ux4g-color-green-100, #ddf8d8);
  color: var(--ux4g-color-green-800, #00522c);
  border-radius: 999px;
  padding: 2px 8px;
}

.benv2_td_status_date {
  position: absolute;
  top: 26px;
  right: 0;
  font-size: 0.82rem;
  color: var(--ux4g-color-neutral-700, #404040);
}

.benv2_td_hide_pair {
  display: block;
}

.benv2_td_view {
  color: var(--ux4g-color-primary-600-changed, #2661e0);
  font-weight: 600;
  text-decoration: underline;
}

.benv2_td_divider {
  border: none;
  border-top: 1px solid var(--ux4g-color-neutral-300);
  margin: var(--ux4g-space-8, 24px) 0;
}

/* info banner (teal) */
.benv2_td_info {
  display: flex;
  align-items: flex-start;
  gap: var(--ux4g-space-4, 8px);
  background-color: var(--ux4g-color-cyan-100);
  color: var(--ux4g-color-neutral-700);
  padding: var(--ux4g-space-5, 12px) var(--ux4g-space-6, 16px);
  margin-bottom: var(--ux4g-space-8, 24px);
}

.benv2_td_info_icon {
  flex: none;
  color: var(--ux4g-color-cyan-600, #13c2c2);
}

/* feedback form */
.benv2_td_form {
  display: flex;
  flex-direction: column;
  gap: var(--ux4g-space-7, 20px);
}

.benv2_td_form_row {
  display: flex;
  align-items: flex-start;
  gap: var(--ux4g-space-7, 20px);
}

.benv2_td_form_label {
  flex: 0 0 50%;
  color: var(--ux4g-color-neutral-700);
  padding-top: var(--ux4g-space-4, 8px);
}

.benv2_td_req {
  color: var(--ux4g-color-red-600, #db372d);
}

/* rating tiles */
.benv2_td_ratings {
  display: flex;
  gap: var(--ux4g-space-6, 16px);
}

.benv2_td_rating {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ux4g-space-3, 6px);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
}

.benv2_td_rating_face {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  border: 2px solid transparent;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.benv2_td_rating.tone-good .benv2_td_rating_face {
  background-color: var(--ux4g-color-green-100, #ddf8d8);
  color: var(--ux4g-color-green-800);
}

.benv2_td_rating.tone-average .benv2_td_rating_face {
  background-color: var(--ux4g-color-cyan-50, #e6fffb);
  color: var(--ux4g-icon-status-info, #13c2c2);
}

.benv2_td_rating.tone-poor .benv2_td_rating_face {
  background-color: var(--ux4g-color-orange-100, #ffe7bf);
  color: var(--ux4g-color-orange-600, #fa8c16);
}

.benv2_td_rating.is-active .benv2_td_rating_face {
  border-color: currentColor;
  transform: translateY(-2px);
}

.benv2_td_rating_label {
  color: var(--ux4g-color-neutral-900);
}

/* textarea */
.benv2_td_textarea_wrap {
  position: relative;
  flex: 1;
  min-width: 0;
}

.benv2_td_textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  border: 1px solid var(--ux4g-color-neutral-200, #e5e5e5);
  border-radius: 12px;
  padding: var(--ux4g-space-5, 12px) var(--ux4g-space-6, 16px);
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--ux4g-color-neutral-900, #171717);
}

.benv2_td_textarea:focus {
  outline: none;
  border-color: var(--ux4g-color-primary-600-changed, #acc9ff);
}

.benv2_td_counter {
  position: absolute;
  bottom: 8px;
  right: 12px;
  font-size: 0.7rem;
  color: var(--ux4g-color-neutral-500, #737373);
}

.benv2_td_submit_row {
  display: flex;
  justify-content: center;
}

.benv2_td_submit {
  width: auto;
}

/* timeline */
.benv2_td_timeline_title {
  color: var(--ux4g-color-neutral-900, #171717);
  margin: 0 0 var(--ux4g-space-6, 16px);
}

.benv2_td_timeline {
  display: flex;
  flex-direction: column;
}

.benv2_td_tl_item {
  position: relative;
  display: flex;
  gap: var(--ux4g-space-5, 12px);
  padding-bottom: var(--ux4g-space-6, 16px);
}

.benv2_td_tl_item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 14px;
  bottom: 0;
  width: 2px;
  background-color: var(--ux4g-color-neutral-200, #e5e5e5);
}

.benv2_td_tl_dot {
  position: relative;
  z-index: 1;
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-top: 3px;
}

.benv2_td_tl_dot.tone-green {
  background-color: var(--ux4g-color-green-800);
}

.benv2_td_tl_dot.tone-orange {
  background-color: var(--ux4g-color-orange-600, #fa8c16);
}

.benv2_td_tl_dot.tone-cyan {
  background-color: var(--ux4g-icon-status-info, #13c2c2);
}

.benv2_td_tl_label {
  color: var(--ux4g-color-neutral-900, #171717);
  margin: 0;
}

.benv2_td_tl_time {
  color: var(--ux4g-color-neutral-500, #737373);
  margin: 2px 0 0;
}

/* ---------------- Ticket Details responsive ---------------- */
@media (max-width: 767px) {
  .benv2_td_panel {
    padding: var(--ux4g-space-6, 16px);
  }

  .benv2_td_grid {
    grid-template-columns: 1fr;
    gap: var(--ux4g-space-6, 16px);
  }

  .benv2_td_hide_pair {
    display: none;
  }

  .benv2_td_form_row {
    flex-direction: column;
    gap: var(--ux4g-space-4, 8px);
  }

  .benv2_td_form_label {
    flex: none;
    padding-top: 0;
  }

  .bene_digi_btn_mobile{
    font-size: 12px !important;
  }

  .benlogin_container {
    padding-top: 0px !important;
  }

  .uw-widget-custom-trigger{
    bottom: 75px !important;
    right: 10px;
  }

  .benv2_panel{
    margin-top: 15px;
  }
}