/**
 * Route Template Button Styling Fixes
 * Addresses white on white button visibility issues
 */

/* Force visible buttons in route templates */
.route-template-card .button,
.route-template-grid .button,
.route-template-editor .button,
.route-actions .button {
    /* Ensure buttons are always visible */
    opacity: 1 !important;
    visibility: visible !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border-radius: 6px !important;
    padding: 10px 20px !important;
    display: inline-block !important;
    text-align: center !important;
    vertical-align: middle !important;
    min-height: 36px !important;
    line-height: 1.4 !important;
}

/* Primary button styling - Blue theme */
.route-template-card .button-primary,
.route-template-grid .button-primary,
.route-template-editor .button-primary,
.route-actions .button-primary,
.button.view-route,
.button.calculate-route {
    background: #2271b1 !important;
    color: white !important;
    border: 2px solid #2271b1 !important;
    text-shadow: none !important;
    box-shadow: 0 2px 4px rgba(34, 113, 177, 0.2) !important;
}

.route-template-card .button-primary:hover,
.route-template-grid .button-primary:hover,
.route-template-editor .button-primary:hover,
.route-actions .button-primary:hover,
.button.view-route:hover,
.button.calculate-route:hover {
    background: #135e96 !important;
    border-color: #135e96 !important;
    color: white !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(34, 113, 177, 0.4) !important;
    text-decoration: none !important;
}

/* Secondary button styling - Outline style */
.route-template-card .button-secondary,
.route-template-grid .button-secondary,
.route-template-editor .button-secondary,
.route-actions .button-secondary,
.button.use-template,
.button.optimize-route {
    background: white !important;
    color: #2271b1 !important;
    border: 2px solid #2271b1 !important;
    text-shadow: none !important;
    box-shadow: 0 2px 4px rgba(34, 113, 177, 0.1) !important;
}

.route-template-card .button-secondary:hover,
.route-template-grid .button-secondary:hover,
.route-template-editor .button-secondary:hover,
.route-actions .button-secondary:hover,
.button.use-template:hover,
.button.optimize-route:hover {
    background: #2271b1 !important;
    color: white !important;
    border-color: #2271b1 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(34, 113, 177, 0.3) !important;
    text-decoration: none !important;
}

/* Override any theme or WordPress admin styles */
.wp-admin .route-template-card .button,
.wp-admin .route-template-grid .button,
.wp-admin .route-template-editor .button,
.wp-admin .route-actions .button {
    font-family: inherit !important;
    font-size: 14px !important;
}

/* Transport mode selector styling */
.transport-mode-container {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    margin: 15px 0;
    border: 1px solid #e9ecef;
}

.transport-mode-container label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 8px;
    display: block;
}

.transport-mode-selector {
    width: 100%;
    padding: 8px 12px;
    border: 2px solid #ced4da;
    border-radius: 6px;
    background-color: white;
    font-size: 14px;
    color: #495057;
    transition: border-color 0.3s ease;
}

.transport-mode-selector:focus {
    border-color: #2271b1;
    outline: none;
    box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.1);
}

/* Route statistics styling improvements */
.route-stats {
    background: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    padding: 20px !important;
    margin: 15px 0 !important;
}

.route-stats h4 {
    color: #495057 !important;
    margin-bottom: 15px !important;
}

.route-stats table {
    width: 100% !important;
}

.route-stats th,
.route-stats td {
    padding: 8px 12px !important;
    color: #495057 !important;
}

/* Map container improvements */
#route-map {
    border: 2px solid #e9ecef !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

/* Featured route badge */
.featured-badge {
    background: linear-gradient(135deg, #ffc107 0%, #ff8c00 100%) !important;
    color: #212529 !important;
    font-weight: 700 !important;
    text-shadow: none !important;
}

/* Difficulty badges */
.difficulty-badge.easy {
    background: #d1f2eb !important;
    color: #0c5460 !important;
}

.difficulty-badge.moderate {
    background: #fff3cd !important;
    color: #856404 !important;
}

.difficulty-badge.challenging {
    background: #f8d7da !important;
    color: #721c24 !important;
}

/* Responsive improvements */
@media (max-width: 768px) {
    .route-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    .route-actions .button {
        width: 100% !important;
        margin-right: 0 !important;
    }

    .transport-mode-container {
        margin: 10px 0 !important;
        padding: 10px !important;
    }
}

/* Ensure visibility on all backgrounds */
.button {
    box-sizing: border-box !important;
}

/* Fix any potential conflicts with WordPress admin styles */
.wp-admin .button {
    height: auto !important;
}

/* Loading state for buttons */
.button.loading {
    opacity: 0.7 !important;
    cursor: not-allowed !important;
}

.button.loading:hover {
    transform: none !important;
}