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

/* --------------------------------------------------- */
/* -- Custom CSS FB Platinum Campaign ---------------- */
/* --------------------------------------------------- */

/* --------------------------------------------------- */
/* -- Card selector ---------------------------------- */
/* --------------------------------------------------- */
.container-fluid .card--selector .row, .container-fluid .card--selector .scroll--window .container, .container-fluid .grid .card--selector .container .row .col-md-12{
    padding:0!important;
    margin:0!important;
    left:0!important;
}

.scroll--window{
    --_scroll--button--width:30px;
    position:relative;
    overflow:hidden;
}

.card--selector .scroll--window .col-md-12 > div:not(.scroll--element .col-md-12 > div){
    display: flex;
    padding-block:var(--Sz02);
    overflow-x:scroll;
    scroll-snap-type: x mandatory;
    align-items:center;
}

.card--selector .scroll--window .col-md-12 > div:not(.scroll--element .col-md-12 > div) > .grid{
    scroll-snap-align:start;
}

.scroll--element .col-md-12 > div{
    display:flex;
    gap:var(--Sz02);
    align-items:center;
}

.scroll--element .richtext{
    flex: 1 0 50%;
    order:2;
}
.scroll--element .image{
    flex: 1 0 25%;
    filter:drop-shadow(0px 10px 15px rgba(0, 0, 0, 0.2));
    transition:var(--an2);
    scale:1;
    padding-inline:.7rem;
}

.scroll--element .image:hover{
    transition:var(--an2);
    scale:1.1;
    cursor:pointer;
}

.scroll--element{    
    width:380px;
    max-width:80vw;
    margin-left:var(--Sz0);
}

.scroll--element p{
    margin-bottom:var(--Sz05);
    font-size:12px!important;
}

.scroll--element ul{
    font-size:15px!important;
    display:none;
}

.card--selector .card--nav{
    padding-block:var(--Sz01);
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    column-gap:var(--Sz0);
}

.card--selector .card--nav p, .card--selector .card--nav a{
    padding:0px;
    margin:0;
    font-size:17px;
}

.card--selector .card--nav p{
    font-weight:500;
}

.card--nav .devider{
    --_divider--size:10px;
    position:relative;
    display:inline;
    aspect-ratio:1;
    height:var(--_divider--size); width:var(--_divider--size);    
    transform:rotate(45deg);
    border-top: calc(var(--_divider--size) / 5) solid black;
    border-right: calc(var(--_divider--size) / 5) solid black;
}

.scroll--button{    
    position:absolute;
    top:0; bottom:0;
    margin:auto;
    height:100%;
    width:var(--_scroll--button--width);
    background-color:var(--LightBlue);
    z-index:10;
    box-shadow:var(--BoxShadow);
    cursor:pointer;
    transition:var(--an1);
}
@media (hover: none){
    .scroll--button{
        background-color:transparent;
        box-shadow:none;
    }

    .scroll--button::before, .scroll--button::after{
        border-color:var(--LightBlue)!important;
    }
}

.scroll--button::before{
    position:absolute;
    width:calc(var(--_scroll--button--width) * .5);
    height:calc(var(--_scroll--button--width) * .5);
    margin:auto;
    content:'';
    inset:0;
    border-top:calc(var(--_scroll--button--width) / 8) solid white;
    border-right:calc(var(--_scroll--button--width) / 8) solid white;
}

.scroll--button.disabled{
    pointer-events:none;
    opacity:0;
    cursor:not-allowed!important;
    transition:var(--an1);
}

.scroll--button.scroll--right::before{
    transform: rotate(45deg);
    right:30%;
}

.scroll--button.scroll--left::before{
    transform: rotate(-135deg);
    left:30%;
}

.scroll--button.scroll--right{
    right:0px;
}

.scroll--button.scroll--left{
    left:0;
}

.scroll--button p{
    display:none;
}

