/* ICS black buttons: on hover (hover devices), focus-visible and active the torn fill turns design pink (--ics-pink-hover = --pink-600 #eb71b1, H120; press stays #d4126f); the halftone stays (dots = black at 22%).
   Only the custom properties the torn build reads are overridden (--torn-fill, --torn-dot, --torn-dot-alpha, --torn-ink); silhouette, mask and paper are unchanged.
   Scope: black torn buttons (no yellow/pink/blue modifier), black torn form submits (#contact-form, #jn-native-form) and the plain black 404 button #brxe-nfbtn1.
   Text stays white (owner decision): white on #ed1d85 = 4.11:1, white on #d4126f = 5.1:1 (AA normal text not met on hover, owner accepted).
   Colour transitions 140ms ease-out, no delay. Reduced motion: no transition. Focus ring: 2px var(--heading), offset 3px. */

:root {
	--ics-pink-brand: #ed1d85;
	--ics-pink-brand-press: #d4126f;
}

@property --torn-fill { syntax: '<color>'; inherits: true; initial-value: #000000; }
@property --torn-dot { syntax: '<color>'; inherits: true; initial-value: #797467; }
@property --torn-dot-alpha { syntax: '<percentage>'; inherits: true; initial-value: 60%; }
@property --torn-ink { syntax: '<color>'; inherits: true; initial-value: #ffffff; }

/* transitions (all states) */
.ics-btn.ics-btn--torn:not(.ics-btn--torn-yellow):not(.ics-btn--torn-pink):not(.ics-btn--torn-blue),
html body #contact-form#contact-form button[type='submit'],
html body #jn-native-form#jn-native-form button[type='submit'] {
	transition: transform 160ms ease, color 140ms ease-out, --torn-fill 140ms ease-out, --torn-dot 140ms ease-out, --torn-dot-alpha 140ms ease-out, --torn-ink 140ms ease-out;
}

/* hover: logo pink fill, black dots at 22%, text stays white.
   color is forced because some buttons set colour by id (e.g. #wn-more), which beats the --torn-ink hook. */
@media (hover: hover) {
	.ics-btn.ics-btn--torn:not(.ics-btn--torn-yellow):not(.ics-btn--torn-pink):not(.ics-btn--torn-blue):hover:not(:disabled):not([aria-disabled="true"]),
	html body #contact-form#contact-form button[type='submit']:hover:not(:disabled):not([aria-disabled="true"]),
	html body #jn-native-form#jn-native-form button[type='submit']:hover:not(:disabled):not([aria-disabled="true"]) {
		--torn-fill: var(--ics-pink-hover);
		--torn-dot: #000000;
		--torn-dot-alpha: 22%;
		--torn-ink: #ffffff;
		color: #ffffff !important;
	}
}

/* keyboard focus: same pink state + focus ring */
.ics-btn.ics-btn--torn:not(.ics-btn--torn-yellow):not(.ics-btn--torn-pink):not(.ics-btn--torn-blue):focus-visible:not(:disabled):not([aria-disabled="true"]),
html body #contact-form#contact-form button[type='submit']:focus-visible:not(:disabled):not([aria-disabled="true"]),
html body #jn-native-form#jn-native-form button[type='submit']:focus-visible:not(:disabled):not([aria-disabled="true"]) {
	--torn-fill: var(--ics-pink-hover);
	--torn-dot: #000000;
	--torn-dot-alpha: 22%;
	--torn-ink: #ffffff;
	color: #ffffff !important;
	outline: 2px solid var(--heading);
	outline-offset: 3px;
}

/* pressed: darker pink #d4126f, white text */
.ics-btn.ics-btn--torn:not(.ics-btn--torn-yellow):not(.ics-btn--torn-pink):not(.ics-btn--torn-blue):active:not(:disabled):not([aria-disabled="true"]),
html body #contact-form#contact-form button[type='submit']:active:not(:disabled):not([aria-disabled="true"]),
html body #jn-native-form#jn-native-form button[type='submit']:active:not(:disabled):not([aria-disabled="true"]) {
	--torn-fill: var(--ics-pink-brand-press);
	--torn-dot: #000000;
	--torn-dot-alpha: 22%;
	--torn-ink: #ffffff;
	color: #ffffff !important;
}

