/* =========================================================
   LottoExpert.net — Instant Intent (Joomla Module)
   File: media/css/instantintent.css
   ========================================================= */

:root{
  --skai-blue:#1C66FF;
  --deep-navy:#0A1A33;
  --soft-slate:#7F8DAA;
  --success:#20C997;
  --amber:#F5A623;

  /* CHG: Powerball red (adjust if your site uses a different red) */
  /* CHG: Powerball burgundy (premium, not bright) */
  --pb-red:#7A1232;      /* burgundy */
  --pb-red-deep:#3A0717; /* deep burgundy rim */

  /* CHG: “real lottery ball” styling tokens */
  --ball-edge: rgba(255,255,255,.22);
  --ball-shadow: 0 10px 18px rgba(2,6,23,.45), inset 0 1px 0 rgba(255,255,255,.20);
  --ball-inner: inset 0 -10px 18px rgba(0,0,0,.28);
  --ball-gloss: radial-gradient(circle at 28% 24%, rgba(255,255,255,.88) 0%, rgba(255,255,255,.34) 22%, rgba(255,255,255,0) 44%);
  --ball-rim: radial-gradient(circle at 50% 55%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 58%);

  --le-text:#EEF2FF;
  --le-dim:rgba(238,242,255,.58);

  --le-shadow:0 30px 80px rgba(2,6,23,.70);
  --le-shadow2:0 18px 46px rgba(2,6,23,.55);

  --le-r1:20px;
  --le-r2:16px;

  --le-font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  --le-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --g-deep-horizon: linear-gradient(135deg, #0A1A33 0%, #1C66FF 100%);
  --focus: 0 0 0 4px rgba(28,102,255,.22);
}

.le-ii-mod{
  font-family: var(--le-font);
  color: var(--le-text) !important;
  max-width: 1120px;
  margin: 0 auto;
  padding: 26px 22px 24px;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.le-ii-mod, .le-ii-mod *{ box-sizing:border-box; }

.le-ii-mod h1,.le-ii-mod h2,.le-ii-mod h3,.le-ii-mod h4,.le-ii-mod h5,.le-ii-mod h6{
  color: var(--le-text) !important;
  opacity: 1 !important;
}
.le-ii-mod p,.le-ii-mod li,.le-ii-mod label,.le-ii-mod span,.le-ii-mod a{
  color: inherit;
  opacity: 1 !important;
}

.le-ii-mod .le-grid{
  display:grid;
  grid-template-columns: 1.18fr .82fr;
  gap: 16px;
  margin-top: 16px;
}
@media (max-width: 980px){
  .le-ii-mod{ padding: 22px 16px 20px; }
  .le-ii-mod .le-grid{ grid-template-columns: 1fr; }
}

.le-ii-mod .le-hero{
  border-radius: var(--le-r1);
  border: 1px solid rgba(255,255,255,.12) !important;
  background:
    radial-gradient(circle at 12% 10%, rgba(28,102,255,.38) 0%, rgba(11,18,32,0) 55%),
    radial-gradient(circle at 88% 22%, rgba(127,141,170,.22) 0%, rgba(11,18,32,0) 62%),
    var(--g-deep-horizon) !important;
  box-shadow: var(--le-shadow), inset 0 1px 0 rgba(255,255,255,.08) !important;
  padding: 26px 24px 20px;
}
.le-ii-mod .le-hero, .le-ii-mod .le-hero *{ color: var(--le-text) !important; }

.le-ii-mod .le-hero-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.le-ii-mod .le-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(238,242,255,.74) !important;
  margin: 0 0 10px;
}

.le-ii-mod .le-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(238,242,255,.84) !important;
  backdrop-filter: blur(10px);
  font-size: 12px;
  white-space: nowrap;
}

.le-ii-mod .le-title{
  margin: 0 0 10px;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.038em;
  font-weight: 860;
}

