/* 
   ==========================================================================
   DESIGN SYSTEM - LUXURY ALPINE COZY (Gramado & Canela)
   ========================================================================== 
*/

:root {
    /* Cores principais */
    --color-forest-deep: #1b3024;      /* Verde Floresta das Araucárias */
    --color-forest-medium: #2c4c38;    /* Verde Floresta Intermediário */
    --color-champagne: #e5c185;        /* Dourado Champanhe das Luzes da Serra */
    --color-gold-hover: #f1d4a2;       /* Dourado Claro para Hover */
    --color-wood-warm: #bc8a5f;        /* Caramelo da Madeira dos Chalés */
    --color-cream-soft: #fbfbf2;       /* Creme aconchegante */
    --color-cream-dark: #f0ebd8;       /* Creme um pouco mais escuro */
    
    /* Tons escuros para UI */
    --color-charcoal-pure: #0f1311;    /* Preto carvão com tom verde sutil */
    --color-charcoal-dark: #161c19;    /* Fundo da Barra Lateral */
    --color-charcoal-medium: #222b27;  /* Card e Inputs */
    --color-charcoal-light: #2d3a34;   /* Bordas e Elementos Desativados */
    
    /* Cores de Alerta */
    --color-accent: #e27d60;           /* Coral quente para detalhes secundários */
    --color-success: #85a98f;          /* Verde suave para confirmação */
    --color-danger: #c94c4c;           /* Vermelho suave para remoção */
    
    /* Tipografia */
    --font-display: 'Cinzel', Georgia, serif;
    --font-body: 'Outfit', sans-serif;
    
    /* Sombras & Efeitos */
    --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.15);
    --shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.3);
    --shadow-gold: 0 0 15px rgba(229, 193, 133, 0.25);
    --shadow-gold-bright: 0 0 25px rgba(229, 193, 133, 0.45);
    --glass-background: rgba(22, 28, 25, 0.85);
    --glass-border: rgba(229, 193, 133, 0.15);
    --border-radius-sm: 6px;
    --border-radius-md: 12px;
    --border-radius-lg: 20px;
    --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Cores das Rotas dos Dias no Roteiro */
.day-color-1 { --day-color: #7C3AED; } /* Roxo vibrante */
.day-color-2 { --day-color: #2563EB; } /* Azul royal */
.day-color-3 { --day-color: #DB2777; } /* Pink intenso */
.day-color-4 { --day-color: #059669; } /* Esmeralda */
.day-color-5 { --day-color: #D97706; } /* Âmbar */
.day-color-6 { --day-color: #7C3AED; } /* Roxo vibrante */
.day-color-7 { --day-color: #DC2626; } /* Vermelho */
.day-color-8 { --day-color: #0891B2; } /* Ciano */
.day-color-9 { --day-color: #4F46E5; } /* Índigo */
.day-color-10 { --day-color: #9333EA; } /* Púrpura */

/* Reset Geral */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Accessible focus indicators */
*:focus-visible {
    outline: 2px solid var(--color-champagne);
    outline-offset: 2px;
}

/* Skip Navigation Link */
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 100000;
    padding: 0.75rem 1.5rem;
    background-color: var(--color-champagne);
    color: var(--color-forest-deep);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: var(--border-radius-md);
    text-decoration: none;
    transition: top 0.3s ease;
}

.skip-link:focus {
    top: 1rem;
}

body {
    font-family: var(--font-body);
    background-color: var(--color-charcoal-pure);
    color: var(--color-cream-soft);
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Utilitários */
.hide {
    display: none !important;
}

.flex-grow {
    flex-grow: 1;
}

.accent-text {
    color: var(--color-champagne);
}

.margin-top-large {
    margin-top: 1.5rem;
}

.margin-top-medium {
    margin-top: 1rem;
}

/* Scrollbar Personalizada */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: var(--color-charcoal-dark);
}
::-webkit-scrollbar-thumb {
    background: var(--color-charcoal-light);
    border-radius: var(--border-radius-sm);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-wood-warm);
}

/* 
   ==========================================================================
   TELA DE WELCOME
   ========================================================================== 
*/

.welcome-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0f1311, #1b3024, #162219, #0f1311);
    background-size: 400% 400%;
    animation: welcomeGradientShift 15s ease infinite;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    transition: opacity 0.8s ease, visibility 0.8s ease;
    overflow: hidden;
}

@keyframes welcomeGradientShift {
    0%   { background-position: 0% 50%; }
    25%  { background-position: 100% 50%; }
    50%  { background-position: 100% 0%; }
    75%  { background-position: 0% 100%; }
    100% { background-position: 0% 50%; }
}

/* Subtle pattern overlay for depth */
.welcome-screen::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(229, 193, 133, 0.04) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(44, 76, 56, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(229, 193, 133, 0.02) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.welcome-screen.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Floating Particles (CSS-only) */
.welcome-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(229, 193, 133, 0.3);
    animation: particleFloat linear infinite;
}

.particle:nth-child(1) { left: 10%; width: 3px; height: 3px; animation-duration: 18s; animation-delay: 0s; bottom: -10px; }
.particle:nth-child(2) { left: 25%; width: 5px; height: 5px; animation-duration: 22s; animation-delay: 2s; bottom: -10px; background: rgba(229, 193, 133, 0.15); }
.particle:nth-child(3) { left: 40%; width: 3px; height: 3px; animation-duration: 16s; animation-delay: 4s; bottom: -10px; }
.particle:nth-child(4) { left: 55%; width: 6px; height: 6px; animation-duration: 24s; animation-delay: 1s; bottom: -10px; background: rgba(133, 169, 143, 0.2); }
.particle:nth-child(5) { left: 70%; width: 4px; height: 4px; animation-duration: 20s; animation-delay: 3s; bottom: -10px; }
.particle:nth-child(6) { left: 85%; width: 3px; height: 3px; animation-duration: 19s; animation-delay: 5s; bottom: -10px; background: rgba(229, 193, 133, 0.2); }
.particle:nth-child(7) { left: 15%; width: 5px; height: 5px; animation-duration: 25s; animation-delay: 7s; bottom: -10px; background: rgba(133, 169, 143, 0.15); }
.particle:nth-child(8) { left: 60%; width: 3px; height: 3px; animation-duration: 17s; animation-delay: 6s; bottom: -10px; }

@keyframes particleFloat {
    0% {
        transform: translateY(0) translateX(0) scale(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
        transform: translateY(-10vh) translateX(5px) scale(1);
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(-110vh) translateX(-10px) scale(0.3);
        opacity: 0;
    }
}

/* Loading Spinner (visible until JS hides it) */
.welcome-loader {
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.loader-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(229, 193, 133, 0.15);
    border-top-color: var(--color-champagne);
    border-radius: 50%;
    animation: loaderSpin 0.9s linear infinite;
}

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

.loader-text {
    font-family: var(--font-body);
    font-size: 0.8rem;
    color: rgba(229, 193, 133, 0.6);
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 400;
}

.welcome-loader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Welcome Content Card */
.welcome-content {
    position: relative;
    z-index: 2;
    background: rgba(22, 28, 25, 0.8);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(229, 193, 133, 0.12);
    border-radius: var(--border-radius-lg);
    padding: 3rem 4rem;
    max-width: 680px;
    width: 100%;
    text-align: center;
    box-shadow: 
        0 8px 40px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(229, 193, 133, 0.08),
        inset 0 1px 0 rgba(229, 193, 133, 0.08);
    animation: welcomeEntrance 1s cubic-bezier(0.25, 0.8, 0.25, 1) 0.2s both;
    position: relative;
    z-index: 1;
}

@keyframes welcomeEntrance {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.96);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.welcome-logo {
    margin-bottom: 1.5rem;
    animation: welcomeFadeUp 0.8s ease 0.5s both;
}

@keyframes welcomeFadeUp {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.welcome-icon {
    font-size: 4.5rem;
    color: var(--color-champagne);
    filter: drop-shadow(0 0 30px rgba(229, 193, 133, 0.4));
    margin-bottom: 1.25rem;
    display: inline-block;
    animation: iconFloat 5s ease-in-out infinite;
}

@keyframes iconFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-8px) rotate(2deg); }
    50% { transform: translateY(-14px) rotate(0deg); }
    75% { transform: translateY(-6px) rotate(-2deg); }
}

.welcome-logo h1 {
    font-family: var(--font-display);
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--color-cream-soft);
    letter-spacing: 2px;
    margin-bottom: 0.2rem;
}

.welcome-logo .subtitle {
    font-family: var(--font-body);
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--color-champagne);
    font-weight: 500;
}

.welcome-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, var(--color-champagne), transparent);
    margin: 1.75rem auto;
    width: 70%;
    animation: welcomeFadeUp 0.8s ease 0.65s both;
}

.welcome-tagline {
    font-size: 1.05rem;
    color: var(--color-cream-dark);
    line-height: 1.6;
    margin-bottom: 1.75rem;
    font-weight: 300;
    animation: welcomeFadeUp 0.8s ease 0.7s both;
}

/* Feature Highlights (pills) */
.welcome-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 2rem;
}

.welcome-feature {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.9rem;
    background: rgba(229, 193, 133, 0.08);
    border: 1px solid rgba(229, 193, 133, 0.12);
    border-radius: 100px;
    font-size: 0.78rem;
    color: var(--color-cream-dark);
    font-weight: 400;
    transition: var(--transition-smooth);
    animation: featureFadeIn 0.6s ease both;
}

.welcome-feature:nth-child(1) { animation-delay: 0.85s; }
.welcome-feature:nth-child(2) { animation-delay: 0.95s; }
.welcome-feature:nth-child(3) { animation-delay: 1.05s; }
.welcome-feature:nth-child(4) { animation-delay: 1.15s; }

@keyframes featureFadeIn {
    0% {
        opacity: 0;
        transform: translateY(8px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.welcome-feature i {
    color: var(--color-champagne);
    font-size: 0.75rem;
}

.welcome-feature:hover {
    background: rgba(229, 193, 133, 0.15);
    border-color: rgba(229, 193, 133, 0.25);
    transform: translateY(-1px);
}

/* CTA button in welcome - stagger animation */
.welcome-content .btn-large {
    animation: welcomeFadeUp 0.8s ease 1.25s both;
}

/* Social Proof */
.welcome-social-proof {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 2rem;
    animation: welcomeFadeUp 0.8s ease 1.5s both;
}

.proof-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    color: rgba(240, 235, 216, 0.5);
    font-weight: 400;
}

.proof-item i {
    font-size: 0.65rem;
    color: rgba(229, 193, 133, 0.45);
}

.proof-divider {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(229, 193, 133, 0.3);
    flex-shrink: 0;
}

/* Welcome City Search */
.welcome-search {
    width: 100%;
    max-width: 480px;
    margin: 0 auto 1.5rem;
    position: relative;
}

.welcome-search-input {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(229, 193, 133, 0.25);
    border-radius: 50px;
    padding: 0.85rem 1.5rem;
    gap: 0.75rem;
    transition: all 0.3s ease;
    animation: welcomeFadeUp 0.8s ease 0.75s both;
}

.welcome-search-input:focus-within {
    border-color: var(--color-champagne);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 0 20px rgba(229, 193, 133, 0.15);
}

.welcome-search-input i {
    color: var(--color-champagne);
    opacity: 0.6;
    font-size: 0.9rem;
}

.welcome-search-input input {
    flex: 1;
    background: none;
    border: none;
    color: var(--color-cream);
    font-family: var(--font-body);
    font-size: 0.95rem;
    outline: none;
}

.welcome-search-input input::placeholder {
    color: rgba(229, 193, 133, 0.4);
}

.welcome-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-charcoal-dark);
    border: 1px solid var(--color-charcoal-light);
    border-radius: var(--border-radius-md);
    margin-top: 0.5rem;
    max-height: 250px;
    overflow-y: auto;
    z-index: 100;
    display: none;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.welcome-search-results.active {
    display: block;
    animation: dropdownFade 0.2s ease;
}

@keyframes dropdownFade {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.welcome-search-result {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    cursor: pointer;
    transition: background 0.2s;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.welcome-search-result:last-child {
    border-bottom: none;
}

.welcome-search-result:hover {
    background: rgba(229, 193, 133, 0.1);
}

.welcome-search-result .result-icon {
    color: var(--color-champagne);
    font-size: 1.1rem;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
}

.welcome-search-result .result-info {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.welcome-search-result .result-name {
    color: var(--color-cream);
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.welcome-search-result .result-detail {
    color: var(--color-cream-dark);
    font-size: 0.72rem;
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.welcome-suggestions {
    margin-bottom: 1.5rem;
    text-align: center;
    animation: welcomeFadeUp 0.8s ease 0.85s both;
}

.suggestions-label {
    font-size: 0.72rem;
    color: var(--color-cream-dark);
    opacity: 0.6;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 0.75rem;
}

.suggestions-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.suggestion-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    background: rgba(229, 193, 133, 0.08);
    border: 1px solid rgba(229, 193, 133, 0.15);
    border-radius: 50px;
    color: var(--color-cream);
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: var(--font-body);
}

.suggestion-chip:hover {
    background: rgba(229, 193, 133, 0.18);
    border-color: var(--color-champagne);
    transform: translateY(-1px);
}

.suggestion-chip i {
    font-size: 0.7rem;
    opacity: 0.7;
}

/* 
   ==========================================================================
   COOKIE / PRIVACY NOTICE (LGPD)
   ========================================================================== 
*/

.cookie-notice {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10001;
    background: rgba(15, 19, 17, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(229, 193, 133, 0.15);
    padding: 1rem 1.5rem;
    animation: cookieSlideUp 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.cookie-notice.hide {
    display: none !important;
}

@keyframes cookieSlideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.cookie-content {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
}

.cookie-content p {
    font-size: 0.82rem;
    color: var(--color-cream-dark);
    line-height: 1.5;
    font-weight: 300;
    margin: 0;
}

.cookie-content p i {
    color: var(--color-champagne);
    margin-right: 0.4rem;
}

.btn-small {
    padding: 0.45rem 1.1rem;
    font-size: 0.78rem;
    border-radius: var(--border-radius-sm);
    white-space: nowrap;
    flex-shrink: 0;
}

/* 
   ==========================================================================
   BOTÕES E COMPONENTES
   ========================================================================== 
*/

.btn {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    border-radius: var(--border-radius-md);
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: var(--transition-smooth);
    letter-spacing: 0.5px;
}

.btn-primary {
    background-color: var(--color-champagne);
    color: var(--color-forest-deep);
    box-shadow: var(--shadow-gold);
}

.btn-primary:hover {
    background-color: var(--color-gold-hover);
    box-shadow: var(--shadow-gold-bright);
    transform: translateY(-2px);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-secondary {
    background-color: var(--color-charcoal-light);
    color: var(--color-cream-soft);
    border: 1px solid var(--color-charcoal-light);
}

.btn-secondary:hover {
    background-color: var(--color-charcoal-medium);
    border-color: var(--color-champagne);
    color: var(--color-champagne);
}

.btn-accent {
    background-color: var(--color-wood-warm);
    color: var(--color-cream-soft);
}

.btn-accent:hover {
    background-color: #cda078;
    transform: translateY(-2px);
}

.btn-outline {
    background-color: transparent;
    border: 1px solid var(--color-wood-warm);
    color: var(--color-wood-warm);
}

.btn-outline:hover {
    background-color: var(--color-wood-warm);
    color: var(--color-charcoal-pure);
}

.btn-large {
    padding: 1rem 2.5rem;
    font-size: 1.05rem;
    border-radius: var(--border-radius-lg);
}

.btn-full-width {
    width: 100%;
}

.btn-link {
    background: none;
    border: none;
    color: var(--color-danger);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    transition: var(--transition-smooth);
}

.btn-link:hover {
    color: #ff7b7b;
    text-decoration: underline;
}

/* 
   ==========================================================================
   CONTAINER DO APLICATIVO
   ========================================================================== 
*/

.app-container {
    display: flex;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    position: relative;
}

/* 
   ==========================================================================
   BARRA LATERAL (SIDEBAR)
   ========================================================================== 
*/

.sidebar {
    width: 480px;
    background-color: var(--color-charcoal-dark);
    border-right: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    height: 100%;
    z-index: 1000;
    box-shadow: var(--shadow-medium);
    transition: var(--transition-smooth);
}

.sidebar-header {
    padding: 1.5rem;
    border-bottom: 1px solid var(--glass-border);
    background-color: var(--color-charcoal-pure);
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.brand-icon {
    font-size: 1.8rem;
    color: var(--color-champagne);
    filter: drop-shadow(var(--shadow-gold));
}

.brand h2 {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--color-cream-soft);
    letter-spacing: 1px;
}

.brand span {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-champagne);
    font-weight: 500;
    display: block;
}

/* Conteúdo Rolável */
.sidebar-scroll-content {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Seções da Barra Lateral */
section {
    background-color: var(--color-charcoal-medium);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-md);
    padding: 1.25rem;
    box-shadow: var(--shadow-soft);
    transition: var(--transition-smooth);
}

section:hover {
    border-color: rgba(229, 193, 133, 0.25);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2);
}

.section-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--color-champagne);
    margin-bottom: 1rem;
}

.section-title i {
    font-size: 1.1rem;
}

.section-title h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.section-title-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.section-title-wrapper .section-title {
    margin-bottom: 0;
}

.section-subtitle {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-cream-dark);
    margin-bottom: 0.75rem;
    font-weight: 500;
}

/* Formulário de Configuração */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-cream-dark);
}

.icon-small {
    margin-right: 0.2rem;
    color: var(--color-champagne);
}

/* Seletor numérico elegante */
.number-input-container {
    display: flex;
    align-items: center;
    border: 1px solid var(--color-charcoal-light);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    background-color: var(--color-charcoal-pure);
    max-width: 160px;
}

.number-btn {
    background: none;
    border: none;
    color: var(--color-champagne);
    width: 45px;
    height: 44px;
    min-height: 44px;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-smooth);
}

.number-btn:hover {
    background-color: var(--color-charcoal-light);
    color: var(--color-cream-soft);
}

.number-input-container input {
    width: 70px;
    height: 40px;
    border: none;
    background: none;
    color: var(--color-cream-soft);
    text-align: center;
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 600;
}

/* 
   ==========================================================================
   ATRAÇÕES E BUSCA
   ========================================================================== 
*/

/* Campo de Busca */
.search-container {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.search-input-wrapper {
    position: relative;
    flex-grow: 1;
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-charcoal-light);
    font-size: 0.9rem;
    pointer-events: none;
    transition: var(--transition-smooth);
}

.search-input-wrapper input {
    width: 100%;
    padding: 0.75rem 2.2rem 0.75rem 2.2rem;
    background-color: var(--color-charcoal-pure);
    border: 1px solid var(--color-charcoal-light);
    border-radius: var(--border-radius-md);
    color: var(--color-cream-soft);
    font-family: var(--font-body);
    font-size: 0.9rem;
    transition: var(--transition-smooth);
}

.search-input-wrapper input:focus {
    border-color: var(--color-champagne);
    box-shadow: 0 0 10px rgba(229, 193, 133, 0.1);
}

.search-input-wrapper input:focus + .search-icon {
    color: var(--color-champagne);
}

.btn-clear-search {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-charcoal-light);
    cursor: pointer;
    font-size: 0.9rem;
    transition: var(--transition-smooth);
}

