/*
 * Mobile refinements.
 *
 * Loaded LAST in frontend.layouts.master (after @stack('styles')) so it wins ties over page
 * stylesheets. Everything in here is wrapped in a max-width media query: desktop (>= 992px)
 * rendering must not be affected by anything in this file - with ONE deliberate exception, the
 * "FONT FAMILY (all devices)" block, which only sets font-family (no sizes/weights/layout) so
 * that text never falls back to a browser default serif/Verdana on any device.
 *
 * Breakpoints follow the existing responsive.css: 991px (tablet and below) and 767px (phones).
 * Sections are grouped per page / area so each can be reviewed on its own.
 */

/* ==========================================================================
   GLOBAL (phones)
   ========================================================================== */
@media only screen and (max-width: 767px) {

	/* iOS Safari zooms the whole page when a field with a font-size under 16px is focused.
	   The viewport meta used to hide this by disabling zoom altogether. */
	input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
	select,
	textarea,
	.form-control,
	.form-select {
		/* !important: common.css sets .form-control to 14px !important */
		font-size: 16px !important;
	}

	/* Footer link lists: give each link a comfortable ~44px touch row instead of a 20px text line */
	footer ul li {
		margin-bottom: 0;
	}
	footer ul li a {
		display: inline-block;
		padding: 10px 0;
	}
	footer ul.contact-links li img {
		top: 18px;
	}

	/* Top promo banner close button: the visible glyph stays small, the hit area grows */
	.header-top .container .close {
		width: 36px;
		height: 36px;
		display: flex;
		align-items: center;
		justify-content: center;
		top: 0;
	}
}

/* ==========================================================================
   FILTER DRAWER - book-now, red-hot deals (phones)
   The drawer markup/JS (.web-filters toggles .left-filter-box.show) already existed, but the
   page stylesheets re-declared .left-filter-box as an inline block, so the whole filter panel
   was stacked above the results. Re-assert the off-canvas drawer here.
   ========================================================================== */
@media only screen and (max-width: 767px) {
	.left-filter-box {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 88%;
		max-width: 360px;
		height: 100%;
		height: 100dvh;
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		border-radius: 0;
		border-width: 0 1px 0 0;
		padding: 56px 18px 24px;
		z-index: 10000; /* above the floating chat button (z-index 9999) */
		transform: translateX(-105%);
		visibility: hidden;
		transition: transform .3s ease, visibility 0s linear .3s;
		box-shadow: none;
	}
	.left-filter-box.show {
		z-index: 10000; /* responsive.css drops this to 99 while open, so it jumped on close */
		transform: translateX(0);
		visibility: visible;
		transition: transform .3s ease, visibility 0s;
		box-shadow: 8px 0 30px rgba(0, 0, 0, .25);
	}

	/* The page section that holds the drawer fades in with AOS, which leaves a transform on it. A
	   transformed ancestor becomes the containing block for position:fixed, so the drawer was pinned
	   to that section instead of the screen. responsive.css cancels the transform only while the
	   drawer is open (.overlay-blur), so the moment it started closing the drawer jumped down below
	   the banner and slid out behind it. Once the fade-in has run the transform is an identity, so
	   drop it for good on pages that have the drawer. */
	.inner-body[data-aos].aos-animate:has(.left-filter-box) {
		transform: none;
	}

	/* The close X: a real 44px target pinned to the drawer's top-right */
	.left-filter-box .close-filter {
		display: flex;
		top: 8px;
		right: 8px;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		font-size: 26px;
		padding: 0;
	}

	/* Sticky "Show results" button at the foot of the drawer */
	.left-filter-box .filter-apply-btn {
		display: block;
		position: sticky;
		bottom: 0;
		width: 100%;
		margin-top: 16px;
		min-height: 48px;
	}

	/* The "Filters" opener above the results */
	.web-filters {
		width: 100%;
		min-height: 48px;
		margin: 0 0 16px;
		padding: 10px 16px;
		border: 1px solid #c9dccf;
		font-size: 16px;
		color: #1f2e24;
		cursor: pointer;
	}

	/* Lock page scroll while the drawer is open without jumping the page to the top
	   (the existing .overlay-blur makes <body> position:fixed which resets scroll). */
	body.overlay-blur {
		position: static;
		height: auto;
		overflow: hidden;
	}
}

/* The Show-results button is only meaningful inside the phone drawer */
@media only screen and (min-width: 768px) {
	.filter-apply-btn {
		display: none;
	}
}

/* ==========================================================================
   DATE / WEATHER STRIP - book-now (phones)
   responsive.css pins every .nav-tabs to height:53px; the weather cards are 72px tall so their
   forecast line was clipped. Let the strip size to the cards and scroll sideways.
   ========================================================================== */
@media only screen and (max-width: 767px) {
	#weather-widget-tab {
		height: auto;
		gap: 10px;
		padding-bottom: 6px;
		margin-bottom: 16px;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
	}
	#weather-widget-tab li {
		flex: 0 0 auto;
		width: auto;
		scroll-snap-align: start;
	}
	#weather-widget-tab .weather-card {
		width: 112px;
		min-height: 76px;
		padding: 8px 6px;
		cursor: pointer;
	}
	#weather-widget-tab .weather-card .weather-info {
		flex-wrap: wrap;
		gap: 0;
	}
	#weather-widget-tab .weather-card .weather-info .temp {
		white-space: normal;
		text-align: center;
		font-size: 11px;
		line-height: 15px;
	}
}

/* ==========================================================================
   ACCOUNT AREA - profile, diary, package diary, buddies, balances, payments, favourites,
   tee-time alerts, integrations (phones)
   ========================================================================== */
