.dtc-rt-block {
	/* Baseline: koi border nahi — sirf tab lagega jab "Border" panel se
	   "Add border around whole block" on kiya jaye (inline style se aata
	   hai jo is class ko hamesha override karta hai). */
	border: none;
	border-radius: 16px;
	padding: 28px 20px;
	box-sizing: border-box;
	font-family: inherit;
	text-align: center;
}

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

.dtc-rt-title {
	/* Theme ka ".single-content h1..h6" reset margin ko override kar deta
	   hai, is liye !important zaroori hai. */
	margin: 0 0 8px !important;
	font-weight: 700;
	color: var( --dtc-rt-title-color, #1e1e1e );
	font-size: var( --dtc-rt-title-size, 28px );
	line-height: 1.3;
}

.dtc-rt-subtitle {
	margin: 0 auto 24px;
	max-width: 640px;
	color: var( --dtc-rt-subtitle-color, #6b7280 );
	font-size: var( --dtc-rt-subtitle-size, 15px );
	line-height: 1.5;
}

.dtc-rt-pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-bottom: 24px;
}

.dtc-rt-pill {
	display: inline-block;
	border: none;
	cursor: pointer;
	font-family: inherit;
	font-weight: 600;
	padding: 11px 22px;
	background-color: var( --dtc-rt-pill-bg, #f0f0f3 );
	color: var( --dtc-rt-pill-color, #3f3f46 );
	font-size: var( --dtc-rt-pill-size, 14px );
	border-radius: var( --dtc-rt-pill-radius, 999px );
	transition: background-color 0.15s ease, color 0.15s ease;
}

.dtc-rt-pill.is-active {
	background-color: var( --dtc-rt-pill-active-bg, #e0245e );
	color: var( --dtc-rt-pill-active-color, #ffffff );
}

.dtc-rt-card {
	text-align: left;
	background-color: var( --dtc-rt-card-bg, #ffffff );
	border: var( --dtc-rt-card-border-width, 1px ) solid var( --dtc-rt-card-border-color, #e2e2e7 );
	border-radius: var( --dtc-rt-card-radius, 16px );
	overflow: hidden;
}

.dtc-rt-card-header {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: center;
	gap: 10px;
	padding: 20px;
	border-bottom: 1px solid var( --dtc-rt-card-border-color, #e2e2e7 );
}

.dtc-rt-card-icon {
	display: inline-flex !important;
	align-items: center;
	flex-shrink: 0;
	line-height: 0;
}

.dtc-rt-card-title {
	/* Root cause of the icon/title misalignment: theme ka
	   ".single-content h1..h6 { margin: 1.5em 0 .5em }" is h4 par bhi lagu
	   hota tha aur hamari class-only selector se zyada specific tha, is
	   liye title neeche push ho jata tha. !important se lock kar diya. */
	display: inline-block;
	margin: 0 !important;
	font-weight: 700;
	color: var( --dtc-rt-card-title-color, #1e1e1e );
	font-size: var( --dtc-rt-card-title-size, 17px );
	line-height: 1.3 !important;
}

.dtc-rt-table-header {
	display: flex;
	justify-content: space-between;
	padding: 14px 24px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var( --dtc-rt-table-header-color, #9a9aab );
	font-size: var( --dtc-rt-table-header-size, 12px );
}

.dtc-rt-table[hidden] {
	display: none;
}

.dtc-rt-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 24px;
	border-top: 1px solid var( --dtc-rt-row-divider, #eeeeee );
}

.dtc-rt-destination {
	color: var( --dtc-rt-row-color, #1e1e1e );
	font-size: var( --dtc-rt-row-size, 15px );
}

.dtc-rt-badge {
	flex-shrink: 0;
	display: inline-block;
	font-weight: 700;
	padding: 5px 14px;
	font-size: var( --dtc-rt-badge-size, 14px );
	border-radius: var( --dtc-rt-badge-radius, 8px );
}

.dtc-rt-badge.dtc-rt-fast {
	background-color: var( --dtc-rt-fast-bg, #183527 );
	color: var( --dtc-rt-fast-color, #4ade80 );
}

.dtc-rt-badge.dtc-rt-medium {
	background-color: var( --dtc-rt-medium-bg, #3a2c10 );
	color: var( --dtc-rt-medium-color, #f5a623 );
}

.dtc-rt-badge.dtc-rt-slow {
	background-color: var( --dtc-rt-slow-bg, #3a1530 );
	color: var( --dtc-rt-slow-color, #f472b6 );
}

@media (max-width: 640px) {
	.dtc-rt-block {
		padding: 20px 14px;
	}

	.dtc-rt-pills {
		gap: 8px;
	}

	.dtc-rt-pill {
		padding: 9px 16px;
	}

	.dtc-rt-card-header,
	.dtc-rt-table-header,
	.dtc-rt-row {
		padding-left: 16px;
		padding-right: 16px;
	}
}