:root {
    /* Paleta principal NaMesa */
    --primary-color: #7C2033;
    --primary-color-rgb: 124, 32, 51;
    --primary-color-light: #9A4155;
    --primary-color-dark: #5A1826;
    --brand-color: var(--primary-color);
    --secondary-color: #F4F2EF;
    --black-color: #202020;
    --white-color: #FFFFFF;
    --yellow-color: #FFA237;

    /* Bootstrap / design tokens */
    --bs-gray: #F4F2EF;
    --bs-dark: #202020;
    --bs-dark-rgb: 32, 32, 32;
    --bs-light: #F4F2EF;
    --bs-light-rgb: 244, 242, 239;
    --bs-primary: var(--primary-color);
    --bs-primary-rgb: var(--primary-color-rgb);
    --bs-danger: var(--primary-color);
    --bs-danger-rgb: var(--primary-color-rgb);
    --bs-form-invalid-color: var(--primary-color);
    --bs-form-invalid-border-color: var(--primary-color);

	--nm-border-radius: 2.5rem;
	/* Altura mínima da barra superior (usada também no cálculo do main) */
	--nm-topbar-min-height: 80px;
}

/**
 * Barra superior global (ex.: partials/header).
 * Substitui utilitários Bootstrap que estavam inline no <header>:
 * top-0, position-sticky, z-index 1030, d-flex, flex-row, w-100,
 * align-items-center, justify-content-between, bg-light, py-2, min-height.
 */
.nm-topbar {
	position: sticky;
	top: 0;
	z-index: 1030;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	min-height: var(--nm-topbar-min-height);
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	box-sizing: border-box;
	background-color: var(--bs-primary);

	font-weight: 400;
	font-size: 0.875rem;
	color: #fff;
}

.nm-topbar .btn {
	font-weight: inherit;
	font-size: inherit;
	color: #fff;
}

.nm-topbar a {
	text-decoration: none;
	color: #fff;
}

.nm-topbar a:hover {
	color: rgba(255, 255, 255, 0.75);
}

.nm-topbar a.active,
.nm-topbar a.active span {
	color: #ffffff73 !important;
	font-weight: 600;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--bs-dark);
    background-color: var(--bs-light);
}

:root, [data-bs-theme="light"] {

}

:root, [data-bs-theme="dark"] {

}

p, a, span, div, label, li, button, input, textarea {
    color: inherit;
}

a.active {
    color: var(--bs-primary) !important;
}

a.active span {
    color: var(--bs-primary) !important;
}

.pac-container {
    z-index: 9999 !important;
}

/* Estilização do input group */
.input-group {
    padding: 0;
}

.input-group:focus-within {
    border-radius: 0.25rem;   /* Igual ao padrão do input */
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25); /* Efeito glow */
}

.input-group .form-control:focus {
    box-shadow: none;
    border-color: transparent;
}
/* Fim da estilização do input group */

/* Botões danger alinhados à paleta da marca */
.btn-danger {
    --bs-btn-bg: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-bg: var(--primary-color-dark);
    --bs-btn-hover-border-color: var(--primary-color-dark);
    --bs-btn-active-bg: var(--primary-color-dark);
    --bs-btn-active-border-color: var(--primary-color-dark);
    --bs-btn-focus-shadow-rgb: var(--primary-color-rgb);
}

.btn-outline-danger {
    --bs-btn-color: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-bg: var(--primary-color);
    --bs-btn-hover-border-color: var(--primary-color);
    --bs-btn-active-bg: var(--primary-color-dark);
    --bs-btn-active-border-color: var(--primary-color-dark);
    --bs-btn-focus-shadow-rgb: var(--primary-color-rgb);
}

/* Estilização de botões */
.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-color: var(--white-color);
    --bs-btn-hover-bg: var(--primary-color-dark);
    --bs-btn-hover-border-color: var(--primary-color-dark);
    --bs-btn-hover-color: var(--white-color);
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-active-color: var(--white-color);

    & span {
        color: var(--white-color);
    }

    &:hover span {
        color: var(--white-color);
    }

    &:active {
        border-color: var(--white-color);
    }

    &:active span {
        color: var(--white-color) !important;
    }
}

.border-primeira {
    border-color: var(--brand-color) !important;
}
/* Fim da estilização de botões */

body > header, body > footer, body > main {
    padding-left: 0;
    padding-right: 0;
}

@media (min-width: 1400px) {
    body > header, body > footer, body > main {
        padding-left: 12rem;
        padding-right: 12rem;
    }
}

main {
	min-height: calc(100vh - var(--nm-topbar-min-height));
}

footer {
    font-size: 0.875rem;
    font-weight: 400;
}

.input-group:has(.clean-input) > * {
    border-color: rgb(241, 241, 241);
}


.clean-input::placeholder {
    color: #9a9a9a;
    font-size: 14px;
    font-weight: 300;
}

.form-control:focus {
    border-color: var(--bs-primary);
	outline: none !important;
}

.form-control:focus,
.form-control:focus-visible {
    box-shadow: none !important;
    outline: none !important;
}



