/* הסרטים שלנו: קולנוע ביתי. שזיף עמוק, צהוב חמאה, אלמוג וטורקיז. */
:root {
  --plum: #2A1633;
  --plum-deep: #1C0E23;
  --plum-raised: #4A2A5A;
  --plum-line: #6B4A7C;
  --butter: #F6D77A;
  --coral: #FF8A7A;
  --teal: #7AC7C4;
  --lilac: #B79CF0;
  --text: #FBF3FF;
  --text-soft: #D9C4E3;
  --danger: #FFB3A8;
  --display: 'Suez One', 'Heebo', serif;
  --body: 'Heebo', system-ui, sans-serif;
  --page: min(1120px, 100%);
  --gutter: 20px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--plum); color: var(--text);
  font: 400 17px/1.5 var(--body);
}
a { color: var(--butter); }
h1, h2, h3, p { margin: 0; }
:focus-visible { outline: 3px solid var(--butter); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

/* ─── כפתורים ושדות ─── */
.btn {
  min-height: 52px; padding: 0 22px; border-radius: 26px; border: 2px solid transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 700 18px var(--body); text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn-primary { background: var(--butter); color: var(--plum); }
.btn-primary:hover { background: #FFE49A; }
.btn-ghost { background: transparent; border-color: var(--text); color: var(--text); font-weight: 500; font-size: 16px; }
.btn-ghost:hover { background: rgba(251, 243, 255, .1); }
.btn-danger { background: transparent; border-color: var(--danger); color: var(--danger); font-weight: 500; font-size: 16px; }
.btn-small { min-height: 44px; padding: 0 16px; font-size: 15px; }
.grow { flex-grow: 1; }
.icon-btn {
  width: 44px; height: 44px; border-radius: 22px; border: 0; background: rgba(28, 14, 35, .45); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; font-size: 17px; text-decoration: none; cursor: pointer;
}
.icon-btn:hover { background: rgba(28, 14, 35, .7); }
.pill {
  min-height: 44px; min-width: 64px; padding: 0 14px; border-radius: 22px; border: 1.5px solid var(--text);
  background: transparent; color: var(--text); font: 500 15px var(--body); cursor: pointer;
}
.stack { display: flex; flex-direction: column; gap: 10px; }
.stack label, .inline-form label { font-weight: 500; font-size: 16px; }
.field {
  width: 100%; min-height: 52px; padding: 12px 14px; border-radius: 10px; border: 1.5px solid var(--lilac);
  background: var(--plum); color: var(--text); font: 400 17px var(--body);
}
.field::placeholder { color: #A98DB8; }
textarea.field { resize: vertical; }
.hint { font-size: 14px; color: var(--text-soft); }
.back { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; font-size: 16px; text-decoration: none; }
.back:hover { text-decoration: underline; }

/* ─── כניסה ─── */
.login-page { display: flex; align-items: center; justify-content: center; padding: var(--gutter); }
.login-card { width: min(400px, 100%); display: flex; flex-direction: column; gap: 14px; }
.login-title { font: 400 44px/1.05 var(--display); color: var(--butter); }
.login-sub { color: var(--text-soft); margin-bottom: 6px; }
.form-error { background: #5A1F2B; color: #FFD9D3; padding: 12px 14px; border-radius: 10px; font-size: 15px; }
.login-card .btn { margin-top: 8px; }

/* ─── סרגל עליון ─── */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.brand { font: 400 22px var(--display); color: var(--butter); text-decoration: none; }
.topbar-actions { display: flex; gap: 8px; }

/* ─── בית: החלק העליון ─── */
.hero {
  min-height: 400px; background: var(--plum-raised); background-size: cover; background-position: center;
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px; position: relative;
  padding: var(--gutter) max(var(--gutter), calc((100% - 1120px) / 2));
}
.hero-photo::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(42, 22, 51, .96) 18%, rgba(42, 22, 51, .55) 60%, rgba(42, 22, 51, .7));
}
.hero > * { position: relative; }
.hero-body { display: flex; flex-direction: column; gap: 12px; max-width: 640px; }
.hero-kicker { font-size: 15px; color: #E7D6EF; }
.hero-title { font: 400 clamp(40px, 7vw, 68px)/1.05 var(--display); overflow-wrap: anywhere; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.bar { height: 6px; background: var(--plum-line); border-radius: 3px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--butter); }

/* ─── בית: שורות לפי ערוץ ─── */
.rows { padding: 24px 0 48px; display: flex; flex-direction: column; gap: 28px; }
.row-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px;
  padding: 0 max(var(--gutter), calc((100% - 1120px) / 2));
}
.row-head h2 { font: 400 24px var(--display); }
.row-count { font-size: 14px; color: var(--text-soft); }
.row-scroll {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; scrollbar-color: var(--plum-line) transparent;
  padding: 4px max(var(--gutter), calc((100% - 1120px) / 2)) 12px;
}
.card {
  width: 172px; flex-shrink: 0; scroll-snap-align: start; display: flex; flex-direction: column; gap: 4px;
  color: var(--text); text-decoration: none;
}
.card .tile { width: 172px; height: 108px; margin-bottom: 4px; }
.card-title { font-weight: 500; font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.card-meta { font-size: 14px; color: var(--text-soft); }
.card:hover .card-title { color: var(--butter); }

/* ─── מלבן תמונה ─── */
.tile {
  display: block; border-radius: 10px; background-size: cover; background-position: center; flex-shrink: 0;
  position: relative; overflow: hidden;
}
.tile-coral { background-color: var(--coral); }
.tile-teal { background-color: var(--teal); }
.tile-butter { background-color: var(--butter); }
.tile-lilac { background-color: var(--lilac); }
.tile-bar { position: absolute; inset-inline: 0; bottom: 0; height: 5px; background: rgba(28, 14, 35, .55); direction: ltr; }
.tile-bar span { display: block; height: 100%; background: var(--butter); }

/* ─── אירוע ─── */
.event-head {
  background: var(--plum-raised); display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  padding: var(--gutter) max(var(--gutter), calc((100% - 760px) / 2)) 24px;
}
.event-title { font: 400 clamp(36px, 6vw, 56px)/1.05 var(--display); overflow-wrap: anywhere; }
.event-meta { font-size: 15px; color: #E7D6EF; }
.event-head .btn { align-self: stretch; }
.list { padding: 8px max(var(--gutter), calc((100% - 760px) / 2)) 48px; display: flex; flex-direction: column; }
.list-item {
  min-height: 88px; padding: 10px 0; display: flex; align-items: center; gap: 14px;
  border-bottom: 1px solid var(--plum-raised); color: var(--text); text-decoration: none;
}
.list-item:last-child { border-bottom: 0; }
.list-item .tile { width: 108px; height: 66px; border-radius: 8px; }
.list-item.is-seen .list-title, .list-item.is-seen .list-meta { color: var(--text-soft); }
.list-item.is-seen .tile { opacity: .6; }
.list-text { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.list-title { font-weight: 500; font-size: 18px; overflow-wrap: anywhere; }
.is-current .list-title { font-weight: 700; }
.list-meta { font-size: 14px; color: var(--text-soft); }
.is-current .list-meta { color: var(--butter); }
.list-state { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--teal); white-space: nowrap; }
.list-play { color: var(--butter); font-size: 18px; }
.list-item:hover .list-title { color: var(--butter); }

/* ─── נגן ─── */
.watch { background: var(--plum-deep); }
.player {
  position: relative; background: #000; width: 100%; aspect-ratio: 16 / 9; max-height: 78vh;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.player video { width: 100%; height: 100%; object-fit: contain; display: block; }
.player-center {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 28px;
  pointer-events: none; transition: opacity .2s;
}
.player-center .round { pointer-events: auto; }
.round {
  width: 54px; height: 54px; border-radius: 27px; border: 0; background: rgba(28, 14, 35, .6); color: var(--text);
  font-size: 20px; cursor: pointer; position: relative; display: flex; align-items: center; justify-content: center;
}
.round span { position: absolute; font: 700 10px var(--body); top: 50%; left: 50%; transform: translate(-50%, -42%); }
.round-main { width: 76px; height: 76px; border-radius: 38px; background: var(--butter); color: var(--plum); font-size: 26px; }
.seek { position: absolute; inset-inline: 0; bottom: 0; padding: 0 12px 6px; transition: opacity .2s; }
.seek input {
  -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; cursor: pointer; margin: 0; --fill: 0%;
}
.seek input::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--butter) var(--fill), rgba(251, 243, 255, .35) var(--fill));
}
.seek input::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(251, 243, 255, .35); }
.seek input::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--butter); }
.seek input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 9px; background: var(--butter); margin-top: -6px; }
.seek input::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 9px; background: var(--butter); }
.player.is-idle .player-center, .player.is-idle .seek { opacity: 0; }
.player.is-idle { cursor: none; }
.player.is-loading .round-main { animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }
.player-msg {
  position: absolute; inset-inline: 16px; top: 16px; background: rgba(28, 14, 35, .88); color: var(--text);
  padding: 12px 14px; border-radius: 10px; font-size: 15px; text-align: center;
}
.player > .player-msg:only-child { position: static; margin: 0 16px; }
.player:fullscreen { max-height: none; aspect-ratio: auto; width: 100vw; height: 100vh; }
.controls {
  min-height: 56px; padding: 6px 16px; background: var(--plum); display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.controls .icon-btn { background: transparent; border: 1.5px solid var(--text); }
.controls-btns { display: flex; gap: 8px; }
.time { font-size: 14px; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.watch-body { padding: 14px max(var(--gutter), calc((100% - 760px) / 2)) 48px; display: flex; flex-direction: column; gap: 6px; }
.watch-title { font: 400 28px/1.15 var(--display); overflow-wrap: anywhere; }
.watch-note { font-size: 15px; color: var(--text-soft); }
.next-card {
  margin-top: 14px; min-height: 78px; padding: 10px 14px; border-radius: 12px; background: var(--plum-raised);
  display: flex; align-items: center; gap: 14px; color: var(--text); text-decoration: none;
}
.next-card .tile { width: 92px; height: 56px; border-radius: 8px; }
.next-label { font-size: 14px; color: var(--butter); }
.next-card:hover { background: #563368; }
.parts-head { margin-top: 20px; font: 500 16px var(--body); color: var(--text-soft); }
.parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; margin-top: 6px; }
.part {
  height: 56px; border-radius: 10px; background: var(--plum-raised); color: var(--text); border: 1.5px solid transparent;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; text-decoration: none;
}
.part.is-seen { background: var(--plum); border-color: var(--teal); color: var(--teal); }
.part.is-now { background: var(--butter); color: var(--plum); }
.parts-legend { margin-top: 10px; font-size: 14px; color: var(--text-soft); display: flex; align-items: center; gap: 6px; }
.dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.dot-seen { border: 1.5px solid var(--teal); }
.dot-now { background: var(--butter); margin-inline-start: 12px; }

/* ─── ניהול ─── */
.manage-wrap { padding: var(--gutter) max(var(--gutter), calc((100% - 720px) / 2)) 64px; display: flex; flex-direction: column; gap: 18px; }
.manage-title { font: 400 34px/1.1 var(--display); }
.manage-sub { font: 400 24px var(--display); margin-top: 18px; }
.panel { background: var(--plum-raised); border-radius: 14px; padding: 16px; }
.panel-summary { min-height: 44px; display: flex; align-items: center; gap: 10px; font-weight: 500; cursor: pointer; }
.panel[open] .panel-summary { margin-bottom: 12px; }
.flash { padding: 12px 14px; border-radius: 10px; font-size: 15px; }
.flash-ok { background: #1F4A48; color: #D6F5F3; }
.flash-error { background: #5A1F2B; color: #FFD9D3; }
.flash-warn { background: #4A3D12; color: #FFE9A8; }
.empty { color: var(--text-soft); padding: 12px 0; }
.manage-list { display: flex; flex-direction: column; }
.manage-item {
  padding: 14px 0; border-bottom: 1px solid var(--plum-raised); display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.manage-main { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.manage-name { font: 700 18px var(--body); overflow-wrap: anywhere; }
.manage-name[dir="ltr"] { text-align: right; }
.manage-addr { font-size: 14px; color: var(--text-soft); text-align: right; overflow-wrap: anywhere; }
.status { font-size: 14px; }
.status-ok { color: var(--teal); }
.status-busy { color: var(--butter); }
.status-bad { color: var(--danger); }
.manage-more { flex: 0 0 auto; max-width: 100%; }
.manage-more summary { list-style: none; }
.manage-more summary::-webkit-details-marker { display: none; }
.manage-more[open] { flex-basis: 100%; }
.manage-actions { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.inline-form { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.inline-form label { flex-basis: 100%; }
.inline-form .field { flex: 1 1 200px; width: auto; }

@media (min-width: 720px) {
  .hero { min-height: 460px; }
  .card, .card .tile { width: 220px; }
  .card .tile { height: 138px; }
  .event-head .btn { align-self: flex-start; }
  .player { max-height: 72vh; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}