@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&display=swap');

/* ============================================================
   Maxima – Membership Levels
   Isolated enhancement for /membership-levels/ only.
   PMPro keeps ownership of prices and checkout links.
   ============================================================ */


/* ---------- Level heading ---------- */
#pmpro_levels_table .mx-level-name,
.pmpro_levels_table .mx-level-name {
  vertical-align: top;
}

#pmpro_levels_table .mx-level-heading,
.pmpro_levels_table .mx-level-heading {
  display: flex;
  min-height: 76px;
  flex-direction: column;
  justify-content: flex-end;
  gap: 5px;
  margin: 0;
}

#pmpro_levels_table .mx-level-kicker,
.pmpro_levels_table .mx-level-kicker {
  display: block;
  font-family: var(--mx-font-family, "Raleway", system-ui, sans-serif);
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#pmpro_levels_table .mx-level-title,
.pmpro_levels_table .mx-level-title {
  display: block;
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 2.65vw, 46px);
  line-height: 0.98;
  font-weight: 500;
  letter-spacing: -0.025em;
  white-space: nowrap;
}

#pmpro_level-1 :is(.mx-level-kicker, .mx-level-title) {
  color: #7f9f93;
}

#pmpro_level-2 :is(.mx-level-kicker, .mx-level-title) {
  color: #ca8f1c;
}

#pmpro_level-3 :is(.mx-level-kicker, .mx-level-title) {
  color: #b52352;
}

/* ---------- Images ---------- */
#pmpro_levels_table .mx-level-image,
.pmpro_levels_table .mx-level-image {
  width: 100%;
  margin: 20px 0 4px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: 0 8px 22px rgba(26, 31, 30, 0.10);
}

#pmpro_levels_table .mx-level-image img,
.pmpro_levels_table .mx-level-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#pmpro_level-1 .mx-level-image img {
  object-position: 50% 50%;
}

#pmpro_level-2 .mx-level-image img {
  object-position: 50% 48%;
}

#pmpro_level-3 .mx-level-image img {
  object-position: 50% 10%;
}


/* ---------- Price ---------- */
#pmpro_levels_table .mx-level-price,
.pmpro_levels_table .mx-level-price {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin: 0 !important;
  padding: 0;
  line-height: 1;
  white-space: nowrap;
}

#pmpro_levels_table .mx-price-currency,
.pmpro_levels_table .mx-price-currency {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
}

#pmpro_levels_table .mx-price-amount,
.pmpro_levels_table .mx-price-amount {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size: clamp(42px, 3.3vw, 54px);
  font-weight: 500;
  line-height: 0.9;
  letter-spacing: -0.045em;
}

#pmpro_levels_table .mx-price-period,
.pmpro_levels_table .mx-price-period {
  margin-left: 2px;
  font-family: var(--mx-font-family, "Raleway", system-ui, sans-serif);
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.01em;
}

#pmpro_levels_table :is(.mx-price-currency, .mx-price-amount, .mx-price-period),
.pmpro_levels_table :is(.mx-price-currency, .mx-price-amount, .mx-price-period) {
  color: #111111;
}

/* Price and button are kept in the same flow: one blank line between them. */
#pmpro_levels_table .mx-level-price-cell,
.pmpro_levels_table .mx-level-price-cell {
  min-height: 0;
  vertical-align: top;
}

#pmpro_levels_table .mx-level-price-cell > .pmpro_btn,
.pmpro_levels_table .mx-level-price-cell > .pmpro_btn {
  display: block;
  width: 100%;
  margin-top: 18px !important;
  margin-bottom: 0 !important;
}

#pmpro_levels_table .mx-level-actions,
.pmpro_levels_table .mx-level-actions {
  vertical-align: top;
}

/* ---------- Level-specific Maxima button colours ---------- */
#pmpro_level-1 :is(.pmpro_btn-select, .pmpro_btn-outline) {
  background: #8fae9f !important;
  border-color: #8fae9f !important;
  color: #fff !important;
}

#pmpro_level-2 :is(.pmpro_btn-select, .pmpro_btn-outline) {
  background: #d09a2d !important;
  border-color: #d09a2d !important;
  color: #fff !important;
}

#pmpro_level-3 :is(.pmpro_btn-select, .pmpro_btn-outline) {
  background: #b5335c !important;
  border-color: #b5335c !important;
  color: #fff !important;
}

#pmpro_level-1 :is(.pmpro_btn-select, .pmpro_btn-outline):hover,
#pmpro_level-1 :is(.pmpro_btn-select, .pmpro_btn-outline):focus-visible {
  background: #789b8b !important;
  border-color: #789b8b !important;
}

#pmpro_level-2 :is(.pmpro_btn-select, .pmpro_btn-outline):hover,
#pmpro_level-2 :is(.pmpro_btn-select, .pmpro_btn-outline):focus-visible {
  background: #b98322 !important;
  border-color: #b98322 !important;
}

