/* ====== SECTION BACKGROUND (outside cards) ====== */
.mimaso-banner{
  background: #f6efff;
  border: 2px solid #e5d9ff;
  border-radius: 24px;
  padding: 22px 16px;
  margin-bottom: 18px;
}

/* Horizontal row with visible overflow for tooltips */
.mimaso-banner .row{
  display:flex!important;
  gap:18px;
  flex-wrap:nowrap;
  overflow-x:auto;
  overflow-y:visible; /* allow tooltips above */
  -webkit-overflow-scrolling:touch;
  padding: 6px 4px 8px;
}

/* prevent p/br injected by editor */
.mimaso-banner .row>p{display:contents!important;margin:0!important;padding:0!important}
.mimaso-banner .row br{display:none!important}

/* ====== CARD with text below ====== */
.mimaso-banner .item{
  position:relative;
  display:flex!important;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  flex:0 0 auto;
  width:120px;
  text-decoration:none;
  color:#5a4a7a;
}

/* Visual card is only the icon box */
.mimaso-banner .icon{
  width:86px;
  height:86px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#ffffff;
  border:2px solid #e5d9ff;
  border-radius:20px;
  box-shadow:0 6px 16px rgba(90,74,122,.08);
  font-size:42px;
  line-height:1;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.mimaso-banner .title{
  font-size:14px;
  font-weight:700;
  margin-top:8px;        /* text under the card */
  text-align:center;
}

/* Hover play */
.mimaso-banner .item:hover .icon{
  transform: translateY(-6px) scale(1.06) rotate(-1deg);
  box-shadow: 0 12px 28px rgba(90,74,122,.18), 0 4px 10px rgba(90,74,122,.12);
  filter: saturate(1.05);
}
.mimaso-banner .item:focus-visible .icon{
  outline:none;
  transform: translateY(-6px) scale(1.06);
  box-shadow: 0 0 0 4px #ede3ff, 0 10px 24px rgba(90,74,122,.18);
}

/* ====== Tooltip norișor (still on .item) ====== */
.mimaso-banner .item[data-tip]::after{
  content:attr(data-tip);
  position:absolute;
  bottom: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%) translateY(6px) scale(.96);
  opacity:0; pointer-events:none;
  padding:.55rem .8rem; font-size:13px; line-height:1.2; white-space:nowrap;
  color:#5a4a7a; background:#fff; border:2px solid #e5d9ff; border-radius:18px;
  box-shadow:0 12px 28px rgba(90,74,122,.18), 0 2px 6px rgba(90,74,122,.08);
  z-index:999;
  transition: transform .18s ease, opacity .18s ease, bottom .18s ease;
}
.mimaso-banner .item[data-tip]::before{
  content:"";
  position:absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 14px; height: 14px;
  background:#fff;
  border-left:2px solid #e5d9ff;
  border-bottom:2px solid #e5d9ff;
  box-shadow:0 10px 20px rgba(90,74,122,.12);
  opacity:0; z-index:998;
  transition: bottom .18s ease, opacity .18s ease;
}
.mimaso-banner .item:hover::after,
.mimaso-banner .item:focus-visible::after{
  opacity:1;
  bottom: calc(100% + 18px);
  transform: translateX(-50%) translateY(0) scale(1);
}
.mimaso-banner .item:hover::before,
.mimaso-banner .item:focus-visible::before{
  opacity:1;
  bottom: calc(100% + 6px);
}

/* heart variant for tooltip */
.mimaso-banner .item.heart::after{
  content:"♡ " attr(data-tip) " ♡";
  background: linear-gradient(180deg,#ffeaf4 0%, #ffd9ee 100%);
  border-color:#ffb7da; color:#7b355a;
}
.mimaso-banner .item.heart::before{ background:#ffe3f1; border-color:#ffb7da; }