/* ------------------------------------------------------------- */
/* -- Voordelen CSS -------- V1 JE -- 260423 ------------------- */
/* ------------------------------------------------------------- */

@import "/content/dam/amex/nl/assets/bubl/css/elements-v4/base.css";

:root {
  --open-width:60px;
}

/* ------------------------------------------------------------- */
/* -- Resetting some default styles ---------------------------- */
/* ------------------------------------------------------------- */
.card--selector{position:relative;}
.card--selector .container{margin:0px; padding: 0px; inset:0; min-width:100%;}
.card--selector .container .row{margin:0px!important;}
.card--selector .container .col-md-12{padding:0px!important; margion:0px!important; left:0px!important;}
.card--selector .del{display:none;}

/* ------------------------------------------------------------- */
/* -- Card selector -------------------------------------------- */
/* ------------------------------------------------------------- */
.card--selector{z-index:100; isolation: isolate; position:fixed!important; inset:0; width:100%; transition: var(--an1); max-height:100dvh!important; height:100vh!important; pointer-events: none;}
/* -- Open state ----------------------------------------------- */
.card--selector.Open{transition: var(--an1); pointer-events: all;}

/* ------------------------------------------------------------- */
/* -- Background ----------------------------------------------- */
/* ------------------------------------------------------------- */
.card--selector .card--selector--background{position:absolute!important;; inset:0; content:''; background-color: rgba(0,0,0, .0); width:100%!important; height:100%; transition:var(--an1); max-height:100%; position: relative;}
.card--selector.Open .card--selector--background:hover{background-color: rgba(0,0,0, .5); min-width:100%!important; transition:var(--an1); cursor: pointer;}
.card--selector.Open .card--selector--background{background-color: rgba(0,0,0, .4); transition:var(--an1)}

/* ------------------------------------------------------------- */
/* -- Card selector inside ------------------------------------- */
/* ------------------------------------------------------------- */
.card--selector .grid:not(.card--detail--wrapper .grid){display: grid; justify-content: end;}
.card--selector .selector--inside{--selector-width:900px; position: relative; right:calc(0% - calc(100% - var(--open-width))); transition:var(--an1); max-width:var(--selector-width); width:100vw; transition:var(--an1); position:relative; z-index: 101;}
.card--selector .selector--inside::before{inset: 0; mask-image: url(/content/dam/amex/nl/assets/bubl/img/servicePattern.svg); -webkit-mask-image: url(/content/dam/amex/nl/assets/bubl/img/servicePattern.svg); mask-position: center center; -webkit-mask-position: center center; mask-size: 60%; -webkit-mask-size: 60%; mask-repeat: repeat; -webkit-mask-repeat: repeat; content: ''; position: absolute; width: 100%; min-height: 100vh; background: linear-gradient(90deg, transparent, rgba(0,0,0,.05)); pointer-events: none; opacity: .4; z-index: 1}
.card--selector .selector--inside .grid{position:relative;}
@media(max-width: 1000px) {
  .card--selector .selector--inside{--selector-width:100vw;}
} 
/* -- Open state ----------------------------------------------- */
.card--selector.Open .selector--inside{right:0%;}

/* ------------------------------------------------------------- */
/* -- Open button ---------------------------------------------- */
/* ------------------------------------------------------------- */
.card--selector:not(.card--selector.Open) .selector--inside .open--button{color:white;}
.card--selector.Open .selector--inside .open--button{color:var(--LightBlue);}

@media (hover: hover) {
  .card--selector:not(.card--selector.Open) .selector--inside:hover .open--button{background-color:white; padding-bottom:20px; color:var(--LightBlue)!important; transition: var(--an1);}
  .card--selector:not(.card--selector.Open) .selector--inside:hover .open--button .icon-lg{color:var(--LightBlue)!important;}
}
.card--selector .open--button{background-color:var(--LightBlue); position: absolute; left: 0px; height: 30vh; width:var(--open-width); bottom: 35vh; display: grid; place-items:center; z-index:2; border-radius: 5px 0px 0px 5px; box-shadow:var(--BoxShadow); transition: var(--an1); cursor:pointer; pointer-events: all!important;}
.card--selector .open--button .open--button--text{writing-mode: vertical-rl; text-orientation: mixed; text-align: left;}
.card--selector .open--button .open--button--text p{margin-bottom: 0px!important;}
.card--selector.Open .open--button{background-color:white; z-index:0; transition: var(--an1);}
.card--selector.Open .open--button .icon-lg{color:var(--LightBlue)!important; transition: var(--an1); }
.card--selector .open--button .icon-lg{transition: var(--an1)}
.card--selector .open--button .icon-lg::before{font-size:2rem;}

