/* ==========================================================================
   Accessibility Preferences panel
   The bar has been removed; the panel is triggered from within the
   help panel and mobile menu. It appears as a fixed overlay at the
   top of the viewport so it is always visible regardless of scroll position.
   ========================================================================== */

/* ------------------------------------------------------------------
   Trigger button — inside the help panel & mobile menu (drawer style)
   Mirrors ac-chat-trigger visually without sharing that class (which
   is reserved for the live-chat JS hook).
   ------------------------------------------------------------------ */
.ac-drawer-section--a11y {
	/* No extra margin needed; ac-drawer-section already handles spacing */
}

.ac-prefs-drawer-btn {
	display:         flex;
	align-items:     center;
	gap:             var(--ac-space-4);
	width:           100%;
	padding:         var(--ac-space-4) var(--ac-space-5);
	background:      var(--ac-color-surface);
	border:          1px solid var(--ac-color-border);
	border-radius:   var(--ac-radius-lg);
	/* Explicit color overrides browser's UA 'ButtonText' default on <button>,
	   which would stay black in dark mode even if the panel background is dark. */
	color:           var(--ac-color-text);
	cursor:          pointer;
	text-align:      left;
	text-decoration: none;
	transition:
		background-color var(--ac-duration-short) var(--ac-ease-standard),
		border-color     var(--ac-duration-short) var(--ac-ease-standard),
		color            var(--ac-duration-short) var(--ac-ease-standard);
}

.ac-prefs-drawer-btn:hover,
.ac-prefs-drawer-btn:focus-visible {
	background:   var(--ac-color-primary);
	border-color: var(--ac-color-primary);
	color:        var(--ac-color-white);
}

.ac-prefs-drawer-btn:hover .ac-prefs-drawer-btn__icon,
.ac-prefs-drawer-btn:focus-visible .ac-prefs-drawer-btn__icon {
	background: rgba(255, 255, 255, 0.2);
	color:      var(--ac-color-white);
}

.ac-prefs-drawer-btn:focus-visible {
	outline:        3px solid var(--ac-color-focus-ring);
	outline-offset: 2px;
}

.ac-prefs-drawer-btn__icon {
	flex-shrink:     0;
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           44px;
	height:          44px;
	border-radius:   var(--ac-radius-pill);
	background:      var(--ac-color-primary);
	color:           var(--ac-color-white);
	font-size:       1.2rem;
	transition:      background var(--ac-duration-short) var(--ac-ease-standard);
}

.ac-prefs-drawer-btn__text {
	flex:           1;
	display:        flex;
	flex-direction: column;
	gap:            2px;
	font-size:      var(--ac-font-size-sm);
	line-height:    1.3;
	color:          inherit;
}

.ac-prefs-drawer-btn__text strong {
	font-size:   var(--ac-font-size-base);
	font-weight: var(--ac-font-weight-semibold);
}

.ac-prefs-drawer-btn__arrow {
	flex-shrink: 0;
	color:       var(--ac-color-text-muted);
	font-size:   0.75rem;
	transition:  color var(--ac-duration-short) var(--ac-ease-standard);
}

.ac-prefs-drawer-btn:hover .ac-prefs-drawer-btn__arrow,
.ac-prefs-drawer-btn:focus-visible .ac-prefs-drawer-btn__arrow {
	color: rgba(255, 255, 255, 0.7);
}

/* Mobile standalone trigger strip */
.ac-mobile-a11y {
	padding: var(--ac-space-4) var(--ac-space-5);
	border-top: 1px solid var(--ac-color-border);
}

.ac-mobile-a11y__btn {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	width:           100%;
	gap:             var(--ac-space-3);
	padding:         var(--ac-space-3) var(--ac-space-4);
	background:      var(--ac-color-surface);
	border:          1px solid var(--ac-color-border);
	border-radius:   var(--ac-radius-md);
	color:           var(--ac-color-text);
	font-family:     var(--ac-font-family-ui);
	font-size:       var(--ac-font-size-sm);
	font-weight:     var(--ac-font-weight-semibold);
	cursor:          pointer;
	transition:
		background-color var(--ac-duration-short) var(--ac-ease-standard),
		border-color     var(--ac-duration-short) var(--ac-ease-standard);
}

.ac-mobile-a11y__btn:hover {
	background-color: var(--ac-color-white);
	border-color:     var(--ac-color-primary-light);
}

.ac-mobile-a11y__btn:focus-visible {
	outline:        3px solid var(--ac-color-focus-ring);
	outline-offset: 2px;
}

.ac-mobile-a11y__btn[aria-expanded="true"] {
	border-color: var(--ac-color-primary);
	background:   var(--ac-color-white);
}

