/* VARIABLES */
@font-face {
	font-family: jubilee-font;
	src: url("/assets/fonts/TIPOGRAFIARAMIS-RAMS.OTF") format("opentype");
}


:root {
	--clmc-bg-primary: #000;
	--clmc-bg-secondary: #0d0d0d;
	--clmc-bg-tertiary: #141414;
	--clmc-bg-quaternary: #1c1c1c;
	--clmc-bg-color-info: #0288d1;
	--clmc-bg-color-success: #2e7d32;
	--clmc-bg-color-error: #d32f2f;
	--clmc-bg-color-warning: #ed6c02;
	--clmc-color-primary: #ffffff;
	--clmc-color-secondary: #FFFFFF7F;
	--clmc-color-tertiary: #ba7829;
	--clmc-color-quaternary: #6e6e6e;
	--clmc-text-xsmall: 12px;
	--clmc-text-small: 14px;
	--clmc-text-medium: 16px;
	--clmc-text-large: 24px;
	--clmc-text-xlarge: 32px;
	--clmc-padding-xsmall: 4px;
	--clmc-padding-small: 8px;
	--clmc-padding-medium: 16px;
	--clmc-padding-large: 32px;
	--clmc-padding-xlarge: 64px;
	--clmc-margin-xsmall: 4px;
	--clmc-margin-small: 8px;
	--clmc-margin-medium: 16px;
	--clmc-margin-large: 32px;
	--clmc-margin-xlarge: 64px;
	--clmc-font: jubilee-font !important;
	--clmc-border-radius-small: 4px;
	--clmc-border-radius-large: 8px;
	--clmc-border-radius-xlarge: 20px;
	--clmc-page-width: 90%;
	--clmc-header-height: 120px;
	--clmc-btn-color-primary: #ba7829;
	--clmc-btn-color-primary-hover: #ba7829;
	--clmc-btn-color-secondary: #1e1e1e;
	--clmc-btn-color-secondary-hover: #1e1e1e;
	--clmc-btn-color-tertiary: #ffffff;
	--clmc-btn-color-tertiary-hover: #ffffff;
}

/* TOP DISMISSIBLE RIBBON */
.clmc-top-ribbon {
	display: none !important;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	min-height: 36px;
	height: auto;
	background-color: #ba7829;
	color: #ffffff;
	z-index: 1300;
	/* Higher than MUI AppBar */
	padding: 8px 40px;
	box-sizing: border-box;
	border-bottom: 1px solid rgba(255, 255, 255, 0.15);
	font-family: var(--clmc-font), sans-serif;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.clmc-top-ribbon-text {
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	letter-spacing: 0.5px;
	text-transform: uppercase;
}

.clmc-top-ribbon-close {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: none;
	color: #ffffff;
	cursor: pointer;
	opacity: 0.8;
	transition: opacity 0.2s ease, transform 0.2s ease;
	padding: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.clmc-top-ribbon-close:hover {
	opacity: 1;
	transform: translateY(-50%) scale(1.1);
}

/* Header & Content adjustments when Ribbon is active */
.clmc-appBar {
	transition: top 0.3s ease, height 0.3s ease, max-height 0.3s ease !important;
}

.clmc-page-content {
	transition: padding-top 0.3s ease !important;
}

.clmc-app.clmc-has-ribbon .clmc-page-content {
	padding-top: calc(var(--clmc-header-height) + var(--ribbon-height, 0px)) !important;
}

.clmc-app.clmc-has-ribbon .clmc-appBar {
	top: var(--ribbon-height, 0px) !important;
}

/* OPTIMOVE WEB PUSH PROMPTS */
/*
 * The Optimove SDK appends these fixed-position containers directly to body.
 * Keep them above the Jubilee header (MUI AppBar) and the dismissible ribbon,
 * while allowing full-screen game overlays to remain on top.
 */
.kumulos-prompt.kumulos-alert-container,
.kumulos-prompt.kumulos-channel-dialog-container,
.kumulos-alert-container,
.kumulos-channel-dialog-container {
	z-index: 1400 !important;
}