/* =====================================================
   NGA - Sistema Unificado de Estilos
   Arquivo: nga-unified.css
   Versão: 1.0
   ===================================================== */

/* ========== 1. VARIÁVEIS GLOBAIS ========== */
:root {
	/* Cores Principais */
	--nga-menu-bg-color: #0f172a; /* Cor do menu lateral NGA */
	--nga-primary-color: #0f172a; /* Azul escuro principal */
	--nga-primary-color-light: #43536b; /* Azul escuro claro */
	--nga-primary-hover: #667eea; /* Hover primário */
	--nga-secondary-color: rgb(247, 183, 51); /* Dourado/Laranja */
	--nga-secondary-color-light: rgba(247, 183, 51, 0.1); /* Dourado/Laranja claro */
	--nga-secondary-hover: #ea580c; /* Hover secundário */
	--nga-accent-color: #FF385C; /* Vermelho Airbnb */

	/* Cor de destaque para mensagens */
	--message-accent-color: #f7b733;

	/* Sobrescrever variáveis do Bootstrap para consistência */
	--bs-primary: #1a1f36;
	--bs-primary-rgb: 26, 31, 54;
	/* Cores de Status */
	--success-color: #48bb78; /* Verde */
	--warning-color: #ed8936; /* Laranja */
	--danger-color: #f56565; /* Vermelho */
	--info-color: #4299e1; /* Azul claro */
	/* Cores Neutras */
	--white-color: #ffffff; /* Branco */
	--dark-color: #111827; /* Quase preto */
	--light-color: #f9fafb; /* Quase branco */
	--border-color: #DDDDDD; /* Borda padrão */
	/* Escala de Cinza */
	--gray-50: #fafbfc;
	--gray-100: #f7fafc;
	--gray-200: #edf2f7;
	--gray-300: #e2e8f0;
	--gray-400: #cbd5e0;
	--gray-500: #a0aec0;
	--gray-600: #718096;
	--gray-700: #4a5568;
	--gray-800: #2d3748;
	--gray-900: #1a202c;
	/* Gradientes */
	--gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	--gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
	--gradient-accent: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
	--gradient-dark: linear-gradient(135deg, #1a1f36 0%, #2d3561 100%);
	--gradient-light: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	/* Sombras */
	--shadow-xs: 0 0 0 1px rgba(0, 0, 0, 0.05);
	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
	--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	--shadow-danger-sm: 0 1px 2px 0 rgb(255, 102, 102, 0.05);
	/* Transições */
	--transition-fast: all 0.15s ease;
	--transition-base: all 0.3s ease;
	--transition-slow: all 0.5s ease;
	/* Tipografia */
	--font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-display: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.bg-silver-light {
	background-color: var(--gray-400) !important;
	color: var(--dark-color) !important;
}

.bg-primary {
	background-color: var(--nga-primary-color) !important;
	color: white !important;
}

.bg-primary-light {
	background-color: var(--nga-primary-color-light) !important;
	color: white;
	opacity: 0.7;
}

.bg-secondary {
	background-color: var(--nga-secondary-color) !important;
	color: var(--nga-primary-color);
}

.bg-secondary-light {
	background-color: var(--nga-secondary-color-light) !important;
	color: var(--nga-primary-color);
}

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

.text-secondary-nga {
	color: var(--nga-secondary-color) !important;
}

/* Força a cor primária do Bootstrap a usar nossa cor personalizada */
.text-primary {
	color: var(--nga-primary-color) !important;
}

.border-primary {
	border-color: var(--nga-primary-color) !important;
}

/* ========== 2. RESET E BASE ========== */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

body {
	font-family: var(--font-primary);
	color: var(--dark-color);
	background-color: var(--gray-200);
	line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: 1rem;
	color: var(--nga-primary-color);
}

a {
	color: var(--nga-primary-color);
	text-decoration: none;
	transition: var(--transition-fast);
}

a:hover {
	color: var(--nga-primary-hover);
}

/* ========== 3. CONTAINERS E LAYOUTS ========== */

.container {
	padding: 0;
}

/* Container específico para header */
.container-header {
	width: 100%;
	height: 40px;
	padding-right: var(--bs-gutter-x, 0.75rem);
	padding-left: var(--bs-gutter-x, 0.75rem);
	margin-right: auto;
	margin-left: auto;
	/* Flexbox para alinhar logo, menu e hamburger na mesma linha */
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px; /* Espaçamento entre elementos */
}

@media ( min-width : 1400px) {
	.container, .container-navbar, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
		max-width: 1500px;
	}

	.container-header {
		max-width: 100%;
	}
}

.airbnb-container {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 40px;
}

@media ( max-width : 1280px) {
	.airbnb-container {
		padding: 0 24px;
	}
}

/* ========== 4. NAVEGAÇÃO ========== */
.navbar {
	box-shadow: var(--shadow-sm);
	padding: 0.75rem 0;
}

.navbar-brand {
	font-size: 1.25rem;
	letter-spacing: -0.025em;
}

.navbar-brand a {
	font-weight: 700;
	font-size: 2.25rem;
	letter-spacing: -0.025em;
	align-self: flex-start;
	padding-top: 0 !important;
}

.navbar-brand span {
	color: var(--nga-secondary-color);
}

/* Layout do brand: logo + 3 linhas de texto */
#brand {
	transition: var(--transition-fast);
	position: fixed;
	top: 0;
	left: auto;
	flex-shrink: 0;
	height: 65px;
}

#brand img {
	height: 100%;
}

#brand:hover {
	box-shadow: var(--shadow-md);
}

.navbar-brand-wrapper {
	display: flex;
	align-items: center;
}

.navbar-brand-link {
	display: flex;
	align-items: center;
}

.brand-logo {
	border-radius: 6px;
	background-color: white;
	height: 36px;
	margin-top: -2px;
  	width: auto;
}

.brand-sigla {
	font-size: 1.4rem;
	font-weight: 800;
	color: var(--nga-secondary-color);
	letter-spacing: -0.02em;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
	position: relative;
	display: inline-block;
	transition: all 0.3s ease;
}

.brand-nome {
	font-size: 0.65rem;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.95);
	letter-spacing: 0.01em;
	position: relative;
	top: -0.5rem;
	transition: all 0.3s ease;
}

.brand-slogan {
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.75rem;
	font-weight: 200;
	letter-spacing: 0.05em;
	font-style: italic;
	margin-top: -0.5rem;
	display: block;
	transition: all 0.3s ease;
	position: relative;
	padding-left: 0rem;
}

/* Manter compatibilidade com classe antiga */
.navbar-brand-slogan {
	color: rgba(255, 255, 255, 0.8);
	font-weight: 300;
	font-size: 0.75rem;
	letter-spacing: -0.025em;
	font-style: italic;
}

.navbar-dark .nav-link {
	color: white;
	font-weight: 300;
	font-size: 0.95rem;
	border-radius: 6px;
	transition: var(--transition-fast);
}

.navbar-nav {
	gap: 0.2rem;
	color: var(--nga-secondary-color);
}

.navbar-nav .nav-link {
	color: var(--nga-secondary-color);
	font-weight: 300;
	font-size: 0.95rem;
	border-radius: 6px;
	transition: var(--transition-fast);
}

.navbar-nav .nav-link:hover {
	color: var(--nga-secondary-color);
	background-color: rgba(255, 255, 255, 0.2);
}

/* Menu do usuário alinhado ao topo - APENAS DESKTOP */
@media (min-width: 769px) {
	.navbar-collapse {
		display: flex !important;
		align-items: flex-start;
	}
}

#user-menu {
	align-self: flex-start;
	margin-top: -6px;
}

.navbar-user-toggle {
	border: 1px solid var(--nga-secondary-color);
	border-radius: 6x;
	padding: 0.25rem 0.5rem;
	gap: 0.5rem;
	cursor: pointer;
	transition: var(--transition-fast);
}

.navbar-user-name {
	color: var(--nga-secondary-color);
	font-weight: 300;
	font-size: 0.95rem;
}

.navbar-dark .nav-link:hover {
	color: #fff;
	background-color: rgba(247, 183, 51, 0.8);
}

.navbar-dark .navbar-nav .nav-link.active {
	color: #fff;
	background-color: rgba(255, 255, 255, 0.2);
}

.btn-search {
	background-color: var(--nga-primary-color);
	border: 1px solid var(--nga-secondary-color);
	color: var(--nga-secondary-color);
	padding: 0.5rem 1rem;
	border-radius: 6px;
	font-weight: 500;
	transition: var(--transition-fast);
}

.btn-search:hover {
	background-color: var(--nga-secondary-color);
	border: 1px solid var(--nga-secondary-color);
	color: white;
	padding: 0.5rem 1rem;
	border-radius: 6px;
	font-weight: 500;
	transition: var(--transition-fast);
}

.dropdown-menu {
	border: 0px solid var(--gray-100);
	box-shadow: var(--shadow-xl);
	border-radius: 8px;
	padding: 0.5rem;
	background-color: var(--nga-primary-color);
	box-shadow: var(--shadow-2xl);
	z-index: 2050;
}

.dropdown-menu li a {
	color: var(--nga-secondary-color);
}

.dropdown-divider {
	height: 0;
	margin: var(--bs-dropdown-divider-margin-y) 0;
	overflow: hidden;
	border-top: 1px solid white;
	opacity: 1;
}

.dropdown-item {
	border-radius: 6px;
	padding: 0.5rem 1rem;
	font-size: 0.95rem;
	transition: var(--transition-fast);
}

.dropdown-logout {
	color: var(--nga-secondary-color);
}

.dropdown-logout:hover {
	background-color: var(--danger-color);
	color: white;
}

.dropdown-item:hover .logout {
	background-color: var(--danger-color);
	color: white;
}

.dropdown-toggle::after {
	display: inline-block;
	margin-left: 12em;
	vertical-align: 1em;
	content: "";
	border-top: .3em solid;
	border-right: .3em solid transparent;
	border-bottom: 0;
	border-left: .3em solid transparent;
}

/* ========================================
   NAVBAR RESPONSIVIDADE MOBILE (Simplificado)
   ======================================== */

/* Layout base do navbar */
.navbar .container-fluid {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
}

/* Logo não deve encolher */
.navbar .navbar-brand {
	flex-shrink: 0;
	margin-right: auto;
}

/* Estilo base do header */
.navbar-brand .brand-sigla {
	font-size: 1.25rem;
	/* Cor herdada da regra base (.brand-sigla) - var(--nga-secondary-color) */
}

/* Botões de link no navbar (promoções, notificações) */
.navbar .btn-link {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}

.navbar .btn-link:hover,
.navbar .btn-link:focus {
	background: rgba(255, 255, 255, 0.1) !important;
}

/* Toggler do hamburger - limpo */
.navbar-toggler {
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
}

.navbar-toggler:focus {
	box-shadow: none !important;
}

/* Botão warning (Entrar) */
.navbar .btn-warning {
	background-color: #f7b733 !important;
	border-color: #f7b733 !important;
}

.navbar .btn-warning:hover {
	background-color: #e5a82e !important;
	border-color: #e5a82e !important;
}

/* Garantir que conteúdo mobile-only fique oculto no desktop */
@media (min-width: 992px) {
	#mobile-menu-content {
		display: none !important;
	}

	.navbar-collapse .d-lg-none,
	#navbarMainCollapse .d-lg-none,
	#navbarMainCollapse > .d-lg-none,
	.navbar .d-lg-none:not(.d-flex) {
		display: none !important;
		visibility: hidden !important;
		height: 0 !important;
		overflow: hidden !important;
		padding: 0 !important;
		margin: 0 !important;
		border: none !important;
	}
}

/* Fallback: esconder menu mobile SEMPRE em desktop, sem media query */
#mobile-menu-content {
	display: none;
}

@media (max-width: 991.98px) {
	#mobile-menu-content {
		display: block !important;
	}
}

/* Menu colapsável em mobile */
@media (max-width: 991.98px) {
	/* Brand deve estar no fluxo normal, não fixo */
	#brand {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		flex-shrink: 0;
		z-index: 1;
	}

	/* Seção de botões mobile - não encolher, não crescer */
	.navbar .d-flex.d-lg-none {
		flex-shrink: 0;
		margin-left: 10px;
	}

	/* Botões mobile mais compactos */
	.navbar .d-flex.d-lg-none .btn-link {
		padding: 6px !important;
	}

	.navbar-collapse {
		background: var(--nga-primary-color);
		padding: 0.75rem;
		margin-top: 0.25rem;
		border-radius: 8px;
		box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	}

	.navbar-collapse .navbar-nav {
		flex-direction: column;
		width: 100%;
	}

	.navbar-collapse .nav-link {
		padding: 10px 12px;
		border-radius: 6px;
		margin-bottom: 2px;
		color: white;
	}

	.navbar-collapse .nav-link:hover {
		background: rgba(255, 255, 255, 0.15);
	}
}