.btn-clear-search:hover {
    color: var(--color-accent);
}

/* Resultados da Busca */
.search-results {
    background-color: var(--color-charcoal-pure);
    border: 1px solid var(--color-charcoal-light);
    border-radius: var(--border-radius-md);
    max-height: 250px;
    overflow-y: auto;
    margin-bottom: 1.25rem;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.3);
}

.search-result-item {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-charcoal-dark);
    cursor: pointer;
    transition: var(--transition-smooth);
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

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

.search-result-item:hover {
    background-color: var(--color-charcoal-light);
}

.search-result-item i {
    color: var(--color-champagne);
    margin-top: 3px;
    font-size: 0.95rem;
}

.result-details {
    display: flex;
    flex-direction: column;
}

.result-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-cream-soft);
}

.result-address {
    font-size: 0.75rem;
    color: #9ab0a4;
    margin-top: 0.15rem;
}

/* Abas de Categorias */
.popular-tab-header {
    display: flex;
    background-color: var(--color-charcoal-pure);
    border-radius: var(--border-radius-md);
    padding: 0.25rem;
    margin-bottom: 1rem;
    border: 1px solid var(--color-charcoal-light);
}

.tab-btn {
    flex-grow: 1;
    background: none;
    border: none;
    padding: 0.5rem;
    color: var(--color-cream-dark);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: var(--transition-smooth);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tab-btn:hover {
    color: var(--color-cream-soft);
}

.tab-btn.active {
    background-color: var(--color-charcoal-light);
    color: var(--color-champagne);
}

/* Grid de Atrações Populares */
.popular-places-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    max-height: 220px;
    overflow-y: auto;
    padding-right: 2px;
}

.place-card-mini {
    background-color: var(--color-charcoal-pure);
    border: 1px solid var(--color-charcoal-light);
    border-radius: var(--border-radius-md);
    padding: 0.75rem;
    cursor: pointer;
    transition: var(--transition-smooth);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 90px;
}

.place-card-mini::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background-color: var(--color-forest-medium);
    transition: var(--transition-smooth);
}

.place-card-mini:hover {
    border-color: var(--color-champagne);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.place-card-mini:hover::before {
    background-color: var(--color-champagne);
}

.place-card-mini.added {
    border-color: var(--color-success);
}

.place-card-mini.added::before {
    background-color: var(--color-success);
}

.card-tag {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    color: var(--color-champagne);
    margin-bottom: 0.25rem;
}

.place-card-mini.added .card-tag {
    color: var(--color-success);
}

.card-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-cream-soft);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: auto;
}

.card-action {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 0.5rem;
    font-size: 0.7rem;
    color: var(--color-charcoal-light);
    font-weight: 500;
    transition: var(--transition-smooth);
}

.place-card-mini:hover .card-action {
    color: var(--color-champagne);
}

.place-card-mini.added .card-action {
    color: var(--color-success);
}

/* 
   ==========================================================================
   LISTA DE SELECIONADOS
   ========================================================================== 
*/

.info-help {
    font-size: 0.8rem;
    color: #9ab0a4;
    font-style: italic;
    line-height: 1.4;
    text-align: center;
    padding: 1rem 0;
}

.selected-places-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 250px;
    overflow-y: auto;
    margin-bottom: 1.25rem;
    padding-right: 2px;
}