@media only screen and (max-width: 767px) {

	/* These pages opened with a ~600px "Our Courses" hero + course search before any account
	   content. Drop it on phones so the account menu and content are on the first screen
	   (the header still has the logo/home link and the course search lives on its own pages). */
	.inner-banner:has(+ .inner-body #profileTabs) {
		display: none;
	}
	.inner-banner + .inner-body:has(#profileTabs) {
		padding-top: 16px;
	}

	/* Account menu: a sideways-scrolling strip of nine items hid most of the menu with no hint it
	   scrolled. main.js adds a button showing the current section; tapping it expands the full
	   list as a vertical menu. (Only hidden once the button exists, so no-JS still shows the menu.) */
	.account-menu-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		min-height: 52px;
		padding: 10px 16px;
		background: #fff;
		border: 1px solid #dce5df;
		border-radius: 8px;
		color: #1f2e24;
		font-size: 16px;
		font-weight: 600;
		line-height: 20px;
		text-align: left;
		cursor: pointer;
	}
	.account-menu-toggle .current {
		display: flex;
		align-items: center;
		gap: 8px;
		min-width: 0;
	}
	.account-menu-toggle .current i,
	.account-menu-toggle .current svg {
		flex-shrink: 0;
	}
	.account-menu-toggle .chevron {
		font-size: 18px;
		transition: transform .2s ease;
	}
	.sidebar-left.menu-open .account-menu-toggle .chevron {
		transform: rotate(180deg);
	}

	.sidebar-left.has-account-toggle #profileTabs {
		display: none !important;
	}
	.sidebar-left.has-account-toggle.menu-open #profileTabs {
		display: flex !important;
		flex-direction: column !important;
		overflow: visible;
		gap: 4px;
		margin-top: 8px;
	}
	#profileTabs .menu-item {
		flex: 0 0 auto;
		min-height: 48px;
		margin-bottom: 0;
	}
	.sidebar-left.has-account-toggle.menu-open #profileTabs .menu-item {
		width: 100%;
		white-space: normal;
	}

	/* Plain data tables with no responsive wrapper (e.g. Payments) were pushing the whole page
	   sideways. Keep the table's natural width and let it scroll inside its own box. */
	.paymentTab #no-more-tables,
	.paymentTab .inner-data {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		max-width: 100%;
	}
}

/* Profile (view mode): the 4-column details table was cut off at the right edge and needed a
   sideways scroll to read. Show the fields as a two-up grid instead. */
@media only screen and (max-width: 767px) {
	#profile_view_mode table,
	#profile_view_mode table tbody {
		display: block;
		width: 100%;
	}
	#profile_view_mode table tr {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 4px 14px;
		padding: 8px 0;
		border-bottom: 1px solid #edf1ee;
	}
	#profile_view_mode table td {
		display: block;
		min-width: 0;
		padding: 5px 0;
		overflow-wrap: anywhere;
	}
	#profile_view_mode table td label {
		font-size: 14px;
		margin-bottom: 2px;
	}
}

/* ==========================================================================
   AUTH - login, register, forgot/reset password (phones)
   These pages have their own <head> (not the master layout) and load this file explicitly.
   ========================================================================== */
@media only screen and (max-width: 767px) {

	/* The card was 70% of the screen with 30px padding, leaving ~200px for the fields. Use the width. */
	.right form,
	.right .outer-box {
		width: calc(100% - 32px);
		max-width: 480px;
		padding: 0 20px 24px;
	}

	/* Taller, easier fields and buttons */
	.right form .form-control {
		min-height: 48px;
	}
	.right form .common-btn,
	.right form button[type="submit"] {
		min-height: 48px;
		font-size: 16px;
	}

	/* Remember-me / Forgot password: keep on one tidy row with real tap targets */
	.right form .form-row .forgot,
	.right form .form-row.last p a {
		display: inline-block;
		padding: 6px 0;
	}
	.right form .form-row .custom-check {
		min-height: 32px;
		align-items: center;
	}
	.right form .form-row .custom-check .checkmark {
		width: 20px;
		height: 20px;
	}

	/* Forgot-password Email/Mobile radios and the "Back to Login" link */
	.right form .radioInput {
		width: 20px;
		height: 20px;
		margin-right: 6px;
	}
	.right form .back-to-login {
		padding: 10px 6px;
		min-height: 40px;
		align-items: center;
	}

	/* Back-to-home pill: bigger target */
	.login-signup .back-to-home {
		min-height: 40px;
		display: inline-flex;
		align-items: center;
	}
}

/* ==========================================================================
   CONTACT US + legacy /contact (phones)
   ========================================================================== */
@media only screen and (max-width: 767px) {
	/* The stacked inputs touched each other with no gap (validation text is absolutely positioned
	   under each, so leave room for it). */
	.contactForm .row {
		margin-bottom: 0;
	}
	.contactForm .inner {
		margin-bottom: 22px;
	}
	form.questionForm.contactForm {
		padding: 20px 16px;
	}
	.contactForm .txtHeight,
	.contactForm .contact-query-type {
		min-height: 48px;
	}
	.contactForm .btnSubmit {
		width: 100%;
		min-height: 48px;
	}

	/* /contact (older layout): a bare .row directly under <main> bled 12px off both sides */
	main > .row {
		margin-left: 0;
		margin-right: 0;
		padding: 0 12px;
	}
}

/* ==========================================================================
   HEADER PROFILE MENU (touch devices and tablets)
   Desktop shows the menu on :hover; touch needs a tap-to-open state (see main.js).
   ========================================================================== */
@media (hover: none), (max-width: 991px) {
	.user-dropdown.open .dropdown-menu-custom {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
	/* A tap leaves :hover "stuck" on touch screens, which would keep the menu open after the
	   second tap. Here only the .open class (toggled by tapping) controls visibility. */
	.user-dropdown:hover:not(.open) .dropdown-menu-custom {
		opacity: 0;
		visibility: hidden;
		transform: translateY(10px);
	}
	.user-dropdown > .user-menu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 36px;
		min-height: 36px;
	}
}
/* The icon row (heart, bell, profile) sat at z-index 10, under the open hamburger menu (99), so the
   profile popup opened behind it. Keep the whole row above the menu panel. */
