/* Trust Armory — public styles
   All colours reference CSS variables so admin colour settings apply
   without needing to regenerate this file. */

:root {
	--trust-armory-bg: #1f3a93;
	--trust-armory-text: #ffffff;
	--trust-armory-accent: #2c7be5;
	--trust-armory-btn-hover-bg: #1a5fc4;
	--trust-armory-btn-hover-text: #ffffff;
	/* --trust-armory-btn-border is deliberately not defined here: unset
	   means "automatic border" - see the border controls rules below. */
	--trust-armory-btn-border-width: 1px;
	--trust-armory-btn-radius: 4px;
}

.trust-armory-banner,
.trust-armory-modal {
	box-sizing: border-box;
}

.trust-armory-banner *,
.trust-armory-modal * {
	box-sizing: border-box;
}

/* Banner */

.trust-armory-banner {
	position: fixed;
	z-index: 999998;
	font-size: 14px;
	line-height: 1.5;
}

.trust-armory-banner[hidden] {
	display: none;
}

/* Bar style: full-width strip pinned to the top or bottom edge */

.trust-armory-banner-style-bar {
	left: 0;
	right: 0;
	background: var(--trust-armory-bg);
	color: var(--trust-armory-text);
	padding: 16px 20px;
	box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.2);
}

.trust-armory-position-bottom {
	bottom: 0;
}

