/* © 2026 Bella Bardabareket — Country Compare styles. Namespaced .cmp-* */
:root {
  --cmp-cyan:#22d3ee; --cmp-cyan-soft:#67e8f9;
  --cmp-ink:#e6edf5; --cmp-ink2:#98a3b3; --cmp-ink3:#5a6473;
  --cmp-panel:rgba(9,14,22,0.97); --cmp-line:rgba(255,255,255,0.09); --cmp-line-cyan:rgba(34,211,238,0.3);
  --cmp-good:#34d399; --cmp-bad:#fb7185;
}
/* trigger */
.cmp-fab { display:inline-flex; align-items:center; gap:9px; height:38px; padding:0 16px; cursor:pointer; white-space:nowrap;
  background:linear-gradient(180deg, rgba(167,139,250,.2), rgba(167,139,250,.1)); border:1px solid rgba(167,139,250,.55);
  border-radius:7px; color:#ddd6fe; font-family:"Space Grotesk",system-ui,sans-serif; font-size:12px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; transition:filter .15s, box-shadow .18s, transform .12s; }
.cmp-fab:hover { filter:brightness(1.12); box-shadow:0 10px 28px rgba(0,0,0,.5), 0 0 24px rgba(167,139,250,.4); transform:translateY(-1px); }
.cmp-fab:active { transform:scale(.97); }
.cmp-fab-glyph { width:15px; height:15px; flex-shrink:0; }
html[lang="he"] .cmp-fab { font-family:"Assistant",sans-serif; letter-spacing:.02em; font-size:12.5px; font-weight:700; }

/* full overlay */
.cmp-scrim { position:fixed; inset:0; z-index:60; background:radial-gradient(ellipse at 50% 30%, rgba(8,12,20,.6), rgba(3,5,11,.9));
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); animation:cmp-fade .25s ease both; }
@keyframes cmp-fade { from{opacity:0} to{opacity:1} }
@keyframes cmp-rise { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:none} }
.cmp-modal { position:fixed; inset:0; z-index:61; display:flex; flex-direction:column;
  background:linear-gradient(160deg,#080c14 0%, #05070d 100%); animation:cmp-fade .25s ease both; }
.cmp-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding:16px 26px; border-bottom:1px solid var(--cmp-line); flex-wrap:wrap; }
.cmp-eyebrow { font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--cmp-cyan-soft); }
.cmp-h1 { font-family:"Heebo","Assistant",sans-serif; font-weight:800; letter-spacing:-.01em; color:#f5f8fc; margin:6px 0 0; font-size:22px; }
.cmp-headbtns { display:flex; align-items:center; gap:10px; }
.cmp-close { width:30px; height:30px; border-radius:6px; flex-shrink:0; background:rgba(255,255,255,.05); border:1px solid var(--cmp-line);
  color:var(--cmp-ink2); font-size:16px; cursor:pointer; line-height:1; display:inline-flex; align-items:center; justify-content:center; transition:.15s; }
.cmp-close:hover { background:rgba(244,63,94,.14); color:#fecdd3; border-color:rgba(244,63,94,.45); }
.cmp-back { display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:8px; cursor:pointer; text-decoration:none;
  background:rgba(255,255,255,.04); border:1px solid var(--cmp-line); color:var(--cmp-ink2); font-family:"Heebo","Assistant",sans-serif; font-weight:600; font-size:12.5px; transition:.15s; }
.cmp-back:hover { border-color:var(--cmp-line-cyan); background:rgba(34,211,238,.08); color:#cefcff; }
html[dir="rtl"] .cmp-back svg { transform:scaleX(-1); }
.cmp-export { display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:8px; cursor:pointer;
  background:linear-gradient(180deg, rgba(34,211,238,.2), rgba(34,211,238,.1)); border:1px solid var(--cmp-line-cyan); color:#cefcff;
  font-family:"Heebo","Assistant",sans-serif; font-weight:700; font-size:12px; white-space:nowrap; transition:.15s; }
.cmp-export:hover { filter:brightness(1.1); box-shadow:0 0 18px rgba(34,211,238,.25); }
.cmp-clear { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:8px; cursor:pointer;
  background:rgba(244,63,94,.1); border:1px solid rgba(244,63,94,.32); color:#fda4af;
  font-family:"Heebo","Assistant",sans-serif; font-weight:600; font-size:12px; white-space:nowrap; transition:.15s; }
.cmp-clear:hover { background:rgba(244,63,94,.18); border-color:rgba(244,63,94,.5); color:#fecdd3; }

.cmp-body { flex:1; overflow-y:auto; padding:20px 26px 36px; display:grid; grid-template-columns:1fr 360px; gap:24px; align-content:start; }
.cmp-body::-webkit-scrollbar { width:9px; } .cmp-body::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:4px; }
.cmp-left { min-width:0; display:flex; flex-direction:column; gap:20px; }
.cmp-right { display:flex; flex-direction:column; gap:18px; }

/* country slot chips */
.cmp-slots { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.cmp-slot { display:inline-flex; align-items:center; gap:9px; padding:8px 10px 8px 13px; border-radius:10px; background:rgba(255,255,255,.03); border:1px solid var(--cmp-line); }
.cmp-slot-flag { font-size:19px; }
.cmp-slot-nm { font-family:"Heebo","Assistant",sans-serif; font-weight:700; font-size:14px; color:#f5f8fc; }
.cmp-slot-bloc { font-size:10px; font-family:"JetBrains Mono",monospace; padding:2px 6px; border-radius:5px; }
.cmp-slot-x { appearance:none; border:0; background:transparent; color:var(--cmp-ink3); cursor:pointer; font-size:14px; padding:2px 4px; border-radius:4px; }
.cmp-slot-x:hover { color:#fecdd3; background:rgba(244,63,94,.12); }
.cmp-addslot { position:relative; }
.cmp-addbtn { display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:10px; cursor:pointer;
  background:rgba(34,211,238,.08); border:1px dashed var(--cmp-line-cyan); color:#cffafe; font-family:"Heebo","Assistant",sans-serif; font-weight:600; font-size:13px; }
.cmp-addbtn[disabled] { opacity:.4; cursor:not-allowed; }
.cmp-add-menu { position:absolute; top:calc(100% + 5px); inset-inline-start:0; z-index:8; width:260px; max-height:300px; overflow-y:auto;
  background:var(--cmp-panel); border:1px solid var(--cmp-line-cyan); border-radius:10px; box-shadow:0 20px 50px rgba(0,0,0,.6); padding:6px; }
.cmp-add-search { width:100%; box-sizing:border-box; padding:9px 11px; margin-bottom:6px; background:rgba(5,8,14,.7); border:1px solid var(--cmp-line);
  border-radius:7px; color:var(--cmp-ink); font-size:13px; font-family:"Heebo","Assistant",sans-serif; }
.cmp-add-search:focus { outline:none; border-color:var(--cmp-line-cyan); }
.cmp-add-opt { display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:7px; cursor:pointer; font-size:13px; color:var(--cmp-ink); }
.cmp-add-opt:hover, .cmp-add-opt.active { background:rgba(34,211,238,.12); }
.cmp-add-opt .cmp-iso { margin-inline-start:auto; font-family:"JetBrains Mono",monospace; font-size:10px; color:var(--cmp-ink3); }

/* metrics table */
.cmp-table-wrap { border:1px solid var(--cmp-line); border-radius:12px; overflow:hidden; }
.cmp-table { width:100%; border-collapse:collapse; }
.cmp-table th, .cmp-table td { padding:11px 14px; text-align:start; }
.cmp-table thead th { background:rgba(255,255,255,.03); border-bottom:1px solid var(--cmp-line); position:sticky; top:0; }
.cmp-th-metric { font-family:"JetBrains Mono",monospace; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--cmp-ink3); font-weight:500; }
.cmp-th-country { min-width:120px; }
.cmp-th-cn { display:flex; align-items:center; gap:8px; font-family:"Heebo","Assistant",sans-serif; font-weight:700; font-size:14px; color:#f5f8fc; }
.cmp-th-cn .cmp-fl { font-size:18px; }
.cmp-table tbody tr { border-bottom:1px solid rgba(255,255,255,.05); }
.cmp-table tbody tr:last-child { border-bottom:0; }
.cmp-table tbody tr:hover { background:rgba(34,211,238,.03); }
.cmp-metric-lbl { font-family:"Heebo","Assistant",sans-serif; font-weight:600; font-size:12.5px; color:var(--cmp-ink2); white-space:nowrap; }
.cmp-metric-sub { font-size:10px; color:var(--cmp-ink3); }
.cmp-val { font-family:"JetBrains Mono",monospace; font-size:13px; color:var(--cmp-ink); white-space:nowrap; }
.cmp-val.best { color:var(--cmp-good); font-weight:600; }
.cmp-val.worst { color:var(--cmp-bad); }
.cmp-val .cmp-tag { font-family:"Heebo",sans-serif; font-size:9px; font-weight:700; margin-inline-start:6px; padding:1px 5px; border-radius:4px; vertical-align:middle; }
.cmp-val.best .cmp-tag { background:rgba(52,211,153,.16); color:var(--cmp-good); }
.cmp-val.worst .cmp-tag { background:rgba(251,113,133,.14); color:var(--cmp-bad); }
.cmp-bloc-pill { display:inline-block; font-family:"JetBrains Mono",monospace; font-size:10px; padding:2px 8px; border-radius:5px; }

/* section label */
.cmp-sect { display:flex; align-items:center; gap:9px; margin:0 0 12px; }
.cmp-sect-t { font-family:"JetBrains Mono",monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--cmp-cyan-soft); }
.cmp-sect-line { flex:1; height:1px; background:var(--cmp-line); }

/* radar */
.cmp-radar-card { border:1px solid var(--cmp-line); border-radius:12px; padding:16px; background:rgba(255,255,255,.02); }
.cmp-legend { display:flex; flex-wrap:wrap; gap:10px 16px; margin-top:12px; }
.cmp-legend-i { display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--cmp-ink2); font-family:"Heebo","Assistant",sans-serif; font-weight:600; }
.cmp-legend-sw { width:11px; height:11px; border-radius:3px; }

/* risk bars */
.cmp-risk-row { display:grid; grid-template-columns:104px 1fr auto; align-items:center; gap:11px; margin-bottom:9px; }
.cmp-risk-nm { font-family:"Heebo","Assistant",sans-serif; font-weight:600; font-size:12.5px; color:var(--cmp-ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmp-risk-track { height:8px; border-radius:999px; background:rgba(255,255,255,.06); overflow:hidden; }
.cmp-risk-fill { height:100%; border-radius:999px; transition:width .6s cubic-bezier(.2,.7,.2,1); }
.cmp-risk-val { font-family:"JetBrains Mono",monospace; font-size:12.5px; font-weight:600; min-width:26px; text-align:end; }

/* verdict / AI */
.cmp-ai-card { border:1px solid var(--cmp-line); border-radius:12px; padding:16px; background:rgba(255,255,255,.02); }
.cmp-cta { display:inline-flex; align-items:center; justify-content:center; gap:9px; width:100%; box-sizing:border-box; padding:11px 14px;
  border-radius:8px; cursor:pointer; background:linear-gradient(180deg, rgba(34,211,238,.18), rgba(34,211,238,.08));
  border:1px solid var(--cmp-line-cyan); color:#cefcff; font-family:"Heebo","Assistant",sans-serif; font-weight:700; font-size:13px; transition:.15s; }
.cmp-cta:hover { filter:brightness(1.1); box-shadow:0 0 22px rgba(34,211,238,.22); }
.cmp-cta[disabled] { opacity:.6; cursor:progress; }
.cmp-ai-out { font-family:"Assistant","Heebo",sans-serif; font-size:13.5px; line-height:1.62; color:#dbe6f1; white-space:pre-wrap;
  padding:13px 15px; border-radius:8px; background:rgba(34,211,238,.05); border:1px solid rgba(34,211,238,.18); border-inline-start:3px solid var(--cmp-cyan); animation:cmp-rise .3s ease both; margin-top:10px; }
.cmp-ai-sig { margin-top:8px; font-family:"JetBrains Mono",monospace; font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--cmp-ink3); }
.cmp-spin { width:14px; height:14px; border:2px solid rgba(255,255,255,.25); border-top-color:var(--cmp-cyan); border-radius:50%; animation:cmp-spin .7s linear infinite; }
@keyframes cmp-spin { to { transform:rotate(360deg); } }
.cmp-empty { text-align:center; color:var(--cmp-ink3); font-size:13.5px; padding:50px 24px; line-height:1.7; max-width:440px; margin:0 auto; }

@media (max-width:980px){ .cmp-body{ grid-template-columns:1fr; } }