@media only screen and (max-width: 991px) {
	header .last {
		z-index: 100;
	}
}

/* ==========================================================================
   FONT FAMILY (all devices) - the only block here that is not media-scoped
   Font-family only; no sizes, weights or layout. On Windows desktop both rules resolve to the
   same face the page already used, so nothing visibly changes there.
   ========================================================================== */
/* jQuery UI's datepicker hard-codes Verdana, so every date picker (home, listings, diary) was
   in a different typeface to the rest of the site. */
.ui-widget,
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button,
.ui-datepicker,
.ui-datepicker th,
.ui-datepicker td,
.ui-datepicker select {
	font-family: "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}
/* Policy/terms pages (CMS content) carry inline font-family: "Segoe UI" with NO fallback, so on
   any device without Segoe UI (every phone, every Mac) that text dropped to the browser's
   default serif instead of the site font. Defer to the site stack. */
.typography [style*="font-family"] {
	font-family: "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* ==========================================================================
   TYPOGRAPHY SCALE (phones)
   ========================================================================== */
@media only screen and (max-width: 767px) {

	/* Default heading sizes were the desktop ones: an h2 (36px) rendered BIGGER than the page h1
	   (32px in banners), and h3 was 30px. Element selectors only, so any component that sets its
	   own heading size (cards, banners, course detail...) is unaffected. */
	h1 { font-size: 32px; line-height: 38px; }
	/* The home hero headline got its 40px from the old generic h1 size - keep it as designed */
	.home-banner h1,
	.home-banner .banner-text h1 { font-size: 40px; line-height: 48px; }
	h2 { font-size: 28px; line-height: 34px; }
	h3 { font-size: 24px; line-height: 30px; }
	h4 { font-size: 20px; line-height: 26px; }

	/* Course card titles were 14px/700 on home, RedHot Deals, category and favourites but
	   18px/600 on rankings and the all-courses list. One size and weight for the same thing. */
	.golf-card .top-row h3,
	.golf-card .inner-text h3 {
		font-size: 16px;
		line-height: 22px;
		font-weight: 700;
	}

	/* Buttons: 400/500/600 weights were mixed (e.g. "Show results" 500 vs "Book Now" 600) and the
	   card secondary buttons were 12px. */
	.common-btn,
	button.common-btn,
	a.common-btn {
		font-weight: 600;
	}
	.golf-card .btn-group .common-btn,
	.golf-card .inner-text .btn-group .common-btn {
		font-size: 14px;
		line-height: 20px;
	}
	/* RedHot Deals "Book Now" was 13px; every other course card's Book Now is 16px */
	.bottom-fix .action-btns .common-btn {
		font-size: 16px;
	}

	/* Anything under 12px is too small to read comfortably on a phone */
	small[id^="review-count"],
	.badge {
		font-size: 12px;
	}

	/* Bootstrap's h5/h6 defaults were 22px/400-600 in one place and 12-20px in another */
	h5 { font-size: 18px; line-height: 24px; font-weight: 600; }
	h6 { font-size: 16px; line-height: 22px; font-weight: 600; }
	.tta-empty h5 { font-size: 20px !important; line-height: 26px; font-weight: 600 !important; }
	.tta-header p { font-size: 14px !important; line-height: 20px; }

	/* Policy / terms / cancellation pages: the same legal text was rendered at four different
	   heading scales depending on the page, and list items inherited the body's 1.1 line-height
	   (16px text on 18px lines). One scale, readable line-height. */
	/* !important on weight: the CMS content ships inline font-weight:600 on some headings only */
	.typography h1 { font-size: 28px; line-height: 34px; font-weight: 700 !important; }
	.typography h2 { font-size: 22px; line-height: 28px; font-weight: 700 !important; }
	.typography h3 { font-size: 20px; line-height: 26px; font-weight: 700 !important; }
	.typography h4,
	.typography .sections h4 { font-size: 18px; line-height: 24px; font-weight: 700 !important; }
	.typography p,
	.typography li {
		font-size: 16px;
		line-height: 26px;
		font-weight: 400;
	}

	/* Date picker: 12px day numbers and 12px selects (which also makes iOS zoom in on focus) */
	.ui-datepicker td a,
	.ui-datepicker td span {
		font-size: 15px;
		padding: 9px 4px !important;
	}
	.ui-datepicker th {
		font-size: 13px !important;
	}
	.ui-datepicker .ui-datepicker-title select {
		font-size: 16px !important;
		padding: 6px !important;
	}
	.ui-datepicker .ui-datepicker-prev,
	.ui-datepicker .ui-datepicker-next {
		width: 32px !important;
		height: 32px !important;
	}
}

/* ==========================================================================
   BOOK NOW - course cards and tee-time grid (phones)
   courses-listing.css loads after responsive.css and re-declared several of the phone rules
   there (figure width, grid), so on a phone the card image was stuck at 230px (a third of the
   card empty) and the tee times sat in two 110px columns with a blank strip beside them.
   ========================================================================== */
@media only screen and (max-width: 767px) {

	/* Image spans the card */
	.golf-card.horizontal figure {
		width: 100%;
		height: 200px;
		border-radius: 10px 10px 0 0;
	}

	/* Course name + location first, then price + rating (the name is what people scan for),
	   all left-aligned. */
	.golf-card.horizontal .golf-top .inner-text {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
		padding: 16px;
		gap: 10px;
	}
	.golf-card.horizontal .inner-text .bottom-row {
		order: -1;
		width: 100%;
		align-items: flex-start;
		gap: 4px;
	}
	.golf-card.horizontal .inner-text .top-row {
		width: 100%;
		margin: 0;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	}
	.golf-card.horizontal .inner-text .top-row h3 {
		margin: 0;
	}
	.golf-card.horizontal .inner-text .bottom-row h4 {
		font-size: 18px;
		line-height: 24px;
		font-weight: 700;
	}
	.golf-card.horizontal .inner-text .tags {
		gap: 8px;
	}

	/* Tee-time block: left aligned like the Front/Back Nine headings under it, and the two
	   actions share the row at a proper tap height. */
	.golf-card.horizontal .golf-bottom {
		padding: 16px;
	}
	.golf-card.horizontal .golf-bottom .tee-header {
		align-items: stretch;
		text-align: left;
		margin-bottom: 14px;
	}
	.golf-card.horizontal .golf-bottom .tee-header h4 {
		display: flex;
		align-items: center;
		gap: 8px;
	}
	.golf-card.horizontal .golf-bottom .tee-header .btn-group {
		display: flex;
		width: 100%;
		gap: 10px;
	}
	.golf-card.horizontal .golf-bottom .tee-header .btn-group a,
	.golf-card.horizontal .golf-bottom .tee-header .btn-group button {
		flex: 1 1 0;
		min-height: 44px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	/* Tee times: a 3-up grid that uses the full width, with readable (and tappable) cells */
	.TT-slot {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
	}
	.TT-slot .tee {
		flex: none;
		width: 100%;
		min-height: 64px;
	}
	.tee-times .tee.blue strong,
	.tee-times .tee.red strong {
		font-size: 15px;
		line-height: 18px;
	}
	.tee-times .tee.blue span,
	.tee-times .tee.red span {
		font-size: 13px;
		line-height: 16px;
	}
	.tee-times .tee small {
		font-size: 12px;
	}
}

/* Tee-time alert (bell) dropdown on course cards: 11px day chips and 11-12px text were too
   small to read or hit on a phone. Selectors are boosted because the widget's own <style>
   block is emitted later in the page than this file. */
@media only screen and (max-width: 767px) {
	body .tee-alert-dropdown {
		width: 288px;
		max-width: calc(100vw - 24px);
		padding: 16px;
	}
	body .tee-alert-dropdown p.tee-alert-title {
		font-size: 15px;
		line-height: 20px;
		font-weight: 600;
	}
	body .tee-alert-days {
		gap: 6px;
	}
	body .tee-alert-days .day-toggle {
		min-width: 38px;
		min-height: 36px;
		padding: 6px 10px;
		font-size: 13px;
	}
	body .tee-alert-field label {
		font-size: 13px;
		margin-bottom: 4px;
	}
	body .tee-alert-field select {
		min-height: 44px;
		padding: 8px;
	}
	body .tee-alert-channel {
		font-size: 13px;
	}
	body .tee-alert-save {
		min-height: 44px;
		font-size: 15px;
	}
}

/* Book Now: keep the "Available Tee Times / View all / Book Now" bar pinned to the top of the
   screen while scrolling through that course's tee times. A long grid used to leave the Book Now
   button far above the slot you just picked. */
@media only screen and (max-width: 767px) {
	.golf-card.horizontal .golf-bottom .tee-header {
		position: sticky;
		top: 0;
		z-index: 6;
		background: #fff;
		padding: 10px 0;
		margin-bottom: 4px;
		box-shadow: 0 1px 0 #e6ece8;
	}
}

/* ==========================================================================
   BOOK NOW - Front / Back Nine collapse behind chevrons (phones only)
   Toggled by main.js (.is-open). Closed by default so a course card isn't a wall of times.
   ========================================================================== */
@media only screen and (max-width: 767px) {
	.golf-card.horizontal .nine-section {
		border: 1px solid #dce5df;
		border-radius: 8px;
		padding: 0 14px;
		margin-bottom: 10px;
		display: block;
	}
	.golf-card.horizontal .nine-section > h4 {
		display: flex;
		align-items: center;
		gap: 8px;
		min-height: 48px;
		margin: 0;
		-webkit-tap-highlight-color: transparent;
	}
	.golf-card.horizontal .nine-section:has(> .nine-body) > h4 {
		cursor: pointer;
	}
	.golf-card.horizontal .nine-section:has(> .nine-body) > h4::after {
		content: "\F282"; /* bootstrap-icons chevron-down */
		font-family: "bootstrap-icons";
		font-size: 16px;
		font-weight: 400;
		line-height: 1;
		color: #1f2e24;
		transition: transform .2s ease;
	}
	.golf-card.horizontal .nine-section.is-open:has(> .nine-body) > h4::after {
		transform: rotate(180deg);
	}
	.golf-card.horizontal .nine-section > h4 .nine-count {
		margin-left: auto;
		min-width: 24px;
		padding: 2px 8px;
		border-radius: 12px;
		background: #e3f2e8;
		color: #0f5729;
		font-size: 12px;
		line-height: 16px;
		font-weight: 600;
		text-align: center;
	}
	/* Smooth open/close. main.js animates .nine-body between 0 and its measured pixel height, then
	   hands back to "auto" (so it keeps fitting if the content changes). CSS only defines the
	   resting states: closed = 0, open = auto. (A pure-CSS 0fr -> 1fr grid transition was tried and
	   reveals the content on a different curve to the box in Chrome, leaving a blank gap.) */
	.golf-card.horizontal .nine-section .nine-body {
		height: 0;
		overflow: hidden;
		transition: height .3s ease;
	}
	.golf-card.horizontal .nine-section.is-open .nine-body {
		height: auto;
	}
	.golf-card.horizontal .nine-section .nine-body-inner {
		min-height: 0;
		overflow: hidden;
		opacity: 0;
		visibility: hidden;
		/* hide from screen readers/tab order only after the collapse has finished */
		transition: opacity .25s ease, visibility 0s linear .3s;
	}
	.golf-card.horizontal .nine-section.is-open .nine-body-inner {
		opacity: 1;
		visibility: visible;
		transition: opacity .3s ease .05s, visibility 0s;
	}
	.golf-card.horizontal .nine-section .TT-slot {
		padding: 12px 0 14px;
	}
	/* the divider under the heading fades in rather than popping in */
	.golf-card.horizontal .nine-section > h4 {
		border-bottom: 1px solid transparent;
		transition: border-color .3s ease;
	}
	.golf-card.horizontal .nine-section.is-open > h4 {
		border-bottom-color: #edf1ee;
	}
}

@media (prefers-reduced-motion: reduce) {
	.golf-card.horizontal .nine-section .nine-body,
	.golf-card.horizontal .nine-section .nine-body-inner,
	.golf-card.horizontal .nine-section > h4,
	.golf-card.horizontal .nine-section > h4::after {
		transition: none;
	}
}

/* The count pill only exists for the collapsed phone layout */
@media only screen and (min-width: 768px) {
	.nine-count {
		display: none;
	}
}

/* ==========================================================================
   HAMBURGER MENU slide-out (phones + tablets, where the menu is off-canvas)
   responsive.css animated it with `transition: .6s linear all`: twice as slow as the rest of the
   site's 0.3s ease motion, and a constant-speed slide with no easing. It also stayed
   visibility:visible while off-screen, so keyboard focus / screen readers could land in a menu
   nobody could see.
   ========================================================================== */
@media only screen and (max-width: 991px) {
	header .header-right {
		visibility: hidden;
		transition: transform .3s ease, opacity .3s ease, visibility 0s linear .3s;
	}
	header .header-right.show {
		visibility: visible;
		transition: transform .3s ease, opacity .3s ease, visibility 0s;
	}
}
@media (prefers-reduced-motion: reduce) {
	header .header-right,
	header .header-right.show {
		transition: none;
	}
}

/* ==========================================================================
   TRAVEL PACKAGE DETAILS: gallery, then booking summary, then the description tabs on phones
   The summary sits in the right column on desktop, so it landed below the gallery, tabs and
   long description on a phone, leaving the price and Continue button a long scroll away.
   The left column wrappers are flattened (display: contents) so the summary can slot in between
   the gallery and the tabs; each promoted block gets the column gutter back as padding.
   ========================================================================== */
@media only screen and (max-width: 767px) {
	.package-detail-row {
		display: flex;
		flex-direction: column;
	}
	.package-detail-row > .col-md-7,
	.package-detail-row .left-area {
		display: contents;
	}
	.package-detail-row .swiper-container.slider,
	.package-detail-row .swiper-container.slider-thumbnail,
	.package-detail-row .tabbing-data {
		width: 100%;
		padding-right: calc(var(--bs-gutter-x) * .5);
		padding-left: calc(var(--bs-gutter-x) * .5);
	}
	.package-detail-row .tabbing-data {
		order: 2;
		margin: 24px 0 35px;
	}
	.package-detail-row > .col-md-5 {
		order: 1;
		margin: 24px 0 0;
	}
	.package-detail-row .booking-summary-card {
		margin-bottom: 0;
	}
}

/* ==========================================================================
   TAB STRIPS AS CHEVRON SECTIONS (phones) - travel package details + course page
   (phones only). The tab strip scrolled sideways; here the strip is hidden and every pane is
   shown as a bordered section that opens/closes with the same 0.3s height animation as the
   Front/Back Nine sections (main.js: mtSlideSection). Headings only exist in the markup for this;
   hidden everywhere else.
   ========================================================================== */
.tabbing-data.tab-accordion .pkg-acc-head {
	display: none;
}
@media only screen and (max-width: 767px) {
	.tabbing-data.tab-accordion .course-tabs {
		display: none;
	}
	/* override bootstrap's tab show/hide: every pane is visible, collapsed by its body height */
	.tabbing-data.tab-accordion .tab-content > .tab-pane {
		display: block;
		opacity: 1;
		border: 1px solid #dce5df;
		border-radius: 8px;
		padding: 0 14px;
		margin-bottom: 10px;
	}
	.tabbing-data.tab-accordion .tab-content > .tab-pane.pkg-acc-empty {
		display: none;
	}
	.tabbing-data.tab-accordion .pkg-acc-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		width: 100%;
		min-height: 48px;
		padding: 0;
		margin: 0;
		background: none;
		border: 0;
		border-bottom: 1px solid transparent;
		font-size: 16px;
		line-height: 22px;
		font-weight: 600;
		color: #1f2e24;
		text-align: left;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		transition: border-color .3s ease;
	}
	.tabbing-data.tab-accordion .pkg-acc-head::after {
		content: "\F282"; /* bootstrap-icons chevron-down */
		font-family: "bootstrap-icons";
		font-size: 16px;
		font-weight: 400;
		line-height: 1;
		transition: transform .2s ease;
	}
	.tabbing-data.tab-accordion .tab-pane.is-open > .pkg-acc-head {
		border-bottom-color: #edf1ee;
	}
	.tabbing-data.tab-accordion .tab-pane.is-open > .pkg-acc-head::after {
		transform: rotate(180deg);
	}
	.tabbing-data.tab-accordion .pkg-acc-body {
		height: 0;
		overflow: hidden;
		transition: height .3s ease;
	}
	.tabbing-data.tab-accordion .tab-pane.is-open > .pkg-acc-body {
		height: auto;
	}
	.tabbing-data.tab-accordion .pkg-acc-inner {
		min-height: 0;
		overflow: hidden;
		opacity: 0;
		visibility: hidden;
		transition: opacity .25s ease, visibility 0s linear .3s;
		padding: 12px 0 14px;
	}
	.tabbing-data.tab-accordion .tab-pane.is-open .pkg-acc-inner {
		opacity: 1;
		visibility: visible;
		transition: opacity .3s ease .05s, visibility 0s;
	}
}
@media (prefers-reduced-motion: reduce) {
	.tabbing-data.tab-accordion .pkg-acc-head,
	.tabbing-data.tab-accordion .pkg-acc-head::after,
	.tabbing-data.tab-accordion .pkg-acc-body,
	.tabbing-data.tab-accordion .pkg-acc-inner {
		transition: none;
	}
}

/* TRAVEL PACKAGE DETAILS - text inside the Inclusions / Exclusions / Terms sections (phones).
   stay-play-details.css was written for the tab layout and left three oddities on a phone:
   list items capped at 50% width (<=991px rule), bold lead-ins flattened to normal weight, and
   numbered lists (<ol>) with no styling at all, so they showed in a larger default font. */
@media only screen and (max-width: 767px) {
	.package-detail-row .tabbing-data .pkg-acc-body .text ul li {
		width: 100%;
	}
	.package-detail-row .tabbing-data .pkg-acc-body .text p strong,
	.package-detail-row .tabbing-data .pkg-acc-body .text li > strong {
		font-weight: 600;
	}
	.package-detail-row .tabbing-data .pkg-acc-body .text ol {
		padding-left: 20px;
		margin: 0 0 10px;
	}
	.package-detail-row .tabbing-data .pkg-acc-body .text ol li {
		list-style: decimal outside; /* common.css strips the marker from every li */
		padding-left: 4px;
		margin-bottom: 10px;
		font-size: 14px;
		line-height: 20px;
	}
	.package-detail-row .tabbing-data .pkg-acc-body .text > :last-child {
		margin-bottom: 0;
	}
}

/* ==========================================================================
   ALL SLOTS page (/course/{slug}/all-slots, phones)
   One 150px tile per row made each day several screens tall, and the Front/Back Nine headings had
   a chevron that did nothing. Here: a compact course header, 3-up tiles that are tappable all over
   (the Book Now button's link is stretched across the tile), and the nines collapse like Book Now
   (markup + main.js are shared). Selectors carry .golf-card.horizontal.head to beat the page css.
   ========================================================================== */
@media only screen and (max-width: 767px) {
	/* Course header: thumbnail beside the name, instead of a lone image above a 30px title */
	.golf-card.horizontal.head.all-slots-head .golf-top {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 14px;
	}
	.golf-card.horizontal.head.all-slots-head .golf-top figure {
		flex: 0 0 72px;
		width: 72px;
		height: 72px;
		margin: 0;
	}
	.golf-card.horizontal.head.all-slots-head .golf-top .inner-text {
		flex: 1 1 auto;
		min-width: 0;
		padding: 0;
	}
	.golf-card.horizontal.head.all-slots-head h1 {
		font-size: 22px;
		line-height: 28px;
		margin-bottom: 4px;
	}
	.golf-card.horizontal.head.all-slots-head .bottom-row {
		order: 0; /* Book Now's card layout floats this above the title; here the name comes first */
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}

	/* Day header */
	.all-teetimes .tee-header h3 {
		font-size: 18px;
		line-height: 24px;
		gap: 8px;
	}
	.all-teetimes .tee-header h3 svg {
		width: 20px;
		height: 20px;
	}

	/* Tiles: 3 across, compact */
	.all-teetimes .view-all-list {
		overflow: visible;
		margin-bottom: 0;
	}
	.all-teetimes .view-all-list .row {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
		margin: 0;
	}
	.all-teetimes .view-all-list .row > [class*="col-"] {
		width: auto;
		max-width: none;
		padding: 0;
		margin: 0;
	}
	.all-teetimes .tee-times .tee {
		position: relative;
		min-width: 0;
		min-height: 0;
		margin-bottom: 0;
		padding: 10px 4px;
		gap: 2px;
	}
	.all-teetimes .tee-times .tee strong {
		font-size: 15px;
		line-height: 20px;
	}
	.all-teetimes .tee-times .tee span {
		font-size: 13px;
		line-height: 16px;
	}
	.all-teetimes .tee-times .tee small {
		font-size: 11px;
		line-height: 14px;
		gap: 3px;
		white-space: nowrap;
	}
	.all-teetimes .tee-times .tee small img {
		width: 14px;
		height: 14px;
	}
	.all-teetimes .tee-times .tee .common-btn,
	.all-teetimes .tee-times .tee .common-btn:hover {
		box-sizing: border-box;
		width: calc(100% - 8px);
		min-width: 0;
		max-width: calc(100% - 8px);
		height: auto;
		min-height: 32px;
		padding: 4px;
		line-height: 20px;
		transform: none; /* the page's hover scale(1.1) sticks after a tap */
		margin-top: 4px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: 12px;
	}
	/* the whole tile is the tap target, not just the small button */
	.all-teetimes .tee-times .tee .common-btn::after {
		content: "";
		position: absolute;
		inset: 0;
	}
	.all-teetimes .nine-body-inner {
		padding: 12px 0 14px;
	}
}

/* ==========================================================================
   COURSE DETAIL header (phones): name, then location + rating, then the price
   The Book Now card rules above (name block as a column, .bottom-row pulled above the title with a
   4px gap) also matched this header, so the location / rating / price row sat above the course
   name with the rating and price touching. Selectors carry .golf-card.horizontal.head to beat the
   page's own inline styles.
   ========================================================================== */
@media only screen and (max-width: 767px) {
	.golf-card.horizontal.head.course-detail-head .golf-top .inner-text {
		padding: 0;
		gap: 8px;
	}
	.golf-card.horizontal.head.course-detail-head h1 {
		margin-bottom: 0;
	}
	.golf-card.horizontal.head.course-detail-head .inner-text .bottom-row {
		order: 0;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px 16px;
	}
	.golf-card.horizontal.head.course-detail-head .bottom-row .location {
		flex: 0 1 auto;
	}
	.golf-card.horizontal.head.course-detail-head .bottom-row .price {
		flex-basis: 100%;
		margin-top: 2px;
	}
}

/* ==========================================================================
   ADD BUDDIES / player details (/booking/add-buddies, phones)
   The buddy list was a grid of 136px picture tiles (about 1000px before the first form), the
   timer and tee-time summary were crammed onto two lines, and the player fields had labels
   touching the input above them.
   ========================================================================== */
@media only screen and (max-width: 767px) {
	.add_player.space {
		padding-top: 24px;
		padding-bottom: 32px;
	}
	.add_player .card-body {
		padding: 16px;
	}

	/* Timer + tee time summary */
	.add_player .timer-row {
		flex-direction: column;
		gap: 12px;
		padding-bottom: 14px;
		margin-bottom: 20px;
	}
	.add_player .timer-row .counter-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 8px;
		padding: 10px 14px;
		background: #f4f8f5;
		border: 1px solid #dce5df;
		border-radius: 8px;
	}
	.add_player .timer-row .counter-box span {
		margin: 0;
		font-size: 14px;
		line-height: 18px;
	}
	.add_player .timer-row .counter-box strong {
		font-size: 18px;
		line-height: 24px;
		white-space: nowrap;
	}
	.add_player .timer-row .date-time {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
		margin: 0;
		align-items: stretch;
	}
	.add_player .timer-row .date-time span {
		display: flex;
		flex-direction: column;
		gap: 2px;
		padding: 0 0 0 10px;
		border-left: 2px solid #dce5df;
		border-right: 0;
		font-size: 12px;
		line-height: 16px;
		color: #5c8a6b;
	}
	.add_player .timer-row .date-time b {
		margin: 0;
		font-size: 14px;
		line-height: 18px;
		color: #1f2e24;
	}
	.add_player .courses-name {
		font-size: 16px;
		line-height: 22px;
		margin-bottom: 16px;
	}

	/* Buddy picker: compact chips instead of big picture tiles */
	.add_player .sidebar-left {
		padding: 14px;
		margin-bottom: 16px;
	}
	.add_player .sidebar-left .panel-heading a {
		display: block;
		width: auto !important;
		max-width: none !important;
		margin: 0 0 10px;
		padding: 0;
		background: none;
		border: 0;
		box-shadow: none;
		font-size: 16px;
		line-height: 22px;
		font-weight: 600;
		text-align: left;
		text-transform: none;
		color: #1f2e24;
		pointer-events: none;
	}
	.add_player .user-list {
		gap: 8px;
	}
	.add_player .user-list li {
		width: calc(50% - 4px);
	}
	.add_player .user-list li .user-box {
		padding: 0;
		border: 1px solid #dce5df;
	}
	.add_player .user-list li .user-box a {
		display: flex;
		align-items: center;
		gap: 8px;
		min-height: 48px;
		padding: 8px 10px 8px 12px;
	}
	/* every buddy has the same placeholder silhouette, so it only cost the name its width */
	.add_player .user-list li .user-box a img {
		display: none;
	}
	.add_player .user-list li .user-box .caption {
		position: static;
		flex: 1 1 auto;
		min-width: 0;
		width: auto;
		padding: 0;
		background: none;
		color: #1f2e24;
		font-size: 13px;
		line-height: 16px;
		text-align: left;
		overflow-wrap: break-word;
	}
	.add_player .user-list li .user-box i {
		position: static;
		flex: 0 0 auto;
		font-size: 20px;
		opacity: .6;
	}

	/* Player forms */
	.add_player .player-card {
		padding: 16px;
		margin-bottom: 12px;
	}
	.add_player .player-card .head {
		align-items: center;
		min-height: 24px;
		margin-bottom: 12px;
	}
	.add_player .player-card .form-row .col-md-4 {
		margin: 0 0 12px;
	}
	.add_player .player-card .form-row .col-md-4:last-child {
		margin-bottom: 0;
	}
	.add_player .player-card .form-row label {
		margin: 0 0 6px;
		line-height: 18px;
	}
	.add_player .player-card .form-row label.error {
		margin: 4px 0 0;
		font-size: 12px;
		line-height: 16px;
		color: #dc2626;
		font-weight: 400;
	}
	.add_player .form-row input[type="text"],
	.add_player .form-row input[type="email"] {
		height: auto;
		min-height: 48px;
	}
	.add_player .form-row input[readonly] {
		background: #f4f8f5;
	}
	/* the trash icon: a real 44px tap target at the card's top-right */
	.add_player .player-card i {
		top: 4px;
		right: 4px;
		padding: 12px;
		font-size: 20px;
		line-height: 20px;
	}
	.add_player .btn-group {
		display: flex;
		gap: 12px;
		width: 100%;
		margin-top: 8px;
	}
	.add_player .btn-group .common-btn {
		flex: 1 1 0;
		min-height: 48px;
		margin: 0;
	}
}


/* ==========================================================================
 * GUEST / LOGIN PROMPT (shown when a signed-out visitor presses Continue With Booking)
 * #guestLoginMob  = Guest Check Out / Login / Register
 * #registerMob    = "you are not registered yet" step
 * timeBooking.js only opens these at <= 1024px, so the block matches that.
 * ========================================================================== */
@media (max-width: 1024px) {
	#guestLoginMob .modal-dialog,
	#registerMob .modal-dialog {
		width: calc(100% - 32px);
		max-width: 400px;
		margin: 16px auto;
	}
	#guestLoginMob .modal-content,
	#registerMob .modal-content {
		padding: 28px 22px 24px !important;
		border-radius: 14px;
		box-shadow: 0 12px 40px rgba(15, 87, 41, .18);
	}
	#guestLoginMob .modal-body,
	#registerMob .modal-body {
		position: relative;
		padding: 0;
		text-align: center;
	}
	#guestLoginMob .guest-prompt-close {
		position: absolute;
		top: -14px;
		right: -10px;
		width: 44px;
		height: 44px;
		margin: 0;
		padding: 0;
		background-size: 12px;
		opacity: .55;
	}
	#guestLoginMob .book-logo {
		margin: 0 0 14px !important;
	}
	#guestLoginMob .book-logo img {
		display: block;
		width: 56px;
		height: auto;
		margin: 0 auto;
	}
	#guestLoginMob .guest-prompt-title {
		margin: 0 0 6px;
		font-size: 20px;
		line-height: 26px;
		font-weight: 700;
		color: #1f2e24;
	}
	#guestLoginMob .guest-prompt-sub {
		margin: 0 0 20px;
		font-size: 14px;
		line-height: 20px;
		color: #5b6b61;
	}
	#guestLoginMob .list-wrap ul {
		display: flex;
		flex-direction: column;
		gap: 12px;
		margin: 0;
		padding: 0;
	}
	#guestLoginMob .list-wrap li {
		margin: 0 !important;
		padding: 0 !important;
	}
	/* the three choices: Login is the main one, the others are outlined */
	#guestLoginMob .list-wrap li a {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 50px;
		padding: 0 16px !important;
		border: 1.5px solid #0f5729;
		border-radius: 5px;
		background: #fff;
		color: #0f5729;
		font-size: 16px;
		font-weight: 600;
		line-height: 22px;
		text-decoration: none;
	}
	#guestLoginMob .list-wrap li a.__loginEvent {
		order: -1;
		background: linear-gradient(90deg, #0f5729 0%, #31814f 100%);
		color: #fff;
	}
	#guestLoginMob .list-wrap li:has(> .__loginEvent) {
		order: -1;
	}
	#guestLoginMob .list-wrap li a:active {
		background: #eef5f0;
	}
	#guestLoginMob .list-wrap li a.__loginEvent:active {
		background: #0f5729;
	}

	#registerMob .modal-body > .p-4 {
		padding: 0 !important;
		text-align: left;
	}
	#registerMob .modal-body p {
		margin: 0 0 14px;
		font-size: 15px;
		line-height: 22px;
		color: #1f2e24;
	}
	#registerMob .modal-body p.text-underline {
		display: inline-block;
		margin: 0 0 8px;
		padding: 6px 0;
		color: #0f5729;
		font-weight: 600;
		text-decoration: underline;
		cursor: pointer;
	}
	#registerMob .wsr {
		margin: 0 0 8px;
		padding: 0 0 0 20px;
	}
	#registerMob .wsr li {
		list-style: disc outside;
		margin: 0 0 4px;
		font-size: 15px;
		line-height: 22px;
		color: #1f2e24;
	}
	#registerMob .modal-body > .px-4 {
		display: flex;
		flex-direction: column;
		gap: 12px;
		margin: 16px 0 0 !important;
		padding: 0 !important;
	}
	#registerMob .modal-body > .px-4 .btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 50px;
		margin: 0 !important;
		padding: 0 16px !important;
		border-radius: 5px;
		font-size: 16px;
		font-weight: 600;
		line-height: 22px;
	}
	#registerMob .__registerNavigate {
		border: 1.5px solid #0f5729;
		background: linear-gradient(90deg, #0f5729 0%, #31814f 100%);
		color: #fff;
	}
	#registerMob .__backRegisterEvent {
		border: 1.5px solid #0f5729;
		background: #fff;
		color: #0f5729;
	}
}

