/* General Styles */
  body {
      background-color: #121212;
      /* Dark background */
      color: #e0e0e0;
      /* Light text for readability */
      font-family: 'Roboto', Arial, sans-serif;
      margin: 0;
      padding: 0;
  }

  /* Hide the radio button */
  input[type='radio'].participant-radio {
      display: none;
  }

  /* Ensure the card is relatively positioned to allow absolute positioning of the checkmark */
  .card {
      position: relative;
  }

  /* The checkmark box in the top-right corner */
  .checkmark {
      position: absolute;
      top: 10px;
      right: 10px;
      width: 24px;
      height: 24px;
      background-color: white;
      border-radius: 50%;
      border: 2px solid #007bff;
      /* Border color */
      display: flex;
      justify-content: center;
      align-items: center;
      visibility: hidden;
      /* Initially hidden */
  }

  /* When the radio button is checked, show the checkmark */
  input[type='radio']:checked+.checkmark {
      visibility: visible;
      background-color: #28a745;
      /* Green background when checked */
      border-color: #28a745;
      /* Change border to green */
  }

  /* Checkmark icon (check) inside the circle */
  .checkmark::before {
      content: '\2713';
      /* Unicode for checkmark */
      font-size: 16px;
      color: white;
  }

  /* Style the label to make the radio button look nice */
  label.form-check-label {
      cursor: pointer;
  }

  h1,
  h3 {
      color: #ffffff;
      /* White for headings */
      text-align: center;
  }

  .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
  }

  .modal {
      z-index: 999999999;
      /* Bootstrap's default modal z-index */
  }


  /* Card Styles */
  .card {
      background-color: #1e1e1e;
      /* Slightly lighter black for cards */
      border: 1px solid #333333;
      /* Border to separate cards */
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
      /* Subtle shadow */
      color: #e0e0e0;
      transition: transform 0.3s ease, box-shadow 0.3s ease;
      will-change: transform, box-shadow;
      min-height: 495px;
      /* Tell the browser which properties will change */
  }

  .card:hover {
      transform: scale(1.03);
      /* Slight zoom effect */
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.7);
      /* Enhance shadow on hover */
  }

  /* Optional: Add a delay to avoid flickering on fast mouse movements */
  .card {
      transition-delay: 0s;
  }

  .card img {
      border-top-left-radius: 8px;
      border-top-right-radius: 8px;
      width: 100%;
      max-height: 360px;
      object-fit: scale-down;
      /* Ensure image fits nicely */
  }

  .card-title {
      font-size: 1.2rem;
      font-weight: bold;
      color: #ffcc00;
      /* Golden highlight for names */
      margin-bottom: 10px;
  }

  .card-text {
      font-size: 0.9rem;
      color: #bbbbbb;
      /* Subtle gray for descriptions */
  }

  /* Radio Button Styles */
  .form-check-input {
      accent-color: #ffcc00;
      /* Golden accent for radio buttons */
      width: 20px;
      height: 20px;
      cursor: pointer;
  }

  .form-check-label {
      font-size: 0.95rem;
      margin-left: 8px;
  }

  /* Validation Message */
  #error-message {
      background-color: #ff4444;
      /* Red background for error messages */
      color: #ffffff;
      font-weight: bold;
      border-radius: 5px;
      padding: 10px;
      text-align: center;
  }

  /* Button Styles */
  #submit-vote {
      background-color: #ffcc00;
      /* Golden button */
      color: #121212;
      /* Dark text for contrast */
      font-weight: bold;
      border: none;
      border-radius: 5px;
      padding: 10px 20px;
      cursor: pointer;
      transition: background-color 0.3s, transform 0.3s;
  }

  #submit-vote:hover {
      background-color: #ffaa00;
      /* Slightly brighter on hover */
      transform: scale(1.05);
      /* Slight zoom effect */
  }

  /* Grid Layout */
  .row {
      margin-top: 20px;
  }

  .col-md-4 {
      margin-bottom: 20px;
  }

  /* Scrollbar (Optional) */
  ::-webkit-scrollbar {
      width: 10px;
  }

  ::-webkit-scrollbar-track {
      background: #1e1e1e;
      /* Track background */
  }

  ::-webkit-scrollbar-thumb {
      background: #333333;
      /* Thumb color */
      border-radius: 5px;
  }

  ::-webkit-scrollbar-thumb:hover {
      background: #555555;
      /* Highlight on hover */
  }

  /* Progress Container */
  #progress-container {
      display: flex;
      align-items: center;
      justify-content: center;
      position: sticky;
      bottom: 0;
      z-index: 1000;
      background-color: #121212;
      /* Matches the dark theme */
      padding: 10px 20px;
      box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.5);
      /* Subtle shadow for separation */
  }

  /* Progress Bar Container */
  #progress-bar-container {
      flex-grow: 1;
      margin-right: 20px;
      background-color: #333;
      border-radius: 10px;
      height: 30px;
      overflow: hidden;
  }

  /* Progress Bar */
  #progress-bar {
      background-color: #ffcc00;
      height: 100%;
      width: 0;
      text-align: center;
      line-height: 30px;
      color: #121212;
      font-weight: bold;
      border-radius: 10px;
      transition: width 0.3s ease-in-out;
  }

  /* Submit Button */
  #submit-vote {
      background-color: #ffcc00;
      color: #121212;
      font-weight: bold;
      border: none;
      border-radius: 5px;
      padding: 10px 20px;
      cursor: pointer;
      transition: background-color 0.3s, transform 0.3s;
      white-space: nowrap;
  }

  #submit-vote:hover {
      background-color: #ffaa00;
      transform: scale(1.05);
  }

  #submit-vote:disabled {
      background-color: #555555;
      color: #aaaaaa;
      cursor: not-allowed;
  }

  img.responsive {
      width: 100%;
      height: auto;
  }

  img.max-responsive {
      max-width: 100%;
      height: auto;
  }

  img.max-responsive-centered {
      max-width: 100%;
      height: auto;
      margin: 0 auto;
      display: block;
  }

  .seccion-home .cover {
      min-height: calc(100vh - 100px);
      height: auto;
      text-align: center;
      padding: 0 30px;
  }

  .seccion-home .cover p {
      font-size: 13px;
      font-family: 'Inter', sans-serif;
  }

  .seccion-home .cover .title {
      font-size: 20px;
  }

  .seccion-home .cover .cruz {
      max-width: 80px;
      width: 100%;
      margin: 0 auto;
      display: block;
  }

  .seccion-home .cover .logo-cover {
      /*max-width: 297px;*/
      width: 100%;
      margin: 24px auto;
  }

  .seccion-home {
      background: url(../images/pasamontanas_claro.webp) -220px center / 500px auto no-repeat, url(../images/pasamontanas_claro.webp) black calc(100% + 260px) center / 500px auto no-repeat;
      background-attachment: fixed;
  }

  .seccion-home.started {
      background: url(../images/bg.webp) no-repeat center right / contain;
      background-attachment: fixed;
  }

  /* Full Page Cover Styling */
  .cover {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      min-height: 100vh;
      color: #fff;
      /* Light text for contrast */
      text-align: center;
      padding: 20px;
      position: relative;
      overflow: hidden;
  }

  .cover img {
      max-width: 100%;
      height: auto;
  }

  .cover-content {
      z-index: 10;
      max-width: 800px;
  }

  .text-center {
      font-size: 2rem !important;
      line-height: 1.5;
      font-weight: bold;
      margin: 10px 0;
  }

  .text-manifest {
      font-size: 1.2rem !important;
      line-height: 1.8;
      color: #eaeaea;
      padding: 10px;
  }

  /* Responsive version */
  @media (max-width: 768px) {
      .text-manifest {
          font-size: 1rem !important;
      }

      .text-center {
          font-size: 1.1rem !important;
      }

      .card {
          min-height: 450px;
      }
  }


  /* Button Styling */
  .btn-start {
      background-color: #ffcc00;
      color: #121212;
      font-weight: bold;
      text-transform: uppercase;
      padding: 15px 30px;
      border-radius: 5px;
      font-size: 1.2rem;
      text-decoration: none;
      transition: background-color 0.3s, transform 0.3s;
      display: inline-block;
  }

  .btn-start:hover {
      background-color: #ffaa00;
      transform: scale(1.1);
  }

  /* Cover Animations */
  .animated {
      animation-duration: 1s;
  }

  .rotateIn {
      animation-name: rotateIn;
  }

  .fadeIn {
      animation-name: fadeIn;
  }

  .bounceIn {
      animation-name: bounceIn;
  }

  .tiktok-embed {
      min-height: 400px;
  }

  /* Voting Section Anchor Adjustment */
  #voting-section {
      min-height: 100vh;
      padding: 40px;
      /*background-color: #222;*/
      background-color: rgba(0, 0, 0, 0.5);
      color: #fff;
  }

  .cv {
      /* Vertical center this div */
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      height: 100%;
  }

  .gold {
      background-color: #ffcc00 !important;
      border-color: #ffcc00 !important;
  }

  .category-title {
      text-transform: uppercase;
  }


  /* Keyframes (example animations) */
  @keyframes rotateIn {
      from {
          transform: rotate(-200deg);
          opacity: 0;
      }

      to {
          transform: rotate(0);
          opacity: 1;
      }
  }

  @keyframes fadeIn {
      from {
          opacity: 0;
      }

      to {
          opacity: 1;
      }
  }

  @keyframes bounceIn {
      from {
          transform: scale(0.5);
          opacity: 0;
      }

      to {
          transform: scale(1);
          opacity: 1;
      }
  }