/*
Theme Name: Sweti Child
Template: Divi
*/

/* ==========================================================================
   SUMMIT ATHLETIC CLUB — combined stylesheet
   Part 1: Header / nav (incl. mega-menu hover fix)
   Part 2: Plan cards + signup form (Sync Acquire "SA Basic")
   This is a complete style.css (theme header included at the top).
   ========================================================================== */

/* ##########################################################################
   PART 1 — HEADER / NAV
   ########################################################################## */

/* ==========================================================================
   SUMMIT ATHLETIC CLUB — Header/Nav CSS
   Targets the exported Divi header template markup (et_pb_* classes)
   Paste into Theme Builder → Theme Options → Custom CSS
   ========================================================================== */

/* ---- Fonts (skip if already declared globally from the type-scale work) ---- */
.et_pb_section_0_tb_header {
  font-family: 'Raleway', sans-serif;
}

/* --------------------------------------------------------------------------
   1. UTILITY BAR — Join Now / Free Trial joined capsule button
   -------------------------------------------------------------------------- */
.et_pb_row_0_tb_header {
  display: flex;
  justify-content: flex-end;
  padding: 12px 40px;
}

.et_pb_group_0_tb_header {
  display: flex;
}

.et_pb_link_0_tb_header,
.et_pb_link_1_tb_header {
  font-family: 'Raleway', sans-serif;
  font-size: 18px;
  font-weight: 400;
  padding: 9px 18px;
  border: 2px solid #FB2A21;
  text-decoration: none;
  line-height: 1;
}
.et_pb_link_0_tb_header .et_pb_link_text p,
.et_pb_link_1_tb_header .et_pb_link_text p {
  margin: 0;
}

/* Join Now — solid red, rounded on the left only (joins seamlessly to Free Trial) */
.et_pb_link_0_tb_header {
  background-color: #FB2A21;
  color: #ffffff;
  border-radius: 750px 0 0 750px;
}

/* Free Trial — white bg, red text, rounded on the right only */
.et_pb_link_1_tb_header {
  background-color: #ffffff;
  color: #FB2A21;
  border-radius: 0 750px 750px 0;
}

/* --------------------------------------------------------------------------
   2. MAIN NAV ROW — logo + menu layout
   -------------------------------------------------------------------------- */
.et_pb_row_1_tb_header {
  display: flex;
  align-items: center;
  padding: 0 20px 12px;
  position: relative; /* anchor point for centering the mega-menu, see §4 */
}

.et_pb_image_0_tb_header img {
  height: 82px;          /* matches client site (~256x82 at desktop) */
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
/* Desktop: the logo column must not shrink (it was being squeezed to ~213px
   wide, which made the logo look smaller/cropped than the client's) */
@media (min-width: 1101px) {
  .et_pb_column_1_tb_header { flex: 0 0 auto !important; }
  .et_pb_image_0_tb_header img { max-width: none; }
}
/* 981-1100px: menu + logo have to share one row, so the logo steps down */
@media (min-width: 981px) and (max-width: 1100px) {
  .et_pb_image_0_tb_header img { height: 62px; }
}

/* --------------------------------------------------------------------------
   3. TOP-LEVEL MENU LINKS
   -------------------------------------------------------------------------- */
.et_pb_menu_0_tb_header .et-menu-nav > .et-menu {
  flex-wrap: nowrap !important;
}
.et_pb_menu_0_tb_header .et-menu-nav > .et-menu > li > a {
  font-family: 'Raleway', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #000000;
  text-transform: none;
  padding: 10px 10px;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.et_pb_menu_0_tb_header .et-menu-nav > .et-menu > li > a:hover {
  color: #FB2A21;
}
.et_pb_menu_0_tb_header .et-menu-nav > .et-menu > li.current-menu-item > a {
  color: #FB2A21;
}

/* Client site uses a clean custom SVG chevron (viewBox 0 0 12 12, simple
   V-path, stroke="currentColor") instead of Divi's default ETmodules
   icon-font glyph. Suppressing Divi's ::after and replacing it with a
   CSS-mask version of the same SVG so it inherits text color automatically
   (black by default, red on hover, no separate color rule needed). */
.et_pb_menu_0_tb_header .et-menu-nav > .et-menu > li.menu-item-has-children > a::after {
  content: none !important;
}
.et_pb_menu_0_tb_header .et-menu-nav > .et-menu > li.menu-item-has-children > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.et_pb_menu_0_tb_header .et-menu-nav > .et-menu > li.menu-item-has-children > a::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M1.50002 4L6.00002 8L10.5 4' stroke-width='1.5' stroke='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M1.50002 4L6.00002 8L10.5 4' stroke-width='1.5' stroke='black'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  order: 2; /* chevron AFTER the link text, like the client site */
}

/* --------------------------------------------------------------------------
   4. MEGA-MENU DROPDOWNS — Amenities & Training only
   Centered under the full nav bar, multi-column layout via the
   menu-group-label items. Scoped to these two menu-item IDs specifically
   so Locations/Contact (§5) are untouched.
   -------------------------------------------------------------------------- */

/* Break Divi's default relative-positioned <li> AND the Divi-internal
   wrappers between it and the nav row (.et_pb_menu_inner_container,
   .et_pb_menu, .et_pb_column_2_tb_header all ship position:relative by
   default and are closer in the DOM than our row, so without this the
   browser anchors centering to the narrow menu column instead of the
   full header row, and the panel overflows off-screen). This is what
   allows true centering instead of left-aligning under the word. */
.menu-item-35,
.menu-item-53,
.et_pb_menu_inner_container,
.et_pb_menu_0_tb_header,
.et_pb_column_2_tb_header {
  position: static !important;
}

.menu-item-35 > .sub-menu,
.menu-item-53 > .sub-menu {
  position: absolute !important;
  left: 50% !important;
  top: 100% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  flex-wrap: nowrap;
  width: min(1100px, calc(100vw - 40px)); /* fixed canvas width — always full width regardless of column count, so 2-col and 3-col dropdowns share the same center point */
  background: #ffffff;
  border-top: none !important; /* overrides Divi's default .nav li ul red line-color rule */
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  padding: 32px 8px;
  z-index: 999;

  /* Hidden until hover/open state — adjust to match however your
     Divi menu module toggles visibility (class or inline style) */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}
.menu-item-35:hover > .sub-menu,
.menu-item-53:hover > .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Closed panels must not catch the mouse. Without this, the invisible
   panel (opacity 0, ~1100px wide, 250-485px tall) was still hoverable
   through its nested column lists (see the visibility note in the nested
   sub-menu rule below), so moving the mouse anywhere across that empty area
   far below the nav opened the dropdown. */
.menu-item-35 > .sub-menu,
.menu-item-53 > .sub-menu {
  pointer-events: none;
}
.menu-item-35:hover > .sub-menu,
.menu-item-53:hover > .sub-menu {
  pointer-events: auto;
}

/* Hover bridge. The panel anchors to the full header row (position: static
   on the li — see above), so its top edge sits ~48px below the menu item
   itself. Without a bridge, the mouse leaves the li on the way down, hover
   is lost, and the panel closes before the pointer reaches it. This
   invisible strip fills that gap; it only exists while the panel is open
   (visibility:hidden removes it from hit-testing when closed). */
.menu-item-35 > .sub-menu::before,
.menu-item-53 > .sub-menu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -52px;
  height: 52px;
}

