/* GCCS Global Network Map v5 */

.gccs-map {
    --blue-deep: #0B3D6B;
    --blue-mid: #0F5289;
    --teal: #3A9D7C;
    --green: #48BB78;
    --blue: #4299E1;
    --orange: #ED8936;
    --white: #ffffff;
    --muted: rgba(255,255,255,0.65);
    --glass: rgba(255,255,255,0.08);
    --glass-border: rgba(255,255,255,0.12);
    --r: 12px;
    --rs: 8px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    max-width: 100%;
    background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue-mid) 40%, var(--teal) 100%);
    border-radius: var(--r);
    padding: 32px;
    color: var(--white);
}

/* Header */
.gccs-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:20px; flex-wrap:wrap; gap:16px; }
.gccs-title { font-size:26px; font-weight:700; color:var(--white); margin:0 0 4px; letter-spacing:-0.02em; }
.gccs-subtitle { font-size:14px; color:var(--muted); margin:0; }

/* Stats — 3 counters + countries */
.gccs-stats { display:flex; gap:8px; flex-wrap:wrap; }
.gccs-stat { background:var(--glass); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:1px solid var(--glass-border); border-radius:var(--rs); padding:10px 16px; font-size:11px; color:var(--muted); text-align:center; min-width:70px; }
.gccs-stat strong { display:block; font-size:22px; font-weight:700; color:var(--white); margin-bottom:1px; }
.gccs-stat .gccs-stat-dot { display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:4px; vertical-align:middle; position:relative; top:-1px; }

