/* =====================================================
   PREMIUM DARK THEME V2 - Betting Platform
   A comprehensive dark theme for premium gambling sites
===================================================== */

/* Import Premium Font */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

/* =====================================================
   CSS VARIABLES
===================================================== */
:root {
  /* Background Colors */
  --pd-bg-primary: #0f0f14;
  --pd-bg-secondary: #1c1c26;
  --pd-bg-tertiary: #252532;
  --pd-bg-card: #1e1e2a;
  --pd-bg-hover: #22222e;
  
  /* Border Colors */
  --pd-border: rgba(255, 255, 255, 0.06);
  --pd-border-hover: rgba(251, 191, 36, 0.3);
  --pd-border-light: rgba(255, 255, 255, 0.1);
  
  /* Text Colors */
  --pd-text-primary: #ffffff;
  --pd-text-secondary: #a1a1aa;
  --pd-text-muted: #71717a;
  --pd-text-dark: #0f0f14;
  
  /* Accent Colors */
  --pd-accent-gold: #fbbf24;
  --pd-accent-gold-hover: #f59e0b;
  --pd-accent-red: #c10930;
  --pd-accent-red-dark: #8b0620;
  --pd-accent-green: #22c55e;
  --pd-accent-green-dark: #16a34a;
  --pd-accent-blue: #3b82f6;
  --pd-accent-purple: #7c3aed;
  
  /* Back/Lay Colors */
  --pd-back: #72bbef;
  --pd-back-dark: #5a9fd4;
  --pd-back-light: rgba(114, 187, 239, 0.4);
  --pd-lay: #f994ba;
  --pd-lay-dark: #e87da6;
  --pd-lay-light: rgba(249, 148, 186, 0.4);
  
  /* Status Colors */
  --pd-success: #22c55e;
  --pd-error: #ef4444;
  --pd-warning: #fbbf24;
  --pd-info: #3b82f6;
  
  /* Border Radius */
  --pd-radius-sm: 6px;
  --pd-radius-md: 10px;
  --pd-radius-lg: 14px;
  --pd-radius-xl: 20px;
  
  /* Shadows */
  --pd-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --pd-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --pd-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --pd-shadow-gold: 0 4px 16px rgba(251, 191, 36, 0.2);
  --pd-shadow-red: 0 4px 12px rgba(193, 9, 48, 0.3);
  --pd-shadow-green: 0 0 12px rgba(34, 197, 94, 0.4);
  
  /* Typography */
  --pd-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pd-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
  
  /* Transitions */
  --pd-transition-fast: 150ms ease;
  --pd-transition-normal: 200ms ease;
  --pd-transition-slow: 300ms ease;
}

/* =====================================================
   BASE STYLES
===================================================== */
body {
  font-family: var(--pd-font-primary);
  background: var(--pd-bg-primary);
  color: var(--pd-text-primary);
  line-height: 1.5;
}

/* =====================================================
   ODDS BOX STYLES - FIXED SIZE
===================================================== */
.pd-odds-box {
  width: 52px;
  height: 38px;
  border-radius: var(--pd-radius-sm);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--pd-transition-fast);
  flex-shrink: 0;
}

.pd-odds-box:hover {
  transform: scale(1.05);
  box-shadow: var(--pd-shadow-sm);
}

.pd-odds-box-back {
  background: linear-gradient(180deg, var(--pd-back) 0%, var(--pd-back-dark) 100%);
}

.pd-odds-box-back:hover {
  background: linear-gradient(180deg, #82cbff 0%, #6aafd4 100%);
}

.pd-odds-box-lay {
  background: linear-gradient(180deg, var(--pd-lay) 0%, var(--pd-lay-dark) 100%);
}

.pd-odds-box-lay:hover {
  background: linear-gradient(180deg, #ffa4ca 0%, #f88db6 100%);
}

.pd-odds-box-light {
  opacity: 0.6;
}

.pd-odds-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--pd-text-dark);
  font-family: var(--pd-font-mono);
  line-height: 1;
}

/* Mobile Odds Box */
@media (max-width: 768px) {
  .pd-odds-box {
    width: 44px;
    height: 36px;
    flex: 1;
    min-width: 38px;
  }
  
  .pd-odds-value {
    font-size: 12px;
  }
}

