/* WC Product Package Booking - Frontend Styles */

/* Section: Headings for package and dates labels */
.wcwb-packages-label {
	color: var(--Wellnes--heading-Color, #1D4026);
	font-size: 16px;
	font-style: normal;
	font-weight: 700;
	line-height: 22px;
	text-transform: capitalize;
	margin-bottom: 10px;
}

/* Section: Package container spacing */
.wcwb-packages { margin-bottom: 10px; }

/* Section: Package grid layout */
.wcwb-package-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 15px;
}

/* Section: Package box base/hover/selected */
.wcwb-package-box {
	border: none;
	background: #fff;
	padding: 12px 14px;
	cursor: pointer;
	border-radius: 8px;
	transition: filter .15s ease, border-color .15s ease, border-width .15s ease;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.08));
}
.wcwb-package-box:hover { border-color: #E3F5CA; }
.wcwb-package-box:focus { border: none; outline: none; }
.wcwb-package-box.selected { outline: none; border: 2px solid #75C045; filter: drop-shadow(0 2px 4px rgba(116, 191, 70, 0.25)); }

/* Section: Package box typography (days and price) */
.wcwb-days-label,
.wcwb-price-inside {
	color: var(--New-Av-Text-colour, #334A52);
	font-style: normal;
	font-weight: 400;
}

/* Section: Dates row layout */
.wcwb-dates { display: flex; gap: 0px; align-items: center; }
.wcwb-date-field { flex: 1; margin-bottom: 0; }
@media (max-width: 480px){ .wcwb-dates { flex-direction: column; align-items: flex-start; } }

/* Section: Spacing between package selection and date selection */
#booking_calendar_container {
	margin-top: 20px;
}

/* Section: Date input base/hover/focus and icon color states - MODIFIED */
.wcwb-date-input {
	background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23334A52' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>") no-repeat right 10px center;
	padding: 16px 20px;
	border: none;
	border-radius: 8px;
	filter: drop-shadow(0 2px 4px rgba(116, 191, 70, 0.25));
	transition: filter .15s ease, border-color .15s ease, border-width .15s ease;
	font-size: 14px; /* ADDED DEFAULT FONT SIZE */
}
.wcwb-date-input::placeholder { color: #334A52; opacity: 1; }
.wcwb-date-input:hover { border-color: #888; }
.wcwb-date-input:focus { outline: none; border: 1px solid #75C045; }
/* Icon turns green when datepicker open AND has a date value */
.wcwb-date-input.wcwb-open.wcwb-has-date {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2375C045' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
}

/* Section: Selection summary styling */
.wcwb-selection-summary {
	margin-top: 12px;
	padding: 12px 14px;
	background: #E3F5CA;
	color: #334A52;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 21px;
	border-radius: 8px;
}

/* Section: jQuery UI Datepicker container and header */
.ui-datepicker { width: 12em; border-radius: 10px; background: var(--pure-white-100, #FFF); box-shadow: 0 4px 8px 0px rgba(0, 0, 0, 0.08); border: 1px solid #E3F5CA!important; }
.ui-datepicker .ui-datepicker-header { background: #E3F5CA; border-bottom: 1px solid #75C045; border-top-left-radius: 10px; border-top-right-radius: 10px; }
.ui-datepicker .ui-datepicker-title {
	color: var(--Wellnes--heading-Color, #1D4026);
	font-style: normal;
	font-weight: 400;
	line-height: 30px;
	text-transform: capitalize;
}

/* Section: Day headers (Sun, Mon, ...) */
.ui-datepicker table thead th {
	color: var(--Wellnes--heading-Color, #1D4026);
	font-style: normal;
	font-weight: 700;
	line-height: 21px;
	text-transform: capitalize;
}

/* Section: Day cells */
.ui-datepicker .ui-datepicker-calendar td a,
.ui-datepicker .ui-datepicker-calendar td span {
	color: var(--Wellnes--heading-Color, #1D4026);
	font-style: normal;
	font-weight: 400;
	line-height: 24px;
	text-transform: capitalize;
	background: transparent;
	border: none;
	display: inline-block;
	width: 100%;
	border-radius: 6px;
	text-align: center;
}
/* Selected day */
.ui-datepicker .ui-datepicker-calendar .ui-state-active {
	color: var(--AV-green, #75C045);
	font-style: normal;
	font-weight: 600;
	line-height: 24px;
	text-transform: capitalize;
	background: #E3F5CA !important;
	border: none !important;
	border-radius: 50px;
}

/* Section: End date display - same styling as start date input - MODIFIED */
.wcwb-end-date-display {
	display: block;
	padding: 16px 20px;
	border-radius: 8px;
	filter: drop-shadow(0 2px 4px rgba(116, 191, 70, 0.25));
	background: #fff;
	color: #334A52;
	font-size: 14px; /* ADDED DEFAULT FONT SIZE */
	min-height: 20px;
	width: 110px;
}

/* Section: Start/End labels inside date fields - ensure consistent alignment - MODIFIED */
.wcwb-date-field label {
	color: #1D4026;
	font-size: 14px; /* Set to 14px as requested for date labels (Start Date / End Date) */
	font-style: normal;
	font-weight: 700;
	line-height: 21px;
	text-transform: capitalize;
	display: block;
	margin-bottom: 6px;
	min-height: 21px;
}

/* Set location dropdown label size (The label above the dropdown) - NEW BLOCK */
.wcwb-location-field label {
	font-size: 16px; 
}

/* Section: Datepicker nav arrows */
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next {
	height: 36px;
}
.ui-datepicker .ui-datepicker-prev:hover, .ui-datepicker .ui-datepicker-prev:focus,
.ui-datepicker .ui-datepicker-next:hover, .ui-datepicker .ui-datepicker-next:focus {
	background-color: #1D4026 !important;
	color: #ffffff !important;
}