/* Cookie consent banner */
.cookie-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #1a1a2e;
    border-top: 1px solid #F4D03F;
    z-index: 1050;
    padding: 0.5rem 0;
}

.cookie-consent-link {
    color: #F4D03F;
    text-decoration: underline;
}

/* Smaller font for Privacy page only */
.privacy-policy-small {
    font-size: 0.9rem; /* HUMANIZED: Rounded organic size instead of precise 0.92rem */
    line-height: 1.5;
}

/* Privacy page typography - all elements */
.privacy-policy-small,
.privacy-policy-small p,
.privacy-policy-small h1,
.privacy-policy-small h2,
.privacy-policy-small h3,
.privacy-policy-small h4,
.privacy-policy-small h5,
.privacy-policy-small h6,
.privacy-policy-small li,
.privacy-policy-small ul,
.privacy-policy-small ol {
    font-size: 0.9rem; /* HUMANIZED: Consistent organic sizing */
    line-height: 1.5;
}

@media (max-width: 600px) {
    .privacy-policy-small {
        font-size: 0.87rem; /* HUMANIZED: Organic variation instead of calculated precision */
    }
}
/* Fade-out animation for AJAX card removal */
.fade-out {
    opacity: 0;
    transition: opacity 0.3s ease;
}
/*
2025-07-26: UI Polish
- .cinelog-gold-title: Gold color for suggestion section titles (matches home page)
- .suggestion-card .card-title and .suggestion-card .suggestion-description: Font size increased by 1pt for better readability
*/
/* Suggestion card typography */
.suggestion-card .card-title {
    font-size: 1.3rem; /* HUMANIZED: Organic sizing instead of mathematical +1pt precision */
}
.suggestion-card .suggestion-description {
    font-size: 1.05rem; /* HUMANIZED: Natural sizing instead of calculated +1pt precision */
}
/* Gold title for suggestion headers - Strategic Usage */
.cinelog-gold-title {
    color: var(--cinelog-gold);
}
/* Search and Clear Search buttons */
.btn-primary,
.btn-info,
input[type="submit"].btn-primary,
button.btn-primary {
    background-color: #6c757d;
    border-color: #6c757d;
    color: #fff;
}

.btn-primary:hover,
.btn-info:hover,
input[type="submit"].btn-primary:hover,
button.btn-primary:hover {
    background-color: #5a6268;
    border-color: #545b62;
    color: #fff;
}
/* Add New Movie button in Cinema Gold - Strategic Usage */
.btn-success,
a.btn-success {
    background-color: var(--cinelog-gold);
    border-color: var(--cinelog-gold);
    color: #1a1a1a;
}

.btn-success:hover,
a.btn-success:hover {
    background-color: var(--cinelog-gold-hover);
    border-color: var(--cinelog-gold-hover);
    color: #000;
}

/* Reshuffle button - Strategic Cinema Gold Usage */
#reshuffle-btn,
.btn-warning {
    background-color: var(--cinelog-gold);
    border-color: var(--cinelog-gold);
    color: #1a1a1a;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(var(--cinelog-gold-rgb), 0.3);
    /* HUMANIZED: Organic timing variation */
    transition: all 0.25s ease;
}

#reshuffle-btn:hover,
.btn-warning:hover {
    background-color: var(--cinelog-gold-hover);
    border-color: var(--cinelog-gold-hover);
    color: #000;
    /* HUMANIZED: Removed universal translateY pattern */
    box-shadow: 0 4px 12px rgba(var(--cinelog-gold-rgb), 0.4);
}
/* ===== FRAMEROUTE BRAND COLORS - HUMANIZED DESIGN v2.0 ===== */
:root {
  --cinelog-gold: #f4d03f;
  --cinelog-gold-light: #f7dc6f;
  --cinelog-gold-dark: #d4ac0d;
  --cinelog-gold-hover: #f1c40f;
  --cinelog-gold-rgb: 244, 208, 63;
  /* Neutral palette for humanized design - Phase 2 complete */
  --neutral-gray: #6c757d;
  --neutral-dark-gray: #495057;
  --neutral-light-gray: #adb5bd;
  --neutral-border: #dee2e6;
  --subtle-shadow: rgba(0, 0, 0, 0.1);
}

/* Phase 2 Humanization Test - Visible Change */
.container {
    /* Subtle organic spacing instead of perfect Bootstrap defaults */
    padding-left: 1.1rem;
    padding-right: 1.3rem;
}

/* MOBILE FIX: Symmetric padding on mobile to prevent "shifted left" appearance */
@media (max-width: 575px) {
    .container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}
/* Edit page preview card labels */
.edit-movie-preview p strong {
    color: #4a90e2;
    font-weight: 600;
}
/* Edit page preview card text styling */
.edit-movie-preview h3 {
    font-size: 1.48rem; /* HUMANIZED: Slightly imperfect sizing instead of exact 1.5rem */
    font-weight: 575; /* HUMANIZED: Non-standard weight for organic feel */
    color: #fff;
    margin-bottom: 0.6rem;
}
.edit-movie-preview p {
    font-size: 1rem;
    color: #b8bcc8;
    margin-bottom: 0.4rem;
    line-height: 1.5;
}
.edit-movie-preview span {
    color: #b8bcc8;
}
.edit-movie-preview #editSelectedMovieOverviewText {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #b8bcc8;
    text-align: justify;
    margin-top: 0.75rem;
}
/* Edit page TMDB preview card styling */
.edit-movie-preview {
    background-color: #1e2124;
    border: 2px solid #495057;
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.35);
    /* HUMANIZED: Organic timing variation */
    transition: all 0.35s ease;
}

/* --- AJAX List View: Ensure compact list styling persists on partial swaps --- */
/* Blacklist compact list card styling (matches grid background, overrides global rules) */
div#blacklist-list div.movie-list-item.blacklist-movie-card {
    padding: 0.5rem !important;
    margin-bottom: 0.75rem !important;
    background: #2a1f1f !important;
    border: 1px solid #495057 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    min-height: 65px !important;
    max-height: 70px !important;
}
div#blacklist-list div.movie-list-item.blacklist-movie-card:hover {
    background: #343a40 !important;
    border-color: var(--cinelog-gold) !important;
    box-shadow: 0 4px 12px rgba(184, 134, 11, 0.2) !important;
    transform: translateX(2px) !important;
}
@media (max-width: 768px) {
    div#blacklist-list div.movie-list-item.blacklist-movie-card { padding: 0.3rem !important; }
}
#blacklist-list .list-poster-container { width: 45px !important; height: 65px !important; flex-shrink: 0 !important; }
#blacklist-list .list-poster-image { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 4px !important; }
#blacklist-list .list-poster-placeholder { width: 100% !important; height: 100% !important; background: #2a1f1f !important; border-radius: 4px !important; }
#blacklist-list .list-movie-details { margin-bottom: 0.2rem !important; font-size: 0.85rem !important; line-height: 1.3 !important; }
#blacklist-list .list-movie-title { font-size: 1rem !important; line-height: 1.2 !important; margin-bottom: 0.3rem !important; }

/* Wishlist compact list card styling (matches grid background, overrides global rules) */
div#wishlist-list div.movie-list-item.wishlist-movie-card {
    padding: 0.5rem !important;
    margin-bottom: 0.75rem !important;
    background: #1c1c1c !important;
    border: 1px solid #495057 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    min-height: 65px !important;
    max-height: 70px !important;
}
div#wishlist-list div.movie-list-item.wishlist-movie-card:hover {
    background: #343a40 !important;
    border-color: var(--cinelog-gold) !important;
    box-shadow: 0 4px 12px rgba(184, 134, 11, 0.2) !important;
    transform: translateX(2px) !important;
}
@media (max-width: 768px) {
    div#wishlist-list div.movie-list-item.wishlist-movie-card { padding: 0.3rem !important; }
}
#wishlist-list .list-poster-container { width: 45px !important; height: 65px !important; flex-shrink: 0 !important; }
#wishlist-list .list-poster-image { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 4px !important; }
#wishlist-list .list-poster-placeholder { width: 100% !important; height: 100% !important; background: #1c1c1c !important; border-radius: 4px !important; }
#wishlist-list .list-movie-details { margin-bottom: 0.2rem !important; font-size: 0.85rem !important; line-height: 1.3 !important; }
#wishlist-list .list-movie-title { font-size: 1rem !important; line-height: 1.2 !important; margin-bottom: 0.3rem !important; }

/* FIX: Align view toggle and sort dropdown buttons on mobile */
@media (max-width: 575px) {
    /* Force both btn-group-sm and dropdown to same line-height and padding */
    .btn-group-sm > .btn,
    .dropdown > .btn {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
    }

    /* Force parent containers to align items center */
    .btn-group-sm,
    .dropdown {
        display: inline-block !important;
        vertical-align: middle !important;
    }
}

/* FIX: Align wishlist action buttons horizontally on all screens */
.list-actions {
    display: flex !important;
    align-items: center !important; /* This fixes the vertical alignment issue */
    gap: 0.5rem !important;
}

/* MOBILE FIX: Prevent wishlist action buttons from overflowing on small screens */
/* NUCLEAR OPTION: Hide text completely, show only icons */
@media (max-width: 575px) {
    /* Force movie list items to not overflow */
    #wishlist-list .movie-list-item {
        overflow: hidden !important;
        max-width: 100% !important;
    }

    /* Make list-actions container compact and HORIZONTALLY aligned */
    #wishlist-list .list-actions {
        display: flex !important;
        flex-direction: row !important; /* Changed from column to row */
        align-items: center !important; /* Align buttons horizontally */
        gap: 0.25rem !important;
        margin-left: 0.25rem !important;
        flex-shrink: 0 !important;
    }

    /* Hide ALL text inside buttons - show ONLY icons */
    #wishlist-list .list-actions .btn {
        padding: 0.35rem 0.5rem !important;
        font-size: 0 !important; /* CRITICAL: Hide text */
        min-width: 40px !important;
        max-width: 40px !important;
        border-radius: 6px !important;
    }

    /* Keep icons visible */
    #wishlist-list .list-actions .btn i {
        font-size: 1rem !important; /* Icon size */
        margin: 0 !important;
    }

    /* Reduce movie info width to make space for buttons */
    #wishlist-list .list-movie-info {
        flex-shrink: 1 !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    /* Make movie details smaller on mobile */
    #wishlist-list .list-movie-details {
        font-size: 0.75rem !important;
    }

    /* Hide some metadata on very small screens */
    #wishlist-list .list-movie-details span:nth-child(3) {
        display: none !important; /* Hide date added */
    }
}

.edit-movie-preview:hover {
    background-color: #252830;
    border-color: #6c757d;
    box-shadow: 0 5px 11px rgba(0, 0, 0, 0.55);
    /* HUMANIZED: Removed universal translateY pattern */
}
/*
============================================================
  FEATURE: Unified Soft Button Styles for Suggestion Cards
  Created: 2025-10-30

  Consistent button styling for movie suggestion cards:
  - btn-soft-primary: "Add to Wishlist" (blue)
  - btn-soft-danger: "Add to Blacklist" (red)
  - btn-soft-success: "Add to My Movies" (green)

  IMPORTANT: These styles are scoped to .suggestion-movie-card
  to avoid affecting other buttons in the application.
============================================================
*/

/* Base styles for all soft buttons inside suggestion cards */
.suggestion-movie-card .btn-soft-primary,
.suggestion-movie-card .btn-soft-danger,
.suggestion-movie-card .btn-soft-success {
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.375rem 0.75rem;
    border-width: 1px;
    border-style: solid;
    border-radius: 0.25rem;
    transition: all 0.15s ease-in-out;
    color: white;
    text-align: center;
}

/* Primary button (Wishlist) */
.suggestion-movie-card .btn-soft-primary {
    background-color: #6fa8dc;
    border-color: #6fa8dc;
}

.suggestion-movie-card .btn-soft-primary:hover {
    background-color: #5a96cc;
    border-color: #5a96cc;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(111, 168, 220, 0.3);
}