/* =====================================================
   MATCH CARD STYLES
===================================================== */
.pd-match-card {
  background: var(--pd-bg-secondary);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-lg);
  padding: 14px 16px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all var(--pd-transition-normal);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.pd-match-card:hover {
  background: var(--pd-bg-hover);
  border-color: var(--pd-border-hover);
  transform: translateY(-2px);
  box-shadow: var(--pd-shadow-md);
}

.pd-match-info {
  flex: 1;
  min-width: 0;
}

.pd-match-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--pd-text-primary);
  margin: 0 0 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.pd-match-league {
  font-size: 12px;
  color: var(--pd-text-muted);
  margin: 0 0 8px 0;
}

.pd-match-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pd-match-time {
  font-size: 12px;
  color: var(--pd-text-secondary);
  font-family: var(--pd-font-mono);
}

/* Mobile Match Card */
@media (max-width: 768px) {
  .pd-match-card {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px;
  }
  
  .pd-match-name {
    font-size: 13px;
    white-space: normal;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  
  .pd-odds-grid {
    justify-content: space-between;
    width: 100%;
  }
}

/* =====================================================
   LIVE BADGE
===================================================== */
.pd-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, var(--pd-accent-green) 0%, var(--pd-accent-green-dark) 100%);
  padding: 3px 8px;
  border-radius: 4px;
  box-shadow: var(--pd-shadow-green);
}

.pd-live-dot {
  width: 6px;
  height: 6px;
  background: white;
  border-radius: 50%;
  animation: pd-pulse 1.5s infinite;
}

.pd-live-text {
  font-size: 10px;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

@keyframes pd-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* =====================================================
   SPORT HEADER
===================================================== */
.pd-sport-header {
  margin-bottom: 16px;
}

.pd-sport-header-inner {
  background: linear-gradient(135deg, var(--pd-accent-red) 0%, var(--pd-accent-red-dark) 100%);
  padding: 10px 20px;
  padding-right: 60px;
  clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pd-sport-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.pd-sport-title {
  font-size: 14px;
  font-weight: 600;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}

/* =====================================================
   MARKET SECTION (ODDS PAGE)
===================================================== */
.pd-market-section {
  background: var(--pd-bg-secondary);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-md);
  margin-bottom: 12px;
  overflow: hidden;
}

.pd-market-header {
  background: linear-gradient(135deg, var(--pd-bg-tertiary) 0%, #2a2a3a 100%);
  padding: 12px 16px;
  border-bottom: 1px solid var(--pd-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pd-market-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--pd-text-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pd-market-title i {
  color: var(--pd-accent-gold);
  font-size: 12px;
}

.pd-market-limit {
  font-size: 11px;
  color: var(--pd-text-muted);
}

.pd-market-limit span {
  color: var(--pd-accent-gold);
  font-weight: 600;
}

/* =====================================================
   TABLE STYLES
===================================================== */
.pd-table-header {
  background: var(--pd-bg-tertiary);
  padding: 8px 16px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--pd-border);
}

.pd-table-header-cell {
  width: 60px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px;
  border-radius: 4px;
}

.pd-table-header-cell.back {
  background: rgba(114, 187, 239, 0.2);
  color: var(--pd-back);
}

.pd-table-header-cell.lay {
  background: rgba(249, 148, 186, 0.2);
  color: var(--pd-lay);
}

/* Runner Row */
.pd-runner-row {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--pd-border);
  transition: background var(--pd-transition-fast);
  position: relative;
}

.pd-runner-row:last-child {
  border-bottom: none;
}

.pd-runner-row:hover {
  background: rgba(255, 255, 255, 0.02);
}

.pd-runner-row.suspended::before {
  content: 'SUSPENDED';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(193, 9, 48, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1px;
  z-index: 2;
}

.pd-runner-info {
  flex: 1;
  min-width: 0;
}

.pd-runner-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--pd-text-primary);
  margin: 0 0 2px 0;
}

.pd-runner-pnl {
  font-size: 12px;
  font-weight: 600;
}

.pd-runner-pnl.positive {
  color: var(--pd-success);
}

.pd-runner-pnl.negative {
  color: var(--pd-error);
}

.pd-runner-odds {
  display: flex;
  gap: 4px;
}

/* Mobile Runner */
@media (max-width: 768px) {
  .pd-runner-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  
  .pd-runner-odds {
    justify-content: space-between;
    width: 100%;
  }
}

/* =====================================================
   SIDEBAR STYLES
===================================================== */
.pd-sidebar-section {
  background: var(--pd-bg-secondary);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-md);
  margin-bottom: 12px;
  overflow: hidden;
}

