/**
 * Cells4Life Cookie Consent – banner styles.
 *
 * Colour values are wired to CSS variables so the admin's Appearance tab can
 * rebrand the banner without touching this file. The fallback after each
 * `var(--name, ...)` matches the original Cells4Life cyan / dark-grey defaults
 * so the banner still renders sanely if the inline <style> block somehow
 * doesn't load (rare, but cheap insurance).
 *
 *   --c4l-cc-bg                background of the banner container (rgba — colour+alpha composed server-side)
 *   --c4l-cc-text              banner heading and description text
 *   --c4l-cc-accent            primary button background, links, toggle "on" state
 *   --c4l-cc-accent-hover      primary button hover background AND link hover colour
 *   --c4l-cc-button-text       primary button text colour
 *   --c4l-cc-button-text-hover primary button text colour on hover (defaults to button-text — no change)
 *   --c4l-cc-readmore          cookie-policy link inside the heading (defaults to text colour)
 *   --c4l-cc-shadow            top-edge shadow on the banner container (rgba — colour+alpha)
 *
 * Font family and weight are deliberately not set so the banner inherits the
 * parent theme's typography. Font sizes are kept explicit because the banner
 * has its own legibility constraints (15px body / 13px landscape mobile).
 */

.consent-container {
	display: none;
	justify-content: center;
	align-items: center;
	position: fixed;
	width: 100%;
	height: auto;
	min-height: 25vh;
	max-height: 80vh;
	bottom: 0;
	padding: 12px 10px;
	padding-top: 20px;
	padding-bottom: 20px;
	background: var(--c4l-cc-bg, rgba(68, 68, 68, 0.9));
	pointer-events: auto;
	transition: all 0.3s linear;
	z-index: 20000000;
	box-sizing: border-box;
	box-shadow: 0 -5px 10px -5px var(--c4l-cc-shadow, rgba(0, 0, 0, 1));
}

.consent-container-hide {
	transform: translateY(100%);
	opacity: 0;
}

.consent-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding-left: 20px;
	padding-right: 20px;
	max-width: 1145px;
	/* font-family deliberately omitted — inherits from the parent theme. */
}

.consent-heading,
.consent-description {
	color: var(--c4l-cc-text, #fff);
	font-size: 15px;
	line-height: 21px;
	text-align: left;
	-webkit-text-size-adjust: 100%;
	/* font-weight inherits from the parent theme — usually the body's default
	 * (400). The original code forced 300, which fought heavier-weighted
	 * themes; leaving it inherited blends in. */
}

.consent-description {
	display: none;
	max-height: 50vh;
	overflow-y: auto;
	position: relative;
	width: 100%;
	margin-bottom: 10px;
	-webkit-overflow-scrolling: touch;
	/* The original code wrapped this scroll area in a top+bottom inner shadow
	 * to hint that the panel scrolls. Removed in v1.0.4 — most modern themes
	 * provide their own scroll affordances and the shadow read as a foreign
	 * frame against light backgrounds. */
}

.consent-description p {
	font-size: 15px;
}

.consent-controls {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.left-control { text-align: left; }
.right-control { text-align: right; }

.consent-controls-button {
	flex: 0 0 auto;
	margin: 5px;
	min-width: 160px;
	padding: 9px 12px;
	font-size: 15px;
	color: var(--c4l-cc-button-text, #fff);
	background-color: var(--c4l-cc-accent, #01A1C5);
	border: none;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	flex-grow: 1;
}

.consent-controls-button:hover,
.consent-controls-button.consent-hover:hover {
	background-color: var(--c4l-cc-accent-hover, #0190b0);
	color: var(--c4l-cc-button-text-hover, var(--c4l-cc-button-text, #fff));
}

.consent-controls-link {
	margin: 0;
	font-size: 15px;
	color: var(--c4l-cc-accent, #01A1C5);
	cursor: pointer;
	text-decoration: underline;
	background: none;
	border: none;
	padding: 0;
	display: inline-block;
}

.consent-controls-link:hover,
.consent-controls-link:focus {
	color: var(--c4l-cc-accent-hover, #0190b0);
}

.consent-controls-readmore {
	font-size: 15px;
	line-height: 21px;
	color: var(--c4l-cc-readmore, var(--c4l-cc-text, #fff));
	text-decoration: underline;
	/* font-family + font-weight inherit from .consent-content / theme. */
}

.consent-controls-readmore:hover {
	opacity: 0.85;
}

.button-outline {
	background-color: transparent;
	color: var(--c4l-cc-accent, #01A1C5);
	border: 1px solid var(--c4l-cc-accent, #01A1C5);
}

@media (max-width: 768px) {
	.consent-content {
		padding-left: 5px;
		padding-right: 5px;
	}
	.consent-heading { text-align: center; }
	.consent-description { text-align: left; }
	.consent-controls-button {
		flex-grow: 1;
		min-width: 160px;
		font-size: 15px;
	}
	.consent-controls { flex-direction: column; }
	.right-control { margin-top: 10px; }
	.consent-description p,
	.cookie-setting p {
		font-size: 15px;
	}
}

@media (orientation: landscape) and (max-width: 768px) {
	.consent-description p,
	.cookie-setting p { font-size: 13px; }
	.consent-controls { flex-direction: row; }
	.right-control { margin-top: 0; }
}

/* Toggle switch */
.switch {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 22px;
}

.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	transition: .4s;
}

.slider:before {
	position: absolute;
	content: "";
	height: 16px;
	width: 16px;
	left: 3px;
	bottom: 3px;
	background-color: white;
	transition: .4s;
}

input:checked + .slider { background-color: var(--c4l-cc-accent, #01A1C5); }
input:focus + .slider { box-shadow: 0 0 1px var(--c4l-cc-accent, #01A1C5); }
input:checked + .slider:before { transform: translateX(28px); }

.slider.round { border-radius: 22px; }
.slider.round:before { border-radius: 50%; }