/* Ajustes para telas pequenas */
@media (max-width: 575.98px) {
	.navbar-brand img {
		height: 28px;
	}

	.navbar-brand .brand-sigla {
		font-size: 1rem;
	}

	/* Gap menor entre botões mobile */
	.navbar .d-flex.d-lg-none {
		gap: 4px !important;
	}

	/* Botões ainda menores */
	.navbar .d-flex.d-lg-none .btn-link {
		padding: 4px !important;
		font-size: 0.9rem;
	}

	/* Botão entrar menor */
	.navbar .d-flex.d-lg-none .btn-warning {
		padding: 4px 8px !important;
		font-size: 0.75rem;
	}

	/* Hamburger menor */
	.navbar-toggler {
		padding: 4px 6px !important;
	}
}

/* Telas muito pequenas */
@media (max-width: 359.98px) {
	.navbar-brand .brand-sigla {
		font-size: 0.9rem;
	}

	/* Esconder texto da sigla em telas muito pequenas */
	.navbar-brand img {
		height: 24px;
	}

	/* Botões mínimos */
	.navbar .d-flex.d-lg-none {
		gap: 2px !important;
	}

	.navbar .d-flex.d-lg-none .btn-link {
		padding: 3px !important;
		font-size: 0.85rem;
	}
}

/* ========== 5. BOTÕES ========== */
.btn {
	border-radius: 6px;
	padding: 0.5rem 1.25rem;
	font-weight: 500;
	transition: var(--transition-base);
}

.btn-primary {
	background-color: var(--nga-primary-color) !important;
	border-color: var(--nga-primary-color) !important;
	box-shadow: var(--shadow-sm);
	color: white !important;
}

.btn-primary:hover {
	background-color: var(--nga-primary-color) !important;
	border-color: var(--nga-primary-color) !important;
	transform: translateY(-1px);
	opacity: 1;
	box-shadow: var(--shadow-md);
	color: #f7b733 !important;
}

.btn-primary-disabled {
  color: white;
  pointer-events: none;
  background-color: var(--nga-primary-color);
  border-color: var(--nga-primary-color);
  opacity: 0.85;
}

.btn-primary-action-property, .btn-primary-edit-property, .btn-primary-view-property .view, .btn-primary-deactive-property .deactive, .btn-primary-active-property .active {
	background-color: var(--nga-primary-color);
	border-color: var(--nga-primary-color);
	border: 1px solid white;
	box-shadow: var(--shadow-sm);
	border-radius: 12px;
	color: white;
	width: 30px;
	height: 30px;
	font-size: 1rem;
}

.btn-primary-edit-property {
	padding: 0.10rem 0.47rem;
}

.btn-primary-view-property {
	padding: 0.13rem 0.35rem !important;
}

.btn-primary-taxcfg-property {
	padding: 0.13rem 0.58rem;
}

.btn-primary-deactive-property {
	padding: 0.10rem 0.33rem;
	background-color: white;
	border-color: var(--danger-color);
	color: var(--danger-color);
}

.btn-primary-active-property {
	padding: 0.10rem 0.33rem;
	background-color: white;
	border-color: var(--success-color);
	color: var(--success-color);
}

.btn-primary-verify-property {
	padding: 0.10rem 0.40rem;
	background-color: white;
	border-color: var(--warning-color);
	color: var(--warning-color);
}

.btn-primary-action-property:hover {
	background-color: var(--nga-primary-color);
	border-color: #f7b733;
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
	color: #f7b733;
}

.btn-primary-deactive-property:hover {
	border-color: white;
	background-color: var(--danger-color);
	color: white;
}

.btn-primary-active-property:hover {
	border-color: white;
	background-color: var(--success-color);
	color: white;
}

.btn-primary-verify-property:hover {
	border-color: white;
	background-color: var(--warning-color);
	color: white;
}

.btn-outline-gold {
	background-color: transparent;
	border-color: #f7b733;
	box-shadow: var(--shadow-sm);
	color: var(--secondry-color);
}

.btn-outline-gold:hover {
	background-color: var(--nga-secondary-color);
	border-color: #f7b733;
	box-shadow: var(--shadow-sm);
	color: white;
}

.btn-gold {
	background-color: #f7b733;
	border-color: #f7b733;
	box-shadow: var(--shadow-sm);
	color: var(--nga-primary-color);
}

.btn-gold:hover {
	background-color: #f7b733;
	border-color: #f7b733;
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
	color: white;
}

.btn-gold-for-dark-background {
	background-color: var(--nga-primary-color);
	border-color: #f7b733;
	box-shadow: var(--shadow-sm);
	color: white;
}

.btn-gold-for-dark-background:hover {
	background-color: #f7b733;
	border-color: #f7b733;
	color: var(--nga-primary-color);
}

.btn-secondary {
	background-color: var(--nga-secondary-color);
	border-color: var(--nga-secondary-color);
	box-shadow: var(--shadow-sm);
	color: white;
}

.btn-secondary:hover {
	background-color: var(--nga-secondary-hover);
	border-color: var(--nga-secondary-hover);
	transform: translateY(-1px);
	box-shadow: var(--shadow-md);
}

.btn-outline-primary {
	color: var(--nga-primary-color);
	border-color: var(--nga-primary-color);
}

.btn-outline-primary:hover {
	background-color: var(--nga-primary-color);
	border-color: var(--nga-primary-color);
	transform: translateY(-1px);
	color: var(--nga-secondary-color);
}

/* Botões Elegantes */
.btn-elegant {
	padding: 0.75rem 1.5rem;
	border-radius: 12px;
	font-weight: 500;
	font-size: 0.9rem;
	border: none;
	letter-spacing: 0.3px;
	position: relative;
	overflow: hidden;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: var(--transition-base);
}

.btn-elegant-primary {
	background: var(--nga-primary-color);
	color: white;
	box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.btn-elegant-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
	color: var(--nga-secondary-color);
	background: var(--nga-primary-hover);
}

.btn-elegant-outline {
	background: transparent;
	color: var(--nga-primary-color);
	border: 2px solid var(--nga-primary-color);
}

.btn-elegant-outline:hover {
	background: var(--nga-primary-hover);
	border-color: var(--nga-primary-hover);
	color: white;
	transform: translateY(-2px);
}

.btn-elegant-danger {
	background: linear-gradient(135deg, #f56565 0%, #ed64a6 100%);
	color: white;
}

.btn-elegant-danger:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(245, 101, 101, 0.5);
}

.btn-elegant-icon {
	width: 40px;
	height: 40px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

/* CTA Button */
.cta-btn {
	background-color: rgb(242, 121, 32);
	color: white;
	border: none;
	border-radius: 8px;
	padding: 0.75rem 1.5rem;
	font-weight: 600;
	font-size: 1rem;
	transition: var(--transition-fast);
	box-shadow: 0 4px 6px -1px rgba(242, 121, 32, 0.8);
}

.cta-btn:hover {
	background-color: var(--nga-secondary-color);
	color: white;
	transform: translateY(-2px);
	box-shadow: 0 10px 15px -3px rgba(247, 183, 51, 0.4);
}

/* Botão de Reserva */
.reserve-button {
	width: 100%;
	padding: 14px;
	background: var(--nga-primary-color);
	color: white;
	border: none;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: var(--transition-fast);
}

.reserve-button:hover {
	color: var(--nga-secondary-color);
	background: var(--nga-primary-color);
}

.reserve-button:active {
	transform: scale(0.98);
}

/* ========== 6. CARDS ========== */
.card {
	border: none;
	border-radius: 12px;
	box-shadow: var(--shadow-base);
	overflow: visible; /* Mudado de hidden para visible para permitir dropdowns */
	transition: var(--transition-base);
	background: white;
}

.card:hover {
	box-shadow: var(--shadow-xl);
	transform: translateY(-4px);
}

.card-header {
	background-color: white;
	border-bottom: 1px solid var(--gray-200);
	padding: 1.25rem 1.5rem;
	font-weight: 600;
}

.card-body {
	padding: 1.5rem;
}

.card-property {
	border: 1px solid var(--gray-300);
	border-radius: 12px;
	box-shadow: var(--shadow-base);
	overflow: hidden;
	transition: var(--transition-base);
	background: white;
	position: relative;
	z-index: 1;
}

.card-body-property {
	padding: 0.75rem;
	font-size: 0.65rem;
}

.card-title-property {
	font-size: 0.65rem;
	font-weight: 400;
	margin-bottom: 0.25rem;
	color: var(--dark-color);
}

.card-title-property-home {
	font-size: 0.85rem;
	font-weight: 600;
	margin-bottom: 0.25rem;
	color: var(--dark-color);
}

.card-footer {
	background-color: white;
	border-top: 1px solid var(--gray-200);
	padding: 1.25rem 1.5rem;
}

/* Card Nga Primary color as principal */
.card-header-nga {
	background-color: var(--nga-primary-color);
	color: var(--white-color) !important;
	border-bottom: none;
	border-radius: 6px 6px 0 0;
	padding: 1.25rem 1.5rem;
	font-weight: 600;
}
.card-header-nga h5 {
	color: var(--white-color);
	font-weight: 600;
	margin-bottom: 0px;
}

.card-header-nga:hover {
	background-color: var(--nga-secondary-color);
	color: var(--nga-primary-color) !important;
	transition: all 0.3s ease;
}
.card-header-nga:hover h5 {
	color: var(--nga-primary-color);
}

/* Card header muda quando o card pai recebe hover */
.card:hover .card-header-nga {
	background-color: var(--nga-secondary-color);
	color: var(--nga-primary-color) !important;
	transition: all 0.3s ease;
}
.card:hover .card-header-nga h5 {
	color: var(--nga-primary-color);
}

/* Card header muda quando algum elemento dentro do card recebe foco */
.card:focus-within .card-header-nga {
	background-color: var(--nga-secondary-color);
	color: var(--nga-primary-color) !important;
	transition: all 0.3s ease;
}
.card:focus-within .card-header-nga h5 {
	color: var(--nga-primary-color);
}

/* Card Nga Secondary color as principal */
.card-header-nga-secondary {
	background-color: var(--nga-secondary-color);
	color: var(--white-color) !important;
	border-bottom: none;
	border-radius: 6px 6px 0 0;
	padding: 1.25rem 1.5rem;
	font-weight: 600;
}
.card-header-nga-secondary h5 {
	color: var(--nga-primary-color);
	font-weight: 600;
	margin-bottom: 0px;
}

.card-header-nga-secondary:hover {
	background-color: var(--nga-secondary-color);
	color: var(--nga-primary-color) !important;
	transition: all 0.3s ease;
}
.card-header-nga-secondary:hover h5 {
	color: var(--nga-secondary-color);
}

/* Card header muda quando o card pai recebe hover */
.card:hover .card-header-nga-secondary {
	background-color: var(--nga-secondary-color);
	color: var(--nga-primary-color) !important;
	transition: all 0.3s ease;
}
.card:hover .card-header-nga-secondary h5 {
	color: var(--nga-primary-color);
}

/* Card header muda quando algum elemento dentro do card recebe foco */
.card:focus-within .card-header-nga-secondary {
	background-color: var(--nga-secondary-color);
	color: var(--nga-primary-color) !important;
	transition: all 0.3s ease;
}
.card:focus-within .card-header-nga-secondary h5 {
	color: var(--nga-secondary-color);
}

/* Card Elegante */
.elegant-card {
	background: white;
	border-radius: 16px;
	box-shadow: var(--shadow-base);
	overflow: hidden;
	transition: var(--transition-base);
	border: 1px solid var(--gray-200);
	position: relative;
}

.elegant-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--shadow-xl);
	border-color: var(--nga-primary-hover);
}

.elegant-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--gradient-primary);
	opacity: 0;
	transition: var(--transition-base);
}

.elegant-card:hover::before {
	opacity: 1;
}

/* ========== 7. PROPRIEDADES/IMÓVEIS ========== */

/* Header do Imóvel */
.property-header {
	padding: 24px 0 16px;
}

.property-title {
	font-size: 26px;
	font-weight: 600;
	margin-bottom: 8px;
	color: var(--dark-color);
}

.property-info-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
}

.property-stats {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
}

.property-actions {
	display: flex;
	gap: 16px;
}

.action-button {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: white;
	border: none;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--dark-color);
	cursor: pointer;
	text-decoration: none;
	transition: var(--transition-fast);
}

.action-button:hover {
	background: var(--gray-100);
}

/* Card de Propriedade Elegante */
.property-elegant-card {
	background: white;
	border-radius: 20px;
	overflow: hidden !important;
	box-shadow: var(--shadow-md);
	transition: var(--transition-base);
	position: relative;
}

.property-elegant-card:hover {
	transform: translateY(-10px) scale(1.02);
	box-shadow: var(--shadow-2xl);
}

/* Container da imagem */
.property-image-container {
	position: relative;
	height: 250px;
	width: 100%;
	overflow: hidden;
	display: block;
	background: var(--gradient-dark);
	z-index: 1;
}

.property-image, .property-image-container img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: var(--transition-slow);
	position: relative;
	z-index: 1;
	display: block;
}

.property-elegant-card:hover .property-image, .property-elegant-card:hover .property-image-container img {
	transform: scale(1.1);
	filter: brightness(0.6);
}

/* Placeholder quando não há imagem */
.property-image-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--gradient-light) !important;
	position: relative;
	z-index: 1;
}

