#tj-delivery-fields {
	margin: 20px 0;
	padding: 20px;
	border: none;
	background: var(--md-surface-container-low);
}

.tj-receipt-reminder {
	margin: 16px 0;
	padding: 16px;
	border-radius: var(--tj-radius-md, 16px);
	background: var(--md-primary-container);
}

.tj-receipt-reminder p {
	margin: 0 0 10px;
}

.tj-group-hint-banner {
	background: var(--md-secondary-container);
	border: none;
	padding: 12px 16px;
	border-radius: var(--tj-radius-md, 16px);
	margin-bottom: 15px;
	font-weight: 600;
}

.tj-location-wrap,
.tj-zone-wrap {
	margin-top: 10px;
}

#tj-map {
	height: 280px;
	border-radius: 8px;
	margin-bottom: 8px;
	z-index: 1;
}

.tj-service-note {
	font-style: italic;
	color: var(--md-on-surface-variant);
}

.tj-zone-status {
	font-size: 0.9em;
	color: var(--md-primary);
}

.tj-group-progress {
	margin: 20px 0;
	padding: 20px;
	border: none;
	border-radius: var(--tj-radius-lg, 20px);
	background: var(--md-surface-container-lowest);
	box-shadow: var(--md-elevation-1);
}

.tj-progress-bar {
	background: var(--md-surface-variant);
	border-radius: 20px;
	height: 16px;
	overflow: hidden;
	margin: 10px 0;
}

.tj-progress-bar-fill {
	background: var(--md-primary);
	height: 100%;
	transition: width 0.3s ease;
}

.tj-share-btn {
	background: var(--md-primary) !important;
	color: var(--md-on-primary) !important;
	display: inline-block;
	margin-top: 10px;
}

.tj-copy-link-btn {
	display: inline-block;
	margin-top: 10px;
	margin-left: 8px;
}

/* This store only sells to Malaysia, so the country picker is redundant —
   it's still a real field (posts billing_country=MY via its default value),
   just visually hidden so customers don't have to touch it. */
#billing_country_field {
	/* WooCommerce's country_to_state script re-shows this row on init, so the
	   rule needs !important to stick. Before the M3 outline was added the
	   stray select just looked like plain text and went unnoticed. */
	display: none !important;
}

.tj-method-label {
	font-weight: 600;
	margin-bottom: 10px;
}

.tj-hero {
	text-align: center;
	padding: 24px 16px 30px;
	background: var(--md-surface-container-low);
	border-bottom: 1px solid var(--md-outline-variant);
}

.tj-hero-title {
	font-size: 1.3em;
	margin-bottom: 18px;
}

.tj-hero .tj-method-card {
	text-decoration: none;
	color: inherit;
}

.tj-method-cards {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin-bottom: 20px;
}

.tj-method-card {
	width: 130px;
	text-align: center;
	cursor: pointer;
	padding: 10px 8px 12px;
	border-radius: var(--tj-radius-lg, 20px);
	border: 3px solid transparent;
	background: var(--md-surface-container-lowest);
	transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
	box-shadow: none;
}

.tj-method-card input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.tj-method-card img {
	width: 90px;
	height: 90px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 6px;
}

.tj-method-name {
	display: block;
	font-weight: 600;
	font-size: 0.85em;
	line-height: 1.2;
}

.tj-method-price {
	display: block;
	font-size: 0.78em;
	color: var(--md-on-surface-variant);
	margin-top: 2px;
}

.tj-method-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--md-elevation-1);
}

.tj-method-card.selected {
	border-color: var(--md-primary);
	box-shadow: none;
}

.tj-method-card.tj-bounce {
	animation: tj-bounce 0.35s ease;
}

@keyframes tj-bounce {
	0%   { transform: scale(1); }
	40%  { transform: scale(1.12); }
	100% { transform: scale(1); }
}

.tj-change-method {
	text-align: center;
	margin: 4px 0 16px;
}

.tj-change-method a {
	display: inline-block;
	font-size: 0.85em;
	font-weight: 600;
	color: var(--md-on-surface-variant);
	text-decoration: none;
	padding: 6px 14px;
	border-radius: var(--tj-radius-pill, 999px);
	background: var(--md-surface-container-high);
	transition: opacity 0.15s ease;
}

.tj-change-method a:active {
	opacity: 0.6;
}

/* On-Demand (Grab) hand-over panel. Stands in for the payment box, which is
   hidden for this method — nothing is paid until Mi quotes the Grab fare. */
.tj-grab-panel {
	margin: 20px 0;
	padding: 22px 20px 24px;
	border-radius: var(--tj-radius-lg, 20px);
	background: var(--md-surface-container-lowest);
	box-shadow: var(--md-elevation-1);
	text-align: center;
}

.tj-grab-panel h3 {
	margin: 0 0 8px;
}

.tj-grab-note {
	font-size: 0.92em;
	color: var(--md-on-surface-variant);
	margin: 0 0 16px;
}

.tj-grab-send {
	background: var(--md-primary) !important;
	color: var(--md-on-primary) !important;
	border-radius: var(--tj-radius-pill, 999px) !important;
	padding: 14px 28px !important;
	font-weight: 600;
	width: 100%;
	max-width: 340px;
}

.tj-grab-error {
	margin: 14px 0 0;
	color: var(--md-error);
	font-weight: 600;
	font-size: 0.92em;
}