/* =================================================================== */
/* COMPONENT: Membership Widget                                        */
/* FILE:      membership-widget.css                                    */
/* =================================================================== */

/* * TABLE OF CONTENTS
 * -------------------------------------------------------------------
 * 1.0 Variables & Theming (:root)
 * 2.0 Wrappers (.hero__widget-container, .membership-wrapper)
 * 3.0 Main Widget Container (.membership-widget)
 * 4.0 Decoration Hook (.membership-widget__decoration)
 * 5.0 Header Area (.membership-widget__header, __title, __description)
 * 6.0 CTA Section (.membership-cta)
 * 7.0 Tabs & Panels (.membership-widget__tabs, __panel)
 * 8.0 Grid & Buttons (.membership-widget__grid, __button)
 * 9.0 Footer & Sub-footer (.membership-widget__footer, __subfooter)
 * 10.0 Modals (.membership-widget-modal)
 */

/* =================================================================== */
/* 1.0 Variables & Theming                                             */
/* =================================================================== */
:root {
  --mw-font-primary: var(--font-primary), sans-serif;
  --mw-font-display: "Barlow", sans-serif;
  --mw-font-display-condensed: "Barlow Condensed", sans-serif;
  --mw-radius: 5.7px;
  --mw-blur: 10px;
  --mw-color-text: #fbfbfc;
  --mw-color-border: #ecedf1;
  --mw-bg-glass: rgba(251, 251, 252, 0.1);
  --mw-bg-glass-hover: rgba(251, 251, 252, 0.4);
  --mw-bg-btn-secondary: rgba(32, 35, 53, 0.3);
  --mw-color-btn-secondary-hover: #202335;
  --mw-modal-radius: 5.12px;
  --mw-modal-color-border: #fbfbfc;
  --mw-modal-background: linear-gradient(
    61deg,
    #283470 0.87%,
    #283470 0.89%,
    #4959a5 44.04%,
    #283470 101.25%,
    #8f99c8 126%,
    #232a4e 147.44%,
    #4959a5 168.38%
  );
}

@media (min-width: 768px) {
  :root {
    --mw-modal-radius: 6.4px;
  }
}
@media (min-width: 1200px) {
  :root {
    --mw-modal-radius: 8px;
  }
}
@media (min-width: 1920px) {
  :root {
    --mw-modal-radius: 10px;
  }
}

/* =================================================================== */
/* 2.0 Wrappers                                                        */
/* =================================================================== */

.hero__widget-container {
  display: flex;
  margin: 0 auto;
  height: fit-content;
  width: 25rem;
  min-height: 650px;
}
@media screen and (min-width: 768px) {
  .hero__widget-container {
    width: 48.333rem;
  }
}

.membership-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
}
@media screen and (min-width: 768px) {
  .membership-wrapper {
    width: 48.333rem;
  }
}
@media screen and (min-width: 1200px) {
  .membership-wrapper {
    width: 43.5rem;
  }
}
@media screen and (min-width: 1920px) {
  .membership-wrapper {
    width: 58rem;
  }
}

.membership-wrapper--floating {
  width: 53.33rem;
  position: absolute;
  /* top: 30rem; */
  left: 50%;
  transform: translate(-50%);
  z-index: 2;
}
/* .page-membership .membership-wrapper--floating{
  top: 30rem;
} */
body:not(.page-membership) .membership-wrapper--floating {
  top: 5%;
}
/* Home Page widget floats to the left */
@media screen and (min-width: 1200px) {
  body:not(.page-membership) .membership-wrapper--floating {
    transform: translate(0);
    left: 2%;
    right: auto;
    top: 9%;
    width: 640px;
  }
}
@media (min-width: 1400px) {
  /* Membership page widget floats to the right */
  body.page-membership .membership-wrapper--floating {
    left: auto;
    right: -8%;
    top: 2%;
    transform: none;
  }
}

