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

@layer components {
  .btn-primary {
    @apply rounded bg-accent text-white p-2 block uppercase font-bold;
  }
}

body {
  background-color: var(--peckish-background-color);
}
#basket {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 1000; /* Optional: ensures it stays above other content */
  text-align: center;
}

#basket-expanded {
  right: -70px !important;
  padding: 20px;
  padding-right: 40px !important;
}

#basket-toggle {
  .basket-hidden {
    transform: translateX(100%);
  }
  .basket-visible {
    transform: translateX(0);
  }
}
.call-to-action {
  color: var(--peckish-accent-light-color);
  font-family: "Simonetta-Regular", sans-serif;
  font-weight: bold;
  font-size: 1.3rem;
  background: var(--peckish-accent-color);
  border: 2px solid var(--peckish-accent-dark-color);
  padding: 0.5em 2em;
  border-radius: 4px;
}

.call-to-action:hover {
  color: white;
}

.call-to-action2 {
  font-family: "Simonetta-Regular", sans-serif;
  font-weight: bold;
  font-size: 1.1rem;
  background: #bbb;
  padding: 0.5em 2.2em;
  border-radius: 80px;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}

.call-to-action2:hover {
  color: white;
}

.info-button {
  background-color: var(--peckish-accent-color);
  color: var(--peckish-accent-light-color);
}

.info-button:hover {
  color: white;
}
:root {
  --peckish-background-color: #9ddbcf;
  --peckish-orange-color: #e64a34;
  --peckish-accent-light-color: #d6ff75;
  --peckish-accent-color: #f8c31d;
  --peckish-accent-dark-color: #f8c933;
  --peckish-white-color: #fff;
}
.steam-svg {
  position: absolute;
  left: 50%;
  top: -50px;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: -1;
}

.steam-path {
  opacity: 0.85;
  filter: blur(3px) drop-shadow(0 0 2px #fff8);
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: steam-curl 3.5s ease-in-out infinite;
}

@keyframes steam-curl {
  0% {
    stroke-dasharray: 0, 100;
    opacity: 0;
    transform: translateY(0) scaleX(1) scaleY(1) rotate(-2deg);
  }
  10% {
    opacity: 0.7;
  }
  50% {
    stroke-dasharray: 60, 40;
    opacity: 1;
    transform: translateY(-10px) scaleX(1.05) scaleY(1.1) rotate(2deg);
  }
  90% {
    opacity: 0.7;
  }
  100% {
    stroke-dasharray: 100, 0;
    opacity: 0;
    transform: translateY(-30px) scaleX(1.1) scaleY(1.15) rotate(-2deg);
  }
}
#cookies {
  border-bottom: 1px solid #e5e5e5;
  margin-top: 20px;
  padding-bottom: 60px;
}

.cookie-image {
  filter: drop-shadow(0 -30px 100px rgba(0, 0, 0, 0.9));
  z-index: 0;
}

.cookie-image img {
  z-index: 2;
}

.big-cookie-title {
  font-size: 200px;
  opacity: 0.4;
}

.cookie-details {
  margin-top: 100px;
}

