/* Betline Lotto Number Checker – Light UI (mobile-first)
   Scoped to .bl-lc to avoid theme conflicts.
*/

.bl-lc{
  --bl-bg:#ffffff;
  --bl-soft:#f6f7ff;
  --bl-border:#e7e9f6;
  --bl-text:#111827;
  --bl-muted:#6b7280;
  --bl-accent:#6b4fe3;
  --bl-accent2:#8b5cf6;
  --bl-good:#16a34a;
  --bl-warn:#d97706;
  --bl-bad:#dc2626;

  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--bl-text);
}

.bl-lc *{ box-sizing:border-box; }

.bl-lc__card{
  width: 100%;
  max-width: 1100px;
  margin: 18px auto;
  padding: 16px;
  background: linear-gradient(180deg, rgba(107,79,227,.08), rgba(255,255,255,1) 55%);
  border: 1px solid var(--bl-border);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(17,24,39,.10);
}

@media (min-width: 1280px){
  .bl-lc__card{ max-width: 1200px; }
}

@media (min-width: 640px){
  .bl-lc__card{ padding: 18px 20px; }
}

.bl-lc__head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--bl-border);
}

.bl-lc__title{
  font-size: 18px;
  font-weight: 900;
  letter-spacing: .2px;
}

@media (min-width: 640px){
  .bl-lc__title{ font-size: 20px; }
}

.bl-lc__sub{
  margin-top: 4px;
  font-size: 13px;
  color: var(--bl-muted);
  line-height: 1.45;
}

.bl-lc__badge{
  flex:0 0 auto;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(107,79,227,.25);
  background: rgba(107,79,227,.10);
  color: var(--bl-accent);
  font-weight: 800;
  font-size: 12px;
}

.bl-lc__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding-top: 14px;
}

@media (min-width: 640px){
  .bl-lc__grid{
    grid-template-columns: 1.6fr .7fr;
    align-items:end;
    column-gap: 18px;
  }
}

.bl-lc__label{
  display:block;
  font-size: 12px;
  font-weight: 800;
  color: var(--bl-muted);
  margin-bottom: 6px;
}

