/* Custom CSS for lottery ticket printing system */
/* This file is now used alongside Tailwind CSS */

/* Legacy support for print functionality */
.lottery-number {
  display: inline-block;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  margin: 5px;
  border-radius: 50%;
}

/* Print-specific styles */
@media print {
  .no-print {
    display: none !important;
  }
  
  body {
    background: white !important;
    color: black !important;
  }
  
  .bg-gray-900,
  .bg-gray-800 {
    background: white !important;
  }
  
  .text-white {
    color: black !important;
  }
  
  .border-gray-700 {
    border-color: #ccc !important;
  }
}

/* Lottery brand colors - used for gradients and highlights */
:root {
  --lotofacil: #930089;
  --megasena: #209869;
  --quina: #260085;
  --lotomania: #f78100;
  --diadesorte: #cb852b;
  --milionaria: #2E3078;
  --duplasena: #BF194E;
  --timemania: #FFF600;
  --primary: #53398B;
}

/* Custom scrollbar for dark theme */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #374151;
}

::-webkit-scrollbar-thumb {
  background: #6B7280;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #9CA3AF;
}

/* Smooth transitions for all interactive elements */
* {
  transition: all 0.2s ease-in-out;
}

/* Focus states for accessibility */
button:focus,
input:focus,
a:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ----- Visual adjustments to match the hero/cards screenshot ----- */
/* Dark gradient background used across other pages */
.bg-dark-bg {
  background: linear-gradient(180deg,#07142a 0%, #0b1220 45%, #0c1228 100%);
  background-attachment: fixed;
}

.text-light {
  color: #e6eef9;
}

.hero-section h1 {
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.02;
  text-shadow: 0 10px 30px rgba(8, 11, 24, 0.45);
}

/* Cards: translucent panel with subtle border and inner glow */
.rounded-2xl {
  border-radius: 1rem;
}

.lottery-btn {
  height: 72px;
  min-width: 72px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  border-radius: 0.75rem;
  box-shadow: 0 8px 30px rgba(8,12,24,0.55), inset 0 -6px 18px rgba(0,0,0,0.12);
  transition: transform 180ms ease, box-shadow 180ms ease;
  text-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.lottery-btn:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(8,12,24,0.65), inset 0 -6px 20px rgba(0,0,0,0.12);
}

/* Make CTA buttons a bit larger and with soft glow */

/* Footer small highlight (warning box) appearance used in screenshot */
.footer .download-links a {
  transition: transform 160ms ease;
}
.download-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

/* Back to top appearance (visible when JS toggles hidden class) */
#backToTop {
  transition: transform 160ms ease, opacity 160ms ease;
}

/* Modal content tweaks */
.fixed.inset-0.z-50 .bg-gray-900 {
  background-color: rgba(10,12,20,0.98);
}

/* Small helpers to match fonts and paddings in screenshot */
.hero-subtitle, .hero-section p { color: #b8c6d8; }

/* improve appearance of small badges */
.maintenance-status-badge { padding: 0.25rem 0.5rem; border-radius: 0.5rem; font-weight:600 }

/* Print-friendly tweaks (keeps previous rules) */
@media print {
  a.lottery-btn { box-shadow: none !important; }
}

/* --------------------------------------------------------------------------
   Remove translucency / backdrop blur overrides
   Some views used Tailwind opacity utilities (e.g. bg-gray-700/50) and
   backdrop blur. The user requested to remove the translucent effect so
   we force these utility classes to render as solid backgrounds here.

   We keep the color choices close to the original gray tones.
--------------------------------------------------------------------------- */
/* neutralize small backdrop blur if any instance remains */
.backdrop-blur-sm { backdrop-filter: none !important; }

/* override common semi-transparent utility classes to be opaque */
.bg-gray-700\/50 { background-color: #374151 !important; }
.bg-gray-700\/20 { background-color: #374151 !important; }
.bg-gray-800\/40 { background-color: #1f2937 !important; }
.bg-gray-800\/50 { background-color: #1f2937 !important; }
.bg-gray-900\/60 { background-color: #0b1220 !important; }
.bg-black\/60 { background-color: rgba(0,0,0,0.9) !important; }

/* modal overlays that used semi-transparent blacks (e.g. bg-black/60) */
.absolute.inset-0.bg-black\/60 { background-color: rgba(0,0,0,0.9) !important; }

/* ensure hover/bg transitions still work with opaque backgrounds */
.hover\:bg-gray-700:hover { background-color: #374151 !important; }