@import url('variables.css');

/* Pricing Section */

.pricing-section {
    font-family: var(--font-secondary);
    padding: 5%;
    margin-top: 5%;
}

.pricing {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 320px));
    gap: 20px;
    justify-content: center;
    margin: 0 auto; /* Centers the section */
}

.pricing-section h2 {
    text-align: center;
    font-size: var(--fontsize-h2);
    font-family: var(--font-primary);
    margin: 0 0 40px 0;
}

/* Individual Pricing Card */
.pricing-card {
    background-color: var(--color1);
    padding: 30px;
    text-align: center;
    width: 100%;
    max-width: 320px;
    box-sizing: border-box;
    position: relative;
    transition: transform 0.3s ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: var(--border-radius2);
}

.pricing-card:hover {
    transform: scale(1.05);
}

/* Pricing Card Headings */
.pricing-card h3 {
    margin-top: 0;
    font-size: var(--fontsize-p);
    font-family: var(--font-primary);
}

.pricing-card .pricing-price {
    font-size: var(--fontsize-h2);
    margin: 10px 0;
    font-weight: bold;
    font-family: var(--font-primary);
}

/* Sign Up Button */
.signup-btn {
    background: none;
    border: 2px solid var(--color5);
    color: var(--color5);
    padding: 10px 20px;
    font-size: var(--fontsize-p);
    cursor: pointer;
    margin-top: 15px;
    transition: background 0.3s ease-in-out;
    font-family: var(--font-secondary);
    text-decoration: none;
    border-radius: var(--border-radius2);
}

.signup-btn:hover {
    background: var(--color5);
    color: var(--color1);
}

/* Popular Badge */
.badge {
    position: absolute;
    top: -15px;
    right: -15px;
    background-color: var(--color5);
    color: var(--color3);
    font-size: 14px;
    font-weight: bold;
    padding: 15px 25px;
    font-family: var(--font-secondary);
    border-radius: 50%;
    text-transform: uppercase;
    clip-path: polygon(
        50% 0%, 63% 18%, 83% 7%, 92% 28%, 100% 50%,
        92% 72%, 83% 93%, 63% 82%, 50% 100%, 37% 82%, 
        17% 93%, 8% 72%, 0% 50%, 8% 28%, 17% 7%, 37% 18%
    ); /* Creates a spiked/star shape */
}