@media(max-width:767px) {
  .card--selector .open--button{height: 180px; bottom:10vh; padding-block:var(--Sz0)}
  .card--selector .open--button .icon-lg::before{font-size:1.5rem}
  .card--selector.Open .open--button{height:100%; bottom:0;}
  .card--selector.Open .open--button .open--button--text{visibility: hidden;}
}

/* ------------------------------------------------------------- */
/* -- Close button --------------------------------------------- */
/* ------------------------------------------------------------- */
.card--selector .close--button{right:50px; bottom:90%; position: absolute; height:40px; width:40px}
.card--selector .close--button::before{position: absolute; right:0; height:40px; width:40px; background-color:var(--LightBlue); z-index:10; cursor: pointer; mask-image: url(/content/dam/amex/nl/assets/bubl/img/NoGray.svg); -webkit-mask-image: url(/content/dam/amex/nl/assets/bubl/img/NoGray.svg); mask-position: center center; -webkit-mask-position: center center; mask-size: cover; -webkit-mask-size: cover; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; content: ''; position: absolute; transition: var(--an1); pointer-events:all;}
@media(max-width:767px) {
  .card--selector .close--button::before{right:calc(50% - (25px / 2)); top:calc(50% - (25px / 2)); height:25px; width:25px; background-color: white;}
  .card--selector .close--button{right:-80px; bottom:10svh; position: absolute; height:80px; width:50px;}
  .card--selector .close--button::after{pointer-events:all; height: 80px; content: ''; width:var(--open-width); background-color:var(--LightBlue); position: relative; left:0px; display: inline-block; z-index: 1; border-radius: 5px 0px 0px 5px; box-shadow: var(--BoxShadow);}
  .card--selector.Open .close--button{right:0px; transition: var(--an1); transition-delay:400ms}
}
/* ------------------------------------------------------------- */
/* -- Detail wrapper ------------------------------------------- */
/* ------------------------------------------------------------- */
.card--selector .selector--inside .card--detail--wrapper{background-color:white; position: relative; top:0; max-height:100vh;  overflow-y:scroll; max-width:calc(var(--selector-width) - var(--open-width)); width:100vw; border-radius: 5px 0px 0px 5px; display: flex; justify-content: flex-start; padding:2.5rem var(--Sz2); transition: var(--an1);}
.card--selector .selector--inside .card--detail--wrapper .col-md-12:not(.card--selector--grid .col-md-12){padding-bottom: var(--Sz4)!important;}
@media(max-width:767px) {
  .card--selector.Open .selector--inside .card--detail--wrapper{border-radius: 0;}
  .card--selector .selector--inside .card--detail--wrapper{padding: 3rem 4rem 3rem 2.8rem;}
}

/* ------------------------------------------------------------- */
/* -- Card selector grid --------------------------------------- */
/* ------------------------------------------------------------- */
.card--selector--grid .col-md-12 > div{display: grid; gap:var(--Sz1);}
@media (max-width: 767px) {
  .card--selector--grid .col-md-12 > div{display: grid; gap:var(--Sz01);}
}

