/* ==========================================================================
   TempMailNinja PW — redesigned header + Premium pricing popup
   Load AFTER assets/themes/basic/css/style.css (see README, step 1).
   All rules are scoped under .tn-header / .tn-pricing-modal so the rest
   of the theme is untouched. Colours match the reference screenshots:
   white header, dark text, orange Premium (#ff9c37), blue primary.
   v5 — header redesign (see README-HEADER-REDESIGN.txt): the STATIC
   header is transparent (the purple .header gradient shows through) with
   the LIGHT logo + white menu text (hover = --primary_color); the
   FLOATING white header (.nav-sticky) keeps the DARK logo + dark text.
   The submenu now renders ON TOP instead of being cut off by the header,
   and every site link hovers to --primary_color.
   ========================================================================== */

/* ---------- Header bar ----------
   v4 — spacing tightened everywhere (logo 38px, bar 64px, smaller link
   padding) so the header fits without the logo and the first link
   overlapping, and store buttons removed (see navbar.blade.php). */
.tn-header {
  background: transparent;
  margin-top: 0 !important;
  min-height: 64px;
  box-shadow: none;
  position: relative;
  z-index: 1030;
}
.tn-header.nav-sticky {
  background: #fff;
  box-shadow: 0 4px 16px rgba(17, 17, 26, .10);
}
.tn-header .nav-inner { width: 100%; gap: 14px; }
.tn-header .logo { flex-shrink: 0; display: flex; align-items: center; }
.tn-header .logo img { max-height: 45px; width: auto; }
/* v5 — static (transparent) header sits on the purple gradient, so it
   shows the LIGHT logo (the "dark_logo" setting / .white-logo); the
   floating white header (.nav-sticky) shows the DARK logo (.dark-logo). */
.tn-header .white-logo { display: block !important; }
.tn-header .dark-logo { display: none !important; }
.tn-header.nav-sticky .white-logo { display: none !important; }
.tn-header.nav-sticky .dark-logo { display: block !important; }

/* ---------- Submenu ON TOP (not cut off) + site-wide link hover (v5) ----------
   The dropdown was clipped at the bottom of the header because .header
   (theme style.css) has overflow:hidden — it exists only to clip the
   decorative .header-circles (a 300%-tall dashed circle). Let the header
   overflow visibly so the dropdown renders above the page below, and clip
   the circles inside their own layer instead (same visual result). */
.header { overflow: visible; }
.header .header-circles { overflow: hidden; }
/* Site-wide: every link turns the primary color on hover. (More specific
   hover rules — buttons, nav links — still win where they are set.) */
a:hover { color: var(--primary_color); }

/* ---------- Centre menu ----------
   NOTE ON SPECIFICITY (v4 fix): the theme's own selectors are very long
   (e.g. .nav .nav-inner .nav-menu .nav-links .nav-link), so short
   .tn-header rules LOST to the theme on padding, border-radius and
   text-align — that is why the submenu items rendered as centred grey
   pills instead of plain left-aligned rows. Every rule below therefore
   uses the same long chain, prefixed with .tn-header, so it wins. */
