/* CTA buttons inserted into an AI answer (assets/js/cta-buttons.js), with
   the theme's Tinsa Store button look (greenshift-blocks/_buttons.scss):
   solid DS blue, bold label centred with the chevron after it, as wide as
   its label on desktop and the full width of the answer on mobile; a long
   label wraps inside the button. !important because they reuse
   Greenshift's button classes, whose own rules set their own box and
   colours. */
.rag101wp-cta.gspb-buttonbox {
	display: inline-flex !important;
	max-width: 100%;
	box-sizing: border-box;
	justify-content: center;
	padding: 12px 14px !important;
	border: 2px solid var(--wp--preset--color--accumin-secondary-900, #0046f6) !important;
	border-radius: 4px;
	background-color: var(--wp--preset--color--accumin-secondary-900, #0046f6) !important;
	color: var(--wp--preset--color--accumin-tertiary-50, #fdfcfd) !important;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	white-space: normal;
}

/* The link keeps focus after a click (an external one opens a new tab and
   the visitor comes back to it): that focus must not look like a pressed
   button. Only keyboard focus gets a visible ring. */
.rag101wp-cta.gspb-buttonbox:focus {
	border-color: var(--wp--preset--color--accumin-secondary-900, #0046f6) !important;
	background-color: var(--wp--preset--color--accumin-secondary-900, #0046f6) !important;
	color: var(--wp--preset--color--accumin-tertiary-50, #fdfcfd) !important;
	outline: none;
	opacity: 1;
}

.rag101wp-cta.gspb-buttonbox:focus:not(:focus-visible),
.rag101wp-cta.gspb-buttonbox:active {
	box-shadow: none !important;
}

/* After :focus, so a focused button still reacts to the pointer. */
.rag101wp-cta.gspb-buttonbox:active {
	border-color: var(--wp--preset--color--btc-tertiary, #b3d9ff) !important;
	background-color: var(--wp--preset--color--btc-tertiary, #b3d9ff) !important;
	color: var(--wp--preset--color--accumin-secondary-900, #0046f6) !important;
	text-decoration: none;
	opacity: 1;
}

/* Touch screens keep :hover on the last element tapped until something
   else is tapped, so the button would stay "pressed" after the tap and
   when coming back from the tab it opened. */
@media (hover: hover) {
	.rag101wp-cta.gspb-buttonbox:hover {
		border-color: var(--wp--preset--color--btc-tertiary, #b3d9ff) !important;
		background-color: var(--wp--preset--color--btc-tertiary, #b3d9ff) !important;
		color: var(--wp--preset--color--accumin-secondary-900, #0046f6) !important;
		text-decoration: none;
		opacity: 1;
	}
}

/* A shadow, not an outline: the theme removes every outline with
   !important. */
.rag101wp-cta.gspb-buttonbox:focus-visible {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--wp--preset--color--accumin-secondary-900, #0046f6) !important;
}

/* Forced colors (Windows high contrast) don't paint shadows: an outline
   instead, with !important for the same reason. */
@media (forced-colors: active) {
	.rag101wp-cta.gspb-buttonbox:focus-visible {
		outline: 2px solid CanvasText !important;
		outline-offset: 2px;
	}
}

.rag101wp-cta .gspb-buttonbox-textwrap {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	max-width: 100%;
}

.rag101wp-cta .gspb-buttonbox-title {
	color: inherit !important;
}

/* The chevron follows the label's colour in every state, including the
   focus Greenshift gives its own icon colour for. */
.rag101wp-cta.gspb-buttonbox .gspb-buttonbox-icon,
.rag101wp-cta.gspb-buttonbox .gspb-buttonbox-icon svg,
.rag101wp-cta.gspb-buttonbox .gspb-buttonbox-icon svg path,
.rag101wp-cta.gspb-buttonbox:is(:hover, :focus, :active) .gspb-buttonbox-icon,
.rag101wp-cta.gspb-buttonbox:is(:hover, :focus, :active) .gspb-buttonbox-icon svg,
.rag101wp-cta.gspb-buttonbox:is(:hover, :focus, :active) .gspb-buttonbox-icon svg path {
	fill: currentColor !important;
	color: inherit !important;
}

/* Same breakpoint as the search panel's mobile bottom sheet. */
@media (max-width: 620px) {
	.rag101wp-cta.gspb-buttonbox {
		display: flex !important;
		width: 100% !important;
	}
}