/* Styles for the new Cookie Consent Modal */

  /* Overlay that covers the whole screen */
  #cookie-consent-overlays {
    /* Tailwind classes: fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-[9999] opacity-0 invisible transition-opacity duration-500 ease-out */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.75);
    /* bg-black bg-opacity-75 */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    /* z-[9999] */

    /* Animation properties */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
  }

  /* Make overlay visible */
  #cookie-consent-overlays.visible {
    opacity: 1;
    visibility: visible;
    display: flex !important;
  }

  /* The actual cookie consent modal/banner */
  #cookie-consent-modal {
    /* Tailwind classes: bg-gray-800 text-white p-6 rounded-lg shadow-2xl max-w-lg w-11/12 mx-auto transform scale-95 transition-transform duration-500 ease-out */
    background-color: #1f2937;
    /* bg-gray-800 */
    color: #ffffff;
    /* text-white */
    padding: 2.5rem;
    /* p-6 */
    border-radius: 0.5rem;
    /* rounded-lg */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    /* shadow-2xl */
    max-width: 56rem;
    /* max-w-lg (576px) */
    width: 91.666667%;
    /* w-11/12 */
    margin-left: auto;
    /* mx-auto */
    margin-right: auto;
    /* mx-auto */

    /* Animation properties */
    transform: scale(0.95);
    transition: transform 0.5s ease-out;
  }

  /* Make modal scale up when visible */
  #cookie-consent-overlays.visible #cookie-consent-modal {
    transform: scale(1);
  }

  #cookie-consent-modal h3 {
    font-size: 1.25rem;
    /* text-xl */
    font-weight: 700;
    /* font-bold */
    margin-bottom: 1rem;
    /* mb-4 */
    text-align: center;
  }

  #cookie-consent-modal p {
    font-size: 0.875rem;
    /* text-sm */
    text-align: center;
    margin-bottom: 1.5rem;
    /* mb-6 */
  }

  #cookie-consent-modal a {
    text-decoration: underline;
    color: #93c5fd;
    /* hover:text-blue-300 */
    font-weight: 500;
    /* font-medium */
  }

  #cookie-consent-modal .flex {
    display: flex;
    flex-direction: column;
    /* flex-col for mobile */
    gap: 0.75rem;
    /* space-y-3 */
    justify-content: center;
  }

  #cookie-consent-modal button {
    padding: 0.75rem 1.5rem;
    /* px-6 py-3 */
    border-radius: 0.375rem;
    /* rounded-md */
    font-size: 1rem;
    /* text-base */
    font-weight: 600;
    /* font-semibold */
    transition: background-color 0.2s ease-in-out;
    /* transition-colors duration-200 */
    border: none;
    cursor: pointer;
    width: 100%;
    /* w-full */
  }

  #cookie-consent-modal #accept-cookies {
    background-color: #2563eb;
    /* bg-blue-600 */
    color: white;
  }

  #cookie-consent-modal #accept-cookies:hover {
    background-color: #1d4ed8;
    /* hover:bg-blue-700 */
  }

  #cookie-consent-modal #decline-cookies {
    background-color: #4b5563;
    /* bg-gray-600 */
    color: white;
  }

  #cookie-consent-modal #decline-cookies:hover {
    background-color: #374151;
    /* hover:bg-gray-700 */
  }

  /* Responsive adjustments for larger screens */
  @media (min-width: 640px) {

    /* sm: breakpoint */
    #cookie-consent-modal .flex {
      flex-direction: row;
      /* sm:flex-row */
      gap: 1rem;
      /* sm:space-x-4 */
      margin-top: 0;
      /* reset margin-top for row layout */
    }

    #cookie-consent-modal button {
      width: auto;
      /* sm:w-auto */
    }
  }