/* Dealer Deck front end — colours and sizes come from CSS variables set on the Design tab. */
.dd-network { --dd-card-bg: #d6d6d6; --dd-card-text: #000; --dd-title: #242424; --dd-name: #d62828; --dd-icon: #3a86c8; --dd-btn-bg: #000; --dd-btn-text: #fff; --dd-btn-hover: #333; --dd-dir-bg: #d62828; --dd-dir-hover: #a61e1e; --dd-search-btn: #2e9e48; --dd-tab: #333; --dd-tab-on: #000; --dd-heading: #242424; --dd-fs-district: 20px; --dd-fs-name: 17px; --dd-fs-text: 15px; --dd-btn-justify: center; --dd-btn-grow: 0; --dd-radius: 12px; --dd-gap: 20px; --dd-cols: 3; --dd-cols-t: 2; --dd-cols-m: 1; --dd-font: inherit; --dd-head-font: inherit; --dd-maxw: 1200px;
	font-family: var(--dd-font); color: var(--dd-card-text); margin: 0 auto; width: 100%; max-width: 100%; box-sizing: border-box; container-type: inline-size; container-name: ddnet; }
.dd-network *, .dd-network *::before, .dd-network *::after { box-sizing: border-box; }
.dd-network [hidden] { display: none !important; }
/* Wide mode: break out of a narrow theme content column, centred, never wider than the screen. */
.dd-network.dd-wide { position: relative; left: 50%; transform: translateX(-50%); width: min(var(--dd-maxw), calc(100vw - 40px)); max-width: none; }
.dd-network .dd-heading, .dd-district, .dd-network .dd-name, .dd-network .dd-tab, .dd-network a.dd-btn, .dd-network .dd-search-btn { font-family: var(--dd-head-font); }

.dd-head { text-align: center; margin-bottom: 18px; }
.dd-network .dd-heading { margin: 0 0 10px; font-size: 24px; font-weight: 600; letter-spacing: .3px; line-height: 1.3; color: var(--dd-heading); }
.dd-intro { color: #777; font-size: var(--dd-fs-text); line-height: 1.6; }
.dd-intro p { margin: 0; }

/* City tabs: centred and wrapping on wide screens, swipeable row on phones. */
.dd-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 40px; padding: 4px 4px 10px; margin-bottom: 16px; }
.dd-network .dd-tab { flex: 0 0 auto; display: inline-flex; flex-direction: column; align-items: center; gap: 4px; background: none !important; border: 0 !important; padding: 5px 0 !important; margin-top: 0; margin-bottom: 0; min-height: 0; width: auto; cursor: pointer; color: var(--dd-tab) !important; font-size: 16px; font-weight: 500; letter-spacing: 0; text-transform: none; box-shadow: none !important; position: relative; line-height: 1.2; }
.dd-network .dd-tab:hover { color: var(--dd-tab-on) !important; }
.dd-network .dd-tab.is-active { color: var(--dd-tab-on) !important; font-weight: 700; }
.dd-network .dd-tab.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; background: var(--dd-tab-on); border-radius: 2px; }
.dd-tab .dd-ico { width: 16px; height: 16px; }

