/* ── InterviewReady: Assessment Frontend Styles ──────────────────────────────
   CSS custom properties with BB theme-friendly fallbacks.
   Override via Assessment Setup → Style Settings.

   Variables:
     --ira-primary          progress bar, buttons, selected state, labels
     --ira-question-bg      question card background
     --ira-question-border  question card border
     --ira-result-bg        result block background
     --ira-result-border    result block border
     --ira-chapter-bg       chapter content background
     --ira-font-family      all text inside .ira-wrap
     --ira-font-size        base body text size
     --ira-heading-size     question heading size
   ──────────────────────────────────────────────────────────────────────────── */

.ira-wrap {
	max-width: 860px;
	margin: 0 auto;
	padding: 24px 0 40px;
	font-family: var( --ira-font-family, inherit );
	font-size: var( --ira-font-size, inherit );
	color: inherit;
}

/* Steps */
.ira-step { display: none; }
.ira-step--active { display: block; }
.ira-step-header { margin-bottom: 28px; }
.ira-step-header h2 { margin-top: 0; margin-bottom: 10px; }
.ira-step-title { font-size: 24px; }

/* Form elements */
.ira-field-group { margin-bottom: 20px; }
.ira-label { display: block; font-weight: 600; margin-bottom: 6px; }
.ira-required { color: #c0392b; }

.ira-input,
.ira-select {
	width: 100%;
	max-width: 520px;
	padding: 10px 14px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: var( --ira-font-size, inherit );
	font-family: var( --ira-font-family, inherit );
	line-height: 1.4;
	transition: border-color 0.15s;
}
.ira-input:focus,
.ira-select:focus {
	outline: none;
	border-color: var( --ira-primary, #1a3a5c );
}

.ira-tier-badge { color: #555; margin-bottom: 16px; }
.ira-field-note { font-size: 13px; color: #777; margin: 6px 0 0; font-style: italic; }

/* Buttons */
/* Buttons — one shape for the whole site.
   These deliberately mirror the theme's .ir-btn geometry rather than defining a
   second look. The interview plugin uses the SAME class names as the theme, and
   its stylesheet loads after the theme's, so on any page carrying a tool the
   plugin's rules win for every button on the page — including the header and
   footer. Matching the theme means it no longer matters which one wins.
   See the reserved-names note at the top of the theme stylesheet. */
.ira-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 3.25rem;
	padding: 0 26px;
	border: 1.5px solid transparent;
	border-radius: 6px;
	font-family: var( --ira-font-family, inherit );
	font-size: var( --ira-font-size, 16px );
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.ira-btn:hover,
.ira-btn:focus-visible { text-decoration: none; }
.ira-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.ira-btn--primary {
	background: var( --ira-primary, #026CED );
	color: #fff;
	border-color: var( --ira-primary, #026CED );
}
.ira-btn--primary:hover,
.ira-btn--primary:focus-visible { background: #0044DB; border-color: #0044DB; color: #fff; }

.ira-btn--secondary {
	background: #fff;
	color: #0A0C10;
	border-color: #D7DEE8;
}
.ira-btn--secondary:hover,
.ira-btn--secondary:focus-visible { border-color: var( --ira-primary, #026CED ); color: #0044DB; }

.ira-btn--outline {
	background: transparent;
	color: var( --ira-primary, #026CED );
	border-color: var( --ira-primary, #026CED );
}
.ira-btn--outline:hover,
.ira-btn--outline:focus-visible { background: var( --ira-primary, #026CED ); color: #fff; }

.ira-btn--large { min-height: 3.5rem; padding: 0 32px; font-size: 17px; }
.ira-btn--sm    { min-height: 2.75rem; padding: 0 20px; font-size: 14px; }

.ira-step-nav { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }

/* Feedback */
.ira-error-msg { color: #c0392b; font-size: 14px; margin: 10px 0 0; display: none; }
.ira-notice    { color: #555; font-style: italic; padding: 8px 0; }
.ira-loading   { color: #666; font-style: italic; padding: 12px 0; }
.ira-login-prompt { color: #555; }

/* ── Progress bar ─────────────────────────────────────────────────────────── */
.ira-progress-wrap { margin-bottom: 24px; }

.ira-progress-bar {
	height: 6px;
	background: #e0e0e0;
	border-radius: 3px;
	overflow: hidden;
	margin-bottom: 8px;
}

.ira-progress-fill {
	height: 100%;
	background: var( --ira-primary, #1a3a5c );
	border-radius: 3px;
	transition: width 0.3s ease;
}

.ira-progress-label {
	font-size: 13px;
	color: var( --ira-primary, #1a3a5c );
	font-weight: 600;
	margin: 0;
}

/* ── Question card ────────────────────────────────────────────────────────── */
.ira-question-card {
	border: 1px solid var( --ira-question-border, #e0e0e0 );
	border-radius: 8px;
	padding: 28px 24px;
	background: var( --ira-question-bg, #fff );
	margin-bottom: 16px;
}

.ira-question-text {
	font-size: var( --ira-heading-size, 18px );
	font-family: var( --ira-font-family, inherit );
	font-weight: 600;
	margin: 0 0 20px;
	line-height: 1.4;
	color: inherit;
}

/* Answer options */
.ira-options-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ira-option-item {
	border: 1px solid var( --ira-question-border, #e0e0e0 );
	border-radius: 6px;
	padding: 14px 18px;
	cursor: pointer;
	font-size: var( --ira-font-size, 15px );
	background: var( --ira-question-bg, #fff );
	transition: border-color 0.15s, background 0.15s;
	user-select: none;
}

.ira-option-item:hover {
	border-color: var( --ira-primary, #1a3a5c );
	background: color-mix( in srgb, var( --ira-primary, #1a3a5c ) 5%, white );
}

.ira-option-item.ira-option--selected {
	border-color: var( --ira-primary, #1a3a5c );
	border-width: 2px;
	background: color-mix( in srgb, var( --ira-primary, #1a3a5c ) 8%, white );
	font-weight: 600;
}

.ira-last-q-note {
	font-size: 13px;
	color: #888;
	margin: 16px 0 0;
	font-style: italic;
}

/* ── Result page ──────────────────────────────────────────────────────────── */
.ira-result-header  { margin-bottom: 20px; }
.ira-result-title   { font-size: 26px; margin: 0 0 10px; }
.ira-result-meta {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	font-size: 14px;
	color: #555;
	margin-bottom: 20px;
}

.ira-instructions {
	background: var( --ira-chapter-bg, #f8f9fa );
	border-radius: 6px;
	padding: 20px 24px;
	margin-bottom: 28px;
}
.ira-instructions p { margin: 0 0 8px; }
.ira-instructions p:last-child { margin-bottom: 0; }

/* Result block */
.ira-result-block {
	border: 1px solid var( --ira-result-border, #e0e0e0 );
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 20px;
	background: var( --ira-result-bg, #fff );
}

.ira-result-qa {
	padding: 18px 20px;
	border-bottom: 1px solid var( --ira-result-border, #e0e0e0 );
}

.ira-result-q-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var( --ira-primary, #1a3a5c );
	margin-bottom: 6px;
}

.ira-result-question {
	font-size: var( --ira-heading-size, 17px );
	margin: 0 0 10px;
	font-family: var( --ira-font-family, inherit );
}

.ira-result-answer {
	font-size: var( --ira-font-size, 15px );
	color: #555;
}
.ira-answer-label {
	font-weight: 600;
	color: #333;
	margin-right: 4px;
}

.ira-result-desc {
	padding: 14px 20px;
	font-size: 14px;
	color: #555;
	border-bottom: 1px solid var( --ira-result-border, #e0e0e0 );
}

/* Chapter blocks */
.ira-chapter-blocks { }

.ira-chapter-block {
	padding: 18px 20px;
	background: var( --ira-chapter-bg, #f8f9fa );
	border-top: 1px solid var( --ira-result-border, #e0e0e0 );
}

.ira-chapter-block + .ira-chapter-block {
	border-top: 1px solid var( --ira-result-border, #e0e0e0 );
}

.ira-chapter-title {
	font-size: 15px;
	font-weight: 600;
	margin: 0 0 10px;
	font-family: var( --ira-font-family, inherit );
}

.ira-chapter-content {
	font-size: var( --ira-font-size, 15px );
	line-height: 1.7;
}
.ira-chapter-content p { margin: 0 0 10px; }
.ira-chapter-content p:last-child { margin-bottom: 0; }

/* Video */
.ira-result-video {
	padding: 16px 20px;
	border-top: 1px solid var( --ira-result-border, #e0e0e0 );
}
.ira-result-video iframe { display: block; }

/* Locked placeholder */
.ira-result-locked {
	min-height: 80px;
	border: 1px dashed var( --ira-result-border, #e0e0e0 );
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var( --ira-result-bg, #fafafa );
	margin-bottom: 20px;
}

.ira-locked-overlay {
	text-align: center;
	padding: 20px;
	color: #999;
}

.ira-lock-icon {
	display: block;
	font-size: 24px;
	margin-bottom: 6px;
}

.ira-locked-overlay p { margin: 0; font-size: 14px; }

/* Result actions */
.ira-result-actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 32px;
	padding-top: 20px;
	border-top: 1px solid #e0e0e0;
}

/* ── Upgrade CTA ──────────────────────────────────────────────────────────── */
.ira-upgrade-cta {
	margin: 32px 0 16px;
	border-radius: 8px;
	overflow: hidden;
	border: 2px solid var( --ira-primary, #1a3a5c );
}

.ira-upgrade-cta-inner {
	padding: 32px 28px;
	text-align: center;
	background: var( --ira-result-bg, #fff );
}

.ira-upgrade-cta h3 {
	font-size: 22px;
	margin: 0 0 10px;
	color: var( --ira-primary, #1a3a5c );
}

.ira-upgrade-cta p {
	font-size: 16px;
	color: #555;
	margin: 0 0 20px;
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
}

.ira-upgrade-tier {
	margin: 12px 0 0 !important;
	font-size: 13px !important;
	color: #888 !important;
}

/* ── Dashboard ────────────────────────────────────────────────────────────── */
.ira-dashboard-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 24px;
}
.ira-dashboard-header h2 { margin: 0; }

.ira-upgrade-notice {
	background: color-mix( in srgb, var( --ira-primary, #1a3a5c ) 8%, white );
	border-left: 3px solid var( --ira-primary, #1a3a5c );
	border-radius: 0 4px 4px 0;
	padding: 12px 16px;
	margin-bottom: 20px;
	font-size: 14px;
	color: #444;
}
.ira-upgrade-notice p { margin: 0; }

.ira-assessment-list { list-style: none; padding: 0; margin: 0; }

.ira-assessment-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	border: 1px solid var( --ira-result-border, #e0e0e0 );
	border-radius: 6px;
	padding: 14px 16px;
	margin-bottom: 10px;
	background: var( --ira-result-bg, #fff );
	transition: border-color 0.15s;
}
.ira-assessment-item:hover { border-color: #aaa; }

.ira-assessment-link {
	display: flex;
	flex-direction: column;
	gap: 4px;
	text-decoration: none;
	color: inherit;
	flex: 1;
}
.ira-assessment-title { font-weight: 600; color: var( --ira-primary, #1a3a5c ); }
.ira-assessment-meta  { font-size: 13px; color: #777; }

.ira-btn-delete {
	flex-shrink: 0;
	background: none;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 6px 12px;
	color: #999;
	font-size: 13px;
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s;
}
.ira-btn-delete:hover { border-color: #c0392b; color: #c0392b; }

.ira-empty-state { text-align: center; padding: 56px 24px; color: #666; }
.ira-empty-state p { font-size: 16px; margin-bottom: 20px; }

/* ── Print ────────────────────────────────────────────────────────────────── */
@media print {
	.no-print,
	.ira-result-actions { display: none !important; }
	.ira-wrap { padding: 0; }
	.ira-result-block { break-inside: avoid; }
	.ira-chapter-block {
		background: #f8f8f8 !important;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media ( max-width: 600px ) {
	.ira-step-nav         { flex-direction: column; }
	.ira-btn              { text-align: center; }
	.ira-dashboard-header { flex-direction: column; align-items: flex-start; }
	.ira-assessment-item  { flex-direction: column; align-items: flex-start; }
	.ira-btn-delete       { align-self: flex-end; }
	.ira-result-meta      { flex-direction: column; gap: 4px; }
	.ira-result-actions   { flex-direction: column; }
}

/* ── Paywall, revised 2026-09-02 ─────────────────────────────────────────────
   Matches the Interview Builder result: full breadth, gated depth. Every
   question, answer and chapter title shows; the chapter text and videos need a
   membership. Colours come from the plugin's own variables, set in Assessment
   Setup → Style Settings.
   ───────────────────────────────────────────────────────────────────────── */

.ira-result-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin: 20px 0 28px;
	padding: 18px 22px;
	border-radius: 6px;
	background: var( --ira-primary, #1a3a5c );
	color: #fff;
}
.ira-result-banner__text { flex: 1 1 24rem; line-height: 1.45; }
.ira-result-banner__text strong { font-weight: 700; }

.ira-btn--onbrand {
	background: #fff;
	color: var( --ira-primary, #1a3a5c );
	border-color: #fff;
	white-space: nowrap;
}
.ira-btn--onbrand:hover,
.ira-btn--onbrand:focus { background: #f0f4fa; color: var( --ira-primary, #1a3a5c ); }

.ira-chapter-locked {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
	padding: 12px 14px;
	border-radius: 4px;
	background: var( --ira-chapter-bg, #f8f9fa );
	color: #737c88;
}
.ira-chapter-locked__icon { display: inline-flex; flex-shrink: 0; color: #98a1ad; }

.ira-result-block--gated .ira-chapter-blocks { opacity: 1; }

@media print {
	.ira-result-banner,
	.ira-chapter-locked,
	.ira-upgrade-cta { display: none; }
}

/* ── Type, carried from the theme ────────────────────────────────────────────
   The tools sit inside the site, so they use the site's faces. The plugin's own
   --*-font-family variable still wins when the client sets one in Style
   Settings; leaving it empty (the default) is what lets the theme through.
   The display face is named explicitly for the tool's own heading elements,
   which are divs rather than h-tags in a few places and would otherwise fall
   back to the body face.
   ───────────────────────────────────────────────────────────────────────── */

.ira-wrap h1,
.ira-wrap h2,
.ira-wrap h3,
.ira-wrap h4,
.ira-wrap .ira-step-title,
.ira-wrap .ira-result-title {
	font-family: var( --ir-theme-display, "Libre Franklin", "Helvetica Neue", Arial, sans-serif );
	letter-spacing: -0.02em;
}