/* ------------------------------------------------------------------
   Preferences panel — fixed overlay at top of viewport
   Drops down from the top when opened; hidden by default.
   z-index sits above the header (~200) but below modal overlays (~1000).
   ------------------------------------------------------------------ */
.ac-prefs-panel {
	position:    fixed;
	top:         0;
	left:        0;
	right:       0;
	z-index:     800;
	background:  var(--ac-color-white);
	border-bottom: 2px solid var(--ac-color-border);
	box-shadow:  var(--ac-shadow-md);
	overflow:    hidden;
	transform:   translateY( -100% );
	transition:
		transform var(--ac-duration-base) var(--ac-ease-standard),
		opacity   var(--ac-duration-base) var(--ac-ease-standard);
	opacity:     0;
}

.ac-prefs-panel:not([hidden]) {
	transform: translateY( 0 );
	opacity:   1;
}

.ac-prefs-panel[hidden] {
	/* Keep display:block so the slide-in animation works;
	   visually hidden via transform + opacity above */
	display:    block;
	visibility: hidden;
	pointer-events: none;
}

.ac-prefs-panel__inner {
	padding-block: var(--ac-space-8);
}

/* Panel header */
.ac-prefs-panel__header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             var(--ac-space-4);
	margin-bottom:   var(--ac-space-8);
}

.ac-prefs-panel__title {
	font-size:   var(--ac-font-size-xl);
	font-weight: var(--ac-font-weight-bold);
	color:       var(--ac-color-text);
	margin:      0;
	display:     flex;
	align-items: center;
	gap:         var(--ac-space-3);
}

.ac-prefs-panel__title i {
	color: var(--ac-color-primary);
}

.ac-prefs-panel__close {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           40px;
	height:          40px;
	flex-shrink:     0;
	background:      transparent;
	border:          2px solid var(--ac-color-border);
	border-radius:   var(--ac-radius-pill);
	color:           var(--ac-color-text-muted);
	font-size:       1.1rem;
	cursor:          pointer;
	transition:
		color            var(--ac-duration-short) var(--ac-ease-standard),
		border-color     var(--ac-duration-short) var(--ac-ease-standard),
		background-color var(--ac-duration-short) var(--ac-ease-standard);
}

.ac-prefs-panel__close:hover {
	color:            var(--ac-color-text);
	border-color:     var(--ac-color-text);
	background-color: var(--ac-color-surface);
}

.ac-prefs-panel__close:focus-visible {
	outline:        3px solid var(--ac-color-focus-ring);
	outline-offset: 2px;
}

/* ------------------------------------------------------------------
   Preference option groups
   ------------------------------------------------------------------ */
.ac-prefs-panel__options {
	display:   flex;
	flex-wrap: wrap;
	gap:       var(--ac-space-8);
}

.ac-pref-group {
	border:  none;
	margin:  0;
	padding: 0;
	min-width: 260px;
}

.ac-pref-group__label {
	display:     flex;
	align-items: center;
	gap:         var(--ac-space-2);
	font-size:   var(--ac-font-size-md);
	font-weight: var(--ac-font-weight-bold);
	color:       var(--ac-color-text);
	margin-bottom: var(--ac-space-2);
}

.ac-pref-group__label i {
	color: var(--ac-color-secondary);
}

.ac-pref-group__desc {
	font-size:     var(--ac-font-size-sm);
	color:         var(--ac-color-text-muted);
	margin-bottom: var(--ac-space-4);
	margin-top:    0;
}

/* Radio card controls — horizontal row of card pills */
.ac-pref-group__controls {
	display: flex;
	gap:     var(--ac-space-3);
	flex-wrap: wrap;
}

/* Hide the native radio, style the card */
.ac-pref-radio {
	cursor: pointer;
}

.ac-pref-radio input[type="radio"] {
	position: absolute;
	opacity:  0;
	width:    0;
	height:   0;
}

.ac-pref-radio__card {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            var(--ac-space-1);
	padding:        var(--ac-space-4) var(--ac-space-5);
	min-width:      90px;
	background:     var(--ac-color-surface);
	border:         2px solid var(--ac-color-border);
	border-radius:  var(--ac-radius-md);
	color:          var(--ac-color-text-muted);
	font-size:      var(--ac-font-size-sm);
	text-align:     center;
	transition:
		background-color var(--ac-duration-short) var(--ac-ease-standard),
		border-color     var(--ac-duration-short) var(--ac-ease-standard),
		color            var(--ac-duration-short) var(--ac-ease-standard),
		box-shadow       var(--ac-duration-short) var(--ac-ease-standard);
}

.ac-pref-radio__card i {
	font-size: 1.4rem;
	margin-bottom: var(--ac-space-1);
}

.ac-pref-radio__name {
	font-weight: var(--ac-font-weight-semibold);
	color:       var(--ac-color-text);
	font-size:   var(--ac-font-size-base);
}