.property-image-placeholder i {
	font-size: 3rem;
	background: var(--nga-primary-color);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Badges sobre a imagem */
.property-badges {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: flex;
	gap: 0.5rem;
	flex-direction: column;
	align-items: flex-end;
	z-index: 2;
}

.elegant-badge {
	padding: 0.5rem 1rem;
	border-radius: 25px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	backdrop-filter: blur(10px);
	background: rgba(255, 255, 255, 0.9);
	color: var(--nga-primary-color);
	box-shadow: var(--shadow-sm);
	transition: var(--transition-fast);
}

.elegant-badge.verified {
	background: var(--success-color);
	color: white;
}

.actions-property {
	position: absolute;
	top: 0rem;
	left: 0.25rem;
	display: flex;
	gap: 0.25rem;
	flex-direction: column;
	align-items: flex-start;
	z-index: 3;
}

/* Overlay de Imóveis */
.property-image-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(to top, rgba(26, 31, 54, 0.95) 0%, rgba(26, 31, 54, 0.8) 40%, rgba(26, 31, 54, 0.4) 70%, transparent 100%);
	padding: 2.5rem 1.5rem 1.5rem;
	color: white;
	transform: translateY(100%);
	transition: transform 0.3s ease, opacity 0.3s ease;
	opacity: 0;
	z-index: 2;
	pointer-events: none;
}

.property-elegant-card:hover .property-image-overlay, .property-elegant-card:focus-within .property-image-overlay {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}

/* Conteúdo do Card */
.property-content {
	padding: 1.75rem;
}

.property-features {
	display: flex;
	justify-content: space-between;
	padding: 1rem 0;
	border-top: 1px solid var(--gray-200);
	border-bottom: 1px solid var(--gray-200);
	margin-bottom: 1rem;
}

.property-feature-item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.9rem;
	color: var(--gray-700);
}

.property-feature-item i {
	color: var(--nga-primary-hover);
}

.property-price-container {
	margin-top: 1rem;
}

.property-price {
	font-size: 1.75rem;
	font-weight: 700;
	background: var(--gradient-primary);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.property-price-home {
	font-size: 1.25rem;
	font-weight: 600;
	background: var(--gradient-primary);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.property-price-period {
	color: var(--gray-500);
	font-size: 0.9rem;
}

/* Galeria de Fotos Grid */
.photo-gallery-grid {
	position: relative;
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 8px;
	height: 560px;
	margin-bottom: 2em;
	border-radius: 12px;
	overflow: hidden;
}

.photo-gallery-grid-no-photos {
    background: var(--gradient-light) !important;
	display: flex; 
	align-items: center; 
	justify-content: center;    
}
.photo-gallery-grid-no-photos-msg {
    text-align: center; 
    color: var(--nga-primary-color);
}
.photo-gallery-grid-no-photos-msg i {
	font-size: 64px; 
	margin-bottom: 16px;
}
.photo-gallery-grid-no-photos-msg p {
	font-size: 24px; 
}

.photo-gallery-grid .photo-item {
	position: relative;
	overflow: hidden;
	cursor: pointer;
}

.photo-gallery-grid .photo-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: var(--transition-base);
}

.photo-gallery-grid .photo-item:hover img {
	transform: scale(1.05);
}

.photo-gallery-grid .photo-item:first-child, .photo-gallery-grid .main-photo {
	grid-row: 1/3;
	grid-column: 1;
}

.show-all-photos-btn {
	position: absolute;
	bottom: 16px;
	right: 16px;
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	background: white;
	border: 1px solid var(--dark-color);
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--dark-color);
	cursor: pointer;
	z-index: 10;
}

.show-all-photos-btn:hover {
	background: var(--gray-100);
}

/* ================================
   ESTILOS DO VÍDEO NA GALERIA
   ================================ */

/* Item de vídeo na galeria */
.photo-gallery-grid .video-item {
	position: relative;
	overflow: hidden;
	cursor: pointer;
}

.photo-gallery-grid .video-item video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none; /* Impede controles nativos na thumbnail */
}

.photo-gallery-grid .video-item .video-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.3s ease;
}

.photo-gallery-grid .video-item:hover .video-overlay {
	background: rgba(0, 0, 0, 0.5);
}

.photo-gallery-grid .video-item .play-button {
	color: white;
	font-size: 64px;
	text-shadow: 0 2px 8px rgba(0,0,0,0.5);
	transition: transform 0.3s ease;
}

.photo-gallery-grid .video-item:hover .play-button {
	transform: scale(1.1);
}

.photo-gallery-grid .video-item .video-duration {
	position: absolute;
	bottom: 12px;
	right: 12px;
	background: rgba(0,0,0,0.7);
	color: white;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 4px;
}

/* ================================
   MODAL DE VÍDEO
   ================================ */

/* Conteúdo do modal de vídeo */
.video-modal-content {
	max-width: 90vw;
	max-height: 90vh;
	background: #000;
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	position: relative;
}

/* Header do modal com botão de fechar */
.video-modal-header {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 10;
	padding: 16px;
}

.video-modal-header .close-modal {
	background: rgba(255,255,255,0.9);
	border: none;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	font-size: 18px;
	color: #222;
}

.video-modal-header .close-modal:hover {
	background: white;
	transform: rotate(90deg);
}

/* Corpo do modal */
.video-modal-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.video-modal-body video {
	max-width: 100%;
	max-height: 80vh;
	outline: none;
	display: block;
}

/* Informações do vídeo */
.video-modal-body .video-info {
	background: rgba(0,0,0,0.8);
	color: white;
	padding: 20px;
	text-align: center;
	width: 100%;
}

.video-modal-body .video-info h3 {
	margin: 0 0 10px 0;
	font-size: 20px;
	font-weight: 600;
}

.video-modal-body .video-info p {
	margin: 0;
	font-size: 14px;
	color: rgba(255,255,255,0.8);
	line-height: 1.5;
}

/* Layout de Duas Colunas */
.content-layout {
	display: grid;
	grid-template-columns: 1fr 416px;
	gap: 80px;
	margin-bottom: 48px;
	position: relative;
}

@media ( max-width : 1128px) {
	.content-layout {
		grid-template-columns: 1fr;
		gap: 48px;
	}
}

/* Card de Reserva */
.booking-card-wrapper {
	position: sticky;
	top: 80px;
	height: fit-content;
}

