/* ============================================================
   Rifa Online — Design System
   Tipografia: Plus Jakarta Sans (variável, self-hosted)
   ============================================================ */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --ink-900: #191333;
  --ink-600: #514b70;
  --ink-400: #8f89ad;
  --brand-800: #4c1d95;
  --brand-700: #5b21b6;
  --brand-600: #6d28d9;
  --brand-500: #7c3aed;
  --brand-100: #ede9fe;
  --brand-50: #f5f3ff;
  --gold-600: #d97706;
  --gold-500: #f59e0b;
  --gold-400: #fbbf24;
  --green-600: #059669;
  --green-100: #d1fae5;
  --bg: #f3f1fa;
  --line: #e6e3f2;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(25, 19, 51, .05), 0 4px 14px rgba(25, 19, 51, .06);
  --shadow-md: 0 2px 6px rgba(25, 19, 51, .06), 0 14px 34px rgba(25, 19, 51, .12);
  --shadow-brand: 0 8px 24px rgba(109, 40, 217, .35);
  --grad-brand: linear-gradient(135deg, #5b21b6, #7c3aed 60%, #9333ea);
  --grad-deep: linear-gradient(140deg, #140e33 0%, #341b70 55%, #5b21b6 100%);
  --grad-gold: linear-gradient(135deg, #f59e0b, #fbbf24);
  --grad-green: linear-gradient(90deg, #059669, #34d399);
}

html {
  font-size: 14px;
  position: relative;
  min-height: 100%;
  scroll-behavior: smooth;
}

@media (min-width: 768px) {
  html { font-size: 16px; }
}

/* Inputs >= 16px em telas pequenas: evita o zoom automático do Safari/iOS */
@media (max-width: 767px) {
  .form-control, .form-select, .input-group-text {
    font-size: 16px;
  }
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--bg);
  background-image: radial-gradient(60rem 24rem at 85% -8rem, rgba(124, 58, 237, .10), transparent 60%),
    radial-gradient(46rem 20rem at -10% 12rem, rgba(245, 158, 11, .07), transparent 55%);
  background-repeat: no-repeat;
  font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--ink-900);
}

h1, h2, h3, h4, h5, h6, .fw-bold {
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink-900);
}

.text-muted { color: var(--ink-600) !important; }
.text-rifa { color: var(--brand-600); }

/* ------------------------------------------------------------- navbar */

.rifa-navbar {
  background: var(--grad-deep);
  box-shadow: 0 2px 18px rgba(20, 14, 51, .35);
  padding-top: .8rem;
  padding-bottom: .8rem;
}

.rifa-navbar .navbar-brand {
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: 1.25rem;
  color: #fff;
}

.rifa-navbar .nav-link {
  color: rgba(255, 255, 255, .82);
  font-weight: 600;
  border-radius: 10px;
  padding: .45rem .9rem !important;
  transition: color .15s, background .15s;
}

.rifa-navbar .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .10); }

.rifa-navbar .btn-link.nav-link { text-decoration: none; }

/* ------------------------------------------------------------- botões */

.btn { border-radius: 12px; font-weight: 700; }

.btn-rifa {
  background: var(--grad-brand);
  border: 0;
  color: #fff;
  box-shadow: 0 4px 14px rgba(109, 40, 217, .30);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s;
}

.btn-rifa:hover, .btn-rifa:focus {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--shadow-brand);
  filter: brightness(1.06);
}

.btn-rifa:active { transform: translateY(0); }

.btn-gold {
  background: var(--grad-gold);
  border: 0;
  color: #422006;
  box-shadow: 0 4px 14px rgba(245, 158, 11, .35);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s;
}

.btn-gold:hover, .btn-gold:focus {
  color: #422006;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(245, 158, 11, .45);
  filter: brightness(1.04);
}

.btn-outline-primary {
  --bs-btn-color: var(--brand-600);
  --bs-btn-border-color: #d8cef7;
  --bs-btn-hover-bg: var(--brand-50);
  --bs-btn-hover-border-color: var(--brand-500);
  --bs-btn-hover-color: var(--brand-700);
  --bs-btn-active-bg: var(--brand-100);
  --bs-btn-active-border-color: var(--brand-500);
  --bs-btn-active-color: var(--brand-700);
}

.btn-success {
  --bs-btn-bg: #16a34a;
  --bs-btn-border-color: #16a34a;
  --bs-btn-hover-bg: #15803d;
  --bs-btn-hover-border-color: #15803d;
  --bs-btn-active-bg: #15803d;
  --bs-btn-active-border-color: #15803d;
  box-shadow: 0 4px 12px rgba(22, 163, 74, .25);
}

