/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

/* 
 *= require_tree .
 *= require_self
*/
.sort-pill {
  width: 211px;
  height: 70px;
  border-radius: 16px;
  padding: 24px;
  background: #FFFFFF;
  box-shadow: 4px 4px 20px 0px #E0EBFF;
  border: 1px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  transition: background 0.2s, box-shadow 0.2s;
  gap: 8px;
  opacity: 1;
  cursor: pointer;
}

.sort-pill.selected {
  background: rgba(161, 212, 233, 0.2);
  box-shadow: 4px 4px 20px 0px #D7F5FC;
  border: 1px solid transparent;
}

.sort-pill:not(.selected):hover {
  box-shadow: 0 8px 24px 0px #E0EBFF;
}

.bg-gradient-pantone-exact {
    background: linear-gradient(135deg, #A0E7E5 0%, #7DD3FC 20%, #38BDF8 40%, #0EA5E9 60%, #0284C7 80%, #1E40AF 100%);
  }
  
/* Alternative version with more cyan emphasis */
.bg-gradient-pantone-cyan {
  background: linear-gradient(135deg, #1CCED666 0%, #3180F7 25%, #5EA6EC 50%, #AAE6D9 100%);
}

/* Version that closely matches your image */
.bg-gradient-pantone-match {
  background: linear-gradient(135deg, #B2F5EA 0%, #81E6D9 20%, #4FD1C7 35%, #38B2AC 50%, #319795 65%, #2C7A7B 80%, #234E52 100%);
}