/* CORES */ :root { /* Cores principais */ --color-primary: #F98948; --color-secondary: #FFFFFF; --color-accent: #F98948; --color-light: #DCDCDC; /* Cores de texto */ --color-text-primary: #2C2C2C; --color-text-light: #FFFFFF; --color-text-secondary: #5A5A5A; --color-text-muted: #888888; /* Variações de cores */ --color-primary-dark: #065964; --color-primary-light: #0a9aa9; --color-accent-dark: #fa9445; --color-accent-light: #fdb989; --color-secondary-dark: #7a7889; --color-secondary-light: #b8b6c9; /* Fundos */ --bg-body: #FBFBFB; --bg-section: #F8F9FA; --bg-card: #FFFFFF; --bg-modal: #FFFFFF; --bg-header: #FFFFFF; --bg-footer: #F8F9FA; --bg-button-primary: var(--color-accent); --bg-button-secondary: var(--color-secondary); --bg-button-outline: transparent; --bg-input: #FFFFFF; --bg-hover: rgba(8, 126, 139, 0.1); /* Bordas e sombras */ --border-color: #E0E0E0; --border-radius: 8px; --shadow-sm: 0 2px 4px rgba(8, 126, 139, 0.1); --shadow-md: 0 4px 8px rgba(8, 126, 139, 0.15); --shadow-lg: 0 8px 16px rgba(8, 126, 139, 0.2); /* Cores de links */ --color-link: var(--color-primary); --color-link-hover: var(--color-primary-dark); --color-link-visited: var(--color-secondary); /* Cores de botões */ --color-button-text: #FFFFFF; --color-button-text-secondary: var(--color-text-primary); --color-button-text-outline: var(--color-accent); --bg-button-hover: var(--color-accent-dark); --bg-button-active: var(--color-accent-dark); --border-button-outline: var(--color-accent); /* Cores de inputs */ --color-input-text: var(--color-text-primary); --color-input-placeholder: var(--color-text-muted); --border-input: var(--border-color); --border-input-focus: var(--color-primary); --bg-input-focus: var(--bg-input); /* Cores de modais */ --color-modal-header: var(--color-text-primary); --bg-modal-header: var(--bg-card); --border-modal: var(--border-color); /* Cores de notificações */ --bg-notification-success: #d4edda; --color-notification-success: #155724; --bg-notification-error: #f8d7da; --color-notification-error: #721c24; --bg-notification-warning: #fff3cd; --color-notification-warning: #856404; --bg-notification-info: #d1ecf1; --color-notification-info: #0c5460; /* Transições */ --transition-fast: 0.2s ease; --transition-normal: 0.3s ease; } /* TEMA ESCURO - Cores */ [data-theme="dark"] { /* Cores principais */ --color-primary: #F98948; --color-secondary: #41424C; --color-accent: #F98948; --color-light: #DAFFEF; /* Cores de texto */ --color-text-primary: #e6eef8; --color-text-light: #ffffff; --color-text-secondary: #cbd5e0; --color-text-muted: #a0aec0; /* Variações de cores */ --color-primary-dark: #0b7270; --color-primary-light: #2dd4bf; --color-accent-dark: #f08a2b; --color-accent-light: #f8b785; --color-secondary-dark: #2d3748; --color-secondary-light: #4a5568; /* Fundos */ --bg-body: #41424C; --bg-section: #0b161b; --bg-card: #0f1b20; --bg-modal: #0f1b20; --bg-header: #0f1b20; --bg-footer: #0b161b; --bg-button-primary: var(--color-accent); --bg-button-secondary: var(--color-secondary); --bg-button-outline: transparent; --bg-input: #1a202c; --bg-hover: rgba(249, 137, 72, 0.1); /* Bordas e sombras */ --border-color: #1f2a2f; --border-radius: 8px; --shadow-sm: 0 2px 4px rgba(2,6,8,0.6); --shadow-md: 0 6px 12px rgba(2,6,8,0.7); --shadow-lg: 0 12px 24px rgba(2,6,8,0.75); /* Cores de links */ --color-link: var(--color-accent); --color-link-hover: var(--color-accent-light); --color-link-visited: var(--color-secondary); /* Cores de botões */ --color-button-text: #ffffff; --color-button-text-secondary: var(--color-text-primary); --color-button-text-outline: var(--color-accent); --bg-button-hover: var(--color-accent-dark); --bg-button-active: var(--color-accent-dark); --border-button-outline: var(--color-accent); /* Cores de inputs */ --color-input-text: var(--color-text-primary); --color-input-placeholder: var(--color-text-muted); --border-input: var(--border-color); --border-input-focus: var(--color-accent); --bg-input-focus: var(--bg-input); /* Cores de modais */ --color-modal-header: var(--color-text-primary); --bg-modal-header: var(--bg-card); --border-modal: var(--border-color); /* Cores de notificações */ --bg-notification-success: #1a4d3a; --color-notification-success: #68d391; --bg-notification-error: #4a1c1c; --color-notification-error: #fc8181; --bg-notification-warning: #4a3c1c; --color-notification-warning: #f6e05e; --bg-notification-info: #1c3a4a; --color-notification-info: #63b3ed; /* Transições */ --transition-fast: 0.2s ease; --transition-normal: 0.3s ease; } /* Ensure Bootstrap/utility muted text follows our variable in dark mode */ [data-theme="dark"] .text-muted, [data-theme="dark"] .form-text.text-muted, [data-theme="dark"] small.text-muted { color: var(--color-text-secondary) !important; opacity: 0.95; } [data-theme="dark"] .card { background-color: #373737; } [data-theme="dark"] .card-header { background-color: lightgray; } [data-theme="dark"] .trip-provider{ color: var(--color-light); font-size: 0.9rem; } [data-theme="dark"] .param-item { color: var(--color-secondary); } /* ======================================== RESET E ESTILOS BASE ======================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: var(--bg-body); color: var(--color-text-primary); line-height: 1.6; display: flex; flex-direction: column; min-height: 100vh; } html, body { height: 100%; margin: 0; } /* Wrapper para manter o footer no fundo */ .page-wrapper { min-height: 100vh; display: flex; flex-direction: column; } .main-content { flex: 1; } /* ======================================== NAVBAR ======================================== */ .navbar { background-color: var(--color-primary) !important; box-shadow: var(--shadow-md); } .navbar-brand { color: var(--color-text-light) !important; font-weight: bold; font-size: 1.5rem; } .navbar-nav .nav-link { color: var(--color-light) !important; transition: var(--transition-fast); margin: 0 0.5rem; font-size: 1.4rem; } /* Cart icon: use currentColor so it can be recolored by the nav-link color (works in dark mode) */ .icon-cart { width: 1rem; height: 1rem; display: inline-block; vertical-align: -0.125em; margin-right: 0.35rem; fill: currentColor; /* SVG fill follows current text color */ } /* Ensure cart icon is clearly visible in dark mode (inherits nav-link color which is var(--color-light)) */ [data-theme="dark"] .navbar-nav .nav-link .icon-cart { color: var(--color-text-light); } .navbar-nav .nav-link:hover { color: var(--color-text-primary) !important; transform: translateY(-2px); } .navbar-toggler { border-color: var(--color-light); } .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='rgba(218, 255, 239, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } /* ======================================== BOTÕES ======================================== */ .btn-primary { background-color: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-light); transition: var(--transition-normal); } .btn-primary:hover { background-color: var(--color-primary-dark); border-color: var(--color-primary-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-accent, .btn-warning { background-color: var(--color-accent); border-color: var(--color-accent); color: var(--color-text-light); transition: var(--transition-normal); } .btn-accent:hover, .btn-warning:hover { background-color: var(--color-accent-dark); border-color: var(--color-accent-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); } .btn-secondary { background-color: var(--color-secondary); border-color: var(--color-text-primary); color: var(--color-text-primary); } .btn-secondary:hover { background-color: #817fa0; border-color: #817fa0; } .btn-outline-primary { border-color: var(--color-primary); color: var(--color-primary); } .btn-outline-primary:hover { background-color: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-light); } [data-theme="dark"] #resetFiltersBtn { border-color: white; color: white; } /* ======================================== HERO/BANNER PRINCIPAL ======================================== */ .hero-section { background: linear-gradient(to bottom, var(--color-primary) 0%, var(--color-secondary) 100%); color: var(--color-text-light); padding: 4rem 0; margin-bottom: 3rem; } .hero-section h1 { font-size: 2.5rem; font-weight: bold; margin-bottom: 1rem; animation: fadeInDown 0.8s ease; } .hero-section p { font-size: 1.2rem; opacity: 0.95; animation: fadeInUp 0.8s ease; } /* ======================================== CARDS ======================================== */ .card { background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; box-shadow: var(--shadow-sm); transition: var(--transition-normal); overflow: hidden; } .card:hover { box-shadow: var(--shadow-lg); transform: translateY(-5px); } .card-header { background-color: var(--color-light); color: var(--color-primary); font-weight: bold; border-bottom: 2px solid var(--color-primary); } .card-title { color: var(--color-primary); font-weight: bold; } .card-text { color: var(--color-text-primary); } .trip-card { background: var(--bg-card); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition-normal); } .trip-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-5px); } .trip-card .card-body { flex: 1; display: flex; flex-direction: column; } .pricing-section { margin-top: auto; } .trip-price { color: var(--color-accent); font-size: 1.5rem; font-weight: bold; } /* ======================================== FORMULÁRIOS ======================================== */ .form-control { border: 2px solid var(--border-color); border-radius: 8px; padding: 0.75rem; transition: var(--transition-fast); color: var(--color-text-primary); } .form-control:focus { border-color: var(--color-primary); box-shadow: 0 0 0 0.2rem rgba(8, 126, 139, 0.25); } .form-label { color: var(--color-text-primary); font-weight: 500; margin-bottom: 0.5rem; } .form-select { border: 2px solid var(--border-color); border-radius: 8px; color: var(--color-text-primary); } .form-select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 0.2rem rgba(8, 126, 139, 0.25); } /* Make form controls follow theme variables (so combo boxes are readable in dark mode) */ input, textarea, select, .form-control, .form-select { background-color: var(--bg-card); color: var(--color-text-primary); border: 2px solid var(--border-color); border-radius: 8px; } /* Placeholder color */ input::placeholder, textarea::placeholder, .form-control::placeholder { color: var(--color-text-secondary); } /* Select specific tweaks */ select.form-select, select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--color-text-secondary) 50%), linear-gradient(135deg, var(--color-text-secondary) 50%, transparent 50%); background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 2.5rem; } /* Option styling (limited by browser support but helps in many modern browsers) */ option { background-color: var(--bg-card); color: var(--color-text-primary); } /* Ensure focus states remain visible in dark mode */ .form-control:focus, .form-select:focus, input:focus, textarea:focus, select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 0.2rem rgba(14,165,164,0.15); } /* ======================================== BADGES E TAGS ======================================== */ .badge { padding: 0.4rem 0.8rem; border-radius: 20px; font-weight: 500; } .badge.bg-primary { background-color: var(--color-primary) !important; } .badge.bg-warning { background-color: var(--color-accent) !important; color: var(--color-text-light); } .badge.bg-info { background-color: var(--color-light) !important; color: var(--color-primary); } .badge.bg-secondary { background-color: var(--color-text-primary) !important; } /* ======================================== ALERTAS E NOTIFICAÇÕES ======================================== */ .alert { border-radius: 8px; border: none; animation: slideInDown 0.3s ease; } .alert-success { background-color: var(--color-light); color: var(--color-primary); border-left: 4px solid var(--color-primary); } .alert-warning { background-color: #fff3e0; color: var(--color-accent-dark); border-left: 4px solid var(--color-accent); } .alert-info { background-color: #e3f2fd; color: var(--color-primary); border-left: 4px solid var(--color-primary); } /* ======================================== SEÇÕES ======================================== */ section { padding: 3rem 0; } section h2 { color: var(--color-primary); font-weight: bold; margin-bottom: 2rem; position: relative; padding-bottom: 1rem; } section h2::after { content: ''; position: absolute; bottom: 0; left: 0; width: 60px; height: 4px; background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-primary) 100%); border-radius: 2px; } /* ======================================== VIAGENS/PRODUTOS ======================================== */ .trip-card { background: var(--bg-card); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition-normal); } .trip-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-5px); } .trip-card .card-body { flex: 1; display: flex; flex-direction: column; } .pricing-section { margin-top: auto; } .trip-price { color: var(--color-accent); font-size: 1.5rem; font-weight: bold; } /* ======================================== CARRINHO DE COMPRAS ======================================== */ .cart-badge { background-color: var(--color-accent); color: var(--color-text-light); border-radius: 50%; padding: 0.2rem 0.5rem; font-size: 0.8rem; position: absolute; top: -8px; right: -8px; } .cart-item { background-color: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; transition: var(--transition-fast); } .cart-item:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); } /* ======================================== PROGRAMA DE FIDELIZAÇÃO ======================================== */ .points-display { background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%); color: var(--color-text-light); padding: 1.5rem; border-radius: 12px; box-shadow: var(--shadow-md); } .points-number { font-size: 2.5rem; font-weight: bold; } /* ======================================== PROMOÇÕES ======================================== */ .promo-card { background: linear-gradient(135deg, var(--color-light) 0%, var(--bg-card) 100%); border: 2px solid var(--color-primary); border-radius: 12px; padding: 1.5rem; position: relative; overflow: hidden; } .promo-card::before { content: ''; position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(252, 170, 103, 0.1) 0%, transparent 70%); animation: rotate 20s linear infinite; } .promo-badge { background-color: var(--color-accent); color: var(--color-text-light); padding: 0.5rem 1rem; border-radius: 20px; font-weight: bold; display: inline-block; margin-bottom: 1rem; } /* Inline discount next to price (refinado) */ .discount-inline { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.2rem 0.55rem; border-radius: 999px; background: linear-gradient(135deg, #ffe9ec 0%, #ffdfe4 100%); color: #b02a37; /* darker danger */ border: 1px solid rgba(220, 53, 69, 0.35); font-weight: 700; letter-spacing: 0.2px; line-height: 1; box-shadow: 0 2px 6px rgba(220,53,69,0.12); } .discount-inline::before { content: "🔥"; font-size: 0.95em; line-height: 1; } /* Dark theme adjustments for discount badge */ [data-theme="dark"] .discount-inline { background: rgba(220, 53, 69, 0.18); color: #ff7b86; border-color: rgba(220, 53, 69, 0.35); box-shadow: 0 2px 8px rgba(220,53,69,0.22); } [data-theme="dark"] #pointsToUse { color: white; background: black; } [data-theme="dark"] #profileName, h6 { color: white; } h6 { color: var(--color-text-primary); } /* ======================================== ANIMAÇÕES ======================================== */ @keyframes fadeInDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideInDown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } .animate-pulse { animation: pulse 2s ease-in-out infinite; } /* ======================================== UTILITÁRIOS ======================================== */ .bg-light-custom { background-color: var(--color-light) !important; } .bg-primary-custom { background-color: var(--color-primary) !important; color: var(--color-text-light); } .bg-accent-custom { background-color: var(--color-accent) !important; color: var(--color-text-light); } .text-primary-custom { color: var(--color-primary) !important; } .text-accent-custom { color: var(--color-accent) !important; } .text-secondary-custom { color: var(--color-secondary) !important; } /* ======================================== FOOTER ======================================== */ footer { background-color: var(--color-primary); color: var(--color-text-light); padding: 2rem 0; margin-top: 4rem; margin-top: auto; } footer a { color: var(--color-light); text-decoration: none; transition: var(--transition-fast); } footer a:hover { color: var(--color-accent); } /* ======================================== MODAIS ======================================== */ .modal-header { background-color: var(--bg-section); color: var(--color-text-primary); border-bottom: 2px solid var(--border-color); } .modal-title { color: var(--color-primary); font-weight: bold; } .modal-content { background-color: var(--bg-card); color: var(--color-text-primary); border-radius: 12px; border: none; box-shadow: var(--shadow-lg); } .modal-footer { background-color: var(--bg-section); color: var(--color-text-primary); border-top: 1px solid var(--border-color); } /* Ensure modal close button is visible in dark mode (cart modal specifically) */ [data-theme="dark"] #cartModal .btn-close { filter: invert(1) grayscale(1) brightness(2); opacity: 0.95; } /* Fallback: for Bootstrap's .btn-close (SVG) ensure border/outline is visible */ [data-theme="dark"] #cartModal .btn-close:focus, [data-theme="dark"] #cartModal .btn-close:hover { filter: invert(1) grayscale(1) brightness(2) drop-shadow(0 0 2px rgba(255,255,255,0.05)); } /* If the close button uses background-image with SVG, explicitly set background-color to transparent and color to white */ [data-theme="dark"] #cartModal .btn-close { background-color: transparent; } /* Toast close button visibility in dark mode */ [data-theme="dark"] .toast .btn-close, [data-theme="dark"] .toast-header .btn-close { filter: invert(1) grayscale(1) brightness(2); opacity: 0.95; background-color: transparent; } [data-theme="dark"] .toast .btn-close:focus, [data-theme="dark"] .toast .btn-close:hover, [data-theme="dark"] .toast-header .btn-close:focus, [data-theme="dark"] .toast-header .btn-close:hover { filter: invert(1) grayscale(1) brightness(2) drop-shadow(0 0 2px rgba(255,255,255,0.06)); } /* ======================================== FORÇAR ÍCONE BRANCO (FALLBACK SVG) - Alguns navegadores/versões ignoram filtros em background-image SVGs. - Substituímos o background-image por um SVG embutido com traços brancos. - Aplica-se a toasts, modais e alertas para garantir consistência. ======================================== */ [data-theme="dark"] .toast .btn-close, [data-theme="dark"] .toast-header .btn-close, [data-theme="dark"] .modal .btn-close, [data-theme="dark"] .modal-header .btn-close, [data-theme="dark"] .alert .btn-close, [data-theme="dark"] .alert-header .btn-close, [data-theme="dark"] .btn-close { /* Forçar cor e remover possíveis máscaras que possam esconder o ícone */ color: #fff !important; filter: none !important; -webkit-mask-image: none !important; mask-image: none !important; /* SVG embutido (duas linhas formando um "X") com stroke branco (%23fff) */ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cline x1='2' y1='2' x2='14' y2='14' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3e%3cline x1='14' y1='2' x2='2' y2='14' stroke='%23fff' stroke-width='2' stroke-linecap='round'/%3e%3c/svg%3e") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 1em 1em !important; opacity: 0.95 !important; border: none !important; } [data-theme="dark"] .toast .btn-close:focus, [data-theme="dark"] .toast .btn-close:hover, [data-theme="dark"] .modal .btn-close:focus, [data-theme="dark"] .modal .btn-close:hover, [data-theme="dark"] .alert .btn-close:focus, [data-theme="dark"] .alert .btn-close:hover, [data-theme="dark"] .btn-close:focus, [data-theme="dark"] .btn-close:hover { /* manter visibilidade no hover/focus */ filter: drop-shadow(0 0 2px rgba(255,255,255,0.06)) !important; } /* ======================================== RESPONSIVIDADE ======================================== */ @media (max-width: 768px) { .hero-section h1 { font-size: 2rem; } .hero-section p { font-size: 1rem; } section h2 { font-size: 1.5rem; } .points-number { font-size: 2rem; } } /* ======================================== LOADING SPINNER ======================================== */ .spinner-custom { border: 3px solid var(--color-light); border-top: 3px solid var(--color-primary); border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* ======================================== ÁREA DE NOTIFICAÇÕES ======================================== */ #notificationArea { position: fixed; top: 80px; right: 20px; z-index: 9999; max-width: 350px; } /* ======================================== DROPDOWN DO UTILIZADOR ======================================== */ .user-info-dropdown { padding: 0.5rem 0; } .user-info-dropdown strong { color: var(--color-primary); font-size: 0.95rem; } .user-info-dropdown small { font-size: 0.8rem; margin-top: 0.25rem; } .dropdown-menu { background-color: var(--bg-card); color: var(--color-text-primary); border: 2px solid var(--border-color); border-radius: 12px; box-shadow: var(--shadow-lg); min-width: 250px; } .dropdown-header { background-color: var(--bg-section); color: var(--color-text-primary); border-radius: 10px 10px 0 0; } .dropdown-item { padding: 0.75rem 1.25rem; transition: var(--transition-fast); color: var(--color-text-primary); } .dropdown-item:hover { background-color: var(--bg-section); color: var(--color-primary); } .dropdown-item:active { background-color: var(--color-primary); color: var(--color-text-light); } /* ======================================== GESTÃO DE RESERVAS ======================================== */ #reservasSection .card { border: 2px solid var(--border-color); transition: var(--transition-normal); } #reservasSection .card:hover { border-color: var(--color-primary); } #reservasSection .card-title { font-size: 1.2rem; margin-bottom: 0.5rem; } #reservasSection .badge { font-size: 0.85rem; padding: 0.5rem 1rem; } #reservasSection .btn-outline-primary { font-size: 0.9rem; } #reservasSection .btn-outline-danger { font-size: 0.9rem; } #reservasSection .trip-price { font-size: 1.3rem; } /* Mensagem de sem reservas */ #noReservas { animation: fadeInUp 0.5s ease; } /* Animação de carregamento de reservas */ #reservasContainer .card { animation: fadeInUp 0.5s ease; animation-fill-mode: both; } #reservasContainer .card:nth-child(1) { animation-delay: 0.1s; } #reservasContainer .card:nth-child(2) { animation-delay: 0.2s; } #reservasContainer .card:nth-child(3) { animation-delay: 0.3s; } #reservasContainer .card:nth-child(4) { animation-delay: 0.4s; } #reservasContainer .card:nth-child(5) { animation-delay: 0.5s; } #reservasContainer .card:nth-child(6) { animation-delay: 0.6s; } /* Modal de edição de reserva */ #editReservationModal .modal-body { padding: 1.5rem; } #editReservationModal .alert-info { background-color: var(--color-light); color: var(--color-primary); border: 1px solid var(--color-primary); } /* ======================================== PAGINAÇÃO ======================================== */ .pagination { gap: 0.5rem; } .pagination .page-item { list-style: none; } .pagination .page-link { background-color: var(--bg-card); border: 2px solid var(--border-color); color: var(--color-primary); padding: 0.5rem 1rem; border-radius: 8px; transition: var(--transition-fast); cursor: pointer; font-weight: 500; } .pagination .page-link:hover { background-color: var(--color-light); border-color: var(--color-primary); transform: translateY(-2px); } .pagination .page-item.active .page-link { background-color: var(--color-primary); border-color: var(--color-primary); color: var(--color-text-light); } .pagination .page-item.disabled .page-link { background-color: var(--bg-section); border-color: var(--border-color); color: var(--color-text-secondary); cursor: not-allowed; opacity: 0.6; } .pagination .page-item.disabled .page-link:hover { transform: none; } /* ======================================== STICKY FOOTER ======================================== */ /* Sticky footer global (fallback para páginas que não têm .page-wrapper) - Torna o body um flex container em coluna e garante que o
cresce para preencher o espaço disponível. - Mantém compatibilidade com a existência da classe .page-wrapper usada na index.html. */ body { display: flex; flex-direction: column; min-height: 100vh; } /* Principais elementos que devem expandir para preencher o espaço restante */ main, .main-content, main.container, .page-wrapper .main-content, .page-wrapper main { flex: 1 0 auto; } /* Placeholder do footer (onde o footer é injetado) — garantir que não colapse */ #footer-placeholder { display: block; } /* Se houver um elemento