/* Results page redesign - professional & creative */
:root {
  --card-bg: #ffffff;
  --card-bg-alt: #f7f9fb;
  --card-shadow: 0 6px 24px rgba(20, 29, 39, 0.08);
  --chip-bg: #eef3f7;
  --chip-text: #1f2d3d;
  --accent: #5b8def; /* blue */
  --accent-2: #845ef7; /* purple */
  --success: #2ec4b6;
  --danger: #ff4d4f;
  --muted: #6b7280;
}

.results-rtl { direction: rtl; }

/* Caption styling */
.results-caption {
  caption-side: top;
  text-align: right;
  padding: 0.75rem 0.25rem 0.5rem;
  font-weight: 700;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 8px;
}
.results-caption i { color: var(--accent-2); filter: drop-shadow(0 2px 6px rgba(132, 94, 247, 0.25)); }

/* Table becomes card-like rows */
.results-table {
  border-collapse: separate !important;
  border-spacing: 0 12px !important;
}
.results-table tbody tr.result-row td,
.results-table tbody tr.result-row th {
  background: var(--card-bg);
  vertical-align: middle;
}
.results-table tbody tr.result-row td:first-child,
.results-table tbody tr.result-row th:first-child {
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
}
.results-table tbody tr.result-row td:last-child {
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
}
/* Subtle elevation on hover */
.results-table tbody tr.result-row {
  transition: transform 160ms ease, filter 160ms ease;
}
.results-table tbody tr.result-row:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 10px 24px rgba(14, 21, 37, 0.12));
}

