:root{
	--promo-main-color: #15366f;
	--promo-text-in-main-color: white;
	--promo-light-main-color: #e7edf6;
	--promo-page-bg: #f9f9f9;
}

/* PAG IN GENERALE */
@media screen and (min-width: 768px) {
	#promo-ssr-attive-01-container{
		width: 75vw;
		margin: auto;
		background-color: var(--promo-page-bg);
	}	
}

/* BREADCRUMB FORSE-TEMPORANEO */
#promo-breadcrumb {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 1rem;
	margin: 1rem
}

#promo-ssr-titoletto {
	margin-left: 1rem;
}

/* FILTRO SUPERIORE */
#cg-filtro-promo-ssr {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 1rem;
	margin: 1rem;
}
.cg-filtro-promo-ssr{
	padding: .5rem 1rem;
	border-radius: 20px;
	box-shadow: 0 2px 4px lightgrey;
	font-weight: bold;
}
.cg-filtro-promo-ssr a{
	text-decoration: none;
	color: var(--promo-main-color)
}
.cg-filtro-promo-ssr.enlightened{
	background-color: var(--promo-main-color);
}
.cg-filtro-promo-ssr.enlightened a{
	color: var(--promo-text-in-main-color)
}


/* PROMO-LIST */
.promo-card{
	margin: 1rem;
	border-radius: 15px;
	box-shadow: 0 2px 5px lightgrey;
}
.promo-label-badges{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: .5rem;
}
.promo-label-badge, .promo-last-badge{
	padding: .25rem .5rem;
	white-space: nowrap;
	border-radius: 10px;
	font-size: 80%;
}
.promo-last-badge{
	border: 1px solid var(--promo-main-color);
	background-color: lightgrey;
}
.promo-card-image img{
	max-width: 100%;
	border-top-left-radius: 15px;
	border-top-right-radius: 15px;
}
.promo-text-content{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	gap: .5rem;
	padding: 1rem;
}
.promo-link {
	text-decoration: none;
	color: var(--promo-main-color);
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: .5rem;
	font-weight: bold;
}
.promo-expiry{
	padding: .25rem 1rem;
	background-color: var(--promo-light-main-color);
	color: var(--promo-main-color);
	font-size: 90%;
	font-weight: bold;
	border-radius: 20px;
}
@media screen and (min-width: 768px) {
	#cg-promo-ssr-cards{
		display: grid;
		grid-template-columns: repeat(4, 1fr);
	}
}

/* PARTE BONUS ATTIVI */
#promo-unlogged-active-box{
	padding: 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
}
#promo-unlogged-active-text-title{
	color: var(--promo-main-color);
}
#promo-unlogged-active-text-button{
	background-color: var(--promo-main-color);
	color: var(--promo-text-in-main-color);
	padding: 1rem 2rem;
	border-radius: 20px;
}
#promo-unlogged-active-img-container img {
	max-height: 200px;
}


/*PAGINATION*/

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin: 20px 0;
}

.pagination-item {
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--promo-main-color);
    border-radius: 999px;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.2s ease;
    background: white;
}

.pagination-item:hover:not(.disabled):not(.active) {
    background-color: #f1f5f9;
    border-color: #cbd5e1;
}

.pagination-item.active {
    background-color: var(--promo-main-color);
    color: var(--promo-text-in-main-color);
}

.pagination-item.disabled {
    color: #cbd5e1;
    cursor: not-allowed;
}

.pagination-item.nav {
    padding: 0 8px;
    font-weight: 600;
}

.pagination-info {
    text-align: center;
    color: #64748b;
    font-size: 14px;
    margin-bottom: 15px;
}

/* Bottom buttons */
#promo-mini-pulsantiera-inferiore{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 1rem;
	gap: 1rem;
}
.promo-pulsante-inferiore {
	padding: 1rem;
	box-shadow: 0px 1px 4px lightgrey;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 1rem;
	color: var(--promo-main-color);
    flex-basis: 50%;
    border-radius: 20px;
}