.le-ii-mod .le-subtitle{
  margin: 0;
  max-width: 76ch;
  font-size: 15.6px;
  line-height: 1.68;
  color: rgba(238,242,255,.82) !important;
}

.le-ii-mod .le-mini{
  font-size: 12px;
  color: var(--le-dim) !important;
  margin-top: 10px;
}

.le-ii-mod .le-hero-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-top: 14px;
}

.le-ii-mod .le-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 11px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(255,255,255,.07) !important;
  color: var(--le-text) !important;
  text-decoration:none;
  font-weight: 760;
  font-size: 13.5px;
  line-height: 1;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.le-ii-mod .le-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.10) !important;
}
.le-ii-mod .le-btn:focus{ outline:none; box-shadow: var(--focus), inset 0 1px 0 rgba(255,255,255,.08); }

.le-ii-mod .le-btn-primary{
  background: linear-gradient(135deg, rgba(28,102,255,.96) 0%, rgba(10,26,51,.92) 100%) !important;
  border-color: rgba(255,255,255,.18) !important;
  box-shadow: 0 14px 30px rgba(28,102,255,.22), inset 0 1px 0 rgba(255,255,255,.10) !important;
}

.le-ii-mod .le-card{
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: var(--le-r2) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 100%),
    #0b1220 !important;
  box-shadow: var(--le-shadow2), inset 0 1px 0 rgba(255,255,255,.06) !important;
  color: var(--le-text) !important;
  overflow:hidden;
}