#pmpro_level-3 :is(.pmpro_btn-select, .pmpro_btn-outline):hover,
#pmpro_level-3 :is(.pmpro_btn-select, .pmpro_btn-outline):focus-visible {
  background: #992548 !important;
  border-color: #992548 !important;
}

/* ---------- Benefits ---------- */
#pmpro_levels_table .mx-level-benefits,
.pmpro_levels_table .mx-level-benefits {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(31, 42, 42, 0.14);
  color: #24302f;
  text-align: left;
  font-size: 16px;
  line-height: 1.65;
}

#pmpro_levels_table .mx-level-benefits-title,
.pmpro_levels_table .mx-level-benefits-title {
  margin: 0 0 12px !important;
  color: #24302f !important;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 700;
}

#pmpro_levels_table .mx-level-benefits-content > :first-child,
.pmpro_levels_table .mx-level-benefits-content > :first-child {
  margin-top: 0;
}

#pmpro_levels_table .mx-level-benefits-content > :last-child,
.pmpro_levels_table .mx-level-benefits-content > :last-child {
  margin-bottom: 0;
}

#pmpro_levels_table .mx-level-benefits ul,
.pmpro_levels_table .mx-level-benefits ul {
  margin: 0;
  padding-left: 19px;
}

#pmpro_levels_table .mx-level-benefits li,
.pmpro_levels_table .mx-level-benefits li {
  margin: 0 0 7px;
}

#pmpro_levels_table .mx-level-benefits li:last-child,
.pmpro_levels_table .mx-level-benefits li:last-child {
  margin-bottom: 0;
}

#pmpro_level-1 .mx-level-benefits li::marker {
  color: #789b8b;
}

#pmpro_level-2 .mx-level-benefits li::marker {
  color: #b98322;
}

#pmpro_level-3 .mx-level-benefits li::marker {
  color: #992548;
}

@media (max-width: 1024px) {
  /* Give stacked level cards clear breathing room on tablet and phone.
     row-gap covers grid/flex layouts; margin-bottom covers the block layout
     used by the phone breakpoint below. Desktop remains untouched. */
  #pmpro_levels_table tbody,
  .pmpro_levels_table tbody {
    row-gap: 20px;
  }

  #pmpro_levels_table tbody tr.mx-level-card,
  .pmpro_levels_table tbody tr.mx-level-card {
    margin-bottom: 20px;
  }

  #pmpro_levels_table tbody tr.mx-level-card:last-child,
  .pmpro_levels_table tbody tr.mx-level-card:last-child {
    margin-bottom: 0;
  }

  #pmpro_levels_table .mx-level-heading,
  .pmpro_levels_table .mx-level-heading {
    min-height: 68px;
  }

  #pmpro_levels_table .mx-level-title,
  .pmpro_levels_table .mx-level-title {
    font-size: clamp(30px, 4vw, 38px);
  }
}

@media (max-width: 768px) {
  #pmpro_levels_table .mx-level-heading,
  .pmpro_levels_table .mx-level-heading {
    min-height: auto;
  }

  #pmpro_levels_table .mx-level-title,
  .pmpro_levels_table .mx-level-title {
    font-size: 36px;
  }

  #pmpro_levels_table .mx-level-image,
  .pmpro_levels_table .mx-level-image {
    margin-top: 16px;
    border-radius: 16px;
  }


  #pmpro_levels_table .mx-level-benefits,
  .pmpro_levels_table .mx-level-benefits {
    margin-top: 18px;
    padding-top: 18px;
    font-size: 16px;
    line-height: 1.65;
  }
}

/* ---------- Phone layout ----------
   PMPro turns tables into labelled two-column grids below 768px.
   Membership Levels already has its own Maxima card flow, so disable only
   that PMPro phone-table transformation here. Tablet/desktop stay unchanged. */
