/* Stream Live admin */

#wpsl-viewer-link-row {}
.wpsl-preview { display: inline-block; position: relative; }

#wpsl-stream-box video {
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

#p { width: 420px; background: #000; }

.wpsl-hidden { display: none; }

.wpsl-preview { display: inline-block; position: relative; }
.wpsl-rec-badge {
  position: absolute;
  top: 8px; left: 8px;
  background: #d32f2f; color: #fff;
  border-radius: 12px; padding: 2px 6px;
  font-size: 11px; line-height: 1; font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  display: none;
  z-index: 2;
}
.wpsl-rec-badge.is-on { display: inline-block; }

.wpsl-rec-timer {
  position: absolute;
  top: 8px; left: 56px;
  background: rgba(17,17,17,.9); color: #fff;
  border-radius: 12px; padding: 2px 6px;
  font-size: 11px; line-height: 1; font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  z-index: 2;
}


/* Red dot element used inside buttons */
#wpsl-stream-box .button.button-primary#start::before {
  content: "\25CF"; /* red circle */
  color: #d32f2f;
  margin-right: 8px;
}

/* Red circle for create stream button */
#wpsl-new-stream.button.button-primary::before {
  content: "\25CF"; /* red circle */
  color: #d32f2f;
  margin-right: 8px;
}

@keyframes wpsl-blink {
  0% { opacity: 1; }
  50% { opacity: .25; }
  100% { opacity: 1; }
}

#wpsl-stream-box .button.button-primary#start.recording::before {
  animation: wpsl-blink 1s ease-in-out infinite;
}

/* Larger primary action button */
/* (reverted, not used) */

#wpsl-stream-box .wpsl-note {
  margin: 8px 0 12px;
  padding: 8px 12px;
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 6px;
}

.wpsl-viewing-info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 12px;
  padding: 6px 10px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  color: #0f172a;
}

/* Grouped info panel */
.wpsl-info-panel{background:#f8f9fb;border:1px solid #ccd0d4;padding:8px 12px;border-radius:6px;margin:8px 0 12px}
.wpsl-info-panel .wpsl-info-row{display:flex;align-items:flex-start;gap:8px;margin:6px 0;font-size:13px;color:#2c3338}
.wpsl-info-panel .dashicons{color:#2271b1;margin-top:2px}

/* Alerts */
.wpsl-alert {
  margin: 8px 0 12px;
  padding: 10px 12px;
  border-radius: 6px;
}
.wpsl-alert-error {
  background: #ffebee;
  border: 1px solid #ef9a9a;
  color: #b71c1c;
}

#wpsl-stream-box #wpsl-stream-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

#wpsl-stream-box a#wpsl-viewer-url {
  word-break: break-all;
}

/* Moderation UI */
.wpsl-moderation { margin-top: 12px; border-top: 1px solid #eee; padding-top: 10px; }
.wpsl-moderation h2 { margin: 0 0 8px; font-size: 16px; }
.wpsl-mod-actions { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.wpsl-mod-actions input { padding: 6px 8px; }
.wpsl-mod-list { max-height: 220px; overflow: auto; border: 1px solid #eee; border-radius: 6px; padding: 8px; background: #fff; }
.wpsl-mod-item { display: grid; grid-template-columns: 90px 1fr auto auto; gap: 6px; align-items: center; padding: 4px 0; border-bottom: 1px dashed #eee; }
.wpsl-mod-item .t { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: #64748b; }
.wpsl-mod-item .n { color: #0f172a; }
.wpsl-mod-item .m { color: #334155; }
.wpsl-viewing-info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0 12px;
  padding: 6px 10px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 6px;
  color: #0f172a;
}

.wpsl-ua { font-family: monospace; font-size: 12px; }
.wpsl-log { background:#111; color:#ddd; padding:10px; border-radius:8px; max-height:260px; overflow:auto; }

/* FAQ styles */
.wrap.wpsl-faq details { margin:10px 0; border:1px solid #e2e4e7; border-radius:8px; background:#fff; }
.wrap.wpsl-faq details[open] { box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.wrap.wpsl-faq summary { cursor:pointer; padding:16px 18px; font-size:17px; font-weight:700; color:#111827; position:relative; background:#f9fafb; border-left:4px solid #2271b1; border-radius:6px; }
.wrap.wpsl-faq summary::-webkit-details-marker { display:none; }
.wrap.wpsl-faq summary::before { content:"▸"; position:absolute; left:10px; top:18px; color:#6b7280; transition: transform .15s ease; }
.wrap.wpsl-faq details[open] > summary::before { transform: rotate(90deg); }
.wrap.wpsl-faq details > div { padding:0 16px 16px 16px; color:#1f2937; font-size:15px; line-height:1.6; }
.wrap.wpsl-faq details { margin:12px 0; }
.wrap.wpsl-faq { max-width: 900px; }
.wrap.wpsl-faq a { color:#2271b1; text-decoration:none }
.wrap.wpsl-faq a:hover { text-decoration:underline }
.wrap.wpsl-faq h1 { margin-bottom: 14px; }
.wrap.wpsl-faq code { background:#f3f4f6; padding:1px 4px; border-radius:4px; }
.wrap.wpsl-faq ol { padding-left: 18px; }

/* Recordings preview */
.wpsl-rec-preview video { width: 180px; height: 101px; background:#000; border-radius:6px; display:block; }

/* FAQ enhanced grid */
.wrap.wpsl-faq .wpsl-faq-list { display:grid; grid-template-columns: 1fr; gap:12px; }
@media (min-width: 960px){ .wrap.wpsl-faq .wpsl-faq-list { grid-template-columns: 1fr 1fr; } }
.wrap.wpsl-faq a { color:#2271b1; text-decoration:none }
.wrap.wpsl-faq a:hover { text-decoration:underline }

/* Compact action buttons in recordings */
.button.wpsl-btn-compact{padding:4px 8px!important; font-size:12px!important; line-height:1.3!important; min-height:auto!important}
.button.wpsl-copy{padding:4px 8px!important; font-size:12px!important}

/* Make compact buttons smaller on recordings page */
.stream-live_page_wpsl_recordings .button.wpsl-btn-compact{padding:2px 6px!important; font-size:11px!important; line-height:1.2!important}
.stream-live_page_wpsl_recordings .button.wpsl-copy{padding:2px 6px!important; font-size:11px!important; line-height:1.2!important}

/* Wider search input on recordings page */
.stream-live_page_wpsl_recordings input[type="search"][name="s"]{width:420px; max-width:100%}

/* FAQ enhancements */
.wrap.wpsl-faq .wpsl-faq-list{display:grid; grid-template-columns:1fr; gap:16px}
@media (min-width: 960px){ .wrap.wpsl-faq .wpsl-faq-list{grid-template-columns:1fr 1fr} }
.wrap.wpsl-faq summary{background:#f9fafb; border-left:4px solid #2271b1; border-radius:6px}
.wrap.wpsl-faq details>div{padding:10px 18px 18px}

