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

:root {
   --primary: #29C1D4;
   --secondary: #0E444A;
   --tertiary :#1D8C9B;
   --gray: #555555;
   --light2: #F2F2F2;
   --label: #6B8184;
	--white: #ffffff;
   --light: #F7F7F7;
   
}

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

html, body {
   min-height: 100vh;
   min-height: 100dvh;
   color: var(--secondary);
   background-color: var(--light);
   font-family: 'Switzer', "Roboto";
}
body {
   position: relative; /* referência para o absolute */
   min-height: 100vh;
}

/* Navbar */
.navbar {
   top: 0;
   width: 100%;
   z-index: 1000;
}

#mainNav.navbarFix {
   background-image: url('/img/navbar_fixed.png');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   height: 246px;
   align-items: flex-start;
   min-height: auto; 
}

#mainNav.navbarFix {
    min-height: auto; /* evita altura mínima imposta pelo Bootstrap */
}

.dropdown-menu-custom {
   display: flex;
   flex-direction: column;
   position: absolute;
   background-color: var(--light);
   min-width: 250px;
   padding: 0;
   margin: 0;
   list-style: none;
   z-index: 999;
   top: 100%;
   left: 0;
   opacity: 0;
   gap:5px;
   transform: translateY(15px);
   overflow: hidden;
   pointer-events: none;
   box-shadow: rgba(0, 0, 0, 0.05) 0px 3px 20px;
   border-bottom: none;
   border-top: 3px solid var(--primary);
   transition: all 0.3s ease;
}

.custom-sub-menu{
   position: relative;
}
.custom-sub-menu:hover .dropdown-menu-custom {
   opacity: 1;
   transform: translateY(0);
   pointer-events: auto;
}

.dropdown-menu-custom li a {
   display: block;
   padding: 12px 20px;
   color: var(--black);
   text-decoration: none;
   border-bottom: 1px solid var(--light);
   transition: all 0.3s ease;
}

.dropdown-menu-custom li a:hover {
   background-color: #7367F014;
   color: var(--primary) !important;
   padding-left: 30px;
}

.dropdown-menu-custom li a.active {
   background-color: var(--primary);
   color: var(--white) !important;
   padding-left: 30px;
}


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

/* Colors */

.text-primary {color: var(--primary) !important;}
.text-secondary {color: var(--secondary) !important;}
.text-label {color: var(--label) !important;}
.text-tertiary {color: var(--tertiary)!important;}

.bg-primary {background-color: var(--primary) !important;}
.bg-tertiary {background-color: var(--tertiary) !important;}
.bg-icon {background-color: var(--light2) !important;}

@media (min-width: 992px) {
   .text-lg-white {
      color: white !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;}
.fs-0 {font-size: 2.5rem;}

/* Fonts weights */

.fw-extrabold{font-weight: 800;}
.fw-black{font-weight: 900;}

/* Sizes */

.button {padding: 15px 25px;}

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

/* label categorias */
.label-categoria{
   letter-spacing: 0.6em;
   line-height: 18px;
}
/* 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;
}

/* Border radius */
.border-radius-10{
   border-radius: 10px;
}
.border-radius-20{
   border-radius: 20px;
}

@keyframes rotate {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
}

@keyframes rotate {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
}

.rotate-img, .rotate-img-slow, .rotate-img-fast {
   animation: rotate 1turn linear both;
   animation-timeline: scroll(root);
   animation-range: 0% 100%;
}

/* links */

.brand-link{
   transition: color 0.3s ease;
}
.brand-link:hover {
   color: var(--secondary) !important;
}


/* Pagination */
.pagination {
   display: flex;
   justify-content: center;
   list-style: none;
   padding: 0;
   gap: 8px;
}

.page-item {
   display: inline-block;
}

.page-link {
   display: block;
   padding: 6px 12px;
   color: var(--label);
   text-decoration: none;
   border: none;
   background-color: transparent;

}

.page-item.active .page-link {
   font-weight: bold;
   color: var(--label);
   background-color: transparent;
   pointer-events: none;
   border: none;
}

.page-item:hover .page-link {
   font-weight: bold;
   color: var(--label);
   background-color: transparent;
   border: none;
}

.page-item.disabled .page-link {
   color: #ccc;
   pointer-events: none;
   background-color: transparent;
}




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

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

.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(--primary);
   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;}

.no-click {
   cursor: default;
   pointer-events: none;
}
/* Buttons */
.btn-primary {
   --bs-btn-font-weight: 500 !important;
   --bs-btn-color: var(--primary) !important;
   --bs-btn-bg: var(--white) !important;
   --bs-btn-border-color: transparent !important;
   --bs-btn-hover-color: var(--white) !important;
   --bs-btn-hover-bg: var(--primary) !important;
   --bs-btn-hover-border-color: transparent !important;
   --bs-btn-focus-shadow-rgb: 229, 40, 34 !important;
   --bs-btn-active-color: var(--white) !important;
   --bs-btn-active-bg: var(--primary) !important;
   --bs-btn-active-border-color: transparent !important;
   padding: 15px 25px;
   border-radius: 30px;
}
.btn-outline-primary {
   --bs-btn-font-weight: 500 !important;
   --bs-btn-color: var(--primary) !important;
   --bs-btn-bg: transparent !important;
   --bs-btn-border-color: var(--primary) !important;
   --bs-btn-hover-color: var(--white) !important;
   --bs-btn-hover-bg: var(--primary) !important;
   --bs-btn-hover-border-color: transparent !important;
   --bs-btn-focus-shadow-rgb: 229, 40, 34 !important;
   --bs-btn-active-color: var(--white) !important;
   --bs-btn-active-bg: var(--primary) !important;
   --bs-btn-active-border-color: transparent !important;
   padding: 15px 25px;
   border-radius: 30px;
}

.btn-secondary {
   --bs-btn-font-weight: 500 !important;
   --bs-btn-color: var(--white) !important;
   --bs-btn-bg: var(--primary) !important;
   --bs-btn-border-color: transparent !important;
   --bs-btn-hover-color: var(--white) !important;
   --bs-btn-hover-bg: var(--tertiary) !important;
   --bs-btn-hover-border-color: transparent !important;
   --bs-btn-focus-shadow-rgb: 229, 40, 34 !important;
   --bs-btn-active-color: var(--white) !important;
   --bs-btn-active-bg: var(--tertiary) !important;
   --bs-btn-active-border-color: transparent !important;
   padding: 15px 25px;
   border-radius: 30px;
}

.btn-icon{
   --bs-btn-color: var(--primary) !important;
   --bs-btn-bg: #EAF9FB !important;
   --bs-btn-border-color: transparent !important;
   --bs-btn-hover-color: var(--primary) !important;
   --bs-btn-hover-bg: #EAF9FB !important;
   --bs-btn-hover-border-color: transparent !important;
   --bs-btn-focus-shadow-rgb: 229, 40, 34 !important;
   --bs-btn-active-color: var(--primary) !important;
   --bs-btn-active-bg: #EAF9FB !important;
   --bs-btn-active-border-color: transparent !important;
   border-radius: 800px;
}