/*
 * Page-scoped styles for templates/tours/all_tours.html.
 * Extracted from two inline <style> blocks. Loaded via
 * {% block extra_css %}.
 *
 * .btn-primary / .btn-secondary here are PROJECT-WIDE custom button
 * classes (emerald gradient + outlined), also referenced by CKEditor
 * rich-text content via static/css/ckeditor5_content.css. They are NOT
 * Bootstrap — Bootstrap CSS is no longer loaded by this site.
 */

/* --- Custom button styles --- */

.btn-primary {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #047857 0%, #065f46 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
}

.btn-secondary {
    background: white;
    color: #059669;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    border: 2px solid #059669;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background: #059669;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
}

.btn-cta {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #1f2937;
    padding: 0.75rem 2rem;
    border-radius: 0.5rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-cta:hover {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
}

.btn-outline {
    background: transparent;
    color: #374151;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    border: 2px solid #e5e7eb;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    border-color: #059669;
    color: #059669;
    background: rgba(5, 150, 105, 0.05);
}

/* --- Misc page utilities --- */

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.tab-pane {
    animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.category-tab {
    transition: all 0.3s ease;
}

.category-tab:hover {
    transform: translateY(-2px);
}