/* =========================================================
   Customer Map Generator — style.css v2.5.0
   Author: Mohit Guleria
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ── Reset ── */
.cmg-wrap *, .cmg-wrap *::before, .cmg-wrap *::after { box-sizing: border-box; margin: 0; padding: 0; }

.cmg-wrap {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    max-width: 1200px;
    margin: 20px auto;
    padding: 0 16px;
    color: #1a1a2e;
}

/* =========================================================
   FORM CARD
   ========================================================= */

.cmg-glass-card {
    background: linear-gradient(135deg,#fff 0%,#faf7f4 100%);
    border-radius: 20px;
    padding: 32px 36px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.06);
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}
.cmg-glass-card::before {
    content:'';position:absolute;top:-60px;right:-60px;width:200px;height:200px;
    background:radial-gradient(circle,rgba(153,60,29,0.06) 0%,transparent 70%);
    border-radius:50%;pointer-events:none;
}

.cmg-form-header { display:flex;align-items:center;gap:14px;margin-bottom:24px; }
.cmg-logo-icon {
    font-size:28px;width:52px;height:52px;flex-shrink:0;
    background:linear-gradient(135deg,#993C1D,#c0442b);
    border-radius:14px;display:flex;align-items:center;justify-content:center;
    box-shadow:0 4px 14px rgba(153,60,29,0.3);
}
.cmg-form-header h2 { font-size:21px;font-weight:800;color:#1a1a2e;line-height:1.2;margin-bottom:3px; }
.cmg-form-header p  { font-size:13px;color:#6b7280; }

/* ── Two-column → single-column on mobile ── */
.cmg-form-row {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-bottom:18px;
}

.cmg-field label {
    display:block;font-size:12px;font-weight:600;
    color:#374151;margin-bottom:6px;
}
.cmg-field label small { font-size:11px;font-weight:400;color:#6b7280; }

/* ── Input with SVG icon — FIXED ── */
.cmg-input-wrap { position:relative; }

/* SVG icon: absolute, vertically centred, left side only */
.cmg-input-svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    pointer-events: none;
    z-index: 2;
    display: block;
    flex-shrink: 0;
}

/* Input has enough left padding to clear icon — NEVER overlaps */
.cmg-input-wrap input {
    display: block;
    width: 100%;
    padding: 11px 14px 11px 38px;   /* 38px = 12(left) + 15(icon) + 11(gap) */
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    background: #fff;
    color: #1a1a2e;
    line-height: 1.4;
    transition: border-color .2s, box-shadow .2s;
    /* Prevent theme styles from resetting padding */
    -webkit-appearance: none;
    appearance: none;
}
.cmg-input-wrap input:focus {
    outline: none;
    border-color: #993C1D;
    box-shadow: 0 0 0 3px rgba(153,60,29,.1);
}
.cmg-input-wrap input:focus ~ .cmg-input-svg { stroke: #993C1D; }
.cmg-input-wrap input::placeholder { color: #c4c9d4; }

/* ── Detail Toggle ── */
.cmg-toggle-row {
    display:flex;align-items:center;gap:10px;
    margin-bottom:22px;flex-wrap:wrap;
}
.cmg-toggle-label { font-size:12px;font-weight:600;color:#374151;white-space:nowrap; }
.cmg-toggle-group {
    display:flex;background:#f3f4f6;border-radius:10px;padding:3px;gap:3px;
}
.cmg-toggle-btn {
    padding:7px 14px;border-radius:8px;border:none;
    font-size:12px;font-weight:500;font-family:inherit;
    cursor:pointer;color:#6b7280;background:transparent;transition:all .2s;
}
.cmg-toggle-btn.cmg-toggle-active {
    background:#fff;color:#993C1D;font-weight:700;
    box-shadow:0 1px 4px rgba(0,0,0,.12);
}
.cmg-toggle-hint { font-size:11px;color:#9ca3af;font-style:italic; }

/* ── Generate Button ── */
#cmg-generate-btn {
    display:inline-flex;align-items:center;gap:8px;
    background:linear-gradient(135deg,#993C1D 0%,#c0442b 100%);
    color:#fff;border:none;
    padding:12px 28px;border-radius:12px;
    font-size:15px;font-weight:700;font-family:inherit;cursor:pointer;
    box-shadow:0 4px 16px rgba(153,60,29,.35);
    transition:transform .15s,box-shadow .15s,opacity .15s;
}
#cmg-generate-btn:hover:not(:disabled) { transform:translateY(-2px);box-shadow:0 6px 22px rgba(153,60,29,.45); }
#cmg-generate-btn:disabled { opacity:.55;cursor:not-allowed; }
.cmg-btn-icon { font-size:16px; }

/* ── Loading ── */
#cmg-loading { margin-top:18px; }
.cmg-loading-inner { display:flex;align-items:center;gap:10px;margin-bottom:10px; }
.cmg-loading-dots  { display:flex;gap:5px; }
.cmg-loading-dots span {
    width:7px;height:7px;background:#993C1D;border-radius:50%;
    animation:cmgDotBounce 1.2s ease-in-out infinite;
}
.cmg-loading-dots span:nth-child(2){ animation-delay:.2s; }
.cmg-loading-dots span:nth-child(3){ animation-delay:.4s; }
@keyframes cmgDotBounce { 0%,60%,100%{transform:translateY(0);opacity:.4;} 30%{transform:translateY(-7px);opacity:1;} }
#cmg-loading-text { font-size:13px;color:#6b7280;font-weight:500; }
.cmg-progress-bar { width:100%;height:4px;background:#f3f4f6;border-radius:2px;overflow:hidden; }
#cmg-progress-fill {
    height:100%;background:linear-gradient(90deg,#993C1D,#c0442b);border-radius:2px;
    width:0%;animation:cmgProgressAnim 9s ease forwards;
}
@keyframes cmgProgressAnim{ 0%{width:0%} 20%{width:22%} 50%{width:55%} 80%{width:80%} 100%{width:92%} }

/* ── Error ── */
.cmg-error {
    background:#fef2f2;border:1px solid #fecaca;
    color:#991b1b;padding:11px 14px;border-radius:8px;
    margin-top:12px;font-size:13px;font-weight:500;
}

/* =========================================================
   MAP SECTION
   ========================================================= */

.cmg-map-section { animation:cmgSectionIn .45s cubic-bezier(.22,1,.36,1); }
@keyframes cmgSectionIn { from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;} }

/* ── Toolbar ── */
.cmg-toolbar {
    display:flex;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:10px;margin-bottom:14px;
}
.cmg-toolbar-left { display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0; }
.cmg-company-badge { font-size:17px;font-weight:800;color:#1a1a2e;word-break:break-word; }
.cmg-detail-badge {
    background:linear-gradient(135deg,#993C1D,#c0442b);
    color:#fff;font-size:10px;font-weight:700;
    padding:3px 10px;border-radius:20px;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;
}
.cmg-toolbar-btns { display:flex;flex-wrap:wrap;gap:6px; }

.cmg-btn-add {
    background:#fff;color:#993C1D;border:1.5px solid #993C1D;
    padding:7px 12px;border-radius:8px;font-size:12px;font-weight:600;
    font-family:inherit;cursor:pointer;transition:all .18s;white-space:nowrap;
}
.cmg-btn-add:hover { background:#993C1D;color:#fff; }

.cmg-btn-export {
    display:inline-flex;align-items:center;gap:5px;
    background:#1a1a2e;color:#fff;border:none;
    padding:7px 13px;border-radius:8px;font-size:12px;font-weight:600;
    font-family:inherit;cursor:pointer;transition:all .18s;white-space:nowrap;
}
.cmg-btn-export:hover { background:#2d2d4e; }
.cmg-btn-pdf { background:linear-gradient(135deg,#166534,#15803d) !important; }
.cmg-btn-pdf:hover { background:linear-gradient(135deg,#14532d,#166534) !important; }

.cmg-btn-reset {
    background:transparent;color:#9ca3af;
    border:1px solid #e5e7eb;padding:7px 12px;
    border-radius:8px;font-size:12px;font-family:inherit;cursor:pointer;
    transition:all .18s;white-space:nowrap;
}
.cmg-btn-reset:hover { color:#374151;border-color:#9ca3af; }

/* =========================================================
   MAP CANVAS
   ========================================================= */

.cmg-map-container {
    border:1px solid #e5e7eb;border-radius:14px;
    overflow:hidden;background:#faf8f5;
    box-shadow:0 4px 20px rgba(0,0,0,0.05);
    /* Horizontal scroll on very small screens */
    overflow-x:auto;
}

/* ── Col headers ── */
.cmg-col-headers {
    display:grid;
    grid-template-columns:150px repeat(5,1fr);
    border-bottom:1px solid #d1d5db;
    min-width:620px;
}
.cmg-col-label-cell {
    background:#1a1a2e;
    display:flex;align-items:center;justify-content:center;
    padding:10px 8px;border-right:1px solid rgba(255,255,255,.08);
}
.cmg-biz-arrow {
    background:linear-gradient(135deg,#993C1D,#c0442b);
    color:#fff;font-size:10px;font-weight:700;
    padding:7px 14px 7px 10px;
    clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%);
    text-align:center;line-height:1.4;width:100%;
}
.cmg-col-header {
    background:#1a1a2e;color:#fff;text-align:center;
    font-size:11px;font-weight:600;padding:10px 6px;
    border-left:1px solid rgba(255,255,255,.08);
    cursor:text;line-height:1.4;transition:background .2s;
}
.cmg-col-header:hover  { background:#2d2d4e; }
.cmg-col-header:focus  { outline:2px solid #993C1D;outline-offset:-2px;background:#2d2d4e; }

/* ── Rows ── */
.cmg-row {
    display:grid;
    grid-template-columns:150px repeat(5,1fr);
    border-bottom:1px solid #e5e7eb;
    min-height:90px;
    min-width:620px;
}
.cmg-row:last-child { border-bottom:none; }
.cmg-row-label {
    display:flex;align-items:center;padding:10px 8px;
    background:rgba(0,0,0,.015);border-right:1px solid #e5e7eb;
}
.cmg-arrow {
    width:100%;text-align:center;line-height:1.4;
    font-size:10px;font-weight:700;padding:8px 16px 8px 8px;
    clip-path:polygon(0 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,0 100%);
    border-radius:2px;
}
.cmg-arrow-dm  { background:linear-gradient(135deg,#7f2d15,#993C1D);color:#fff; }
.cmg-arrow-ieu { background:linear-gradient(135deg,#993C1D,#c0442b);color:#fff; }
.cmg-arrow-eeu { background:linear-gradient(135deg,#4b4b47,#6b6b66);color:#fff; }

/* ── Cells ── */
.cmg-cell {
    border-left:1px solid #e5e7eb;padding:8px;
    display:flex;flex-wrap:wrap;gap:5px;align-content:flex-start;
    cursor:pointer;transition:background .15s;min-height:90px;position:relative;
}
.cmg-cell:hover { background:rgba(153,60,29,.035); }
.cmg-cell:hover::after {
    content:'＋';position:absolute;bottom:5px;right:5px;
    font-size:14px;color:rgba(153,60,29,.25);pointer-events:none;
}

/* ── Cards ── */
.cmg-card-dm, .cmg-card-ieu, .cmg-card-eeu {
    font-size:10px;font-weight:500;padding:5px 8px;border-radius:6px;
    cursor:pointer;text-align:center;line-height:1.4;max-width:100%;
    transition:transform .15s,box-shadow .15s;
    animation:cmgCardIn .35s cubic-bezier(.22,1,.36,1) both;
}
@keyframes cmgCardIn { from{opacity:0;transform:scale(.8) translateY(5px);}to{opacity:1;transform:none;} }
.cmg-card-dm  { background:linear-gradient(135deg,#7f2d15,#993C1D);color:#fff;box-shadow:0 2px 6px rgba(153,60,29,.3); }
.cmg-card-ieu { background:linear-gradient(135deg,#993C1D,#c0442b);color:#fff;box-shadow:0 2px 6px rgba(192,68,43,.3); }
.cmg-card-eeu { background:#fff;color:#374151;border:1.5px solid #d1d5db;box-shadow:0 1px 3px rgba(0,0,0,.06); }
.cmg-card-dm:hover,.cmg-card-ieu:hover { transform:translateY(-2px);box-shadow:0 4px 12px rgba(153,60,29,.4); }
.cmg-card-eeu:hover { transform:translateY(-2px);box-shadow:0 3px 10px rgba(0,0,0,.12);border-color:#9ca3af; }

/* ── Hint ── */
.cmg-hint { display:flex;align-items:center;gap:6px;justify-content:center;font-size:12px;color:#9ca3af;margin-top:10px; }

/* =========================================================
   DRAG & DROP
   ========================================================= */
.cmg-card-dm[draggable],.cmg-card-ieu[draggable],.cmg-card-eeu[draggable] { cursor:grab; }
.cmg-dragging { opacity:.4;transform:scale(.92) rotate(-1deg) !important;box-shadow:0 8px 24px rgba(0,0,0,.2) !important; }
.cmg-drag-over { background:rgba(153,60,29,.07) !important;outline:2px dashed #993C1D;outline-offset:-3px; }

/* =========================================================
   MODAL
   ========================================================= */
.cmg-modal-overlay {
    display:none;position:fixed;inset:0;background:rgba(15,15,30,.5);
    z-index:99999;align-items:center;justify-content:center;
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.cmg-modal-overlay.cmg-modal-open { display:flex; }
.cmg-modal {
    background:#fff;border-radius:18px;width:420px;max-width:94vw;
    box-shadow:0 24px 80px rgba(0,0,0,.2);
    animation:cmgModalIn .28s cubic-bezier(.34,1.56,.64,1);overflow:hidden;
}
@keyframes cmgModalIn { from{opacity:0;transform:scale(.88) translateY(-18px);}to{opacity:1;transform:none;} }
.cmg-modal-header {
    display:flex;align-items:center;justify-content:space-between;
    padding:18px 22px 14px;border-bottom:1px solid #f3f4f6;
    background:linear-gradient(135deg,#faf8f5,#fff);
}
.cmg-modal-header h3 { font-size:16px;font-weight:700;color:#1a1a2e; }
.cmg-modal-close {
    width:30px;height:30px;background:#f3f4f6;border:none;border-radius:50%;
    font-size:12px;color:#6b7280;cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:background .15s;
}
.cmg-modal-close:hover { background:#e5e7eb;color:#1a1a2e; }
.cmg-modal-body { padding:18px 22px; }
.cmg-modal-label { display:block;font-size:12px;font-weight:600;color:#374151;margin-bottom:7px; }
.cmg-modal-input {
    width:100%;padding:11px 13px;border:1.5px solid #e5e7eb;border-radius:9px;
    font-size:14px;font-family:inherit;color:#1a1a2e;outline:none;
    transition:border-color .2s,box-shadow .2s;
}
.cmg-modal-input:focus { border-color:#993C1D;box-shadow:0 0 0 3px rgba(153,60,29,.1); }
.cmg-modal-input.cmg-input-error { border-color:#ef4444;animation:cmgShake .35s ease; }
@keyframes cmgShake { 0%,100%{transform:translateX(0);}25%{transform:translateX(-7px);}75%{transform:translateX(7px);} }
.cmg-modal-footer {
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 22px 18px;border-top:1px solid #f3f4f6;
}
.cmg-modal-actions { display:flex;gap:8px; }
.cmg-modal-btn {
    padding:9px 18px;border-radius:9px;font-size:13px;font-weight:600;
    font-family:inherit;cursor:pointer;border:none;transition:all .15s;
}
.cmg-modal-save   { background:linear-gradient(135deg,#993C1D,#c0442b);color:#fff;box-shadow:0 3px 10px rgba(153,60,29,.3); }
.cmg-modal-cancel { background:#f3f4f6;color:#6b7280; }
.cmg-modal-cancel:hover { background:#e5e7eb;color:#374151; }
.cmg-modal-delete { background:transparent;color:#ef4444;border:1.5px solid #fca5a5; }
.cmg-modal-delete:hover { background:#fef2f2;border-color:#ef4444; }

/* =========================================================
   TOAST
   ========================================================= */
.cmg-toast {
    position:fixed;bottom:24px;right:24px;z-index:999999;
    background:#fff;border-radius:14px;padding:14px 18px;
    box-shadow:0 8px 40px rgba(0,0,0,.16);border-left:4px solid #16a34a;
    display:flex;align-items:flex-start;gap:12px;max-width:320px;
    animation:cmgToastIn .4s cubic-bezier(.34,1.56,.64,1);
    font-family:'Inter',-apple-system,sans-serif;
}
.cmg-toast.cmg-toast-hide { animation:cmgToastOut .3s ease forwards; }
@keyframes cmgToastIn  { from{opacity:0;transform:translateX(60px) scale(.9);}to{opacity:1;transform:none;} }
@keyframes cmgToastOut { from{opacity:1;transform:translateX(0);}to{opacity:0;transform:translateX(60px);} }
.cmg-toast-icon { width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px; }
.cmg-toast-body { flex:1;min-width:0; }
.cmg-toast-title { font-size:13px;font-weight:700;color:#1a1a2e;margin-bottom:2px; }
.cmg-toast-msg   { font-size:11px;color:#6b7280;line-height:1.4;word-break:break-word; }
.cmg-toast-close { background:none;border:none;color:#9ca3af;font-size:15px;cursor:pointer;padding:0;line-height:1;margin-top:-1px; }
.cmg-toast-close:hover { color:#374151; }
.cmg-email-sending {
    display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#6b7280;
    margin-top:10px;animation:cmgFadeIn .3s ease;
}
@keyframes cmgFadeIn { from{opacity:0;}to{opacity:1;} }
.cmg-email-dot { width:5px;height:5px;background:#993C1D;border-radius:50%;animation:cmgDotBounce 1s ease-in-out infinite; }
.cmg-email-dot:nth-child(2){ animation-delay:.15s; }
.cmg-email-dot:nth-child(3){ animation-delay:.3s; }

/* =========================================================
   RESPONSIVE — MOBILE FIRST
   ========================================================= */

/* Tablet */
@media (max-width: 900px) {
    .cmg-glass-card { padding:24px 22px; }
    .cmg-col-headers,
    .cmg-row { grid-template-columns:120px repeat(5,1fr); }
    .cmg-col-header { font-size:10px;padding:8px 4px; }
    .cmg-arrow { font-size:9px;padding:7px 12px 7px 6px; }
    .cmg-biz-arrow { font-size:9px; }
    .cmg-toolbar { flex-direction:column;align-items:flex-start; }
    .cmg-toolbar-left { width:100%; }
    .cmg-company-badge { font-size:15px; }
}

/* Mobile landscape */
@media (max-width: 640px) {
    .cmg-wrap { padding:0 10px;margin:12px auto; }
    .cmg-glass-card { padding:20px 16px;border-radius:16px; }
    .cmg-form-header { gap:10px; }
    .cmg-logo-icon { width:44px;height:44px;font-size:22px;border-radius:12px; }
    .cmg-form-header h2 { font-size:17px; }
    .cmg-form-header p  { font-size:12px; }

    /* Stack form fields */
    .cmg-form-row { grid-template-columns:1fr;gap:12px; }

    /* Toggle wraps */
    .cmg-toggle-row { gap:8px; }
    .cmg-toggle-btn { padding:6px 10px;font-size:11px; }
    .cmg-toggle-hint { width:100%; }

    /* Button full width on mobile */
    #cmg-generate-btn { width:100%;justify-content:center;font-size:14px;padding:12px 20px; }

    /* Toolbar buttons smaller */
    .cmg-toolbar-btns { gap:5px; }
    .cmg-btn-add,.cmg-btn-export,.cmg-btn-reset { font-size:11px;padding:6px 10px; }

    /* Map scrolls horizontally on mobile */
    .cmg-map-container { border-radius:10px; }
}

/* Mobile portrait */
@media (max-width: 400px) {
    .cmg-col-headers,
    .cmg-row { grid-template-columns:100px repeat(5,minmax(80px,1fr)); }
    .cmg-glass-card { padding:16px 13px; }
    .cmg-modal { width:96vw; }
    .cmg-toast { bottom:12px;right:12px;left:12px;max-width:none; }
}

/* =========================================================
   SOMERSAULT INNOVATION BRANDING v2.6.0
   ========================================================= */

/* Brand colours */
:root {
    --cmg-red    : #C0392B;
    --cmg-dark   : #1a1a2e;
    --cmg-cream  : #E8E0D5;
    --cmg-warm   : #faf7f3;
}

/* Somersault brand bar in header */
.cmg-somersault-brand {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}
.cmg-somersault-brand span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #C0392B;
    text-transform: uppercase;
}
.cmg-header-text h2 { margin-bottom: 2px; }
.cmg-header-text p  { margin: 0; }

/* Somersault branding in map toolbar */
.cmg-somersault-toolbar {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #C0392B;
    text-transform: uppercase;
    opacity: 0.7;
    padding-top: 2px;
}

/* Override brand colours throughout */
#cmg-generate-btn,
.cmg-modal-save {
    background: linear-gradient(135deg, #9B2335 0%, #C0392B 100%) !important;
}
.cmg-btn-add { color: #C0392B !important; border-color: #C0392B !important; }
.cmg-btn-add:hover { background: #C0392B !important; }
.cmg-card-dm  { background: linear-gradient(135deg, #6B1A23, #9B2335) !important; }
.cmg-card-ieu { background: linear-gradient(135deg, #9B2335, #C0392B) !important; }
.cmg-arrow-dm  { background: linear-gradient(135deg, #6B1A23, #9B2335) !important; }
.cmg-arrow-ieu { background: linear-gradient(135deg, #9B2335, #C0392B) !important; }
.cmg-biz-arrow { background: linear-gradient(135deg, #9B2335, #C0392B) !important; }
.cmg-detail-badge { background: linear-gradient(135deg, #9B2335, #C0392B) !important; }
.cmg-col-header:focus { outline-color: #C0392B !important; }
.cmg-input-wrap input:focus { border-color: #C0392B !important; box-shadow: 0 0 0 3px rgba(192,57,43,.1) !important; }
.cmg-toggle-btn.cmg-toggle-active { color: #C0392B !important; }

/* =========================================================
   SOMERSAULT LOGO — v2.10.0
   ========================================================= */

/* Logo wrapper in form header */
.cmg-logo-wrap {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.cmg-ss-logo {
    height: 60px;
    width: auto;
    display: block;
    /* No border-radius — logo has its own shape */
}

/* Remove the old icon box styling when logo is present */
.cmg-logo-wrap ~ .cmg-header-text h2 {
    font-size: 20px;
}

@media (max-width: 480px) {
    .cmg-ss-logo { height: 44px; }
}