/**
 * @file
 * Monthly / Annual pricing toggle and subscribe button.
 *
 * The theme ships Bootstrap button styles (gold .btn-default, scale on hover,
 * etc.) that otherwise bleed into these controls and make the active toggle
 * state invisible and the CTA text vanish on hover. Selectors are scoped to
 * the memberships section and use !important to win against that cascade.
 */

/* ---- Toggle ---------------------------------------------------------- */

.paragraph--type--memberships .container {
  text-align: center;
}

.paragraph--type--memberships .hab-sub-toggle {
  display: inline-flex;
  margin: 0 auto 35px;
  padding: 4px;
  border: 1px solid #C3A068;
  border-radius: 999px;
  background: #fff;
  gap: 4px;
}

/* High specificity (section + container + toggle + element) so the theme's
   `button { color: inherit }` and equal-specificity rules cannot win the
   base state the way they did before (only :hover used to apply). */
.paragraph--type--memberships .container .hab-sub-toggle button.hab-sub-toggle__opt {
  -webkit-appearance: none;
  appearance: none;
  display: inline-block;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #C3A068 !important;
  -webkit-text-fill-color: #C3A068 !important;
  font-family: "Antonio", sans-serif;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 15px;
  padding: 10px 30px !important;
  cursor: pointer;
  box-shadow: none !important;
  transform: none !important;
  transition: background 0.2s, color 0.2s;
}

.paragraph--type--memberships .container .hab-sub-toggle button.hab-sub-toggle__opt:hover {
  background: rgba(195, 160, 104, 0.15) !important;
  color: #C3A068 !important;
  -webkit-text-fill-color: #C3A068 !important;
  transform: none !important;
}

.paragraph--type--memberships .container .hab-sub-toggle button.hab-sub-toggle__opt.is-active {
  background: #C3A068 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.paragraph--type--memberships .container .hab-sub-toggle button.hab-sub-toggle__opt:focus {
  outline: 2px solid #7b5e31;
  outline-offset: 2px;
}

/* ---- Price + CTA ----------------------------------------------------- */

.hab-sub-pricing .hab-sub-price {
  margin-bottom: 14px;
}

.hab-sub-pricing .hab-interval {
  font-size: 18px;
  font-weight: 400;
}

.paragraph--type--memberships .hab-sub-pricing a.hab-sub-cta,
.paragraph--type--memberships .hab-sub-pricing a.hab-sub-cta:link,
.paragraph--type--memberships .hab-sub-pricing a.hab-sub-cta:visited {
  display: inline-block;
  margin: 0 !important;
  padding: 11px 30px !important;
  border: 1px solid #C3A068 !important;
  border-radius: 6px !important;
  background: #C3A068 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-family: "Antonio", sans-serif;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-decoration: none !important;
  transform: none !important;
  transition: background 0.2s;
}

.paragraph--type--memberships .hab-sub-pricing a.hab-sub-cta:hover,
.paragraph--type--memberships .hab-sub-pricing a.hab-sub-cta:focus {
  background: #b18847 !important;
  border-color: #b18847 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  text-decoration: none !important;
  transform: none !important;
}