/* Clever Feature Card — v1.2.0 */

.cfc-card{
  position: relative;
  display:block;
  overflow:hidden;
  width:100%;
  height:360px;
  border-radius:22px;
  text-decoration:none !important;
  transform: translateZ(0);
  box-shadow: 0 14px 40px rgba(0,0,0,.18);
  transition: transform .45s ease, box-shadow .45s ease;
  color:#fff;
  outline: none;
}

/* Background image on pseudo-element to prevent jitter */
.cfc-card::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--cfc-bg);
  background-size: cover;
  background-position: center;
  transform: scale(1);
  transition: transform .55s ease;
  will-change: transform;
}

.cfc-overlay{
  position:absolute; inset:0;
  background: rgba(0,0,0,.35);
  opacity:.55;
  transition: opacity .45s ease;
  pointer-events:none;
}

.cfc-content{
  position:absolute; inset:0;
  padding:22px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.cfc-top{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
}

.cfc-icon{
  width:44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  border:2px solid rgba(255,255,255,.75);
  border-radius:14px;
  backdrop-filter: blur(6px);
  background: rgba(0,0,0,.15);
  transition: transform .45s ease, background .45s ease, border-color .45s ease;
}

.cfc-bottom{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}

.cfc-title{
  font-size:20px;
  font-weight:700;
  letter-spacing:.2px;
  line-height:1.15;
  max-width:72%;
  transform: translateY(8px);
  transition: transform .45s ease, opacity .45s ease;
  opacity:.95;
}

.cfc-actions{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}

.cfc-counter{
  font-size:16px;
  font-weight:600;
  opacity:.9;
  transform: translateY(6px);
  transition: transform .45s ease, opacity .45s ease;
}

/* Toggle button */
.cfc-toggle{
  width:44px; 
  height:44px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  font-weight:700;
  background:#ee8e22;
  box-shadow: 0 10px 22px rgba(11,95,255,.35);
  border:0;
  cursor:pointer;
  position: relative;
  transform: translateY(10px) scale(.98);
  transition: transform .45s ease, box-shadow .45s ease, filter .45s ease;
  color:#fff;
}

.cfc-toggle:focus-visible{
  outline: 2px solid rgba(255,255,255,.9);
  outline-offset: 3px;
}

.cfc-toggle__plus,
.cfc-toggle__x{
  position:absolute;
  line-height:1;
  transition: opacity .25s ease, transform .45s ease;
}

.cfc-toggle__x{ opacity:0; transform: rotate(-90deg) scale(.9); }

/* Panel (glass dark blur) */
.cfc-panel{
  position:absolute;
  inset:0;
  border-radius: inherit;
  padding: 26px 26px 26px 26px;
  opacity:0;
  transform: translateY(8px);
  pointer-events:none;
  transition: opacity .3s ease, transform .3s ease;
  /* glass + dark */
  background: rgba(10,12,16, var(--cfc-panel-dark, .72));
  backdrop-filter: blur(var(--cfc-panel-blur, 22px));
  -webkit-backdrop-filter: blur(var(--cfc-panel-blur, 22px));
}

.cfc-panel::before{
  content:"";
  position:absolute; inset:0;
  border-radius: inherit;
  background: radial-gradient(1200px 500px at 20% 10%, rgba(255,255,255,.10), rgba(255,255,255,0)),
              radial-gradient(900px 500px at 90% 90%, rgba(11,95,255,.12), rgba(11,95,255,0));
  pointer-events:none;
}

.cfc-panel__header{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom: 10px;
}

.cfc-icon--panel{
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
}

.cfc-panel__title{
  position:relative;
  font-size:26px;
  font-weight:800;
  letter-spacing: .2px;
}

.cfc-panel__text{
  position:relative;
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,.92);
  max-width: 760px;
}

/* Hover: light scale only */
.cfc-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 55px rgba(0,0,0,.24);
}
.cfc-card:hover::before{
  transform: scale(var(--cfc-hover-scale, 1.04));
}
.cfc-card:hover .cfc-overlay{
  opacity:.68;
}
.cfc-card:hover .cfc-title{ transform: translateY(0px); opacity:1; }
.cfc-card:hover .cfc-counter{ transform: translateY(0px); opacity:1; }
.cfc-card:hover .cfc-icon{ transform: translateY(-2px); background: rgba(0,0,0,.22); border-color: rgba(255,255,255,.9); }
.cfc-card:hover .cfc-toggle{ transform: translateY(0px) scale(1.02); filter: brightness(1.05); }

/* Open state */
.cfc-card.is-open .cfc-panel{
  opacity:1;
  transform: translateY(0);
  pointer-events:auto;
}
.cfc-card.is-open .cfc-toggle{
  transform: translateY(0px) rotate(90deg) scale(1.02);
}
.cfc-card.is-open .cfc-toggle__plus{
  opacity:0;
  transform: rotate(90deg) scale(.9);
}
.cfc-card.is-open .cfc-toggle__x{
  opacity:1;
  transform: rotate(0deg) scale(1);
}

/* Prevent selection glitches */
.cfc-card, .cfc-card *{ -webkit-tap-highlight-color: transparent; }
/* Panel close button */
.cfc-close{
  position:absolute;
  right: 22px;
  bottom: 22px;
  width:44px; height:44px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
  font-weight:800;
  background:#333!important;
  box-shadow: 0 10px 22px rgba(11,95,255,.35);
  border:0;
  cursor:pointer;
  color:#fff;
  z-index: 3;
  transition: transform .2s ease, filter .2s ease;
}
.cfc-close:hover{ transform: scale(1.04); filter: brightness(1.05); }
.cfc-close:focus-visible{
  outline: 2px solid rgba(255,255,255,.9);
  outline-offset: 3px;
}