/* ═══════════ MAP EMBED GENERATOR ═══════════ */

.me-wrap { display: flex; flex-direction: column; gap: var(--space-5); }
.me-card { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: var(--space-5); }

/* Header */
.me-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.me-breadcrumb { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 6px; }
.me-breadcrumb span { margin: 0 6px; }
.me-title { font-size: var(--fs-2xl); font-weight: var(--fw-bold); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.me-ai-badge { font-size: 0.65rem; font-weight: var(--fw-semibold); color: var(--success); background: rgba(34,197,94,0.12); border: 1px solid rgba(34,197,94,0.3); padding: 3px 10px; border-radius: var(--radius-full); display: inline-flex; align-items: center; gap: 4px; }
.me-subtitle { color: var(--text-secondary); font-size: var(--fs-base); margin-top: 6px; max-width: 900px; }
.me-header-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }
.me-template-btn { padding: 10px 20px; background: none; border: 1px solid var(--border-color); border-radius: var(--radius-md); color: var(--text-secondary); font-size: var(--fs-xs); font-weight: var(--fw-semibold); cursor: pointer; display: flex; align-items: center; gap: 8px; }
.me-template-btn:hover { border-color: var(--border-color-hover); color: var(--text-primary); }
.me-save-btn { padding: 10px 20px; background: linear-gradient(135deg, #3b82f6, #0ea5e9); border: none; color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-semibold); border-radius: var(--radius-md); cursor: pointer; display: flex; align-items: center; gap: 8px; }
.me-save-btn:hover { filter: brightness(1.1); }

/* 3-col layout */
.me-main-grid { display: grid; grid-template-columns: 400px 1fr 300px; gap: var(--space-5); align-items: start; }
.me-left, .me-middle, .me-right { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }

/* Section titles */
.me-sec-num { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-primary); }
.me-sec-desc { font-size: var(--fs-xs); color: var(--text-secondary); margin-top: 2px; }

/* Tabs */
.me-tabs { display: flex; border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; margin-top: var(--space-3); margin-bottom: var(--space-4); }
.me-tab { flex: 1; padding: 10px; text-align: center; font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer; background: none; border: none; color: var(--text-secondary); transition: all 0.15s; }
.me-tab:first-child { border-right: 1px solid var(--border-color); }
.me-tab.active { background: linear-gradient(135deg, #3b82f6, #0ea5e9); color: #fff; }
.me-tab:hover:not(.active) { background: var(--bg-elevated); }

/* Form */
.me-form-group { margin-bottom: 16px; }
.me-form-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.me-form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.me-label { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-secondary); margin-bottom: 4px; display: block; }

/* Map type selector */
.me-map-type-label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-primary); margin-bottom: var(--space-2); }
.me-map-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 8px; }
.me-map-type { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border: 1px solid var(--border-color); border-radius: var(--radius-md); cursor: pointer; background: none; color: var(--text-secondary); font-size: var(--fs-xs); font-weight: var(--fw-medium); transition: all 0.15s; }
.me-map-type:hover { border-color: var(--border-color-hover); color: var(--text-primary); }
.me-map-type.active { border-color: rgba(14,165,233,0.5); background: rgba(14,165,233,0.06); color: var(--primary); }
.me-map-type svg { width: 28px; height: 28px; }