/* Type toggle — primary filter row */
.gccs-type-filters { display:flex; gap:6px; margin-bottom:12px; flex-wrap:wrap; }
.gccs-type-btn { display:inline-flex; align-items:center; gap:8px; padding:9px 18px; font-size:13px; font-weight:600; border-radius:100px; border:1.5px solid rgba(255,255,255,0.2); background:var(--glass); color:rgba(255,255,255,0.8); cursor:pointer; transition:all .25s; font-family:inherit; white-space:nowrap; }
.gccs-type-btn:hover { background:rgba(255,255,255,0.14); }
.gccs-type-btn.active { border-color:var(--white); background:var(--white); font-weight:700; }
.gccs-type-btn.active[data-type="all"] { color:var(--blue-deep); }
.gccs-type-btn.active[data-type="partner"] { color:#276749; background:#C6F6D5; border-color:#C6F6D5; }
.gccs-type-btn.active[data-type="accreditation"] { color:#2B6CB0; background:#BEE3F8; border-color:#BEE3F8; }
.gccs-type-btn.active[data-type="expert"] { color:#9C4221; background:#FEEBC8; border-color:#FEEBC8; }
.gccs-type-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.gccs-type-btn.active .gccs-type-dot { opacity:0.7; }

/* Country filter chips */
.gccs-country-filters { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; align-items:center; }
.gccs-cf-label { font-size:10px; font-weight:700; color:rgba(255,255,255,0.4); text-transform:uppercase; letter-spacing:0.1em; margin-right:4px; }
.gccs-cf-btn { padding:5px 14px; font-size:12px; font-weight:500; border-radius:100px; border:1px solid rgba(255,255,255,0.15); background:rgba(255,255,255,0.04); color:rgba(255,255,255,0.7); cursor:pointer; transition:all .2s; font-family:inherit; white-space:nowrap; }
.gccs-cf-btn:hover { background:rgba(255,255,255,0.1); color:var(--white); }
.gccs-cf-btn.active { background:var(--white); color:var(--blue-deep); border-color:var(--white); font-weight:600; }

/* Map */
.gccs-map-wrap { position:relative; border-radius:var(--r); overflow:hidden; background:rgba(0,20,50,0.3); border:1px solid var(--glass-border); }
#gccs-map-svg { width:100%; height:100%; cursor:grab; }
#gccs-map-svg:active { cursor:grabbing; }
#gccs-map-svg svg { width:100%; height:100%; display:block; }

/* D3 */
.gccs-graticule { fill:none; stroke:rgba(255,255,255,0.05); stroke-width:0.4; }
.gccs-land { fill:rgba(255,255,255,0.08); stroke:none; transition:fill .4s; }
.gccs-land.hl { fill:rgba(72,187,120,0.3); }
.gccs-land.clickable { cursor:pointer; }
.gccs-land.clickable:hover { fill:rgba(255,255,255,0.16); }
.gccs-land.hl.clickable:hover { fill:rgba(72,187,120,0.45); }
.gccs-borders { fill:none; stroke:rgba(255,255,255,0.12); stroke-width:0.4; stroke-linejoin:round; pointer-events:none; }

/* Pins */
.gccs-pin { cursor:pointer; transition:opacity .3s; animation:gccs-drop .4s ease forwards; }
.gccs-pin.loaded { animation:none; }
.gccs-pin:hover .gccs-pin-body { filter:brightness(1.2); }
.gccs-pin.hidden { opacity:0; pointer-events:none; }
.gccs-pin-sh { fill:rgba(0,0,0,0.2); }
.gccs-pin-body { stroke:var(--white); stroke-width:1.5; transition:filter .2s; }
.gccs-pin-dot { fill:var(--white); }
.gccs-pin-pulse { animation:gccs-pulse 2.5s ease-out infinite; }
@keyframes gccs-pulse { 0%{r:4;opacity:.45} 100%{r:18;opacity:0} }
@keyframes gccs-drop { from{opacity:0} to{opacity:1} }

/* Zoom controls */
.gccs-zoom-ctrls { position:absolute; bottom:14px; right:14px; display:flex; flex-direction:column; gap:2px; z-index:10; }
.gccs-zoom-btn { width:34px; height:34px; background:rgba(255,255,255,0.1); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,0.12); color:var(--white); font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .2s; font-family:inherit; }
.gccs-zoom-btn:first-child { border-radius:var(--rs) var(--rs) 0 0; }
.gccs-zoom-btn:last-child { border-radius:0 0 var(--rs) var(--rs); }
.gccs-zoom-btn:hover { background:rgba(255,255,255,0.2); }

/* Reset button */
.gccs-reset { position:absolute; top:14px; left:14px; z-index:10; padding:7px 16px; font-size:12px; font-weight:600; border-radius:100px; border:1px solid rgba(255,255,255,0.2); background:rgba(255,255,255,0.1); backdrop-filter:blur(8px); color:var(--white); cursor:pointer; transition:all .3s; font-family:inherit; opacity:0; pointer-events:none; transform:translateY(-8px); }
.gccs-reset.vis { opacity:1; pointer-events:auto; transform:translateY(0); }
.gccs-reset:hover { background:rgba(255,255,255,0.2); }

/* Tooltip */
.gccs-tooltip { position:absolute; background:var(--white); border-radius:var(--r); padding:16px 20px; font-size:13px; color:#1a1a1a; pointer-events:none; opacity:0; transform:translateY(6px) scale(.96); transition:opacity .2s,transform .25s cubic-bezier(.34,1.56,.64,1); z-index:100; max-width:280px; box-shadow:0 12px 40px rgba(0,0,0,0.25); line-height:1.5; }
.gccs-tooltip.vis { opacity:1; transform:translateY(0) scale(1); }
.gccs-tip-name { font-size:15px; font-weight:700; color:var(--blue-deep); margin-bottom:2px; }
.gccs-tip-city { color:#666; margin-bottom:6px; font-size:12px; }
.gccs-tip-desc { color:#555; margin-bottom:8px; font-size:12px; line-height:1.5; }
.gccs-tip-badge { display:inline-flex; align-items:center; gap:5px; padding:4px 12px; border-radius:100px; font-size:11px; font-weight:700; }
.gccs-tip-badge-dot { width:6px; height:6px; border-radius:50%; }
.gccs-tip-link { display:inline-block; margin-top:8px; font-size:12px; font-weight:600; color:var(--teal); text-decoration:none; }
.gccs-tip-link:hover { text-decoration:underline; }

/* Legend */
.gccs-legend { display:flex; gap:20px; margin-top:14px; font-size:12px; color:var(--muted); flex-wrap:wrap; }
.gccs-legend-i { display:flex; align-items:center; gap:6px; }
.gccs-legend-d { width:10px; height:10px; border-radius:50%; border:2px solid rgba(255,255,255,0.2); }

/* Loading */
.gccs-loading { display:flex; align-items:center; justify-content:center; height:100%; color:rgba(255,255,255,0.6); font-size:14px; gap:10px; }
.gccs-spinner { width:20px; height:20px; border:2.5px solid rgba(255,255,255,0.15); border-top-color:var(--green); border-radius:50%; animation:gccs-spin .7s linear infinite; }
@keyframes gccs-spin { to{transform:rotate(360deg)} }

/* Responsive */
@media (max-width:768px) { .gccs-map{padding:20px} .gccs-header{flex-direction:column} .gccs-title{font-size:22px} .gccs-stat{flex:1;min-width:55px;padding:8px 10px} .gccs-stat strong{font-size:18px} .gccs-type-btn{padding:6px 12px;font-size:12px} .gccs-cf-btn{padding:4px 10px;font-size:11px} }
@media (max-width:480px) { .gccs-map{padding:14px;border-radius:8px} .gccs-title{font-size:18px} .gccs-map-wrap{height:300px!important} }