/**
 * Masaledaar Restaurant Locator — matches the reference:
 * statewise accordion (left) · detail card (centre) · India outline map (right).
 */
.msd-loc {
	--msd-green: #3c5a22;
	--msd-green-dark: #2c4019;
	--msd-cream: #f6f1e7;
	--msd-cream-2: #efe8d9;
	--msd-gold: #b68a3c;
	--msd-ink: #2a2a26;
	--msd-body: #6f6d66;
	--msd-line: rgba(60, 90, 34, 0.16);
	--msd-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
	--msd-sans: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	background: var(--msd-cream);
	color: var(--msd-ink);
	padding: clamp(40px, 6vw, 96px) clamp(16px, 5vw, 72px);
	font-family: var(--msd-sans);
	box-sizing: border-box;
}
.msd-loc *,
.msd-loc *::before,
.msd-loc *::after { box-sizing: border-box; }

.msd-loc__grid {
	display: grid;
	grid-template-columns: minmax(260px, 320px) minmax(300px, 360px) 1fr;
	gap: clamp(26px, 4vw, 60px);
	align-items: start;
	max-width: 1320px;
	margin: 0 auto;
}

/* ---- Left header ---- */
.msd-loc__eyebrow {
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.26em;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--msd-gold);
	margin-bottom: 14px;
}
.msd-loc .msd-loc__title {
	font-family: var(--msd-serif) !important;
	font-size: clamp(30px, 3.6vw, 44px) !important;
	line-height: 1.08 !important;
	color: var(--msd-ink) !important;
	margin: 0 !important;
	font-weight: 500 !important;
	text-transform: none !important;
	letter-spacing: 0.01em !important;
}
.msd-loc__ornament {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--msd-gold);
	font-size: 13px;
	margin: 18px 0 26px;
}
.msd-loc__ornament i {
	display: block;
	width: 30px;
	height: 1px;
	background: var(--msd-gold);
	opacity: 0.7;
}

/* ---- Accordion ---- */
.msd-loc__states {
	border: 1px solid var(--msd-line);
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
}
.msd-state { border-top: 1px solid var(--msd-line); }
.msd-state:first-child { border-top: 0; }
.msd-loc .msd-state__head {
	width: 100% !important;
	display: flex !important;
	justify-content: space-between;
	align-items: center;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 16px 18px !important;
	margin: 0 !important;
	cursor: pointer;
	font-family: var(--msd-sans) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.14em !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--msd-ink) !important;
	line-height: 1.2 !important;
	transition: color 0.2s ease;
}
.msd-loc .msd-state__head:hover { color: var(--msd-green) !important; }
.msd-state.is-open .msd-state__head { color: var(--msd-green) !important; }