.booking-card {
	background: white;
	border: 1px solid var(--border-color);
	border-radius: 12px;
	padding: 24px;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.booking-price-line {
	display: flex;
	align-items: baseline;
	gap: 4px;
	margin-bottom: 24px;
}

.booking-price {
	font-size: 22px;
	font-weight: 600;
}

.booking-period {
	font-size: 16px;
	color: var(--gray-600);
}

.booking-rating {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 24px;
	font-size: 14px;
}

/* Date & Guest Selector */
.date-guest-selector {
	border: 1px solid var(--border-color);
	border-radius: 8px;
	margin-bottom: 16px;
}

.date-inputs {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.date-input-wrapper {
	position: relative;
	padding: 0;
}

.date-input-wrapper:first-child {
	border-right: 1px solid var(--border-color);
}

.date-input-wrapper label {
	display: block;
	padding: 12px 12px 0;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.date-input-wrapper input {
	padding-top: 0px;
	padding-left: 12px;
	width: 100%;
	height: 30px;
	border: none;
	font-size: 14px;
	background: transparent;
	margin-bottom: 10px;
	margin-top: -4px;
	outline: none;
}

/* ========== 8. FORMULÁRIOS ========== */
.form-control, .form-select {
	border-radius: 8px;
	padding: 0.625rem 1rem;
	border: 1px solid var(--gray-300);
	font-size: 0.95rem;
	transition: var(--transition-fast);
}

.form-control:focus, .form-select:focus {
	border-color: var(--nga-primary-color);
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
}

.form-label {
	font-weight: 500;
	margin-bottom: 0.5rem;
	color: var(--gray-700);
}

/* Formulário Elegante */
.elegant-form-group {
	margin-bottom: 1.5rem;
}

.elegant-form-label {
	font-weight: 600;
	color: var(--gray-700);
	margin-bottom: 0.5rem;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.elegant-form-control {
	border: 2px solid var(--gray-300);
	border-radius: 12px;
	padding: 0.75rem 1rem;
	font-size: 0.95rem;
	transition: var(--transition-fast);
	background: white;
}

.elegant-form-control:focus {
	outline: none;
	border-color: var(--nga-primary-hover);
	box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* ========== 9. TABELAS ========== */
.elegant-table {
	width: 100%;
	background: white;
	overflow: hidden;
	box-shadow: var(--shadow-md);
	border-radius: 0px;
}

.elegant-table thead {
	background: var(--gray-400);
	color: var(--nga-primary-color);
}

.elegant-table thead th {
	padding: 1.25rem;
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.75rem;
	letter-spacing: 1px;
	border: none;
}

.elegant-table tbody tr {
	transition: var(--transition-fast);
	border-bottom: 1px solid var(--gray-200);
}

.elegant-table tbody tr:hover {
	background: var(--gray-50);
	transform: scale(1.01);
}

.elegant-table tbody td {
	padding: 1.25rem;
	vertical-align: middle;
	color: var(--gray-700);
}

/* ========== 10. BADGES E STATUS ========== */
.badge {
	padding: 0.5em 0.75em;
	font-weight: 500;
	border-radius: 6px;
}

.badge.bg-primary {
	background-color: var(--nga-primary-color) !important;
}

/* Status Badges */
.status-badge {
	display: inline-block;
	padding: 0.4em 0.8em;
	font-size: 0.875rem;
	font-weight: 500;
	border-radius: 9999px;
	text-align: center;
}

.status-pendente {
	background-color: var(--warning-color);
	color: white;
}

.status-confirmado {
	background-color: var(--success-color);
	color: white;
}

.status-cancelado {
	background-color: var(--danger-color);
	color: white;
}

.status-concluido {
	background-color: var(--nga-primary-color);
	color: white;
}

/* Status Elegante */
.status-elegant {
	display: inline-flex;
	align-items: center;
	padding: 0.5rem;
	border-radius: 8px;
	font-size: 0.6rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	gap: 0.5rem;
}

.status-elegant::before {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: 50%;
	animation: pulse 2s infinite;
}

.status-elegant.pending {
	background: linear-gradient(135deg, #fff5e6 0%, #ffe0b2 100%);
	color: #f57c00;
}

.status-elegant.pending::before {
	background: #f57c00;
}

.status-elegant.confirmed {
	background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
	color: #2e7d32;
}

.status-elegant.confirmed::before {
	background: #2e7d32;
}

.status-elegant.cancelled {
	background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
	color: #c62828;
}

.status-elegant.cancelled::before {
	background: #c62828;
}

.status-elegant.completed {
	background: linear-gradient(135deg, #e8eaf6 0%, #c5cae9 100%);
	color: #283593;
}

.status-elegant.completed::before {
	background: #283593;
}

/* ========== 11. ALERTAS ========== */
.alert {
	border: none;
	border-radius: 8px;
	padding: 1rem 1.25rem;
	box-shadow: var(--shadow-sm);
}

.alert-success {
	background-color: rgba(16, 185, 129, 0.1);
	color: var(--success-color);
}

.alert-success-upload {
  background-color: rgba(16, 185, 129, 1);
  color: var(--success-color);
}

.alert-danger {
	background-color: rgba(239, 68, 68, 0.1);
	color: var(--danger-color);
}

.alert-info {
	background-color: rgba(37, 99, 235, 0.1);
	color: var(--nga-primary-color);
}

.alert-warning {
	background-color: rgba(245, 158, 11, 0.1);
	color: var(--warning-color);
}

/* Alerta Elegante */
.elegant-alert {
	padding: 1.25rem 1.5rem;
	border-radius: 12px;
	border: none;
	position: relative;
	display: flex;
	align-items: center;
	gap: 1rem;
	animation: slideIn 0.5s ease-out;
}

.elegant-alert.info {
	background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
	color: #0d47a1;
}

.elegant-alert.success {
	background: linear-gradient(135deg, #e8f5e9 0%, #c8e6c9 100%);
	color: #1b5e20;
}

.elegant-alert.warning {
	background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
	color: #e65100;
}

.elegant-alert.danger {
	background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
	color: #b71c1c;
}

/* ========== 12. SEÇÕES ESPECÍFICAS ========== */

/* Hero Section */
.jumbotron {
	border-radius: 16px;
	background-image: linear-gradient(to right, #1a1f36, #667eea), url('/img/home-bg.svg');
	background-size: cover;
	background-position: center;
	padding: 2rem 2rem;
	margin-bottom: 1rem;
	box-shadow: var(--shadow-base);
}

.jumbotron .display-4 {
	font-weight: 700;
	color: var(--light-color);
	margin-bottom: 1rem;
	font-size: 2.5rem;
}

.jumbotron .lead {
	font-size: 1.25rem;
	color: var(--light-color);
}

/* Search Form Container */
.search-form-container {
	background-color: white;
	border-radius: 12px;
	padding: 1.5rem;
	box-shadow: var(--shadow-base);
	margin-top: 0rem;
}

/* Títulos Elegantes */
.elegant-title {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--nga-primary-color);
	margin-bottom: 0.6rem;
	position: relative;
	padding-bottom: 1rem;
}

.elegant-title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 60px;
	height: 3px;
	background: var(--nga-primary-color);
	border-radius: 2px;
	transition: var(--transition-base);
}

.elegant-title:hover::after {
	width: 100px;
}

.elegant-title i {
	background: var(--nga-primary-color);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-right: 0.75rem;
}

/* Section Titles */
.section-title {
	font-size: 22px;
	font-weight: 600;
	margin-bottom: 24px;
}

.featured-properties-title {
	font-size: 1.75rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
	color: var(--dark-color);
	position: relative;
	padding-bottom: 0.75rem;
}

.featured-properties-title::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 60px;
	height: 4px;
	background-color: var(--nga-primary-color);
	border-radius: 4px;
}

/* Galeria */
.gallery-thumbnail {
	height: 120px;
	object-fit: cover;
	cursor: pointer;
	transition: var(--transition-base);
	border-radius: 8px;
}

.gallery-thumbnail:hover {
	opacity: 0.85;
	transform: scale(1.05);
}

.gallery-main {
	height: 400px;
	object-fit: cover;
	border-radius: 12px;
	box-shadow: var(--shadow-base);
}

/* Mapa */
.map-container, .map-section {
	height: 300px;
	overflow: hidden;
}

.map-section {
	padding: 0px 0;
	border-bottom: 1px solid var(--border-color);
	height: auto;
}

.map-section .map-container {
	height: 480px;
	margin-top: 24px;
}

/* Reviews/Avaliações */
.reviews-section {
	padding: 48px 0;
	border-bottom: 1px solid var(--border-color);
	border-top: 1px solid var(--border-color);
}

.overall-rating {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 32px;
}

.overall-rating .star-icon {
	color: #FFD700;
}

.rating-categories {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px 80px;
	margin-bottom: 48px;
}

.rating-category {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.rating-bar-container {
	display: flex;
	align-items: center;
	gap: 12px;
}

.rating-bar {
	width: 120px;
	height: 4px;
	background: var(--border-color);
	border-radius: 2px;
	position: relative;
}

.rating-bar-fill {
	height: 100%;
	background: #FFD700;
	border-radius: 2px;
}

.rating-value {
	font-size: 14px;
	font-weight: 600;
	min-width: 24px;
}

/* Host Section */
.host-section {
	padding: 48px 0;
	border-bottom: 1px solid var(--border-color);
}

.host-info-section {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 32px 0;
	border-bottom: 1px solid var(--border-color);
}

.host-card {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 32px;
	align-items: start;
}

.host-profile {
	text-align: center;
}

.host-avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--gray-100);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	color: var(--gray-600);
	overflow: hidden;
	border: 2px solid var(--border-color);
}

.host-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Badge de verificação flutuante no avatar */
.verified-host-avatar-badge {
	position: relative;
	top: 40px;
	right: 20px;
	width: 24px;
	height: 24px;
	background: #1E88E5;
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid white;
	font-size: 9px;
	cursor: pointer;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease;
	z-index: 2;
	animation: badgePopIn 0.3s ease-out;
}

.host-avatar-large {
	width: 128px;
	height: 128px;
	border-radius: 50%;
	background: var(--gray-100);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 48px;
	color: var(--gray-600);
	margin-bottom: 16px;
	overflow: hidden;
	border: 3px solid var(--border-color);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.host-avatar-large img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.host-name {
	font-size: 24px;
	font-weight: 600;
	margin-bottom: 4px;
}

.host-badge {
	font-size: 14px;
	color: var(--airbnb-gray);
}

.host-text {
	font-size: 16px;
	line-height: 1.5;
	color: var(--dark-color);
	transition: opacity 0.3s ease, height 0.3s ease;
	overflow: hidden;
	display: block;
	white-space: pre-wrap;
	word-break: break-word;
}

.host-text.expanded {
	animation: fadeIn 0.3s ease;
}

.host-info {
	padding-top: 8px;
}

.host-stats-grid {
	display: grid;
	grid-template-columns: repeat(3, auto);
	gap: 24px;
	margin-bottom: 24px;
}

.host-stat {
	display: flex;
	flex-direction: column;
}

.stat-value {
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 4px;
}

.stat-label {
	font-size: 14px;
	color: var(--airbnb-gray);
}

.host-bio {
	font-size: 16px;
	line-height: 1.5;
	margin-bottom: 24px;
}

.contact-host-btn {
	padding: 12px 24px;
	border: 1px solid var(--airbnb-dark);
	background: var(--nga-primary-color);
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	color: white;
	cursor: pointer;
	text-decoration: none;
	display: inline-block;
}

.contact-host-btn:hover {
	background: var(--nga-primary-color);
	color: var(--nga-secondary-color);
}

/* Host Section */
.host-details {
	flex: 1;
}

.host-title {
	font-size: 22px;
	font-weight: 600;
	margin-bottom: 8px;
}

.host-stats {
	display: flex;
	gap: 4px;
	font-size: 16px;
	color: var(--gray-600);
}

.host-stats-grid {
	display: grid;
	grid-template-columns: repeat(3, auto);
	gap: 24px;
	margin-bottom: 24px;
}

/* Reviewer Avatar com foto de perfil */
.reviewer-avatar {
	width: 48px;
	height: 48px;
	background: var(--gray-100);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--gray-600);
	font-size: 20px;
	overflow: hidden;
	border: 2px solid var(--border-color);
}

.reviewer-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Empty State */
.elegant-empty-state {
	text-align: center;
	padding: 4rem 2rem;
	background: white;
	border-radius: 20px;
	box-shadow: var(--shadow-md);
}

.elegant-empty-icon {
	width: 120px;
	height: 120px;
	margin: 0 auto 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--gray-100);
}

.elegant-empty-icon i {
	font-size: 3rem;
	color: var(--gray-400);
}

.elegant-empty-title {
	font-family: var(--font-display);
	font-size: 1.5rem;
	color: var(--gray-700);
	margin-bottom: 1rem;
}

.elegant-empty-description {
	color: var(--gray-500);
	margin-bottom: 2rem;
}

/* Grid de Propriedades */
.elegant-properties-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
	gap: 2rem;
	animation: fadeIn 0.8s ease-out;
}

/* Rodapé */
footer {
	background-color: var(--nga-primary-color);
	color: white;
	padding: 3rem 1rem	 1.5rem;
	margin-top: 0rem;
}

footer h5 {
	font-size: 1.1rem;
	font-weight: 600;
	margin-bottom: 1.25rem;
	color: white;
}

footer .footer-title {
	color: var(--nga-secondary-color) !important;
}

footer .section-title {
	color: var(--nga-secondary-color) !important;
	font-size: 0.9rem;
	font-weight: 300;
}

footer .footer-contact {
	margin-bottom: 1.5rem;
	font-size: 0.9rem;
	font-weight: 300;
}

footer a:hover {
	color: var(--nga-secondary-color) !important;
}

footer ul li {
	margin-bottom: 0.5rem;
}

footer a {
	color: var(--gray-300);
	transition: var(--transition-fast);
	font-size: 0.9rem;
}

footer a:hover {
	color: white;
	text-decoration: none;
}

footer .social-icons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 9999px;
	background-color: white;
	color: var(--nga-primary-color);
	margin-right: 0.75rem;
	transition: var(--transition-fast);
}

footer .social-icons a:hover {
	border: 1px solid var(--nga-secondary-color);
	background-color: var(--nga-primary-color);
	color: var(--nga-secondary-color);
	transform: translateY(-2px);
}

footer .revision-info {
	font-size: 0.60rem;
	color: var(--gray-400);
	margin-top: 1.5rem;
	text-align: center;
}

/* Footer Brand: logo + 3 linhas de texto (igual ao header) */
.footer-brand {
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
}

.footer-brand-logo {
	border-radius: 6px;
	/*border-bottom-right-radius: 0px;
	border-top-right-radius: 0px;
	background-color: white;*/
	padding-right: 10px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	height: 70px;
  	width: auto;
}

.footer-brand-sigla {
	color: var(--nga-secondary-color);
	font-weight: 700;
	font-size: 1.5rem;
	line-height: 1.2;
	margin-bottom: 0.25rem;
	margin-top: 0.25rem;
}

.footer-brand-nome {
	color: white;
	font-weight: 400;
	font-size: 1rem;
	line-height: 1.2;
	margin-bottom: 0.25rem;
}

.footer-brand-slogan {
	color: white;
	font-weight: 300;
	font-size: 0.75rem;
	line-height: 1.2;
	font-style: italic;
}

.footer-brand-description {
	color: rgba(255, 255, 255, 0.8);
	font-weight: 200;
	font-size: 0.85rem;
	line-height: 1.6;
	margin-top: 0.5rem;
}

.footer-sigla {
	color: var(--nga-secondary-color);
	font-weight: 700;
	font-size: 0.9rem;
	line-height: 1.6;
	margin-bottom: 0.25rem;
}

/* ==== SELOS DE CONFIANÇA ==== */
.trust-seals {
	margin-top: 1.5rem;
}

.seals-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: flex-start;
	margin-bottom: 8px;
}

/* Selos Centralizados em Linha Única */
.trust-seals-centered {
	width: 100%;
}

.seals-row-centered {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-between;
	align-items: center;
}

.seals-group-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.seals-group-description {
	color: rgba(255, 255, 255, 0.8);
	font-size: 0.75rem;
	font-weight: 600;
	margin-bottom: 0;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.seals-left-group {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.seals-right-group {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.trust-seal {
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 8px;
	padding: 6px 10px;
	transition: all 0.3s ease;
	text-decoration: none;
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.75rem;
	min-width: 142px;
	cursor: pointer;
	width: 142px;
	height: 52px;	
}

.trust-seal:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: var(--nga-secondary-color);
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	color: white;
	text-decoration: none;
}

.seal-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 6px;
	margin-right: 8px;
	flex-shrink: 0;
	color: var(--nga-secondary-color);
	font-size: 0.9rem;
}

.seal-icon i {
	font-size: 0.9rem;
}

.seal-icon svg {
	width: 16px;
	height: 16px;
}

/* Ícones específicos com cores */
.seal-icon-cnpj {
	background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
	color: white;
}

.seal-icon-ssl {
	background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
	color: white;
}

.seal-icon-lgpd {
	background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
	color: white;
}

.seal-icon-reclameaqui {
	background: linear-gradient(135deg, #ff6b00 0%, #ff8800 100%);
	color: white;
}

.seal-icon-instagram {
	background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
	color: white;
}

.seal-icon-youtube {
	background: linear-gradient(135deg, #FF0000 0%, #CC0000 100%);
	color: white;
}

.seal-icon-linkedin {
	background: linear-gradient(135deg, #0077b5 0%, #005885 100%);
	color: white;
}

.seal-icon-pix {
	background: linear-gradient(135deg, #32bcad 0%, #1e7a73 100%);
	color: white;
}

.seal-icon-money {
	background: linear-gradient(135deg, #28a745 0%, #218838 100%);
	color: white;
}

.seal-icon-transfer {
	background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
	color: white;
}

.seal-label {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.seal-title {
	font-weight: 600;
	font-size: 0.7rem;
	color: rgba(255, 255, 255, 0.9);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.seal-value {
	font-size: 0.65rem;
	color: rgba(255, 255, 255, 0.7);
	margin-top: 2px;
}

.seal-value i {
	font-size: 0.65rem;
	margin-right: 2px;
}

.trust-seal:hover .seal-title,
.trust-seal:hover .seal-value {
	color: white;
}

/* Selos de redes sociais - badges menores */
.trust-seal-social .seal-value i {
	vertical-align: middle;
}

/* Selos de pagamento - sem link, apenas visual */
.trust-seal-payment {
	cursor: default;
}

.trust-seal-payment:hover {
	transform: none;
	border-color: rgba(255, 255, 255, 0.2);
}

/* ========== 13. COMPONENTES ESPECIAIS ========== */

/* Rounded Circle Avatar */
.rounded-circle {
	border-radius: 15px !important;
	height: 40px;
	padding: 5px !important;
	width: 32px;
}

.rounded-circle i {
	font-size: 1.4rem;
	color: var(--light-color);
	vertical-align: middle;
	text-align: center;
}

.rounded-circle-hospedes {
	border-radius: 15px !important;
	height: 40px;
	padding: 0px !important;
	width: 32px;
}

.rounded-circle-hospedes i {
	font-size: 1rem;
	color: rgba(var(--bs-secondary-rgb), var(--bs-text-opacity)) !important;
	text-align: center;
}

/* Cursor Pointer */
.cursor-pointer {
	cursor: pointer;
	transition: var(--transition-fast);
}

.cursor-pointer:hover {
	border-color: var(--nga-primary-hover) !important;
	box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

/* Show More Button */
.show-more-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 16px;
	font-size: 16px;
	font-weight: 600;
	color: var(--dark-color);
	background: none;
	border: none;
	text-decoration: underline;
	cursor: pointer;
	transition: var(--transition-fast);
}

.show-more-btn:hover {
	color: #000;
	text-decoration-thickness: 2px;
}

.show-more-btn i {
	transition: transform 0.3s ease;
}

/* Show All Amenities Button */
.show-all-amenities-btn {
	padding: 12px 24px;
	background: var(--nga-primary-color);
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	color: white;
	cursor: pointer;
	transition: var(--transition-fast);
}

.show-all-amenities-btn:hover {
	background: var(--nga-primary-color);
	color: var(--nga-secondary-color);
}

/* Comodidades/Amenities */
.amenities-section {
	padding: 48px 0;
	border-bottom: 1px solid var(--border-color);
}

.amenities-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 24px;
}

.amenity-item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 4px 0;
	font-size: 16px;
}

.amenity-item i {
	font-size: 24px;
	width: 32px;
	color: var(--dark-color);
}

.amenity-item.unavailable {
	text-decoration: line-through;
	color: var(--gray-600);
}

/* Description Section */
.description-section {
	padding: 48px 0;
	border-bottom: 1px solid var(--border-color);
}

.description-text {
	font-size: 16px;
	line-height: 1.5;
	color: var(--dark-color);
	transition: opacity 0.3s ease, height 0.3s ease;
	overflow: hidden;
	display: block;
	white-space: pre-wrap;
	word-break: break-word;
}

.description-text.expanded {
	animation: fadeIn 0.3s ease;
}

/* Property Highlights */
.property-highlights {
	padding: 32px 0;
	border-bottom: 1px solid var(--border-color);
}

.highlight-item {
	display: flex;
	gap: 16px;
	margin-bottom: 24px;
}

.highlight-icon {
	font-size: 24px;
	color: var(--dark-color);
	width: 40px;
}

.highlight-content h4 {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 4px;
}

.highlight-content p {
	font-size: 14px;
	color: var(--gray-600);
}

/* Calendar Section */
.calendar-section {
	padding: 0px 0;
	border-bottom: 0px solid var(--border-color);
	margin-bottom: 3em;
}

/* Rules Section */
.rules-section {
	padding: 48px 0;
	border-bottom: 1px solid var(--border-color);
}

.rules-grid {
	display: grid;
	gap: 24px;
}

.rule-item {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}

.rule-icon {
	font-size: 20px;
	width: 24px;
	color: var(--dark-color);
}

.rule-content h4 {
	font-size: 16px;
	font-weight: 400;
	margin-bottom: 4px;
}

/* Depoimentos */
.testimonial-card {
	background: white;
	border-radius: 20px;
	padding: 2rem;
	box-shadow: var(--shadow-md);
	position: relative;
	transition: var(--transition-base);
	border: 1px solid var(--gray-200);
}

.testimonial-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-xl);
	border-color: var(--nga-primary-hover);
}

.testimonial-card::before {
	content: '';
	position: absolute;
	top: -20px;
	left: 20px;
	font-size: 100px;
	font-family: var(--font-display);
	color: var(--gray-200);
	line-height: 1;
	z-index: 0;
}

.testimonial-card .card-body {
	position: relative;
	z-index: 1;
}

.testimonial-avatar {
	position: relative;
}

.testimonial-rating {
	margin-bottom: 1rem;
}

.testimonial-rating i {
	font-size: 1.1rem;
	margin-right: 2px;
}

.testimonial-text {
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--gray-700);
	margin-bottom: 1rem;
	min-height: 80px;
}

.testimonial-card h6 {
	font-weight: 600;
	color: var(--nga-primary-color);
}

/* Stats Container */
.stats-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.stat-card {
	background: white;
	border-radius: 16px;
	padding: 1.5rem;
	position: relative;
	overflow: hidden;
	box-shadow: var(--shadow-md);
	transition: var(--transition-base);
}

.stat-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--shadow-xl);
}

.stat-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--gradient-primary);
}