.le-ii-mod .le-card-h{
  padding: 14px 14px 12px;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.le-ii-mod .le-card-title{
  margin:0;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(238,242,255,.74) !important;
}
.le-ii-mod .le-card-body{ padding: 14px; }

.le-ii-mod .le-controls{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}
.le-ii-mod label.le-field{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 9px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(0,0,0,.18) !important;
  color: rgba(238,242,255,.80) !important;
  font-size: 13px;
}
.le-ii-mod select,
.le-ii-mod input[type="number"]{
  appearance:none;
  -webkit-appearance:none;

  /* CHG: enforce dark control + readable text */
  border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(10,16,32,.92) !important; /* dark */
  color: rgba(238,242,255,.95) !important;   /* bright text */

  border-radius: 12px;
  padding: 8px 34px 8px 10px; /* CHG: room for arrow */
  font-size: 13px;
  outline:none;
  min-height: 34px;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

/* CHG: help browsers that apply option styling */
.le-ii-mod select option{
  background: #0b1220 !important;
  color: #EEF2FF !important;
}

/* CHG: visible focus ring */
.le-ii-mod select:focus,
.le-ii-mod input[type="number"]:focus{
  box-shadow: var(--focus), inset 0 1px 0 rgba(255,255,255,.06) !important;
  border-color: rgba(28,102,255,.55) !important;
}

.le-ii-mod .le-note{
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 16px;
  background: rgba(0,0,0,.18) !important;
  padding: 12px;
  color: rgba(238,242,255,.80) !important;
  font-size: 13.6px;
  line-height: 1.6;
}
.le-ii-mod .le-note strong{ color: var(--le-text) !important; }

.le-ii-mod .le-divider{
  height:1px;
  background: rgba(255,255,255,.10);
  margin: 12px 0;
}

.le-ii-mod .le-meta{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  color: var(--le-dim) !important;
  font-size: 12px;
  margin-top: 10px;
}
.le-ii-mod .le-dot{
  width:4px;height:4px;
  border-radius:999px;
  background: rgba(255,255,255,.35);
  display:inline-block;
}

/* Lines */
.le-ii-mod .le-picks{ display:block !important; width:100% !important; margin-top: 12px; }

.le-ii-mod .le-line{
  display:grid !important;
  grid-template-columns: 1fr auto !important;
  align-items:center !important;
  gap: 12px !important;
  width:100% !important;
  padding: 12px !important;
  margin: 0 0 10px 0 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 16px !important;
  background: rgba(0,0,0,.20) !important;
  white-space: normal !important;

  /* CHG: avoid clipping first/last ball edges (looks like "squeeze") */
  overflow: visible !important;
}
.le-ii-mod .le-line-left{
  display:flex !important;
  flex-direction: row !important;          /* CHG: badge + balls on one line */
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}
.le-ii-mod .le-line-badge{
  display:inline-flex !important;
  flex: 0 0 auto !important;              /* CHG: don't stretch */
  align-self: center !important;          /* CHG: aligns in row layout */
  font-family: var(--le-mono);
  font-size: 12px;
  color: rgba(238,242,255,.64) !important;
  padding: 6px 8px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.04) !important;
  white-space: nowrap !important;
}

/* Balls row: gap + fallback margins */
.le-ii-mod .le-balls{
  display:flex !important;
  align-items:center !important;

  /* Occupy remaining row width */
  flex: 1 1 auto !important;
  min-width: 0 !important;

  /* Keep all balls (including PB) on one line */
  flex-wrap: nowrap !important;
  white-space: nowrap !important;

  /* CHG: slightly tighter, consistent spacing */
  gap: 5px !important;
  max-width: 100% !important;

  /* If it can't fit, scroll horizontally */
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; /* Firefox */

  /* CHG: prevents last item (PB ball) being flush/off-screen */
  padding-right: 10px !important;
}

/* CHG: keep pipe + PB label + extra ball(s) together to prevent orphan wrapping */
.le-ii-mod .le-extra-wrap{
  display:inline-flex !important;
  align-items:center !important;

  /* CHG: keep compact now that separators are hidden */
  gap: 4px !important;

  white-space: nowrap !important;
  flex: 0 0 auto !important;
  min-width: max-content !important;
}

/* CHG: compact "PB" label */
.le-ii-mod .le-ball-label{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-family: var(--le-mono) !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  letter-spacing: .06em !important;
  color: rgba(238,242,255,.78) !important;
  margin: 0 2px 0 0 !important;
  white-space: nowrap !important;
}


/* Visible separators: template-proof */
/* CHG: separators take valuable space — hide visually */
.le-ii-mod .le-sep{
  display:none !important;
}
.le-ii-mod .le-sep--pipe{
  display:none !important;
}

/* Ball chips (legacy block disabled — real ball styling below is the source of truth) */
/*
.le-ii-mod .le-ball{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:36px !important;
  height:36px !important;
  border-radius:999px !important;
  font-weight: 860 !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 2px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: rgba(255,255,255,.06) !important;
  color: var(--le-text) !important;
  user-select:none !important;
  letter-spacing: -0.02em;
}
*/
/* =========================================================
   CHG: “Real lottery ball” styling (gloss + rim + depth)
   ========================================================= */

/* CHG: White “lottery ball” with black numbers */
.le-ii-mod .le-ball{
  position: relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  /* Never allow the chip to shrink/squeeze */
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;

  width:38px !important;
  height:38px !important;
  border-radius:999px !important;

  font-weight: 900 !important;
  line-height: 1 !important;
  padding: 0 !important;

  /* Fallback spacing if gap is overridden */
  margin: 0 2px !important;

  /* White ball base */
  background:
    radial-gradient(circle at 30% 26%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.70) 22%, rgba(255,255,255,0) 46%),
    radial-gradient(circle at 65% 70%, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 58%),
    linear-gradient(180deg, #FFFFFF 0%, #E8ECF5 100%) !important;

  border: 1px solid rgba(255,255,255,.30) !important;

  /* Black numbers */
  color: rgba(5,8,22,.92) !important;

  /* Premium depth on dark UI */
  box-shadow:
    0 12px 22px rgba(2,6,23,.55),
    inset 0 2px 0 rgba(255,255,255,.55),
    inset 0 -10px 18px rgba(2,6,23,.20) !important;

  letter-spacing: -0.02em;
  user-select:none !important;
  transform: translateZ(0);
}

/* Gloss overlay */
/* CHG: cleaner highlight for white balls */
.le-ii-mod .le-ball::before{
  content: "" !important;
  position:absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background:
    radial-gradient(circle at 28% 22%, rgba(255,255,255,.88) 0%, rgba(255,255,255,.30) 24%, rgba(255,255,255,0) 46%),
    radial-gradient(circle at 50% 60%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 60%) !important;
  pointer-events:none !important;
  opacity: .95 !important;
}

/* Inner ring */
.le-ii-mod .le-ball::after{
  content: "" !important;
  position:absolute !important;
  inset: 3px !important;
  border-radius: inherit !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  pointer-events:none !important;
}

/* Main balls — SKAI blue */
/* CHG: keep mains white; add a subtle SKAI-blue rim */
.le-ii-mod .le-ball--main{
  box-shadow:
    0 12px 22px rgba(2,6,23,.55),
    inset 0 2px 0 rgba(255,255,255,.55),
    inset 0 -10px 18px rgba(2,6,23,.20),
    0 0 0 2px rgba(28,102,255,.22) !important;
}

/* Extra balls (default) — amber/gold */
.le-ii-mod .le-ball--extra{
  border-color: rgba(245,166,35,.55) !important;
  background:
    radial-gradient(circle at 40% 38%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 46%),
    radial-gradient(circle at 72% 70%, rgba(0,0,0,.18) 0%, rgba(0,0,0,0) 52%),
    radial-gradient(circle at 40% 35%, rgba(245,166,35,.58) 0%, rgba(245,166,35,.22) 35%, rgba(10,26,51,.96) 100%) !important;
}

/* CHG: Powerball extra ball — brand red (apply via JS class) */
/* CHG: Powerball burgundy that pops (white number for contrast) */
/* CHG: Burgundy extra ball style (applies to ALL extras) */
.le-ii-mod .le-ball--pb{
  border-color: rgba(168, 34, 70, .80) !important;

  /* CHG: force override even if .le-ball--extra is also present */
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 46%),
    radial-gradient(circle at 65% 70%, rgba(0,0,0,.22) 0%, rgba(0,0,0,0) 58%),
    linear-gradient(180deg, var(--pb-red) 0%, var(--pb-red-deep) 100%) !important;

  color: rgba(255,255,255,.96) !important;

  box-shadow:
    0 14px 26px rgba(122,18,50,.28),
    0 12px 22px rgba(2,6,23,.55),
    inset 0 2px 0 rgba(255,255,255,.22),
    inset 0 -12px 20px rgba(0,0,0,.30) !important;
}

