/* Embedding the custom design system and styles */
:root {
    /* Blue-Green Theme */
    --primary: 200 70% 25%;            /* Dark Blue-Green for header */
    --primary-foreground: 0 0% 98%;    /* White text on dark background */
    --background: 200 30% 94%;         /* Light Blue-Green for body */
    --foreground: 300 65% 15%;         /* Black text on light background */

    /* Button Colors */
    --destructive: 350 90% 30%;        /* Dark Red for buttons */
    --destructive-foreground: 0 0% 98%;/* White text on red buttons */

    /* Additional variables may be retained from original for accents, cards, etc. */
    --card: 0 0% 100%;
    --card-foreground: 215 25% 15%;
    --secondary: 50 75% 60%;
    --secondary-foreground: 0 0% 98%;
    --muted: 190 40% 90%;
    --muted-foreground: 215 20% 45%;
    --accent: 190 60% 60%;
    --accent-foreground: 215 25% 15%;
    --border: 190 20% 80%;
    --input: 190 20% 80%;
    --ring: 190 70% 25%;
    --radius: 0.5rem;

    /* Gradients and Shadows (optional, update if used) */
    --gradient-hero: linear-gradient(135deg, hsl(var(--primary)), hsl(190, 50%, 30%));
    --gradient-service: linear-gradient(145deg, hsl(var(--card)), hsl(var(--muted)));
    --gradient-cta: linear-gradient(135deg, hsl(var(--destructive)), hsl(350, 70%, 40%));
    --shadow-card: 0 4px 12px -2px hsl(var(--primary) / 0.1);
    --shadow-hero: 0 20px 40px -10px hsl(var(--primary) / 0.3);
    --shadow-button: 0 4px 8px -2px hsl(var(--destructive) / 0.4);
}
body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* Typographic Animation Styles */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    opacity: 0;
    animation: fadeInUp 0.8s ease-out forwards;
}

.hero-headline-word > span {
    display: inline-block;
    opacity: 0;
    animation: fadeInUp 0.6s ease-out forwards;
}

.sc-iGgWBj {
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
}

/* Location Modal Styles */
.location-modal {
    transition: opacity 0.3s ease;
}

.location-modal-content {
    transition: transform 0.3s ease;
}

/* Location Widget Styles */
#location-widget .arrow {
    transition: transform 0.2s;
}
#location-widget:hover .arrow {
    transform: rotate(180deg);
}

/* Add this to the end of your styles.css file */
#in-area-message {
    color: #16a34a; /* This is a green color */
}

/* Custom styles for the location dropdown */
#location-select {
    background-image: var(--gradient-service);
    color: hsl(var(--foreground));
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem; /* Equivalent to rounded-md */
    border: 1px solid hsl(var(--border));
    transition: background-color 0.2s, color 0.2s;
}

#location-select:hover {
    background-image: none; /* Remove gradient on hover */
    background-color: hsl(0, 72%, 51%); /* This is a standard red-700 color */
    color: hsl(var(--primary-foreground));
}

/* Custom styles for the new location dropdown menu */
#location-menu {
    min-width: 150px; /* Ensures the dropdown has a nice width */
}

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@700&display=swap');

/* Button Animation */
.animated-button {
  justify-content: flex-start !important;
  text-align: left !important;

  font-size: 1rem;
  background: none;
  border: none;
  position: relative;
  /* to do, calc arrow-stripes so they repeat nicely on animation loop  */
  --padding-block: 1rem;
  --padding-inline: 2rem;
  --arrow: 3rem;
  --arrow-stripes: .6rem;

  padding: var(--padding-block) var(--padding-inline);
  padding-right: calc(var(--padding-inline) + var(--arrow));
  text-align: center; /* ← this is implicitly happening because of flex centering */
  display: inline-flex; /* from HTML */
  align-items: center; /* from HTML */
  justify-content: center; /* default if not overridden */
  filter: drop-shadow(4px 4px 4px hsl(0 0% 0% / .5));
  color: white;
  border-radius: 999vmax 0 0 999vmax;
  cursor: pointer;
  transition: all 125ms
}

.animated-button:active {
  scale: .975;
}

.animated-button:hover::after {
  animation-play-state: paused;
}

.animated-button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  background-color: red;
  background-image: linear-gradient(transparent 50%, hsl(0 0% 0% / .5) 0);
  animation: mask-position 5s linear infinite;

  --conic-stops: black 0 90deg, #0000 0;
  --linear-stops: #0000 0px, black 1px var(--arrow-stripes), #0000 calc(var(--arrow-stripes) + 1px) calc(var(--arrow-stripes) * 2);
  --mask-image:
    conic-gradient(from 225deg at right, var(--conic-stops)),
    conic-gradient(from 225deg at right, var(--conic-stops)),
    repeating-linear-gradient(-135deg, var(--linear-stops)),
    repeating-linear-gradient(-45deg, var(--linear-stops));
  --mask-position: 0 0, 0 0, 0 0, 0 100%;
  --mask-position-to: 0, 0, -100% 0 , -100% 100%;
  --mask-size: calc(100% - var(--arrow)) 100%, 100%, 200% 50%, 200% 50%;
  --mask-repeat: no-repeat, repeat, repeat-x, repeat-x;

  -webkit-mask-image: var(--mask-image);
  -webkit-mask-position: var(--mask-position);
  -webkit-mask-size: var(--mask-size);
  -webkit-mask-repeat: var(--mask-repeat);
  -webkit-mask-composite: source-over, source-out, source-over, source-over;

  mask-image: var(--mask-image);
  mask-position: var(--mask-position);
  mask-size: var(--mask-size);
  mask-repeat: var(--mask-repeat);
  mask-composite: add, subtract, add, add;
}

@keyframes mask-position {
  to {
    -webkit-mask-position: var(--mask-position-to);
    mask-position: var(--mask-position-to);
  }
}