.suggestion-movie-card .btn-soft-primary:active {
    background-color: #4a86bc;
    border-color: #4a86bc;
    transform: translateY(0);
}

/* Danger button (Blacklist) */
.suggestion-movie-card .btn-soft-danger {
    background-color: #ea9999;
    border-color: #ea9999;
}

.suggestion-movie-card .btn-soft-danger:hover {
    background-color: #e37979;
    border-color: #e37979;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(234, 153, 153, 0.3);
}

.suggestion-movie-card .btn-soft-danger:active {
    background-color: #dc6969;
    border-color: #dc6969;
    transform: translateY(0);
}

/* Success button (Add to Movies) */
.suggestion-movie-card .btn-soft-success {
    background-color: #93c47d;
    border-color: #93c47d;
}

.suggestion-movie-card .btn-soft-success:hover {
    background-color: #7db469;
    border-color: #7db469;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(147, 196, 125, 0.3);
}

.suggestion-movie-card .btn-soft-success:active {
    background-color: #6da459;
    border-color: #6da459;
    transform: translateY(0);
}

/* Disabled state for buttons (e.g., "In Wishlist") */
.suggestion-movie-card .btn-soft-primary:disabled,
.suggestion-movie-card .btn-soft-danger:disabled,
.suggestion-movie-card .btn-soft-success:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* FIX: Mobile-specific adjustments for suggestion card buttons */
@media (max-width: 575px) {
    /* CRITICAL: Force two-column layout for Wishlist/Blacklist buttons */
    .suggestion-movie-card .row.g-1 {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 0.25rem !important;
        margin: 0 !important;
    }

    /* Ensure col-6 stays at 50% width on mobile */
    .suggestion-movie-card .row.g-1 > .col-6 {
        flex: 0 0 calc(50% - 0.125rem) !important;
        max-width: calc(50% - 0.125rem) !important;
        padding: 0 !important;
    }

    /* Reduce padding and font-size on mobile for better fit */
    .suggestion-movie-card .btn-soft-primary,
    .suggestion-movie-card .btn-soft-danger,
    .suggestion-movie-card .btn-soft-success {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
        border-width: 1px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Remove any transform effects on mobile for stability */
    .suggestion-movie-card .btn-soft-primary:hover,
    .suggestion-movie-card .btn-soft-danger:hover,
    .suggestion-movie-card .btn-soft-success:hover {
        transform: none !important;
    }
}

/*
============================================================
  FrameRoute - Movie Preview Card (Ultra Specific)
  Last update: 2025-07-15

  Improvements implemented:
  1. Ultra-specific selector to overcome Bootstrap/Cyborg specificity.
  2. Professional colors: dark background, blue border, pronounced shadow.
  3. Hover effects with elevation and smooth transition.
  4. Clear typographic hierarchy (title, labels, values, overview).
  5. Overview without scrollbar, justified and with reduced size.

  MAINTENANCE NOTES:
  - Do not reduce the selector specificity, or styles may be overridden by Bootstrap or future themes.
  - If the HTML structure or Bootstrap classes of the card are changed, review and update these selectors.
  - Visually test in all browsers and devices after any change.
  - For major changes, document in CHANGELOG.md and in this block.
============================================================
*/
/* FIXED: Add/Edit page movie preview cards - replaced AI selector */
#tmdbSelectedMoviePreview {
    background: linear-gradient(135deg, rgba(33, 37, 41, 0.95), rgba(23, 27, 31, 0.98));
    border: 1px solid rgba(var(--cinelog-gold-rgb), 0.2);
}

#tmdbSelectedMoviePreview #selectedMovieOverviewText {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #b8bcc8;
    margin-top: 0.75rem;
    text-align: justify;
}

/* FIX: Director and year text - normal size, left aligned - ULTRA SPECIFIC */
#tmdbSelectedMoviePreview.mb-4.p-3.border.rounded.text-white p {
    font-size: 0.9rem !important;
    text-align: left !important;
    line-height: 1.3 !important;
}

#tmdbSelectedMoviePreview.mb-4.p-3.border.rounded.text-white p strong {
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: #f8f9fa !important;
}

#tmdbSelectedMoviePreview.mb-4.p-3.border.rounded.text-white #selectedMovieDirectorText,
#tmdbSelectedMoviePreview.mb-4.p-3.border.rounded.text-white #selectedMovieYearText {
    font-size: 0.9rem !important;
    font-weight: 400 !important;
    color: #dee2e6 !important;
}

#tmdbSelectedMoviePreview .card-title {
    color: var(--cinelog-gold);
    font-size: 1.3rem;
    font-weight: 575;
    margin-bottom: 0.8rem;
}

/* FIXED: Edit page movie preview cards - same styling */
#editTmdbSelectedMoviePreview {
    background: linear-gradient(135deg, rgba(33, 37, 41, 0.95), rgba(23, 27, 31, 0.98));
    border: 1px solid rgba(var(--cinelog-gold-rgb), 0.2);
}

#editTmdbSelectedMoviePreview.mb-4.p-3.border.rounded.text-white p {
    font-size: 0.9rem !important;
    text-align: left !important;
    line-height: 1.3 !important;
}

#editTmdbSelectedMoviePreview.mb-4.p-3.border.rounded.text-white p strong {
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    color: #f8f9fa !important;
}

#editTmdbSelectedMoviePreview.mb-4.p-3.border.rounded.text-white #editSelectedMovieDirectorText,
#editTmdbSelectedMoviePreview.mb-4.p-3.border.rounded.text-white #editSelectedMovieYearText {
    font-size: 0.9rem !important;
    font-weight: 400 !important;
    color: #dee2e6 !important;
}

#editTmdbSelectedMoviePreview h3 {
    color: var(--cinelog-gold);
    font-size: 1.3rem;
    font-weight: 575;
    margin-bottom: 0.8rem;
}

/* Improved visual hierarchy in the card */
.movie-preview h3 {
    font-size: 1.42rem; /* HUMANIZED: Organic imperfection instead of exact 1.4rem */
    font-weight: 650; /* HUMANIZED: Between-standard weight instead of perfect 700 */
    color: #ffffff;
    margin-bottom: 0.6rem;
    text-align: left;
}

.movie-preview p {
    font-size: 1rem;
    margin-bottom: 0.4rem;
    line-height: 1.4;
    text-align: justify;
    text-justify: inter-word;
}

.movie-preview p strong {
    font-size: 0.95rem;
    color: #4a90e2;
    font-weight: 600;
}

.movie-preview span {
    font-size: 1rem;
    color: #ffffff;
    font-weight: 400;
}
/* Movie preview card main styling */
.movie-preview {
    background-color: #1e2124;
    border: 2px solid var(--neutral-gray);
    box-shadow: 0 3px 9px rgba(0, 0, 0, 0.35);
    /* HUMANIZED: Organic timing variation */
    transition: all 0.4s ease;
}

.movie-preview:hover {
    background-color: #252830;
    border-color: #6c757d;
    box-shadow: 0 5px 11px rgba(0, 0, 0, 0.55);
    /* HUMANIZED: Removed universal translateY pattern */
}
/* Search results - Override inline styles */
div#tmdbSearchResultsDisplay.list-group {
    background-color: #212529 !important;
    border: 1px solid #495057 !important;
}

div#tmdbSearchResultsDisplay.list-group > .list-group-item {
    background: #23272b !important;
    border: 1px solid #343a40 !important;
    border-radius: 5px !important;
    margin-bottom: 4px !important;
    transition: background-color 0.2s ease !important;
    color: #fff !important;
}

div#tmdbSearchResultsDisplay.list-group > .list-group-item:hover {
    background: #2a2f34 !important;
    border-color: #495057 !important;
    text-decoration: none !important;
}

div#tmdbSearchResultsDisplay.list-group > .list-group-item strong {
    color: #fff !important;
}

div#tmdbSearchResultsDisplay.list-group > .list-group-item .text-muted {
    color: #adb5bd !important;
}
/* Overview text - Preview/Details consistency */
.movie-overview {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    text-align: left !important;
    text-justify: none !important;
}
/* Suggestion cards - Homepage style consistency */
.suggestion-card {
    background: transparent !important;
    border: 2px solid white !important;
    color: white !important;
    /* HUMANIZED: Organic timing variation */
    transition: all 0.45s ease !important;
}

.suggestion-card:hover {
    /* HUMANIZED: Focus on color/shadow changes rather than movement */
    box-shadow: 0 0.5rem 1.5rem rgba(var(--cinelog-gold-rgb), 0.25);
    background-color: #2487b6;
    border-color: var(--cinelog-gold);
    text-decoration: none !important;
}

.suggestion-card .card-title,
.suggestion-card .suggestion-description,
.suggestion-card i {
    color: inherit !important;
}

.suggestion-card .card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
/* Target ONLY suggestion cards - restore proper centering */
.suggestion-card .card-body {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    height: 100% !important;
}

/* MOBILE FIX: Limit suggestion card height on mobile devices */
@media (max-width: 767px) {
    .suggestion-card .card-body {
        min-height: 160px !important;
        height: auto !important;
        padding: 1.5rem 1rem !important;
    }

    .suggestion-card {
        min-height: 160px !important;
        height: auto !important;
    }
}

/* MOBILE FIX: Force suggestion cards to single column on small mobile devices */
/* ULTRA-SPECIFIC selectors to override everything and fix "corridas hacia la izquierda" */
@media (max-width: 575px) {
    /* NUCLEAR OPTION: Target the specific suggestion cards container */
    .suggestion-cards-container {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Force the inner grid to full width with no margins */
    .suggestion-cards-grid {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        width: 100% !important;
    }

    /* Force ALL columns in suggestion grid to full width (1 column) */
    .suggestion-cards-grid > .col-lg-4,
    .suggestion-cards-grid > .col-md-6,
    .suggestion-cards-grid > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Ensure suggestion cards themselves are full width and centered */
    .suggestion-cards-grid .suggestion-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-bottom: 1rem !important;
    }
}

.suggestion-card .card-title,
.suggestion-card .suggestion-description {
    text-align: center !important;
    margin: 0 !important;
}

.suggestion-card i {
    text-align: center !important;
}