.selected-place-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-charcoal-pure);
    border: 1px solid var(--color-charcoal-light);
    border-radius: var(--border-radius-md);
    padding: 0.6rem 0.8rem;
    animation: itemReveal 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@keyframes itemReveal {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

.item-details {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    overflow: hidden;
}

.item-number {
    background-color: var(--color-charcoal-light);
    color: var(--color-cream-soft);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.item-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.item-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-cream-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-category {
    font-size: 0.65rem;
    color: var(--color-champagne);
    text-transform: uppercase;
}

.btn-remove-item {
    background: none;
    border: none;
    color: var(--color-charcoal-light);
    cursor: pointer;
    padding: 0.2rem;
    transition: var(--transition-smooth);
    font-size: 0.85rem;
}

.btn-remove-item:hover {
    color: var(--color-danger);
}

/* Bloco Otimizador */
.optimizer-container {
    background: linear-gradient(135deg, var(--color-forest-deep) 0%, var(--color-charcoal-pure) 100%);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-md);
    padding: 1.25rem;
    margin-top: 1rem;
    box-shadow: var(--shadow-gold);
    animation: pulseBorder 3s infinite ease-in-out;
}

@keyframes pulseBorder {
    0%, 100% { border-color: var(--glass-border); }
    50% { border-color: rgba(229, 193, 133, 0.4); }
}

.optimizer-info {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.magic-icon {
    font-size: 1.5rem;
    color: var(--color-champagne);
    filter: drop-shadow(0 0 5px rgba(229, 193, 133, 0.5));
}

.optimizer-info h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-cream-soft);
    margin-bottom: 0.15rem;
}

.optimizer-info p {
    font-size: 0.75rem;
    color: #9ab0a4;
    line-height: 1.4;
}

/* 
   ==========================================================================
   CRONOGRAMA DIÁRIO (ROTEIRO OTIMIZADO)
   ========================================================================== 
*/

.itinerary-days-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.itinerary-day-card {
    border-radius: var(--border-radius-md);
    background-color: var(--color-charcoal-pure);
    border: 1px solid var(--color-charcoal-light);
    overflow: hidden;
    transition: var(--transition-smooth);
}

.itinerary-day-card.map-hidden {
    opacity: 0.55;
    border-color: rgba(45, 58, 52, 0.4);
}

.itinerary-day-card.map-hidden .day-indicator-dot {
    background-color: var(--color-charcoal-light) !important;
    box-shadow: none !important;
}

.btn-toggle-day-map {
    background: none;
    border: none;
    color: var(--color-charcoal-light);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
    transition: var(--transition-smooth);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.btn-toggle-day-map:hover {
    color: var(--color-champagne);
    transform: scale(1.15);
    background-color: rgba(229, 193, 133, 0.05);
}

.btn-toggle-day-map.active {
    color: var(--color-champagne);
    filter: drop-shadow(0 0 5px rgba(229, 193, 133, 0.6));
}

.itinerary-day-card:hover {
    border-color: var(--day-color);
}

.day-card-header {
    background-color: rgba(22, 28, 25, 0.5);
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-charcoal-light);
    cursor: pointer;
}

.day-header-left {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.day-indicator-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--day-color);
    box-shadow: 0 0 8px var(--day-color);
}

.day-card-header h4 {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-cream-soft);
}

.day-places-count {
    font-size: 0.75rem;
    color: #9ab0a4;
    background-color: var(--color-charcoal-light);
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    font-weight: 600;
}

.day-card-header .toggle-icon {
    font-size: 0.8rem;
    color: var(--color-charcoal-light);
    transition: var(--transition-smooth);
}

.itinerary-day-card.collapsed .day-card-header .toggle-icon {
    transform: rotate(-90deg);
}

/* Corpo do Dia (Lista de Paradas) */
.day-card-body {
    padding: 0.75rem;
    transition: var(--transition-smooth);
    max-height: 5000px;
    opacity: 1;
    overflow: visible;
}

.itinerary-day-card.collapsed .day-card-body {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
    overflow: hidden;
}

.day-places-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 40px; /* Garante espaço mínimo para soltar elementos */
    padding: 0.25rem;
    border-radius: var(--border-radius-md);
    transition: var(--transition-smooth);
}

.day-places-timeline.drag-hover,
.itinerary-day-card.drag-hover {
    background-color: rgba(229, 193, 133, 0.04) !important;
    outline: 2px dashed rgba(229, 193, 133, 0.5) !important;
    outline-offset: -2px !important;
    border-color: var(--day-color) !important;
}

.timeline-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    background-color: var(--color-charcoal-medium);
    border: 1px solid var(--color-charcoal-light);
    border-radius: var(--border-radius-md);
    padding: 0.5rem 0.75rem;
    position: relative;
    cursor: grab;
    transition: var(--transition-smooth);
    user-select: none;
}

.timeline-item:active {
    cursor: grabbing;
}

/* Touch-compatible drag support */
.timeline-item {
    touch-action: none;
}

.timeline-item.dragging {
    opacity: 0.35;
    transform: scale(0.97);
    border: 2px dashed var(--color-champagne) !important;
    box-shadow: var(--shadow-gold-bright) !important;
}

.timeline-item-left {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1 1 100%;
    min-width: 0;
}

.timeline-badge {
    background-color: var(--day-color);
    color: var(--color-charcoal-pure);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 6px var(--day-color);
    flex-shrink: 0;
}

.timeline-sub-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.timeline-time-slot {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    flex-shrink: 0;
}

.time-icon {
    font-size: 0.55rem;
    color: var(--color-champagne);
    opacity: 0.5;
}

.time-input {
    width: 75px;
    padding: 0.1rem 0.2rem;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: var(--color-champagne);
    font-family: var(--font-body);
    font-size: 0.65rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-smooth);
}

.time-input::-webkit-calendar-picker-indicator {
    display: none;
}

.time-input:hover,
.time-input:focus {
    border-color: var(--color-charcoal-light);
    background-color: var(--color-charcoal-pure);
    outline: none;
}

/* Quando vazio, mostra placeholder discreto */
.time-input:not([value]):not(:focus),
.time-input[value=""]:not(:focus) {
    opacity: 0.35;
    width: 55px;
}

/* Texto do horário visível só no print */
.time-print-label {
    display: none;
}

.timeline-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.timeline-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-cream-soft);
    white-space: normal;
    word-break: break-word;
    line-height: 1.25;
}

.timeline-duration {
    font-size: 0.65rem;
    color: #9ab0a4;
}

/* Ações Rápidas no Item do Cronograma */
.timeline-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex: 1 1 100%;
    padding-left: 2.35rem;
}

.btn-action-sm {
    background: none;
    border: none;
    color: var(--color-charcoal-light);
    cursor: pointer;
    padding: 0.5rem;
    min-width: 44px;
    min-height: 44px;
    font-size: 0.75rem;
    transition: var(--transition-smooth);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-action-sm:hover {
    color: var(--color-champagne);
}

.btn-action-sm.remove:hover {
    color: var(--color-danger);
}

/* Seletor de Dia no Item (Dropdown elegante) */
.day-selector-select {
    background-color: var(--color-charcoal-pure);
    border: 1px solid var(--color-charcoal-light);
    color: var(--color-cream-soft);
    font-family: var(--font-body);
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    margin-right: 0.25rem;
    transition: var(--transition-smooth);
}

.day-selector-select:hover {
    border-color: var(--day-color);
    color: var(--day-color);
}

/* Área de Ações do Roteiro */
.actions-container {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

.sidebar-footer {
    padding: 1rem;
    border-top: 1px solid var(--glass-border);
    text-align: center;
    font-size: 0.7rem;
    color: var(--color-charcoal-light);
    background-color: var(--color-charcoal-pure);
}

.sidebar-footer i {
    font-size: 0.75rem;
}

/* 
   ==========================================================================
   MAPA INTERATIVO (MAP CONTAINER)
   ========================================================================== 
*/

.map-container {
    flex-grow: 1;
    height: 100%;
    position: relative;
}

#map {
    width: 100%;
    height: 100%;
    background-color: var(--color-charcoal-pure);
}

/* Estilização Customizada do Leaflet */
.leaflet-bar {
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--shadow-medium) !important;
    border-radius: var(--border-radius-md) !important;
    overflow: hidden;
}

.leaflet-bar a {
    background-color: var(--color-charcoal-dark) !important;
    color: var(--color-cream-soft) !important;
    border-bottom: 1px solid var(--color-charcoal-light) !important;
    transition: var(--transition-smooth);
}

.leaflet-bar a:hover {
    background-color: var(--color-charcoal-light) !important;
    color: var(--color-champagne) !important;
}

.leaflet-bar a.leaflet-disabled {
    background-color: var(--color-charcoal-pure) !important;
    color: var(--color-charcoal-light) !important;
}

.leaflet-popup-content-wrapper {
    background-color: var(--color-charcoal-dark) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--border-radius-md) !important;
    box-shadow: var(--shadow-medium) !important;
    color: var(--color-cream-soft) !important;
    font-family: var(--font-body);
}

.leaflet-popup-tip {
    background-color: var(--color-charcoal-dark) !important;
    border-left: 1px solid var(--glass-border) !important;
    border-bottom: 1px solid var(--glass-border) !important;
}

.popup-card-content {
    padding: 0.2rem;
}

.popup-card-tag {
    font-size: 0.6rem;
    text-transform: uppercase;
    color: var(--color-champagne);
    font-weight: 700;
    margin-bottom: 0.15rem;
}

.popup-card-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-cream-soft);
    margin-bottom: 0.4rem;
}

.popup-card-desc {
    font-size: 0.72rem;
    color: #9ab0a4;
    line-height: 1.3;
    margin-bottom: 0.5rem;
}

.popup-btn-add {
    background-color: var(--color-champagne);
    color: var(--color-forest-deep);
    border: none;
    border-radius: 4px;
    padding: 0.3rem 0.6rem;
    font-family: var(--font-body);
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}

.popup-btn-add:hover {
    background-color: var(--color-gold-hover);
}

.popup-btn-add.added {
    background-color: var(--color-success);
    color: var(--color-cream-soft);
}

/* ========== CLEAN MAP MARKERS (competitor-inspired) ========== */
.custom-div-icon {
    background: none;
    border: none;
}

.map-marker-pin {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: #7C3AED;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -13px 0 0 -13px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    transition: transform 0.15s ease;
}

@keyframes markerPop {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.map-marker-pin i {
    color: #fff;
    font-size: 0.7rem;
}

.map-marker-pin.scheduled {
    background-color: var(--day-color);
    border-color: #fff;
}

.map-marker-pin.scheduled i {
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    font-family: var(--font-body);
    font-style: normal;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

.map-marker-shadow {
    display: none;
}

/* Hotel Break marker */
.map-marker-pin.is-hotel-break {
    border: 2px dashed rgba(255,255,255,0.8) !important;
    background: rgba(124, 58, 237, 0.7) !important;
}

.map-marker-pin.is-hotel-break i {
    color: #fff !important;
    font-style: normal;
}

/* Route directional arrows — hidden for clean look */
.route-arrow-icon {
    display: none !important;
}

.route-arrow {
    display: none !important;
}

/* Tooltip customizado para marcadores do mapa */
.map-tooltip-custom {
    background: rgba(22, 28, 25, 0.92) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(229, 193, 133, 0.25) !important;
    border-radius: 8px !important;
    padding: 0.45rem 0.7rem !important;
    color: var(--color-cream-soft) !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 8px rgba(229, 193, 133, 0.08) !important;
    white-space: nowrap;
    line-height: 1.4;
}

.map-tooltip-custom::before {
    border-top-color: rgba(22, 28, 25, 0.92) !important;
}

/* Painel Suspenso de Estatísticas */
.quick-stats-panel {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    background: rgba(22, 28, 25, 0.85);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-lg);
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    box-shadow: var(--shadow-medium);
    z-index: 999;
    animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
    0% { transform: translateY(20px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

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

.stat-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: #9ab0a4;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.stat-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-cream-soft);
    margin-top: 0.15rem;
}

.stat-divider {
    width: 1px;
    height: 25px;
    background-color: var(--color-charcoal-light);
}

.efficiency-icon {
    color: var(--color-success);
    font-size: 0.95rem;
    margin-right: 0.2rem;
}

/* Balão flutuante de ajuda no mapa */
.map-help-bubble {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: rgba(22, 28, 25, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    padding: 0.6rem 1rem;
    border-radius: var(--border-radius-md);
    font-size: 0.75rem;
    color: var(--color-cream-soft);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    z-index: 999;
    box-shadow: var(--shadow-soft);
    pointer-events: none;
}

.map-help-bubble i {
    color: var(--color-champagne);
}

/* 
   ==========================================================================
   MODAL PARA LOCAL CUSTOMIZADO
   ========================================================================== 
*/

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    background-color: rgba(15, 19, 17, 0.75);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    transition: var(--transition-smooth);
}

.modal-content {
    background-color: var(--color-charcoal-dark);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-lg);
    width: 100%;
    max-width: 480px;
    box-shadow: var(--shadow-medium), var(--shadow-gold);
    animation: modalEntrance 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
}

@keyframes modalEntrance {
    0% { opacity: 0; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}

.modal-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-charcoal-pure);
}

.modal-header h3 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
}