/* =================================================================== */
/* 3.0 Main Widget Container                                           */
/* =================================================================== */
/* .membership-wrapper--floating {
  width: 25rem;
} */
@media (min-width: 768px) {
  .membership-wrapper--floating {
    width: 48.333rem;
  }
}
.membership-wrapper--floating .membership-widget {
  display: flex;
  flex-direction: column;
  gap: 1.91667rem;
  position: relative;
  box-sizing: border-box;
  width: 25rem;
  margin: 0 auto;
  padding: 1.3rem;
  border-radius: var(--mw-radius);
  border: 2px solid var(--mw-color-border);
  background: var(--mw-bg-glass);
  backdrop-filter: blur(var(--mw-blur));
  -webkit-backdrop-filter: blur(var(--mw-blur));
  color: var(--mw-color-text);
  transition:
    border-color 0.3s ease,
    background-color 0.3s ease;
}
.membership-widget {
  display: flex;
  flex-direction: column;
  gap: 1.91667rem;
  position: relative;
  box-sizing: border-box;
  width: 25rem;
  margin: 0 auto;
  padding: 2rem 1rem;
  border-radius: var(--mw-radius);
  border: 2px solid var(--mw-color-border);
  background: var(--mw-bg-glass);
  backdrop-filter: blur(var(--mw-blur));
  -webkit-backdrop-filter: blur(var(--mw-blur));
  color: var(--mw-color-text);
  transition:
    border-color 0.3s ease,
    background-color 0.3s ease;
}
@media screen and (min-width: 768px) {
  .membership-wrapper--floating .membership-widget,
  .membership-widget {
    width: 35.333rem;
    padding: 2.333rem 2.91667rem;
  }
}
@media screen and (min-width: 1200px) {
  .membership-wrapper--floating .membership-widget,
  .membership-widget {
    width: 53.33rem;
  }
}
@media screen and (min-width: 1400px) {
  .membership-wrapper--floating .membership-widget,
  .membership-widget {
    width: 53.33rem;
  }
}
@media screen and (min-width: 1920px) {
  .membership-wrapper--floating .membership-widget,
  .membership-widget {
    width: 58rem;
    /* padding: 2.333rem 1.3rem; */
  }
}

.membership-widget--layout-hero {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%);
  z-index: 2;
}
@media screen and (min-width: 1200px) {
  .membership-widget--layout-hero {
    margin-left: -25%;
  }
}

/* =================================================================== */
/* 4.0 Decoration Hook                                                 */
/* =================================================================== */

.membership-widget__decoration {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  pointer-events: none;
  width: 5rem;
  height: 5rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* =================================================================== */
/* 5.0 Header Area                                                     */
/* =================================================================== */

.membership-widget__header {
  margin: 0;
  width: 100%;
  justify-content: center;
  display: flex;
}
/* @media screen and (min-width: 768px) {
  .membership-widget__header {
    width: 510px;
  }
}
@media screen and (min-width: 1920px) {
  .membership-widget__header {
    width: 661px;
  }
} */

.membership-widget__title {
  margin: 0 auto;
  color: inherit;
  text-align: center;
  font-style: normal;
  line-height: normal;
  font-size: 2.85rem !important;
}
@media screen and (min-width: 768px) {
  .membership-widget__title {
    font-size: 3.6625rem !important;
  }
}
@media screen and (min-width: 1200px) {
  .membership-widget__title {
    font-size: 4.4758333rem !important;
    width: 570px;
    margin: 0;
  }
}
@media screen and (min-width: 1920px) {
  .membership-widget__title {
    font-size: 4.9125rem !important;
    width: 100%;
    max-width: 661px;
  }
}

.membership-widget__description {
  margin: 0.2rem 0 0 0;
  max-width: 251px;
  color: inherit;
  font-family: var(--mw-font-primary);
  font-size: 1.1667rem;
  text-align: left;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
}
@media screen and (min-width: 768px) {
  .membership-widget__description {
    margin: 0 auto;
    font-size: 1.5rem !important;
    line-height: 26px;
    width: 510px;
    max-width: 510px;
  }
}
@media screen and (min-width: 1200px) {
  .membership-widget__description {
    font-size: 1.833rem !important;
    line-height: 28px;
    width: 524px;
    margin: 2rem 0;
  }
}
@media screen and (min-width: 1920px) {
  .membership-widget__description {
    font-size: 2rem !important;
    line-height: 35px;
    width: 100%;
    max-width: 591px;
  }
}

.membership-widget__text--strong {
  font-weight: 600;
}

/* =================================================================== */
/* 6.0 CTA Section                                                     */
/* =================================================================== */

.membership-cta {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  text-align: center;
  width: 100%;
}

.membership-cta p {
  font-family: var(--mw-font-primary);
  color: var(--Neutral-Indigo-100);
  font-size: 1.45833rem;
  font-weight: 600;
  margin: 0;
}
@media (min-width: 768px) {
  .membership-cta p {
    font-size: 1.875rem;
  }
}
@media (min-width: 1200px) {
  .membership-cta p {
    font-size: 2.291667rem;
  }
}
@media (min-width: 1920px) {
  .membership-cta p {
    font-size: 2.5rem;
  }
}

.membership-cta .btn-cta {
  display: inline-block;
  padding: 1.25rem;
  background: linear-gradient(
    82deg,
    rgba(161, 166, 174, 0.32) -17.88%,
    rgba(231, 231, 231, 0.48) -0.79%,
    rgba(229, 232, 237, 0.16) 33.39%,
    rgba(231, 231, 231, 0.4) 67.57%,
    rgba(235, 235, 235, 0.08) 84.66%
  );
  color: var(--Neutral-Indigo-100);
  font-family: var(--mw-font-display-condensed);
  font-size: 2.278333rem;
  font-style: normal;
  font-weight: 400;
  line-height: 46.588px;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 1px;
  border-radius: var(--mw-radius);
  border: 1.25px solid #fbfbfc;
  transition: transform 0.2s ease;
  width: fit-content;
  margin: 0 auto;
}
.membership-cta .btn-cta:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}
@media (min-width: 768px) {
  .membership-cta .btn-cta {
    font-size: 2.93rem;
  }
}
@media (min-width: 1200px) {
  .membership-cta .btn-cta {
    font-size: 3.580833rem;
  }
}
@media (min-width: 1920px) {
  .membership-cta .btn-cta {
    font-size: 3.90667rem;
  }
}