.trust-armory-position-top {
	top: 0;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

/* Popup style: dimmed overlay with a centred card */

.trust-armory-banner-style-popup {
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(15, 20, 25, 0.55);
	padding: 20px;
}

.trust-armory-banner-style-popup[hidden] {
	display: none;
}

.trust-armory-banner-style-popup .trust-armory-banner-inner {
	background: var(--trust-armory-bg);
	color: var(--trust-armory-text);
	flex-direction: column;
	/* Bug fix: the general .trust-armory-banner-inner rule leaves
	   flex-wrap: wrap in place. In row mode (bar style) that just wraps
	   text; in column mode (popup style) it lets the flex container
	   start a SECOND COLUMN once content exceeds max-height, instead of
	   scrolling — which is why setting a fixed height moved the
	   buttons beside the text. Popups never need more than one column. */
	flex-wrap: nowrap;
	align-items: flex-start;
	/* Bug fix: the general .trust-armory-banner-inner rule sets
	   margin: 0 auto, which self-centers a flex item horizontally
	   REGARDLESS of the parent's justify-content — silently
	   overriding every popup position except centred ones. */
	margin: 0;
	max-width: var(--trust-armory-popup-width, 440px);
	width: 100%;
	max-height: var(--trust-armory-popup-max-height, none);
	overflow-y: auto;
	overflow-x: hidden;
	padding: 24px;
	border-radius: 10px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
}

.trust-armory-banner-style-popup .trust-armory-banner-message {
	/* Bug fix: the general .trust-armory-banner-message rule sets
	   flex: 1 1 320px. That 320px is a WIDTH basis in the bar style's
	   row layout, but becomes a HEIGHT basis once the popup style
	   switches to column layout above — reserving far more vertical
	   space than the text needs, which is why the auto-height popup
	   was rendering much taller than its content. */
	flex: 0 0 auto;
	width: 100%;
}

.trust-armory-banner-style-popup .trust-armory-banner-actions {
	width: 100%;
	justify-content: flex-start;
}

.trust-armory-banner-inner {
	max-width: 1100px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}

.trust-armory-banner-message {
	margin: 0;
	flex: 1 1 320px;
}

.trust-armory-banner-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.trust-armory-credit {
	margin: 6px 0 0;
	flex-basis: 100%;
	text-align: right;
	font-size: 11px;
	opacity: 0.75;
}

.trust-armory-credit a {
	color: inherit;
	text-decoration: underline;
}

.trust-armory-banner-style-popup .trust-armory-credit {
	text-align: left;
}

/* Buttons */

.trust-armory-btn {
	font-size: 14px;
	padding: 8px 16px;
	border-radius: 4px;
	cursor: pointer;
	border: 1px solid transparent;
	font-family: inherit;
	transition: color 150ms ease, opacity 150ms ease;
}

.trust-armory-btn-primary {
	background: var(--trust-armory-accent);
	color: #ffffff;
	border-color: var(--trust-armory-accent);
}

.trust-armory-btn-outline {
	background: transparent;
	color: inherit;
	border-color: currentColor;
}

/* 2026-09-07 BST - there was no hover state on these buttons at all
   before this - not just uncustomisable, genuinely absent, so hovering
   Accept/Reject/Manage Preferences gave no visual feedback whatsoever.
   Both background and text colour are independently customisable (set
   on the Banner tab) - applied to both .trust-armory-btn-primary
   (filled) and .trust-armory-btn-outline (normally transparent, so
   this fills it in on hover) the same way, for one consistent hover
   treatment across every banner/modal button regardless of its normal
   style. border-color follows the same hover background so an outline
   button's border doesn't visibly clash with its own hover fill.
   Specificity note: .trust-armory-btn:hover (one class + one
   pseudo-class) already outweighs .trust-armory-btn-primary's plain
   color:#ffffff (one class) under the normal CSS cascade, so this
   correctly overrides it on hover without needing !important. */
.trust-armory-btn:hover {
	background: var(--trust-armory-btn-hover-bg);
	border-color: var(--trust-armory-btn-hover-bg);
	color: var(--trust-armory-btn-hover-text);
}

/* 2026-10-11 BST - border controls (Banner tab: Button Border Colour,
   Thickness, Radius). Thickness and radius apply to every banner and
   Cookie Preferences window button. The colour applies to the banner's
   buttons only - that window is always white, so a border colour chosen
   to suit the banner's background could vanish against it.
   --trust-armory-btn-border is only defined once a colour has been
   chosen; until then each var() falls back to the automatic border the
   button always had (outline: text colour, primary: accent, hover:
   hover background), so nothing changes on a site that hasn't touched
   these settings. With a chosen colour the border also stays put on
   hover rather than blending into the hover fill - it was picked to be
   seen.
   Specificity note: these are deliberately two classes deep. Themes and
   page builders commonly restyle every <button> with selectors such as
   ".elementor-kit-N button" (one class + one element), which outranks
   a single-class rule like .trust-armory-btn above and would silently
   override the thickness and radius chosen here. */
.trust-armory-banner .trust-armory-btn,
.trust-armory-modal .trust-armory-btn {
	border-style: solid;
	border-width: var(--trust-armory-btn-border-width, 1px);
	border-radius: var(--trust-armory-btn-radius, 4px);
}

.trust-armory-banner .trust-armory-btn-primary {
	border-color: var(--trust-armory-btn-border, var(--trust-armory-accent));
}

.trust-armory-banner .trust-armory-btn-outline {
	border-color: var(--trust-armory-btn-border, currentColor);
}

/* 2026-10-11 BST - the border while hovered (Banner tab: Button Border
   Hover Colour, Hover Thickness, Hover Radius). Each hover variable is
   only defined once something has been set for it, so each var() falls
   back a step at a time: hover value, then the normal border value,
   then the automatic one. For the colour that last step is the hover
   background, which is what the border did before any of these
   settings existed. As with the normal border, thickness and radius
   cover the Cookie Preferences window's buttons and the colour is for
   the banner only. */
.trust-armory-banner .trust-armory-btn:hover,
.trust-armory-modal .trust-armory-btn:hover {
	border-width: var(--trust-armory-btn-border-hover-width, var(--trust-armory-btn-border-width, 1px));
	border-radius: var(--trust-armory-btn-hover-radius, var(--trust-armory-btn-radius, 4px));
}

.trust-armory-banner .trust-armory-btn:hover {
	border-color: var(--trust-armory-btn-border-hover, var(--trust-armory-btn-border, var(--trust-armory-btn-hover-bg)));
}

.trust-armory-btn:focus-visible {
	outline: 2px solid var(--trust-armory-accent);
	outline-offset: 2px;
}

/* Cookie Settings shortcode link */

.trust-armory-settings-link {
	background: none;
	border: none;
	padding: 0;
	color: var(--trust-armory-accent);
	text-decoration: underline;
	cursor: pointer;
	font: inherit;
}

/* Modal */

.trust-armory-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.trust-armory-modal[hidden] {
	display: none;
}

.trust-armory-modal-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
}

.trust-armory-modal-panel {
	position: relative;
	background: #ffffff;
	color: #1f2933;
	max-width: 480px;
	width: calc(100% - 32px);
	max-height: calc(100vh - 64px);
	overflow-y: auto;
	border-radius: 8px;
	padding: 0;
}

.trust-armory-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 24px;
	border-bottom: 1px solid #e5e7eb;
}

.trust-armory-modal-header .trust-armory-modal-title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

.trust-armory-modal-close {
	background: none;
	border: none;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: inherit;
}

.trust-armory-modal-body {
	padding: 20px 24px;
}

.trust-armory-category-row {
	margin-bottom: 16px;
}

.trust-armory-category-row:last-child {
	margin-bottom: 0;
}

.trust-armory-checkbox-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
}

.trust-armory-category-description {
	margin: 4px 0 0 24px;
	font-size: 13px;
	color: #52606d;
}

.trust-armory-script-list {
	margin: 10px 0 0 24px;
	padding: 8px 10px;
	background: #f6f7f7;
	border-radius: 4px;
}