.btn-close-modal {
    background: none;
    border: none;
    color: var(--color-charcoal-light);
    font-size: 1.1rem;
    cursor: pointer;
    transition: var(--transition-smooth);
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-close-modal:hover {
    color: var(--color-danger);
}

.modal-body {
    padding: 1.5rem;
}

.modal-body p {
    font-size: 0.85rem;
    color: var(--color-cream-dark);
    line-height: 1.5;
}

.modal-body input {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: var(--color-charcoal-pure);
    border: 1px solid var(--color-charcoal-light);
    border-radius: var(--border-radius-md);
    color: var(--color-cream-soft);
    font-family: var(--font-body);
    font-size: 0.9rem;
    transition: var(--transition-smooth);
    margin-top: 0.4rem;
}

.modal-body input:focus {
    border-color: var(--color-champagne);
    box-shadow: 0 0 10px rgba(229, 193, 133, 0.1);
}

.coords-display {
    margin-top: 1.25rem;
    background-color: var(--color-charcoal-pure);
    padding: 0.6rem 1rem;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--color-charcoal-light);
    font-size: 0.75rem;
    color: #9ab0a4;
    display: flex;
    align-items: center;
}

.coords-display i {
    color: var(--color-champagne);
    margin-right: 0.4rem;
}

.modal-footer {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--glass-border);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    background-color: var(--color-charcoal-pure);
}

/* Share Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    background-color: rgba(15, 19, 17, 0.8);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.share-modal {
    background-color: var(--color-charcoal-dark);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-lg);
    width: 100%;
    max-width: 520px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.share-modal .modal-header {
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-charcoal-pure);
}

.share-modal .modal-header h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--color-champagne);
    margin: 0;
}

.share-modal .modal-body {
    padding: 1.2rem 1.5rem;
}

.share-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.share-tab {
    flex: 1;
    padding: 0.6rem 1rem;
    border: 1px solid var(--glass-border);
    background-color: transparent;
    color: var(--color-sage-muted);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: var(--transition-smooth);
}

.share-tab:hover {
    background-color: var(--color-charcoal-medium);
    color: var(--color-cream-soft);
}

.share-tab.active {
    background-color: var(--color-forest-deep);
    border-color: var(--color-champagne);
    color: var(--color-champagne);
}

.share-tab-content {
    display: none;
}

.share-tab-content.active {
    display: block;
}

.share-instructions {
    font-size: 0.75rem;
    color: var(--color-sage-muted);
    margin-bottom: 0.8rem;
    line-height: 1.5;
}

.share-instructions strong {
    color: var(--color-champagne);
}

.share-code-area {
    width: 100%;
    padding: 0.8rem;
    background-color: var(--color-charcoal-pure);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-md);
    color: var(--color-cream-soft);
    font-family: 'Courier New', monospace;
    font-size: 0.65rem;
    line-height: 1.4;
    resize: vertical;
    word-break: break-all;
    box-sizing: border-box;
}

.share-code-area:focus {
    outline: none;
    border-color: var(--color-champagne);
}

.share-copy-btn {
    width: 100%;
    margin-top: 0.8rem;
    padding: 0.7rem;
    font-size: 0.8rem;
}

/* Toast Notification System */
.toast-container {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    pointer-events: none;
}

.toast {
    background: rgba(22, 28, 25, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-md);
    padding: 0.85rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: var(--shadow-medium), var(--shadow-gold);
    min-width: 280px;
    max-width: 420px;
    pointer-events: auto;
    animation: toastSlideIn 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.toast.toast-exit {
    opacity: 0;
    transform: translateX(100%);
}

.toast-icon {
    font-size: 1.15rem;
    flex-shrink: 0;
}

.toast-success .toast-icon { color: var(--color-success); }
.toast-error .toast-icon { color: var(--color-danger); }
.toast-info .toast-icon { color: var(--color-champagne); }
.toast-warning .toast-icon { color: var(--color-accent); }

.toast-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.toast-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-cream-soft);
}

.toast-message {
    font-size: 0.72rem;
    color: #9ab0a4;
    line-height: 1.3;
}

.toast-close {
    background: none;
    border: none;
    color: var(--color-charcoal-light);
    cursor: pointer;
    padding: 0.2rem;
    font-size: 0.85rem;
    margin-left: auto;
    transition: var(--transition-smooth);
    flex-shrink: 0;
}

.toast-close:hover {
    color: var(--color-cream-soft);
}

@keyframes toastSlideIn {
    0% { transform: translateX(100%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

/* Notas do Viajante */
.travel-note-container {
    margin-top: 0.35rem;
    width: 100%;
}

.travel-note-toggle {
    background: none;
    border: none;
    color: var(--color-charcoal-light);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.65rem;
    padding: 0.15rem 0.3rem;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.travel-note-toggle:hover {
    color: var(--color-champagne);
}

.travel-note-toggle.has-note {
    color: var(--color-champagne);
}

.travel-note-input {
    width: 100%;
    padding: 0.4rem 0.6rem;
    background-color: var(--color-charcoal-pure);
    border: 1px solid var(--color-charcoal-light);
    border-radius: var(--border-radius-sm);
    color: var(--color-cream-soft);
    font-family: var(--font-body);
    font-size: 0.72rem;
    resize: vertical;
    min-height: 32px;
    max-height: 80px;
    transition: var(--transition-smooth);
    margin-top: 0.25rem;
}

.travel-note-input:focus {
    border-color: var(--color-champagne);
    box-shadow: 0 0 8px rgba(229, 193, 133, 0.1);
}

.travel-note-input::placeholder {
    color: var(--color-charcoal-light);
    font-style: italic;
}

/* Indicador de Tempo de Deslocamento entre Paradas */
.travel-segment {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.2rem 0;
    position: relative;
}

.travel-segment-line {
    flex-grow: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--color-charcoal-light), transparent);
}

.travel-segment-info {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.62rem;
    color: #7a9586;
    white-space: nowrap;
    background-color: var(--color-charcoal-pure);
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    border: 1px solid var(--color-charcoal-light);
}

.travel-segment-info i {
    font-size: 0.55rem;
    color: var(--color-champagne);
}

/* Botão de inserir pausa no hotel */
.btn-insert-hotel-break {
    background: none;
    border: 1px solid transparent;
    color: var(--color-charcoal-light);
    cursor: pointer;
    padding: 0.2rem 0.35rem;
    font-size: 0.6rem;
    border-radius: var(--border-radius-sm);
    transition: var(--transition-smooth);
    opacity: 0;
    flex-shrink: 0;
}

.travel-segment:hover .btn-insert-hotel-break {
    opacity: 1;
}

.btn-insert-hotel-break:hover {
    color: var(--color-champagne);
    border-color: var(--color-champagne);
    background: rgba(229, 193, 133, 0.08);
}

/* Hotel break item */
.hotel-break-item {
    border-style: dashed !important;
    border-color: var(--color-champagne) !important;
    background: linear-gradient(90deg, rgba(229, 193, 133, 0.06) 0%, var(--color-charcoal-medium) 50%) !important;
}

/* Resumo de Orçamento */
.budget-summary {
    background: linear-gradient(135deg, rgba(27, 48, 36, 0.5), var(--color-charcoal-pure));
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-md);
    padding: 1rem;
    margin-top: 0.75rem;
}

.budget-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.budget-header i {
    color: var(--color-champagne);
    font-size: 0.9rem;
}

.budget-header h5 {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-cream-soft);
}

.budget-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0;
    font-size: 0.75rem;
}

.budget-row-label {
    color: #9ab0a4;
}

.budget-row-value {
    color: var(--color-cream-soft);
    font-weight: 600;
}

.budget-total {
    border-top: 1px solid var(--glass-border);
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}

.budget-total .budget-row-label,
.budget-total .budget-row-value {
    color: var(--color-champagne);
    font-size: 0.9rem;
    font-weight: 700;
}

/* Horário de Saída do Hotel */
.departure-time-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.departure-time-input {
    width: 90px;
    padding: 0.5rem 0.6rem;
    background-color: var(--color-charcoal-pure);
    border: 1px solid var(--color-charcoal-light);
    border-radius: var(--border-radius-md);
    color: var(--color-cream-soft);
    font-family: var(--font-body);
    font-size: 0.85rem;
    transition: var(--transition-smooth);
    cursor: pointer;
    text-align: center;
}

.departure-time-input:focus {
    border-color: var(--color-champagne);
    box-shadow: 0 0 10px rgba(229, 193, 133, 0.1);
}

/* Horário estimado no badge do cronograma */
.timeline-time-estimate {
    font-size: 0.6rem;
    color: var(--color-champagne);
    font-weight: 600;
    opacity: 0.85;
}

/* Day total distance/cost in header */
.day-meta-info {
    display: flex;
    gap: 0.75rem;
    padding: 0.35rem 0.75rem;
    background-color: rgba(22, 28, 25, 0.3);
    border-top: 1px solid var(--color-charcoal-light);
    font-size: 0.65rem;
    color: #7a9586;
}

.day-meta-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.day-meta-item i {
    color: var(--color-champagne);
    font-size: 0.6rem;
}

.day-meta-item strong {
    color: var(--color-cream-soft);
    font-weight: 600;
}

/* Botão de Otimizar Rota do Dia */
.btn-optimize-day {
    background: none;
    border: 1px solid var(--color-charcoal-light);
    color: #7a9586;
    cursor: pointer;
    padding: 0.25rem 0.4rem;
    border-radius: var(--border-radius-sm);
    font-size: 0.65rem;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.btn-optimize-day:hover:not(:disabled) {
    border-color: var(--color-champagne);
    color: var(--color-champagne);
    background: rgba(229, 193, 133, 0.08);
}

/* Lock Button */
.btn-lock {
    transition: var(--transition-smooth);
}

.btn-lock.active {
    color: var(--color-champagne) !important;
}

.btn-lock:not(.active) {
    opacity: 0.4;
}

.btn-lock:not(.active):hover {
    opacity: 1;
}

/* Locked timeline item */
.timeline-item.is-locked {
    border-left: 2px solid var(--color-champagne);
    background: linear-gradient(90deg, rgba(229, 193, 133, 0.05) 0%, transparent 30%);
}

/* Inline Cost Editor */
.inline-cost-editor {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    background-color: var(--color-charcoal-pure);
    border: 1px solid var(--color-charcoal-light);
    border-radius: var(--border-radius-sm);
    padding: 0.15rem 0.35rem;
    transition: var(--transition-smooth);
}

.inline-cost-editor:focus-within {
    border-color: var(--color-champagne);
    box-shadow: 0 0 6px rgba(229, 193, 133, 0.15);
}

.cost-prefix {
    font-size: 0.62rem;
    color: #7a9586;
    font-weight: 600;
    user-select: none;
}

.cost-input {
    width: 48px;
    background: transparent;
    border: none;
    color: var(--color-cream-soft);
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    text-align: right;
    padding: 0;
    outline: none;
    -moz-appearance: textfield;
}

.cost-input::-webkit-outer-spin-button,
.cost-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Budget Section Labels */
.budget-section-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #7a9586;
    font-weight: 600;
    padding: 0.4rem 0 0.2rem;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    margin-bottom: 0.25rem;
}