.nm-scroll::-webkit-scrollbar{
	transition: 500ms all;
	top: -5px;
	right: -5px;
	width: 7px;
	height: 7px;
	background-color: rgba(153, 153, 153, 0.151);
	margin: 5px;
	border-radius: 10px;
  }
  
  /* Personalizando a trilha da rolagem */
  .nm-scroll::-webkit-scrollbar-track{
	background-color: #7c7c7c15;
  }
  
  /* Personalizando a alça de rolagem arrastável. */
  .nm-scroll::-webkit-scrollbar-thumb{
	background-color: transparent;
	border-radius: 10px;
	transition: background-color 0.2s ease;
  }

  .nm-scroll:hover::-webkit-scrollbar-thumb,
  .nm-scroll:focus-within::-webkit-scrollbar-thumb,
  .nm-scroll::-webkit-scrollbar-thumb:hover,
  .nm-scroll::-webkit-scrollbar-thumb:active {
	background-color: var(--primary-color);
  }

.nm-scroll-minimal::-webkit-scrollbar{
	transition: 500ms all;
	top: -5px;
	right: -5px;
	width: 1px;
	height: 1px;
	background-color: transparent;
	margin: 5px;
	border-radius: 10px;
  }
  
  /* Personalizando a trilha da rolagem */
  .nm-scroll-minimal::-webkit-scrollbar-track{
	background-color: transparent;
  }
  
  /* Personalizando a alça de rolagem arrastável. */
  .nm-scroll-minimal::-webkit-scrollbar-thumb{
	background-color: transparent;
	border-radius: 2px;
	height: 1px;
	width: 1px;
	transition: background-color 0.2s ease;
  }

  .nm-scroll-minimal:hover::-webkit-scrollbar-thumb,
  .nm-scroll-minimal:focus-within::-webkit-scrollbar-thumb,
  .nm-scroll-minimal::-webkit-scrollbar-thumb:hover,
  .nm-scroll-minimal::-webkit-scrollbar-thumb:active {
	background-color: var(--primary-color);
  }

.nm-offcanvas-user {
	width: 100%;
	min-width: 0;
}

.nm-offcanvas-user__profile {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	color: var(--black-color);
}

.nm-offcanvas-user__name {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.2;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.nm-offcanvas-user__chevron {
	font-size: 0.75rem;
	color: rgba(32, 32, 32, 0.45);
}

.nm-offcanvas-user__logout {
	color: var(--primary-color) !important;
	font-weight: 500;
	font-size: 1rem;
	text-decoration: none;
	white-space: nowrap;
}

.nm-offcanvas-user__logout:hover,
.nm-offcanvas-user__logout:focus {
	color: var(--primary-color-dark) !important;
}

/* Number quantity stepper */
.number-quantity-component {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.number-quantity-component__controls {
	--number-quantity-component--padding: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	width: max-content;
	padding: var(--number-quantity-component--padding);
	border-radius: calc(var(--number-quantity-component--padding) + 10px);
	background-color: #f2ebe3;
}

.number-quantity-component__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: none;
	border-radius: 10px;
	background-color: var(--white-color);
	color: var(--primary-color-dark);
	font-size: 0.75rem;
	cursor: pointer;
	transition: opacity 0.15s ease;
	outline: none;
	box-shadow: none;
}

.number-quantity-component__button:hover:not(:disabled) {
	opacity: 0.85;
}

.number-quantity-component__button:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.number-quantity-component__button:focus {
	outline: none;
	box-shadow: none;
}

.number-quantity-component__input {
	flex: 0 0 auto;
	width: 1.25rem;
	min-width: 0;
	padding: 0;
	border: none;
	background: transparent;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--black-color);
	text-align: center;
}

.number-quantity-component__input:focus {
	outline: none;
	box-shadow: none;
}

.number-quantity-component__add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--primary-color);
	font-size: 1rem;
	cursor: pointer;
	transition: opacity 0.15s ease;
}

.number-quantity-component__add:hover:not(:disabled) {
	opacity: 0.85;
}

.number-quantity-component__add:disabled {
	opacity: 0.4;
	cursor: not-allowed;
}

.complement-list__item .number-quantity-component {
	flex: 0 0 auto;
	justify-content: flex-end;
}

/**
 * Huge Icons — icon font (mesmo padrão do Font Awesome).
 * Catálogo: https://hugeicons.com/icons
 */
.hgi-stroke {
	display: inline-block;
	line-height: 1;
	vertical-align: -0.125em;
}

.hgi-stroke--sm {
	font-size: 0.875em;
}

.hgi-stroke--lg {
	font-size: 1.25em;
}

.hgi-stroke--xl {
	font-size: 1.5em;
}

/**
 * Phosphor Icons — icon font.
 * Catálogo: https://phosphoricons.com
 */
.phosphor-icon {
	display: inline-block;
	line-height: 1;
	vertical-align: -0.125em;
}

.phosphor-icon--sm {
	font-size: 0.875em;
}

.phosphor-icon--lg {
	font-size: 1.25em;
}

.phosphor-icon--xl {
	font-size: 1.5em;
}