/**
 * Moneysworth Toolkit — interface fixes from the August 2026 UX audit
 *
 * Additive only. Nothing here edits an existing rule; every declaration
 * overrides a child-theme or Divi rule from a later stylesheet. Each block
 * names the audit finding it closes.
 *
 * Rollback: remove the 'mt-ux' enqueue in core-init.php. No other file
 * depends on this one.
 *
 * Findings closed: 12, 16, 17, 18, 19, 21, 24 (and the select half of 06).
 */


/* =========================================================================
 * 16 — Visible keyboard focus, and a skip link
 *
 * The child theme and Divi both set `outline: none` on links and buttons, so
 * tabbing moved an invisible cursor. :focus-visible only paints for keyboard
 * users, so mouse clicks stay unchanged.
 * ====================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.woocommerce input.button:focus-visible,
#top-menu a:focus-visible,
.et_mobile_menu a:focus-visible {
	outline: 3px solid #15467b !important;
	outline-offset: 2px !important;
	border-radius: 2px;
}

/* On the navy top bar and the dark slider, navy-on-navy would vanish. */
#top-header a:focus-visible,
#et-info a:focus-visible,
#et-secondary-menu a:focus-visible,
.et_pb_slider a:focus-visible,
.et-pb-controllers a:focus-visible,
#main-footer a:focus-visible,
.et_pb_bg_layout_dark a:focus-visible {
	outline: 3px solid #ffd24a !important;
	outline-offset: 2px !important;
}

.mt-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 2000000000;
	padding: 14px 22px;
	background: #15467b;
	color: #fff !important;
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
	border-radius: 0 0 4px 0;
}

.mt-skip-link:focus {
	left: 0;
	outline: 3px solid #ffd24a !important;
	outline-offset: -6px;
}


/* =========================================================================
 * 17 — Selects that look like selects (also fixes the select half of 06)
 *
 * The child theme painted `select.orderby` and the variation dropdowns solid
 * blue with white bold text and stripped the native caret, so the catalogue
 * sort control and the "Choose an option" variation picker both read as
 * primary buttons — louder than the actual Add to cart button beside them.
 *
 * One rule covers both, because the child theme styled both in one selector.
 * ====================================================================== */

/* The child theme's `color:#fff !important` sits in a stylesheet that loads
   after this one, so an identical selector would lose the tie. The `body`
   prefix adds a type selector and takes the cascade cleanly. */
body select.orderby,
body.woocommerce div.product form.cart .variations td select,
body.woocommerce div.product form.cart .variations select {
	background: #fff !important;
	background-image:
		url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2315467b' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 12px center !important;
	background-size: 12px 8px !important;
	color: #222 !important;
	font-weight: 400 !important;
	font-size: 15px !important;
	height: auto !important;
	min-height: 44px;
	padding: 8px 38px 8px 12px !important;
	border: 1px solid #9aa4b0 !important;
	border-radius: 3px !important;
	box-shadow: none !important;
	cursor: pointer;
	max-width: 100%;
}

select.orderby:hover,
.woocommerce div.product form.cart .variations select:hover {
	border-color: #15467b !important;
}

/* The sort control sat unlabelled and right-aligned, colliding with the
   category description. Give it room and a resting place. */
.woocommerce .woocommerce-ordering {
	margin: 0 0 1.5em !important;
	float: none !important;
	display: block;      /* inline-block ran the label into the result count */
	clear: both;
}

.woocommerce .woocommerce-ordering::before {
	content: "Sort by";
	display: block;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #5a6672;
	margin-bottom: 4px;
	font-weight: 600;
}

.woocommerce .woocommerce-result-count {
	display: block;
	float: none !important;
	margin: 0 0 .9em !important;
}

/* The variation label was tiny next to a shouting control; even them out. */
.woocommerce div.product form.cart .variations th.label,
.woocommerce div.product form.cart .variations label {
	font-size: 15px;
	font-weight: 600;
	color: #222;
	padding-right: 14px;
}


/* =========================================================================
 * 12 — Cart controls that no longer look switched off
 *
 * The child theme painted the quantity input and the coupon field solid
 * #767676 with white text and no border — the universal look of a disabled
 * input — on the one page where customers adjust their order.
 * ====================================================================== */

/* Same cascade problem as the selects above: the child theme marks every one
   of these declarations !important from a later stylesheet. */
body.woocommerce #content .quantity input.qty,
body.woocommerce .quantity input.qty,
body.woocommerce-page #content .quantity input.qty,
body.woocommerce-page .quantity input.qty,
body.woocommerce-cart table.cart td.actions .coupon .input-text,
/* WooCommerce moved the coupon out of td.actions in recent versions, so pin
   it by ID — the grey fill comes from a later !important rule. */