.budget-subtotal {
    border-top: 1px dashed var(--glass-border);
    margin-top: 0.3rem;
    padding-top: 0.3rem;
}

.budget-subtotal .budget-row-label {
    font-weight: 600;
    color: #9ab0a4;
}

.budget-subtotal .budget-row-value {
    font-weight: 700;
}

/* Extra cost rows */
.extra-cost-row .budget-row-label {
    font-size: 0.72rem;
}

/* Add extra cost button */
.budget-add-extra {
    padding: 0.4rem 0;
}

.btn-add-extra-cost {
    background: none;
    border: 1px dashed var(--color-charcoal-light);
    border-radius: var(--border-radius-md);
    color: #7a9586;
    font-family: var(--font-body);
    font-size: 0.7rem;
    padding: 0.45rem 0.75rem;
    cursor: pointer;
    width: 100%;
    text-align: center;
    transition: var(--transition-smooth);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.btn-add-extra-cost:hover {
    border-color: var(--color-champagne);
    color: var(--color-champagne);
    background-color: rgba(229, 193, 133, 0.05);
}

.btn-add-extra-cost i {
    font-size: 0.75rem;
}

/* 
   ==========================================================================
   RESPONSIVIDADE (MOBILE & TABLET)
   ========================================================================== 
*/

@media (max-width: 900px) {
    .app-container {
        flex-direction: column;
        position: relative;
    }
    
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        height: 100dvh;
        z-index: 2000;
        transform: translateX(-100%);
        transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
        order: 2;
    }

    .sidebar.sidebar-open {
        transform: translateX(0);
    }
    
    .map-container {
        height: 100vh;
        height: 100dvh;
        order: 1;
        width: 100%;
    }

    .welcome-content {
        padding: 2rem;
    }

    .welcome-logo h1 {
        font-size: 2.2rem;
    }
    
    .quick-stats-panel {
        bottom: auto;
        top: 1.5rem;
        left: 1.5rem;
        padding: 0.5rem 1rem;
        gap: 1rem;
    }

    .map-help-bubble, .map-help-bubble {
        display: none;
    }
}

/* Mobile Sidebar Toggle Button */
.mobile-sidebar-toggle {
    display: none;
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    z-index: 1500;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background-color: var(--color-champagne);
    color: var(--color-forest-deep);
    font-size: 1.3rem;
    cursor: pointer;
    box-shadow: var(--shadow-medium), var(--shadow-gold);
    transition: var(--transition-smooth);
    align-items: center;
    justify-content: center;
}

.mobile-sidebar-toggle:hover {
    background-color: var(--color-gold-hover);
    transform: scale(1.05);
}

@media (max-width: 900px) {
    .mobile-sidebar-toggle {
        display: flex;
    }
}

/* Mobile sidebar backdrop overlay */
.sidebar-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1999;
}

.sidebar-backdrop.active {
    display: block;
}

/* Pointer-drag ghost element */
.drag-ghost {
    position: fixed;
    z-index: 20000;
    pointer-events: none;
    opacity: 0.9;
    transform: rotate(2deg);
    max-width: 300px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), var(--shadow-gold-bright);
    border: 2px solid var(--color-champagne) !important;
    border-radius: var(--border-radius-md);
    background-color: var(--color-charcoal-medium);
}

