/* ═══════════ GEO-TAGGED IMAGE INJECTOR ═══════════ */

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

/* Header */
.gi-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.gi-breadcrumb { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 6px; }
.gi-breadcrumb span { margin: 0 6px; }
.gi-title { font-size: var(--fs-2xl); font-weight: var(--fw-bold); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.gi-ai-badge { font-size: 0.65rem; font-weight: var(--fw-semibold); color: #a78bfa; background: rgba(139,92,246,0.14); border: 1px solid rgba(139,92,246,0.3); padding: 3px 10px; border-radius: var(--radius-full); }
.gi-subtitle { color: var(--text-secondary); font-size: var(--fs-base); margin-top: 6px; max-width: 900px; }
.gi-header-actions { display: flex; gap: 10px; align-items: center; flex-shrink: 0; }

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

/* Section titles */
.gi-sec-title { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-primary); margin-bottom: var(--space-3); }

/* Form fields */
.gi-form-group { margin-bottom: 14px; }
.gi-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gi-form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.gi-label { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--text-secondary); display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.gi-label .info-icon { color: var(--text-muted); font-size: 0.7rem; cursor: help; }
.gi-helper { font-size: var(--fs-2xs); color: var(--text-muted); margin-top: 3px; }

/* Upload zone */
.gi-drop-zone { border: 2px dashed var(--border-color); border-radius: var(--radius-md); padding: 30px 20px; text-align: center; cursor: pointer; transition: border-color 0.2s; }
.gi-drop-zone:hover { border-color: var(--primary); }
.gi-drop-zone.dragover { border-color: var(--primary); background: rgba(14,165,233,0.04); }
.gi-drop-icon { font-size: 2rem; color: var(--text-muted); margin-bottom: 8px; }
.gi-drop-text { font-size: var(--fs-sm); color: var(--text-secondary); margin-bottom: 4px; }
.gi-drop-or { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: 10px; }
.gi-choose-btn { padding: 8px 20px; background: var(--bg-elevated); border: 1px solid var(--border-color); color: var(--text-primary); font-size: var(--fs-xs); font-weight: var(--fw-semibold); border-radius: var(--radius-md); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.gi-choose-btn:hover { border-color: var(--border-color-hover); }
.gi-drop-helper { font-size: var(--fs-2xs); color: var(--text-muted); margin-top: 10px; }

/* Image thumbs */
.gi-thumbs { display: flex; gap: 10px; flex-wrap: wrap; margin-top: var(--space-3); }
.gi-thumb { position: relative; width: 80px; }
.gi-thumb-img { width: 80px; height: 60px; border-radius: 6px; background: var(--bg-elevated); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; overflow: hidden; }
.gi-thumb-close { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: var(--bg-surface); border: 1px solid var(--border-color); color: var(--text-muted); font-size: 0.6rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.gi-thumb-close:hover { color: var(--error); border-color: var(--error); }
.gi-thumb-name { font-size: var(--fs-2xs); color: var(--text-secondary); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gi-thumb-size { font-size: var(--fs-2xs); color: var(--text-muted); }
.gi-thumbs-info { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: var(--fs-xs); }
.gi-clear-btn { background: none; border: none; color: var(--error); font-size: var(--fs-xs); cursor: pointer; font-weight: var(--fw-medium); }
.gi-clear-btn:hover { text-decoration: underline; }

/* AI generate buttons */
.gi-ai-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.gi-ai-btn { padding: 4px 10px; background: rgba(139,92,246,0.1); border: 1px solid rgba(139,92,246,0.25); color: #a78bfa; font-size: var(--fs-2xs); font-weight: var(--fw-semibold); border-radius: var(--radius-md); cursor: pointer; display: flex; align-items: center; gap: 4px; }
.gi-ai-btn:hover { background: rgba(139,92,246,0.18); }
.gi-copy-icon { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.8rem; padding: 4px; }
.gi-copy-icon:hover { color: var(--text-primary); }
.gi-input-wrap { position: relative; }
.gi-input-wrap .gi-copy-icon { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }

/* Get coordinates button */
.gi-coords-btn { padding: 8px 16px; background: linear-gradient(135deg, #8b5cf6, #6366f1); 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: 6px; white-space: nowrap; }
.gi-coords-btn:hover { filter: brightness(1.1); }

/* Geotag ready */
.gi-ready { display: flex; align-items: center; gap: 8px; padding: 12px; background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.2); border-radius: var(--radius-md); margin-top: var(--space-3); }
.gi-ready-icon { color: var(--success); font-size: 1rem; }
.gi-ready-title { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--success); }
.gi-ready-desc { font-size: var(--fs-2xs); color: var(--text-secondary); }

/* Toggle switches */
.gi-toggle-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-color); }
.gi-toggle-row:last-child { border-bottom: none; }
.gi-toggle { position: relative; width: 36px; height: 20px; flex-shrink: 0; }
.gi-toggle input { opacity: 0; width: 0; height: 0; }
.gi-toggle-slider { position: absolute; inset: 0; background: var(--bg-elevated); border: 1px solid var(--border-color); border-radius: 10px; cursor: pointer; transition: 0.2s; }
.gi-toggle-slider::before { content: ''; position: absolute; width: 14px; height: 14px; left: 2px; top: 2px; background: var(--text-muted); border-radius: 50%; transition: 0.2s; }
.gi-toggle input:checked + .gi-toggle-slider { background: var(--primary); border-color: var(--primary); }
.gi-toggle input:checked + .gi-toggle-slider::before { transform: translateX(16px); background: #fff; }
.gi-toggle-info { flex: 1; }
.gi-toggle-label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-primary); }
.gi-toggle-desc { font-size: var(--fs-2xs); color: var(--text-muted); }

/* Inject button */
.gi-inject-btn { width: 100%; padding: 16px; background: linear-gradient(135deg, #3b82f6, #0ea5e9); border: none; color: #fff; font-weight: var(--fw-semibold); font-size: var(--fs-sm); border-radius: var(--radius-md); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: var(--space-3); }
.gi-inject-btn:hover { filter: brightness(1.1); }
.gi-inject-sub { font-size: var(--fs-2xs); font-weight: var(--fw-normal); opacity: 0.8; }

/* Image preview */
.gi-preview-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.gi-preview-nav { display: flex; align-items: center; gap: 8px; }
.gi-preview-count { font-size: var(--fs-xs); color: var(--text-secondary); }
.gi-preview-arrow { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border-color); background: none; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 0.75rem; }
.gi-preview-arrow:hover { border-color: var(--border-color-hover); color: var(--text-primary); }

.gi-preview-map { width: 100%; height: 120px; background: var(--bg-elevated); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; margin-bottom: 8px; }
.gi-map-pin { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,0.7); color: #fff; font-size: var(--fs-2xs); padding: 4px 8px; border-radius: 4px; }
.gi-preview-image { width: 100%; height: 160px; background: var(--bg-elevated); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 3rem; overflow: hidden; margin-bottom: 8px; }
.gi-preview-helper { font-size: var(--fs-2xs); color: var(--text-muted); text-align: center; }

/* SEO Impact Score */
.gi-score-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.gi-score-head h3 { font-size: var(--fs-base); font-weight: var(--fw-bold); margin: 0; display: flex; align-items: center; gap: 6px; }
.gi-score-learn { font-size: var(--fs-xs); color: var(--primary); background: none; border: 1px solid rgba(14,165,233,0.3); padding: 4px 10px; border-radius: var(--radius-md); cursor: pointer; font-weight: var(--fw-medium); }
.gi-score-learn:hover { background: rgba(14,165,233,0.06); }

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

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

/* Recent Activity */
.gi-activity-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
.gi-activity-head h3 { font-size: var(--fs-base); font-weight: var(--fw-bold); margin: 0; }
.gi-view-all { font-size: var(--fs-xs); color: var(--primary); background: none; border: none; cursor: pointer; font-weight: var(--fw-medium); }
.gi-view-all:hover { text-decoration: underline; }
.gi-activity-row { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--border-color); gap: 8px; }
.gi-activity-row:last-child { border-bottom: none; }
.gi-activity-icon { color: var(--success); font-size: 0.7rem; flex-shrink: 0; }
.gi-activity-text { flex: 1; font-size: var(--fs-xs); color: var(--text-secondary); }
.gi-activity-time { font-size: var(--fs-2xs); color: var(--text-muted); white-space: nowrap; }

/* Bottom features bar */
.gi-features-bar { display: flex; gap: 14px; overflow-x: auto; padding: 4px 0; }
.gi-feature-card { flex: 1; min-width: 180px; 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; }
.gi-feature-icon { font-size: 1.3rem; flex-shrink: 0; }
.gi-feature-name { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-primary); }
.gi-feature-desc { font-size: var(--fs-2xs); color: var(--text-muted); margin-top: 2px; }

/* Responsive */
@media (max-width: 1300px) {
  .gi-main-grid { grid-template-columns: 1fr 1fr; }
  .gi-right { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-5); }
}
@media (max-width: 900px) {
  .gi-main-grid { grid-template-columns: 1fr; }
  .gi-right { grid-template-columns: 1fr; }
  .gi-form-row { grid-template-columns: 1fr; }
  .gi-form-row-3 { grid-template-columns: 1fr; }
}