/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700;800&family=Manrope:wght@300;400;500;600;700&display=swap');

/* Main container */
.clincard-plans-container {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 20px;
}

/* Main title */
.clincard-main-title {
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  color: #5388F3;
  margin-bottom: 40px;
  line-height: 1.2;
}

/* Cards container */
.clincard-cards {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

/* Individual card styling */
.plan-card {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  padding: 24px;
  border-radius: 24px;
  background: #FFFFFF;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  flex: 1;
  position: relative;
}

.plan-card:hover { 
  transform: translateY(-2px); 
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* Plan-specific colors using Figma palette */
.plan-card[data-plan="individual"] .price,
.plan-card[data-plan="individual"] .choose-plan {
  color: #23C9BE;
}

.plan-card[data-plan="individual"] .choose-plan {
  background: #23C9BE;
}

.plan-card[data-plan="familiar"] .price,
.plan-card[data-plan="familiar"] .choose-plan {
  color: #5388F3;
}

.plan-card[data-plan="familiar"] .choose-plan {
  background: #5388F3;
}

.plan-card[data-plan="duplo"] .price,
.plan-card[data-plan="duplo"] .choose-plan {
  color: #23C9BE;
}

.plan-card[data-plan="duplo"] .choose-plan {
  background: #23C9BE;
}

/* Card header */
.plan-card h3 {
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 700;
  color: #6B7473 !important;
  line-height: 1.3;
}

.plan-card .subtitle {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #6B7473;
  margin: 0 0 16px 0;
  font-size: 14px;
  line-height: 1.4;
}

/* Highlighted text for familiar plan */
.plan-card[data-plan="familiar"] .subtitle .highlight {
  color: #5388F3;
  font-weight: 600;
}

/* Price styling */
.price { 
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 32px; 
  font-weight: 700; 
  margin: 8px 0 20px 0; 
  line-height: 1.2;
}

/* Button styling */
.choose-plan {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  padding: 14px 20px;
  margin-bottom: 20px;
  color: #FFFFFF !important;
  border-radius: 12px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
}

.choose-plan:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.choose-plan::before {
  content: '+';
  margin-right: 8px;
  font-size: 18px;
}

/* Addon items */
.addon { 
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  margin: 12px 0; 
  color: #4A4E4E; 
  font-size: 15px;
  font-weight: 500;
}

/* Toggle switches */
.switch { 
  position: relative; 
  display: inline-block; 
  width: 50px; 
  height: 28px; 
}

.switch input { 
  opacity: 0; 
  width: 0; 
  height: 0; 
}

.slider { 
  position: absolute; 
  cursor: pointer; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  background: #D9D9D9; 
  transition: 0.3s; 
  border-radius: 28px; 
}

.slider:before { 
  content: ''; 
  position: absolute; 
  height: 20px; 
  width: 20px; 
  left: 4px; 
  bottom: 4px; 
  background: #4A4E4E; 
  border-radius: 50%; 
  transition: 0.3s; 
}

.switch input:checked + .slider { 
  background: #23C9BE; 
}

.switch input:checked + .slider:before { 
  transform: translateX(22px); 
  background: #FFFFFF; 
}

/* Benefits section */
.benefits { 
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  margin-top: 20px; 
  font-size: 14px; 
  color: #6B7473; 
}

.benefits p {
  margin: 8px 0;
  font-weight: 500;
}

.benefits strong {
  color: #4A4E4E;
  font-weight: 600;
}

.benefits ul { 
  padding-left: 0; 
  margin: 12px 0 0 0; 
  list-style: none;
}

.benefits li { 
  margin-bottom: 3px; 
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #6B7473;
}

/* Icons for benefits */
.benefits li::before {
  content: '';
  width: 16px;
  height: 16px;
  margin-right: 12px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.6;
}

.benefits li:nth-child(1)::before { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%236B7473"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>'); }
.benefits li:nth-child(2)::before { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%236B7473"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5z"/></svg>'); }
.benefits li:nth-child(3)::before { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%236B7473"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2zm0 2v12h16V6H4zm2 2h12v2H6V8zm0 4h12v2H6v-2z"/></svg>'); }
.benefits li:nth-child(4)::before { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%236B7473"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.94-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/></svg>'); }
.benefits li:nth-child(5)::before { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%236B7473"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>'); }
.benefits li:nth-child(6)::before { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%236B7473"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>'); }
.benefits li:nth-child(7)::before { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%236B7473"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>'); }
.benefits li:nth-child(8)::before { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%236B7473"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>'); }
.benefits li:nth-child(9)::before { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%236B7473"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>'); }
.benefits li:nth-child(10)::before { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%236B7473"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>'); }
.benefits li:nth-child(11)::before { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%236B7473"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>'); }

/* Payment methods section */
.payment-methods {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  text-align: center;
  color: #6B7473;
  font-size: 14px;
  margin-top: 30px;
}

/* Responsive design */
@media (max-width: 768px) {
  .clincard-cards {
    flex-direction: column;
  }
  
  .clincard-main-title {
    font-size: 24px;
  }
}