#cookie-banner, #cookie-modal, .cookie-modal-overlay { 
	font-family: var(--_typography---font--body-font); 
}

#cookie-banner {
	position:fixed;
	top: auto;
    left: 10%;
    right: 10%;
    bottom: var(--_sizes---spacing--2x);
	z-index: 9998;
	opacity:0;
	transform: translateY(12px);
	transition: opacity 3s cubic-bezier(.215, .61, .355, 1), transform 3s cubic-bezier(.215, .61, .355, 1);
}

#cookie-banner.visible {
	opacity:1;
	transform: translateY(0);
}

.cookie-banner-inner {
  max-width: 1120px;
  margin: 0 auto;
  display:flex;
  gap:24px;
  align-items: center;
  justify-content: space-between;
  background-color: var(--_colors---core-neutral-color--neutral-primary);
  background-image: linear-gradient(180deg, var(--_colors---core-neutral-color--neutral-primary), var(--_colors---current-color--current-a05));
  color: var(--ms-text);
  border: 2px solid var(--_colors---current-color--current-a05);
  border-radius: var(--_sizes---button--button-radius);
  padding: 18px 20px;
  backdrop-filter: blur(6px);
}

.cookie-banner-copy {
	display:grid;
	gap: var(--_sizes---spacing--1x);
}

.cookie-title {
	font-family: var(--_typography---font--heading-font);
	font-size: var(--_typography---h4-heading--h4-size);
    line-height: var(--_typography---h4-heading--h4-line-height);
	letter-spacing: var(--_typography---h4-heading--h4-letter-spacing);
	color: var(--_colors---text-color--text-primary);
	margin:0;
	font-weight:700;
}

.cookie-text {
	font-family: var(--_typography---font--body-font);
    font-size: var(--_typography---text-lg--lg-text-size);
    line-height: var(--_typography---text-lg--lg-text-line-height);
	letter-spacing: var(--_typography---text-lg--lg-text-letter-spacing);
	text-wrap: balance;
	margin:0;
	color: var(--_colors---core-color-tint--neutral-inverse-a80);
}

.cookie-link-underline {
	font-family: var(--_typography---font--heading-font);
	display: inline;
	color: var(--_colors---core-accent-color--accent-tertiary-hover);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-color: var(--_colors---core-accent-color--accent-tertiary-hover);
	text-underline-offset: 2px;
	transition: filter .3s cubic-bezier(.215, .61, .355, 1), color .3s cubic-bezier(.215, .61, .355, 1);
}

.cookie-link-underline:hover {
	color: var(--_colors---core-accent-color--accent-tertiary-hover);
	filter: saturate(94%) brightness(94%);
}

.cookie-actions {
	display:grid;
	gap:10px;
	margin-top: 14px;
	width: 50%;
    align-self: center;
}

#cookie-banner .cookie-actions {
	grid-template-areas:
        "btn-dec btn-mng"
		"btn-acp btn-acp";
}

#banner-accept, #modal-accept {
	white-space: nowrap;
	grid-area: btn-acp;
}

#banner-manage, #modal-save {
	white-space: nowrap;
	grid-area: btn-mng;
}

#banner-decline, #modal-decline {
	white-space: nowrap;
	grid-area: btn-dec;
}

#modal-accept {
	background-color: var(--_colors---core-accent-color--accent-tertiary-hover);
    background-image: none;
}

#banner-manage:hover, #banner-decline:hover, #modal-save:hover, #modal-decline:hover {
	color: var(--_colors---core-accent-color--accent-primary-hover);
}

#cookie-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	opacity:0;
	pointer-events:none;
	transition: opacity .3s cubic-bezier(.215, .61, .355, 1);
}

#cookie-modal.visible {
	opacity:1;
	pointer-events:auto;
}

#cookie-form .cookie-actions {
	grid-template-areas:
        "btn-dec btn-mng btn-acp";
	width: 80%;
}

.cookie-modal-overlay {
	position:absolute;
	inset:0;
	background: rgba(0,0,0,.6);
	backdrop-filter: blur(4px);
}

.cookie-modal-content {
  position:absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%,-46%) scale(.98);
  width: min(1180px, calc(100vw - 32px));
  max-height: min(82vh, 840px);
  overflow:auto;
  background-color: var(--_colors---core-neutral-color--neutral-primary);
  background-image: linear-gradient(180deg, var(--_colors---core-neutral-color--neutral-primary), var(--_colors---current-color--current-a05));
  border: 2px solid var(--_colors---current-color--current-a05);
  border-radius: var(--_sizes---button--button-radius);
  padding: var(--_sizes---spacing--2x) var(--_sizes---spacing--3x);
  transition: transform .3s cubic-bezier(.215, .61, .355, 1);
}

