/* =========================================================
   Wildball Support — live chat widget + support tickets
   Dark / orange brand theme
   ========================================================= */
:root { --wb-orange: #FF8C00; --wb-orange2: #FF5500; }

/* ---------------- LIVE CHAT WIDGET ---------------- */
.wb-chat { position: fixed; right: 22px; bottom: 90px; z-index: 99990; font-family: inherit; }

.wb-chat-toggle {
	display: inline-flex; align-items: center; gap: 9px;
	border: none; cursor: pointer;
	background: linear-gradient(135deg, var(--wb-orange), var(--wb-orange2));
	color: #fff; font-weight: 800; font-size: 0.95rem;
	padding: 14px 20px; border-radius: 50px;
	box-shadow: 0 10px 30px rgba(255,90,0,0.45);
	transition: transform 0.2s, box-shadow 0.2s;
}
.wb-chat-toggle:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(255,90,0,0.55); }
.wb-chat-toggle__close { display: none; }
.wb-chat.is-open .wb-chat-toggle { display: none; }

.wb-chat-panel {
	position: absolute; right: 0; bottom: 0;
	width: 360px; max-width: calc(100vw - 32px);
	height: 520px; max-height: calc(100vh - 170px);
	background: #0f0f0f;
	border: 1px solid rgba(255,140,0,0.22);
	border-radius: 18px; overflow: hidden;
	display: none; flex-direction: column;
	box-shadow: 0 24px 70px rgba(0,0,0,0.6);
}
.wb-chat.is-open .wb-chat-panel { display: flex; animation: wbChatIn 0.25s ease; }
@keyframes wbChatIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.wb-chat-head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 16px;
	background: linear-gradient(135deg, var(--wb-orange), var(--wb-orange2));
	color: #fff;
}
.wb-chat-head__brand { display: flex; align-items: center; gap: 10px; }
.wb-chat-head__brand strong { display: block; font-size: 0.95rem; }
.wb-chat-head__brand span { font-size: 0.72rem; opacity: 0.85; }
.wb-chat-head__dot { width: 9px; height: 9px; border-radius: 50%; background: #2ecc71; box-shadow: 0 0 0 3px rgba(255,255,255,0.25); }
.wb-chat-head__close { background: none; border: none; color: #fff; cursor: pointer; font-size: 1rem; opacity: 0.9; width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s, opacity 0.2s; }
.wb-chat-head__close:hover,
.wb-chat-head__close:focus,
.wb-chat-head__close:focus-visible,
.wb-chat-head__close:active {
	color: #fff !important;            /* stay white — no blue */
	background: rgba(0,0,0,0.18) !important;
	opacity: 1;
	outline: none !important;
	box-shadow: none !important;
}
.wb-chat-head__close i { color: inherit !important; }

.wb-chat-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.wb-chat-intro { text-align: center; color: rgba(255,255,255,0.55); padding: 18px 10px; }
.wb-chat-intro i { font-size: 1.8rem; color: var(--wb-orange); margin-bottom: 8px; display: block; }
.wb-chat-intro p { margin: 0; font-size: 0.9rem; }

.wb-cmsg { max-width: 80%; padding: 9px 13px; border-radius: 14px; font-size: 0.88rem; line-height: 1.45; }
.wb-cmsg__b { display: block; }
.wb-cmsg__t { display: block; font-size: 0.62rem; opacity: 0.6; margin-top: 3px; }
.wb-cmsg--me { align-self: flex-end; background: linear-gradient(135deg, var(--wb-orange), var(--wb-orange2)); color: #1a1a1a; border-bottom-right-radius: 4px; }
.wb-cmsg--staff { align-self: flex-start; background: rgba(255,255,255,0.07); color: #fff; border-bottom-left-radius: 4px; }
.wb-typing { padding: 13px 16px !important; }
.wb-typing-dots { display: inline-flex; gap: 4px; align-items: center; }
.wb-typing-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.55); display: inline-block; animation: wbTyping 1s infinite ease-in-out; }
.wb-typing-dots i:nth-child(2) { animation-delay: 0.15s; }
.wb-typing-dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes wbTyping { 0%, 60%, 100% { opacity: 0.3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

.wb-chat-start, .wb-chat-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid rgba(255,255,255,0.08); background: #0b0b0b; }
.wb-chat-start { flex-wrap: wrap; }
.wb-chat-start input, .wb-chat-input input {
	flex: 1; min-width: 0; background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.12); border-radius: 10px;
	padding: 10px 12px; color: #fff; font-size: 0.86rem; outline: none;
}
.wb-chat-start input:focus, .wb-chat-input input:focus { border-color: rgba(255,140,0,0.5); }
.wb-chat-start input::placeholder, .wb-chat-input input::placeholder { color: rgba(255,255,255,0.3); }
.wb-chat-start button, .wb-chat-input button {
	background: linear-gradient(135deg, var(--wb-orange), var(--wb-orange2));
	color: #fff; border: none; border-radius: 10px; padding: 10px 16px;
	font-weight: 700; cursor: pointer; font-size: 0.86rem;
}
.wb-chat-start button { flex: 1 0 100%; }
.wb-chat-input button { flex: 0 0 auto; width: 46px; }

@media (max-width: 480px) {
	.wb-chat { right: 14px; bottom: 80px; }
	.wb-chat-panel { width: calc(100vw - 28px); height: 70vh; }
	.wb-chat-toggle__label { display: none; }
	.wb-chat-toggle { padding: 15px; }
}

/* ---------------- Remove Astra's built-in scroll-to-top button ---------------- */
#ast-scroll-top { display: none !important; }

/* ---------------- COOKIE CONSENT BANNER ---------------- */
.wb-cookie {
	position: fixed;
	left: 22px; bottom: 22px;
	z-index: 99980;
	width: 380px; max-width: calc(100vw - 32px);
	background: #0f0f0f;
	border: 1px solid rgba(255,140,0,0.22);
	border-radius: 16px;
	padding: 20px 20px 18px;
	box-shadow: 0 22px 60px rgba(0,0,0,0.6);
	display: flex; flex-direction: column; gap: 15px;
	transform: translateY(160%);
	opacity: 0;
	transition: transform 0.45s cubic-bezier(0.16,1,0.3,1), opacity 0.45s;
	pointer-events: none;
}
.wb-cookie::before {
	content: ''; position: absolute; top: 0; left: 20px; right: 20px; height: 3px;
	background: linear-gradient(90deg, #FF8C00, #FF5500, rgba(255,100,0,0));
	border-radius: 0 0 3px 3px;
}
.wb-cookie.show { transform: none; opacity: 1; pointer-events: auto; }
.wb-cookie__title { display: flex; align-items: center; gap: 9px; color: #fff; font-size: 1rem; margin-bottom: 6px; }
.wb-cookie__title i { color: #FF8C00; font-size: 1.2rem; }
.wb-cookie__text { color: rgba(255,255,255,0.58); font-size: 0.85rem; line-height: 1.55; margin: 0; }
.wb-cookie__text a { color: #FF8C00; text-decoration: underline; text-underline-offset: 2px; }
.wb-cookie__actions { display: flex; gap: 10px; }
.wb-cookie__btn { flex: 1; border: none; border-radius: 11px; padding: 11px 16px; font-weight: 700; font-size: 0.85rem; cursor: pointer; transition: transform 0.18s, box-shadow 0.18s, background 0.18s; }
.wb-cookie__accept { background: linear-gradient(135deg, #FF8C00, #FF5500); color: #1a1a1a; }
.wb-cookie__accept:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(255,90,0,0.4); }
.wb-cookie__decline { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.12); }
.wb-cookie__decline:hover { background: rgba(255,255,255,0.1); color: #fff; }
@media (max-width: 480px) {
	.wb-cookie { left: 14px; right: 14px; bottom: 14px; width: auto; }
}

/* ---------------- SUPPORT TICKETS PAGE ---------------- */
.wb-support { color: rgba(255,255,255,0.85); }
.wb-support-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 28px; align-items: start; }
.wb-support h3 { display: flex; align-items: center; gap: 9px; color: #fff; font-size: 1.05rem; margin: 0 0 16px; }
.wb-support h3 i { color: var(--wb-orange); }
.wb-muted { color: rgba(255,255,255,0.45); font-size: 0.9rem; }

.wb-support-new, .wb-support-list {
	background: rgba(255,255,255,0.025);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 16px; padding: 24px;
}
.wb-ticket-form label, .wb-ticket-reply label { display: block; color: rgba(255,255,255,0.6); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 14px; }
.wb-ticket-form .wb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.wb-ticket-form input, .wb-ticket-form select, .wb-ticket-form textarea, .wb-ticket-reply textarea {
	width: 100%; margin-top: 7px; background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.12); border-radius: 10px;
	padding: 11px 13px; color: #fff; font-size: 0.9rem; outline: none; font-family: inherit;
	text-transform: none; font-weight: 400; letter-spacing: 0;
}
.wb-ticket-form input:focus, .wb-ticket-form select:focus, .wb-ticket-form textarea:focus, .wb-ticket-reply textarea:focus { border-color: rgba(255,140,0,0.5); }
.wb-ticket-form select option { background: #1a1a1a; }

.wb-btn {
	display: inline-flex; align-items: center; gap: 8px;
	background: linear-gradient(135deg, var(--wb-orange), var(--wb-orange2));
	color: #1a1a1a; border: none; border-radius: 11px;
	padding: 13px 22px; font-weight: 800; font-size: 0.9rem; cursor: pointer;
	text-transform: uppercase; letter-spacing: 0.5px; transition: transform 0.2s;
}
.wb-btn:hover { transform: translateY(-2px); }
.wb-btn--sm { padding: 9px 16px; font-size: 0.8rem; }

.wb-ticket-feedback { padding: 12px 15px; border-radius: 10px; margin-bottom: 16px; font-size: 0.88rem; }
.wb-ticket-feedback.wb-ok { background: rgba(46,204,113,0.12); border: 1px solid rgba(46,204,113,0.4); color: #7ee8a6; }
.wb-ticket-feedback.wb-err { background: rgba(231,76,60,0.12); border: 1px solid rgba(231,76,60,0.4); color: #ffa79e; }

.wb-ticket-items { list-style: none; margin: 0; padding: 0; }
.wb-ticket-item { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 13px 14px; border: 1px solid rgba(255,255,255,0.08); border-radius: 11px; margin-bottom: 10px; cursor: pointer; transition: border-color 0.2s, background 0.2s; }
.wb-ticket-item:hover { border-color: rgba(255,140,0,0.4); background: rgba(255,140,0,0.04); }
.wb-tk-status { font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 9px; border-radius: 20px; }
.wb-tk-open { background: rgba(255,140,0,0.16); color: var(--wb-orange); }
.wb-tk-answered { background: rgba(46,204,113,0.15); color: #6fe39a; }
.wb-tk-pending { background: rgba(52,152,219,0.15); color: #74c0f0; }
.wb-tk-closed { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.5); }
.wb-tk-subject { color: #fff; font-weight: 600; font-size: 0.9rem; }
.wb-tk-meta { color: rgba(255,255,255,0.4); font-size: 0.74rem; }

.wb-ticket-thread { grid-column: 1 / -1; margin: -2px 0 12px; padding: 16px; background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.07); border-radius: 11px; }
.wb-thread { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.wb-msg { max-width: 85%; padding: 10px 14px; border-radius: 12px; font-size: 0.86rem; line-height: 1.5; }
.wb-msg__t { font-size: 0.66rem; opacity: 0.55; margin-top: 4px; }
.wb-msg--cust { align-self: flex-end; background: linear-gradient(135deg, var(--wb-orange), var(--wb-orange2)); color: #1a1a1a; }
.wb-msg--staff { align-self: flex-start; background: rgba(255,255,255,0.08); color: #fff; }
.wb-ticket-reply textarea { margin-bottom: 10px; }

@media (max-width: 820px) {
	.wb-support-grid { grid-template-columns: 1fr; }
}

/* ---------------- ADMIN metabox thread ---------------- */
.wb-admin-thread { max-height: 420px; overflow-y: auto; padding: 14px; background: #f6f7f7; border: 1px solid #dcdcde; border-radius: 8px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.wb-admin-thread .wb-msg { max-width: 80%; }
.wb-admin-thread .wb-msg--staff { align-self: flex-start; background: #2271b1; color: #fff; }
.wb-admin-thread .wb-msg--cust { align-self: flex-end; background: #fff; color: #1d2327; border: 1px solid #dcdcde; }