/*
 * Homepage Membership CMS Media refinements.
 */


/* ============================================================
   1. MEMBERSHIP MEDIA ICONS
   ============================================================ */

/*
 * No decorative white circle/background.
 * Keep a controlled layout box but allow PNG artwork to scale
 * enough to compensate for transparent padding inside uploads.
 */

.mrsigm-tab-icon,
.mrsigm-detail-icon {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;

  padding: 0 !important;
  margin: 0 12px 0 0 !important;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  overflow: visible !important;
}

.mrsigm-tab-icon img,
.mrsigm-detail-icon img {
  display: block !important;

  width: 42px !important;
  height: 42px !important;
  max-width: none !important;
  max-height: none !important;

  object-fit: contain !important;

  margin: 0 !important;
  padding: 0 !important;

  /*
   * Uploaded PNGs contain transparent padding.
   * Moderate scaling makes the actual symbol readable without
   * increasing the surrounding layout excessively.
   */
  transform: scale(1.35);
  transform-origin: center;
}


/* Keep heading icon aligned cleanly with heading text. */

.mrsigm-detail-title {
  display: flex;
  align-items: center;
}

.mrsigm-detail-title .mrsigm-detail-icon {
  flex: 0 0 42px;
}


/* ============================================================
   2. REAL HIGHLIGHT LIST ONLY
   ============================================================ */

/*
 * IMPORTANT:
 *
 * Use direct-child selectors.
 *
 * JS moves .tabsPills inside .mrsigm-fee-description.
 * The subtype capsule itself contains <ul><li>, so a generic
 * ".mrsigm-fee-description li" selector incorrectly puts the
 * checkmark inside capsule buttons.
 *
 * Fee Structure Highlights are direct:
 *
 * .mrsigm-fee-description
 *   > h4
 *   > ul
 *      > li
 */

.mrsigm-fee-description > ul {
  list-style: none !important;
  margin: 10px 0 0 !important;
  padding: 0 !important;
}

.mrsigm-fee-description > ul > li {
  position: relative !important;

  display: block !important;

  margin: 0 0 10px !important;
  padding: 0 0 0 27px !important;

  min-height: 18px;

  line-height: 1.4 !important;
}

.mrsigm-fee-description > ul > li::before {
  content: "" !important;

  position: absolute !important;
  left: 0 !important;
  top: 50% !important;

  transform: translateY(-50%) !important;

  width: 17px !important;
  height: 17px !important;

  border: 0 !important;
  border-radius: 0 !important;

  background-color: transparent !important;
  background-image: var(--mrsigm-highlight-icon) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;

  color: transparent !important;

  font-size: 0 !important;
  line-height: 0 !important;

  display: block !important;
}


/* ============================================================
   3. REMOVE HIGHLIGHT PSEUDO ELEMENTS FROM SUBTYPE CAPSULE
   ============================================================ */

.mrsigm-fee-description .tabsPills li::before,
.mrsigm-fee-description .tabsPills .nav-item::before {
  content: none !important;
  display: none !important;
  background: none !important;
}


/* ============================================================
   4. CLEAN SUBTYPE CAPSULE
   ============================================================ */

.mrsigm-detail .tabsPills {
  display: block !important;

  width: fit-content !important;
  max-width: 100% !important;

  margin: 18px 0 26px !important;
  padding: 4px !important;

  background: #fff !important;

  border: 0 !important;
  border-radius: 999px !important;

  box-sizing: border-box !important;
  overflow: hidden !important;
}

.mrsigm-detail .tabsPills .nav-tabs {
  display: flex !important;
  align-items: center !important;

  width: auto !important;

  margin: 0 !important;
  padding: 0 !important;

  gap: 2px !important;

  list-style: none !important;
  border: 0 !important;

  flex-wrap: nowrap !important;
}

.mrsigm-detail .tabsPills .nav-item {
  position: static !important;

  margin: 0 !important;
  padding: 0 !important;

  flex: 0 0 auto !important;
}

.mrsigm-detail .tabsPills .nav-link {
  position: static !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 38px !important;

  margin: 0 !important;
  padding: 8px 17px !important;

  border: 0 !important;
  border-radius: 999px !important;

  background: transparent !important;

  line-height: 1.2 !important;
  white-space: nowrap !important;

  box-shadow: none !important;
}

.mrsigm-detail .tabsPills .nav-link.active {
  background: #c8ebff !important;
  border: 0 !important;
  border-radius: 999px !important;
}


/* Corporate has three labels, so distribute space neatly. */

