@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');

.swal2-confirm {
    background-color: gray !important;
    color: white !important;
}
.swal2-popup {
    background-color: black !important;
    border: 2px solid white !important; 
    color: white;
}

body {
    background-color: #121212;
    font-family: 'Poppins', sans-serif;
    color: #ffffff;
}

textarea {
  resize: none;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #ffffff #222; /* thumb | track */
}

textarea::-webkit-scrollbar {
  width: 10px;
}

textarea::-webkit-scrollbar-track {
  background: #222;
}

textarea::-webkit-scrollbar-thumb {
  background-color: #444;
}

textarea::-webkit-scrollbar-thumb:hover {
  background-color: #666;
}

.block {
    width: 100%;
}

.black-vatican,
.black-vatican:hover,
.black-vatican:active,
.black-vatican:focus {
    border-color: #ffffff;
    background-color: #121212;
    color: #ffffff;
}

.card {
    background-color: #121212;
    box-shadow: 0 0 5px #ffffff;
    border-color: #ffffff;
}

.px-1 {
    margin-top: auto;
}

#cards {
    background-color: #121212;
    color: #ffffff;
    justify-content: center;
    font-family: 'Roboto Mono', monospace;
    text-align: center;
    font-size: .9em;
}

img {
    width: 60%;
    max-width: 60%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
    filter: grayscale(100%);
}

#counter {
    font-size: 80%;
}

.btn-outline-light,
.btn-outline-light:hover {
    background-color: #121212;
    color: #ffffff;
    border: 1px solid #ffffff;
}

#cvv-show-btn,
#ccn-show-btn,
#dead-show-btn {
    font-family: 'Roboto Mono', monospace;
}

#cvv-clear-btn,
#ccn-clear-btn,
#dead-clear-btn {
    font-family: 'Roboto Mono', monospace;
    margin-right: 5px;
}

.material-symbols-outlined {
    vertical-align: top;
}

#cvv-div,
#ccn-div,
#dead-div {
    font-family: 'Roboto Mono', monospace;
    font-size: 80%;
}

.badge {
    color: white;
    border: 1px solid #ffffff;
    background-color: transparent;
    font-size: 90%;
}

.float-right {
    float: right;
}

  .slider-container {
      display: flex;
      align-items: center;
      width: 100%;
      max-width: 150px;
      flex-shrink: 1;
  }

    input[type="range"] {
      /* ✅ Include standard and vendor-prefixed properties */
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;

      width: 100%;
      height: 7px;
      background: #ccc;
      border-radius: 5px;
      outline: none;
      cursor: pointer;
      margin-right: 10px;
    }

  input[type="range"]::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 20px;
      height: 20px;
      background: #333;
      border-radius: 50%;
      cursor: pointer;
  }

  input[type="range"]::-moz-range-thumb {
      width: 20px;
      height: 20px;
      background: #333;
      border-radius: 50%;
      cursor: pointer;
  }

  #concurrent-value {
      font-weight: bold;
      color: white;
      white-space: nowrap;
  }

.progress-bar-container {
    background-color: #2a2a2a;       /* slightly lighter than full black */
    border-radius: 20px;
    height: 9px;
    width: 98%;
    margin: 5px auto;  
    padding: 1px;                    /* small gaps on both ends */
    box-sizing: border-box;
    border: 1px solid #bdbcbc;          /* faint outline for visibility */
}

.progress-bar {
    background: linear-gradient(90deg, #acefac, #33f433);
    height: 100%;
    width: 100%;
    border-radius: 20px;
    transition: width 0.4s ease-in-out;
    box-shadow: 0 0 6px rgba(125, 255, 125, 0.3);
}


.textarea-container {
    display: flex;
    position: relative;
}

.line-numbers {
    padding: 5px;
    background-color: #333;
    color: #ccc;
    text-align: right;
    user-select: none;
    font-family: monospace;
    overflow: hidden;
    border-right: 1px solid #555;
    height: 250px;
    box-sizing: border-box;
}

#lineNumbers {
    min-width: 25px;
}

textarea#modalInput {
    width: 100%;
    font-family: monospace;
    padding-left: 10px;
    background-color: transparent;
    height: 250px;
    box-sizing: border-box;
    overflow-x: auto; 
    overflow-y: auto; 
    white-space: pre; 
    word-wrap: normal;
}

.textarea-container {
    position: relative;
    flex-grow: 1;
}

#forwarderResult {
    white-space: pre-line;
    word-break: break-all;
    text-align: left;
    padding: 10px;
    background-color: rgba(0,0,0,0.2);
    border-radius: 5px;
}

/* ========================= */
/* NEW HEADER ALIGNMENT FIX  */
/* ========================= */