.pd-sidebar-header {
  background: var(--pd-bg-tertiary);
  padding: 12px 16px;
  border-bottom: 1px solid var(--pd-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pd-sidebar-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--pd-text-primary);
  margin: 0;
}

.pd-sidebar-link {
  font-size: 12px;
  color: var(--pd-accent-gold);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--pd-transition-fast);
}

.pd-sidebar-link:hover {
  color: var(--pd-accent-gold-hover);
  text-decoration: underline;
}

.pd-sidebar-body {
  padding: 16px;
}

/* =====================================================
   FORM STYLES
===================================================== */
.pd-form-group {
  margin-bottom: 16px;
}

.pd-form-label {
  display: block;
  font-size: 12px;
  color: var(--pd-text-muted);
  margin-bottom: 6px;
  font-weight: 500;
}

.pd-form-input,
.pd-form-select {
  width: 100%;
  padding: 10px 14px;
  background: var(--pd-bg-tertiary);
  border: 1px solid var(--pd-border-light);
  border-radius: var(--pd-radius-sm);
  color: var(--pd-text-primary);
  font-size: 14px;
  transition: border-color var(--pd-transition-fast);
}

.pd-form-input:focus,
.pd-form-select:focus {
  outline: none;
  border-color: var(--pd-accent-gold);
}

.pd-form-select option {
  background: var(--pd-bg-tertiary);
  color: var(--pd-text-primary);
}

/* =====================================================
   BUTTON STYLES
===================================================== */
.pd-btn {
  padding: 10px 24px;
  border: none;
  border-radius: var(--pd-radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--pd-transition-normal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.pd-btn:hover {
  transform: translateY(-1px);
}

.pd-btn-primary {
  background: linear-gradient(135deg, var(--pd-accent-red) 0%, var(--pd-accent-red-dark) 100%);
  color: white;
}

.pd-btn-primary:hover {
  box-shadow: var(--pd-shadow-red);
}

.pd-btn-secondary {
  background: linear-gradient(135deg, var(--pd-accent-blue) 0%, #2563eb 100%);
  color: white;
}

.pd-btn-secondary:hover {
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.pd-btn-gold {
  background: linear-gradient(135deg, var(--pd-accent-gold) 0%, var(--pd-accent-gold-hover) 100%);
  color: var(--pd-text-dark);
}

.pd-btn-gold:hover {
  box-shadow: var(--pd-shadow-gold);
}

/* =====================================================
   TABLE DATA STYLES
===================================================== */
.pd-data-table {
  width: 100%;
  border-collapse: collapse;
}

.pd-data-table th {
  background: var(--pd-bg-tertiary);
  padding: 14px 16px;
  text-align: left;
  font-size: 12px;
  font-weight: 600;
  color: var(--pd-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--pd-border);
  white-space: nowrap;
}

.pd-data-table td {
  padding: 14px 16px;
  font-size: 14px;
  color: var(--pd-text-primary);
  border-bottom: 1px solid var(--pd-border);
}

.pd-data-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}

.pd-data-table .text-green {
  color: var(--pd-success) !important;
  font-weight: 600;
}

.pd-data-table .text-red {
  color: var(--pd-error) !important;
  font-weight: 600;
}

/* =====================================================
   PAGINATION
===================================================== */
.pd-pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 16px;
  list-style: none;
  margin: 0;
  flex-wrap: wrap;
}

.pd-pagination .page-item .page-link {
  padding: 8px 14px;
  background: var(--pd-bg-tertiary);
  border: 1px solid var(--pd-border-light);
  border-radius: var(--pd-radius-sm);
  color: var(--pd-text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--pd-transition-fast);
  text-decoration: none;
  display: block;
}

.pd-pagination .page-item:hover .page-link,
.pd-pagination .page-item.active .page-link {
  background: var(--pd-accent-gold);
  border-color: var(--pd-accent-gold);
  color: var(--pd-text-dark);
}

/* =====================================================
   FANCY SECTION
===================================================== */
.pd-fancy-section {
  background: var(--pd-bg-secondary);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-md);
  margin-top: 12px;
  overflow: hidden;
}

.pd-fancy-header {
  background: linear-gradient(135deg, var(--pd-accent-purple) 0%, #5b21b6 100%);
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pd-fancy-title {
  font-size: 14px;
  font-weight: 600;
  color: white;
  margin: 0;
}

.pd-fancy-tabs {
  display: flex;
  gap: 8px;
  background: var(--pd-bg-tertiary);
  padding: 8px;
  border-bottom: 1px solid var(--pd-border);
  overflow-x: auto;
}

.pd-fancy-tab {
  padding: 8px 16px;
  background: var(--pd-bg-secondary);
  border: 1px solid var(--pd-border);
  border-radius: var(--pd-radius-sm);
  color: var(--pd-text-secondary);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--pd-transition-fast);
}

.pd-fancy-tab:hover,
.pd-fancy-tab.active {
  background: linear-gradient(135deg, var(--pd-accent-purple) 0%, #5b21b6 100%);
  border-color: var(--pd-accent-purple);
  color: white;
}

/* =====================================================
   CASINO CARDS
===================================================== */
.pd-casino-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.pd-casino-card {
  position: relative;
  border-radius: var(--pd-radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--pd-transition-normal);
  aspect-ratio: 1;
  border: 2px solid transparent;
}

.pd-casino-card:hover {
  border-color: var(--pd-accent-gold);
  transform: scale(1.02);
  box-shadow: var(--pd-shadow-gold);
}

.pd-casino-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-casino-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
  padding: 12px;
}

.pd-casino-card-title {
  font-size: 12px;
  font-weight: 600;
  color: white;
  margin: 0;
}

/* Mobile Casino Grid */
@media (max-width: 768px) {
  .pd-casino-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .pd-casino-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =====================================================
   MODAL STYLES
===================================================== */
.pd-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

.pd-modal {
  background: var(--pd-bg-secondary);
  border: 1px solid var(--pd-border-light);
  border-radius: var(--pd-radius-lg);
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
}

.pd-modal-header {
  background: var(--pd-bg-tertiary);
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--pd-border);
}

.pd-modal-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--pd-text-primary);
  margin: 0;
}

