/* FF Rich Radio — baseline v-stable-1 (2025-09-04)
   Scope: only inside .frm_form_field.ff-rich-radio
   Behavior: two-column grid, half-out icon, subtle hover, selected border
*/

/* Hide the field's own label/legend for this field */
.frm_form_field.ff-rich-radio .frm_primary_label,
.frm_form_field.ff-rich-radio legend {
  display: none !important;
}

/* Lower the whole group slightly under the intro */
.frm_form_field.ff-rich-radio { margin-top: 14px !important; }

/* Two-column grid; centered; comfortable gutter */
.frm_form_field.ff-rich-radio .frm_opt_container {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
  justify-content: center !important;
  align-items: stretch !important;
  column-gap: 26px !important;
  row-gap: 20px !important;
}

/* Each option label as a grid item; hide any inline text nodes FF puts in the label */
.frm_form_field.ff-rich-radio .ff-rich-radio__label {
  margin: 0 !important;
  width: auto !important;
  justify-self: center !important;
  font-size: 0 !important;   /* hide bare text like "Quote" */
  line-height: 0 !important;
}

/* Keep native radio accessible but invisible */
.frm_form_field.ff-rich-radio .ff-rich-radio__label > input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px; height: 1px;
  margin: 0;
  pointer-events: none;
}

/* Card frame (baseline spacing) */
.frm_form_field.ff-rich-radio .ff-rich-radio__label .radio-card {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  width: 100%;
  min-height: 230px;
  padding: 44px 22px 22px;    /* room for half-out icon */
  border: 2px solid rgba(0,0,0,.08);
  border-radius: 16px;
  background: #fff;
  transition: box-shadow .2s ease, border-color .2s ease;
  /* restore normal type inside card (we zeroed label above) */
  font-size: 16px; line-height: 1.4;
}

/* Half-in / half-out icon (small) */
.frm_form_field.ff-rich-radio .radio-card .rc-icon { 
  position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
}
.frm_form_field.ff-rich-radio .radio-card .rc-icon img {
  width: 70px; height: auto; display: block;
}
/* Fallback if you didn't add wrappers and the <img> is the first child */
.frm_form_field.ff-rich-radio .radio-card > img:first-child {
  position: absolute; top: -20px; left: 50%; transform: translateX(-50%);
  width: 70px; height: auto; display: block;
}

/* Title & body spacing (baseline) */
.frm_form_field.ff-rich-radio .radio-card .rc-title,
.frm_form_field.ff-rich-radio .radio-card strong:first-of-type {
  margin-top: 10px; font-weight: 700; text-align: center;
}
.frm_form_field.ff-rich-radio .radio-card .rc-body,
.frm_form_field.ff-rich-radio .radio-card strong:first-of-type + *,
.frm_form_field.ff-rich-radio .radio-card p:first-of-type {
  margin-top: 15px; text-align: center;
}
/* Remove stray theme margins on direct children */
.frm_form_field.ff-rich-radio .radio-card > * { margin-left: 0; margin-right: 0; }

/* Subtle hover (baseline) */
.frm_form_field.ff-rich-radio .ff-rich-radio__label:hover .radio-card {
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
}

/* Selected (baseline): blue border + soft ring */
.frm_form_field.ff-rich-radio .ff-rich-radio__label.is-selected .radio-card {
  border-color: rgba(12, 109, 254, 0.75);
  box-shadow: 0 2px 10px rgba(12, 109, 254, 0.10);
}

/* Screen-reader helper (used by JS when wrapping FF text nodes) */
.ff-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Mobile: single column */
@media (max-width: 700px) {
  .frm_form_field.ff-rich-radio .frm_opt_container {
    grid-template-columns: 1fr !important;
    column-gap: 16px !important; row-gap: 16px !important;
  }
}

/* Stronger hover/selected (add-on) */
/* Stronger hover/selected (add-on) */
/* Stronger hover/selected (add-on) */
.frm_form_field.ff-rich-radio {
  --ffrr-accent: #3b82f6;
  --ffrr-bg: #eef6ff;
}
.frm_form_field.ff-rich-radio .ff-rich-radio__label:hover .radio-card,
.frm_form_field.ff-rich-radio .ff-rich-radio__label:focus-within .radio-card {
  background: var(--ffrr-bg);
  border-color: var(--ffrr-accent);
  box-shadow: 0 4px 12px rgba(59,130,246,.22);
}
.frm_form_field.ff-rich-radio .ff-rich-radio__label.is-selected .radio-card {
  background: var(--ffrr-bg);
  border-color: var(--ffrr-accent);
  border-width: 3px;
  box-shadow: 0 6px 16px rgba(59,130,246,.18);
}