body.woocommerce #coupon_code,
body.woocommerce-page #coupon_code,
body .coupon #coupon_code {
	background-color: #fff !important;
	color: #222 !important;
	border: 1px solid #9aa4b0 !important;
	border-radius: 3px !important;
	box-shadow: none !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	height: 44px !important;
	min-height: 44px;
	text-align: center;
}

body.woocommerce .quantity input.qty:focus,
body.woocommerce-cart table.cart td.actions .coupon .input-text:focus {
	border-color: #15467b !important;
}

body.woocommerce-cart table.cart td.actions .coupon .input-text {
	text-align: left;
	padding-left: 12px;
}

/* The theme paints the wrapper navy, which reads as a filled control. */
table.qtywrap {
	background: transparent !important;
}

/* Steppers flank the number instead of trailing the CTA.
   DOM order is [quantity][Add to cart][+][−]; flex `order` fixes it
   visually without touching the markup. */
.woocommerce div.product form.cart .variations_button,
.woocommerce div.product form.cart .woocommerce-variation-add-to-cart,
.woocommerce div.product form.cart:not(.variations_form) {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}

.woocommerce div.product form.cart .quantity { order: 2; margin: 0 !important; }
.woocommerce div.product form.cart button.minus,
.woocommerce div.product form.cart input.minus { order: 1; }
.woocommerce div.product form.cart button.plus,
.woocommerce div.product form.cart input.plus  { order: 3; }
.woocommerce div.product form.cart .single_add_to_cart_button { order: 4; margin-left: 8px !important; }

/* 22px was well under any usable target size. */
.woocommerce div.product form.cart button.plus,
.woocommerce div.product form.cart button.minus,
.woocommerce div.product form.cart input.plus,
.woocommerce div.product form.cart input.minus {
	width: 44px !important;
	height: 44px !important;
	min-width: 44px;
	line-height: 1 !important;
	font-size: 20px !important;
	font-weight: 600;
	padding: 0 !important;
	background: #eef1f5 !important;
	color: #15467b !important;
	border: 1px solid #9aa4b0 !important;
	border-radius: 3px !important;
	cursor: pointer;
}

.woocommerce div.product form.cart button.plus:hover,
.woocommerce div.product form.cart button.minus:hover {
	background: #dde4ec !important;
}

/* "Update cart" is disabled until something changes, but looked identical
   either way. Make the difference visible. */
.woocommerce-cart table.cart td.actions .button[name="update_cart"]:disabled,
.woocommerce-cart table.cart td.actions .button[name="update_cart"][disabled] {
	opacity: .45 !important;
	cursor: not-allowed;
	background: #c9cfd6 !important;
	color: #545c66 !important;
}

.woocommerce-cart table.cart td.actions .button[name="update_cart"]:not(:disabled) {
	background: #15467b !important;
	color: #fff !important;
	opacity: 1 !important;
	cursor: pointer;
}

/* Applied automatically by mt-ux.js; shown while totals refresh. */
.woocommerce-cart .mt-qty-busy {
	opacity: .55;
	pointer-events: none;
	transition: opacity .12s ease;
}


/* =========================================================================
 * 07 — Add-to-cart confirmation
 *
 * The bare "View cart" link that WooCommerce drops beside the button
 * overlapped it at 12px. mt-ux.js keeps the header count in sync and raises
 * a toast; this styles both.
 * ====================================================================== */

.woocommerce ul.products li.product .added_to_cart {
	display: inline-block;
	margin: 8px 0 0 !important;
	padding: 6px 12px;
	font-size: 14px !important;
	font-weight: 600;
	color: #15467b !important;
	border: 1px solid #15467b;
	border-radius: 3px;
	text-decoration: none !important;
	white-space: nowrap;
}

.woocommerce ul.products li.product .added_to_cart:hover {
	background: #15467b;
	color: #fff !important;
}

.mt-added-state {
	background: #2e7d4f !important;
	border-color: #2e7d4f !important;
	color: #fff !important;
}

.mt-toast {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 2000000001;
	max-width: min(360px, calc(100vw - 40px));
	background: #fff;
	color: #1c2b3a;
	border: 1px solid #c8d2dc;
	border-top: 4px solid #2e7d4f;
	border-radius: 4px;
	box-shadow: 0 12px 32px rgba(12, 32, 55, .22);
	padding: 16px 18px;
	font-size: 15px;
	line-height: 1.5;
	transform: translateY(14px);
	opacity: 0;
	transition: opacity .18s ease, transform .18s ease;
}

.mt-toast.is-visible { opacity: 1; transform: translateY(0); }