/* ------------------------------------------------------------- cards */

.card { border: 0; }

.stat-card {
  border: 1px solid rgba(230, 227, 242, .8);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  background: #fff;
}

.card-hover { transition: transform .18s ease, box-shadow .18s ease; }
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }

.stat-card .stat-value {
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--ink-900);
}

.icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 12px;
  font-size: 1.25rem;
  background: var(--brand-50);
  flex-shrink: 0;
}

.icon-chip.gold { background: #fef3c7; }
.icon-chip.green { background: var(--green-100); }
.icon-chip.slate { background: #eef0f6; }

.section-title {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: 1rem;
}

.section-title .icon-chip { width: 2.1rem; height: 2.1rem; font-size: 1rem; border-radius: 10px; }

/* ------------------------------------------------------------- hero (landing) */

.rifa-hero {
  position: relative;
  overflow: hidden;
  background: var(--grad-deep);
  color: #fff;
  border-radius: 24px;
  padding: 4rem 2rem;
  box-shadow: var(--shadow-md);
}

.rifa-hero::before, .rifa-hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(4px);
  pointer-events: none;
}

.rifa-hero::before {
  width: 26rem; height: 26rem;
  right: -8rem; top: -12rem;
  background: radial-gradient(circle, rgba(168, 85, 247, .45), transparent 65%);
}

.rifa-hero::after {
  width: 20rem; height: 20rem;
  left: -7rem; bottom: -10rem;
  background: radial-gradient(circle, rgba(245, 158, 11, .30), transparent 65%);
}

.rifa-hero h1 { color: #fff; }

.rifa-hero .lead { color: rgba(255, 255, 255, .85); }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fde68a;
  font-weight: 700;
  font-size: .85rem;
  padding: .35rem .9rem;
  border-radius: 999px;
  margin-bottom: 1.2rem;
}

/* cartão-exemplo flutuante do hero */
.hero-mock {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(10, 6, 32, .45);
  padding: 1.4rem;
  color: var(--ink-900);
  transform: rotate(2deg);
}

.hero-mock .mini-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .35rem;
  margin: .8rem 0;
}

.hero-mock .mini-cell {
  aspect-ratio: 1;
  border-radius: 8px;
  border: 1.5px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .72rem;
  font-weight: 700;
  color: var(--ink-600);
}

.hero-mock .mini-cell.on { background: var(--grad-brand); border-color: transparent; color: #fff; }
.hero-mock .mini-cell.off { background: #eeedf5; color: #b9b5cf; }

.step-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--grad-brand);
  color: #fff;
  font-weight: 800;
  font-size: 1.15rem;
  box-shadow: 0 6px 16px rgba(109, 40, 217, .35);
  flex-shrink: 0;
}

/* ------------------------------------------------------------- página da rifa */

/* Capa da rifa: a foto aparece INTEIRA; as bordas são preenchidas
   pela própria foto ampliada e desfocada (nada é cortado nem amassado). */
.raffle-cover-wrap {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin-bottom: -3.5rem;
  background-size: cover;
  background-position: center;
}

.raffle-cover-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  backdrop-filter: blur(22px);
  background: rgba(20, 14, 51, .35);
}

.rifa-cover {
  position: relative;
  width: 100%;
  max-height: 340px;
  object-fit: contain;
  display: block;
}

.raffle-head {
  position: relative;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(230, 227, 242, .8);
  padding: 2rem 1.5rem 1.75rem;
}

.organizer-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: var(--grad-brand);
  color: #fff;
  font-weight: 800;
  font-size: 1.3rem;
  box-shadow: 0 0 0 4px #fff, 0 6px 16px rgba(109, 40, 217, .35);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .5rem 1rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  background: #fff;
  border: 1.5px solid var(--line);
  color: var(--ink-600);
}

.chip-gold {
  background: var(--grad-gold);
  border-color: transparent;
  color: #422006;
  box-shadow: 0 4px 12px rgba(245, 158, 11, .30);
}

.chip-soft { background: var(--brand-50); border-color: #e2d8fa; color: var(--brand-700); }

/* prêmios com medalha */
.prize-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--grad-brand);
  color: #fff;
  font-weight: 800;
  font-size: .95rem;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(109, 40, 217, .30);
}

