/*
==========================================================================
 bl-design-system  ·  bileteloto site foundation
 THEME-MODERNIZE-FOUNDATION-1 · foundation only (tokens + bl- components)
 Clean, trustworthy, informational. Calm neutral palette, no gambling visuals.
 Non-intrusive: bl- prefix only, no theme-class overrides, no global resets.
==========================================================================
*/

/* ---------- A. Design tokens ---------- */
:root{
  /* colors */
  --bl-primary:#0d1b4c;
  --bl-accent:#1a3a8a;
  --bl-link:#0056b3;
  --bl-success:#15803d;
  --bl-warning:#b45309;
  --bl-danger:#b91c1c;
  --bl-ink:#1a1a2e;
  --bl-muted:#444444;
  --bl-border:#e8e8ef;
  --bl-bg:#ffffff;
  --bl-bg-soft:#fafafe;

  /* spacing */
  --bl-space-1:4px;
  --bl-space-2:8px;
  --bl-space-3:12px;
  --bl-space-4:16px;
  --bl-space-5:24px;
  --bl-space-6:32px;
  --bl-space-7:48px;

  /* layout */
  --bl-container:1200px;
  --bl-radius:8px;
  --bl-radius-lg:12px;
  --bl-shadow:0 6px 18px rgba(13,27,76,.08);

  /* typography */
  --bl-fs-sm:.875rem;
  --bl-fs-base:1rem;
  --bl-fs-md:1.125rem;
  --bl-fs-lg:1.25rem;
  --bl-fs-xl:1.5rem;
  --bl-fs-2xl:2rem;
  --bl-lh:1.6;
}

/* ---------- B1. Cards ---------- */
.bl-card{
  background:var(--bl-bg);
  border:1px solid var(--bl-border);
  border-radius:var(--bl-radius);
  box-shadow:var(--bl-shadow);
  padding:var(--bl-space-4);
  color:var(--bl-ink);
}
.bl-card__title{
  font-size:var(--bl-fs-lg);
  line-height:1.3;
  font-weight:700;
  color:var(--bl-primary);
  margin:0 0 var(--bl-space-2);
}
.bl-card__meta{
  font-size:var(--bl-fs-sm);
  color:var(--bl-muted);
  margin:0 0 var(--bl-space-2);
}
.bl-card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:var(--bl-space-5);
}

/* ---------- B2. Buttons ---------- */
.bl-btn{
  display:inline-block;
  font-size:var(--bl-fs-base);
  font-weight:600;
  line-height:1.2;
  padding:var(--bl-space-3) var(--bl-space-5);
  border-radius:var(--bl-radius);
  border:1px solid transparent;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .15s ease,color .15s ease,border-color .15s ease;
}
.bl-btn--primary{ background:var(--bl-primary); color:#fff; }
.bl-btn--primary:hover{ background:var(--bl-accent); color:#fff; }
.bl-btn--secondary{ background:var(--bl-bg-soft); color:var(--bl-primary); border-color:var(--bl-border); }
.bl-btn--secondary:hover{ background:#eef1f8; color:var(--bl-accent); }
.bl-btn--ghost{ background:transparent; color:var(--bl-link); border-color:transparent; }
.bl-btn--ghost:hover{ color:var(--bl-accent); text-decoration:underline; }

/* ---------- B3. Tables ---------- */
.bl-table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--bl-border);
  border-radius:var(--bl-radius);
}
.bl-table{
  width:100%;
  border-collapse:collapse;
  font-size:var(--bl-fs-base);
  color:var(--bl-ink);
  background:var(--bl-bg);
}
.bl-table th,
.bl-table td{
  padding:var(--bl-space-3) var(--bl-space-4);
  text-align:left;
  border-bottom:1px solid var(--bl-border);
}
.bl-table thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:var(--bl-primary);
  color:#fff;
  font-weight:700;
}
.bl-table tbody tr:nth-child(even){ background:var(--bl-bg-soft); }
.bl-table--compact th,
.bl-table--compact td{ padding:var(--bl-space-2) var(--bl-space-3); font-size:var(--bl-fs-sm); }

/* ---------- B4. Lottery numbers ---------- */
.bl-ball{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--bl-primary);
  color:#fff;
  font-weight:700;
  font-size:var(--bl-fs-base);
  line-height:1;
}
.bl-ball--small{ width:28px; height:28px; font-size:var(--bl-fs-sm); }
.bl-ball--muted{ background:var(--bl-bg-soft); color:var(--bl-muted); border:1px solid var(--bl-border); }

/* ---------- B5. Alerts / info boxes ---------- */
.bl-alert{
  border:1px solid var(--bl-border);
  border-left:4px solid var(--bl-accent);
  border-radius:var(--bl-radius);
  background:var(--bl-bg-soft);
  padding:var(--bl-space-4);
  color:var(--bl-ink);
  font-size:var(--bl-fs-base);
  line-height:var(--bl-lh);
}
.bl-alert--info{ border-left-color:var(--bl-link); }
.bl-alert--warning{ border-left-color:var(--bl-warning); }
.bl-alert--responsabil{ border-left-color:var(--bl-success); }

/* ---------- B6. FAQ ---------- */
.bl-faq{ display:block; }
.bl-faq-item{
  border:1px solid var(--bl-border);
  border-radius:var(--bl-radius);
  background:var(--bl-bg);
  margin:0 0 var(--bl-space-3);
  overflow:hidden;
}
.bl-faq-question{
  font-weight:700;
  color:var(--bl-primary);
  padding:var(--bl-space-3) var(--bl-space-4);
  margin:0;
  font-size:var(--bl-fs-md);
}
.bl-faq-answer{
  padding:0 var(--bl-space-4) var(--bl-space-4);
  color:var(--bl-muted);
  font-size:var(--bl-fs-base);
  line-height:var(--bl-lh);
}

/* ---------- B7. Sidebar / footer compatible ---------- */
.bl-side-card{
  background:var(--bl-bg);
  border:1px solid var(--bl-border);
  border-radius:var(--bl-radius);
  padding:var(--bl-space-4);
  margin:0 0 var(--bl-space-4);
}
.bl-trust-list{
  list-style:none;
  margin:0;
  padding:0;
  font-size:var(--bl-fs-sm);
}
.bl-trust-list li{ padding:var(--bl-space-1) 0; }
.bl-trust-list li a{ color:var(--bl-link); text-decoration:none; }
.bl-trust-list li a:hover{ color:var(--bl-accent); text-decoration:underline; }

/* ---------- C. Minimal bl- utilities ---------- */
.bl-container{ max-width:var(--bl-container); margin-left:auto; margin-right:auto; }
.bl-stack-1{ margin-bottom:var(--bl-space-1); }
.bl-stack-2{ margin-bottom:var(--bl-space-2); }
.bl-stack-3{ margin-bottom:var(--bl-space-3); }
.bl-stack-4{ margin-bottom:var(--bl-space-4); }
.bl-stack-5{ margin-bottom:var(--bl-space-5); }
.bl-muted{ color:var(--bl-muted); }

/* ---------- Mobile helpers (bl- classes only) ---------- */
@media (max-width:768px){
  .bl-card-grid{ grid-template-columns:1fr; gap:var(--bl-space-4); }
  .bl-btn{ display:block; width:100%; text-align:center; }
  .bl-table th,
  .bl-table td{ padding:var(--bl-space-2) var(--bl-space-3); }
}
@media (max-width:480px){
  .bl-ball{ width:32px; height:32px; }
}