/* Visibility button: fixed size, perfectly centered */
.header-icon-btn {
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Keep icon centered inside the button */
.header-icon-btn .material-symbols-outlined {
    line-height: 1;
}

/* On very small screens, let slider wrap to its own line */
@media (max-width: 576px) {
    .header-slider {
        width: 100%;
        margin: 8px 0;
    }
}
/* =======================
   SELECT2 — DARK
   ======================= */
/* 1) Closed control */
.select2-container { width: 100% !important; max-width: 100%; }
.select2-container--default .select2-selection--single{
  background:#121212; border:1px solid #fff; color:#fff;
  border-radius:2px; height:38px; display:flex; align-items:center;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  color:#fff; line-height:38px; padding-left:12px;
  font-family:'Roboto Mono', monospace; font-size:14px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder{color:#bbb;}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:36px; right:8px;}
.select2-container--default.select2-container--focus .select2-selection--single{
  box-shadow:0 0 0 2px rgba(255,255,255,0.25); outline:none;
}

/* 2) Dropdown shell — must NOT scroll */
.select2-dropdown{
  background:#121212; border:1px solid #fff; border-radius:8px;
  box-shadow:0 0 10px rgba(255,255,255,0.15);
  max-width:100vw; overflow:visible !important; /* <- no scrollbar here */
}

/* 3) Search row (always visible) */
.select2-container--open .select2-search--dropdown{display:block !important; padding:8px 8px 4px;}
.select2-container--default .select2-search--dropdown .select2-search__field{
  background:#0f0f0f; border:1px solid #d1d1d1; color:#fff;
  border-radius:5px; padding:8px 10px; min-height:38px;
  font-family:'Roboto Mono', monospace; font-size:14px;
}
.select2-container--default .select2-search--dropdown .select2-search__field::placeholder{color:#aaa;}

/* 4) Results wrapper — also should NOT scroll (avoid double bars) */
.select2-results{max-height:none !important; overflow:visible !important;}

/* 5) Options list — the ONLY scrollable region */
.select2-results__options{
  padding:6px 0;
              /* desktop height */
  overflow-y:auto !important;       /* single scrollbar lives here */
  overflow-x:hidden !important;
  scrollbar-color:#4b4b4b #0f0f0f;  /* Firefox */
}
.select2-results__options::-webkit-scrollbar{width:10px;}
.select2-results__options::-webkit-scrollbar-track{background:#0f0f0f;}
.select2-results__options::-webkit-scrollbar-thumb{background:#2a2a2a; border-radius:6px;}

/* 6) Option rows */
.select2-container--default .select2-results__option{
  background:#121212; color:#fff;
  font-family:'Roboto Mono', monospace; font-size:14px;
  padding:8px 12px; white-space:normal; word-break:break-word;
}

.select2-container--default .select2-results__option--highlighted{background:#2d2d2d; color:#52c41a;}
.select2-container--default .select2-results__option[aria-selected="true"]{background:#494949; color:#fff;}

/* 7)
/* Optgroup label (your “═══ CVV GATEWAYS ═══” style) */
.select2-container--default .select2-results__group {
  color: #ffffff;
  font-weight: 700;
  text-align: center;
  padding: 6px 10px;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  margin: 1px 0;
}
.select2-container--default .select2-results > .select2-results__options {
  max-height: 550px !important;   /* <-- this is forcing the cap */
  overflow-y: auto;
  scroll-behavior: smooth;
}
/* 8) Wrapper to anchor dropdown and prevent width bleed */
.select2-wrap{position:relative; max-width:100%;}
.select2-wrap .select2-dropdown{width:100% !important; max-width:100% !important; box-sizing:border-box;}

/* 9) Responsive heights */
@media (max-width: 991.98px){
  .select2-container--default .select2-selection--single{height:40px;}
  .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:40px; font-size:13.5px;}
  .select2-container--default .select2-search--dropdown .select2-search__field{font-size:13.5px; padding:8px 10px;}
  .select2-container--default .select2-results__option{font-size:13.5px; padding:8px 10px;}
}
@media (max-width: 767.98px){
  .select2-container--default .select2-selection--single{height:44px; border-radius:10px;}
  .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:44px; font-size:13px; padding-left:10px;}
  .select2-container--default .select2-selection--single .select2-selection__arrow{height:42px; right:6px;}
  .select2-container--open .select2-search--dropdown{padding:6px 6px 4px;}
  .select2-container--default .select2-search--dropdown .select2-search__field{font-size:13px; padding:8px 10px;}
  .select2-results__options{max-height:70vh;} /* use more of screen on mobile */
}

/* 1) The outer dropdown & wrapper should NOT scroll */
.select2-container--default .select2-dropdown { overflow: hidden !important; }
.select2-container--default .select2-results   { max-height: none !important; overflow: visible !important; }

/* If Select2 injects inline max-height on the list, neutralize it */
.select2-container--default .select2-results > .select2-results__options[style] {
  max-height: none !important;
  overflow-y: auto !important;
}
/* 3) Kill scrolling on optgroup containers & their nested ULs */
.select2-container--default .select2-results__option[role="group"] { overflow: visible !important; }
.select2-container--default .select2-results__group               { overflow: visible !important; }
.select2-container--default .select2-results__options--nested     { max-height: none !important; overflow: visible !important; }

/* Keep your result box format exactly the same */
#checkResult.border-box {
  border-radius: 5px;
  padding: 10px;
  min-height: 80px;
  background-color: #111;
  text-align: left;       /* 👈 ensures left-aligned content */
  color: white;
  transition: border-color 0.5s ease, box-shadow 0.3s ease;
}

/* ✅ Green Glow for Approved */
.glow-green {
  animation: greenPulse 1s ease-in-out infinite alternate;
}

@keyframes greenPulse {
  0% { box-shadow: 0 0 5px #00ff00, 0 0 10px #00ff00; }
  100% { box-shadow: 0 0 15px #00ff00, 0 0 25px #00ff00; }
}

/* ❌ Red Glow for Rejected */
.glow-red {
  animation: redPulse 1s ease-in-out infinite alternate;
}

@keyframes redPulse {
  0% { box-shadow: 0 0 5px #ff0000, 0 0 10px #ff0000; }
  100% { box-shadow: 0 0 15px #ff0000, 0 0 25px #ff0000; }
}

  /* Responsive font and padding adjustments */
  @media (max-width: 768px) {
    #lista {
      font-size: 14px;
      padding: 0.5rem;
    }
  }

  @media (min-width: 769px) and (max-width: 1200px) {
    #lista {
      font-size: 15px;
    }
  }

  @media (min-width: 1201px) {
    #lista {
      font-size: 16px;
    }
  }

  .responsive-text {
    font-size: clamp(11px, 4vw, 17px);
  }

  .responsive-icon {
    font-size: clamp(20px, 5vw, 17px);
    vertical-align: middle;
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease;
  }

.cvv-toggle-wrap {
  display: inline-block;
  vertical-align: middle;
  background: #0b0b0b;
  border-left: 1px solid #ffffff;
  padding: 4px 10px;
  white-space: nowrap;
}

.cvv-switch {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 46px;
  height: 20px;
  margin: 0 6px 0 0;
  cursor: pointer;
}

.cvv-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
}

.cvv-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #111111;
  border: 1px solid #ffffff;
  border-radius: 20px;
  overflow: hidden;
  color: #ffffff;
  font-size: 7px;
  font-weight: 600;
  line-height: 18px;
  text-align: center;
  -webkit-transition: background 0.2s ease;
  transition: background 0.2s ease;
}

.cvv-slider:before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: #ffffff;
  border-radius: 50%;
  z-index: 2;
  -webkit-transition: left 0.2s ease;
  transition: left 0.2s ease;
}

.cvv-text {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  line-height: 18px;
  z-index: 1;
  pointer-events: none;
}

.cvv-on {
  left: 0;
  opacity: 1;
  filter: alpha(opacity=100);
}

.cvv-off {
  right: 0;
  opacity: 0.55;
  filter: alpha(opacity=55);
}

.cvv-switch input:checked + .cvv-slider {
  background: #111111;
}

.cvv-switch input:checked + .cvv-slider:before {
  left: 28px;
}

.cvv-switch input:checked + .cvv-slider .cvv-on {
  opacity: 0.45;
  filter: alpha(opacity=45);
}

.cvv-switch input:checked + .cvv-slider .cvv-off {
  opacity: 1;
  filter: alpha(opacity=100);
}

.cvv-switch input:focus + .cvv-slider,
.cvv-switch input:active + .cvv-slider {
  border-color: #ffffff;
}

.cvv-toggle-label {
  display: inline-block;
  vertical-align: middle;
  font-size: 12px;
  line-height: 20px;
  white-space: nowrap;
  cursor: pointer;
  color: #f5f5f5;
  margin: 0;
  padding: 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

/* Better fit on smaller screens */
@media (max-width: 480px) {
  .cvv-toggle-wrap {
    padding: 4px 8px;
  }

  .cvv-switch {
    width: 42px;
    height: 18px;
    margin-right: 5px;
  }

  .cvv-slider {
    font-size: 6px;
    line-height: 16px;
    border-radius: 18px;
  }

  .cvv-slider:before {
    width: 12px;
    height: 12px;
    top: 2px;
    left: 2px;
  }

  .cvv-switch input:checked + .cvv-slider:before {
    left: 26px;
  }

  .cvv-toggle-label {
    font-size: 11px;
    line-height: 18px;
  }
}