/* ==========================================================================
   BGrowth — Components (v2)
   ========================================================================== */

/* Buttons */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: calc(14 * var(--u)); height: calc(64 * var(--u)); padding: 0 calc(36 * var(--u)); border-radius: calc(16 * var(--u)); font-size: max(14.5px, calc(19 * var(--u))); font-weight: 500; letter-spacing: -0.01em; white-space: nowrap; transition: transform var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out), background-color var(--d-base), border-color var(--d-base), color var(--d-base); }
.btn .ico { font-size: max(15.5px, calc(21 * var(--u))); transition: transform var(--d-base) var(--e-out); }
.btn:hover .ico { transform: translateX(3px); }
.btn--primary { color: #fff; background: var(--grad-cta); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), var(--sh-btn); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 calc(20 * var(--u)) calc(36 * var(--u)) calc(-14 * var(--u)) rgba(15, 87, 240, .75); }
.btn--ghost { color: var(--ink); background: rgba(255, 255, 255, .78); border: 1px solid #D5DEEC; box-shadow: 0 1px 2px rgba(15, 30, 80, .04); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.btn--ghost:hover { transform: translateY(-2px); border-color: #B9CBEA; background: #fff; }
.btn--sm { height: calc(56 * var(--u)); padding: 0 calc(30 * var(--u)); border-radius: calc(10 * var(--u)); font-size: max(14.5px, calc(18 * var(--u))); }
.btn--white { color: var(--navy-950); background: #fff; box-shadow: 0 calc(16 * var(--u)) calc(34 * var(--u)) calc(-14 * var(--u)) rgba(0, 0, 0, .55); }
.btn--white:hover { transform: translateY(-2px); }
.btn--line-light { color: #fff; background: rgba(10, 18, 48, .25); border: 1px solid rgba(160, 190, 255, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn--line-light:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .1); border-color: rgba(200, 220, 255, .7); }

/* Glass card */
.gcard { position: relative; background: var(--glass); border: 1px solid rgba(225, 233, 246, .95); border-radius: calc(18 * var(--u)); box-shadow: var(--sh-card); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
.gcard::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); }

/* Pills */
.pill { display: inline-flex; align-items: center; gap: calc(8 * var(--u)); border-radius: 999px; font-weight: 500; white-space: nowrap; }
.pill--pos { color: var(--pos-2); background: var(--pos-bg); }
.pill--info { color: var(--blue-600); background: #E4EEFF; }
.pill--mute { color: #59657F; background: #EEF2F8; }

/* Live dot */
.live { position: relative; display: inline-block; width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-radius: 50%; background: #22C55E; flex: none; box-shadow: 0 0 0 calc(3 * var(--u)) rgba(34, 197, 94, .18); }
.live::after { content: ""; position: absolute; inset: calc(-5 * var(--u)); border-radius: 50%; border: 2px solid rgba(34, 197, 94, .55); animation: ping 2s var(--e-out) infinite; }
@keyframes ping { 0% { transform: scale(.55); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
html.no-motion .live::after { animation: none; opacity: 0; }

/* Flags */
.flag { display: inline-block; flex: none; width: calc(30 * var(--u)); height: calc(22 * var(--u)); border-radius: calc(5 * var(--u)); background-size: cover; background-position: center; box-shadow: 0 0 0 1px rgba(15, 30, 80, .08); }
.flag--round { width: calc(40 * var(--u)); height: calc(40 * var(--u)); border-radius: 50%; }
.flag[data-c="BR"] { background-image: url(../assets/flags/br-4x3.svg); }
.flag[data-c="US"] { background-image: url(../assets/flags/us-4x3.svg); }
.flag[data-c="FR"] { background-image: url(../assets/flags/fr-4x3.svg); }
.flag[data-c="IN"] { background-image: url(../assets/flags/in-4x3.svg); }
.flag[data-c="DE"] { background-image: url(../assets/flags/de-4x3.svg); }
.flag[data-c="UK"], .flag[data-c="GB"] { background-image: url(../assets/flags/gb-4x3.svg); }
.flag[data-c="CA"] { background-image: url(../assets/flags/ca-4x3.svg); }
.flag--round[data-c="BR"] { background-image: url(../assets/flags/br-1x1.svg); }
.flag--round[data-c="US"] { background-image: url(../assets/flags/us-1x1.svg); }
.flag--round[data-c="FR"] { background-image: url(../assets/flags/fr-1x1.svg); }
.flag--round[data-c="IN"] { background-image: url(../assets/flags/in-1x1.svg); }
.flag--round[data-c="DE"] { background-image: url(../assets/flags/de-1x1.svg); }
.flag--round[data-c="UK"], .flag--round[data-c="GB"] { background-image: url(../assets/flags/gb-1x1.svg); }
.flag--round[data-c="CA"] { background-image: url(../assets/flags/ca-1x1.svg); }
.flag--round[data-c="BG"] { background-image: url(../assets/flags/bg-1x1.svg); }

/* Anonymous network marks */
.nmark { display: inline-flex; align-items: center; justify-content: center; flex: none; width: calc(28 * var(--u)); height: calc(28 * var(--u)); border-radius: 50%; color: var(--c, var(--blue-600)); background: var(--cb, #E6EFFE); }
.nmark svg { width: 58%; height: 58%; } /* flex parent: % sizes resolve against its fixed box (in a grid they did not) */
.nmark.is-solid { color: #fff; background: var(--c, var(--blue-600)); }

/* Brand icon tile */
.btile { display: inline-grid; place-items: center; flex: none; width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: calc(12 * var(--u)); background: #fff; box-shadow: 0 calc(6 * var(--u)) calc(14 * var(--u)) calc(-6 * var(--u)) rgba(31, 78, 168, .28), inset 0 0 0 1px rgba(225, 233, 246, .9); }
.btile img { width: 58%; height: 58%; object-fit: contain; }

/* Sparkline */
.spark { width: calc(48 * var(--u)); height: calc(18 * var(--u)); overflow: visible; }
.spark path { fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.spark .a { stroke: none; opacity: .16; }
.spark--up path { stroke: #22B07D; } .spark--up .a { fill: #22B07D; }
.spark--down path { stroke: #F0574B; } .spark--down .a { fill: #F0574B; }

/* Tooltip */
.tip { position: absolute; z-index: 30; pointer-events: none; padding: 7px 10px; border-radius: 8px; background: #0B1238; color: #fff; font-size: 12.5px; line-height: 1.35; white-space: nowrap; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5); opacity: 0; transform: translateY(4px); transition: opacity var(--d-fast), transform var(--d-fast); }
.tip.is-on { opacity: 1; transform: none; }

/* Range slider */
.range { position: relative; height: calc(24 * var(--u)); display: flex; align-items: center; }
.range input { -webkit-appearance: none; appearance: none; width: 100%; height: calc(24 * var(--u)); margin: 0; background: transparent; cursor: pointer; }
.range input::-webkit-slider-runnable-track { height: calc(8 * var(--u)); border-radius: 99px; background: linear-gradient(90deg, #6EA5FF 0%, #2F6BF0 var(--fill, 50%), rgba(150, 175, 230, .22) var(--fill, 50%)); }
.range input::-moz-range-track { height: calc(10 * var(--u)); border-radius: 99px; background: rgba(150, 175, 230, .28); }
.range input::-moz-range-progress { height: calc(8 * var(--u)); border-radius: 99px; background: linear-gradient(90deg, #6EA5FF, #2F6BF0); }
.range input::-webkit-slider-thumb { -webkit-appearance: none; width: calc(24 * var(--u)); height: calc(24 * var(--u)); margin-top: calc(-8 * var(--u)); border-radius: 50%; background: #fff; box-shadow: 0 0 0 calc(4 * var(--u)) rgba(255, 255, 255, .25), 0 4px 12px rgba(0, 0, 0, .35); }
.range input::-moz-range-thumb { width: calc(24 * var(--u)); height: calc(24 * var(--u)); border: 0; border-radius: 50%; background: #fff; box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
.range input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 6px rgba(53, 215, 246, .4); }