@media (max-width: 767px) {
  #pmpro_levels_table,
  .pmpro_levels_table,
  #pmpro_levels_table tbody,
  .pmpro_levels_table tbody {
    display: block !important;
    width: 100% !important;
  }

  #pmpro_levels_table thead,
  .pmpro_levels_table thead {
    display: none !important;
  }

  #pmpro_levels_table tbody tr.mx-level-card,
  .pmpro_levels_table tbody tr.mx-level-card {
    display: block !important;
    width: 100% !important;
  }

  #pmpro_levels_table tbody tr.mx-level-card > th,
  #pmpro_levels_table tbody tr.mx-level-card > td,
  .pmpro_levels_table tbody tr.mx-level-card > th,
  .pmpro_levels_table tbody tr.mx-level-card > td {
    display: block !important;
    grid-template-columns: none !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  #pmpro_levels_table tbody tr.mx-level-card > th::before,
  #pmpro_levels_table tbody tr.mx-level-card > td::before,
  .pmpro_levels_table tbody tr.mx-level-card > th::before,
  .pmpro_levels_table tbody tr.mx-level-card > td::before {
    content: none !important;
    display: none !important;
  }

  /* The button is moved into the price cell by Maxima JS, so the original
     PMPro action cell must not reserve empty space on phones. */
  #pmpro_levels_table .mx-level-actions,
  .pmpro_levels_table .mx-level-actions {
    display: none !important;
  }

  #pmpro_levels_table .mx-level-name,
  #pmpro_levels_table .mx-level-price-cell,
  .pmpro_levels_table .mx-level-name,
  .pmpro_levels_table .mx-level-price-cell {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


@media (max-width: 768px) {
  #pmpro_level-3 .mx-level-image img {
    object-position: 50% 8%;
  }
}


/* ---------- Match checkout card width on tablet/mobile ----------
   PMPro can be rendered either directly or through the Gutenberg
   .wp-block-pmpro-levels-page wrapper. The visible level cards sit inside
   .pmpro_level_group > .pmpro_card_content, whose default horizontal
   padding was the real reason the levels stayed narrower than checkout. */
@media (max-width: 980px) {
  #mx-content {
    padding-left: 22px;
    padding-right: 22px;
  }

  /* Match the checkout responsive container. */
  #mx-content > .wp-block-pmpro-levels-page,
  #mx-content > .pmpro,
  #mx-content .wp-block-pmpro-levels-page {
    width: 100% !important;
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }

  /* Every PMPro layer inside the levels block must be allowed to use the
     full container width. */
  #mx-content .wp-block-pmpro-levels-page > .pmpro,
  #pmpro_levels,
  #pmpro_levels > .pmpro_section_content,
  #pmpro_levels .pmpro_level_group,
  #pmpro_levels .pmpro_level_group > .pmpro_card_content,
  #pmpro_levels_table,
  .pmpro_levels_table {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
  }

  /* Public Shell and PMPro both add horizontal padding around the levels.
     Checkout does not have these extra nested gutters, so remove only the
     horizontal part on this page. Vertical spacing stays intact. */
  body:not(.mx-checkout-maxima) #pmpro_levels {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #pmpro_levels .pmpro_level_group {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #pmpro_levels .pmpro_level_group > .pmpro_card_content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

@media (max-width: 767px) {
  #mx-content {
    padding-left: 14px;
    padding-right: 14px;
  }
}




/* ---------- Membership Levels: outer card glass ----------
   The glass belongs to the complete Maxima level container, not to PMPro's
   internal table cells. Keep th/td transparent so there is no inner white box. */
#pmpro_levels_table tbody tr.mx-level-card,
.pmpro_levels_table tbody tr.mx-level-card {
  background: var(--mx-glass-bg, rgba(255, 255, 255, 0.50)) !important;
  border: 1px solid var(--mx-glass-brd, rgba(255, 255, 255, 0.46)) !important;
  backdrop-filter: blur(var(--mx-glass-blur, 12px));
  -webkit-backdrop-filter: blur(var(--mx-glass-blur, 12px));
}

/* PMPro normally paints each table cell with its base colour. Those cells
   must stay transparent so the single outer glass surface is visible. */
#pmpro_levels_table tbody tr.mx-level-card > th,
#pmpro_levels_table tbody tr.mx-level-card > td,
.pmpro_levels_table tbody tr.mx-level-card > th,
.pmpro_levels_table tbody tr.mx-level-card > td {
  background: transparent !important;
  background-color: transparent !important;
}


/* ---------- Natural card bottom spacing ----------
   Card height is calculated from the real visible content by
   membership-levels.js. This CSS only makes the inline height predictable. */
#pmpro_levels_table tbody tr.mx-level-card,
.pmpro_levels_table tbody tr.mx-level-card {
  box-sizing: border-box;
  min-height: 0 !important;
}


/* ---------- Subscription rights note ---------- */
#pmpro_levels .mx-levels-subscription-note {
  width: 100%;
  box-sizing: border-box;
  margin: 22px 0 0;
  padding: 12px 14px 12px 15px;
  color: #38433f;
  background: rgba(255, 255, 255, 0.52);
  backdrop-filter: blur(var(--mx-glass-blur, 12px));
  -webkit-backdrop-filter: blur(var(--mx-glass-blur, 12px));
  border: 1px solid rgba(255, 255, 255, 0.68);
  border-left: 3px solid #8fae9f;
  border-radius: 12px;
  font-size: 14px;
  font-style: italic;
  line-height: 1.55;
  text-align: left;
}

@media (max-width: 767px) {
  #pmpro_levels .mx-levels-subscription-note {
    margin-top: 18px;
    font-size: 14px;
  }
}