/*
 * Shared by web/plans.blade.php (the public marketing page) and
 * web/newListing/plan-select.blade.php (the Add-a-New-Business flow's own
 * step 1, via web.partials.plan-tiles).
 *
 * This is a deliberate visual departure from the rest of the live site's
 * older navy-header/orange-price-band pricing skin (public/css/web.css's
 * .subscribe .pricing-plan rules) - after comparing the live result
 * against IP-Add-Listing-Example.zip's reference screenshot side by side,
 * the owner explicitly asked for the clean white-card look from that
 * reference to replace it everywhere (both pages), not just match its
 * structure. Colors below still reuse the site's own extracted tokens
 * (tokens.css: --ip-color-primary, --ip-color-accent, --ip-color-dark,
 * --ip-color-border, --ip-color-muted) rather than introducing brand new
 * ones - only the card radius/shadow are new, and scoped to this one
 * component, as the visible, intentional exception that comes with
 * building a new component skin on request (Design Principles §1 rule 3:
 * "one component, one look" - this is that component's one look, applied
 * consistently in both places it appears).
 */

/* IP-UI-Cleanup Batch 2 item 1: the "Key features" trigger moved out from
   under the heading into this row, sharing it with the billing toggle -
   toggle+badge on the left, trigger on the right, wrapping to its own
   full-width line below them once the row doesn't fit (small screens).
   Margin-bottom moved here (off .billing-toggle below) since it's now the
   row as a whole that needs the gap before the plan cards, not just the
   toggle specifically. */
.plan-tiles-top-row {
  /* IP-Design-Updates-Session-1.md Item 6: the page title's --title-gap
     to this row. .ipflow-heading's own 8px bottom margin (shared with
     every flow step) collapses into this one, so the full token goes
     here and the visible gap is exactly --title-gap. */
  margin-top: var(--title-gap, 16px);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--ip-space-md, 16px);
  margin-bottom: var(--ip-space-xl, 25px);
}
.plan-tiles-top-row .billing-toggle {
  margin-bottom: 0;
}
/* Same green look as the old full-width banner it replaces (Batch 1), but
   sized to its own text instead of stretching across the page, and with
   no icon (item 1 removes it). A <button> (opens the "Key features"
   dialog), chrome reset to keep the plain highlighted-text look. */