.tn-header .nav-menu { width: auto; flex: 1 1 auto; min-width: 0; }
.tn-header .nav-menu-scroller { height: 64px; }
.tn-header .nav-menu-body { justify-content: center; }
.tn-header .nav-actions { margin-left: auto; gap: 8px; flex-wrap: nowrap; }
.tn-header.nav .nav-inner .nav-menu .nav-links { display: flex; align-items: center; margin-left: 0; gap: 2px; }
.tn-header.nav .nav-inner .nav-menu .nav-links .nav-link,
.tn-header.nav .nav-inner .nav-menu .nav-links .nav-drop .nav-drop-btn {
  color: #fff !important;
  font-size: 15px;
  font-weight: 500;
  opacity: .92;
  padding: 8px 11px;
  margin: 0 !important;
  border-radius: 10px;
  white-space: nowrap;
}
.tn-header.nav .nav-inner .nav-menu .nav-links .nav-link:hover,
.tn-header.nav .nav-inner .nav-menu .nav-links .nav-link.active,
.tn-header.nav .nav-inner .nav-menu .nav-links .nav-drop:hover .nav-drop-btn,
.tn-header.nav .nav-inner .nav-menu .nav-links .nav-drop.active .nav-drop-btn {
  color: var(--primary_color) !important;
  background: rgba(255, 255, 255, .95);
  opacity: 1;
}
/* Floating (white) header: dark text, light-grey pill on hover (as before). */
.tn-header.nav-sticky.nav .nav-inner .nav-menu .nav-links .nav-link,
.tn-header.nav-sticky.nav .nav-inner .nav-menu .nav-links .nav-drop .nav-drop-btn {
  color: #171718 !important;
}
.tn-header.nav-sticky.nav .nav-inner .nav-menu .nav-links .nav-link:hover,
.tn-header.nav-sticky.nav .nav-inner .nav-menu .nav-links .nav-link.active,
.tn-header.nav-sticky.nav .nav-inner .nav-menu .nav-links .nav-drop:hover .nav-drop-btn,
.tn-header.nav-sticky.nav .nav-inner .nav-menu .nav-links .nav-drop.active .nav-drop-btn {
  color: #171718 !important;
  background: #f3f4f8;
}
.tn-header .nav-drop .nav-drop-btn .fa-chevron-down { transition: transform .25s; font-size: 11px; }
.tn-header .nav-drop:hover .nav-drop-btn .fa-chevron-down,
.tn-header .nav-drop.active .nav-drop-btn .fa-chevron-down { transform: rotate(180deg); }

/* ---------- Dropdown card (desktop) — like the reference image:
   white card, soft shadow, plain left-aligned rows, no pill background
   until hover. ---------- */
