/*
 * Full-screen questionnaire — styled to match the site homepage (YITH Wonder).
 *
 * Homepage design language (extracted from the live theme):
 *   Primary teal  #007565   Secondary teal #08a889   Tertiary teal #00a79c
 *   Body text     #404040   Base white     #ffffff    Secondary bg   #e8e8e8
 *   Input border  rgba(0,0,0,0.2) 2px, sharp (0 radius)
 *   Buttons       teal fill, white text, 4px radius, ~8px 16px padding
 *   Headings      Poppins bold, teal;  Body  Mulish 1.5
 *   Teal gradient linear-gradient(135deg, #00a79c, #007565)
 *   Flat / sharp: minimal radius (4px panels/buttons), no shadows.
 *
 * The questionnaire is the immersive "hero" moment, so it uses the homepage
 * teal gradient as a full-screen backdrop with a white content panel on top —
 * the same teal-cover + white-content pattern the homepage uses, rather than a
 * blank white screen.
 */

.pai-questionnaire-app,
.pai-question-screen,
.pai-btn {
    	--pai-teal: #007565;
    	--pai-teal-2: #08a889;
    	--pai-teal-dark: #00594d;
    	--pai-text: #404040;
    	--pai-muted: #6b7280;
    	--pai-border: rgba( 0, 0, 0, 0.2 );
    	--pai-heading: 'Poppins', 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
    	--pai-body: 'Mulish', 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* pai-fullscreen is added to <body> by questionnaire.js while the questionnaire
   is on screen; overflow:hidden locks background scroll during the takeover. */
body.pai-fullscreen {
    	margin: 0;
    	background: linear-gradient( 135deg, #00a79c 0%, #007565 100% );
    	overflow: hidden;
}

/*
 * Full-screen fixed overlay. High z-index + the JS portal to <body> keep it
 * above theme chrome (footer click-through fix). overflow-y:auto with margin:auto
 * on the inner panel keeps the nav buttons reachable on short/narrow viewports.
 */
.pai-questionnaire-app {
    	position: fixed;
    	top: 0;
    	left: 0;
    	right: 0;
    	bottom: 0;
    	width: 100%;
    	height: 100%;
    	z-index: 2147483000;
    	display: flex;
    	justify-content: center;
    	background: linear-gradient( 135deg, #00a79c 0%, #007565 100% );
    	color: #ffffff;
    	font-family: var( --pai-body );
    	-webkit-font-smoothing: antialiased;
    	box-sizing: border-box;
    	padding: 32px 20px;
    	overflow-y: auto;
    	-webkit-overflow-scrolling: touch;
}

/* White content panel sitting on the teal gradient — flat, sharp (4px), no shadow. */
.pai-question-screen {
    	width: 100%;
    	max-width: 620px;
    	margin: auto;
    	background: #ffffff;
    	color: var( --pai-text );
    	border-radius: 4px;
    	box-sizing: border-box;
    	padding: 40px;
}

/*
 * questionnaire.js writes "Step N" into this element. It is a text label, so it
 * is styled as one (an earlier build styled it as a 4px bar that clipped the
 * text out of sight).
 */
.pai-progress {
    	margin: 0 0 20px;
    	font-family: var( --pai-body );
    	font-size: 13px;
    	font-weight: 700;
    	letter-spacing: 0.08em;
    	text-transform: uppercase;
    	color: var( --pai-teal-2 );
}

.pai-question-text {
    	margin: 0 0 24px;
    	font-family: var( --pai-heading );
    	font-size: 30px;
    	line-height: 1.25;
    	font-weight: 700;
    	color: var( --pai-teal );
}

.pai-answer-area {
    	margin-bottom: 28px;
}

.pai-answer-area input[type="text"],
.pai-answer-area textarea {
    	width: 100%;
    	padding: 11px 16px;
    	min-height: 44px;
    	font-family: var( --pai-body );
    	font-size: 16px;
    	color: var( --pai-text );
    	background: #ffffff;
    	border: 2px solid var( --pai-border );
    	border-radius: 0;                 /* homepage inputs are sharp */
    	box-sizing: border-box;
}

.pai-answer-area textarea {
    	min-height: 120px;
    	line-height: 1.6;
    	resize: vertical;
}

.pai-answer-area input[type="text"]:focus,
.pai-answer-area textarea:focus {
    	outline: none;
    	border-color: var( --pai-teal );
}

/* Choice buttons: flat white with a sharp border; teal wash when selected. */
.pai-choice-btn {
    	display: block;
    	width: 100%;
    	text-align: left;
    	margin-bottom: 12px;
    	padding: 14px 16px;
    	font-family: var( --pai-body );
    	font-size: 16px;
    	color: var( --pai-text );
    	background: #ffffff;
    	border: 2px solid var( --pai-border );
    	border-radius: 4px;
    	cursor: pointer;
    	transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.pai-choice-btn:hover {
    	border-color: var( --pai-teal );
}

.pai-choice-btn.pai-choice-selected {
    	border-color: var( --pai-teal );
    	background: rgba( 0, 117, 101, 0.08 );
    	color: var( --pai-teal );
    	font-weight: 600;
}

.pai-choice-btn:focus-visible {
    	outline: 2px solid var( --pai-teal );
    	outline-offset: 2px;
}

.pai-nav {
    	display: flex;
    	gap: 12px;
}

/* ---- Buttons (homepage: teal fill, white text, 4px radius) ---- */

.pai-btn {
    	padding: 10px 20px;
    	border-radius: 4px;
    	border: 2px solid transparent;
    	font-family: var( --pai-body );
    	font-size: 16px;
    	font-weight: 600;
    	line-height: 1.2;
    	cursor: pointer;
    	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pai-btn:focus-visible {
    	outline: 2px solid var( --pai-teal );
    	outline-offset: 2px;
}

.pai-btn:disabled {
    	opacity: 0.5;
    	cursor: not-allowed;
}

.pai-btn-primary {
    	background: var( --pai-teal );
    	border-color: var( --pai-teal );
    	color: #ffffff;
}

.pai-btn-primary:hover:not( :disabled ) {
    	background: var( --pai-teal-dark );
    	border-color: var( --pai-teal-dark );
}

/* Back button — outline style (Back is disabled on step 1). */
.pai-btn-secondary {
    	background: #ffffff;
    	border-color: var( --pai-border );
    	color: var( --pai-teal );
}

.pai-btn-secondary:hover:not( :disabled ) {
    	border-color: var( --pai-teal );
    	background: rgba( 0, 117, 101, 0.06 );
}

.pai-save-status {
    	margin-top: 16px;
    	font-size: 13px;
    	color: var( --pai-muted );
}

/* Submitting screen ("Preparing your secure checkout...") — a white panel too. */
#pai-submitting-screen {
    	text-align: center;
    	color: var( --pai-text );
    	font-size: 17px;
}

.pai-error {
    	margin-top: 16px;
    	min-height: 1.2em;
    	font-size: 14px;
    	font-weight: 600;
    	color: #b91c1c;
}

.pai-hidden {
    	display: none;
}

/* ---- Question explanation + multi-select ---- */

.pai-question-explanation {
    	margin: -8px 0 22px;
    	font-size: 15px;
    	line-height: 1.5;
    	color: var( --pai-muted );
}

.pai-question-explanation:empty {
    	display: none;
}

.pai-multi-hint {
    	margin: 0 0 12px;
    	font-size: 13px;
    	font-weight: 700;
    	letter-spacing: 0.04em;
    	text-transform: uppercase;
    	color: var( --pai-teal-2 );
}

.pai-other-input {
    	width: 100%;
    	margin-top: 4px;
    	padding: 11px 16px;
    	font-family: var( --pai-body );
    	font-size: 16px;
    	color: var( --pai-text );
    	background: #ffffff;
    	border: 2px solid var( --pai-border );
    	border-radius: 0;
    	box-sizing: border-box;
}

.pai-other-input:focus {
    	outline: none;
    	border-color: var( --pai-teal );
}

/* ---- Optional customization selection ---- */

.pai-optional-item {
    	display: flex;
    	align-items: flex-start;
    	gap: 12px;
    	margin-bottom: 10px;
    	padding: 14px 16px;
    	background: #ffffff;
    	border: 2px solid var( --pai-border );
    	border-radius: 4px;
    	cursor: pointer;
}

.pai-optional-item input[type="checkbox"] {
    	margin-top: 3px;
    	width: 18px;
    	height: 18px;
    	accent-color: var( --pai-teal );
    	flex: 0 0 auto;
}

.pai-optional-text {
    	display: flex;
    	flex-direction: column;
    	gap: 2px;
}

.pai-optional-title {
    	font-size: 16px;
    	font-weight: 600;
    	color: var( --pai-text );
}

.pai-optional-desc {
    	font-size: 14px;
    	color: var( --pai-muted );
}

.pai-recommended-badge {
    	display: inline-block;
    	margin-left: 6px;
    	padding: 2px 8px;
    	font-size: 11px;
    	font-weight: 700;
    	letter-spacing: 0.03em;
    	text-transform: uppercase;
    	color: var( --pai-teal );
    	background: #ccfbf1;
    	border-radius: 999px;
    	vertical-align: middle;
}

.pai-more-toggle {
    	display: inline-block;
    	margin: 4px 0 12px;
    	padding: 0;
    	background: none;
    	border: none;
    	font-family: var( --pai-body );
    	font-size: 15px;
    	font-weight: 600;
    	color: var( --pai-teal );
    	cursor: pointer;
}

/* ---- Skip-recommended warning ---- */

.pai-optional-warning {
    	margin-top: 14px;
    	padding: 16px;
    	background: rgba( 0, 117, 101, 0.06 );
    	border: 1px solid var( --pai-border );
    	border-left: 4px solid var( --pai-teal );
    	border-radius: 4px;
}

.pai-warning-msg {
    	margin: 0 0 12px;
    	font-size: 14px;
    	line-height: 1.5;
    	color: var( --pai-text );
}

.pai-ack {
    	display: flex;
    	align-items: flex-start;
    	gap: 10px;
    	margin-bottom: 12px;
    	font-size: 14px;
    	color: var( --pai-text );
    	cursor: pointer;
}

.pai-ack input[type="checkbox"] {
    	margin-top: 2px;
    	width: 18px;
    	height: 18px;
    	accent-color: var( --pai-teal );
    	flex: 0 0 auto;
}

.pai-restore-btn {
    	width: 100%;
}

/* ---- Reconciliation ---- */

.pai-reconcile-item {
    	margin-bottom: 24px;
}

.pai-reconcile-q {
    	margin: 0 0 12px;
    	font-size: 16px;
    	line-height: 1.5;
    	color: var( --pai-text );
}

/* ---- Pre-checkout confirmation ---- */

.pai-confirm {
    	margin-top: 4px;
}

.pai-confirm-price {
    	margin: 0 0 18px;
    	padding: 12px 16px;
    	background: rgba( 0, 117, 101, 0.08 );
    	border-left: 4px solid var( --pai-teal );
    	border-radius: 4px;
    	font-size: 18px;
    	font-weight: 700;
    	color: var( --pai-teal );
}

.pai-confirm-lead {
    	margin: 0 0 10px;
    	font-size: 15px;
    	font-weight: 600;
    	color: var( --pai-text );
}

.pai-confirm-list {
    	margin: 0 0 18px;
    	padding-left: 22px;
    	color: var( --pai-text );
}

.pai-confirm-list li {
    	margin-bottom: 8px;
    	font-size: 16px;
    	line-height: 1.5;
}

.pai-confirm-note {
    	margin: 0;
    	font-size: 14px;
    	line-height: 1.5;
    	color: var( --pai-muted );
}

/* Validation/submit error now lives inside the panel, below the controls. */
.pai-error {
    	text-align: left;
}

@media ( max-width: 600px ) {

    	.pai-question-screen {
        		padding: 26px 20px;
    	}

    	.pai-question-text {
        		font-size: 24px;
    	}

    	.pai-nav {
        		flex-direction: column-reverse;
    	}

    	.pai-nav .pai-btn {
        		width: 100%;
    	}
}