.le-ii-mod .le-line-actions{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  white-space: nowrap !important;
}
.le-ii-mod .le-icon-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  background: rgba(255,255,255,.06) !important;
  color: var(--le-text) !important;
  border-radius: 12px !important;
  padding: 9px 12px !important;
  font-size: 12.5px !important;
  font-weight: 760 !important;
  line-height: 1 !important;
  cursor:pointer !important;
  transition: transform .14s ease, background .14s ease, border-color .14s ease;
  min-width: 78px;
  position: relative;
}
.le-ii-mod .le-icon-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.10) !important;
}
.le-ii-mod .le-icon-btn:focus{ outline:none; box-shadow: var(--focus); }

/* Loading state for button */
.le-ii-mod .le-icon-btn.le-loading{
  cursor: wait !important;
  background: rgba(28,102,255,.20) !important;
  border-color: rgba(28,102,255,.35) !important;
  pointer-events: none;
}
.le-ii-mod .le-icon-btn.le-loading::before{
  content: "" !important;
  position: absolute !important;
  width: 14px !important;
  height: 14px !important;
  margin-right: 6px;
  border: 2px solid rgba(238,242,255,.25) !important;
  border-top-color: rgba(238,242,255,.85) !important;
  border-radius: 50% !important;
  animation: le-spin 0.7s linear infinite !important;
}

@keyframes le-spin {
  to { transform: rotate(360deg); }
}


