/* 1.8.385 — Cookie Notice banner in IDX brand: white on navy, yellow links, navy-on-yellow "Got it".
   Theme CSS only (the plugin writes inline background colours, hence !important). */
#cookie-notice {
	font-family: var(--font-sans, "Montserrat", system-ui, sans-serif) !important;
	font-size: .84rem; line-height: 1.45; letter-spacing: 0;
	background: #0f143a !important;
	border-top: 3px solid #f3c91a;
	box-shadow: 0 -10px 28px -16px rgba(0, 0, 0, .55);
}
#cookie-notice .cookie-notice-container {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px;
	padding: 10px 52px 10px 18px; color: #fff !important; text-align: left;
}
#cookie-notice.cookie-notice-hidden .cookie-notice-container { display: none; }
#cookie-notice .cn-text-container { margin: 0; color: #fff; font-size: inherit; }
#cookie-notice .cn-text-container a { color: #f3c91a; text-decoration: underline; text-underline-offset: 2px; }
#cookie-notice .cn-buttons-container { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
#cookie-notice .cn-button:not(.cn-button-custom) {
	margin: 0; min-height: 34px; padding: .45rem 1rem;
	border: 1.5px solid #f3c91a; border-radius: 8px;
	font-family: var(--font-head) !important; font-size: .78rem; font-weight: 600; letter-spacing: .03em; line-height: 1.1; text-transform: none;
	box-shadow: none; transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
#cookie-notice #cn-accept-cookie { background: #f3c91a !important; color: #0f143a !important; font-weight: 800; }
#cookie-notice #cn-accept-cookie:hover,
#cookie-notice #cn-accept-cookie:focus-visible { background: #0f143a !important; color: #f3c91a !important; border-color: #f3c91a; }
/* "Privacy Policy" is a button in this plugin: show it as a yellow text link */
#cookie-notice #cn-more-info,
#cookie-notice #cn-refuse-cookie {
	background: transparent !important; color: #f3c91a !important; border-color: transparent;
	padding-left: .4rem; padding-right: .4rem; text-decoration: underline; text-underline-offset: 3px;
}
#cookie-notice #cn-more-info:hover,
#cookie-notice #cn-more-info:focus-visible { color: #fff !important; }
#cookie-notice .cn-button:focus-visible,
#cookie-notice .cn-close-icon:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
#cookie-notice .cn-close-icon { right: 14px; opacity: .85; }
#cookie-notice .cn-close-icon::before,
#cookie-notice .cn-close-icon::after { background-color: #fff; }
#cookie-notice .cn-close-icon:hover { opacity: 1; }
#cookie-notice .cn-close-icon:hover::before,
#cookie-notice .cn-close-icon:hover::after { background-color: #f3c91a; }

/* keep the back-to-top button clear of the banner while it shows */
body:has(#cookie-notice.cookie-notice-visible) .back-to-top { bottom: calc(1.25rem + var(--idx-cookie-h, 60px)); }

/* Configurator pages: the designer + product panel are one viewport tall, so shrink them by the banner
   height while it shows (configurator.css --idxcz-cookie) instead of letting the banner sit on
   Add to Cart / the zoom bar. Below 1024px the page scrolls, so just leave room at the bottom. */
@media (min-width: 1024px) {
	body.idx-configurator:has(#cookie-notice.cookie-notice-visible) { --idxcz-cookie: 60px; }
	body.idx-configurator #cookie-notice .cookie-notice-container { flex-wrap: nowrap; min-height: 57px; padding-top: 8px; padding-bottom: 8px; }
}
@media (max-width: 1023px) {
	body:has(#cookie-notice.cookie-notice-visible) { --idx-cookie-h: 118px; }
	body.idx-configurator:has(#cookie-notice.cookie-notice-visible) #shop-content { padding-bottom: 130px; }
}
@media (max-width: 600px) {
	#cookie-notice { font-size: .8rem; }
	#cookie-notice .cookie-notice-container { justify-content: flex-start; padding: 10px 44px 12px 14px; }
	#cookie-notice .cn-buttons-container { width: 100%; }
	#cookie-notice #cn-accept-cookie { flex: 1 1 auto; min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
	#cookie-notice .cn-button { transition: none; }
}
