/**
 * RetailFix Core — App Switcher styles
 * Shared across every product page — one source of truth alongside the
 * matching app-switcher.js. Never duplicate these rules into a product's
 * own stylesheet; enqueue this file as a dependency instead.
 */
.rf-topnav {
  z-index: 1000;
  box-sizing: border-box;
  background-color: #f9a316;
  justify-content: space-between;
  align-items: center;
  height: 65px;
  padding: 0 15%;
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
/* Slides away while scrolling down, and back on any scroll up. */
.rf-topnav {
  transition: transform 0.25s ease;
}
.rf-topnav.rf-topnav-away {
  transform: translate3d(0, -100%, 0);
}
@media (prefers-reduced-motion: reduce) {
  .rf-topnav {
    transition: none;
  }
}
.rf-topnav-logo {
  background-image: url(https://retailfix.com/wp-content/uploads/2025/02/RF-Logo.webp);
  background-position: 0;
  background-repeat: no-repeat;
  background-size: contain;
  flex-shrink: 0;
  width: 65px;
  height: 65px;
  pointer-events: none;
}
.rf-topnav-user {
  text-align: right;
  color: #fff;
  line-height: 1.2;
}
.rf-topnav-logout {
  color: #fff;
  font-size: 14.5px;
  font-weight: 800;
  cursor: pointer;
  display: block;
}
.rf-topnav-email {
  color: #ffffffd9;
  margin-top: 2px;
  font-size: 12px;
}

.app-switcher {
  position: relative;
}
.app-switcher-toggle {
  background: none;
  border: none;
  padding: 6px;
  margin: 0;
  cursor: pointer;
  color: #fff;
  align-items: center;
  display: flex;
  -webkit-tap-highlight-color: transparent;
}
.app-switcher-menu {
  z-index: 50;
  background: #fff;
  border-radius: 12px;
  flex-direction: column;
  min-width: 200px;
  padding: 6px;
  display: flex;
  position: absolute;
  top: 100%;
  right: 0;
  box-shadow: 0 12px 32px #0000002e;
  /* Closed state: scaled down and anchored at the hamburger icon's corner
     (top right, matching where this menu is positioned relative to the
     toggle) so growing to scale(1) visibly emerges from the icon rather
     than just fading/popping in from nowhere. visibility is delayed on
     the way out (but not on the way in) so pointer-events/hit-testing
     turn off only after the shrink animation actually finishes. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform-origin: top right;
  transform: scale(0.35) translateY(-6px);
  transition:
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.16s ease,
    visibility 0s linear 0.22s;
}
.app-switcher.open .app-switcher-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1) translateY(0);
  transition:
    transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.16s ease;
}
/* Desktop/pointer devices: open on hover, not just click — scoped to
   devices with real hover + a fine pointer (mouse/trackpad) so touch
   devices (no true hover state) keep the click/tap-only behavior in
   app-switcher.js untouched. */
@media (hover: hover) and (pointer: fine) {
  .app-switcher:hover .app-switcher-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: scale(1) translateY(0);
    transition:
      transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
      opacity 0.16s ease;
  }
}
.app-switcher-menu a {
  color: #1c1917;
  border-radius: 8px;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  display: flex;
}
.app-switcher-menu a svg {
  color: #bb0016;
  flex-shrink: 0;
}
.app-switcher-menu a:hover {
  background: #fbe9e5;
}
.app-switcher-menu a.active {
  background: #fbe9e5;
  color: #bb0016;
}
.app-switcher-brand {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px 0 9px;
  color: #bb0016;
  font-family: "Dongle", sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 0.8;
  letter-spacing: 0.005em;
  user-select: none;
}
.app-switcher-brand-logo {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: -4px;
  background: url(https://retailfix.com/wp-content/uploads/2025/02/RF-Logo.webp) center / contain no-repeat;
}
.app-switcher-divider.app-switcher-brand-divider {
  margin-top: 2px;
}

/* AI Content Studio with On Cue on the right of the same row */
.app-switcher-split {
  display: flex;
  align-items: stretch;
}
.app-switcher-split > a:first-child {
  flex: 1;
  white-space: nowrap;
}
.app-switcher-menu a.app-switcher-cue {
  position: relative;
  flex: none;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-left: 4px;
  padding: 6px 12px;
  min-width: 52px;
  color: #bb0016;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
}
.app-switcher-menu a.app-switcher-cue::before {
  content: "";
  position: absolute;
  left: -3px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: #0000001a;
}
.app-switcher-menu a.app-switcher-cue svg {
  width: 18px;
  height: 18px;
}
/* Apps paid for before launch, under one small heading and a little muted. */
.app-switcher-soon {
  padding: 10px 14px 2px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a8a29e;
}
.app-switcher-menu a.app-switcher-held {
  color: #78716c;
  padding-top: 8px;
  padding-bottom: 8px;
}
.app-switcher-divider {
  height: 1px;
  background: #0000001a;
  margin: 6px 8px;
}
.app-switcher-user {
  padding: 8px 14px 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.app-switcher-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: #f5f0ee;
  color: #78716c;
  display: flex;
  align-items: center;
  justify-content: center;
}
.app-switcher-avatar img {
  width: 100%;
  height: 100%;
  /* Crops from the bottom, keeps the top of the image visible — matters
     most for a face-centric photo, which is usually near the top. */
  object-fit: cover;
  object-position: top center;
}
.app-switcher-user-text {
  min-width: 0;
}
.app-switcher-name {
  color: #1c1917;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-switcher-email {
  color: #5c3f3d;
  font-size: 12px;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobile — larger tap targets, tighter topnav padding on narrow screens */
@media (width<=760px) {
  .rf-topnav {
    padding: 0 20px;
  }
  .app-switcher-toggle {
    padding: 6px;
  }
  .app-switcher-menu {
    min-width: 220px;
  }
  .app-switcher-menu a {
    padding: 13px 14px;
  }
  /* Hidden below this breakpoint, not removed outright — the avatar and
     name are now competing for the same space the email used to have
     alone, and there generally isn't room for all three on a narrow
     screen. Shown again above this width. */
  .app-switcher-email-responsive {
    display: none;
  }
}

/**
 * Confirm Dialog — shared modal for destructive actions, matching JS in
 * app-switcher.js. Colors are hardcoded (not var(--red-deep) etc.) because
 * those custom properties are only defined in Suite's own stylesheet, not
 * Content Studio's — this needs to render identically on either page.
 */
.rf-confirm-overlay {
  z-index: 999999999;
  background: #00000080;
  justify-content: center;
  align-items: center;
  display: none;
  position: fixed;
  inset: 0;
  padding: 20px;
  box-sizing: border-box;
}
.rf-confirm-overlay.open {
  display: flex;
}
.rf-confirm-card {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 380px;
  padding: 24px;
  box-sizing: border-box;
  box-shadow: 0 20px 60px #00000040;
}
.rf-confirm-title {
  color: #1c1917;
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
}
.rf-confirm-message {
  color: #5c3f3d;
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.5;
}
.rf-confirm-message a {
  color: #bb0016;
  font-weight: 700;
  text-decoration: underline;
}
.rf-confirm-actions {
  justify-content: flex-end;
  gap: 10px;
  display: flex;
}
.rf-confirm-link-wrap {
  display: inline-flex;
  text-decoration: none;
}
.rf-confirm-btn {
  display: inline-block;
  cursor: pointer;
  border: none;
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.15s;
}
.rf-confirm-btn-cancel {
  color: #1c1917;
  background: #f2f2f2;
}
.rf-confirm-btn-cancel:hover {
  background: #e6e6e6;
}
.rf-confirm-btn-confirm {
  color: #fff;
  background: #5c3f3d;
}
.rf-confirm-btn-confirm:hover {
  background: #4a3230;
}
.rf-confirm-btn-confirm.danger {
  background: #bb0016;
}
.rf-confirm-btn-confirm.danger:hover {
  background: #950012;
}
.rf-confirm-btn-confirm a {
  color: inherit;
  text-decoration: none;
}

@media (width<=760px) {
  .rf-confirm-card {
    padding: 20px;
  }
}

/**
 * Connected-scrapes dropdown (Live Scraper + Asset Library image cards).
 * The menu is a normal DOM child of the card, not the icon (they're siblings,
 * both direct children of [data-imgcard]) — so plain left:0/right:0 here are
 * relative to the CARD (its nearest positioned ancestor), i.e. the actual
 * image, regardless of where the small icon sits within it. That's genuinely
 * the correct reference point already, by ordinary CSS positioning rules —
 * no anchor-name/anchor() needed to achieve it, and no @supports branching.
 * (A CSS Anchor Positioning version was tried here and reverted — it
 * anchored to the small icon element specifically, not the full image,
 * which was the actual bug, not something a fallback needed to work around.)
 * Left/right/center is decided in JS at open time (openLibraryConnMenu), by
 * measuring the card's real position against the real viewport width.
 */
.rf-conn-menu {
  position: absolute;
  top: 100%;
  margin-top: 4px;
  width: max-content;
  max-width: 380px;
}
.rf-conn-menu.rf-conn-menu-left {
  left: 0;
}
.rf-conn-menu.rf-conn-menu-right {
  left: auto;
  right: 0;
}
.rf-conn-menu.rf-conn-menu-center {
  left: 50%;
  transform: translateX(-50%);
}

/**
 * Custom tooltip for the small image-card icon buttons (delete, unlink,
 * origin, expand, etc.) — replaces the native title="" tooltip, which
 * can't be styled by CSS at all (browser-drawn, no styling hooks exist).
 * Pure CSS, no JS: swap title="" for data-tooltip="" on an element and this
 * handles the rest. Deliberately does NOT set position:relative on
 * [data-tooltip] itself — every button this is used on already has its own
 * position:absolute from Tailwind, and adding a second, competing rule for
 * the same property on the same element caused a real regression: cards
 * are flex containers, so on whichever button "position" resolved the wrong
 * way, it fell back into normal flow and pushed the image over, showing up
 * as stray whitespace. Only ever style ::after here — never re-add a
 * position rule on the base selector.
 *
 * Default is ABOVE the icon — every image-card icon (top-right cluster:
 * delete/unlink/expand, and bottom-right: origin/connected-scrapes) wants
 * this. Only the 3 lightbox controls (Close/Next/Previous) want it BELOW
 * instead — they get the .rf-tooltip-below override further down.
 */
[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 6px;
  background: #1c1917;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  padding: 4px 8px;
  border-radius: 6px;
  box-shadow: 0 4px 12px #00000040;
  pointer-events: none;
  z-index: 100000;
}
/* Exception: lightbox controls keep the tooltip below instead of above. */
[data-tooltip].rf-tooltip-below:hover::after {
  bottom: auto;
  top: 100%;
  margin-bottom: 0;
  margin-top: 6px;
}
/* Super Scrape badge only — right-aligned instead of centered, same
   left:auto/right:0/transform:none idiom as the Connected scrapes/Scrape
   Origin edge-aware tooltips below. */
[data-tooltip="Super Scrape"]:hover::after {
  left: auto;
  right: 0;
  transform: none;
}
/* Recent Scrapes card back — the "Posting History" header's calendar
   icon. Left-aligned instead of centered: the tooltip's own left edge
   lines up with the icon's left edge, rather than the tooltip centering
   itself (and potentially overflowing) relative to a small icon sitting
   near the card's own left edge. */
[data-tooltip="Post was scheduled"]:hover::after {
  left: 0;
  transform: none;
}

/**
 * Horizontal positioning for the link icon's tooltip specifically
 * ("Connected scrapes" / "Scrape Origin") — beside the icon, not above it.
 * This is the default (center/middle columns land here); left/right edge
 * columns get overridden by the more specific breakpoint rules below via
 * higher selector specificity. Targets the tooltip by its exact text via
 * attribute selector, not a class — scoped to just this one tooltip, not
 * delete/expand/remove too.
 */
[data-tooltip="Connected scrapes"]:hover::after,
[data-tooltip="Scrape Origin"]:hover::after {
  left: auto;
  right: 100%;
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}

/* <640px — both grids are 2 columns: col 1 = left, col 2 = right, no middle */
@media (max-width: 639px) {
  [data-imgcard]:nth-child(2n + 1)
    [data-tooltip="Connected scrapes"]:hover::after,
  [data-imgcard]:nth-child(2n + 1) [data-tooltip="Scrape Origin"]:hover::after {
    left: auto;
    right: 100%;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
  [data-imgcard]:nth-child(2n) [data-tooltip="Connected scrapes"]:hover::after,
  [data-imgcard]:nth-child(2n) [data-tooltip="Scrape Origin"]:hover::after {
    left: auto;
    right: 100%;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
}

/* Live Scraper grid — 4 columns from 640px onward, permanently */
@media (min-width: 640px) {
  .rf-scraper-grid
    [data-imgcard]:nth-child(4n + 1)
    [data-tooltip="Connected scrapes"]:hover::after,
  .rf-scraper-grid
    [data-imgcard]:nth-child(4n + 1)
    [data-tooltip="Scrape Origin"]:hover::after {
    left: 0;
    right: auto;
    transform: none;
  }
  .rf-scraper-grid
    [data-imgcard]:nth-child(4n)
    [data-tooltip="Connected scrapes"]:hover::after,
  .rf-scraper-grid
    [data-imgcard]:nth-child(4n)
    [data-tooltip="Scrape Origin"]:hover::after {
    left: auto;
    right: 0;
    transform: none;
  }
}

/* Asset Library grid — 3 columns, 640–767px (sm, before md) */
@media (min-width: 640px) and (max-width: 767px) {
  .rf-library-grid
    [data-imgcard]:nth-child(3n + 1)
    [data-tooltip="Connected scrapes"]:hover::after,
  .rf-library-grid
    [data-imgcard]:nth-child(3n + 1)
    [data-tooltip="Scrape Origin"]:hover::after {
    left: auto;
    right: 100%;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
  .rf-library-grid
    [data-imgcard]:nth-child(3n)
    [data-tooltip="Connected scrapes"]:hover::after,
  .rf-library-grid
    [data-imgcard]:nth-child(3n)
    [data-tooltip="Scrape Origin"]:hover::after {
    left: auto;
    right: 100%;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
}
/* Asset Library grid — 4 columns, 768–1023px (md, before lg) */
@media (min-width: 768px) and (max-width: 1023px) {
  .rf-library-grid
    [data-imgcard]:nth-child(4n + 1)
    [data-tooltip="Connected scrapes"]:hover::after,
  .rf-library-grid
    [data-imgcard]:nth-child(4n + 1)
    [data-tooltip="Scrape Origin"]:hover::after {
    left: auto;
    right: 100%;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
  .rf-library-grid
    [data-imgcard]:nth-child(4n)
    [data-tooltip="Connected scrapes"]:hover::after,
  .rf-library-grid
    [data-imgcard]:nth-child(4n)
    [data-tooltip="Scrape Origin"]:hover::after {
    left: auto;
    right: 100%;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
}
/* Asset Library grid — 6 columns, 1024px and up (lg) */
@media (min-width: 1024px) {
  .rf-library-grid
    [data-imgcard]:nth-child(6n + 1)
    [data-tooltip="Connected scrapes"]:hover::after,
  .rf-library-grid
    [data-imgcard]:nth-child(6n + 1)
    [data-tooltip="Scrape Origin"]:hover::after {
    left: auto;
    right: 100%;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
  .rf-library-grid
    [data-imgcard]:nth-child(6n)
    [data-tooltip="Connected scrapes"]:hover::after,
  .rf-library-grid
    [data-imgcard]:nth-child(6n)
    [data-tooltip="Scrape Origin"]:hover::after {
    left: auto;
    right: 100%;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }
}

/* A founder's crown, faint in the menu's bottom-right corner. Its box sits
   inside the menu, so only the right and bottom edges trim it. */
.app-switcher-crown {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 130px;
  height: 130px;
  overflow: hidden;
  border-bottom-right-radius: 12px;
  pointer-events: none;
  z-index: 0;
}
.app-switcher-crown svg {
  position: absolute;
  right: -8px;
  bottom: -24px;
  width: 96px;
  height: 96px;
  color: #bb0016;
  opacity: 0.12;
  transform: rotate(-14deg);
}
.app-switcher-menu > :not(.app-switcher-crown) {
  position: relative;
  z-index: 1;
}

/* ── Agencies: the "Working on" button, the list, and their boxes ────────── */
.rf-biz-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 5px 12px 5px 5px;
  border-radius: 999px;
  border: 1px solid #f0d9d6;
  background: #fff;
  color: #1c1917;
  font: inherit;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  cursor: pointer;
  box-shadow: 0 2px 8px rgb(187 0 22 / 8%);
  max-width: 260px;
  text-align: left;
}
.rf-biz-pill:focus-visible { outline: 3px solid #ffffffb3; outline-offset: 2px; }
.rf-biz-pill-t { display: flex; flex-direction: column; line-height: 1.1; min-width: 0; }
.rf-biz-pill-t small { font-size: 11px; color: #78716c; font-weight: 600; }
.rf-biz-pill-t b { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rf-biz-chev { display: grid; color: #bb0016; flex: none; }
.rf-biz-pill[aria-expanded="true"] .rf-biz-chev { transform: rotate(180deg); }
.rf-biz-av {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #f3ebe9;
}
.rf-biz-av img { width: 100%; height: 100%; object-fit: cover; display: block; background: #fff; }
/* Beside the menu, on every page. */
.rf-biz-pill-nav {
  margin-left: auto;
  margin-right: 10px;
  padding: 4px 10px 4px 4px;
  gap: 8px;
}
.rf-biz-pill-nav .rf-biz-av { width: 28px; height: 28px; font-size: 11px; }
.rf-biz-pill-nav .rf-biz-pill-t b { font-size: 14px; }
@media (max-width: 760px) {
  /* Phones: the name alone. */
  .rf-biz-pill-nav .rf-biz-pill-t small { display: none; }
  .rf-biz-pill-nav { max-width: 46vw; }
}

.rf-biz-layer { position: fixed; inset: 0; z-index: 100000; }
.rf-biz-menu {
  position: fixed;
  width: 360px;
  max-width: calc(100vw - 24px);
  max-height: min(560px, calc(100vh - 120px));
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #efe3e1;
  border-radius: 18px;
  box-shadow: 0 18px 50px rgb(28 25 23 / 18%);
  padding: 14px;
  box-sizing: border-box;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  color: #1c1917;
}
.rf-biz-menu-h { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 800; padding: 2px 6px 10px; }
.rf-biz-menu-h i { font-style: normal; background: #fbeceb; color: #bb0016; border-radius: 999px; padding: 1px 8px; font-size: 12px; }
.rf-biz-menu-h em { margin-left: auto; font-style: normal; font-weight: 700; color: #78716c; font-size: 12px; white-space: nowrap; }
.rf-biz-search { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 0 12px; height: 40px; border: 1px solid #e7dcda; border-radius: 12px; color: #a8a29e; }
.rf-biz-search input { border: 0; outline: none; flex: 1; min-width: 0; font: inherit; font-size: 15px; color: #1c1917; background: none; }
.rf-biz-search:focus-within { border-color: #bb0016; box-shadow: 0 0 0 3px #bb00161a; }
.rf-biz-list { overflow-y: auto; margin: 0 -4px; padding: 0 4px; overscroll-behavior: contain; }
.rf-biz-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 8px;
  border-radius: 12px;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.rf-biz-row[hidden] { display: none; }
.rf-biz-row:hover, .rf-biz-row:focus-visible { background: #f8f3f2; outline: none; }
.rf-biz-row.on { background: #fdf0ef; }
.rf-biz-row.is-busy { opacity: 0.6; }
.rf-biz-row:disabled { cursor: default; }
.rf-biz-row-t { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.rf-biz-row-t b { font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rf-biz-row-t small { font-size: 12.5px; color: #78716c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Who the agency's posts show as on Nearby, and Change for the account holder. */
.rf-biz-item { position: relative; }
.rf-biz-as { display: flex; align-items: flex-start; gap: 6px; margin-top: 3px; font-size: 12px; line-height: 1.35; color: #57534e; min-width: 0; }
.rf-biz-as > span:last-child { min-width: 0; text-wrap: balance; }
.rf-biz-as-face { margin-top: 1px; }
.rf-biz-as strong { font-weight: 700; color: #1c1917; display: inline-block; max-width: 100%; vertical-align: bottom; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rf-biz-as strong em { font-style: normal; font-weight: 500; color: #78716c; }
.rf-biz-as-face { width: 16px; height: 16px; border-radius: 50%; flex: none; display: grid; place-items: center; overflow: hidden; color: #fff; font-size: 7.5px; font-weight: 800; background: #fff; }
.rf-biz-as-face img { width: 100%; height: 100%; object-fit: cover; }
.rf-biz-item.can-change .rf-biz-as { padding-right: 54px; }
.rf-biz-item.can-change .rf-biz-tick { align-self: flex-start; margin-top: 2px; }
.rf-biz-change { position: absolute; right: 8px; bottom: 11px; border: 0; background: none; padding: 2px 0; font: inherit; font-size: 10.5px; line-height: 1; font-weight: 500; color: #bb0016; cursor: pointer; }
.rf-biz-change:hover { text-decoration: underline; }
.rf-biz-change:disabled { opacity: 0.6; cursor: default; text-decoration: none; }
.rf-biz-own { border-bottom: 1px solid #f1e8e6; border-radius: 12px 12px 0 0; margin-bottom: 4px; }
.rf-biz-own.on { border-radius: 12px; }
.rf-biz-tick { color: #bb0016; display: grid; flex: none; }
.rf-biz-pay { flex: none; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: #f3ebe9; color: #57534e; white-space: nowrap; }
.rf-biz-pay.is-agency { background: #e8f7ee; color: #15803d; }
.rf-biz-pay.is-free { background: #fff4e0; color: #9a5b00; }
.rf-biz-count { margin: -4px 6px 10px; font-size: 12px; line-height: 1.45; color: #78716c; text-wrap: pretty; }
.rf-ag-count { margin: -6px 0 16px; font-size: 13px; line-height: 1.5; color: #78716c; text-wrap: pretty; }
.rf-biz-none { margin: 10px 8px; font-size: 13.5px; color: #78716c; }
.rf-biz-err { margin: 8px 6px 0; padding: 10px 12px; border-radius: 10px; background: #fff1f1; color: #b91c1c; font-size: 13px; }
.rf-biz-err[hidden] { display: none; }
.rf-biz-add {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 12px 10px 4px;
  border: 0;
  border-top: 1px solid #f1e8e6;
  background: none;
  color: #bb0016;
  font: inherit;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  text-align: left;
}
.rf-biz-add:focus-visible { outline: 3px solid #bb001640; border-radius: 8px; }
.rf-biz-handle { display: block; width: 40px; height: 4px; border-radius: 4px; background: #e2d9d4; margin: 0 auto 14px; flex: none; }
/* Phones: a sheet from the bottom. */
.rf-biz-layer.is-sheet { background: rgb(28 25 23 / 45%); }
.rf-biz-layer.is-sheet .rf-biz-menu {
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  max-width: none;
  max-height: 82vh;
  border-radius: 22px 22px 0 0;
  /* In the app the page runs under the phone's buttons (--rf-bottom). */
  padding: 10px 16px calc(16px + max(env(safe-area-inset-bottom), var(--rf-bottom, 0px)));
  animation: rf-biz-up 0.22s ease-out;
}
.rf-biz-layer.is-sheet .rf-biz-row { padding: 11px 8px; }
.rf-biz-layer.is-sheet .rf-biz-row-t b { font-size: 16px; }
.rf-biz-layer.is-sheet .rf-biz-row-t small { font-size: 14px; }
.rf-biz-layer.is-sheet .rf-biz-as { font-size: 13.5px; }
.rf-biz-layer.is-sheet .rf-biz-as-face { width: 18px; height: 18px; font-size: 8px; }
.rf-biz-layer.is-sheet .rf-biz-change { font-size: 11.5px; bottom: 13px; }
.rf-biz-layer.is-sheet .rf-biz-item.can-change .rf-biz-as { padding-right: 60px; }
.rf-biz-layer.is-sheet .rf-biz-av { width: 40px; height: 40px; font-size: 14px; }
.rf-biz-layer.is-sheet .rf-biz-add { font-size: 16px; padding: 14px 10px 4px; }
@keyframes rf-biz-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rf-biz-layer.is-sheet .rf-biz-menu { animation: none; } }
body.rf-ag-locked { overflow: hidden; }

/* The boxes. */
.rf-ag-overlay {
  position: fixed;
  inset: 0;
  z-index: 100001;
  background: rgb(28 25 23 / 45%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 16px calc(16px + var(--rf-bottom, 0px));
  box-sizing: border-box;
  font-family: "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  color: #1c1917;
}
.rf-ag-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 32px - var(--rf-bottom, 0px));
  overflow-y: auto;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 24px 70px rgb(0 0 0 / 25%);
  padding: 28px 26px 24px;
  box-sizing: border-box;
}
.rf-ag-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: #f6f1ef;
  color: #57534e;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.rf-ag-title { margin: 0 0 6px; padding-right: 36px; font-size: 22px; font-weight: 800; line-height: 1.25; text-wrap: balance; }
.rf-ag-sub { margin: 0 0 18px; font-size: 14.5px; line-height: 1.5; color: #57534e; text-wrap: pretty; }
.rf-ag-center { text-align: center; padding-right: 0; }
.rf-ag-hero-ic { width: 64px; height: 64px; margin: 2px auto 14px; border-radius: 50%; background: #fbeceb; color: #bb0016; display: grid; place-items: center; }
.rf-ag-opt {
  display: flex;
  gap: 14px;
  width: 100%;
  padding: 16px;
  margin: 0 0 12px;
  border: 1.5px solid #eadad7;
  border-radius: 16px;
  background: #fff;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  align-items: flex-start;
}
.rf-ag-opt:hover:not(:disabled), .rf-ag-opt:focus-visible { border-color: #bb0016; background: #fff7f6; outline: none; }
.rf-ag-opt:disabled { opacity: 0.55; cursor: default; }
.rf-ag-opt-ic { flex: none; width: 44px; height: 44px; border-radius: 14px; background: #fbeceb; color: #bb0016; display: grid; place-items: center; }
.rf-ag-opt b { display: block; font-size: 15.5px; }
.rf-ag-opt small { display: block; font-size: 13px; color: #57534e; line-height: 1.45; margin-top: 3px; text-wrap: pretty; }
.rf-ag-meta { display: block; margin-top: 8px; font-size: 12px; font-weight: 800; color: #15803d; }
.rf-ag-limit { padding: 12px 14px; border-radius: 12px; background: #fff4dc; color: #7a4500; font-size: 13.5px; line-height: 1.5; margin-bottom: 12px; }
.rf-ag-limit a { color: #bb0016; font-weight: 800; }
.rf-ag-nowrap { white-space: nowrap; }
.rf-ag-form { margin: 0; }
.rf-ag-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.rf-ag-field > span { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #57534e; }
.rf-ag-field em { font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0; color: #a8a29e; }
.rf-ag-input {
  width: 100%;
  height: 48px;
  box-sizing: border-box;
  border: 1px solid #e7dcda;
  border-radius: 12px;
  padding: 0 14px;
  font: inherit;
  font-size: 16px;
  color: #1c1917;
  background: #fff;
  outline: none;
}
.rf-ag-input:focus { border-color: #bb0016; box-shadow: 0 0 0 3px #bb00161a; }
.rf-ag-input[readonly] { background: #f8f3f2; color: #57534e; }
.rf-ag-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.rf-ag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #bb0016, #e1272b);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.rf-ag-btn:disabled { opacity: 0.6; cursor: default; }
.rf-ag-btn:focus-visible { outline: 3px solid #bb001640; outline-offset: 2px; }
.rf-ag-block { width: 100%; }
.rf-ag-ghost { background: #fff; color: #bb0016; border: 1.5px solid #e6bdb9; }
.rf-ag-btns { display: flex; gap: 10px; }
.rf-ag-card-wide { max-width: 660px; }
.rf-ag-report { height: min(58vh, 560px); margin: 0 0 16px; border: 1px solid #e7dcda; border-radius: 14px; overflow: hidden; background: #f5f5f4; display: grid; place-items: center; color: #78716c; font-size: 14px; }
.rf-ag-report iframe { width: 100%; height: 100%; border: 0; background: #fff; }
.rf-ag-report-note { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: #78716c; text-wrap: pretty; }
@media (max-width: 520px) { .rf-ag-card-wide .rf-ag-btns { flex-direction: column; } }
.rf-ag-btns .rf-ag-btn { flex: 1; }
.rf-ag-err { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #fff1f1; border: 1px solid #fecaca; color: #b91c1c; font-size: 13.5px; line-height: 1.45; }
.rf-ag-err[hidden] { display: none; }
.rf-ag-list { margin: 4px 0 20px; padding: 0; list-style: none; }
.rf-ag-list li { position: relative; padding: 0 0 10px 28px; font-size: 14.5px; line-height: 1.5; color: #44403c; text-wrap: pretty; }
.rf-ag-list li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 12px; height: 7px; border-left: 2.5px solid #15803d; border-bottom: 2.5px solid #15803d; transform: rotate(-45deg); }
.rf-ag-done { text-align: center; padding: 6px 0 0; }
.rf-ag-done-ic { width: 64px; height: 64px; margin: 4px auto 14px; border-radius: 50%; background: #e8f7ee; color: #15803d; display: grid; place-items: center; }
.rf-ag-done h2 { margin: 0 0 6px; font-size: 22px; font-weight: 800; text-wrap: balance; }
.rf-ag-done p { margin: 0 auto 20px; max-width: 340px; font-size: 14.5px; line-height: 1.5; color: #57534e; text-wrap: pretty; }
@media (max-width: 520px) {
  .rf-ag-card { padding: 24px 18px 20px; border-radius: 20px; }
  .rf-ag-two { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rf-ag-title { font-size: 20px; }
}