/*
 * ফ্রেম — ক্যালকুলেটরকে থিমের ভেতরে বসার জায়গা করে দেয়।
 *
 * ইউজারের নিজের style.css-এ হাত দেওয়া হয়নি; সেটা build/build.php
 * `.ap-calc-root`-এর ভেতরে স্কোপ করে দেয়, কোনো ডিক্লারেশন বদলায় না।
 * এই ফাইলটা শুধু দুটো কাজ করে —
 *
 *   ১. র‍্যাপারকে পুরো প্রস্থ দেয় (থিমের সরু কনটেন্ট কলাম নয়)
 *   ২. থিমের সাধারণ এলিমেন্ট স্টাইল ভেতরে গড়িয়ে পড়া আটকায়
 *
 * দুটোই কম specificity-তে লেখা, তাই ইউজারের নিজের নিয়ম সব সময় জেতে।
 */

.ap-calc-frame {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

.ap-calc-root {
	position: relative;
	width: 100%;
}

/* থিমের টাইপোগ্রাফি ইউজারের নিজের ফন্ট/মাপ ছাপিয়ে না যায় */
.ap-calc-root p,
.ap-calc-root ul,
.ap-calc-root ol,
.ap-calc-root li,
.ap-calc-root dl,
.ap-calc-root dt,
.ap-calc-root dd,
.ap-calc-root table,
.ap-calc-root h1,
.ap-calc-root h2,
.ap-calc-root h3,
.ap-calc-root h4,
.ap-calc-root h5,
.ap-calc-root h6 {
	font-family: inherit;
}

/* লিংক — থিমের রঙ আর আন্ডারলাইন ভেতরে আসে না */
.ap-calc-root a {
	text-decoration: none;
	box-shadow: none;
}

/* ফর্ম এলিমেন্ট — থিম প্রায়ই bare button/input-কে নিজের রঙ, বর্ডার আর
   বক্স-শ্যাডো দেয়; সেটা ভেতরে ঢুকলে ডিজাইন ভেঙে যায়। চেকবক্স/রেডিও বাদ,
   ওদের নেটিভ চেহারাটাই দরকার। */
.ap-calc-root button,
.ap-calc-root input:not([type="checkbox"]):not([type="radio"]),
.ap-calc-root select,
.ap-calc-root textarea {
	font-family: inherit;
	box-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	min-height: 0;
	max-width: none;
}

.ap-calc-root button {
	cursor: pointer;
}

/* ড্রপডাউন/ইনপুটের উচ্চতা — Jannah দুটো জিনিস চাপিয়ে দেয়:
 *
 *     textarea, input, select { line-height: 23px }
 *     select                  { height: 30px }
 *
 * ছয়টা টুলের কোনো style.css-এই `height` বা `line-height` লেখা নেই, তাই
 * specificity দিয়ে ঠেকানোর কিছু থাকে না — থিমের মান বিনা বাধায় বসে যায়।
 * ফল: `.premium-select`-এর padding ১২px আর font-size ১৮px নিয়ে বাক্সটা
 * ৩০px-এ আটকে যায়, লেখার জায়গা থাকে ৬px, আর বাংলা লেখা কেটে গিয়ে সরু
 * দাগ হয়ে যায়। mouza-rate-এ padding ১৫px, মানে জায়গা শূন্য — লেখা একদম
 * অদৃশ্য।
 *
 * ব্রাউজারের ডিফল্টে ফেরানো হলো, যেটা ইউজারের স্ট্যান্ড-অ্যালোন পাতায়
 * ছিল। নতুন কোনো মাপ বসানো হয়নি — টুলের CSS যদি কখনো height দেয়,
 * (0,2,0) specificity-তে সে-ই জেতে। চেকবক্স/রেডিও বাদ, ওদের নেটিভ মাপটাই
 * দরকার।
 */
.ap-calc-root input:not([type="checkbox"]):not([type="radio"]),
.ap-calc-root select,
.ap-calc-root textarea {
	height: auto;
	line-height: normal;
}

/* টেবিল — থিমের গ্লোবাল টেবিল স্টাইল (বর্ডার, জেব্রা, মার্জিন) ভেতরে নয় */
.ap-calc-root table {
	border-collapse: collapse;
	width: auto;
	margin: 0;
}

.ap-calc-root th,
.ap-calc-root td {
	background: none;
	border: 0;
}

/* ছবি যেন কনটেইনার ছাড়িয়ে না যায় */
.ap-calc-root img {
	max-width: 100%;
	height: auto;
}