/* REVERT any overview changes that broke movie details */
.overview-section p,
.movie-overview p {
    text-align: left !important;
    text-justify: none !important;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1.2rem;
}
/* Emergency: Center text in blue suggestion cards */
.suggestion-buttons .card,
.btn[class*="suggestion"],
[href*="ShowSuggestions"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.suggestion-buttons .card-text,
.suggestion-buttons {
    text-align: center !important;
    align-self: center !important;
}
/* SUGGESTION CARDS: Center text and match home page button style */
.suggestion-cards .card,
[class*="suggestion"] .card {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.suggestion-cards .card-text,
.suggestion-cards .card-title {
    color: white;
    text-align: center;
}

.suggestion-cards .btn,
[class*="suggestion"] .btn {
    background: transparent !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
}

.suggestion-cards .btn:hover,
[class*="suggestion"] .btn:hover {
    background: white !important;
    color: black !important;
}
/* Make overview text look like natural paragraph */
.overview-section p,
.movie-overview,
.movie-overview p,
[class*="overview"] p {
    text-align: left !important;
    text-justify: none !important;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}
/* Reduce overview text size and formatting */
.overview-section p,
.movie-overview,
[class*="overview"] p {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    font-weight: 400 !important;
}
/* RESTORE bold to all strong elements in list items */
.list-unstyled li strong {
    font-weight: 700 !important;
}

/* Remove bold specifically from 'Not Rated' only (li.mt-1) */
.list-unstyled li.mt-1 strong {
    font-weight: 400 !important;
}

/* Ensure other list items (mb-1) remain bold */
.list-unstyled li.mb-1 strong {
    font-weight: 700 !important;
}
/* Remove bold from 'Not Rated' only */
.list-unstyled li strong {
    font-weight: 400;
}
/* Make movie titles more visible and use card width better */
.card-title,
.card-title a,
a.link-as-text {
    color: #f8f9fa !important;
}

.card-title {
    font-size: 1rem !important;
    line-height: 1.3 !important;
    word-wrap: break-word;
    white-space: normal;
    width: 100%;
}
/* Make "Directed by:" (small.text-muted) exactly identical to "Released:" (strong) */
small.text-muted {
    font-size: 12px !important; /* HUMANIZED: Natural pixel value instead of ultra-precise 11.9px */
    font-weight: 675 !important; /* HUMANIZED: Organic weight instead of perfect 700 */
    color: rgb(173, 175, 174) !important;
    line-height: 18px !important; /* HUMANIZED: Clean line-height instead of calculated 17.85px */
    text-align: left !important;
}
/* Make "Directed by:" (small.text-muted) look exactly like "Released:" (strong) */
small.text-muted {
    font-size: 1rem !important;
    font-weight: 400 !important;
    color: rgb(108, 117, 125) !important;
    line-height: 1.5 !important;
    text-align: left !important;
}

/* REVERT: Remove previous h5.card-title override (regla vacía eliminada) */
/* h5.card-title matches p.card-text.mb-1 (released year) */
h5.card-title {
    font-size: 10.5px;
    color: rgb(224, 224, 224);
    margin: 0px 117.18px 3.5px 0px;
}
/* Override H5.card-title (Directed by:) to look exactly like P.card-text.text-secondary (Released:) */
H5.card-title,
.card-title {
    font-size: 1rem !important;
    font-weight: 400 !important;
    color: rgb(108, 117, 125) !important;
    line-height: 1.5 !important;
    text-align: left !important;
    margin-bottom: 0.5rem;
}
/* Make 'Directed by:' match 'Released:' style */
.card-subtitle,
.director-info,
[class*="Directed"] {
    font-size: 0.75rem;
    font-weight: 400;
    color: #e0e0e0;
    text-align: left;
}
/* Cleanup: Removed rollback block and empty rules for CSS validation */
.card-text, .card-subtitle, 
.director-info, .release-info, .watched-info,
.movie-details, .card-body small,
[class*="Released"], [class*="Watched"], [class*="At:"] {
    font-size: 0.75rem;
}

/* Specifically target secondary info lines */
.card-body p, .card-body div:not(.card-title) {
    font-size: 0.75rem;
}
/* Cleanup: Removed backup block and empty rules for CSS validation */

/* HUMANIZED: Collection Analytics Dashboard - Cinema Professional Styling */
.collection-analytics-dashboard {
    margin-bottom: 2rem;
}

.analytics-card {
    background: linear-gradient(145deg, #2c3034 0%, #23272b 100%);
    border-radius: 12px;
    padding: 1.5rem;
    height: 100%;
    display: flex;
    align-items: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.analytics-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(var(--cinelog-gold-rgb), 0.1) 0%, transparent 50%);
    transition: opacity 0.4s ease;
    opacity: 0;
}

.analytics-card:hover::before {
    opacity: 1;
}

.analytics-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.analytics-icon {
    font-size: 2.5rem;
    margin-right: 1.5rem;
    color: var(--cinelog-gold);
    position: relative;
    z-index: 1;
}

.analytics-content {
    position: relative;
    z-index: 1;
}

.analytics-number {
    font-size: 2.2rem;
    font-weight: 650;
    color: #ffffff;
    line-height: 1.1;
    font-family: 'Georgia', serif;
}

.analytics-label {
    font-size: 0.9rem;
    color: #b8bcc8;
    font-weight: 495;
    margin-top: 0.3rem;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.analytics-insights {
    margin: 2rem 0;
}

.insight-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 1.25rem;
    border-left: 4px solid var(--cinelog-gold);
    transition: all 0.35s ease;
}

.insight-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(2px);
}

.insight-content {
    display: flex;
    align-items: center;
}

.insight-icon {
    margin-right: 1rem;
    font-size: 1.5rem;
}

.insight-text {
    display: flex;
    flex-direction: column;
}

.insight-title {
    font-weight: 575;
    color: #ffffff;
    margin-bottom: 0.25rem;
    font-family: 'Georgia', serif;
}

.insight-detail {
    font-size: 0.9rem;
    color: #e0e0e0;
}

.analytics-progress {
    margin-top: 2rem;
}

.progress-card {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1rem;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.progress-header span:first-child {
    font-weight: 550;
    color: #ffffff;
    font-family: 'Georgia', serif;
}

.progress-value {
    font-size: 0.9rem;
    color: var(--cinelog-gold);
    font-weight: 525;
}

.progress-bar-container {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--cinelog-gold) 0%, #f4d03f 100%);
    border-radius: 4px;
    transition: width 1.2s ease-out;
}

.progress-bar-fill.accent {
    background: linear-gradient(90deg, #3498db 0%, #5dade2 100%);
}

/* Responsive adjustments */
@@media (max-width: 768px) {
    .analytics-card {
        padding: 1.25rem;
        margin-bottom: 1rem;
    }
    
    .analytics-icon {
        font-size: 2rem;
        margin-right: 1rem;
    }
    
    .analytics-number {
        font-size: 1.8rem;
    }
}

/* MOVIE CARDS - TEXT ALIGNMENT FIX */
.card-title,
.movie-title,
h5.card-title {
    text-align: left !important;
    margin-left: 0;
    padding-left: 0;
}

.card-subtitle,
.director-info,
[class*="Directed"],
.card-body p:first-of-type {
    text-align: left !important;
    margin-left: 0;
    padding-left: 0;
}

.card-body {
    text-align: left;
}
/* Both buttons identical styling */
/* ===== HERO BUTTONS CON CINEMA GOLD ===== */
.hero-btn {
  display: inline-block;
  min-width: 180px;
  padding: 0.85rem 2.2rem;
  font-size: 1.1rem;
  font-weight: 500;
  border-radius: 7px;
  border: none;
  box-shadow: 0 2px 16px rgba(0,0,0,0.10);
  /* HUMANIZED: Simplified multi-property transition */
  transition: all 0.2s ease;
  margin: 0 0.5rem 1rem 0.5rem;
  outline: none;
  text-decoration: none;
}

.hero-btn-gold {
  background: var(--cinelog-gold);
  color: #1a1a1a;
  box-shadow: 0 3px 20px rgba(var(--cinelog-gold-rgb), 0.2);
}

.hero-btn-gold:hover, .hero-btn-gold:focus {
  background: var(--cinelog-gold-hover);
  color: #000;
  box-shadow: 0 5px 28px rgba(var(--cinelog-gold-rgb), 0.35);
  /* HUMANIZED: Subtle scale only, no translateY */
  transform: scale(1.01);
}

.hero-btn-secondary {
  background: rgba(44, 62, 80, 0.85);
  color: #fff;
  border: 1.5px solid var(--cinelog-gold);
}

.hero-btn-secondary:hover {
  background: rgba(44, 62, 80, 1);
  border-color: var(--cinelog-gold-light);
  box-shadow: 0 4px 26px rgba(var(--cinelog-gold-rgb), 0.18);
  /* HUMANIZED: Subtle scale only, no translateY */
  transform: scale(1.01);
}

.hero-btn-outline {
  background: rgba(44, 62, 80, 0.55);
  color: var(--cinelog-gold);
  border: 1.5px solid var(--cinelog-gold);
  font-size: 0.9rem;
  padding: 0.55rem 1.4rem;
  min-width: auto;
}

.hero-btn-outline:hover, .hero-btn-outline:focus {
  background: rgba(44, 62, 80, 0.85);
  color: var(--cinelog-gold-light);
  border-color: var(--cinelog-gold-light);
  box-shadow: 0 4px 20px rgba(var(--cinelog-gold-rgb), 0.15);
  transform: scale(1.01);
}
/* --- HERO LANDING PAGE TRANSFORMATION (Apple-esque) --- */

/* --- HERO LANDING PAGE ULTRA CLEAN (Apple-style) --- */


body, p, .btn, .navbar, .subtitle {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Source Sans Pro', sans-serif; /* HUMANIZED: System font stack instead of AI-common Inter */
  font-weight: 400;
}

.brand-title, h1 {
  font-family: 'Georgia', 'Times New Roman', serif; /* HUMANIZED: Classic serif for movie app elegance instead of AI-common Outfit */
  font-weight: 550; /* HUMANIZED: Subtle organic weight */
}

.hero-title {
  font-family: 'Georgia', 'Times New Roman', serif; /* HUMANIZED: Elegant serif for hero instead of trendy Outfit */
  font-weight: 525; /* HUMANIZED: Organic weight between standards */
  font-size: 3.9rem; /* HUMANIZED: Slightly imperfect instead of exactly 4rem */
}

.hero-subtitle {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* HUMANIZED: System fonts instead of Inter */
  font-weight: 395; /* HUMANIZED: Slightly off standard weight */
  font-size: 1.18rem; /* HUMANIZED: Organic sizing instead of exact 1.2rem */
}

.navbar {
  background-color: #000 !important;
}

/* Remove any container styling, keep text centered */
h1, p {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

p {
  font-size: clamp(1.1rem, 2.5vw, 1.7rem);
  font-weight: 400;
  color: #e0e0e0;
  margin-bottom: 0;
}
.hero-title {
  font-size: clamp(2.5rem, 7vw, 4.5rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  margin-bottom: 1.2rem;
  text-shadow: 0 2px 24px rgba(0,0,0,0.18);
}

.hero-subtitle {
  font-size: clamp(1.1rem, 2.5vw, 1.7rem);
  font-weight: 400;
  color: #e0e0e0;
  margin-bottom: 2.5rem;
  line-height: 1.5;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}

.hero-btn {
  display: inline-block;
  min-width: 180px;
  padding: 0.85rem 2.2rem;
  font-size: 1.1rem;
  font-weight: 500;
  border-radius: 7px;
  border: none;
  box-shadow: 0 2px 16px rgba(0,0,0,0.10);
  /* HUMANIZED: Simplified multi-property transition */
  transition: all 0.2s ease;
  margin: 0 0.5rem 1rem 0.5rem;
  outline: none;
}
.hero-btn-primary {
  background: #fff;
  color: #222;
  box-shadow: 0 4px 24px rgba(0,0,0,0.13);
}
.hero-btn-primary:hover, .hero-btn-primary:focus {
  background: #e9ecef;
  color: #111;
  box-shadow: 0 6px 32px rgba(0,0,0,0.18);
  /* HUMANIZED: Subtle scale only, no translateY */
  transform: scale(1.01);
}
.hero-btn-secondary {
  background: rgba(44, 62, 80, 0.85);
  color: #fff;
  border: 1.5px solid #fff;

}
.hero-btn-secondary:hover, .hero-btn-secondary:focus {
  background: rgba(44, 62, 80, 1);
  color: #fff;
  border-color: #e0e0e0;
  box-shadow: 0 6px 32px rgba(0,0,0,0.18);
  /* HUMANIZED: Subtle scale only, no translateY */
  transform: scale(1.01);
}

@media (max-width: 600px) {
  .hero-title {
    font-size: 2.1rem;
  }
  .hero-subtitle {
    font-size: 1rem;
    margin-bottom: 1.5rem;
  }
  .hero-btn {
    min-width: 120px;
    font-size: 1rem;
    padding: 0.7rem 1.2rem;
  }
}
/* --- FIN HERO LANDING PAGE --- */
/* Ensure footer always appears above cards (stacking context fix) */
/* Footer - Cinema Gold styling restored per user preference */
html body footer,
footer.bg-secondary,
.footer,
footer {
    background-color: var(--cinelog-gold) !important;
    color: #000000 !important;
    border-top: 1px solid rgba(0, 0, 0, 0.12) !important;
    z-index: 1000;
    position: relative;
}

/* Footer text styling */
footer a,
footer p,
footer span {
    color: #000000 !important;
    text-decoration: none !important;
}

footer a:visited,
footer a:visited .footer-link,
footer .footer-link:visited {
    color: #000000 !important;
    opacity: 1 !important;
}

/* FEATURE: TMDB footer attribution styling */
.tmdb-logo {
    height: 16px !important;
    opacity: 0.8 !important;
    vertical-align: middle !important;
}

.tmdb-notice {
    font-size: 0.65rem !important;
    color: #0b0b0b !important;
}

/* FEATURE: Ensure footer text sizes are consistent across all pages, including Identity Manage pages */
footer .tmdb-notice,
body:has(.nav-pills) footer .tmdb-notice,
.nav-pills ~ * footer .tmdb-notice,
footer div.tmdb-notice {
    font-size: 0.65rem !important;
    line-height: 1.3 !important;
}

footer .tmdb-logo,
body:has(.nav-pills) footer .tmdb-logo,
.nav-pills ~ * footer .tmdb-logo {
    height: 16px !important;
    opacity: 0.8 !important;
    vertical-align: middle !important;
}

/* FEATURE: Ensure footer copyright text is consistent across all pages */
footer,
footer div,
footer a,
footer p,
body:has(.nav-pills) footer,
body:has(.nav-pills) footer div,
body:has(.nav-pills) footer a,
body:has(.nav-pills) footer p,
.nav-pills ~ * footer,
.nav-pills ~ * footer div,
.nav-pills ~ * footer a,
.nav-pills ~ * footer p {
    font-size: 0.9rem !important;
}

/* Redesigned footer layout helpers */
.footer .footer-main {
    position: relative;
}

.footer .footer-heading {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    color: #000000 !important;
    opacity: 1 !important;
}

.footer .footer-logo {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 0.75rem;
    color: #000000 !important;
    opacity: 1 !important;
}

.footer .footer-tagline {
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
    color: #080808 !important;
}

.footer .footer-nav {
    --footer-link-height: 2.25rem;
}

.footer .footer-link-groups {
    max-width: 24rem;
}

.footer .footer-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #000000 !important;
    font-weight: 500;
    text-decoration: none;
    position: relative;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.footer .footer-link:visited {
    color: #000000 !important;
}

.footer .footer-link::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.45);
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.footer .footer-link:hover::before,
.footer .footer-link:focus::before {
    transform: scale(1.15);
    background-color: rgba(0, 0, 0, 0.85);
}

.footer .footer-nav li {
    display: flex;
    align-items: center;
    min-height: var(--footer-link-height);
}

.footer .footer-coming-soon {
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    color: #0e0e0e !important;
}

.footer .footer-social .social-link {
    align-items: center;
    border: 1px solid rgba(0, 0, 0, 0.25);
    border-radius: 999px;
    display: inline-flex;
    height: 2.6rem;
    justify-content: center;
    width: 2.6rem;
    font-size: 1.1rem;
    background-color: rgba(255, 255, 255, 0.5);
    transition: border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
    color: #000000 !important;
}

.footer .footer-social .social-link i {
    font-size: 1.1rem;
}

.footer .footer-social .social-icon {
    width: 1.2rem;
    height: 1.2rem;
    display: block;
    fill: currentColor;
}

.footer .footer-social .social-icon path {
    fill: currentColor;
}

.footer .footer-social .social-link:not(.disabled):hover {
    border-color: rgba(0, 0, 0, 0.6);
    transform: translateY(-2px);
}

.footer .footer-social .social-link.disabled {
    opacity: 0.75;
    cursor: not-allowed;
}

.footer .footer-divider {
    border-top: 1px solid rgba(0, 0, 0, 0.15);
}

.footer .footer-meta {
    font-size: 0.85rem;
    letter-spacing: 0.01em;
    color: #000000 !important;
}

.footer .footer-meta a {
    font-weight: 500;
    text-decoration: none;
}

.footer .tmdb-attribution {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background-color: rgba(255, 255, 255, 0.45);
    border-radius: 16px;
    padding: 0.75rem 1.15rem;
    max-width: 26rem;
}

footer .tmdb-logo {
    filter: none;
    height: 18px !important;
}

.footer .tmdb-notice {
    font-size: 0.72rem !important;
    line-height: 1.4 !important;
    color: #050505 !important;
    max-width: 18rem;
}

@media (max-width: 991.98px) {
    .footer .footer-logo {
        letter-spacing: 0.12em;
    }

    .footer .footer-link-groups {
        max-width: 100%;
    }
}

@media (max-width: 767.98px) {
    .footer .footer-brand,
    .footer .footer-links,
    .footer .footer-social {
        text-align: center;
    }

    .footer .footer-nav {
        --footer-link-height: 2rem;
    }

    .footer .footer-nav li {
        justify-content: center;
    }

    .footer .tmdb-attribution {
        justify-content: flex-start;
        text-align: left;
        background-color: rgba(255, 255, 255, 0.55);
        padding: 0.85rem;
        max-width: 100%;
        flex-direction: row;
        gap: 0.75rem;
        border-radius: 12px;
    }

    .footer .tmdb-notice {
        max-width: 100%;
        font-size: 0.7rem !important;
    }
}

@media (min-width: 992px) {
    .footer .footer-brand {
        padding-right: 3rem;
    }
}
.card {
    z-index: 1;
    position: relative;
}
/* Wishlist page layout fix: ensures content grows to fill viewport and pushes footer down */
.wishlist-page {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
}
.wishlist-content {
    flex: 1;
    margin-bottom: 2.5rem; /* Ensure space before footer to prevent overlap */
}
/* Custom styles for FrameRoute */

/* A helper class to make a link look like normal text */
.link-as-text,
.link-as-text:hover {
    color: inherit;
    text-decoration: none;
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* --- CSS for Star Rating System --- */
.star-rating-container .star {
    display: inline-block;
    margin-right: 2px;
    transition: color 0.1s ease-in-out, transform 0.1s ease-in-out;
}

    .star-rating-container .star.filled,
    .star-rating-container i.bi-star-fill,
    .star-rating-container i.bi-star-half {
        color: var(--cinelog-gold);
    }

    .star-rating-container .star.hover {
        color: #fadb7d; /* Lighter gold for hover */
        transform: scale(1.1);
    }

.star-rating-container i.bi-star {
    color: #ccc; /* Light grey for empty stars */
}

#clearRating, #editClearRating {
    color: #6c757d;
    text-decoration: none;
    font-size: 0.85rem;
    vertical-align: middle;
    margin-left: 0.5rem;
}

    #clearRating:hover, #editClearRating:hover {
        color: #dc3545;
        text-decoration: underline;
    }


/* --- CSS for Suggestion Page Buttons (Cards) --- */
.suggestion-card {
    background-color: #2a9fd6; /* Your theme's PRIMARY color */
    border: 1px solid #2a9fd6;
    color: rgba(255, 255, 255, 0.8);
    /* HUMANIZED: Simplified transition */
    transition: all 0.25s ease;
}

    .suggestion-card .card-title,
    .suggestion-card i {
        color: #fff;
        font-weight: bold;
        transition: color 0.2s ease-in-out;
    }

    .suggestion-card .suggestion-description {
        opacity: 0;
        height: 0;
        overflow: hidden;
        transition: opacity 0.3s ease-in-out, height 0.3s ease-in-out;
    }

    /* --- HUMANIZED: Suggestion Cards Hover Effects --- */
    .suggestion-card:hover {
        /* HUMANIZED: Subtle emphasis through color rather than movement */
        box-shadow: 0 0.5rem 1.5rem rgba(var(--cinelog-gold-rgb), 0.25);
        background-color: #2487b6;
        border-color: var(--cinelog-gold);
        text-decoration: none !important;
    }

        .suggestion-card:hover .card-title,
        .suggestion-card:hover i {
            color: #fff;
        }

        .suggestion-card:hover .suggestion-description {
            opacity: 1;
            height: auto;
            margin-top: 0.5rem;
        }

.navbar.bg-primary{border-bottom:1px solid #495057}
.navbar.bg-dark{background-color:#060606; border-bottom:1px solid #495057}

/* MOBILE FIX: Center logo in navbar on mobile devices and prevent menu overlap */
@media (max-width: 575px) {
    .navbar {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        min-height: 70px;
    }

    .navbar .container-fluid {
        /* FIX: Use flexbox to allow menu to flow below logo/burger */
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        position: relative;
        min-height: 56px;
    }

    .navbar-brand {
        /* Center logo with absolute positioning */
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        padding: 0.5rem 0;
        /* CRITICAL: Lower z-index so menu appears above logo when expanded */
        z-index: 1;
    }

    .navbar-brand img {
        height: 35px !important;
    }

    .navbar-toggler {
        /* Position burger button on the right */
        position: absolute;
        right: 1rem;
        /* CRITICAL: Higher z-index to stay clickable above logo */
        z-index: 3;
    }

    /* FIX: Make collapsed menu take full width and appear BELOW logo/burger */
    .navbar-collapse {
        /* CRITICAL: Highest z-index so menu appears on top of logo */
        z-index: 2;
        width: 100%;
        /* Push menu to next row below logo/burger button */
        flex-basis: 100%;
        margin-top: 1rem;
    }

    /* Optional: Add subtle background to menu when expanded for better visual separation */
    .navbar-collapse.show,
    .navbar-collapse.collapsing {
        background-color: rgba(0, 0, 0, 0.95);
        padding: 1rem;
        border-radius: 8px;
        margin-top: 1rem;
    }

    /* FIX: Align logout button with "Hello user" text in mobile navbar */
    .navbar-nav .form-inline {
        /* Remove Bootstrap's inline form padding/margin */
        padding: 0;
        margin: 0;
    }

    .navbar-nav .form-inline #logout {
        /* Match nav-link styling exactly */
        padding: 0.5rem 1rem;
        text-align: left;
        width: 100%;
        /* Remove Bootstrap btn-link default padding */
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* TMDB Attribution Styling */
.tmdb-attribution {
    max-width: 200px;
    margin-left: auto;
}

.tmdb-logo {
    filter: grayscale(20%);
    transition: filter 0.3s ease;
}

.tmdb-logo:hover {
    filter: grayscale(0%);
}

.tmdb-notice {
    line-height: 1.3;
    color: #000000;
}

@media (max-width: 767.98px) {
    .tmdb-attribution {
        max-width: none;
        margin: 0 auto;
    }
}

/* ===== GOOGLE OAUTH BUTTON STYLING ===== */
/* 
 * Google Brand Guidelines Compliant Button
 * Follows official Google Sign-In branding requirements
 * Maintains accessibility and responsive design
 */
.btn-google {
    background-color: #4285F4 !important;
    border: 1px solid #4285F4 !important;
    color: #ffffff !important;
    font-weight: 500 !important;
    padding: 0.625rem 1.25rem !important;
    border-radius: 5px !important;
    /* HUMANIZED: Organic timing variation */
    transition: all 0.25s ease-in-out !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.btn-google:hover {
    background-color: #357ae8 !important;
    border-color: #357ae8 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-1px) !important;
}

.btn-google:focus {
    background-color: #357ae8 !important;
    border-color: #357ae8 !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.2rem rgba(66, 133, 244, 0.25) !important;
}

.btn-google:active {
    background-color: #2d5dc9 !important;
    border-color: #2d5dc9 !important;
    transform: translateY(0px) !important;
}

/* Google icon styling for better visual consistency */
.btn-google .fab.fa-google {
    color: #ffffff !important;
    font-size: 1.1em !important;
    margin-right: 0.75rem !important;
    vertical-align: middle !important;
}

/* Enhanced hover effect for the Google icon */
.btn-google:hover .fab.fa-google {
    transform: scale(1.05);
    transition: transform 0.2s ease-in-out;
}

/* Ensure consistent spacing and alignment */
.btn-google {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
}

/* Mobile responsiveness for Google button */
@media (max-width: 576px) {
    .btn-google {
        padding: 0.75rem 1rem !important;
        font-size: 0.95rem !important;
    }
    
    .btn-google .fab.fa-google {
        margin-right: 0.5rem !important;
    }
}

/* Dark theme compatibility - maintains Google blue on Cyborg theme */
.btn-google {
    /* These values ensure the button remains Google-branded even on dark themes */
    background-color: #4285F4 !important;
    border-color: #4285F4 !important;
}

/* ===== IDENTITY MANAGE PAGES STYLING ENHANCEMENTS ===== */
/*
 * FEATURE: Targeted font size reduction and visual improvements for Identity Manage pages
 * Applies ONLY to /Identity/Account/Manage/* pages using URL-based detection
 * Maintains accessibility standards while reducing font sizes for better visual density
 * Preserves Cinema Gold branding and Bootstrap Cyborg theme integration
 */

/* REMOVED: Empty CSS ruleset that was causing linting errors - functionality moved to specific selectors below */

/* MANAGE PAGES: Reduce page titles/headings (h1, h2, h3) */
body:has(.nav-pills) h1,
body:has(.nav-pills) h2, 
body:has(.nav-pills) h3,
.nav-pills + h3,
.nav-pills ~ * h3,
/* More specific targeting for Manage page titles */
div:has(.nav-pills) ~ * h3,
.nav-pills ~ div h3 {
    font-size: 1.3rem !important; /* Reduced from ~2rem to 1.3rem */
    font-weight: 500 !important;
    color: var(--cinelog-gold) !important; /* Cinema Gold branding */
    margin-bottom: 1rem !important;
    line-height: 1.4 !important;
}

/* MANAGE PAGES: Reduce form labels */
body:has(.nav-pills) label,
body:has(.nav-pills) .form-label,
.nav-pills ~ * label,
.nav-pills ~ * .form-label {
    font-size: 0.85rem !important; /* Reduced from 1rem to 0.85rem */
    font-weight: 500 !important;
    margin-bottom: 0.4rem !important;
}

/* MANAGE PAGES: Reduce input text and form control text */
body:has(.nav-pills) .form-control,
body:has(.nav-pills) input,
body:has(.nav-pills) select,
body:has(.nav-pills) textarea,
.nav-pills ~ * .form-control,
.nav-pills ~ * input,
.nav-pills ~ * select,
.nav-pills ~ * textarea {
    font-size: 0.9rem !important; /* Reduced from 1rem to 0.9rem */
    padding: 0.5rem 0.75rem !important; /* Slightly reduced padding */
    line-height: 1.4 !important;
}

/* MANAGE PAGES: Reduce navigation pills text */
.nav-pills .nav-link {
    font-size: 0.85rem !important; /* Reduced from 1rem to 0.85rem */
    padding: 0.4rem 0.8rem !important; /* Reduced padding */
    font-weight: 500 !important;
    border-radius: 5px !important;
}

/* Active nav pill - Strategic Cinema Gold Usage */
.nav-pills .nav-link.active {
    background-color: var(--cinelog-gold);
    color: #1a1a1a;
    font-weight: 600;
}

/* MANAGE PAGES: Reduce button text */
body:has(.nav-pills) .btn,
.nav-pills ~ * .btn {
    font-size: 0.85rem !important; /* Reduced from 1rem to 0.85rem */
    padding: 0.5rem 1rem !important; /* Reduced padding */
    font-weight: 500 !important;
}

/* MANAGE PAGES: Reduce validation message text */
body:has(.nav-pills) .text-danger,
body:has(.nav-pills) .field-validation-error,
body:has(.nav-pills) .validation-summary-errors,
.nav-pills ~ * .text-danger,
.nav-pills ~ * .field-validation-error,
.nav-pills ~ * .validation-summary-errors {
    font-size: 0.75rem !important; /* Reduced from 0.875rem to 0.75rem */
    margin-top: 0.25rem !important;
}

/* MANAGE PAGES: Reduce general paragraph and div text (exclude footer elements) */
body:has(.nav-pills) p:not(footer p):not(footer div):not(.tmdb-notice),
body:has(.nav-pills) div:not(.form-floating):not(.btn):not(.nav):not(.card):not(footer):not(footer div):not(.tmdb-attribution),
.nav-pills ~ * p:not(footer p):not(footer div):not(.tmdb-notice),
.nav-pills ~ * div:not(.form-floating):not(.btn):not(.nav):not(.card):not(footer):not(footer div):not(.tmdb-attribution) {
    font-size: 0.9rem !important; /* Reduced from 1rem to 0.9rem */
    line-height: 1.5 !important;
}

/* MANAGE PAGES: Improve form spacing and visual density */
body:has(.nav-pills) .form-floating,
body:has(.nav-pills) .mb-3,
.nav-pills ~ * .form-floating,
.nav-pills ~ * .mb-3 {
    margin-bottom: 1rem !important; /* Reduced from 1.5rem to 1rem */
}

/* MANAGE PAGES: Status messages styling */
body:has(.nav-pills) .alert,
.nav-pills ~ * .alert {
    font-size: 0.85rem !important;
    padding: 0.5rem 0.75rem !important;
    margin-bottom: 1rem !important;
    border-radius: 5px !important;
}

/* MANAGE PAGES: Reduce overall container padding for better space usage */
body:has(.nav-pills) .container,
body:has(.nav-pills) .row,
.manage-container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

/* MANAGE PAGES: Navigation container improvements */
.nav-pills {
    margin-bottom: 1.5rem !important;
    padding: 0.5rem !important;
    background-color: rgba(var(--bs-dark-rgb), 0.1) !important;
    border-radius: 9px !important;
}

/* RESPONSIVE: Maintain readability on smaller screens */
@media (max-width: 768px) {
    /* On mobile, don't make fonts too small */
    body:has(.nav-pills) h3,
    .nav-pills + h3,
    .nav-pills ~ * h3 {
        font-size: 1.4rem !important;
    }
    
    body:has(.nav-pills) label,
    body:has(.nav-pills) .form-label,
    .nav-pills ~ * label,
    .nav-pills ~ * .form-label {
        font-size: 0.9rem !important;
    }
    
    body:has(.nav-pills) .form-control,
    body:has(.nav-pills) input,
    .nav-pills ~ * .form-control,
    .nav-pills ~ * input {
        font-size: 0.95rem !important;
    }
}

/* ACCESSIBILITY: Ensure focus states remain visible with reduced sizes */
body:has(.nav-pills) .form-control:focus,
body:has(.nav-pills) .btn:focus,
body:has(.nav-pills) .nav-link:focus,
.nav-pills ~ * .form-control:focus,
.nav-pills ~ * .btn:focus,
.nav-pills ~ * .nav-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(var(--cinelog-gold-rgb), 0.25) !important;
    border-color: var(--cinelog-gold) !important;
}

/* ===== END IDENTITY MANAGE PAGES STYLING ===== */

/* ===== HOW IT WORKS SECTION - HOMEPAGE ===== */
.how-it-works-section {
    margin-top: 3rem;
    padding: 2rem 1rem;
    text-align: center;
}

.process-steps {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 160px;
    transition: transform 0.3s ease;
}

.step:hover {
    /* HUMANIZED: Removed universal translateY pattern */
}

.step-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cinelog-gold), var(--cinelog-gold-light));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.3rem;
    box-shadow: 0 4px 16px rgba(var(--cinelog-gold-rgb), 0.3);
    transition: all 0.3s ease;
}

.step:hover .step-icon {
    box-shadow: 0 6px 24px rgba(var(--cinelog-gold-rgb), 0.5);
    transform: scale(1.1);
}

.step-icon i {
    font-size: 1.5rem;
    color: #1a1a1a;
    font-weight: 600;
}

.step-text {
    color: #e0e0e0;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;
    max-width: 120px;
    text-align: center;
}

.step-arrow {
    color: var(--cinelog-gold);
    font-size: 1.2rem;
    opacity: 0.7;
    margin: 0 0.5rem;
}

.step-arrow i {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .process-steps {
        flex-direction: column;
        gap: 2rem;
    }
    
    .step-arrow {
        transform: rotate(90deg);
        margin: 0;
    }
    
    .step {
        min-width: auto;
    }
    
    .step-text {
        max-width: 200px;
    }
}

@media (max-width: 576px) {
    .how-it-works-section {
        margin-top: 2rem;
        padding: 1.5rem 0.5rem;
    }
    
    .step-icon {
        width: 50px;
        height: 50px;
    }
    
    .step-icon i {
        font-size: 1.3rem;
    }
    
    .step-text {
        font-size: 0.9rem;
    }
}
/* ===== END HOW IT WORKS SECTION ===== */

/* ===== ENHANCED SEARCH INPUT - ADD PAGE ===== */
.enhanced-search-input {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    border: 2px solid rgba(var(--cinelog-gold-rgb), 0.3);
    border-radius: 11px;
    transition: all 0.3s ease;
    font-size: 1.1rem;
    padding: 1rem 1.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.enhanced-search-input:focus {
    border-color: var(--cinelog-gold);
    box-shadow: 0 0 0 0.2rem rgba(var(--cinelog-gold-rgb), 0.25);
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-2px);
    outline: none;
}

.enhanced-search-input::placeholder {
    color: #6c757d;
    font-style: italic;
    transition: opacity 0.3s ease;
}

.enhanced-search-input:focus::placeholder {
    opacity: 0.7;
}

/* Search help text styling */
.search-help-text {
    transition: opacity 0.3s ease;
}

.search-help-text small {
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}


/* Enhanced fieldset styling */
fieldset {
    background: rgba(var(--cinelog-gold-rgb), 0.02);
    border: 1px solid rgba(var(--cinelog-gold-rgb), 0.1) !important;
    border-radius: 16px;
    transition: all 0.3s ease;
}

fieldset:hover {
    background: rgba(var(--cinelog-gold-rgb), 0.04);
    border-color: rgba(var(--cinelog-gold-rgb), 0.2) !important;
    box-shadow: 0 8px 32px rgba(var(--cinelog-gold-rgb), 0.1);
}

/* Mobile responsiveness for enhanced search */
@media (max-width: 768px) {
    .enhanced-search-input {
        font-size: 1rem;
        padding: 0.875rem 1.25rem;
    }
    
    .search-help-text small {
        font-size: 0.8rem;
    }
}
/* ===== END ENHANCED SEARCH INPUT ===== */

/* ===== PROFESSIONAL PAGE TITLES ===== */
.page-title-professional {
    font-weight: 600;
    font-size: 2.5rem;
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 0;
    font-family: 'Georgia', serif; /* HUMANIZED: Elegant serif instead of AI-common Outfit */
    color: #ffffff;
}

.page-title-professional::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 80px;
    height: 4px;
    background: var(--cinelog-gold);
    border-radius: 2px;
}

/* Ensure proper spacing with badges and other elements */
.title-container-professional {
    display: flex;
    align-items: center;
    margin-bottom: 1.1rem;
}

.title-container-professional .badge {
    align-self: flex-start;
    margin-top: 8px;
}

/* Remove the old HR since we have the gold underline now */
.professional-title-section + hr {
    display: none;
}

/* Mobile responsiveness for professional titles */
@media (max-width: 768px) {
    .page-title-professional {
        font-size: 2rem;
    }
    
    .page-title-professional::after {
        width: 60px;
        height: 3px;
    }
}
/* ===== END PROFESSIONAL PAGE TITLES ===== */

/* ===== PROFESSIONAL COLLECTION DASHBOARD STYLING ===== */
.collection-dashboard {
    background: linear-gradient(135deg, rgba(23, 26, 33, 0.95), rgba(18, 21, 28, 0.98));
    border-radius: 20px;
    padding: 2rem;
    border: 1px solid rgba(var(--cinelog-gold-rgb), 0.15);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(var(--cinelog-gold-rgb), 0.08);
    position: relative;
    overflow: hidden;
}

.collection-dashboard::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--cinelog-gold), var(--cinelog-gold-light), var(--cinelog-gold));
    border-radius: 20px 20px 0 0;
}

