/* JCA — Interactive shortcodes (Blocco 6) */

.jca-int {
	font-family: inherit;
	color: inherit;
}

/* ---------- Bottoni (next_screen, submit_answer) ---------- */

.jca-int-next,
.jca-int-answer {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 8px;
	margin: 12px 0;
}

.jca-int-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	width: 100% !important;
	min-height: 52px !important;
	padding: 14px 22px !important;
	background: #1d2327 !important;
	color: #fff !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	font-family: inherit !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-decoration: none !important;
	border: 0 !important;
	border-radius: 12px !important;
	box-shadow: none !important;
	cursor: pointer !important;
	box-sizing: border-box !important;
	transition: background 0.15s ease, opacity 0.15s ease, transform 0.1s ease !important;
}

.jca-int-btn:hover {
	background: #2c3338 !important;
}

.jca-int-btn:focus-visible {
	outline: 0 !important;
	box-shadow: 0 0 0 3px rgba(0, 181, 196, 0.4) !important;
}

.jca-int-btn:active {
	transform: scale(0.98) !important;
}

.jca-int-btn:disabled,
.jca-int-btn.is-loading {
	opacity: 0.6 !important;
	cursor: progress !important;
}

/*
 * Variants per profilo (OPT-IN, disabilitate di default).
 * Nel progetto JA Compass gli archetipi sono nascosti all'utente.
 * Se serve visualizzare il colore aggiungi class="jca-show-profile" allo shortcode.
 */
.jca-int-btn.jca-show-profile.jca-int-btn-profile-blue   { background: var(--jca-color-blue,   #1F5BA6) !important; }
.jca-int-btn.jca-show-profile.jca-int-btn-profile-yellow { background: var(--jca-color-yellow, #F2C94C) !important; color: #1d2327 !important; }
.jca-int-btn.jca-show-profile.jca-int-btn-profile-red    { background: var(--jca-color-red,    #C93A40) !important; }
.jca-int-btn.jca-show-profile.jca-int-btn-profile-green  { background: var(--jca-color-green,  #2E8B57) !important; }

.jca-int-btn.jca-show-profile.jca-int-btn-profile-blue:hover   { background: #18487F !important; }
.jca-int-btn.jca-show-profile.jca-int-btn-profile-yellow:hover { background: #E5B83A !important; }
.jca-int-btn.jca-show-profile.jca-int-btn-profile-red:hover    { background: #A02F34 !important; }
.jca-int-btn.jca-show-profile.jca-int-btn-profile-green:hover  { background: #24714A !important; }

/* Feedback inline sotto il bottone */
.jca-int-feedback {
	font-size: 13px;
	min-height: 18px;
	text-align: center;
	line-height: 1.3;
}
.jca-int-feedback[data-state="error"] { color: #b32d2e; }
.jca-int-feedback[data-state="ok"]    { color: #008a20; }
.jca-int-feedback[data-state="warn"]  { color: #8a6700; }

/* ---------- Textarea riflessione ---------- */

.jca-int-reflection {
	margin: 16px 0;
}

.jca-int-refl-label {
	display: block;
	font-size: 14px;
	font-weight: 500;
	margin-bottom: 8px;
	color: inherit;
}

.jca-int-refl-textarea {
	width: 100%;
	font-family: inherit;
	font-size: 16px;          /* ≥16px evita zoom iOS */
	line-height: 1.5;
	padding: 14px 16px;
	border: 1px solid #d0d0d0;
	border-radius: 12px;
	background: #fff;
	color: inherit;
	resize: vertical;
	min-height: 120px;
	box-sizing: border-box;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.jca-int-refl-textarea:focus {
	outline: 0;
	border-color: var(--jca-accent, #00B5C4);
	box-shadow: 0 0 0 3px rgba(0, 181, 196, 0.18);
}

.jca-int-refl-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
	font-size: 12px;
	opacity: 0.75;
}

.jca-int-refl-count {
	flex: 0 0 auto;
}

.jca-int-refl-status {
	flex: 1 1 auto;
	text-align: right;
}
.jca-int-refl-status[data-state="saving"] { opacity: 0.6; }
.jca-int-refl-status[data-state="ok"]     { color: #008a20; }
.jca-int-refl-status[data-state="error"]  { color: #b32d2e; }