/*
	Design-system stylesheet for the business detail page (detail.php) and its
	section partials (_inc/detail-*.php). Loaded via $extra_css in detail.php,
	layered on top of the theme's css/boostrap.css + css/styles.css.

	Icon set: FontAwesome (css/font_awesome.css, already loaded site-wide) is
	used as the one consistent icon set throughout, rather than introducing a
	second inline-SVG icon library -- same "one consistent set" goal, zero
	added bytes since it's already on every page.

	Typeface: Open Sans (already loaded via Google Fonts on every page) is
	used as the single typeface family, rather than pulling in a new font
	(e.g. Inter) that would cost an extra network request for no visual gain
	over what's already loaded site-wide.
*/

:root {
	--primary: #1E2A3A;
	--primary-light: #2C3E52;
	--primary-dark: #16202E;
	--accent: #F5A623;
	--accent-dark: #D68C0F;
	--surface: #FFFFFF;
	--surface-alt: #F6F8FA;
	--border: #E5E9EF;
	--text: #1A2230;
	--text-muted: #5B6472;
	--success: #1E8E5A;
	--success-tint: #E6F6EE;
	--danger: #C43D3D;
	--danger-tint: #FBEAEA;
	--radius: 12px;
	--shadow: 0 1px 3px rgba(16,24,40,.06);
	--shadow-hover: 0 4px 12px rgba(16,24,40,.10);
	--font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.detail-v2 {
	font-family: var(--font);
	color: var(--text);
	font-size: 16px;
	line-height: 1.6;
}
.detail-v2 h1, .detail-v2 h2, .detail-v2 h3 { font-family: var(--font); font-weight: 700; color: var(--text); }
.detail-v2 h1 { font-size: 34px; line-height: 1.2; margin: 0 0 8px; }
.detail-v2 h2 { font-size: 24px; margin: 0 0 18px; display: flex; align-items: center; gap: 10px; }
.detail-v2 h2::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 24px;
	background: var(--accent);
	border-radius: 3px;
}
.detail-v2 h3 { font-size: 18px; font-weight: 600; margin: 0 0 8px; }
.detail-v2 .text-small { font-size: 14px; }
/* Deliberately scoped to plain-prose content areas only (not the whole
   .detail-v2 page) -- every interactive component (hero links, buttons,
   cards, chips) sets its own explicit color, and a page-wide ".detail-v2 a"
   rule has enough specificity (class+tag) to silently beat any of those
   single-class component rules, which is exactly what made the white
   hero links render in the dark --primary color and become unreadable. */
.about-main a, .faq-answer a, .service-desc a, .review-text a, .owner-reply a, .quick-answer-summary a {
	color: var(--primary);
}