.mt-toast__title { font-weight: 700; display: block; margin-bottom: 2px; }
.mt-toast__item  { display: block; color: #4a5a6b; margin-bottom: 12px; }

.mt-toast__actions { display: flex; gap: 10px; flex-wrap: wrap; }

.mt-toast__actions a {
	flex: 1 1 auto;
	text-align: center;
	padding: 9px 14px;
	border-radius: 3px;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none !important;
	white-space: nowrap;
}

.mt-toast__cart  { background: #fff;    color: #15467b !important; border: 1px solid #15467b; }
.mt-toast__go    { background: #15467b; color: #fff !important;    border: 1px solid #15467b; }
.mt-toast__cart:hover { background: #eef1f5; }
.mt-toast__go:hover   { background: #0f3560; }

.mt-toast__close {
	position: absolute;
	top: 6px;
	right: 8px;
	background: none;
	border: 0;
	font-size: 20px;
	line-height: 1;
	color: #7b8794;
	cursor: pointer;
	padding: 4px 6px;
}

@media (max-width: 600px) {
	.mt-toast { right: 12px; left: 12px; bottom: 12px; max-width: none; }
}


/* =========================================================================
 * 21 — Product cards stop jumping out from under the cursor
 *
 * `.products .product:hover { transform: scale(1.1) }` enlarged the whole
 * card, overlapping its neighbours and reflowing the button being aimed at.
 * The shadow lift the theme already defines does the same job safely.
 * ====================================================================== */

.products .product:hover,
.woocommerce ul.products li.product:hover {
	transform: translateY(-3px) !important;
}

.woocommerce ul.products li.product {
	display: flex;
	flex-direction: column;
	transition: transform .18s ease, box-shadow .18s ease !important;
}

/* Equal-height cards so the CTAs sit on one baseline instead of stepping
   down whenever a product title wraps to two lines. */
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	flex: 1 0 auto;
}

.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	align-self: center;
	margin-top: auto;
}


/* =========================================================================
 * 18 — Slider controls big enough and bright enough to use
 *
 * The hero pagination dots measured 7x7px at 2.75:1 contrast, which put
 * three of the four slides out of reach on a touchscreen.
 * ====================================================================== */

.et-pb-controllers {
	bottom: 18px;
}

.et-pb-controllers a {
	width: 14px !important;
	height: 14px !important;
	margin: 0 6px !important;
	background-color: rgba(255, 255, 255, .55) !important;
	border: 2px solid rgba(0, 0, 0, .35) !important;
	position: relative;
}

/* 14px visible, 30px touch target, no layout shift. */
.et-pb-controllers a::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 30px;
	height: 30px;
	transform: translate(-50%, -50%);
}

.et-pb-controllers .et-pb-active-control {
	background-color: #fff !important;
	border-color: #15467b !important;
}

.et-pb-slider-arrows .et-pb-arrow-prev,
.et-pb-slider-arrows .et-pb-arrow-next {
	opacity: 1 !important;
	color: #fff !important;
	text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
	font-size: 44px !important;
}


/* =========================================================================
 * 19 — Mobile header text people can actually read
 *
 * The child theme drops #et-info to 9px below 767px. That bar carries the
 * toll-free number, the active destination, and the Switch Locations link —
 * the three things a phone user needs most.
 * ====================================================================== */

@media (max-width: 767px) {
	#et-info,
	#et-info a,
	#et-info span,
	#et-info small {
		font-size: 13px !important;
		line-height: 1.4 !important;
	}

	#et-info a {
		display: inline-block;
		padding: 6px 2px;          /* a real tap target on the phone number */
		min-height: 32px;
	}

	#top-header .container {
		padding-top: 2px;
		padding-bottom: 2px;
	}
}

/* The account link was hidden from the mobile menu, leaving no route to an
   existing booking on a phone. The rule that hid it isn't in the child theme
   or Divi's custom CSS box, so this overrides whatever set it. */
@media (max-width: 980px) {
	#et_mobile_nav_menu .et_mobile_menu > li.menu-item,
	#et_mobile_nav_menu .et_mobile_menu > li#menu-item-135160 {
		display: list-item !important;
	}

	#et_mobile_nav_menu .et_mobile_menu > li > a {
		padding-top: 12px !important;
		padding-bottom: 12px !important;
	}
}


/* =========================================================================
 * 24 — Affordances at the dead ends
 *
 * FAQ toggles used a small grey dot as their expand control, which doesn't
 * read as interactive. Swap it for a chevron that rotates on open.
 * ====================================================================== */

.et_pb_toggle_title::before,
.et_pb_accordion_item .et_pb_toggle_title::before {
	content: "\33" !important;          /* ETmodules chevron-down */
	font-family: ETmodules !important;
	font-size: 20px !important;
	font-weight: 400 !important;
	color: #15467b !important;
	background: none !important;
	border-radius: 0 !important;
	width: auto !important;
	height: auto !important;
	transition: transform .2s ease;
	transform-origin: center;
}