.bl-lc__select{
  width: 100%;
  padding: 12px 54px 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--bl-border);
  background: #ffffff;
  color: var(--bl-text);
  outline: none;
  font-size: 16px; /* prevent mobile zoom */
  line-height: 1.3;
  min-height: 44px;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  background-image:
    linear-gradient(45deg, transparent 50%, var(--bl-muted) 50%),
    linear-gradient(135deg, var(--bl-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 22px) 52%,
    calc(100% - 14px) 52%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.bl-lc__select option{
  color: var(--bl-text);
  background: #ffffff;
}

.bl-lc__select:focus{
  border-color: rgba(107,79,227,.55);
  box-shadow: 0 0 0 4px rgba(107,79,227,.14);
}

.bl-lc__meta{
  font-weight: 900;
  font-size: 14px;
}

.bl-lc__meta2{
  margin-top: 2px;
  font-size: 12px;
  color: var(--bl-muted);
}

.bl-lc__results{
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  background: var(--bl-soft);
  border: 1px solid var(--bl-border);
}

.bl-lc__results-title{
  font-size: 12px;
  font-weight: 900;
  color: var(--bl-muted);
  margin-bottom: 10px;
}

.bl-lc__balls{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  align-items:center;
}

.bl-lc__ball{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid var(--bl-border);
  background: #ffffff;
  font-weight: 900;
  font-size: 14px;
  box-shadow: 0 6px 14px rgba(17,24,39,.06);
}

.bl-lc__ball--bonus{
  border-color: rgba(217,119,6,.35);
  background: rgba(217,119,6,.10);
}

.bl-lc__ball--powerball{
  border-color: rgba(107,79,227,.35);
  background: rgba(107,79,227,.10);
}

.bl-lc__hint{
  margin-top: 10px;
  font-size: 12px;
  color: var(--bl-muted);
  line-height: 1.45;
}

.bl-lc__form{ margin-top: 14px; }

.bl-lc__inputs{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

@media (min-width: 520px){
  .bl-lc__inputs{ grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 760px){
  .bl-lc__inputs{ grid-template-columns: repeat(7, 1fr); }
}

.bl-lc__input{
  width:100%;
  padding: 12px 10px;
  border-radius: 14px;
  border: 1px solid var(--bl-border);
  background: #ffffff;
  color: var(--bl-text);
  outline:none;
  font-size: 16px;
  text-align:center;
  font-weight: 900;
  box-shadow: 0 6px 14px rgba(17,24,39,.06);
}

.bl-lc__input:focus{
  border-color: rgba(107,79,227,.55);
  box-shadow: 0 0 0 4px rgba(107,79,227,.14);
}

.bl-lc__input[aria-invalid="true"]{
  border-color: rgba(220,38,38,.55);
  box-shadow: 0 0 0 4px rgba(220,38,38,.10);
}

.bl-lc__actions{
  display:flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap:wrap;
}

.bl-lc__btn{
  border: 1px solid var(--bl-border);
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 900;
  font-size: 14px;
  cursor:pointer;
  background: #ffffff;
  color: var(--bl-text);
  flex: 1 1 160px;
  box-shadow: 0 10px 22px rgba(17,24,39,.08);
}

.bl-lc__btn:focus{
  outline:none;
  box-shadow: 0 0 0 4px rgba(107,79,227,.14);
}

.bl-lc__btn--primary{
  border-color: rgba(107,79,227,.25);
  background: linear-gradient(135deg, rgba(107,79,227,1), rgba(139,92,246,1));
  color: #ffffff;
}

.bl-lc__btn--ghost{ background:#ffffff; }

.bl-lc__out{
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--bl-border);
  background: #ffffff;
  min-height: 52px;
  box-shadow: 0 10px 22px rgba(17,24,39,.06);
}

.bl-lc__out h3{
  margin: 0 0 10px;
  font-size: 14px;
  font-weight: 900;
}

.bl-lc__out p{
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--bl-muted);
  line-height: 1.55;
}

.bl-lc__out .bl-lc__matched{
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.5;
}

.bl-lc__out .bl-lc__matched strong{
  color: var(--bl-text);
  font-weight: 900;
}

.bl-lc__out .bl-lc__matched .bl-lc__matchednums{
  color: var(--bl-accent);
  font-weight: 900;
}

.bl-lc__out .bl-lc__divtitle{
  margin: 0 0 8px;
  font-weight: 900;
  font-size: 14px;
  color: var(--bl-text);
}

.bl-lc__out .bl-lc__divline{
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--bl-text);
}

.bl-lc__out .bl-lc__divline .bl-lc__divbadge{
  font-weight: 900;
  margin-right: 8px;
}

.bl-lc__out .bl-lc__divnote{
  margin: 0 0 12px;
  font-size: 12px;
  color: var(--bl-muted);
  line-height: 1.45;
}

.bl-lc__pillrow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top: 10px;
}

.bl-lc__pill{
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  border: 1px solid var(--bl-border);
  background: var(--bl-soft);
  color: var(--bl-text);
}

.bl-lc__pill--good{ border-color: rgba(22,163,74,.30); background: rgba(22,163,74,.10); }
.bl-lc__pill--warn{ border-color: rgba(217,119,6,.30); background: rgba(217,119,6,.10); }
.bl-lc__pill--bad{ border-color: rgba(220,38,38,.30); background: rgba(220,38,38,.10); }

.bl-lc__foot{
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--bl-border);
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  font-size: 12px;
  color: var(--bl-muted);
}

.bl-lc__footdot{ opacity:.65; }

.bl-lc__errorwrap{
  margin-top: 12px;
}

.bl-lc--error{
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(220,38,38,.30);
  background: rgba(220,38,38,.08);
  color: var(--bl-text);
}