/* ---------- Buttons (one filled accent primary, outlined secondary) ---------- */
.btn-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: all 150ms ease;
}
.btn-cta-primary { background: var(--accent); color: #1A1300; border-color: var(--accent); }
.btn-cta-primary:hover, .btn-cta-primary:focus { background: var(--accent-dark); border-color: var(--accent-dark); color: #1A1300; text-decoration: none; }
.btn-cta-secondary { background: transparent; color: var(--primary); border-color: var(--border); }
.btn-cta-secondary:hover, .btn-cta-secondary:focus { border-color: var(--primary); background: var(--surface-alt); color: var(--primary); text-decoration: none; }
.btn-block { display: flex; width: 100%; margin-bottom: 10px; }
.btn-block:last-child { margin-bottom: 0; }

/* ---------- Breadcrumb (sits inside the hero, muted on dark bg) ---------- */
.detail-breadcrumb {
	font-size: 13px;
	color: rgba(255,255,255,.7);
	margin: 0 0 16px;
}
.detail-breadcrumb a { color: rgba(255,255,255,.85); text-decoration: none; }
.detail-breadcrumb a:hover { color: #fff; text-decoration: underline; }
.detail-breadcrumb span[aria-current] { color: #fff; }

/* ---------- Hero band ---------- */
/*
	Hero background layering (bottom to top):
	  1. diagonal gradient (base tone)
	  2. decorative line-art pattern (::before) -- map pins + connecting dots,
	     a directory/map motif, at low opacity. Pure inline SVG data URI:
	     zero extra HTTP requests, no raster image, no LCP/CLS impact since
	     it's an absolutely-positioned decorative layer that doesn't affect
	     layout.
	  3. dark overlay (::after) -- sits between the pattern and the text, so
	     text contrast is guaranteed regardless of how light the pattern gets
	     at line intersections (verified against the composited worst case,
	     not the average: overlay alpha dominates the blend).
	  4. text content (.container), lifted above both decorative layers via
	     z-index.
	Hidden on narrow viewports per spec ("simplify or hide on mobile") --
	gradient + overlay alone remain, which already guarantee contrast on
	their own.
*/
.detail-hero {
	position: relative;
	background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
	color: #fff;
	padding: 40px 0 32px;
	overflow: hidden;
}
.detail-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cdefs%3E%3Cpattern id='dirPattern' width='240' height='240' patternUnits='userSpaceOnUse'%3E%3Ccircle cx='30' cy='40' r='2.5' fill='white'/%3E%3Ccircle cx='190' cy='90' r='2.5' fill='white'/%3E%3Ccircle cx='110' cy='200' r='2.5' fill='white'/%3E%3Cline x1='30' y1='40' x2='90' y2='70' stroke='white' stroke-width='1' stroke-dasharray='3,4'/%3E%3Cline x1='190' y1='90' x2='150' y2='150' stroke='white' stroke-width='1' stroke-dasharray='3,4'/%3E%3Cg%3E%3Ccircle cx='90' cy='70' r='7' fill='none' stroke='white' stroke-width='1.5'/%3E%3Cpath d='M84 75 L90 92 L96 75 Z' fill='none' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/g%3E%3Cg%3E%3Ccircle cx='150' cy='150' r='7' fill='none' stroke='white' stroke-width='1.5'/%3E%3Cpath d='M144 155 L150 172 L156 155 Z' fill='none' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/g%3E%3Cg%3E%3Ccircle cx='50' cy='180' r='5' fill='none' stroke='white' stroke-width='1.5'/%3E%3Cpath d='M46 184 L50 196 L54 184 Z' fill='none' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect width='240' height='240' fill='url(%23dirPattern)'/%3E%3C/svg%3E");
	background-repeat: repeat;
	background-size: 240px 240px;
	opacity: .08;
	pointer-events: none;
}
.detail-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(16, 24, 40, .55);
	pointer-events: none;
}
@media (max-width: 640px) {
	.detail-hero::before { display: none; }
}
.detail-hero .container { position: relative; z-index: 1; display: flex; gap: 40px; align-items: flex-start; flex-wrap: wrap; }
.detail-hero-main { flex: 1 1 60%; min-width: 280px; }
.detail-hero h1 { color: #fff; }
.detail-hero-photo { flex: 0 0 220px; }
.detail-hero-photo-card {
	background: #fff;
	border-radius: var(--radius);
	padding: 8px;
	box-shadow: var(--shadow-hover);
	width: 220px;
	height: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.detail-hero-photo-card img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.detail-hero-photo-card .monogram {
	width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	background: var(--surface-alt);
	border-radius: 8px;
	font-size: 64px;
	font-weight: 700;
	color: var(--primary);
}
@media (max-width: 768px) {
	.detail-hero-photo { order: -1; flex: 0 0 100%; }
	.detail-hero-photo-card { width: 120px; height: 120px; margin: 0 auto; }
	.detail-hero-photo-card .monogram { font-size: 36px; }
}

.premium-badge-detail {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: #FFD700;
	color: #6b4b00;
	font-weight: bold;
	font-size: 13px;
	padding: 3px 12px;
	border-radius: 20px;
	vertical-align: middle;
	margin-left: 8px;
}
.verified-badge {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--success-tint);
	color: var(--success);
	font-weight: 700;
	font-size: 13px;
	padding: 3px 12px;
	border-radius: 20px;
	vertical-align: middle;
	margin-left: 8px;
}

.detail-hero-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 8px;
	margin: 14px 0 4px;
	font-size: 14px;
	color: rgba(255,255,255,.85);
}
.detail-hero-meta .category-chip {
	background: rgba(255,255,255,.14);
	color: #fff;
	border-radius: 20px;
	padding: 4px 12px;
	text-decoration: none;
	font-size: 13px;
}
.detail-hero-meta .category-chip.is-primary { background: var(--accent); color: #1A1300; font-weight: 600; }
.detail-hero-meta .category-chip:hover { background: rgba(255,255,255,.28); text-decoration: none; }
.detail-hero-meta .category-chip.is-primary:hover { background: var(--accent-dark); color: #1A1300; }

.status-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border-radius: 20px;
	padding: 4px 12px;
	font-size: 13px;
	font-weight: 700;
}
.status-pill.status-open { background: var(--success-tint); color: var(--success); }
.status-pill.status-closed { background: var(--danger-tint); color: var(--danger); }
.detail-hero-meta .status-pill { background: rgba(255,255,255,.9); }

/* Scoped as ".detail-hero a.detail-rating-summary" (not just ".detail-rating-summary")
   so this beats ".detail-v2 a"'s specificity (class+tag) -- a plain single-class
   rule here loses that fight and the link renders in the dark --primary color,
   nearly invisible on the dark hero background. Same reasoning for .claim-cta below. */
.detail-hero a.detail-rating-summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #fff;
	text-decoration: none;
}
.detail-hero a.detail-rating-summary .rating-text { color: rgba(255,255,255,.9); }
.detail-hero a.detail-rating-summary:hover { text-decoration: underline; }

.detail-hero a.claim-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 14px;
	padding: 8px 16px;
	border: 1.5px solid rgba(255,255,255,.5);
	border-radius: 8px;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}
.detail-hero a.claim-cta:hover { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }

/* ---------- Sub-nav (pill style, scroll-spy active state, sticky) ---------- */
.detail-subnav {
	position: sticky;
	top: 0;
	z-index: 50;
	background: #fff;
	border-bottom: 1px solid var(--border);
}
.detail-subnav-scroll {
	display: flex;
	gap: 6px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding: 10px 0;
	-ms-overflow-style: none;
	scrollbar-width: none;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}
.detail-subnav-scroll::-webkit-scrollbar { display: none; }
.detail-subnav a {
	scroll-snap-align: start;
	display: inline-block;
	white-space: nowrap;
	padding: 8px 16px;
	border-radius: 20px;
	color: var(--text-muted);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	transition: all 150ms ease;
}
.detail-subnav a:hover { background: var(--surface-alt); color: var(--text); text-decoration: none; }
.detail-subnav a.is-active { background: var(--primary); color: #fff; }

/* ---------- Quick Answer (AEO/GEO block) ---------- */
.quick-answer {
	background: var(--surface-alt);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 24px;
	margin: 28px 0;
}
.quick-answer-summary {
	font-size: 17px;
	line-height: 1.6;
	margin: 0 0 18px;
	color: var(--text);
}
.quick-answer-summary strong { color: var(--primary); }
.quick-facts-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}
.quick-fact {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
}
.quick-fact i {
	color: var(--accent-dark);
	width: 18px;
	text-align: center;
	margin-top: 2px;
}
.quick-fact .label { display: block; color: var(--text-muted); font-size: 12px; }
.quick-fact .value { display: block; font-weight: 600; }
.quick-fact a { color: var(--text); text-decoration: none; }
.quick-fact a:hover { color: var(--primary); text-decoration: underline; }
@media (max-width: 640px) {
	.quick-facts-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Sections / layout ---------- */
.detail-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	margin-top: 8px;
}
.detail-main { flex: 1 1 62%; min-width: 0; }
.detail-sidebar { flex: 1 1 32%; min-width: 300px; }
.sidebar-sticky { position: sticky; top: 66px; }
@media (max-width: 1023px) {
	.detail-columns { flex-direction: column; gap: 24px; }
	.sidebar-sticky { position: static; }
}

.detail-section {
	padding: 40px 0;
	border-bottom: 1px solid var(--border);
}
.detail-section:last-child { border-bottom: none; }
@media (max-width: 640px) {
	.detail-section { padding: 28px 0; }
}

/* ---------- About ---------- */
.about-columns { display: flex; gap: 32px; flex-wrap: wrap; }
.about-main { flex: 1 1 65%; min-width: 260px; }
.about-highlights { flex: 1 1 28%; min-width: 220px; }
.highlights-card {
	background: var(--surface-alt);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 18px;
}
.highlights-card h3 { font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); margin-bottom: 12px; }
.highlights-list { list-style: none; margin: 0; padding: 0; }
.highlights-list li { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 14px; }
.highlights-list i { color: var(--accent-dark); width: 16px; text-align: center; }

