/**
 * Add to Watchlist Modal Component Styles
 */

/* Modal styling */
#addToWatchlistModal .modal-header {
    border-bottom: none;
}

#addToWatchlistModal .modal-title i {
    margin-right: 0.5rem;
}

#addToWatchlistModal .modal-body {
    padding-top: 0.5rem;
}

#addToWatchlistModal .modal-footer {
    border-top: 1px solid var(--mv-border-color);
}

/* Title display */
#watchlistTitleDisplay {
    font-size: 1.1rem;
    color: #333;
    padding: 0.25rem 0;
}

/* Partner pills */
.watchlist-partner-pills {
    margin-bottom: 0.25rem;
}

.watchlist-partner-btn {
    font-size: 0.8rem;
    padding: 0.35rem 0.6rem;
    border-radius: 0.375rem;
    transition: all 0.15s ease;
}

.watchlist-partner-btn i {
    margin-right: 0.25rem;
}

.watchlist-partner-btn.active {
    background-color: #17a2b8;
    border-color: #17a2b8;
    color: white;
}

.watchlist-partner-btn:hover:not(.active) {
    background-color: #e9ecef;
}

/* Method pills */
.watchlist-method-pills {
    margin-bottom: 0.5rem;
}

.watchlist-method-btn {
    font-size: 0.75rem;
    padding: 0.3rem 0.5rem;
    border-radius: 0.375rem;
    transition: all 0.15s ease;
}

.watchlist-method-btn i {
    font-size: 0.85rem;
}

.watchlist-method-btn.active {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: white;
}

/* Custom icon text for services without Bootstrap icons */
.watchlist-method-icon {
    font-weight: 700;
    font-size: 0.85rem;
    display: inline-block;
    min-width: 1em;
    text-align: center;
}

/* Netflix button - Red theme */
.watchlist-method-netflix {
    border-color: #E50914;
    color: #E50914;
}

.watchlist-method-netflix:hover,
.watchlist-method-netflix.active {
    background-color: #E50914;
    border-color: #E50914;
    color: white;
}

/* Amazon Prime button - Blue theme */
.watchlist-method-prime {
    border-color: #00A8E1;
    color: #00A8E1;
}

.watchlist-method-prime:hover,
.watchlist-method-prime.active {
    background-color: #00A8E1;
    border-color: #00A8E1;
    color: white;
}

/* Max (HBO) button - Purple theme */
.watchlist-method-max {
    border-color: #6f42c1;
    color: #6f42c1;
}

.watchlist-method-max:hover,
.watchlist-method-max.active {
    background-color: #6f42c1;
    border-color: #6f42c1;
    color: white;
}

/* Priority button group */
#addToWatchlistModal .watchlist-priority-group .btn {
    padding: 0.4rem 0.6rem;
    font-size: 0.85rem;
}

#addToWatchlistModal .watchlist-priority-group .btn i {
    font-size: 0.75rem;
}

/* Priority specific colors when active */
#addToWatchlistModal .watchlist-priority-group .btn-check:checked + .btn-outline-secondary {
    background-color: #6c757d;
    border-color: #6c757d;
    color: white;
}

#addToWatchlistModal .watchlist-priority-group .btn-check:checked + .btn-outline-primary {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: white;
}

#addToWatchlistModal .watchlist-priority-group .btn-check:checked + .btn-outline-warning {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #212529;
}

#addToWatchlistModal .watchlist-priority-group .btn-check:checked + .btn-outline-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
}

/* Form select styling */
#addToWatchlistModal .form-select optgroup {
    font-weight: 600;
    color: var(--mv-text-secondary);
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .watchlist-partner-pills {
        flex-wrap: wrap;
    }

    .watchlist-partner-btn {
        flex: 0 0 auto;
        margin-bottom: 0.25rem;
    }

    .watchlist-method-pills {
        flex-wrap: wrap;
    }

    .watchlist-method-btn {
        flex: 0 0 auto;
        margin-bottom: 0.25rem;
    }

    #addToWatchlistModal .watchlist-priority-group {
        flex-wrap: wrap;
    }

    #addToWatchlistModal .watchlist-priority-group .btn {
        flex: 1 1 45%;
        margin-bottom: 0.25rem;
    }
}

/* ========================================
   DARK MODE OVERRIDES
   ======================================== */

[data-bs-theme="dark"] #addToWatchlistModal .modal-footer {
    border-top-color: var(--mv-border-color);
}
[data-bs-theme="dark"] #watchlistTitleDisplay {
    color: var(--mv-text-primary);
}
[data-bs-theme="dark"] .watchlist-partner-btn:hover:not(.active) {
    background-color: var(--mv-bg-hover);
}