.et_pb_toggle_open .et_pb_toggle_title::before {
	transform: rotate(180deg);
}

.et_pb_toggle_title {
	cursor: pointer;
	padding-right: 40px !important;
}

/* 404 and footer blocks injected by mt-ux-fixes.php */
.mt-404 { max-width: 620px; }

.mt-404 ul {
	list-style: none;
	padding: 0;
	margin: 22px 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.mt-404 ul a {
	display: inline-block;
	padding: 9px 15px;
	border: 1px solid #15467b;
	border-radius: 3px;
	color: #15467b !important;
	font-weight: 600;
	text-decoration: none !important;
}

.mt-404 ul a:hover { background: #15467b; color: #fff !important; }

.mt-404 form.search-form {
	display: flex;
	gap: 8px;
	margin-top: 18px;
	max-width: 460px;
}

.mt-404 form.search-form input[type="search"] {
	flex: 1 1 auto;
	height: 46px;
	padding: 0 12px;
	border: 1px solid #9aa4b0;
	border-radius: 3px;
	font-size: 16px;
}

.mt-404 form.search-form button {
	height: 46px;
	padding: 0 20px;
	background: #15467b;
	color: #fff;
	border: 0;
	border-radius: 3px;
	font-weight: 600;
	cursor: pointer;
}

.mt-footer-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 30px;
	padding: 0 0 8px;
	margin: 0 0 18px;
	list-style: none;
}

.mt-footer-nav li { margin: 0; }

.mt-footer-nav a {
	color: #fff !important;
	font-size: 15px;
	text-decoration: none !important;
	opacity: .92;
	display: inline-block;
	padding: 6px 0;
}

.mt-footer-nav a:hover { opacity: 1; text-decoration: underline !important; }

/* Upcoming rentals panel on the account dashboard */
.mt-upcoming {
	border: 1px solid #c8d2dc;
	border-top: 4px solid #15467b;
	border-radius: 4px;
	padding: 20px 22px;
	margin: 0 0 28px;
	background: #fbfcfd;
}

.mt-upcoming h3 {
	margin: 0 0 14px;
	font-size: 18px;
	font-weight: 700;
	color: #15467b;
}

.mt-upcoming__row {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 28px;
	padding: 12px 0;
	border-top: 1px solid #e4e9ee;
}

.mt-upcoming__row:first-of-type { border-top: 0; }

.mt-upcoming__dates  { font-weight: 700; font-variant-numeric: tabular-nums; }
.mt-upcoming__where  { color: #4a5a6b; }
.mt-upcoming__items  { flex-basis: 100%; color: #4a5a6b; font-size: 14px; }
.mt-upcoming__empty  { color: #4a5a6b; margin: 0; }


/* =========================================================================
 * 09 — Order review summary (markup from mt-ux-fixes.php)
 * ====================================================================== */

.mt-review-summary {
	border: 1px solid #c8d2dc;
	border-radius: 4px;
	margin: 0 0 22px;
	overflow: hidden;
}

.mt-review-summary__head {
	background: #eef2f6;
	padding: 10px 16px;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-weight: 700;
	color: #3c4f63;
}

.mt-review-summary dl {
	display: grid;
	grid-template-columns: minmax(140px, auto) 1fr;
	gap: 0;
	margin: 0;
}

.mt-review-summary dt,
.mt-review-summary dd {
	margin: 0;
	padding: 11px 16px;
	border-top: 1px solid #e4e9ee;
	font-size: 15px;
}

.mt-review-summary dt {
	font-weight: 600;
	color: #4a5a6b;
	background: #fafbfc;
}

.mt-review-summary dd { color: #1c2b3a; }

.mt-review-summary .mt-review-note {
	display: block;
	font-size: 13px;
	color: #4a5a6b;
	margin-top: 3px;
}

.mt-review-summary .mt-review-missing { color: #9d2f24; font-weight: 600; }

@media (max-width: 600px) {
	.mt-review-summary dl { grid-template-columns: 1fr; }
	.mt-review-summary dt { border-bottom: 0; padding-bottom: 0; background: none; }
	.mt-review-summary dd { border-top: 0; padding-top: 4px; }
}


/* =========================================================================
 * Motion preference
 * ====================================================================== */

@media (prefers-reduced-motion: reduce) {
	.mt-toast,
	.et_pb_toggle_title::before,
	.woocommerce ul.products li.product {
		transition: none !important;
	}

	.products .product:hover,
	.woocommerce ul.products li.product:hover {
		transform: none !important;
	}
}