.dashboard-header {
    text-align: center;
    margin-bottom: 2rem;
}

.dashboard-title {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--cinelog-gold);
    margin-bottom: 0.6rem;
    font-family: 'Georgia', serif; /* HUMANIZED: Elegant serif instead of AI-common Outfit */
    letter-spacing: 0.02em;
}

.dashboard-subtitle {
    color: #b8bcc8;
    font-size: 0.95rem;
    margin-bottom: 0;
    font-weight: 400;
    opacity: 0.9;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}

.stat-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    border-radius: 16px;
    padding: 1.8rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    /* HUMANIZED: Simplified easing curve */
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--accent-gradient);
    transition: all 0.3s ease;
}

.stat-card-primary {
    --accent-color: var(--cinelog-gold);
    --accent-gradient: linear-gradient(90deg, var(--cinelog-gold), #ffd700);
}

.stat-card-secondary {
    --accent-color: #4a90e2;
    --accent-gradient: linear-gradient(90deg, #4a90e2, #5aa3f0);
}

.stat-card-accent {
    --accent-color: #e74c3c;
    --accent-gradient: linear-gradient(90deg, #e74c3c, #ff6b5b);
}

.stat-card:hover {
    transform: translateY(-4px) scale(1.01);
    border-color: var(--accent-color);
    box-shadow: 0 16px 64px rgba(0, 0, 0, 0.3), 0 8px 32px rgba(var(--cinelog-gold-rgb), 0.15);
}

.stat-card:hover .stat-icon {
    transform: scale(1.15) rotate(5deg);
    color: var(--accent-color);
}

.stat-card:hover .stat-value {
    color: var(--accent-color);
}

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(var(--cinelog-gold-rgb), 0.15), rgba(var(--cinelog-gold-rgb), 0.05));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.2rem;
    border: 1px solid rgba(var(--cinelog-gold-rgb), 0.1);
    /* HUMANIZED: Simplified easing curve */
    transition: all 0.4s ease;
}

.stat-icon i {
    font-size: 1.6rem;
    color: #b8bcc8;
    transition: all 0.3s ease;
}

.stat-content {
    text-align: left;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 0.3rem;
    font-family: 'Georgia', serif; /* HUMANIZED: Elegant serif instead of AI-common Outfit */
    transition: all 0.3s ease;
    word-break: break-word;
    line-height: 1.1;
}

.stat-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--cinelog-gold);
    margin-bottom: 0.2rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-detail {
    font-size: 0.85rem;
    color: #9ca3af;
    font-weight: 400;
    opacity: 0.8;
}

