/* =========================================================
   PRICING PAGE STYLES
   Combines: pricing.css + price_cards.css
   Organized & cleaned for production use
========================================================= */

/* ------------------------------
   GLOBAL PAGE STYLING
------------------------------ */
body {
    font-family: 'Segoe UI', sans-serif;
}

.pricing-header {
    text-align: center;
    margin-bottom: 3rem;
}

/* Hover effect for pricing cards */
.card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
}

/* Badge inside cards */
.plan-badge {
    font-size: 0.95rem;
}

/* Table styling */
.table thead th {
    background-color: #f8f9fa;
}

.table td, .table th {
    vertical-align: middle;
}

/* Primary outline button */
.btn-outline-primary {
    border-color: #0d6efd;
    color: #0d6efd;
}

.btn-outline-primary:hover {
    background-color: #0d6efd;
    color: white;
}

/* =========================================================
   PLAN CARDS
========================================================= */

.plan-card {
    transition: transform 0.3s ease, border-color 0.3s ease;
    border: 2px solid transparent;
}

.plan-card:hover {
    transform: translateY(-5px);
    border-color: #007bff;
}

/* Feature list used inside cards */
.feature-list li {
    padding: 8px 0;
    border-bottom: 1px solid #f8f9fa;
}

.feature-list li:last-child {
    border-bottom: none;
}

/* Recommended badge */
.recommended-badge {
    position: absolute;
    top: -10px;
    right: 20px;
    background: #ffc107;
    color: #000;
    padding: 5px 15px;
    border-radius: 15px;
    font-weight: bold;
    font-size: 0.8rem;
}

/* PayPal button container */
.paypal-buttons {
    min-height: 45px;
}

/* Current plan badge for active plan */
.current-plan-badge {
    font-size: 0.8rem;
    font-weight: bold;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}