.prize-badge.p1 { background: linear-gradient(135deg, #f59e0b, #fde047); color: #451a03; box-shadow: 0 4px 12px rgba(245, 158, 11, .45); }
.prize-badge.p2 { background: linear-gradient(135deg, #94a3b8, #e2e8f0); color: #1e293b; box-shadow: 0 4px 12px rgba(100, 116, 139, .35); }
.prize-badge.p3 { background: linear-gradient(135deg, #b45309, #f59e0b); color: #fff7ed; box-shadow: 0 4px 12px rgba(180, 83, 9, .40); }

.prize-img {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.prize-row { transition: background .15s; border-radius: var(--radius-md); }
.prize-row:hover { background: var(--brand-50); }

/* resultado do sorteio */
.win-highlight {
  background: linear-gradient(140deg, #fffbeb, #fef3c7 55%, #fde68a);
  border: 1px solid #fcd34d !important;
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 30px rgba(245, 158, 11, .18);
}

.winner-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.4rem;
  height: 3.4rem;
  padding: 0 .8rem;
  border-radius: var(--radius-md);
  background: var(--grad-deep);
  color: #fde68a;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: .04em;
  box-shadow: var(--shadow-sm);
}

/* ------------------------------------------------------------- grade de números */

.number-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(3.1rem, 1fr));
  gap: .45rem;
  max-height: 430px;
  overflow-y: auto;
  padding: .3rem .3rem .6rem;
  scrollbar-width: thin;
}

.number-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #e0dcef;
  border-radius: 12px;
  background: #fff;
  color: #55506e;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: .88rem;
  cursor: default;
  user-select: none;
  transition: transform .12s ease, background .15s, border-color .15s, color .15s, box-shadow .15s;
}

.number-cell.free.selectable { cursor: pointer; }

.number-cell.free.selectable:hover {
  transform: translateY(-2px);
  border-color: var(--brand-500);
  background: var(--brand-50);
  box-shadow: 0 4px 10px rgba(109, 40, 217, .18);
}

.number-cell.selected {
  background: var(--grad-brand);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 12px rgba(109, 40, 217, .40);
  animation: cell-pop .18s ease;
}

@keyframes cell-pop {
  0% { transform: scale(.8); }
  60% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.number-cell.sold {
  background: #eeecf5;
  border-color: #eeecf5;
  color: #b6b2cc;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

.number-cell.reserved {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #92400e;
}

.number-cell.mine {
  background: var(--green-100);
  border-color: #34d399;
  color: #065f46;
}

.number-cell.winner {
  background: var(--grad-gold);
  border-color: #d97706;
  color: #451a03;
  box-shadow: 0 0 0 3px rgba(217, 119, 6, .35);
}

.grid-legend span {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-right: 1rem;
  font-size: .85rem;
  color: var(--ink-600);
  font-weight: 600;
}

.legend-dot {
  display: inline-block;
  width: .95rem;
  height: .95rem;
  border-radius: 6px;
  border: 1.5px solid #e0dcef;
}

.legend-dot.free { background: #fff; }
.legend-dot.selected { background: var(--grad-brand); border-color: transparent; }
.legend-dot.sold { background: #eeecf5; border-color: #eeecf5; }
.legend-dot.reserved { background: #fef3c7; border-color: #fcd34d; }
.legend-dot.mine { background: var(--green-100); border-color: #34d399; }

/* números do comprador (chips grandes) */
.ticket-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3rem;
  height: 3rem;
  padding: 0 .7rem;
  border-radius: var(--radius-md);
  background: var(--grad-brand);
  color: #fff;
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: .03em;
  margin: 0 .35rem .45rem 0;
  box-shadow: 0 4px 10px rgba(109, 40, 217, .30);
}

/* ------------------------------------------------------------- barra fixa de seleção */

.selection-bar {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  transform: translate(-50%, 140%);
  width: min(94vw, 540px);
  z-index: 1030;
  background: rgba(20, 14, 51, .94);
  backdrop-filter: blur(10px);
  color: #fff;
  border-radius: 18px;
  padding: .8rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  box-shadow: 0 18px 44px rgba(10, 6, 32, .45);
  transition: transform .25s ease;
}

.selection-bar.show { transform: translate(-50%, 0); }

.selection-bar .sel-info { line-height: 1.25; }

.selection-bar .sel-count { font-weight: 800; font-size: 1.02rem; }

.selection-bar .sel-total { color: #fde68a; font-weight: 700; font-size: .9rem; }

/* ------------------------------------------------------------- status / badges */

.badge { font-weight: 700; border-radius: 999px; padding: .45em .85em; }

.badge-status-paid { background: var(--green-100); color: #065f46; }
.badge-status-awaiting { background: #fef3c7; color: #92400e; }
.badge-status-canceled { background: #e4e4ec; color: #4b4b63; }
.badge-status-expired { background: #ececf2; color: #83839c; }

.status-hero {
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.status-hero .status-icon {
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  flex-shrink: 0;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.status-hero.paid { background: linear-gradient(135deg, #ecfdf5, #d1fae5); border: 1px solid #a7f3d0; }
.status-hero.awaiting { background: linear-gradient(135deg, #fffbeb, #fef3c7); border: 1px solid #fde68a; }
.status-hero.inactive { background: #f1f0f7; border: 1px solid var(--line); }

/* ------------------------------------------------------------- tabela de pedidos */

.table-orders { --bs-table-hover-bg: var(--brand-50); }

.table-orders thead th {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-400);
  font-weight: 700;
  border-bottom-width: 1px;
}

.table-orders td, .table-orders th { vertical-align: middle; padding-top: .8rem; padding-bottom: .8rem; }

.buyer-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 50%;
  color: #fff;
  font-weight: 800;
  font-size: .9rem;
  flex-shrink: 0;
}

/* ------------------------------------------------------------- barras de progresso */

.progress {
  background: #e9e6f6;
  border-radius: 999px;
  overflow: hidden;
}

.progress-bar { border-radius: 999px; font-weight: 700; }

.progress-bar.bg-success { background: var(--grad-green) !important; }

/* ------------------------------------------------------------- formulários */

.form-control, .form-select {
  border-radius: var(--radius-sm);
  border-color: #ddd9ec;
  padding: .55rem .85rem;
}

.form-control:focus, .form-select:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 .22rem rgba(124, 58, 237, .15);
}

.form-label { font-weight: 700; font-size: .9rem; color: var(--ink-900); }

.form-text { color: var(--ink-400); }

.input-group-text { border-radius: var(--radius-sm); border-color: #ddd9ec; background: var(--brand-50); font-weight: 600; }

.auth-card { position: relative; overflow: hidden; }

.auth-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: var(--grad-brand);
}

/* ------------------------------------------------------------- alerts */

.alert { border: 0; border-radius: var(--radius-md); font-weight: 600; box-shadow: var(--shadow-sm); }

.alert-success { background: #ecfdf5; color: #065f46; }
.alert-danger { background: #fef2f2; color: #991b1b; }
.alert-warning { background: #fffbeb; color: #92400e; }
.alert-info { background: #eff6ff; color: #1e40af; }
.alert-primary { background: var(--brand-50); color: var(--brand-700); }
.alert-secondary, .alert-dark { background: #f1f0f7; color: var(--ink-600); }

/* ------------------------------------------------------------- diversos */

.share-link-box {
  font-family: var(--bs-font-monospace);
  font-size: .88rem;
  word-break: break-all;
  background: var(--brand-50);
}

.breadcrumb { font-weight: 600; }
.breadcrumb a { color: var(--brand-600); text-decoration: none; }

.footer {
  margin-top: auto;
  background: transparent;
  border-top: 1px solid var(--line) !important;
  color: var(--ink-400);
}

.cover-thumb {
  height: 140px;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: block;
}

.cover-placeholder {
  height: 140px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--grad-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
}

/* canvas do confete (página do ganhador) */
#confeteCanvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 2000;
}

/* respeito a quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .number-cell, .btn-rifa, .btn-gold, .card-hover, .selection-bar { transition: none; animation: none; }
}

/* ------------------------------------------------------------- tooltip estilizado */

.tooltip-rifa {
  --bs-tooltip-bg: #341b70;   /* tom do meio do gradiente, para a setinha combinar */
  --bs-tooltip-color: #fff;
  --bs-tooltip-opacity: 1;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

.tooltip-rifa .tooltip-inner {
  background: var(--grad-deep);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: .6rem .85rem;
  max-width: 250px;
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
}

/* ------------------------------------------------------------- painel de selecionados */

.selected-panel {
  background: var(--brand-50);
  border: 1px dashed #cfc4f5;
  border-radius: var(--radius-md);
  padding: .8rem .95rem;
  margin-top: .35rem;
}

.selected-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .6rem;
}

.sel-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: var(--grad-brand);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: .38rem .55rem .38rem .85rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: .92rem;
  line-height: 1;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .12s ease, filter .12s ease;
}

.sel-chip:hover, .sel-chip:focus-visible {
  filter: brightness(1.14);
  transform: translateY(-1px);
}

.sel-chip .x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, .25);
  font-size: .95rem;
  opacity: .85;
}

.sel-chip:hover .x { opacity: 1; background: rgba(255, 255, 255, .38); }