.cookie-info {
  background: rgba(
    221,
    221,
    221,
    0.7
  ); /* 0.7 is the opacity, adjust as needed */
  border-radius: 1rem; /* extra large rounded corners */
  padding: 1.5rem; /* adjust as needed */
  width: 100%;
  z-index: -4000;
  font-family: "Courier New", Courier, monospace;
  font-size: 1.2rem;
  line-height: 1.5;
  color: #333; /* text color */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1); /* subtle shadow for text */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* subtle shadow for the box */
}
@font-face {
  font-family: "SyrupScript-Bold";
  src: url(/assets/syrup-c176680e672b36db0a790aad24773a5d025e9dd9f9066f26b78018e3341e4eb8.woff) format("woff");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Pacifico-Regular";
  src: url(/assets/Pacifico-Regular-d2c27ad83a5c6757c648f945d01f62fb986703a73582fc7a9ccff20e73f7cfe9.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Simonetta-Regular";
  src: url(/assets/Simonetta-Regular-74388a1dc52d1b9cf4ec83733778a32c237ff23341812720e9a620529a06ae07.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Simonetta-Italic";
  src: url(/assets/Simonetta-Italic-8a67ba2e15b660f3bc089994f97e2f280bc94ea7caffc11373e42bc05de015cb.ttf) format("truetype");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "Simonetta-BlackItalic";
  src: url(/assets/Simonetta-BlackItalic-d74a62efbd103d4402b5d1e1fe2f8f7120922c59d01adf908a6043641b91ad61.ttf) format("truetype");
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: "Simonetta-Black";
  src: url(/assets/Simonetta-Black-3bf62ad1a3eba5529f739162a7acfcf28967b3351742c1c4d200b5bfcc2d5a31.ttf) format("truetype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "Rosarivo-Italic";
  src: url(/assets/Rosarivo-Italic-01112f81767a5e4c79cef736af84dd05337d3e0638501e8a0ac41b8a49421043.ttf) format("truetype");
}

@font-face {
  font-family: "AmaticSC-Regular";
  src: url(/assets/AmaticSC-Regular-ec1ca6244b992af563403b56f3a59decd7365b3a55a1e14cde769e2532f72695.ttf) format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "AmaticSC-Bold";
  src: url(/assets/AmaticSC-Bold-6930fc44b9d0ccc219c18191b0b01e00020353945b01af0e0a972e9b636b5560.ttf) format("truetype");
  font-weight: bold;
  font-style: normal;
}
h1 {
  font-family: "Pacifico-Regular", sans-serif;
  color: var(--peckish-white-color);
  font-size: 4.5rem;
  drop-shadow: 0 0 10px var(--drop-shadow-glow);
  text-shadow:
    1px 1px 0 var(--drop-shadow-glow),
    -1px -1px 0 var(--drop-shadow-glow),
    1px -1px 0 var(--drop-shadow-glow),
    -1px 1px 0 var(--drop-shadow-glow);
}

h2 {
  font-family: "AmaticSC-Regular", sans-serif;
  color: #fff;
  font-size: 2.5rem;
  font-weight: bold;
  /* Align the h2 text to the center of the screen */
  text-align: center;
}

h3 {
  font-family: "Pacifico-Regular", sans-serif;
  color: #444;
  z-index: 1000;
  font-size: 1.4rem;
  text-align: center;
}
.logo {
  font-family: "SyrupScript-Bold", sans-serif;
  /* add a 1px outline to the text */
  color: var(--peckish-orange-color);
  text-shadow:
    1px 1px 0 var(--peckish-white-color),
    -1px -1px 0 var(--peckish-white-color),
    1px -1px 0 var(--peckish-white-color),
    -1px 1px 0 var(--peckish-white-color);
}

.logo-gray {
  font-family: "SyrupScript-Bold", sans-serif;
  /* add a 1px outline to the text */
  color: #999;
  text-shadow:
    1px 1px 0 #fff,
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff;
  font-size: 1.5rem;
}
p.subtitle {
  font-family: "Simonetta-Italic", sans-serif;
  color: var(--peckish-white-color);
  font-size: 1.6rem;
  font-style: italic;
  text-shadow:
    1px 1px 0 var(--drop-shadow-glow),
    -1px -1px 0 var(--drop-shadow-glow),
    1px -1px 0 var(--drop-shadow-glow),
    -1px 1px 0 var(--drop-shadow-glow);

  span {
    font-family: "Simonetta-BlackItalic", sans-serif;
    font-weight: bold;
    text-decoration-line: underline;
    text-decoration-color: var(--peckish-accent-color);
    text-decoration-thickness: 3px;
    text-underline-offset: 1px; /* Adjust as needed */
  }
}
#timeslot-picker {
  margin-top: 80px;
  margin-bottom: 60px;
  /* Align the timeslot picker to the center of the screen */
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  z-index: 1000;
}

#timeslot-picker {
  filter: drop-shadow(0 0px 10px rgba(255, 255, 255, 1));
}
section.title-section {
  text-align: center;
}
/*
 * 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.
 *


 */