/* -------------------------------------------------------------
   LotteryPro - Check Historic Draws Styles (Responsive & Clean)
   ------------------------------------------------------------- */

/* === Core Card Layout === */
.lcpro-results-card {
  max-width: 900px;
  margin: 1.5em auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  font-family: Arial, sans-serif;
  overflow: hidden;
}

.lcpro-results-card h2 {
  text-align: center;
  color: #0073aa;
  padding: 1em 0;
  margin: 0;
  border-bottom: 1px solid #eee;
}

/* === Table Layout === */
.lcpro-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.lcpro-results-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 500px;
}

.lcpro-results-table th,
.lcpro-results-table td {
  padding: 10px;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
}

.lcpro-results-table thead {
  background: #f7f7f7;
}

.lcpro-results-table tbody tr:nth-child(even) {
  background: #fafafa;
}

.lcpro-results-table tbody tr:hover {
  background: #f1f9ff;
}

/* === Row Highlights (Winning Matches) === */
.lcpro-row-jackpot { background: #fff8e1 !important; }
.lcpro-row-5bonus  { background: #ffe4ec !important; }
.lcpro-row-5match  { background: #f3e5f5 !important; }
.lcpro-row-4match  { background: #e3f2fd !important; }
.lcpro-row-3match  { background: #f1f8e9 !important; }

/* ---------------------------------------------------
   LotteryPro - Ball Styling (Consistent & Compact)
   --------------------------------------------------- */

/* --- Ball container --- */
.lcpro-balls {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;        /* keep all numbers on one line */
  white-space: nowrap;      /* prevent wrapping */
  gap: 3px;                 /* small space between balls */
  margin: 4px 0;
}

/* --- Standard numbered balls --- */
.lcpro-ball {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid #0073aa;
  background: #fff;
  color: #000;
  font-size: 12px;
  font-weight: 600;
  box-sizing: border-box;
  text-align: center;
  transition: transform 0.15s ease;
}

.lcpro-ball:hover {
  transform: scale(1.08);
}

/* --- Bonus / Lucky Star (gold) --- */
.lcpro-ball.bonus,
.lcpro-ball.lucky {
  background: gold;
  border-color: gold;
  color: #000;
}

/* small left gap before bonus section */
.lcpro-ball.bonus:first-of-type,
.lcpro-ball.lucky:first-of-type {
  margin-left: 6px;
}

/* --- Thunderball variant --- */
.lcpro-ball.thunder {
  background: radial-gradient(circle at 30% 30%, #d6aaff, #a370ff);
  border: 2px solid #7a3ef6;
  color: #fff;
}

/* === Results Footer === */
.lcpro-results-footer {
  text-align: center;
  padding: 1em;
  color: #666;
  font-size: 0.9rem;
}

/* === Responsive === */
@media (max-width: 520px) {
  .lcpro-results-table,
  .lcpro-results-table thead,
  .lcpro-results-table tbody,
  .lcpro-results-table th,
  .lcpro-results-table td,
  .lcpro-results-table tr {
    display: block;
  }

  .lcpro-results-table thead tr {
    display: none;
  }

  .lcpro-results-table tr {
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-bottom: 10px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }

  .lcpro-results-table td {
    padding: 8px 12px;
    border: none;
    position: relative;
    text-align: left;
  }

  .lcpro-results-table td::before {
    content: attr(data-label);
    font-weight: bold;
    color: #0073aa;
    display: block;
    margin-bottom: 3px;
  }

  .lcpro-balls {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}

/* === Trend Indicators (used in Frequency Tables) === */
.lcpro-trend-up {
  color: #2e7d32;
  font-weight: bold;
}

.lcpro-trend-down {
  color: #c62828;
  font-weight: bold;
}

.lcpro-trend-stable {
  color: #777;
}

/* === Dropdown & Logo === */
#lotterypro-frequency-form select {
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 15px;
  margin-left: 6px;
}

.lcpro-lottery-logo {
  display: block;
  margin: 0.5rem auto 1rem;
  max-width: 160px;
  height: auto;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

@media (max-width:600px) {
  .lcpro-lottery-logo {
    max-width: 120px;
  }
}




/* === Final override: compact check results ball layout === */
.lcpro-results-card .lcpro-balls {
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 5px;
  margin: 4px 0;
}

.lcpro-results-card .lcpro-ball {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  border: 1.5px solid #0073aa !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #000 !important;
  background: #fff !important;
  box-sizing: border-box;
  margin: 1px !important;
}

.lcpro-results-card .lcpro-ball.bonus,
.lcpro-results-card .lcpro-ball.lucky {
  background: gold !important;
  border-color: #000 !important;
  color: #000 !important;
}

/* === Refined spacing and 3D effects for result balls === */
.lcpro-results-card .lcpro-balls {
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 5px;                /* base spacing between main balls */
  margin: 6px 0;
}

/* --- Shared ball style --- */
.lcpro-results-card .lcpro-ball {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 28px !important;  /* increase size as you wish */
  height: 28px !important;
  border-radius: 50% !important;
  border: 2px solid #0073aa !important;
  background: radial-gradient(circle at 30% 30%, #ffffff 25%, #bcd8f2 90%) !important;
  color: #000 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.8),
              inset 0 -1px 3px rgba(0,0,0,0.15),
              0 1px 2px rgba(0,0,0,0.15);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.lcpro-results-card .lcpro-ball:hover {
  transform: scale(1.1);
  box-shadow: inset 0 1px 3px rgba(255,255,255,0.9),
              inset 0 -1px 3px rgba(0,0,0,0.25),
              0 3px 6px rgba(0,0,0,0.75);
}

/* --- Bonus / Lucky Stars --- */
.lcpro-results-card .lcpro-ball.bonus,
.lcpro-results-card .lcpro-ball.lucky {
  background: radial-gradient(circle at 30% 30%, #fff7c2 25%, #f3c041 90%) !important;
  border: 2px solid #b18500 !important;
  color: #000 !important;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.8),
              inset 0 -1px 3px rgba(128,96,0,0.25),
              0 1px 2px rgba(0,0,0,0.2);
}

/* --- Larger size for bonus/lucky --- */
.lcpro-results-card .lcpro-ball.bonus,
.lcpro-results-card .lcpro-ball.lucky {
  width: 30px !important;
  height: 30px !important;
}

/* --- Force gap between last main ball and the bonus section --- */
.lcpro-results-card .lcpro-ball:not(.bonus):not(.lucky) + .lcpro-ball.bonus,
.lcpro-results-card .lcpro-ball:not(.bonus):not(.lucky) + .lcpro-ball.lucky {
  margin-left: 28px !important; /* adjust as needed */
}


/* --- Extra gap between the two lucky stars (EuroMillions) --- */
.lcpro-results-card .lcpro-ball.lucky + .lcpro-ball.lucky {
  margin-left: 6px !important; /* clear space between the 2 gold stars */
}
.lcpro-results-card .lcpro-ball.lucky + .lcpro-ball.lucky {
  margin-left: 6px !important;
}
/* === Force visible gap between main numbers and bonus/lucky stars === */
.lcpro-balls + .lcpro-ball.bonus,
.lcpro-balls + .lcpro-ball.lucky {
  margin-left: 20px !important;   /* gap between last main and first bonus/lucky ball */
}

/* extra space between multiple lucky stars (EuroMillions) */
.lcpro-ball.lucky + .lcpro-ball.lucky {
  margin-left: 10px !important;
}


/* === LotteryPro 3D Ball Styling (Unified Depth & Lighting) === */

/* --- Base blue balls --- */
.lcpro-results-card .lcpro-ball {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  color: #000 !important; /* you preferred black text */
  text-shadow: 0 1px 1px rgba(255,255,255,0.4);
  background: radial-gradient(circle at 30% 30%, #e9f3ff 5%, #3a8df0 60%, #1857a4 95%) !important;
  box-shadow:
    inset 0 1px 3px rgba(255,255,255,0.9),
    inset 0 -2px 5px rgba(0,0,0,0.25),
    0 2px 5px rgba(0,0,0,0.3);
  border: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.lcpro-results-card .lcpro-ball:hover {
  transform: scale(1.08);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,0.9),
    inset 0 -3px 5px rgba(0,0,0,0.3),
    0 3px 6px rgba(0,0,0,0.35);
}

/* --- Gold metallic bonus / lucky balls with same 3D depth --- */
.lcpro-results-card .lcpro-ball.bonus,
.lcpro-results-card .lcpro-ball.lucky {
  position: relative;
  width: 36px !important;     /* match blue balls */
  height: 36px !important;    /* match blue balls */
  border-radius: 50% !important;
  background: radial-gradient(circle at 30% 30%, #fff9d8 10%, #f3c43c 55%, #b58800 95%) !important;
  color: #000 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.7);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,0.9),
    inset 0 -2px 5px rgba(0,0,0,0.3),
    0 2px 5px rgba(0,0,0,0.35);
  border: none !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 16px !important;
  font-weight: 700 !important;
}
/* --- Subtle reflection highlight on all balls --- */
.lcpro-results-card .lcpro-ball::after {
  content: "";
  position: absolute;
  width: 50%;
  height: 50%;
  top: 4px;
  left: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at top left, rgba(255,255,255,0.75), transparent 70%);
  pointer-events: none;
}

/* --- Layout & spacing rules --- */
.lcpro-balls {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 4px;
  margin: 4px 0;
}

/* gap between last main and first bonus/lucky ball */
.lcpro-balls + .lcpro-ball.bonus,
.lcpro-balls + .lcpro-ball.lucky {
  margin-left: 34px !important;
}

/* gap between two lucky stars */
.lcpro-ball.lucky + .lcpro-ball.lucky {
  margin-left: 10px !important;
}
/* --- Floating shadow under each ball (enhanced for visibility) --- */
.lcpro-results-card .lcpro-ball {
  position: relative;
  z-index: 1; /* keep the ball above its shadow */
}

.lcpro-results-card .lcpro-ball::before {
  content: "";
  position: absolute;
  bottom: -6px;                 /* move slightly lower */
  left: 50%;
  transform: translateX(-50%);
  width: 70%;                   /* wider shadow oval */
  height: 10px;                 /* taller for blur depth */
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
                              rgba(0, 0, 0, 0.35) 0%,
                              rgba(0, 0, 0, 0.15) 40%,
                              rgba(0, 0, 0, 0) 80%);
  filter: blur(3px);
  opacity: 0.8;                 /* stronger visibility */
  z-index: -1;                  /* keep it below the ball */
  pointer-events: none;
}



/* ================================
   LOTTERYPRO 3D LOTTERY BALLS
   ================================ */

.lotterypro-ball {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;

    font-weight: 700;
    font-size: 16px;
    line-height: 1;

    background: radial-gradient(circle at 30% 30%, #ffffff, #d8d8d8 60%, #c3c3c3 85%);
    border: 2px solid rgba(0,0,0,0.15);
    color: #222;

    box-shadow:
        0 2px 3px rgba(0, 0, 0, 0.25),
        inset 0 0 3px rgba(0,0,0,0.2);

    margin: 4px;
}

/* Hover effect (optional but nice) */
.lotterypro-ball:hover {
    transform: translateY(-2px);
    box-shadow:
        0 4px 6px rgba(0,0,0,0.3),
        inset 0 0 4px rgba(0,0,0,0.25);
    transition: 0.15s ease;
}

/* -----------------------------------
   COLORS PER LOTTERY TYPE (OPTIONAL)
   ----------------------------------- */

/* UK / Irish / India standard balls */
.lotterypro-ball-std {
    background: radial-gradient(circle at 30% 30%, #ffffff, #f6f2ff 55%, #dfd7ff 85%);
}

/* EuroMillions Main Balls (yellow/gold) */
.lotterypro-ball-euro {
    background: radial-gradient(circle at 30% 30%, #fff8d1, #ffd64d 55%, #f5b400 85%);
    border-color: rgba(0,0,0,0.18);
}

/* EuroMillions Lucky Stars (blue) */
.lotterypro-ball-star {
    background: radial-gradient(circle at 30% 30%, #ffffff, #8fbaff 50%, #4c76d3 85%);
    color: #fff;
    border-color: rgba(255,255,255,0.25);
}

/* Wheel Builder Table Improvements */
.lotterypro-wheel-table td {
    padding: 6px 10px;
    vertical-align: middle;
}