@charset "utf-8";

/*
 * World Cup Calendar
 * CCP v4.0.2
 * 2026.06.10
 *
 * Games, Slots products
 *
 * Release Candidate 1
 */

#CustomContentPodContentWrapper
{
    --version: 4.0.3 (2026.06.11);
}

/*
Colours
*/
#CustomContentPodContentWrapper
{
    --system-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --preload-outer: hsla(161, 100%, 58%, 0.25);
    --bet365-green: #29ffbb;
    --bet365-yellow: #ffdf1b;
    --base-text-color: #fff;
    --button-text: #222;
    --button-hover: #fff;
}

/*
Global positioning and sizes
*/
#CustomContentPodContentWrapper
{
    position: relative;
    z-index: 3;
}

.__CCPBody img
{
    display: block;
    margin: 0;
}

/*
Site cascade resets
*/
.__CCPBody h3
{
    max-width: unset;
}

/* .CCP_TopBannerOverride */
div.odtb:has(div.odtb-ImageContainer)
{
    display: none;
}


/*
 ** CCP rules begin **
 */
.__CCPBody
{
    position: relative;
    width: 100%;
    margin: auto;
    overflow: hidden;
    z-index: 1;
}


/* Awesome Banner gradient */
.__CCPBody::after
{
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 40%;
    bottom: 0;
    background: linear-gradient(0deg, #282828 0%, transparent 100%);
    pointer-events: none;
    z-index: 2;
}


/*
Advent calendar
*/

/* Main body */
.CCP_Calendar
{
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #368570;
    contain: paint;
}

.CCP_Calendar > .PerspectiveWrapper
{
    position: absolute;
    transform-style: preserve-3d;
    aspect-ratio: 15 / 12;
    transform: translate(-50%, -50%) rotate3d(1, -.17, .47, 50deg) scale(1.1, 1.3);
    left: 51%;
    top: 39%;
    /* transform: translate(-50%, -50%); */
}

.CCP_Calendar .ContentWrapper
{
    position: relative;
    width: 100%;
    height: 100%;
    background: transparent no-repeat;
    background-size: cover;

    transform-style: preserve-3d;
}


/* Door */
.CCP_Sticker
{
    position: absolute;
    width: 20%;
    height: 25%;
    left: 40%;
    top: 37.5%;
    transform-style: preserve-3d;
}

.CCP_Sticker::after
{
    content: "";
    display: block;
    position: absolute;
    inset: 0 0 0 -35%;
    transform: translateZ(0.1px);
}

.CCP_Sticker .StickerWrapper
{
    position: absolute;
    inset: 0;
	background: transparent no-repeat;
    background-size: auto 100%;
    transform-style: preserve-3d;
    /* pointer-events: none; */
}

.CCP_Sticker .StickerWrapper::before
{
    /* content: ""; */
    position: absolute;
    display: block;
    inset: 0;
    background: transparent var(--sticker-src) no-repeat;
    background-size: auto 100%;
    width: 0%;
    /* width: 100%; */
    /* transition: width var(--duration) steps(var(--steps)); */
}

.CCP_Sticker > .promo-image
{
    /* clip-path: polygon(43% 7%, 64% 7%, 86% 29%, 86% 94%, 21% 94%, 21% 29%); */
}

.CCP_Sticker > .shadow-effect
{
    position: absolute;
    inset: 0;
    filter: blur(3px);
}

.CCP_Sticker > .shadow-effect > div
{
    position: absolute;
    inset: 3%;
}

.CCP_Sticker .shadow-body
{
    background: linear-gradient(90deg, rgba(0,0,0,.7) 40%, rgba(0,0,0,.5) 75%, transparent 100%);
    transform-origin: left;
}

.CCP_Sticker .shadow-edge
{
    background-color: rgba(0, 0, 0, .7);
    opacity: 0;
}


/* Peel-effect vertical */
/*
.CCP_Sticker .sticker-segment
{
    position: absolute;
    transform-style: preserve-3d;
    transform-origin: top;
    transition: transform 1s calc(var(--index) * 150ms) ease-in-out;
    transform: rotateX(20deg);
}

.CCP_Sticker .sticker-segment::before,
.CCP_Sticker .sticker-segment::after
{
	content: "";
	display: block;
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	transform-style: preserve-3d;
}

.CCP_Sticker .sticker-segment::before
{
	background-image: var(--door-front-src);
	transform: translateZ(0px);
	z-index: 1;
}

.CCP_Sticker .sticker-segment::after
{
	background-image: var(--door-front-src);
	transform: translateZ(-0.1px);
}

.CCP_Sticker .sticker-segment.root
{
    inset: 0 0 auto;
    height: var(--fidelity);
}

.CCP_Sticker .sticker-segment.root::before,
.CCP_Sticker .sticker-segment.root::after
{
	background-size: 100% auto;
}

.CCP_Sticker .sticker-segment:not(.root)
{
    inset: 100% 0 auto;
    height: 100%;
}

.CCP_Sticker .sticker-segment:not(.root)::before,
.CCP_Sticker .sticker-segment:not(.root)::after
{
	background-size: 100% var(--scale);
	background-position: 0 var(--placement);
} */


/* Peel-effect horizontal */
.CCP_Sticker .sticker-segment
{
    position: absolute;
    background: transparent var(--sticker-src) no-repeat;
    background-position: var(--face-placement) 0;
    transform-style: preserve-3d;
    transform-origin: left;
    /* transition: transform 1s calc(var(--index) * 150ms) ease-in-out; */
    /* transform: translateX(-1px) rotateY(-30deg); */
    backface-visibility: hidden;
}

/* .CCP_Sticker .sticker-segment::before, */
.CCP_Sticker .sticker-segment::after
{
	content: "";
	display: block;
	position: absolute;
	inset: 0;
	background-repeat: inherit;
	transform-style: preserve-3d;
}

/* .CCP_Sticker .sticker-segment::before
{
	width: 100%;
	background-image: var(--sticker-src);
	z-index: 1;
	opacity: 0;
	display: none;
} */

.CCP_Sticker .sticker-segment::after
{
	width: 100%;
	background-image: var(--sticker-rear-src);
	transform: rotateY(180deg);
	backface-visibility: hidden;
	background-position: var(--rear-placement) 0;
}

.CCP_Sticker .sticker-segment.root
{
    inset: 0 auto 0 0;
    width: var(--fidelity);
    background-size: auto 100%;
}

.CCP_Sticker .sticker-segment.root::before,
.CCP_Sticker .sticker-segment.root::after
{
	background-size: auto 100%;
}

.CCP_Sticker .sticker-segment:not(.root)
{
    inset: 0 auto 0 100%;
    width: 100%;
	background-size: var(--scale) 100%
}

/* .CCP_Sticker .sticker-segment:not(.root)::before
{
	background-size: var(--scale) 100%;
	background-position: inherit;
} */

.CCP_Sticker .sticker-segment:not(.root)::after
{
	/* background-size: var(--scale) 100%; */
	background-size: var(--scale) 100%;
	/* background-position: inherit; */
	/* background-position: var(--rear-placement) 0; */
}


/* .CCP_Sticker.unplaced .StickerWrapper::before
{
    width: 0%;
} */

.CCP_Sticker.unplaced .sticker-segment
{
	/* transform: translateX(-1px) rotateY(-30deg); */
	transform: translateX(-1px) rotateY(var(--roll));
}

.CCP_Sticker.placed > .StickerWrapper
{
    background-image: var(--sticker-src);
}



/* Vignette */
.CCP_Calendar::after
{
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0;
    background: radial-gradient(transparent 70%, #03120d 110%);
    pointer-events: none;
    z-index: 1;
}


/*
 * Awesome banner text replication
 */

.CCP_PromoContent
{
    display: grid;
    position: relative;
    margin: -50px auto 0;
    text-align: center;
    z-index: 2;
    max-width: 600px;
}

.CCP_PromoContent > section
{
    display: flex;
    box-sizing: border-box;
	flex-direction: column;
	grid-row: 1;
    grid-column: 1;
    padding: 0 15px;
}

.CCP_PromoContent h1
{
    max-width: 900px;
    margin: 0 auto 10px;
    font: 800 clamp(32px, 10vw, 50px) FuturaPTWebCondensedExtraBoldOblique;
    line-height: 1;
    text-transform: uppercase;
    color: var(--bet365-green);
}

.CCP_PromoContent h2
{
    margin: 0 auto 40px;
    font: 16px var(--system-font);
    line-height: 24px;
    color: #fff;
    max-width: 700px;
}

.CCP_PromoContent p
{
    margin: 0;
}

.CCP_PromoContent .opted-in-notice
{
    margin: 15px auto 10px;
    padding: 0 1em 0 2em;
    font: 12px var(--system-font);
    line-height: 1.5;
    color: var(--bet365-green);
    background: transparent var(--icon-src) left center no-repeat;
    background-size: auto 100%;
}

.CCP_PodTerms
{
    margin-top: 20px;
    text-align: center;
}

.CCP_PodTerms > p
{
    box-sizing: border-box;
    max-width: 600px;
    margin: 0 auto;
    padding: 0 15px;
    font: 10px var(--system-font);
    line-height: 15px;
    text-align: center;
    color: #ccc;
}


/* Buttons */
.CCP_Button
{
    box-sizing: border-box;
    position: relative;
    min-width: 100px;
    height: 40px;
    margin: 0 auto;
    padding: 0 30px;
    font: 16px var(--system-font);
    font-weight: 700;
    line-height: 40px;
    letter-spacing: -0.58px;
    text-align: center;
    border-radius: 2px;
}

.CCP_Button:not(.error)
{
    display: block;
    color: var(--button-text);
    border: none;
    outline: none;
    cursor: pointer;
    background: #8affab linear-gradient(90deg, #fff 33%, #26ffbe 67%, #8affab) no-repeat;
    background-size: 300% auto;
    background-position: 100% 0;
    transition: background-position .3s cubic-bezier(.45,0,.55,1),color .3s cubic-bezier(.45,0,.55,1);
}

.CCP_Button.error
{
    display: flex;
    justify-content: center;
    align-items: center;
    width: fit-content;
    color: var(--base-text-color);
    background-color: #902;
}

.CCP_Button.throbbing
{
    pointer-events: none;
    text-indent: -999em;
}

.CCP_Button.throbbing::before
{
    content: "";
    box-sizing: border-box;
    display: block;
    position: absolute;
    aspect-ratio: 1;
    height: 26px;
    left: 50%;
    top: 50%;
    border: 3px solid var(--button-text);
    border-bottom-color: transparent;
    border-radius: 100%;
    transform: translate(-50%, -50%);
    animation: CCP_Anim-Throbber 1s linear infinite;
    animation-composition: add;
}

@keyframes CCP_Anim-Throbber
{
    to {
        transform: rotate(360deg);
    }
}


@media (min-width: 1300px)
{
    .CCP_Button
    {
        min-width: 150px;
    }
}

.CCP_Link
{
    color: var(--bet365-green);
    text-decoration: none;
}

.CCP_Button, .CCP_Link,
.CCP_Sticker
{
    -webkit-tap-highlight-color: transparent;
}


/* UI Transitions */
.CCP_Sticker.sticker-active
{
    cursor: pointer;
}

/*
.CCP_Sticker.door-closed .StickerWrapper
{
    transform: translateZ(.1px) rotateY(0deg) scaleX(1);
}

.CCP_Sticker.door-closed .StickerWrapper::before
{
    transform: translateZ(-4px) scaleX(1);
}

.CCP_Sticker.door-closed > .shadow-effect
{
    filter: blur(1px);
}

.CCP_Sticker.door-closed .shadow-body
{
    transform: scaleX(1);

    opacity: 2; /* overshoot intentional to sync transition with door opening animation
}

.CCP_Sticker.door-closed .shadow-edge
{
    opacity: 1;
}
*/

.CCP_Motion-PlaceSticker .sticker-segment
{
    transition: transform 1s calc(var(--index) * var(--base-delay)) ease-in-out;
}

.CCP_Motion-OpenDoorShadow
{
    transition: transform 2s cubic-bezier(0.6, 0.000, 0.45, 1.000), opacity 2s cubic-bezier(0.6, 0.000, 0.45, 1.000);
}

.CCP_Motion-OpenDoorshadow-edge
{
	transition: opacity 2s cubic-bezier(0.6, 0.000, 0.45, 1.000);
}

.CCP_Motion-GenericFade
{
	transition: opacity 650ms linear;
}


.CCP_Trans-Invisible
{
    visibility: hidden;
}

.CCP_Trans-Opacity
{
    opacity: 0;
    pointer-events: none;
}


/* Animations */
.CCP_Anim-StickerGesture .sticker-segment.root
{
    animation: CCP_KF-StickerGesture 800ms ease-in-out;
	animation-composition: accumulate;
}

.CCP_Anim-CalendarTrack
{
    animation: CCP_KF-CalendarTrack 4s cubic-bezier(0.280, 0.060, 0.420, 1.000);
}

@keyframes CCP_KF-StickerGesture
{
    0%, 50%, 100% {
        transform: rotateY(0deg);
    }

    25%, 75% {
        transform: rotateY(8deg);
    }
}

@keyframes CCP_KF-CalendarTrack
{
    from {
        transform: var(--calendar-track);
    }
}

@keyframes CCP_KF-BokehIn
{
    0%, 100% {
        opacity: 0;
    }

    20%, 80% {
        opacity: var(--bokeh-opacity-max);
    }
}

@keyframes CCP_KF-BokehOut
{
    0%, 100% {
        opacity: var(--bokeh-opacity-max);
    }

    25%, 75% {
        opacity: 0;
    }
}


/*
Media queries
*/

/* Awesome banner image size replication */
@media screen and (max-width: 599px)
{
    .__CCPBody,
	.CCP_PreloadOverlay
    {
        height: 300px;
    }
}

@media screen and (min-width: 600px)
{
    .__CCPBody,
	.CCP_PreloadOverlay
    {
        height: 320px;
    }
}

@media screen and (min-width: 768px)
{
    .__CCPBody,
	.CCP_PreloadOverlay
    {
        height: 450px;
    }
}

@media screen and (min-width: 1300px)
{
    .__CCPBody,
	.CCP_PreloadOverlay
    {
        height: 500px;
    }
}


/* Calendar content */
@media screen and (max-width: 599px)
{
    .CCP_Calendar > .PerspectiveWrapper
    {
        width: 835px;
        top: 40%;
    }

    .CCP_Sticker img.front
    {
        transform: scale(1.015);
    }

    .CCP_Sticker .StickerWrapper
    {
        /* transform: translateZ(.1px) rotateY(-145deg) scaleX(.9); */
    }

    .CCP_Sticker .StickerWrapper::before
    {
        display: none;
    }

    .CCP_Sticker .shadow-body
    {
         transform: scaleX(-.6);

        opacity: .7;
    }
}

@media screen and (min-width: 600px) and (max-width: 767px)
{
    .CCP_Calendar > .PerspectiveWrapper
    {
        width: 919px;
    }

    .CCP_Sticker .StickerWrapper
    {
        /* transform: translateZ(.1px) rotateY(-120deg) scaleX(.87); */
    }

    .CCP_Sticker .shadow-body
    {
        transform: scaleX(-.35);
        opacity: .7;
    }
}

@media screen and (min-width: 768px) and (max-width: 1299px)
{
    .CCP_Calendar > .PerspectiveWrapper
    {
        width: 1303px;
    }

    .CCP_Sticker .StickerWrapper
    {
        /* transform: translateZ(.1px) rotateY(-120deg) scaleX(.87); */
    }

    .CCP_Sticker .shadow-body
    {
        transform: scaleX(-.35);
        opacity: .7;
    }
}

@media screen and (min-width: 1300px)
{
    .CCP_Calendar > .PerspectiveWrapper
    {
        width: 1500px;
    }

    .CCP_Sticker .StickerWrapper
    {
    }

    .CCP_Sticker .shadow-body
    {
        transform: scaleX(-.35);
        opacity: .7;
    }
}

@media screen and (max-width: 1299px)
{
    .CCP_Calendar
    {
        perspective: 2000px;
    }
}

@media screen and (min-width: 1300px)
{
    .CCP_Calendar
    {
        perspective: 3000px;
    }
}

/* Bokeh */
@media screen and (max-width: 460px)
{
    /* Vignette */
    .CCP_Calendar::after
    {
        display: none;
    }

    /* Bokeh positions */
    .CCP_Bokeh
    {
        width: 100%;
        height: 60%;
        background: linear-gradient(0deg, transparent 65%, rgba(0,0,0,.7) 100%);
    }

    /* Bokeh positions */
    .CCP_Bokeh .spot1
    {
        left: 94%;
        top: 19%;
    }

    .CCP_Bokeh .spot2
    {
        left: 3%;
        top: 46%;
    }

    .CCP_Bokeh .spot3
    {
        left: 29%;
        top: -3%;
    }

    .CCP_Bokeh .spot4
    {
        left: 70%;
        top: 5%;
    }

    .CCP_Bokeh .spot5
    {
        left: 65%;
        top: 54%;
    }

    .CCP_Bokeh .spot6
    {
        left: 59%;
        top: 29%;
    }

    .CCP_Bokeh .spot7
    {
        left: 97%;
        top: 16%;
    }

    .CCP_Bokeh .spot8
    {
        left: 48%;
        top: 4%;
    }

    .CCP_Bokeh .spot9
    {
        left: 12%;
        top: 0;
    }

    .CCP_Bokeh .spot10
    {
        left: 3%;
        top: 14%;
    }

    .CCP_Bokeh .spot11
    {
        left: 24%;
        top: 21%;
    }


    /* Calendar track animation variant */
    .CCP_Calendar
    {
        --calendar-track: translateY(-15%);
    }
}

@media screen and (min-width: 461px)
{
    .CCP_Bokeh
    {
        width: 60%;
        height: 100%;

        background: linear-gradient(90deg, #242424 0%, rgba(34,34,34,0) 65%),
                    linear-gradient(125deg, #242424 15%, rgba(34,34,34,0) 50%);
    }

    /* Bokeh positions */
    .CCP_Bokeh .spot1
    {
        left: 15%;
        top: 25%;
    }

    .CCP_Bokeh .spot2
    {
        left: 11%;
        top: 58%;
    }

    .CCP_Bokeh .spot3
    {
        left: 25%;
        top: 105%;
    }

    .CCP_Bokeh .spot4
    {
        left: 5%;
        top: 85%;
    }

    .CCP_Bokeh .spot5
    {
        left: 40%;
        top: 72%;
    }

    .CCP_Bokeh .spot6
    {
        left: 43%;
        top: 29%;
    }

    .CCP_Bokeh .spot7
    {
        left: 2%;
        top: 47%;
    }

    .CCP_Bokeh .spot8
    {
        left: 48%;
        top: 8%;
    }

    .CCP_Bokeh .spot9
    {
        left: 20%;
        top: 0;
    }

    .CCP_Bokeh .spot10
    {
        left: 3%;
        top: 14%;
    }

    .CCP_Bokeh .spot11
    {
        left: 24%;
        top: 21%;
    }


    /* Calendar track animation variant */
    .CCP_Calendar
    {
        --calendar-track: rotateZ(3deg) translate(-6%, 7%);
    }
}


/* Promo content */
@media screen and (min-width: 768px)
{
    .CCP_PromoContent,
    .CCP_PodTerms > p
    {
        max-width: 900px;
    }

    .CCP_PromoContent
    {
        margin-top: -80px;
    }
}

@media screen and (min-width: 1300px)
{
    .CCP_button
    {
        padding: 0 25px;
        min-width: 200px;
        height: 50px;
        line-height: 50px;
        font-size: 25px;
        letter-spacing: -0.72px;
    }
}


/* Core UI sizing */
@media screen and (max-width: 480px)
{
    #CustomContentPodContentWrapper
    {
        min-height: 450px;
    }
}

@media screen and (min-width: 481px) and (max-width: 599px)
{
    #CustomContentPodContentWrapper
    {
        min-height: 490px;
    }
}

@media screen and (min-width: 600px) and (max-width: 767px)
{
    #CustomContentPodContentWrapper
    {
        min-height: 510px;
    }
}

@media screen and (min-width: 768px) and (max-width: 1023px)
{
    #CustomContentPodContentWrapper
    {
        min-height: 580px;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1299px)
{
    #CustomContentPodContentWrapper
    {
        min-height: 550px;
    }
}

@media screen and (min-width: 1300px)
{
    #CustomContentPodContentWrapper
    {
        min-height: 700px;
    }
}


/*
Existing 40px margin on CCP as TopBanner is not always required based on overall page content
Tweak for this project
*/
@media screen and (max-width: 767px) {
    .specific-offer-page-component__ccp-container
    {
        margin-bottom: 0
    }
}

@media screen and (min-width: 768px) {
    .specific-offer-page-component__ccp-container
    {
        margin-bottom: 20px
    }
}

/* Hover effects if supported */
@media (hover: hover)
{
    .CCP_Sticker.door-active .StickerWrapper::after
    {
        content: "";
        display: block;
        position: absolute;
        inset: var(--transform-offset);
        background: radial-gradient(circle at center, transparent 30%, rgba(242, 238, 221, 0.5) 90%) center no-repeat;
        background-size: 400% 400%;
        pointer-events: none;
        transition: background-size 250ms ease-out;
    }

    .CCP_Sticker.door-active:hover .StickerWrapper::after
    {
        background-size: 100% 100%;
    }

	.CCP_Button:not(.error):hover
    {
        background-position: 0;
    }

    .CCP_Link:hover
    {
        color: var(--button-hover);
    }
}

/*
 * Preloader; retain at bottom of file
 */
.__CCPBody.preloading
{
    visibility: hidden;
}

.CCP_PreloadOverlay
{
    display: flex;
    position: absolute;
    inset: 0;
    /* max-height: max(var(--preload-height), var(--target-ccpbody-height)); */
    z-index: 1;
    justify-content: center;
    align-items: center;
}

.CCP_PreloadOverlay > .bar-outer
{
    position: relative;
    width: 50%;
    max-width: 350px;
    height: 4px;
    margin-top: -2px;
    border-radius: 4px;
    background-color: var(--preload-outer);
}

.CCP_PreloadOverlay .bar-inner
{
    width: 0;
    height: 100%;
    margin: 0;
    border-radius: inherit;
    background-color: var(--bet365-green);
    transition: width 350ms ease-out;
}

.CCP_PreloadOverlay .bar-number
{
    margin-top: 5px;
    text-align: right;
    font: 10px var(--system-font);
    line-height: 1;
    color: var(--bet365-green);
}