.pd-modal-close {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: var(--pd-radius-sm);
  padding: 8px 12px;
  color: var(--pd-text-primary);
  cursor: pointer;
  transition: all var(--pd-transition-fast);
}

.pd-modal-close:hover {
  background: var(--pd-error);
}

.pd-modal-body {
  padding: 20px;
  max-height: calc(90vh - 80px);
  overflow-y: auto;
}

/* =====================================================
   SCROLLBAR STYLES
===================================================== */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--pd-bg-secondary);
}

::-webkit-scrollbar-thumb {
  background: #3f3f46;
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: #52525b;
}

/* =====================================================
   UTILITY CLASSES
===================================================== */
.pd-text-gold { color: var(--pd-accent-gold) !important; }
.pd-text-green { color: var(--pd-success) !important; }
.pd-text-red { color: var(--pd-error) !important; }
.pd-text-blue { color: var(--pd-accent-blue) !important; }
.pd-text-muted { color: var(--pd-text-muted) !important; }

.pd-bg-primary { background: var(--pd-bg-primary) !important; }
.pd-bg-secondary { background: var(--pd-bg-secondary) !important; }
.pd-bg-tertiary { background: var(--pd-bg-tertiary) !important; }

.pd-rounded-sm { border-radius: var(--pd-radius-sm) !important; }
.pd-rounded-md { border-radius: var(--pd-radius-md) !important; }
.pd-rounded-lg { border-radius: var(--pd-radius-lg) !important; }

.pd-shadow-sm { box-shadow: var(--pd-shadow-sm) !important; }
.pd-shadow-md { box-shadow: var(--pd-shadow-md) !important; }
.pd-shadow-lg { box-shadow: var(--pd-shadow-lg) !important; }

/* =====================================================
   ANIMATION KEYFRAMES
===================================================== */
@keyframes pd-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes pd-pulse-scale {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.05); }
}

