.dtc-block {
	/* Baseline: koi border nahi — sirf tab lagay ga jab "Add border around
	   whole block" toggle on ho (inline style se aata hai, jo is class se
	   hamesha override kar deta hai). */
	border: none;
	border-radius: 16px;
	padding: 24px;
	font-family: inherit;
	box-sizing: border-box;
}

.dtc-block * {
	box-sizing: border-box;
}

.dtc-block .dtc-header {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	gap: 10px;
	padding-bottom: 16px;
	margin-bottom: 20px;
	border-bottom: var( --dtc-border-width, 1px ) solid var( --dtc-border-color, #e2e2e7 );
}

.dtc-block .dtc-header-icon {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	line-height: 0;
}

.dtc-block .dtc-title {
	/* Kai themes ".single-content h1..h6" jaisi selectors se har heading par
	   apna margin (e.g. 1.5em top) reset kar dete hain, jiski specificity
	   hamari class-only selector se zyada hoti hai — is liye margin/line-height
	   yahan !important k sath lock kar rahe hain taake title icon k barabar
	   (vertically centered) hi rahe. */
	display: inline-block;
	margin: 0 !important;
	font-weight: 700;
	color: var( --dtc-title-color, #1e1e1e );
	font-size: var( --dtc-title-size, 18px );
	line-height: 1.3 !important;
}

.dtc-body {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.dtc-selectors {
	flex: 1 1 320px;
	display: flex;
	align-items: flex-end;
	gap: 10px;
}

.dtc-field {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dtc-field label {
	font-size: var( --dtc-label-size, 12px );
	text-align: center;
	color: var( --dtc-label-color, #6b7280 );
}

/* Custom dropdown — asal <select>/<option> nahi hai, is liye har part
   (closed box, open list, hover state) 100% CSS se control hoti hai, har
   browser main hoo-b-hoo same dikhega. */
.dtc-select {
	position: relative;
	width: 100%;
}

.dtc-select-trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	background-color: var( --dtc-dropdown-background-color, #ffffff );
	color: var( --dtc-dropdown-text-color, #1e1e1e );
	border: var( --dtc-border-width, 1px ) solid var( --dtc-border-color, #e2e2e7 );
	padding: 12px 14px;
	border-radius: var( --dtc-dropdown-border-radius, 10px );
	font-size: var( --dtc-dropdown-size, 14px );
	font-family: inherit;
	line-height: 1.3;
	cursor: pointer;
	text-align: left;
}

.dtc-select-value {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dtc-select-chevron {
	flex-shrink: 0;
	transition: transform 0.15s ease;
}

.dtc-select.is-open .dtc-select-chevron {
	transform: rotate(180deg);
}

.dtc-select-list {
	/* Theme ki content-area CSS (e.g. ".single-content ul, .single-content ol")
	   khud <ul> par padding-left: 2em jaisi values assign karti hai, jo hamari
	   class-only selector se zyada specific hoti hai aur override kar deti
	   thi — is liye margin/padding/list-style yahan !important k sath lock
	   ki hain. position/left/width par !important NAHI (JS dropdown ko
	   open hote waqat position:fixed + calculated left/width deta hai —
	   agar ye !important hotay to JS ki inline styling override na ho pati
	   aur list galat jagah/size par render hoti). */
	position: absolute;
	z-index: 20;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	margin: 0 !important;
	padding: 4px !important;
	list-style: none !important;
	list-style-position: outside;
	max-height: 240px;
	overflow-y: auto;
	background-color: var( --dtc-dropdown-background-color, #ffffff );
	border: var( --dtc-border-width, 1px ) solid var( --dtc-dropdown-list-border-color, #e2e2e7 );
	border-radius: var( --dtc-dropdown-list-border-radius, 10px );
	box-shadow: 0 10px 30px rgba( 0, 0, 0, 0.12 );
	box-sizing: border-box !important;
}

.dtc-select-list[hidden] {
	display: none;
}

.dtc-select-option {
	/* Kai themes apni content-area CSS main har <li> par margin-left ya
	   extra padding-left add kar dete hain (bullet list ka default look),
	   aur wo selectors hamari class se zyada specific ho sakte hain — is
	   liye yahan !important k sath explicitly override kar rahe hain taake
	   list item hamesha full-width aur consistent rahe. */
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	margin: 0 !important;
	padding: 10px 12px !important;
	border-radius: calc( var( --dtc-dropdown-list-border-radius, 10px ) - 4px );
	color: var( --dtc-dropdown-text-color, #1e1e1e );
	font-size: var( --dtc-dropdown-size, 14px );
	line-height: 1.3;
	cursor: pointer;
	list-style: none !important;
}

.dtc-select-option:hover,
.dtc-select-option:focus,
.dtc-select-option.is-selected {
	background-color: var( --dtc-dropdown-hover-background-color, #ede9fe );
	color: var( --dtc-dropdown-hover-text-color, #1e1e1e );
	outline: none;
}

.dtc-select-trigger:focus-visible {
	outline: 2px solid var( --dtc-result-value-color, #2ecc71 );
	outline-offset: 1px;
}

.dtc-swap {
	flex: 0 0 auto;
	width: var( --dtc-swap-button-width, 38px );
	height: var( --dtc-swap-button-height, 38px );
	border-radius: var( --dtc-swap-button-radius, 8px );
	border: var( --dtc-border-width, 1px ) solid var( --dtc-border-color, #e2e2e7 );
	background-color: var( --dtc-swap-background-color, #ffffff );
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	margin-bottom: 1px;
	padding: 0;
	transition: transform 0.15s ease;
}

.dtc-swap svg {
	display: block;
	pointer-events: none;
	/* Icon ka color inline SVG stroke attribute + style attribute se seedha
	   set hota hai (currentColor par depend nahi karta), is liye theme ki
	   koi bhi global CSS ise "invisible" nahi kar sakti. */
}

.dtc-swap:hover {
	transform: rotate(180deg);
}

.dtc-result {
	flex: 1 1 260px;
	background-color: var( --dtc-result-background-color, #f6f6f8 );
	border: var( --dtc-result-border-width, 1px ) solid var( --dtc-result-border-color, #e2e2e7 );
	border-radius: var( --dtc-result-border-radius, 12px );
	padding: 18px 20px;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: 6px;
	justify-content: center;
}

.dtc-result-label {
	font-size: var( --dtc-label-size, 12px );
	letter-spacing: 0.08em;
	color: var( --dtc-label-color, #6b7280 );
	text-transform: uppercase;
}

.dtc-result-value {
	font-size: var( --dtc-result-value-size, 28px );
	font-weight: 800;
	color: var( --dtc-result-value-color, #2ecc71 );
}

.dtc-result-value.dtc-no-match {
	color: var( --dtc-label-color, #6b7280 );
}

.dtc-result-note {
	font-size: var( --dtc-note-size, 12px );
	color: var( --dtc-note-color, #8a8a95 );
}

@media (max-width: 600px) {
	.dtc-block {
		padding: 16px;
	}

	.dtc-body {
		flex-direction: column;
	}

	.dtc-selectors {
		flex-wrap: wrap;
	}

	.dtc-field {
		flex: 1 1 100%;
	}

	.dtc-swap {
		margin: 4px auto;
	}
}