.trust-armory-script-list-heading {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #52606d;
}

.trust-armory-script-list-empty {
	margin: 8px 0 0 24px;
	font-size: 12px;
	font-style: italic;
	color: #98a2ae;
}

.trust-armory-script-row {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 4px 0;
	font-weight: 400;
	cursor: pointer;
}

.trust-armory-script-row input {
	margin-top: 3px;
}

.trust-armory-script-description {
	display: block;
	font-size: 12px;
	color: #52606d;
	font-weight: 400;
}

.trust-armory-script-list-inactive {
	background: transparent;
	border: 1px dashed #d8dbdf;
}

.trust-armory-script-list-inactive summary {
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
	color: #52606d;
}

.trust-armory-inactive-row {
	margin: 6px 0;
	font-size: 12px;
	color: #52606d;
}

.trust-armory-inactive-row em {
	color: #98a2ae;
}

.trust-armory-modal-footer {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding: 16px 24px;
	border-top: 1px solid #e5e7eb;
}

@media (max-width: 600px) {
	.trust-armory-banner-inner {
		flex-direction: column;
		align-items: stretch;
	}

	.trust-armory-banner-actions {
		justify-content: stretch;
	}

	.trust-armory-banner-actions .trust-armory-btn {
		flex: 1 1 auto;
	}
}

/* Floating "Cookie Settings" button */

.trust-armory-fab {
	position: fixed;
	z-index: 999997;
	width: var(--ta-fab-size, 52px);
	height: var(--ta-fab-size, 52px);
	background: var(--ta-fab-bg, #1f2933);
	color: var(--ta-fab-icon-color, #ffffff);
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background-color 0.2s ease, transform 0.15s ease;
}

.trust-armory-fab-circle {
	border-radius: 50%;
}

.trust-armory-fab-square {
	border-radius: 12px;
}

.trust-armory-fab-shadow {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.trust-armory-fab-bottom {
	bottom: var(--ta-fab-offset-y, 20px);
}

.trust-armory-fab-top {
	top: var(--ta-fab-offset-y, 20px);
}

.trust-armory-fab-left {
	left: var(--ta-fab-offset-x, 20px);
}

.trust-armory-fab-right {
	right: var(--ta-fab-offset-x, 20px);
}

.trust-armory-fab:hover,
.trust-armory-fab:focus-visible {
	background: var(--ta-fab-hover-bg, #2f6feb);
	color: var(--ta-fab-icon-hover-color, var(--ta-fab-icon-color, #ffffff));
	transform: scale(1.06);
}

.trust-armory-fab:focus-visible {
	outline: 2px solid var(--ta-fab-hover-bg, #2f6feb);
	outline-offset: 3px;
}

.trust-armory-fab-icon {
	width: var(--ta-fab-icon-size, 28px);
	height: var(--ta-fab-icon-size, 28px);
	display: inline-flex;
}

.trust-armory-fab-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.trust-armory-fab-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.trust-armory-fab-icon-mask {
	display: block;
	width: 100%;
	height: 100%;
	background-color: var(--ta-fab-icon-color, #ffffff);
	-webkit-mask-image: var(--ta-fab-mask-url);
	mask-image: var(--ta-fab-mask-url);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.trust-armory-fab:hover .trust-armory-fab-icon-mask,
.trust-armory-fab:focus-visible .trust-armory-fab-icon-mask {
	background-color: var(--ta-fab-icon-hover-color, var(--ta-fab-icon-color, #ffffff));
}

/* Simple CSS tooltip, shown on hover/focus only */

.trust-armory-fab[data-trust-armory-tooltip] {
	position: fixed;
}

.trust-armory-fab[data-trust-armory-tooltip]::after {
	content: attr(data-trust-armory-tooltip);
	position: absolute;
	white-space: nowrap;
	background: var(--ta-fab-tooltip-bg, #1f2933);
	color: var(--ta-fab-tooltip-color, #ffffff);
	font-size: 12px;
	padding: 6px 10px;
	border-radius: 4px;
	opacity: 0;
	pointer-events: none;
	transform: translateY(4px);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.trust-armory-fab-left[data-trust-armory-tooltip]::after {
	left: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%) translateX(-4px);
}

.trust-armory-fab-right[data-trust-armory-tooltip]::after {
	right: calc(100% + 10px);
	top: 50%;
	transform: translateY(-50%) translateX(4px);
}

.trust-armory-fab[data-trust-armory-tooltip]:hover::after,
.trust-armory-fab[data-trust-armory-tooltip]:focus-visible::after {
	opacity: 1;
	transform: translateY(-50%) translateX(0);
}

.trust-armory-fab-hide-mobile {
	display: flex;
}

@media (max-width: 600px) {
	.trust-armory-fab-hide-mobile {
		display: none;
	}
}