/***********************************************************************************************************************************/
/************************ 							/!\	AVANT D'EDITER /!\									************************/
/************************ 									LIRE					   						************************/
/************************ 							www.dev.equideow.com/doc								************************/
/************************ 						        	  ET											************************/
/************************ 			dev.owlient.eu/wiki/index.php/Guide_Int%C3%A9gration_Equideow			************************/
/***********************************************************************************************************************************/

/***********************************************************************************************************************************
########   #######  ########  ##     ## ########  ##     ## #### ######## ##      ##
##     ## ##     ## ##     ## ##     ## ##     ## ##     ##  ##  ##       ##  ##  ##
##     ## ##     ## ##     ## ##     ## ##     ## ##     ##  ##  ##       ##  ##  ##
########  ##     ## ########  ##     ## ########  ##     ##  ##  ######   ##  ##  ##
##        ##     ## ##        ##     ## ##         ##   ##   ##  ##       ##  ##  ##
##        ##     ## ##        ##     ## ##          ## ##    ##  ##       ##  ##  ##
##         #######  ##         #######  ##           ###    #### ########  ###  ###
***********************************************************************************************************************************/

.popupview{
	animation: showPopup .25s;
	display: none;
	background: #FDFFF0;
	border-radius: 8px;
	box-shadow: 0 0 100px #000;
}
.popupview:not(.popupview--strut)::before{
	background-color: #F2EFCF;
	background-size: cover; /* for $attributes['background'] */
	background-position: center -100px; /* for $attributes['background'] */
	border-radius: 8px 8px 0 0;
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 66%, 0 100%);
	clip-path: polygon(0 0, 100% 0, 100% 66%, 0 100%);
	content: "";
	display: block;
	height: 100px;
	position: absolute;
	width: 100%;
	z-index: 0;
}

/*** POPUPVIEW IMMERSIVE **********************************************************************************************************
***********************************************************************************************************************************/

