/* ============================================================
   AL60 Arztsuche OSM – Frontend CSS
   Nutzt Theme-CSS-Variablen (aktivleben60) als Primärquelle.
   Scope: .al60-osm-arztsuche / .al60-osm-template-page
   ============================================================ */

/* ---- Lokale Fallbacks falls Theme-Vars fehlen ---- */
.al60-osm-arztsuche,
.al60-osm-template-page {
	--al60-accent:        var(--color-accent,      #1e6db5);
	--al60-accent-dark:   var(--color-accent-dark,  #15508a);
	--al60-text:          var(--color-primary,      #1a1a1a);
	--al60-muted:         var(--color-muted,        #555555);
	--al60-border:        var(--color-border,       #cccccc);
	--al60-surface:       var(--color-surface,      #f5f5f5);
	--al60-surface-alt:   var(--color-surface-alt,  #eef3f7);
	--al60-radius:        var(--radius,             8px);
	--al60-radius-lg:     var(--radius-lg,          16px);
	--al60-font:          var(--font-base, 'Segoe UI', Arial, Helvetica, sans-serif);
	--al60-focus:         var(--color-focus,        #005fcc);

	font-size:   19px;
	line-height: 1.7;
	color:       var(--al60-text);
	font-family: var(--al60-font);
	box-sizing:  border-box;
}

/* ---- Farbschema-Überschreibungen (Admin-Einstellung) ---- */
.al60-osm-arztsuche[data-color-scheme="blue"] {
	--al60-accent:      #1e6db5;
	--al60-accent-dark: #15508a;
	--al60-surface-alt: #eef3f7;
}
.al60-osm-arztsuche[data-color-scheme="green"] {
	--al60-accent:      #2e8b57;
	--al60-accent-dark: #206040;
	--al60-surface-alt: #edf5ee;
}
.al60-osm-arztsuche[data-color-scheme="neutral"] {
	--al60-accent:      #444444;
	--al60-accent-dark: #222222;
	--al60-surface-alt: #efefef;
}

.al60-osm-arztsuche *,
.al60-osm-template-page * { box-sizing: inherit; }

/* ============================================================
   SUCHBOX – passend zu .filter-bar / .card des Themes
   ============================================================ */
.al60-osm-search-box {
	background:    var(--al60-surface-alt);
	border:        1px solid var(--al60-border);
	border-radius: var(--al60-radius-lg);
	padding:       28px 32px 24px;
	margin-bottom: 20px;
	box-shadow:    0 2px 10px rgba(20, 30, 20, 0.05);
}
@media (max-width: 600px) {
	.al60-osm-search-box { padding: 18px 14px; }
}

.al60-osm-title {
	font-size:   1.4em;
	font-weight: 700;
	color:       var(--al60-accent);
	margin:      0 0 6px;
	line-height: 1.25;
}

.al60-osm-subtitle {
	color:   var(--al60-muted);
	margin:  0 0 22px;
	font-size: 0.95em;
}

/* ---- Felder – passend zu Theme-Inputs ---- */
.al60-osm-fields {
	display:               grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap:                   14px;
	margin-bottom:         18px;
}
@media (max-width: 840px) { .al60-osm-fields { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .al60-osm-fields { grid-template-columns: 1fr; } }

.al60-osm-field-group {
	display:        flex;
	flex-direction: column;
	gap:            5px;
}

.al60-osm-label {
	font-weight:   700;
	font-size:     0.85em;
	color:         var(--al60-text);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* Exakt wie Theme-Inputs (section 11) */
.al60-osm-input,
.al60-osm-select {
	font-family:  var(--al60-font);
	font-size:    1em;
	padding:      0.65rem 0.85rem;
	border:       2px solid var(--al60-border);
	border-radius: var(--al60-radius);
	background:   #ffffff;
	color:        var(--al60-text);
	width:        100%;
	min-height:   50px;
	line-height:  1.5;
	transition:   border-color .15s ease;
	appearance:   auto;
}
.al60-osm-input:focus,
.al60-osm-select:focus {
	border-color: var(--al60-accent);
	outline:      3px solid color-mix(in srgb, var(--al60-accent) 22%, transparent);
	outline-offset: 0;
}

/* ---- Buttons – identisch zu .btn des Themes ---- */
.al60-osm-buttons {
	display:   flex;
	gap:       10px;
	flex-wrap: wrap;
}

.al60-osm-btn {
	display:        inline-flex;
	align-items:    center;
	justify-content: center;
	gap:            7px;
	min-height:     48px;
	padding:        0.6rem 1.4rem;
	font-size:      1em;
	font-family:    var(--al60-font);
	font-weight:    700;
	border-radius:  var(--al60-radius);
	border:         2px solid transparent;
	cursor:         pointer;
	text-decoration: none;
	line-height:    1.3;
	transition:     background .15s, color .15s, border-color .15s, transform .15s, box-shadow .15s;
}
.al60-osm-btn:hover             { transform: translateY(-1px); }
.al60-osm-btn:focus-visible     { outline: 3px solid var(--al60-focus); outline-offset: 2px; }

.al60-osm-btn-primary {
	background:   var(--al60-accent);
	color:        #ffffff;
	border-color: var(--al60-accent);
	box-shadow:   0 4px 12px color-mix(in srgb, var(--al60-accent) 28%, transparent);
}
.al60-osm-btn-primary:hover {
	background:   var(--al60-accent-dark);
	border-color: var(--al60-accent-dark);
	color:        #ffffff;
}

.al60-osm-btn-secondary {
	background:   transparent;
	color:        var(--al60-accent);
	border-color: var(--al60-accent);
}
.al60-osm-btn-secondary:hover {
	background: var(--al60-accent);
	color:      #ffffff;
}

/* ---- Status & Fehler ---- */
.al60-osm-status {
	display:       flex;
	align-items:   center;
	gap:           10px;
	background:    var(--al60-surface-alt);
	border:        1px solid var(--al60-border);
	border-radius: var(--al60-radius);
	padding:       13px 16px;
	margin-bottom: 14px;
	color:         var(--al60-muted);
	font-size:     0.95em;
}
.al60-osm-status::before {
	content:       '';
	flex-shrink:   0;
	width:         17px;
	height:        17px;
	border:        3px solid var(--al60-border);
	border-top:    3px solid var(--al60-accent);
	border-radius: 50%;
	animation:     al60-spin .75s linear infinite;
}
@keyframes al60-spin { to { transform: rotate(360deg); } }

.al60-osm-error {
	background:    #fff3f3;
	border:        1px solid #e99;
	border-radius: var(--al60-radius);
	padding:       13px 16px;
	margin-bottom: 14px;
	color:         #b22;
	font-size:     0.95em;
	font-weight:   500;
}

/* ---- Karte ---- */
.al60-osm-map-container {
	margin-bottom: 18px;
	border-radius: var(--al60-radius);
	overflow:      hidden;
	border:        2px solid var(--al60-border);
	box-shadow:    0 4px 14px rgba(20, 30, 20, 0.07);
}
.al60-osm-map { width: 100%; height: 420px; }
@media (max-width: 600px) { .al60-osm-map { height: 270px; } }

/* ---- Leaflet Marker ---- */
.al60-osm-user-ring {
	width:         16px; height: 16px;
	background:    #e63946;
	border:        3px solid #fff;
	border-radius: 50%;
	box-shadow:    0 1px 5px rgba(0,0,0,.4);
}
.al60-osm-pin { position: relative; width: 30px; height: 36px; }
.al60-osm-pin-bubble {
	position:       absolute; top: 0; left: 0;
	width:          30px;     height: 30px;
	background:     var(--al60-accent, #1e6db5);
	border-radius:  50% 50% 50% 0;
	transform:      rotate(-45deg);
	box-shadow:     0 2px 7px rgba(0,0,0,.28);
	display:        flex;
	align-items:    center;
	justify-content: center;
}
.al60-osm-pin-num {
	transform:  rotate(45deg);
	color:      #fff;
	font-size:  12px;
	font-weight: 700;
	line-height: 1;
}

/* ---- Ergebnisliste – passend zu .dir-card des Themes ---- */
.al60-osm-count {
	font-size:  0.85em;
	color:      var(--al60-muted);
	margin:     0 0 10px;
	font-weight: 600;
}

.al60-osm-list { display: flex; flex-direction: column; gap: 10px; }

.al60-osm-list-item {
	display:        flex;
	gap:            14px;
	align-items:    flex-start;
	background:     #ffffff;
	border:         2px solid var(--al60-border);
	border-radius:  var(--al60-radius-lg);
	padding:        16px;
	cursor:         pointer;
	transition:     border-color .15s, box-shadow .15s, transform .15s;
	box-shadow:     0 2px 8px rgba(20, 30, 20, 0.06);
}
.al60-osm-list-item:hover {
	border-color: var(--al60-accent);
	box-shadow:   0 6px 18px rgba(20, 30, 20, 0.1);
	transform:    translateY(-1px);
}
.al60-osm-list-item.is-active {
	border-color: var(--al60-accent);
	box-shadow:   0 0 0 3px color-mix(in srgb, var(--al60-accent) 18%, transparent);
}

.al60-osm-item-num {
	width:           34px; height: 34px;
	background:      var(--al60-accent);
	color:           #ffffff;
	border-radius:   50%;
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-weight:     700;
	font-size:       0.85em;
	flex-shrink:     0;
	margin-top:      2px;
}

.al60-osm-item-info  { flex: 1; min-width: 0; }

.al60-osm-item-name {
	display:       block;
	font-size:     1.05em;
	font-weight:   700;
	color:         var(--al60-text);
	margin-bottom: 4px;
	word-break:    break-word;
}

.al60-osm-item-address,
.al60-osm-item-phone {
	font-size:     0.88em;
	color:         var(--al60-muted);
	margin-bottom: 3px;
}
.al60-osm-item-phone a { color: var(--al60-accent); text-decoration: underline; }

.al60-osm-item-distance {
	font-size:   0.85em;
	color:       var(--al60-accent);
	font-weight: 700;
	margin-top:  5px;
}
.al60-osm-item-actions { margin-top: 8px; }
.al60-osm-route-link {
	display:         inline-flex;
	align-items:     center;
	gap:             4px;
	font-size:       0.88em;
	color:           var(--al60-accent);
	font-weight:     700;
	text-decoration: underline;
}
.al60-osm-route-link:hover { color: var(--al60-accent-dark); }

/* ---- Hinweise ---- */
.al60-osm-osm-note,
.al60-osm-privacy-note {
	font-size:   0.8em;
	color:       var(--al60-muted);
	border-top:  1px solid var(--al60-border);
	margin-top:  14px;
	padding-top: 10px;
	line-height: 1.5;
}
.al60-osm-osm-note a,
.al60-osm-privacy-note a { color: var(--al60-accent); text-decoration: underline; }

/* ============================================================
   TEMPLATE-SEITE
   ============================================================ */
.al60-osm-template-page { max-width: 900px; }

/* Hero – passend zu .is-event .entry-header des Themes */
.al60-osm-hero {
	background:    linear-gradient(135deg, #eef5ff 0%, #e3eefb 100%);
	border:        1px solid color-mix(in srgb, var(--al60-accent) 18%, transparent);
	border-left:   5px solid var(--al60-accent);
	border-radius: 0 var(--al60-radius-lg) var(--al60-radius-lg) 0;
	padding:       28px 32px;
	margin-bottom: 30px;
}
@media (max-width: 600px) { .al60-osm-hero { padding: 18px 14px; } }

.al60-osm-hero-title {
	font-size:   1.45em;
	color:       var(--al60-accent);
	margin:      0 0 10px;
	line-height: 1.25;
}
.al60-osm-hero-text { font-size: 1em; color: var(--al60-muted); margin: 0; }

.al60-osm-info-section,
.al60-osm-search-section { margin-bottom: 30px; }

/* Section-Titel – passend zu .section-title des Themes */
.al60-osm-section-title {
	font-size:     1.25em;
	color:         var(--al60-text);
	margin-bottom: 16px;
	padding-bottom: 6px;
	border-bottom: 3px solid var(--al60-accent);
}

/* Schritte – passend zu .feature-card */
.al60-osm-steps {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   12px;
}
@media (max-width: 540px) { .al60-osm-steps { grid-template-columns: 1fr; } }

.al60-osm-step {
	display:        flex;
	gap:            14px;
	align-items:    flex-start;
	background:     #ffffff;
	border:         2px solid var(--al60-border);
	border-radius:  var(--al60-radius);
	padding:        18px;
	font-size:      0.95em;
	box-shadow:     0 2px 8px rgba(20, 30, 20, 0.05);
	transition:     transform .18s ease, box-shadow .18s ease;
}
.al60-osm-step:hover {
	transform:  translateY(-2px);
	box-shadow: 0 6px 18px rgba(20, 30, 20, 0.1);
}
.al60-osm-step-num {
	width:           36px; height: 36px;
	background:      var(--al60-accent);
	color:           #ffffff;
	border-radius:   50%;
	display:         flex;
	align-items:     center;
	justify-content: center;
	font-weight:     700;
	font-size:       1.05em;
	flex-shrink:     0;
}

/* Info-Box – passend zu .widget des Themes */
.al60-osm-info-box {
	background:    var(--al60-surface);
	border:        1px solid var(--al60-border);
	border-radius: var(--al60-radius-lg);
	padding:       24px 28px;
}
@media (max-width: 600px) { .al60-osm-info-box { padding: 16px 14px; } }

.al60-osm-info-list { padding-left: 20px; margin: 0; }
.al60-osm-info-list li { margin-bottom: 10px; font-size: 1em; }
.al60-osm-info-list a { color: var(--al60-accent); text-decoration: underline; }