/*
  The lottowars css stylesheet
*/
/*{
  outline: 1px solid red !important; /* Light red border on every element 
}*/

.plch 
{
width: 70px !important;
height: 70px !important;
max-width: 70px !important;
flex-shrink: 0;
object-fit: contain;
}


/*for readonly fields*/
.rdonly
{
    background-color: lightgrey !important;
}

/*scrollbar for screens where needed*/
.scrollbar 
{
  max-height: 700px;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;
  padding-right: 0.5rem;
}

/*Give text elements lotto wars theme gradient color*/
.gradient-text 
{
  /* Step 1: Apply the background gradient */
  background-image: linear-gradient(to right, red, rgb(255, 208, 0));
  
  /* Step 2: Crop the background to the text boundary (CRITICAL STEP) */
  -webkit-background-clip: text;
  background-clip: text;
  
  /* Step 3: Clear out the native text color completely */
  -webkit-text-fill-color: transparent;
  color: transparent;
  
  /* Step 4: Prevent block elements from extending 100% width */
  display: inline-block;
}


/*class size for all images*/
.ballsize
{
  width: 45px;
  height: 45px;
}

.flatpickr-day.disabled 
{
  background: #f0f0f0;
  color: #aaa;
  text-decoration: line-through;
  cursor: not-allowed;
}

#pop,#popm::backdrop 
{
  background-color: rgba(0, 0, 0, 0); /* Fully transparent backdrop */
  /* or semi-transparent blur effect */
  /* backdrop-filter: blur(5px); */
}

#pop,popm 
{
  background-color: transparent;
}

.opc
{
  opacity:0.3;
}

/*Make images selectable*/
.selectable-img 
{
  transition: all 0.2s ease;
  opacity: 0.8;
  border: 2px solid transparent;
  cursor: pointer;
  border-radius: 50%; /* make it extra round */
}

.selectable-img:hover
{
  opacity: 1;
  transform: scale(1.15);
}

.selectable-img.selected 
{
  opacity: 1;
  border: 4px solid #28a745; /* green when chosen */
  box-shadow: 0 0 15px rgba(40, 167, 69, 0.7);
  transform: scale(1.2);
}



/*--To disable a link --*/
.disabled-link 
{
    pointer-events: none; /* Prevents clicks in modern browsers */
    cursor: default;     /* Changes cursor to standard arrow */
    color: gray;         /* Visually indicates disabled status */
    text-decoration: none; 
}

/*The subtle background for lotto wars*/
body 
{
  position: relative;  /* needed for ::before */
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background-color: #ffffff;  /* your page background color */
}

/* The background image with opacity */
body::before
{
  content: '';
  position: fixed;               /* covers whole page */
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url('/images/fire.webp');
  background-repeat: no-repeat;  /* or repeat if you want tiling */
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  opacity: 0.3;                 /* <<< ADJUST THIS — 0.1 = very faint, 0.3 = stronger */
  pointer-events: none;          /* doesn't block clicks */
  z-index: -1;                   /* behind all content */
}
/*End The subtle background for lotto wars*/

/*End make accordion body transparent*/

/* Rest of your existing styles below... */
.circle
 {
  width: 100px;
  height: 100px;
  background-color: lightgrey;
  border-radius: 50%;
  display: inline-block;
}

    /* Optional: Add spacing between multiple circles */
  .circle + .circle 
  {
    margin-left: 10px;
  }

.bddiv
{
  border: 1px solid black;
  padding: 15px;
  min-height: 50px;
}

/*Font styles for shadow effects on headings*/
.shdw
{
  color: white;
  text-shadow: 1px 1px 2px red, 0 0 25px yellow,0 0 5px red;
}

 /* Define the blinking animation */
.flashing-label
{
  color: red;
  font-weight: bold;
  animation: flash 1s infinite;
}

@keyframes flash
{
 0%   { opacity: 1; }
 50%  { opacity: 0; }
 100% { opacity: 1; }
}

