:root{
  --bg:#0f1724; --card:#0b1220; --muted:#94a3b8; --accent:#06b6d4; --glass: rgba(255,255,255,0.04);
  --radius:12px; --gap:16px;
  --max-width:1200px;
  color-scheme: dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:linear-gradient(180deg,#071021 0%, #071427 100%);
  color:#e6eef6; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  padding:24px; display:flex; justify-content:center;
}
.app{width:100%; max-width:var(--max-width)}

header{display:flex;align-items:center;gap:16px;margin-bottom:20px}
header h1{margin:0;font-size:20px}
.controls{display:flex;gap:12px;flex-wrap:wrap;margin-left:auto}

.search{display:flex;align-items:center;background:var(--glass);padding:8px;border-radius:999px;gap:8px;width:360px}
.search input{background:transparent;border:0;outline:0;color:inherit;font-size:14px;width:100%}

select, .btn{background:#06202a;border:1px solid rgba(255,255,255,0.04);color:#e6eef6 ;padding:8px 12px;border-radius:10px;font-size:14px}
.btn{cursor:pointer}



/* ...existing code... */

/* Make header vertical and center items */
header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 20px;
  padding-bottom: 5px;
}

/* Center and style the title */
.header-title {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 2px;
  color: white;
}

/* light mode title (added) */
:root[data-theme="light"] .header-title { 
  color: #3366ff;
}
/* h1 title styles */
.header-title h1 {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  max-width: 900px;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-bottom: 2px;
}

/* title - padding desktop/large screen */
@media (min-width: 601px) {
  .header-title h1 {
    padding-bottom: 6px;
  }
}

/* Center .controls on desktop and large screens */
@media (min-width: 901px) {
  .controls {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 0;
    gap: 12px;
  }
}


/* ...existing code... */

/* ...existing code... */

/* Make h1 title smaller for small screens */
@media (max-width:600px) {
  .header-title h1 {
    font-size: 1.2rem;
    line-height: 1.3;
    max-width: 100vw;
    white-space: normal;
    text-overflow: initial;
    overflow: visible;
  }
}

/* Make h1 title smaller for very small screens - iPhone SE (added) */
@media (max-width:375px) {
  .header-title h1 {
    font-size: 1rem;
    line-height: 1.3;
    max-width: 100vw;
    white-space: normal;
    text-overflow: initial;
    overflow: visible;
  }
}

/* ...existing code... */

/* fav count text size - 16 default? may not need*/
#favCount {
  font-size: 16px;
}

/* ...existing code... */


/* Navigation menu styles */
.nav-menu {
  width: 100%;
  margin-bottom: 10px;
  padding-bottom: 10px;
}
.nav-menu ul {
  display: flex;
  gap: 24px;
  list-style: none;
  padding: 10;
  margin: 0;
}

.nav-menu a {
  color: lightblue; /* var(--accent) */
  text-decoration: none;
  font-weight: 600;
  font-size: 17px; /* made slightly larger from 16px */
  padding: 8px 0;
  transition: color 0.15s;
}
.nav-menu a:hover {
  color: #fff;
  text-decoration: underline;
}


/* ...existing code... */

/* Center navigation menu under the title on all screens */
.nav-menu {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
}
.nav-menu ul {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0 auto;
}

/* Responsive navigation for small screens */
@media (max-width:600px) {
  .nav-menu {
    justify-content: center;
    width: 100%;
    padding-bottom: 8px;
  }
  .nav-menu ul {
    gap: 12px;
    font-size: 13px;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 100%;
  }
  .nav-menu a {
    font-size: 13px;
    padding: 6px 0;
    text-align: center;
  }
}

/* For very small screens (e.g. iPhone SE, Surface Duo, Galaxy Z Fold) */
@media (max-width:400px) {
  .nav-menu ul {
    gap: 8px;
    font-size: 12px;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 100%;
  }
  .nav-menu a {
    font-size: 12px;
    padding: 5px 0;
    text-align: center;
  }
}

/* ...existing code... */


/* ...existing code... */

/* Center and style the sub-title under the h1 */
.sub-title {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}
.sub-title h4 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 500;
  text-align: center;
  color: white;
  max-width: 900px;
  width: 100%;
}

/* sub-title - light mode */
:root[data-theme="light"] .sub-title h4 { 
  color: black;
}

