/* ============================================================
   OA Quiz Plugin — Frontend Styles
   Theme-inheriting via CSS custom properties
   ============================================================ */

/* ---- Theme integration ----------------------------------- */
.oaq-questionnaire-wrap {
	/* Pull from WP block themes, common theme vars, then fallback */
	--oaq-primary:       var(--wp--preset--color--primary, var(--primary-color, var(--color-primary, #2e7d5c)));
	--oaq-primary-dark:  var(--wp--preset--color--primary-dark, #245e47);
	--oaq-primary-light: rgba(46, 125, 92, 0.12);
	--oaq-primary-mid:   rgba(46, 125, 92, 0.25);
	--oaq-text:          inherit;
	--oaq-radius:        8px;

	font-family:         inherit;
	font-size:           inherit;
	color:               inherit;
	max-width:           1080px;
	margin:              0 auto;
}

/* ---- Two-column grid ------------------------------------- */
.oaq-layout-grid {
	display:               grid;
	grid-template-columns: 320px 1fr;
	gap:                   0;
	min-height:            480px;
	border-radius:         16px;
	overflow:              hidden;
	box-shadow:            0 8px 40px rgba(0, 0, 0, 0.10);
}

/* ---- Left illustration panel ----------------------------- */
.oaq-left-panel {
	position:      relative;
	display:       flex;
	flex-direction: column;
	align-items:   center;
	justify-content: center;
	padding:       40px 24px 32px;
	overflow:      hidden;
	transition:    background 0.8s ease;
	background:    linear-gradient(160deg, #f0faf5 0%, #e8f6ef 100%);
}

/* Scene-specific backgrounds — toggled by JS adding a class to oaq-left-panel */
.oaq-left-panel.scene-vitality  { background: linear-gradient(160deg, #fffbeb 0%, #fef3c7 60%, #fde68a 100%); }
.oaq-left-panel.scene-body      { background: linear-gradient(160deg, #f0fdf4 0%, #dcfce7 60%, #bbf7d0 100%); }
.oaq-left-panel.scene-rest      { background: linear-gradient(160deg, #eef2ff 0%, #e0e7ff 60%, #c7d2fe 100%); }
.oaq-left-panel.scene-strength  { background: linear-gradient(160deg, #f7fee7 0%, #ecfccb 60%, #d9f99d 100%); }
.oaq-left-panel.scene-mind      { background: linear-gradient(160deg, #faf5ff 0%, #f3e8ff 60%, #e9d5ff 100%); }
.oaq-left-panel.scene-heart     { background: linear-gradient(160deg, #fff1f2 0%, #ffe4e6 60%, #fecdd3 100%); }

/* Decorative blobs behind the SVG */
.oaq-left-panel::before {
	content:       '';
	position:      absolute;
	width:         260px;
	height:        260px;
	border-radius: 50%;
	background:    rgba(255, 255, 255, 0.35);
	top:           50%;
	left:          50%;
	transform:     translate(-50%, -50%);
	pointer-events: none;
}

.oaq-scene-container {
	position: relative;
	width:    220px;
	height:   220px;
}

.oaq-scene {
	position:   absolute;
	inset:      0;
	display:    flex;
	align-items: center;
	justify-content: center;
	opacity:    0;
	transition: none; /* GSAP handles */
}

.oaq-scene.is-active {
	opacity: 1;
}

.oaq-scene svg {
	width:    100%;
	height:   100%;
	overflow: visible;
}

/* Category label */
.oaq-scene-label {
	margin-top:  20px;
	text-align:  center;
}

.oaq-scene-category {
	font-size:      13px;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color:          rgba(0,0,0,0.45);
	margin:         0;
	transition:     opacity 0.4s;
}

/* Question counter on left panel */
.oaq-left-counter {
	margin-top:  8px;
	font-size:   12px;
	color:       rgba(0,0,0,0.30);
}

/* ---- Right quiz panel ------------------------------------ */
.oaq-right-panel {
	background: #fff;
	padding:    40px 44px;
	display:    flex;
	flex-direction: column;
}

/* ---- Progress Bar ---------------------------------------- */
.oaq-progress-wrapper {
	width:         100%;
	background:    #e9ecef;
	border-radius: 50px;
	overflow:      hidden;
	height:        8px;
	position:      relative;
	margin-bottom: 28px;
	flex-shrink:   0;
}

.oaq-progress-wrapper.position-bottom {
	margin-bottom: 0;
	margin-top:    24px;
}

.oaq-progress-slider {
	height:        100%;
	background:    linear-gradient(90deg, var(--oaq-primary), var(--oaq-primary-dark, #245e47));
	border-radius: 50px;
	width:         0%;
}

.oaq-progress-label {
	display: none;
}

/* ---- Question Block -------------------------------------- */
.questionnaire-lists {
	flex: 1;
}

.question-number {
	display:       inline-flex;
	align-items:   center;
	justify-content: center;
	background:    var(--oaq-primary-light);
	color:         var(--oaq-primary);
	border-radius: 50%;
	width:         30px;
	height:        30px;
	font-size:     13px;
	font-weight:   700;
	margin-bottom: 12px;
	border:        2px solid var(--oaq-primary);
}

.question-title {
	font-size:   19px;
	font-weight: 600;
	color:       inherit;
	margin-bottom: 24px;
	line-height: 1.5;
}

/* ---- Answer Options -------------------------------------- */
.oaq-questionnaire-wrap ul.answer-lists,
.oaq-questionnaire-wrap ul.answer-lists li {
	list-style:      none !important;
	list-style-type: none !important;
	margin:          0;
	padding:         0;
}

.oaq-questionnaire-wrap ul.answer-lists {
	display:        flex;
	flex-direction: column;
	gap:            10px;
}

.answer-lists li {
	border:        2px solid #e5e7eb;
	border-radius: var(--oaq-radius);
	cursor:        pointer;
	transition:    border-color 0.18s, background 0.18s, transform 0.12s;
}

.answer-lists li:hover {
	border-color: var(--oaq-primary);
	background:   var(--oaq-primary-light);
	transform:    translateX(3px);
}

.answer-lists li.oaq-selected {
	border-color: var(--oaq-primary);
	background:   var(--oaq-primary-light);
}

.answer-lists li label {
	display:     block;
	padding:     13px 18px;
	cursor:      pointer;
	font-size:   15px;
	color:       inherit;
	font-weight: 400;
}

.answer-lists li input[type="radio"] {
	position:       absolute;
	opacity:        0;
	width:          0;
	height:         0;
	pointer-events: none;
}

.answer-lists li.oaq-selected label {
	color:       var(--oaq-primary);
	font-weight: 600;
}

/* ---- Pagination ------------------------------------------ */
.oaq-pagination {
	list-style: none !important;
	margin:     28px 0 0;
	padding:    0 !important;
	display:    flex;
	justify-content: space-between;
	align-items: center;
	flex-shrink: 0;
}

.oaq-pagination .pagination-nav a {
	display:         inline-block;
	padding:         11px 26px;
	border-radius:   var(--oaq-radius);
	font-size:       14px;
	font-weight:     600;
	text-decoration: none;
	cursor:          pointer;
	transition:      background 0.18s, border-color 0.18s;
	font-family:     inherit;
}

.back-nav a {
	background:    transparent;
	color:         #6b7280;
	border:        2px solid #e5e7eb;
}

.back-nav a:hover {
	background:    #f9fafb;
	border-color:  #d1d5db;
}

.next-nav a {
	background:   var(--oaq-primary);
	color:        #fff;
	border:       2px solid var(--oaq-primary);
}

.next-nav a:hover {
	background:   var(--oaq-primary-dark, #245e47);
	border-color: var(--oaq-primary-dark, #245e47);
}

/* ---- Validation error ------------------------------------ */
.oaq-answer-error {
	color:         #dc2626;
	font-size:     13px;
	margin-top:    10px;
	padding:       9px 14px;
	background:    #fef2f2;
	border-left:   3px solid #dc2626;
	border-radius: 4px;
}

/* ---- Respondent Form ------------------------------------- */
.oaq-subscriber-info {
	padding-top: 4px;
	flex: 1;
}

.oaq-subscriber-info h2 {
	margin-top:    0;
	margin-bottom: 6px;
	font-size:     22px;
	color:         inherit;
	font-family:   inherit;
}

.oaq-subscriber-info > p {
	color:         #6b7280;
	margin-bottom: 24px;
	font-size:     14px;
}

.field-row {
	margin-bottom: 16px;
}

.field-row label {
	display:        block;
	font-weight:    600;
	font-size:      12px;
	margin-bottom:  6px;
	color:          #374151;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-family:    inherit;
}

.oaq-required-star {
	color: #dc2626;
}

.oaq-field {
	width:         100%;
	padding:       11px 15px;
	border:        2px solid #e5e7eb;
	border-radius: var(--oaq-radius);
	font-size:     15px;
	color:         inherit;
	background:    #fafafa;
	box-sizing:    border-box;
	transition:    border-color 0.18s, background 0.18s;
	outline:       none;
	font-family:   inherit;
}

.oaq-field:focus {
	border-color: var(--oaq-primary);
	background:   #fff;
}

.oaq-field.oaq-field-error {
	border-color: #dc2626;
}

.oaq-form-error {
	background:    #fef2f2;
	color:         #dc2626;
	border-left:   3px solid #dc2626;
	padding:       10px 14px;
	border-radius: 4px;
	font-size:     14px;
	margin-bottom: 14px;
}

.oaq-submit-btn {
	display:        inline-block;
	background:     var(--oaq-primary);
	color:          #fff;
	border:         none;
	border-radius:  var(--oaq-radius);
	padding:        13px 32px;
	font-size:      15px;
	font-weight:    700;
	cursor:         pointer;
	transition:     background 0.18s, transform 0.1s;
	margin-top:     8px;
	letter-spacing: 0.03em;
	font-family:    inherit;
}

.oaq-submit-btn:hover:not(:disabled) {
	background: var(--oaq-primary-dark, #245e47);
}

.oaq-submit-btn:active {
	transform: scale(0.97);
}

.oaq-submit-btn:disabled {
	opacity: 0.55;
	cursor:  not-allowed;
}

/* ---- Result Panel ---------------------------------------- */
.oaq-result-panel {
	flex: 1;
}

.oaq-score-display {
	text-align:    center;
	margin-bottom: 32px;
	padding:       28px 20px;
	background:    var(--oaq-primary-light);
	border-radius: 12px;
}

.oaq-score-label {
	display:        block;
	font-size:      12px;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color:          var(--oaq-primary);
	margin-bottom:  8px;
	font-weight:    700;
}

.oaq-score-counter {
	display:     flex;
	align-items: baseline;
	justify-content: center;
	gap:         6px;
}

.oaq-score-number {
	font-size:   72px;
	font-weight: 800;
	line-height: 1;
	color:       var(--oaq-primary);
	font-family: inherit;
}

.oaq-score-max {
	font-size:  24px;
	color:      #9ca3af;
	font-weight: 400;
}

.oaq-result-content {
	background:    #fafafa;
	border:        1px solid #e5e7eb;
	border-radius: 12px;
	padding:       28px 32px;
	text-align:    left;
	font-size:     15px;
	line-height:   1.75;
	color:         inherit;
}

.oaq-result-content h2,
.oaq-result-content h3 {
	color:       var(--oaq-primary);
	font-family: inherit;
}

.oaq-result-content h2:first-child,
.oaq-result-content h3:first-child {
	margin-top: 0;
}

/* ---- Utility --------------------------------------------- */
.clearfix::after {
	content: '';
	display: table;
	clear:   both;
}

.oaq-error {
	color:      #dc2626;
	padding:    12px;
	border-left: 4px solid #dc2626;
	background: #fef2f2;
}

/* ---- Responsive ------------------------------------------ */
@media (max-width: 820px) {
	.oaq-layout-grid {
		grid-template-columns: 1fr;
	}

	.oaq-left-panel {
		display: none;
	}

	.oaq-right-panel {
		padding: 28px 24px;
	}
}

@media (max-width: 480px) {
	.oaq-right-panel {
		padding: 20px 16px;
	}

	.question-title {
		font-size: 16px;
	}

	.oaq-score-number {
		font-size: 56px;
	}

	.oaq-result-content {
		padding: 20px 18px;
	}
}