/* Адаптивные стили */
@media (max-width: 768px) {
    .calculator {
        padding: 20px;
    }

    .display {
        font-size: 40px;
        padding: 20px;
    }

    button {
        padding: 13px;
        font-size: 13px;
    }

    .modal-header h2 {
        font-size: 20px;
    }

    .modal-body {
        padding: 15px;
    }
}

@media (max-width: 600px) {
    .calculator {
        max-width: 100%;
        padding: 15px;
    }
    
    button {
        padding: 12px;
        font-size: 12px;
    }

    .display {
        font-size: 32px;
        padding: 15px;
    }

    .plans-container {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .plan.super-plan {
        transform: scale(1.02);
    }

    .plan.super-plan:hover {
        transform: scale(1.05) translateY(-2px);
    }

    .modal-content {
        max-width: 90vw;
    }

    .success-message {
        min-width: 85vw;
        padding: 30px 20px;
    }

    .mode-btn {
        padding: 10px 16px;
        font-size: 12px;
    }

    .modal-header {
        padding: 20px 15px;
    }

    .modal-body {
        padding: 15px;
    }

    .input-group input {
        padding: 11px;
        font-size: 13px;
    }

    .card-option {
        padding: 14px;
        gap: 12px;
    }

    .card-option-icon {
        font-size: 24px;
        min-width: 36px;
    }

    .card-option-name {
        font-size: 12px;
    }

    .card-option-number {
        font-size: 11px;
    }
}

@media (max-width: 400px) {
    .calculator {
        padding: 10px;
    }

    .display {
        font-size: 24px;
        padding: 12px;
        min-height: 60px;
    }

    button {
        padding: 10px;
        font-size: 11px;
        border-radius: 10px;
    }

    .mode-btn {
        padding: 8px 12px;
        font-size: 11px;
    }

    .plan-title {
        font-size: 13px;
    }

    .plan-price {
        font-size: 16px;
    }

    .select-btn {
        font-size: 12px;
        padding: 10px;
    }
}