.stat-value {
	font-size: 2rem;
	font-weight: 700;
	color: var(--nga-primary-color);
	line-height: 1;
}

/* ========== 14. MODAIS ========== */
.modal.elegant-modal .modal-content {
	border: none;
	border-radius: 20px;
	box-shadow: var(--shadow-2xl);
	overflow: hidden;
}

.modal.elegant-modal .modal-header {
	background: var(--gradient-dark);
	color: white;
	border: none;
	padding: 1.75rem;
}

.modal.elegant-modal .modal-title {
	font-family: var(--font-display);
	font-weight: 600;
}

.modal.elegant-modal .modal-body {
	padding: 2rem;
}

.modal.elegant-modal .modal-footer {
	background: var(--gray-50);
	border: none;
	padding: 1.5rem;
}

/* ========== 15. ANIMAÇÕES ========== */
@keyframes fadeIn {from { opacity:0;
	transform: translateY(10px);
}

to {
	opacity: 1;
	transform: translateY(0);
}

}
@keyframes fadeInUp {
	from { 
		opacity:0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes pulse { 
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.05);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes slideIn {
	from { 
		opacity:0;
		transform: translateX(-20px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes shake { 
	0%, 100% {
		transform: translateX(0);
	}

	10%, 30%, 50%, 70%, 90% {
		transform : translateX(-5px);
	}

	20%, 40%, 60%, 80% {
		transform: translateX(5px);
	}
}

@keyframes loading { 
	0% {
		background-position: 200% 0;
	}

	100%{
		background-position: -200% 0;
	}
}

/* Classes de Animação */
.fade-in {
	animation: fadeIn 0.5s ease-out;
}

.fade-in-up {
	animation: fadeInUp 0.7s ease-out;
}

.pulse {
	animation: pulse 2s infinite ease-in-out;
}

.shake {
	animation: shake 0.5s ease-in-out;
}

/* ========== 16. UTILITÁRIOS ========== */
.transition-all {
	transition: all 0.3s ease;
}

.transition-transform {
	transition: transform 0.3s ease;
}

.transition-opacity {
	transition: opacity 0.3s ease;
}

.opacity-0 {
	opacity: 0;
}

.elegant-shadow {
	box-shadow: var(--shadow-lg);
}

.elegant-rounded {
	border-radius: 16px;
}

.elegant-transition {
	transition: var(--transition-base);
}

.elegant-hover-scale:hover {
	transform: scale(1.05);
}

.elegant-hover-lift {
	transition: var(--transition-base);
}

.elegant-hover-lift:hover {
	transform: translateY(-10px);
}

.elegant-text-gradient {
	background: var(--gradient-primary);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.elegant-bg-gradient {
	background: var(--gradient-primary);
}

.elegant-pulse {
	animation: pulse 2s infinite;
}

/* Skeleton Loading */
.skeleton {
	background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
	background-size: 200% 100%;
	animation: loading 1.5s infinite;
}

/* ========== 17. RESPONSIVIDADE ========== */
/* ========== CORREÇÕES CRÍTICAS DE ALTA PRIORIDADE ========== */

/* 1. NAVBAR RESPONSIVO - CORREÇÕES CRÍTICAS */
@media ( max-width : 768px) {
	/* Estrutura principal do navbar */
	.navbar {
		padding: 0.5rem 0;
	}
	.navbar-nav {
		flex-direction: column;
		width: 100%;
		gap: 0;
		padding: 1rem 0;
	}
	.navbar-collapse {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--nga-primary-color);
		z-index: 1050;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
		max-height: calc(100vh - 60px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Items do menu */
	.navbar-nav .nav-item {
		width: 100%;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}
	.navbar-nav .nav-link {
		padding: 12px 20px;
		width: 100%;
		text-align: left;
	}
	.navbar-nav .nav-link:hover {
		background-color: rgba(247, 183, 51, 0.2);
		padding-left: 25px;
		transition: all 0.3s ease;
	}

	/* Formulário de busca no mobile */
	.navbar .d-flex.mr-3 {
		width: 100%;
		padding: 10px 20px;
		margin: 0 !important;
	}
	.navbar .form-control, .navbar .btn-search {
		font-size: 16px !important; /* Previne zoom no iOS */
	}

	/* Dropdown do usuário */
	.dropdown-menu {
		position: static !important;
		width: calc(100% - 40px);
		margin: 0 20px;
		margin-top: 10px;
		border-radius: 8px;
	}
	.dropdown-item {
		padding: 12px 20px;
	}

	/* Brand responsivo */
	.navbar-brand-wrapper {
		flex: 1;
		margin-left: 1rem;
	}
	.brand-nome, .brand-slogan, .navbar-brand-slogan {
		display: none !important;
	}
	.brand-sigla {
		font-size: 1.5rem;
	}

	/* Botão hambúrguer */
	.navbar-toggler {
		border: 1px solid var(--nga-secondary-color);
		padding: 4px 8px;
		min-height: 40px;
		min-width: 44px;
		margin-right: 1rem;
	}
	.navbar-toggler-icon {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgb(247, 183, 51)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
		width: 24px;
		height: 24px;
	}

	/* Avatar do usuário no mobile */
	.profile-photo-container {
		margin-right: 10px;
	}
}

/* ================================================
   ELEGANT PAGE CONTAINERS - Páginas Administrativas
   Corrige overflow em páginas como "Meus Imóveis"
   ================================================ */
.elegant-page,
.elegant-container {
	width: 97%;
	margin-left: 20px;
	margin-right: 20px;
	box-sizing: border-box;
	overflow-x: hidden;  /* Previne overflow horizontal */
}

/* Garantir que rows dentro de elegant-page não ultrapassem largura */
.elegant-page .row,
.elegant-container .row {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* 2. CARDS DE IMÓVEIS RESPONSIVOS - CORREÇÕES CRÍTICAS */
.property-cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.5rem;
}

/* =====================================================
   SOLUÇÃO CIRÚRGICA: Grid 5 Colunas "Meus Imóveis"

   PROBLEMA: Bootstrap .container limita largura a 1140px
   SOLUÇÃO: Remover limitação usando margin negativo SIMPLES

   SELETOR ESPECÍFICO: .elegant-page .row.row-cols-1.row-cols-md-5
   - Afeta APENAS página "Meus Imóveis" (não afeta tabelas/formulários)
   ===================================================== */

/* Mobile e tablet - grid normal sem expansão */
.elegant-page .row.row-cols-1.row-cols-md-5,
.elegant-container .row.row-cols-1.row-cols-md-5 {
	/* Sem truques em mobile - grid segue container normalmente */
	width: 100%;
	max-width: 100%;
}

/* Desktop com sidebar (≥992px) - expansão SIMPLES do grid */
@media (min-width: 992px) {
	.elegant-page .row.row-cols-1.row-cols-md-5,
	.elegant-container .row.row-cols-1.row-cols-md-5 {
		/* Calcular espaço disponível = viewport - sidebar - scrollbar - padding */
		width: calc(100vw - 280px - 17px - 2rem);
		max-width: calc(100vw - 280px - 17px - 2rem);

		/* Expandir para a esquerda usando margin negativo */
		/* Container tem padding de 0.75rem (12px) de cada lado */
		margin-left: -0.75rem;
		margin-right: -0.75rem;
	}
}

/* ========================================
   MEDIA QUERIES RESPONSIVAS - GRID ADAPTATIVO
   ======================================== */

/* Mobile pequeno - 1 coluna (≤576px) */
@media (max-width: 576px) {
	.property-cards-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
	.property-card, .card-property {
		margin-bottom: 1rem;
		border-radius: 12px;
	}
	.property-image-container {
		height: 200px;
	}

	/* Resetar expansão em mobile */
	.elegant-page .row.row-cols-1.row-cols-md-5,
	.elegant-container .row.row-cols-1.row-cols-md-5 {
		position: static;
		left: auto;
		right: auto;
		margin-left: 0;
		margin-right: 0;
		width: 100%;
		max-width: 100%;
	}

	/* Cards Bootstrap com 1 coluna */
	.elegant-page .row.row-cols-1.row-cols-md-5 > .col,
	.elegant-container .row.row-cols-1.row-cols-md-5 > .col {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}

	/* Ajustes de texto e preço */
	.card-title-property-home {
		font-size: 0.9rem;
	}
	.property-price-home {
		font-size: 1.1rem;
	}
	.property-features {
		font-size: 0.75rem;
	}
}

/* Tablet portrait - 2 colunas (577px-767px) */
@media (min-width: 577px) and (max-width: 767px) {
	.property-cards-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Resetar expansão em tablet pequeno */
	.elegant-page .row.row-cols-1.row-cols-md-5,
	.elegant-container .row.row-cols-1.row-cols-md-5 {
		position: static;
		left: auto;
		right: auto;
		margin-left: 0;
		margin-right: 0;
		width: 100%;
		max-width: 100%;
	}

	/* Cards Bootstrap com 2 colunas */
	.elegant-page .row.row-cols-1.row-cols-md-5 > .col,
	.elegant-container .row.row-cols-1.row-cols-md-5 > .col {
		flex: 0 0 50% !important;
		max-width: 50% !important;
	}
}

/* Tablet landscape / Desktop pequeno - 3 colunas (768px-991px) */
@media (min-width: 768px) and (max-width: 991px) {
	.property-cards-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Resetar expansão em tablet landscape */
	.elegant-page .row.row-cols-1.row-cols-md-5,
	.elegant-container .row.row-cols-1.row-cols-md-5 {
		position: static;
		left: auto;
		right: auto;
		margin-left: 0;
		margin-right: 0;
		width: 100%;
		max-width: 100%;
	}

	/* Cards Bootstrap com 3 colunas */
	.elegant-page .row.row-cols-1.row-cols-md-5 > .col {
		flex: 0 0 33.333333% !important;
		max-width: 33.333333% !important;
	}
}

/* Desktop médio - 4 colunas (992px-1399px) */
@media (min-width: 992px) and (max-width: 1399px) {
	.property-cards-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	/* Expansão ativa (via regra @media min-width: 992px acima) */
	/* Cards Bootstrap com 4 colunas */
	.elegant-page .row.row-cols-1.row-cols-md-5 > .col {
		flex: 0 0 25% !important;
		max-width: 25% !important;
	}
}

/* Desktop grande - 5 colunas (≥1400px)
   Largura real: ~1623px (1920 - 280 sidebar - 17 scrollbar)
   Cálculo: 1623px ÷ 5 colunas = 324px/card (IDEAL!) */
@media (min-width: 1400px) {
	.property-cards-grid {
		grid-template-columns: repeat(5, 1fr);
	}

	/* Expansão ativa (via regra @media min-width: 992px acima) */
	/* Cards Bootstrap com 5 colunas */
	.elegant-page .row.row-cols-1.row-cols-md-5 > .col {
		flex: 0 0 20% !important;
		max-width: 20% !important;
	}
}

/* 3. FORMULÁRIOS OTIMIZADOS PARA TOUCH */
@media ( max-width : 768px) {
	.form-control, .form-select, input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="number"], textarea, select {
		font-size: 16px !important; /* Previne zoom no iOS */
		padding: 12px 16px !important;
		min-height: 48px; /* Tamanho mínimo recomendado para touch */
	}
	.btn {
		min-height: 48px;
		padding: 12px 24px;
		font-size: 16px;
		touch-action: manipulation; /* Melhora responsividade do toque */
	}

	/* Espaçamento entre campos */
	.form-group, .mb-3 {
		margin-bottom: 1.5rem !important;
	}

	/* Labels mais visíveis */
	.form-label {
		font-size: 14px;
		font-weight: 600;
		margin-bottom: 8px;
	}
}

/* 4. TABELAS RESPONSIVAS - CORREÇÕES CRÍTICAS */
@media ( max-width : 768px) {
	.table-responsive {
		border: 0;
		margin-bottom: 1rem;
	}

	/* Transformação de tabelas em cards */
	.elegant-table, table.table {
		display: block;
		width: 100%;
	}
	.elegant-table thead, table.table thead {
		display: none;
	}
	.elegant-table tbody, table.table tbody {
		display: block;
	}
	.elegant-table tbody tr, table.table tbody tr {
		display: block;
		margin-bottom: 15px;
		border: 1px solid var(--border-color);
		border-radius: 8px;
		padding: 15px;
		background: white;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
		position: relative;
	}
	.elegant-table tbody tr:hover, table.table tbody tr:hover {
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		transform: translateY(-2px);
	}
	.elegant-table tbody td, table.table tbody td {
		display: block;
		text-align: left;
		padding: 8px 0;
		border: none;
		position: relative;
		padding-left: 45%;
		min-height: 30px;
	}
	.elegant-table tbody td:before, table.table tbody td:before {
		content: attr(data-label);
		position: absolute;
		left: 0;
		width: 40%;
		padding-left: 0;
		font-weight: 600;
		color: var(--gray-600);
		font-size: 0.85rem;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	/* Estilos especiais para células com badges/status */
	.elegant-table tbody td .badge, table.table tbody td .badge {
		margin-top: 2px;
	}

	/* Botões de ação em tabelas */
	.elegant-table tbody td .btn, table.table tbody td .btn {
		margin-top: 5px;
		margin-right: 5px;
	}

	/* Tabelas com scroll horizontal como alternativa */
	.table-scroll-wrapper {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		margin: 0 -15px;
		padding: 0 15px;
	}
	.table-scroll-wrapper table {
		min-width: 600px;
	}
}

/* 5. MODAIS ADAPTADOS PARA MOBILE - CORREÇÕES CRÍTICAS */
@media ( max-width : 768px) {
	.modal {
		padding: 0 !important;
	}
	.modal-dialog {
		margin: 0;
		max-width: 100%;
		height: 100%;
		min-height: 100vh;
	}
	.modal-content {
		border-radius: 0;
		height: 100%;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}
	.modal-header {
		position: sticky;
		top: 0;
		z-index: 10;
		background: white;
		border-radius: 0;
		padding: 15px 20px;
		border-bottom: 1px solid var(--border-color);
		min-height: 56px;
	}
	.modal-body {
		flex: 1;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch; /* Smooth scroll no iOS */
		padding: 20px;
		padding-bottom: 100px; /* Espaço para footer fixo */
	}
	.modal-footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: white;
		border-radius: 0;
		padding: 15px 20px;
		box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
		border-top: 1px solid var(--border-color);
		z-index: 11;
	}
	.modal-footer .btn {
		width: 100%;
		margin-bottom: 10px;
		min-height: 44px;
	}
	.modal-footer .btn:last-child {
		margin-bottom: 0;
	}

	/* Botão de fechar maior e melhor posicionado */
	.modal-header .btn-close, .modal-header .close-modal, .modal-header button[data-bs-dismiss="modal"] {
		min-width: 44px;
		min-height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin: -8px -8px -8px auto;
		padding: 12px;
	}

	/* Formulários dentro de modais */
	.modal-body .form-control, .modal-body .form-select {
		font-size: 16px !important;
		min-height: 44px;
	}

	/* Modais aninhados */
	.modal.show ~ .modal {
		z-index: 1060;
	}
}

/* 6. GALERIA DE FOTOS RESPONSIVA - CORREÇÕES DE ALTA PRIORIDADE */
@media ( max-width : 768px) {
	/* Grid de fotos vira stack vertical */
	.photo-gallery-grid {
		display: block;
		height: auto;
		margin-bottom: 20px;
	}
	.photo-gallery-grid .photo-item {
		height: 250px;
		margin-bottom: 8px;
		border-radius: 8px;
	}

	/* Mostra apenas a foto principal, oculta as demais */
	.photo-gallery-grid .photo-item:not(.main-photo):not(:first-child) {
		display: none;
	}

	/* Botão de ver todas as fotos */
	.show-all-photos-btn {
		position: static;
		width: 100%;
		margin-top: 10px;
		justify-content: center;
	}

	/* Estilos responsivos do vídeo */
	.photo-gallery-grid .video-item .play-button {
		font-size: 48px;
	}

	.video-modal-content {
		max-width: 95vw;
		max-height: 95vh;
		border-radius: 8px;
	}

	.video-modal-body video {
		max-height: 70vh;
	}

	.video-modal-header {
		padding: 12px;
	}

	.video-modal-header .close-modal {
		width: 36px;
		height: 36px;
		font-size: 16px;
	}

	/* Galeria principal menor */
	.gallery-main {
		height: 250px;
	}
	.gallery-thumbnail {
		height: 80px;
	}

	/* Swiper/Carrossel para mobile - Implementação */
	.mobile-photo-swiper {
		display: block !important;
		position: relative;
		width: 100%;
		height: 300px;
		overflow: hidden;
		border-radius: 12px;
	}
	.swiper-wrapper {
		display: flex;
		transition: transform 0.3s ease;
	}
	.swiper-slide img {
		width: 100%;
		height: 300px;
		object-fit: cover;
	}

	/* Paginação do swiper */
	.swiper-pagination {
		position: absolute;
		bottom: 10px;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		gap: 5px;
		z-index: 10;
	}
	.swiper-pagination-bullet {
		width: 8px;
		height: 8px;
		background: white;
		opacity: 0.5;
		border-radius: 50%;
		cursor: pointer;
		transition: opacity 0.3s;
	}
	.swiper-pagination-bullet-active {
		opacity: 1;
		width: 24px;
		border-radius: 4px;
	}
}

/* 7. FOOTER RESPONSIVO - CORREÇÕES DE ALTA PRIORIDADE */
@media ( max-width : 768px) {
	footer {
		padding: 2rem 1rem 1rem;
	}
	footer .row {
		flex-direction: column;
	}
	footer .col-md-3, footer .col-md-4 {
		width: 100%;
		margin-bottom: 30px;
		text-align: center;
	}
	footer h5 {
		font-size: 1rem;
		margin-bottom: 1rem;
	}
	footer ul {
		padding: 0;
		list-style: none;
	}
	footer ul li {
		padding: 10px 0;
	}
	footer a {
		display: inline-block;
		padding: 8px 12px;
		font-size: 16px !important;
		min-height: 44px;
		line-height: 28px;
	}
	footer .social-icons {
		justify-content: center;
		margin-top: 20px;
		gap: 10px;
	}
	footer .social-icons a {
		width: 44px;
		height: 44px;
		margin: 0;
	}

	/* Organização em accordion para economizar espaço */
	footer .footer-section {
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
		padding-bottom: 20px;
	}
	footer .footer-section:last-child {
		border-bottom: none;
	}

	/* Selos de Confiança - Mobile */
	.seals-row {
		justify-content: center;
		gap: 6px;
	}

	.seals-row-centered {
		flex-direction: column;
		justify-content: center;
		gap: 15px;
	}

	.seals-group-container {
		align-items: center;
		width: 100%;
	}

	.seals-group-description {
		text-align: center;
		font-size: 0.7rem;
	}

	.seals-left-group,
	.seals-right-group {
		justify-content: center;
		gap: 6px;
		width: 100%;
	}

	.trust-seal {
		font-size: 0.7rem;
		padding: 5px 8px;
		min-width: auto;
	}

	.seal-icon {
		width: 24px;
		height: 24px;
		margin-right: 6px;
	}

	.seal-icon i {
		font-size: 0.8rem;
	}

	.seal-icon svg {
		width: 14px;
		height: 14px;
	}

	.seal-title {
		font-size: 0.65rem;
	}

	.seal-value {
		font-size: 0.6rem;
	}

	.trust-seals {
		text-align: center;
	}

	.trust-seals p {
		text-align: center;
	}
}

/* RESPONSIVIDADE GERAL - MELHORADA */
@media ( max-width : 1280px) {
	.airbnb-container {
		padding: 0 24px;
	}
}

/* 8. DASHBOARD RESPONSIVO - CORREÇÕES DE ALTA PRIORIDADE */
@media ( max-width : 768px) {
	/* Grid de estatísticas */
	.dashboard-stats {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
	.stats-container {
		grid-template-columns: 1fr;
	}
	.stat-card {
		padding: 1rem;
	}
	.stat-value {
		font-size: 1.5rem;
	}

	/* Gráficos */
	.chart-container {
		height: 250px !important;
		margin-bottom: 20px;
	}

	/* Header do dashboard */
	.dashboard-header {
		flex-direction: column;
		gap: 10px;
	}
	.date-range-selector {
		width: 100%;
	}
	.export-buttons {
		width: 100%;
		display: flex;
		gap: 10px;
	}
	.export-buttons .btn {
		flex: 1;
		font-size: 14px;
		padding: 10px;
	}

	/* Tabs do dashboard */
	.nav-tabs {
		flex-direction: row;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
		border-bottom: 1px solid var(--border-color);
	}
	.nav-tabs .nav-link {
		white-space: nowrap;
		padding: 10px 15px;
	}
}

/* 9. SISTEMA DE MENSAGENS/CHAT RESPONSIVO - CORREÇÕES DE ALTA PRIORIDADE */
@media ( max-width : 768px) {
	/* Layout do chat */
	.chat-container {
		flex-direction: column;
		height: calc(100vh - 120px);
	}
	.conversations-list {
		width: 100%;
		height: 40vh;
		max-height: 40vh;
		border-right: none;
		border-bottom: 1px solid var(--border-color);
		overflow-y: auto;
	}
	.chat-area {
		width: 100%;
		flex: 1;
		height: calc(60vh - 60px);
	}

	/* Alterna entre lista e chat */
	.conversations-list.mobile-hidden {
		display: none;
	}
	.chat-area.mobile-hidden {
		display: none;
	}

	/* Botão para alternar entre lista e chat */
	.mobile-chat-toggle {
		display: flex;
		position: sticky;
		top: 60px;
		left: 0;
		right: 0;
		background: white;
		padding: 10px;
		border-bottom: 1px solid var(--border-color);
		z-index: 100;
		justify-content: space-between;
		align-items: center;
	}
	.mobile-chat-toggle .btn {
		padding: 8px 16px;
	}

	/* Input de mensagem fixo na parte inferior */
	.message-input-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: white;
		padding: 10px 15px;
		border-top: 1px solid var(--border-color);
		display: flex;
		gap: 10px;
		align-items: center;
		z-index: 100;
	}
	.message-input-container input {
		flex: 1;
		font-size: 16px !important;
		padding: 10px;
	}
	.message-input-container button {
		min-width: 44px;
		min-height: 44px;
	}

	/* Mensagens individuais */
	.message-item {
		padding: 10px;
		margin-bottom: 10px;
	}
	.message-bubble {
		max-width: 85%;
		padding: 10px 15px;
		border-radius: 18px;
	}
}

/* 10. MELHORIAS GERAIS DE RESPONSIVIDADE */
@media ( max-width : 768px) {
	/* Ajustes gerais */
	body {
		font-size: 14px;
	}
	.jumbotron {
		padding: 2rem 1rem;
	}
	.jumbotron .display-4 {
		font-size: 2rem;
	}

	/* Galeria de fotos */
	.gallery-main {
		height: 300px;
	}
	.photo-gallery-grid {
		display: block;
		height: auto;
	}
	.photo-gallery-grid .photo-item {
		height: 250px;
		margin-bottom: 10px;
	}
	.photo-gallery-grid .photo-item:not(.main-photo) {
		display: none;
	}
	.show-all-photos-btn {
		position: static;
		width: 100%;
		margin-top: 10px;
		justify-content: center;
	}

	/* Layout de conteúdo */
	.content-layout {
		grid-template-columns: 1fr;
	}
	.booking-card {
		width: 100%;
	}
	.booking-card-wrapper {
		position: static;
		order: 1; /* Calendário primeiro, depois card de reserva */
	}

	/* Avatar do anfitrião */
	.host-avatar {
		width: 48px;
		height: 48px;
	}
	.host-avatar-large {
		width: 64px;
		height: 64px;
	}
	.host-avatar-large img {
		width: 50%;
		height: 50%;
		object-fit: cover;
	}
	.host-avatar-large i {
		font-size: 0.60em;
	}

	/* Seção Conheça seu Anfitrião - Mobile */
	.host-section {
		padding: 32px 0;
	}
	.host-card {
		grid-template-columns: 1fr;
		gap: 20px;
		text-align: center;
	}
	.host-profile {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: 16px;
		text-align: left;
	}
	.host-avatar-large {
		width: 80px;
		height: 80px;
		margin-bottom: 0;
		flex-shrink: 0;
	}
	.host-avatar-large img {
		width: 100%;
		height: 100%;
	}
	.host-name {
		font-size: 20px;
		margin-bottom: 2px;
	}
	.host-badge {
		font-size: 13px;
	}
	.host-info {
		padding-top: 0;
	}
	.host-stats-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 12px;
		justify-items: center;
		margin-bottom: 16px;
	}
	.host-stat {
		align-items: center;
	}
	.host-stat .stat-value {
		font-size: 16px;
	}
	.host-stat .stat-label {
		font-size: 12px;
	}
	.host-text {
		font-size: 14px;
		text-align: left;
	}
	.contact-host-btn {
		padding: 10px 20px;
		font-size: 14px;
		width: 100%;
		text-align: center;
	}

	/* Grids */
	.amenities-grid, .rating-categories {
		grid-template-columns: 1fr;
	}
	.stats-container {
		grid-template-columns: 1fr;
	}

	/* Ações */
	.property-actions {
		flex-direction: column;
		width: 100%;
	}
	.action-button {
		width: 100%;
		justify-content: center;
	}

	/* Botões */
	.btn-elegant {
		width: 100%;
	}

	/* Cards */
	.card-body {
		padding: 1.25rem;
	}
	.property-image-container {
		height: 200px;
	}
	.stat-value {
		font-size: 1.5rem;
	}

	/* Footer */
	footer .row {
		flex-direction: column;
	}
	footer .col-md-3, footer .col-md-4 {
		width: 100%;
		margin-bottom: 30px;
		text-align: center;
	}
	footer ul {
		padding: 0;
	}
	footer ul li {
		padding: 10px 0;
	}
	footer a {
		display: inline-block;
		padding: 5px 10px;
		font-size: 16px;
	}
	footer .social-icons {
		justify-content: center;
		margin-top: 20px;
	}
	footer .social-icons a {
		width: 44px;
		height: 44px;
		margin: 0 5px;
	}

	/* Calendário de disponibilidade responsivo */
	.calendario-container {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.month-grid {
		display: block !important;
	}
	.month-calendar {
		margin-bottom: 20px;
	}
	.calendar-grid {
		font-size: 14px;
	}
	.calendar-day {
		min-height: 35px;
		font-size: 13px;
		padding: 5px;
	}

	/* Componente de seleção de hóspedes */
	.guest-selector-dropdown {
		width: 100%;
		left: 0 !important;
		right: 0 !important;
		border-radius: 0;
		bottom: auto;
		top: 100%;
		max-height: 50vh;
		overflow-y: auto;
	}
	.guest-counter {
		padding: 15px 10px;
	}
	.guest-counter-controls {
		gap: 15px;
	}
	.guest-counter-btn {
		width: 44px;
		height: 44px;
		font-size: 18px;
	}
	.guest-selector-trigger {
		width: 100%;
		justify-content: space-between;
		padding: 12px;
		font-size: 16px !important;
		min-height: 48px;
	}

	/* Cards de avaliação */
	.review-item {
		padding: 15px;
		margin-bottom: 15px;
		border-radius: 8px;
		border: 1px solid var(--border-color);
	}
	.review-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	.reviewer-info {
		width: 100%;
	}
	.review-rating {
		width: 100%;
		justify-content: flex-start;
	}
	.review-text {
		font-size: 14px;
		line-height: 1.6;
	}
	.property-response {
		margin-left: 0;
		margin-top: 15px;
		padding: 10px;
		border-left: 3px solid var(--nga-primary-color);
		background: var(--gray-50);
	}

	/* Paginação otimizada */
	.pagination {
		flex-wrap: wrap;
		justify-content: center;
		gap: 5px;
	}
	.pagination .page-item {
		margin: 2px;
	}
	.pagination .page-link {
		min-width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		padding: 0 12px;
	}

	/* Esconder páginas intermediárias em mobile */
	.pagination .page-item:not(.active):not(:first-child):not(:last-child):nth-child(n+4):nth-last-child(n+4) {
		display: none;
	}

	/* Breadcrumbs responsivos */
	.breadcrumb {
		padding: 10px 0;
		margin-bottom: 15px;
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		font-size: 14px;
	}
	.breadcrumb-item {
		display: inline-block;
		padding: 5px 8px;
	}

	/* Tooltips e Popovers */
	[data-bs-toggle="tooltip"], [data-toggle="tooltip"] {
		cursor: pointer;
	}

	/* Desabilitar hover tooltips em touch devices */
	@media ( hover : none) {
		.tooltip {
			display: none !important;
		}
	}
}

@media ( max-width : 576px) {
	.jumbotron .display-4 {
		font-size: 1.75rem;
	}

	/* Features de propriedades */
	.property-features {
		flex-wrap: wrap;
	}
	.property-feature-item {
		width: calc(50% - 0.5rem);
	}
	.gallery-main {
		height: 250px;
	}
	.elegant-title {
		font-size: 1.5rem;
	}
	.elegant-card-body {
		padding: 1.25rem;
	}
	.testimonial-card {
		padding: 1.5rem;
	}

	/* Paginação */
	.pagination {
		flex-wrap: wrap;
		justify-content: center;
	}
	.pagination .page-item {
		margin: 2px;
	}
	.pagination .page-link {
		min-width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
	}

	/* Breadcrumbs */
	.breadcrumb {
		padding: 10px 0;
		margin-bottom: 15px;
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
	}
	.breadcrumb-item {
		display: inline-block;
	}
}

/* Classes auxiliares para mobile */
.mobile-only {
	display: none;
}

.tablet-only {
	display: none;
}

.desktop-only {
	display: none;
}

@media ( max-width : 576px) {
	.mobile-only {
		display: block;
	}
	.hide-mobile {
		display: none !important;
	}
}

@media ( min-width : 577px) and (max-width: 1024px) {
	.tablet-only {
		display: block;
	}
	.hide-tablet {
		display: none !important;
	}
}

@media ( min-width : 1025px) {
	.desktop-only {
		display: block;
	}
	.hide-desktop {
		display: none !important;
	}
}

/* Safe Areas para iPhone X+ */
.safe-area-inset {
	padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ========== CORREÇÕES DE PRIORIDADE MÉDIA ========== */

/* 11. PAGINAÇÃO OTIMIZADA PARA MOBILE */
@media ( max-width : 768px) {
	.pagination {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 5px;
		padding: 10px 0;
	}
	.pagination .page-item {
		margin: 2px;
	}
	.pagination .page-link {
		min-width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		padding: 0 12px;
		border-radius: 8px;
		border: 1px solid var(--border-color);
	}
	.pagination .page-link:hover {
		background-color: var(--gray-100);
		border-color: var(--nga-primary-color);
	}
	.pagination .page-item.active .page-link {
		background-color: var(--nga-primary-color);
		border-color: var(--nga-primary-color);
	}

	/* Ocultar páginas intermediárias em mobile */
	.pagination .page-item:not(.active):not(:first-child):not(:last-child):not(.disabled) {
		display: none;
	}

	/* Mostrar apenas primeira, última e ativa */
	.pagination .page-item:first-child, .pagination .page-item:last-child, .pagination .page-item.active, .pagination .page-item.active+.page-item {
		display: block;
	}

	/* Para mostrar o item anterior ao ativo, usamos has() quando disponível */
	.pagination .page-item:has(+.page-item.active) {
		display: block;
	}

	/* Adicionar indicador de reticencias */
	.pagination .page-item.ellipsis {
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 30px;
	}
	.pagination .page-item.ellipsis .page-link {
		border: none;
		background: none;
		cursor: default;
		pointer-events: none;
	}
}

@media ( max-width : 576px) {
	.pagination {
		font-size: 13px;
	}
	.pagination .page-link {
		min-width: 40px;
		height: 40px;
		font-size: 13px;
	}

	/* Simplificar ainda mais em telas muito pequenas */
	.pagination .page-item.active+.page-item {
		display: none;
	}

	/* Esconder também o item anterior ao ativo em telas muito pequenas */
	.pagination .page-item:has(+.page-item.active) {
		display: none;
	}
}

/* 12. BREADCRUMBS RESPONSIVOS */
@media ( max-width : 768px) {
	.breadcrumb {
		display: flex;
		padding: 10px 0;
		margin-bottom: 15px;
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		font-size: 14px;
		scrollbar-width: thin;
	}
	.breadcrumb-item {
		display: inline-flex;
		align-items: center;
		padding: 5px 8px;
		min-height: 36px;
	}
	.breadcrumb-item+.breadcrumb-item::before {
		padding: 0 8px;
	}

	/* Versão colapsada alternativa */
	.breadcrumb.collapsed {
		display: flex;
		align-items: center;
		overflow: visible;
	}
	.breadcrumb.collapsed .breadcrumb-item:not(:first-child):not(:last-child) {
		display: none;
	}
	.breadcrumb.collapsed .breadcrumb-ellipsis {
		display: inline-flex;
		align-items: center;
		padding: 0 10px;
	}

	/* Indicador de scroll */
	.breadcrumb-scroll-indicator {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		background: linear-gradient(to right, transparent, white);
		padding-left: 20px;
		pointer-events: none;
	}
}

@media ( max-width : 576px) {
	.breadcrumb {
		font-size: 13px;
		padding: 8px 0;
	}
	.breadcrumb-item {
		padding: 4px 6px;
		min-height: 32px;
	}
}

/* 13. TOOLTIPS E POPOVERS OTIMIZADOS */
@media ( max-width : 768px) {
	/* Converter tooltips em cliques no mobile */
	[data-bs-toggle="tooltip"], [data-toggle="tooltip"] {
		cursor: pointer;
		text-decoration: underline;
		text-decoration-style: dotted;
		text-underline-offset: 2px;
	}

	/* Posicionamento automático de tooltips */
	.tooltip {
		font-size: 14px;
		max-width: 90vw;
	}
	.tooltip-inner {
		padding: 10px 12px;
		max-width: 280px;
	}

	/* Popovers responsivos */
	.popover {
		max-width: 90vw;
		font-size: 14px;
	}
	.popover-header {
		padding: 10px 14px;
		font-size: 15px;
	}
	.popover-body {
		padding: 12px 14px;
		max-height: 50vh;
		overflow-y: auto;
	}

	/* Desabilitar tooltips em hover para touch devices */
	@media ( hover : none) and (pointer: coarse) {
		.tooltip {
			display: none !important;
		}
		[data-bs-toggle="tooltip"]:focus, [data-bs-toggle="tooltip"]:active {
			outline: 2px solid var(--nga-primary-color);
			outline-offset: 2px;
		}
	}
}

/* 14. ALERTAS E NOTIFICAÇÕES RESPONSIVOS */
@media ( max-width : 768px) {
	.alert {
		padding: 12px 15px;
		font-size: 14px;
		margin-bottom: 15px;
		border-radius: 8px;
	}
	.alert-dismissible .btn-close {
		padding: 12px;
		margin: -12px -12px -12px auto;
	}

	/* Toast notifications */
	.toast-container {
		position: fixed !important;
		bottom: 20px;
		right: 20px;
		left: 20px;
		z-index: 1090;
	}
	.toast {
		width: 100%;
		margin-bottom: 10px;
		font-size: 14px;
	}
	.toast-header {
		padding: 10px 12px;
	}
	.toast-body {
		padding: 12px;
	}
}

/* 15. BADGES E TAGS RESPONSIVOS */
@media ( max-width : 768px) {
	.badge {
		padding: 0.4em 0.65em;
		font-size: 0.75rem;
	}
	.badge-pill {
		padding-left: 0.8em;
		padding-right: 0.8em;
	}

	/* Tags de filtros */
	.filter-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-bottom: 15px;
	}
	.filter-tag {
		padding: 6px 12px;
		font-size: 13px;
		border-radius: 20px;
		background: var(--gray-100);
		border: 1px solid var(--border-color);
		min-height: 32px;
		display: inline-flex;
		align-items: center;
		gap: 5px;
	}
	.filter-tag .remove-tag {
		margin-left: 5px;
		cursor: pointer;
		font-size: 16px;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0, 0, 0, 0.1);
	}
}

/* ========== 18. PRINT STYLES ========== */
@media print {
	.booking-card-wrapper, .action-button, .show-all-photos-btn, .navbar, footer {
		display: none;
	}
}

/* ========== 19. TAXAS E PRICING ========== */
.taxas-info-box {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	color: white;
	padding: 16px;
	border-radius: 12px;
	margin: 16px 0;
}

.taxa-badge {
	display: inline-block;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.taxa-badge.obrigatoria {
	background: #00A699;
	color: white;
}

.taxa-badge.opcional {
	background: #007BFF;
	color: white;
}

.valor-total-animado {
	animation: pulseValue 0.5s ease-out;
}

@keyframes pulseValue { 
	0% {
		transform: scale(1);
	}

	50% {
		transform :
		scale( 1.05 );
		color : var( --nga-accent-color ); 
	}
	
	100% { 
		transform : 
		scale( 1 ); 
	}
}

.price-breakdown {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--border-color);
}

.price-breakdown-novo-agendamento {
	margin-top: 0px;
	padding-top: 0px;
}

.price-row {
	display: flex;
	justify-content: space-between;
	margin-bottom: 12px;
	font-size: 16px;
}

.price-row.total {
	font-weight: 600;
	padding-top: 12px;
	border-top: 1px solid var(--border-color);
}

.no-charge-text {
	text-align: center;
	margin-top: 12px;
	font-size: 14px;
	color: var(--gray-600);
}

.report-listing {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid var(--border-color);
	font-size: 14px;
	color: var(--gray-600);
	text-decoration: underline;
	cursor: pointer;
}

/* ========== Miniaturas de Imóveis nas Tabelas ========== */
.property-thumbnail-container {
	width: 60px;
	height: 60px;
	overflow: hidden;
	border-radius: 10px;
	position: relative;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	transition: var(--elegant-transition-fast);
}

.property-thumbnail-container:hover {
	transform: scale(1.05);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.property-thumbnail-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: var(--elegant-transition-base);
}

.property-thumbnail-container:hover .property-thumbnail-image {
	transform: scale(1.1);
}

.property-thumbnail-placeholder {
	width: 100%;
	height: 100%;
	background: var(--elegant-gradient-light);
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Melhorias para Tabelas com Imagens */
.elegant-table tbody td .property-info {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.elegant-table tbody td .property-details {
	flex: 1;
}

.elegant-table tbody td .property-title-link {
	color: var(--elegant-primary);
	text-decoration: none;
	font-weight: 600;
	transition: var(--elegant-transition-fast);
}

.elegant-table tbody td .property-title-link:hover {
	color: var(--elegant-secondary);
	text-decoration: underline;
}

.elegant-table tbody td .property-location {
	color: var(--elegant-gray-500);
	font-size: 0.85rem;
	margin-top: 0.25rem;
}

/* ========== Cards Elegantes ========== */
.elegant-card {
	background: white;
	border-radius: 16px;
	box-shadow: var(--elegant-shadow-base);
	overflow: hidden;
	transition: var(--elegant-transition-base);
	border: 1px solid var(--elegant-gray-200);
	position: relative;
}

.elegant-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--elegant-shadow-xl);
	border-color: var(--elegant-secondary);
}

.elegant-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--elegant-gradient-primary);
	opacity: 0;
	transition: var(--elegant-transition-base);
}

.elegant-card:hover::before {
	opacity: 1;
}

.elegant-card-header {
	padding: 1.5rem;
	background: var(--elegant-gradient-dark);
	color: white;
	position: relative;
	overflow: hidden;
}

.elegant-card-header::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -50%;
	width: 200%;
	height: 200%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
	animation: elegantShimmer 10s infinite linear;
}

.elegant-card-body {
	padding: 2rem;
}

.elegant-card-footer {
	padding: 1.5rem;
	background: var(--elegant-gray-50);
	border-top: 1px solid var(--elegant-gray-200);
}

/* === Menus da página de perfil === */
.list-group-item.active {
	background-color: var(--nga-primary-color);
	border-color: var(--nga-primary-color);
	color: white;
}

.title-perfil-page {
	background: var(--nga-primary-color);
}

.title-perfil-page h4, .title-perfil-page h3 {
	color: white;
}

/* ========== MENU DE NOTIFICAÇÕES ========== */

/* Dropdown de notificações */
.notifications-dropdown {
	border: none;
	border-radius: 12px;
	overflow: hidden;
	padding: 0;
}

.notifications-dropdown .dropdown-header {
	position: sticky;
	top: 0;
	z-index: 10;
	border-bottom: 1px solid #e0e0e0;
}

.notifications-dropdown .dropdown-header .btn-link {
	text-decoration: none;
	font-size: 0.9rem;
	transition: transform 0.2s ease, opacity 0.2s ease;
	opacity: 0.8;
}

.notifications-dropdown .dropdown-header .btn-link:hover {
	transform: scale(1.1);
	opacity: 1;
}

/* Container de notificações com scroll customizado */
.notifications-list {
	background: #fff;
}

#notifications-container {
	scrollbar-width: thin;
	scrollbar-color: #cbd5e0 #f7fafc;
}

#notifications-container::-webkit-scrollbar {
	width: 5px;
}

