.wcsda-wrapper {
	margin: 15px 0 20px;
	border: 1px solid #e5e5e5;
	border-radius: 8px;
	padding: 16px 18px;
	background: #fafafa;
}

.wcsda-field {
	margin-bottom: 16px;
}

.wcsda-field:last-child {
	margin-bottom: 0;
}

.wcsda-field label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
}

#wcsda_booking_date {
	max-width: 220px;
	padding: 8px 10px;
	border: 1px solid #ccc;
	border-radius: 5px;
	background: #fff;
	cursor: pointer;
}

.wcsda-package-heading {
	font-size: 16px;
	margin: 0 0 10px;
	border-bottom: 1px solid #e0e0e0;
	padding-bottom: 6px;
}

.wcsda-subfield {
	margin-bottom: 14px;
}

.wcsda-options {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
}

.wcsda-option {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 20px;
	padding: 6px 12px;
	font-size: 13px;
	cursor: pointer;
	margin-bottom: 0 !important;
}

.wcsda-option:hover {
	border-color: #aaa;
}

.wcsda-charge {
	color: #f55483;
	font-weight: 600;
}

.wcsda-hint {
	font-weight: 400;
	color: #777;
	font-size: 12px;
}

.wcsda-total-wrap {
	background: #fff3f6;
	border: 1px dashed #f55483;
	border-radius: 6px;
	padding: 10px 14px;
	font-size: 15px;
}

#wcsda_total_amount {
	color: #f55483;
	font-weight: 700;
}

.wcsda-no-slots-msg {
	color: #a00;
	font-size: 13px;
	margin: 6px 0 0;
}

.wcsda-group-thumb {
	display: inline-block;
	vertical-align: middle;
	margin-right: 8px;
}

.wcsda-group-thumb img {
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 6px;
	vertical-align: middle;
}

.wcsda-free-tag {
	color: #2a9d5c;
	font-weight: 600;
	font-size: 11px;
	text-transform: uppercase;
}

/* --- Add to Cart sits in the same row as Quantity + Wishlist ---
   Previously this rule forced the button to `display:block; width:100%`,
   which is exactly what pushed it onto its own line below the quantity +
   wishlist row, leaving blank space next to them. Now the whole `form.cart`
   row (quantity, our inline wishlist button if present, and the Add to Cart
   button) is one flex row, and Add to Cart simply grows to fill whatever
   space is left in that row instead of always being full width. */
.woocommerce div.product form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.woocommerce div.product form.cart .quantity {
	margin: 0;
}

.woocommerce div.product form.cart .single_add_to_cart_button {
	flex: 1 1 160px;
	width: auto;
	margin: 0;
	text-align: center;
}

/* No quantity field on the page (e.g. sold individually)? Add to Cart alone
   still gets a sensible width instead of stretching edge-to-edge. */
.woocommerce div.product form.cart:not(:has(.quantity)) .single_add_to_cart_button {
	flex: 0 1 auto;
	min-width: 200px;
}

/* --- WhatsApp / Enquiry buttons --- */
.wcsda-action-buttons {
	display: flex;
	gap: 10px;
	margin-top: 12px;
	width: 100%;
}

.wcsda-action-btn {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 14px;
	border: none;
	border-radius: 6px;
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.wcsda-action-btn:hover {
	opacity: 0.9;
	color: #fff;
}

.wcsda-action-btn svg {
	flex-shrink: 0;
}

@media (max-width: 600px) {
	.wcsda-action-buttons {
		flex-direction: column;
	}
}

/* --- Enquiry Modal --- */
.wcsda-modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.55);
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.wcsda-modal-box {
	background: #fff;
	border-radius: 10px;
	padding: 24px;
	max-width: 380px;
	width: 100%;
	position: relative;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
}

.wcsda-modal-box h3 {
	margin: 0 0 16px;
}

.wcsda-modal-close {
	position: absolute;
	top: 10px;
	right: 14px;
	background: none;
	border: none;
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	color: #777;
}

#wcsda_enquiry_form input[type="text"],
#wcsda_enquiry_form input[type="tel"],
#wcsda_enquiry_form input[type="email"],
#wcsda_enquiry_form textarea {
	display: block;
	width: 100%;
	padding: 10px 12px;
	margin-bottom: 14px;
	border: 1px solid #ccc;
	border-radius: 6px;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 14px;
}

#wcsda_enquiry_form textarea {
	resize: vertical;
	min-height: 70px;
}

.wcsda-enquiry-error {
	color: #a00;
	font-size: 13px;
	margin-bottom: 8px;
}

.wcsda-enquiry-success {
	color: #2a9d5c;
	font-weight: 600;
	text-align: center;
}

.wcsda-enquiry-submit-btn {
	width: 100%;
}

.wcsda-swatch-color {
	display: inline-block;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px #ccc;
	vertical-align: middle;
	margin-right: 2px;
}

.wcsda-swatch-image {
	display: inline-block;
	vertical-align: middle;
	margin-right: 2px;
}

.wcsda-swatch-image img {
	width: 32px;
	height: 32px;
	object-fit: cover;
	border-radius: 4px;
	vertical-align: middle;
}

.wcsda-hidden {
	display: none !important;
}

.wcsda-option-disabled {
	opacity: 0.5;
	background: #f2f2f2 !important;
	cursor: not-allowed;
	position: relative;
}

.wcsda-sold-out-badge {
	color: #a00;
	font-weight: 700;
	font-size: 11px;
	text-transform: uppercase;
	margin-left: 4px;
}

.wcsda-blackout-notice {
	display: block;
	margin-top: 6px;
	color: #a00;
	font-size: 13px;
}

.ui-datepicker .wcsda-blackout-day a {
	background: #f8d7da !important;
	color: #a00 !important;
	text-decoration: line-through;
}