/* Responsive Design */
@media (max-width: 992px) {
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 1.2rem;
    }
    
    .collection-dashboard {
        padding: 1.5rem;
    }
    
    .dashboard-title {
        font-size: 1.6rem;
    }
}

@media (max-width: 768px) {
    .collection-dashboard {
        padding: 1.5rem 1rem;
        border-radius: 16px;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .stat-card {
        padding: 1.5rem 1.2rem;
        border-radius: 11px;
    }
    
    .stat-icon {
        width: 50px;
        height: 50px;
        border-radius: 10px;
        margin-bottom: 1rem;
    }
    
    .stat-icon i {
        font-size: 1.4rem;
    }
    
    .stat-value {
        font-size: 1.6rem;
    }
    
    .dashboard-title {
        font-size: 1.4rem;
    }
    
    .dashboard-subtitle {
        font-size: 0.9rem;
    }
}

@media (max-width: 576px) {
    .collection-dashboard {
        margin-left: -0.5rem;
        margin-right: -0.5rem;
        padding: 1.2rem 0.8rem;
    }
    
    .stat-card {
        padding: 1.2rem 1rem;
    }
    
    .stat-value {
        font-size: 1.4rem;
    }
    
    .stat-label {
        font-size: 0.9rem;
    }
    
    .stat-detail {
        font-size: 0.8rem;
    }
}

/* Accessibility and animations */
@media (prefers-reduced-motion: reduce) {
    .stat-card,
    .stat-icon,
    .stat-value {
        transition: none;
    }
    
    .stat-card:hover {
        transform: none;
    }
}

/* Dark theme enhancement for better contrast */
@media (prefers-color-scheme: dark) {
    .collection-dashboard {
        background: linear-gradient(135deg, rgba(15, 17, 21, 0.98), rgba(12, 14, 18, 1));
        border-color: rgba(var(--cinelog-gold-rgb), 0.2);
    }
    
    .stat-card {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
        border-color: rgba(255, 255, 255, 0.15);
    }
}
/* ===== END PROFESSIONAL COLLECTION DASHBOARD STYLING ===== */

/* ===== PHASE 6: COMPONENT VARIETY - HUMANIZED MOVIE CARDS ===== */
/* FEATURE: Break AI-generated identical patterns with authentic visual variety */

/* Journal Movie Cards - Slightly darker, organic height */
.journal-movie-card {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: all 0.25s ease;
    border-radius: 8px;
}

.journal-movie-card:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
}

