.bbt {
	max-width: 780px;
	margin: 0 auto;
	text-align: left;
}

.bbt-form {
	background: #ffffff;
	border: 1px solid #e8e6df;
	border-radius: 14px;
	padding: 18px;
	box-shadow: 0 4px 18px rgba(26, 26, 26, 0.06);
}

.bbt-fields {
	display: flex;
	gap: 10px;
	align-items: stretch;
}

.bbt-fields select,
.bbt-fields input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	height: auto;
	padding: 12px 14px;
	border: 1.5px solid #d9d6cc;
	border-radius: 9px;
	font-size: 15px;
	line-height: 1.4;
	color: #1a1a1a;
	background: #fff;
	box-shadow: none;
}

.bbt-fields select:focus,
.bbt-fields input[type="text"]:focus {
	border-color: #ffc107;
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.25);
}

.bbt-fields select {
	max-width: 210px;
}

.bbt-btn {
	flex: 0 0 auto;
	padding: 12px 22px;
	border: 0;
	border-radius: 9px;
	background: #ffc107;
	color: #1a1a1a;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.3px;
	cursor: pointer;
	transition: background 0.2s ease, transform 0.1s ease;
}

.bbt-btn:hover {
	background: #e6ae00;
}

.bbt-btn:active {
	transform: scale(0.98);
}

.bbt-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.bbt-trustline {
	margin: 10px 2px 0;
	font-size: 12.5px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: #8a867b;
	font-weight: 600;
}

.bbt-dark .bbt-form {
	background: #ffffff;
}

.bbt-dark .bbt-trustline {
	color: #b8b4a8;
}

.bbt-loading {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 18px 4px;
	color: #555;
	font-size: 14px;
}

.bbt-spinner {
	width: 20px;
	height: 20px;
	border: 3px solid #f0e6c8;
	border-top-color: #ffc107;
	border-radius: 50%;
	animation: bbt-spin 0.8s linear infinite;
}

@keyframes bbt-spin {
	to {
		transform: rotate(360deg);
	}
}

.bbt-result {
	margin-top: 16px;
}

.bbt-card {
	background: #ffffff;
	border: 1px solid #e8e6df;
	border-radius: 14px;
	padding: 22px 22px 6px;
	box-shadow: 0 4px 18px rgba(26, 26, 26, 0.06);
}

.bbt-card-top {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.bbt-status-pill {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: #fff;
}

.bbt-status-pill.delivered {
	background: #2e7d32;
}

.bbt-status-pill.in_transit {
	background: #1565c0;
}

.bbt-status-pill.out_for_delivery {
	background: #ef6c00;
}

.bbt-status-pill.pending {
	background: #9e9d24;
}

.bbt-status-pill.exception {
	background: #c62828;
}

.bbt-status-pill.unknown {
	background: #757575;
}

.bbt-last-status {
	font-size: 16px;
	font-weight: 700;
	color: #1a1a1a;
	flex: 1 1 auto;
	min-width: 200px;
}

.bbt-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin-bottom: 16px;
	font-size: 14px;
	color: #555;
}

.bbt-meta-item strong {
	color: #1a1a1a;
	font-weight: 600;
	display: block;
	font-size: 12.5px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	margin-bottom: 2px;
	color: #8a867b;
}

.bbt-timeline {
	border-top: 1px solid #f0ede4;
	padding-top: 6px;
}

.bbt-tl-item {
	display: flex;
	gap: 16px;
	padding: 14px 0;
	border-bottom: 1px dashed #f0ede4;
}

.bbt-tl-item:last-child {
	border-bottom: 0;
}

.bbt-tl-marker {
	flex: 0 0 auto;
	width: 26px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.bbt-tl-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #ffc107;
	border: 3px solid #ffe69b;
	margin-top: 4px;
}

.bbt-tl-item:not(:first-child) .bbt-tl-dot {
	background: #d9d6cc;
	border-color: #f0ede4;
}

.bbt-tl-line {
	flex: 1 1 auto;
	width: 2px;
	background: #f0ede4;
	margin-top: 4px;
}

.bbt-tl-body {
	flex: 1 1 auto;
	padding-bottom: 2px;
}

.bbt-tl-status {
	font-size: 15px;
	font-weight: 600;
	color: #1a1a1a;
}

.bbt-tl-loc {
	font-size: 13.5px;
	color: #555;
	margin-top: 3px;
}

.bbt-tl-time {
	font-size: 12.5px;
	color: #8a867b;
	margin-top: 3px;
}

.bbt-msg {
	background: #fff8e1;
	border: 1px solid #ffe082;
	color: #6b5900;
	border-radius: 10px;
	padding: 14px 16px;
	font-size: 14.5px;
}