/* aria-live region for dynamic updates */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Small phones */
@media (max-width: 600px) {
    .welcome-content {
        padding: 1.5rem 1.25rem;
    }

    .welcome-logo h1 {
        font-size: 1.8rem;
    }

    .welcome-tagline {
        font-size: 0.95rem;
    }

    .welcome-icon {
        font-size: 3.5rem;
    }

    .welcome-features {
        gap: 0.4rem;
    }

    .welcome-feature {
        font-size: 0.72rem;
        padding: 0.35rem 0.7rem;
    }

    .welcome-social-proof {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .proof-item {
        font-size: 0.65rem;
    }

    .cookie-content {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }

    .cookie-content p {
        font-size: 0.75rem;
    }

    .btn-large {
        padding: 0.85rem 1.5rem;
        font-size: 0.95rem;
    }

    .popular-places-grid {
        grid-template-columns: 1fr;
        max-height: 300px;
    }

    .sidebar-scroll-content {
        padding: 1rem;
        gap: 1.25rem;
    }

    section {
        padding: 1rem;
    }

    .section-title h3 {
        font-size: 0.95rem;
    }

    .actions-container {
        flex-direction: column;
        gap: 0.5rem;
    }

    .actions-container .btn {
        width: 100%;
    }

    .quick-stats-panel {
        left: 0.75rem;
        top: 0.75rem;
        padding: 0.4rem 0.75rem;
        gap: 0.6rem;
        border-radius: var(--border-radius-md);
    }

    .stat-label {
        font-size: 0.55rem;
    }

    .stat-value {
        font-size: 0.85rem;
    }

    .timeline-actions {
        flex-wrap: wrap;
        gap: 0.15rem;
        padding-left: 1.8rem;
    }

    .modal-content {
        max-width: 100%;
        border-radius: var(--border-radius-md);
    }

    .modal {
        padding: 0.75rem;
    }

    .modal-header {
        padding: 1rem;
    }

    .modal-body {
        padding: 1rem;
    }

    .modal-footer {
        padding: 1rem;
        flex-wrap: wrap;
    }

    .modal-footer .btn {
        min-height: 44px;
    }

    .search-container {
        flex-direction: column;
    }

    .search-container .btn {
        width: 100%;
    }

    .toast {
        min-width: auto;
        max-width: calc(100vw - 2rem);
    }

    .toast-container {
        right: 0.75rem;
        top: 0.75rem;
        left: 0.75rem;
    }

    .hotel-stay-range {
        flex-direction: column;
    }

    .brand h2 {
        font-size: 1.15rem;
    }

    .tab-btn {
        font-size: 0.68rem;
        padding: 0.45rem 0.25rem;
    }
}

/* Very small phones */
@media (max-width: 400px) {
    .welcome-logo h1 {
        font-size: 1.5rem;
        letter-spacing: 1px;
    }

    .welcome-logo .subtitle {
        font-size: 0.75rem;
        letter-spacing: 2px;
    }

    .welcome-tagline {
        font-size: 0.85rem;
        margin-bottom: 1.5rem;
    }

    .welcome-content {
        padding: 1.25rem 1rem;
    }

    .welcome-icon {
        font-size: 3rem;
    }

    .welcome-social-proof {
        flex-direction: column;
        gap: 0.35rem;
    }

    .proof-divider {
        display: none;
    }

    .brand h2 {
        font-size: 1rem;
    }

    .brand span {
        font-size: 0.65rem;
        letter-spacing: 1.5px;
    }

    .sidebar-header {
        padding: 1rem;
    }

    .section-title h3 {
        font-size: 0.85rem;
    }

    .timeline-name {
        font-size: 0.72rem;
    }

    .day-card-header h4 {
        font-size: 0.85rem;
    }

    .modal-header h3 {
        font-size: 0.95rem;
    }

    .popular-tab-header {
        flex-wrap: wrap;
    }

    .tab-btn {
        font-size: 0.6rem;
        padding: 0.4rem 0.2rem;
    }
}

/* 
   ==========================================================================
   ESTILO DE IMPRESSÃO (COZY PRINTABLE CHECKLIST)
   ========================================================================== 
*/

@media print {
    * {
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    body, .app-container, .sidebar, .sidebar-scroll-content {
        background-color: #ffffff !important;
        color: #1a1a1a !important;
        height: auto !important;
        overflow: visible !important;
        width: 100% !important;
        display: block !important;
        font-size: 9pt !important;
    }

    .welcome-screen,
    .cookie-notice,
    .sidebar-header,
    .section-config,
    .section-add-places,
    .section-selected-places .section-title-wrapper,
    .section-selected-places .info-help,
    .selected-places-list,
    .optimizer-container,
    .actions-container,
    .sidebar-footer,
    .map-container,
    .modal,
    .map-help-bubble,
    .quick-stats-panel,
    .btn-action-sm,
    .day-selector-select,
    .day-places-count,
    .toggle-icon,
    .btn-toggle-day-map,
    .btn-optimize-day,
    .travel-note-container,
    .btn-insert-hotel-break,
    .btn-lock,
    .timeline-actions,
    .cost-inline-editor,
    .hotel-bound-start-btn {
        display: none !important;
    }

    .sidebar {
        border: none !important;
        box-shadow: none !important;
        width: 100% !important;
    }

    .section-itinerary {
        display: block !important;
        background: none !important;
        border: none !important;
        padding: 0 !important;
        box-shadow: none !important;
    }

    .section-itinerary .section-title h3 {
        font-size: 14pt !important;
        color: #1b3024 !important;
        border-bottom: 2px solid #1b3024 !important;
        padding-bottom: 0.3rem !important;
        margin-bottom: 1rem !important;
        text-align: center !important;
        font-family: var(--font-display) !important;
    }

    .itinerary-days-container {
        gap: 0.5rem !important;
    }

    /* Garantir que todos os dias estejam expandidos */
    .itinerary-day-card.collapsed .day-card-body {
        max-height: none !important;
        opacity: 1 !important;
        padding: 0.4rem 0.6rem !important;
        overflow: visible !important;
    }

    .itinerary-day-card {
        border: 1px solid #ccc !important;
        border-radius: 4px !important;
        break-inside: avoid !important;
        background-color: #ffffff !important;
        margin-bottom: 0.4rem !important;
        page-break-inside: avoid !important;
        opacity: 1 !important;
    }

    .itinerary-day-card.map-hidden {
        opacity: 1 !important;
    }

    .day-card-header {
        background-color: #1b3024 !important;
        color: #ffffff !important;
        padding: 0.3rem 0.7rem !important;
        border-bottom: none !important;
    }

    .day-card-header h4 {
        color: #ffffff !important;
        font-size: 10pt !important;
    }

    .day-indicator-dot {
        width: 8px !important;
        height: 8px !important;
        background-color: #e5c185 !important;
        box-shadow: none !important;
    }

    .day-card-body {
        padding: 0.3rem 0.5rem !important;
        max-height: none !important;
        opacity: 1 !important;
    }

    .day-places-timeline {
        gap: 0.1rem !important;
    }

    /* Items compactos — single line */
    .timeline-item {
        background-color: #ffffff !important;
        border: 1px solid #e0e0e0 !important;
        border-radius: 3px !important;
        padding: 0.15rem 0.4rem !important;
        gap: 0.1rem !important;
        flex-wrap: nowrap !important;
        position: relative !important;
    }

    .timeline-item-left {
        flex: 1 1 auto !important;
        gap: 0.25rem !important;
    }

    .timeline-badge {
        background-color: #1b3024 !important;
        color: #ffffff !important;
        box-shadow: none !important;
        font-size: 6.5pt !important;
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
    }

    .timeline-name {
        color: #1a1a1a !important;
        font-size: 8pt !important;
        font-weight: 600 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .timeline-duration {
        color: #777 !important;
        font-size: 6.5pt !important;
    }

    .timeline-info {
        gap: 0 !important;
    }

    /* Hotel items */
    .timeline-item.hotel-bound {
        background: #f5f5f0 !important;
        border-color: #1b3024 !important;
        box-shadow: none !important;
        padding: 0.1rem 0.4rem !important;
    }

    .hotel-break-item {
        border-style: dashed !important;
        border-color: #999 !important;
    }

    /* Travel segments tiny */
    .travel-segment {
        padding: 0 !important;
        margin: 0 !important;
        min-height: 0 !important;
    }

    .travel-segment-line {
        display: none !important;
    }

    .travel-segment-info {
        font-size: 6pt !important;
        color: #999 !important;
        padding: 0 !important;
        background: none !important;
        border: none !important;
    }

    /* Day meta */
    .day-meta {
        font-size: 7pt !important;
        padding: 0.15rem 0.4rem !important;
        background: #f5f5f0 !important;
        margin-top: 0.15rem !important;
        border-radius: 2px !important;
        color: #333 !important;
    }

    /* Checkbox para viajante */
    .timeline-item::after {
        content: '☐' !important;
        font-size: 9pt !important;
        color: #bbb !important;
        position: absolute !important;
        right: 3px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    /* Map snapshot */
    .print-day-map {
        display: block !important;
        width: 100% !important;
        max-height: 180px !important;
        object-fit: contain !important;
        border: 1px solid #ddd !important;
        border-radius: 3px !important;
        margin-bottom: 0.2rem !important;
    }

    /* Budget */
    .budget-summary,
    .section-budget {
        background: #ffffff !important;
        border: 1px solid #ccc !important;
        padding: 0.4rem !important;
        font-size: 8pt !important;
        color: #1a1a1a !important;
        break-inside: avoid !important;
    }

    /* Força TODAS as cores de texto no print para serem escuras/legíveis */
    .budget-row-label {
        color: #333 !important;
    }

    .budget-row-value {
        color: #1a1a1a !important;
        font-weight: 700 !important;
    }

    .budget-total .budget-row-label,
    .budget-total .budget-row-value {
        color: #000 !important;
        font-weight: 800 !important;
        font-size: 10pt !important;
    }

    .budget-subtotal .budget-row-label,
    .budget-subtotal .budget-row-value {
        color: #1a1a1a !important;
        font-weight: 700 !important;
    }

    .budget-section-label {
        color: #1a1a1a !important;
        font-weight: 700 !important;
    }

    .extra-cost-row .budget-row-label,
    .extra-cost-row .budget-row-value {
        color: #333 !important;
    }

    /* Day meta (Percurso, Trajeto, Ingressos) — forte e legível */
    .day-meta {
        font-size: 7.5pt !important;
        padding: 0.2rem 0.5rem !important;
        background: #f0efe8 !important;
        margin-top: 0.15rem !important;
        border-radius: 2px !important;
        color: #1a1a1a !important;
    }

    .day-meta span,
    .day-meta strong,
    .day-meta i {
        color: #1a1a1a !important;
        opacity: 1 !important;
    }

    .day-meta .stat-badge {
        background: #1b3024 !important;
        color: #fff !important;
        padding: 1px 4px !important;
        border-radius: 2px !important;
    }

    /* Garante opacidade total em tudo impresso */
    .itinerary-day-card *,
    .section-budget *,
    .budget-summary * {
        opacity: 1 !important;
        color-adjust: exact !important;
    }

    /* Timeline items — forçar contraste forte */
    .timeline-item .timeline-name {
        color: #000 !important;
        font-weight: 700 !important;
    }

    .timeline-item .timeline-duration {
        color: #444 !important;
    }

    .timeline-item .timeline-badge {
        background-color: #1b3024 !important;
        color: #fff !important;
    }

    /* Horário no print — usa o span em vez do input */
    .time-input {
        display: none !important;
    }

    .time-print-label {
        display: inline !important;
        color: #e27d60 !important;
        font-size: 7.5pt !important;
        font-weight: 700 !important;
        opacity: 1 !important;
    }

    .time-print-label:empty {
        display: none !important;
    }

    .timeline-item {
        border-color: #bbb !important;
    }

    /* Botão adicionar custo escondido */
    .btn-add-extra-cost {
        display: none !important;
    }
}

/* 
   ==========================================================================
   ESTILOS ADICIONAIS - HOTEL / HOSPEDAGEM DE BASE
   ========================================================================== 
*/

/* Esconde mapas de impressão na tela */
.print-day-map {
    display: none;
}

/* Estilos para o Input de Data de Início */
.date-input {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: var(--color-charcoal-pure);
    border: 1px solid var(--color-charcoal-light);
    border-radius: var(--border-radius-md);
    color: var(--color-cream-soft);
    font-family: var(--font-body);
    font-size: 0.9rem;
    transition: var(--transition-smooth);
    cursor: pointer;
}

.date-input:focus {
    border-color: var(--color-champagne);
    box-shadow: 0 0 10px rgba(229, 193, 133, 0.1);
}

.hotel-config-display {
    background-color: var(--color-charcoal-pure);
    border: 1px solid var(--color-charcoal-light);
    border-radius: var(--border-radius-md);
    padding: 0.8rem;
    transition: var(--transition-smooth);
    margin-top: 0.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.no-hotel-placeholder {
    font-size: 0.75rem;
    color: #9ab0a4;
    font-style: italic;
    line-height: 1.4;
    display: block;
    padding: 0.2rem;
}

.no-hotel-placeholder i {
    color: var(--color-champagne);
    margin-right: 0.2rem;
}

.hotel-active-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    background-color: var(--color-charcoal-medium);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-md);
    padding: 0.75rem;
    animation: itemReveal 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.hotel-active-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.hotel-active-left {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    overflow: hidden;
}

.hotel-active-icon {
    background-color: var(--color-forest-deep);
    border: 1px solid var(--color-champagne);
    color: var(--color-champagne);
    width: 32px;
    height: 32px;
    border-radius: var(--border-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
    box-shadow: var(--shadow-gold);
}

.hotel-active-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.hotel-active-name {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--color-cream-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hotel-active-desc {
    font-size: 0.68rem;
    color: #9ab0a4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hotel-stay-range {
    display: flex;
    gap: 0.4rem;
    background-color: var(--color-charcoal-pure);
    padding: 0.4rem 0.5rem;
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--color-charcoal-light);
    justify-content: space-between;
}

.range-selector {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex: 1;
}

.range-selector label {
    font-size: 0.62rem;
    text-transform: uppercase;
    color: #9ab0a4;
    font-weight: 600;
}

.stay-day-select {
    background-color: var(--color-charcoal-dark);
    border: 1px solid var(--color-charcoal-light);
    color: var(--color-cream-soft);
    font-family: var(--font-body);
    font-size: 0.68rem;
    padding: 0.15rem 0.3rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    flex-grow: 1;
    transition: var(--transition-smooth);
    max-width: 110px;
}

.stay-day-select:hover {
    border-color: var(--color-champagne);
    color: var(--color-champagne);
}

.btn-remove-hotel {
    background: none;
    border: none;
    color: var(--color-charcoal-light);
    cursor: pointer;
    padding: 0.3rem;
    font-size: 0.9rem;
    transition: var(--transition-smooth);
}

.btn-remove-hotel:hover {
    color: var(--color-danger);
}

/* Item Especial de Hotel no Cronograma Diário */
.timeline-item.hotel-bound {
    background: linear-gradient(to right, var(--color-forest-deep), var(--color-charcoal-medium));
    border-color: rgba(229, 193, 133, 0.3);
    box-shadow: inset 2px 0 0 var(--color-champagne);
}

.timeline-item.hotel-bound .timeline-badge {
    background-color: var(--color-champagne);
    color: var(--color-forest-deep);
    box-shadow: var(--shadow-gold);
}

.timeline-item.hotel-bound .timeline-name {
    color: var(--color-champagne);
    font-weight: 700;
}

.timeline-item.hotel-bound .timeline-duration {
    color: var(--color-cream-dark);
}

/* Pino do Hotel no Mapa */
.map-marker-pin.is-hotel {
    background-color: #1e1b4b !important;
    border-color: #a78bfa !important;
    box-shadow: 0 0 0 2px rgba(167, 139, 250, 0.3), 0 1px 4px rgba(0,0,0,0.3) !important;
    transform: scale(1.08) !important;
}

.map-marker-pin.is-hotel i {
    color: #a78bfa !important;
}

/* Botão de duplicar atração */
.btn-action-sm.duplicate:hover {
    color: var(--color-success);
}

/* ==========================================================================
   WEATHER WIDGET
   ========================================================================== */

.weather-widget {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.6rem;
    border-radius: var(--border-radius-md);
    font-size: 0.7rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
    transition: var(--transition-smooth);
}

.weather-widget:hover {
    background: rgba(255, 255, 255, 0.08);
}

.weather-icon-temp {
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.weather-icon-temp i {
    font-size: 0.85rem;
}

.weather-sun .weather-icon-temp i { color: #ffd700; }
.weather-cloudy .weather-icon-temp i { color: #a0b4c0; }
.weather-rain .weather-icon-temp i { color: #6ba3d6; }
.weather-storm .weather-icon-temp i { color: #e74c3c; }
.weather-snow .weather-icon-temp i { color: #d4e6f1; }
.weather-fog .weather-icon-temp i { color: #9ab0a4; }

.weather-temp {
    font-weight: 600;
    color: var(--color-cream-soft);
    font-size: 0.72rem;
    white-space: nowrap;
}

.weather-details {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.weather-label {
    color: var(--color-cream-dark);
    font-size: 0.65rem;
    white-space: nowrap;
}

.weather-rain-info {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.62rem;
    color: #6ba3d6;
}

.weather-rain-info i {
    font-size: 0.55rem;
}

.weather-alert {
    color: #e5a100;
    font-size: 0.7rem;
    animation: pulse-subtle 2s ease-in-out infinite;
}

.weather-cold {
    color: #6ba3d6;
    font-size: 0.7rem;
}

@keyframes pulse-subtle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ==========================================================================
   LANGUAGE SELECTOR
   ========================================================================== */

.language-selector {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem;
    border-radius: var(--border-radius-pill);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.lang-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 26px;
    border: none;
    background: transparent;
    border-radius: var(--border-radius-pill);
    cursor: pointer;
    font-size: 0.8rem;
    transition: var(--transition-smooth);
    padding: 0;
}

.lang-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.lang-btn.active {
    background: var(--color-champagne);
    box-shadow: var(--shadow-gold);
}

/* ==========================================================================
   DESTINATION BADGE
   ========================================================================== */

.destination-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: var(--border-radius-pill);
    background: linear-gradient(135deg, rgba(229, 193, 133, 0.15), rgba(133, 169, 143, 0.15));
    border: 1px solid rgba(229, 193, 133, 0.2);
    font-size: 0.68rem;
    color: var(--color-champagne);
    font-weight: 500;
    cursor: default;
    white-space: nowrap;
}

.destination-badge i {
    font-size: 0.6rem;
}

/* Coming soon overlay for destination cards */
.destination-card.coming-soon {
    opacity: 0.5;
    pointer-events: none;
    position: relative;
}

.destination-card.coming-soon::after {
    content: 'Em breve';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    color: var(--color-champagne);
    padding: 0.3rem 0.8rem;
    border-radius: var(--border-radius-pill);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   OPENING HOURS
   ========================================================================== */

.timeline-hours {
    font-size: 0.62rem;
    color: var(--color-cream-dark);
    opacity: 0.7;
    display: flex;
    align-items: center;
    gap: 0.2rem;
    white-space: nowrap;
}

.timeline-hours i {
    font-size: 0.55rem;
    color: var(--color-champagne);
    opacity: 0.6;
}

.popular-place-hours {
    font-size: 0.62rem;
    color: var(--color-cream-dark);
    opacity: 0.7;
    display: flex;
    align-items: center;
    gap: 0.2rem;
    margin-top: 0.15rem;
}

.popular-place-hours i {
    font-size: 0.55rem;
    color: var(--color-champagne);
    opacity: 0.6;
}

/* ==========================================================================
   OSRM ROUTE LOADING INDICATOR
   ========================================================================== */

.travel-segment-info.loading-route {
    opacity: 0.5;
    animation: pulse-subtle 1.5s ease-in-out infinite;
}

.travel-segment-info .osrm-badge {
    font-size: 0.5rem;
    opacity: 0.5;
    margin-left: 0.15rem;
    color: var(--color-champagne);
}

.day-meta-info.osrm-loaded .day-meta-item i {
    color: var(--color-champagne);
}

/* ==========================================================================
   EXPORT DROPDOWN MENU
   ========================================================================== */

.export-dropdown-menu {
    background-color: var(--color-charcoal-medium);
    border: 1px solid var(--glass-border);
    border-radius: var(--border-radius-md);
    box-shadow: var(--shadow-medium), var(--shadow-gold);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    overflow: hidden;
    min-width: 220px;
    animation: dropdownSlideIn 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@keyframes dropdownSlideIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.export-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.75rem 1rem;
    background: none;
    border: none;
    color: var(--color-cream-soft);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: var(--transition-smooth);
    text-align: left;
}

.export-dropdown-item:hover,
.export-dropdown-item:focus-visible {
    background-color: var(--color-charcoal-light);
    color: var(--color-champagne);
}

.export-dropdown-item i {
    font-size: 1rem;
    width: 1.2rem;
    text-align: center;
    color: var(--color-champagne);
    opacity: 0.8;
}

.export-dropdown-item:hover i,
.export-dropdown-item:focus-visible i {
    opacity: 1;
}

.export-dropdown-item + .export-dropdown-item {
    border-top: 1px solid var(--glass-border);
}

/* ==========================================================================
   QR CODE SHARING
   ========================================================================== */

.share-qr-section {
    margin-top: 1rem;
}

.share-qr-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.share-qr-divider::before,
.share-qr-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--glass-border), transparent);
}

.share-qr-divider span {
    font-size: 0.75rem;
    color: #9ab0a4;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
}

.share-qr-container {
    display: flex;
    justify-content: center;
    padding: 1rem;
    background-color: #ffffff;
    border-radius: var(--border-radius-md);
    margin: 0 auto;
    width: fit-content;
    min-width: 200px;
}

.share-qr-container img {
    display: block;
    image-rendering: pixelated;
}

.share-qr-label {
    font-size: 0.75rem;
    color: #9ab0a4;
    text-align: center;
    margin-top: 0.75rem;
    font-weight: 400;
    line-height: 1.4;
}

.share-qr-label i {
    color: var(--color-champagne);
    margin-right: 0.25rem;
}

/* ========== MULTI-CITY LIST ========== */
.section-cities {
    padding-bottom: 0.5rem;
}

.section-cities .section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn-ghost {
    background: none;
    border: 1px solid rgba(229, 193, 133, 0.15);
    color: var(--color-champagne);
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: var(--font-body);
}

.btn-ghost:hover {
    background: rgba(229, 193, 133, 0.1);
    border-color: rgba(229, 193, 133, 0.35);
}

.city-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.city-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
}

.city-item:hover {
    background: rgba(229, 193, 133, 0.06);
    border-color: rgba(229, 193, 133, 0.12);
}

.city-item.active {
    background: rgba(229, 193, 133, 0.1);
    border-color: rgba(229, 193, 133, 0.25);
}

.city-item .city-flag {
    font-size: 1.2rem;
    flex-shrink: 0;
}

.city-item .city-info {
    flex: 1;
    min-width: 0;
}

.city-item .city-name {
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--color-cream-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.city-item .city-meta {
    font-size: 0.68rem;
    color: var(--color-cream-dark);
    opacity: 0.6;
}

.city-item .city-actions {
    display: flex;
    gap: 0.25rem;
    opacity: 0;
    transition: opacity 0.2s;
}

.city-item:hover .city-actions {
    opacity: 1;
}

.city-item .city-actions button {
    background: none;
    border: none;
    color: var(--color-cream-dark);
    cursor: pointer;
    padding: 0.2rem;
    font-size: 0.7rem;
    border-radius: 3px;
    transition: color 0.2s, background 0.2s;
}

.city-item .city-actions button:hover {
    color: var(--color-champagne);
    background: rgba(229, 193, 133, 0.1);
}

.city-item .city-actions button.btn-remove-city:hover {
    color: #ff6b6b;
    background: rgba(255, 107, 107, 0.1);
}

/* Transport connector between cities */
.transport-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0 0.2rem 1.5rem;
    gap: 0.4rem;
    cursor: pointer;
    transition: all 0.2s;
}

.transport-connector:hover {
    background: rgba(229, 193, 133, 0.04);
}

.transport-connector .transport-line {
    width: 2px;
    height: 12px;
    background: var(--color-charcoal-light);
    border-radius: 1px;
}

.transport-connector .transport-icon {
    font-size: 0.7rem;
    padding: 0.2rem 0.4rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.transport-connector .transport-detail {
    font-size: 0.65rem;
    color: var(--color-cream-dark);
    opacity: 0.5;
}

.transport-connector .transport-add {
    font-size: 0.65rem;
    color: var(--color-cream-dark);
    opacity: 0.4;
}

/* Transport Modal */
.transport-modal-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.transport-route-info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 0.85rem;
    background: rgba(229, 193, 133, 0.06);
    border-radius: var(--border-radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-cream-soft);
}

.transport-modes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.transport-mode-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.75rem 0.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 2px solid transparent;
    border-radius: var(--border-radius-sm);
    color: var(--color-cream-dark);
    cursor: pointer;
    transition: all 0.25s;
    font-family: var(--font-body);
    font-size: 0.75rem;
}

.transport-mode-btn:hover {
    background: rgba(229, 193, 133, 0.08);
    border-color: rgba(229, 193, 133, 0.15);
}

.transport-mode-btn.selected {
    border-color: var(--color-champagne);
    background: rgba(229, 193, 133, 0.12);
    color: var(--color-champagne);
}

.transport-mode-btn i {
    font-size: 1.2rem;
}

.modal-medium {
    max-width: 520px;
}

/* Add city search popup */
.add-city-popup {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-charcoal-dark);
    border: 1px solid var(--color-charcoal-light);
    border-radius: var(--border-radius-md);
    padding: 0.75rem;
    margin-top: 0.25rem;
    z-index: 50;
    box-shadow: var(--shadow-medium);
}

.add-city-popup input {
    width: 100%;
    padding: 0.6rem 0.85rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--color-charcoal-light);
    border-radius: var(--border-radius-sm);
    color: var(--color-cream-soft);
    font-family: var(--font-body);
    font-size: 0.85rem;
    outline: none;
}

.add-city-popup input:focus {
    border-color: var(--color-champagne);
}

.add-city-results {
    max-height: 200px;
    overflow-y: auto;
    margin-top: 0.5rem;
}

.city-list-empty {
    text-align: center;
    padding: 1.25rem 0.75rem;
    color: var(--color-cream-dark);
    opacity: 0.5;
    font-size: 0.78rem;
}

.city-list-empty i {
    display: block;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    opacity: 0.3;
}

/* 
   ==========================================================================
   AI TRAVEL AGENT (GUIDA IA) STYLES
   ========================================================================== 
*/

/* Floating AI Button */
.floating-ai-toggle {
    position: absolute;
    bottom: 2rem;
    right: 5.5rem; /* Next to mobile sidebar toggle */
    z-index: 1500;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-champagne), var(--color-wood-warm));
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--color-charcoal-dark);
    font-size: 1.25rem;
    cursor: pointer;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), var(--shadow-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.floating-ai-toggle:hover {
    transform: scale(1.1) translateY(-2px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 15px rgba(229, 193, 133, 0.4);
}

.floating-ai-toggle:active {
    transform: scale(0.95);
}

.ai-pulse-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 10px;
    height: 10px;
    background-color: var(--color-success);
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 8px var(--color-success);
    animation: aiDotPulse 2s infinite;
}

@keyframes aiDotPulse {
    0% { transform: scale(0.9); opacity: 0.8; }
    50% { transform: scale(1.2); opacity: 1; box-shadow: 0 0 12px var(--color-success); }
    100% { transform: scale(0.9); opacity: 0.8; }
}

/* AI Chat Drawer sliding from the right */
.ai-chat-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 420px;
    max-width: 100%;
    height: 100vh;
    height: 100dvh;
    background: rgba(18, 22, 20, 0.95);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-left: 1px solid var(--glass-border);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.ai-chat-drawer.hide {
    transform: translateX(100%);
    pointer-events: none;
}

.ai-chat-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-charcoal-pure);
}

.ai-chat-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ai-chat-title i {
    font-size: 1.35rem;
    color: var(--color-champagne);
    text-shadow: 0 0 10px rgba(229, 193, 133, 0.25);
}

.ai-chat-title h4 {
    font-family: var(--font-display);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-cream-soft);
}

.ai-status-label {
    font-size: 0.65rem;
    color: #7a9586;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.1rem;
}

.status-indicator {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-success);
    box-shadow: 0 0 6px var(--color-success);
}