/* Generate button */
.me-gen-btn { width: 100%; padding: 16px; background: linear-gradient(135deg, #8b5cf6, #6366f1); border: none; color: #fff; font-weight: var(--fw-semibold); font-size: var(--fs-sm); border-radius: var(--radius-md); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: var(--space-3); }
.me-gen-btn:hover { filter: brightness(1.1); }
.me-gen-helper { font-size: var(--fs-2xs); color: var(--text-muted); text-align: center; margin-top: 8px; }

/* Live Preview */
.me-preview-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.me-preview-head .me-sec-num { display: flex; align-items: center; gap: 8px; }
.me-device-icons { display: flex; gap: 6px; }
.me-device-btn { width: 32px; height: 32px; border-radius: var(--radius-md); border: 1px solid var(--border-color); background: none; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; }
.me-device-btn:hover { border-color: var(--border-color-hover); color: var(--text-primary); }
.me-device-btn.active { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--border-color-hover); }

.me-preview-frame { background: var(--bg-elevated); border-radius: var(--radius-lg); overflow: hidden; position: relative; min-height: 380px; }
.me-preview-info { background: #fff; padding: 14px; border-radius: 8px 8px 0 0; }
.me-preview-biz-name { font-size: var(--fs-base); font-weight: var(--fw-bold); color: #1a1a2e; display: flex; align-items: center; gap: 8px; }
.me-preview-biz-name svg { color: #666; }
.me-preview-address { font-size: var(--fs-xs); color: #555; margin-top: 2px; }
.me-preview-directions { font-size: var(--fs-xs); color: #1a73e8; text-decoration: none; cursor: pointer; font-weight: var(--fw-medium); }
.me-preview-directions:hover { text-decoration: underline; }
.me-preview-rating { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.me-preview-stars { color: #f59e0b; font-size: 0.75rem; letter-spacing: 1px; }
.me-preview-rating-text { font-size: var(--fs-xs); color: #555; }
.me-preview-reviews { font-size: var(--fs-xs); color: #1a73e8; cursor: pointer; }
.me-preview-larger { font-size: var(--fs-xs); color: #1a73e8; cursor: pointer; margin-top: 4px; display: inline-block; }

.me-map-area { width: 100%; height: 240px; background: linear-gradient(135deg, #e8eaed 0%, #d2e3fc 50%, #e8eaed 100%); position: relative; overflow: hidden; }
.me-map-pin { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -100%); }
.me-map-pin-dot { width: 16px; height: 16px; background: #ea4335; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); border: 2px solid #c5221f; }
.me-map-pin-shadow { width: 12px; height: 4px; background: rgba(0,0,0,0.2); border-radius: 50%; margin: 4px auto 0; }
.me-map-controls { position: absolute; right: 10px; bottom: 40px; display: flex; flex-direction: column; gap: 1px; }
.me-map-ctrl-btn { width: 30px; height: 30px; background: #fff; border: 1px solid #ddd; color: #666; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.me-map-ctrl-btn:first-child { border-radius: 4px 4px 0 0; }
.me-map-ctrl-btn:last-child { border-radius: 0 0 4px 4px; }
.me-map-streets { width: 100%; padding: 4px 8px; background: rgba(255,255,255,0.9); font-size: var(--fs-2xs); color: #666; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }

/* Embed Code */
.me-embed-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.me-copy-btn { padding: 8px 16px; background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: var(--radius-md); color: var(--text-secondary); font-size: var(--fs-xs); font-weight: var(--fw-semibold); cursor: pointer; display: flex; align-items: center; gap: 6px; }
.me-copy-btn:hover { border-color: var(--border-color-hover); color: var(--text-primary); }

.me-code-block { background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 16px; overflow-x: auto; margin-top: var(--space-2); }
.me-code-block code { font-size: var(--fs-xs); color: #a78bfa; font-family: 'Fira Code', 'Consolas', monospace; white-space: pre-wrap; word-break: break-all; line-height: 1.7; }
.me-code-tag { color: #ef4444; }
.me-code-attr { color: #22d3ee; }
.me-code-val { color: #34d399; }

.me-embed-options { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-top: var(--space-3); }
.me-embed-opt label { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-secondary); margin-bottom: 4px; display: block; }
.me-embed-opt select { width: 100%; }

/* Map Performance Impact */
.me-perf-title { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--text-primary); margin-bottom: var(--space-3); }

.me-gauge-wrap { position: relative; width: 110px; height: 110px; margin: 0 auto var(--space-3); }
.me-gauge-wrap svg { width: 100%; height: 100%; }
.me-gauge-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.me-gauge-val { font-size: 1.6rem; font-weight: var(--fw-bold); color: var(--text-primary); line-height: 1; }
.me-gauge-max { font-size: var(--fs-2xs); color: var(--text-muted); }
.me-gauge-label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--success); margin-top: 2px; }

.me-score-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--space-3); }
.me-score-row { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-xs); }
.me-score-name { color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
.me-score-check { color: var(--success); font-size: 0.75rem; }
.me-score-val { font-weight: var(--fw-semibold); color: var(--text-primary); }

.me-perf-note { font-size: var(--fs-xs); color: var(--text-secondary); padding-top: var(--space-2); border-top: 1px solid var(--border-color); }
.me-perf-note .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); display: inline-block; margin-right: 6px; }
.me-perf-improve { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--success); margin-top: 4px; }

/* Quick Templates */
.me-templates-title { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--text-primary); margin-bottom: 4px; }
.me-templates-desc { font-size: var(--fs-xs); color: var(--text-secondary); margin-bottom: var(--space-3); }

.me-template-row { display: flex; align-items: center; justify-content: space-between; padding: 12px; border: 1px solid var(--border-color); border-radius: var(--radius-md); margin-bottom: 8px; cursor: pointer; transition: all 0.15s; }
.me-template-row:hover { border-color: var(--border-color-hover); }
.me-template-row.active { border-color: rgba(14,165,233,0.4); background: rgba(14,165,233,0.04); }
.me-template-name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-primary); }
.me-template-sub { font-size: var(--fs-2xs); color: var(--text-muted); margin-top: 2px; }
.me-template-icon { color: var(--text-muted); font-size: 0.8rem; }
.me-template-row.active .me-template-icon { color: var(--primary); }

/* Pro Tips */
.me-tips-title { font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--text-primary); display: flex; align-items: center; gap: 6px; margin-bottom: var(--space-3); }
.me-tips-list { list-style: none; padding: 0; margin: 0; }
.me-tips-list li { font-size: var(--fs-xs); color: var(--text-secondary); padding: 5px 0 5px 20px; position: relative; line-height: 1.5; }
.me-tips-list li::before { content: '\2713'; position: absolute; left: 0; color: var(--success); font-weight: 700; font-size: 0.7rem; }

/* Need Help */
.me-help-title { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--text-primary); display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.me-help-desc { font-size: var(--fs-xs); color: var(--text-secondary); margin-bottom: 8px; }
.me-help-link { font-size: var(--fs-xs); color: var(--primary); font-weight: var(--fw-semibold); cursor: pointer; background: none; border: none; padding: 0; }
.me-help-link:hover { text-decoration: underline; }

/* Bottom features bar */
.me-features-bar { display: flex; gap: 14px; overflow-x: auto; padding: 4px 0; }
.me-feature-card { flex: 1; min-width: 200px; background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 16px; display: flex; align-items: flex-start; gap: 12px; }
.me-feature-icon { font-size: 1.3rem; flex-shrink: 0; color: var(--text-muted); }
.me-feature-name { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-primary); }
.me-feature-desc { font-size: var(--fs-2xs); color: var(--text-muted); margin-top: 2px; }

/* Responsive */
@media (max-width: 1300px) {
  .me-main-grid { grid-template-columns: 1fr 1fr; }
  .me-right { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
}
@media (max-width: 900px) {
  .me-main-grid { grid-template-columns: 1fr; }
  .me-right { grid-template-columns: 1fr; }
  .me-form-row { grid-template-columns: 1fr; }
  .me-form-row-2 { grid-template-columns: 1fr; }
  .me-map-types { grid-template-columns: repeat(2, 1fr); }
  .me-embed-options { grid-template-columns: 1fr; }
}