/**
 * Frontend Styles for MCU Regis Plugin
 * Flowbite UI Design System & Multi-Theme Responsive Architecture
 * Brand Identity: MCU Pink (#DB2777), MCU Gold (#D4AF37 / #FEF08A)
 */

:root {
	--mcu-primary: #db2777;
	--mcu-primary-dark: #be185d;
	--mcu-primary-light: #fdf2f8;
	--mcu-gold: #fef08a;
	--mcu-gold-dark: #d4af37;
	--mcu-text-main: #0f172a;
	--mcu-text-muted: #64748b;
	--mcu-border: #e2e8f0;
	--mcu-bg-card: #ffffff;
	--mcu-flowbite-ring: rgba(219, 39, 119, 0.2);
}

/* ==================================================
   10 THEME PALETTES (FLOWBITE COMPATIBLE)
   ================================================== */
.theme-mcu-pink-gold {
	--mcu-primary: #db2777;
	--mcu-primary-dark: #be185d;
	--mcu-primary-light: #fdf2f8;
	--mcu-gold: #fef08a;
	--mcu-gold-dark: #d4af37;
	--mcu-flowbite-ring: rgba(219, 39, 119, 0.2);
}

.theme-royal-blue {
	--mcu-primary: #2563eb;
	--mcu-primary-dark: #1d4ed8;
	--mcu-primary-light: #eff6ff;
	--mcu-gold: #bfdbfe;
	--mcu-gold-dark: #60a5fa;
	--mcu-flowbite-ring: rgba(37, 99, 235, 0.2);
}

.theme-deep-purple {
	--mcu-primary: #7c3aed;
	--mcu-primary-dark: #6d28d9;
	--mcu-primary-light: #f5f3ff;
	--mcu-gold: #ddd6fe;
	--mcu-gold-dark: #a78bfa;
	--mcu-flowbite-ring: rgba(124, 58, 237, 0.2);
}

.theme-emerald-green {
	--mcu-primary: #059669;
	--mcu-primary-dark: #047857;
	--mcu-primary-light: #ecfdf5;
	--mcu-gold: #a7f3d0;
	--mcu-gold-dark: #34d399;
	--mcu-flowbite-ring: rgba(5, 150, 105, 0.2);
}

.theme-golden-amber {
	--mcu-primary: #d97706;
	--mcu-primary-dark: #b45309;
	--mcu-primary-light: #fffbeb;
	--mcu-gold: #fef3c7;
	--mcu-gold-dark: #f59e0b;
	--mcu-flowbite-ring: rgba(217, 119, 6, 0.2);
}

.theme-ruby-red {
	--mcu-primary: #e11d48;
	--mcu-primary-dark: #be123c;
	--mcu-primary-light: #fff1f2;
	--mcu-gold: #fecdd3;
	--mcu-gold-dark: #fb7185;
	--mcu-flowbite-ring: rgba(225, 29, 72, 0.2);
}

.theme-ocean-teal {
	--mcu-primary: #0d9488;
	--mcu-primary-dark: #0f766e;
	--mcu-primary-light: #f0fdfa;
	--mcu-gold: #99f6e4;
	--mcu-gold-dark: #2dd4bf;
	--mcu-flowbite-ring: rgba(13, 148, 136, 0.2);
}

.theme-berry-magenta {
	--mcu-primary: #c026d3;
	--mcu-primary-dark: #a21caf;
	--mcu-primary-light: #fdf4ff;
	--mcu-gold: #f5d0fe;
	--mcu-gold-dark: #e879f9;
	--mcu-flowbite-ring: rgba(192, 38, 211, 0.2);
}

.theme-midnight-slate {
	--mcu-primary: #334155;
	--mcu-primary-dark: #1e293b;
	--mcu-primary-light: #f8fafc;
	--mcu-gold: #e2e8f0;
	--mcu-gold-dark: #94a3b8;
	--mcu-flowbite-ring: rgba(51, 65, 85, 0.2);
}

.theme-coral-orange {
	--mcu-primary: #ea580c;
	--mcu-primary-dark: #c2410c;
	--mcu-primary-light: #fff7ed;
	--mcu-gold: #fed7aa;
	--mcu-gold-dark: #fb923c;
	--mcu-flowbite-ring: rgba(234, 88, 12, 0.2);
}

