:root {
	--metro-rq-bg: #1a1a1a;
	--metro-rq-bg-field: #262626;
	--metro-rq-text: #ffffff;
	--metro-rq-text-muted: #cfcfcf;
	--metro-rq-gold: #ffd700;
	--metro-rq-gold-dark: #d4af00;
	--metro-rq-border: rgba(255, 215, 0, 0.35);
}

/* Transparent by design - the site's own page background is dark now, so the widget blends
   directly into it rather than sitting in its own boxed card. */
.metro-rental-quote-form,
.metro-rental-quote-page {
	background: transparent;
	color: var(--metro-rq-text) !important;
}

.metro-rental-quote-form {
	margin-top: 1.5em;
	padding: 1.5em 0;
}

.metro-rental-quote-page {
	padding: 0.5em 0;
}

.metro-rental-quote-form h4 {
	margin-top: 0;
	color: var(--metro-rq-gold);
	letter-spacing: 0.02em;
}

.metro-rq-note {
	font-size: 0.9em;
	color: var(--metro-rq-text-muted);
}

.metro-rental-quote-form label,
.metro-rq-contact-form label {
	display: block;
	margin-bottom: 0.25em;
	color: var(--metro-rq-text);
}

.metro-rental-quote-form input.metro-rq-pickup-date {
	margin-bottom: 0.5em;
	padding: 0.5em;
	cursor: pointer;
	background: var(--metro-rq-bg-field) !important;
	color: var(--metro-rq-text) !important;
	border: 1px solid var(--metro-rq-border) !important;
	border-radius: 4px;
}

.metro-rq-range-display {
	font-size: 0.9em;
	font-weight: 600;
	color: var(--metro-rq-gold);
	margin: 0 0 0.75em;
	min-height: 1.2em;
}

.metro-rq-message {
	font-size: 0.9em;
	margin-top: 0.5em;
	color: var(--metro-rq-text-muted);
}

/* Buttons */
.metro-rental-quote-form .button,
.metro-rq-contact-form .button,
.metro-rq-table .button {
	background: var(--metro-rq-gold);
	color: #1a1a1a;
	border: none;
	border-radius: 4px;
	padding: 0.6em 1.4em;
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.1s ease;
}

.metro-rental-quote-form .button:hover,
.metro-rq-contact-form .button:hover,
.metro-rq-table .button:hover {
	background: var(--metro-rq-gold-dark);
	transform: translateY(-1px);
}

.metro-rental-quote-form .button:disabled {
	background: #4a4a4a;
	color: #999;
	cursor: not-allowed;
	transform: none;
}

/* Quote review table - border: none strips the theme/WooCommerce default table border,
   leaving only the intentional border-bottom rules below for row separation. */
.metro-rq-table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 1.5em;
	border: none !important;
}

.metro-rq-table th,
.metro-rq-table td {
	border: none !important;
}

