/* Premium blue-and-gold icon tiles used across treatment and information cards. */
.card .icon,
.info-list .ic{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  color:#f7dfa0;
  background:
    radial-gradient(circle at 28% 16%,rgba(255,255,255,.34),transparent 24%),
    radial-gradient(circle at 86% 92%,rgba(27,191,226,.34),transparent 38%),
    linear-gradient(145deg,#123d82 0%,#1e72cf 50%,#258fd4 100%);
  border:1px solid rgba(237,196,94,.95);
  box-shadow:
    0 16px 30px rgba(26,76,137,.22),
    0 4px 10px rgba(27,91,159,.12),
    inset 0 1px 0 rgba(255,255,255,.46),
    inset 0 -16px 28px rgba(7,49,108,.16);
  transition:transform .25s ease,box-shadow .25s ease,filter .25s ease
}

.card .icon{
  width:64px;
  height:64px;
  border-radius:20px;
  font-size:27px
}

.info-list .ic{
  width:54px;
  height:54px;
  border-radius:17px;
  font-size:22px
}

.card .icon::before,
.info-list .ic::before{
  content:"";
  position:absolute;
  z-index:0;
  width:42px;
  height:42px;
  right:-17px;
  top:-18px;
  border-radius:50%;
  background:rgba(255,255,255,.22);
  filter:blur(1px);
  pointer-events:none
}

.card .icon::after,
.info-list .ic::after{
  content:"";
  position:absolute;
  z-index:1;
  inset:3px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.13);
  box-shadow:
    inset 0 0 0 1px rgba(232,197,111,.14),
    inset 10px 12px 22px rgba(255,255,255,.035);
  pointer-events:none
}

.info-list .ic::after{border-radius:13px}

.card .icon > svg,
.info-list .ic .bic,
.info-list .ic svg{
  position:relative;
  z-index:2
}

.card .icon svg,
.info-list .ic svg{
  overflow:visible;
  stroke-width:1.8;
  filter:drop-shadow(0 2px 3px rgba(5,38,83,.35)) drop-shadow(0 0 5px rgba(248,222,151,.12))
}

.card:hover .icon{
  transform:translateY(-3px) rotate(-1deg);
  filter:saturate(1.08);
  box-shadow:
    0 21px 38px rgba(26,76,137,.28),
    0 6px 13px rgba(27,91,159,.14),
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -16px 28px rgba(7,49,108,.14)
}

@media(max-width:620px){
  .card .icon{width:60px;height:60px;border-radius:19px}
}