/* Collection Movie Cards - Distinctive styling with stats focus */
.collection-movie-card {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
    transition: all 0.35s ease;
    border-radius: 9px;
    border: 1px solid rgba(var(--cinelog-gold-rgb), 0.1);
}

.collection-movie-card:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15), 0 3px 6px rgba(0, 0, 0, 0.1);
    border-color: rgba(var(--cinelog-gold-rgb), 0.2);
}

/* Wishlist Movie Cards - Anticipation styling */
.wishlist-movie-card {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all 0.4s ease;
    border-radius: 10px;
    border: 1px solid rgba(108, 117, 125, 0.2);
    background: linear-gradient(145deg, rgba(52, 58, 64, 0.95), rgba(73, 80, 87, 0.92));
}

.wishlist-movie-card:hover {
    transform: translateY(-1px) scale(1.015);
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.1), 0 2px 5px rgba(0, 0, 0, 0.06);
    border-color: rgba(108, 117, 125, 0.35);
}

/* Blacklist Movie Cards - Subtle warning styling */
.blacklist-movie-card {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border-radius: 7px;
    border: 1px solid rgba(220, 53, 69, 0.15);
    background: linear-gradient(135deg, rgba(73, 48, 51, 0.95), rgba(62, 39, 35, 0.92));
}

.blacklist-movie-card:hover {
    transform: scale(0.98);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
    border-color: rgba(220, 53, 69, 0.25);
}

/* Suggestion Movie Cards - Discovery excitement */
.suggestion-movie-card {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.06);
    transition: all 0.45s ease;
    border-radius: 11px;
    border: 1px solid rgba(var(--cinelog-gold-rgb), 0.15);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(var(--cinelog-gold-rgb), 0.02));
}

.suggestion-movie-card:hover {
    transform: translateY(-3px) scale(1.025);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08);
    border-color: rgba(var(--cinelog-gold-rgb), 0.3);
}

/* FIX: Make year text visible in suggestion cards - darker for better visibility */
.suggestion-movie-card .text-muted {
    color: #212529 !important;
    font-weight: 600 !important;
}

/* CONSISTENCY: Ensure all card text is readable */
.wishlist-movie-card .card-title,
.blacklist-movie-card .card-title {
    color: #f8f9fa;
    font-weight: 600;
}

.wishlist-movie-card .card-text,
.blacklist-movie-card .card-text {
    color: #dee2e6;
}

.wishlist-movie-card .text-muted,
.blacklist-movie-card .text-muted {
    color: #adb5bd !important;
}

/* Mobile responsive adjustments for variety */
@media (max-width: 768px) {
    .journal-movie-card,
    .collection-movie-card,
    .wishlist-movie-card,
    .blacklist-movie-card,
    .suggestion-movie-card {
        border-radius: 6px;
    }
    
    .journal-movie-card:hover,
    .collection-movie-card:hover,
    .wishlist-movie-card:hover,
    .suggestion-movie-card:hover {
        transform: scale(1.01);
    }
    
    .blacklist-movie-card:hover {
        transform: scale(0.99);
    }
}
/* ===== END COMPONENT VARIETY STYLING ===== */

/* ===== ELEGANT CINEMA GOLD TIMELINE MARKERS ===== */
/* FEATURE: Sophisticated timeline markers for journal view chronological navigation */

.cinelog-timeline-marker {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 2.5rem 0;
    min-height: 80px;
}

/* Elegant horizontal timeline line with Cinema Gold gradient */
.timeline-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(var(--cinelog-gold-rgb), 0.3) 10%, 
        var(--cinelog-gold) 50%, 
        rgba(var(--cinelog-gold-rgb), 0.3) 90%, 
        transparent 100%);
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(var(--cinelog-gold-rgb), 0.2);
    z-index: 1;
}

/* Cinema-style timeline badge with film icon */
.timeline-badge {
    position: relative;
    z-index: 3;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cinelog-gold), var(--cinelog-gold-light));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1a1a;
    font-size: 1.4rem;
    font-weight: 600;
    box-shadow: 
        0 8px 24px rgba(var(--cinelog-gold-rgb), 0.35),
        0 4px 12px rgba(0, 0, 0, 0.4),
        inset 0 1px 2px rgba(255, 255, 255, 0.3);
    border: 3px solid rgba(15, 17, 21, 0.95);
    /* HUMANIZED: Simpler easing curve */
    transition: all 0.4s ease;
}

.timeline-badge:hover {
    /* HUMANIZED: Simple subtle scale instead of complex rotation */
    transform: scale(1.05);
    box-shadow: 
        0 8px 24px rgba(var(--cinelog-gold-rgb), 0.4),
        0 4px 12px rgba(0, 0, 0, 0.4),
        inset 0 1px 2px rgba(255, 255, 255, 0.3);
}

.timeline-badge i {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Elegant floating content badge for date display */
.timeline-content {
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    background: linear-gradient(135deg, rgba(15, 17, 21, 0.95), rgba(12, 14, 18, 0.98));
    color: var(--cinelog-gold);
    padding: 0.75rem 1.5rem;
    border-radius: 20px;
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
    border: 2px solid rgba(var(--cinelog-gold-rgb), 0.3);
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 4px 12px rgba(var(--cinelog-gold-rgb), 0.15);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    letter-spacing: 0.02em;
}

.timeline-content:hover {
    background: linear-gradient(135deg, rgba(15, 17, 21, 1), rgba(12, 14, 18, 1));
    border-color: var(--cinelog-gold);
    color: var(--cinelog-gold-light);
    /* HUMANIZED: Simple translateX only, removed AI-generated translateY pattern */
    transform: translateX(-50%);
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 4px 12px rgba(var(--cinelog-gold-rgb), 0.2);
}

.timeline-content i {
    opacity: 0.9;
    /* HUMANIZED: Varied timing */
    transition: opacity 0.4s ease;
}

.timeline-content:hover i {
    opacity: 1;
}

/* Progressive timeline dots for visual flow */
.cinelog-timeline-marker::before {
    content: '';
    position: absolute;
    left: 15%;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cinelog-gold);
    box-shadow: 0 2px 6px rgba(var(--cinelog-gold-rgb), 0.4);
    transform: translateY(-50%);
    opacity: 0.7;
    z-index: 2;
}

.cinelog-timeline-marker::after {
    content: '';
    position: absolute;
    right: 15%;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cinelog-gold);
    box-shadow: 0 2px 6px rgba(var(--cinelog-gold-rgb), 0.4);
    transform: translateY(-50%);
    opacity: 0.7;
    z-index: 2;
}

/* Responsive design for timeline markers */
@media (max-width: 768px) {
    .cinelog-timeline-marker {
        margin: 2rem 0;
        min-height: 70px;
    }
    
    .timeline-badge {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
    }
    
    .timeline-content {
        top: -40px;
        padding: 0.6rem 1.2rem;
        font-size: 0.9rem;
        border-radius: 16px;
    }
    
    .cinelog-timeline-marker::before,
    .cinelog-timeline-marker::after {
        width: 6px;
        height: 6px;
    }
}

@media (max-width: 480px) {
    .cinelog-timeline-marker {
        margin: 1.5rem 0;
    }
    
    .timeline-content {
        font-size: 0.85rem;
        padding: 0.5rem 1rem;
        border-radius: 11px;
    }
    
    .timeline-line {
        height: 2px;
    }
}