/* Search with button */
.dd-network .dd-search { display: flex; align-items: stretch; gap: 0; max-width: 600px; margin: 0 auto 26px; padding: 0; border: 1px solid #e0e0e0; border-radius: 999px; background: #fff; overflow: hidden; }
.dd-network .dd-search:focus-within { border-color: var(--dd-search-btn); }
.dd-network .dd-search-field { flex: 1 1 auto; min-width: 0; width: auto; height: 44px; padding: 0 18px; margin: 0; border: 0 !important; border-radius: 0; background: transparent; font: inherit; font-size: 14px; color: #333; box-shadow: none !important; outline: none; }
.dd-network .dd-search-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 44px; min-height: 0; margin: 0; padding: 0 22px; border: 0; border-radius: 0 999px 999px 0; background: var(--dd-search-btn) !important; color: #fff !important; font-size: 14px; font-weight: 600; line-height: 1; cursor: pointer; box-shadow: none; text-transform: none; letter-spacing: 0; transition: filter .2s; }
.dd-network .dd-search-btn:hover { filter: brightness(.9); }
.dd-search-btn .dd-ico { width: 16px; height: 16px; }

/* Grid + card */
.dd-grid { display: grid; grid-template-columns: repeat(var(--dd-cols), minmax(0, 1fr)); gap: var(--dd-gap); }
.dd-item { background: var(--dd-card-bg); border-radius: var(--dd-radius); padding: 16px 20px; display: flex; flex-direction: column; min-width: 0; color: var(--dd-card-text); }
.dd-district { font-size: var(--dd-fs-district); font-weight: 600; line-height: 1.25; color: var(--dd-title); margin-bottom: 4px; overflow-wrap: anywhere; }
.dd-network .dd-name { font-size: var(--dd-fs-name); font-weight: 600; line-height: 1.3; color: var(--dd-name); margin: 0 0 12px; padding: 0; text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; }
.dd-network .dd-info { list-style: none; margin: 0 0 14px; padding: 0; flex: 1; }
.dd-network .dd-info li { display: flex; gap: 6px; align-items: flex-start; margin: 0 0 8px; padding: 0; font-size: var(--dd-fs-text); line-height: 1.45; color: var(--dd-card-text); }
.dd-info li::before { content: none; }
.dd-info .dd-ico { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 2px; color: var(--dd-icon); }
.dd-info span { min-width: 0; overflow-wrap: anywhere; }
.dd-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: var(--dd-btn-justify); margin-top: auto; }
.dd-network a.dd-btn { flex: var(--dd-btn-grow) 1 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 22px; border-radius: 5px; background: var(--dd-btn-bg); color: var(--dd-btn-text); font-size: 14px; font-weight: 600; text-decoration: none; line-height: 1.2; text-align: center; transition: background .2s, transform .2s; border: 0; }
.dd-network a.dd-btn:hover, .dd-network a.dd-btn:focus { background: var(--dd-btn-hover); color: var(--dd-btn-text); transform: translateY(-1px); }
.dd-network a.dd-btn-dir { background: var(--dd-dir-bg); }
.dd-network a.dd-btn-dir:hover, .dd-network a.dd-btn-dir:focus { background: var(--dd-dir-hover); }

.dd-empty { text-align: center; color: #777; padding: 30px 0; margin: 0; }

/* Responsive: follows the width of the block itself (works inside narrow Elementor columns too). */
@container ddnet (max-width: 900px) {
	.dd-grid { grid-template-columns: repeat(var(--dd-cols-t), minmax(0, 1fr)); }
	.dd-tabs { gap: 12px 28px; }
}
@container ddnet (max-width: 560px) {
	.dd-grid { grid-template-columns: repeat(var(--dd-cols-m), minmax(0, 1fr)); gap: 14px; }
	.dd-network .dd-heading { font-size: 19px; }
	.dd-tabs { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 6px 22px; }
	.dd-tabs::-webkit-scrollbar { display: none; }
	.dd-network .dd-tab { font-size: 14px; }
	.dd-item { padding: 14px 16px; }
	.dd-district { font-size: calc(var(--dd-fs-district) - 2px); }
	.dd-network .dd-name { font-size: calc(var(--dd-fs-name) - 1px); }
	.dd-network .dd-info li { font-size: calc(var(--dd-fs-text) - 1px); }
	.dd-network a.dd-btn { flex: 1 1 0; padding: 8px 12px; }
	.dd-network .dd-search-btn { padding: 0 16px; }
}
@container ddnet (max-width: 360px) {
	.dd-network .dd-search-btn span { display: none; }
}

/* Fallback for browsers without container queries. */
@supports not (container-type: inline-size) {
	@media (max-width: 1024px) { .dd-grid { grid-template-columns: repeat(var(--dd-cols-t), minmax(0, 1fr)); } }
	@media (max-width: 640px) {
		.dd-grid { grid-template-columns: repeat(var(--dd-cols-m), minmax(0, 1fr)); }
		.dd-network a.dd-btn { flex: 1 1 0; }
	}
}