/* Layout */
.container { max-width: 1100px; margin: 32px auto; padding: 0 16px; }

.section-block { border: 1px solid #e6ecf5; border-radius: 12px; padding: 14px 16px 16px; margin: 16px 0; background: #fff; box-shadow: 0 4px 12px rgba(16,24,40,.03); }
.section-title { display: flex; align-items: center; gap: 10px; margin: 2px 0 12px; }
.section-num { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; color: #fff; background: #2ea2ff; box-shadow: 0 2px 8px rgba(46,162,255,.25); }
.section-heading { font-weight: 600; color: #0b1526; }
.helper-text { margin: 6px 0 10px; color: #6b7a90; font-size: 13px; }

.row { display: flex; gap: 16px; align-items: stretch; }
.col { flex: 1; }
.col-2 { flex: 2; }

/* Map */
#map { width: 100%; height: 420px; border-radius: 10px; border: 1px solid #e6ecf5; margin-bottom: 20px}

/* Inputs */
.grid { display: grid; gap: 10px; grid-template-columns: 2fr 1fr; }
.grid-full { grid-template-columns: 1fr; }
.grid .field { display: flex; flex-direction: column; }
.grid input { width: 100%; box-sizing: border-box; }

.message { margin-top: 6px; color: #6b7a90; font-size: 14px; }
.warning-input { border-color: #ffb610; }
.highlight-on-select { animation: fieldPulse 1.2s ease; }
@keyframes fieldPulse { 0% { box-shadow: 0 0 0 0 rgba(46,162,255,0.45);} 50% { box-shadow:0 0 0 6px rgba(46,162,255,0.18);} 100% { box-shadow:0 0 0 0 rgba(46,162,255,0);} }

/* Geolocation button */
#geo-btn { padding: 8px 10px; border-radius: 8px; border: 1px solid #cfd9e5; background: #ffffff; cursor: pointer; }
#geo-btn:hover { background: #f7fbff; }

/* Buttons */
.actions { margin-top: 8px; margin-bottom: 8px }
button[disabled] { opacity: .6; cursor: not-allowed; }

/* Dev panels */
.dev-panels { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; margin-top: 10px; }
.dev-panel { border: 1px dashed #c7d7ea; border-radius: 10px; padding: 10px 12px; background: #f7fbff; }
.dev-panel h4 { margin: 0 0 6px; font-size: 13px; color: #264a66; }
.kv { font-size: 12px; color: #35546a; line-height: 1.5; }
.kv strong { color: #1f2f3a; }
.code { margin-top: 6px; padding: 8px; background: #0b1526; color: #d7e3ef; border-radius: 6px; overflow: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 12px; max-height: 220px; }

/* Theme selector (reuse) */
.theme-selector { position: sticky; top: 8px; z-index: 1001; display: inline-flex; align-items: center; background: white; border: 1px solid #ccc; border-radius: 6px; padding: 2px; box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.theme-label { font-size: 12px; color: #666; font-weight: 500; padding: 4px 8px 4px 12px; border-right: 1px solid #eee; background: #f8f9fa; border-radius: 4px 0 0 4px; white-space: nowrap; }
.theme-selector select { padding: 4px 8px; border: none; background: transparent; color: #333; font-size: 12px; cursor: pointer; min-width: 120px; border-radius: 0 4px 4px 0; }
.theme-selector select:focus { outline: none; }

/* Dark mode for theme selector */
body.theme-minimal-dark .theme-selector,
body.theme-round-borders-dark .theme-selector {
  background: #2a2a2a;
  border-color: #444;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.theme-minimal-dark .theme-label,
body.theme-round-borders-dark .theme-label {
  color: #aaa;
  background: #1e1e1e;
  border-right-color: #444;
}

body.theme-minimal-dark .theme-selector select,
body.theme-round-borders-dark .theme-selector select {
  color: #e0e0e0;
  background: transparent;
}

body.theme-minimal-dark .theme-selector select option,
body.theme-round-borders-dark .theme-selector select option {
  background: #2a2a2a;
  color: #e0e0e0;
}

/* Dark theme tweaks */
body.theme-minimal-dark, body.theme-round-borders-dark { background:#1a1a1a; color:#e0e0e0; }
body.theme-minimal-dark .section-block, body.theme-round-borders-dark .section-block { background:#242424; border-color:#3a3a3a; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
body.theme-minimal-dark .section-heading, body.theme-round-borders-dark .section-heading { color:#e0e0e0; }
body.theme-minimal-dark .dev-panel, body.theme-round-borders-dark .dev-panel { background:#1e2633; border-color:#334155; }
body.theme-minimal-dark .dev-panel h4, body.theme-round-borders-dark .dev-panel h4 { color:#9ec5ff; }
body.theme-minimal-dark .kv, body.theme-round-borders-dark .kv { color:#94a3b8; }
body.theme-minimal-dark .kv strong, body.theme-round-borders-dark .kv strong { color:#cbd5e1; }

/* Developer info visibility toggle */
.dev-visibility { display:inline-flex; align-items:center; gap:6px; margin-left: 8px; }
.dev-visibility label { font-size: 12px; color: #425569; }
body.theme-minimal-dark .dev-visibility label, body.theme-round-borders-dark .dev-visibility label { color:#94a3b8; }
.hide-dev .dev-panel, .hide-dev .dev-panels { display: none !important; }

/* Dark mode button styling */
body.theme-minimal-dark button,
body.theme-round-borders-dark button {
  background: #3a3a3a;
  color: #e0e0e0;
  border-color: #555;
}

body.theme-minimal-dark button:hover,
body.theme-round-borders-dark button:hover {
  background: #4a4a4a;
}

body.theme-minimal-dark #geo-btn,
body.theme-round-borders-dark #geo-btn {
  background: #3a3a3a;
  color: #e0e0e0;
  border-color: #555;
}

body.theme-minimal-dark #geo-btn:hover,
body.theme-round-borders-dark #geo-btn:hover {
  background: #4a4a4a;
}

body.theme-minimal-dark .message,
body.theme-round-borders-dark .message {
  color: #94a3b8;
}

body.theme-minimal-dark #map,
body.theme-round-borders-dark #map {
  border-color: #3a3a3a;
}