/* Customer controls inherit the selected template tokens from custom-bridge.css.
   Keep video/backdrop black for media viewing; all UI colors follow --ns-*. */
.cx-card-actions{position:relative;z-index:5;display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.cx-card-actions a,.cx-owned,.cx-btn{display:inline-block;padding:10px 14px;border:1px solid currentColor;border-radius:7px;font-size:14px;line-height:1.4}
.cx-card-actions a:focus-visible,.cx-btn:focus-visible{outline:3px solid var(--ns-accent);outline-offset:3px}
.cx-owned{margin-top:10px;color:var(--ns-accent);background:var(--ns-surface);position:relative;z-index:5}
.cx-card-play{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;color:var(--ns-text)!important}
.cx-card-play span{background:var(--ns-panel-a);border:1px solid var(--ns-border-strong);padding:12px 16px;border-radius:30px}
.cx-modal{position:fixed;inset:0;z-index:100000;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;padding:18px}
.cx-modal[hidden]{display:none}
.cx-dialog{width:960px;max-width:100%;max-height:95vh;overflow:auto;background:linear-gradient(158deg,var(--ns-panel-a),var(--ns-panel-b));color:var(--ns-text);border-radius:14px;padding:18px}
.cx-dialog h2{color:var(--ns-text);font-size:20px;margin:0}
.cx-modal-head{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:14px}
.cx-modal-close{padding:10px 16px;border:1px solid var(--ns-border-strong);border-radius:6px;background:var(--ns-surface);color:var(--ns-text)}
.cx-player video,.cx-player iframe{display:block;width:100%;aspect-ratio:16/9;max-height:70vh;border:0;background:#000}
.cx-filters{display:flex;gap:12px;flex-wrap:wrap;padding:18px;border:1px solid var(--ns-border);border-radius:10px;margin-bottom:20px}
.cx-filters label{display:flex;flex-direction:column;gap:5px;flex:1 1 140px;margin:0}
.cx-filters select,.cx-filters input:not([type="hidden"]),.cx-auth input:not([type="hidden"]){display:block!important;width:100%;min-height:44px;border:1px solid var(--ns-border-strong);border-radius:6px;background:var(--ns-panel-a);color:var(--ns-text);padding:8px}
.cx-filters .nice-select{display:none!important}
.cx-filters button,.cx-auth button{align-self:end;background:var(--ns-surface-2);color:var(--ns-text);padding:11px 18px;border:0;border-radius:6px}
.cx-filter-note{font-size:13px;width:100%;margin:0}
.cx-sequences{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.cx-sequence{padding:18px;border:1px solid var(--ns-border);border-radius:12px;background:linear-gradient(158deg,var(--ns-panel-a),var(--ns-panel-b));color:var(--ns-text)}
.cx-sequence img{width:100%;height:150px;object-fit:contain;border-radius:6px;background:var(--ns-surface);margin-bottom:12px}
.cx-sequence h4{font-size:18px;color:var(--ns-text);overflow-wrap:anywhere}
.cx-sequence p{font-size:14px;color:var(--ns-text-2);margin:8px 0}
.cx-sequence .cx-access{font-weight:700}
.cx-sequence .cx-ready{color:var(--ns-accent)}
.cx-auth{padding:22px;border:1px solid var(--ns-border);border-radius:12px;margin:20px 0;background:linear-gradient(158deg,var(--ns-panel-a),var(--ns-panel-b));color:var(--ns-text)}
.cx-auth h3,.cx-auth h4{color:var(--ns-text)}
.cx-auth label{display:block;margin:12px 0}
.cx-auth-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cx-auth small{display:block}
.cx-order-actions{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}
.cx-order-actions [hidden]{display:none!important}
@media(max-width:600px){.cx-sequences,.cx-auth-grid{grid-template-columns:1fr}
.cx-filters label{flex-basis:100%}
.cx-modal{padding:8px}
.cx-sequence{padding:14px}}

/* Explicit colors prevent Bootstrap's default blue links leaking into new controls. */
.cx-card-actions a,
a.cx-owned,
.cx-btn,
.cx-auth a {
    color: var(--ns-accent) !important;
    border-color: var(--ns-accent);
    background: var(--ns-surface);
}
.cx-card-actions a:hover,
.cx-card-actions a:focus-visible,
a.cx-owned:hover,
.cx-btn:hover,
.cx-btn:focus-visible,
.cx-auth a:hover {
    color: var(--ns-accent-hover) !important;
    border-color: var(--ns-accent-hover);
    background: var(--ns-surface-2);
}
.cx-auth a { background: transparent; }
.cx-filters {
    background: linear-gradient(158deg,var(--ns-panel-a),var(--ns-panel-b));
    color: var(--ns-text);
}
.cx-filters label,.cx-auth label { color: var(--ns-text); }
.cx-filters .cx-filter-note,.cx-auth p,.cx-auth small { color: var(--ns-text-2); }
.cx-filters button,.cx-auth button { border: 1px solid var(--ns-accent); }
.cx-filters button:hover,.cx-auth button:hover,.cx-modal-close:hover {
    background: var(--ns-surface-2);
    color: var(--ns-accent-hover);
    border-color: var(--ns-accent-hover);
}
.cx-filters select option { background: var(--ns-panel-a); color: var(--ns-text); }
.cx-filters input::placeholder,.cx-auth input::placeholder { color: var(--ns-muted); opacity: 1; }
.cx-filters input:focus,.cx-filters select:focus,.cx-auth input:focus,
.cx-filters button:focus-visible,.cx-auth button:focus-visible,.cx-modal-close:focus-visible {
    outline: 2px solid var(--ns-accent);
    outline-offset: 3px;
}
.cx-btn:disabled,.cx-filters button:disabled,.cx-auth button:disabled {
    opacity: .65;
    cursor: wait;
}