/**
 * Bangla & English Typing Tutor - Frontend Styles (Fixed)
 */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Bengali:wght@400;500;700&family=Noto+Sans:wght@400;500;700&display=swap');

@font-face {
	font-family: 'SolaimanLipi';
	src: url('../fonts/SolaimanLipi.woff2') format('woff2'),
		url('../fonts/SolaimanLipi.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Kalpurush';
	src: url('../fonts/Kalpurush.woff2') format('woff2'),
		url('../fonts/Kalpurush.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/* ===== কন্টেইনার ===== */
.btt-container {
	max-width: 900px;
	margin: 30px auto;
	padding: 25px;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 2px 18px rgba(0, 0, 0, 0.08);
	font-family: 'Noto Sans', sans-serif;
	box-sizing: border-box;
	transition: max-width 0.15s ease;
}

/*
 * টাইপিং স্ক্রিন চালু থাকা অবস্থায় কন্টেইনারের width বাড়িয়ে দেওয়া হয় (JS এই
 * ক্লাসটি toggle করে), যাতে কন্টেন্ট বক্স বেশি width ব্যবহার করতে পারে এবং
 * স্বাভাবিক (ডিফল্ট) ফন্ট সাইজেই পুরো টেক্সট এক স্ক্রিনে আঁটানো যায়।
 */
.btt-container.btt-container--typing {
	max-width: 98vw;
}

.btt-container * {
	box-sizing: border-box;
}

.btt-heading {
	text-align: center;
	margin-bottom: 20px;
	color: #1d2327;
	font-weight: 700;
}

/* ===== লগইন নোটিশ ===== */
.btt-login-notice {
	max-width: 600px;
	margin: 40px auto;
	padding: 30px;
	text-align: center;
	background: #fef3f2;
	border: 1px solid #f3c6c2;
	border-radius: 10px;
}

.btt-login-notice p {
	font-family: 'SolaimanLipi', 'Noto Sans Bengali', sans-serif;
	font-size: 18px;
	margin-bottom: 15px;
	color: #6b1d14;
}

.btt-login-btn {
	display: inline-block;
	padding: 10px 25px;
	background: #2271b1;
	color: #fff;
	text-decoration: none;
	border-radius: 6px;
	font-weight: 600;
	transition: background 0.2s ease;
}

.btt-login-btn:hover {
	background: #135e96;
	color: #fff;
}

/* ===== এক্সাম সিলেকশন ===== */
.btt-exam-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 18px;
}

.btt-exam-card {
	border: 1px solid #e2e4e7;
	border-radius: 10px;
	padding: 18px;
	background: #fafbfc;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.btt-exam-card:hover {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
}

.btt-exam-card h3 {
	margin: 0 0 8px;
	font-family: 'SolaimanLipi', 'Noto Sans Bengali', sans-serif;
	color: #1d2327;
}

.btt-exam-card p {
	font-size: 13px;
	color: #646970;
	margin-bottom: 14px;
}

.btt-lang-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.btt-no-exam {
	text-align: center;
	font-family: 'SolaimanLipi', 'Noto Sans Bengali', sans-serif;
	font-size: 16px;
	color: #646970;
	padding: 30px;
}

/* ===== বাটন ===== */
.btt-btn {
	display: inline-block;
	padding: 10px 22px;
	background: #2271b1;
	color: #fff;
	border: none;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
	transition: background 0.2s ease;
}

.btt-btn:hover {
	background: #135e96;
}

.btt-btn-secondary {
	background: #d63638;
}

.btt-btn-secondary:hover {
	background: #a82a2c;
}

/* ===== টাইপিং স্ক্রিন — FIXED LAYOUT ===== */

/*
 * টাইপিং স্ক্রিনে Flexbox column ব্যবহার করা হয়েছে যেন
 * content box ও typing box উভয়ই সবসময় দৃশ্যমান থাকে।
 *
 * মূল সমাধান: পুরো স্ক্রিনের height ভিউপোর্ট-ভিত্তিক (vh) সর্বোচ্চ সীমার
 * মধ্যে বেঁধে দেওয়া হয়েছে এবং content box কে flex: 1 1 auto + নিজস্ব
 * min-height/max-height দেওয়া হয়েছে যাতে কন্টেন্ট যত লম্বাই হোক,
 * typing box এবং action বাটন সবসময় স্ক্রিনে দৃশ্যমান থাকে (নিচে হারিয়ে যায় না)।
 */
#btt-typing-screen {
	display: flex;
	flex-direction: column;
	max-height: calc(100vh - 60px);
	/* প্রগ্রেসিভ এনহান্সমেন্ট: মোবাইল ব্রাউজারের ঠিকানা বার ইত্যাদির কারণে
	   vh ইউনিট প্রকৃত visible এলাকার চেয়ে বড় হিসাব দিতে পারে। dvh
	   (dynamic viewport height) সাপোর্ট থাকা ব্রাউজারে এটি বেশি নির্ভুল।
	   এটি শুধু JS রান হওয়ার আগ পর্যন্ত একটি ফলব্যাক — আসল height JS দিয়ে
	   সঠিকভাবে গণনা করে বসানো হয় (script.js এর layoutTypingScreen())। */
	max-height: calc(100dvh - 60px);
	overflow: hidden;
}

.btt-status-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 18px;
	padding: 12px 18px;
	background: #f0f6fc;
	border-radius: 8px;
	flex-shrink: 0;
}