@keyframes pd-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes pd-slide-in-right {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

.pd-animate-fade-in {
  animation: pd-fade-in 300ms ease forwards;
}

.pd-animate-slide-in {
  animation: pd-slide-in-right 300ms ease forwards;
}

/* =====================================================
   NO DATA / LOADING STATES
===================================================== */
.pd-empty-state {
  padding: 60px 20px;
  text-align: center;
  color: var(--pd-text-muted);
}

.pd-empty-state i {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.pd-empty-state p {
  margin: 0;
  font-size: 14px;
}

.pd-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  color: var(--pd-text-muted);
}

.pd-loading i {
  font-size: 32px;
  margin-bottom: 12px;
  animation: pd-pulse 1s infinite;
}

/* =====================================================
   PLACE BET BOX STYLES
===================================================== */
.backdrop-custom {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 99;
}

.place-bet {
  background: var(--pd-bg-secondary) !important;
  border: 2px solid var(--pd-accent-gold) !important;
  border-radius: var(--pd-radius-md) !important;
  margin-bottom: 12px !important;
  box-shadow: var(--pd-shadow-gold) !important;
  z-index: 100 !important;
  position: relative !important;
}

.place-bet .card-header {
  background: linear-gradient(135deg, var(--pd-bg-tertiary) 0%, #2a2a3a 100%) !important;
  border-bottom: 1px solid var(--pd-border-light) !important;
  padding: 12px 16px !important;
  border-radius: var(--pd-radius-md) var(--pd-radius-md) 0 0 !important;
}

.place-bet .card-header .card-title {
  color: var(--pd-accent-gold) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
}

.place-bet .card-header span:last-child {
  cursor: pointer;
  color: var(--pd-text-muted);
  font-size: 18px;
  transition: color var(--pd-transition-fast);
}

.place-bet .card-header span:last-child:hover {
  color: var(--pd-error);
}

.place-bet .table-responsive {
  background: var(--pd-bg-secondary) !important;
}

.place-bet .table-responsive.back {
  border-top: 3px solid var(--pd-back);
}

.place-bet .table-responsive.lay {
  border-top: 3px solid var(--pd-lay);
}

.place-bet .coupon-table {
  background: var(--pd-bg-secondary) !important;
  margin: 0 !important;
}

.place-bet .coupon-table th {
  background: var(--pd-bg-tertiary) !important;
  color: var(--pd-text-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  border: none !important;
  padding: 10px 12px !important;
}

.place-bet .coupon-table td {
  background: var(--pd-bg-secondary) !important;
  color: var(--pd-text-primary) !important;
  border: none !important;
  font-size: 13px !important;
  padding: 10px 12px !important;
  vertical-align: middle !important;
}

.place-bet .coupon-table .text-danger {
  color: var(--pd-error) !important;
  cursor: pointer;
  margin-right: 8px;
}

.place-bet .bet-odds .form-group {
  display: flex;
  align-items: center;
  gap: 4px;
}

.place-bet .bet-odds .amountint {
  background: var(--pd-bg-tertiary) !important;
  border: 1px solid var(--pd-border-light) !important;
  color: var(--pd-text-primary) !important;
  border-radius: var(--pd-radius-sm) !important;
  padding: 6px 8px !important;
  font-family: var(--pd-font-mono) !important;
  font-weight: 600 !important;
}

.place-bet .spinner-buttons {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.place-bet .spinner-buttons .btn {
  padding: 2px 8px !important;
  background: var(--pd-bg-tertiary) !important;
  border: 1px solid var(--pd-border-light) !important;
  color: var(--pd-text-primary) !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

.place-bet .spinner-buttons .btn:hover {
  background: var(--pd-accent-gold) !important;
  color: var(--pd-text-dark) !important;
}

.place-bet .bet-stakes input {
  background: var(--pd-bg-tertiary) !important;
  border: 1px solid var(--pd-border-light) !important;
  color: var(--pd-text-primary) !important;
  border-radius: var(--pd-radius-sm) !important;
  padding: 8px 12px !important;
  font-family: var(--pd-font-mono) !important;
  font-weight: 600 !important;
  width: 100% !important;
}

.place-bet .bet-stakes input:focus {
  border-color: var(--pd-accent-gold) !important;
  outline: none !important;
}

.place-bet .bet-profit {
  color: var(--pd-success) !important;
  font-weight: 700 !important;
  font-family: var(--pd-font-mono) !important;
}

.place-bet .value-buttons {
  background: var(--pd-bg-tertiary) !important;
}

.place-bet .value-buttons button {
  background: var(--pd-bg-secondary) !important;
  border: 1px solid var(--pd-border-light) !important;
  color: var(--pd-text-primary) !important;
  border-radius: var(--pd-radius-sm) !important;
  font-size: 12px !important;
  padding: 6px 10px !important;
  transition: all var(--pd-transition-fast) !important;
  margin: 2px !important;
}

.place-bet .value-buttons button:hover {
  background: var(--pd-bg-hover) !important;
  border-color: var(--pd-accent-gold) !important;
}

.place-bet .bet-button-main {
  display: flex;
  gap: 8px;
  padding: 12px 16px;
  background: var(--pd-bg-tertiary);
  border-top: 1px solid var(--pd-border);
}

.place-bet .bet-button-main .btn-danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%) !important;
  border: none !important;
  font-weight: 600 !important;
}

.place-bet .bet-button-main .btn-success {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important;
  border: none !important;
  font-weight: 600 !important;
}

.place-bet .bet-button-main .btn-secondary {
  background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%) !important;
  border: none !important;
}

/* =====================================================
   SUSPENDED OVERLAY - ONLY ON ODDS BOXES
===================================================== */
.suspended-odds-overlay {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(193, 9, 48, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  z-index: 5;
  border-radius: var(--pd-radius-sm);
}

/* =====================================================
   FANCY MARKET STYLES
===================================================== */
.fancy-market {
  background: var(--pd-bg-primary);
}

.fancy-market .table-header {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: var(--pd-bg-tertiary);
  border-bottom: 1px solid var(--pd-border);
}

.fancy-market .table-header .country-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--pd-text-primary);
}

.fancy-market .table-header .box-1,
.fancy-market .table-header .box-2 {
  width: 60px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--pd-text-muted);
}