.tn-header.nav .nav-inner .nav-menu .nav-links .nav-drop { position: relative; }
.tn-header.nav .nav-inner .nav-menu .nav-links .nav-drop .nav-drop-menu {
  display: block !important;
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, 6px);
  min-width: 260px;
  width: max-content;
  max-width: 320px;
  background: #fff;
  border: 1px solid #e9eaf0;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(17, 17, 26, .14);
  padding: 8px;
  margin: 0 !important;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s, visibility .2s;
  z-index: 1050;
}
.tn-header.nav .nav-inner .nav-menu .nav-links .nav-drop:hover .nav-drop-menu,
.tn-header.nav .nav-inner .nav-menu .nav-links .nav-drop.active .nav-drop-menu,
.tn-header.nav .nav-inner .nav-menu .nav-links .nav-drop.animated .nav-drop-menu {
  visibility: visible;
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.tn-header.nav .nav-inner .nav-menu .nav-links .nav-drop .nav-drop-menu .nav-link {
  display: block;
  color: #4b5563 !important;
  background: transparent;
  text-align: left !important;
  padding: 10px 14px;
  margin: 0 !important;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  opacity: 1;
}
.tn-header.nav .nav-inner .nav-menu .nav-links .nav-drop .nav-drop-menu .nav-link:not(:last-child) {
  margin-bottom: 0 !important;
}
.tn-header.nav .nav-inner .nav-menu .nav-links .nav-drop .nav-drop-menu .nav-link:hover {
  background: #f3f4f8;
  color: #171718 !important;
}

/* ---------- Right-side actions (store buttons removed in v4) ---------- */
/* v5 — same size as the Register button was (.btn-md): padding 9px 25px,
   font-size 17px. Colour unchanged (orange). */
.tn-premium-btn {
  background: #ff9c37;
  border: 1px solid #cc6e0f;
  color: #fff;
  font-weight: 700;
  border-radius: 10px;
  padding: 9px 25px;
  font-size: 17px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.tn-premium-btn:hover { background: #ffa94d; color: #fff; }
/* v5 — static (transparent) header: Login = white outline (readable on
   the purple gradient); floating (white) header: dark text, grey border. */
.tn-header .nav-actions .btn-outline-light {
  color: #fff !important;
  border-color: rgba(255, 255, 255, .65);
}
.tn-header .nav-actions .btn-outline-light:hover { background: rgba(255, 255, 255, .95); color: var(--primary_color); border-color: #fff; }
.tn-header.nav-sticky .nav-actions .btn-outline-light {
  color: #171718 !important;
  border-color: #d4d7de;
}
.tn-header.nav-sticky .nav-actions .btn-outline-light:hover { background: #f3f4f8; color: #171718; }
/* Hamburger: white on the transparent header, dark on the white floating header. */
.tn-header .nav-menu-button { color: #fff !important; }
.tn-header.nav-sticky .nav-menu-button { color: #171718 !important; }
/* Language (globe) button: white on the transparent header, dark when sticky. */
.tn-header .language .language-button { color: #fff; }
.tn-header.nav-sticky .language .language-button { color: #444; }

/* ---------- Premium pricing popup ---------- */
.tn-pricing-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  visibility: hidden;
  opacity: 0;
  transition: opacity .25s, visibility .25s;
}
.tn-pricing-modal.open { visibility: visible; opacity: 1; }
.tn-pricing-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 17, 26, .55);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
/* v3 — popup made noticeably smaller overall: it used to fill the whole
   screen and run past the bottom of the viewport. The card is narrower,
   paddings and type are tighter, and the plan cards inside it are
   compacted too, so the full popup (both plans + features + payment
   logos) fits on a normal laptop screen without scrolling. */
.tn-pricing-card {
  position: relative;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
  width: 100%;
  max-width: 760px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 26px 28px 18px;
  text-align: center;
  transform: translateY(12px) scale(.98);
  transition: transform .25s;
}
.tn-pricing-modal.open .tn-pricing-card { transform: none; }
.tn-pricing-close {
  position: absolute;
  top: 10px;
  right: 14px;
  background: transparent;
  border: 0;
  font-size: 22px;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
  padding: 6px 10px;
}
.tn-pricing-close:hover { color: #171718; }
.tn-pricing-crown {
  width: 44px; height: 44px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: #ff9c37;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.tn-pricing-title { font-size: 23px; font-weight: 800; color: #171718; margin-bottom: 4px; }
.tn-pricing-subtitle { color: #4b5563; font-size: 14px; margin-bottom: 14px; }
.tn-plan-switcher {
  display: inline-flex;
  border: 1px solid #c7cbe8;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
}
.tn-plan-switcher-item {
  border: 0;
  background: #fff;
  color: #171718;
  padding: 7px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
.tn-plan-switcher-item.active { background: #ff9c37; color: #fff; }
.tn-plans { display: none; text-align: left; }
.tn-plans.active { display: block; }
.tn-plans .plan { height: 100%; }
/* Compact plan cards inside the popup (the theme's .plan is roomy). */
.tn-pricing-card .plan { padding: 20px 18px !important; border-radius: 18px; }
.tn-pricing-card .plan-title { font-size: 16px; margin-bottom: 2px; }
.tn-pricing-card .plan-price { font-size: 28px !important; margin-bottom: 2px !important; }
.tn-pricing-card .plan-price span { font-size: 13px; }
.tn-pricing-card .plan-text { font-size: 13px; line-height: 1.45; margin-bottom: 12px; }
.tn-pricing-card .plan .btn-xl { padding: 8px 16px; font-size: 14px; }
.tn-pricing-card .plan-features { margin-top: 10px; }
.tn-pricing-card .plan .plan-features .plan-feat { padding: 2px 0; font-size: 13px; gap: 8px; }
/* Tighten the gap between feature rows: the theme gives every row except
   the last a 16px bottom margin — that is the big gap in the screenshot. */
.tn-pricing-card .plan .plan-features .plan-feat:not(:last-child) { margin-bottom: 6px; }
/* "No" icon (excluded feature, the X) -> orange, same as the Premium button.
   Full chain needed: the theme's .plan-feat-icon-v2 rule (0,4,0) beats a
   short .tn-pricing-card selector (0,2,0), so the icon stayed blue. */
.tn-pricing-card .plan .plan-features .plan-feat .plan-feat-icon-v2 { background-color: #ff9c37; }
.tn-pricing-card .plan .plan-features .plan-feat .plan-feat-icon,
.tn-pricing-card .plan .plan-features .plan-feat .plan-feat-icon-v2 {
  width: 18px; height: 18px; font-size: 10px;
}
.tn-pricing-secure { margin-top: 16px; }
.tn-pricing-secure-title { font-weight: 700; color: #171718; margin-bottom: 4px; font-size: 14px; }
.tn-pricing-secure-title i { color: #16a34a; margin-right: 6px; }
.tn-pricing-secure-text { color: #6b7280; font-size: 12px; max-width: 560px; margin: 0 auto 8px; }
.tn-pricing-methods { color: #6b7280; font-size: 12px; font-weight: 600; margin: 0; }
.tn-pricing-missing { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; border-radius: 12px; padding: 14px; }

/* ---------- Payment logos (popup footer) ---------- */
.tn-payment-logos {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 10px; margin-top: 12px;
}
.tn-payment-logos img {
  height: 24px; width: auto;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 3px 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
  object-fit: contain;
}

/* ---------- Responsive ----------
   v2 fix — mobile submenu was invisible in v1. Root causes found from
   the user's screenshot (parent open, empty gap, no submenu text):
     1. the DESKTOP dropdown rule sets left:50% + translate(-50%) and
        visibility:hidden/opacity:0. In the mobile block v1 only reset
        position/transform on the CLOSED menu, so the OPEN (.active)
        menu still inherited translate(-50%) and was pushed off-screen;
     2. tn-header.js and the site's main.js BOTH toggled .active on the
        same click, cancelling each other out — the menu never opened.
   Both are fixed here (and in tn-header.js v2): the mobile rules below
   fully reset position/transform/visibility for closed AND open menus,
   and the JS now stops the click propagating to main.js. */
@media (max-width: 1199.98px) {
  .tn-header .nav-menu {
    position: fixed; width: 100%; height: 100%;
    top: 0; left: 0; z-index: 1040;
    visibility: hidden; opacity: 0;
    background: transparent;
  }
  .tn-header .nav-menu.show { visibility: visible; opacity: 1; }
  .tn-header .nav-menu .overlay { display: block; }
  .tn-header .nav-menu-scroller {
    position: absolute; top: 0; right: 0;
    width: min(360px, 88vw); height: 100%;
    background: #fff;
    box-shadow: -8px 0 32px rgba(0, 0, 0, .14);
    align-items: flex-start;
    overflow-y: auto;
    padding: 24px 20px 32px;
  }
  .tn-header .nav-menu-body { flex-direction: column; align-items: stretch; width: 100%; }
  .tn-header .nav-actions { flex-direction: column; align-items: stretch; width: 100%; gap: 0; margin: 0 !important; }
  .tn-header .nav-links { flex-direction: column; align-items: stretch; width: 100%; gap: 2px; margin: 0 !important; }
  .tn-header .nav-links .nav-link,
  .tn-header .nav-drop .nav-drop-btn {
    text-align: left; padding: 13px 14px; width: 100%;
    display: flex; justify-content: space-between; align-items: center;
    color: #171718 !important;
    font-size: 16px; font-weight: 600;
    background: transparent; border-radius: 12px;
    margin: 0 !important;
  }
  .tn-header .nav-links .nav-link:hover,
  .tn-header .nav-drop.active .nav-drop-btn {
    background: #f3f4f8;
  }
  /* v5 — the slide-in drawer is a WHITE panel, so its links/buttons stay
     DARK even though the (transparent) top bar uses white text. Same long
     selector as the desktop rules, so these win inside the drawer. */
  .tn-header.nav .nav-inner .nav-menu .nav-links .nav-link,
  .tn-header.nav .nav-inner .nav-menu .nav-links .nav-drop .nav-drop-btn {
    color: #171718 !important;
  }
  .tn-header.nav .nav-inner .nav-menu .nav-links .nav-link:hover,
  .tn-header.nav .nav-inner .nav-menu .nav-links .nav-link.active,
  .tn-header.nav .nav-inner .nav-menu .nav-links .nav-drop:hover .nav-drop-btn,
  .tn-header.nav .nav-inner .nav-menu .nav-links .nav-drop.active .nav-drop-btn {
    color: var(--primary_color) !important;
    background: #f3f4f8;
  }
  .tn-header .nav-actions .btn-outline-light {
    color: #171718 !important;
    border-color: #d4d7de;
  }
  .tn-header .nav-actions .btn-outline-light:hover { background: #f3f4f8; color: #171718; }
  /* Submenu: closed = FULLY hidden (takes NO space), open = a visible
     indented list directly below its parent.
     BUG FIX (v5.1): the desktop dropdown rule sets `display: block
     !important` with a long (0,7,0) selector, which BEAT the short mobile
     `display: none !important` (0,3,0) — so on mobile the CLOSED submenu
     stayed display:block but invisible (visibility:hidden, opacity:0),
     leaving a big empty gap and no visible items. These rules use the SAME
     long selector as the desktop rules, so they win inside the drawer. */
  .tn-header.nav .nav-inner .nav-menu .nav-links .nav-drop .nav-drop-menu {
    position: static !important;
    left: auto !important; top: auto !important;
    transform: none !important;
    display: none !important;
    visibility: hidden; opacity: 0; pointer-events: none;
    min-width: 0; width: 100%; max-width: none;
    box-shadow: none; border: 0; border-left: 3px solid #ede9fe;
    border-radius: 0 12px 12px 0;
    background: #fafaff;
    padding: 6px 0 6px 8px; margin: 2px 0 10px 0 !important;
  }
  .tn-header.nav .nav-inner .nav-menu .nav-links .nav-drop.active .nav-drop-menu,
  .tn-header.nav .nav-inner .nav-menu .nav-links .nav-drop.animated .nav-drop-menu {
    display: block !important;
    visibility: visible; opacity: 1; pointer-events: auto;
  }
  /* Submenu links: dark, readable text on the light panel — never white,
     plain rows like the reference (no pill shape, left-aligned). */
  .tn-header .nav-drop .nav-drop-menu .nav-link {
    display: flex; justify-content: flex-start; align-items: center;
    color: #1f2937 !important;
    background: transparent !important;
    font-size: 15px; font-weight: 500;
    padding: 11px 14px 11px 18px; margin: 0 !important;
    border-radius: 10px !important; text-align: left !important; width: 100%;
  }
  .tn-header .nav-drop .nav-drop-menu .nav-link:hover {
    background: #ede9fe !important; color: #171718 !important;
  }
  .tn-header .nav-drop .nav-drop-btn .fa-chevron-down { transition: transform .25s; }
  .tn-header .nav-drop.active .nav-drop-btn .fa-chevron-down { transform: rotate(180deg); }
  .tn-header .nav-actions-sm { display: flex !important; }
  /* Buttons: equal, comfortable spacing — no touching edges. */
  .tn-header .nav-actions .tn-premium-btn { margin: 14px 0 0 0 !important; }
  .tn-header .tn-premium-btn,
  .tn-header .nav-actions .btn {
    justify-content: center; width: 100%;
    margin: 0 !important;
    padding: 12px 16px; border-radius: 12px; font-size: 16px;
  }
  .tn-header .nav-actions > a.btn,
  .tn-header .nav-actions > button.btn { margin-top: 12px !important; }
  .tn-header .nav-actions > a.btn:first-of-type { margin-top: 0 !important; }
  .tn-header .nav-actions .tn-premium-btn + a.btn { margin-top: 12px !important; }
}
@media (max-width: 767.98px) {
  .tn-header .nav-inner { gap: 12px; }
  .tn-header .logo img { max-height: 36px; }
  .tn-pricing-card { padding: 20px 14px 14px; border-radius: 18px; }
  .tn-pricing-title { font-size: 20px; }
  .tn-pricing-subtitle { font-size: 13px; }
  .tn-plan-switcher-item { padding: 8px 14px; font-size: 14px; }
}
@media (max-width: 479.98px) {
  .tn-pricing-modal { padding: 10px; }
  .tn-pricing-card { max-height: calc(100vh - 20px); }
}

/* ---------- Footer: social icons + store buttons (v5) ----------
   Footer is dark, so the pills are dark grey with white icons/text,
   like the reference screenshots. Both rows wrap, so they stay
   responsive on mobile. */
.tn-social-row {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center;
  gap: 10px; margin-bottom: 18px; width: 100%;
}
.tn-social-btn {
  width: 44px; height: 44px; flex-shrink: 0;
  border-radius: 50%;
  background: #3c3c3c;
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 18px; text-decoration: none;
  transition: background .2s, transform .2s;
}
.tn-social-btn:hover { background: #835aff; color: #fff; transform: translateY(-2px); }
.tn-store-row { margin-top: 18px; text-align: center; width: 100%; }
.tn-store-title { color: #fff; font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.tn-store-buttons {
  display: flex; flex-wrap: wrap;
  justify-content: center; align-items: center;
  gap: 10px;
}
.tn-store-btn-ft {
  background: #3c3c3c;
  border: 1px solid #737373;
  color: #fff;
  border-radius: 20px;
  padding: 8px 14px;
  font-size: 14px; font-weight: 500;
  white-space: nowrap; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  transition: background .2s;
}
.tn-store-btn-ft:hover { background: #4a4a4a; color: #fff; }
.tn-store-btn-ft img { width: 22px; height: 22px; display: block; }
.tn-store-btn-ft--icon-only { padding: 8px 10px; }
@media (max-width: 767.98px) {
  .tn-social-btn { width: 40px; height: 40px; font-size: 16px; }
  .tn-social-row { gap: 8px; margin-bottom: 14px; }
  .tn-store-buttons { gap: 8px; }
  .tn-store-btn-ft { padding: 7px 12px; font-size: 13px; }
}

/* ---------- Random Name Generator page ---------- */
.rng-form {
  background: #f8f8fc;
  border: 1px dashed rgba(0, 0, 0, .12);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 8px;
}
.rng-profile { margin-top: 8px; }
.rng-group-title {
  background: #349e5b;
  color: #fff;
  text-align: center;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 700;
  margin: 20px 0 6px;
}
.rng-group {
  background: #f0f0f5;
  border-radius: 6px;
  padding: 8px 12px;
  font-weight: 700;
  margin: 16px 0 4px;
}
.rng-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 4px;
  border-bottom: 1px solid #eee;
}
.rng-row label {
  width: 190px;
  flex-shrink: 0;
  font-weight: 600;
  margin: 0;
}
.rng-row .rng-value { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.rng-row .rng-copy { flex-shrink: 0; }
.rng-about h3 { font-size: 20px; margin: 22px 0 8px; }
@media (max-width: 767.98px) {
  .rng-row { flex-wrap: wrap; gap: 6px; }
  .rng-row label { width: 100%; }
  .rng-form { padding: 14px; }
}
/* ---------- Home-page pricing (v5.5) ----------
   1) The Monthly/Yearly switch: make it bigger and bolder ("weight") and
      let "Yearly (SAVE BIG)" fit on ONE line instead of wrapping. The theme
      gives the items a fixed 90px width, 35px height, 16px / weight 400 —
      too narrow for the Yearly label, so it wrapped to two lines.
   2) The X (excluded-feature) icons here get the same orange #ff9c37 as
      the popup. This selector ties the theme's (0,4,0) rule and this file
      loads after style.css, so it wins. */
.plan-switcher .plan-switcher-item {
  height: 44px !important;
  width: 185px !important;
  flex-shrink: 0;
  padding: 0 16px;
  font-size: 17px !important;
  font-weight: 700 !important;
  white-space: nowrap;
}
.plan .plan-features .plan-feat .plan-feat-icon-v2 { background-color: #ff9c37; }
@media (max-width: 575.98px) {
  .plan-switcher .plan-switcher-item {
    height: 40px !important;
    width: 155px !important;
    padding: 0 12px;
    font-size: 15px !important;
  }
}

/* ---------- Header/hero background (v5.6) ----------
   Blue gradient -> solid dark #121212. The theme's .header rule uses
   !important, so this needs it too (this file loads after style.css). */
.header { background: #121212 !important; padding-top: 16px; }