.read-more-content.is-truncatable {
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.read-more-toggle {
	margin-top: 12px;
	background: none;
	border: 1.5px solid var(--border);
	border-radius: 8px;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 600;
	color: var(--primary);
	cursor: pointer;
	transition: all 150ms ease;
}
.read-more-toggle:hover { border-color: var(--primary); background: var(--surface-alt); }

.detail-categories { margin-top: 18px; }
a.category-tag {
	display: inline-block;
	background: var(--surface-alt);
	border: 1px solid var(--border);
	color: var(--text);
	font-size: 12px;
	padding: 5px 12px;
	border-radius: 20px;
	margin: 0 6px 6px 0;
	text-decoration: none;
}
a.category-tag:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }

.video-facade { position: relative; margin-top: 18px; cursor: pointer; display: inline-block; border-radius: var(--radius); overflow: hidden; }
.video-facade img { display: block; max-width: 100%; height: auto; }
.video-facade .play-icon {
	position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
	width: 56px; height: 56px; border-radius: 50%;
	background: rgba(0,0,0,.55);
	color: #fff; display: flex; align-items: center; justify-content: center;
	font-size: 22px;
}

/* ---------- Services ---------- */
.services-intro { color: var(--text-muted); margin-bottom: 20px; }
.services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
@media (max-width: 1023px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .services-grid { grid-template-columns: 1fr; } }
.service-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 18px;
	box-shadow: var(--shadow);
	transition: box-shadow 150ms ease;
}
.service-card:hover { box-shadow: var(--shadow-hover); }
.service-card .service-icon {
	width: 40px; height: 40px;
	border-radius: 10px;
	background: var(--surface-alt);
	display: flex; align-items: center; justify-content: center;
	color: var(--accent-dark);
	font-size: 18px;
	margin-bottom: 12px;
}
.service-card img { border-radius: 8px; margin-bottom: 12px; max-width: 100%; height: 140px; width: 100%; object-fit: cover; }
.service-card h3 { font-size: 16px; margin: 0 0 6px; }
.service-desc { color: var(--text-muted); font-size: 14px; }
.service-price { color: var(--primary); font-weight: 700; margin-top: 10px; }

