/* ── Base card ── */
.intlz-pricing-card-style4 {
  width: 300px;
  background: #ffffff;
  border-radius: 32px;
  position: relative;
  font-family: 'Segoe UI', system-ui, sans-serif;
  overflow: hidden;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.04),
    0 24px 64px rgba(0, 0, 0, 0.1);
}

/* ── Hero ── */
.intlz-pricing-card-style4__hero {
  background: var(--c50);
  padding: 2rem 1.75rem 3.5rem;
  position: relative;
  overflow: hidden;
}

/* ── Hero blob top-right ── */
.intlz-pricing-card-style4__hero::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: var(--c100);
  opacity: 0.5;
}

/* ── Hero blob bottom-left ── */
.intlz-pricing-card-style4__hero::after {
  content: '';
  position: absolute;
  bottom: -30px;
  left: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--c100);
  opacity: 0.4;
}

/* ── Plan name ── */
.intlz-pricing-card-style4__plan-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--c600);
  margin: 0 0 0.5rem;
  position: relative;
  z-index: 1;
  letter-spacing: 0.02em;
}

/* ── Price row ── */
.intlz-pricing-card-style4__price-row {
  display: flex;
  align-items: flex-start;
  gap: 2px;
  position: relative;
  z-index: 1;
}

.intlz-pricing-card-style4__currency {
  font-size: 22px;
  font-weight: 700;
  color: var(--c900);
  padding-top: 10px;
  line-height: 1;
}

.intlz-pricing-card-style4__amount {
  font-size: 80px;
  font-weight: 800;
  color: var(--c900);
  line-height: 1;
  letter-spacing: -4px;
}

/* ── Meta ── */
.intlz-pricing-card-style4__meta {
  font-size: 12px;
  color: var(--c600);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  position: relative;
  z-index: 1;
}

.intlz-pricing-card-style4__old-price {
  text-decoration: line-through;
  color: var(--c200);
}

/* ── Badge ── */
.intlz-pricing-card-style4__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--c400);
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 1.25rem;
  position: relative;
  z-index: 1;
}

.intlz-pricing-card-style4__badge::before {
  content: '↓';
  font-size: 12px;
}

/* ── Features — floats up over hero ── */
.intlz-pricing-card-style4__features {
  list-style: none;
  margin: -1.5rem 1.5rem 0;
  padding: 1.25rem;
  background: #ffffff;
  border-radius: 20px;
  border: 1.5px solid var(--c100);
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.intlz-pricing-card-style4__features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: #374151;
  font-weight: 500;
  padding: 8px 10px;
  border-radius: 10px;
  transition: background 0.15s;
}

.intlz-pricing-card-style4__features li:hover {
  background: var(--c50);
}

.intlz-pricing-card-style4__features li::before {
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--c50);
  border: 1.5px solid var(--c200);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.5 3.5 6.5-7' stroke='%238888AA' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-size: cover;
}

/* ── CTA ── */
.intlz-pricing-card-style4__cta {
  display: block;
  margin: 1.25rem 1.5rem 1.5rem;
  padding: 15px 0;
  text-align: center;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.04em;
  color: #ffffff;
  background: var(--c800);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* ── Glassy sheen on CTA ── */
.intlz-pricing-card-style4__cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 60%);
}

.intlz-pricing-card-style4__cta::after {
  content: ' →';
  font-size: 16px;
  font-weight: 400;
}

.intlz-pricing-card-style4__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
}


/* ══════════════════════════════
   THEME VARIABLES
══════════════════════════════ */

.intlz-pricing-card-style4--violet {
  --c50:  #EEEDFE;
  --c100: #CECBF6;
  --c200: #AFA9EC;
  --c400: #7F77DD;
  --c600: #534AB7;
  --c800: #3C3489;
  --c900: #26215C;
}

.intlz-pricing-card-style4--ocean {
  --c50:  #E6F1FB;
  --c100: #B5D4F4;
  --c200: #85B7EB;
  --c400: #378ADD;
  --c600: #185FA5;
  --c800: #0C447C;
  --c900: #042C53;
}

.intlz-pricing-card-style4--rose {
  --c50:  #FBEAF0;
  --c100: #F4C0D1;
  --c200: #ED93B1;
  --c400: #D4537E;
  --c600: #993556;
  --c800: #72243E;
  --c900: #4B1528;
}

.intlz-pricing-card-style4--slate {
  --c50:  #F1EFE8;
  --c100: #D3D1C7;
  --c200: #B4B2A9;
  --c400: #888780;
  --c600: #5F5E5A;
  --c800: #444441;
  --c900: #2C2C2A;
}

.intlz-pricing-card-style4--amber {
  --c50:  #FAEEDA;
  --c100: #FAC775;
  --c200: #EF9F27;
  --c400: #BA7517;
  --c600: #854F0B;
  --c800: #633806;
  --c900: #412402;
}



.intlz-pricing-card-style4-wrap {
  position: relative;
  display: inline-block;
}

.intlz-pricing-card-style4-wrap .intlz-pricing-card-style4__ribbon {
  position: absolute;
  top: -10px;
  right: 20px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 20px;
  z-index: 3;
  box-shadow:
    3px 3px 8px rgba(163, 168, 185, 0.4),
    -2px -2px 6px rgba(255, 255, 255, 0.9);
}

/* ── Per theme ── */
.intlz-pricing-card-style4-wrap:has(.intlz-pricing-card-style4--violet) .intlz-pricing-card-style4__ribbon { background: #534AB7; color: #ffffff; }
.intlz-pricing-card-style4-wrap:has(.intlz-pricing-card-style4--ocean)  .intlz-pricing-card-style4__ribbon { background: #185FA5; color: #ffffff; }
.intlz-pricing-card-style4-wrap:has(.intlz-pricing-card-style4--rose)   .intlz-pricing-card-style4__ribbon { background: #993556; color: #ffffff; }
.intlz-pricing-card-style4-wrap:has(.intlz-pricing-card-style4--slate)  .intlz-pricing-card-style4__ribbon { background: #444441; color: #ffffff; }
.intlz-pricing-card-style4-wrap:has(.intlz-pricing-card-style4--amber)  .intlz-pricing-card-style4__ribbon { background: #854F0B; color: #ffffff; }