.bbt-error {
	background: #fdecea;
	border: 1px solid #f5c6cb;
	color: #9c2b2b;
	border-radius: 10px;
	padding: 14px 16px;
	font-size: 14.5px;
}

.bbt-help {
	margin-top: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
	font-size: 14px;
	color: #555;
}

.bbt-help-text {
	font-weight: 500;
}

.bbt-wa {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #25d366;
	color: #ffffff;
	padding: 10px 18px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: background 0.2s ease;
}

.bbt-wa::before {
	content: "";
	width: 14px;
	height: 14px;
	background: currentColor;
	mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>') no-repeat center / contain;
	-webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="black" d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.297-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>') no-repeat center / contain;
}

.bbt-wa:hover {
	background: #1eb858;
	color: #ffffff;
}

.bbt-wa-inline {
	margin-top: 16px;
}

@media (max-width: 640px) {
	.bbt-fields {
		flex-direction: column;
	}

	.bbt-fields select {
		max-width: none;
	}

	.bbt-btn {
		width: 100%;
	}
}

.bbt-hero {
	background: linear-gradient(135deg, #1a1a1a 0%, #262217 100%);
	border-radius: 16px;
	padding: 56px 28px 44px;
	text-align: center;
	color: #fff;
}

.bbt-hero h1,
.bbt-hero h2,
.bbt-hero h3 {
	color: #fff;
}

.bbt-hero-title {
	font-size: clamp(28px, 5vw, 46px);
	font-weight: 800;
	line-height: 1.1;
	margin: 0 0 6px;
}

.bbt-hero-title .bbt-accent {
	color: #ffc107;
}

.bbt-hero-subtitle {
	font-size: clamp(16px, 2.5vw, 22px);
	font-weight: 600;
	color: #ffc107;
	margin: 0 0 10px;
	letter-spacing: 0.4px;
}

.bbt-hero-text {
	font-size: 15px;
	color: #d5d0c0;
	margin: 0 auto 26px;
	max-width: 520px;
	line-height: 1.6;
}

.bbt-hero .bbt {
	max-width: 640px;
}

.bbt-hero-trust {
	margin-top: 18px;
	font-size: 12.5px;
	color: #a9a292;
	letter-spacing: 0.3px;
}

.bbt-section {
	padding: 44px 0 10px;
}

.bbt-section-title {
	font-size: clamp(24px, 3.5vw, 32px);
	font-weight: 800;
	text-align: center;
	margin: 0 0 8px;
	color: #1a1a1a;
}

.bbt-section-sub {
	text-align: center;
	color: #666;
	font-size: 15px;
	margin: 0 auto 30px;
	max-width: 480px;
}

.bbt-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: 26px;
}

.bbt-card-feature {
	background: #fff;
	border: 1px solid #e8e6df;
	border-radius: 14px;
	padding: 26px 22px;
	text-align: center;
	box-shadow: 0 4px 16px rgba(26, 26, 26, 0.05);
}

.bbt-card-num {
	width: 42px;
	height: 42px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: #ffc107;
	color: #1a1a1a;
	font-weight: 800;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bbt-card-feature h3 {
	margin: 0 0 8px;
	font-size: 17px;
	color: #1a1a1a;
}

.bbt-card-feature p {
	margin: 0;
	font-size: 14px;
	color: #666;
	line-height: 1.6;
}

.bbt-couriers {
	margin-top: 30px;
	text-align: center;
}

.bbt-courier-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-top: 14px;
}

.bbt-courier-tag {
	background: #f5f3ec;
	border: 1px solid #e8e6df;
	color: #555;
	font-size: 13px;
	font-weight: 600;
	padding: 6px 14px;
	border-radius: 999px;
}

.bbt-wa-banner {
	margin-top: 40px;
	background: linear-gradient(135deg, #ffc107 0%, #ffb300 100%);
	border-radius: 16px;
	padding: 34px 28px;
	text-align: center;
	color: #1a1a1a;
}

.bbt-wa-banner h2 {
	margin: 0 0 8px;
	font-size: clamp(22px, 3vw, 30px);
	font-weight: 800;
	color: #1a1a1a;
}

.bbt-wa-banner p {
	margin: 0 auto 20px;
	max-width: 440px;
	font-size: 15px;
	color: #3a3200;
}

.bbt-footer-note {
	margin-top: 40px;
	padding: 22px 0;
	text-align: center;
	font-size: 13.5px;
	color: #888;
	border-top: 1px solid #f0ede4;
}

@media (max-width: 768px) {
	.bbt-grid-3 {
		grid-template-columns: 1fr;
	}

	.bbt-hero {
		padding: 40px 18px 34px;
	}
}