/*
 * ElderCare — single listing page ("Idea 3 — Service Grid + Quick Form" layout).
 * Structure/spacing/typography ported from the approved mockup as-is.
 * Brand color swapped for the theme's own Customizer color via the
 * --listeo-primary-color / --listeo-primary-color-light CSS variables
 * Listeo already generates (inc/customizer/customizer.php) — this page
 * re-colors itself automatically whenever that Customizer setting changes.
 * WhatsApp green and Google-Maps blue are left as-is: real-world brand
 * colors people recognize regardless of a site's own palette.
 *
 * All type sizes below are fixed px, not rem, on purpose: Listeo loads
 * Bootstrap's grid stylesheet, which sets `html { font-size: 10px; }`
 * (a Bootstrap convention, unrelated to this page). Any rem value here would
 * be relative to that 10px root instead of the usual 16px, rendering at
 * ~62% of its intended size — which is exactly why everything looked too
 * small before. Fixed px sizes below are the original mockup's sizes
 * (assuming a normal 16px root) converted 1:1, so this is a bug fix, not a
 * redesign — and it's immune to that root font-size regardless of what else
 * on the site changes it later.
 *
 * No font-family is set anywhere in this file, on purpose. Listeo's own
 * Customizer (Appearance -> Customize -> Typography -> "Body font", "h1..h6
 * font") writes real font-family rules onto `body` and heading tags —
 * font-family is inherited by every element by default, so this page just
 * follows whatever that setting is instead of pinning its own font. Change
 * the site's font there and this page follows automatically.
 */

.i3-wrap {
	font-size: 16px;
	color: #1A1A1A;
	background: #FAFAFA;
}

