﻿/* Stream Live admin */

#castio-viewer-link-row {}
.castio-preview { display: inline-block; position: relative; }

#castio-stream-box video {
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

#p { width: 420px; background: #000; }

.castio-hidden { display: none; }

.castio-preview { display: inline-block; position: relative; }
.castio-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;
}
.castio-rec-badge.is-on { display: inline-block; }

.castio-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 */
#castio-stream-box .button.button-primary#start::before {
  content: "\25CF"; /* red circle */
  color: #d32f2f;
  margin-right: 8px;
}

/* Red circle for create stream button */
#castio-new-stream.button.button-primary::before {
  content: "\25CF"; /* red circle */
  color: #d32f2f;
  margin-right: 8px;
}

@keyframes castio-blink {
  0% { opacity: 1; }
  50% { opacity: .25; }
  100% { opacity: 1; }
}

#castio-stream-box .button.button-primary#start.recording::before {
  animation: castio-blink 1s ease-in-out infinite;
}

/* Larger primary action button */
/* (reverted, not used) */

#castio-stream-box .castio-note {
  margin: 8px 0 12px;
  padding: 8px 12px;
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 6px;
}

.castio-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 */
.castio-info-panel{background:#f8f9fb;border:1px solid #ccd0d4;padding:8px 12px;border-radius:6px;margin:8px 0 12px}
.castio-info-panel .castio-info-row{display:flex;align-items:flex-start;gap:8px;margin:6px 0;font-size:13px;color:#2c3338}
.castio-info-panel .dashicons{color:#2271b1;margin-top:2px}

/* Alerts */
.castio-alert {
  margin: 8px 0 12px;
  padding: 10px 12px;
  border-radius: 6px;
}
.castio-alert-error {
  background: #ffebee;
  border: 1px solid #ef9a9a;
  color: #b71c1c;
}

#castio-stream-box #castio-stream-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

#castio-stream-box a#castio-viewer-url {
  word-break: break-all;
}

/* Moderation UI */
.castio-moderation { margin-top: 12px; border-top: 1px solid #eee; padding-top: 10px; }
.castio-moderation h2 { margin: 0 0 8px; font-size: 16px; }
.castio-mod-actions { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.castio-mod-actions input { padding: 6px 8px; }
.castio-mod-list { max-height: 220px; overflow: auto; border: 1px solid #eee; border-radius: 6px; padding: 8px; background: #fff; }
.castio-mod-item { display: grid; grid-template-columns: 90px 1fr auto auto; gap: 6px; align-items: center; padding: 4px 0; border-bottom: 1px dashed #eee; }
.castio-mod-item .t { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: #64748b; }
.castio-mod-item .n { color: #0f172a; }
.castio-mod-item .m { color: #334155; }
.castio-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;
}

.castio-ua { font-family: monospace; font-size: 12px; }
.castio-log { background:#111; color:#ddd; padding:10px; border-radius:8px; max-height:260px; overflow:auto; }

/* FAQ styles */
.wrap.castio-faq details { margin:10px 0; border:1px solid #e2e4e7; border-radius:8px; background:#fff; }
.wrap.castio-faq details[open] { box-shadow: 0 2px 8px rgba(0,0,0,.04); }
.wrap.castio-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.castio-faq summary::-webkit-details-marker { display:none; }
.wrap.castio-faq summary::before { content:"▸"; position:absolute; left:10px; top:18px; color:#6b7280; transition: transform .15s ease; }
.wrap.castio-faq details[open] > summary::before { transform: rotate(90deg); }
.wrap.castio-faq details > div { padding:0 16px 16px 16px; color:#1f2937; font-size:15px; line-height:1.6; }
.wrap.castio-faq details { margin:12px 0; }
.wrap.castio-faq { max-width: 900px; }
.wrap.castio-faq a { color:#2271b1; text-decoration:none }
.wrap.castio-faq a:hover { text-decoration:underline }
.wrap.castio-faq h1 { margin-bottom: 14px; }
.wrap.castio-faq code { background:#f3f4f6; padding:1px 4px; border-radius:4px; }
.wrap.castio-faq ol { padding-left: 18px; }

/* Recordings preview */
.castio-rec-preview video { width: 180px; height: 101px; background:#000; border-radius:6px; display:block; }

/* FAQ enhanced grid */
.wrap.castio-faq .castio-faq-list { display:grid; grid-template-columns: 1fr; gap:12px; }
@media (min-width: 960px){ .wrap.castio-faq .castio-faq-list { grid-template-columns: 1fr 1fr; } }
.wrap.castio-faq a { color:#2271b1; text-decoration:none }
.wrap.castio-faq a:hover { text-decoration:underline }

/* Compact action buttons in recordings */
.button.castio-btn-compact{padding:4px 8px!important; font-size:12px!important; line-height:1.3!important; min-height:auto!important}
.button.castio-copy{padding:4px 8px!important; font-size:12px!important}

/* Make compact buttons smaller on recordings page */
.stream-live_page_castio_recordings .button.castio-btn-compact{padding:2px 6px!important; font-size:11px!important; line-height:1.2!important}
.stream-live_page_castio_recordings .button.castio-copy{padding:2px 6px!important; font-size:11px!important; line-height:1.2!important}

/* Wider search input on recordings page */
.stream-live_page_castio_recordings input[type="search"][name="s"]{width:420px; max-width:100%}

/* FAQ enhancements */
.wrap.castio-faq .castio-faq-list{display:grid; grid-template-columns:1fr; gap:16px}
@media (min-width: 960px){ .wrap.castio-faq .castio-faq-list{grid-template-columns:1fr 1fr} }
.wrap.castio-faq summary{background:#f9fafb; border-left:4px solid #2271b1; border-radius:6px}
.wrap.castio-faq details>div{padding:10px 18px 18px}




 .castio-help {
	 display:inline-block;
	 margin-left:6px;
	 color:#2271b1;
	 position:relative;
	 cursor:help
 }
.castio-help::before {
	font-family:dashicons;
	content:"\f223";
	font-size:16px;
	line-height:1;
	vertical-align:middle
}
.castio-help:hover::before { color:#135e96 }
.castio-help:hover::after {
	content:attr(data-tip);
	position:absolute;
	left:22px;
	top:-6px;
	background:#111;
	color:#fff;
	padding:8px 10px;
	border-radius:6px;
	box-shadow:0 8px 18px rgba(0,0,0,.15);
	width:300px;
	max-width:60vw;
	font-size:12px;
	line-height:1.45;
	z-index:9999
}



	 /* Share button + icons: tighter alignment and spacing */
 #castio-share-live {
	 display: inline-flex;
	 align-items: center;
	 gap: 8px
 }

#castio-share-live .dashicons {
	line-height: 1;
	width: 18px;
	height: 18px;
	font-size: 18px
}

.castio-share-grid .button {
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: flex-start;
	padding: 10px 12px;
	line-height: 1.2;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	background: #fff;
	text-decoration: none
}

.castio-share-grid .button:hover {
	background: #f8fafc;
	border-color: #d1d5db
}

.castio-share-ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	flex: 0 0 22px
}

.castio-ico-fb {
	background: #1877F2
}

.castio-ico-x {
	background: #111
}

.castio-ico-pi {
	background: #E60023
}

.castio-ico-wa {
	background: #25D366;
	color: #111
}

.castio-ico-em {
	background: #6b7280
}