/* Each column = one menu-group-label item */
.menu-item-35 > .sub-menu > .menu-group-label,
.menu-item-53 > .sub-menu > .menu-group-label {
  flex: 1;
  padding: 0 24px;
  list-style: none;
}

/* Column heading — bold, Anton, non-interactive look.
   Divi auto-injects a dropdown-arrow icon font character via ::after on
   any .menu-item-has-children link; these are static column headers,
   not expandable triggers, so that arrow needs suppressing. */
.menu-item-35 > .sub-menu > .menu-group-label > a,
.menu-item-53 > .sub-menu > .menu-group-label > a {
  display: block;
  width: 100% !important; /* the underline is this element's border-bottom, so it must span the full column regardless of heading text length — on the client site the divider is a separate full-width element; short headings like "Training" were collapsing the underline to their own text width without this */
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  font-size: 24px;
  color: #000000;
  text-decoration: none;
  cursor: default;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid #2a2a2a;
}
.menu-item-35 > .sub-menu > .menu-group-label > a::after,
.menu-item-53 > .sub-menu > .menu-group-label > a::after {
  content: none !important;
}

/* Force the nested (real) sub-menu to render inline in its column
   instead of Divi's default flyout-to-the-side behavior */
.menu-item-35 > .sub-menu > .menu-group-label > .sub-menu,
.menu-item-53 > .sub-menu > .menu-group-label > .sub-menu {
  position: static !important;
  display: block !important;
  width: 100%;
  background: transparent;
  box-shadow: none;
  padding: 0;
  margin: 0;
  opacity: 1;
  /* inherit, NOT visible: an explicit "visible" here overrides the closed
     parent's visibility:hidden, leaving these lists hoverable inside an
     invisible panel (the bug described above). */
  visibility: inherit;
}

/* Divi's default .sub-menu li ships as inline-block with a fixed 240px
   width (built for a horizontal flyout) — that let longer items like
   "Group Training (Zone + Hyrox Classes)" wrap into what looked like a
   phantom extra column instead of stacking under the item above it. */
.menu-item-35 > .sub-menu > .menu-group-label > .sub-menu > li,
.menu-item-53 > .sub-menu > .menu-group-label > .sub-menu > li {
  display: block !important;
  width: 100% !important;
  float: none !important;
}

.menu-item-35 > .sub-menu > .menu-group-label > .sub-menu > li > a,
.menu-item-53 > .sub-menu > .menu-group-label > .sub-menu > li > a {
  display: block;
  font-family: 'Raleway', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #000000;
  text-decoration: none;
  white-space: nowrap;
  padding: 13.5px 0;
  transition: color 0.2s ease;
}
.menu-item-35 > .sub-menu > .menu-group-label > .sub-menu > li > a:hover,
.menu-item-53 > .sub-menu > .menu-group-label > .sub-menu > li > a:hover {
  color: #FB2A21;
}

/* --------------------------------------------------------------------------
   5. FLAT DROPDOWNS — Locations & Contact only
   Left-aligned single column under the trigger, no centering,
   no group-label columns.
   -------------------------------------------------------------------------- */