/* Responsive sub-title for small screens */
@media (max-width:600px) {
  .sub-title h4 {
    font-size: 1rem;
    line-height: 1.3;
    max-width: 100vw;
    white-space: normal;
    text-overflow: initial;
    overflow: visible;
  }
}

/* Even smaller screens */
@media (max-width:375px) {
  .sub-title h4 {
    font-size: 0.9rem;
  }
}

/* ...existing code... */




/* ...existing code... */

/* Center navigation menu under the title on desktop/larger screens */
@media (min-width: 601px) {
  .nav-menu {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
  }
  .nav-menu ul {
    justify-content: center;
    width: auto;
  }
}

/* iPad mini - div controls */
@media (max-width: 768px) {
  .controls {
    width: 100%;
    flex-direction:row;
    gap: 8px;
    margin-left: 0;
  }
  .search {
    width: 100%;
    min-width: 100px;
  }
}

/* ...existing code... */

/* light mode nav menu */
:root[data-theme="light"] .nav-menu a {
  color: rgb(53, 51, 51);
}

/* Responsive navigation for small screens */
@media (max-width:600px) {
  .nav-menu ul {
    gap: 12px;
    font-size: 13px;
  }
  .nav-menu a {
    font-size: 14px;
    padding: 6px
  }
} 

/* text white for providers */
.provider-item {
  color: #e6eef6;
}

/* chips - white background for light mode */
button.chip.active {
  color: white;
}

main{display:grid;grid-template-columns:250px 1fr; gap:24px}

/* sidebar */
.sidebar{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);padding:16px;border-radius:12px;min-height:200px}
.filters h3{margin:0 0 10px 0;font-size:13px;color:var(--muted)}
.providers{display:flex;flex-wrap:wrap;gap:8px}
.chip{padding:6px 8px;background:transparent;border:1px solid rgba(255,255,255,0.04);border-radius:999px;font-size:13px;color:var(--muted);cursor:pointer}
.chip.active{background:#3333ff;color:#022; border:none}

/* ...existing code... */

/* ...existing code... */

.sidebar .filters {
  display:block;
  gap:8px;
}

/* provider search input */
#providerSearch {
  width: 160px;
  max-width: 40%;
  font-size: 13px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.06);
  padding: 6px 8px;
  border-radius: 8px;
  color: inherit;
}
@media (max-width:900px) {
  #providerSearch { width: 120px; max-width: 50%; }
}
@media (max-width:600px) {
  #providerSearch { width: 100px; max-width: 40%; font-size:12px; }
}

/* ensure provider chips wrap nicely */
.providers { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }

/* ...existing code... */

/* Download favorites button style */
#downloadFavsBtn.btn {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 10px 0;
  font-size: 15px;
  border-radius: 10px;
  background: rgb(28, 48, 48);
  color: #fff;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}


/* ...existing code... */