/* Cells */
.result-row__brand { text-align: center; min-width: 120px; }
.lotto-logo { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 1px 4px rgba(0,0,0,.12)); }
.lotto-name { font-size: 0.85rem; color: #1f2937; margin-top: 6px; font-weight: 600; }

.result-row__date { white-space: nowrap; }
.date-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(180deg, #f7fafc 0%, #eef3f7 100%);
  color: var(--chip-text);
  border: 1px solid #e6ebf1;
  padding: 6px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600;
}
.date-chip i { color: var(--accent); }

/* Balls (numbers) */
.balls { list-style: none; margin: 0; padding: 8px 0; display: inline-flex; gap: 8px; direction: ltr; }
.ball { width: 36px; height: 36px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; letter-spacing: 0.2px; position: relative; }
.ball span { font-size: 0.9rem; transform: translateY(1px); }

/* Subtle shine */
.ball::after { content: ""; position: absolute; top: 6%; left: 18%; width: 56%; height: 38%; background: radial-gradient(ellipse at center, rgba(255,255,255,.9), rgba(255,255,255,0)); border-radius: 50%; filter: blur(1px); pointer-events: none; }

/* Main numbers: silver/graphite gradient */
.ball--main { color: #4b5563; background: radial-gradient(circle at 65% 15%, #ffffff 2%, #f1f5f9 28%, #d5d9e0 62%, #9aa0a6 100%); box-shadow: inset 0 2px 4px rgba(255,255,255,.5), 0 4px 10px rgba(24, 42, 62, 0.18); }

/* Bonus numbers: ruby/red gradient */
.ball--bonus { color: #fff; background: radial-gradient(circle at 65% 15%, #fff 2%, #ff9c9c 18%, #ea2727 64%, #b10202 100%); box-shadow: inset 0 2px 4px rgba(255,255,255,.5), 0 4px 12px rgba(234, 39, 39, 0.3); }

/* Action button */
.btn-gradient { 
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  color: #fff !important; border: 0; font-weight: 700; padding: 8px 14px; border-radius: 999px;
  box-shadow: 0 8px 18px rgba(91, 141, 239, 0.35); display: inline-flex; align-items: center; gap: 8px;
}
.btn-gradient:hover { filter: brightness(1.05); box-shadow: 0 10px 22px rgba(91, 141, 239, 0.45); }
.btn-gradient i { font-size: 0.95rem; }

/* Reduce default table padding for compact elegance */
.results-table td, .results-table th { border: 0 !important; padding: 12px 16px; }
.result-row__action { min-width: 130px; }

/* Responsive adjustments */
@media (max-width: 992px) {
  .ball { width: 34px; height: 34px; }
  .balls { gap: 6px; }
  .lotto-logo { width: 40px; height: 40px; }
}
@media (max-width: 768px) {
  .results-table { border-spacing: 0 10px !important; }
  .results-table td, .results-table th { padding: 10px 12px; }
  .result-row__action { min-width: 110px; }
  .date-chip { font-size: 0.75rem; padding: 5px 8px; }
  .ball { width: 32px; height: 32px; }
}
@media (max-width: 576px) {
  .results-caption { font-size: 0.95rem; }
  .results-table { border-spacing: 0 10px !important; }
  .results-table, .results-table tbody { display: block; width: 100%; }

  /* Compact card */
  .results-table tbody tr.result-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 10px;
    padding: 34px 12px 48px; /* extra top/bottom space for date and button */
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    width: min(100%, 520px);
    margin-left: auto;
    margin-right: auto;
    position: relative;
  }
  .results-table tbody tr.result-row td, .results-table tbody tr.result-row th {
    display: block;
    background: transparent;
    padding: 4px 0;
    border: 0 !important;
  }

  /* Brand on its own line */
  .result-row__brand { order: 1; text-align: center; flex: 1 1 100%; }
  .lotto-logo { width: 44px; height: 44px; }
  .lotto-name { font-size: 0.9rem; font-weight: 800; margin-top: 4px; }

  /* Numbers inline and compact */
  .balls { flex-wrap: nowrap; gap: 4px; }
  .ball { width: 26px; height: 26px; }
  .ball span { font-size: 0.8rem; }
  .result-row__main, .result-row__bonus {
    order: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 1 auto;
  }
  .result-row__main { justify-content: flex-end; }
  .result-row__bonus { justify-content: flex-start; }
  .result-row__bonus::before {
    content: "•";
    color: #cbd5e1;
    margin: 0 4px;
    font-weight: 900;
  }

  /* Remove section titles for compact view */
  .result-row__main::before { content: none; margin: 0; }

  /* Date badge in top-left corner */
  .result-row__date {
    order: 0;
    position: absolute;
    top: 8px;
    left: 12px;
    text-align: left;
    z-index: 1;
  }

  /* "More" button in bottom-right corner */
  .result-row__action {
    order: 4;
    position: absolute;
    right: 12px;
    bottom: 10px;
    text-align: right;
    z-index: 1;
  }

  /* Compact/pretty date chip */
  .date-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(180deg, #f7fafc 0%, #eef3f7 100%);
    border: 1px solid #e6ebf1;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.75rem;
    color: #334155;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08);
  }
  .date-chip i { display: inline-block; color: var(--accent); }

  /* Smaller button */
  .btn-gradient { padding: 6px 12px; font-size: 0.85rem; box-shadow: 0 6px 14px rgba(91,141,239,0.28); }
}

/* Search bar styling */
.results-search { 
  direction: rtl; 
  margin-top: 8px; 
  margin-bottom: 8px; 
}
.results-search .input-group-text {
  background: var(--chip-bg);
  border: 1px solid #e6ebf1;
  color: var(--muted);
}
.results-search .form-control {
  border: 1px solid #e6ebf1;
  box-shadow: none;
}
.results-search .form-control:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 0.1rem rgba(91, 141, 239, 0.15);
}
@media (max-width: 576px) {
  .results-search { margin-top: 6px; margin-bottom: 6px; }
}
/* Desktop results table header */
.results-head th {
  background: var(--card-bg-alt);
  color: #334155;
  font-weight: 800;
  font-size: 0.85rem;
  border: 0 !important;
  padding: 10px 16px;
  white-space: nowrap;
}
.results-head th:first-child {
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
}
.results-head th:last-child {
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
}
@media (max-width: 576px) {
  .results-head { display: none; }
}