/* the login form the "Login" choice opens (same <= 1024px popup flow) */
@media (max-width: 1024px) {
	#myModalGuestLoginIframeView .modal-dialog {
		width: calc(100% - 32px);
		max-width: 400px;
		margin: 16px auto;
	}
	#myModalGuestLoginIframeView .modal-content {
		padding: 0 22px 24px !important;
		border-radius: 14px;
	}
	#myModalGuestLoginIframeView .logo-box {
		width: 96px;
		height: 96px;
		margin: -48px auto 14px;
	}
	#myModalGuestLoginIframeView .logo-box img {
		max-width: 66px;
	}
	#myModalGuestLoginIframeView .top h4 {
		margin: 0 0 16px;
		font-size: 20px;
		line-height: 26px;
		text-align: center;
	}
	#myModalGuestLoginIframeView .form-row {
		margin-bottom: 14px;
	}
	#myModalGuestLoginIframeView .form-row label {
		margin: 0 0 6px;
	}
	#myModalGuestLoginIframeView .form-control {
		min-height: 48px;
	}
	#myModalGuestLoginIframeView .remember {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	}
	#myModalGuestLoginIframeView .remember .checkbox label {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0;
		white-space: nowrap;
	}
	#myModalGuestLoginIframeView .remember .forgot a {
		white-space: nowrap;
	}
	#myModalGuestLoginIframeView .loginRow {
		flex-direction: column;
		gap: 12px;
		margin: 4px 0 16px;
	}
	#myModalGuestLoginIframeView .loginRow .common-btn {
		width: 100%;
		min-height: 50px;
		margin: 0;
		font-weight: 600;
	}
	#myModalGuestLoginIframeView .loginRow .guestCheckout {
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff !important;
		border: 1.5px solid #0f5729 !important;
		color: #0f5729 !important;
	}
	#myModalGuestLoginIframeView .dontAccount {
		display: block;
		text-align: center;
	}
	#myModalGuestLoginIframeView .dontAccount p {
		display: block;
		margin: 0;
		font-size: 15px;
		line-height: 22px;
	}
	#myModalGuestLoginIframeView .dontAccount p a {
		display: inline-block;
		padding: 6px 2px;
		font-weight: 600;
	}
}