/* ------------------------------------------------------------- */
/* -- Card Details --------------------------------------------- */
/* ------------------------------------------------------------- */
.card--selector .selector--inside .card--detail--wrapper .card--details{margin-top:var(--Sz0); z-index:2;}
.card--selector .selector--inside .card--detail--wrapper .card--details .col-md-12 > div{display: flex; gap: var(--Sz1); align-items: center}
.card--selector .selector--inside .card--detail--wrapper .card--details .image img{filter: drop-shadow( var(--BoxShadow)); -webkit-filter: drop-shadow( var(--BoxShadow))}
.card--selector .selector--inside .card--detail--wrapper .card--details .richtext{flex: 1 0 50%}
.card--selector .selector--inside .card--detail--wrapper .card--details .richtext a{font-weight: 600;}
.card--selector .selector--inside .card--detail--wrapper .card--details .richtext h4{font-family: var(--FontA); font-size:22px!important;}
@media (max-width: 767px) {
  .card--selector .selector--inside .card--detail--wrapper .card--details .col-md-12 > div{flex-wrap: wrap; gap:var(--Sz0)}
  .card--selector .selector--inside .card--detail--wrapper .card--details .richtext{flex: 1 0 100%}
  .card--selector .selector--inside .card--detail--wrapper .card--details .richtext h4{font-size:20px!important;}
  .card--selector .selector--inside .card--detail--wrapper .card--details .richtext ul{font-size:15px!important;}
  .card--selector .selector--inside .card--detail--wrapper .card--details .image img{width:100%; max-width:370px;}
}

/* ------------------------------------------------------------- */
/* -- Open state animations ------------------------------------ */
/* ------------------------------------------------------------- */
.card--selector .selector--inside .card--detail--wrapper .card--details{opacity: 0; transform: translateY(50px); transition: var(--an1);}
.card--selector.Open .selector--inside .card--detail--wrapper .card--details{opacity: 1; transform: translateY(0px); transition: var(--an1); transition-delay: 500ms;}

/* ------------------------------------------------------------- */
/* -- Mobile optimalisations ----------------------------------- */
/* ------------------------------------------------------------- */
@media(max-width:767px) {
  .container-fluid .grid .selector--inside .container .row .col-md-12{margin-bottom:0px!important;}
  .container-fluid .grid .selector--inside .container .row .col-md-12{padding:0px!important;}
  .container-fluid .grid .card--selector .container .row .col-md-12{padding:0px!important;}
}

/* ------------------------------------------------------------- */
/* -- Hero card visual ----------------------------------------- */
/* ------------------------------------------------------------- */
.Hero-custom .cardVisual{padding-block: var(--Sz1) var(--Sz5); cursor:pointer; max-width: max-content}
.Hero-custom .cardVisual:hover img{--_treshHold:55px;}
.Hero-custom .cardVisual img{max-width: 200px; position: absolute; transition: var(--an1); --_treshHold:35px; box-shadow: var(--BoxShadow);}
.Hero-custom .cardVisual img:nth-child(1){z-index: 5; transform: translateX(0px) scale(1); }
.Hero-custom .cardVisual img:nth-child(2){z-index: 4; transform: translateX(calc(var(--_treshHold) * 1)) scale(.9);}
.Hero-custom .cardVisual img:nth-child(3){z-index: 3; transform: translateX(calc(var(--_treshHold) * 2)) scale(.8);}
.Hero-custom .cardVisual img:nth-child(4){z-index: 2; transform: translateX(calc(var(--_treshHold) * 2.8)) scale(.7);}
.Hero-custom .cardVisual img:nth-child(5){z-index: 1; transform: translateX(calc(var(--_treshHold) * 3.5)) scale(.6);}

/* ------------------------------------------------------------- */
/* -- Page styling --------------------------------------------- */
/* ------------------------------------------------------------- */

.AmexWatermark{margin-top:var(--Sz1);}

/* -- App row -------------------------------------------------- */
.App{margin-top:0!important;}
.App::before{background-color:#ecedee!important;}
.App a:not(a.btn){color:white; font-weight:600; text-decoration: underline; transition: var(--an1)}
.App a:not(a.btn):hover{color:white; opacity: .8; text-decoration: underline; transition: var(--an1)}

/* -- Hero styling --------------------------------------------- */
.container-fluid .Hero-custom.voordelen--hero{margin-bottom:var(--Sz1)}
@media only screen and (max-width: 767px) {
  .container-fluid .Hero-custom.voordelen--hero .row .col-md-6:first-child{margin-bottom: 0px!important;}
}