/* ---------- Photo gallery + lightbox ---------- */
.photo-gallery-grid {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin: 0;
	padding: 0;
}
@media (max-width: 768px) { .photo-gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .photo-gallery-grid { grid-template-columns: repeat(2, 1fr); } }
.photo-gallery-grid li { position: relative; border-radius: 10px; overflow: hidden; }
.photo-gallery-grid img {
	width: 100%; height: 130px;
	object-fit: cover;
	display: block;
	transition: transform 150ms ease;
}
.photo-gallery-grid a:hover img { transform: scale(1.04); }
.gallery-more-tile {
	position: absolute; inset: 0;
	background: rgba(26,34,48,.65);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 18px; font-weight: 700;
}
.gallery-lightbox {
	position: fixed; inset: 0;
	background: rgba(10,14,20,.92);
	z-index: 1000;
	display: flex; align-items: center; justify-content: center;
}
.gallery-lightbox[hidden] { display: none; }
.gallery-lightbox-img { max-width: 90vw; max-height: 85vh; border-radius: 6px; }
.gallery-lightbox-close, .gallery-lightbox-prev, .gallery-lightbox-next {
	position: absolute; background: none; border: none; color: #fff; font-size: 30px; cursor: pointer; padding: 10px;
}
.gallery-lightbox-close { top: 15px; right: 20px; }
.gallery-lightbox-prev { left: 15px; top: 50%; transform: translateY(-50%); }
.gallery-lightbox-next { right: 15px; top: 50%; transform: translateY(-50%); }

