/* =============================================================
   ASK BBSS — Frontend Widget ([ask_bbss] shortcode)
   Dark mode first (site default), light mode supported via the
   site-wide html.bbss-dark-mode toggle. Solid colors only, no
   gradients, per spec/01-Product-Specification.md and
   spec/04-Technical-Architecture.md Design Rules.
   ============================================================= */

.askbbss-widget {
	max-width: 640px;
	margin: 0 auto;
	background: #131C2E;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 12px;
	padding: 24px;
	box-sizing: border-box;
}

.askbbss-form__label {
	display: block;
	font-weight: 600;
	font-size: .9rem;
	color: #F1F5F9;
	margin-bottom: 10px;
}

.askbbss-form__row {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.askbbss-form__input {
	flex: 1 1 240px;
	box-sizing: border-box;
	height: 48px;
	padding: 0 16px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 8px;
	/* !important: Blocksy's global form-field selector
	   (input:is([type="text"], ...)) carries slightly higher specificity
	   than a single class here and was winning the cascade, silently
	   replacing these two colors with the theme's default form-field
	   colors — the actual cause of the v1.0.1 "hard to read" report.
	   Scoped to exactly the two properties Blocksy's rule sets; nothing
	   else on this element uses !important. */
	background-color: #0B1220 !important;
	color: #F1F5F9 !important;
	font-size: 1rem;
	font-family: inherit;
}

.askbbss-form__input::placeholder {
	color: #B8C4D9;
	opacity: .7;
}

.askbbss-form__input:focus {
	outline: none;
	border-color: #00C3FF;
	box-shadow: 0 0 0 3px rgba(0, 195, 255, .15);
}

.askbbss-form__submit {
	flex: 0 0 auto;
	height: 48px;
	padding: 0 24px;
	border: none;
	border-radius: 8px;
	background: #00C3FF;
	color: #011E3D;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s ease;
}

.askbbss-form__submit:hover {
	background: #5DD9FF;
}

.askbbss-form__submit:disabled {
	opacity: .6;
	cursor: default;
}

/* ─── Result panel ───────────────────────────────────────────── */
.askbbss-result {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.askbbss-result__status {
	color: #B8C4D9;
	font-size: .9rem;
}

.askbbss-result__question {
	font-size: 1.05rem;
	font-weight: 700;
	color: #F1F5F9;
	margin: 0 0 10px;
}

.askbbss-result__answer {
	color: #B8C4D9;
	line-height: 1.7;
	margin: 0 0 20px;
}

.askbbss-result__answer p:first-child {
	margin-top: 0;
}

.askbbss-result__answer p:last-child {
	margin-bottom: 0;
}

.askbbss-feedback {
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding-top: 16px;
}

.askbbss-feedback__prompt {
	font-size: .9rem;
	font-weight: 600;
	color: #F1F5F9;
	margin: 0 0 12px;
}

.askbbss-feedback__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.askbbss-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 20px;
	border-radius: 8px;
	font-size: .9rem;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
	box-sizing: border-box;
}

.askbbss-btn--yes {
	background: #00C3FF;
	color: #011E3D;
	border: none;
}

.askbbss-btn--yes:hover {
	background: #5DD9FF;
}

.askbbss-btn--help {
	background: transparent;
	color: #00C3FF;
	border: 2px solid #00C3FF;
}

.askbbss-btn--help:hover {
	background: rgba(0, 195, 255, .1);
}

.askbbss-feedback__thanks {
	font-size: .9rem;
	color: #B8C4D9;
	margin: 0;
}

/* ─── Ticket Form (Phase 2 — replaces the old "Contact Us" link) ── */
.askbbss-ticket-intro {
	font-size: .9rem;
	font-weight: 600;
	color: #F1F5F9;
	margin: 0 0 14px;
}

.askbbss-ticket-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.askbbss-ticket-field label {
	display: block;
	font-weight: 600;
	font-size: .85rem;
	color: #F1F5F9;
	margin-bottom: 6px;
}

.askbbss-ticket-input {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 8px;
	/* !important: same Blocksy global form-field specificity conflict as
	   .askbbss-form__input above — this selector also matches input[type
	   =text/email] and textarea. */
	background-color: #0B1220 !important;
	color: #F1F5F9 !important;
	font-size: .95rem;
	font-family: inherit;
}

textarea.askbbss-ticket-input {
	resize: vertical;
}

.askbbss-ticket-input:focus {
	outline: none;
	border-color: #00C3FF;
	box-shadow: 0 0 0 3px rgba(0, 195, 255, .15);
}

.askbbss-ticket-question-readonly {
	background: rgba(255, 255, 255, .04);
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 8px;
	padding: 12px 14px;
	color: #B8C4D9;
	font-size: .9rem;
	line-height: 1.6;
}

.askbbss-ticket-error {
	font-size: .85rem;
	color: #FCA5A5;
	margin: 0;
}

.askbbss-ticket-submit {
	align-self: flex-start;
}

.askbbss-ticket-success-title {
	font-size: .95rem;
	font-weight: 700;
	color: #F1F5F9;
	margin: 0 0 8px;
}

.askbbss-ticket-success-number {
	font-size: .9rem;
	color: #B8C4D9;
	margin: 0;
}

/* ─── Light mode (html:not(.bbss-dark-mode)) ────────────────────
   Same pattern already used for .bbssl-faq-load-more: dark is the
   base/default ruleset above, light mode overrides scoped here. */
html:not(.bbss-dark-mode) .askbbss-widget {
	background: #FFFFFF;
	border-color: #CBD5E1;
}

html:not(.bbss-dark-mode) .askbbss-form__label,
html:not(.bbss-dark-mode) .askbbss-result__question,
html:not(.bbss-dark-mode) .askbbss-feedback__prompt,
html:not(.bbss-dark-mode) .askbbss-ticket-intro,
html:not(.bbss-dark-mode) .askbbss-ticket-field label,
html:not(.bbss-dark-mode) .askbbss-ticket-success-title {
	color: #0F172A;
}

html:not(.bbss-dark-mode) .askbbss-ticket-input {
	/* !important for consistency with the dark-mode rule above — this
	   selector already outranks Blocksy's global form-field specificity on
	   its own (the :not() pseudo-class adds enough weight), but treating
	   color/background-color identically in both modes avoids relying on
	   that margin if Blocksy's own CSS ever changes. */
	background-color: #FFFFFF !important;
	border-color: #CBD5E1;
	color: #0F172A !important;
}

html:not(.bbss-dark-mode) .askbbss-ticket-question-readonly {
	background: #F8FAFC;
	border-color: #E2E8F0;
	color: #475569;
}

html:not(.bbss-dark-mode) .askbbss-ticket-success-number {
	color: #475569;
}

html:not(.bbss-dark-mode) .askbbss-ticket-error {
	color: #B91C1C;
}

html:not(.bbss-dark-mode) .askbbss-form__input {
	/* !important — same consistency rationale as the ticket-input light
	   mode rule above. */
	background-color: #FFFFFF !important;
	border-color: #CBD5E1;
	color: #0F172A !important;
}

html:not(.bbss-dark-mode) .askbbss-form__input::placeholder {
	color: #475569;
	opacity: .8;
}

html:not(.bbss-dark-mode) .askbbss-result {
	border-top-color: #E2E8F0;
}

html:not(.bbss-dark-mode) .askbbss-feedback {
	border-top-color: #E2E8F0;
}

html:not(.bbss-dark-mode) .askbbss-result__answer,
html:not(.bbss-dark-mode) .askbbss-result__status,
html:not(.bbss-dark-mode) .askbbss-feedback__thanks {
	color: #475569;
}

html:not(.bbss-dark-mode) .askbbss-btn--help {
	color: #0891B2;
	border-color: #0891B2;
}

html:not(.bbss-dark-mode) .askbbss-btn--help:hover {
	background: rgba(8, 145, 178, .08);
}

/* ─── Mobile (375px, matches the site's existing breakpoint) ────── */
@media (max-width: 375px) {
	.askbbss-widget {
		padding: 18px;
	}

	.askbbss-form__row {
		flex-direction: column;
	}

	.askbbss-form__submit {
		width: 100%;
	}

	.askbbss-feedback__actions {
		flex-direction: column;
	}

	.askbbss-btn {
		width: 100%;
	}

	.askbbss-ticket-submit {
		width: 100%;
	}
}