/**
 * Lyquix Consent Manager — Default Front-End CSS
 *
 * Full default theme using CSS custom properties for straightforward overrides.
 * To replace this stylesheet entirely: enable "Disable default CSS" in the
 * Appearance settings tab and enqueue your own stylesheet.
 */

/* ============================================================
   Custom properties — override in :root or a scoped selector
   ============================================================ */

:root {
	/* Palette */
	--lcm-bg:             #ffffff;
	--lcm-text:           #1d2327;
	--lcm-text-muted:     #646970;
	--lcm-border:         #dcdcde;
	--lcm-divider:        #f0f0f1;

	/* Shadows */
	--lcm-shadow-banner:  0 -4px 20px rgba(0, 0, 0, 0.10);
	--lcm-shadow-modal:   0 8px 48px rgba(0, 0, 0, 0.20);

	/* Shape */
	--lcm-radius:         8px;
	--lcm-radius-sm:      4px;

	/* Spacing */
	--lcm-pad-x:          1.5rem;
	--lcm-pad-y:          1.125rem;
	--lcm-gap:            0.625rem;

	/* Typography — relative so the theme's font size is respected */
	--lcm-font:        inherit;
	--lcm-title-size:  1.2em;
	--lcm-small-size:  1em;

	/* Accept / primary button */
	--lcm-btn-accept-bg:        #0073aa;
	--lcm-btn-accept-text:      #ffffff;
	--lcm-btn-accept-bg-hover:  #005a87;

	/* Reject / outlined button */
	--lcm-btn-reject-bg:        transparent;
	--lcm-btn-reject-text:      #0073aa;
	--lcm-btn-reject-border:    #0073aa;
	--lcm-btn-reject-bg-hover:  #f0f6fc;

	/* Tertiary buttons (Settings, Save, Back) */
	--lcm-btn-tertiary-bg:        transparent;
	--lcm-btn-tertiary-text:      #50575e;
	--lcm-btn-tertiary-border:    #c3c4c7;
	--lcm-btn-tertiary-bg-hover:  #f6f7f7;

	/* Category toggle */
	--lcm-toggle-w:     2.75rem;
	--lcm-toggle-h:     1.5rem;
	--lcm-toggle-off:   #c3c4c7;
	--lcm-toggle-on:    #0073aa;
	--lcm-toggle-thumb: #ffffff;
}

/* ============================================================
   Banner wrapper
   ============================================================ */

#lcm-banner {
	position: fixed;
	z-index: 99999;
	box-sizing: border-box;
	width: 100%;
	left: 0;
	right: 0;
	font-family: var(--lcm-font);
	line-height: 1.5;
	color: var(--lcm-text);
}

#lcm-banner[hidden] {
	display: none;
}

#lcm-banner.lcm-banner--top    { top: 0; }
#lcm-banner.lcm-banner--bottom { bottom: 0; }

/* ============================================================
   Modal format

   Hybrid is NOT styled here. It starts as a strip (sharing the
   .lcm-banner--banner rules, added by JS) and only becomes a modal
   when the preferences panel opens, at which point the JS swaps the
   helper class to .lcm-banner--modal.
   ============================================================ */

#lcm-banner.lcm-banner--modal {
	top: 50%;
	left: 50%;
	right: auto;
	bottom: auto;
	width: calc(100% - 2rem);
	max-width: 560px;
	transform: translate(-50%, -50%);
	border-radius: var(--lcm-radius);
	box-shadow: var(--lcm-shadow-modal);
}

/* ============================================================
   Overlay
   ============================================================ */

#lcm-overlay {
	position: fixed;
	inset: 0;
	z-index: 99998;
	background: rgba(0, 0, 0, 0.50);
}

#lcm-overlay[aria-hidden="true"] {
	display: none;
}

/* ============================================================
   Inner container
   ============================================================ */

.lcm-banner__inner {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	width: 100%;
	background: var(--lcm-bg);
	max-height: 90vh;
	overflow-y: auto;
}

/* Banner shadow on the strip variants */
#lcm-banner.lcm-banner--banner .lcm-banner__inner {
	box-shadow: var(--lcm-shadow-banner);
}