.btt-timer-box {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.btt-label {
	font-size: 12px;
	color: #646970;
}

.btt-timer {
	font-size: 28px;
	font-weight: 700;
	color: #d63638;
	font-variant-numeric: tabular-nums;
}

.btt-live-stats {
	display: flex;
	gap: 20px;
}

.btt-stat {
	font-size: 14px;
	color: #1d2327;
}

/*
 * content box — flex: 1 1 auto দেওয়া হয়েছে যাতে এটি typing screen-এর
 * ভেতরে অবশিষ্ট সমস্ত স্পেস (status bar, hint, typing box ও action বাটনের
 * জায়গা বাদ দিয়ে) নিজে থেকেই নিয়ে নেয়। প্যারেন্ট (#btt-typing-screen)
 * overflow:hidden হওয়ায় ও এই বক্সের overflow:hidden থাকায়, এই বক্সটি
 * আর কখনো নিজে স্ক্রল হয় না — অর্থাৎ যা দেখে টাইপ করা হবে সেটি সবসময়
 * জায়গায় স্থির (fixed) থাকে।
 *
 * পুরো কন্টেন্ট (যত বড়ই হোক) এই নির্দিষ্ট, স্ক্রলহীন এলাকার মধ্যে আঁটাতে
 * script.js এর fitContentBoxText() ফাংশন প্রয়োজনে ফন্ট-সাইজ ছোট করে দেয়,
 * এবং তার আগে কন্টেইনারের width বাড়িয়ে (.btt-container--typing ক্লাস)
 * যতটা সম্ভব কম ফন্ট ছোট করেই কাজ সারার চেষ্টা করা হয়।
 */
.btt-content-box {
	flex: 1 1 auto;
	min-height: 80px;
	max-height: 65vh;
	overflow: hidden;
	padding: 16px 20px;
	background: #fdfdfd;
	border: 1px solid #e2e4e7;
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.8;
	color: #2c3338;
	margin-bottom: 12px;
	white-space: pre-wrap;
	word-wrap: break-word;
	word-break: break-word;
	overflow-wrap: anywhere;
	user-select: none;
}

/*
 * সেফটি-নেট: যদি একেবারে ন্যূনতম ফন্ট সাইজেও (অস্বাভাবিক রকম বড় কন্টেন্ট ও
 * খুবই ছোট স্ক্রিনের ক্ষেত্রে) পুরো টেক্সট না আঁটে, তাহলে JS এই ক্লাসটি যোগ
 * করে দেয় যাতে অন্তত টেক্সট কেটে/হারিয়ে না যায় — ব্যবহারকারী ভেতরে স্ক্রল
 * করে বাকি অংশ দেখতে পারবে।
 */
.btt-content-box.btt-content-overflow {
	overflow-y: auto;
}

.btt-lang-bn {
	font-family: 'SolaimanLipi', 'Kalpurush', 'Noto Sans Bengali', sans-serif;
	font-size: 16px;
	line-height: 1.9;
}

.btt-lang-en {
	font-family: 'Noto Sans', Arial, sans-serif;
}

.btt-hint {
	text-align: center;
	font-size: 13px;
	color: #8a8d91;
	margin-bottom: 8px;
	font-family: 'SolaimanLipi', 'Noto Sans Bengali', sans-serif;
	flex-shrink: 0;
}

/* typing box — নির্দিষ্ট উচ্চতা যেন সবসময় দৃশ্যমান থাকে */
.btt-typing-box {
	width: 100%;
	height: 160px;
	min-height: 120px;
	max-height: 160px;
	padding: 14px 16px;
	font-size: 18px;
	line-height: 1.8;
	border: 2px solid #2271b1;
	border-radius: 8px;
	resize: vertical;
	font-family: 'SolaimanLipi', 'Kalpurush', 'Noto Sans Bengali', 'Noto Sans', sans-serif;
	flex-shrink: 0;
	/* IME / Unicode ইনপুটের জন্য */
	unicode-bidi: plaintext;
}

.btt-typing-box:focus {
	outline: none;
	border-color: #135e96;
	box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.15);
}