#notifications-container::-webkit-scrollbar-track {
	background: #f7fafc;
}

#notifications-container::-webkit-scrollbar-thumb {
	background: #cbd5e0;
	border-radius: 3px;
}

#notifications-container::-webkit-scrollbar-thumb:hover {
	background: #a0aec0;
}

/* Item de notificação - Layout compacto */
.notification-item {
	transition: all 0.2s ease;
	background: #fff;
	border-bottom: 1px solid #f1f3f5;
}

.notification-item:last-child {
	border-bottom: none;
}

/* Cursor baseado na existência de link */
.notification-clickable {
	cursor: pointer;
}

.notification-clickable:hover {
	background-color: #f8f9fa;
}

.notification-no-link {
	cursor: default;
}

.notification-no-link:hover {
	background-color: #fafbfc;
}

/* Badge circular de prioridade */
.notification-item .badge {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.85rem;
}

/* Estilos para elementos de notificação */
.notification-title {
	font-size: 0.875rem;
	font-weight: 600;
	color: #2d3748;
	line-height: 1.3;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	white-space: normal;
}

.notification-message {
	font-size: 0.8125rem;
	color: #718096;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	white-space: normal;
}

.notification-time {
	font-size: 0.75rem;
}

.notification-icon {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.notification-icon i {
	font-size: 1.1rem;
}

/* Botão de remover notificação */
.notification-item .btn-link {
	opacity: 0;
	transition: opacity 0.2s ease;
	font-size: 0.85rem;
	min-width: 20px;
}

.notification-item:hover .btn-link {
	opacity: 0.6;
}

.notification-item .btn-link:hover {
	opacity: 1 !important;
}

/* Ícone de nova notificação */
.notification-new-icon {
	color: #ffc107;
	font-size: 0.75rem;
	margin-left: 0.25rem;
	animation: pulseGlow 2s ease-in-out infinite;
	filter: drop-shadow(0 0 2px rgba(255, 193, 7, 0.6));
	flex-shrink: 0;
}

@keyframes pulseGlow {
	0%, 100% {
		opacity: 1;
		transform: scale(1);
	}
	50% {
		opacity: 0.7;
		transform: scale(1.1);
	}
}

/* Mensagem de "Nenhuma notificação" */
#no-notifications-message {
	color: var(--gray-500);
}

