:root {
	--space-cadet: rgba(24, 27, 54, 1);
	--rich-black: rgba(12, 17, 35, 1);
	--indian-red: rgba(189, 102, 101, 1);
	--ultra-violet: rgba(108, 87, 152, 1);
	--marian-blue: rgba(68, 67, 128, 1);
	--rich-black-5: rgba(13, 18, 36, 1);
	--raspberry-rose: rgba(182, 56, 97, 1);
	--champagne-pink: rgba(244, 211, 215, 1);
	--saffron: rgba(252, 191, 73, 1);
	--gunmetal-gray: rgba(44, 53, 70, 1);
	--ash-gray: rgba(176, 176, 179, 1);

  --green: #64fa64ff;
	--greendark: #329632ff;
	--blue: #4F98CA;
	--white: #EFFFFB;
	--black: #272727;
}

/*
--space-cadet: #181B36;
--rich-black: #0C1123;
--indian-red: #BD6665;
--ultra-violet: #6C5798;
--marian-blue: #444380;
--rich-black-5: #0D1224;
--raspberry-rose: #B63861;
--champagne-pink: #F4D3D7;
--saffron: #FCBF49;
--gunmetal-gray: #2C3546;
--ash-gray: #B0B0B3;
*/

/* ---- PLUGIN ---- */
/* MAIN CONTAINER - id not class */

#mvbr-main {
	display: flex; align-items: center; justify-content: center; flex-direction: column;
    color: var(--black);
    font-family: sans-serif;
  width: 90vw;
  min-width: 300px;
  max-width: 420px;
}

/* ROOM INDICATOR */
.mvbr-room-indicator {
	display: flex; align-items: center; justify-content: center; flex-direction: column;
  width: 100%; height: 6rem;
}

.mvbr-room-indicator-title {
  font-family: sans-serif; font-size: 1.5rem; font-weight: 700;
  color: var(--black);
}

.mvbr-room-indicator-name {
  font-family: sans-serif; font-size: 2.5rem; font-weight: 700;
  color: var(--blue);
  text-shadow: 1px 1px 1px black;
}

/* PROGRESS BAR */
.mvbr-progress {
	display: flex; align-items: center; justify-content: space-between;
	height: 8rem;
	z-index: 1;
}

.mvbr-step {
	display: flex; align-items: center; justify-content: center;
	font-family: sans-serif; font-weight: 700; color: var(--white);
	background-color: var(--blue);
  height: 5rem;
  width: 5rem;
  margin: 0.1rem;
	border-radius: 50%;
	border: 4px solid transparent;
	box-shadow: 5px 5px 5px black;
}
.mvbr-step-active {
	background-color: var(--blue);
	color: var(--white);
  border: 4px solid var(--white);
}

.mvbr-step-unavailable {
	background-color: var(--black);
	cursor: not-allowed;
	color: var(--white);
  opacity: 0.6;
}

/* CONTENT FOR STEPS */
.mvbr-content {
  width: 100%;
}

.mvbr-step-content {
	width: 100%;
}

.mvbr-step-content-hidden {
	display: none;
}

/* CALENDAR STEP CONTENT*/
.mvbr-calendar {
  width: 100%;
  font-family: sans-serif;
}

.mvbr-calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  font-weight: 700;
}

.mvbr-calendar-month {
  display: flex; align-items: center; justify-content: center;
  width: 60%;
  padding: 0.5rem;
  font-size: 1rem;
  border-radius: 64px;
  border: 1px solid var(--black);
  background-color: var(--white);
  color: var(--black);
}

.mvbr-calendar-header button {
  background-color: var(--white);
  font-family: sans-serif; font-weight: 700; color: var(--black); 
  font-size: 2rem !important;
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 64px;
  border: 1px solid var(--black);
  transition: color 0.2s ease;
}

#mvbr-main .mvbr-calendar-header button span {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--black);
  display: inline-block;
}

.mvbr-calendar-header button:hover {
  background-color: var(--blue);
}

.mvbr-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  text-align: center;
  gap: 2px;
}

.mvbr-day-name {
  font-family: sans-serif; font-size: 1rem; font-weight: 700;
  color: var(--black);
  padding-bottom: 5px;
}

.mvbr-day {
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  background-color: var(--black);
}

.mvbr-day.empty {
  opacity: 0.5;
}

.mvbr-day button.mvbr-day-btn {
  position: relative;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  font-size: 1rem;
  font-weight: 500;
  color: var(--white);
  cursor: pointer;
  border-radius: 4px;
  transition: background 0.2s ease, color 0.2s ease;
  white-space: nowrap;   /* prevent number wrapping */
}

.mvbr-day.mvbr-past {
  color: var(--white);
  cursor: not-allowed;
  pointer-events: none;
  opacity: 0.5;
}

.mvbr-day.fully-booked { 
  position: relative;
  pointer-events: none;
  border: 4px solid red;
}

/* X */
.mvbr-day.fully-booked::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(45deg, transparent 48%, red 48%, red 52%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, red 48%, red 52%, transparent 52%);
}

.mvbr-day.partially-booked button.mvbr-day-btn { 
	border: 4px solid yellow;
}

.mvbr-day.mvbr-past button {
  cursor: not-allowed;
  pointer-events: none;
}

