/* ==========================================================================
   Unified SaaS Card Design – Services (Packages) + Plans
   Stripe / Vercel / Linear quality: alignment, hierarchy, fintech premium
   ========================================================================== */

/* ---------- Section wrapper ---------- */
.services-section {
    padding: 4rem 0;
}

.products-page .services-section {
    padding-top: 2rem;
    padding-bottom: 3rem;
}

.services-section .section-header {
    margin-bottom: 2.5rem;
}

.services-section .section-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    text-align: center;
    margin-bottom: 0.5rem;
    color: var(--text-primary, #0F172A);
}

.services-section .section-subtitle {
    font-size: 1.0625rem;
    color: var(--text-gray, #64748B);
    text-align: center;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- Grid: 3 → 2 → 1, equal height ---------- */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    align-items: stretch;
    margin-top: 0;
}

@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .services-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}

/* ---------- Card wrapper (no 3d needed for clean look) ---------- */
.services-grid .card-3d-wrapper {
    display: flex;
    min-height: 0;
}

/* ---------- Service card: white, rounded, soft shadow ---------- */
.services-section .service-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 28px 24px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid var(--border-color, #E5E7EB);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative;
    overflow: visible;
}

.services-section .service-card::before {
    display: none;
}

.services-section .service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
}

body.user-layout .services-section .service-card:hover {
    border-color: rgba(250, 204, 21, 0.35);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(250, 204, 21, 0.15);
}

/* Featured service card (e.g. Popular) */
.services-section .service-card.service-card--featured {
    border-color: rgba(250, 204, 21, 0.4);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(250, 204, 21, 0.2);
}

.services-section .service-card.service-card--featured:hover {
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(250, 204, 21, 0.25);
}

/* ---------- Badge: Popular ---------- */
.service-card__badge {
    position: absolute;
    top: -1px;
    right: 20px;
    background: var(--accent-yellow, #FACC15);
    color: #0F172A;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ---------- Icon: centered, soft circular container ---------- */
.services-section .service-icon-wrap {
    width: 56px;
    height: 56px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: var(--primary-soft, rgba(250, 204, 21, 0.15));
    color: var(--accent-yellow, #EAB308);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

body.user-layout .services-section .service-icon-wrap {
    background: rgba(250, 204, 21, 0.15);
    color: #CA8A04;
}

.services-section .service-icon-wrap .service-icon,
.services-section .service-icon-wrap i {
    width: 28px;
    height: 28px;
    display: block;
}

.services-section .service-icon-wrap svg {
    width: 28px;
    height: 28px;
}

/* Legacy: if .service-icon is direct child without wrap, still center */
.services-section .service-card > .service-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    background: var(--primary-soft, rgba(250, 204, 21, 0.15));
    color: var(--accent-yellow, #EAB308);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: none;
}

.services-section .service-card > .service-icon svg {
    width: 28px;
    height: 28px;
}

.services-section .service-card:hover > .service-icon {
    transform: none;
}

/* ---------- Typography: title, description ---------- */
.services-section .service-title {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    margin: 0 0 0.5rem;
    color: var(--text-primary, #0F172A);
}

.services-section .service-description {
    font-size: 0.9375rem;
    color: var(--text-gray, #64748B);
    line-height: 1.55;
    text-align: center;
    margin: 0 0 1.5rem;
    flex-grow: 1;
    max-width: 100%;
}

/* ---------- Button: bottom of card ---------- */
.services-section .service-btn {
    margin-top: auto;
    width: 100%;
    min-height: 44px;
    padding: 0.625rem 1rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.services-section .service-btn:hover {
    transform: scale(1.02);
}

.services-section .service-btn .inline-icon {
    width: 1rem;
    height: 1rem;
}

.services-section .service-btn svg {
    width: 1rem;
    height: 1rem;
}

.services-section .service-card-actions {
    margin-top: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
}

.services-section .service-card-actions .service-btn {
    flex: 1;
    min-width: 120px;
}

.services-section .service-btn-review {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-secondary, #cbd5e1);
}

.services-section .service-btn-review:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.3);
}

/* View more: centered below the 3 cards */
.services-view-more-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1.5rem;
}

.services-view-more-btn {
    min-height: 44px;
    padding: 0.625rem 1.5rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9375rem;
}