.routes-grid {
    display: grid;
    gap: 20px;
    width: 100%;
}

/* --- Grid Layouts Styling --- */
.routes-grid { display: grid; gap: 20px; width: 100%; }
.routes-grid.grid-cols-default { grid-template-columns: repeat(3, 1fr); } /* Fallback */

/* Layout 2 (Compact) */
.routes-grid.layout2 .route-card-body { padding: 10px; text-align: center; }
.routes-grid.layout2 .route-title { font-size: 14px; }

/* Layout 3 (Overlay) */
.routes-grid.layout3 .route-card { position: relative; }
.routes-grid.layout3 .route-card-body { position: absolute; bottom: 0; left: 0; width: 100%; background: rgba(0,0,0,0.6); color: #fff; padding: 15px; }
.routes-grid.layout3 .route-title a { color: #fff; }

/* --- Carousel Skins Styling --- */
.routes-carousel-wrapper.skin2 .route-carousel-card { text-align: center; border: 2px solid #eee; }
.routes-carousel-wrapper.skin2 .route-card-price { left: 10px; right: auto; background: #333; }

/* Pagination Position */
.routes-carousel-wrapper.pagination-outside { padding-bottom: 40px; }
.routes-carousel-wrapper.pagination-inside .swiper-pagination { bottom: 10px; }

/* Icon Styles */
.route-meta i { margin-right: 5px; }

/* Meta Styles & Alignments */
.route-meta {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.route-meta svg, 
.route-meta i {
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
}

/* Card Transitions */
.route-card, .route-carousel-card {
    transition: all 0.3s ease-in-out;
}

/* Swiper Container Layout */
.routes-carousel-wrapper {
    position: relative;
    width: 100%;
}

/* Default & Dynamic Columns Layout */
.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
.grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
.grid-cols-7 { grid-template-columns: repeat(7, 1fr); }
.grid-cols-8 { grid-template-columns: repeat(8, 1fr); }
.grid-cols-9 { grid-template-columns: repeat(9, 1fr); }
.grid-cols-10 { grid-template-columns: repeat(10, 1fr); }

/* Card Styling */
.route-card {
    background: #111;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    color: #fff;
    transition: transform 0.3s ease;
}

.route-card:hover {
    transform: translateY(-5px);
}

.route-card-img {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.route-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Price Badge Styling */
.route-price-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #e67e22;
    color: #fff;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 6px;
    z-index: 2;
}

.route-card-body {
    padding: 15px;
}

.route-title {
    margin: 0 0 10px 0;
    font-size: 16px;
}

.route-title a {
    color: #ffffff;
    text-decoration: none;
}

.route-location-info {
    font-size: 13px;
    color: #aaa;
}
/* Route Box Base Styles */
.route-card-box {
    position: relative;
    display: block;
    text-decoration: none !important;
    transition: all 0.3s ease-in-out;
}

.route-card-badge {
    position: absolute;
    z-index: 2;
    display: inline-block;
    transition: all 0.3s ease-in-out;
}

/* Card Hover Animations */
.card-anim-float .route-card-box:hover {
    transform: translateY(-8px);
}

.card-anim-zoom .route-card-box:hover {
    transform: scale(1.03);
}

.card-anim-shadow-grow .route-card-box:hover {
    box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.15);
}

/* Global Responsiveness */
@media (max-width: 1024px) { .routes-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 767px) { .routes-grid { grid-template-columns: repeat(1, 1fr) !important; } }