* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { background-color: #141414; color: #ffffff; padding: 20px; }

header { text-align: center; margin-bottom: 40px; margin-top: 20px; }
h1 { font-size: 2.5rem; color: #e50914; margin-bottom: 10px; }
p { color: #aaa; margin-bottom: 20px; }

/* Search Area */
.search-container { display: flex; justify-content: center; gap: 10px; max-width: 600px; margin: 0 auto; }
.input-wrapper { position: relative; flex: 1; display: flex; align-items: center; }
.input-wrapper input { width: 100%; padding: 12px 40px 12px 20px; font-size: 1rem; border: none; border-radius: 25px; outline: none; background-color: #333; color: white; }
.clear-button { position: absolute; right: 15px; background: none; border: none; color: #888; font-size: 1.5rem; cursor: pointer; padding: 0; display: none; line-height: 1; }
.clear-button:hover { color: #fff; background-color: transparent; }
button#search-button { padding: 12px 25px; font-size: 1rem; border: none; border-radius: 25px; background-color: #e50914; color: white; cursor: pointer; font-weight: bold; transition: background-color 0.2s; }
button#search-button:hover { background-color: #f40612; }

/* Suggestions Dropdown */
.suggestions-list { position: absolute; top: 100%; left: 0; right: 0; background-color: #222; border-radius: 10px; margin-top: 5px; box-shadow: 0 4px 15px rgba(0,0,0,0.8); list-style: none; max-height: 300px; overflow-y: auto; z-index: 100; display: none; }
.suggestions-list li { padding: 10px 15px; cursor: pointer; display: flex; align-items: center; gap: 15px; border-bottom: 1px solid #333; transition: background-color 0.2s; }
.suggestions-list li:last-child { border-bottom: none; }
.suggestions-list li:hover { background-color: #333; }
.suggestion-img { width: 40px; height: 60px; object-fit: cover; border-radius: 4px; background-color: #111; }
.suggestion-text { display: flex; flex-direction: column; }
.suggestion-title { font-weight: bold; font-size: 0.95rem; color: #fff; }
.suggestion-meta { font-size: 0.75rem; color: #888; text-transform: uppercase; }

/* Cards & Grid */
.results-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 30px; max-width: 1200px; margin: 0 auto; }
.card { background-color: #222; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 15px rgba(0,0,0,0.5); transition: transform 0.2s; cursor: pointer; }
.card:hover { transform: translateY(-5px); }
.card img.poster { width: 100%; height: 375px; object-fit: cover; background-color: #333; }
.card-info { padding: 15px; }
.card-info h3 { font-size: 1.2rem; margin-bottom: 5px; }
.media-type { font-size: 0.8rem; color: #888; text-transform: uppercase; margin-bottom: 10px; display: inline-block; }
.rating { color: #ffd700; font-weight: bold; margin-left: 10px; }

/* Genres & Description */
.card-genres { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.genre-tag { background-color: #333; color: #eee; font-size: 0.7rem; padding: 4px 10px; border-radius: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.card-description { font-size: 0.85rem; color: #bbb; margin-bottom: 15px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Cast & Crew Accordion */
.cast-accordion { margin-bottom: 15px; border-top: 1px solid #333; padding-top: 10px; }
.cast-accordion summary { font-size: 0.85rem; color: #ccc; cursor: pointer; font-weight: bold; text-transform: uppercase; list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 5px 0; }
.cast-accordion summary::-webkit-details-marker { display: none; }
.cast-accordion summary::after { content: '▼'; font-size: 0.7rem; color: #888; transition: transform 0.3s ease; }
.cast-accordion[open] summary::after { transform: rotate(180deg); }
.cast-list { display: flex; gap: 12px; margin-top: 12px; }
.cast-member { display: flex; flex-direction: column; align-items: center; width: 55px; }
.cast-member img { width: 45px; height: 45px; border-radius: 50%; object-fit: cover; background-color: #444; margin-bottom: 4px; border: 2px solid #222; }
.cast-name { font-size: 0.65rem; color: #eee; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; font-weight: bold; }
.cast-role { font-size: 0.45rem; color: #888; text-transform: uppercase; margin-top: 2px; letter-spacing: 0.5px; }

/* Streaming Providers List */
.providers-list { margin-top: 10px; border-top: 1px solid #444; padding-top: 10px; }
.providers-list h4 { font-size: 0.9rem; color: #ccc; margin-bottom: 10px; }
.global-providers { display: flex; flex-direction: column; gap: 12px; max-height: 200px; overflow-y: auto; padding-right: 5px; }
.global-providers::-webkit-scrollbar { width: 6px; }
.global-providers::-webkit-scrollbar-thumb { background-color: #555; border-radius: 10px; }
.provider-item { display: flex; align-items: center; gap: 12px; }
.provider-item img { width: 35px; height: 35px; border-radius: 8px; }
.provider-details { display: flex; flex-direction: column; }
.provider-name { font-size: 0.85rem; font-weight: bold; color: #eee; }
.provider-flags { font-size: 0.85rem; letter-spacing: 2px; }
.no-providers { color: #e50914; font-size: 0.9rem; font-style: italic; }

/* Accessibility */
input:focus, button:focus, .card:focus, select:focus, .clear-button:focus, .suggestions-list li:focus { outline: 3px solid #e50914; outline-offset: 3px; box-shadow: 0 0 15px rgba(229, 9, 20, 0.5); }