.mvbr-day.mvbr-today button {
  background: var(--black);
}

.mvbr-day.mvbr-future button:hover {
  background: var(--blue);
}

.mvbr-day.active button {
  background: var(--blue);
  border: 4px solid var(--white);
}

#mvbr-slots {
	display: flex; align-items: center; justify-content: space-evenly;
	width: 100%;
  margin-top: 1rem;
}

.mvbr-slot {
	display: flex; align-items: center; justify-content: center;
	border-radius: 4px;
  border: 1px solid black;
	color: var(--black);
    height: 64px;
    width: 128px;
	font-family: sans-serif;
  font-weight: 500;
	font-size: 1.5rem !important;
	background-color: var(--white);
}

.mvbr-slot:hover {
  border: 4px solid var(--white);
  background-color: var(--blue);
  color: var(--white);

}

.mvbr-no-slots {
    padding: 1rem;
    color: var(--indian-red);
    font-weight: bold;
}

.mvbr-slot.active {
    background-color: var(--blue);
    color: var(--white);
    border:4px solid var(--white);
}

/* FOOD ITEMS MENU */

.mvbr-food-item {
  display: flex; align-items: center; justify-content: space-between;
	padding: 4px;
  border-radius: 4px;
  background-color: var(--blue);
  border: 1px solid white;
  margin-top: 0.5rem;
}

.mvbr-food-image-wrapper {
    width: 6rem;      /* adjust size as needed */
    height: 6rem;     /* same as width to make it square */
    overflow: hidden;
    border-radius: 8px; /* optional rounded corners */
    margin-right: 10px; /* space from name/price */
    flex-shrink: 0;    /* prevent shrinking in flex containers */
}

.mvbr-food-image {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* This crops and zooms the image */
    object-position: center; /* Keep the center of the image */
    display: block;
}

.mvbr-food-item-right {
	display: flex; flex-direction: column;
}

.mvbr-food-name {
  font-weight: 700;
  color: var(--white);
}

.mvbr-food-price {
  font-weight: 700;
  color: var(--white);
}

.mvbr-food-qty-wrapper {
  display: flex; align-items: center;
  gap: 4px;
	height: 3rem;
}

.mvbr-food-qty {
  width: 3rem;
	height: 100%;
  text-align: center;
  font-size: 2rem;
	font-weight: 700;
  padding: 2px;
}

.mvbr-qty-btn {
  background: rgba(0,0,0,0.5);
  color: var(--white);
  border: none;
  border-radius: 4px;
  width: 3rem;
  height: 100%;
  cursor: pointer;
  font-size: 2rem;
}

.mvbr-total {
  margin-top: 0.5rem;
  color: var(--black);
  font-weight: 500;
}

/* CONTACT FORM */
.mvbr-error {
    color: red;
    font-size: 14px;
    margin-top: 4px;
    display: none;
}

label[for="mvbr-name"] {
  margin-top: 1rem;
  color: var(--black);
  font-weight: 700;
}

#mvbr-name, #mvbr-email, #mvbr-phone {
  border-radius: 64px;
  border: 1px solid black;
  margin-top: 4px;
}

#mvbr-description {
  border-radius: 8px;
  border: 1px solid black;
  margin-top: 4px;
}

label[for="mvbr-description"] {
  margin-top: 1rem;
  color: var(--black);
  font-weight: 700;
}

label[for="mvbr-privacy"] {
  margin-top: 1rem;
  color: var(--black);
  font-weight: 700;
}

label[for="mvbr-privacy"] a {
  color: var(--blue);
}

.mvbr-desc-counter {
    font-size: 14px;
    color: var(--white);
    margin-top: 4px;
    text-align: right;
}

/* SUMMARY */
#mvbr-summary {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 1rem;
  margin-bottom: 1rem;
  background: linear-gradient(var(--blue), transparent);
  border-top: 1px solid var(--white);
  border-radius: 16px;
}

#mvbr-summary p {
    margin: 0.3rem 0;   /* was ~1rem */
    line-height: 1.3;   /* optional tighter spacing */
    color: var(--black);
}

#mvbr-summary h4 {
  color: var(--white);
  text-shadow: 1px 1px var(--blue);
}

#mvbr-summary h3 {
  color: var(--blue);
  font-weight: 700;
  font-size: 1.4rem;
}

#mvbr-summary li {
    margin: 0.2rem 0;
    color: var(--black);
}

#mvbr-confirm {
  width: 100%;
  color: var(--white);
  background-color: var(--blue);
  border: 4px solid var(--white);
  border-radius: 64px;
  font-weight: 700;
}

#mvbr-confirm:hover {
  background-color: var(--green);
}

/* NEXT STEP BUTTON*/

.mvbr-next-step {
  width: 100%;
  background-color: var(--blue);
  color: var(--white);
  font-weight: 700;
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 4px solid var(--white);
  border-radius: 64px;
}

.mvbr-next-step:hover {
  background-color: var(--green);
  border: 4px solid var(--white);
}

.mvbr-next-step:disabled {
    background-color: var(--black);
    border: 4px solid var(--white);
    color: var(--white);
    cursor: not-allowed;
    opacity: 0.4;
}