.btn-close-drawer {
    background: none;
    border: none;
    color: var(--color-charcoal-light);
    font-size: 1.1rem;
    cursor: pointer;
    transition: var(--transition-smooth);
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.btn-close-drawer:hover {
    color: var(--color-danger);
    background-color: rgba(255, 107, 107, 0.08);
}

/* Chat History Body */
.ai-chat-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    scroll-behavior: smooth;
}

/* Chat Bubbles */
.ai-msg {
    display: flex;
    gap: 0.75rem;
    max-width: 85%;
    align-self: flex-start;
}

.ai-msg.user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.ai-msg-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(229, 193, 133, 0.1), rgba(229, 193, 133, 0.2));
    border: 1px solid var(--color-champagne);
    color: var(--color-champagne);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.ai-msg.user .ai-msg-avatar {
    background: var(--color-forest-deep);
    border-color: #5d7c68;
    color: var(--color-cream-soft);
}

.ai-msg-bubble {
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius-md);
    font-family: var(--font-body);
    font-size: 0.8rem;
    line-height: 1.5;
    word-break: break-word;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.ai-msg.assistant .ai-msg-bubble {
    background-color: var(--color-charcoal-pure);
    border: 1px solid var(--glass-border);
    color: var(--color-cream-soft);
    border-top-left-radius: 2px;
}

.ai-msg.user .ai-msg-bubble {
    background: linear-gradient(135deg, var(--color-forest-deep), #1a3225);
    border: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--color-cream-soft);
    border-top-right-radius: 2px;
}

.ai-msg-bubble ul, .ai-msg-bubble ol {
    margin-top: 0.5rem;
    padding-left: 1.25rem;
}

.ai-msg-bubble li {
    margin-bottom: 0.3rem;
}

.ai-msg-bubble code {
    background: rgba(255, 255, 255, 0.06);
    padding: 0.1rem 0.25rem;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: 0.75rem;
    color: var(--color-champagne);
}

/* Typing Dots Animation */
.ai-typing-dots {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    padding: 0.25rem 0.5rem;
}

.ai-dot {
    width: 6px;
    height: 6px;
    background-color: var(--color-champagne);
    border-radius: 50%;
    animation: aiBouncingDot 1.4s infinite ease-in-out both;
}

.ai-dot:nth-child(1) { animation-delay: -0.32s; }
.ai-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes aiBouncingDot {
    0%, 80%, 100% { transform: scale(0); opacity: 0.3; }
    40% { transform: scale(1); opacity: 1; }
}