#no-notifications-message i {
	color: var(--gray-300);
}

/* Badge contador no ícone do sino */
#notificacoes-contador {
	animation: pulseNotification 2s ease-in-out infinite;
}

@keyframes pulseNotification {
	0%, 100% {
		transform: translate(-50%, -50%) scale(1);
	}
	50% {
		transform: translate(-50%, -50%) scale(1.1);
	}
}

/* Efeito no ícone do sino quando há notificações */
#notificationsDropdown .fa-bell {
	transition: transform 0.3s ease;
}

#notificationsDropdown:hover .fa-bell {
	transform: rotate(15deg);
	animation: ringBell 0.5s ease-in-out;
}

@keyframes ringBell {
	0%, 100% { transform: rotate(0deg); }
	25% { transform: rotate(-15deg); }
	50% { transform: rotate(15deg); }
	75% { transform: rotate(-10deg); }
}

/* ========== EFEITOS DE HOVER NOS ÍCONES DO NAVBAR ========== */

/* Transição suave para todos os ícones */
.navbar .nav-link i {
	transition: transform 0.3s ease;
	display: inline-block;
}

/* Efeito de balanço/rotação no hover */
.navbar .nav-link:hover .fa-tachometer-alt,
.navbar .nav-link:hover .fa-chart-line {
	animation: dashboardBounce 0.5s ease-in-out;
}

