/* Predefined routes page styles */
@import url('poi_recommendation_system.css');

/* Page-local overrides or additions can go below if needed */

/* Mini map overlay inside route card image */
.route-card-image .mini-map-overlay {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 96px;
  height: 96px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.12);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  z-index: 3;
  background: #fff;
  pointer-events: none; /* avoid blocking clicks */
}

.route-card-image .mini-map-overlay .leaflet-container {
  width: 100% !important;
  height: 100% !important;
}

@media (max-width: 600px) {
  .route-card-image .mini-map-overlay {
    width: 80px;
    height: 80px;
    right: 8px;
    bottom: 8px;
  }
}

/* Mobile overrides moved from predefined_routes.js */
@media (max-width: 768px) {
    .predefined-routes-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
        padding: 0 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .predefined-routes-list .route-card {
        display: block !important;
        min-height: 420px !important;
        width: 100% !important;
        margin: 0 !important;
        border-radius: 16px !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
        overflow: hidden !important;
        position: relative !important;
        box-sizing: border-box !important;
    }

    .predefined-routes-list .route-card .route-card-image {
        height: 180px !important;
        width: 100% !important;
        border-radius: 16px 16px 0 0 !important;
        background-color: #f3f4f6 !important;
        display: block !important;
        overflow: hidden !important;
    }

    .predefined-routes-list .route-card .route-card-header {
        padding: 24px 16px 16px 16px !important;
        display: block !important;
    }

    .predefined-routes-list .route-card .route-card-title {
        font-size: 1.1rem !important;
        font-weight: 600 !important;
        margin-bottom: 8px !important;
        line-height: 1.3 !important;
    }

    .predefined-routes-list .route-card .route-card-description {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
        color: #666 !important;
        margin: 0 0 20px 0 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 5 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .predefined-routes-list .route-card .route-card-meta {
        padding: 0 16px 20px 16px !important;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    .predefined-routes-list .route-card .route-meta-item {
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 6px 10px !important;
        font-size: 0.85rem !important;
        font-weight: 500 !important;
        border-radius: 8px !important;
        background: rgba(59, 130, 246, 0.08) !important;
        color: #2563eb !important;
        border: 1px solid rgba(59, 130, 246, 0.15) !important;
        min-width: 0 !important;
        white-space: nowrap !important;
        justify-content: flex-start !important;
        box-sizing: border-box !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .predefined-routes-list .route-card .route-meta-item i,
    .predefined-routes-list .route-card .route-meta-item .fas,
    .predefined-routes-list .route-card .route-meta-item .far,
    .predefined-routes-list .route-card .route-meta-item .fab {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 0.8rem !important;
        color: inherit !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .route-media-refresh-btn {
        display: none !important;
        visibility: hidden !important;
    }
}