/*
 * Shoebill Travel Listing Fields — front-end styles.
 * Uses the Shoebill Africa brand colours (navy / gold) as sensible
 * defaults. Every selector is namespaced with .sb- so it's easy to
 * override from your theme's own stylesheet if you want a different look.
 */

:root {
	--sb-navy: #0E1B2C;
	--sb-gold: #C8A45D;
	--sb-grey: #5B6B7C;
	--sb-light-bg: #F6F7F9;
}

/* Verified ribbon, shown over the product thumbnail in shop/archive loops. */
ul.products li.product {
	position: relative;
}

.sb-verified-ribbon {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: var(--sb-gold);
	color: var(--sb-navy);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.3px;
	padding: 4px 10px;
	border-radius: 4px;
	line-height: 1.4;
}

.sb-verified-ribbon .dashicons {
	font-size: 14px;
	width: 14px;
	height: 14px;
}

/* Travel details list on the single product page. */
.sb-travel-details {
	list-style: none;
	margin: 14px 0;
	padding: 12px 16px;
	background: var(--sb-light-bg);
	border-radius: 6px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
}

.sb-travel-detail {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--sb-navy);
}

.sb-travel-detail .dashicons {
	color: var(--sb-gold);
	font-size: 16px;
	width: 16px;
	height: 16px;
}

.sb-travel-detail--verified {
	font-weight: 700;
}

/* Booking fields (departure date + travellers) above Add to Cart. */
.sb-travel-booking-fields {
	margin: 16px 0;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

.sb-travel-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 0 !important;
}

.sb-travel-field label {
	font-size: 12px;
	font-weight: 600;
	color: var(--sb-grey);
}

.sb-travel-field select,
.sb-travel-field input[type="number"] {
	border: 1px solid #E5E8EC;
	border-radius: 4px;
	padding: 8px 10px;
	font-size: 13px;
	min-width: 180px;
}