/* plain black 404 button (solid, no torn build): pink bg + white text */
html body a#brxe-nfbtn1.bricks-button {
	transition: background-color 140ms ease-out, color 140ms ease-out;
}
@media (hover: hover) {
	html body a#brxe-nfbtn1.bricks-button:hover:not([aria-disabled="true"]) {
		background-color: var(--ics-pink-hover);
		color: #ffffff;
	}
}
html body a#brxe-nfbtn1.bricks-button:focus-visible:not([aria-disabled="true"]) {
	background-color: var(--ics-pink-hover);
	color: #ffffff;
	outline: 2px solid var(--heading);
	outline-offset: 3px;
}
html body a#brxe-nfbtn1.bricks-button:active:not([aria-disabled="true"]) {
	background-color: var(--ics-pink-brand-press);
	color: #ffffff;
}

@media (prefers-reduced-motion: reduce) {
	.ics-btn.ics-btn--torn:not(.ics-btn--torn-yellow):not(.ics-btn--torn-pink):not(.ics-btn--torn-blue),
	html body #contact-form#contact-form button[type='submit'],
	html body #jn-native-form#jn-native-form button[type='submit'],
	html body a#brxe-nfbtn1.bricks-button {
		transition: none;
	}
}

/* 2026-11-05 button variants (owner: every BUTTON gets the halftone dots; Google/Apple border = --border-ui).
   Hooks = Bricks element style: .bricks-background-primary (black + dots) / .bricks-background-secondary (white + --border-ui).
   Dots = same formula as ics-torn-btn.css (neutral-500 @60%, 0.9px dot, 4px grid); on pink the dots are black @22% as in ics-btn-hover.css.
   Pink (#ed1d85) on hover only under (hover:hover) and (pointer:fine); on :focus-visible and :active (released on touchend, no sticky state). Append-only. */
html body .bricks-button.bricks-background-primary:not(.ics-btn--torn) {
	background-color: var(--neutral-1000) !important;
	background-image: radial-gradient(circle, rgba(121,116,103,.6) 0.9px, transparent 1.4px) !important;
	background-image: radial-gradient(circle, color-mix(in srgb, var(--neutral-500) 60%, transparent) 0.9px, transparent 1.4px) !important;
	background-size: 4px 4px !important;
	color: #fff !important;
	border-color: transparent !important;
	transition: background-color 140ms ease-out, color 140ms ease-out;
}
@media (hover: hover) and (pointer: fine) {
	html body .bricks-button.bricks-background-primary:not(.ics-btn--torn):hover {
		background-color: var(--ics-pink-hover) !important;
		background-image: radial-gradient(circle, rgba(0,0,0,.22) 0.9px, transparent 1.4px) !important;
		color: #fff !important;
	}
}
html body .bricks-button.bricks-background-primary:not(.ics-btn--torn):focus-visible,
html body .bricks-button.bricks-background-primary:not(.ics-btn--torn):active {
	background-color: var(--ics-pink-hover) !important;
	background-image: radial-gradient(circle, rgba(0,0,0,.22) 0.9px, transparent 1.4px) !important;
	color: #fff !important;
}
html body .bricks-button.bricks-background-primary:not(.ics-btn--torn):focus-visible {
	outline: 2px solid var(--heading);
	outline-offset: 3px;
}
html body .bricks-button.bricks-background-secondary:not(.ics-btn--torn) {
	background-color: #fff !important;
	background-image: none !important;
	color: var(--neutral-1000) !important;
	border: 1px solid var(--border-ui) !important;
	transition: background-color 140ms ease-out, color 140ms ease-out, border-color 140ms ease-out;
}
@media (hover: hover) and (pointer: fine) {
	html body .bricks-button.bricks-background-secondary:not(.ics-btn--torn):hover {
		background-color: var(--ics-pink-hover) !important;
		border-color: var(--ics-pink-hover) !important;
		color: #fff !important;
	}
}
html body .bricks-button.bricks-background-secondary:not(.ics-btn--torn):focus-visible,
html body .bricks-button.bricks-background-secondary:not(.ics-btn--torn):active {
	background-color: var(--ics-pink-hover) !important;
	border-color: var(--ics-pink-hover) !important;
	color: #fff !important;
}
/* Google / Apple / Xem sự kiện sắp tới (ics-event-card.php, class .ics-ev-sec, plain anchors): border = global token --border-ui, 1px */
html body a.ics-ev-sec {
	border: 1px solid var(--border-ui);
}
/* H101: ics-ev-sec pink hover removed (owner 2026-11-05) */
html body a.ics-ev-sec:focus-visible,
html body a.ics-ev-sec:active { border-color: var(--ics-pink-hover); }
/* 2026-11-04 torn primary + torn secondary (owner: rectangle torn buttons, no pills). APPEND-ONLY block.
   PRIMARY: .bricks-background-primary (not .ics-btn--torn) gets the .ics-btn--torn silhouette (mask a), paper stack and halftone (neutral-500 60%, 0.9px dot, 4px grid). Element background transparent; ::before/::after paint.
   SECONDARY: a.ics-ev-sec (Google, Apple, Xem su kien sap toi) = white torn fill, grey halftone (neutral-500 20%), 1px --border-ui torn edge, border-radius 0.
   PLACE PILLS .nw-links a.is-call/is-map/is-web: NO pseudo layers (tear-guard.css owns their ::before icon and ::after tap area); element-level white rectangle, 1px --border-ui edge, grey dots.
   Pink (--ics-pink-brand) on hover only under (hover:hover) and (pointer:fine); focus-visible and active pink (released on touchend). Tokens only. */
