@tailwind base;
@tailwind components;
@tailwind utilities;


@layer base {
  h1 {
    @apply text-[#333333] text-xl font-medium font-lato;
  }

   /* Form Labels */
   label {
    @apply block text-[#333333] font-lato text-sm mb-1;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  textarea {
    @apply w-full px-2 py-1.5 rounded-sm border border-gray-300 font-lato text-sm
          focus:outline-none focus:border-[#210066] focus:ring-1 focus:ring-[#210066];
  }
}

@layer components {
  .btn-primary {
    @apply text-white font-lato px-3.5 py-1.5 bg-[#210066] rounded-[5px] inline-block flex-shrink;
  }
  .dropdown-content-enter {
    @apply transition-all duration-300 ease-out;
  }
  
  .dropdown-content-enter-from {
    @apply max-h-0 opacity-0;
  }
  
  .dropdown-content-enter-to {
    @apply max-h-[500px] opacity-100;
  }

  .transition {
    view-transition-name: purchase-flow;
  }
}


::view-transition-old(purchase-flow) {
  animation: fade-out 0.3s ease-out;
}

::view-transition-new(purchase-flow) {
  animation: fade-in 0.3s ease-out;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-10px); }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */




  .radial-bg {
    background: rgb(27, 15, 90); /* Fallback for older browsers */
    background: radial-gradient(
        circle at 30% 50%, 
        rgb(27, 15, 90) 0%,
        rgb(22, 18, 28) 100%
    );
    min-height: 100vh;
    width: 100%;
    margin: 0;
}

.venue-details p {
  margin-bottom: 10px;
}


.lato-thin {
  font-family: "Lato", serif;
  font-weight: 100;
  font-style: normal;
}

.lato-light {
  font-family: "Lato", serif;
  font-weight: 300;
  font-style: normal;
}

.lato-regular {
  font-family: "Lato", serif;
  font-weight: 400;
  font-style: normal;
}

.lato-bold {
  font-family: "Lato", serif;
  font-weight: 700;
  font-style: normal;
}

.lato-black {
  font-family: "Lato", serif;
  font-weight: 900;
  font-style: normal;
}

.lato-thin-italic {
  font-family: "Lato", serif;
  font-weight: 100;
  font-style: italic;
}

.lato-light-italic {
  font-family: "Lato", serif;
  font-weight: 300;
  font-style: italic;
}

.lato-regular-italic {
  font-family: "Lato", serif;
  font-weight: 400;
  font-style: italic;
}

.lato-bold-italic {
  font-family: "Lato", serif;
  font-weight: 700;
  font-style: italic;
}

.lato-black-italic {
  font-family: "Lato", serif;
  font-weight: 900;
  font-style: italic;
}

/* iOS Safari date input placeholder support */
input[type='date']:invalid:after {
  color: #666;
  content: attr(placeholder);
  position: absolute;
  top: 25%;
  pointer-events: none;
  z-index: 5;
  font-size: 0.875rem;
}

input[type='date']:invalid:focus:after {
  color: transparent;
}

input[type='date']:invalid::-webkit-datetime-edit {
  color: transparent;
}

input[type='date']:valid::-webkit-datetime-edit {
  color: black;
}