/* Fembeq Player UI (2026) — ใช้กับทุกหน้าในโฟลเดอร์ marimo */
:root {
  --p-accent: #ff6a3d;
  --p-accent-2: #ff8a5c;
  --p-ink: #f4f5f8;
  --p-dim: rgba(244, 245, 248, .62);
  --p-faint: rgba(244, 245, 248, .38);
  --p-glass: rgba(14, 15, 19, .62);
  --p-glass-hi: rgba(28, 30, 38, .78);
  --p-line: rgba(255, 255, 255, .10);
  --p-sans: "IBM Plex Sans Thai", "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
  --p-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
* { outline: none; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; background: #000 !important; overflow: hidden; }
body { font-family: var(--p-sans); color: var(--p-ink); -webkit-font-smoothing: antialiased; font-size: 14px; }

/* ---------- Stage ---------- */
#video-container, #player { position: absolute; inset: 0; width: 100% !important; height: 100% !important; background: #000 !important; overflow: hidden; border: 0; }
#player.jwplayer, .jwplayer { width: 100% !important; height: 100% !important; }
iframe { border: 0; }

.embed-responsive { position: absolute !important; inset: 0; width: 100%; height: 100% !important; padding: 0 !important; overflow: hidden; display: block; }
.embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object, .embed-responsive video {
  position: absolute; top: 0; left: 0; bottom: 0; width: 100%; height: 100%; border: 0;
}
.noshow, .hide-ui { display: none !important; }
.hide { position: absolute; z-index: 9999; top: 10px; right: 10px; width: 45px; height: 45px; background: transparent; }

/* ---------- Loader ---------- */
.p-loader {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 16px;
  background: radial-gradient(60% 60% at 50% 50%, #12131a 0%, #000 70%); z-index: 0;
}
.p-ring { width: 54px; height: 54px; border-radius: 50%; position: relative; }
.p-ring::before, .p-ring::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; }
.p-ring::before { border-color: rgba(255,255,255,.08); }
.p-ring::after { border-top-color: var(--p-accent); border-right-color: var(--p-accent); animation: p-spin .9s cubic-bezier(.6,.2,.4,.8) infinite; }
.p-loader-text { font-size: 12.5px; letter-spacing: .04em; color: var(--p-faint); }
@keyframes p-spin { to { transform: rotate(360deg); } }
/* loader เดิม (cssload) ยังใช้ได้ แต่ซ่อนแล้วใช้วงแหวนแทน */
.cssload-loader { position: absolute; inset: 0; margin: auto; width: 54px; height: 54px; border-radius: 50%; }
.cssload-inner { display: none; }
.cssload-loader::before, .cssload-loader::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid transparent; }
.cssload-loader::before { border-color: rgba(255,255,255,.08); }
.cssload-loader::after { border-top-color: var(--p-accent); border-right-color: var(--p-accent); animation: p-spin .9s cubic-bezier(.6,.2,.4,.8) infinite; }

/* ---------- Server switcher ---------- */
.p-servers {
  position: fixed; top: 14px; right: 14px; z-index: 9999; font-family: var(--p-sans);
  transition: opacity .35s ease, transform .35s ease;
}
body.p-idle .p-servers:not(.open) { opacity: 0; transform: translateY(-6px); }
.p-servers-btn {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 10px;
  border: 1px solid var(--p-line); border-radius: 999px; cursor: pointer;
  background: var(--p-glass); color: var(--p-ink); font: 500 13px var(--p-sans);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 8px 24px -10px rgba(0,0,0,.8);
  transition: background .2s, border-color .2s;
}
.p-servers-btn:hover, .p-servers.open .p-servers-btn { background: var(--p-glass-hi); border-color: rgba(255,255,255,.18); }
.p-servers-btn svg { width: 16px; height: 16px; flex: none; }
.p-servers-btn .p-cur { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-servers-btn .p-caret { opacity: .6; transition: transform .2s; }
.p-servers.open .p-caret { transform: rotate(180deg); }
.p-live { width: 7px; height: 7px; border-radius: 50%; background: var(--p-accent); box-shadow: 0 0 0 3px rgba(255,106,61,.22); flex: none; }

.p-servers ul {
  list-style: none; margin: 8px 0 0; padding: 6px; min-width: 210px; max-height: calc(100vh - 80px); overflow-y: auto;
  position: absolute; right: 0; top: 100%;
  background: var(--p-glass-hi); border: 1px solid var(--p-line); border-radius: 14px;
  -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  box-shadow: 0 24px 60px -18px rgba(0,0,0,.9);
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right; pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.p-servers.open ul { opacity: 1; transform: none; pointer-events: auto; }
.p-servers li {
  display: flex !important; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px;
  cursor: pointer; color: var(--p-dim); font-size: 13.5px; line-height: 1.25; user-select: none;
  transition: background .15s, color .15s;
}
.p-servers li:hover { background: rgba(255,255,255,.07); color: var(--p-ink); }
.p-servers li .p-dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--p-faint); flex: none; }
.p-servers li .p-tag { margin-left: auto; font: 500 10.5px var(--p-mono); letter-spacing: .04em; color: var(--p-faint); text-transform: uppercase; }
.p-servers li.active { color: var(--p-ink); background: rgba(255,106,61,.12); }
.p-servers li.active .p-dot { border-color: var(--p-accent); background: var(--p-accent); box-shadow: 0 0 0 3px rgba(255,106,61,.2); }
.p-servers .p-sep { height: 1px; margin: 6px 4px; background: var(--p-line); padding: 0; pointer-events: none; }
.p-servers .p-head { font-size: 11px; letter-spacing: .06em; color: var(--p-faint); padding: 6px 10px 4px; cursor: default; }
.p-servers .p-head:hover { background: none; color: var(--p-faint); }

/* ---------- Ad overlay (vendor.js) ---------- */
.overlay { display: none; position: fixed; inset: 0 0 64px 0; z-index: 5; background: transparent; cursor: pointer; }
.p-ad { position: fixed; inset: 0; z-index: 6; pointer-events: none; opacity: 0; transition: opacity .3s; }
.p-ad.on { opacity: 1; }
.p-ad-badge {
  position: absolute; top: 14px; left: 14px; display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 11px;
  border-radius: 999px; background: rgba(0,0,0,.55); border: 1px solid var(--p-line); font-size: 12px; color: var(--p-dim);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.p-ad-badge b { color: #111; background: #ffd34d; font: 700 10.5px var(--p-sans); padding: 2px 7px; border-radius: 6px; letter-spacing: .03em; }
.p-ad-visit {
  position: absolute; left: 14px; bottom: 76px; pointer-events: auto; display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 14px; border-radius: 10px; background: rgba(255,255,255,.92); color: #111; text-decoration: none;
  font: 600 13px var(--p-sans); box-shadow: 0 10px 30px -10px rgba(0,0,0,.8);
}
.p-ad-visit svg { width: 14px; height: 14px; }
.skip-btn {
  position: fixed; right: 0; bottom: 76px; z-index: 7; display: inline-flex; align-items: center; gap: 10px;
  min-width: 168px; height: 46px; padding: 0 18px; border-radius: 12px 0 0 12px;
  background: rgba(8,9,12,.78); border: 1px solid var(--p-line); border-right: 0; color: var(--p-ink);
  font: 600 14px var(--p-sans); cursor: default; opacity: 0; transform: translateX(12px);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: opacity .3s, transform .3s, background .2s;
}
.skip-btn[style*="opacity: 1"], .skip-btn.on { opacity: 1 !important; transform: none; }
.skip-btn span { font-weight: 400; color: var(--p-dim); font-size: 12.5px; font-family: var(--p-mono); }
.skip-btn.ready { cursor: pointer; background: rgba(255,106,61,.92); color: #160a04; border-color: transparent; }
.skip-btn.ready::after { content: "›"; font-size: 22px; line-height: 1; margin-top: -2px; }
.skip-btn.ready:hover { background: var(--p-accent-2); }

/* ---------- Message / processing state ---------- */
.p-msg {
  position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 12px; padding: 24px; text-align: center;
  background: radial-gradient(70% 70% at 50% 40%, #15161d 0%, #000 72%);
}
.p-msg .p-ico { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: rgba(255,255,255,.05); border: 1px solid var(--p-line); }
.p-msg .p-ico svg { width: 26px; height: 26px; color: var(--p-accent); }
.p-msg h1 { margin: 6px 0 0; font-size: clamp(16px, 2.4vw, 22px); font-weight: 600; letter-spacing: -.01em; }
.p-msg p { margin: 0; max-width: 46ch; color: var(--p-dim); font-size: clamp(12.5px, 1.6vw, 14px); line-height: 1.6; }
.p-msg .p-code { font: 500 11px var(--p-mono); color: var(--p-faint); letter-spacing: .1em; }
.p-msg a.p-btn {
  margin-top: 6px; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 10px;
  background: var(--p-accent); color: #160a04; font-weight: 600; text-decoration: none; font-size: 13.5px;
}
.p-msg a.p-btn:hover { background: var(--p-accent-2); }
.p-msg .p-brand { position: absolute; bottom: 14px; left: 0; right: 0; font-size: 11px; color: var(--p-faint); letter-spacing: .08em; }

/* ---------- JW Player skin ---------- */
.jwplayer.jw-reset, .jwplayer .jw-reset { font-family: var(--p-sans) !important; }
.jwplayer .jw-progress, .jwplayer .jw-slider-volume .jw-progress { background: var(--p-accent) !important; }
.jwplayer .jw-knob { background: #fff !important; box-shadow: 0 0 0 4px rgba(255,106,61,.35) !important; }
.jwplayer .jw-rail { background: rgba(255,255,255,.18) !important; }
.jwplayer .jw-buffer { background: rgba(255,255,255,.32) !important; }
.jwplayer .jw-slider-time .jw-rail, .jwplayer .jw-slider-time .jw-buffer, .jwplayer .jw-slider-time .jw-progress { border-radius: 3px; }
.jwplayer .jw-controlbar { background: transparent; }
.jwplayer .jw-controls-backdrop { background: linear-gradient(to top, rgba(0,0,0,.72) 0%, rgba(0,0,0,0) 38%) !important; }
.jwplayer .jw-icon:hover, .jwplayer .jw-button-color:hover, .jwplayer .jw-settings-content-item:hover, .jwplayer .jw-settings-item-active, .jwplayer .jw-option.jw-active-option { color: var(--p-accent) !important; }
.jwplayer .jw-display-icon-container {
  width: 76px !important; height: 76px !important; border-radius: 50% !important; padding: 18px !important;
  background: rgba(255,106,61,.92) !important; box-shadow: 0 0 0 10px rgba(255,106,61,.16), 0 18px 40px -12px rgba(0,0,0,.8);
  transition: transform .2s ease, background .2s;
}
.jwplayer .jw-display-icon-container:hover { transform: scale(1.06); background: var(--p-accent-2) !important; }
.jwplayer .jw-display-icon-container .jw-icon { color: #160a04 !important; width: 40px !important; height: 40px !important; }
.jwplayer.jw-state-buffering .jw-display-icon-container { background: transparent !important; box-shadow: none; }
.jwplayer.jw-state-buffering .jw-display-icon-container .jw-icon { color: var(--p-accent) !important; }
.jwplayer .jw-settings-menu, .jwplayer .jw-tooltip .jw-overlay { background: rgba(18,19,25,.92) !important; border-radius: 12px !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.jwplayer .jw-text-elapsed, .jwplayer .jw-text-duration, .jwplayer .jw-text-countdown { font-family: var(--p-mono) !important; font-size: 12px !important; }
.jwplayer.jw-flag-user-inactive.jw-state-playing .jw-controlbar { opacity: 0; }
.jwplayer .jw-logo { display: none !important; }

/* ---------- Responsive ---------- */
@media (max-width: 520px) {
  .p-servers { top: 8px; right: 8px; }
  .p-servers-btn { height: 32px; font-size: 12.5px; padding: 0 10px 0 9px; }
  .p-servers-btn .p-cur { max-width: 96px; }
  .p-servers ul { min-width: 188px; }
  .skip-btn { min-width: 0; height: 40px; bottom: 60px; font-size: 13px; padding: 0 14px; }
  .p-ad-visit { bottom: 60px; height: 32px; font-size: 12px; }
  .jwplayer .jw-display-icon-container { width: 60px !important; height: 60px !important; padding: 12px !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}