/* ==================================================
   MAIN CONTAINER & WRAPPER (FLOWBITE RESPONSIVE)
   ================================================== */
.mcu-regis-wrapper {
	font-family: 'Prompt', 'Sarabun', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--mcu-text-main);
	max-width: 1175px;
	margin: 20px auto 40px;
	padding: 0 16px;
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}

.mcu-regis-wrapper.is-standalone {
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.mcu-regis-body-inner {
	max-width: 1175px;
	margin: 0 auto;
	padding: 0 16px 40px;
	box-sizing: border-box;
}

/* ==================================================
   HEADER CARD (MATCHING MCU_SURVEY=1 STYLE)
   ================================================== */
.mcu-regis-header-card {
	background: linear-gradient(135deg, var(--mcu-primary-dark) 0%, var(--mcu-primary) 100%);
	color: #ffffff;
	border-radius: 16px;
	padding: 36px 32px;
	text-align: center;
	box-shadow: 0 10px 25px -5px rgba(219, 39, 119, 0.3), 0 8px 10px -6px rgba(219, 39, 119, 0.2);
	margin-bottom: 24px;
	position: relative;
	overflow: hidden;
}

.is-standalone .mcu-regis-header-card {
	border-radius: 0 !important;
	margin: 0 0 32px 0 !important;
	padding: 48px 20px 36px !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

.mcu-regis-header-card .mcu-survey-header-inner {
	max-width: 1175px;
	margin: 0 auto;
	box-sizing: border-box;
}

.mcu-regis-header-card .mcu-survey-badge,
.mcu-header-badge-top {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	padding: 4px 16px;
	border-radius: 9999px;
	font-size: 13px;
	font-weight: 700;
	margin-bottom: 14px;
	letter-spacing: 0.5px;
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.mcu-regis-header-card .mcu-event-title,
.mcu-regis-header-card .mcu-survey-title {
	color: #ffffff !important;
	font-family: 'Prompt', 'Sarabun', sans-serif;
	font-size: 25px;
	font-weight: 800;
	margin: 0 0 10px 0;
	line-height: 1.35;
	text-align: center;
}

.mcu-regis-header-card .mcu-event-desc,
.mcu-regis-header-card .mcu-survey-subtitle {
	color: rgba(255, 255, 255, 0.94);
	font-size: 15px;
	margin: 0 0 22px 0;
	line-height: 1.6;
	text-align: center;
	max-width: 850px;
	margin-left: auto;
	margin-right: auto;
}

/* Info Bar (Matching mcu_survey=1 style) */
.mcu-regis-header-card .mcu-survey-info-bar {
	display: flex;
	justify-content: center;
	gap: 10px 14px;
	flex-wrap: wrap;
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.95);
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.mcu-regis-header-card .mcu-survey-info-bar span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	padding: 4px 12px;
	border-radius: 9999px;
	font-size: 13px;
	white-space: nowrap;
}

@media (max-width: 768px) {
	/* เมื่อ Responsive: จัดกลุ่มข้อมูล 4 ตัวนี้ให้แสดงจบเป๊ะใน 2 บรรทัด (2 คอลัมน์ x 2 แถว) */
	.mcu-regis-header-card .mcu-survey-info-bar {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		gap: 8px 10px !important;
		max-width: 540px;
		margin: 0 auto;
		text-align: left;
	}

	.mcu-regis-header-card .mcu-survey-info-bar span {
		display: flex !important;
		align-items: center;
		justify-content: flex-start;
		font-size: 12px !important;
		padding: 5px 10px !important;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

.mcu-meta-item {
	background: rgba(255, 255, 255, 0.12);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 12px;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	gap: 14px;
	transition: transform 0.2s ease;
}

.mcu-meta-item:hover {
	transform: translateY(-2px);
	background: rgba(255, 255, 255, 0.18);
}

.mcu-meta-icon {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: rgba(255, 255, 255, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	flex-shrink: 0;
}

.mcu-meta-content {
	display: flex;
	flex-direction: column;
	text-align: left;
}

.mcu-meta-label {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.8);
	font-weight: 500;
}

.mcu-meta-val {
	font-size: 14px;
	color: #ffffff;
	font-weight: 700;
}

/* Minimal Sleek Countdown Pill */
.mcu-countdown-wrapper {
	display: flex;
	justify-content: center;
}

.mcu-countdown-box.minimal-cd {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 9999px;
	padding: 6px 18px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
	color: #ffffff;
	max-width: 100%;
}

.countdown-mini-label {
	font-size: 12.5px;
	font-weight: 700;
	color: #fef08a;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	white-space: nowrap;
}

.mcu-countdown-timer {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.timer-unit-inline {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.9);
	background: rgba(255, 255, 255, 0.15);
	padding: 2px 8px;
	border-radius: 6px;
	white-space: nowrap;
}

.timer-unit-inline strong {
	font-family: 'Prompt', monospace;
	font-size: 14.5px;
	font-weight: 800;
	color: #ffffff;
}

/* ==================================================
   FLOWBITE NAVIGATION TABS (APP SEGMENTED SWITCH)
   ================================================== */
.mcu-regis-tabs-nav {
	display: inline-flex;
	background: #e2e8f0;
	padding: 4px;
	border-radius: 14px;
	margin: 24px 0 20px;
	gap: 4px;
	max-width: 100%;
	box-sizing: border-box;
	border: none;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	flex-wrap: nowrap;
}

.mcu-tab-btn {
	background: transparent;
	border: none;
	padding: 9px 18px;
	font-family: 'Prompt', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: #64748b;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	transition: all 0.2s ease;
	border-radius: 10px;
	margin-bottom: 0;
	white-space: nowrap;
	flex-shrink: 0;
}

.mcu-tab-btn:hover {
	color: #0f172a;
	background: rgba(255, 255, 255, 0.5);
}

.mcu-tab-btn.active {
	color: var(--mcu-primary);
	background: #ffffff;
	border: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.mcu-tab-badge {
	display: inline-block;
	background: rgba(100, 116, 139, 0.15);
	color: #475569;
	font-size: 11.5px;
	font-weight: 800;
	padding: 2px 8px;
	border-radius: 9999px;
	transition: all 0.2s ease;
}

.mcu-tab-btn.active .mcu-tab-badge {
	background: var(--mcu-primary-light);
	color: var(--mcu-primary);
}

.mcu-tab-pane {
	display: none;
}

.mcu-tab-pane.active {
	display: block;
	animation: mcuFadeIn 0.25s ease-in-out;
}

@keyframes mcuFadeIn {
	from { opacity: 0; transform: translateY(5px); }
	to { opacity: 1; transform: translateY(0); }
}

/* ==================================================
   FLOWBITE FORM CARD & INPUTS
   ================================================== */
.mcu-regis-form-card {
	background: #ffffff;
	border: 1px solid var(--mcu-border);
	border-radius: 16px;
	padding: 36px 32px;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
}

.is-standalone .mcu-regis-form-card {
	border-radius: 16px;
}

/* Quota Web App Box */
.mcu-quota-app-box {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 14px 18px;
	margin-bottom: 24px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

.quota-meta-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 13px;
	color: #475569;
	margin-bottom: 8px;
	flex-wrap: wrap;
	gap: 6px;
}

.quota-lbl {
	font-weight: 700;
	color: #0f172a;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.quota-stats strong {
	color: var(--mcu-primary);
}

.quota-progress-track {
	height: 8px;
	background: #e2e8f0;
	border-radius: 9999px;
	overflow: hidden;
}

.quota-progress-bar {
	height: 100%;
	background: linear-gradient(90deg, var(--mcu-primary) 0%, var(--mcu-gold-dark) 100%);
	border-radius: 9999px;
	transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.mcu-form-section-title {
	font-family: 'Prompt', sans-serif;
	font-size: 17px;
	font-weight: 700;
	color: var(--mcu-primary);
	border-bottom: 2px solid var(--mcu-primary-light);
	padding-bottom: 10px;
	margin-bottom: 24px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.mcu-form-row {
	display: flex;
	gap: 18px;
	margin-bottom: 20px;
}

.mcu-form-dynamic-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 20px;
	margin-bottom: 24px;
}

.mcu-col-full {
	grid-column: span 6;
}

.mcu-col-two-thirds {
	grid-column: span 4;
}

.mcu-col-half {
	grid-column: span 3;
}

.mcu-col-third {
	grid-column: span 2;
}

.mcu-radio-list,
.mcu-checkbox-list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 18px;
	margin-top: 6px;
}

.mcu-radio-label,
.mcu-checkbox-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: #334155;
	cursor: pointer;
	user-select: none;
}

.mcu-radio-label input[type="radio"],
.mcu-checkbox-label input[type="checkbox"] {
	accent-color: var(--mcu-primary);
	width: 17px;
	height: 17px;
	margin: 0;
	cursor: pointer;
}

.mcu-form-group {
	display: flex;
	flex-direction: column;
}

.mcu-label {
	font-size: 13.5px;
	font-weight: 700;
	color: #334155;
	margin-bottom: 6px;
}

.mcu-label .req {
	color: #e11d48;
}

.mcu-form-control {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #cbd5e1;
	border-radius: 8px;
	padding: 9px 14px;
	font-size: 14.5px;
	line-height: 1.5;
	min-height: 44px;
	height: auto;
	font-family: 'Prompt', 'Sarabun', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	transition: all 0.2s ease-in-out;
	background-color: #ffffff;
	color: #0f172a;
}

select.mcu-form-control {
	height: 44px;
	padding-right: 32px;
	background-color: #ffffff;
	cursor: pointer;
	line-height: normal;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 16px;
}

select.mcu-form-control option {
	padding: 8px 12px;
	font-size: 14.5px;
	color: #0f172a;
	background: #ffffff;
	line-height: 1.5;
}

select.mcu-form-control optgroup {
	font-weight: 700;
	color: var(--mcu-primary);
	background: #fdf2f8;
	padding: 6px 10px;
}

.mcu-custom-other-input {
	border-color: #f472b6 !important;
	background-color: #fdf2f8 !important;
	box-shadow: 0 0 0 2px rgba(219, 39, 119, 0.15) !important;
}

.mcu-form-control:focus {
	border-color: var(--mcu-primary);
	background-color: #ffffff;
	outline: none;
	box-shadow: 0 0 0 3px var(--mcu-flowbite-ring);
}

.mcu-form-hint {
	font-size: 12px;
	color: #64748b;
	margin-top: 4px;
	display: flex;
	align-items: center;
	gap: 4px;
}

/* PDPA Consent */
.mcu-consent-group {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 16px 18px;
	margin: 24px 0;
}

.mcu-checkbox-label {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 13.5px;
	color: #475569;
	cursor: pointer;
	line-height: 1.55;
}

.mcu-checkbox-label input {
	margin-top: 3px;
	accent-color: var(--mcu-primary);
	width: 18px;
	height: 18px;
}

/* Submit Bar */
.mcu-submit-bar {
	text-align: center;
	margin-top: 12px;
}

.mcu-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: 'Prompt', 'Sarabun', sans-serif;
	font-weight: 700;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	transition: all 0.2s ease;
	text-decoration: none;
}

.mcu-btn-submit {
	background: linear-gradient(135deg, var(--mcu-primary-dark) 0%, var(--mcu-primary) 100%);
	color: #ffffff;
	font-size: 17px;
	padding: 15px 44px;
	width: 100%;
	border-radius: 10px;
	box-shadow: 0 4px 14px rgba(219, 39, 119, 0.3);
}

.mcu-btn-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(219, 39, 119, 0.4);
}

.mcu-btn-submit:disabled {
	opacity: 0.65;
	cursor: not-allowed;
	transform: none;
}

.mcu-feedback-box {
	margin-top: 20px;
	padding: 14px 18px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
}

.mcu-feedback-box.is-error {
	background: #fee2e2;
	color: #991b1b;
	border: 1px solid #fca5a5;
}

.mcu-feedback-box.is-success {
	background: #dcfce7;
	color: #166534;
	border: 1px solid #86efac;
}

/* ==================================================
   FLOWBITE PARTICIPANTS CARD & TABLE (TAB 2)
   ================================================== */
.mcu-regis-participants-card {
	background: #ffffff;
	border-radius: 16px;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
	border: 1px solid #e2e8f0;
	padding: 32px;
	box-sizing: border-box;
}

.mcu-part-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 22px;
	padding-bottom: 18px;
	border-bottom: 1px solid #f1f5f9;
}

.mcu-part-title {
	font-family: 'Prompt', sans-serif;
	font-size: 19px;
	font-weight: 700;
	margin: 0 0 4px;
	color: #1e293b;
	display: flex;
	align-items: center;
	gap: 8px;
}

.mcu-part-subtitle {
	font-size: 13px;
	color: #64748b;
}

.mcu-part-search-box {
	display: flex;
	align-items: center;
}

.mcu-search-input-wrap {
	position: relative;
	width: 320px;
	max-width: 100%;
}

.mcu-search-input-wrap .search-icon {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: #94a3b8;
	pointer-events: none;
	display: flex;
	align-items: center;
}

.mcu-search-input-wrap .search-input {
	padding-left: 38px;
	border-radius: 9999px;
	background-color: #f8fafc;
	font-size: 13.5px;
	height: 42px;
	border: 1px solid #cbd5e1;
}

.mcu-front-part-table th {
	background-color: #f8fafc;
	color: #475569;
	font-family: 'Prompt', sans-serif;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	padding: 14px 16px;
	border-bottom: 1px solid #e2e8f0;
}

.mcu-front-part-table td {
	padding: 14px 16px;
	border-bottom: 1px solid #f1f5f9;
	font-size: 14px;
	vertical-align: middle;
}

.mcu-front-part-table tr:hover td {
	background-color: #fdfbf7;
}

.mcu-part-footer-pdpa {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: #94a3b8;
	margin-top: 20px;
	padding-top: 14px;
	border-top: 1px dashed #e2e8f0;
}

/* Closed Banner */
.mcu-closed-banner {
	text-align: center;
	padding: 45px 20px;
}

.closed-icon {
	margin-bottom: 16px;
	display: flex;
	justify-content: center;
}

.closed-title {
	font-size: 22px;
	font-weight: 800;
	color: #b91c1c;
	margin: 0 0 10px;
}

.closed-subtitle {
	font-size: 14.5px;
	color: #64748b;
	max-width: 520px;
	margin: 0 auto;
	line-height: 1.6;
}

/* Footer Credits */
.mcu-regis-footer-credits {
	text-align: center;
	padding: 28px 15px 35px;
	font-size: 13px;
	color: #64748b;
	line-height: 1.6;
}

.mcu-regis-footer-credits a {
	color: #06c755;
	text-decoration: none;
	font-weight: 700;
}

/* ==================================================
   FLOWBITE SUCCESS MODAL POPUP
   ================================================== */
.mcu-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(15, 23, 42, 0.7);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.mcu-modal-dialog {
	background: #ffffff;
	border-radius: 20px;
	max-width: 480px;
	width: 100%;
	overflow: hidden;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	animation: mcuModalPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
	border: 1px solid rgba(255, 255, 255, 0.2);
}

@keyframes mcuModalPop {
	from { opacity: 0; transform: scale(0.92); }
	to { opacity: 1; transform: scale(1); }
}

.mcu-modal-header {
	background: linear-gradient(135deg, var(--mcu-primary-dark) 0%, var(--mcu-primary) 100%);
	color: #ffffff;
	padding: 26px 20px;
	text-align: center;
}

.modal-success-icon {
	margin-bottom: 8px;
	display: flex;
	justify-content: center;
}

.modal-title {
	margin: 0;
	font-size: 20px;
	font-weight: 800;
	color: #ffffff;
}

.modal-subtitle {
	margin: 4px 0 0;
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.92);
}