/* Round corners on modal */
#lcm-banner.lcm-banner--modal .lcm-banner__inner {
	border-radius: var(--lcm-radius);
}

/* ============================================================
   Notice panel
   ============================================================ */

.lcm-banner__notice {
	padding: var(--lcm-pad-y) var(--lcm-pad-x);
}

/* Side-by-side layout for banner strip on wider screens */
@media (min-width: 640px) {
	.lcm-banner--banner .lcm-banner__notice {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: var(--lcm-gap);
	}

	.lcm-banner--banner .lcm-banner__notice > * {
		margin-top: 0;
		margin-bottom: 0;
	}

	/* Title + description share available space */
	.lcm-banner--banner .lcm-banner__title,
	.lcm-banner--banner .lcm-banner__description {
		flex: 1 1 30%;
		min-width: 0;
	}
}

/* Title */
.lcm-banner__title {
	font-size: var(--lcm-title-size);
	font-weight: 700;
	margin: 0 0 0.375rem;
	line-height: 1.3;
}

/* Description */
.lcm-banner__description {
	margin: 0 0 0.625rem;
	color: var(--lcm-text-muted);
}

.lcm-banner__description p {
	margin: 0;
}

/* Privacy link */
.lcm-banner__privacy-link {
	margin: 0 0 0.625rem;
	font-size: var(--lcm-small-size);
}

.lcm-banner__privacy-link a {
	color: var(--lcm-btn-accept-bg);
	text-underline-offset: 2px;
}

.lcm-banner__privacy-link a:hover {
	color: var(--lcm-btn-accept-bg-hover);
}

/* ============================================================
   Action button group
   ============================================================ */

.lcm-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--lcm-gap);
	align-items: center;
	margin-top: 0.75rem;
}

/* No extra top margin when inline in the banner strip flex row */
@media (min-width: 640px) {
	.lcm-banner--banner .lcm-banner__notice .lcm-banner__actions {
		margin-top: 0;
		flex-wrap: nowrap;
		flex-shrink: 0;
	}
}

/* Separator bar inside settings panel actions */
.lcm-banner__actions--settings {
	padding-top: 0.875rem;
	border-top: 1px solid var(--lcm-border);
}

/* ============================================================
   Buttons
   ============================================================ */

.lcm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 0.5rem 1.125rem;
	font-family: var(--lcm-font);
	font-size: var(--lcm-small-size); /* relative em, inherits from banner */
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	border-radius: var(--lcm-radius-sm);
	border: 2px solid transparent;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
	text-decoration: none;
}

/* Accept — filled primary */
.lcm-btn--accept {
	background: var(--lcm-btn-accept-bg);
	color: var(--lcm-btn-accept-text);
	border-color: var(--lcm-btn-accept-bg);
}

.lcm-btn--accept:hover,
.lcm-btn--accept:focus-visible {
	background: var(--lcm-btn-accept-bg-hover);
	border-color: var(--lcm-btn-accept-bg-hover);
}

/* Reject — outlined */
.lcm-btn--reject {
	background: var(--lcm-btn-reject-bg);
	color: var(--lcm-btn-reject-text);
	border-color: var(--lcm-btn-reject-border);
}

.lcm-btn--reject:hover,
.lcm-btn--reject:focus-visible {
	background: var(--lcm-btn-reject-bg-hover);
}

/* Settings / Save / Back — ghost */
.lcm-btn--settings,
.lcm-btn--save,
.lcm-btn--back {
	background: var(--lcm-btn-tertiary-bg);
	color: var(--lcm-btn-tertiary-text);
	border-color: var(--lcm-btn-tertiary-border);
}

.lcm-btn--settings:hover,
.lcm-btn--settings:focus-visible,
.lcm-btn--save:hover,
.lcm-btn--save:focus-visible,
.lcm-btn--back:hover,
.lcm-btn--back:focus-visible {
	background: var(--lcm-btn-tertiary-bg-hover);
}

/* ============================================================
   Settings panel
   ============================================================ */

