.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0, 0, 0, 0.2);
  outline: none !important;
}

.modal-content {
  background-color: #fefefe;
  margin: 5% auto; /* 5% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 90%; /* Responsive width */
  max-width: 500px; /* Maximum width */
  max-height: 80vh; /* Maximum height */
  overflow-y: auto; /* Enable vertical scroll */
  outline: none !important;
  border: 0;
}

/* Style for the scrollbar */
.modal-content::-webkit-scrollbar {
  width: 5px; /* width of the entire scrollbar */
}

.modal-content::-webkit-scrollbar-track {
  background: transparent; /* color of the tracking area */
}

.modal-content::-webkit-scrollbar-thumb {
  background-color: #ffd518; /* color of the scroll thumb */
  border-radius: 10px; /* roundness of the scroll thumb */
  border: none; /* creates padding around scroll thumb */
}

/* Optional: Style for scrollbar on hover */
.modal-content::-webkit-scrollbar-thumb:hover {
  background-color: #d6009e; /* slightly darker shade when hovered */
}

.close-button {
  position: absolute; /* Position the close button absolutely within its parent */
  font-weight: bold;
  right: 6px;
  top: 32px;
  color: #aaa;
  font-size: 38px;
  cursor: pointer;
}

.close-button:hover,
.close-button:focus {
  color: #888;
  text-decoration: none;
  cursor: pointer;
}

/* ------ check box ----------- */

/* Hide the default checkbox */
.custom-checkbox input[type="checkbox"] {
  visibility: hidden;
  position: absolute;
}

/* Create a custom checkmark/checkbox appearance */
.custom-checkbox .checkmark {
  position: relative;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: transparent;
  border: 2px solid #ffd518;
  cursor: pointer;
}

/* Style the checkmark/indicator */
.custom-checkbox .checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

/* Show the checkmark when checked */
.custom-checkbox input[type="checkbox"]:checked + .checkmark:after {
  display: block;
}

/* When the checkbox is focused, add a pink outline */
.custom-checkbox input[type="checkbox"]:focus + .checkmark {
  outline: #ffd518 auto 5px;
}

/* Style the label text and layout */
.custom-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: normal;
}

.custom-checkbox label {
  margin-bottom: 0;
}

/* Fallback for browsers that do not support :focus-visible */
.custom-checkbox input[type="checkbox"]:focus:not(:focus-visible) + .checkmark {
  outline: none;
}

/* Only show outline when keyboard navigating */
.custom-checkbox input[type="checkbox"]:focus-visible + .checkmark {
  outline: #ffd518 auto 5px;
}

.modal .error {
  margin-top: -20px !important;
  font-weight: normal;
}

/* ----------------- TICKET MODEL STYLE ----------- */

/* Styles for ticket modal specifically */
.ticket-barcode {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  background-color: #fefefe;
}

.ticket-label {
  color: #696969;
  font-family: Poppins, sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 24px;
}
.ticket-value {
  color: #fefefe;
  font-family: Poppins, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 150%;
}



/* ----------- RESPONSIVE STYLE WORK */

/* Additional mobile-specific styles */
@media (max-width: 767px) {
  .modal-content {
    margin: 10% auto;
    width: 95%;
  }

  .ticket-barcode img {
    width: 100%;
    height: auto;
  }
}

/* Ensure labels and values stack on smaller screens */
@media (max-width: 991px) {
  .ticket-label,
  .ticket-value {
    display: block; /* stack vertically */
  }
}

/* Base styles for h2 */
.modal h2 {
  font-size: 2rem; /* Default font size for large screens */
  line-height: 1.2; /* Adjust line height to ensure it looks good */
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px) {
  .modal h2 {
    font-size: 1.75rem; /* Slightly smaller font size for medium screens */
  }
}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767px) {
  .modal h2 {
    font-size: 1.5rem; /* Even smaller font size for small screens */
  }
}

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575px) {
  .modal h2 {
    font-size: 1.25rem; /* Smallest font size for extra small screens */
  }
}