.le-ii-mod .le-method-card{ display:grid; gap:10px; }
.le-ii-mod .le-method-pill{
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(0,0,0,.18) !important;
  border-radius: 16px;
  padding: 12px;
}
.le-ii-mod .le-method-pill h4{
  margin: 0 0 6px;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--le-text) !important;
}
.le-ii-mod .le-method-pill p{
  margin:0;
  color: rgba(238,242,255,.78) !important;
  font-size: 13px;
  line-height: 1.6;
}

.le-ii-mod .le-foot{
  margin-top: 14px;
  color: var(--le-dim) !important;
  font-size: 12px;
  line-height: 1.6;
}
.le-ii-mod .le-link{
  color: rgba(238,242,255,.88) !important;
  text-decoration: underline;
  text-decoration-color: rgba(28,102,255,.55);
  text-underline-offset: 3px;
}
.le-ii-mod .le-link:hover{ text-decoration-color: rgba(28,102,255,.85); }

.le-ii-mod .le-toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  background: rgba(10,16,32,.94) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: var(--le-text) !important;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 600;
  z-index: 9999;
  opacity: 0;
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
  box-shadow: var(--le-shadow2);
  min-width: 180px;
  text-align: center;
}
.le-ii-mod .le-toast.on{
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}

/* Toast variants */
.le-ii-mod .le-toast.le-toast--loading{
  background: rgba(28,102,255,.92) !important;
  border-color: rgba(28,102,255,.45) !important;
}
.le-ii-mod .le-toast.le-toast--success{
  background: rgba(32,201,151,.92) !important;
  border-color: rgba(32,201,151,.45) !important;
}
.le-ii-mod .le-toast.le-toast--error{
  background: rgba(220,38,38,.92) !important;
  border-color: rgba(220,38,38,.45) !important;
}

/* CHG: consistent dropdown caret */
.le-ii-mod label.le-field{
  position: relative;
}

.le-ii-mod label.le-field select{
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(238,242,255,.85) 50%),
    linear-gradient(135deg, rgba(238,242,255,.85) 50%, transparent 50%),
    linear-gradient(to right, rgba(255,255,255,.14), rgba(255,255,255,.14));
  background-position:
    calc(100% - 16px) 50%,
    calc(100% - 11px) 50%,
    calc(100% - 32px) 50%;
  background-size:
    6px 6px,
    6px 6px,
    1px 18px;
  background-repeat: no-repeat;
}


@media (max-width: 520px){
  .le-ii-mod .le-ball{ width:34px !important; height:34px !important; font-size: 13px; }
  .le-ii-mod .le-icon-btn{ padding: 9px 10px !important; min-width: 72px; }

  /* CHG: slightly tighter spacing to keep PB section inline */
  .le-ii-mod .le-balls{ gap: 4px !important; }
  .le-ii-mod .le-extra-wrap{ gap: 4px !important; }
  .le-ii-mod .le-sep{ margin: 0 1px !important; }
}


/* =========================================================
   FIX: Mobile portrait — show extra balls (no hidden overflow)
   - Stack Copy button below
   - Allow balls to wrap
   ========================================================= */
@media (max-width: 560px){

  /* Make the line a single column so Copy doesn't steal width */
  .le-ii-mod .le-line{
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    overflow: visible !important;
  }

  /* Badge above balls to maximize horizontal room */
  .le-ii-mod .le-line-left{
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  /* CRITICAL: allow wrap and disable horizontal scrolling on mobile */
  .le-ii-mod .le-balls{
    flex-wrap: wrap !important;
    white-space: normal !important;

    overflow-x: visible !important;
    overflow-y: visible !important;

    padding-right: 0 !important;
    gap: 6px !important;
  }

  /* Keep action row visible and clean */
  .le-ii-mod .le-line-actions{
    justify-content: flex-start !important;
    width: 100% !important;
  }

  /* Full-width Copy button (best mobile UX) */
  .le-ii-mod .le-icon-btn{
    width: 100% !important;
    min-width: 0 !important;
  }
}