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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.5;
}

/* Hub Card Styles */
.hub-card {
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1.5rem;
    transition: all 0.2s ease;
}

.hub-card:hover {
    border-color: #3b82f6;
    box-shadow: 0 4px 6px -1px rgba(59, 130, 246, 0.1), 0 2px 4px -1px rgba(59, 130, 246, 0.06);
}

.hub-card input:checked ~ * {
    color: #2563eb;
}

/* Tier Card Styles */
.tier-card {
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1.5rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

.tier-card:hover {
    border-color: #3b82f6;
}

.tier-card input:checked + label {
    border-color: #3b82f6;
    background-color: #f0f7ff;
}

/* Billing Option Styles */
.billing-option {
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1.25rem;
    transition: all 0.2s ease;
    cursor: pointer;
}

.billing-option:hover {
    border-color: #3b82f6;
}

.billing-option input:checked + * {
    border-color: #3b82f6;
    background-color: #f0f7ff;
}

/* Form Elements */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .tier-card, .billing-option {
        padding: 1rem;
    }
}

/* Animation for price updates */
@keyframes priceUpdate {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.price-update {
    animation: priceUpdate 0.3s ease-in-out;
}