/* =================================================================== */
/* 7.0 Tabs & Panels                                                   */
/* =================================================================== */

.membership-widget__tabs {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  border-bottom: 1px solid var(--mw-color-border);
  position: relative;
}
@media screen and (min-width: 768px) {
  .membership-widget__tabs {
    gap: 1rem;
    width: 510px;
    max-width: 510px;
  }
}
@media screen and (min-width: 1200px) {
  .membership-widget__tabs {
    width: 470px;
    max-width: 467px;
  }
}
@media screen and (min-width: 1920px) {
  .membership-widget__tabs {
    min-width: 534px;
  }
}

.membership-widget__tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 37px;
  padding: 11px 20px;
  margin-top: 1rem;
  box-sizing: border-box;
  background-color: transparent;
  border: 1.141px solid transparent;
  border-bottom: none;
  border-radius: var(--mw-radius) var(--mw-radius) 0 0;
  color: inherit;
  font-family: var(--mw-font-primary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .membership-widget__tab {
    max-width: 130px;
    min-height: 54px;
    font-size: 1.165rem !important;
  }
}
@media screen and (min-width: 1200px) {
  .membership-widget__tab {
    max-width: 146px;
    font-size: 1rem !important;
  }
}
@media screen and (min-width: 1920px) {
  .membership-widget__tab {
    min-width: 170px;
    font-size: 1rem !important;
  }
}

.membership-widget__tab--active {
  border-color: var(--mw-color-text);
  font-weight: 700;
}

.membership-widget__panel {
  display: none;
  margin: 0 auto;
}

.membership-widget__panel--active {
  display: block;
  max-width: 291px;
}
@media screen and (min-width: 768px) {
  .membership-widget__panel--active {
    max-width: 510px;
  }
}

/* =================================================================== */
/* 8.0 Grid & Buttons                                                  */
/* =================================================================== */

.membership-widget__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  padding: 0;
  margin: 0;
  width: 100%;
}
@media screen and (min-width: 768px) {
  .membership-widget__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem 1rem;
    max-width: 388px;
    margin: 0 auto;
  }
}
/* @media screen and (min-width: 1200px) {
  .membership-widget__grid {
    max-width: 468px;
  }
}
@media screen and (min-width: 1920px) {
  .membership-widget__grid {
    max-width: 543px;
  }
} */

.membership-widget__grid li {
  list-style: none;
  display: flex;
  flex-direction: column;
}
.membership-widget__grid li:nth-child(odd) {
  align-items: flex-end;
}
.membership-widget__grid li:nth-child(even) {
  align-items: flex-start;
}

@media screen and (min-width: 768px) {
  .membership-widget__grid li:nth-child(odd),
  .membership-widget__grid li:nth-child(even) {
    align-items: center;
  }
  .membership-widget__grid li {
    max-width: 122px;
  }
}
@media screen and (min-width: 1200px) {
  .membership-widget__grid li {
    width: 146px;
    max-width: 146px;
  }
}