.plan-tiles-key-features-trigger {
  display: inline-block;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  font: inherit;
  padding: 12px 20px;
  border-radius: var(--ip-radius-sm, 4px);
  background: rgba(124, 186, 0, .12);
  color: var(--ip-color-dark, #40555c);
  font-weight: 600;
}
.plan-tiles-key-features-trigger:hover,
.plan-tiles-key-features-trigger:focus {
  background: rgba(124, 186, 0, .2);
}
@media (max-width: 767px) {
  .plan-tiles-key-features-trigger {
    display: block;
    width: 100%;
    text-align: left;
    white-space: normal;
  }
}

/* IP-UI-Cleanup Batch 2 item 2: rebuilt on the Advanced Search panel's own
   modal chrome (public/css/web.css's .advanced-search overlay/.content-box
   pairing) instead of the generic .ipflow-dialog look - title at h4's
   size/weight (was inheriting a full h2, reading as oversized), real
   space below it before the first description, and a backdrop tint
   matching that other modal's overlay instead of .ipflow-dialog's own
   default. Still a native <dialog> underneath (kept for the free
   focus-trap/Escape-to-close it gives for nothing), just reskinned. */
.plan-tiles-key-features-dialog::backdrop {
  background: rgba(64, 85, 92, .8);
}
.plan-tiles-key-features-dialog .ipflow-dialog-header {
  margin-bottom: var(--ip-space-xl, 25px);
}
.plan-tiles-key-features-dialog .ipflow-dialog-header h2 {
  font-size: var(--h4-size, 18px);
  line-height: var(--h4-line-height, 24px);
  font-weight: var(--h4-weight, 500);
}
/* Plain paragraphs, not a bulleted list (that's a separate, still-pending
   decision) - no left indent, descriptions start at the title's own left
   edge. */
.plan-tiles-key-features-list p {
  margin: 0;
}
.plan-tiles-key-features-list p + p {
  margin-top: var(--ip-space-md, 12px);
}

.billing-toggle {
  text-align: left;
}
.billing-toggle button {
  background: var(--ip-color-bg-light, #f5f5f5);
  border: none;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  min-height: 44px;
  color: var(--ip-color-dark, #40555c);
}
/* Targeted by id, not :first-child/:last-child - the badge span right
   after the yearly button is the toggle's actual last child, so
   "button:last-child" never matched the yearly button and it rendered
   with square corners on both sides while monthly's outer edge was
   rounded. */
#billing-toggle-monthly {
  border-radius: 999px 0 0 999px;
}
#billing-toggle-yearly {
  border-radius: 0 999px 999px 0;
}
.billing-toggle button[aria-pressed="true"] {
  background: var(--success-strong, #47810f);
  color: #fff;
}
/* Back to a pill glued onto the toggle, per explicit owner direction
   (not the Info-alert-style callout the design system doc suggests) -
   but on the design system's own --promo-red token now, not the old
   ad-hoc hardcoded red. Solid fill, not the badges' usual soft tint,
   so it still stands out at a glance and keeps reading as its own
   "special offer" callout next to a now-green active segment (a soft
   tint here would still blend in against that green, the same reason
   this was never plain --success-strong). */
/* IP-Search-Toggle-Chip-Updates.md item 2 (design system Toggle
   component): 32px pill, 16px side padding, 14px bold white text, and a
   16px Phosphor FILL check-fat before the text while Yearly is selected
   (the one sanctioned Fill icon on the site - Regular/Bold check both
   read too thin at 16px next to the bold label). The check is toggled by
   the same setBilling() that switches the prices; [hidden] has to be
   restated because the Fill stylesheet's own .ph-fill sets
   display:inline-block, which would otherwise beat the UA's [hidden]. */
.billing-toggle .billing-toggle-badge {
  display: inline-flex;
  align-items: center;
  /* middle, not the inline default baseline: with baseline alignment the
     pill shifted 2px vertically the moment the check appeared (the icon
     changes where the box's baseline sits) - the handoff's "no other
     element should move" covers the pill itself too. */
  vertical-align: middle;
  gap: var(--space-2, 8px);
  height: 32px;
  margin-left: 10px;
  padding: 0 var(--space-4, 16px);
  border-radius: var(--radius-pill, 999px);
  background: var(--promo-red, #b24334);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
/* IP-UI-Fixes-2026-10-01 item 5 (phones only): the pill wraps under the
   toggle on narrow screens, where its inline 10px left margin read as an
   indent and it sat flush against the buttons - on its own line, aligned
   with the toggle's left edge, 12px below it. Desktop unchanged. */
@media (max-width: 767px) {
  .billing-toggle .billing-toggle-badge {
    display: flex;
    width: max-content;
    max-width: 100%;
    margin: var(--space-3, 12px) 0 0;
  }
}
.billing-toggle .billing-toggle-badge__check {
  font-size: 16px;
  line-height: 1;
  color: #fff;
}
.billing-toggle .billing-toggle-badge__check[hidden] {
  display: none;
}

/* Explicit column counts (grid), not an organic flex-wrap - flex-wrap
   fits as many fixed-width cards as happen to fit per row at a given
   container width, which has no guarantee of landing on a clean
   4/2/1 split: at some in-between widths 3 tiles fit the first row and
   the 4th wraps alone onto its own row, which read as broken rather
   than intentionally responsive. Grid's repeat(N, 1fr) always divides
   the full row into exactly N equal columns, so there's no width at
   which anything other than 4, 2, or 1 per row can occur. */
.plan-tiles-modern {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ip-space-lg, 20px);
}
@media (min-width: 768px) {
  .plan-tiles-modern {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .plan-tiles-modern {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Not a <label> any more (see plan-tiles.blade.php) - only the CTA button
   is interactive, so the card itself gets no pointer cursor. It stays
   position:relative only because the hidden radio input inside it is
   still absolutely positioned. */
.plan-tile-card {
  display: flex;
  flex-direction: column;
  /* No explicit width/flex-basis needed any more - .plan-tiles-modern's
     grid-template-columns above is what decides how many sit per row at
     any given width; each card just fills its own grid cell. min-width:0
     stops a long word/price in a narrow (1-column mobile) cell from
     forcing the grid track wider than the container. */
  min-width: 0;
  background: var(--ip-color-white, #fff);
  border: 1px solid var(--ip-color-border, #ddd);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
  padding: var(--ip-space-lg, 20px);
  text-align: left;
  position: relative;
}
/* IP Design System (IP-Design-System.md §4.5): "Recommended" is its
   own dedicated recommended-green token, distinct from success/
   success-strong (those mean completed/success elsewhere in the
   flow) - the doc only gives one token here, not a fg/bg pair, so
   this stays a solid-border card with its own translucent wash tied
   to that same color rather than a separate bg token. */
.plan-tile-card.is-recommended {
  border-color: var(--recommended-green, #4b7443);
  background: rgba(75, 116, 67, .06);
}
/* Pinned to the bottom-left corner, where the visible CTA label already
   renders - not left at top/left:auto (its default "static position",
   the very top of the card, before .plan-tile-header). The feature list
   runs long enough (15 rows) that the card's top edge is often scrolled
   well above the viewport by the time someone reaches the CTA at the
   bottom and clicks it - clicking the <label for="{radioId}"> focuses
   this radio natively, and a browser scrolls a focused element into
   view if it isn't already, which meant the whole page jumped back up
   to the (invisible) top of the card for an instant before the real
   navigation to the next step. Positioned here, focusing it needs no
   scroll at all, since that's already what's on screen. */
.plan-tile-radio {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  bottom: 0;
  left: 0;
}
/* :has() is a progressive enhancement (broad support by now, but not
   universal) - the radio's own native focus outline is never suppressed,
   so keyboard focus stays visible even without it. Drawn around the CTA
   button itself now, not the whole (no longer clickable) card. */
.plan-tile-card:has(.plan-tile-radio:focus-visible) .plan-tile-cta {
  outline: 3px solid var(--focus-ring, #3270a2);
  outline-offset: 2px;
}

.plan-tile-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.plan-tile-name {
  font-family: var(--ip-font-heading, 'Raleway', sans-serif);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .02em;
  color: var(--ip-color-dark, #40555c);
}
.plan-tile-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-pill, 999px);
  background: var(--recommended-green, #4b7443);
  color: var(--surface, #fff);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
}
.plan-tile-tagline {
  margin: 0 0 var(--ip-space-md, 15px);
  color: var(--ip-color-dark, #40555c);
  opacity: .75;
  font-size: 13px;
}

.plan-tile-price {
  margin-bottom: var(--ip-space-md, 15px);
}
.plan-tile-price-amount {
  font-family: var(--ip-font-heading, 'Raleway', sans-serif);
  font-size: 32px;
  font-weight: 800;
  color: var(--ip-color-dark, #40555c);
}
.plan-tile-price-amount sup {
  font-size: 16px;
  top: -1em;
}
.plan-tile-price-suffix {
  font-size: 14px;
  color: var(--ip-color-dark, #40555c);
  opacity: .6;
  margin-left: 2px;
}
.plan-tile-price-was {
  display: block;
  font-size: 13px;
  text-decoration: line-through;
  color: var(--ip-color-muted, #b5b5b5);
}
.plan-tile-yearly-note {
  display: block;
  font-size: 12px;
  color: var(--ip-color-muted, #b5b5b5);
}

.plan-tile-features {
  list-style: none;
  margin: 0 0 var(--ip-space-lg, 20px);
  padding: var(--ip-space-md, 15px) 0 0;
  border-top: 1px solid var(--ip-color-border, #ddd);
  flex: 1 1 auto;
}
.plan-tile-features li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--ip-color-dark, #40555c);
  border-bottom: 1px solid var(--ip-color-border, #ddd);
}
.plan-tile-features li:last-child {
  border-bottom: none;
}
.plan-tile-features li.has i {
  color: var(--ip-color-accent, #7cba00);
  margin-top: 3px;
}
/* Text greyed out like a disabled control (kept visible, not
   screen-reader-only, per explicit owner direction) rather than just a
   bare X with nothing explaining what's missing. */
.plan-tile-features li.has-not {
  color: var(--ip-color-muted, #b5b5b5);
}
.plan-tile-features li.has-not i[aria-hidden] {
  font-size: 16px;
  line-height: 1;
}

/* Same look on both pages - both now render the exact same radio-card
   (see plan-tiles.blade.php), so there's only ever one element this rule
   needs to style, not a plain link on one page and a card affordance on
   the other.

   Color/border/radius/font-weight now come from the shared .btn.btn-primary
   classes on the element itself (IP-Design-System.md's one Primary button
   look, site-wide) instead of a one-off duplicate of the same blue here -
   this rule only supplies what .btn.btn-primary doesn't: the full-width
   block layout pinned to the bottom of the card. The explicit margin
   reset zeroes out .btn's own `margin: 10px 0` on the sides .btn-primary
   doesn't need here (this element already sits inside a card with its
   own spacing). */
.plan-tile-cta {
  display: block;
  text-align: center;
  min-height: 44px;
  line-height: 28px;
  padding: 8px 16px;
  text-decoration: none;
  margin: auto 0 0;
}

/* Item 2 (Batch 1): the à la carte note sits centered under the plan
   cards, on the site's .alert base rule (web.css) for its padding/
   border-radius/font-weight-reset only. width:100% + the cards' own
   stacking already puts it full-width on mobile once the grid collapses
   to one column.
   Batch 2 item 4: the icon is gone (content:none on .alert's own ::before)
   and the text is regular weight now, not .alert's default 600 - and the
   gap above it doubled from 16px to 32px, same value on mobile too (no
   media-query override needed, margin-top doesn't change at narrower
   widths). Left padding no longer needs to reserve room for the icon,
   so it matches the alert's own right/top/bottom padding instead of the
   40px .alert's base rule sets aside for it.
   2026-09-30 (direct owner request): recolored from the Info alert to
   the Secondary button's own fill/border/hover/active/focus - reads as
   a giant secondary-button-styled banner now. Reuses the exact tokens
   .btn.btn-secondary uses in web.css rather than duplicating new values;
   only the color trio + interactive states below change - size/padding/
   shape stay exactly what .alert's own base rule and this rule's own
   margin/max-width/centering already set. */
.plan-tiles-ala-carte {
  margin: var(--space-6, 32px) auto 0;
  max-width: 700px;
  text-align: center;
  font-weight: normal;
  padding-left: var(--space-4, 16px);
  background-color: var(--button-secondary-fill, #eef3f7);
  border-color: var(--button-secondary-fill, #eef3f7);
}
.plan-tiles-ala-carte:before {
  content: none;
}
.plan-tiles-ala-carte:hover {
  background-color: var(--button-secondary-hover, #dfeaf2);
  border-color: var(--button-secondary-hover, #dfeaf2);
}
.plan-tiles-ala-carte:active {
  background-color: var(--button-secondary-active, #cfe0ec);
  border-color: var(--button-secondary-active, #cfe0ec);
}
.plan-tiles-ala-carte:focus-visible {
  outline: 2px solid var(--focus-ring, #3270a2);
  outline-offset: 2px;
}
/* The whole banner is now the click target (was just the "Contact us"
   word inside it) - .plan-tiles-ala-carte is a real <a> element now, so
   this resets the browser's own link styling across every link state
   (needed at this specificity - a bare class-only rule loses to the
   browser's own a:visited otherwise). Text color matches the Secondary
   button's own text color (--brand-blue-dark) rather than the Info
   alert's; the hover/active background+border change above is the
   banner's own affordance now, so no separate border-color-only hover
   rule is needed here. */
.plan-tiles-ala-carte-link,
.plan-tiles-ala-carte-link:link,
.plan-tiles-ala-carte-link:visited,
.plan-tiles-ala-carte-link:hover,
.plan-tiles-ala-carte-link:active {
  display: block;
  color: var(--brand-blue-dark, #295b84);
  text-decoration: none;
  cursor: pointer;
}