/**
 * Disclaimer trigger link + native <dialog> modal. Self-contained; colors echo
 * the bytesco theme tokens (teal #047B86, card radius 24px) without importing
 * the theme stylesheet.
 */

.rcb-disclaimer-trigger {
	display: inline-block;
	color: #047B86;
	font-weight: 700;
	text-decoration: none;
	cursor: pointer;
}

.rcb-disclaimer-trigger:hover,
.rcb-disclaimer-trigger:focus {
	color: #16aebc;
	text-decoration: underline;
}

/* Inline arrow icon (the shortcode's `arrow` flag) — currentColor strokes
   follow the link's color, hover included. */
.rcb-disclaimer-trigger__arrow {
	margin-left: 0.35em;
}

/*
 * Typography is reset here (not inherited) for the same reason as the note
 * tooltip below: the trigger + <dialog> can sit inside a centered block, a
 * heading, or bold text, and the modal must not inherit any of that. Body copy
 * sits one step below the theme's default body size ($fs-body-m).
 */
.rcb-disclaimer-modal {
	max-width: 32rem;
	width: calc(100% - 2rem);
	padding: 2rem;
	border: 0;
	border-radius: 24px;
	background: #ffffff;
	color: #1a1a1a;
	font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: clamp(13px, 12.17px + 0.1522vw, 14px); /* $fs-body-s */
	font-weight: 400;
	letter-spacing: -0.005em; /* $ls-body */
	text-align: left;
	text-transform: none;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.rcb-disclaimer-modal::backdrop {
	background: rgba(0, 0, 0, 0.5);
}

.rcb-disclaimer-modal__body {
	line-height: 1.5;
	margin-bottom: 1.5rem;
}

.rcb-disclaimer-modal__close {
	display: inline-block;
	padding: 0.5rem 1.25rem;
	border: 0;
	border-radius: 9999px;
	background: #047B86;
	color: #ffffff;
	font-weight: 700;
	cursor: pointer;
}

.rcb-disclaimer-modal__close:hover,
.rcb-disclaimer-modal__close:focus {
	background: #16aebc;
}

/*
 * Superscript footnote marker + hover tooltip (the shortcode's `note` flag).
 * Mirrors the theme's comparison-table footnotes (.rcb-comparison-table__note
 * / __tooltip in source/frontend/_tables.scss) so both read as one system;
 * token values are inlined (with --global-palette fallbacks) since this
 * plugin does not import the theme stylesheet.
 */

.rcb-rate-note {
	padding-left: 1px;
	color: var(--global-palette6, #909090); /* $rcb-mid-grey */
	cursor: help;
	font-size: clamp(11px, 10.17px + 0.1522vw, 12px); /* $fs-body-xs */
	font-weight: 400;
	line-height: 0;
	vertical-align: super;
}

.rcb-rate-note:focus-visible {
	outline: 2px solid #047B86; /* $rcb-teal */
	outline-offset: 2px;
	border-radius: 2px;
}

/* Comma between a product's multiple markers — rides at superscript height
   with the numbers, with no space on either side. */
.rcb-rate-note-sep {
	color: var(--global-palette6, #909090); /* $rcb-mid-grey */
	font-size: clamp(11px, 10.17px + 0.1522vw, 12px); /* $fs-body-xs */
	font-weight: 400;
	line-height: 0;
	vertical-align: super;
}

.rcb-rate-note-sep + .rcb-rate-note {
	padding-left: 0;
}

/*
 * position:fixed with JS-set coordinates, like the comparison-table tooltip.
 * Typography is fully reset here (not just echoed) because the shortcode can
 * sit inside a heading or bold text and the tooltip must not inherit that.
 */
.rcb-rate-note__tooltip {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100;
	max-width: 260px;
	padding: 8px 12px; /* $space-2xs $space-xs */
	border-radius: 8px; /* $radius-tight */
	background-color: var(--global-palette10, #672146); /* $rcb-plum */
	color: var(--global-palette9, #ffffff);
	font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: clamp(11px, 10.17px + 0.1522vw, 12px); /* $fs-body-xs */
	font-weight: 400;
	letter-spacing: -0.005em; /* $ls-body */
	line-height: 1.45; /* $lh-normal */
	text-align: left;
	text-transform: none;
	white-space: normal;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.12s ease;
}

.rcb-rate-note__tooltip.is-visible {
	opacity: 1;
}

/*
 * One block per disclaimer text (the separator-less path of
 * Disclaimers::resolve()) so multiple disclaimers read as distinct
 * paragraphs instead of one run-on block. The gap sits on the *following*
 * item so a single disclaimer adds no trailing space; a theme can override
 * the custom property to change the spacing.
 */
.rcb-disclaimer__item {
	display: block;
}

.rcb-disclaimer__item + .rcb-disclaimer__item {
	margin-block-start: var(--rcb-disclaimer-gap, 0.75em);
}

/*
 * The `show="note-list"` footnote list — the texts behind the `note` markers.
 * Mirrors the theme's `.rcb-comparison-table__footnotes-list` weight (small,
 * muted numbered list) so both read as one system.
 */
.rcb-rate-footnotes__title {
	margin: 0 0 0.5em;
	font-weight: 700;
}

.rcb-rate-footnotes__list {
	margin: 0;
	padding-left: 1.25em;
	color: var(--global-palette6, #909090); /* $rcb-mid-grey */
	font-size: clamp(11px, 10.17px + 0.1522vw, 12px); /* $fs-body-xs */
	line-height: 1.45; /* $lh-normal */
	list-style: decimal;
}

.rcb-rate-footnotes__list li + li {
	margin-block-start: 0.5em;
}