.membership-widget__button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 4rem;
  padding: 8px 0;
  gap: 10px;
  border-radius: var(--mw-radius);
  border: 1.141px solid var(--mw-color-text);
  background: rgba(251, 251, 252, 0.2);
  color: var(--mw-color-text);
  font-family: var(--mw-font-primary);
  text-decoration: none;
  transition: background-color 0.2s ease;
  cursor: pointer;
}
.membership-widget__button:hover {
  background: var(--mw-bg-glass-hover);
}
@media screen and (min-width: 768px) {
  .membership-widget__button {
    height: 4.5rem;
  }
}
@media screen and (min-width: 1200px) {
  .membership-widget__button {
    height: 55px;
  }
}

.membership-widget__amount {
  font-size: 1.1667rem;
}
@media screen and (min-width: 768px) {
  .membership-widget__amount {
    font-size: 1.5rem !important;
  }
}
@media screen and (min-width: 1200px) {
  .membership-widget__amount {
    font-size: 1.833rem !important;
  }
}
@media screen and (min-width: 1920px) {
  .membership-widget__amount {
    font-size: 2rem !important;
  }
}

.membership-widget__tier {
  display: block;
  width: 100px;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 500;
  height: 12px;
}

/* =================================================================== */
/* 9.0 Footer & Sub-footer                                             */
/* =================================================================== */

.membership-widget__footer {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.membership-widget__footer-title {
  color: var(--mw-color-text);
  text-align: center;
  font-family: var(--mw-font-primary);
  font-size: 1.458333rem;
  font-weight: 600;
  margin: 0;
}
@media screen and (min-width: 768px) {
  .membership-widget__footer-title {
    font-size: 1.875rem;
  }
}
@media screen and (min-width: 1200px) {
  .membership-widget__footer-title {
    font-size: 2.291667rem;
  }
  .membership-wrapper--footer
    .membership-widget__border
    .membership-widget
    .membership-widget__grid {
    max-width: 470px;
  }
}
@media screen and (min-width: 1920px) {
  .membership-widget__footer-title {
    font-size: 2.5rem;
  }
}

.membership-widget__footer-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
}
@media screen and (min-width: 768px) {
  .membership-widget__footer-actions {
    width: 22rem;
    margin: 0 auto;
  }
}
@media screen and (min-width: 1200px) {
  .membership-widget__footer-actions {
    width: 400px;
  }
}
@media screen and (min-width: 1920px) {
  .membership-widget__footer-actions {
    width: 500px;
  }
}

.membership-widget__button--secondary {
  flex-direction: row;
  height: 3rem;
  border-radius: 0.625rem;
  border: 1px solid #202335;
  background: var(--mw-bg-btn-secondary);
  font-size: 1.1667rem;
  font-weight: 500;
}
.membership-widget__button--secondary:hover {
  background-color: var(--mw-color-btn-secondary-hover);
}
@media screen and (min-width: 768px) {
  .membership-widget__button--secondary {
    width: 8.48rem;
    height: 3.44rem;
    padding: 1.82rem 4.88rem;
    font-size: 1.5rem !important;
  }
}
@media screen and (min-width: 1200px) {
  .membership-widget__button--secondary {
    font-size: 1.8333rem !important;
  }
}
@media screen and (min-width: 1920px) {
  .membership-widget__button--secondary {
    font-size: 2rem !important;
    border-radius: 0.85rem;
    border: 2px solid #202335;
    width: 14.2rem;
    height: 5.85rem;
    padding: 19.5px 52.5px;
  }
}

.membership-widget__subfooter {
  margin: 0 auto;
}
.membership-widget__subfooter p {
  color: var(--Neutral-Indigo-100);
  font-family: var(--mw-font-primary);
  font-size: 1.458333rem;
  font-weight: 700;
  text-align: center;
  margin: 0;
  letter-spacing: 1.2px;
}
@media (min-width: 768px) {
  .membership-widget__subfooter p {
    font-size: 1.875rem;
  }
}
@media (min-width: 1200px) {
  .membership-widget__subfooter p {
    font-size: 2.291667rem;
  }
}
@media (min-width: 1920px) {
  .membership-widget__subfooter p {
    font-size: 2.5rem;
  }
}

.membership-widget__subfooter a {
  color: var(--Neutral-Indigo-100);
  cursor: pointer;
  text-decoration: underline;
}