/* composition (IME) সক্রিয় থাকলে বর্ডার হলুদ দেখাবে */
.btt-typing-box.btt-composing {
	border-color: #d0a020;
	box-shadow: 0 0 0 3px rgba(208, 160, 32, 0.18);
}

.btt-actions {
	margin-top: 14px;
	text-align: right;
	flex-shrink: 0;
}

/* ===== রেজাল্ট স্ক্রিন ===== */
.btt-result-box {
	background: #fafbfc;
	border: 1px solid #e2e4e7;
	border-radius: 10px;
	padding: 25px;
	text-align: center;
}

.btt-result-status {
	font-size: 32px;
	font-weight: 800;
	margin-bottom: 20px;
	font-family: 'SolaimanLipi', 'Noto Sans Bengali', sans-serif;
}

.btt-status-pass {
	color: #00a32a;
}

.btt-status-fail {
	color: #d63638;
}

.btt-result-requirement {
	font-size: 13px;
	color: #646970;
	margin-bottom: 18px;
	font-family: 'SolaimanLipi', 'Noto Sans Bengali', sans-serif;
}

.btt-result-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 16px;
}

.btt-result-item {
	background: #fff;
	border: 1px solid #e2e4e7;
	border-radius: 8px;
	padding: 16px;
}

.btt-result-label {
	display: block;
	font-size: 12px;
	color: #646970;
	margin-bottom: 6px;
	font-family: 'SolaimanLipi', 'Noto Sans Bengali', sans-serif;
}

.btt-result-value {
	display: block;
	font-size: 24px;
	font-weight: 700;
	color: #1d2327;
}

#btt-retry-btn {
	display: block;
	margin: 20px auto 0;
}

.btt-loading {
	text-align: center;
	padding: 20px;
	color: #646970;
	font-family: 'SolaimanLipi', 'Noto Sans Bengali', sans-serif;
}

/* ===== রেসপনসিভ ===== */
@media (max-width: 600px) {
	.btt-container {
		margin: 12px;
		padding: 15px;
	}

	#btt-typing-screen {
		max-height: calc(100vh - 24px);
		max-height: calc(100dvh - 24px);
	}

	.btt-status-bar {
		flex-direction: column;
		align-items: flex-start;
	}

	.btt-container.btt-container--typing {
		max-width: 95vw;
	}

	.btt-content-box,
	.btt-lang-bn {
		font-size: 13px;
		line-height: 1.7;
		max-height: 55vh;
	}

	.btt-typing-box {
		height: 130px;
		max-height: 130px;
		font-size: 16px;
	}

	.btt-result-status {
		font-size: 24px;
	}
}