.mcu-modal-body {
	padding: 26px 26px 22px;
}

.mcu-modal-code-box {
	background: var(--mcu-primary-light);
	border: 2px dashed var(--mcu-primary);
	border-radius: 12px;
	padding: 16px;
	text-align: center;
	margin-bottom: 20px;
}

.mcu-modal-code-box .code-lbl {
	display: block;
	font-size: 12px;
	font-weight: 700;
	color: var(--mcu-primary-dark);
}

.mcu-modal-code-box .code-val {
	font-size: 24px;
	font-weight: 800;
	color: var(--mcu-primary);
	font-family: monospace;
	letter-spacing: 1px;
}

.mcu-modal-info-list {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	padding: 14px 16px;
	font-size: 13.5px;
	margin-bottom: 18px;
}

.mcu-modal-info-list .info-row {
	margin-bottom: 8px;
}

.mcu-modal-info-list .info-row:last-child {
	margin-bottom: 0;
}

.mcu-modal-info-list .lbl {
	color: #64748b;
	font-weight: 600;
}

.mcu-modal-email-note {
	font-size: 13px;
	color: #059669;
	background: #ecfdf5;
	padding: 12px;
	border-radius: 8px;
	text-align: center;
	margin-bottom: 20px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.mcu-modal-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.mcu-btn-cal {
	background: var(--mcu-primary);
	color: #ffffff;
	padding: 12px;
	font-size: 14px;
	border-radius: 10px;
}

.mcu-btn-cal:hover {
	background: var(--mcu-primary-dark);
}

.mcu-btn-close-modal {
	background: #e2e8f0;
	color: #334155;
	padding: 12px;
	font-size: 14px;
	border-radius: 10px;
}

.mcu-btn-close-modal:hover {
	background: #cbd5e1;
}

/* ==================================================
   EXECUTIVE DASHBOARD (FLOWBITE PREVIEW & STANDALONE)
   ================================================== */
.mcu-exec-dashboard-wrap {
	font-family: 'Prompt', 'Sarabun', sans-serif;
	color: #0f172a;
}

.mcu-exec-header {
	background: linear-gradient(135deg, var(--mcu-primary-dark) 0%, var(--mcu-primary) 100%);
	color: #ffffff;
	padding: 36px 32px 30px;
	border-radius: 20px;
	margin-bottom: 28px;
	box-shadow: 0 10px 30px -5px rgba(219, 39, 119, 0.25);
	position: relative;
	overflow: hidden;
}

.mcu-exec-header::before {
	content: '';
	position: absolute;
	top: -60px;
	right: -60px;
	width: 240px;
	height: 240px;
	background: radial-gradient(circle, rgba(254, 240, 138, 0.25) 0%, rgba(255, 255, 255, 0) 70%);
	border-radius: 50%;
	pointer-events: none;
}

.is-standalone .mcu-exec-header {
	border-radius: 0 !important;
	width: 100% !important;
	margin: 0 0 32px 0 !important;
	padding: 48px 20px 36px !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
}

.mcu-exec-header-inner {
	max-width: 1175px;
	margin: 0 auto;
	padding: 0 16px;
	box-sizing: border-box;
}

.mcu-exec-body-inner {
	max-width: 1175px;
	margin: 0 auto;
	padding: 0 16px 40px;
	box-sizing: border-box;
}

.exec-title {
	margin: 0 0 14px;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.35;
	color: #ffffff;
}

/* Action Bar */
.mcu-exec-action-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	padding: 14px 22px;
	margin-bottom: 24px;
	flex-wrap: wrap;
	gap: 12px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.live-badge {
	font-weight: 700;
	color: #059669;
	font-size: 13.5px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.live-pulse-dot {
	display: inline-block;
	width: 9px;
	height: 9px;
	background: #10b981;
	border-radius: 50%;
	animation: mcuPulseGreen 1.5s infinite ease-in-out;
}

@keyframes mcuPulseGreen {
	0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
	70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
	100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.action-right {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

/* Green Excel Button */
.mcu-btn-green-excel {
	background: #16a34a !important;
	color: #ffffff !important;
	border: 1px solid #15803d !important;
	padding: 9px 18px !important;
	font-family: 'Prompt', sans-serif !important;
	font-size: 13.5px !important;
	font-weight: 700 !important;
	border-radius: 8px !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	text-decoration: none !important;
	box-shadow: 0 2px 6px rgba(22, 163, 74, 0.25) !important;
	transition: all 0.2s ease !important;
	cursor: pointer !important;
}

.mcu-btn-green-excel:hover {
	background: #15803d !important;
	transform: translateY(-1px) !important;
	box-shadow: 0 4px 12px rgba(22, 163, 74, 0.35) !important;
	color: #ffffff !important;
}

.mcu-btn-print {
	background: #f1f5f9;
	color: #334155;
	border: 1px solid #cbd5e1;
	padding: 9px 18px;
	font-family: 'Prompt', sans-serif;
	font-size: 13.5px;
	font-weight: 600;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	transition: all 0.15s ease;
}

.mcu-btn-print:hover {
	background: #ffffff;
	border-color: #94a3b8;
	color: #0f172a;
}

/* KPI Cards Grid */
.mcu-kpi-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	margin-bottom: 24px;
}

@media (max-width: 1024px) {
	.mcu-kpi-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 580px) {
	.mcu-kpi-grid {
		grid-template-columns: 1fr;
	}
}

.mcu-kpi-card {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	padding: 20px 22px;
	display: flex;
	align-items: center;
	gap: 16px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	transition: all 0.2s ease-in-out;
}

.mcu-kpi-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
	border-color: #cbd5e1;
}

.mcu-kpi-card .kpi-icon {
	width: 52px;
	height: 52px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.mcu-kpi-card.card-pink .kpi-icon { background: #fdf2f8; color: #db2777; }
.mcu-kpi-card.card-gold .kpi-icon { background: #fefce8; color: #ca8a04; }
.mcu-kpi-card.card-blue .kpi-icon { background: #eff6ff; color: #2563eb; }
.mcu-kpi-card.card-green .kpi-icon { background: #ecfdf5; color: #059669; }

.mcu-kpi-card .kpi-num {
	font-size: 26px;
	font-weight: 800;
	color: #0f172a;
	line-height: 1.15;
	margin-bottom: 3px;
}

.mcu-kpi-card .kpi-label {
	font-size: 12.5px;
	color: #64748b;
	font-weight: 600;
}

/* Charts Grid */
.mcu-charts-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
	margin-bottom: 24px;
}

@media (max-width: 900px) {
	.mcu-charts-grid {
		grid-template-columns: 1fr;
	}
}

.mcu-chart-card {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	padding: 22px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.chart-title {
	font-size: 15px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 16px;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Table Card */
.mcu-table-card {
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 16px;
	padding: 22px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	margin-bottom: 24px;
}

.table-card-title {
	font-size: 15px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 16px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.mcu-data-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
}

.mcu-data-table th {
	background: #f8fafc;
	padding: 12px 16px;
	text-align: left;
	border-bottom: 1px solid #e2e8f0;
	color: #475569;
	font-weight: 700;
}

.mcu-data-table td {
	padding: 12px 16px;
	border-bottom: 1px solid #f1f5f9;
}

.mcu-data-table tr:hover td {
	background: #f8fafc;
}

.reg-badge {
	color: var(--mcu-primary);
	font-family: monospace;
	font-weight: 700;
}

.role-badge {
	background: #f1f5f9;
	padding: 3px 10px;
	border-radius: 9999px;
	font-size: 12px;
	font-weight: 600;
	color: #475569;
}

.mcu-exec-footer {
	text-align: center;
	padding: 24px 15px 30px;
	font-size: 12.5px;
	color: #64748b;
	line-height: 1.6;
}

.mcu-exec-footer a {
	color: #06c755;
	text-decoration: none;
	font-weight: 700;
}

/* Search Card */
.mcu-regis-search-card {
	background: #ffffff;
	border: 1px solid var(--mcu-border);
	border-radius: 16px;
	padding: 32px;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
	max-width: 620px;
	margin: 24px auto;
}

.mcu-search-title {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 800;
	color: #0f172a;
	display: flex;
	align-items: center;
	gap: 8px;
}

.mcu-search-desc {
	margin: 0 0 22px;
	font-size: 14px;
	color: #64748b;
}

.mcu-search-input-group {
	display: flex;
	gap: 10px;
}

.mcu-search-item {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 12px;
}

.mcu-search-item .reg-tag {
	background: #fdf2f8;
	color: var(--mcu-primary);
	padding: 3px 10px;
	border-radius: 9999px;
	font-weight: 800;
	font-family: monospace;
	font-size: 12px;
	margin-right: 8px;
}

/* ==================================================
   ADVANCED RESPONSIVE SYSTEM (MOBILE WEB APP FEEL)
   ================================================== */
@media (max-width: 1024px) {
	.mcu-form-dynamic-grid {
		grid-template-columns: repeat(6, 1fr);
		gap: 16px;
	}
	.mcu-col-third {
		grid-column: span 3; /* 2 columns on tablet */
	}
	.mcu-kpi-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 14px;
	}
}

@media (max-width: 768px) {
	.mcu-regis-wrapper {
		margin: 10px auto 30px;
		padding: 0 12px;
	}
	.mcu-regis-body-inner,
	.mcu-exec-body-inner {
		padding: 0 12px 30px;
	}

	/* Full Bleed Header on Mobile */
	.is-standalone .mcu-regis-header-card,
	.is-standalone .mcu-exec-header {
		padding: 32px 16px 24px !important;
		margin-bottom: 20px !important;
	}

	.mcu-regis-header-card .mcu-event-title,
	.mcu-regis-header-card .mcu-survey-title,
	.exec-title {
		font-size: 20px !important;
		line-height: 1.35;
		margin-bottom: 12px;
	}

	.mcu-regis-header-card .mcu-survey-info-bar,
	.exec-meta {
		gap: 8px;
		padding-top: 14px;
	}

	.mcu-regis-header-card .mcu-survey-info-bar span,
	.exec-meta span {
		font-size: 12px;
		padding: 3px 10px;
		gap: 4px;
	}

	/* App Segmented Switch on Mobile */
	.mcu-regis-tabs-nav {
		width: 100%;
		display: grid;
		grid-template-columns: 1fr 1fr;
		padding: 4px;
		margin: 16px 0 18px;
		border-radius: 12px;
	}

	.mcu-tab-btn {
		width: 100%;
		padding: 10px 8px;
		font-size: 13px;
		gap: 5px;
		border-radius: 8px;
		white-space: nowrap;
		text-align: center;
	}

	.mcu-tab-badge {
		font-size: 10.5px;
		padding: 1px 6px;
	}

	/* Form Card on Mobile */
	.mcu-regis-form-card,
	.mcu-regis-participants-card,
	.mcu-table-card,
	.mcu-chart-card {
		padding: 20px 16px;
		border-radius: 14px;
	}

	.mcu-form-dynamic-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}
	.mcu-col-half,
	.mcu-col-full,
	.mcu-col-third,
	.mcu-col-two-thirds {
		grid-column: span 1 !important;
	}

	.mcu-form-control {
		height: 44px;
		font-size: 14.5px;
		padding: 8px 12px;
	}

	textarea.mcu-form-control {
		height: auto;
	}

	/* KPI Cards on Mobile (Clean 2x2 App Grid) */
	.mcu-kpi-grid {
		grid-template-columns: repeat(2, 1fr) !important;
		gap: 10px;
	}

	.mcu-kpi-card {
		padding: 14px 12px;
		gap: 10px;
		border-radius: 12px;
	}

	.mcu-kpi-card .kpi-icon {
		width: 40px;
		height: 40px;
		border-radius: 10px;
	}

	.mcu-kpi-card .kpi-num {
		font-size: 20px;
	}

	.mcu-kpi-card .kpi-label {
		font-size: 11px;
	}

	/* Action Bar on Mobile */
	.mcu-exec-action-bar {
		padding: 14px 16px;
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.action-right {
		width: 100%;
		flex-direction: column;
		gap: 8px;
	}

	.mcu-btn-green-excel,
	.mcu-btn-print {
		width: 100%;
		justify-content: center;
		padding: 11px 16px !important;
	}

	/* Table Horizontal Swipe */
	.mcu-table-responsive {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.mcu-data-table th,
	.mcu-data-table td {
		padding: 10px 12px;
		font-size: 12.5px;
		white-space: nowrap;
	}

	/* Minimal Countdown Pill on Mobile */
	.mcu-countdown-box.minimal-cd {
		padding: 5px 12px;
		gap: 8px;
		flex-wrap: wrap;
		justify-content: center;
	}

	.countdown-mini-label {
		font-size: 11.5px;
	}

	.timer-unit-inline {
		font-size: 11px;
		padding: 2px 6px;
	}

	.timer-unit-inline strong {
		font-size: 13px;
	}

	.mcu-tab-btn {
		font-size: 13px;
		padding: 8px 12px;
		gap: 5px;
	}
}

@media (max-width: 420px) {
	.mcu-kpi-grid {
		grid-template-columns: 1fr !important;
	}
	.mcu-tab-btn {
		font-size: 11.5px;
		padding: 7px 8px;
		gap: 4px;
	}
	.mcu-tab-badge {
		font-size: 10.5px;
		padding: 1px 6px;
	}
}

/* Print Mode */
@media print {
	.mcu-exec-action-bar, .mcu-exec-footer, #wpadminbar, header, footer {
		display: none !important;
	}
	.mcu-exec-dashboard-wrap {
		padding: 0;
	}
}