.card--offer .image {padding-inline:.3rem;}
.card--offer p {font-weight:400;}
.scroll--element.card--offer::after {position:absolute; left:-10px; top:-10px; padding:4px 8px; background-color:var(--LightBlue); box-shadow:var(--BoxShadow); border-radius:var(--BrSmall); color:white; font-size:10px; pointer-events:none;}
.scroll--element p::after {position:relative; display:inline-block; right:-10px; background-color:var(--LightBlue); color:white; box-shadow:var(--BoxShadow); padding:.1rem .8rem; border-radius:var(--BrSmall);}

/* .scroll--element.plat--card p::after {content:'50.000 Miles én 40 XP'}
.scroll--element.gold--card p::after {content:'20.000 Miles én 15 XP'}
.scroll--element.silver--card p::after {content:'10.000 Miles'}
.scroll--element.entry--card p::after {content:'1.000 Miles'} */

.card--selector.plat--card .scroll--element.plat--card{
    border:1.5px solid rgba(0,0,0,.15);
    border-radius:var(--BrSmall);
    padding:.8rem .2rem;
}

.card--selector.gold--card .scroll--element.gold--card{
    border:1.5px solid rgba(0,0,0,.15);
    border-radius:var(--BrSmall);
    padding:.8rem .2rem;
}

.card--selector.silver--card .scroll--element.silver--card{
    border:1.5px solid rgba(0,0,0,.15);
    border-radius:var(--BrSmall);
    padding:.8rem .2rem;
}

.card--selector.entry--card .scroll--element.entry--card{
    border:1.5px solid rgba(0,0,0,.15);
    border-radius:var(--BrSmall);
    padding:.8rem .2rem;
}

.card--selector.plat--card .scroll--element.plat--card a, .card--selector.plat--card .scroll--element.plat--card .image{
    pointer-events:none;
    color:#333;
    font-weight:500;
}

.card--selector.gold--card .scroll--element.gold--card a, .card--selector.gold--card .scroll--element.gold--card .image{
    pointer-events:none;
    color:#333;
    font-weight:500;
}

.card--selector.silver--card .scroll--element.silver--card a, .card--selector.silver--card .scroll--element.silver--card .image{
    pointer-events:none;
    color:#333;
    font-weight:500;
}

.card--selector.entry--card .scroll--element.entry--card a, .card--selector.entry--card .scroll--element.entry--card .image{
    pointer-events:none;
    color:#333;
    font-weight:500;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.card--selector .scroll--window .col-md-12 > div:not(.scroll--element .col-md-12 > div)::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.card--selector .scroll--window .col-md-12 > div:not(.scroll--element .col-md-12 > div) {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* --------------------------------------------------- */
/* -- Rest CSS --------------------------------------- */
.none {display:none;}
.container-fluid .ShopBar {height: 100px; bottom: -100px; transition: bottom 0.5s ease-in-out;}
.container-fluid .ShopBar.active {bottom: 0px;}
#amex-footer {margin-bottom: 6rem!important;}
.BannerC ul.Check li {display: inline-block; font-size:13px; padding:14px 0px; border-bottom:1px solid #ccc;}
.BannerC ul.Check li::before {background-image: none;}
.thumb.highlight {border:1.5px solid var(--LightBlue);}
/* #amex-header, #amex-footer {display:none;} */
body {padding-bottom:100px;}

/* 1280+  ------------------------------- */
@media only screen and (min-width: 1280px) {
.Hero-custom {margin-bottom: var(--Sz2)!important;}
}

/* 1024:1279  --------------------------------- */
@media (min-width:1024px) and (max-width:1279px) {
.Hero-custom {margin-bottom: var(--Sz2)!important;}
}

/* 769:1023  --------------------------------- */
@media (min-width:769px) and (max-width:1023px) {}

/* 577:768  --------------------------------- */
@media (min-width:577px) and (max-width:768px) {}

/* 576  ------------------------------- */
@media only screen and (max-width: 576px) {
h1.dls-white {font-size: 36px!important;}
}