@keyframes dashboardBounce {
	0%, 100% { transform: scale(1) rotate(0deg); }
	25% { transform: scale(1.1) rotate(-5deg); }
	50% { transform: scale(1.15) rotate(5deg); }
	75% { transform: scale(1.1) rotate(-3deg); }
}

/* Efeito de check/confirmação no calendário de Reservas (proprietário) */
.navbar .nav-link:hover .fa-calendar-check {
	animation: reservasCheck 0.6s ease-in-out;
}

@keyframes reservasCheck {
	0%, 100% { transform: scale(1) rotate(0deg); }
	30% { transform: scale(1.15) rotate(-8deg); }
	60% { transform: scale(1.1) rotate(8deg); }
	80% { transform: scale(1.12) rotate(-4deg); }
}

/* Efeito de flip no calendário de Agendamentos (cliente) */
.navbar .nav-link:hover .fa-calendar-alt {
	animation: agendamentosFlip 0.6s ease-in-out;
}

@keyframes agendamentosFlip {
	0%, 100% { transform: rotateY(0deg) scale(1); }
	50% { transform: rotateY(180deg) scale(1.1); }
}

/* Efeito de flutuação no envelope (mensagens) */
.navbar .nav-link:hover .fa-envelope {
	animation: messageFloat 0.6s ease-in-out;
}

@keyframes messageFloat {
	0%, 100% { transform: translateY(0); }
	25% { transform: translateY(-4px); }
	50% { transform: translateY(-2px); }
	75% { transform: translateY(-3px); }
}

/* Efeito de rotação no comentário */
.navbar .nav-link:hover .fa-comment {
	animation: commentWiggle 0.5s ease-in-out;
}

@keyframes commentWiggle {
	0%, 100% { transform: rotate(0deg) scale(1); }
	25% { transform: rotate(-10deg) scale(1.1); }
	50% { transform: rotate(10deg) scale(1.15); }
	75% { transform: rotate(-5deg) scale(1.1); }
}

/* Efeito de zoom na lupa (buscar) */
.navbar .nav-link:hover .fa-search {
	animation: searchZoom 0.5s ease-in-out;
}

@keyframes searchZoom {
	0%, 100% { transform: scale(1) rotate(0deg); }
	50% { transform: scale(1.2) rotate(15deg); }
}

/* Efeito de pulso no ID card (perfil) */
.navbar .nav-link:hover .fa-id-card {
	animation: profilePulse 0.5s ease-in-out;
}

@keyframes profilePulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.15); }
}

/* Efeito de rotação no sair */
.navbar .btn:hover .fa-sign-out-alt {
	animation: signOutRotate 0.5s ease-in-out;
}

@keyframes signOutRotate {
	0%, 100% { transform: translateX(0) rotate(0deg); }
	50% { transform: translateX(3px) rotate(15deg); }
}

/* Efeito de entrada no sign-in */
.navbar .btn:hover .fa-sign-in-alt {
	animation: signInSlide 0.5s ease-in-out;
}

@keyframes signInSlide {
	0%, 100% { transform: translateX(0); }
	50% { transform: translateX(-3px); }
}

/* Responsividade */
@media (max-width: 768px) {
	/* Em tablets, manter tamanho razoável */
	.notifications-dropdown {
		width: 340px !important;
	}
}

@media (max-width: 576px) {
	/* Em mobile, usar largura total */
	.notifications-dropdown {
		width: 100vw !important;
		max-width: 100vw !important;
		left: 0 !important;
		right: 0 !important;
		transform: none !important;
		border-radius: 0;
		margin-top: 0;
	}

	#notifications-container {
		max-height: 60vh !important;
	}

	/* Reduzir tamanho dos itens em mobile */
	.notification-item {
		padding: 10px 12px;
	}

	.notification-icon {
		width: 32px;
		height: 32px;
	}

	.notification-icon i {
		font-size: 0.95rem;
	}

	.notification-title {
		font-size: 0.85rem;
	}

	.notification-message {
		font-size: 0.8rem;
	}
}

/* ========== FIM DO ARQUIVO ========== */