/* ===========================
   Mobile polish (≤ 640px)
   =========================== */
@media (max-width: 640px) {
  /* Single column; tighter vertical rhythm */
  .frm_form_field.ff-rich-radio .frm_opt_container {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
    row-gap: 18px !important;
  }

  /* Let each card use full width */
  .frm_form_field.ff-rich-radio .ff-rich-radio__label {
    width: 100% !important;
    max-width: none !important;
  }

  /* Card padding/height tuned for mobile */
  .frm_form_field.ff-rich-radio .ff-rich-radio__label .radio-card {
    min-height: 190px !important;
    padding: 52px 14px 14px !important;  /* room for the half-out icon, less side/bottom padding */
  }

  /* Icon: centered, small, half out */
  .frm_form_field.ff-rich-radio .radio-card .rc-icon {
    top: -28px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  .frm_form_field.ff-rich-radio .radio-card .rc-icon img,
  .frm_form_field.ff-rich-radio .radio-card > img:first-child {
    width: 60px !important;
    height: auto !important;
  }
  /* If your markup doesn't have rc-icon, ensure the first img is also absolutely centered */
  .frm_form_field.ff-rich-radio .radio-card > img:first-child {
    position: absolute !important;
    top: -28px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  /* Title under icon; body under title */
  .frm_form_field.ff-rich-radio .radio-card .rc-title,
  .frm_form_field.ff-rich-radio .radio-card strong:first-of-type {
    margin-top: 10px !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-align: center !important;
  }
  .frm_form_field.ff-rich-radio .radio-card .rc-body,
  .frm_form_field.ff-rich-radio .radio-card strong:first-of-type + *,
  .frm_form_field.ff-rich-radio .radio-card p:first-of-type {
    margin-top: 12px !important;
    font-size: 16px !important;
    text-align: center !important;
  }

  /* Nuke any leftover inline label text or theme bullets on mobile */
  .frm_form_field.ff-rich-radio .ff-rich-radio__label > span,
  .frm_form_field.ff-rich-radio .ff-rich-radio__label .frm_opt_label,
  .frm_form_field.ff-rich-radio .ff-rich-radio__label .frm_option_label,
  .frm_form_field.ff-rich-radio .ff-rich-radio__label::before,
  .frm_form_field.ff-rich-radio .ff-rich-radio__label::after {
    display: none !important;
    content: none !important;
  }
}


/* =========================================
   Mobile / small screens — left-offset icon
   Single column, left-aligned text
   ========================================= */
@media (max-width: 820px) {
  /* One card per row */
  .frm_form_field.ff-rich-radio .frm_opt_container {
    display: block !important;
  }

  /* Each card full width with a small vertical gap */
  .frm_form_field.ff-rich-radio .ff-rich-radio__label {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 18px !important;
  }

  /* Card: make room on the LEFT for the icon */
  .frm_form_field.ff-rich-radio .ff-rich-radio__label .radio-card {
    min-height: auto !important;
    /* top | right | bottom | left  (left = icon width + gutter) */
    padding: 18px 14px 14px 96px !important;
    text-align: left !important;
  }

  /* Icon: small, half-out, anchored to top-left (NOT centered) */
  .frm_form_field.ff-rich-radio .radio-card .rc-icon,
  .frm_form_field.ff-rich-radio .radio-card > img:first-child {
    position: absolute !important;
    top: -18px !important;
    left: 14px !important;
    transform: none !important;
  }
  .frm_form_field.ff-rich-radio .radio-card .rc-icon img,
  .frm_form_field.ff-rich-radio .radio-card > img:first-child {
    width: 58px !important;
    height: auto !important;
    display: block !important;
  }

  /* Title & content: left aligned, tucked */
  .frm_form_field.ff-rich-radio .radio-card .rc-title,
  .frm_form_field.ff-rich-radio .radio-card strong:first-of-type {
    margin-top: 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-align: left !important;
  }
  .frm_form_field.ff-rich-radio .radio-card .rc-body,
  .frm_form_field.ff-rich-radio .radio-card strong:first-of-type + *,
  .frm_form_field.ff-rich-radio .radio-card p:first-of-type {
    margin-top: 8px !important;
    font-size: 16px !important;
    line-height: 1.45 !important;
    text-align: left !important;
  }

  /* Hide any stray inline label text/pseudo bullets on mobile */
  .frm_form_field.ff-rich-radio .ff-rich-radio__label > span,
  .frm_form_field.ff-rich-radio .ff-rich-radio__label .frm_opt_label,
  .frm_form_field.ff-rich-radio .ff-rich-radio__label .frm_option_label,
  .frm_form_field.ff-rich-radio .ff-rich-radio__label::before,
  .frm_form_field.ff-rich-radio .ff-rich-radio__label::after {
    display: none !important;
    content: none !important;
  }
}

/* Optional: slightly tighter layout for landscape phones */
@media (max-width: 820px) and (orientation: landscape) {
  .frm_form_field.ff-rich-radio .ff-rich-radio__label .radio-card {
    padding-left: 88px !important;   /* a bit less left padding */
  }
  .frm_form_field.ff-rich-radio .radio-card .rc-icon,
  .frm_form_field.ff-rich-radio .radio-card > img:first-child {
    top: -16px !important;
    left: 12px !important;
  }
  .frm_form_field.ff-rich-radio .radio-card .rc-icon img,
  .frm_form_field.ff-rich-radio .radio-card > img:first-child {
    width: 54px !important;
  }
}

/* --- Mobile: left-align the title/label + increase vertical gutter --- */
@media (max-width: 820px) {
  /* 3) More space between the two boxes */
  .frm_form_field.ff-rich-radio .ff-rich-radio__label {
    margin: 0 0 24px !important; /* was 18px */
  }

  /* 1) Title/label truly left-aligned (catch all common title elements) */
  .frm_form_field.ff-rich-radio .radio-card .rc-title,
  .frm_form_field.ff-rich-radio .radio-card strong:first-of-type,
  .frm_form_field.ff-rich-radio .ff-rich-radio__label .radio-card strong,
  .frm_form_field.ff-rich-radio .radio-card h4:first-of-type {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Body stays left too (defensive) */
  .frm_form_field.ff-rich-radio .radio-card .rc-body,
  .frm_form_field.ff-rich-radio .radio-card p:first-of-type,
  .frm_form_field.ff-rich-radio .radio-card strong:first-of-type + * {
    text-align: left !important;
  }
}

/* 2) OPTIONAL: nudge the icon farther left (and keep text clear) */
/* If you want this, keep it; if not, delete this block. */
@media (max-width: 820px) {
  .frm_form_field.ff-rich-radio .radio-card .rc-icon,
  .frm_form_field.ff-rich-radio .radio-card > img:first-child {
    left: 10px !important;   /* was 14px */
  }
  .frm_form_field.ff-rich-radio .ff-rich-radio__label .radio-card {
    padding-left: 92px !important; /* was 96px */
  }
}

/* --- Mobile: left-align the title/label + increase vertical gutter --- */
@media (max-width: 820px) {
  /* 3) More space between the two boxes */
  .frm_form_field.ff-rich-radio .ff-rich-radio__label {
    margin: 0 0 24px !important; /* was 18px */
  }

  /* 1) Title/label truly left-aligned (catch all common title elements) */
  .frm_form_field.ff-rich-radio .radio-card .rc-title,
  .frm_form_field.ff-rich-radio .radio-card strong:first-of-type,
  .frm_form_field.ff-rich-radio .ff-rich-radio__label .radio-card strong,
  .frm_form_field.ff-rich-radio .radio-card h4:first-of-type {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Body stays left too (defensive) */
  .frm_form_field.ff-rich-radio .radio-card .rc-body,
  .frm_form_field.ff-rich-radio .radio-card p:first-of-type,
  .frm_form_field.ff-rich-radio .radio-card strong:first-of-type + * {
    text-align: left !important;
  }
}

/* 2) OPTIONAL: nudge the icon farther left (and keep text clear) */
/* If you want this, keep it; if not, delete this block. */
@media (max-width: 820px) {
  .frm_form_field.ff-rich-radio .radio-card .rc-icon,
  .frm_form_field.ff-rich-radio .radio-card > img:first-child {
    left: 10px !important;   /* was 14px */
  }
  .frm_form_field.ff-rich-radio .ff-rich-radio__label .radio-card {
    padding-left: 92px !important; /* was 96px */
  }
}