/* tx-player.css — TechlyStack branded video player (pairs with /js/tx-player.js). */
.txp {
    --txp-accent: #7C73FF;
    --txp-accent2: #4F46E5;
    --txp-bar-bg: linear-gradient(180deg, rgba(11,16,32,0) 0%, rgba(11,16,32,.78) 100%);
    position: relative; width: 100%; aspect-ratio: 16 / 9; background: #0B1020;
    border-radius: 18px; overflow: hidden; color: #fff; outline: none;
    font-family: 'Inter', system-ui, sans-serif; -webkit-tap-highlight-color: transparent;
    user-select: none; -webkit-user-select: none;
}
.txp:focus-visible { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--txp-accent); }
.txp-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #0B1020; display: block; }
.txp.txp-is-fs { border-radius: 0; aspect-ratio: auto; height: 100%; }
.txp.txp-idle { cursor: none; }

/* Big centered play button */
.txp-btn.txp-big {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 84px; height: 84px; border-radius: 50%; border: 0; cursor: pointer; z-index: 3;
    display: grid; place-items: center; color: #fff;
    background: linear-gradient(135deg, var(--txp-accent2), var(--txp-accent));
    box-shadow: 0 18px 40px -12px rgba(79,70,229,.85), 0 0 0 10px rgba(255,255,255,.14);
    transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.txp-btn.txp-big svg { width: 34px; height: 34px; margin-left: 4px; }
.txp-btn.txp-big:hover { transform: translate(-50%, -50%) scale(1.07); box-shadow: 0 22px 48px -12px rgba(79,70,229,.95), 0 0 0 14px rgba(255,255,255,.18); }
.txp-btn.txp-big:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.txp-playing .txp-btn.txp-big, .txp-ended .txp-btn.txp-big, .txp-has-error .txp-btn.txp-big { opacity: 0; pointer-events: none; visibility: hidden; }
.txp-paused:not(.txp-fresh):not(.txp-ended) .txp-btn.txp-big { width: 68px; height: 68px; }
.txp-paused:not(.txp-fresh):not(.txp-ended) .txp-btn.txp-big svg { width: 28px; height: 28px; }

/* Control bar */
.txp-bar {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; padding: 26px 14px 10px;
    background: var(--txp-bar-bg); transition: opacity .25s ease, transform .25s ease;
}
.txp-fresh .txp-bar { opacity: 0; pointer-events: none; }
.txp-idle .txp-bar { opacity: 0; transform: translateY(8px); pointer-events: none; }
.txp-row { display: flex; align-items: center; gap: 4px; }
.txp-spacer { flex: 1; }
.txp-btn {
    display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 6px; border: 0; border-radius: 10px;
    background: transparent; color: #fff; cursor: pointer; font: 700 13px/1 'Inter', system-ui, sans-serif;
    transition: background .15s ease;
}
.txp-btn svg { width: 22px; height: 22px; }
.txp-btn:not(.txp-big):hover { background: rgba(255,255,255,.14); }
.txp-btn:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.txp-btn[hidden] { display: none; }
.txp-cc[aria-pressed="true"] { color: #C7C3FF; box-shadow: inset 0 -2px 0 var(--txp-accent); }
.txp-speed { min-width: 48px; }
.txp-time { font-size: 13px; font-variant-numeric: tabular-nums; padding: 0 8px; white-space: nowrap; opacity: .95; }

/* Volume */
.txp-volwrap { display: flex; align-items: center; }
.txp-vol {
    -webkit-appearance: none; appearance: none; width: 0; opacity: 0; height: 4px; border-radius: 4px; margin: 0;
    background: linear-gradient(90deg, #fff var(--txp-vol, 100%), rgba(255,255,255,.3) var(--txp-vol, 100%));
    transition: width .2s ease, opacity .2s ease, margin .2s ease; cursor: pointer;
}
.txp-volwrap:hover .txp-vol, .txp-vol:focus-visible { width: 76px; opacity: 1; margin: 0 8px 0 2px; }
.txp-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0; }
.txp-vol::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 0; }
.txp-vol:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* Scrub bar */
.txp-scrub { position: relative; height: 18px; margin: 0 4px 4px; cursor: pointer; touch-action: none; }
.txp-scrub::before, .txp-buf, .txp-prog {
    content: ''; position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; transition: height .15s ease, margin .15s ease;
}
.txp-scrub::before { right: 0; background: rgba(255,255,255,.25); }
.txp-buf { width: 0; background: rgba(255,255,255,.45); }
.txp-prog { width: 0; background: linear-gradient(90deg, var(--txp-accent2), var(--txp-accent)); }
.txp-thumb {
    position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
    background: #fff; box-shadow: 0 0 0 4px rgba(124,115,255,.45); transform: scale(0); transition: transform .15s ease;
}
.txp-scrub:hover::before, .txp-scrub:hover .txp-buf, .txp-scrub:hover .txp-prog,
.txp-dragging .txp-scrub::before, .txp-dragging .txp-buf, .txp-dragging .txp-prog { height: 6px; margin-top: -3px; }
.txp-scrub:hover .txp-thumb, .txp-scrub:focus-visible .txp-thumb, .txp-dragging .txp-thumb { transform: scale(1); }
.txp-scrub:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 6px; }
.txp-tip {
    position: absolute; bottom: 20px; left: 0; transform: translateX(-50%); padding: 3px 7px; border-radius: 6px;
    background: rgba(11,16,32,.9); font-size: 12px; font-variant-numeric: tabular-nums; pointer-events: none;
    opacity: 0; transition: opacity .12s ease; white-space: nowrap;
}
.txp-scrub:hover .txp-tip { opacity: 1; }

