/* Guest Recommendation Page styles */

.gr-container {
    max-width: 1500px;
    margin: 0 auto;
}

.gr-intro {
    margin-top: 4px;
}
/* On mobile, clamp the intro to 2 lines so the controls stay above the fold. */
@media (max-width: 575.98px) {
    .gr-intro {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* Add-seed pill row */
.gr-pill-row .gr-add-pill {
    border-radius: 999px;
    padding: 6px 14px;
    font-weight: 500;
}
.gr-pill-row .gr-add-pill i {
    margin-right: 4px;
}
/* On mobile (~400px screen width), slightly tighten padding on every button
   in the controls row so the four add pills, the Movies/TV filter, the X,
   and Go all fit on one line without shrinking the buttons too much. */
@media (max-width: 575.98px) {
    .gr-pill-row {
        gap: 6px !important;
    }
    .gr-pill-row .btn,
    .gr-pill-row .gr-add-pill {
        padding: 5px 10px;
    }
}

/* Seed tray + chips */
.gr-seed-tray {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.gr-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 12px;
    border-radius: 999px;
    background: var(--mv-bg-card, #f1f3f5);
    border: 1px solid var(--mv-border-color, #dee2e6);
    color: var(--mv-text-primary, #212529);
    font-size: 0.875rem;
    line-height: 1.4;
    max-width: 100%;
}
.gr-chip-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 280px;
}
.gr-chip-remove {
    border: 0;
    background: transparent;
    color: var(--mv-text-secondary, #6c757d);
    font-size: 1.1rem;
    line-height: 1;
    /* Larger tap area for mobile while keeping the visible × small */
    padding: 4px 8px;
    min-width: 28px;
    cursor: pointer;
}
.gr-chip-remove:hover {
    color: #dc3545;
}
.gr-chip-title  { border-color: #0d6efd; }
.gr-chip-title  i { color: #0d6efd; }
.gr-chip-person { border-color: #fd7e14; }
.gr-chip-person i { color: #fd7e14; }
.gr-chip-genre  { border-color: #6f42c1; }
.gr-chip-genre  i { color: #6f42c1; }
.gr-chip-mood   { border-color: #198754; }
.gr-chip-mood   i { color: #198754; }

/* Genre match toggle */
.gr-genre-match { font-size: 0.875rem; }

/* Picker rows in modals */
.gr-search-results {
    min-height: 180px;
}
.gr-pick-row {
    padding: 8px 10px;
}
.gr-pick-poster {
    width: 36px;
    height: 54px;
    object-fit: contain;
    border-radius: 4px;
    background: var(--mv-bg-surface, #f1f3f5);
}
.gr-pick-photo {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 999px;
    background: var(--mv-bg-surface, #f1f3f5);
}

/* Genre grid in modal */
.gr-genre-grid {
    display: grid;
    /* 120px min so a 320px-wide phone gets 2 columns instead of 1 */
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}
.gr-genre-btn {
    border: 1px solid var(--mv-border-color, #dee2e6);
    background: var(--mv-bg-card, #fff);
    color: var(--mv-text-primary, #212529);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 0.875rem;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    position: relative;
}
.gr-genre-btn:hover {
    background: var(--mv-bg-hover, #f1f3f5);
    border-color: #6f42c1;
}
/* Picked state - strong solid fill, white text, checkmark prefix, and a soft
   purple glow so it stands out from the unpicked options at a glance. */
.gr-genre-btn.gr-genre-picked {
    background: #6f42c1;
    border-color: #6f42c1;
    color: #fff;
    box-shadow: 0 0 0 2px rgba(111, 66, 193, 0.35);
    font-weight: 600;
}
.gr-genre-btn.gr-genre-picked::before {
    content: "\2713";  /* unicode check mark */
    margin-right: 6px;
    font-weight: 700;
}
.gr-genre-btn.gr-genre-picked:hover {
    background: #5a36a3;
    border-color: #5a36a3;
    color: #fff;
}

/* Attribution line on result cards */
.gr-attribution {
    font-size: 0.78rem;
    color: var(--mv-text-secondary, #6c757d);
    margin-top: 4px;
    line-height: 1.3;
}
.gr-attribution i {
    color: #0d6efd;
    margin-right: 2px;
}

/* Streaming badges overlaid at the bottom of the poster image */
.gr-poster-streaming {
    position: absolute;
    bottom: 4px;
    left: 4px;
    right: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    justify-content: flex-end;
}


/* Dark mode - scoped under Bootstrap 5.3's [data-bs-theme="dark"] which
   header.php sets on <html> when the user has dark_mode enabled. */
[data-bs-theme="dark"] .gr-chip {
    background: var(--mv-bg-card);
}
[data-bs-theme="dark"] .gr-genre-btn {
    background: var(--mv-bg-card);
    color: var(--mv-text-primary);
}
/* Dark-mode override for the picked state - the rule above otherwise wins
   on specificity and washes out the solid purple fill. Repeated with the
   higher-specificity selector so the picked state remains obvious. */
[data-bs-theme="dark"] .gr-genre-btn.gr-genre-picked {
    background: #6f42c1;
    border-color: #6f42c1;
    color: #fff;
}
[data-bs-theme="dark"] .gr-genre-btn.gr-genre-picked:hover {
    background: #5a36a3;
    border-color: #5a36a3;
    color: #fff;
}
[data-bs-theme="dark"] .gr-attribution {
    color: var(--mv-text-secondary);
}