/* 1. Hide the default radio button */
input[type="radio"][id^="cbl"] {
  display: none;
}

/* 2. Style and center the choice label cards */
label {
  border: 2px solid rgba(255, 255, 255, 0.8);
  padding: 10px 15px;
  display: block;
  position: relative;     
  cursor: pointer;
  user-select: none;
  background: rgba(255, 255, 255, 0.85); 
  border-radius: 10px;    
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); 
  transition: all 0.3s ease;
  margin: 0 auto 12px auto; /* Centers the choice card and adds spacing */
  max-width: 550px;         /* Keeps it from stretching too wide */
  width: 90%;               
  box-sizing: border-box;
  font-size: 22px;        /* <--- Add this line (adjust 18px up or down if needed) */

}

label td {
  font-size: 22px;
}

/* 3. Hover effect */
label:hover {
  background: rgba(255, 255, 255, 1);
  border-color: #ffffff;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
}

/* 4. Custom checkmark circle on the right for RTL */
label::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;            
  transform: translateY(-50%) scale(0);
  width: 24px;            
  height: 24px;           
  border: 2px solid #888;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.4); 
  transition: all 0.2s ease-in-out;
}

/* 5. Checked states */
input[type="radio"][id^="cbl"]:checked + label {
  border-color: #28a745;
  background-color: #f4fff5;
}

input[type="radio"][id^="cbl"]:checked + label::before {
  content: "✓";
  background-color: #28a745;
  border-color: #28a745;
  color: white;
  font-size: 18px;        
  font-weight: bold;
  text-align: center;
  width: 24px;            
  height: 24px;  
  line-height: 30px;      
  transform: translateY(-50%) scale(1);
}

/* 6. Center the entire GridView table nicely on the page */
table[id*="GridView1"] {
  margin: 0 auto !important;
  border-collapse: collapse;
  width: 100%;
  max-width: 750px;
}

table[id*="GridView1"] td {
  border-style: none !important;
  text-align: center;
  vertical-align: middle;
  padding: 4px;
}