/* Spinner + error */
.txp-spinner {
    position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; z-index: 2;
    border-radius: 50%; border: 4px solid rgba(255,255,255,.25); border-top-color: #fff; opacity: 0; pointer-events: none;
    animation: txp-spin .9s linear infinite;
}
.txp-loading.txp-playing .txp-spinner { opacity: 1; }
@keyframes txp-spin { to { transform: rotate(360deg); } }
.txp-error {
    position: absolute; inset: 0; z-index: 5; display: none; place-items: center; padding: 20px; text-align: center;
    background: rgba(11,16,32,.85); font-size: 15px; font-weight: 600;
}
.txp-has-error .txp-error { display: grid; }

/* End screen */
.txp-end {
    position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 16px;
    background: radial-gradient(circle at 50% 40%, rgba(79,70,229,.55), rgba(11,16,32,.92) 70%);
    opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s;
}
.txp-ended .txp-end { opacity: 1; visibility: visible; }
.txp-end-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.txp-cta {
    display: inline-flex; align-items: center; padding: 13px 22px; border-radius: 12px; font-weight: 700; font-size: 15px;
    color: #fff; text-decoration: none; background: linear-gradient(135deg, var(--txp-accent2), var(--txp-accent));
    box-shadow: 0 16px 36px -14px rgba(124,115,255,.9);
}
.txp-cta:hover { filter: brightness(1.08); }
.txp-replay {
    display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 12px; cursor: pointer;
    border: 1.5px solid rgba(255,255,255,.55); background: rgba(255,255,255,.08); color: #fff; font: 600 15px 'Inter', system-ui, sans-serif;
}
.txp-replay svg { width: 18px; height: 18px; }
.txp-replay:hover { background: rgba(255,255,255,.18); }
.txp-cta:focus-visible, .txp-replay:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Captions styling */
.txp-video::cue { background: rgba(11,16,32,.78); color: #fff; font-family: 'Inter', system-ui, sans-serif; }

/* Touch / small screens: bigger targets, hide the hover-only volume slider */
@media (max-width: 640px), (pointer: coarse) {
    .txp-btn.txp-big { width: 68px; height: 68px; }
    .txp-btn.txp-big svg { width: 28px; height: 28px; }
    .txp-btn { min-width: 44px; height: 44px; }
    .txp-vol { display: none; }
    .txp-bar { padding: 22px 8px 6px; }
    .txp-time { font-size: 12px; padding: 0 4px; }
    .txp-thumb { transform: scale(1); }
}
/* Narrow PLAYERS (not just narrow screens — e.g. the hero column on a phone):
   compact the row so play/volume/time/speed/CC/fullscreen all fit. */
.txp { container-type: inline-size; container-name: txp; }
@container txp (max-width: 420px) {
    .txp-row { gap: 0; }
    .txp-btn { min-width: 36px; height: 40px; padding: 0 4px; }
    .txp-btn svg { width: 20px; height: 20px; }
    .txp-speed { min-width: 36px; font-size: 12px; }
    .txp-time { font-size: 11px; padding: 0 4px; }
    .txp-bar { padding: 20px 6px 4px; }
    .txp-btn.txp-big { width: 60px; height: 60px; }
    .txp-btn.txp-big svg { width: 26px; height: 26px; }
}
@container txp (max-width: 250px) {
    .txp-speed, .txp-time { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .txp *, .txp { transition: none !important; animation-duration: 2s !important; }
    .txp-btn.txp-big:hover { transform: translate(-50%, -50%); }
}