.map-generator-container { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; max-width: 1400px; margin: 2em auto; padding: 0 1em; line-height: 1.6; }
.map-generator-container .input-section, .map-generator-container .qa-section, .map-generator-container #status { margin-bottom: 1.5em; }
.map-generator-container textarea { width: 100%; height: 150px; padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-size: 16px; box-sizing: border-box;}
.map-generator-container button { padding: 10px 20px; font-size: 16px; cursor: pointer; border: none; background-color: var(--e-global-color-primary); color: var(--e-global-color-5e08e56); border-radius: 5px; }
.map-generator-container button:disabled { background-color: #aaa; }
.map-generator-container #status, .map-generator-container .qa-question { font-weight: bold; padding: 1em; border-radius: 5px; }
.map-generator-container .qa-options label { display: block; margin: 0.5em 0; cursor: pointer; padding: 10px; border: 1px solid #ddd; border-radius: 5px; }
.map-generator-container .qa-options label:hover { background-color: #f0f0f0; }
.map-generator-container .place-item:has(.place-item-content):hover { background-color: #f0f0f0; }
.map-generator-container .success { color: #0f9d58; background-color: #e6f4ea; }
.map-generator-container .info { color: #1a73e8; background-color: #e8f0fe; }
.map-generator-container .error { color: #db4437; background-color: #fce8e6; }
.map-generator-container .hidden { display: none !important; }
.map-generator-container #map { height: 700px; width: 100%; background-color: #e0e0e0; }
.map-generator-container #map-area { display: flex; gap: 1.5em; margin-top: 2em; }
.map-generator-container #places-list-container { flex: 1; height: 700px; display: flex; flex-direction: column; }
.map-generator-container #places-list { overflow-y: auto; border: 1px solid #ddd; border-radius: 8px; background-color: #fff; flex-grow: 1; }
.map-generator-container #map { flex: 2; width: auto; border-radius: 8px; }
.map-generator-container #places-list-container h2 { margin: 0 0 0.5em 0; font-size: 1.2em; } 
.map-generator-container .place-item { padding: 1em; border-bottom: 1px solid #eee; transition: background-color 0.2s; display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.map-generator-container .place-item-content { cursor: pointer; flex-grow: 1; }
.map-generator-container .place-item:last-child { border-bottom: none; }
.map-generator-container .place-item-actions, .list-controls { display: flex; gap: 0.5em; flex-shrink: 0; }
.small-btn { padding: 10px 20px; font-size: 16px; cursor: pointer; border: none; background-color: var(--e-global-color-primary); color: var(--e-global-color-5e08e56); border-radius: 5px; }
.map-generator-container .place-item-actions button { padding: 4px 8px; font-size: 12px; }
.map-generator-container .place-item-edit { display: flex; flex-direction: column; gap: 0.5em; }
.map-generator-container .place-item-edit input, .map-generator-container .place-item-edit textarea, .map-generator-container .custom-field-value-wrapper input, .map-generator-container .custom-field-value-wrapper textarea, .map-generator-container .custom-field-name-wrapper input, .map-generator-container .custom-field-name-wrapper select { width: 100%; box-sizing: border-box; padding: 8px; border: 1px solid #ccc; border-radius: 4px; font-family: inherit; font-size: 14px; }
.map-generator-container .place-item-edit textarea, .map-generator-container .custom-field-value-wrapper textarea { min-height: 80px; resize: vertical; }
.map-generator-container .icon-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 8px; padding: 8px; border: 1px solid #ddd; border-radius: 4px; background-color: #f9f9f9; max-width: 400px; }
.map-generator-container .icon-option { display: flex; align-items: center; justify-content: center; padding: 4px; border: 2px solid transparent; border-radius: 4px; cursor: pointer; transition: all 0.2s; }
.map-generator-container .icon-option:hover { background-color: #e0e0e0; }
.map-generator-container .icon-option.selected { border-color: #4285F4; background-color: #e8f0fe; }
.map-generator-container .icon-option img { width: 32px; height: 32px; }
.map-generator-container .place-item-edit input.input-error, .map-generator-container .custom-field-value-wrapper input.input-error { border-color: #db4437; }
.map-generator-container .input-error-message { color: #db4437; font-size: 0.9em; margin-top: 4px; }
.map-generator-container .custom-field-row { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.map-generator-container .custom-field-row .drag-handle { cursor: grab; padding: 0 8px; color: #999; font-size: 1.5em; align-self: stretch; display: flex; align-items: center; }
.map-generator-container .custom-field-row .drag-handle:active { cursor: grabbing; }
.map-generator-container .custom-field-content { flex-grow: 1; display: flex; flex-direction: column; gap: 5px; }
.map-generator-container .custom-field-input-group { display: flex; flex-direction: column; }
.map-generator-container .custom-field-input-group label { font-size: 0.85em; color: #555; margin-bottom: 2px; }
.map-generator-container .custom-field-name-wrapper { display: flex; gap: 10px; }
.map-generator-container .custom-field-value-wrapper { display: flex; gap: 10px; }
.map-generator-container .custom-field-value-wrapper input { flex-grow: 1; }
.map-generator-container .custom-field-row .delete-custom-field-btn { padding: 4px 8px; font-size: 12px; background-color: #f1f1f1; color: #333; align-self: center; }
.map-generator-container .add-custom-field-btn { margin-top: 10px; background-color: #e0e0e0; color: #333; }
.map-generator-container .custom-field-row.dragging { opacity: 0.5; background: #cce5ff; cursor: grabbing; }
.map-generator-container .custom-field-row.drag-over { border-top: 2px solid #4285F4; }
.map-generator-container #place-editor-container { flex: 2; width: auto; border-radius: 8px; padding: 1.5em; background-color: #f9f9f9; border: 1px solid #ddd; display: flex; flex-direction: column; gap: 1em; }
.map-generator-container #place-editor-container h3 { margin: 0 0 0.5em 0; }
.map-generator-container #place-editor-container .place-item-edit { gap: 1em; }
.map-generator-container #place-editor-container .place-item-actions { margin-top: auto; padding-top: 1em; }
.global-settings-container {
    margin-top: 2em; padding: 1.5em; border: 1px solid #ddd; border-radius: 8px; background-color: #f9f9f9;
}
.global-settings-container h3 { margin-top: 0; }
.global-settings-controls { display: flex; flex-wrap: wrap; gap: 1.5em; }
.global-settings-controls div { display: flex; align-items: center; gap: 0.5em; }
.global-settings-controls .icon-setting { flex-direction: column; align-items: flex-start; }

.map-generator-container .checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
}
.map-generator-container .checkbox-label input[type="checkbox"] {
    width: 1.3em;
    height: 1.3em;
}

.map-generator-container .user-actions { margin-top: 1em; display: flex; flex-wrap: wrap; gap: 1em; align-items: center; }
.map-generator-container #auth-status { font-size: 0.9em; width: 100%; }
.map-generator-container .user-actions .load-map-section { display: flex; gap: 1em; align-items: center; flex-grow: 1; }
.map-generator-container .user-actions select { padding: 8px; border: 1px solid #ccc; border-radius: 4px; flex-grow: 1; }
.map-generator-container .user-actions input { padding: 8px; border: 1px solid #ccc; border-radius: 4px; flex-grow: 1; }

/* Mobile-friendly layout for generator/editor */
@media (max-width: 768px) {
    .map-generator-container #map-area { flex-direction: column-reverse; }
    .map-generator-container #places-list-container { height: auto; max-height: 40vh; }
    .map-generator-container #map { height: 60vh; min-height: 300px; }
}

/* --- Styles for Embed Page --- */

/* These styles are also used by the embed page, but without the .map-generator-container prefix */
html, body { margin: 0; padding: 0; height: 100%; width: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
#map-area { display: flex; height: 100%; width: 100%; gap: 1em; padding: 1em; box-sizing: border-box; }
#places-list-container { flex: 1; height: 100%; display: flex; flex-direction: column; min-width: 250px; }
#places-list { overflow-y: auto; border: 1px solid #ddd; border-radius: 8px; background-color: #fff; flex-grow: 1; }
#map { flex: 2; width: auto; height: 100%; border-radius: 8px; background-color: #e0e0e0; }
#status { padding: 1em; text-align: center; }
.error { color: #db4437; background-color: #fce8e6; }
.place-item { padding: 1em; border-bottom: 1px solid #eee; transition: background-color 0.2s; cursor: pointer; }
.place-item:last-child { border-bottom: none; }
.place-item:hover { background-color: #f0f0f0; }
.place-item h3 { margin: 0 0 5px 0; font-size: 1em; }
.place-item p { margin: 0; font-size: 0.9em; color: #555; }

/* Mobile-friendly layout for embed */
@media (max-width: 768px) {
    #map-area { flex-direction: column-reverse; }
    #places-list-container { height: 40vh; min-height: 200px; }
    #map { height: 60vh; }
}