/* =========================================
   تنسيقات صفحة الاستبيان المخصص (Survey Page)
   ========================================= */
.tanmiah-survey-form .form-group label {
	color: var(--primary-teal);
}

.tanmiah-survey-form input[type="text"],
.tanmiah-survey-form select,
.tanmiah-survey-form textarea {
	width: 100% !important;
	padding: 12px 18px !important;
	border: 1px solid rgba(6, 97, 101, 0.15) !important;
	background-color: #fdfdfd !important;
	border-radius: 8px !important;
	font-size: 15px !important;
	color: var(--text-dark) !important;
	transition: var(--transition-smooth) !important;
	outline: none !important;
}

.tanmiah-survey-form input[type="text"]:focus,
.tanmiah-survey-form select:focus,
.tanmiah-survey-form textarea:focus {
	border-color: var(--primary-teal) !important;
	background-color: #ffffff !important;
	box-shadow: 0 0 0 4px rgba(6, 97, 101, 0.08) !important;
}

/* بطاقات خيارات الاستبيان التفاعلية (Emoji & Options) */
.survey-option-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 15px;
	width: 100%;
}

.speed-cards {
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
}

.survey-option-card {
	cursor: pointer;
	position: relative;
	margin-bottom: 0 !important;
}

.survey-option-card input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}

.option-card-inner {
	background: #ffffff;
	border: 2px solid rgba(6, 97, 101, 0.1);
	border-radius: 12px;
	padding: 15px 10px;
	text-align: center;
	transition: var(--transition-smooth);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-shadow: var(--shadow-sm);
}

.option-card-inner .emoji-icon {
	font-size: 28px;
	transition: var(--transition-smooth);
}

.option-card-inner .option-label {
	font-size: 14px;
	font-weight: 700;
	color: var(--text-dark);
	transition: var(--transition-smooth);
}

/* حالة التحويم والضغط */
.survey-option-card:hover .option-card-inner {
	border-color: var(--primary-teal);
	transform: translateY(-2px);
	background-color: rgba(6, 97, 101, 0.02);
}

.survey-option-card input[type="radio"]:checked + .option-card-inner {
	border-color: var(--primary-teal);
	background-color: rgba(6, 97, 101, 0.06);
	box-shadow: 0 4px 15px rgba(6, 97, 101, 0.12);
}

.survey-option-card input[type="radio"]:checked + .option-card-inner .emoji-icon {
	transform: scale(1.2);
}

.survey-option-card input[type="radio"]:checked + .option-card-inner .option-label {
	color: var(--primary-teal);
}

/* البطاقات الخالية من الرموز التعبيرية */
.survey-option-card.no-emoji .option-card-inner {
	padding: 18px 15px;
	min-height: 60px;
}
.survey-option-cards:has(.no-emoji) {
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

/* تنسيق الوجوه التعبيرية على سطر واحد على الكمبيوتر والجوال */
.survey-option-cards.emoji-cards-grid {
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	grid-template-columns: none;
}

/* التجاوب مع شاشات الجوال لشبكة الوجوه التعبيرية */
@media (max-width: 768px) {
	.survey-option-cards.emoji-cards-grid {
		gap: 8px !important;
	}
	.survey-option-cards.emoji-cards-grid .option-card-inner {
		padding: 10px 5px !important;
		gap: 5px !important;
		border-radius: 8px !important;
	}
	.survey-option-cards.emoji-cards-grid .option-card-inner .emoji-icon {
		font-size: 22px !important;
	}
	.survey-option-cards.emoji-cards-grid .option-card-inner .option-label {
		font-size: 11px !important;
		white-space: nowrap !important;
	}
}

@media (max-width: 400px) {
	.survey-option-cards.emoji-cards-grid {
		gap: 5px !important;
	}
	.survey-option-cards.emoji-cards-grid .option-card-inner {
		padding: 6px 3px !important;
		gap: 3px !important;
	}
	.survey-option-cards.emoji-cards-grid .option-card-inner .emoji-icon {
		font-size: 18px !important;
	}
	.survey-option-cards.emoji-cards-grid .option-card-inner .option-label {
		font-size: 9px !important;
	}
}