.menu-item-61 > .sub-menu,
.menu-item-66 > .sub-menu {
  background: #ffffff;
  border-top: none !important; /* overrides Divi's default .nav li ul red line-color rule */
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  min-width: 180px;
  padding: 20px 24px;
}

.menu-item-61 > .sub-menu > li > a,
.menu-item-66 > .sub-menu > li > a {
  display: block;
  font-family: 'Raleway', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: #000000;
  text-decoration: none;
  white-space: nowrap;
  padding: 12px 0;
  transition: color 0.2s ease;
}
.menu-item-61 > .sub-menu > li > a:hover,
.menu-item-66 > .sub-menu > li > a:hover {
  color: #FB2A21;
}

/* --------------------------------------------------------------------------
   6. MOBILE MENU — basic legibility pass
   Divi's mobile nav is a stacked accordion by default; this keeps colors/
   fonts consistent without fighting its own show/hide JS behavior.
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .et_pb_row_0_tb_header { padding: 10px 20px; justify-content: center; }
  .et_pb_row_1_tb_header {
    padding: 10px 20px;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  /* Logo: client site holds it at 280x90 at every width, so we do too.
     Both columns size to their content so Divi's 767px stack (100% width
     columns) can't push the hamburger onto its own line. */
  .et_pb_image_0_tb_header img { height: 90px; max-width: none; }
  .et_pb_column_1_tb_header,
  .et_pb_column_2_tb_header {
    width: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
  }
}
/* Very narrow phones: step the logo down just enough that logo + hamburger
   don't overflow the viewport (client site overflows slightly here). */
@media (max-width: 420px) {
  .et_pb_image_0_tb_header img { height: 72px; }
}

@media (max-width: 980px) {
  .et_mobile_nav_menu .et_mobile_menu > li > a {
    font-family: 'Raleway', sans-serif;
    font-size: 18px;
    color: #000000;
  }
  .et_mobile_nav_menu .et_mobile_menu .menu-group-label > a {
    font-family: 'Anton', sans-serif;
    font-size: 20px;
    color: #000000;
    cursor: default;
  }
}


/* ##########################################################################
   PART 2 — PLAN CARDS + SIGNUP FORM
   ########################################################################## */

/* ==========================================================================
   SUMMIT ATHLETIC CLUB — Plan Card Redesign (Sync Acquire "SA Basic" mode)
   Add to the Sweti Child theme's style.css, below the existing rules.
   ========================================================================== */

/* ---- Elements hidden from this design ----
   .plan_heading is the plugin's own heading above the card grid (ships
   display:block by default in new_style.css). ul.progress-list is the
   step-progress breadcrumb above the form (plugin default is display:flex) —
   kept as display:none rather than deleted so the rest of its layout rules
   stay intact if it's ever turned back on. */
.sweti_join_now .plan_heading {
  display: none !important;
}
.sweti_join_now ul.progress-list {
  text-transform: capitalize;
  list-style: none;
  display: none !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 !important;
  margin-bottom: 0;
}

/* ---- Form background + canvas width ----
   #regForm.sweti_join_now ships a white background and .sweti_join_now caps
   at 1080px in the plugin's own stylesheet — both need !important given the
   load-order issue noted above. The REAL width bottleneck, though, is one
   level up: this whole code module sits inside a Divi Theme Builder row
   (.et_pb_row_1_tb_body) that has its own max-width:1080px set directly in
   the Divi Builder's row settings. A child can never render wider than its
   parent allows, so the .sweti_join_now/.plans_data_wrapper max-width bumps
   below did nothing on their own until this row-level cap was also raised.
   Since this class is scoped to this Theme Builder template, this likely
   affects every page using it (probably all location pages), not just this
   one — worth confirming that's the intended reach. */
.et_pb_row_1_tb_body {
  max-width: 1200px !important;
}
#regForm.sweti_join_now {
  background-color: transparent !important;
}
.sweti_join_now {
  max-width: 1200px !important;
  /* Fluid type for the two things that blow out narrow cards: the plan
     title and the big monthly price. Each reaches its full desktop size
     (60px / 72px) at a 1200px viewport — the canvas max-width above — and
     scales down proportionally below that, floored so it stays legible.
     Tune here once; every title/price rule below reads these variables. */
  --sac-title-size: clamp(40px, 5vw, 60px);
  --sac-price-size: clamp(48px, 6vw, 72px);
  --sac-price-label-size: clamp(18px, 1.85vw, 22px);
  --sac-card-pad-x: clamp(16px, 3.3vw, 40px);
}

/* ---- Card grid / page background ---- */
.sweti_join_now .plans_data_wrapper {
  max-width: 1200px !important;
  align-items: center; /* center-align so the taller Elite card sticks out above and below, not just above */
  padding: 40px 20px 60px;
}

/* Gap between cards = (padding + margin) x 2 per card. The plugin ships
   7.5px side margins; combined with 10px padding the visible gap was 35px.
   5px padding + 3.75px margin = 17.5px, exactly half. !important on the
   margin because the plugin's own rule loads after this file. */
.sweti_join_now .plan_names {
  padding: 0 5px !important;
  margin: 15px 3.75px 25px !important;
}