#cookie-modal.visible .cookie-modal-content {
	transform: translate(-50%,-50%) scale(1);
}

.cookie-modal-header {
	display:flex;
	align-items:center;
	justify-content: space-between;
	gap:12px;
	padding: 4px 2px 10px;
}

.cookie-subtext {
	color: var(--_colors---core-color-tint--accent-tertiary-a50);
}

.modal-close {
  position: absolute;
  top: var(--_sizes---spacing--1x);
  right: var(--_sizes---spacing--0-5x);
  left: auto;
  bottom: auto;
  width: 40px;
  border-radius: 10px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--_colors---core-color-tint--accent-tertiary-a60);
  font-size: 22px;
  line-height: 1;
  cursor:pointer;

  transition: color .3s cubic-bezier(.215, .61, .355, 1);
}

.modal-close:hover {
	color: var(--_colors---core-color-tint--accent-tertiary-a80);
}

.modal-close:active {
    color: var(--_colors---core-accent-color--accent-tertiary-hover);
}

.cookie-description {
	margin: 0 0 14px;
	opacity:.95;
}

.cookie-hr {
	border:0;
	height:1px;
	background: #e4cf9f;
	margin: 10px 0 16px;
}

.cookie-form {
	display: flex;
	flex-direction: column;
	gap: var(--_sizes---spacing--1x);
	padding: var(--_sizes---spacing--1x);
	background-color: var(--_colors---core-color-tint--neutral-inverse-a10);
	border-radius: var(--_sizes---radius--lg-radius);
}

.checkbox-card {
	display: flex;
    align-items: center;
    column-gap: var(--_sizes---spacing--1-5x);
    margin-bottom: var(--_sizes---spacing--0-5x);
}

.checkbox-card input, .checkbox-card .checkmark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--_sizes---spacing--1x);
    height: var(--_sizes---spacing--1x);
    aspect-ratio: 1 / 1;
    flex: 0 0 var(--_sizes---spacing--1x);
}

.checkbox-card .checkmark {
	position: absolute;
}

.checkbox-card .meta {
	display: flex;
    flex-direction: column;
	row-gap: var(--_sizes---spacing--0-5x);
}

.checkbox-card .meta .title {
	font-family: var(--_typography---font--heading-font);
    font-size: var(--_typography---h5-heading--h5-size);
    line-height: var(--_typography---h4-heading--h4-line-height);
    font-weight: var(--_typography---h4-heading--h4-weight);
    letter-spacing: var(--_typography---h4-heading--h4-letter-spacing);
	color: var(--_colors---core-color-tint--neutral-inverse-a80);
}

.checkbox-card .meta .desc {
	font-family: var(--_typography---font--body-font);
    font-size: var(--_typography---text--text-size);
    line-height: var(--_typography---text--text-line-height);
	font-weight: var(--_typography---base-typography--base-font-weight);
    letter-spacing: var(--_typography---text--text-letter-spacing);
	color: var(--_colors---core-color-tint--accent-tertiary-a60);
}

@media screen and (max-width: 991px) {
	.cookie-banner-inner {
		flex-direction: column;
	}

	#cookie-modal-title, .cookie-title {
		font-size: var(--_typography---h2-heading--h2-size);
	}

	.cookie-actions {
		width: 100%;
	}

	#banner-accept, #modal-accept,
	#banner-manage, #modal-save,
	#banner-decline, #modal-decline {
		white-space: break-spaces;
	}
}

@media screen and (max-width: 767px) {
	#cookie-banner .cookie-actions, #cookie-form .cookie-actions {
		grid-template-areas:
			"btn-dec"
			"btn-mng"
			"btn-acp";
	}
	
	#cookie-form .cookie-actions {
		width: 100%;
	}
}

@media screen and (max-width: 479px) {
	#cookie-banner {
		left: 4%;
		right: 4%;
		bottom: var(--_sizes---spacing--2x);
	}

	.cookie-modal-content {
		padding: var(--_sizes---spacing--2x) var(--_sizes---spacing--1x);
	}

	#cookie-modal-title, .cookie-title {
		font-size: var(--_typography---h1-heading--h1-size);
	}

	.cookie-text, .cookie-link-underline {
		font-size: var(--_typography---text--text-size);
	}
}