/* =================================================================== */
/* 10.0 Membership Widget Modals                                       */
/* Breakpoints: 768 (layout + MD art), 1200 (layout), 1621 (layout),   */
/* 1920 (LG art only). Typography is handled in the separate type file.*/
/* The main dialog owns the width; variants only set padding and art.  */
/* =================================================================== */


/* 10.1 Shell & overlay ------------------------------------------------ */

.membership-widget-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  inset: 0;
  justify-content: center;
  align-items: center;
}

.membership-widget-modal--visible {
  display: flex;
}

.membership-widget-modal__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}


/* 10.2 Dialog --------------------------------------------------------- */

.membership-widget-modal__dialog {
  position: relative;
  z-index: 1001;
  width: 25rem;
  height: fit-content;
  padding: 0 1rem 1rem 1rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  color: var(--mw-color-text);
  display: flex;
  flex-direction: column;
  gap: 2rem;
  justify-content: center;
  align-items: center;
}

/* Shared frame for check and DAF. Gradient border with radius needs
   layered backgrounds because border-image ignores border-radius. */
.membership-widget-modal__dialog--check,
.membership-widget-modal__dialog--daf {
  box-sizing: border-box;
  border: 2px solid transparent;
  border-radius: 5px;
  background:
    var(--dialog-art) center / cover no-repeat padding-box,
    linear-gradient(#fbfbfc1a, #fbfbfc1a) padding-box,
    linear-gradient(180deg, #ecedf1 0%, #b2b5c5 100%) border-box;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Mobile (base) art */
.membership-widget-modal__dialog--check {
  --dialog-art: image-set(
    url(/assets/images/eoyc/check-modal-bg-SM.webp) type("image/webp"),
    url(/assets/images/eoyc/check-modal-bg-SM.png) type("image/png")
  );
}

.membership-widget-modal__dialog--daf {
  --dialog-art: image-set(
    url(/assets/images/eoyc/daf-modal-bg-SM.webp) type("image/webp"),
    url(/assets/images/eoyc/daf-modal-bg-SM.png) type("image/png")
  );
}

@media (min-width: 768px) {
  .membership-widget-modal__dialog {
    width: 35rem;
  }

  .membership-widget-modal__dialog--check {
    padding: 0 6rem 3rem 6rem;
    --dialog-art: image-set(
      url(/assets/images/eoyc/check-modal-bg-MD.webp) type("image/webp"),
      url(/assets/images/eoyc/check-modal-bg-MD.png) type("image/png")
    );
  }

  .membership-widget-modal__dialog--daf {
    padding: 0 6rem 3rem 6rem;
    --dialog-art: image-set(
      url(/assets/images/eoyc/daf-modal-bg-MD.webp) type("image/webp"),
      url(/assets/images/eoyc/daf-modal-bg-MD.png) type("image/png")
    );
  }
}

@media (min-width: 1200px) {
  .membership-widget-modal__dialog {
    width: 48rem;
  }

  .membership-widget-modal__dialog--daf {
    padding: 0 4rem 3rem 4rem;
  }
}

@media (min-width: 1621px) {
  .membership-widget-modal__dialog {
    width: 52rem;
  }
}

/* LG art only */
@media (min-width: 1920px) {
  .membership-widget-modal__dialog--check {
    --dialog-art: image-set(
      url(/assets/images/eoyc/check-modal-bg-LG.webp) type("image/webp"),
      url(/assets/images/eoyc/check-modal-bg-LG.png) type("image/png")
    );
  }

  .membership-widget-modal__dialog--daf {
    --dialog-art: image-set(
      url(/assets/images/eoyc/daf-modal-bg-LG.webp) type("image/webp"),
      url(/assets/images/eoyc/daf-modal-bg-LG.png) type("image/png")
    );
  }
}


/* 10.3 Close button --------------------------------------------------- */

.membership-widget-modal__close,
.membership-widget-modal__close--check,
.membership-widget-modal__close--daf {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  cursor: pointer;
}

.membership-widget-modal__close svg,
.membership-widget-modal__close--check svg,
.membership-widget-modal__close--daf svg {
  width: 10.804px;
  height: 10.804px;
}

.membership-widget-modal__close svg path,
.membership-widget-modal__close--check svg path,
.membership-widget-modal__close--daf svg path {
  fill: var(--font-color-heading);
}

@media (min-width: 768px) {
  .membership-widget-modal__close svg,
  .membership-widget-modal__close--check svg,
  .membership-widget-modal__close--daf svg {
    width: 12.965px;
    height: 12.965px;
  }
}

@media (min-width: 1200px) {
  .membership-widget-modal__close svg,
  .membership-widget-modal__close--check svg,
  .membership-widget-modal__close--daf svg {
    width: 17.114px;
    height: 17.114px;
  }
}

@media (min-width: 1621px) {
  .membership-widget-modal__close svg,
  .membership-widget-modal__close--check svg,
  .membership-widget-modal__close--daf svg {
    width: 21.392px;
    height: 21.392px;
  }
}


/* 10.4 Text ----------------------------------------------------------- */
/* Font families, sizes and weights are candidates for the type file.   */

.membership-widget-modal__title {
  margin-top: 1rem;
  width: 100%;
  text-align: center;
  font-family: var(--font-secondary);
  color: var(--font-color-heading);
  font-size: 30px;
}

.membership-widget-modal__subtitle {
  color: var(--font-color-heading);
  text-align: left;
  font-weight: 400;
}

.membership-widget-modal__bold {
  font-weight: 700;
}

.membership-widget-modal__body-wrapper {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  width: 100%;
}


/* 10.5 Address boxes -------------------------------------------------- */
/* Check and DAF share the box styling but size differently.            */

.membership-widget-modal__body-wrapper > address,
.membership-widget-modal__daf-address {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid #f6f6f780;
  background-color: #f6f6f745;
  text-align: center;
  height: fit-content;
  max-width: 100%;
}

.membership-widget-modal__body-wrapper > address {
  width: 251px;
}

.membership-widget-modal__daf-address {
  width: 335px;
}

.membership-widget-modal__daf-address p {
  color: var(--font-color-heading);
}

@media (min-width: 768px) {
  .membership-widget-modal__body-wrapper > address {
    width: 335px;
  }
}

@media (min-width: 1621px) {
  .membership-widget-modal__body-wrapper > address {
    width: 419px;
  }
}


/* 10.9 Not in pasted markup. Verify before deleting. ------------------ */

/* Generic body container */
.membership-widget-modal__body {
  display: flex;
  flex-direction: column;
  gap: 5.12px;
}

.membership-widget-modal__body p {
  color: var(--font-color-heading);
  text-align: left;
  font-weight: 400;
}

.membership-widget-modal__body address,
.membership-widget-modal__body dl {
  text-align: center;
}

@media (min-width: 768px) {
  .membership-widget-modal__body {
    width: 23rem;
    margin: 0;
  }
}

.membership-widget-modal__body-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  width: 100%;
}

@media (min-width: 768px) {
  .membership-widget-modal__body-content {
    gap: 20px;
  }
}

@media (min-width: 1200px) {
  .membership-widget-modal__body-content {
    gap: 40px;
  }
}

.membership-widget-modal__body-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 7px;
}

@media (min-width: 768px) {
  .membership-widget-modal__body-info {
    flex-direction: row;
    width: 100%;
    margin: 0 auto;
  }
}

.membership-widget-modal__body-text {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .membership-widget-modal__body-text {
    gap: 15px;
  }
}

@media (min-width: 1200px) {
  .membership-widget-modal__body-text {
    gap: 20px;
  }
}

@media (min-width: 1621px) {
  .membership-widget-modal__body-text {
    gap: 25px;
  }
}

/* CTA button. min/max height removed for now; reassess later. */
.membership-widget-modal__button {
  color: #fcfcfc;
  font-family: var(--font-tertiary);
  font-size: var(--fs-h6);
  font-style: normal;
  font-weight: 400;
  line-height: 29.816px;
  letter-spacing: 0.398px;
  text-transform: uppercase;
  display: flex;
  height: 38.4px;
  width: 200px;
  padding: 0 5.12px;
  margin: 0 auto;
  justify-content: center;
  align-items: center;
  border-radius: 5.12px;
  border: 0.96px solid #fcfcfc;
  background: linear-gradient(
    270deg,
    #283470 0%,
    #344a78 20%,
    #4a6396 30%,
    #7ea0d2 50%,
    #4a6396 70%,
    #344a78 80%,
    #283470 100%
  );
}

@media (min-width: 1200px) {
  .membership-widget-modal__button {
    width: 225px;
    height: 48px;
  }
}

@media (min-width: 1621px) {
  .membership-widget-modal__button {
    line-height: 37.271px;
    letter-spacing: 0.497px;
    width: 280px;
    height: 68px;
  }
}