.msd-state__sign {
	position: relative;
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
}
.msd-state__sign::before,
.msd-state__sign::after {
	content: "";
	position: absolute;
	background: var(--msd-gold);
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.msd-state__sign::before { left: 0; right: 0; top: 50%; height: 1.5px; transform: translateY(-50%); }
.msd-state__sign::after { top: 0; bottom: 0; left: 50%; width: 1.5px; transform: translateX(-50%); }
.msd-state.is-open .msd-state__sign::after { opacity: 0; transform: translateX(-50%) rotate(90deg); }

.msd-state__body {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease;
}
.msd-state.is-open .msd-state__body {
	max-height: 640px;
	padding-bottom: 10px;
}

.msd-loc .msd-loc-item {
	width: 100% !important;
	display: flex !important;
	align-items: center;
	gap: 12px;
	background: none !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 11px 18px !important;
	margin: 0 !important;
	cursor: pointer;
	text-align: left !important;
	font-family: var(--msd-sans) !important;
	line-height: 1.3 !important;
	transition: background 0.2s ease;
}
.msd-loc .msd-loc-item.is-active { background: rgba(182, 138, 60, 0.1) !important; }
.msd-loc .msd-loc-item:hover { background: rgba(60, 90, 34, 0.04) !important; }
.msd-loc-item__dot {
	width: 13px;
	height: 13px;
	border: 1.5px solid rgba(60, 90, 34, 0.4);
	border-radius: 50%;
	flex: 0 0 auto;
	position: relative;
	transition: border-color 0.2s ease;
}
.msd-loc-item.is-active .msd-loc-item__dot { border-color: var(--msd-gold); }
.msd-loc-item.is-active .msd-loc-item__dot::after {
	content: "";
	position: absolute;
	inset: 2.5px;
	background: var(--msd-gold);
	border-radius: 50%;
}
.msd-loc-item__name {
	flex: 1;
	font-size: 14px;
	color: var(--msd-body);
	transition: color 0.2s ease;
}
.msd-loc-item:hover .msd-loc-item__name { color: var(--msd-ink); }
.msd-loc-item.is-active .msd-loc-item__name { color: var(--msd-green); font-weight: 600; }
.msd-loc-item__chev {
	color: var(--msd-gold);
	font-size: 18px;
	opacity: 0;
	transition: opacity 0.2s ease;
}
.msd-loc-item:hover .msd-loc-item__chev,
.msd-loc-item.is-active .msd-loc-item__chev { opacity: 1; }

/* ---- Centre detail card ---- */
.msd-detail {
	background: #fff;
	border: 1px solid var(--msd-line);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 20px 46px rgba(44, 64, 25, 0.14);
}
.msd-detail__media {
	height: 200px;
	background-size: cover;
	background-position: center;
}
.msd-detail__media--empty {
	background: linear-gradient(135deg, var(--msd-cream-2), #e6dcc6);
	display: flex;
	align-items: center;
	justify-content: center;
}
.msd-detail__media--empty span {
	font-family: var(--msd-serif);
	font-size: 24px;
	color: var(--msd-green);
	opacity: 0.5;
	padding: 0 20px;
	text-align: center;
}
.msd-detail__body { padding: 26px 28px 28px; }
.msd-detail__brand {
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 10.5px;
	font-weight: 600;
	color: var(--msd-gold);
	margin-bottom: 8px;
}
.msd-loc .msd-detail__title {
	font-family: var(--msd-serif) !important;
	font-size: 28px !important;
	line-height: 1.15 !important;
	color: var(--msd-green) !important;
	font-weight: 600 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	margin: 0 0 14px !important;
}
.msd-detail__addr {
	font-size: 14px;
	line-height: 1.6;
	color: var(--msd-body);
	font-weight: 300;
	margin: 0 0 16px;
}
.msd-detail__row {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	font-size: 14px;
	color: var(--msd-body);
	margin: 8px 0;
}
.msd-loc .msd-detail__ic {
	width: 17px !important;
	height: 17px !important;
	max-width: none !important;
	flex: 0 0 auto;
	fill: var(--msd-green) !important;
	margin-top: 1px;
}
.msd-detail__row a { color: var(--msd-green); text-decoration: none; transition: color 0.2s ease; }
.msd-detail__row a:hover { color: var(--msd-gold); }
.msd-detail__actions {
	margin-top: 22px;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

/* ---- Buttons (theme-proof) ---- */
.msd-loc .msd-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100% !important;
	font-family: var(--msd-sans) !important;
	font-size: 11.5px !important;
	font-weight: 600 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	padding: 14px 22px !important;
	border-radius: 3px !important;
	text-decoration: none !important;
	cursor: pointer;
	line-height: 1 !important;
	box-shadow: none !important;
	border: 1px solid transparent !important;
	transition: all 0.24s ease;
}
.msd-loc .msd-btn--solid {
	background: var(--msd-green-dark) !important;
	color: var(--msd-cream) !important;
	border-color: var(--msd-green-dark) !important;
}
.msd-loc .msd-btn--solid:hover { background: var(--msd-green) !important; color: #fff !important; }
.msd-loc .msd-btn--ghost {
	background: transparent !important;
	color: var(--msd-green-dark) !important;
	border-color: rgba(60, 90, 34, 0.4) !important;
}
.msd-loc .msd-btn--ghost:hover { background: var(--msd-green) !important; color: var(--msd-cream) !important; border-color: var(--msd-green) !important; }

/* ---- India outline map ---- */
.msd-loc__mapcol { position: relative; }
.msd-india {
	position: relative;
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
}
/* Force size/fills over theme "svg { width:1em }" and "svg path { fill:currentColor }" rules. */
.msd-loc .msd-india__svg {
	width: 100% !important;
	height: auto !important;
	max-width: none !important;
	display: block !important;
	overflow: visible !important;
}

.msd-loc .msd-india__outline {
	fill: rgba(182, 138, 60, 0.06) !important;
	stroke: rgba(182, 138, 60, 0.7) !important;
	stroke-width: 1.3;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.msd-loc .msd-svgpin { cursor: pointer; }
.msd-loc .msd-svgpin__body {
	fill: var(--msd-green) !important;
	stroke: var(--msd-cream) !important;
	stroke-width: 2.5;
	transition: fill 0.2s ease;
}
.msd-loc .msd-svgpin__hole { fill: var(--msd-cream) !important; }
.msd-loc .msd-svgpin__glow { fill: var(--msd-gold) !important; opacity: 0; transition: opacity 0.25s ease; }
.msd-loc .msd-svgpin:hover .msd-svgpin__body { fill: var(--msd-gold) !important; }
.msd-loc .msd-svgpin:focus { outline: none; }
.msd-loc .msd-svgpin:focus-visible .msd-svgpin__body { fill: var(--msd-gold) !important; }
.msd-loc .msd-svgpin.is-active .msd-svgpin__body { fill: var(--msd-gold) !important; }
.msd-loc .msd-svgpin.is-active .msd-svgpin__glow { opacity: 0.4 !important; }

.msd-india__script {
	position: absolute;
	right: 4%;
	bottom: 8%;
	font-family: var(--msd-serif);
	font-style: italic;
	font-weight: 600;
	font-size: clamp(16px, 1.6vw, 22px);
	line-height: 1.1;
	color: var(--msd-green);
	opacity: 0.85;
	text-align: center;
	pointer-events: none;
}

.msd-loc__empty { text-align: center; color: var(--msd-body); font-size: 16px; padding: 40px; }

/* ---- Responsive ---- */
@media (max-width: 1080px) {
	.msd-loc__grid {
		grid-template-columns: minmax(240px, 300px) 1fr;
		gap: 34px;
	}
	.msd-loc__mapcol { grid-column: 1 / -1; }
	.msd-india { max-width: 440px; }
}
@media (max-width: 680px) {
	.msd-loc__grid { grid-template-columns: 1fr; gap: 30px; }
	.msd-detail__title { font-size: 24px; }
	.msd-india { max-width: 340px; }
}