/* Sunset (body.postid-19) has a 4th plan ("ONLINE ONLY") the reference
   design doesn't show — hidden for now. nth-of-type(5) counts DIV siblings
   only (plan_heading is 1, then each real plan is every other DIV — the
   hidden <input class="clno"> elements between cards are a different tag
   so nth-of-type skips them, unlike nth-child which counted them and threw
   off every selector below).
   IMPORTANT: this is scoped to Sunset specifically (body.postid-19) because
   nth-of-type position doesn't mean the same plan on every location page —
   Bluff Street's 5th plan ("3 Year Multi Club") needs to stay visible, so
   an unscoped rule here would silently hide the wrong plan on that page. */
body.postid-19 .sweti_join_now .plan_names:nth-of-type(5) {
  display: none;
}

/* ---- Card shell ----
   Note: the plugin's own stylesheet (new_style.css) loads AFTER this child
   theme's style.css on this site — backwards from the usual convention —
   so identical-specificity selectors here lose to the plugin's base
   .plan-items styling without !important. Confirmed live: background,
   border-radius, padding, and position all collide with the plugin's own
   rule and were silently losing before these were added. */
.sweti_join_now .plan-items {
  background: #FB2A21 !important;
  border-radius: 20px !important;
  overflow: hidden;
  padding: 0 0 32px !important;
  position: relative !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

/* Middle card ("Elite") — elevated, white frame, most-popular badge.
   nth-of-type(3) = plan_heading(1), Basic(2), Elite(3) among DIV siblings. */
.sweti_join_now .plan_names:nth-of-type(3) .plan-items {
  border: 8px solid #ffffff;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

/* Basic & Platinum — thin red border, matches reference */
.sweti_join_now .plan_names:nth-of-type(2) .plan-items,
.sweti_join_now .plan_names:nth-of-type(4) .plan-items {
  border: 2px solid #FB2A21;
}

/* ---- Photo band + plan name overlay ----
   The plugin's own .plan-feature ships padding:0 10px and margin:30px 0 15px,
   which was insetting the photo from the card's edges on all three sides.
   Zeroing it out here lets the photo bleed flush to the edges — and since
   .plan-items already has overflow:hidden + border-radius, the top corners
   round automatically once the photo actually touches them; no separate
   radius rule needed on .plan-title itself. */
.sweti_join_now .plan-feature {
  padding: 0 !important;
  margin: 0 !important;
}
.sweti_join_now .plan-title {
  position: relative;
  height: 190px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url('https://summitathletic.wpenginepowered.com/wp-content/uploads/2026/09/basic-card-image.jpg');
}
.sweti_join_now .plan_names:nth-of-type(3) .plan-title {
  height: 230px; /* taller than the standard 190px so the whole card is genuinely taller, not just shifted */
  background-image: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url('https://summitathletic.wpenginepowered.com/wp-content/uploads/2026/09/elite-card-image-scaled.png');
  border-bottom: 6px solid #ffffff;
}
.sweti_join_now .plan_names:nth-of-type(4) .plan-title {
  background-image: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url('https://summitathletic.wpenginepowered.com/wp-content/uploads/2026/09/platinum-card-image-scaled.png');
}

.sweti_join_now .plan-title h3 {
  font-family: 'Anton', sans-serif;
  font-weight: 400 !important;
  font-size: var(--sac-title-size) !important;
  color: #ffffff !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0,0,0,0.4);
}

/* "ELITE_MP" prints literally from the plan name in Sync Acquire — this
   only hides the raw suffix visually via font-size:0 on the whole heading
   and a clean re-typed label; the real fix is renaming the plan in the SA
   dashboard to just "ELITE" so this workaround isn't needed. */
.sweti_join_now .plan_names:nth-of-type(3) .plan-title h3 {
  font-size: 0 !important;
}
.sweti_join_now .plan_names:nth-of-type(3) .plan-title h3::before {
  content: "ELITE";
  font-size: var(--sac-title-size) !important;
  color: #FB2A21;
}

/* "MOST POPULAR" badge, Elite card only */
.sweti_join_now .plan_names:nth-of-type(3) .plan-title::before {
  content: "MOST POPULAR";
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;
  text-align: center;
  font-family: 'Raleway', sans-serif;
  font-style: italic !important;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 6px;
  text-transform: uppercase;
  color: #ffffff;
}

/* ---- Hide the row-groups not used in this design ---- */
.sweti_join_now .plan-feature > div:nth-child(2),  /* Add Ons */
.sweti_join_now .plan-feature > div:nth-child(4),  /* Enrollment Fee */
.sweti_join_now .plan-feature > div:nth-child(5),  /* Services */
.sweti_join_now .plan-feature > .plan-header,       /* duplicate calc data */
.sweti_join_now .plan-feature > .sabasiccontainer { /* ABC Fitness badge */
  display: none !important;
}

/* ---- Headline price: Dues Payment row, first amount only ---- */
.sweti_join_now .plan-feature > div:nth-child(3) {
  padding: 28px var(--sac-card-pad-x) 4px;
  text-align: left;
}
.sweti_join_now .plan-feature > div:nth-child(3)::before {
  content: "Month To Month";
  display: block;
  font-family: 'Anton', sans-serif;
  font-size: var(--sac-price-label-size);
  font-weight: 400;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
  margin-bottom: 26px;
}
.sweti_join_now .plan_names:nth-of-type(3) .plan-feature > div:nth-child(3)::before {
  content: "All Inclusive 3 Year";
}
.sweti_join_now .plan_names:nth-of-type(4) .plan-feature > div:nth-child(3)::before {
  content: "All Inclusive 1 Year";
}
/* the row's own label div ("Dues Payment" text) and the 2nd/3rd amounts (tax, total-with-tax) */
.sweti_join_now .plan-feature > div:nth-child(3) > div:nth-child(1),
.sweti_join_now .plan-feature > div:nth-child(3) > div:nth-child(3),
.sweti_join_now .plan-feature > div:nth-child(3) > div:nth-child(4) {
  display: none;
}
.sweti_join_now .plan-feature > div:nth-child(3) > div:nth-child(2) {
  display: inline-block;
  font-family: 'Anton', sans-serif;
  color: #ffffff;
}
.sweti_join_now .plan-feature > div:nth-child(3) .sabasic_dollarsign,
.sweti_join_now .plan-feature > div:nth-child(3) .sabasic_dollar,
.sweti_join_now .plan-feature > div:nth-child(3) .sabasic_cent {
  font-size: var(--sac-price-size);
}
.sweti_join_now .plan-feature > div:nth-child(3)::after {
  content: " /MO";
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  color: #ffffff;
}

/* ---- Annual fee line: .sweticlubfee — one wrapper div holding two plain
   divs (club fee, annual fee), not the span-based dollar/cent breakdown
   the Dues Payment row uses ---- */
.sweti_join_now .sweticlubfee {
  text-align: left;
  padding: 6px var(--sac-card-pad-x) 24px;
}
.sweti_join_now .sweticlubfee > div {
  display: inline-block; /* without this the wrapper div's default block display forces "$39.95" onto its own line below the "Annual Fee" ::before text */
}
.sweti_join_now .sweticlubfee > div > div:first-child {
  display: none; /* the club-fee amount, not shown in this design */
}
.sweti_join_now .sweticlubfee::before {
  content: "Annual Fee ";
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  color: #ffffff;
}
.sweti_join_now .sweticlubfee > div > div:last-child {
  display: inline-block;
  font-family: 'Raleway', sans-serif;
  font-size: 15px;
  color: #ffffff;
}

/* ---- Select Plan button ---- */
.sweti_join_now .plan-items .select_button {
  padding: 0 24px;
  border: none !important;
}
.sweti_join_now .plan-items .select_button label {
  border: none !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  color: #000000 !important;
  font-family: 'Anton', sans-serif !important;
  font-weight: 400;
  font-size: 0 !important; /* literal text is "Select" — hidden and replaced via ::before below */
  letter-spacing: 1px;
  padding: 34px 10px;
  width: 50%;
  margin: 0 auto;
  display: block;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25);
}
.sweti_join_now .plan-items .select_button label::before {
  content: "SELECT PLAN";
  font-family: 'Anton', sans-serif !important;
  font-size: 15px;
}
/* Elite card — dark pill instead of white, matches reference. More specific
   selector (extra ancestor class) plus !important wins outright over both
   the plugin's base rule and the non-elite override above. */
.sweti_join_now .plan_names:nth-of-type(3) .plan-items .select_button label {
  background: #1a1a1a !important;
  color: #ffffff !important;
  box-shadow: none; /* inset shadow is for the white buttons only */
}

/* ==========================================================================
   STEP FORM — My Info (step3) / Payment (step4) / Confirm (step5)
   These three steps ship as plain unstyled Poppins/grey-box markup from the
   plugin. Verified live against the dev site's actual signup flow (filled
   with dummy data through step4; step5's #Summery_data block is populated
   client-side by the plugin's own "Next" handler and wasn't triggered here,
   so only its static shell — buttons + sidebar — is covered below, but it
   reuses the same classes as steps 3/4 and will inherit this styling).
   ========================================================================== */

/* ---- Section headings + subtext ----
   .plan_heading_h3 is reused for every section header across steps 3-5
   ("Personal Information", "Billing Information", "Emergency Contact
   Details", "Initial Payment", "Recurring Payment", etc.) — no wrapper
   class needed, just target it directly. */
.sweti_join_now .plan_heading_h3 {
  font-family: 'Anton', sans-serif !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #16282F !important;
  font-size: 26px !important;
  margin-bottom: 4px;
}
.sweti_join_now .plan_subheading {
  font-family: 'Raleway', sans-serif;
  color: #5a5a5a;
}
/* "One Time Payment of $XXX.XX" — separate class from plan_heading_h3 */
.sweti_join_now .recurring_prices {
  font-family: 'Anton', sans-serif !important;
  font-weight: 400 !important;
  color: #16282F !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 20px !important;
}

/* ---- Form panel ----
   .info-form ships flat mid-grey (#F0F0F0) with square corners by default.
   Reskin as a white card with a red top accent so it reads as part of the
   same system as the plan cards above it. */
.sweti_join_now .info-form {
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: 40px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  border-top: 6px solid #FB2A21;
}

/* ---- Inputs + selects ---- */
.sweti_join_now .form-group input,
.sweti_join_now .form-group select {
  font-family: 'Raleway', sans-serif !important;
  border: 2px solid #e2e2e2 !important;
  border-radius: 10px !important;
  padding: 14px 16px !important;
  font-size: 15px !important;
  transition: border-color .15s ease;
}
.sweti_join_now .form-group input:focus,
.sweti_join_now .form-group select:focus {
  border-color: #FB2A21 !important;
  outline: none;
}

/* ---- Checkboxes / radios (terms, recurring-payment method) ---- */
.sweti_join_now input[type="checkbox"],
.sweti_join_now input[type="radio"] {
  accent-color: #FB2A21;
  width: 18px;
  height: 18px;
}

/* ---- Previous / Next / Complete buttons ----
   Same pill treatment as the "SELECT PLAN" button on the card step: white
   outline for Previous, solid dark for Next/Complete. Plugin ships these as
   flat grey/green rectangles by default. */
.sweti_join_now .btn_action {
  font-family: 'Anton', sans-serif !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 999px !important;
  padding: 16px 40px !important;
  border: none !important;
  font-size: 15px !important;
  transition: transform .15s ease;
}
.sweti_join_now .btn_prev {
  background: #ffffff !important;
  color: #16282F !important;
  border: 2px solid #16282F !important;
}
.sweti_join_now .btn_next,
.sweti_join_now #sweti_confirmation_btn {
  background: #1a1a1a !important;
  color: #ffffff !important;
}
.sweti_join_now .btn_next.btn_disable {
  opacity: 0.5; /* still-invalid step — keep the plugin's disabled signal, just re-skinned */
}

