@import tailwindcss;

@import url('https://fonts.googleapis.com/css2?family=Avenir&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');


@import './tailwind/base_styles.tailwind.css';
@import './tailwind/effects.tailwind.css';
@import './tailwind/layout_styles.tailwind.css';
@import './tailwind/glass_utilities.tailwind.css';
@import './tailwind/glass_components.tailwind.css';
@import './tailwind/text_styles.tailwind.css';
@import './tailwind/input_styles.tailwind.css';
@import './tailwind/animation_styles.tailwind.css';
@import './tailwind/button_utilities.tailwind.css';
@import './tailwind/button_components.tailwind.css';
/*@import './main.css';*/
@import './heading.css';
@import './flatpickr.css';


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


@layer components {
  /* .fade-into-darkness { background: linear-gradient(to bottom, black, rgba(0, 0, 0, 0.69), transparent); } */
  .fade-up-into-darkness { @apply bg-gradient-to-b from-black via-[#000000af] to-transparent; }
  .fade-down-into-darkness { @apply bg-gradient-to-t from-black via-[#000000af] to-transparent; }

  .drink-picture { @apply mx-auto shrink-0 object-contain items-center; }

  /* .drink-card-label { @apply mx-1 pl-1 pr-2 font-medium text-sm white-neon text-left truncate; } */

  .drink-sizes-list { @apply bg-gray-800/80 rounded-2xl p-4 shadow-lg drop-shadow-lg outline outline-1 outline-gray-800 overflow-y-auto; }
  /* .hamburger-menu { @apply bg-gray-800/80 rounded-2xl p-4 shadow-lg drop-shadow-lg outline outline-1 outline-gray-800 overflow-y-auto; } */

  .orders-preparing-container { @apply p-2 rounded-lg shadow-md glass-b; }
  .orders-completed-container { @apply p-2 rounded-lg shadow-md glass-a; }
  .order-container { @apply p-4 rounded-lg shadow-md mb-2 text-gray-300 text-shadow-3 bg-gradient-to-b from-neutral-800/90 to-[#1f1f1f]/80 outline outline-1 outline-[#bc0c89]/50; }
  .order-drinks-container { @apply w-full; }
  .order-drinks-list { @apply justify-start; }
  .order-update-button { @apply btn-primary-style-a hover:btn-primary-style-b rounded flex bottom-0 left-0 right-0 mt-2 py-1 w-full justify-self-stretch; }
}

@layer utilities {
  .tab {
    white-space: nowrap;
    box-shadow: 0 -2px 15px rgba(0, 180, 240, 0.1); 
  }

  .hide-scrollbar {
    scrollbar-width: none;    /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    ::-webkit-scrollbar {     /* Chrome, Safari and Opera */
      display: none;
    }
  }

  .anchored-modal {
    position: absolute;
    z-index: 1001; /* Above the backdrop */
    display: none; /* Initially hidden */
  }

  .full-screen { /* inset: 0; */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .stretch-fill {
    justify-self: stretch;
    @apply min-w-full min-h-full object-fill;
  }

  .dead-center {
    align-self: center;
    justify-self: center;
    align-items: center;
    @apply align-middle content-center place-self-center place-items-center justify-center justify-self-center;
  }

  .unselectable {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
  }

  .drink-picture-container {
    @apply w-[190px] h-[190px] aspect-square pt-4;
    /* @apply flex flex-1 flex-col px-4 py-6 mx-[0.25rem] my-[0.75rem]; */
    /* @apply transition-colors duration-200; */
  }

  .nd-backdrop {
    @apply bg-[linear-gradient(115deg,var(--tw-gradient-stops))] from-[#000000] from-[45%] via-[#ea0ba4] via-[99%] to-[#ea0ba4] sm:bg-[linear-gradient(145deg,var(--tw-gradient-stops))];
    /* @apply bg-gradient-to-tl from-[#ea0ba4] via-black to-black; */
    @apply bg-fixed bg-cover h-full;
  }

  /* .nd-pill-full {
    @apply inline-flex items-center rounded-full ring-1 ring-inset ring-pink-600/45 border border-blue-600/30;
  }
  .nd-pill-left {
    @apply inline-flex items-center rounded-l-full rounded-r-none ps-3 pe-2 bg-pink-900/20 text-xs font-light font-mono text-pink-900/60;
  }
  .nd-pill-mid {
    @apply inline-flex items-center px-2 bg-purple-900/25 text-xs font-normal font-mono text-pink-600/50;
  }
  .nd-pill-right {
    @apply inline-flex items-center rounded-l-none rounded-r-full ps-2 pe-3 bg-indigo-900/30 text-sm font-medium font-serif text-pink-400/60;
  } */
 

  .hamburger-menu { @apply fcol h-[28vh] my-4 px-4 py-2 dark-glass-tile shadow-lg drop-shadow-lg; }

}
/*
These are the styles for the flatpickr calendar

need to change the colors to match the real palette

we can move this to the application.tailwind.css file but its easy to have it here for now while developing

*/

:root {
  --primary-color: #fa4abfab;
  --border-color: #bc0c89;
  --black-color: #111;
  --color-white: #e3e6e9;

  --transition: all 0.3s ease-in-out;

  --glow-primary: 0 0 6px 2px var(--primary-color), inset 0 0 4px 1px var(--primary-color);
  --glow-white: 0 0 6px 2px var(--color-white), inset 0 0 4px 1px var(--color-white);
}

.calendar_label {
  color: var(--color-white);
  font-weight: 600; 
  display: block;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}




.flatpickr-calendar {
  background-color: var(--black-color) !important;
  color: var(--color-white) !important;
  border: 3px solid var(--border-color) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.flatpickr-months,
.flatpickr-month {
  color: var(--color-white) !important;
}

.flatpickr-weekday {
  color: var(--primary-color) !important;
}

.flatpickr-days {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;

  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px 0;
}

.flatpickr-day {
  background-color: transparent !important;
  color: var(--color-white) !important;
  transition: var(--transition);
  border-radius: 0 !important;
}

.flatpickr-day:focus {
  outline: none;
}

.flatpickr-day:hover,
.flatpickr-day:focus {
  outline: none !important;
  box-shadow: var(--glow-primary);
}

.flatpickr-day:hover {
  background-color: transparent !important;
  color: var(--color-white) !important;
  box-shadow: var(--glow-primary);
  border: 1px solid var(--primary-color) !important;
  z-index: 2;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange  {
  background-color: transparent !important;
  color: var(--color-white) !important;
  border: 1px solid var(--primary-color) !important;
  box-shadow: var(--glow-primary) !important;
  z-index: 1;
}

.flatpickr-day.today {
  background-color: var(--border-color) !important;
  color: var(--color-white) !important;
  border: 1px solid var(--color-white) !important;
  box-shadow: var(--glow-white) !important;
  z-index: 1;
}

.flatpickr-time input:hover,
.fltpickr-time input:focus,
.flatpickr-time input::selection,
.flatpickr-time .flatpickr-am-pm:hover {
  background-color: var(--black-color) !important;
  color: var(--primary-color) !important;
  outline: none !important;
  border: none !important;
  transition: var(--transition);
}

.flatpickr-time input,
.flatpickr-time .flatpickr-am-pm {
  background-color: var(--black-color) !important;
  transition: var(--transition);
}
:root {
  --navbar-buffer: 80px;
  --sidebar-width: 120px;
  --sidebar-buffer: 12px;
}

#headingSection {
  /* grid-area: heading; */
  margin: 0;
  display: flex;
  width: auto;
  height: auto;
  overflow: clip;
  box-sizing: border-box;
  /* margin-right: var(--sidebar-buffer); */
  padding-right: var(--sidebar-buffer);
}

.heading-subgrid {
  display: grid;
  grid-template-rows: repeat(3, auto);
  width: auto;
  margin-right: var(--sidebar-buffer);
  overflow: clip;
  box-sizing: border-box;
}
.heading-row {
  display: flex;
  flex-direction: row;
  /*       y     x */
  padding: 0.2em 0;
  align-items: center;  /* Vertically center-aligns items within the row */
  min-width: 0;  /* Allows the flex items to shrink below their content size */
  flex-grow: 0;  /* Prevents the flex container from growing to fill space */
  width: 100%;  /* Width is determined by the content */
  box-sizing: border-box;  /* Includes padding and border in the element's total width and height */
}

.heading-row.heading-top-row {
  justify-content: space-between; /* Top row spaced evenly */
}

.heading-cell {
  width: 100%;
  padding: 0.2em 0;
  text-align: center;
  min-width: 0; /* Allow items to shrink */
  flex-grow: 1; /* Allow items to grow */
}
.heading-cell.heading-left-col {
  display: flex;
  flex-direction: row;
  justify-content: flex-start; /* Left-aligned content */
  margin-right: auto; /* Fill remaining space on the right */
}
.heading-cell.heading-center-col {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  /* margin-left: auto;
  margin-right: auto; */
  box-sizing: border-box;
  width: 100%;
}
.heading-cell.heading-right-col {
  display: flex;
  flex-direction: row;
  justify-content: flex-end; /* Right-aligned content */
  margin-left: auto; /* Fill remaining space on the left */
}

.heading-top-row.heading-center-col {
  margin-left: auto;
  margin-right: auto;
}

/* Specific styles for rows two and three */
.heading-row:not(.heading-top-row) > .heading-cell:first-child {
  margin-right: auto; /* First item pushes the rest */
}
.heading-row:not(.heading-top-row) > .heading-cell:last-child {
  margin-left: auto; /* Last item centers itself */
}
.heading-row:not(.heading-top-row) > .heading-cell:not(:first-child):not(:last-child) {
  margin: 0 auto; /* Center all middle items */
}
.isometric-1 {
  background-color: #e6e6f6;
  opacity: 0.8;
  background-image: linear-gradient(30deg, #dc0c99 12%, transparent 12.5%, transparent 87%, #dc0c99 87.5%, #dc0c99), linear-gradient(150deg, #dc0c99 12%, transparent 12.5%, transparent 87%, #dc0c99 87.5%, #dc0c99), linear-gradient(30deg, #dc0c99 12%, transparent 12.5%, transparent 87%, #dc0c99 87.5%, #dc0c99), linear-gradient(150deg, #dc0c99 12%, transparent 12.5%, transparent 87%, #dc0c99 87.5%, #dc0c99), linear-gradient(60deg, #dc0c9977 25%, transparent 25.5%, transparent 75%, #dc0c9977 75%, #dc0c9977), linear-gradient(60deg, #dc0c9977 25%, transparent 25.5%, transparent 75%, #dc0c9977 75%, #dc0c9977);
  background-size: 20px 35px;
  background-position: 0 0, 0 0, 10px 18px, 10px 18px, 0 0, 10px 18px;
}

.isometric-2 {
  background-color: #21213d;
  opacity: 0.7;
  background-image:  linear-gradient(30deg, #dc0c99 12%, transparent 12.5%, transparent 87%, #dc0c99 87.5%, #dc0c99), linear-gradient(150deg, #dc0c99 12%, transparent 12.5%, transparent 87%, #dc0c99 87.5%, #dc0c99), linear-gradient(30deg, #dc0c99 12%, transparent 12.5%, transparent 87%, #dc0c99 87.5%, #dc0c99), linear-gradient(150deg, #dc0c99 12%, transparent 12.5%, transparent 87%, #dc0c99 87.5%, #dc0c99), linear-gradient(60deg, #dc0c9977 25%, transparent 25.5%, transparent 75%, #dc0c9977 75%, #dc0c9977), linear-gradient(60deg, #dc0c9977 25%, transparent 25.5%, transparent 75%, #dc0c9977 75%, #dc0c9977);
  background-size: 20px 35px;
  background-position: 0 0, 0 0, 10px 18px, 10px 18px, 0 0, 10px 18px;
}

.isometric-3 {
  background-color: #000000;
  opacity: 0.7;
  background-image:  linear-gradient(30deg, #dc0c99 12%, transparent 12.5%, transparent 87%, #dc0c99 87.5%, #dc0c99), linear-gradient(150deg, #dc0c99 12%, transparent 12.5%, transparent 87%, #dc0c99 87.5%, #dc0c99), linear-gradient(30deg, #dc0c99 12%, transparent 12.5%, transparent 87%, #dc0c99 87.5%, #dc0c99), linear-gradient(150deg, #dc0c99 12%, transparent 12.5%, transparent 87%, #dc0c99 87.5%, #dc0c99), linear-gradient(60deg, #dc0c9977 25%, transparent 25.5%, transparent 75%, #dc0c9977 75%, #dc0c9977), linear-gradient(60deg, #dc0c9977 25%, transparent 25.5%, transparent 75%, #dc0c9977 75%, #dc0c9977);
  background-size: 20px 35px;
  background-position: 0 0, 0 0, 10px 18px, 10px 18px, 0 0, 10px 18px;
}

.isometric-4 {
  background-color: #ffffff;
  opacity: 0.7;
  background-image:  linear-gradient(30deg, #dc0c99 12%, transparent 12.5%, transparent 87%, #dc0c99 87.5%, #dc0c99), linear-gradient(150deg, #dc0c99 12%, transparent 12.5%, transparent 87%, #dc0c99 87.5%, #dc0c99), linear-gradient(30deg, #dc0c99 12%, transparent 12.5%, transparent 87%, #dc0c99 87.5%, #dc0c99), linear-gradient(150deg, #dc0c99 12%, transparent 12.5%, transparent 87%, #dc0c99 87.5%, #dc0c99), linear-gradient(60deg, #dc0c9977 25%, transparent 25.5%, transparent 75%, #dc0c9977 75%, #dc0c9977), linear-gradient(60deg, #dc0c9977 25%, transparent 25.5%, transparent 75%, #dc0c9977 75%, #dc0c9977);
  background-size: 20px 35px;
  background-position: 0 0, 0 0, 10px 18px, 10px 18px, 0 0, 10px 18px;
}

.isometric-5 {
  background-color: #000000;
  opacity: 0.6;
  background-image:  linear-gradient(30deg, #ffffff 12%, transparent 12.5%, transparent 87%, #ffffff 87.5%, #ffffff), linear-gradient(150deg, #ffffff 12%, transparent 12.5%, transparent 87%, #ffffff 87.5%, #ffffff), linear-gradient(30deg, #ffffff 12%, transparent 12.5%, transparent 87%, #ffffff 87.5%, #ffffff), linear-gradient(150deg, #ffffff 12%, transparent 12.5%, transparent 87%, #ffffff 87.5%, #ffffff), linear-gradient(60deg, #ffffff77 25%, transparent 25.5%, transparent 75%, #ffffff77 75%, #ffffff77), linear-gradient(60deg, #ffffff77 25%, transparent 25.5%, transparent 75%, #ffffff77 75%, #ffffff77);
  background-size: 16px 28px;
  background-position: 0 0, 0 0, 8px 14px, 8px 14px, 0 0, 8px 14px;
}

.isometric-6 {
  background-color: #ffffff;
  opacity: 0.1;
  background-image:  linear-gradient(30deg, #000000 12%, transparent 12.5%, transparent 87%, #000000 87.5%, #000000), linear-gradient(150deg, #000000 12%, transparent 12.5%, transparent 87%, #000000 87.5%, #000000), linear-gradient(30deg, #000000 12%, transparent 12.5%, transparent 87%, #000000 87.5%, #000000), linear-gradient(150deg, #000000 12%, transparent 12.5%, transparent 87%, #000000 87.5%, #000000), linear-gradient(60deg, #00000077 25%, transparent 25.5%, transparent 75%, #00000077 75%, #00000077), linear-gradient(60deg, #00000077 25%, transparent 25.5%, transparent 75%, #00000077 75%, #00000077);
  background-size: 18px 32px;
  background-position: 0 0, 0 0, 9px 16px, 9px 16px, 0 0, 9px 16px;
}

.isometric-7 {
  background-color: #ffffff;
  opacity: 0.5;
  background-image:  linear-gradient(30deg, #000000 12%, transparent 12.5%, transparent 87%, #000000 87.5%, #000000), linear-gradient(150deg, #000000 12%, transparent 12.5%, transparent 87%, #000000 87.5%, #000000), linear-gradient(30deg, #000000 12%, transparent 12.5%, transparent 87%, #000000 87.5%, #000000), linear-gradient(150deg, #000000 12%, transparent 12.5%, transparent 87%, #000000 87.5%, #000000), linear-gradient(60deg, #00000077 25%, transparent 25.5%, transparent 75%, #00000077 75%, #00000077), linear-gradient(60deg, #00000077 25%, transparent 25.5%, transparent 75%, #00000077 75%, #00000077);
  background-size: 18px 32px;
  background-position: 0 0, 0 0, 9px 16px, 9px 16px, 0 0, 9px 16px;
}

.isometric-8 {
  background-color: #ffffff;
  opacity: 1;
  background-image:  linear-gradient(30deg, #000000 12%, transparent 12.5%, transparent 87%, #000000 87.5%, #000000), linear-gradient(150deg, #000000 12%, transparent 12.5%, transparent 87%, #000000 87.5%, #000000), linear-gradient(30deg, #000000 12%, transparent 12.5%, transparent 87%, #000000 87.5%, #000000), linear-gradient(150deg, #000000 12%, transparent 12.5%, transparent 87%, #000000 87.5%, #000000), linear-gradient(60deg, #00000077 25%, transparent 25.5%, transparent 75%, #00000077 75%, #00000077), linear-gradient(60deg, #00000077 25%, transparent 25.5%, transparent 75%, #00000077 75%, #00000077);
  background-size: 18px 32px;
  background-position: 0 0, 0 0, 9px 16px, 9px 16px, 0 0, 9px 16px;
}
.wavy-1 {
  background-color: #000000;
  opacity: 0.7;
  background-image:  repeating-radial-gradient( circle at 0 0, transparent 0, #000000 10px ), repeating-linear-gradient( #dc0c9955, #dc0c99 );
}

.wavy-2 {
  background-color: #21213d;
  opacity: 0.7;
  background-image:  repeating-radial-gradient( circle at 0 0, transparent 0, #21213d 10px ), repeating-linear-gradient( #dc0c9955, #dc0c99 );
}

.wavy-3 {
  background-color: #ffffff;
  opacity: 0.7;
  background-image:  repeating-radial-gradient( circle at 0 0, transparent 0, #ffffff 10px ), repeating-linear-gradient( #dc0c9955, #dc0c99 );
}

.wavy-4 {
  background-color: #000000;
  opacity: 0.6;
  background-image:  repeating-radial-gradient( circle at 0 0, transparent 0, #000000 8px ), repeating-linear-gradient( #ffffff55, #ffffff );
}

.wavy-5 {
  background-color: #ffffff;
  opacity: 0.1;
  background-image:  repeating-radial-gradient( circle at 0 0, transparent 0, #ffffff 9px ), repeating-linear-gradient( #00000055, #000000 );
}

.wavy-6 {
  background-color: #ffffff;
  opacity: 0.6;
  background-image:  repeating-radial-gradient( circle at 0 0, transparent 0, #ffffff 9px ), repeating-linear-gradient( #00000055, #000000 );
}

.wavy-7 {
  background-color: #ffffff;
  opacity: 1;
  background-image:  repeating-radial-gradient( circle at 0 0, transparent 0, #ffffff 9px ), repeating-linear-gradient( #00000055, #000000 );
}
@property --rotate {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: true;
}
@keyframes rotating {
  0% { --rotate: 42deg; }
  25% { --rotate: 21deg; }
  50% { --rotate: 0deg; }
  75% { --rotate: 21deg; }
  100% { --rotate: 42deg; }
}

@property --wiggle {
  syntax: "<angle>";
  initial-value: 138deg;
  inherits: false;
}
/* @keyframes wiggling-points {
  0% { --p1-x: 8%; --p1-y: 10%; --p2-x: 50%; --p2-y: 10%; --p3-x: 90%; --p3-y: 10%; --p4-x: 8%; --p4-y: 50%; --p5-x: 50%; --p5-y: 50%; --p6-x: 90%; --p6-y: 50%; --p7-x: 8%; --p7-y: 89%; --p8-x: 50%; --p8-y: 90%; --p9-x: 90%; --p9-y: 90%; }
  25% { --p1-x: 10%; --p1-y: 15%; --p2-x: 48%; --p2-y: 12%; --p3-x: 88%; --p3-y: 8%; --p4-x: 10%; --p4-y: 55%; --p5-x: 52%; --p5-y: 52%; --p6-x: 88%; --p6-y: 55%; --p7-x: 12%; --p7-y: 87%; --p8-x: 48%; --p8-y: 88%; --p9-x: 92%; --p9-y: 85%; }
  50% { --p1-x: 6%; --p1-y: 8%; --p2-x: 52%; --p2-y: 15%; --p3-x: 85%; --p3-y: 12%; --p4-x: 5%; --p4-y: 52%; --p5-x: 48%; --p5-y: 48%; --p6-x: 95%; --p6-y: 52%; --p7-x: 10%; --p7-y: 90%; --p8-x: 50%; --p8-y: 92%; --p9-x: 88%; --p9-y: 87%; }
  75% { --p1-x: 12%; --p1-y: 12%; --p2-x: 46%; --p2-y: 8%; --p3-x: 92%; --p3-y: 6%; --p4-x: 12%; --p4-y: 48%; --p5-x: 52%; --p5-y: 52%; --p6-x: 85%; --p6-y: 48%; --p7-x: 8%; --p7-y: 85%; --p8-x: 52%; --p8-y: 88%; --p9-x: 90%; --p9-y: 92%; }
  100% { --p1-x: 8%; --p1-y: 10%; --p2-x: 50%; --p2-y: 10%; --p3-x: 90%; --p3-y: 10%; --p4-x: 8%; --p4-y: 50%; --p5-x: 50%; --p5-y: 50%; --p6-x: 90%; --p6-y: 50%; --p7-x: 8%; --p7-y: 89%; --p8-x: 50%; --p8-y: 90%; --p9-x: 90%; --p9-y: 90%; }
} */

@keyframes rising {
  0% {
    transform: translateY(100%);
    opacity: 0;
  }
  50% {
    opacity: 1;
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(-100%);
    opacity: 0;
  }
}

@keyframes pulsing {
  0%, 100% { opacity: 1.0; }
  50% { opacity: 0.5; }
}

@keyframes fading {
  0% { opacity: 1.0; }
  100% { opacity: 0; }
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1.0; }
}
@keyframes fadeOut {
  0% { opacity: 1.0; }
  100% { opacity: 0; }
}

@keyframes gradientAnimation {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}


@layer utilities {
  .animate-pulse { animation: pulsing 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

  .notice-fade {
    animation: fading 9s linear forwards;
    transition: all 0.1s ease;
  }
  .fade-in {
    animation: fadeIn 0.3s linear forwards;
    transition: all 0.1s ease;
  }
  .fade-out {
    animation: fadeOut 0.2s linear forwards;
    transition: all 0.1s ease;
  }

  /* .mesh-gradient-background {
    @apply relative h-screen w-full bg-black overflow-hidden;
    background: linear-gradient(270deg, rgba(189, 14, 138, 0.5), rgba(0, 0, 0, 0.5), rgba(42, 14, 254, 0.5));
    background-size: 400% 400%;
    animation: pulsing 9s ease infinite;
  } */
  /* .meshtastic {
    background: linear-gradient(270deg, rgba(189, 14, 138, 0.6), rgba(0, 0, 0, 0.6), rgba(42, 14, 254, 0.5));
    background-size: 100% 100%;
    animation: gradientAnimation 12s ease infinite;
  } */

  /*.nd-bg-anime {
    @apply flex flex-auto h-full bg-fixed bg-cover bg-no-repeat;
    @apply nd-bg-animation-2;
  }*/

  /* .nd-bg-animation-1 {
    @apply bg-fixed bg-cover bg-no-repeat;
    background-image: linear-gradient(
      var(--wiggle),
      #00B7FF 0%,
      #120042 9%,
      #0a0b0c 18%,
      #000000 50%,
      #0c0b0a 80%,
      #210012 99%,
      #421833 100%
    );
    animation: wiggling 33s ease-in-out infinite;
  } */

  /* .nd-bg-animation-2 {
    @apply bg-fixed bg-cover bg-no-repeat;
    background-color: rgb(0, 0, 0);
    background-image: 
      radial-gradient(at var(--p1-x, 8%) var(--p1-y, 10%), rgb(0, 0, 9) 3%, transparent 100%),
      radial-gradient(at var(--p2-x, 50%) var(--p2-y, 10%), rgb(0, 0, 0) 0, transparent 21%),
      radial-gradient(at var(--p3-x, 90%) var(--p3-y, 10%), rgb(0, 0, 0) 0, transparent 93%),
      radial-gradient(at var(--p4-x, 8%) var(--p4-y, 50%), rgb(0, 0, 0) 0, transparent 65%),
      radial-gradient(at var(--p5-x, 50%) var(--p5-y, 50%), rgb(0, 0, 0) 0, transparent 100%),
      radial-gradient(at var(--p6-x, 90%) var(--p6-y, 50%), rgb(112, 26, 117) 0, transparent 100%),
      radial-gradient(at var(--p7-x, 8%) var(--p7-y, 89%), rgb(0, 0, 0) 0, transparent 99%),
      radial-gradient(at var(--p8-x, 50%) var(--p8-y, 90%), rgb(162, 28, 175) 0, transparent 100%),
      radial-gradient(at var(--p9-x, 90%) var(--p9-y, 90%), rgb(181, 0, 191) 0, transparent 100%);
    /* animation: wiggling-points 5s ease-in-out infinite;
  } */

  /* .dancing-lights {
    @apply relative border border-primary rounded-md text-[#a37289] bg-[#d3a6c942] box-shadow[0 1px 42px rgba(115, 42, 210, 0.63)];
    background-image: linear-gradient(var(--rotate), #5e064421, #ac0cb936 42%, #33366618);
    animation: rotating 11s linear infinite;
    transition: all 0.1s ease;
    &:hover,
    &:active,
    &:focus {
      @apply border-primary bg-[#d3a6c963];
      background-image: linear-gradient(var(--rotate), #5e064421, #33366618 50%, #ac0cb936);
      box-shadow: rgb(138 42 210 / 89%) 0px 1px 42px;
    }
  } */

}
@layer base {
  :root {
    --rad-1: 4px;
    --rad-2: 8px;
    --rad-3: 12px;
    --rad-4: 16px;
    --rad-5: 20px;
    --rad-6: 24px;
    --rad-7: 28px;
    --rad-8: 32px;
    --rad-9: 36px;
    --rad-10: 100%;
    --trans-1: all 100ms ease-in-out;
    --trans-2: all 200ms ease-in-out;
    --trans-3: all 300ms ease-in-out;
    --trans-4: all 400ms ease-in-out;
    --trans-5: all 500ms ease-in-out;
  }

  /* hide turbo's page-load progress meter */
  ::-webkit-progress-inner-element { visibility: hidden; }
  ::-webkit-progress-value { visibility: hidden; }
  ::-webkit-progress-bar { visibility: hidden; }
  ::-webkit-progress { visibility: hidden; }
  ::-moz-progress-bar { visibility: hidden; }
  .turbo-progress-bar { visibility: hidden; }
  #turbo-progress { visibility: hidden; }
  progress {
    -webkit-appearance: none;
    visibility: hidden;
  }

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scrollbar-width: thin;
    transition-behavior: allow-discrete;
  }

  ::-webkit-scrollbar {
    width: 18px;
  }
  ::-webkit-scrollbar-thumb {
    background-color: #678;
    border-radius: 10px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  * {
    scrollbar-width: thin;
    scrollbar-color: #678 transparent;
  }

  /* body {
    margin-inline: auto;
    padding-inline: 1px;
  } */
}

@layer utilities {
  .rounded-1 { border-radius: var(--rad-1); }
  .rounded-2 { border-radius: var(--rad-2); }
  .rounded-3 { border-radius: var(--rad-3); }
  .rounded-4 { border-radius: var(--rad-4); }
  .rounded-5 { border-radius: var(--rad-5); }
  .rounded-6 { border-radius: var(--rad-6); }
  .rounded-7 { border-radius: var(--rad-7); }
  .rounded-8 { border-radius: var(--rad-8); }
  .rounded-9 { border-radius: var(--rad-9); }
  .rounded-10 { border-radius: var(--rad-10); }
  .trans-1 { transition: var(--trans-1); }
  .trans-2 { transition: var(--trans-2); }
  .trans-3 { transition: var(--trans-3); }
  .trans-4 { transition: var(--trans-4); }
  .trans-5 { transition: var(--trans-5); }


  /* Firefox Scrollbars */
  .scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: #c0a0b942 #111;
    scrollbar-track { border-radius: 100vh; background: #111; }
    scrollbar-thumb { background: #c0a0b942; border-radius: 100vh; border: 1px solid #bc0c8999; }
    scrollbar-thumb:hover { background: #f4aabfab; }
  }
  /*
  ::-webkit-scrollbar               the scrollbar.
  ::-webkit-scrollbar-button        the buttons on the scrollbar (arrows pointing upwards and downwards).
  ::-webkit-scrollbar-thumb         the draggable scrolling handle.
  ::-webkit-scrollbar-track         the track (progress bar) of the scrollbar.
  ::-webkit-scrollbar-track-piece   the track (progress bar) NOT covered by the handle.
  ::-webkit-scrollbar-corner        the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet.
  ::-webkit-resizer                 the draggable resizing handle that appears at the bottom corner of some elements.
  */
}
@layer components {
  .btn-primary {
    @apply bg-gradient-to-b from-[#ff00cc] to-[#ff48da];
    @apply shadow font-medium text-white hover:white-neon;
    @apply hover:shadow-lg hover:shadow-pink-600/10;
    @apply rounded-lg p-0 py-1 px-4;
    @apply clickable;
  }
  .btn-secondary {
    @apply bg-gradient-to-b from-[#212121] to-[#171717];
    @apply border-[1px] border-[#2a2a2a];
    @apply shadow font-medium text-white hover:white-neon;
    @apply rounded-lg p-0 py-1 px-4;
    @apply clickable;
  }
  .btn-tertiary {
    @apply glass-b;
    @apply rounded-lg p-0 py-1 px-4 m-1;
    @apply hover:white-neon;
    @apply clickable;
  }

  .sideitem {
    @apply rounded-md p-2 text-sm font-semibold leading-6 text-gray-200;
    @apply subpixel-antialiased;
    @apply clickable;
  }

  .sidebar-icon {
    @apply relative flex items-center justify-center;
    @apply h-12 w-20 mt-2 mb-2 mx-auto shadow-lg;
    @apply bg-gray-800 text-pink-500;
    @apply hover:bg-pink-600 hover:text-white;
    @apply rounded-3xl hover:rounded-xl;
    @apply transition-all duration-300 ease-linear;
    @apply bg-[linear-gradient(115deg,var(--tw-gradient-stops))] from-[#ea0ba4] from-[-50%] via-[#000000] via-[90%] to-transparent;
    @apply clickable;
  }

  .sidebar-tooltip {
    @apply absolute w-auto p-2 m-2 min-w-max z-50;
    @apply rounded-md shadow-md;
    @apply text-white bg-gray-900;
    @apply text-xs font-bold;
    @apply transition-all duration-100 scale-0 origin-left;
  }

  .variant-button {
    @apply relative text-center text-xs font-bold text-white rounded-full max-w-[90%];
    @apply p-[1px] mx-2 my-1;
    @apply bg-gradient-to-r from-[#ea0ba4] via-[#dc0c99] to-[#bc0caf];
    @apply clickable;
    /* Base styles for both states */
    > span {
      @apply block h-full w-full rounded-full px-2 py-1.5 bg-[#171717];
      @apply shadow-lg shadow-pink-600/20;
    }
  }
  /* Design for checked state */
  .peer:checked + .variant-button > span {
    @apply bg-gradient-to-r from-[#dc0c99] to-[#fd3cbd];
  }

  .toggled-off {
    @apply relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-gray-200 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2;
    > span { @apply inline-block size-5 translate-x-0 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out; }
  }
  .toggled-on {
    @apply relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-primary transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2;
    > span { @apply inline-block size-5 translate-x-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out; }
  }

  .pushdown-button {
    @apply  min-w-[120px] max-w-[180px] rounded-full mx-2 my-1 py-1 inline-block text-xs;
    @apply pushdown-button-style;
  }
  .pushdown-button-checked {
    @apply min-w-[120px] max-w-[180px] rounded-full mx-2 my-1 py-1 inline-block text-xs;
    @apply pushdown-button-checked-style;
  }

}
@layer utilities {
  .btn-primary-style-a {
    @apply bg-gradient-to-b from-[#ff00cc] to-[#ff48da];
    @apply shadow font-medium text-white hover:white-neon;
    @apply hover:shadow-lg hover:shadow-pink-600/10;
  }
  .btn-primary-style-b {
    @apply bg-gradient-to-r from-[#ac0c89] to-[#891269];
    @apply shadow font-semibold text-white hover:white-neon;
    @apply hover:shadow-lg hover:shadow-pink-600/10;
    /* transition: var(--trans-200); */
  }
  .primary-gradient { @apply bg-gradient-to-r from-[#fd3cbd] to-[#ac0c89]; }

  .btn-secondary-style {
    @apply border border-[1px] border-gray-800;
    @apply bg-transparent/30;
    @apply hover:text-white hover:shadow-lg hover:shadow-pink-600/20;
    @apply shadow text-gray-200 font-semibold;
    /* transition: var(--trans-200); */
  }

  .pushdown-button-style {
    @apply text-center font-semibold text-white px-1;
    @apply border border-gray-500 shadow-lg shadow-gray-300/10;
    @apply bg-gradient-to-r from-[#212121] to-[#090909];
    @apply flex flex-row justify-center line-clamp-1 truncate;
    @apply clickable;
  }
  .pushdown-button-checked-style {
    @apply text-center font-semibold text-white px-1;
    @apply border border-primary2 shadow-lg shadow-pink-600/20;
    @apply bg-gradient-to-r from-primary to-[#fd3cbd];
    @apply flex flex-row justify-center line-clamp-1 truncate;
    @apply clickable;
  }

}
@layer utilities {
  .clickable {
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;
    cursor: pointer;
    @apply items-center justify-items-center align-middle active:transform active:scale-[0.9] active:shadow-inner;
    /* display: flex;
    align-items: center;
    justify-items: center;
    vertical-align: middle; */
    transition: var(--trans-2);
  }
  /* .clickable:active {
    transform: scale(0.9);
    box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
    transition: var(--trans-1);
  } */

  .blur-9 {
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
  }
  .blur-10 {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .blur-11 {
    backdrop-filter: blur(11px);
    -webkit-backdrop-filter: blur(11px);
  }
  .blur-12 {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .blur-14 {
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .blur-16 {
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
  .blur-18 {
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
  }
  .blur-20 {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }
  .blur-21 {
    backdrop-filter: blur(21px);
    -webkit-backdrop-filter: blur(21px);
  }
  .blur-none {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }


  .blurry-0 {
    @apply blur-0;
    backdrop-filter: none;
    filter: none;
    /* @apply transition-transform duration-100; */
    transition: var(--trans-100);
    /* ...or maybe increase/decrease blur effect the closer to/from some focal point they scroll. */
  }
  .blurry-1 {
    backdrop-filter: blur(0.5px);
    filter: blur(0.5px);
    /* @apply transition-transform duration-200; */
    transition: var(--trans-100);
  }

  /*
        Black Light
  */
  /* .blacklight-on {
    @apply border border-pink-500 outline outline-1 outline-indigo-500/10;
    border: 1px solid #bc0c89;
    box-shadow: rgb(138 42 210 / 72%) 0px 0px 33px, rgba(255, 0, 247, 0.33) 9px 0px 21px, rgba(138, 42, 210, 0.33) -3px -3px 27px;
  } */
  .blacklight-on {
    /* @apply outline outline-1 outline-indigo-500/10; */
    box-shadow: rgb(138 42 210 / 69%) 0px 0px 33px,
                rgba(255, 0, 247, 0.27) 9px 0px 21px,
                rgba(138, 42, 210, 0.27) -3px -3px 27px;
  }
  .blacklight-off {
    box-shadow: none;
    /* @apply border-transparent/50; */
    /* @apply outline outline-1 outline-indigo-500/10; */
    @apply shadow-md drop-shadow-md;
    /*  border: inherit; */
  }

  /*
        Back Lit
  */
  .backlit {
    box-shadow: rgb(180 138 180 / 18%) -6px -3px 14px,
                rgba(138, 0, 247, 0.14) -3px -6px 12px,
                rgba(99, 180, 180, 0.12) 1px 2px 6px;
    text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5),
                1px -1px 1px rgba(0, 0, 0, 0.9);
  }
  .backlight-on {
    box-shadow: rgb(180 142 210 / 21%) 0px 0px 9px,
                rgba(255, 180, 247, 0.21) 6px 0px 9px,
                rgba(138, 140, 210, 0.18) -2px -2px 12px;
    text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.5),
                1px -1px 1px rgba(0, 0, 0, 0.9);
  }
  .backlight-off {
    box-shadow: none;
    @apply shadow-md drop-shadow-md;
  }

  .mythril {
    &:hover,
    &:active,
    &:focus {
      @apply shadow-md drop-shadow-md backdrop-blur-sm;
      background-image: linear-gradient(42deg, #5e064421, #33366618 25%, #39363309 42%, #ac0cb918 66%, #bc0c8942);
      box-shadow: rgba(255, 0, 247, 0.42) 0px 1px 36px;
      /* animation: rotating 14s linear infinite;
      transition: all 0.1s ease; */
      transition: var(--trans-1);
    }
  }

}
@layer components {
  /* --- --- ---
    DEPRECATED - PHASING OUT
  */

  .glassmorphic-card {
    /* @apply bg-[#bc0c89]/[0.07] backdrop-blur-sm;
    @apply border border-[#bc0c89]; */
    @apply primary-glass-container;
    @apply subpixel-antialiased;
  }

  .default-drink-tile {
    border-radius: var(--rad-6);
    @apply drink-tile;
    @apply selectable-drink-tile;
    user-select: none;
    transition: var(--trans-3);
  }

  .pushdown-tile {
    border-radius: var(--rad-6);
    @apply drink-tile;
    @apply selectable-drink-tile;
    user-select: none;
    transition: var(--trans-3);
  }
  .pushdown-tile-checked {
    border-radius: var(--rad-6);
    @apply drink-tile;
    @apply deselectable-drink-tile;
    user-select: none;
    transition: var(--trans-3);
  }
  /* --- --- --- */


  .drawer-close-button-wrapper {
    @apply absolute top-0 right-0 px-2 py-1 bg-gray-600/20 border-[1px] border-neutral-500/20 rounded-tl-none rounded-tr-lg rounded-bl-xl rounded-br-none;
  }
}


@layer utilities {
  .glass-container {
    border-radius: var(--rad-6);
    @apply glass;
    @apply subpixel-antialiased;
    transition: var(--trans-3);
  }
  .neutral-glass-container {
    border-radius: var(--rad-6);
    @apply neutral-glass;
    @apply subpixel-antialiased;
    transition: var(--trans-3);
  }
  .dark-glass-container {
    border-radius: var(--rad-6);
    @apply dark-glass;
    @apply subpixel-antialiased;
    transition: var(--trans-3);
    /* object-fit: contain; */
  }
  .primary-glass-container {
    border-radius: var(--rad-6);
    @apply primary-glass;
    @apply subpixel-antialiased;
    transition: var(--trans-3);
  }
  .neon-glass-container {
    border-radius: var(--rad-6);
    /* @apply bg-[#bc0c89]/[0.07] backdrop-blur-sm;
    @apply border border-[#bc0c89]; */
    @apply neon-glass;
    @apply subpixel-antialiased;
    transition: var(--trans-3);
  }

  /* --- */
  .selectable-glass-container {
    border-radius: var(--rad-6);
    @apply glass;
    @apply selectable-border;
    @apply subpixel-antialiased;
    @apply clickable;
    /* transition: var(--trans-3); */
  }
  .deselectable-glass-container {
    border-radius: var(--rad-6);
    @apply glass;
    @apply deselectable-border;
    @apply subpixel-antialiased;
    @apply clickable;
    /* transition: var(--trans-3); */
  }

  /* --- --- --- */

  .glass-tile-container {
    border-radius: var(--rad-6);
    @apply glass;
    @apply glass-tile;
    @apply subpixel-antialiased;
    transition: var(--trans-3);
  }
  .neutral-glass-tile {
    border-radius: var(--rad-6);
    @apply neutral-glass;
    @apply neutral-glass-border;
    @apply neutral-glass-shadow;
    @apply glass-tile;
    @apply subpixel-antialiased;
    transition: var(--trans-3);
  }
  .dark-glass-tile {
    border-radius: var(--rad-6);
    @apply dark-glass;
    @apply dark-glass-border;
    @apply glass-tile;
    @apply glass-shine;
    @apply dark-glass-shadow;
    @apply subpixel-antialiased;
    transition: var(--trans-3);
    object-fit: contain;
  }
  .dark-glassmorphic-tile {
    @apply dark-glass;
    @apply dark-glass-border;
    @apply glass-tile;
    @apply glass-shine;
    @apply dark-glass-shadow;
    @apply subpixel-antialiased;
    transition: var(--trans-2);
    object-fit: contain;
  }

  .primary-glass-tile {
    border-radius: var(--rad-6);
    @apply primary-glass;
    @apply glass-tile;
    @apply glass-shine;
    @apply subpixel-antialiased;
    transition: var(--trans-3);
  }
  /* TODO: rename */
  .primary-dark-glass-tile {
    border-radius: var(--rad-6);
    @apply glass-b;
    border: 0.5px solid rgba(189, 14, 138, 1);
    @apply glass-tile;
    @apply subpixel-antialiased;
    transition: var(--trans-3);
  }
  .neon-glass-tile {
    border-radius: var(--rad-6);
    /* @apply bg-[#bc0c89]/[0.07] backdrop-blur-sm;
    @apply border border-[#bc0c89]; */
    @apply neon-glass;
    @apply glass-tile;
    @apply glass-shine;
    @apply subpixel-antialiased;
    transition: var(--trans-3);
  }

  /* --- */
  .selectable-glass-tile {
    border-radius: var(--rad-6);
    @apply glass;
    @apply glass-tile;
    @apply selectable-border;
    @apply subpixel-antialiased;
    @apply clickable;
    /* transition: var(--trans-3); */
  }
  .deselectable-glass-tile {
    border-radius: var(--rad-6);
    @apply glass;
    @apply glass-tile;
    @apply deselectable-border;
    @apply subpixel-antialiased;
    @apply clickable;
    /* transition: var(--trans-3); */
  }

  /* .drink-card-label { @apply mx-1 pl-1 pr-2 font-medium text-sm white-neon text-left truncate; } */
}
/*
    box-shadow: 0px      4px      30px        0px           rgba(0, 0, 0, 0.27);
                x-offset y-offset blur-radius spread-radius color
*/
@layer utilities {
  /* --- --- --- */
  /*
        DEPRECATED - PHASING OUT
  */
  /* .neutral-glass-container {
    background: rgba(255, 255, 255, 0.16);
    border-radius: var(--rad);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(250, 245, 255, 0.18);
    transition: all 300 ease-in-out;
  } */
  /* .dark-glass-container {
    background: rgba(0, 0, 0, 0.69);
    border-radius: var(--rad);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.32);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(0, 0, 0, 0.09);
    transition: all 300 ease-in-out;
  } */
  .primary-glass-container-old {
    /* background: rgba(189, 14, 138, 0.09); */
    background: rgba(255, 114, 242, 0.09);
    border: 1px solid rgba(189, 14, 138, 1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.32);
    @apply blur-20;
  }

  /*.reduce-reds { filter: hue-rotate(-32deg) saturate(0.7); }
  .drink-tile-b
    .border-gradient {
      outline: 1px solid rgba(0, 0, 0, 0.18);
      outline-offset: -2px;
      box-shadow: 0 10px 15px rgba(0, 0, 0, 0.24);
      background: linear-gradient(to bottom, rgba(57, 54, 51, 0.26), rgba(54, 51, 57, 0.33), rgba(51, 54, 57, 0.42));
      @apply blur-11;
      @apply subpixel-antialiased;
      border-top: 1px solid #000936AF;
      border-left: 1px solid #006d9903;
      border-right: 1px solid #69005F09;
      border-bottom: 1px solid #66429909;
      border-radius: inherit;
      background-image: linear-gradient(to right, #140c4233, #33669912, #21096918, #12001812);
      background-clip: padding-box;
      padding: 1px;
      padding-top: 0;
      backdrop-filter: blur(9px);
    }
    .content {
      background-image: linear-gradient(to bottom, #000009D3, 50% #140c4227, #33669918, #21096912, #12001809);
      background-color: #030609B3;
      backdrop-filter: blur(9px);
      border-radius: inherit;
      padding: 1rem;
    }*/
  .drink-tile {
    outline: 1px solid rgba(0, 0, 0, 0.18);
    outline-offset: -2px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.24);
    background: linear-gradient(to bottom, rgba(57, 54, 51, 0.26), rgba(54, 51, 57, 0.33), rgba(51, 54, 57, 0.42));
    @apply blur-11;
    @apply subpixel-antialiased;
  }
  .selectable-drink-tile {
    border-width: 1px;
    border-style: solid;
    border-top-color: rgba(189, 14, 138, 0.69);
    border-right-color: rgba(189, 14, 138, 0.54);
    border-bottom-color: rgba(189, 14, 138, 0.42);
    border-left-color: rgba(189, 14, 138, 0.54);
  }
  .deselectable-drink-tile {
    border-width: 1px;
    border-style: solid;
    border-top-color: rgba(0, 255, 42, 0.89);
    border-right-color: rgba(0, 255, 42, 0.72);
    border-bottom-color: rgba(0, 255, 42, 0.69);
    border-left-color: rgba(0, 255, 42, 0.72);
  }
  /* --- --- --- */

  .glass {
    background: linear-gradient(to bottom, rgba(57, 54, 51, 0.27), rgba(54, 51, 57, 0.33), rgba(51, 54, 57, 0.42));
    @apply blur-11;
  }

  .primary-glass {
    background: rgba(189, 14, 138, 0.09);
    border: 1px solid rgba(189, 14, 138, 1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.32);
    @apply blur-20;
  }
  .neon-glass {
    background: rgba(255, 114, 242, 0.09);
    border: 1px solid rgba(189, 14, 138, 1);
    box-shadow: rgba(138, 42, 210, 0.42) 0px 0px 32px, rgba(255, 0, 247, 0.18) 9px 0px 21px, rgba(138, 42, 210, 0.21) -3px -3px 27px;
    @apply blur-18;
  }

  /*
    neutral-glass styles
  */
  .neutral-glass {
    /*background: rgba(232, 248, 255, 0.12);*/
    background: linear-gradient(to right, rgba(57, 54, 51, 0.42), rgba(54, 51, 57, 0.33), rgba(0, 0, 0, 0.27)),
                linear-gradient(to bottom, rgba(57, 54, 51, 0.42), rgba(54, 51, 57, 0.33), rgba(0, 0, 0, 0.27));
    @apply blur-16;
  }
  .neutral-glass-border {
    /* border: 1px solid rgba(250, 245, 255, 0.18); */
    border-width: 1px;
    border-style: solid;
    border-top-color: rgba(232, 248, 255, 0.21);
    border-right-color: rgba(138, 180, 140, 0.09);
    border-left-color: rgba(33, 36, 39, 0.14);
    border-bottom-color: rgba(42, 45, 54, 0.42);
  }
  .neutral-glass-shadow {
    box-shadow: 2px 3px 30px 2px rgba(3, 6, 9, 0.69);
  }


  /*
    dark-glass styles
  */
  .dark-glass {
    background: linear-gradient(to right, rgba(39, 33, 36, 0.3), rgba(0, 0, 0, 0.3)),
                linear-gradient(to bottom, rgba(36, 33, 39, 0.3), rgba(0, 0, 0, 0.2));
    @apply blur-14;
  }
  .dark-glass-border {
    border-width: 1px;
    border-style: solid;
    border-top-color: rgba(140, 160, 180, 0.1);
    border-right-color: rgba(0, 0, 0, 0.64);
    border-left-color: rgba(33, 36, 39, 0.12);
    border-bottom-color: rgba(39, 33, 36, 0.24);
  }
  .dark-glass-shadow {
    opacity: 99%;
    box-shadow: 2px 2px 0px 0px linear-gradient(to right, rgba(57, 54, 51, 0.03), rgba(54, 51, 57, 0.1), rgba(0, 0, 0, 0.72)),
                1px 1px 0px 0px linear-gradient(to bottom, rgba(57, 54, 51, 0.03), rgba(54, 51, 57, 0.1), rgba(0, 0, 0, 0.72));
  }


  /* Hello outlander,
      if you are unlucky enough to find yourself reading these words, let me explain...
    
    The goal is to introduce a set of `glass-<...>` classes that follow similar conventions to existing tailwind nomenclature.
    This should involve a standardized set of utilities for constructing the base glass effect(s), which can then be composed into, well, components such as glass-primary, glass-dark, etc...

    Most of the work is actually done, but the mess which you are likely currently wading through came into existance after swaths of old styles were slapped back in during a tumultuous merge.
  */

  .selectable-border {
    border-width: 1px;
    border-style: solid;
    border-radius: var(--rad-6);
    border-top-color: rgba(189, 14, 138, 0.69);
    border-right-color: rgba(189, 14, 138, 0.54);
    border-bottom-color: rgba(189, 14, 138, 0.42);
    border-left-color: rgba(189, 14, 138, 0.54);
  }
  .deselectable-border {
    border-width: 1px;
    border-style: solid;
    border-radius: var(--rad-6);
    border-top-color: rgba(0, 255, 42, 0.89);
    border-right-color: rgba(0, 255, 42, 0.72);
    border-bottom-color: rgba(0, 255, 42, 0.69);
    border-left-color: rgba(0, 255, 42, 0.72);
  }

  .glass-tile {
    user-select: none;
    outline: 1px solid rgba(0, 0, 0, 0.16);
    outline-offset: -2px;
  }

  .glass-shine {
    box-shadow: 0 0 18px 3px rgba(0, 0, 0, .3);
    height: inherit;
  }
  .glass-shine::after {
    height: inherit; /* !important */
    background-color: rgba(255, 255, 255, .36);
    bottom: 49.65%;
    content: '';
    filter: blur(18px);
    left: .865%;
    position: absolute;
    right: .865%;
    top: 49.65%;
    transform: rotate(-39deg) skewX(18deg);
    z-index: -1;
  }


  .glass-none {
    outline: none;
    box-shadow: none;
    /* border-width: 0; */
    border-style: none;
    background: none;
    @apply blur-none;
    /* or make them all inherit ? */
  }



  .glass-a {
    outline: 1px solid rgba(0, 0, 0, 0.24);
    outline-offset: -2px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.24);
    border-width: 1px;
    border-style: solid;
    border-top-color: rgba(75, 85, 99, 0.14);
    border-right-color: rgba(75, 85, 99, 0.11);
    border-bottom-color: rgba(107, 114, 128, 0.09);
    border-left-color: rgba(75, 85, 99, 0.12);
    background: linear-gradient(to bottom, rgba(51, 54, 57, 0.33), rgba(54, 51, 57, 0.41), rgba(57, 54, 51, 0.6));
    @apply blur-10;
    @apply subpixel-antialiased;
    transition: var(--trans-3);
  }
  .glass-b {
    border-radius: var(--rad-2);
    outline: 1px solid rgba(0, 0, 0, 0.18);
    outline-offset: -2px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.24);
    border-width: 1px;
    border-style: solid;
    border-top-color: rgba(75, 85, 99, 0.25);
    border-right-color: rgba(75, 85, 99, 0.1);
    border-bottom-color: rgba(51, 51, 52, 0.45);
    border-left-color: rgba(75, 85, 99, 0.1);
    background: linear-gradient(to bottom, rgba(57, 54, 51, 0.26), rgba(54, 51, 57, 0.33), rgba(51, 54, 57, 0.45));
    @apply blur-11;
    @apply subpixel-antialiased;
    transition: var(--trans-3);
  }
  .glass-b-selected {
    border-radius: var(--rad-2);
    outline: 1px solid rgba(0, 0, 0, 0.18);
    outline-offset: -2px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.24);
    border-width: 1px;
    border-style: solid;
    border-top-color: rgba(75, 85, 99, 0.25);
    border-right-color: rgba(75, 85, 99, 0.1);
    border-bottom-color: rgba(51, 51, 52, 0.45);
    border-left-color: rgba(75, 85, 99, 0.1);
    background: linear-gradient(to bottom, rgba(255, 0, 204, 1), rgb(255, 72, 218));
    @apply blur-11;
    @apply subpixel-antialiased;
    transition: var(--trans-3);
  }
  .glass-pill {
    border-radius: var(--rad-4);
    outline: 1px solid rgba(0, 0, 0, 0.18);
    outline-offset: -2px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.24);
    border-width: 1px;
    border-style: solid;
    border-top-color: rgba(75, 85, 99, 0.25);
    border-right-color: rgba(75, 85, 99, 0.1);
    border-bottom-color: rgba(51, 51, 52, 0.45);
    border-left-color: rgba(75, 85, 99, 0.1);
    background: linear-gradient(to bottom, rgba(57, 54, 51, 0.26), rgba(54, 51, 57, 0.33), rgba(51, 54, 57, 0.45));
    @apply blur-11;
    @apply subpixel-antialiased;
    transition: var(--trans-3);
  }
  .glass-pill-selected {
    border-radius: var(--rad-4);
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.24);
    border-width: 1px;
    border-style: solid;
    border-color: rgba(129, 0, 125, 1);
    background: linear-gradient(to bottom, rgba(255, 0, 204, 1), rgb(255, 72, 218));
    @apply blur-11;
    @apply subpixel-antialiased;
    transition: var(--trans-3);
  }
  /*
  .drink-tile {
    border-radius: var(--rad);
    border-width: 1px;
    border-style: solid;
    border-top-color: rgba(189, 14, 138, 0.69);
    border-right-color: rgba(189, 14, 138, 0.54);
    border-bottom-color: rgba(189, 14, 138, 0.42);
    border-left-color: rgba(189, 14, 138, 0.54);
    outline: 1px solid rgba(0, 0, 0, 0.18);
    outline-offset: -2px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.24);
    background: linear-gradient(to bottom, rgba(57, 54, 51, 0.26), rgba(54, 51, 57, 0.33), rgba(51, 54, 57, 0.45));
    backdrop-filter: blur(var(--blur-11));
    -webkit-backdrop-filter: blur(var(--blur-11));
    @apply subpixel-antialiased;
    transition: all 200 ease-in-out;
  }
  .drink-tile-checked {
    border-radius: var(--rad);
    border-width: 1px;
    border-style: solid;
    border-top-color: rgba(0, 255, 42, 0.89);
    border-right-color: rgba(0, 255, 42, 0.72);
    border-bottom-color: rgba(0, 255, 42, 0.69);
    border-left-color: rgba(0, 255, 42, 0.72);
    outline: 1px solid rgba(0, 0, 0, 0.18);
    outline-offset: -2px;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.24);
    background: linear-gradient(to bottom, rgba(57, 54, 51, 0.26), rgba(54, 51, 57, 0.33), rgba(51, 54, 57, 0.45));
    backdrop-filter: blur(var(--blur-11));
    -webkit-backdrop-filter: blur(var(--blur-11));
    @apply subpixel-antialiased;
    transition: all 200 ease-in-out;
  }
  */

  /*
  .glassmorphic-border {
    .border-gradient {
      border: 1px solid transparent;
      border-radius: 0.75rem;
      background-image: linear-gradient(to right, #006d99AF, #69005FAF);
      background-clip: padding-box;
      padding: 1px;
    }
    .content {
      background-color: #000000BF;
      border-radius: 0.6rem;
      padding: 1rem;
    }
  }
  */
  .glassmorphic-border {
    .border-gradient {
      border-top: 1px solid #420d9942;
      border-left: 1px solid #006d9942;
      border-right: 1px solid #69005F42;
      border-bottom: 1px solid #bc0c8942;
      border-radius: inherit;
      background-image: linear-gradient(to right, #006d99A0, #69005FA0);
      background-clip: padding-box;
      padding: 1px;
      backdrop-filter: blur(9px);
    }
    .content {
      background-color: #000000CF;
      backdrop-filter: blur(9px);
      border-radius: inherit;
      padding: 1rem;
    }
  }
  .glassmorphic-navbar {
    .border-gradient {
      /* border-top-left-radius: 0; */
      /* border-top-right-radius: 0; */
      /* border-bottom-left-radius: 1rem; */
      /* border-bottom-right-radius: 1rem; */
      top: 0;
      border-top: 1px solid rgba(9,12,42,0.6); /*00,09,54,0.68*/
      border-left: 1px solid rgba(0,0,0,0.69); /*00,109,153,0.03*/
      border-right: 1px solid rgba(0,0,0,0.69); /*66,00,84,0.09*/
      border-bottom: 1px solid rgba(72,69,115,0.09); /*102,66,114,0.09*/


      border-radius: inherit; /* !important */
      /*background-image: linear-gradient(to right, #120c2133, #21334212, #21094218, #12001812);*/
      background-image: linear-gradient(to right, rgba(18,12,33,0.21),
                                                  rgba(21,42,69,0.12),
                                                  rgba(21,12,54,0.14),
                                                  rgba(12,0,21,0.09));
      background-clip: padding-box;
      padding: 1px;
      padding-top: 0;
      backdrop-filter: blur(12px);
    }
    .content {
      /*background-image: linear-gradient(to bottom, #000009D3, 50% #140c2127, #33363918, #21096912, #12001809);*/
      background-color: rgba(3,6,9,0.72); /*#030609B3;*/
      background-image: linear-gradient(to bottom, rgba(3,6,9,0.69), 50% rgba(18,14,33,0.12),
                                                                                 rgba(51,54,57,0.12),
                                                                                 rgba(33,9,99,0.06),
                                                                                 rgba(9,0,21,0.09));
      backdrop-filter: blur(9px);
      border-radius: inherit; /* !important */
      padding: 1rem;
    }
  }
}
@layer components {
  .nd-text-field2 {
    @apply rounded-md border-0 bg-white/5 py-1 text-white shadow-sm ring-1 ring-inset ring-white/10 focus:ring-[1px] focus:ring-inset focus:ring-pink-500 sm:text-sm sm:leading-6;
    /*-webkit-appearance: none;
    &:-webkit-autofill,
    &:-webkit-autofill:hover,
    &:-webkit-autofill:focus {
      -webkit-text-fill-color: white;
      -webkit-box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0.05) inset;
      transition: background-color 5000s ease-in-out 0s;
    }*/
  }

  .dank-label { @apply absolute -top-[15px] left-2 inline-block rounded-md px-1 text-sm font-semibold text-neutral-200 glass-b backdrop-blur-xl group-focus-within:dank-label-effect; }
  .nd-text-field-b { @apply rounded-md border-0 block w-full px-3 pb-[4px] pt-[8px] bg-white/5 text-base text-white placeholder:text-gray-500 sm:text-sm/6 shadow-sm ring-1 ring-inset ring-white/10 focus:ring-[1px] focus:ring-inset focus:ring-pink-500; }

  .nd-text-field {
    @apply shadow rounded-xl border-white/50 text-white bg-black ring-[1px] ring-inset ring-white/10 focus:border-pink-600 focus:ring-[0.5px] focus:ring-inset focus:ring-pink-500;
    /*-webkit-appearance: none;
    &:-webkit-autofill,
    &:-webkit-autofill:hover,
    &:-webkit-autofill:focus {
      -webkit-text-fill-color: white;
      -webkit-box-shadow: 0 0 0px 1000px black inset;
      transition: background-color 5000s ease-in-out 0s;
    }*/
  }
  .nd-input-field {
    @apply shadow appearance-none border rounded-full w-full py-1 px-1 bg-gray-600/10 border-cyan-100/50 hover:border-orange-100 text-white focus:outline-none;
    /*-webkit-appearance: none;
    &:-webkit-autofill,
    &:-webkit-autofill:hover,
    &:-webkit-autofill:focus {
      -webkit-text-fill-color: white;
      -webkit-box-shadow: 0 0 0px 1000px black inset;
      transition: background-color 5000s ease-in-out 0s;
    }*/
  }
  .autofill-inputs { @apply shadow bg-transparent appearance-none border rounded-full w-full py-2 px-3 text-white leading-tight focus:outline-none; }

  .datetime-field {
    @apply shadow rounded-lg border border-neutral-300 focus:border-primary focus:ring-primary focus:ring-inset focus:outline-none appearance-none;
    @apply text-white bg-gradient-to-r from-black via-neutral-800 to-neutral-300/50;
  }

  /* .nd-promotions-fields {
    @apply block shadow w-full px-3 py-2 mt-2 rounded-md border-0 text-gray-900 shadow-sm ring-1 ring-inset ring-white/10 focus:border-pink-600 focus:ring-2 focus:ring-inset focus:ring-pink-500;
  } */

}
@layer utilities {
  .dank-label-effect { @apply text-white text-glow border-[0.5px] border-l-pink-500/50 bg-gradient-to-t from-pink-400 via-pink-300/60 to-pink-500/10 backdrop-blur-2xl border-t-pink-400/60 bg-blend-screen transition-all duration-300; }
}
/*
https://v3.tailwindcss.com/docs/justify-content
Class                    | Context          | CSS Property                      | Description
justify-normal           | Flexbox & Grid   | justify-content: normal;          | Packs content items in their default position.
justify-start            | Flexbox & Grid   | justify-content: flex-start;      | Justifies items against the start of the container’s main axis.
justify-end              | Flexbox & Grid   | justify-content: flex-end;        | Justifies items against the end of the container’s main axis.
justify-center           | Flexbox & Grid   | justify-content: center;          | Justifies items along the center of the container’s main axis.
justify-between          | Flexbox & Grid   | justify-content: space-between;   | Justifies items with equal space between each item.
justify-around           | Flexbox & Grid   | justify-content: space-around;    | Justifies items with equal space on each side of each item.
justify-evenly           | Flexbox & Grid   | justify-content: space-evenly;    | Justifies items with equal space around each item.
justify-stretch          | Flexbox & Grid   | justify-content: stretch;         | Allows content items to fill the available space along the main axis.

https://v3.tailwindcss.com/docs/justify-items
Class                    | Context          | CSS Property                      | Description
justify-items-start      | Flexbox & Grid   | justify-items: start;             | Justifies grid items against the start of their inline axis.
justify-items-end        | Flexbox & Grid   | justify-items: end;               | Justifies grid items against the end of their inline axis.
justify-items-center     | Flexbox & Grid   | justify-items: center;            | Justifies grid items along their inline axis.
justify-items-stretch    | Flexbox & Grid   | justify-items: stretch;           | Stretches items along their inline axis.

https://v3.tailwindcss.com/docs/justify-self
Class                    | Context          | CSS Property                      | Description
justify-self-auto        | Flexbox & Grid   | justify-self: auto;               | Aligns an item based on the value of the grid’s justify-items property.
justify-self-start       | Flexbox & Grid   | justify-self: start;              | Aligns a grid item to the start of its inline axis.
justify-self-center      | Flexbox & Grid   | justify-self: center;             | Aligns a grid item along the center of its inline axis.
justify-self-end         | Flexbox & Grid   | justify-self: end;                | Aligns a grid item to the end of its inline axis.
justify-self-stretch     | Flexbox & Grid   | justify-self: stretch;            | Stretches a grid item to fill the grid area on its inline axis.

https://v3.tailwindcss.com/docs/align-content
Class                    | Context          | CSS Property                      | Description
content-normal           | Flexbox & Grid   | align-content: normal;            | Packs content items in their default position.
content-center           | Flexbox & Grid   | align-content: center;            | Packs rows in the center of the cross axis.
content-start            | Flexbox & Grid   | align-content: flex-start;        | Packs rows against the start of the cross axis.
content-end              | Flexbox & Grid   | align-content: flex-end;          | Packs rows against the end of the cross axis.
content-between          | Flexbox & Grid   | align-content: space-between;     | Distributes rows with equal space between each line.
content-around           | Flexbox & Grid   | align-content: space-around;      | Distributes rows with equal space around each line.
content-evenly           | Flexbox & Grid   | align-content: space-evenly;      | Distributes rows with equal space around each item, including outer edges.
content-baseline         | Flexbox & Grid   | align-content: baseline;          | Aligns rows along their baseline.
content-stretch          | Flexbox & Grid   | align-content: stretch;           | Stretches content items to fill the available space along the cross axis.

https://v3.tailwindcss.com/docs/align-items
Class                    | Context          | CSS Property                      | Description
items-start              | Flexbox & Grid   | align-items: flex-start;          | Aligns items to the start of the container’s cross axis.
items-end                | Flexbox & Grid   | align-items: flex-end;            | Aligns items to the end of the container’s cross axis.
items-center             | Flexbox & Grid   | align-items: center;              | Aligns items along the center of the container’s cross axis.
items-baseline           | Flexbox & Grid   | align-items: baseline;            | Aligns items along the container’s cross axis based on their baselines.
items-stretch            | Flexbox & Grid   | align-items: stretch;             | Stretches items to fill the container’s cross axis.

https://v3.tailwindcss.com/docs/align-self
Class                    | Context          | CSS Property                      | Description
self-auto                | Flexbox & Grid   | align-self: auto;                 | Aligns an item based on the value of the container’s align-items property.
self-start               | Flexbox & Grid   | align-self: flex-start;           | Aligns an item to the start of the container’s cross axis.
self-end                 | Flexbox & Grid   | align-self: flex-end;             | Aligns an item to the end of the container’s cross axis.
self-center              | Flexbox & Grid   | align-self: center;               | Aligns an item along the center of the container’s cross axis.
self-stretch             | Flexbox & Grid   | align-self: stretch;              | Stretches an item to fill the container’s cross axis.
self-baseline            | Flexbox & Grid   | align-self: baseline;             | Aligns an item along the container’s cross axis based on its baseline.

https://v3.tailwindcss.com/docs/place-content
Class                    | Context          | CSS Property                      | Description
place-content-center     | Flexbox & Grid   | place-content: center;            | Packs items in the center of the block axis.
place-content-start      | Flexbox & Grid   | place-content: start;             | Packs items against the start of the block axis.
place-content-end        | Flexbox & Grid   | place-content: end;               | Packs items against the end of the block axis.
place-content-between    | Flexbox & Grid   | place-content: space-between;     | Distributes items with equal space between them on the block axis.
place-content-around     | Flexbox & Grid   | place-content: space-around;      | Distributes items with equal space around them on the block axis.
place-content-evenly     | Flexbox & Grid   | place-content: space-evenly;      | Distributes items evenly on the block axis.
place-content-baseline   | Flexbox & Grid   | place-content: baseline;          | Aligns items along their baseline on the block axis.
place-content-stretch    | Flexbox & Grid   | place-content: stretch;           | Stretches items to fill the available space along the block axis.

https://v3.tailwindcss.com/docs/place-items
Class                    | Context          | CSS Property                      | Description
place-items-start        | Flexbox & Grid   | place-items: start;               | Places grid items at the start of their grid areas on both axes.
place-items-end          | Flexbox & Grid   | place-items: end;                 | Places grid items at the end of their grid areas on both axes.
place-items-center       | Flexbox & Grid   | place-items: center;              | Centers grid items within their grid areas on both axes.
place-items-baseline     | Flexbox & Grid   | place-items: baseline;            | Aligns grid items along their baseline on both axes.
place-items-stretch      | Flexbox & Grid   | place-items: stretch;             | Stretches grid items to fill their grid areas on both axes.

https://v3.tailwindcss.com/docs/place-self
Class                    | Context          | CSS Property                      | Description
place-self-auto          | Flexbox & Grid   | place-self: auto;                 | Aligns an item based on the value of the container’s place-items property.
place-self-start         | Flexbox & Grid   | place-self: start;                | Aligns an item to the start on both axes.
place-self-end           | Flexbox & Grid   | place-self: end;                  | Aligns an item to the end on both axes.
place-self-center        | Flexbox & Grid   | place-self: center;               | Centers an item on both axes.
place-self-stretch       | Flexbox & Grid   | place-self: stretch;              | Stretches an item to fill its grid area on both axes.

https://v3.tailwindcss.com/docs/vertical-align
Class                    | Context          | CSS Property                      | Description
align-baseline           | Inline & Table   | vertical-align: baseline;         | Aligns the baseline of an element with the baseline of its parent.
align-top                | Inline & Table   | vertical-align: top;              | Aligns the top of an element with the top of the entire line.
align-middle             | Inline & Table   | vertical-align: middle;           | Aligns the middle of an element with the baseline plus half the x-height of the parent.
align-bottom             | Inline & Table   | vertical-align: bottom;           | Aligns the bottom of an element with the bottom of the entire line.
align-text-top           | Inline & Table   | vertical-align: text-top;         | Aligns the top of an element with the top of the parent element’s font.
align-text-bottom        | Inline & Table   | vertical-align: text-bottom;      | Aligns the bottom of an element with the bottom of the parent element’s font.
align-sub                | Inline & Table   | vertical-align: sub;              | Aligns an element as a subscript.
align-super              | Inline & Table   | vertical-align: super;            | Aligns an element as a superscript.
*/

/*
( Differences between flex-1 and flex-auto )

  flex-1   : Sets the flex-grow property to 1, the flex-shrink property to 1, and the flex-basis to 0%.
           : Takes equal space among siblings.
    [Behavior]
      Grow: The element will grow to fill available space in the flex container.
      Shrink: The element can shrink if there isn’t enough space in the container.
      Basis: Starts with a base size of 0, meaning it will take up no space unless it grows.

  flex-auto   : Sets the flex-grow property to 1, the flex-shrink property to 1, and the flex-basis to auto.
              : Takes space based on content size.
    [Behavior]
      Grow: Like flex-1, it will grow to fill available space.
      Shrink: It can also shrink if needed.
      Basis: Starts with a base size based on the content size, meaning it will take up space based on its content.

  * Use Cases
    Use flex-1 when you want elements to share space equally regardless of their content size.
    Use flex-auto when you want elements to size themselves based on their content while still allowing them to grow and shrink within the flex container.
*/

@layer components {
  .category-filter-grid { @apply w-full grid grid-cols-7 grid-flow-row gap-1; }

  .category-drinks-grid-container { @apply w-full h-full frow; }
  .category-drinks-grid-wrapper { @apply w-full place-self-center mr-[2%]; } /*mx-[2%]*/
  .category-drinks-grid { @apply w-full min-h-full grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-2 grid-flow-row justify-evenly; }
  .category-drinks-grid-cell { @apply col-span-1 max-w-[192px] my-2; }

  /*
  Deprecated: */
  .grid-outer-container { @apply pr-1 mr-1 mb-2 flex flex-wrap w-full; }
  .grid-inner-container { @apply m-1 p-1 flex flex-1 w-full justify-evenly; }
  .drink-card-grid-wrapper { @apply flex flex-wrap; }
  .drink-card-grid { @apply w-full min-h-full grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-2 grid-flow-row justify-evenly; }

  .drink-card-outer-conainer { @apply w-[12rem] h-[12rem] rounded-2xl m-[1rem] p-[1rem] shadow-md drop-shadow-md flex-1; }
  .drink-card-inner-container { @apply w-full h-full rounded-2xl flex flex-1 flex-col p-2 mx-1 mt-4 mb-1 pb-1; }
  /* TODO: phase out
  */

}

@layer utilities {
  /* no gap, sizing is almost completey passive/automatic */
  .grid-0 {
    box-sizing: border-box;
    @apply grid grid-cols-[repeat(auto-fill,minmax(12rem,1fr))] grid-rows-[repeat(auto-fill,minmax(14rem,1fr))] gap-0;
    align-self: stretch;
  }
  /* small gap, slightly more rigid to accomodate a card with title below it */
  .grid-1 {
    box-sizing: border-box;
    @apply grid grid-cols-[repeat(auto-fill,minmax(12vw,1fr))] grid-rows-[repeat(auto-fill,minmax(12vh,1fr))] gap-1;
    align-self: stretch;
  }
  /* .card-grid {
  } */
  .auto-grid {
    display: grid;
    box-sizing: border-box;
    grid-template-columns: repeat(3, minmax(1vw, 1fr));
    grid-template-columns: repeat(4, minmax(1vh, 1fr));
    align-self: stretch;
  }
  /*.cell { align-self: stretch;
    box-sizing: border-box;
    position: relative;
    .area { position: absolute;
      inset: 0;
    }
  }*/
  .cell { align-self: stretch;
    box-sizing: border-box;
    /*position: relative;*/
    .area { /*position: absolute;*/
      inset: 0;
    }
  }

  /* auto-grid { @apply grid grid-cols-[repeat(auto-fill,minmax(12vw,1fr))]
                     grid-rows-[repeat(auto-fill,minmax(12vh,1fr))]; } */


  .fcol { @apply flex flex-col; }
  .fcol-0 { @apply flex flex-col shrink grow-0; }
  .fcol-1 { @apply flex flex-col flex-1 h-full; }

  .frow { @apply flex flex-row; }
  .frow-0 { @apply flex flex-row shrink grow-0; }
  .frow-1 { @apply flex flex-row flex-1 w-full; }


  .categories-grid-container {
    /*display: grid;
    width: 100%;*/
    @apply w-full grid grid-cols-7 grid-flow-row gap-1 line-clamp-1 stretch-fill;
  }

  /* Styles for each grid row */
  .categories-grid-row {
    display: flex; /* Use flexbox for the row */
    flex-direction: row;
    overflow-x: auto; /* Enables horizontal scrolling */
    white-space: nowrap; /* Prevents wrapping of items */
    width: 100%; /* Full width of the available space */
  }

  /* Individual grid items */
  .categories-grid-cell {
    min-width: 220px; /* Fixed minimum width for grid items */
    flex: 0 0 auto; /* Prevents flex items from shrinking */
    box-sizing: border-box; /* Includes padding and border in element's total width and height */
  }



  /*
  prompt:
    Create a css class called prison that - when applied to a parent element (
                                              namely a grid row, column, or cell (template area)
                                            )
     - will prevent ALL child elements from overflowing or effecting the shape and size of the parent in any way.
    As the name suggests, when this class is applied to such a parent, it should effectively transform that parent element into a prison for its children.
    Instead of overflowing, any children contained within the prison should instead be resized to fit within the prison.
    The content should be centered, aligned to the middle, and regardless of whether there is any content,
    this prison class should ensure that the parent element which it is applied to maintains its size dimensions;
    thus making it an unwaiveringly unmodifiable, unescapable, child-mutating prison.
  */
  .prison {
    display: flex;                  /* Use flexbox for alignment */
    justify-content: center;        /* Center children horizontally */
    align-items: center;            /* Center children vertically */
    overflow: hidden;               /* Keep overflow hidden to avoid scrollbars */
    width: 100%;                    /* Maintain full width */
    height: 100%;                   /* Maintain full height */
    position: relative;             /* Establish a positioning context */
  }

  .prison > * {
    flex: 0 1 auto;                /* Allow children to shrink */
    max-width: 100%;               /* Prevent children from exceeding parent width */
    max-height: 100%;              /* Prevent children from exceeding parent height */
    overflow: hidden;              /* Hide overflow for child elements */
    box-sizing: border-box;        /* Include padding and borders in the element's total width and height */
  }

}
@layer components {
  .strongs { @apply block mb-1 font-medium text-sm text-orange-100; }
  .notice { @apply mb-1 py-2 pl-[4px] pr-[3px] bg-teal-100 font-medium text-sm text-sky-500 text-glow rounded-lg border-[0.5px] border-teal-400 inline-block notice-fade; }
  .warning { @apply mb-1 font-medium text-sm bg-orange-100 text-orange-600 border-[0.5px] border-orange-500 inline-block notice-fade; }
  .errors { @apply bg-red-100 text-red-600 font-medium text-sm border-[0.5px] border-red-500 px-3 py-2 rounded-lg mt-3 inline-block notice-fade; }
}


@layer utilities {
  .text-peach-100 { @apply text-[#dedfed]; }
  .text-peach-500 { @apply text-[#fedead]; }

  .white-neon {
    color: white;
    text-shadow:
      0px 0px 2px rgba(255, 255, 255, 0.1),
      0px 0px 3px rgba(255, 255, 255, 0.1),
      0px 0px 5px rgba(255, 255, 255, 0.5);
  }
  .text-glow {
    text-shadow:
      0px 0px 2px rgba(255, 255, 255, 0.1),
      0px 0px 3px rgba(255, 255, 255, 0.1),
      1px 1px 5px rgba(255, 255, 255, 0.5);
  }
  .text-shadow-with-glow {
    text-shadow:
      0px 0px 2px rgba(255, 255, 255, 0.1),
      0px 0px 3px rgba(255, 255, 255, 0.1),
      1px 1px 5px rgba(255, 255, 255, 0.5),
      0px -1px 0px rgba(0, 0, 0, 0.9),
      0px -2px 1px rgba(0, 0, 0, 0.6);
  }

  .text-shadow-black {
    --tw-text-shadow-color: #000;
    @supports (color: color-mix(in lab, red, red)) {
      --tw-text-shadow-color: color-mix(in oklab, var(--color-black) var(--tw-text-shadow-alpha), transparent);
    }
  }
  .text-shadow-neutral-800 {
    --tw-text-shadow-color: oklch(26.9% 0 0);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-text-shadow-color: color-mix(in oklab, var(--color-neutral-800) var(--tw-text-shadow-alpha), transparent);
    }
  }
  .text-shadow-amber-900 {
    --tw-text-shadow-color: oklch(41.4% 0.112 45.904);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-text-shadow-color: color-mix(in oklab, var(--color-amber-900) var(--tw-text-shadow-alpha), transparent);
    }
  }
  .text-shadow-indigo-950 {
    --tw-text-shadow-color: oklch(25.7% 0.09 281.288);
    @supports (color: color-mix(in lab, red, red)) {
      --tw-text-shadow-color: color-mix(in oklab, var(--color-indigo-950) var(--tw-text-shadow-alpha), transparent);
    }
  }
  .text-shadow-sm {
    text-shadow: 0px 1px 0px var(--tw-text-shadow-color, rgb(0 0 0 / 0.075)), 0px 1px 1px var(--tw-text-shadow-color, rgb(0 0 0 / 0.075)), 0px 2px 2px var(--tw-text-shadow-color, rgb(0 0 0 / 0.075));
  }
  .text-shadow-md {
    text-shadow: 0px 1px 1px var(--tw-text-shadow-color, rgb(0 0 0 / 0.1)), 0px 1px 2px var(--tw-text-shadow-color, rgb(0 0 0 / 0.1)), 0px 2px 4px var(--tw-text-shadow-color, rgb(0 0 0 / 0.1));
  }
  .text-shadow-lg {
    text-shadow: 0px 1px 2px var(--tw-text-shadow-color, rgb(0 0 0 / 0.1)), 0px 3px 2px var(--tw-text-shadow-color, rgb(0 0 0 / 0.1)), 0px 4px 8px var(--tw-text-shadow-color, rgb(0 0 0 / 0.1));
  }

  .text-shadow-2 {
    text-shadow: 0px 1px 0px rgba(0,0,0,0.9),
                 0px 1px 1px rgba(0,0,0,0.6),
                 0px 2px 2px rgba(0,0,0,0.3);
  }
  .text-shadow-3 {
    text-shadow: 0px 1px 0px rgba(0,0,0,0.3),
                 0px 1px 1px rgba(0,18,42,0.6),
                 1px 6px 9px rgba(180,21,138,0.12);
  }

  .text-align-middle {
    text-align: justify;
  }

  .font-avenir {
    font-family: "Avenir", sans-serif;
  }
  .bebas-neue-regular {
    font-family: "Bebas Neue", serif;
    font-weight: 400;
    font-style: medium;
  }
  .bebas-neue-thin {
    font-family: "Bebas Neue", serif;
    font-weight: 200;
    font-style: thin;
  }
  .comfortaa-light {
    font-family: "Comfortaa", serif;
    font-weight: 200;
    font-style: light;
  }
}
/*
 * 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.
 *


 */