@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alice&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;
.table.calendar {
  table-layout: fixed;
  width: 100%;
}

.table.calendar td,
.table.calendar th {
  vertical-align: top;
  padding: 0; /* so our .day-content can fill */
}

.day {
  margin: 0 !important;
  padding: 0 !important;
}

/* day-content is each cell's container */
.day-content {
  position: relative;
  min-height: 120px;         /* ensure enough vertical space */
  border: 0.01px solid #ddd;   /* border around each cell */
  z-index: 1;               /* Ensure it is below reserva-line */
}

/* Day number in top-left corner */
.day-number {
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 0.8rem;
  color: #666;
  z-index: 2;
}

/* Each reserva-line is absolutely positioned within the day cell */
.reserva-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 10px; /* Ensure it is displayed on top of day-content */
  /* top is set inline based on index (stacking) */
  /* background-color is also set inline based on the cabana color */
}

/* MIDDLE day in the range: fill the entire cell horizontally */
.reserva-line.middle {
  left: 0;
  right: 0;
}

/* START day: fill from 50% to the right edge */
.reserva-line.start {
  left: 55%;
  right: 0;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

/* END day: fill from left edge to 50% */
.reserva-line.end {
  left: 0;
  right: 55%;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

/* Single-day reservation: basically a small circle in the center */
.reserva-line.start-end {
  left: 50%;
  width: 0;
  height: 10px;
  border-radius: 50%;
  transform: translateX(-50%);
}

/* Legend styling */
.legend-color {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  display: inline-block;
}

.highlight {
  background-color: yellow !important;
  transition: background-color 1s ease;
}

.simple-calendar td.today {
  background-color: #98bdcb; /* Light blue or any subtle color */
}


/* The big number on the left */
.simple-calendar .calendar-heading .display-1 {
  font-size: 4rem; /* Adjust as you like */
  line-height: 1;
  margin: 0;
}

/* The month/year text on the right */
.simple-calendar .calendar-title {
  font-size: 1.8rem; /* Slightly bigger if you want */
  text-transform: uppercase;
  margin: 0;
}

/* Subtle table styling (already in your code, but you can refine) */
.table.calendar {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

.table.calendar th {
  text-transform: uppercase;
  font-size: 0.8rem;
  color: #666;
  text-align: center;
}
.bg-botao-verde {
  background-color: #2f4538 !important;
}
.card-product {
  overflow: hidden;
  height: 120px;
  background: white;
  box-shadow: 0 0 15px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
}

.card-product img {
  height: 100%;
  width: 120px;
  object-fit: cover;
}

.card-product h2 {
  font-size: 16px;
  font-weight: bold;
}

.card-product p {
  font-size: 12px;
  line-height: 1.4;
  opacity: .7;
}

.increment-button {
  /* width: 80px; */
}

.decrement-button {
  /* width: 80px; */
}

.card-product-info {
  max-width: 80%;
}
.navbar {
  background-color: bisque;
}
/*
 * 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.
 *


 */

 @import url(/assets/item-1c722ca3a1ae30d1b08bb41255cee315f308d2fc5f2f23621940ba76d3e2f030.css);
 @import url(/assets/navbar-0ea8225e9dad2ce5410652c90e9e6f7de37c69472b1700d4fe3ef59de8505b5d.css);
 @import url(/assets/calendar-2bc2938f2eb854148091de5d999a8535b3ea8fac9224fe01563baf290a06bd73.css);