.mrsigm-fee-panel[data-membership-key="corporate"] .tabsPills {
  width: 100% !important;
}

.mrsigm-fee-panel[data-membership-key="corporate"] .tabsPills .nav-tabs {
  width: 100% !important;
}

.mrsigm-fee-panel[data-membership-key="corporate"] .tabsPills .nav-item {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

.mrsigm-fee-panel[data-membership-key="corporate"] .tabsPills .nav-link {
  width: 100% !important;

  padding-left: 10px !important;
  padding-right: 10px !important;
}


/* Individual has two options: keep its capsule naturally compact. */

.mrsigm-fee-panel[data-membership-key="individual"] .tabsPills {
  width: fit-content !important;
}

.mrsigm-fee-panel[data-membership-key="individual"] .tabsPills .nav-item {
  flex: 0 0 auto !important;
}


/* ============================================================
   Final left membership card alignment
   ============================================================ */

.mrsigm-left .mrsigm-tab {
  display: flex !important;
  align-items: center !important;
}

.mrsigm-left .mrsigm-tab .mrsigm-tab-icon {
  flex: 0 0 42px !important;

  width: 42px !important;
  height: 42px !important;

  margin: 0 18px 0 0 !important;

  align-self: center !important;
}

.mrsigm-left .mrsigm-tab .middContent {
  flex: 1 1 auto !important;
  min-width: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}

.mrsigm-left .mrsigm-tab .middContent h3 {
  margin-top: 0 !important;
}

.mrsigm-left .mrsigm-tab > b {
  flex: 0 0 auto !important;
  margin-left: 18px !important;
}


/* ============================================================
   Corporate subtype capsule
   Give long International label more room.
   ============================================================ */

.mrsigm-fee-panel[data-membership-key="corporate"] .tabsPills {
  width: 100% !important;
  max-width: none !important;

  overflow: visible !important;
}

.mrsigm-fee-panel[data-membership-key="corporate"] .tabsPills .nav-tabs {
  display: grid !important;

  grid-template-columns:
    minmax(145px, 1fr)
    minmax(125px, .85fr)
    minmax(235px, 1.55fr) !important;

  width: 100% !important;

  gap: 2px !important;
}

.mrsigm-fee-panel[data-membership-key="corporate"] .tabsPills .nav-item {
  width: 100% !important;
  min-width: 0 !important;
}

.mrsigm-fee-panel[data-membership-key="corporate"] .tabsPills .nav-link {
  width: 100% !important;
  min-width: 0 !important;

  padding: 8px 10px !important;

  white-space: nowrap !important;

  overflow: visible !important;
  text-overflow: clip !important;
}


/* Keep capsule safely inside green card on slightly smaller widths. */

@media (max-width: 1400px) {
  .mrsigm-fee-panel[data-membership-key="corporate"] .tabsPills .nav-tabs {
    grid-template-columns:
      minmax(130px, 1fr)
      minmax(115px, .85fr)
      minmax(210px, 1.5fr) !important;
  }

  .mrsigm-fee-panel[data-membership-key="corporate"] .tabsPills .nav-link {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }
}


/* ============================================================
   Original membership layout + modest left-card spacing
   ============================================================ */

/*
 * Leave original homepage column proportions untouched.
 * Only increase space between the grey membership cards.
 */
.mrsigm-left {
  gap: 20px !important;
}

/*
 * Keep each left membership card naturally sized by the
 * original homepage CSS.
 */
.mrsigm-left .mrsigm-tab {
  height: auto !important;
  min-height: initial !important;
}

/*
 * Preserve the corrected horizontal icon/content alignment.
 */
.mrsigm-left .mrsigm-tab {
  display: flex !important;
  align-items: center !important;
}

.mrsigm-left .mrsigm-tab .mrsigm-tab-icon {
  align-self: center !important;
}


/* ============================================================
   Original membership layout + modest left-card spacing
   ============================================================ */

/*
 * Leave original homepage column proportions untouched.
 * Only increase space between the grey membership cards.
 */
.mrsigm-left {
  gap: 20px !important;
}

/*
 * Keep each left membership card naturally sized by the
 * original homepage CSS.
 */
.mrsigm-left .mrsigm-tab {
  height: auto !important;
  min-height: initial !important;
}

/*
 * Preserve the corrected horizontal icon/content alignment.
 */
.mrsigm-left .mrsigm-tab {
  display: flex !important;
  align-items: center !important;
}

.mrsigm-left .mrsigm-tab .mrsigm-tab-icon {
  align-self: center !important;
}