/* Header spesifieke styl */
.logo-container1
{
    width: 100%;
    max-width: 100%;
    padding: 12px 0;
    text-align: center;
    overflow: hidden;
     background: linear-gradient(135deg, #0a2e0a, #1a5f1a); 
}

.logo-container img,#headimg 
{
    width: 100% !important;
    max-width: 1100px !important;   /* Maak dit kleiner */
    height: auto !important;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}

/* Force all images to stay within viewport */
img 
{
  max-width: 100%;
  height: auto;
  display: block;
}

#headimg 
{
  width: 1400px;
  height:200px;
}

/* Prevent text effects from pushing content off screen */
.text-box
{
  overflow-x: hidden;
}

*, *::before, *::after 
{
  box-sizing: border-box;
}

html, body
{
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  width: 100%;
}

/*for uploading of file configuration --upload lotto csv files*/
.upld
{
 border: 2px solid #eeff41;
 border-radius:25px;
 margin: auto;
 margin-bottom:40px;
}

  /*popovergadient*/
.popover
{
  background-image: linear-gradient(to right,red,yellow);
}

/* accordian gradients */
.colscheme
{
   background-image: linear-gradient(to right,red,yellow);
}

.divcolscheme
{
   background: linear-gradient(to right,red,yellow);
}

/* for messages rounded corners */
.radmsg
{
  border-radius:15px;
}

.rounded
{
  border-radius:25px;
}
    
.modal-open .topnavbar-wrapper 
{
     padding-right:17px; /* Noticed that right aligned navbar content got overlapped by the .modal scrollbar  */
}

.font_size
{
 font-size:small;  
}
    
.btn-space 
{
    margin-right: 5px;
}

footer 
{
  text-align: center;
  background-color:black;
  color: white;
  max-width: 100%;
  opacity:0.8;
}

.center 
{
  margin: auto;
  width: 80%;
  border: 3px solid green;
  padding: 10px;
}

.form-control
{
  display:inline-block;
  width:100%;
}

a.icons 
{
  display:inline-block;
  vertical-align:middle;
}

.card 
{
  margin: 0 auto; /* Added */
  float: none; /* Added */
  margin-bottom: 10px; /* Added */
}

.navbar
{
  width:45% !important;
  margin:0px auto;
  /* left:0;
//  right:0; */
  padding:0;
}

@media (max-width: 991.98px)
{
  .navbar
  {
    width:100% !important;
  }
}

.modal-title
{
  width: 37%;
  text-align: center;
}

.rainbow-text
{
  margin-top: 0px;
  margin-bottom: 7px;
  font-family: sans-serif;
  font-size: 1rem;
  background: linear-gradient(to right, #ef5350, #f48fb1, #7e57c2, #2196f3, #26c6da, #43a047, #eeff41, #f9a825, #ff5722);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
} 

.rainbow-head
{
  margin-top: 0px;
  margin-bottom: 7px;
  font-family: sans-serif;
  font-size: 2rem;
  background: linear-gradient(to right, #ef5350, #f48fb1, #7e57c2, #2196f3, #26c6da, #43a047, #eeff41, #f9a825, #ff5722);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
} 

/* ###### footer social media #######*/
.facebook-buttons
 {
    margin: 7px 0 11px;
    /* display: flex; */
    gap: 10px;
    align-items: center;
}

/* For the link version */
.facebook-buttons a
{
    padding: 5px 10px;
    background: #4267B2;
    color: white;
    text-decoration: none;
    border-radius: 3px;
    font-size: 14px;
}

.facebook-buttons a:hover 
{
    background: #365899;
}

/* Social Media Section */
.social-media-section 
{
  margin-bottom: 25px;
}

.social-media-section h3 
{
  color: #ffffff;
  margin-bottom: 15px;
  font-size: 18px;
}

.social-icons
{
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

.social-icon 
{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  color: white;
  font-size: 18px;
  transition: all 0.3s ease;
}

.social-icon:hover 
{
  transform: translateY(-3px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Platform-specific colors */
.social-icon.facebook { background-color: #4267B2; }
.social-icon.twitter { background-color: #1DA1F2; }
.social-icon.instagram 
{ 
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.social-icon.youtube { background-color: #FF0000; }
.social-icon.discord { background-color: #5865F2; }

/* Responsive adjustments */
@media (max-width: 768px) 
{
  .social-icons 
  {
    gap: 10px;
  }
  
  .social-icon
  {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
}

/*for popvoers to work correctly on modal*/
.modal-dialog,
.modal-content,
.modal-body
{
  overflow: visible !important;
  position: relative;
}

.row[data-bs-toggle="popover"]
{
  cursor: pointer;
  background-color: #f8f9fa;
  transition: background-color 0.2s ease;
}

.row[data-bs-toggle="popover"]:hover 
{
  background-color: #e2e6ea;
}