.popupview--immersive{
	background: none;
	box-shadow: none;
	animation: showPopupImmersive .25s;
	transform: translateY(-180px);
}
.popupview--immersive .popupview__close{
	background: none;
	position: fixed;
	right: 0;
	top: 0;
}
.popupview--immersive .popupview__close svg{
	fill: #fff;
	height: 32px;
	width: 32px;
}
.popupview--immersive .popupview__close:hover svg {
	fill: #7dd2fe;
}
body#global .popupview--immersive .popupview__close:hover{
	filter: none;
	box-shadow: none;
}
.popupview--immersive a.stickout:hover:not(.stickout--checked):not(.js-stickout--selectable):not(.js-stickout--selected)::before,
.popupview--immersive button.stickout:hover:not(.stickout--checked):not(.js-stickout--selectable):not(.js-stickout--selected)::before {
	box-shadow: 0 0 30px 0 rgba(255, 255, 255, .7);
}
#background.js-background--blurred{
	background: rgba(0, 0, 0, .5);
	backdrop-filter: blur(10px);
}
@keyframes showPopupImmersive {
	0% {
		opacity: 0;
	}
	50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/*** POPUPVIEW__TITLE *************************************************************************************************************
***********************************************************************************************************************************/

.popupview__title,
.popupview__content{
	text-align: center;
}
.popupview__title{
	padding: 0;
	cursor: default;
	margin: 0 0 10px;
}

/*** POPUP : CONTENT **************************************************************************************************************
***********************************************************************************************************************************/

.popupview__content{
	font-size: 16px;
}
.popupview-form p,
.popupview__content p:not(.ui-listview-content){
	margin: 0 0 10px;
	line-height: 1.5;
}
.popupview__content__ekdow{
	display: inline-block;
	padding: 0 10px;
	height: 86px;
	vertical-align: top;
}

/*** POPUP : FORM *****************************************************************************************************************
***********************************************************************************************************************************/

.popupview-form{
	padding: 0 10px 10px;
}

/*** POPUP : SIZES ****************************************************************************************************************
***********************************************************************************************************************************/

.popupview--s{
	width: 430px;
}
.popupview--m{
	width: 630px;
}
.popupview--l{
	width: 830px;
}
.popupview--xl{
	width: 1170px;
}

/*** POPUP : BUTTONS **************************************************************************************************************
***********************************************************************************************************************************/

.popupview [class^=popupview-button]{
	border-width: 0;
	border-color: #ae9c8d;
	width: 100%;
}
.popupview [class^=popupview-button] [class^=button-text]{
	height: 42px;
}
.popupview .popupview-button-full{
    border-radius: 0 0 8px 8px;
}
.popupview .first > .popupview-button-half{
	border-radius: 0 0 0 8px;
}
.popupview .last > .popupview-button-half{
	border-radius: 0 0 8px 0;
}

/*** POPUPVIEW__CLOSE *************************************************************************************************************
***********************************************************************************************************************************/
.popupview__close{
	animation: showPopup .25s 1 .25s;
	animation-fill-mode: forwards;
	width: 24px;
	height: 24px;
	padding: 6px;
	border-radius: 50%;
	background: #DCD4BC;
	position: absolute;
	right: -12px;
	top: -12px;	
	transform: scale(0);
	z-index: 1;
}
.popupview__close svg{
	width: 12px;
	height: 12px;
	fill: #AD5B50;
}
.popupview__close:hover{
	box-shadow: 0 6px 20px 0 rgba(0,0,0,0.3);
}

/*** POPUPVIEW__BOTTOM ************************************************************************************************************
***********************************************************************************************************************************/

.popupview__bottom{
	text-align: center;
	padding-bottom: 25px;
}

/*** POPUPVIEW__IMAGE *************************************************************************************************************
***********************************************************************************************************************************/

.popupview__image{
	position: relative;
	text-align: center;
}
.popupview__image .horsesprite,
.popupview:not(.popupview--firstprize) .popupview__image__asset{
	width: 192px;
	height: 192px;
	margin-top: -50px;
}
.popupview__image .horsesprite{
	background-size: 192px;
}
/*Class spÊcifique pour les cartes collections*/
.popupview:not(.popupview--firstprize).popupview--giftcard .popupview__image__asset{
	width: auto
}

/*** MODIFIER : STRUT *************************************************************************************************************
***********************************************************************************************************************************/

.popupview--strut .popupview__title{
	padding-top: 10px;
}
.popupview--strut .popupview__content{
	min-height: 50px;
}

/*** MODIFIER : IMPORTANT *********************************************************************************************************
***********************************************************************************************************************************/

.popupview--important::before {
    background: url(/media/equideo/image/components/popups/popupview-important.jpg) no-repeat center -500px;
}
.popupview--important .popupview__image{
	z-index: 1;
}
.popupview--important .popupview__image::after,
.popupview--important .popupview__image::before{
	content: "";
	display: block;
}
.popupview--important .popupview__image::before{
	background: radial-gradient(circle at center, #eec213 0, transparent 75%);
	height: 192px;
	left: calc(50% - 96px);
	pointer-events: none;
	position: absolute;
	top: -50px;
	width: 192px;
	z-index: -1;
}
.popupview--important .popupview__image::after{
	background: url(/media/equideo/image/animations/animate-sparkles.png) no-repeat right top;
	position: absolute;
	z-index: 1;
	height: 256px;
	left: calc(50% - 128px);
	transform: scale(.75);
	top: -82px;
	width: 256px;
}
body.animation .popupview--important .popupview__image::before{
	animation-name: spinSuccessXL;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in-out;
	animation-direction: alternate;
	animation-delay: .5s;
}
body.animation .popupview--important .popupview__image::after{
	animation-name: animateSparkes;
	animation-duration: 2s;
	animation-iteration-count: infinite;
	animation-timing-function: steps(32);	
}

/*** ANIMATION KEYFRAMES **********************************************************************************************************
***********************************************************************************************************************************/

@keyframes showPopup{
	0%{
		transform: scale3d(0.3, 0.3, 0.3);
		opacity: 0;
	}
	100%{
		transform: scale(1);
		opacity: 1;
	}
}


/***********************************************************************************************************************************
########  ######## ##      ##    ###    ########  ########        ###    ##    ## #### ##     ##  ######  
##     ## ##       ##  ##  ##   ## ##   ##     ## ##     ##      ## ##   ###   ##  ##  ###   ### ##    ## 
##     ## ##       ##  ##  ##  ##   ##  ##     ## ##     ##     ##   ##  ####  ##  ##  #### #### ##       
########  ######   ##  ##  ## ##     ## ########  ##     ##    ##     ## ## ## ##  ##  ## ### ##  ######  
##   ##   ##       ##  ##  ## ######### ##   ##   ##     ##    ######### ##  ####  ##  ##     ##       ## 
##    ##  ##       ##  ##  ## ##     ## ##    ##  ##     ##    ##     ## ##   ###  ##  ##     ## ##    ## 
##     ## ########  ###  ###  ##     ## ##     ## ########     ##     ## ##    ## #### ##     ##  ######  
/**********************************************************************************************************************************/

/*** IMAGE__ASSET ****************************************************************************************************************/

.popupview--gift .popupview__image__asset,
.popupview--firstprize .popupview__image__asset{
	animation: popupviewRewardImage .4s 1 ease;
	transform-origin: bottom center;
}
@keyframes popupviewRewardImage{
	0%, 50% {
		opacity: 0;
		transform: scale3d(0.3, 0.3, 0.3);
	}
	100% {
		opacity: 1;
		transform: scale3d(1,1,1);
	}
}

/*** TITLE ***********************************************************************************************************************/

.popupview--gift .popupview__title,
.popupview--firstprize .popupview__title{
	animation: popupviewRewardTitle .8s 1 ease;
}
@keyframes popupviewRewardTitle{
	0%, 50% {
		opacity: 0;
		transform: scale3d(0.3, 0.3, 0.3);
	}
	100% {
		opacity: 1;
		transform: scale3d(1,1,1);
	}
}

/*** CONTENT **********************************************************************************************************************/

.popupview--gift .popupview__content,
.popupview--firstprize .popupview__content{
	animation: popupviewRewardContent 1.5s 1 ease;
}
@keyframes popupviewRewardContent{
	0%, 50% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

/***********************************************************************************************************************************
######## #### ########   ######  ########    ########  ########  #### ######## ######## 
##        ##  ##     ## ##    ##    ##       ##     ## ##     ##  ##       ##  ##       
##        ##  ##     ## ##          ##       ##     ## ##     ##  ##      ##   ##       
######    ##  ########   ######     ##       ########  ########   ##     ##    ######   
##        ##  ##   ##         ##    ##       ##        ##   ##    ##    ##     ##       
##        ##  ##    ##  ##    ##    ##       ##        ##    ##   ##   ##      ##       
##       #### ##     ##  ######     ##       ##        ##     ## #### ######## ######## 
/**********************************************************************************************************************************/

.popupview--firstprize::before {
    background: url(/media/equideo/image/components/popups/popupview-first-prize.jpg) no-repeat center -500px;
    clip-path: none;
    height: 170px;
}
.popupview--firstprize::after {
	background: #FDFFF0;
	clip-path: ellipse(355px 30px at 315px 30px);
	content: "";
	display: block;
	height: 170px;
	position: absolute;
	top: 150px;
	width: 100%;
	z-index: -1;
}

/*** TITLE *************************************************************************************************************************/

.popupview--firstprize .popupview__title::after{
	content: "";
	display: block;
	background: url(/media/equideo/image/components/popups/popupview-ornements.png) no-repeat right top;
	width: 336px;
	height: 25px;
	margin: 0 auto;
}

/*** IMAGE ************************************************************************************************************************/
.popupview--firstprize .popupview__image::after{
	animation: animateSparkes 2s infinite steps(32);
	background: url(/media/equideo/image/animations/animate-sparkles.png) no-repeat right top;
	content: "";
	display: block;
	height: 256px;
	left: calc(50% - 128px);
	position: absolute;
	top: -50px;
	width: 256px;
	z-index: 1;
}

/*** IMAGE__ASSET ****************************************************************************************************************/

.popupview--firstprize .popupview__image__asset{
	width: 256px;
	height: 256px;
	margin-top: -50px;
}

/***********************************************************************************************************************************
 ######   #### ######## ######## 
##    ##   ##  ##          ##    
##         ##  ##          ##    
##   ####  ##  ######      ##    
##    ##   ##  ##          ##    
##    ##   ##  ##          ##    
 ######   #### ##          ##    
/**********************************************************************************************************************************/

.popupview--gift::before {
    background: url(/media/equideo/image/components/popups/popupview-gift.jpg) no-repeat center -500px;
    clip-path: none;
    height: 125px;
}

/*** IMAGE ***********************************************************************************************************************/

.popupview--gift .popupview__image::after{
	animation: animateSparkes 2s infinite steps(32);
	background: url(/media/equideo/image/animations/animate-sparkles.png) no-repeat right top;
	content: "";
	display: block;
	height: 256px;
	left: calc(50% - 128px);
	position: absolute;
	top: -82px;
	transform: scale(.75);
	width: 256px;
	z-index: 1;
}
/*** TITLE ***********************************************************************************************************************/

.popupview--gift .popupview__title::after{
	content: "";
	display: block;
	background: url(/media/equideo/image/components/popups/popupview-ornements.png) no-repeat right top;
	width: 336px;
	height: 25px;
	margin: 10px auto 0;
}

/***********************************************************************************************************************************
##     ##  #######  ########   ######  ########  ######  
##     ## ##     ## ##     ## ##    ## ##       ##    ## 
##     ## ##     ## ##     ## ##       ##       ##       
######### ##     ## ########   ######  ######    ######  
##     ## ##     ## ##   ##         ## ##             ## 
##     ## ##     ## ##    ##  ##    ## ##       ##    ## 
##     ##  #######  ##     ##  ######  ########  ######  
/**********************************************************************************************************************************/

.popupview--horses::before{
	display: none;
}


/***********************************************************************************************************************************
########     ###    #### ##       ##    ## ########    ###    ########   ######  
##     ##   ## ##    ##  ##        ##  ##     ##      ## ##   ##     ## ##    ## 
##     ##  ##   ##   ##  ##         ####      ##     ##   ##  ##     ## ##       
##     ## ##     ##  ##  ##          ##       ##    ##     ## ########   ######  
##     ## #########  ##  ##          ##       ##    ######### ##     ##       ## 
##     ## ##     ##  ##  ##          ##       ##    ##     ## ##     ## ##    ## 
########  ##     ## #### ########    ##       ##    ##     ## ########   ######
/**********************************************************************************************************************************/

/*** NAV **************************************************************************************************************************/

.popupview__content__nav{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.body--ltr .popupview__content__nav{
	left: -50px;
}
.body--rtl .popupview__content__nav{
	right: -50px;
}

/*** NAVLINK **********************************************************************************************************************/

.js-navlink{
	display: block;
	transition: background .25s;
}
.body--ltr .js-navlink{
	background: linear-gradient(to right, #F2EFCF 0, #F2EFCF 75%, #ceccb1 100%);
	border-radius: 8px 0 0 8px;
	padding: 28px 12px 28px 14px;
}
.body--rtl .js-navlink{
	background: linear-gradient(to left, #F2EFCF 0, #F2EFCF 75%, #ceccb1 100%);
	border-radius: 0 8px 8px 0;
	padding: 28px 14px 28px 12px;
}
.body--ltr .js-navlink:hover{
	background: linear-gradient(to right, #FDFFF0 0, #FDFFF0 75%, #ceccb1 100%);
}
.body--rtl .js-navlink:hover{
	background: linear-gradient(to left, #FDFFF0 0, #FDFFF0 75%, #ceccb1 100%);
}

/*** NAVLINK SVG ******************************************************************************************************************/

.js-navlink .svg{
	fill: #AD5B50;
}
.js-navlink--active.js-navlink--active{
	background: #FDFFF0;
	cursor: default;
	pointer-events: none;
}
.js-navlink--active .svg{
	fill: #82685B;
}

/*** LOYALTYGAUGE *****************************************************************************************************************/

.loyaltygauge__cell{
	padding: 0 15px 10px;
	position: relative;
	vertical-align: middle;
}
.loyaltygauge__cell::after,
.loyaltygauge__cell::before{
	background: #F2EFCF;
	display: block;
	height: 6px;
	position: absolute;
	top: 30px;
	width: 15px;
}
.body--ltr .loyaltygauge__cell:not(.last)::after,
.body--rtl .loyaltygauge__cell:not(.first)::after{
	content: "";
	right: 0;
}
.body--ltr .loyaltygauge__cell:not(.first)::before,
.body--rtl .loyaltygauge__cell:not(.last)::before{
	content: "";
	left: 0;
}

/*** LOYALTYGAUGE__CELL--CUSTOM ***************************************************************************************************/

.loyaltygauge__cell--custom::after,
.loyaltygauge__cell--custom::before {
    top: 30px;
    width: 15px;
}
.loyaltygauge__cell--custom .pix{
	vertical-align: top;
	margin-bottom: 30px;
}
.loyaltygauge__cell--custom .pix--customimg .pix__content:not(.svg) {
    width: 32px;
    height: auto;
    padding: 10px 8px 8px 10px;
}

/*** LOYALTYGAUGE__CELL__DAY *****************************************************************************************************/

.loyaltygauge__cell__day{
	bottom: 0;
	display: block;
	font-size: 12px;
	left: 0;
	line-height: 16px;
	position: absolute;
	right: 0;
	text-transform: uppercase;
}

/*** LOYALTYGAUGE__CELL__MORE *****************************************************************************************************/

.loyaltygauge__cell__more {
	background-color: #DCD4BC;
	border-radius: 50%;
	box-sizing: border-box;
	display: block;
	height: 24px;
	left: 67px;
	padding: 3px;
	position: absolute;
	top: 19px;
	width: 24px;
	z-index: 1;
}
.loyaltygauge__cell__more .svg--xs,
.loyaltygauge__cell__more .svg--xs svg {
    line-height: 12px;
}

/*** PANEL ************************************************************************************************************************/

.js-popupview__content__panel{
	display: none;
}
.js-popupview__content__panel--visible{
	display: block;
}