.ac-pref-radio__hint {
	font-size: var(--ac-font-size-xs);
	color:     var(--ac-color-text-muted);
	line-height: 1.3;
}

/* Hover state */
.ac-pref-radio:hover .ac-pref-radio__card {
	border-color:     var(--ac-color-primary-light);
	background-color: var(--ac-color-white);
}

/* Focus-visible state */
.ac-pref-radio input[type="radio"]:focus-visible + .ac-pref-radio__card {
	outline:        3px solid var(--ac-color-focus-ring);
	outline-offset: 2px;
}

/* Selected state */
.ac-pref-radio input[type="radio"]:checked + .ac-pref-radio__card {
	background:   var(--ac-color-primary);
	border-color: var(--ac-color-primary);
	color:        var(--ac-color-white);
	box-shadow:   var(--ac-shadow-sm);
}

.ac-pref-radio input[type="radio"]:checked + .ac-pref-radio__card .ac-pref-radio__name,
.ac-pref-radio input[type="radio"]:checked + .ac-pref-radio__card .ac-pref-radio__hint {
	color: rgba(255, 255, 255, 0.9);
}

/* ------------------------------------------------------------------
   Panel footer
   ------------------------------------------------------------------ */
.ac-prefs-panel__footer {
	display:     flex;
	align-items: center;
	gap:         var(--ac-space-6);
	flex-wrap:   wrap;
	margin-top:  var(--ac-space-8);
	padding-top: var(--ac-space-6);
	border-top:  1px solid var(--ac-color-border);
}

.ac-prefs-panel__note {
	font-size:  var(--ac-font-size-xs);
	color:      var(--ac-color-text-muted);
	margin:     0;
	flex:       1;
	min-width:  200px;
	line-height: 1.4;
}

/* ------------------------------------------------------------------
   Responsive — mobile
   ------------------------------------------------------------------ */
@media (max-width: 56.25em) {
	.ac-pref-group__controls {
		flex-direction: row;
	}

	.ac-pref-radio__card {
		flex:     1;
		min-width: 70px;
		padding:  var(--ac-space-3) var(--ac-space-2);
	}
}

/* ------------------------------------------------------------------
   Dark mode overrides for the prefs panel
   ------------------------------------------------------------------ */
html[data-color-scheme="dark"] .ac-prefs-panel__title i,
html[data-color-scheme="dark"] .ac-pref-group__label i {
	color: var(--ac-color-secondary);
}

@media (prefers-color-scheme: dark) {
	html:not([data-color-scheme="light"]) .ac-prefs-panel__title i,
	html:not([data-color-scheme="light"]) .ac-pref-group__label i {
		color: var(--ac-color-secondary);
	}
}

/* Selected card in dark mode */
html[data-color-scheme="dark"] .ac-pref-radio input[type="radio"]:checked + .ac-pref-radio__card {
	background:   var(--ac-color-secondary);
	border-color: var(--ac-color-secondary);
}

@media (prefers-color-scheme: dark) {
	html:not([data-color-scheme="light"]) .ac-pref-radio input[type="radio"]:checked + .ac-pref-radio__card {
		background:   var(--ac-color-secondary);
		border-color: var(--ac-color-secondary);
	}
}

/* Mobile a11y trigger — all interactive states in dark mode */
html[data-color-scheme="dark"] .ac-mobile-a11y__btn                           { background: var(--ac-color-surface); border-color: var(--ac-color-border); color: var(--ac-color-text); }
/* :hover used var(--ac-color-white) → invisible near-white text on white bg */
html[data-color-scheme="dark"] .ac-mobile-a11y__btn:hover                     { background-color: rgba(255,255,255,0.08); border-color: var(--ac-color-primary-light); color: var(--ac-color-text); }
/* [aria-expanded="true"] used var(--ac-color-white) → same problem */
html[data-color-scheme="dark"] .ac-mobile-a11y__btn[aria-expanded="true"]     { background: rgba(255,255,255,0.06); border-color: var(--ac-color-link); color: var(--ac-color-text); }

@media (prefers-color-scheme: dark) {
	html:not([data-color-scheme="light"]) .ac-mobile-a11y__btn                       { background: var(--ac-color-surface); border-color: var(--ac-color-border); color: var(--ac-color-text); }
	html:not([data-color-scheme="light"]) .ac-mobile-a11y__btn:hover                 { background-color: rgba(255,255,255,0.08); border-color: var(--ac-color-primary-light); color: var(--ac-color-text); }
	html:not([data-color-scheme="light"]) .ac-mobile-a11y__btn[aria-expanded="true"] { background: rgba(255,255,255,0.06); border-color: var(--ac-color-link); color: var(--ac-color-text); }
}