.fancy-market .table-row {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  background: var(--pd-bg-secondary);
  border-bottom: 1px solid var(--pd-border);
}

.fancy-market .table-row:hover {
  background: var(--pd-bg-hover);
}

.fancy-market .table-row .nation-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: var(--pd-text-primary);
}

.fancy-market .table-row .pnl {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--pd-text-muted);
  margin-left: 8px;
}

.fancy-market .table-row .pnl.positive {
  color: var(--pd-accent-green);
}

.fancy-market .table-row .pnl.negative {
  color: #ef4444;
}

/* Fancy Boxes - No (Pink) and Yes (Blue) */
.fancy-market .box-1.lay,
.fancy-market .box-2.lay {
  width: 60px !important;
  height: 40px !important;
  background: linear-gradient(180deg, var(--pd-lay) 0%, var(--pd-lay-dark) 100%) !important;
  border-radius: 4px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 150ms ease !important;
  margin: 0 2px !important;
}

.fancy-market .box-1.back,
.fancy-market .box-2.back {
  width: 60px !important;
  height: 40px !important;
  background: linear-gradient(180deg, var(--pd-back) 0%, var(--pd-back-dark) 100%) !important;
  border-radius: 4px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 150ms ease !important;
  margin: 0 2px !important;
}

.fancy-market .box-1 span,
.fancy-market .box-2 span {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--pd-text-dark) !important;
  line-height: 1.2 !important;
  font-family: 'JetBrains Mono', monospace !important;
}

.fancy-market .box-1 span:last-child,
.fancy-market .box-2 span:last-child {
  font-size: 10px !important;
  font-weight: 500 !important;
  opacity: 0.8;
}

.fancy-market .box-1:hover,
.fancy-market .box-2:hover {
  transform: scale(1.03);
}

/* Suspended Fancy */
.fancy-market .suspended {
  position: relative;
}

.fancy-market .suspended::after {
  content: 'SUSPENDED';
  position: absolute;
  inset: 0;
  background: rgba(193, 9, 48, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1px;
  border-radius: 4px;
}

/* Mobile Fancy */
@media (max-width: 768px) {
  .fancy-market .table-header {
    padding: 6px 10px;
  }
  
  .fancy-market .table-header .country-name {
    font-size: 12px;
  }
  
  .fancy-market .table-header .box-1,
  .fancy-market .table-header .box-2 {
    width: 50px;
    font-size: 10px;
  }
  
  .fancy-market .table-row {
    padding: 6px 10px;
  }
  
  .fancy-market .table-row .nation-name {
    font-size: 12px;
  }
  
  .fancy-market .box-1.lay,
  .fancy-market .box-2.lay,
  .fancy-market .box-1.back,
  .fancy-market .box-2.back {
    width: 50px !important;
    height: 36px !important;
  }
  
  .fancy-market .box-1 span,
  .fancy-market .box-2 span {
    font-size: 11px !important;
  }
  
  .fancy-market .box-1 span:last-child,
  .fancy-market .box-2 span:last-child {
    display: none !important;
  }
}