/* =========================================================
   7 themes — switch with <html data-theme="...">
   These are style presets inspired by popular streaming apps;
   the site always shows the name/logo set in the admin panel.
   ========================================================= */

/* 1) Netflix style — black, red, flat, Top-10 numbers */
[data-theme="netflix"] {
  --bg: #141414; --bg2: #181818; --surface: #232323; --surface2: #333; --muted: #a3a3a3;
  --accent: #e50914; --accent2: #b20710; --on-accent: #fff;
  --font: 'Kanit', system-ui, sans-serif;
  --radius: 4px; --card-radius: 4px; --btn-radius: 4px;
  --header-solid: rgba(20,20,20,.98);
  --btn-pri-bg: #fff; --btn-pri-fg: #000;
  --card-hover: scale(1.08);
}
[data-theme="netflix"] .logo-text { text-transform: uppercase; letter-spacing: .02em; font-weight: 700; }

/* 2) Disney+ style — deep navy gradient, rounded, glowing borders */
[data-theme="disney"] {
  --bg: #1a1d29; --bg2: #13151f; --surface: #252833; --surface2: #31343e; --muted: #cacaca;
  --accent: #0063e5; --accent2: #0483ee; --on-accent: #fff;
  --font: 'Prompt', system-ui, sans-serif;
  --radius: 10px; --card-radius: 8px; --btn-radius: 6px;
  --page-bg: radial-gradient(ellipse at top, #1f2a48 0%, #1a1d29 45%, #0e0f15 100%);
  --header-bg: linear-gradient(180deg, rgba(9,11,19,.85), rgba(9,11,19,0));
  --header-solid: rgba(9,11,19,.98);
  --btn-pri-bg: #f9f9f9; --btn-pri-fg: #0e0b14;
  --btn-sec-bg: rgba(0,0,0,.5); --btn-sec-fg: #f9f9f9;
  --card-hover: scale(1.05);
  --title-weight: 600;
}
[data-theme="disney"] .poster { border: 3px solid rgba(249,249,249,.1); box-shadow: rgb(0 0 0 / 69%) 0 26px 30px -10px, rgb(0 0 0 / 73%) 0 16px 10px -10px; transition: border-color .3s, box-shadow .3s; }
[data-theme="disney"] .card:hover .poster { border-color: rgba(249,249,249,.85); box-shadow: rgb(0 0 0 / 80%) 0 40px 58px -16px, rgb(0 0 0 / 72%) 0 30px 22px -10px; }
[data-theme="disney"] .hero { margin: calc(var(--header-h) + 14px) var(--gutter) 0; border-radius: 14px; height: calc(var(--hero-h) - 60px); box-shadow: 0 26px 30px -10px rgba(0,0,0,.7); border: 3px solid rgba(249,249,249,.1); }
[data-theme="disney"] .slide-in { padding-top: 40px; }
[data-theme="disney"] .slide::after { background: linear-gradient(90deg, rgba(14,15,21,.9) 0%, rgba(14,15,21,.3) 60%, transparent 80%); }
[data-theme="disney"] .hero + .rows { margin-top: 26px; }
[data-theme="disney"] .btn { text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; }
[data-theme="disney"] .ptile { background: linear-gradient(rgb(48,50,62), rgb(30,31,42)); border: 3px solid rgba(249,249,249,.1); }
[data-theme="disney"] .ptile:hover { border-color: rgba(249,249,249,.85); }
[data-theme="disney"] .logo-text { color: #fff; font-weight: 600; }

/* 3) Prime Video style — dark slate, sky blue accent */
[data-theme="prime"] {
  --bg: #0f171e; --bg2: #121c24; --surface: #1b2530; --surface2: #253341; --muted: #8197a4;
  --accent: #00a8e1; --accent2: #1a98ff; --on-accent: #fff;
  --font: 'Noto Sans Thai', system-ui, sans-serif;
  --radius: 8px; --card-radius: 6px; --btn-radius: 6px;
  --header-bg: #0f171e; --header-solid: #0f171e;
  --btn-pri-bg: #1a98ff; --btn-pri-fg: #fff;
  --btn-sec-bg: rgba(66,83,99,.85);
  --card-hover: scale(1.1);
}
[data-theme="prime"] #top { box-shadow: 0 1px 0 rgba(255,255,255,.06); }
[data-theme="prime"] .hero { margin-top: var(--header-h); height: calc(var(--hero-h) - 60px); }
[data-theme="prime"] .slide-in { padding-top: 30px; }
[data-theme="prime"] .hero + .rows { margin-top: 10px; }
[data-theme="prime"] .row-h h2 { font-size: 1.15rem; }
[data-theme="prime"] .card:hover .poster { box-shadow: 0 0 0 2px #fff, 0 14px 30px rgba(0,0,0,.6); }
[data-theme="prime"] .logo-text { color: #fff; }
[data-theme="prime"] .logo-text::after { content: ""; display: block; height: 3px; margin-top: 4px; border-radius: 3px; background: var(--accent); width: 70%; }

/* 4) HBO Max style — purple night gradient */
[data-theme="hbo"] {
  --bg: #0b0118; --bg2: #120327; --surface: #1d0b38; --surface2: #2a1450; --muted: #b9a8d6;
  --accent: #9b5cff; --accent2: #5822b4; --on-accent: #fff;
  --font: 'Bai Jamjuree', system-ui, sans-serif;
  --radius: 8px; --card-radius: 6px; --btn-radius: 999px;
  --page-bg: linear-gradient(180deg, #1a0638 0%, #0b0118 40%, #05000c 100%);
  --header-bg: linear-gradient(180deg, rgba(11,1,24,.9), rgba(11,1,24,0));
  --header-solid: rgba(14,3,32,.97);
  --btn-pri-bg: linear-gradient(90deg, #5822b4, #9b5cff); --btn-pri-fg: #fff;
  --btn-sec-bg: rgba(255,255,255,.12);
}
[data-theme="hbo"] .slide::after { background: linear-gradient(90deg, rgba(11,1,24,.92) 0%, rgba(26,6,56,.45) 50%, transparent 78%), linear-gradient(0deg, #0b0118 0%, transparent 38%); }
[data-theme="hbo"] .logo-text { background: linear-gradient(90deg, #fff, #b991ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
[data-theme="hbo"] .card:hover .poster { box-shadow: 0 0 0 2px #9b5cff, 0 16px 34px rgba(88,34,180,.5); }
[data-theme="hbo"] .ptile { background: linear-gradient(135deg, #2a1450, #120327); }
[data-theme="hbo"] .row-h h2 { letter-spacing: .01em; }

/* 5) Apple TV+ style — pure black, white buttons, glass, big radius */
[data-theme="apple"] {
  --bg: #000; --bg2: #0c0c0d; --surface: #1c1c1e; --surface2: #2c2c2e; --muted: #98989d;
  --accent: #f5f5f7; --accent2: #d2d2d7; --on-accent: #000;
  --font: 'IBM Plex Sans Thai', -apple-system, system-ui, sans-serif;
  --radius: 16px; --card-radius: 12px; --btn-radius: 10px;
  --header-bg: rgba(0,0,0,.55); --header-solid: rgba(22,22,23,.78);
  --btn-pri-bg: #f5f5f7; --btn-pri-fg: #000;
  --btn-sec-bg: rgba(255,255,255,.16);
  --card-hover: scale(1.04);
  --title-weight: 600;
}
[data-theme="apple"] #top { backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
[data-theme="apple"] .hero { margin: calc(var(--header-h) + 14px) var(--gutter) 0; border-radius: 22px; height: calc(var(--hero-h) - 50px); }
[data-theme="apple"] .slide-in { padding-top: 40px; }
[data-theme="apple"] .hero + .rows { margin-top: 30px; }
[data-theme="apple"] .badge.dub { background: #f5f5f7; color: #000; }
[data-theme="apple"] .badge.sub { background: rgba(0,0,0,.6); color: #fff; backdrop-filter: blur(6px); }
[data-theme="apple"] .logo-text { color: #f5f5f7; font-weight: 600; letter-spacing: -.03em; }
[data-theme="apple"] .ptile { background: linear-gradient(160deg, #2c2c2e, #111); }
[data-theme="apple"] .chip.on { color: #000; }
[data-theme="apple"] .hero-dots button.on { background: #fff; }

/* 6) Hulu style — near black with neon green */
[data-theme="hulu"] {
  --bg: #0b0c0f; --bg2: #111317; --surface: #1a1d23; --surface2: #272b33; --muted: #9ba0aa;
  --accent: #1ce783; --accent2: #17c46f; --on-accent: #040405;
  --font: 'Anuphan', system-ui, sans-serif;
  --radius: 8px; --card-radius: 6px; --btn-radius: 6px;
  --header-solid: rgba(11,12,15,.97);
  --btn-pri-bg: #fff; --btn-pri-fg: #040405;
  --btn-sec-bg: rgba(255,255,255,.14);
}
[data-theme="hulu"] .row-h h2 { font-size: .95rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: #c7ccd4; }
[data-theme="hulu"] .card:hover .poster { box-shadow: 0 0 0 2px var(--accent); }
[data-theme="hulu"] .ptile { background: linear-gradient(135deg, #12392a, #0b0c0f); }
[data-theme="hulu"] .logo-text { text-transform: lowercase; font-weight: 800; }

/* 7) Viu style — charcoal with bold yellow */
[data-theme="viu"] {
  --bg: #121212; --bg2: #181818; --surface: #232323; --surface2: #303030; --muted: #a8a8a8;
  --accent: #f5b400; --accent2: #ffcc33; --on-accent: #111;
  --font: 'Chakra Petch', system-ui, sans-serif;
  --radius: 6px; --card-radius: 6px; --btn-radius: 999px;
  --header-bg: #000; --header-solid: #000;
  --btn-pri-bg: #f5b400; --btn-pri-fg: #111;
  --btn-sec-bg: rgba(255,255,255,.14);
}
[data-theme="viu"] .hero { margin-top: var(--header-h); height: calc(var(--hero-h) - 60px); }
[data-theme="viu"] .slide-in { padding-top: 30px; }
[data-theme="viu"] .hero + .rows { margin-top: 10px; }
[data-theme="viu"] .row-h h2 { border-left: 4px solid var(--accent); padding-left: 10px; }
[data-theme="viu"] .ptile { background: linear-gradient(135deg, #2a2a2a, #121212); border-bottom: 3px solid var(--accent); }
[data-theme="viu"] .logo-text { font-weight: 700; text-transform: uppercase; }

/* Themes that inset the hero: keep header solid & avoid overlap on phones */
@media (orientation: portrait) and (max-width: 960px) {
  [data-theme="disney"] .hero, [data-theme="apple"] .hero { margin: calc(var(--header-h) + 8px) 12px 0; height: calc(var(--hero-h) - 70px); }
  [data-theme="prime"] .hero, [data-theme="viu"] .hero { height: calc(var(--hero-h) - 40px); }
  [data-theme="disney"] .slide-in, [data-theme="apple"] .slide-in, [data-theme="prime"] .slide-in, [data-theme="viu"] .slide-in { padding-top: 18px; }
}
@media (orientation: landscape) and (max-height: 540px) {
  [data-theme="disney"] .hero, [data-theme="apple"] .hero, [data-theme="prime"] .hero, [data-theme="viu"] .hero { height: calc(100svh - var(--header-h) - 10px); }
}