/* Cocktail page specific styles (moved from base or inline). */

/* Import color variables */
@import url('variables.css');

/* =============================================================================
   🖼️ COCKTAIL IMAGE STYLES
   ============================================================================= */

/* Cocktail card images */
.card-img-top-container {
    position: relative;
    overflow: hidden;
    border-top-left-radius: calc(0.375rem - 1px);
    border-top-right-radius: calc(0.375rem - 1px);
}

.card-img-top {
    transition: transform 0.3s ease;
}

.card:hover .card-img-top {
    transform: scale(1.05);
}

/* Clickable image hover effects */
.card-img-top-container a {
    cursor: pointer;
    display: block;
    position: relative;
}

.card-img-top-container a:hover .card-img-top {
    transform: scale(1.08);
}

.card-img-top-container a:hover .image-placeholder {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Add a subtle overlay effect on hover for images */
.card-img-top-container a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(75, 44, 59, 0.1);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.card-img-top-container a:hover::after {
    opacity: 1;
}

/* Cocktail detail page header image */
.cocktail-header-image {
    max-width: 250px;
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.cocktail-header-image:hover {
    transform: scale(1.02);
}

/* Image placeholder styles */
.image-placeholder {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 2px dashed #dee2e6;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    transition: all 0.3s ease;
}

.image-placeholder:hover {
    border-color: #adb5bd;
    color: #495057;
}

/* =============================================================================
   🃏 COCKTAIL CARD STYLES
   ============================================================================= */

/* Enhanced cocktail card styling */
.cocktail-card {
    border: 1px solid #e3e6f0 !important;
    border-radius: 0.75rem !important;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
    transition: all 0.3s ease;
    background: #fff;
    overflow: hidden;
}

.cocktail-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    border-color: #5a5c69 !important;
}

/* Ensure consistent card heights in grid */
.cocktail-card .card-body {
    padding: 1rem;
    min-height: 200px;
}

.cocktail-card .card-footer {
    padding: 0.75rem 1rem;
    background-color: #f8f9fc !important;
    border-top: 1px solid #e3e6f0 !important;
}

/* Card title styling */
.cocktail-card .card-title {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.5rem;
}

.cocktail-card .card-title a {
    color: #5a5c69 !important;
    text-decoration: none !important;
}

.cocktail-card .card-title a:hover {
    color: #2e59d9 !important;
}

/* Badge styling for tags */
.badge {
    font-size: 0.7rem;
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
    padding: 0.25rem 0.5rem;
}

.badge.small {
    font-size: 0.65rem;
    padding: 0.2rem 0.4rem;
}

/* Grid spacing improvements */
.row.g-4 {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 2rem;
}

/* Responsive image adjustments */
@media (max-width: 768px) {
    .cocktail-header-image {
        max-width: 150px;
    }
    
    .card-img-top-container {
        height: 150px !important;
    }
    
    .cocktail-card .card-body {
        min-height: 180px;
        padding: 0.75rem;
    }
    
    .row.g-4 {
        --bs-gutter-x: 1rem;
        --bs-gutter-y: 1.5rem;
    }
}

@media (max-width: 576px) {
    .cocktail-header-image {
        max-width: 120px;
    }
    
    .card-img-top-container {
        height: 120px !important;
    }
    
    .cocktail-card .card-body {
        min-height: 160px;
        padding: 0.5rem;
    }
    
    .cocktail-card .card-title {
        font-size: 1rem;
    }
}

/* Extra large screens - ensure 4 columns look good */
@media (min-width: 1400px) {
    .cocktail-card .card-body {
        min-height: 220px;
    }
    
    .card-img-top-container {
        height: 220px !important;
    }
}

/* Loading animation for images */
.card-img-top {
    opacity: 1;
    transition: transform 0.3s ease;
}

/* =============================================================================
   📱 RESPONSIVE GRID ENHANCEMENTS
   ============================================================================= */

/* Ensure proper spacing and alignment */
.container {
    max-width: 1400px;
}

/* Column spacing for different screen sizes */
@media (min-width: 1200px) {
    .col-lg-3 {
        max-width: 23%;
        flex: 0 0 23%;
    }
}

/* Text overflow prevention */
.cocktail-card .card-text {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* No cocktails found styling */
.text-center.py-5 {
    padding: 3rem 1rem !important;
    background: #f8f9fc;
    border-radius: 0.75rem;
    border: 1px solid #e3e6f0;
}

/* =============================================================================
   🎯 ENHANCED COCKTAIL DETAIL STYLES
   ============================================================================= */

/* Attribution styling */
.attribution-text {
    font-size: 0.85rem;
    color: #6c757d;
    font-style: italic;
}

.attribution-link {
    color: #007bff;
    text-decoration: none;
}

.attribution-link:hover {
    text-decoration: underline;
    color: #0056b3;
}

/* Enhanced ingredients table */
.ingredients-table {
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.ingredients-table th {
    background-color: #f8f9fa;
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    color: #495057;
}

.ingredients-table td {
    vertical-align: middle;
    border-bottom: 1px solid #dee2e6;
}

.flavor-tag {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    margin: 0.1rem;
    border-radius: 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* =============================================================================
   🎨 DYNAMIC TAG COLORS
   ============================================================================= */

/* Spirit Type Badges */
.badge-spirit {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
}

/* Color Badges - Dynamic based on cocktail color */
.badge-color {
    font-weight: 500;
    font-size: 0.7rem;
    border: 1px solid rgba(0,0,0,0.1);
}

.badge-color[data-color="clear"] { background-color: #f8f9fa; color: #495057; }
.badge-color[data-color="white"] { background-color: #ffffff; color: #495057; border-color: #dee2e6; }
.badge-color[data-color="yellow"] { background-color: #fff3cd; color: #856404; }
.badge-color[data-color="orange"] { background-color: #fd7e14; color: white; }
.badge-color[data-color="red"] { background-color: #dc3545; color: white; }
.badge-color[data-color="pink"] { background-color: #e83e8c; color: white; }
.badge-color[data-color="purple"] { background-color: #6f42c1; color: white; }
.badge-color[data-color="blue"] { background-color: #0d6efd; color: white; }
.badge-color[data-color="green"] { background-color: #198754; color: white; }
.badge-color[data-color="brown"] { background-color: #8b4513; color: white; }
.badge-color[data-color="black"] { background-color: #212529; color: white; }
.badge-color[data-color="gold"] { background-color: #ffd700; color: #495057; }
.badge-color[data-color="silver"] { background-color: #c0c0c0; color: #495057; }
.badge-color[data-color="cream"] { background-color: #f5f5dc; color: #495057; }
.badge-color[data-color="amber"] { background-color: #ffbf00; color: #495057; }

/* Color Pills - Pill-shaped tags with actual colors or white with border */
.badge-color-pill {
    font-weight: 500;
    font-size: 0.7rem;
    border-radius: 50px;
    padding: 0.35em 0.8em;
    border: 2px solid transparent;
    text-transform: capitalize;
    display: inline-block;
}

/* Color-based pill styling */
.badge-color-pill[data-color="clear"] { 
    background-color: transparent; 
    color: white; 
    border-color: #dee2e6; 
}
.badge-color-pill[data-color="white"] { 
    background-color: transparent; 
    color: white; 
    border-color: #ffffff; 
}
.badge-color-pill[data-color="yellow"] { 
    background-color: #fff3cd; 
    color: #856404; 
    border-color: #fff3cd; 
}
.badge-color-pill[data-color="orange"] { 
    background-color: #fd7e14; 
    color: white; 
    border-color: #fd7e14; 
}
.badge-color-pill[data-color="red"] { 
    background-color: #dc3545; 
    color: white; 
    border-color: #dc3545; 
}
.badge-color-pill[data-color="pink"] { 
    background-color: #e83e8c; 
    color: white; 
    border-color: #e83e8c; 
}
.badge-color-pill[data-color="purple"] { 
    background-color: #6f42c1; 
    color: white; 
    border-color: #6f42c1; 
}
.badge-color-pill[data-color="blue"] { 
    background-color: #0d6efd; 
    color: white; 
    border-color: #0d6efd; 
}
.badge-color-pill[data-color="green"] { 
    background-color: #198754; 
    color: white; 
    border-color: #198754; 
}
.badge-color-pill[data-color="brown"] { 
    background-color: #8b4513; 
    color: white; 
    border-color: #8b4513; 
}
.badge-color-pill[data-color="black"] { 
    background-color: #212529; 
    color: white; 
    border-color: #212529; 
}
.badge-color-pill[data-color="gold"] { 
    background-color: #ffd700; 
    color: #495057; 
    border-color: #ffd700; 
}
.badge-color-pill[data-color="silver"] { 
    background-color: #c0c0c0; 
    color: #495057; 
    border-color: #c0c0c0; 
}
.badge-color-pill[data-color="cream"] { 
    background-color: #f5f5dc; 
    color: #495057; 
    border-color: #f5f5dc; 
}
.badge-color-pill[data-color="amber"] { 
    background-color: #ffbf00; 
    color: #495057; 
    border-color: #ffbf00; 
}

/* Non-alcoholic badge styling */
.badge-nonalcoholic {
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
}

/* Mixer Type Badges */
.badge-mixer {
    font-weight: 500;
    font-size: 0.7rem;
}

/* Vibe Tag Colors - Dynamic based on content */
.badge-vibe {
    font-weight: 500;
    font-size: 0.7rem;
    border: 1px solid rgba(0,0,0,0.1);
}

/* Tropical/Summer vibes */
.badge-vibe[data-vibe*="tropical"], 
.badge-vibe[data-vibe*="summer"], 
.badge-vibe[data-vibe*="beach"] { 
    background: linear-gradient(135deg, #20B2AA, #40E0D0); 
    color: white; 
}

/* Cozy/Winter vibes */
.badge-vibe[data-vibe*="cozy"], 
.badge-vibe[data-vibe*="winter"], 
.badge-vibe[data-vibe*="warm"] { 
    background: linear-gradient(135deg, #CD853F, #D2691E); 
    color: white; 
}

/* Party/Celebration vibes */
.badge-vibe[data-vibe*="party"], 
.badge-vibe[data-vibe*="celebration"], 
.badge-vibe[data-vibe*="festive"] { 
    background: linear-gradient(135deg, #FF1493, #FF69B4); 
    color: white; 
}

/* Elegant/Sophisticated vibes */
.badge-vibe[data-vibe*="elegant"], 
.badge-vibe[data-vibe*="sophisticated"], 
.badge-vibe[data-vibe*="classy"] { 
    background: linear-gradient(135deg, #2F4F4F, #708090); 
    color: white; 
}

/* Strong/Bold vibes */
.badge-vibe[data-vibe*="strong"], 
.badge-vibe[data-vibe*="bold"], 
.badge-vibe[data-vibe*="intense"] { 
    background: linear-gradient(135deg, #B22222, #DC143C); 
    color: white; 
}

/* Light/Refreshing vibes */
.badge-vibe[data-vibe*="light"], 
.badge-vibe[data-vibe*="refreshing"], 
.badge-vibe[data-vibe*="crisp"] { 
    background: linear-gradient(135deg, #87CEEB, #B0E0E6); 
    color: #2F4F4F; 
}

/* Sweet vibes */
.badge-vibe[data-vibe*="sweet"], 
.badge-vibe[data-vibe*="dessert"] { 
    background: linear-gradient(135deg, #DDA0DD, #DA70D6); 
    color: white; 
}

/* Sour/Tart vibes */
.badge-vibe[data-vibe*="sour"], 
.badge-vibe[data-vibe*="tart"], 
.badge-vibe[data-vibe*="citrus"] { 
    background: linear-gradient(135deg, #FFD700, #FFA500); 
    color: #2F4F4F; 
}

/* Spicy vibes */
.badge-vibe[data-vibe*="spicy"], 
.badge-vibe[data-vibe*="hot"] { 
    background: linear-gradient(135deg, #FF4500, #FF6347); 
    color: white; 
}

/* Classic vibes */
.badge-vibe[data-vibe*="classic"], 
.badge-vibe[data-vibe*="traditional"], 
.badge-vibe[data-vibe*="vintage"] { 
    background: linear-gradient(135deg, #8B4513, #A0522D); 
    color: white; 
}

/* Modern/Contemporary vibes */
.badge-vibe[data-vibe*="modern"], 
.badge-vibe[data-vibe*="contemporary"], 
.badge-vibe[data-vibe*="craft"] { 
    background: linear-gradient(135deg, #4169E1, #6495ED); 
    color: white; 
}

/* Date Night/Romantic vibes */
.badge-vibe[data-vibe*="romantic"], 
.badge-vibe[data-vibe*="date"], 
.badge-vibe[data-vibe*="intimate"] { 
    background: linear-gradient(135deg, #C71585, #DB7093); 
    color: white; 
}

/* Brunch vibes */
.badge-vibe[data-vibe*="brunch"], 
.badge-vibe[data-vibe*="morning"] { 
    background: linear-gradient(135deg, #F0E68C, #BDB76B); 
    color: #2F4F4F; 
}

/* Shot type - special handling */
.badge-vibe[data-vibe*="shot"] { 
    background: linear-gradient(135deg, #8B0000, #A52A2A); 
    color: white; 
    font-weight: 600;
}

/* Cocktail type - remove "normal drink" as requested */
.badge-vibe[data-vibe*="cocktail"]:not([data-vibe*="shot"]) { 
    background: linear-gradient(135deg, #20B2AA, #5F9EA0); 
    color: white; 
}

/* Default vibe color for unmatched tags */
.badge-vibe:not([data-vibe*="tropical"]):not([data-vibe*="summer"]):not([data-vibe*="beach"]):not([data-vibe*="cozy"]):not([data-vibe*="winter"]):not([data-vibe*="warm"]):not([data-vibe*="party"]):not([data-vibe*="celebration"]):not([data-vibe*="festive"]):not([data-vibe*="elegant"]):not([data-vibe*="sophisticated"]):not([data-vibe*="classy"]):not([data-vibe*="strong"]):not([data-vibe*="bold"]):not([data-vibe*="intense"]):not([data-vibe*="light"]):not([data-vibe*="refreshing"]):not([data-vibe*="crisp"]):not([data-vibe*="sweet"]):not([data-vibe*="dessert"]):not([data-vibe*="sour"]):not([data-vibe*="tart"]):not([data-vibe*="citrus"]):not([data-vibe*="spicy"]):not([data-vibe*="hot"]):not([data-vibe*="classic"]):not([data-vibe*="traditional"]):not([data-vibe*="vintage"]):not([data-vibe*="modern"]):not([data-vibe*="contemporary"]):not([data-vibe*="craft"]):not([data-vibe*="romantic"]):not([data-vibe*="date"]):not([data-vibe*="intimate"]):not([data-vibe*="brunch"]):not([data-vibe*="morning"]):not([data-vibe*="shot"]):not([data-vibe*="cocktail"]) {
    background: linear-gradient(135deg, #6c757d, #868e96);
    color: white;
}

/* =============================================================================
   📱 COCKTAIL CARD VARIATIONS
   ============================================================================= */

/* Low detail cards - for index pages */
.cocktail-card-low {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cocktail-card-low:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.cocktail-card-low .card-title {
    font-size: 1rem;
    font-weight: 600;
}

.cocktail-card-low .badge {
    font-size: 0.65rem;
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
}

/* Medium detail cards - for list detail pages */
.cocktail-card-medium {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cocktail-card-medium:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.cocktail-card-medium .card-title {
    font-size: 1.1rem;
    font-weight: 600;
}

.cocktail-card-medium .badge {
    font-size: 0.7rem;
    margin-right: 0.25rem;
    margin-bottom: 0.25rem;
}

.flavor-sweet { background-color: var(--flavor-sweet-bg); color: var(--flavor-sweet-text); }
.flavor-sour { background-color: var(--flavor-sour-bg); color: var(--flavor-sour-text); }
.flavor-bitter { background-color: var(--flavor-bitter-bg); color: var(--flavor-bitter-text); }
.flavor-spicy { background-color: var(--flavor-spicy-bg); color: var(--flavor-spicy-text); }
.flavor-herbal { background-color: var(--flavor-herbal-bg); color: var(--flavor-herbal-text); }
.flavor-citrus { background-color: var(--flavor-citrus-bg); color: var(--flavor-citrus-text); }
.flavor-fruity { background-color: var(--flavor-fruity-bg); color: var(--flavor-fruity-text); }
.flavor-floral { background-color: var(--flavor-floral-bg); color: var(--flavor-floral-text); }

/* Enhanced action buttons */
.cocktail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-start;
}

.btn-action {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
    border: 1px solid transparent;
}

.btn-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-favorite {
    background-color: #fff;
    color: #dc3545;
    border-color: #dc3545;
}

.btn-favorite:hover {
    background-color: #dc3545;
    color: #fff;
}

.btn-favorite.active {
    background-color: #dc3545;
    color: #fff;
}

.btn-add-to-list {
    background-color: #28a745;
    color: #fff;
    border-color: #28a745;
}

.btn-add-to-list:hover {
    background-color: #218838;
    border-color: #1e7e34;
    color: #fff;
}

.btn-edit {
    background-color: #ffc107;
    color: #212529;
    border-color: #ffc107;
}

.btn-edit:hover {
    background-color: #e0a800;
    border-color: #d39e00;
    color: #212529;
}

/* Instructions styling */
.instructions-text {
    background-color: #f8f9fa;
    padding: 1.5rem;
    border-radius: 0.5rem;
    border-left: 4px solid #007bff;
    font-size: 1.05rem;
    line-height: 1.6;
    margin: 1rem 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .cocktail-actions {
        justify-content: center;
        text-align: center;
    }
    
    .btn-action {
        flex: 1;
        min-width: 120px;
        justify-content: center;
    }
    
    .ingredients-table {
        font-size: 0.9rem;
    }
    
    .flavor-tag {
        font-size: 0.7rem;
        padding: 0.15rem 0.4rem;
    }
}

/* Toast notifications for cocktail actions */
.toast-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1055;
}

.toast {
    border-radius: 0.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.toast-success {
    border-left: 4px solid #28a745;
}

.toast-error {
    border-left: 4px solid #dc3545;
}

/* =============================================================================
   📝 FORM ENHANCEMENTS
   ============================================================================= */

/* Enhanced form controls for better readability */
.form-control, .form-select {
    font-size: 0.95rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus, .form-select:focus {
    border-color: #007bff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.1);
}

/* Form section styling consistency */
.form-section {
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.form-section .section-title {
    color: #495057;
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 1.1rem;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 0.5rem;
}

/* Better spacing for form groups */
.form-section .mb-3 {
    margin-bottom: 1.25rem !important;
}

/* Enhanced help text styling */
.form-text {
    color: #6c757d;
    font-size: 0.875rem;
    margin-top: 0.375rem;
}

/* Dark mode overrides */
[data-theme="dark"] .image-placeholder {
    background: linear-gradient(135deg, var(--bg-gray-100) 0%, var(--bg-gray-200) 100%);
    border: 2px dashed var(--border-color);
    color: var(--text-muted);
}

[data-theme="dark"] .cocktail-header-image {
    box-shadow: 0 4px 8px rgba(75, 44, 59, 0.4);
}

[data-theme="dark"] .card-img-top-container {
    background: var(--bg-gray-100);
}