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

/* --------------------------------------------------------------- */
/* -- Merchants CSS --------------------------------------- JE --- */
/* --------------------------------------------------------------- */


/* --------------------------------------------------------------- */
/* -- Hover state of the categories ------------------------------ */
.hoverCard{transition:var(--an2); transform:scale(1);}
.hoverCard:hover{transition:var(--an2); transform:scale(1.1); cursor:pointer;}

/* --------------------------------------------------------------- */
/* -- Grid inside the modal -------------------------------------- */
.container-fluid .ModalContent .merchantCards{padding-left: calc(var(--Sz1) - var(--Sz03)); padding-bottom: var(--Sz1);}
.container-fluid .ModalContent .merchantCards .row .image .pad{padding:0!important; margin-bottom:var(--Sz0);}
.container-fluid .ModalContent .merchantCards .hover-card .row.pad-3-t.pad-3-b{padding:0!important;}
.merchantCards .col-md-12 > div:not(.hover-card .col-md-12 > div){display:grid; grid-template-columns: repeat( auto-fit, minmax(200px, 1fr)); gap: var(--Sz1)}
.merchantCards .col-md-12 > div:not(.hover-card .col-md-12 > div) .grid{justify-content: stretch;}
.hover-card .image img{box-shadow: var(--BoxShadow); border-radius:var(--BrSmall)}
.hover-card h3{
  font-size:1.3rem!important;
  hyphens: auto;
  word-break:break-word
}
.hover-card{
  padding:var(--Sz0)!important;
  background-color:#ececec;
  border-radius: var(--BrSmall);
  box-shadow: var(--SmallBoxShadow);
  height:100%;
}

.merchantCards .col-md-12 > div:not(.hover-card .col-md-12 > div) .grid section{
  height: 100%;
}

.hover-card .richtext{
  padding-left:0px!important;
}

.hover-card .col-md-12:first-child{
  left: 0!important;
}

.categories .image{
  box-shadow:var(--BoxShadow);
  padding: 0px!important;
  margin-bottom: var(--Sz0);
}

.categories .hoverCard{
  padding:0px!important;
  border-radius: var(--BrSmall);
  overflow: hidden;
}

.categories .col-md-2{
  max-width:20%!important;
  flex:0 1 20%!important;
  min-width: 180px;
}

.categories h3{
  font-size:1.5rem!important;
}

#categories-rij1{
  padding-bottom:var(--Sz1);
}

/* -- Temp link fix -- */
#merchant-link::after{
  content: "";
  width: 18px;
  height: 14px;
  background-image: url("https://www.americanexpress.com/content/dam/amex/nl/assets/bubl/img/ArrowBlue1Right.svg");
  display: inline-block;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  margin-left: var(--Sz02);
  transition: var(--an2);
  position: relative;
  top: 2px;
}
#merchant-link:hover::after{
  background-image: url("https://www.americanexpress.com/content/dam/amex/nl/assets/bubl/img/ArrowBlue2Right.svg");
  margin-left: var(--Sz01);
}


.links-item i{
  display: none;
}