.i3-back {
	background: var(--listeo-primary-color, #B04C2F);
	padding: 10px 28px;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: #fff;
	opacity: .85;
}
.i3-back a { color: #fff; cursor: pointer; text-decoration: none; }
.i3-back a:hover { text-decoration: underline; }

.i3-header { background: #fff; border-bottom: 1px solid #E8E8E8; padding: 20px 28px; }
.i3-hdr-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.i3-left { display: flex; align-items: center; gap: 16px; }
.i3-logo-box {
	width: 64px; height: 64px;
	background: #F5F5F5;
	border: 1px solid #E8E8E8;
	border-radius: 12px;
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
}
.i3-logo-box img { width: 100%; height: 100%; object-fit: cover; }
.i3-title-col {}
.i3-name { font-size: 24px; font-weight: 700; color: #1A1A1A; margin-bottom: 4px; }
.i3-loc { font-size: 14px; color: #666; display: flex; align-items: center; gap: 5px; }
.i3-loc a { color: inherit; text-decoration: none; }
.i3-loc a:hover { color: var(--listeo-primary-color, #B04C2F); text-decoration: underline; }
.i3-rtg-row { display: flex; align-items: center; gap: 10px; margin-top: 5px; flex-wrap: wrap; }
.i3-rtg-big { font-size: 24px; font-weight: 700; color: #1A1A1A; }
.i3-rtg-stars { color: #D49B1A; font-size: 18px; }
.i3-rtg-cnt { font-size: 13px; color: #888; }
.g-badge-v {
	display: inline-flex; align-items: center; gap: 4px;
	background: var(--listeo-primary-color-light, #FDF1EE);
	color: var(--listeo-primary-color, #B04C2F);
	border: 1px solid var(--listeo-primary-color-light, #F2D9CE);
	border-radius: 5px;
	font-size: 10px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .05em;
	padding: 3px 8px;
}
.i3-cta-row { display: flex; gap: 9px; flex-wrap: wrap; }
.i3-btn {
	display: flex; align-items: center; gap: 6px;
	padding: 10px 18px; border-radius: 8px;
	font-weight: 600; font-size: 14px;
	cursor: pointer; border: none;
	text-decoration: none;
}
.i3-btn.call { background: var(--listeo-primary-color, #B04C2F); color: #fff; }
.i3-btn.wa { background: #25D366; color: #fff; }
.i3-btn.web { background: #F5F5F5; color: #333; border: 1px solid #E0E0E0; }
.i3-btn.map { background: #4285F4; color: #fff; }

.i3-body { max-width: 1120px; margin: 0 auto; padding: 28px 24px 60px; display: grid; grid-template-columns: 1fr 280px; gap: 24px; align-items: start; }
/*
 * Sticky sidebar: sticks to the viewport while scrolling, then stops on its
 * own once its bottom edge reaches the bottom of .i3-body (native `position:
 * sticky` behavior — a sticky element is bounded by its parent's height, so
 * it un-sticks and scrolls away with the page right as it "runs out of room"
 * rather than overlapping the footer). No JS needed.
 * `top: 90px` leaves room for the site's own sticky header — if that header
 * is a different height on your build, adjust this value so the sidebar
 * doesn't end up overlapping or hiding under it.
 */
.i3-side-b { position: sticky; top: 90px; align-self: start; }

@media (max-width: 860px) {
	.i3-side-b { position: static; }
}
.i3-sec3 { background: #fff; border-radius: 12px; border: 1px solid #E8E8E8; margin-bottom: 16px; overflow: hidden; }
.i3-sec-hd3 { padding: 16px 22px 12px; border-bottom: 1px solid #F0F0F0; font-size: 17px; color: var(--listeo-primary-color, #B04C2F); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.i3-sec-bd3 { padding: 18px 22px; }
.i3-about3 { font-size: 15px; line-height: 1.78; color: #444; }

/* Reusable table style for any HTML pasted into a content field (e.g. the
   About box) — matches the page's own look, colors follow the theme. */
.i3-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.i3-table th { text-align: left; padding: 10px 12px; background: var(--listeo-primary-color-light, #FDF1EE); color: var(--listeo-primary-color, #B04C2F); font-weight: 600; border-bottom: 2px solid var(--listeo-primary-color-light, #F2D9CE); }
.i3-table td { padding: 10px 12px; border-bottom: 1px solid #F0F0F0; color: #444; }
.i3-table tr:last-child td { border-bottom: none; }

.i3-svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.i3-svc-item { border: 1px solid #E8E8E8; border-radius: 10px; padding: 14px; display: flex; align-items: center; gap: 10px; cursor: default; transition: border-color .15s; }
.i3-svc-item:hover { border-color: var(--listeo-primary-color, #B04C2F); }
.i3-svc-ico { font-size: 19px; color: var(--listeo-primary-color, #B04C2F); flex-shrink: 0; }
.i3-svc-name { font-size: 13px; font-weight: 600; color: #1A1A1A; }

.i3-usp-list { display: flex; flex-direction: column; gap: 9px; }
.i3-usp-i { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 9px; background: var(--listeo-primary-color-light, #FDF1EE); border: 1px solid var(--listeo-primary-color-light, #F2D9CE); }
.i3-usp-check { color: var(--listeo-primary-color, #B04C2F); font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.i3-usp-text3 h4 { font-size: 14px; font-weight: 600; color: #1A1A1A; margin-bottom: 2px; }
.i3-usp-text3 p { font-size: 12px; color: #666; line-height: 1.5; }

/* "Medical Equipment on Rent" section removed completely (see
   inc/listing-fields.php and listeo-core/single-listing.php) — .i3-equip-*
   classes no longer used anywhere, removed rather than left as dead CSS. */

/*
 * Sidebar "Enquire Now" card: this is the [ec_contact_form] shortcode
 * (inc/contact-page.php) reused here instead of Listeo Core's native
 * per-listing contact form, so its markup/classes are contact-page.css's
 * .ecp-* ones, not a listing-page-specific set. contact-page.css's card
 * sizing (max-width 560px, generous padding) assumes the full-width
 * Contact page though — this narrows it back down to fit the 280px
 * sidebar column here.
 */
.i3-side-b .ecp-form-card { max-width: none; margin: 0 0 16px; padding: 20px 18px; }

.i3-contact3 { background: #fff; border: 1px solid #E8E8E8; border-radius: 12px; padding: 18px; margin-top: 14px; }
.i3-contact3 h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: #888; margin-bottom: 12px; }
.i3-c3-row { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: #444; padding: 6px 0; border-bottom: 1px solid #F5F5F5; }
.i3-c3-row:last-child { border-bottom: none; }
.i3-c3-ico { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.i3-c3-row a { color: inherit; text-decoration: none; }
.i3-c3-row a:hover { text-decoration: underline; }

/* "View on Google Maps" — sits at the very bottom of the sidebar, below the
   Contact Details card. Outline style (theme primary color, not a filled
   background) so it reads as a secondary action next to the filled
   "Enquire Now" card above it — pin icon, label, external-link icon. */
.i3-maps-btn {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	width: 80%; margin: 14px auto 0; padding: 11px; border-radius: 999px;
	background: #fff; border: 1.5px solid var(--listeo-primary-color, #B04C2F);
	color: var(--listeo-primary-color, #B04C2F); font-size: 13px; font-weight: 600;
	text-decoration: none;
	transition: background .15s, color .15s;
}
.i3-maps-btn:hover { background: var(--listeo-primary-color, #B04C2F); color: #fff; }
.i3-maps-btn i:last-child { font-size: 11px; opacity: .8; }

.i3-oncall-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.i3-oc-item { display: flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: 8px; border: 1px solid #E8E8E8; font-size: 13px; font-weight: 500; color: #444; }
.i3-oc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--listeo-primary-color, #B04C2F); flex-shrink: 0; }

/* "Quick Summary" — full-width box below both columns, at the very bottom
   of the page. Its own wrapper repeats .i3-body's max-width/padding so it
   lines up with the two-column content above it despite sitting outside
   the grid. */
.i3-summary-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px 60px; }
.i3-summary { display: flex; align-items: flex-start; gap: 14px; background: var(--listeo-primary-color-light, #FDF1EE); border: 1px solid var(--listeo-primary-color-light, #F2D9CE); border-radius: 12px; padding: 20px 22px; }
.i3-summary-ico { width: 34px; height: 34px; flex-shrink: 0; background: #fff; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--listeo-primary-color, #B04C2F); font-size: 15px; }
.i3-summary h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--listeo-primary-color, #B04C2F); font-weight: 700; margin: 0 0 6px; }
.i3-summary p { font-size: 14px; color: #444; line-height: 1.7; margin: 0; }

@media (max-width: 860px) {
	.i3-body { grid-template-columns: 1fr; }
	.i3-svc-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
	.i3-svc-grid, .i3-oncall-grid { grid-template-columns: 1fr; }
}