/* Quick Action Suggestion Buttons */
.ai-quick-actions {
    padding: 0.75rem 1.25rem;
    background-color: var(--color-charcoal-pure);
    border-top: 1px solid var(--glass-border);
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none; /* Hide scrollbar for clean grid */
}

.ai-quick-actions::-webkit-scrollbar {
    display: none;
}

.quick-action-btn {
    padding: 0.45rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    color: #9ab0a4;
    font-family: var(--font-body);
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-shrink: 0;
}

.quick-action-btn:hover {
    background: rgba(229, 193, 133, 0.08);
    border-color: var(--color-champagne);
    color: var(--color-champagne);
    transform: translateY(-1px);
}

/* Chat Input Footer */
.ai-chat-footer {
    padding: 1.25rem;
    border-top: 1px solid var(--glass-border);
    background-color: var(--color-charcoal-pure);
}

.ai-input-container {
    display: flex;
    gap: 0.5rem;
    background-color: var(--color-charcoal-dark);
    border: 1px solid var(--color-charcoal-light);
    border-radius: var(--border-radius-md);
    padding: 0.4rem 0.5rem;
    align-items: flex-end;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.2);
}

.ai-input-container textarea {
    flex-grow: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--color-cream-soft);
    font-family: var(--font-body);
    font-size: 0.8rem;
    resize: none;
    max-height: 80px;
    height: 32px;
    padding: 0.35rem 0.25rem;
    line-height: 1.4;
}

.ai-input-container textarea::placeholder {
    color: var(--color-charcoal-light);
}

#btn-send-ai {
    background: var(--color-champagne);
    color: var(--color-charcoal-dark);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

#btn-send-ai:hover {
    background-color: white;
    transform: scale(1.05);
}

.ai-footer-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.6rem;
    padding: 0 0.25rem;
}

.btn-link-action {
    background: none;
    border: none;
    color: var(--color-charcoal-light);
    cursor: pointer;
    font-size: 0.68rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    transition: color 0.2s;
    text-decoration: underline;
}

.btn-link-action:hover {
    color: var(--color-champagne);
}

.ai-provider-badge {
    font-size: 0.65rem;
    color: #7a9586;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 0.15rem 0.45rem;
    border-radius: 10px;
}

/* Adjustments on mobile */
@media (max-width: 900px) {
    .ai-chat-drawer {
        width: 100%;
        border-left: none;
    }
    
    .floating-ai-toggle {
        bottom: 2rem;
        right: 6.5rem; /* Adjusted for smaller overlays */
    }
}

/* 
   ==========================================================================
   VOICE TRANSLATOR (TRADUTOR DE VOZ) STYLES
   ========================================================================== 
*/

.translator-modal-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.lang-selector-grid select {
    outline: none;
    cursor: pointer;
}

.lang-selector-grid select option {
    background-color: var(--color-charcoal-dark);
    color: white;
}

.speech-box {
    background: var(--color-charcoal-pure);
    border: 1px solid var(--color-charcoal-light);
    border-radius: var(--border-radius-md);
    padding: 0.75rem 1rem;
}

.speech-box-label {
    font-size: 0.68rem;
    color: var(--color-champagne);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.speech-box-content {
    font-family: var(--font-body);
    font-size: 0.85rem;
    color: var(--color-cream-soft);
    margin-top: 0.35rem;
    min-height: 2.2rem;
    line-height: 1.4;
}

.speech-box-content.translated {
    color: var(--color-champagne);
    font-weight: 500;
}

/* Mic central button & wave breathing effect */
.translator-mic-btn {
    position: relative;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-champagne), var(--color-wood-warm));
    border: none;
    color: var(--color-charcoal-dark);
    font-size: 1.6rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4), 0 0 15px rgba(229, 193, 133, 0.3);
    z-index: 10;
    transition: all 0.3s ease;
}

.translator-mic-btn:hover {
    transform: scale(1.05);
}

.translator-mic-btn.active {
    background: linear-gradient(135deg, var(--color-danger), #b83232);
    color: white;
    box-shadow: 0 10px 30px rgba(255, 75, 75, 0.4), 0 0 20px rgba(255, 75, 75, 0.4);
}

.mic-wave-effect {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    border: 1px solid var(--color-champagne);
    z-index: 1;
    opacity: 0;
    pointer-events: none;
}

.translator-mic-btn.active .mic-wave-effect {
    animation: micWaveBreath 1.8s infinite cubic-bezier(0.215, 0.61, 0.355, 1);
    border-color: var(--color-danger);
}

@keyframes micWaveBreath {
    0% { transform: scale(1); opacity: 0.6; }
    50% { opacity: 0.3; }
    100% { transform: scale(1.6); opacity: 0; }
}

/* Reveal API key helper styling */
.password-input-wrapper {
    position: relative;
    border-radius: var(--border-radius-md);
    overflow: hidden;
}

.btn-reveal-key {
    background: var(--color-charcoal-pure) !important;
    border: 1px solid var(--color-charcoal-light) !important;
    border-radius: var(--border-radius-sm) !important;
    color: var(--color-charcoal-light) !important;
    cursor: pointer;
    min-width: 40px;
}

.btn-reveal-key:hover {
    color: var(--color-champagne) !important;
}

/* 
   ==========================================================================
   RATING & RESERVATION ENHANCEMENTS IN THE TIMELINE
   ========================================================================== 
*/

/* 5 Star rating timeline selector */
.timeline-rating-row {
    margin-top: 0.4rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rating-stars {
    display: inline-flex;
    gap: 2px;
}

.rating-star-btn {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-charcoal-light);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.rating-star-btn:hover,
.rating-star-btn.active {
    color: var(--color-champagne);
    text-shadow: 0 0 6px rgba(229, 193, 133, 0.4);
}

.rating-star-btn.active ~ .rating-star-btn {
    color: var(--color-charcoal-light);
    text-shadow: none;
}

/* Reservation visual tags */
.timeline-reservation-row {
    margin-top: 0.45rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.reservation-badge {
    font-size: 0.62rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.reservation-badge.none {
    background-color: var(--color-charcoal-pure);
    border-color: var(--color-charcoal-light);
    color: var(--color-charcoal-light);
}

.reservation-badge.none:hover {
    color: #9ab0a4;
    border-color: #9ab0a4;
}

/* Active colored states of reservation badges matching competitor design */
.reservation-badge.hotel { background: rgba(33, 150, 243, 0.12); color: #2196F3; border-color: rgba(33, 150, 243, 0.2); }
.reservation-badge.airbnb { background: rgba(255, 90, 95, 0.12); color: #FF5A5F; border-color: rgba(255, 90, 95, 0.2); }
.reservation-badge.museum { background: rgba(156, 39, 176, 0.12); color: #9C27B0; border-color: rgba(156, 39, 176, 0.2); }
.reservation-badge.restaurant { background: rgba(233, 30, 99, 0.12); color: #E91E63; border-color: rgba(233, 30, 99, 0.2); }
.reservation-badge.guided_trip { background: rgba(0, 150, 136, 0.12); color: #009688; border-color: rgba(0, 150, 136, 0.2); }
.reservation-badge.boat_ride { background: rgba(0, 188, 212, 0.12); color: #00BCD4; border-color: rgba(0, 188, 212, 0.2); }
.reservation-badge.flight { background: rgba(76, 175, 80, 0.12); color: #4CAF50; border-color: rgba(76, 175, 80, 0.2); }
.reservation-badge.car_rental { background: rgba(255, 152, 0, 0.12); color: #FF9800; border-color: rgba(255, 152, 0, 0.2); }

.reservation-badge:hover:not(.none) {
    filter: brightness(1.2);
    transform: translateY(-1px);
}

/* Selector dropdown hidden for badges, clicked to toggle options */
.reservation-select-dropdown {
    width: 100px;
    padding: 0.15rem 0.25rem;
    font-size: 0.65rem;
    background-color: var(--color-charcoal-pure);
    border: 1px solid var(--color-charcoal-light);
    color: var(--color-cream-soft);
    border-radius: 4px;
    outline: none;
    cursor: pointer;
}

/* 
   ==========================================================================
   SUPABASE CLOUD SYNC & AUTHENTICATION WIDGET STYLES
   ========================================================================== 
*/

.user-profile-widget {
    margin-top: 0.85rem;
    padding: 0.75rem;
    background: rgba(14, 18, 16, 0.8);
    border: 1px solid rgba(154, 176, 164, 0.15);
    border-radius: var(--border-radius-md);
    width: 100%;
    transition: all 0.3s ease;
}

.user-profile-widget:hover {
    border-color: rgba(229, 193, 133, 0.25);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.user-view {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.user-view.hide {
    display: none !important;
}

.auth-helper-text {
    font-size: 0.65rem;
    color: #9ab0a4;
    text-align: center;
    display: block;
    margin-top: 0.25rem;
}

.user-info-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
}

.user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-forest-medium), var(--color-accent));
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    font-size: 0.85rem;
    border: 1px solid var(--color-champagne-light);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.user-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0; /* Prevents overflow */
}

.user-name-container {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.user-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: white;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-tier {
    font-size: 0.55rem;
    font-weight: 800;
    padding: 0.05rem 0.25rem;
    border-radius: 3px;
    letter-spacing: 0.03em;
    display: inline-block;
}

.badge-free {
    background: rgba(154, 176, 164, 0.15);
    color: #9ab0a4;
    border: 1px solid rgba(154, 176, 164, 0.2);
}

.badge-premium {
    background: linear-gradient(135deg, rgba(229, 193, 133, 0.2), rgba(229, 193, 133, 0.05));
    color: var(--color-champagne);
    border: 1px solid rgba(229, 193, 133, 0.35);
    box-shadow: 0 0 5px rgba(229, 193, 133, 0.15);
    animation: gold-pulse 2s infinite ease-in-out;
}

@keyframes gold-pulse {
    0% { box-shadow: 0 0 4px rgba(229, 193, 133, 0.1); }
    50% { box-shadow: 0 0 8px rgba(229, 193, 133, 0.3); }
    100% { box-shadow: 0 0 4px rgba(229, 193, 133, 0.1); }
}

.user-token-balance {
    font-size: 0.65rem;
    color: var(--color-champagne-light);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.1rem;
}

.btn-logout-icon {
    background: none;
    border: none;
    color: #9ab0a4;
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.3rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.btn-logout-icon:hover {
    color: #ff5a5f;
    background: rgba(255, 90, 95, 0.1);
}

.cloud-status-bar {
    border-top: 1px solid rgba(154, 176, 164, 0.1);
    margin-top: 0.45rem;
    padding-top: 0.35rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cloud-status-text {
    font-size: 0.62rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.cloud-status-text.success-text {
    color: #4CAF50;
}

.cloud-status-text.warning-text {
    color: var(--color-champagne);
}

.cloud-status-text.error-text {
    color: #FF5A5F;
}

/* Authentication Modal & Tab Elements */
.auth-tab-btn {
    transition: all 0.2s ease;
}

.auth-tab-btn:hover {
    color: white !important;
}

.auth-message-box {
    animation: fadeIn 0.2s ease;
}

.auth-message-box.error {
    background: rgba(255, 90, 95, 0.12);
    border: 1px solid rgba(255, 90, 95, 0.25);
    color: #ff888b;
}

.auth-message-box.success {
    background: rgba(76, 175, 80, 0.12);
    border: 1px solid rgba(76, 175, 80, 0.25);
    color: #81c784;
}

.auth-message-box.info {
    background: rgba(33, 150, 243, 0.12);
    border: 1px solid rgba(33, 150, 243, 0.25);
    color: #64b5f6;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}