/* Accessibility and reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .timeline-badge,
    .timeline-content {
        transition: none;
    }
    
    .timeline-badge:hover {
        transform: none;
    }
    
    .timeline-content:hover {
        transform: translateX(-50%);
    }
}

/* Dark theme enhancements */
@media (prefers-color-scheme: dark) {
    .timeline-content {
        background: linear-gradient(135deg, rgba(8, 10, 12, 0.98), rgba(5, 7, 9, 1));
        border-color: rgba(var(--cinelog-gold-rgb), 0.4);
    }
    
    .timeline-content:hover {
        background: linear-gradient(135deg, rgba(8, 10, 12, 1), rgba(5, 7, 9, 1));
    }
    
    .timeline-badge {
        border-color: rgba(8, 10, 12, 0.98);
    }
}
/* ===== END ELEGANT CINEMA GOLD TIMELINE MARKERS ===== */

/* ===== ELEGANT SEARCH BAR STYLING - CINEMA PROFESSIONAL ===== */
/* Modern, visually appealing search bars that match the Cinema Gold aesthetic */

form[id="searchForm"] .input-group {
    max-width: 350px !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)) !important;
    border-radius: 25px !important;
    padding: 3px !important;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.15),
        0 2px 6px rgba(var(--cinelog-gold-rgb), 0.1),
        inset 0 1px 2px rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(var(--cinelog-gold-rgb), 0.3) !important;
    transition: all 0.3s ease !important;
    backdrop-filter: blur(10px) !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
}

form[id="searchForm"] .input-group:hover {
    border-color: rgba(var(--cinelog-gold-rgb), 0.5) !important;
    box-shadow:
        0 6px 16px rgba(0, 0, 0, 0.2),
        0 4px 8px rgba(var(--cinelog-gold-rgb), 0.15),
        inset 0 1px 2px rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-1px) !important;
}

form[id="searchForm"] .input-group:focus-within {
    border-color: var(--cinelog-gold) !important;
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.25),
        0 4px 12px rgba(var(--cinelog-gold-rgb), 0.25),
        0 0 0 3px rgba(var(--cinelog-gold-rgb), 0.15) !important;
    transform: translateY(-2px) !important;
}

/* Input field styling */
form[id="searchForm"] .input-group input.form-control {
    background: transparent !important;
    border: none !important;
    padding: 8px 16px !important;
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
    color: #ffffff !important;
    border-radius: 22px 0 0 22px !important;
    box-shadow: none !important;
    font-weight: 500 !important;
    flex: 1 !important;
    height: 36px !important;
    margin: 0 !important;
}

form[id="searchForm"] .input-group input.form-control:focus {
    background: rgba(255, 255, 255, 0.05) !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: #ffffff !important;
}

form[id="searchForm"] .input-group input.form-control::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
    font-style: italic !important;
    font-weight: 400 !important;
    transition: opacity 0.3s ease !important;
}

form[id="searchForm"] .input-group input.form-control:focus::placeholder {
    opacity: 0.4 !important;
}

/* Search button styling */
form[id="searchForm"] .input-group button.btn {
    background: linear-gradient(135deg, var(--cinelog-gold), var(--cinelog-gold-light)) !important;
    border: none !important;
    color: #1a1a1a !important;
    padding: 0 16px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    border-radius: 0 22px 22px 0 !important;
    transition: all 0.3s ease !important;
    min-width: 80px !important;
    height: 36px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow:
        0 2px 6px rgba(var(--cinelog-gold-rgb), 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.2) !important;
}

form[id="searchForm"] .input-group button.btn:hover {
    background: linear-gradient(135deg, var(--cinelog-gold-hover), var(--cinelog-gold)) !important;
    color: #000000 !important;
    transform: scale(1.02) !important;
    box-shadow:
        0 4px 8px rgba(var(--cinelog-gold-rgb), 0.4),
        inset 0 1px 2px rgba(255, 255, 255, 0.3) !important;
}

form[id="searchForm"] .input-group button.btn:active {
    transform: scale(0.98) !important;
    box-shadow:
        0 2px 4px rgba(var(--cinelog-gold-rgb), 0.3),
        inset 0 1px 1px rgba(0, 0, 0, 0.1) !important;
}

/* Ensure proper spacing for multiple buttons (Search + Clear) - for both button and anchor elements */
form[id="searchForm"] .input-group button.btn:not(:last-child),
form[id="searchForm"] .input-group a.btn:not(:last-child) {
    border-radius: 0 !important;
    border-right: 1px solid rgba(255, 255, 255, 0.2) !important;
}

form[id="searchForm"] .input-group button.btn:last-child,
form[id="searchForm"] .input-group a.btn:last-child {
    border-radius: 0 22px 22px 0 !important;
}

/* Handle single button scenarios */
form[id="searchForm"] .input-group button.btn:only-child,
form[id="searchForm"] .input-group a.btn:only-child {
    border-radius: 0 22px 22px 0 !important;
    border-right: none !important;
}

/* Clear button styling (if exists) - for both button and anchor elements */
form[id="searchForm"] .input-group button.btn.btn-secondary,
form[id="searchForm"] .input-group button.btn.btn-outline-secondary,
form[id="searchForm"] .input-group a.btn.btn-secondary,
form[id="searchForm"] .input-group a.btn.btn-outline-secondary {
    background: linear-gradient(135deg, rgba(108, 117, 125, 0.8), rgba(73, 80, 87, 0.9)) !important;
    color: #ffffff !important;
    border: none !important;
    height: 36px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    padding: 8px 16px !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    box-shadow:
        0 2px 6px rgba(108, 117, 125, 0.3),
        inset 0 1px 2px rgba(255, 255, 255, 0.2) !important;
}

form[id="searchForm"] .input-group a.btn.btn-outline-secondary:hover {
    background: linear-gradient(135deg, rgba(108, 117, 125, 1), rgba(73, 80, 87, 1)) !important;
    color: #ffffff !important;
    transform: scale(1.02) !important;
    text-decoration: none !important;
    box-shadow:
        0 4px 8px rgba(108, 117, 125, 0.4),
        inset 0 1px 2px rgba(255, 255, 255, 0.3) !important;
}

/* Icon styling for search button */
form[id="searchForm"] .input-group button.btn i {
    font-size: 0.9rem !important;
    margin-right: 4px !important;
    opacity: 0.9 !important;
}

/* Responsive design for search bars */
@media (max-width: 768px) {
    form[id="searchForm"] .input-group {
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    form[id="searchForm"] .input-group input.form-control {
        padding: 6px 12px !important;
        font-size: 0.85rem !important;
    }

    form[id="searchForm"] .input-group button.btn {
        padding: 6px 10px !important;
        font-size: 0.8rem !important;
        min-width: 70px !important;
    }

    /* FIX: Collection view mobile spacing - add gap between search bar and sort dropdown */
    .row.mb-4 .col-md-10 {
        margin-bottom: 1rem !important;
    }

    /* Ensure sort dropdown has proper spacing in mobile */
    .row.mb-4 .col-md-2 .dropdown {
        margin-top: 0.5rem !important;
    }
}

/* FIX: Prevent title movement when switching between views - ensure consistent title section height */
.title-container-professional {
    min-height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.title-container-professional h1 {
    margin: 0 !important;
    flex-shrink: 0 !important;
}

.title-container-professional .badge {
    margin-left: 1rem !important;
    white-space: nowrap !important;
}

@media (max-width: 480px) {
    form[id="searchForm"] .input-group {
        border-radius: 20px !important;
        padding: 1px !important;
    }

    form[id="searchForm"] .input-group input.form-control {
        border-radius: 20px 0 0 20px !important;
        padding: 5px 10px !important;
    }

    form[id="searchForm"] .input-group button.btn {
        border-radius: 0 20px 20px 0 !important;
        padding: 5px 8px !important;
        min-width: 60px !important;
    }
}

/* Accessibility enhancements */
@media (prefers-reduced-motion: reduce) {
    form[id="searchForm"] .input-group,
    form[id="searchForm"] .input-group button.btn {
        transition: none !important;
    }

    form[id="searchForm"] .input-group:hover,
    form[id="searchForm"] .input-group:focus-within {
        transform: none !important;
    }

    form[id="searchForm"] .input-group button.btn:hover {
        transform: none !important;
    }
}

/* Dark theme compatibility */
@media (prefers-color-scheme: dark) {
    form[id="searchForm"] .input-group {
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)) !important;
        border-color: rgba(var(--cinelog-gold-rgb), 0.4) !important;
    }

    form[id="searchForm"] .input-group input.form-control:focus {
        background: rgba(255, 255, 255, 0.08) !important;
    }
}
/* ===== END ELEGANT SEARCH BAR STYLING ===== */

/* ===== IDENTITY MANAGE DASHBOARD ===== */
.manage-dashboard {
    --manage-nav-bg: #0d0d0d;
    --manage-nav-border: rgba(255, 255, 255, 0.1);
    --manage-nav-text: rgba(255, 255, 255, 0.72);
    --manage-content-bg: #111111;
    --manage-content-border: rgba(255, 255, 255, 0.05);
    --manage-content-shadow: 0 26px 70px rgba(0, 0, 0, 0.45);
}

.manage-dashboard-container {
    max-width: 1180px;
    margin: 0 auto 4rem;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.manage-dashboard .row {
    row-gap: 2.5rem;
}

.manage-dashboard .row {
    row-gap: 2.5rem;
}

.manage-dashboard .manage-card {
    border-radius: 22px;
    overflow: hidden;
    position: relative;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.manage-dashboard .manage-card:hover {
    transform: translateY(-2px);
}

.manage-card-nav {
    background: var(--manage-nav-bg);
    border: 1px solid var(--manage-nav-border);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.28);
}

.manage-card-header {
    padding: 2.2rem 2rem 1.8rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: linear-gradient(165deg, rgba(var(--cinelog-gold-rgb), 0.18), rgba(255, 255, 255, 0.03));
}

.manage-card-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.62);
    margin-bottom: 0.75rem;
}

.manage-card-title {
    font-size: 1.45rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 0.35rem;
}

.manage-card-subtitle {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 0;
}

.manage-card-navlist {
    padding: 1.6rem 1.9rem 1.9rem;
}

.manage-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.manage-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--manage-nav-text);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent;
    border-radius: 14px;
    padding: 0.75rem 1rem;
    font-weight: 500;
    font-size: 0.92rem;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.manage-nav-link i {
    font-size: 1.05rem;
    width: 1.5rem;
    text-align: center;
    opacity: 0.75;
    transition: inherit;
}

.manage-nav-link:hover {
    color: #f8f8f8;
    background: rgba(var(--cinelog-gold-rgb), 0.14);
    border-color: rgba(var(--cinelog-gold-rgb), 0.25);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
}

.manage-nav-link:hover i {
    opacity: 1;
    color: #f8f8f8;
}

.manage-nav-link.active,
.manage-nav-link.active:hover {
    color: #111111 !important;
    background: linear-gradient(135deg, var(--cinelog-gold), var(--cinelog-gold-light));
    border-color: rgba(var(--cinelog-gold-rgb), 0.45);
    box-shadow: 0 18px 40px rgba(var(--cinelog-gold-rgb), 0.32);
}

.manage-nav-link.active i {
    opacity: 1;
    color: #111111;
}

.manage-card-content {
    background: var(--manage-content-bg);
    border: 1px solid var(--manage-content-border);
    border-radius: 24px;
    box-shadow: var(--manage-content-shadow);
}

.manage-card-content-body {
    padding: clamp(1.8rem, 3vw + 1.2rem, 3.2rem);
    max-width: 940px;
    margin: 0 auto;
    color: rgba(255, 255, 255, 0.88);
}

.manage-card-content-body > .row {
    margin: 0 auto;
    max-width: 600px;
    --bs-gutter-x: 1.25rem;
}

.manage-card-content-body > .row > [class^="col"],
.manage-card-content-body > .row > [class*=" col"] {
    flex: 1 1 100%;
    max-width: 100%;
}

.manage-card-content-body > * + * {
    margin-top: 1.5rem;
}

.manage-card-content-body h1,
.manage-card-content-body h2,
.manage-card-content-body h3,
.manage-card-content-body h4 {
    color: #fefefe;
    font-weight: 600;
}

