/* Emplacements publicitaires et bandeau de consentement communs
   (drooft_commons/ads.py, templates/drooft_commons/ads/). Une seule feuille
   pour ordinateur et mobile. */

.drooft-ad {
	text-align: center;
	margin: 0 auto 15px;
}

.drooft-ad-instant-gaming {
	max-width: 1100px;
	container-type: inline-size;
}

/* Hauteur réservée avant le chargement de la bannière (hauteurs mesurées du
   script d'Instant Gaming, qui dépendent de la largeur de l'élément) : sans
   elle, la page saute quand la bannière arrive, et après un rechargement
   (bandeau de consentement) Chrome compense en faisant défiler la page, ce qui
   cache la bannière sous la navbar fixe. */
.drooft-ad-instant-gaming [data-ig-banner] {
	min-height: 220px;
}

@container (min-width: 801px) {
	.drooft-ad-instant-gaming [data-ig-banner] {
		min-height: 121px;
	}
}

@container (min-width: 901px) {
	.drooft-ad-instant-gaming [data-ig-banner] {
		min-height: 125px;
	}
}

/* Bannière en tête de page (bloc content_top de dofus et tarot) : écartée
   de la navbar. */
.drooft-ad-top .drooft-ad {
	margin-top: 20px;
}

.ig-dynamic-banner.ig-size-1100, .ig-dynamic-banner.ig-size-1000, .ig-dynamic-banner.ig-size-900 {
	border-radius: 10px !important;
	min-height: 80px !important;
}

.drooft-consent-backdrop {
	width: 100% !important;
	height: 100% !important;
	margin: 0 auto !important;
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	background-color: rgba(0, 0, 0, .5) !important;
	font-family: Arial, serif !important;
	z-index: 20000000000 !important;
	overflow-y: auto !important;
	backdrop-filter: blur(3px);
}

.drooft-consent {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background: #333;
	color: #fff;
	text-align: center;
	padding: 15px;
	box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
	font-size: 14px;
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
	z-index: 20000000001 !important;
}

.drooft-consent > span {
	width: 100%;
}

.drooft-consent hr {
	width: 100%;
	margin: 0;
}

.drooft-consent button {
	margin: 5px;
	padding: 10px 20px;
	background: #007BFF;
	color: #fff;
	border: none;
	cursor: pointer;
	border-radius: 5px;
	font-size: 14px;
}

.drooft-consent button:hover {
	background: #0056b3;
}

.drooft-consent a {
	color: #00aaff;
	text-decoration: none;
	margin-left: 10px;
	font-size: 14px;
}

.drooft-consent a:hover {
	text-decoration: underline;
}

.drooft-consent-choices {
	width: 100%;
	display: grid;
	justify-content: center;
	justify-items: start;
	gap: 10px;
	margin-top: 6px;
	padding-top: 12px;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.drooft-consent-choices[hidden],
.drooft-consent button[hidden] {
	display: none;
}

.drooft-consent-choice {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
}

.drooft-consent-choice span {
	text-align: left;
}

.drooft-consent-choices [data-consent-save] {
	justify-self: center;
}

.drooft-consent-choice input {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	cursor: pointer;
}