/******************************************/
/** General                              **/
/******************************************/

:root {
   --black: #000000;
   --dark: #1E1E1E;
   --gray: #4B4B4B;
   --light: #f5f5f5;
   --white: #ffffff;
   --yellow: #E7B251;
   --red: #872727;
   --scroll-button: #872727;
   --al-background: #FFF9EF;
   --al-text: #4B4B4B;
}

*, *::before, *::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html, body {
   min-height: 100vh;
   min-height: 100dvh;
   color: var(--light);
   background: #1E1E1E;
   font-family: 'amifer';
   font-weight: 400;
}


/******************************************/
/** Helpers                              **/
/******************************************/

/* Colors */

.text-primary {color: var(--primary) !important;}
.text-light {color: var(--light) !important;}
.text-gray {color: var(--gray) !important;}
.text-red {color: var(--red) !important;}
.text-yellow {color: var(--yellow) !important;}



.hover\:text-primary:hover {color: var(--primary) !important;}

.bg-primary {background-color: var(--primary) !important;}
.bg-dark {background-color: var(--dark) !important;}
.bg-red {background-color: var(--red) !important;}
.bg-al {background-color: var(--al-background) !important;}

.hover\:bg-primary:hover {background-color: var(--primary) !important;}

/* Fonts */

.fs-7 {font-size: .95rem;}
.fs-8 {font-size: .8rem;}
.fs-9 {font-size: .7rem;}

.fm-arpona{
   font-family: 'arpona' !important;
}

.fw-extrabold{
   font-weight: 800 !important;
}

/* Sizes */

.button {padding: 15px 25px;}

.w-fit {width: fit-content;}
.w-screen {width: 100vw; width: 100dvw;}
.h-screen {height: 100vh; height: 100dvh;}

/**********************************/
/* MENU                           */
/**********************************/

.menu-content-wrapper {
   position: relative;
}

.menu-content {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   opacity: 0;
   transform: translateY(20px);
   pointer-events: none;
}

.menu-content.is-active {
   position: relative;
   opacity: 1;
   transform: translateY(0);
   transition: opacity 0.4s ease-in, transform 0.4s ease-in;
   pointer-events: auto;
}

.menu-grid {
   display: grid;
   grid-template-columns: repeat(30, 1fr);
   gap: 2rem 1rem;
   align-items: start;
}

.menu-header {
   grid-column: 1 / -1;
   display: grid;
   grid-template-columns: repeat(30, 1fr);
   gap: 1rem;
   text-align: center;
   margin-bottom: 1rem;
}

.menu-header > span:nth-child(1) {
   grid-column: 1 / 22;
}

.menu-header > span:nth-child(2) {
   grid-column: 22 / 26;
}

.menu-header > span:nth-child(3) {
   grid-column: 26 / 31;
}

.menu-item {
   grid-column: 1 / -1;
   display: grid;
   grid-template-columns: repeat(30, 1fr);
   gap: 1rem;
   align-items: start;
}

.menu-item > div:first-child {
   grid-column: 1 / 22;
}

.menu-item > span:nth-child(2) {
   grid-column: 22 / 26;
   text-align: center;
}

.menu-item > span:nth-child(3) {
   grid-column: 26 / 31;
   text-align: center;
}

.menu-footer {
   grid-column: 1 / -1;
   margin-top: 2rem;
}

@media (max-width: 768px) {
   .menu-grid {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
   }

   .menu-header {
      display: none;
   }

   .menu-item {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      padding-bottom: 1.5rem;
      border-bottom: 1px solid rgba(231, 178, 81, 0.2);
   }

   .menu-item > div:first-child h4 {
      font-size: 1.25rem !important;
   }

   .menu-item > div:first-child p {
      font-size: 0.875rem !important;
   }

   .menu-item > span:nth-child(2),
   .menu-item > span:nth-child(3) {
      display: flex;
      align-items: end;
      gap: 0.5rem;
      font-size: 1.25rem !important;
   }

   /* Mostra labels apenas quando existem 2 doses */
   .menu-item:has(span:nth-child(2):not(:empty)):has(span:nth-child(3):not(:empty)) > span:nth-child(2)::before {
      content: '1 dose: ';
      color: var(--light);
      font-size: 0.875rem;
      text-transform: uppercase;
   }

   .menu-item:has(span:nth-child(2):not(:empty)):has(span:nth-child(3):not(:empty)) > span:nth-child(3)::before {
      content: '2 doses: ';
      color: var(--light);
      font-size: 0.875rem;
      text-transform: uppercase;
   }

   .menu-footer {
      margin-top: 1rem;
   }

   .menu-footer .d-flex {
      flex-direction: column !important;
      gap: 0.5rem !important;
   }

   .menu-footer .d-flex span {
      font-size: 0.875rem !important;
   }
}


