/*
 * ★★ v4.60.0 — แถบคอนโทรลวิดีโอของเราเอง (คู่กับ assets/js/yt-player.js)
 *
 * ★ ไฟล์นี้ไม่ถือเลขสีแบรนด์เอง — อ่านจาก var(--hpw-*) ที่ทะเบียนธีมพ่นให้
 *   (บทเรียน v4.56.0) · สีเทา/ขาว/ดำในนี้เป็นสีของ "แผงควบคุมบนวิดีโอ"
 *   ไม่ใช่สีแบรนด์ จึงยังเขียนตรงได้
 * ★★ ค่าสำรองใน var() เป็น **ขาว ไม่ใช่สีแบรนด์** โดยตั้งใจ — รอบแรกเขียน
 *   `var(--hpw-brand-soft, #0FA184)` แล้วตัวตรวจ theme-token ฟ้องทันที
 *   และมันฟ้องถูก: ค่าสำรองที่เป็นเลขสีแบรนด์ คือสำเนาของทะเบียนที่จะเพี้ยน
 *   เงียบ ๆ วันที่แบรนด์เปลี่ยนสี · ขาวบนแถบดำมองเห็นชัดพอสำหรับวงโฟกัส
 *   ซึ่งเป็นสิ่งเดียวที่ค่าสำรองต้องรับประกัน
 * ★ ปุ่มทุกตัวกว้าง-สูงอย่างน้อย 44px ตามขนาดนิ้วมือ — แถบนี้ถูกใช้บนมือถือ
 *   มากกว่าเดสก์ท็อป เพราะคนหาโกดังส่วนใหญ่เปิดจากมือถือ
 */

.hpw-ytp {
    position: relative;
    width: min(92vw, 1080px);
    max-width: 100%;
    background: #000;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 12px 60px rgba(0, 0, 0, .7);
    outline: none;
}

.hpw-ytp:focus-visible {
    box-shadow: 0 0 0 3px var(--hpw-brand-soft, #fff), 0 12px 60px rgba(0, 0, 0, .7);
}

.hpw-ytp-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}

.hpw-ytp-stage iframe,
.hpw-ytp-stage > div {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ปุ่มเล่นใหญ่กลางจอ — ตัวที่บอกว่า "กดตรงนี้" ตอนวิดีโอยังไม่เล่น */
.hpw-ytp-big {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    border: 0;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .18s ease, background .18s ease;
}

.hpw-ytp-big svg { width: 30px; height: 30px; }

.hpw-ytp-big:hover { background: rgba(0, 0, 0, .75); }

/* ★ กำลังเล่นอยู่ = ปุ่มใหญ่ต้องหายไป ไม่งั้นมันบังภาพที่คนมาดู
     แต่ยังคลิกที่ตัวมันเพื่อหยุดได้ (opacity 0 ไม่ใช่ display:none) */
.hpw-ytp.is-playing .hpw-ytp-big { opacity: 0; }
.hpw-ytp.is-playing .hpw-ytp-big:hover,
.hpw-ytp.is-playing .hpw-ytp-big:focus-visible { opacity: 1; }

.hpw-ytp-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: #111;
    color: #fff;
}

.hpw-ytp-btn {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    cursor: pointer;
}

.hpw-ytp-btn:hover { background: rgba(255, 255, 255, .12); }

/* ★ v4.62.0 — ปุ่มปิดในแถบของเราเอง
   ★★ คั่นด้วย "เส้น" ไม่ใช่ "ที่ว่าง" — ปุ่มนี้ทำคนละเรื่องกับปุ่มควบคุมการเล่น
      (มันปิดหน้าต่าง ไม่ใช่สั่งวิดีโอ) การดันไปสุดขอบด้วย margin-left:auto
      บนแถบที่แคบอยู่แล้วจะอ่านว่า "ปุ่มหลงมา" ไม่ใช่ "คนละกลุ่ม" (บทเรียน v4.37.2)
   ★ สีแดงจาง ๆ ตอนชี้ เพื่อบอกว่าเป็นการกระทำที่ "จบ" ไม่ใช่สลับสถานะ */
.hpw-ytp-close {
    margin-left: 2px;
    padding-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, .18);
    border-radius: 0 8px 8px 0;
    width: 52px;
}

.hpw-ytp-close:hover { background: rgba(255, 90, 90, .22); }
.hpw-ytp-btn:focus-visible { outline: 2px solid var(--hpw-brand-soft, #fff); outline-offset: -2px; }

.hpw-ytp-btn svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ไอคอนที่เป็นรูปทึบ (เล่น/หยุด/เสียง) ต้องระบายไม่ใช่ตีเส้น */
.hpw-ytp-btn svg polygon,
.hpw-ytp-btn svg rect,
.hpw-ytp-big svg polygon,
.hpw-ytp-big svg rect,
.hpw-ytp-big svg path { fill: currentColor; stroke: none; }

.hpw-ytp-big svg { stroke: none; }

.hpw-ytp-time {
    flex: 0 0 auto;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    opacity: .9;
    padding: 0 2px;
}

/* แถบเลื่อนเวลา — ใช้ <input type="range"> ของเบราว์เซอร์
   ★ ตั้งใจไม่เขียน div+drag เอง เพราะ range มาพร้อมแป้นพิมพ์ · การลากบนจอสัมผัส
     และ screen reader อ่านออกอยู่แล้ว — เขียนเองต้องทำครบสามอย่างนั้นเอง */
.hpw-ytp-seek {
    flex: 1 1 auto;
    min-width: 60px;
    height: 44px;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.hpw-ytp-seek:focus-visible { outline: 2px solid var(--hpw-brand-soft, #fff); outline-offset: -6px; }

.hpw-ytp-seek::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .3);
}

.hpw-ytp-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    margin-top: -5px;
    border: 0;
    border-radius: 50%;
    background: var(--hpw-brand-soft, #fff);
}

.hpw-ytp-seek::-moz-range-track {
    height: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, .3);
}

.hpw-ytp-seek::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 0;
    border-radius: 50%;
    background: var(--hpw-brand-soft, #fff);
}

/* ทางถอยตอน IFrame API มาไม่ถึง — iframe ธรรมดาพร้อมแถบของ YouTube */
.hpw-ytp-fallback {
    display: block;
    width: min(92vw, 1080px);
    height: min(52vw, 608px);
    max-height: 82vh;
    border: 0;
    border-radius: 10px;
    box-shadow: 0 12px 60px rgba(0, 0, 0, .7);
}

/* เต็มจอ: กล่องของเราขยายเต็ม แล้วดันแถบไปติดขอบล่าง */
.hpw-ytp:fullscreen,
.hpw-ytp:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hpw-ytp:fullscreen .hpw-ytp-stage { flex: 1 1 auto; aspect-ratio: auto; }
.hpw-ytp:fullscreen .hpw-ytp-bar { flex: 0 0 auto; }

@media (max-width: 600px) {
    /* จอแคบ: เวลาไปอยู่หลังแถบเลื่อน เพื่อให้แถบเลื่อนได้ที่กว้างที่สุด
       ★ ไม่ซ่อนเวลาทิ้ง — คนดูวิดีโอโกดังมักอยากรู้ว่าเหลืออีกกี่นาที */
    .hpw-ytp-bar { flex-wrap: wrap; padding: 4px 6px; }
    .hpw-ytp-seek { order: 5; flex-basis: 100%; height: 32px; }
    .hpw-ytp-time { font-size: 12px; }
    .hpw-ytp-big { width: 60px; height: 60px; }
    .hpw-ytp-big svg { width: 24px; height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
    .hpw-ytp-big { transition: none; }
}