/* ---------------------------------------------------------------------- */
/* IMPROVED: Package Card Styles for Aesthetics and Mobile Carousel */
/* ---------------------------------------------------------------------- */
.package-cards-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
}
.package-cards-container::-webkit-scrollbar {
    display: none;
}
.package-card {
    flex: 0 0 85%;
    max-width: 85%;
    margin-right: 15px;
    scroll-snap-align: start;
    /* Add transition for smoother headShake animation */
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
}
.package-card .card {
    border-radius: 15px; /* Softer corners */
    overflow: hidden;
    height: 100%;
    /* Use a stronger, branded border */
    border: 3px solid var(--vi-primary) !important; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.package-card .card:hover {
    transform: translateY(-5px); /* Subtle lift on hover */
    box-shadow: 0 10px 25px rgba(158, 204, 168, 0.5) !important; /* Branded shadow */
}
.package-card .card-header {
    background-color: var(--vi-primary) !important; /* Use primary color */
    color: white !important; /* White text for contrast */
    padding: 15px 0;
    font-size: 1.5rem;
    border-bottom: none !important;
}
.package-card .card-title {
    font-size: 2rem;
    color: var(--vi-secondary) !important;
}
.package-features {
    min-height: 150px;
    padding: 0 15px;
}
.package-features li {
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
    font-size: 0.95rem;
}
.package-features li:last-child {
    border-bottom: none;
}
.package-card .card-footer {
    background-color: #f7f7f7; /* Light background for footer */
}

/* Desktop/Tablet View (Override mobile carousel settings) */
@media (min-width: 768px) {
    .package-cards-container {
        overflow-x: visible;
        scroll-snap-type: none;
        display: flex;
        justify-content: space-between;
    }
    .package-card {
        flex: 0 0 32%;
        max-width: 32%;
        margin-right: 0;
    }
    .package-features {
        min-height: 180px;
    }
}
/* ---------------------------------------------------------------------- */