/* results */
.content-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px}
.card{background:var(--card);border-radius:12px;overflow:hidden;box-shadow:0 6px 18px rgba(2,6,23,0.6);cursor:pointer;transition:transform .12s}
.card:hover{transform:translateY(-6px)}
.poster{width:100%;aspect-ratio:2/3;object-fit:cover;background:linear-gradient(180deg,#0b1220,#06121a)}
.meta{padding:10px}
.title{font-size:14px;margin:0 0 6px 0}
.sub{font-size:13px;color:var(--muted)}

/* results - card - light mode */
:root[data-theme="light"] .card {
  background: #fff;
  box-shadow: 0 2px 8px rgba(2,6,23,0.1);
}

/* title - light mode */
:root[data-theme="light"] .title {
  color: #000;
}

/* sub - light mode */
:root[data-theme="light"] .sub {
  color: black;
}

/* release date - light mode */
:root[data-theme="light"] .release-date {
  color: black;
}

/* chip - light mode */
:root[data-theme="light"] button.chip {
  border: 1px solid #ccc;
  color: #333;
}

/* chip - dark mode */
:root[data-theme="dark"] button.chip {
  border: .5px solid white;
  color: white;
}

/* title - light mode */
:root[data-theme="dark"], h2 {
  color: white;
}

/* chip active - light mode */
:root[data-theme="light"] button.chip.active {
  background: var(--accent);
  color: white;
}

/* results count - light mode */
:root[data-theme="light"] .content-header {  
  color: black;
}

/* fav count - light mode */
:root[data-theme="light"] #favCount {  
  color: black;
}

/* Keep release overview paragraphs white in the details modal (also when light mode is active) */
.modal,
.modal p,
.modal .overview {
  color: #ffffff !important;
}

/* modal */
.modal-backdrop{position:fixed;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0.6),rgba(0,0,0,0.8));display:flex;align-items:center;justify-content:center;padding:24px}
.modal{background:#071226;padding:20px;border-radius:14px;max-width:900px;width:100%;display:grid;grid-template-columns:240px 1fr;gap:18px}
.modal .poster{aspect-ratio:2/3}
.providers-list{display:flex;gap:8px;flex-wrap:wrap}
.provider-item{background:#072836;padding:8px;border-radius:8px;font-size:15px}

/* favorites */
.fav{background:transparent;border:0;color:var(--accent);cursor:pointer;font-weight:600}

footer{margin-top:18px;color:var(--muted);font-size:13px}

/* ...existing code... */

/* Only apply black outline to search bar in light mode */
.search,
:root[data-theme="light"] .search {
  background: #fff;
  border: 2px solid #000;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  color: #000;
}

/* Remove card hover effect */
.card {
  background: var(--card);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(2,6,23,0.6);
  cursor:default; /* not pointer */
  transition:transform .12s;
}

/* Only show pointer and hover effect for buttons */
.card .btn,
.card .fav {
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

/* Prevent card hover transform */
.card:hover {
  transform: none;
}


/* responsive */
@media (max-width:900px){main{grid-template-columns:1fr} .sidebar{order:2}}

/* responsive */
@media (max-width:900px){
  main{grid-template-columns:1fr}
  .sidebar{order:2}
}

@media (max-width:600px) {
  body {
    padding:8px;
  }
  .app {
    max-width:100vw;
  }
  header {
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
  .controls {
    width:100%;
    flex-direction:column;
    gap:8px;
    margin-left:0;
  }
  .search {
    width:100%;
    min-width:0;
  }
  .grid {
    grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
    gap:10px;
  }
  .card {
    border-radius:10px;
    box-shadow:0 2px 8px rgba(2,6,23,0.3);
  }
  .poster {
    aspect-ratio:2/3;
    /* max-height:180px; */
  }
  .meta {
    padding:7px;
  }
  .title {
    font-size:14px;
    margin-bottom:4px;
  }
  .release-date {
    font-size:12px;
    margin-bottom:2px;
  }
  .sub {
    font-size:12px;
  }
  .fav, .btn {
    font-size:12px;
    padding:6px 8px;
    border-radius:8px;
  }
  .modal {
    grid-template-columns:1fr;
    padding:10px;
    max-width:98vw;
    gap:10px;
  }
  .modal .poster {
    max-width:100%;
    aspect-ratio:2/3;
    margin-bottom:10px;
  }
  .providers-list {
    gap:5px;
  }
  .provider-item {
    font-size:16px;
    padding:6px;
  }
  footer {
    font-size:12px;
    margin-top:10px;
  }
}

/* Even smaller screens */
@media (max-width:600px) {
  .grid {
    grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
    gap:8px;
  }
  .card {
    border-radius:10px;
    box-shadow:0 2px 8px rgba(2,6,23,0.2);
    padding:0;
    min-width:0;
    max-width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .poster {
    width:100%;
    aspect-ratio:2/3;
    object-fit:cover;
    /* max-height:180px;
    min-height:120px; */
    border-radius:10px 10px 0 0;
    margin:0;
    background:linear-gradient(180deg,#0b1220,#06121a);
  }
  .meta {
    width:100%;
    padding:7px 6px 8px 6px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
  }
  .title {
    font-size:14px;
    margin-bottom:2px;
    margin-top:0;
    font-weight:600;
    line-height:1.2;
  }
  .release-date {
    font-size:12px;
    margin-bottom:4px;
    color:var(--muted);
  }
  .sub {
    font-size:12px;
    margin-bottom:4px;
    color:var(--muted);
  }
  .fav, .btn {
    font-size:12px;
    padding:5px 7px;
    border-radius:8px;
  }
  .meta > div[style*="margin-top:8px"] {
    margin-top:6px !important;
    gap:6px !important;
  }
}

/* For very small screens (e.g. iPhone SE) */
@media (max-width:400px) {
  .grid {
    grid-template-columns:1fr;
    gap:6px;
  }
  .card {
    border-radius:8px;
  }
  .meta {
    padding:5px 4px 6px 4px;
  }
  .poster {
    /* max-height:140px;
    min-height:90px; */
    border-radius:8px 8px 0 0;
  }
}

/* For very small screens (e.g. iPhone, smartphones) */
@media (max-width:600px) {
  .grid {
    grid-template-columns:repeat(auto-fill,minmax(110px,1fr));
    gap:7px;
  }
  .card {
    border-radius:10px;
    box-shadow:0 2px 8px rgba(2,6,23,0.18);
    padding:0;
    min-width:0;
    max-width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
  }
  .poster {
    width:100%;
    aspect-ratio:2/3;
    object-fit:cover;
    /* max-height:170px;
    min-height:110px; */
    border-radius:10px 10px 0 0;
    margin:0;
    background:linear-gradient(180deg,#0b1220,#06121a);
  }
  .meta {
    width:100%;
    padding:7px 6px 8px 6px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
  }
  .title {
    font-size:14px;
    margin-bottom:2px;
    margin-top:0;
    font-weight:600;
    line-height:1.2;
  }
  .release-date {
    font-size:12px;
    margin-bottom:4px;
    color:var(--muted);
  }
  .sub {
    font-size:12px;
    margin-bottom:4px;
    color:var(--muted);
  }
  .fav, .btn {
    font-size:12px;
    padding:5px 7px;
    border-radius:8px;
  }
  .meta > div[style*="margin-top:8px"] {
    margin-top:6px !important;
    gap:6px !important;
  }
}

/* For very small screens (e.g. iPhone SE) */
@media (max-width:100px) {
  .grid {
    grid-template-columns:1fr;
    gap:5px;
  }
  .card {
    border-radius:8px;
  }
  .meta {
    padding:5px 4px 6px 4px;
  }
  .poster {
    /* max-height:120px;
    min-height:80px; */
    border-radius:8px 8px 0 0;
    aspect-ratio:2/3;
    width:100%;
    object-fit:cover;
  }
}

/* Hide poster in modal/details only on very small screens */
@media (max-width:500px) {
  .modal .poster {
    display: none;
  }
}
/* Do NOT hide posters in the grid/list view on small screens */

/* ...existing code... */

/* Move sidebar (providers & favorites) to top for small screens */
@media (max-width:900px) {
  main {
    display: block;
  }
  .sidebar {
    width: 100%;
    min-width: 0;
    max-width: 100vw;
    margin-bottom: 16px;
    padding: 12px 0 0 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    order: 0;
  }
  .filters h3 {
    margin-top: 0;
  }
}

/* On small screens, place sidebar above results grid */
@media (max-width:900px) {
  .sidebar {
    position: static;
  }
  section {
    width: 100%;
  }
}

/* Remove gradient background for small screens */
@media (max-width:900px) {
  body {
    background: #fff !important;
  }
  :root[data-theme="dark"] body {
    background: #0f1724 !important;
  }
}


/* light mode provider h3 */
:root[data-theme="light"] .filters h3 {
  color: black;
}

/* light mode favorites */
:root[data-theme="light"] #favoritesText {
  color: black;
}

/* dark mode favorites */
:root[data-theme="dark"] #favoritesText {
  color:var(--muted)
}

/* light mode theme text */
:root[data-theme="light"] #themeText {
  color: black;
} 
/* dark mode theme text */
:root[data-theme="dark"] #themeText {
  color:var(--muted)
}


/* Remove this block to keep dark mode on mobile */

@media (max-width:900px) {
  body {
    background: #fff !important;
  }
  :root[data-theme="dark"] body {
    background: #0f1724 !important;
  }
}

@media (max-width:900px) {
  body {
    padding: 0 !important;
    display: block !important;
    justify-content: initial !important;
    align-items: initial !important;
  }
  .reviews-container {
    margin: 0 !important;
    padding-top: 0;
    padding-bottom: 0;
    min-height: 100vh;
    box-sizing: border-box;
    background: #0f1724;
  }
}

/* Add spacing around content for mobile/phones */
@media (max-width:600px) {
  body {
    padding: 0 !important;
  }
  .app {
    padding: 10px 4px 16px 4px;
    max-width: 100vw;
  }
  header,
  .sidebar,
  section,
  .content-header,
  .grid,
  footer {
    padding-left: 6px;
    padding-right: 6px;
    box-sizing: border-box;
  }
  .grid {
    margin-top: 8px;
    margin-bottom: 8px;
  }
  .sidebar {
    margin-bottom: 14px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .card {
    margin-bottom: 10px;
  }
}

/* For very small screens */
@media (max-width:400px) {
  .app {
    padding: 4px 1px 10px 1px;
  }
  header,
  .sidebar,
  section,
  .content-header,
  .grid,
  footer {
    padding-left: 2px;
    padding-right: 2px;
  }
}
/* Add spacing around content for tablets */
@media (max-width:900px) {
  body {
    padding: 0 !important;
  }
  .app {
    padding: 18px 10px 24px 10px;
    max-width: 100vw;
  }
  header,
  .sidebar,
  section,
  .content-header,
  .grid,
  footer {
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
  }
  .grid {
    margin-top: 12px;
    margin-bottom: 12px;
    gap: 14px;
  }
  .sidebar {
    margin-bottom: 18px;
    padding-top: 14px;
    padding-bottom: 14px;
  }
  .card {
    margin-bottom: 14px;
  }
}

.poster {
  width: 100%;
  aspect-ratio: 2/3;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
  margin: 0;
  background: linear-gradient(180deg,#0b1220,#06121a);
  display: block;
}

/* Show the time on a new line under the date for all screens */
.release-date span {
  display: block;
  margin-left: 0 !important;
  margin-top: 2px;
  font-size: 13px;
}

/* More mobile adjustments for very small and tablet - larger text/sub and modal buttons

/* Make .sub text larger on small screens and tablets */
@media (max-width:900px) {
  .sub {
    font-size: 15px;
    line-height: 1.4;
  }
}

/* Make .sub text even larger on very small screens */
@media (max-width:600px) {
  .sub {
    font-size: 14px;
    line-height: 1.5;
  }
}

/* Make modal action buttons and provider "Where to watch" button larger on tablets and small screens */
@media (max-width:900px) {
  .modal .btn,
  .modal #closeModal,
  .modal #favModal,
  .modal .providers-list a {
    font-size: 15px !important; /* adjusted close/save buttons to be smaller in details og: 17px */
    padding: 8px 18px !important; /* padding made smaller og: 12px (first number) */
    border-radius: 12px !important;
  }
  .modal .providers-list a {
    font-size: 16px !important;
    padding: 10px 2px !important; /* padding 16 to 2 (second number) since it made a large gap */
    border-radius: 10px !important;
  }
}

/* Make modal action buttons and provider "Where to watch" button even larger on very small screens */
@media (max-width:600px) {
  .modal .btn,
  .modal #closeModal,
  .modal #favModal,
  .modal .providers-list a {
    font-size: 15px !important; /* adjusted close/save buttons to be smaller in details og: 18px */
    padding: 10px 22px !important; /* padding made smaller og: 14px (first number) */
    border-radius: 14px !important;
  }
  .modal .providers-list a {
    font-size: 17px !important;
    padding: 12px 2px !important; /*  padding 18 to 2 (second number) since it made a large gap */
    border-radius: 12px !important;
  }
}

/* Increase button sizes for cards for mobile/tablet - save, details, and view favs button

/* Make Save and Details buttons in cards larger on tablets and small screens - update: made slightly smaller */
@media (max-width:900px) {
  .card .btn,
  .card .fav {
    font-size: 16px !important;
    padding: 12px 18px !important;
    border-radius: 12px !important;
  }
}

/* Make Save and Details buttons in cards even larger on very small screens */
@media (max-width:600px) {
  .card .btn,
  .card .fav {
    font-size: 14px !important;
    padding: 14px 10px !important;
    border-radius: 10px !important;
  }
}

/* Make the View button for favorites larger on mobile */
@media (max-width:600px) {
  #viewFav.btn {
    font-size: 16px !important;
    padding: 10px 18px !important;
    border-radius: 12px !important;
  }
}

/* iphone 14 media query - 2 row release in column */

@media (max-width:600px) {
  .grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }
}