/*
 * Pricing plans professional redesign layer.
 * Pure CSS over the existing pricing markup — no HTML changes.
 * Loaded only on plan/index and the homepage plans partial.
 * Safe to remove: delete this file + its wrapper.php reference.
 */

.pricing-plan {
    border: 1px solid var(--gray-200);
    border-radius: 1rem !important;
    background: var(--white);
    box-shadow: 0 8px 26px rgba(0, 0, 0, .06);
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
    height: 100%;
    overflow: hidden;
}

.pricing-plan:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 50px rgba(0, 0, 0, .12);
    border-color: var(--primary);
}

/* Header / name */
.pricing-header {
    padding-top: 1.75rem;
}

.pricing-name {
    font-weight: 700;
    letter-spacing: .2px;
}

/* Price — make it the visual hero of the card */
.pricing-price-amount {
    font-weight: 800;
    font-size: 2.6rem;
    line-height: 1;
    background: linear-gradient(90deg, var(--primary), #6366f1);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pricing-price-currency {
    font-weight: 600;
    color: var(--gray-600);
}

.pricing-details {
    color: var(--gray-600);
}

/* Feature list inside the body */
.pricing-body ul,
.pricing-body .list-style-none {
    margin-top: 1rem;
}

.pricing-body li {
    padding: .35rem 0;
}

/* CTA button */
.pricing-body .btn-primary {
    border: 0;
    border-radius: .65rem;
    font-weight: 700;
    padding-top: .7rem;
    padding-bottom: .7rem;
    background-image: linear-gradient(135deg, var(--primary), #4f46e5);
    box-shadow: 0 8px 20px rgba(79, 70, 229, .25);
}

.pricing-body .btn-primary:hover:not(.disabled) {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(79, 70, 229, .35);
}

.pricing-body .btn.disabled {
    opacity: .55;
}

/* Highlight the middle plan as "most popular" when exactly 3 plans are shown.
 * Pure CSS heuristic — no markup change needed. */
.row.justify-content-around > div:nth-child(2):nth-last-child(2) .pricing-plan {
    border-color: var(--primary);
    box-shadow: 0 16px 40px rgba(79, 70, 229, .18);
    transform: scale(1.03);
}

.row.justify-content-around > div:nth-child(2):nth-last-child(2) .pricing-plan:hover {
    transform: scale(1.03) translateY(-6px);
}

/* Dark mode shadow softening */
.c_darkmode .pricing-plan,
.c_darkmode .pricing-plan:hover {
    box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
}

/* Responsive */
@media (max-width: 767.98px) {
    .pricing-price-amount { font-size: 2.2rem; }
    .row.justify-content-around > div:nth-child(2):nth-last-child(2) .pricing-plan {
        transform: none; /* don't scale on small screens to avoid overflow */
    }
}