/* ---- Sidebar recap widget (persists through steps 3-5) ----
   .plan-items already picks up the red bg + 20px radius from the card-shell
   rule above (same class, no extra work needed) — this just fixes the two
   sub-elements the plugin ships in the plugin's own blue (#1D5E8C default
   Divi accent), which clashes with the red/black system everywhere else. */
.sweti_join_now aside.side-bar .plan-items > h3 {
  background: #1a1a1a !important;
  color: #ffffff !important;
  font-family: 'Anton', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 16px !important;
  text-align: center;
}
.sweti_join_now aside.side-bar .frq_col {
  background: #1a1a1a !important; /* the "$XX.XX/Monthly" strip under the header */
}
.sweti_join_now aside.side-bar .col_list label,
.sweti_join_now aside.side-bar .col_list .output,
.sweti_join_now aside.side-bar .frq_col .payment {
  color: #ffffff !important;
  font-family: 'Raleway', sans-serif !important;
}
.sweti_join_now aside.side-bar .due_date .output {
  font-family: 'Anton', sans-serif !important;
  font-size: 22px;
}

/* ---- Sidebar recap: duplicate cleanup (steps 3-5) ----
   The plugin renders the plan recap TWICE inside aside.side-bar .new_details:
     1) .plan_data        - the compact label/value list (Due Today, Add Ons,
                             Dues Payment, Services, Annual Fee, etc.)
     2) .plan_description .plan-feature - a full duplicate of the plan-
                             selection card itself: plan name, the same price
                             breakdown, the annual fee, AND a plan photo.
   Client direction: drop this whole duplicate card. .plan_data already
   shows all of its text content, and the photo itself is pulled in
   straight from ABC (Financial) — not an asset to show here.

   IMPORTANT: steps 3/4/5 each render their own copy of this markup with a
   different numbered ID — #plan_data/#planDescription on step 3,
   #plan_data_one/#planDescription2 on step 4, #plan_data_two/#planDescription3
   on step 5 (confirmed live) — but all three share the same CLASS name
   (.plan_description), so this is written against the class, not the ID,
   specifically so one rule covers all three steps instead of needing three
   near-duplicate copies. */