html body .bricks-button.bricks-background-primary:not(.ics-btn--torn) {
	position: relative;
	isolation: isolate;
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: #fff !important;
	--torn-fill: var(--neutral-1000);
	--torn-dot: var(--neutral-500);
	--torn-dot-alpha: 60%;
	--torn-dot-r: 0.9px;
	--torn-grid: 4px;
	--torn-paper: var(--neutral-100);
	--torn-fade-end: 70%;
}
html body .bricks-button.bricks-background-primary:not(.ics-btn--torn)::before,
html body .bricks-button.bricks-background-primary:not(.ics-btn--torn)::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	-webkit-mask: url(/wp-content/uploads/ics-torn/btn-torn-mask-a-r2.svg) center / 100% 100% no-repeat;
	mask: url(/wp-content/uploads/ics-torn/btn-torn-mask-a-r2.svg) center / 100% 100% no-repeat;
}
html body .bricks-button.bricks-background-primary:not(.ics-btn--torn)::before {
	z-index: -2;
	background: var(--torn-paper);
	transform: translate(3px, 3px);
}
html body .bricks-button.bricks-background-primary:not(.ics-btn--torn)::after {
	z-index: -1;
	padding: 4px;
	background:
		linear-gradient(to top right, transparent 0%, var(--torn-fill) var(--torn-fade-end)),
		radial-gradient(circle, color-mix(in srgb, var(--torn-dot) var(--torn-dot-alpha), transparent) var(--torn-dot-r), transparent calc(var(--torn-dot-r) + 0.5px)) 0 0 / var(--torn-grid) var(--torn-grid),
		var(--torn-fill);
	background-clip: border-box, content-box, border-box;
}
@media (hover: hover) and (pointer: fine) {
	html body .bricks-button.bricks-background-primary:not(.ics-btn--torn):not(:disabled):hover {
		background: transparent !important;
		background-image: none !important;
		--torn-fill: var(--ics-pink-hover);
		--torn-dot: #000000;
		--torn-dot-alpha: 22%;
		color: #fff !important;
	}
}
html body .bricks-button.bricks-background-primary:not(.ics-btn--torn):not(:disabled):focus-visible {
	background: transparent !important;
	background-image: none !important;
	--torn-fill: var(--ics-pink-hover);
	--torn-dot: #000000;
	--torn-dot-alpha: 22%;
	color: #fff !important;
	outline: 2px solid var(--heading);
	outline-offset: 3px;
}
html body .bricks-button.bricks-background-primary:not(.ics-btn--torn):not(:disabled):active {
	background: transparent !important;
	background-image: none !important;
	--torn-fill: var(--ics-pink-brand-press);
	--torn-dot: #000000;
	--torn-dot-alpha: 22%;
	color: #fff !important;
}
html body a.ics-ev-sec {
	position: relative;
	isolation: isolate;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: var(--neutral-1000) !important;
	text-decoration: none;
	--torn-fill: #ffffff;
	--torn-dot: var(--neutral-500);
	--torn-dot-alpha: 20%;
	--torn-dot-r: 0.9px;
	--torn-grid: 4px;
	--torn-edge: var(--border-ui);
	--torn-fade-end: 70%;
}
html body a.ics-ev-sec::before,
html body a.ics-ev-sec::after {
	content: '';
	position: absolute;
	pointer-events: none;
	-webkit-mask: url(/wp-content/uploads/ics-torn/btn-torn-mask-a-r2.svg) center / 100% 100% no-repeat;
	mask: url(/wp-content/uploads/ics-torn/btn-torn-mask-a-r2.svg) center / 100% 100% no-repeat;
}
html body a.ics-ev-sec::before {
	inset: 0;
	z-index: -2;
	background: var(--torn-edge);
}
html body a.ics-ev-sec::after {
	inset: 1px;
	z-index: -1;
	padding: 4px;
	background:
		linear-gradient(to top right, transparent 0%, var(--torn-fill) var(--torn-fade-end)),
		radial-gradient(circle, color-mix(in srgb, var(--torn-dot) var(--torn-dot-alpha), transparent) var(--torn-dot-r), transparent calc(var(--torn-dot-r) + 0.5px)) 0 0 / var(--torn-grid) var(--torn-grid),
		var(--torn-fill);
	background-clip: border-box, content-box, border-box;
}
/* H101: ics-ev-sec pink hover removed (owner 2026-11-05) */
html body a.ics-ev-sec:focus-visible {
	--torn-fill: var(--ics-pink-hover);
	--torn-dot: #000000;
	--torn-dot-alpha: 22%;
	--torn-edge: var(--ics-pink-hover);
	color: #fff !important;
	outline: 2px solid var(--heading);
	outline-offset: 3px;
}
html body a.ics-ev-sec:active {
	--torn-fill: var(--ics-pink-brand-press);
	--torn-dot: #000000;
	--torn-dot-alpha: 22%;
	--torn-edge: var(--ics-pink-brand-press);
	color: #fff !important;
}
html body .nw-links a.is-call,
html body .nw-links a.is-map,
html body .nw-links a.is-web {
	background-color: #ffffff !important;
	background-image: radial-gradient(circle, color-mix(in srgb, var(--neutral-500) 20%, transparent) 0.9px, transparent 1.4px) !important;
	background-size: 4px 4px !important;
	border: 1px solid var(--border-ui) !important;
	border-radius: 0 !important;
	color: var(--neutral-1000) !important;
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	box-sizing: border-box;
	text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
	html body .nw-links a.is-call:hover,
	html body .nw-links a.is-map:hover,
	html body .nw-links a.is-web:hover {
		background-color: var(--ics-pink-hover) !important;
		background-image: radial-gradient(circle, rgba(0,0,0,.22) 0.9px, transparent 1.4px) !important;
		border-color: var(--ics-pink-hover) !important;
		color: #fff !important;
	}
}
html body .nw-links a.is-call:focus-visible,
html body .nw-links a.is-map:focus-visible,
html body .nw-links a.is-web:focus-visible {
	background-color: var(--ics-pink-hover) !important;
	background-image: radial-gradient(circle, rgba(0,0,0,.22) 0.9px, transparent 1.4px) !important;
	border-color: var(--ics-pink-hover) !important;
	color: #fff !important;
	outline: 2px solid var(--heading);
	outline-offset: 3px;
}
html body .nw-links a.is-call:active,
html body .nw-links a.is-map:active,
html body .nw-links a.is-web:active {
	background-color: var(--ics-pink-brand-press) !important;
	background-image: radial-gradient(circle, rgba(0,0,0,.22) 0.9px, transparent 1.4px) !important;
	border-color: var(--ics-pink-brand-press) !important;
	color: #fff !important;
}
.ics-ev-card .ics-ev-actions,
.ics-ev-card .ics-ev-actions--pair {
	gap: var(--sp-s, 12px);
}
html body .ics-ev-card a.ics-ev-sec,
html body .ics-ev-card .bricks-button.bricks-background-primary {
	min-height: 48px;
	box-sizing: border-box;
}
html body .ics-ev-card a.ics-ev-sec > svg {
	width: 18px !important;
	height: 18px !important;
	flex: none;
}
html body .ics-ev-card .ics-ev-mut {
	border-radius: 0 !important;
}