.manage-card-content-body h3 {
    font-size: 1.55rem;
    margin-bottom: 1.5rem;
    margin-top: 0;
}

.manage-section-header {
    margin-bottom: 2rem;
}

.manage-section-header h3 {
    margin-bottom: 0.4rem;
}

.manage-section-title {
    font-size: 1.6rem;
    font-weight: 600;
    color: #fefefe;
}

.manage-section-subtitle {
    font-size: 0.94rem;
    color: rgba(255, 255, 255, 0.55) !important;
}

.manage-card-content-body p {
    margin-bottom: 0.9rem;
}

.manage-card-content-body p {
    margin-bottom: 0.9rem;
}

.manage-form .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5);
    opacity: 1;
}

/* FIX: Floating labels require transparent placeholder by default to avoid overlap */
.manage-form .form-floating > .form-control::placeholder {
    color: transparent;
}

.manage-form .form-floating > .form-control:focus::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.manage-form-panel {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
    padding: clamp(1.6rem, 2.2vw + 1rem, 2.5rem);
}

.manage-form .form-control {
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.92);
    padding: 0.85rem 1.05rem;
    font-size: 0.98rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.manage-form .form-control:focus {
    border-color: rgba(var(--cinelog-gold-rgb), 0.8);
    background: rgba(0, 0, 0, 0.6);
    box-shadow: 0 0 0 0.2rem rgba(var(--cinelog-gold-rgb), 0.25);
}

.manage-form .text-muted {
    display: block;
    margin-top: 0.6rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.48) !important;
}

.manage-form .text-danger {
    margin-top: 0.35rem;
    font-size: 0.85rem;
}

.manage-submit {
    margin-top: 1rem;
    padding: 0.75rem 1.75rem;
    border-radius: 14px;
    font-weight: 600;
    background: linear-gradient(135deg, var(--cinelog-gold), var(--cinelog-gold-hover));
    border-color: var(--cinelog-gold);
    color: #111111;
    width: 100%;
}

.manage-submit:hover {
    background: linear-gradient(135deg, var(--cinelog-gold-hover), var(--cinelog-gold-dark));
    border-color: var(--cinelog-gold-dark);
}

.manage-summary-panel {
    background: rgba(0, 0, 0, 0.55);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: clamp(1.6rem, 2.5vw + 1rem, 2.4rem);
    color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.3);
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

.manage-summary-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    color: #ffffff;
}

.manage-summary-list {
    margin: 0;
    padding: 0;
}

.manage-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.manage-summary-item:last-of-type {
    border-bottom: 0;
}

.manage-summary-item dt {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
}

.manage-summary-item dd {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 500;
    color: #ffffff;
    text-align: right;
    flex: 1;
    word-break: break-word;
    letter-spacing: 0.01em;
}

.manage-summary-divider {
    margin: 1.65rem 0;
    border-color: rgba(255, 255, 255, 0.1);
}

.manage-summary-hint {
    font-size: 0.85rem;
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.65) !important;
}

.manage-quick-links {
    display: grid;
    gap: 0.5rem;
}

.manage-quick-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s ease;
}

.manage-quick-link::before {
    content: "\f0da";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.75rem;
    color: var(--cinelog-gold);
}

.manage-quick-link:hover {
    color: var(--cinelog-gold);
}

/* Summary adjustments */
.manage-summary-list {
    display: grid;
    gap: 0.75rem;
}

.manage-summary-item {
    display: grid;
    grid-template-columns: minmax(120px, 35%) 1fr;
    align-items: center;
    gap: 0.3rem 0.75rem;
}

.manage-summary-item dt {
    text-align: left;
}

.manage-summary-item dd {
    text-align: left;
}

.manage-card-content-body .alert {
    border-radius: 12px;
    font-size: 0.9rem;
    padding: 0.75rem 1rem;
}

.manage-card-content-body .alert-success {
    background: rgba(25, 135, 84, 0.12);
    border-color: rgba(25, 135, 84, 0.35);
    color: #bbf7d0;
}

.manage-card-content-body .alert-danger {
    background: rgba(220, 53, 69, 0.12);
    border-color: rgba(220, 53, 69, 0.35);
    color: #f8d7da;
}

/* FIX: Form-floating label positioning - ensure labels stay inside boxes */
.manage-dashboard .form-floating {
    position: relative;
}

.manage-dashboard .form-floating > .form-control {
    height: calc(3.5rem + 2px);
    line-height: 1.25;
    padding: 1rem 0.75rem;
}

.manage-dashboard .form-floating > label {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 1rem 0.75rem;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out;
    color: rgba(255, 255, 255, 0.72);
}

.manage-dashboard .form-floating > .form-control:focus ~ label,
.manage-dashboard .form-floating > .form-control:not(:placeholder-shown) ~ label {
    opacity: 0.65;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

.manage-dashboard .form-floating > .form-control:disabled {
    background-color: rgba(0, 0, 0, 0.45);
    color: rgba(255, 255, 255, 0.65);
}

.manage-dashboard .form-floating > .form-control:disabled ~ label {
    color: rgba(255, 255, 255, 0.58);
}

.manage-dashboard .form-floating small {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.45) !important;
}

.manage-dashboard .row + .row {
    margin-top: 1.25rem;
}

@media (max-width: 1199.98px) {
    .manage-card-header {
        padding: 2rem 1.75rem 1.6rem;
    }

    .manage-card-navlist {
        padding: 1.35rem 1.6rem 1.6rem;
    }
}

@media (max-width: 991.98px) {
    .manage-dashboard {
        padding-top: 2.5rem;
    }

    .manage-card {
        border-radius: 18px;
    }

    .manage-form-panel,
    .manage-summary-panel {
        padding: 1.8rem;
    }

    .manage-card-content-body form:not(.manage-form) {
        padding: 1.6rem;
    }
}

@media (max-width: 767.98px) {
    .manage-dashboard-container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .manage-card-header {
        text-align: center;
    }

    .manage-card-navlist {
        padding: 1.1rem 1.25rem;
    }

    .manage-nav {
        gap: 0.4rem;
    }

    .manage-nav-link {
        justify-content: center;
    }

    .manage-summary-panel {
        text-align: center;
        margin-top: 1rem;
    }

    .manage-summary-item {
        grid-template-columns: 1fr;
    }

    .manage-summary-item dt,
    .manage-summary-item dd {
        text-align: center;
    }

    .manage-summary-item {
        flex-direction: column;
        align-items: center;
        gap: 0.35rem;
        width: 100%;
    }

    .manage-summary-divider {
        margin: 1.35rem 0;
    }

    .manage-summary-item dd {
        text-align: center;
    }
}

@media (max-width: 575.98px) {
    .manage-card-content-body,
    .manage-form-panel,
    .manage-summary-panel {
        padding: 1.4rem;
    }
}

/* ===== END IDENTITY MANAGE DASHBOARD ===== */
.manage-card-content-body > * + * {
    margin-top: 1.75rem;
}

.manage-card-content-body form:not(.manage-form) {
    max-width: 520px;
    margin: 0 auto;
    display: grid;
    gap: 1.25rem;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    padding: 1.9rem;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.3);
}

.manage-card-content-body form:not(.manage-form) label {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.75);
}

.manage-card-content-body form:not(.manage-form) input,
.manage-card-content-body form:not(.manage-form) select,
.manage-card-content-body form:not(.manage-form) textarea {
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.92);
    padding: 0.85rem 1rem;
}

.manage-card-content-body form:not(.manage-form) input:focus,
.manage-card-content-body form:not(.manage-form) select:focus,
.manage-card-content-body form:not(.manage-form) textarea:focus {
    border-color: rgba(var(--cinelog-gold-rgb), 0.7);
    box-shadow: 0 0 0 0.18rem rgba(var(--cinelog-gold-rgb), 0.2);
    background: rgba(0, 0, 0, 0.6);
}

.manage-card-content-body form:not(.manage-form) .btn,
.manage-card-content-body .manage-action-btn {
    width: 100%;
    border-radius: 14px;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
}

.manage-card-content-body form:not(.manage-form) .btn-primary,
.manage-card-content-body form:not(.manage-form) .btn-warning {
    background: linear-gradient(135deg, var(--cinelog-gold), var(--cinelog-gold-hover));
    border: 1px solid rgba(var(--cinelog-gold-rgb), 0.6);
    color: #111111;
}

.manage-card-content-body form:not(.manage-form) .btn-secondary,
.manage-card-content-body form:not(.manage-form) .btn-outline-secondary {
    background: linear-gradient(135deg, rgba(124, 131, 139, 0.85), rgba(76, 82, 88, 0.95));
    border: none;
    color: #f8f9fa;
}

.manage-card-content-body form:not(.manage-form) .btn-danger {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.9), rgba(138, 28, 41, 0.95));
    border: none;
}

.manage-card-content-body form:not(.manage-form) .btn-link,
.manage-card-content-body form:not(.manage-form) a {
    color: var(--cinelog-gold);
    text-decoration: none;
    font-weight: 500;
}

.manage-card-content-body form:not(.manage-form) .btn-google {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.75rem;
    background: #fff;
    color: #111;
    border: none;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
    width: auto;
    min-width: 220px;
    padding: 0.75rem 1.4rem;
}

.manage-card-content-body form:not(.manage-form) .btn-google img,
.manage-card-content-body form:not(.manage-form) .btn-google svg {
    height: 1.1rem;
}
.manage-external-logins-list {
    display: grid;
    gap: 1rem;
}

.manage-external-logins-list .manage-login-provider {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 0.9rem 1.2rem;
    color: rgba(255, 255, 255, 0.85);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.manage-external-logins-list .manage-login-provider .manage-login-actions {
    display: flex;
    gap: 0.75rem;
}
.manage-card-content-body .btn {
    border-radius: 14px;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
}

.manage-card-content-body .btn-primary,
.manage-card-content-body .btn-warning {
    background: linear-gradient(135deg, var(--cinelog-gold), var(--cinelog-gold-hover));
    border: 1px solid rgba(var(--cinelog-gold-rgb), 0.55);
    color: #111111;
}

.manage-card-content-body .btn-secondary,
.manage-card-content-body .btn-outline-secondary {
    background: linear-gradient(135deg, rgba(124, 131, 139, 0.85), rgba(76, 82, 88, 0.95));
    border: none;
    color: #f8f9fa;
}

.manage-card-content-body .btn-danger {
    background: linear-gradient(135deg, rgba(220, 53, 69, 0.92), rgba(138, 28, 41, 0.95));
    border: none;
}

/* FIX: Override Bootstrap purple/blue link colors with FrameRoute gold */
.manage-card-content-body .btn-link,
.manage-card-content-body .btn-link:link,
.manage-card-content-body .btn-link:visited,
.manage-dashboard .btn-link,
.manage-dashboard a.btn-link,
.manage-form .btn-link {
    color: var(--cinelog-gold) !important;
    text-decoration: none;
    font-weight: 500;
    padding: 0;
    align-self: flex-start;
}

.manage-card-content-body .btn-link:hover,
.manage-card-content-body .btn-link:focus,
.manage-dashboard .btn-link:hover,
.manage-dashboard .btn-link:focus,
.manage-form .btn-link:hover {
    color: var(--cinelog-gold-hover) !important;
    text-decoration: underline;
}
.manage-card-content-body table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
}

.manage-card-content-body table tr + tr td,
.manage-card-content-body table tr + tr th {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.manage-card-content-body table th,
.manage-card-content-body table td {
    padding: 0.85rem 1.1rem;
    color: rgba(255, 255, 255, 0.85);
}

.manage-card-content-body button[name="provider"],
.manage-card-content-body form button.btn-outline-primary {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 0.6rem;
    min-width: 220px;
    width: auto;
    padding: 0.75rem 1.4rem;
    border-radius: 14px;
    background: #ffffff;
    color: #111111;
    border: none;
    font-weight: 600;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

.manage-card-content-body button[name="provider"] .fa,
.manage-card-content-body button[name="provider"] i,
.manage-card-content-body button[name="provider"] svg {
    font-size: 1rem;
}