.sweti_join_now aside.side-bar .plan_description {
  display: none !important;
}

/* Due Today stays the loudest line in the recap. */
.sweti_join_now aside.side-bar .col_list.due_date {
  background: #B02424 !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  margin: 4px 0 10px !important;
}
.sweti_join_now aside.side-bar .due_date label,
.sweti_join_now aside.side-bar .due_date .output {
  font-family: 'Anton', sans-serif !important;
  font-size: 20px !important;
}

/* Services stays visible here - the main-card hide rule above targets
   .plan-feature > div:nth-child(5), which is a different element than
   .plan_data's .col_list rows, so this list is unaffected by it. */

/* Separate the Annual Fee / Due On block from the rest of the price list. */
.sweti_join_now aside.side-bar .annual_fee_details {
  display: block !important;
  margin-top: 14px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.25) !important;
}
.sweti_join_now aside.side-bar .annual_fee_details .sidebarFeeContainer {
  display: flex !important;
  justify-content: space-between !important;
  padding: 2px 0 !important;
  font-family: 'Raleway', sans-serif !important;
}
.sweti_join_now aside.side-bar .annual_fee_details .feeName_label,
.sweti_join_now aside.side-bar .annual_fee_details .feeDueDate_label {
  color: #ffffff !important;
}
.sweti_join_now aside.side-bar .annual_fee_details .feeAmount,
.sweti_join_now aside.side-bar .annual_fee_details .feeDueDate {
  color: #ffffff !important;
  font-family: 'Anton', sans-serif !important;
}

/* ---- Step 5 summary content ----
   #Summery_data is filled in by the plugin's own JS when it transitions to
   this step, so its exact markup wasn't visible to inspect directly — these
   are generic tag-level fallbacks so whatever it injects (headings, table
   rows, line-item labels) still reads as part of the same system rather
   than falling back to browser defaults. */
