/* Wave clips (js/clips.js): the player over the page, the judge card's "Watch the ride", and the buyer's page. */
.js-split-card__clip { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 42px; margin-top: 10px; border: 0; border-radius: 999px; background: #0B4F5E; color: #FFFFFF; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.js-split-card__clip:hover { background: #083E4A; }

/* The play button on a wave with a clip (heat details' wave table) */
.clip-play { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 4px; padding: 0; border: 0; border-radius: 50%; background: #0B4F5E; color: #FFFFFF; vertical-align: middle; cursor: pointer; position: relative; }
.clip-play::after { content: ""; position: absolute; inset: -10px; } /* a bigger tap area than it looks */
.clip-play:hover { background: #0891B2; }
.clip-play:focus-visible { outline: 2px solid #0891B2; outline-offset: 2px; }
.clip-hint { margin-left: 10px; font-size: 12px; font-weight: 600; color: #4A6770; }

html.clip-open { overflow: hidden; }
.clip-layer { position: fixed; inset: 0; z-index: 10000; /* above the heat details (9999) */ display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(6, 47, 56, 0.72); backdrop-filter: blur(3px); }
.clip-card { position: relative; width: min(560px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; padding: 18px; border-radius: 22px; background: #FFFFFF; box-shadow: 0 24px 60px rgba(6, 47, 56, 0.35); font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif; color: #0B2730; }
.clip-card svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.clip-loading { margin: 24px 8px; text-align: center; color: #4A6770; }
.clip-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.clip-eyebrow { margin: 0 0 2px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #0E6B82; }
.clip-title { margin: 0; font: 700 19px/1.25 "Unbounded", "Segoe UI", system-ui, sans-serif; }
.clip-x { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #EEF7F9; color: #0B2730; font-size: 24px; line-height: 1; cursor: pointer; }
.clip-video { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; background: #062F38; }
.clip-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.clip-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 1px solid transparent; border-radius: 999px; background: #0B4F5E; color: #FFFFFF; font: inherit; font-weight: 700; font-size: 15px; text-decoration: none; cursor: pointer; white-space: nowrap; }
.clip-btn:hover { background: #083E4A; color: #FFFFFF; }
.clip-btn--ghost { border-color: #D6E6EA; background: #FFFFFF; color: #0B2730; }
.clip-btn--ghost:hover { background: #EEF7F9; color: #0B2730; }
.clip-btn[disabled] { opacity: 0.7; cursor: progress; }
.clip-clean { margin-top: 16px; padding: 14px; border-radius: 16px; background: #EEF7F9; }
.clip-clean__title { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 800; color: #0B4F5E; }
.clip-clean__text { margin: 4px 0 0; font-size: 14px; color: #3C5A63; }
.clip-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.clip-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #D6E6EA; border-radius: 12px; background: #FFFFFF; cursor: pointer; }
.clip-opt input { width: 18px; height: 18px; margin: 0; accent-color: #0B4F5E; }
.clip-opt span { display: flex; flex: 1; justify-content: space-between; gap: 10px; }
.clip-opt small { font-size: 15px; font-weight: 700; color: #0B4F5E; }
.clip-buy { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.clip-buy input { flex: 1 1 220px; min-height: 44px; padding: 0 14px; border: 1px solid #D6E6EA; border-radius: 999px; font: inherit; font-size: 16px; }
.clip-buy input:focus { outline: none; border-color: #0891B2; box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.25); }
.clip-err { margin: 8px 0 0; font-size: 14px; font-weight: 600; color: #B42318; }
.clip-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The buyer's page */
.clip-buy__card { max-width: 640px; margin: 0 auto; padding: 32px; border: 1px solid var(--ag-line-2, #E3EEF1); border-radius: 28px; background: #FFFFFF; box-shadow: var(--ag-shadow-soft, 0 10px 30px rgba(11, 39, 48, 0.08)); }
.clip-buy__card svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.clip-buy__eyebrow { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ag-cyan-ink, #0E6B82); }
.clip-buy__title { margin: 6px 0 0; font: 700 28px/1.2 var(--ag-font-display, "Unbounded", sans-serif); }
.clip-buy__lead { margin: 10px 0 0; color: var(--ag-text, #3C5A63); font-size: 17px; }
.clip-buy__list { margin: 20px 0 0; padding: 0; list-style: none; border: 1px solid var(--ag-line-2, #E3EEF1); border-radius: 18px; }
.clip-buy__list[hidden] { display: none; }
.clip-buy__item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; }
.clip-buy__item + .clip-buy__item { border-top: 1px solid var(--ag-line-2, #E3EEF1); }
.clip-buy__wave { font-weight: 700; }
.clip-buy__buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.clip-buy__buttons .ag-btn { gap: 8px; }
.clip-buy__note { margin: 16px 0 0; font-size: 14px; color: var(--ag-muted, #4A6770); }
@media (max-width: 560px) { .clip-buy__card { padding: 22px 16px; border-radius: 22px; } .clip-card { padding: 14px; } }