// Adaugă următoarele în styled components:

// planCardStyles - după linia 85, adaugă:
  [data-theme="light"] & {
    background: ${isCurrent ? 'rgba(139, 92, 246, 0.1)' : 'rgba(139, 92, 246, 0.05)'};
    border-color: ${isCurrent ? 'rgba(139, 92, 246, 0.5)' : isPopular ? 'rgba(139, 92, 246, 0.35)' : 'rgba(139, 92, 246, 0.25)'};

    ${!isCurrent && `
      &:hover {
        box-shadow: 0 8px 24px rgba(139, 92, 246, 0.15);
        border-color: rgba(139, 92, 246, 0.4);
        background: rgba(139, 92, 246, 0.08);
      }
    `}
  }

// badgeStyles - după linia 101:
  [data-theme="light"] & {
    background: rgba(139, 92, 246, 0.9);
    color: #FFFFFF;
  }

// planHeaderStyles h4 - după linia 112:
  [data-theme="light"] & {
    h4 {
      color: #1F2933;
    }
  }

// priceStyles - după linia 125:
  [data-theme="light"] & {
    color: rgba(139, 92, 246, 1);
    span {
      color: #6B7280;
    }
  }

// descriptionStyles - după linia 133:
  [data-theme="light"] & {
    color: #6B7280;
  }

// featureItemStyles - după linia 164:
  [data-theme="light"] & {
    color: rgba(31, 41, 51, 0.9);
    &::before {
      background: rgba(139, 92, 246, 0.3);
      color: #1F2933;
    }
  }

// buttonStyles - după linia 188:
  [data-theme="light"] & {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.4);
    color: #1F2933;

    ${isCurrent ? `
      opacity: 0.6;
    ` : `
      &:hover {
        background: rgba(139, 92, 246, 0.2);
        border-color: rgba(139, 92, 246, 0.6);
        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
      }
    `}
  }

// modalContentStyles - după linia 226:
  [data-theme="light"] & {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(139, 92, 246, 0.3);
    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.2);

    h4 {
      color: #1F2933;
    }
    p {
      color: rgba(31, 41, 51, 0.8);
    }
  }

// cancelButtonStyles - după linia 254:
  [data-theme="light"] & {
    background: rgba(139, 92, 246, 0.08);
    border-color: rgba(139, 92, 246, 0.25);
    color: #1F2933;

    &:hover {
      background: rgba(139, 92, 246, 0.12);
      border-color: rgba(139, 92, 246, 0.35);
    }
  }

// confirmButtonStyles - după linia 269:
  [data-theme="light"] & {
    background: rgba(139, 92, 246, 0.2);
    border-color: rgba(139, 92, 246, 0.5);
    color: #1F2933;

    &:hover {
      background: rgba(139, 92, 246, 0.3);
      border-color: rgba(139, 92, 246, 0.7);
      box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
    }
  }