.sweti_join_now #Summery_data h3,
.sweti_join_now #Summery_data h4 {
  font-family: 'Anton', sans-serif !important;
  font-weight: 400 !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #16282F !important;
}
.sweti_join_now #Summery_data,
.sweti_join_now #Summery_data p,
.sweti_join_now #Summery_data td,
.sweti_join_now #Summery_data th,
.sweti_join_now #Summery_data li {
  font-family: 'Raleway', sans-serif !important;
  color: #16282F;
}
.sweti_join_now #Summery_data strong {
  font-family: 'Anton', sans-serif !important;
  font-weight: 400 !important;
}

/* ==========================================================================
   BLUFF STREET ONLY (body.postid-18) — show only 3 of its 14 configured
   plans: Month To Month, 1 Year Multi Club ("12 Month"), 3 Year Multi Club
   ("36 Month").

   Targeted by name, not DOM position. The plugin stamps each card's real
   plan name onto .plan-title as a custom attribute —
   <div class="plan-title" sweti_planname="Month To Month"> — so :has() can
   select the .plan_names wrapper by that attribute instead of nth-of-type.
   This is deliberate: the rest of this file's Basic/Elite/Platinum styling
   (further up) is keyed to position because Sunset's 3-plan layout is
   unlikely to change shape, but Bluff Street's list has 14 plans today and
   the client manages it directly in Sync Acquire/ABC Financial — reordering
   the list, renaming a plan, or adding a new one (an "Online Only" 5th
   plan, say) is a one-click change on their end with no reason to ever
   touch this stylesheet. A position-based rule would silently start
   showing/hiding the wrong plan the moment that list changes shape; a
   name-based rule only breaks if they rename one of these three plans
   exactly, which is a much narrower and more obvious failure (the plan
   just stops being specially styled, rather than the wrong one appearing).
   Every rule below is written per-name and with !important specifically so
   it wins outright over the position-based rules above, regardless of
   which position these three plans land on. */
body.postid-18 .sweti_join_now .plan_names {
  display: none;
}
body.postid-18 .sweti_join_now .plan_names:has(.plan-title[sweti_planname="Month To Month"]),
body.postid-18 .sweti_join_now .plan_names:has(.plan-title[sweti_planname="1 Year Multi Club"]),
body.postid-18 .sweti_join_now .plan_names:has(.plan-title[sweti_planname="3 Year Multi Club"]) {
  display: flex !important; /* flex (not block) so .plan-items below can stretch to the row's full height */
}

/* Equal-height cards at every width. The wrapper is align-items:center
   file-wide (so Sunset's taller Elite card can poke out above and below);
   Bluff has no elevated card, so it stretches instead. Each visible
   .plan_names is a flex row holding one .plan-items, which fills it, and
   .plan-items is a column with the Select Plan button pinned to the bottom
   — so when one card's text wraps taller than its neighbors', the others
   grow to match and the buttons still line up. */
body.postid-18 .sweti_join_now .plans_data_wrapper {
  align-items: stretch;
}
body.postid-18 .sweti_join_now .plan_names .plan-items {
  display: flex;
  flex-direction: column;
  width: 100%;
}
body.postid-18 .sweti_join_now .plan_names .plan-items .select_button {
  margin-top: auto;
}

/* Plain card shell for all 3 — this also neutralizes the Elite-only
   treatment (elevated white border, elite photo, the h3 replaced with the
   literal word "ELITE", the "MOST POPULAR" badge) in case any of these
   three ever lands on the position that treatment is keyed to. */
body.postid-18 .sweti_join_now .plan_names:has(.plan-title[sweti_planname="Month To Month"]) .plan-items,
body.postid-18 .sweti_join_now .plan_names:has(.plan-title[sweti_planname="1 Year Multi Club"]) .plan-items,
body.postid-18 .sweti_join_now .plan_names:has(.plan-title[sweti_planname="3 Year Multi Club"]) .plan-items {
  border: 2px solid #FB2A21 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
}
body.postid-18 .sweti_join_now .plan_names:has(.plan-title[sweti_planname="Month To Month"]) .plan-title,
body.postid-18 .sweti_join_now .plan_names:has(.plan-title[sweti_planname="1 Year Multi Club"]) .plan-title,
body.postid-18 .sweti_join_now .plan_names:has(.plan-title[sweti_planname="3 Year Multi Club"]) .plan-title {
  height: 190px !important;
  border-bottom: none !important;
}

/* Photo per plan, same order as the other locations (Basic, Elite,
   Platinum photos). Keyed by plan name like everything else in this
   section, so the photos follow the plans if the list is reordered. Only
   the photo is borrowed from the Elite/Platinum treatment — none of Elite's
   white frame, taller height, or badge. */