/* Components */

.icon-md {
	width: 30px;
	height: 30px;
	min-width: 30px;
	min-height: 30px;
}

.icon-lg {
	width: 40px;
	height: 40px;
	min-width: 40px;
	min-height: 40px;
}

/* Animations */

.transition-03 {
   transition: all linear .3s;
   -o-transition: all linear .3s;
   -moz-transition: all linear .3s;
   -webkit-transition: all linear .3s;
}

/* scroll button */

#scroll-button {
   opacity: 0;
   transform: translateY(50px);
   right: 30px;
   bottom: 20px;
   z-index: 1101;
   transition: all 0.5s ease-out;
}

#scroll-button.show {
   opacity: 1;
   transform: translateY(0);
}

/* Buttons */
.btn-outline-yellow {
   color: var(--yellow);
   border-color: var(--yellow);
   border-width: 2px;
   font-weight: 500;
   padding: 0.75rem 2rem;
   transition: all 0.3s ease;
}

.btn-outline-yellow:hover {
   background-color: var(--yellow);
   border-color: var(--yellow);
   color: #1E1E1E;
}


.btn-reservar {
   transition: background-color 0.3s ease, color 0.3s ease;
}
.btn-reservar:hover {
   background-color: #E7B251;
}

/* Alojamento button hover */
.alojamento-btn {
   overflow: hidden;
   position: relative;
}

.alojamento-btn .alojamento-text {
   display: inline-block;
   max-width: 0;
   opacity: 0;
   overflow: hidden;
   white-space: nowrap;
   transition: max-width 0.4s ease, opacity 0.3s ease, margin-right 0.4s ease;
   margin-right: 0;
}

.alojamento-btn:hover .alojamento-text {
   max-width: 150px;
   opacity: 1;
   margin-right: 1rem;
}

.navbar-social-buttons {
   transition: opacity 0.3s ease, transform 0.3s ease;
}

.alojamento-btn:hover ~ .navbar-social-buttons,
.navbar-social-buttons:has(~ .alojamento-btn:hover) {
   opacity: 0;
   /* transform: translateX(20px); */
   pointer-events: none;
}

/******************************************/
/** Forms                                **/
/******************************************/

.form-select,
.form-control,
.input-group {
   border-radius: 8px;
   border: 1px solid #b2b2b2;
}

.input-group:active,
.input-group:focus,
.input-group:focus-within,
.form-select:active,
.form-select:focus,
.form-control:active,
.form-control:focus {
   box-shadow: none;
   border-color: var(--light) !important;
   background-color: transparent;
}

.input-group.disabled,
.form-control:disabled,
.form-select:disabled {
	border-color: #D9D9D9 !important;
	background-color: #D9D9D9 !important;
}

.form-check-input {
   min-width: 1em !important;
   min-height: 1em !important;
}

.form-check-input:checked {
   border-color: var(--primary) !important;
   background-color: var(--primary) !important;
}

.form-check-input:focus {
   box-shadow: none;
   border-color: #D9D9D9 !important;
}

::placeholder {
   opacity: 1;
   color: var(--gray) !important;
}
::-ms-input-placeholder {color: var(--gray) !important;}

/* Alojamento button hover */
.alojamento-btn {
   overflow: hidden;
   position: relative;
   transition: left 0.4s ease, padding 0.4s ease;
   left: 0;
}

.alojamento-btn .alojamento-text {
   display: inline-block;
   max-width: 0;
   opacity: 0;
   overflow: hidden;
   white-space: nowrap;
   transition: max-width 0.4s ease, opacity 0.3s ease, margin-right 0.4s ease;
   margin-right: 0;
}

.alojamento-btn:hover .alojamento-text {
   max-width: 150px;
   opacity: 1;
   margin-right: 1rem;
}

.alojamento-btn:hover {
   right: -95px;
   padding-left: 2rem !important;
}

.navbar-social-buttons {
   transition: opacity 0.3s ease;
   position: relative;
   z-index: 1;
}

.alojamento-btn:hover ~ .navbar-social-buttons {
   opacity: 0;
   pointer-events: none;
}