/* ---------- Reviews ---------- */
.review-summary-columns { display: flex; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.review-summary-card {
	flex: 0 0 220px;
	background: var(--surface-alt);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 24px;
	text-align: center;
}
.review-summary-card .score { font-size: 48px; font-weight: 700; color: var(--primary); line-height: 1; }
.review-distribution { flex: 1; min-width: 220px; }
.dist-row { display: flex; align-items: center; gap: 10px; font-size: 13px; margin-bottom: 6px; }
.dist-label { width: 48px; color: var(--text-muted); }
.dist-bar { flex: 1; height: 8px; background: var(--surface-alt); border-radius: 4px; overflow: hidden; }
.dist-bar span { display: block; height: 100%; background: var(--accent); }
.dist-count { width: 28px; text-align: right; color: var(--text-muted); }
.stars i { color: var(--accent-dark); margin-right: 1px; }
.sr-summary { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

.review-list { list-style: none; margin: 0 0 24px; padding: 0; }
.review-item {
	display: flex;
	gap: 14px;
	border-bottom: 1px solid var(--border);
	padding: 20px 0;
}
.review-avatar {
	flex: 0 0 44px;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: var(--primary);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-weight: 700;
	font-size: 16px;
}
.review-body { flex: 1; min-width: 0; }
.review-item h3.review-name { font-size: 15px; margin: 0; display: inline-block; }
.review-item time { display: block; font-size: 12px; color: var(--text-muted); margin: 2px 0 8px; }
.review-item .review-text { color: var(--text); }
.owner-reply {
	background: var(--surface-alt);
	border-radius: 8px;
	padding: 12px 16px;
	margin-top: 12px;
	font-size: 14px;
}
.review-empty-state {
	text-align: center;
	padding: 30px 20px;
	color: var(--text-muted);
}
.review-empty-state .icon-badge {
	width: 56px; height: 56px;
	border-radius: 50%;
	background: var(--surface-alt);
	display: flex; align-items: center; justify-content: center;
	margin: 0 auto 14px;
	font-size: 24px;
	color: var(--accent-dark);
}
.review-pagination { margin-bottom: 24px; }
.review-pagination a {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid var(--border);
	border-radius: 6px;
	margin-right: 6px;
	color: var(--text);
	text-decoration: none;
	font-size: 14px;
}
.review-pagination a.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Star picker (clickable, replaces the rating <select>) */
.star-picker { display: flex; gap: 4px; }
.star-picker button {
	background: none; border: none; cursor: pointer; padding: 2px;
	font-size: 26px; color: var(--border); line-height: 1;
	transition: color 100ms ease;
}
.star-picker button.is-filled,
.star-picker button:hover,
.star-picker button:hover ~ button { color: var(--accent); }

.write-review-block { margin-top: 8px; }
.write-review-block .form-group { margin-bottom: 16px; }
.write-review-block label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.write-review-block .form-control { min-height: 44px; font-size: 16px; border-radius: 8px; border: 1px solid var(--border); }
.write-review-block textarea.form-control { min-height: 100px; }
/* Honeypot: visually hidden from real users; bots that don't render CSS still fill it. */
.hp-field { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- FAQs ---------- */
.faq-item {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	margin-bottom: 12px;
	background: var(--surface);
	overflow: hidden;
}
.faq-item summary {
	cursor: pointer;
	outline: none;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	font-weight: 600;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .faq-q-icon {
	flex: 0 0 20px;
	color: var(--accent-dark);
}
.faq-item summary h3 { display: inline; font-size: 16px; margin: 0; flex: 1; }
.faq-item summary .chevron { transition: transform 150ms ease; color: var(--text-muted); }
.faq-item[open] summary .chevron { transform: rotate(180deg); }
.faq-answer { padding: 0 18px 18px 50px; color: var(--text-muted); }

/* ---------- Service areas ---------- */
.service-areas-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.service-areas-list li { background: var(--surface-alt); border: 1px solid var(--border); border-radius: 20px; padding: 6px 14px; font-size: 13px; }
.service-areas-list a { color: var(--primary); text-decoration: none; }
.service-areas-list a:hover { text-decoration: underline; }

/* ---------- Hours & Location (merged) ---------- */
.hours-location-columns { display: flex; gap: 24px; flex-wrap: wrap; }
.hours-card, .location-card { flex: 1 1 45%; min-width: 260px; }
.hours-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.hours-table td { padding: 8px 4px; border-bottom: 1px solid var(--border); }
.hours-table td:last-child { text-align: right; color: var(--text-muted); }
.hours-table tr.is-today { background: var(--surface-alt); }
.hours-table tr.is-today td { font-weight: 700; color: var(--text); }
.hours-table tr.is-today td:first-child::after { content: " (today)"; font-weight: 400; font-size: 12px; color: var(--text-muted); }
.hours-timezone-note { color: var(--text-muted); font-size: 13px; margin-top: 10px; }
.map-facade { position: relative; cursor: pointer; display: block; max-width: 100%; margin-bottom: 14px; border-radius: var(--radius); overflow: hidden; }
.map-facade img { display: block; max-width: 100%; height: auto; }
.map-facade-label {
	position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
	background: rgba(26,34,48,.75); color: #fff; font-size: 12px; padding: 5px 14px; border-radius: 20px;
}

/* ---------- Locations (Premium Multi-Branch) ---------- */
.location-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.location-tab {
	display: inline-block; padding: 8px 16px; border-radius: 20px;
	background: var(--surface-alt); border: 1px solid var(--border);
	color: var(--text); font-size: 14px; text-decoration: none;
}
.location-tab:hover { background: var(--border); text-decoration: none; }
.location-tab.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.location-panel { padding-top: 4px; }

/* ---------- Related / Nearby business cards ---------- */
.business-cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.business-card {
	display: block;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 16px;
	color: var(--text);
	text-decoration: none;
	box-shadow: var(--shadow);
	transition: box-shadow 150ms ease;
}
.business-card:hover { box-shadow: var(--shadow-hover); text-decoration: none; }
.business-card .thumb {
	width: 100%; height: 100px; border-radius: 8px; object-fit: cover;
	background: var(--surface-alt); margin-bottom: 10px;
}
.business-card h3 { font-size: 15px; margin: 0 0 4px; color: var(--primary); }
.business-card .category { display: block; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; }
.business-card .distance { font-size: 12px; color: var(--text-muted); }

/* ---------- Sidebar ---------- */
.sidebar-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 20px;
	margin-bottom: 20px;
	box-shadow: var(--shadow);
}
.sidebar-card h3 { font-size: 16px; margin: 0 0 14px; }
.sidebar-card address { font-style: normal; color: var(--text); margin-bottom: 10px; }
.sidebar-card p { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.sidebar-card i.fa { width: 16px; text-align: center; color: var(--text-muted); }
.sidebar-cta .btn-cta { min-height: 46px; }
.sidebar-card .tg-socialicons {
	list-style: none; display: flex; gap: 8px; margin: 12px 0 0; padding: 0;
}
.sidebar-card .tg-socialicons a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; border-radius: 50%;
	background: var(--surface-alt); color: var(--text);
}
.sidebar-card .tg-socialicons a:hover { background: var(--primary); color: #fff; }

/* Contact form (used in sidebar desktop, and inline near the end on mobile) */
.tg-formcontactus .form-group { margin-bottom: 14px; }
.tg-formcontactus label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--text-muted); }
.tg-formcontactus .form-control {
	width: 100%; min-height: 44px; font-size: 16px;
	border: 1px solid var(--border); border-radius: 8px; padding: 0 12px;
}
.tg-formcontactus textarea.form-control { min-height: 90px; padding: 10px 12px; }
.tg-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 44px; width: 100%; padding: 0 18px;
	background: var(--accent); color: #1A1300; font-weight: 700;
	border: none; border-radius: 8px; cursor: pointer;
	transition: background 150ms ease;
}
.tg-btn:hover { background: var(--accent-dark); }

.hours-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.hours-list li { display: flex; justify-content: space-between; padding: 4px 0; }
.hours-list li.is-today { font-weight: 700; }

/* ---------- Sidebar sign-up sentinel from the old file: keep for CTA hook compatibility ---------- */
.btn-call, .btn-website, .btn-directions, .btn-message { /* legacy class hooks kept for JS/markup compatibility */ }

/* ---------- Mobile action bar ---------- */
.mobile-action-bar { display: none; }
@media (max-width: 768px) {
	.mobile-action-bar {
		display: flex;
		position: fixed;
		bottom: 0; left: 0; right: 0;
		z-index: 100;
		height: 56px;
		padding-bottom: env(safe-area-inset-bottom);
		background: #fff;
		border-top: 1px solid var(--border);
		box-shadow: 0 -2px 10px rgba(16,24,40,.08);
	}
	.mobile-action-bar a {
		flex: 1;
		display: flex; flex-direction: column; align-items: center; justify-content: center;
		gap: 2px;
		color: var(--text);
		text-decoration: none;
		font-size: 11px;
		font-weight: 600;
	}
	.mobile-action-bar a:first-child { background: var(--accent); color: #1A1300; }
	.mobile-action-bar i { font-size: 16px; }
	/* Reserve space so the fixed bar never overlaps page content (no CLS). */
	body { padding-bottom: 56px; }
}

/* ---------- Focus states (WCAG) ---------- */
.detail-v2 a:focus-visible,
.detail-v2 button:focus-visible,
.detail-v2 input:focus-visible,
.detail-v2 textarea:focus-visible,
.detail-v2 select:focus-visible,
.detail-v2 summary:focus-visible {
	outline: 2px solid var(--accent-dark);
	outline-offset: 2px;
}

/* ---------- Meta footer ---------- */
.detail-meta-footer { color: var(--text-muted); font-size: 13px; border-bottom: none; padding-top: 24px; padding-bottom: 40px; }
.detail-meta-footer a { color: var(--primary); }