body.postid-18 .sweti_join_now .plan_names:has(.plan-title[sweti_planname="Month To Month"]) .plan-title {
  background-image: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url('https://summitathletic.wpenginepowered.com/wp-content/uploads/2026/09/basic-card-image.jpg') !important;
}
body.postid-18 .sweti_join_now .plan_names:has(.plan-title[sweti_planname="1 Year Multi Club"]) .plan-title {
  background-image: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url('https://summitathletic.wpenginepowered.com/wp-content/uploads/2026/09/elite-card-image-scaled.png') !important;
}
body.postid-18 .sweti_join_now .plan_names:has(.plan-title[sweti_planname="3 Year Multi Club"]) .plan-title {
  background-image: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url('https://summitathletic.wpenginepowered.com/wp-content/uploads/2026/09/platinum-card-image-scaled.png') !important;
}
body.postid-18 .sweti_join_now .plan_names:has(.plan-title[sweti_planname="Month To Month"]) .plan-title h3,
body.postid-18 .sweti_join_now .plan_names:has(.plan-title[sweti_planname="1 Year Multi Club"]) .plan-title h3,
body.postid-18 .sweti_join_now .plan_names:has(.plan-title[sweti_planname="3 Year Multi Club"]) .plan-title h3 {
  font-size: var(--sac-title-size) !important; /* undo the Elite rule's font-size:0 text-hiding trick */
}
body.postid-18 .sweti_join_now .plan_names:has(.plan-title[sweti_planname="Month To Month"]) .plan-title h3::before,
body.postid-18 .sweti_join_now .plan_names:has(.plan-title[sweti_planname="1 Year Multi Club"]) .plan-title h3::before,
body.postid-18 .sweti_join_now .plan_names:has(.plan-title[sweti_planname="3 Year Multi Club"]) .plan-title h3::before,
body.postid-18 .sweti_join_now .plan_names:has(.plan-title[sweti_planname="Month To Month"]) .plan-title::before,
body.postid-18 .sweti_join_now .plan_names:has(.plan-title[sweti_planname="1 Year Multi Club"]) .plan-title::before,
body.postid-18 .sweti_join_now .plan_names:has(.plan-title[sweti_planname="3 Year Multi Club"]) .plan-title::before {
  content: none !important; /* remove the injected "ELITE" text and the "MOST POPULAR" badge */
}
body.postid-18 .sweti_join_now .plan_names:has(.plan-title[sweti_planname="Month To Month"]) .plan-items .select_button label,
body.postid-18 .sweti_join_now .plan_names:has(.plan-title[sweti_planname="1 Year Multi Club"]) .plan-items .select_button label,
body.postid-18 .sweti_join_now .plan_names:has(.plan-title[sweti_planname="3 Year Multi Club"]) .plan-items .select_button label {
  background: #ffffff !important;
  color: #000000 !important;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25) !important;
}

/* Above-price labels, also keyed by name. "Month To Month" needs no
   override — it's already the file-wide default — but it's still at risk
   of inheriting "All Inclusive 3 Year"/"All Inclusive 1 Year" if it ever
   lands on nth-of-type(3)/(4), so it gets an explicit !important pin too. */
body.postid-18 .sweti_join_now .plan_names:has(.plan-title[sweti_planname="Month To Month"]) .plan-feature > div:nth-child(3)::before {
  content: "Month To Month" !important;
}
body.postid-18 .sweti_join_now .plan_names:has(.plan-title[sweti_planname="1 Year Multi Club"]) .plan-feature > div:nth-child(3)::before {
  content: "12 Month Multi Club" !important;
}
body.postid-18 .sweti_join_now .plan_names:has(.plan-title[sweti_planname="3 Year Multi Club"]) .plan-feature > div:nth-child(3)::before {
  content: "36 Month Multi Club" !important;
}

/* ---- Responsive: single-column plan cards at 925px and below ----
   The plugin's own stack point is 767px (flex: 0 0 100% on .plan_names);
   this moves it up to 925px. At 926px+ the three cards sit side by side.

   Stacked as a flex COLUMN (not row-wrap with a 100% basis like the plugin
   does) because each card is capped at 440px and centered — in a wrapping
   row, two capped cards would sneak onto one line just under ~900px.
   The Bluff-prefixed selectors are there because Bluff's equal-height rule
   (align-items: stretch) is more specific than the plain ones and would
   otherwise left-align the capped cards.

   The title/price variables switch from the 3-across scale (tied to the
   viewport because the cards share it) to fixed maximum sizes: once
   there's one card per row, the type holds at full size at every width. */
@media only screen and (max-width: 925px) {
  .sweti_join_now {
    --sac-title-size: 60px;
    --sac-price-size: 72px;
    --sac-price-label-size: 22px;
    --sac-card-pad-x: clamp(20px, 6vw, 40px);
  }
  .sweti_join_now .plans_data_wrapper,
  body.postid-18 .sweti_join_now .plans_data_wrapper {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
  }
  .sweti_join_now .plan_names,
  body.postid-18 .sweti_join_now .plan_names:has(.plan-title[sweti_planname="Month To Month"]),
  body.postid-18 .sweti_join_now .plan_names:has(.plan-title[sweti_planname="1 Year Multi Club"]),
  body.postid-18 .sweti_join_now .plan_names:has(.plan-title[sweti_planname="3 Year Multi Club"]) {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 440px !important;
    margin: 12px 0 !important;
  }
  .sweti_join_now .plan_names:nth-of-type(3) .plan-items {
    transform: none;
  }
}

/* ---- Responsive: phone-only tweaks ---- */
@media only screen and (max-width: 767px) {
  .sweti_join_now .info-form {
    padding: 24px !important;
  }
  .sweti_join_now .btn_action {
    padding: 14px 28px !important;
  }
}