/* Package Cards Redesign - Modern & Premium */
:root {
    --primary-green: #103923;
    /* Dark Forest Green from Logo */
    --light-green: #1e5233;
    /* Slightly lighter for gradients */
    --accent-gold: #f39c12;
    --text-dark: #1a1a1a;
    --text-muted: #666;
    --bg-off-white: #f9fdfa;
    --card-black: #111111;
    /* New black for premium look */
    --card-hover-black: #000000;
}

/* New Button Cards Styles */
.card-btns {
    display: flex;
    margin-top: 15px;
    justify-content: center;
    /* Center the single button */
}

/* Updated Taxi Rate Card - Black Border */
.taxi-rate-card {
    border: 1px solid #000;
    border-radius: 0px;
    /* Square card? User asked for square button, assuming card stays rounded or user might like square card too. Keeping card radius 20px for now as user only specified square BUTTON. Wait, "package card should have border black line border". usually implies simple border. I will make it simple. */
    border-radius: 12px;
    background: #fff;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: none;
    /* Removed shadow/kept minimal */
    position: relative;
}

/* Single Square Button Style */
.theme-btn.btn-book {
    background: transparent;
    /* Transparent background */
    border: 1px solid #000;
    /* Black border for button */
    color: #000;
    width: 100%;
    /* Full width or specific? "only one square button". imply block? */
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 0px !important;
    /* SQUARE BUTTON */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.theme-btn.btn-book:hover {
    background: #000;
    /* Color on hover */
    color: #fff;
    border-color: #000;
    transform: none;
    box-shadow: none;
}

/* Details button hidden as user wanted "nothing else" */
.theme-btn.btn-details {
    display: none !important;
}

/* Updated top accent line to matching black/gold or keep green? User didn't specify processing this line, but for consistency let's make it Gold or keep Green. Let's keep green for brand identity or match black. User said "packages card top from green to black". I will iterate to black. */
.taxi-rate-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(135deg, var(--card-black) 0%, #333 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.taxi-rate-card:hover::before {
    transform: scaleX(1);
}

.taxi-rate-card:hover {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    /* Neutral shadow */
    transform: translateY(-10px);
}

.rate-header {
    /* Changed from green gradient to black */
    background: #198754;
    padding: 30px 25px;
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Subtle texture in header */
.rate-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
    animation: pulse 4s ease-in-out infinite;
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.popular-badge {
    position: absolute;
    top: 15px;
    right: -35px;
    background: linear-gradient(135deg, #d35400 0%, #e67e22 100%);
    /* Darker orange for better contrast */
    color: #fff;
    padding: 5px 45px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transform: rotate(45deg);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.rate-title {
    font-size: 26px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}

.rate-subtitle {
    font-size: 15px;
    opacity: 0.9;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.card-body-content {
    padding: 30px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    background: linear-gradient(to bottom, #ffffff 0%, var(--bg-off-white) 100%);
}

.pricing-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 15px;
    margin-bottom: 5px;
}

/* Updated Vehicle Rates - Square Tile Style */
.vehicle-rates {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-bottom: 0;
    font-size: 15px;
    padding: 15px 10px;
    background: #f8fbf9;
    border-radius: 12px;
    transition: all 0.3s ease;
    border: 1px solid #eef2f0;
    box-shadow: none;
    height: 100%;
}

.vehicle-rates:hover {
    border-color: var(--card-black);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    background: #fff;
}

.vehicle-name {
    font-weight: 500;
    color: var(--text-muted);
    font-size: 13px;
    margin-bottom: 8px;
    display: block;
    width: 100%;
}

.vehicle-name i {
    display: none;
}

.vehicle-price {
    font-weight: 500;
    color: var(--card-black);
    font-size: 20px;
    letter-spacing: -0.5px;
}

/* Remove vertical accent bar from previous design */
.vehicle-price::before {
    display: none;
}

.covered-places {
    font-size: 15px;
    color: #555;
    line-height: 1.8;
    margin-bottom: 10px;
    flex-grow: 0;
    padding: 20px;
    background: #fff;
    border-radius: 12px;
    border-left: 4px solid #198754;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.covered-places strong {
    color: var(--card-black);
    font-size: 14px;
    display: block;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

.book-btn-wrapper {
    margin-top: auto;
    padding-top: 15px;
}

.book-btn-wrapper .theme-btn {
    position: relative;
    overflow: hidden;
    font-weight: 600;
    font-size: 16px;
    padding: 16px 24px;
    border-radius: 12px;
    transition: all 0.3s ease;
    background: var(--card-black);
    color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.book-btn-wrapper .theme-btn:hover {
    background: #333;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.vehicle-type-label {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 400;
    margin-left: 4px;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .rate-header {
        padding: 25px 20px;
    }

    .rate-title {
        font-size: 22px;
    }

    .card-body-content {
        padding: 20px;
    }

    .vehicle-rates {
        padding: 12px 10px;
    }

    .vehicle-price {
        font-size: 18px;
    }

    .pricing-list {
        gap: 10px;
    }
}

/* New Button Cards Styles */
.card-btns {
    display: flex;
    gap: 12px;
    margin-top: auto;
}

.theme-btn.btn-details {
    background: transparent;
    border: 1px solid #1C231F;
    /* Dark Grey/Black */
    color: #1C231F;
    flex: 1;
    padding: 10px 15px;
    font-size: 14px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.theme-btn.btn-details:hover {
    background: #1C231F;
    color: #fff;
}

.theme-btn.btn-book {
    background: #198754;
    /* Black */
    border: 1px solid #000000;
    color: #fff;
    flex: 1;
    padding: 10px 15px;
    font-size: 14px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.theme-btn.btn-book:hover {
    background: #e3781d;
    /* Orange on Hover */
    border-color: #e3781d;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(247, 146, 30, 0.3);
}