#lcm-settings-panel[hidden] {
	display: none;
}

.lcm-banner__settings {
	padding: var(--lcm-pad-y) var(--lcm-pad-x);
	border-top: 1px solid var(--lcm-border);
}

.lcm-banner__settings-title {
	font-size: var(--lcm-title-size);
	font-weight: 700;
	margin: 0 0 0.375rem;
	line-height: 1.3;
}

.lcm-banner__settings-description {
	font-size: var(--lcm-small-size);
	color: var(--lcm-text-muted);
	margin: 0 0 0.875rem;
}

/* ============================================================
   Categories list
   ============================================================ */

.lcm-categories {
	list-style: none;
	margin: 0;
	padding: 0;
}

.lcm-category {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 0.6875rem 0;
	border-bottom: 1px solid var(--lcm-divider);
}

.lcm-category:last-child {
	border-bottom: none;
}

.lcm-category__label {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	cursor: pointer;
}

.lcm-category__name {
	font-weight: 600;
}

.lcm-category__description {
	font-size: var(--lcm-small-size);
	color: var(--lcm-text-muted);
	margin-top: 0.125rem;
}

/* ============================================================
   Toggle switch
   ============================================================ */

.lcm-category__toggle {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	flex-shrink: 0;
	width: var(--lcm-toggle-w);
	height: var(--lcm-toggle-h);
	border-radius: calc(var(--lcm-toggle-h) / 2);
	background: var(--lcm-toggle-off);
	cursor: pointer;
	border: none;
	transition: background 0.2s ease;
}

.lcm-category__toggle::after {
	content: '';
	position: absolute;
	top: 2px;
	left: 2px;
	width: calc(var(--lcm-toggle-h) - 4px);
	height: calc(var(--lcm-toggle-h) - 4px);
	border-radius: 50%;
	background: var(--lcm-toggle-thumb);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s ease;
}

.lcm-category__toggle:checked {
	background: var(--lcm-toggle-on);
}

.lcm-category__toggle:checked::after {
	transform: translateX(calc(var(--lcm-toggle-w) - var(--lcm-toggle-h)));
}

.lcm-category__toggle:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.lcm-category__toggle:focus-visible {
	outline: 2px solid var(--lcm-toggle-on);
	outline-offset: 2px;
}

/* ============================================================
   Reopen control — footer link
   ============================================================ */

.lcm-reopen--footer {
	display: block;
	padding: 0.375rem 0;
}

.lcm-reopen--footer .lcm-reopen__btn {
	background: none;
	border: none;
	padding: 0;
	color: var(--lcm-btn-accept-bg);
	font-size: var(--lcm-small-size);
	font-family: var(--lcm-font);
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.lcm-reopen--footer .lcm-reopen__btn:hover {
	color: var(--lcm-btn-accept-bg-hover);
}

/* ============================================================
   Reopen control — floating button
   ============================================================ */

.lcm-reopen--floating {
	position: fixed;
	bottom: 1.25rem;
	left: 1.25rem;
	z-index: 9999;
}

.lcm-reopen--floating[aria-hidden="true"] {
	display: none;
}

.lcm-reopen--floating .lcm-reopen__btn {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	background: var(--lcm-btn-accept-bg);
	color: var(--lcm-btn-accept-text);
	border: none;
	border-radius: 2rem;
	padding: 0.5625rem 1rem;
	font-size: var(--lcm-small-size);
	font-weight: 600;
	font-family: var(--lcm-font);
	cursor: pointer;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
	transition: background 0.15s ease, box-shadow 0.15s ease;
}

.lcm-reopen--floating .lcm-reopen__btn:hover {
	background: var(--lcm-btn-accept-bg-hover);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

/* ============================================================
   Screen reader utilities
   ============================================================ */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ============================================================
   Focus management
   ============================================================ */

#lcm-banner :focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ============================================================
   Mobile — stack buttons full-width below 480px
   ============================================================ */

@media (max-width: 480px) {
	.lcm-banner__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.lcm-btn {
		width: 100%;
		justify-content: center;
	}
}