.metro-rq-table th {
	text-align: left;
	padding: 0.6em 0.5em;
	border-bottom: 2px solid var(--metro-rq-border) !important;
	font-size: 0.85em;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.metro-rq-table td {
	text-align: left;
	padding: 0.6em 0.5em;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.metro-rq-totals {
	text-align: right;
	margin-bottom: 1.5em;
}

.metro-rq-totals strong {
	font-size: 1.1em;
}

/*
 * Divi applies its own paragraph/link text color with a selector specific and !important
 * enough to beat a plain single class, which is why th/td/totals text (and WooCommerce's
 * own .woocommerce-Price-amount spans) kept rendering in the theme's colors even with
 * !important on the class alone. Repeating the page's own class as an ancestor, plus the
 * element type, pushes our specificity above Divi's without resorting to an ID selector.
 */
.metro-rental-quote-page .metro-rq-table th,
.metro-rental-quote-page .metro-rq-table th * {
	color: var(--metro-rq-gold) !important;
}

.metro-rental-quote-page .metro-rq-table td,
.metro-rental-quote-page .metro-rq-table td *,
.metro-rental-quote-page p.metro-rq-totals,
.metro-rental-quote-page p.metro-rq-totals * {
	color: var(--metro-rq-text) !important;
}

.metro-rental-quote-page p.metro-rq-totals strong,
.metro-rental-quote-page p.metro-rq-totals strong * {
	color: var(--metro-rq-gold) !important;
}

/* Button text and the product link need to win over the td-wildcard color rule above -
   higher specificity (class chain + element) beats it regardless of source order. */
.metro-rental-quote-page .metro-rq-table td .button {
	color: #1a1a1a !important;
}

.metro-rental-quote-page .metro-rq-table td a {
	color: var(--metro-rq-gold) !important;
	text-decoration: none;
}

.metro-rental-quote-page .metro-rq-table td a:hover {
	text-decoration: underline;
}

.metro-rental-quote-form input.metro-rq-qty,
.metro-rq-table .metro-rq-qty-input {
	width: 4em;
	padding: 0.4em;
	background: var(--metro-rq-bg-field) !important;
	color: var(--metro-rq-text) !important;
	border: 1px solid var(--metro-rq-border) !important;
	border-radius: 4px;
}

.metro-rental-quote-form input.metro-rq-qty {
	display: block;
	margin-bottom: 0.75em;
}

.metro-rq-qty-form {
	margin: 0;
}

.metro-rq-contact-form label {
	margin-top: 0.75em;
}

.metro-rq-contact-form input,
.metro-rq-contact-form textarea {
	display: block;
	width: 100%;
	max-width: 480px;
	background: var(--metro-rq-bg-field) !important;
	color: var(--metro-rq-text) !important;
	border: 1px solid var(--metro-rq-border) !important;
	border-radius: 4px;
	padding: 0.5em;
}

.metro-rq-contact-form button[type="submit"] {
	display: block;
	margin-top: 1.5em;
}

.metro-rq-contact-form input::placeholder,
.metro-rq-contact-form textarea::placeholder,
.metro-rental-quote-form input.metro-rq-pickup-date::placeholder {
	color: var(--metro-rq-text-muted);
	opacity: 1;
}

.metro-rq-contact-form input:focus,
.metro-rq-contact-form textarea:focus,
.metro-rental-quote-form input.metro-rq-pickup-date:focus {
	outline: none;
	border-color: var(--metro-rq-gold);
	box-shadow: 0 0 0 2px rgba(255, 215, 0, 0.25);
}

.metro-rq-notice {
	padding: 1em;
	background: var(--metro-rq-bg-field);
	border: 1px solid var(--metro-rq-gold);
	border-radius: 4px;
	margin-bottom: 1.5em;
	color: var(--metro-rq-text);
}

/* jQuery UI datepicker, dark themed to match.
   z-index is !important because jQuery UI sets an inline z-index on this element at
   runtime (computed from the input's own stacking context - measured as low as 3 on
   the live site), which would otherwise render the calendar underneath a mobile sticky
   header or other fixed/absolute elements on the page. */
.ui-datepicker {
	background: var(--metro-rq-bg);
	color: var(--metro-rq-text);
	border: 1px solid var(--metro-rq-gold);
	border-radius: 4px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
	padding: 0.5em;
	width: 17em;
	z-index: 999999 !important;
}

.ui-datepicker-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 0.5em;
	color: var(--metro-rq-gold);
	font-weight: 700;
}

.ui-datepicker-prev,
.ui-datepicker-next {
	cursor: pointer;
	padding: 0.2em 0.5em;
	color: var(--metro-rq-gold);
}

.ui-datepicker-calendar {
	width: 100%;
	border-collapse: collapse;
}

.ui-datepicker-calendar th {
	font-size: 0.8em;
	padding: 0.3em;
	text-align: center;
	color: var(--metro-rq-text-muted);
}

.ui-datepicker-calendar td {
	text-align: center;
	padding: 0;
}

.ui-datepicker-calendar td a,
.ui-datepicker-calendar td span {
	display: block;
	padding: 0.4em;
	text-decoration: none;
	color: var(--metro-rq-text);
	border-radius: 3px;
}

.ui-datepicker-calendar td.ui-datepicker-unselectable span {
	color: #555;
}

.ui-datepicker-calendar td a:hover {
	background: rgba(255, 215, 0, 0.2);
}

/* Wed-Sat rental range highlight, applied via beforeShowDay */
.ui-datepicker-calendar td.metro-rq-range-day span,
.ui-datepicker-calendar td.metro-rq-range-day a {
	background: rgba(255, 215, 0, 0.25);
	color: var(--metro-rq-text);
}

.ui-datepicker-calendar td.metro-rq-pickup-day a {
	background: var(--metro-rq-gold);
	color: #1a1a1a;
	font-weight: 700;
}