/* Reset básico */
* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }

body {
    background: linear-gradient(135deg, #2c0e3a, #4a1966);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    padding: 20px;
}

.container { width: 100%; max-width: 500px; display: flex; flex-direction: column; gap: 20px; }

/* Estilo dos Cartões (Vidro) */
.card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px 0 rgba(138, 43, 226, 0.4);
    border-color: rgba(138, 43, 226, 0.5);
}

/* Cabeçalho / Relógio */
.current-time-card { text-align: center; }
.time-display { font-size: 3rem; font-weight: 600; margin: 10px 0; text-shadow: 0 0 15px rgba(255, 255, 255, 0.6); }
.date-display { font-size: 1.1rem; color: #d8b4e2; }

/* Clima */
.weather-realtime {
    margin-top: 15px;
    background: rgba(0, 229, 255, 0.15);
    padding: 8px 20px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(0, 229, 255, 0.4);
    font-weight: bold;
    color: #80f3ff;
}

/* --- ESTILOS NOVOS E MELHORADOS DOS INPUTS --- */

/* Input de data (Viajar no tempo) */
.input-group { display: flex; gap: 10px; margin-top: 15px; }
input[type="date"] {
    flex: 1; padding: 12px; border-radius: 8px; border: none; outline: none;
    background: #f0f0f0; color: #333; font-weight: bold; font-size: 1rem;
}

/* Inputs do MAPA (Melhorados) */
.map-inputs { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }

.input-row { display: flex; gap: 10px; width: 100%; }

/* Estilo unificado para inputs de texto */
input[type="text"] {
    width: 100%;
    padding: 14px 15px; /* Aumentei o tamanho interno */
    border-radius: 10px;
    border: 2px solid transparent;
    outline: none;
    background: rgba(255, 255, 255, 0.95);
    color: #2c0e3a;
    font-size: 1rem;
    font-weight: 500;
    transition: border-color 0.3s, box-shadow 0.3s;
}

/* Efeito de foco nos inputs */
input[type="text"]:focus, input[type="date"]:focus {
    border-color: #00e5ff;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.3);
}

/* Botão de GPS (ícone) */
.icon-btn {
    padding: 0 15px;
    border-radius: 10px;
    border: none;
    background: #6a1b9a;
    color: white;
    font-size: 1.3rem;
    cursor: pointer;
    transition: background 0.3s;
}
.icon-btn:hover { background: #8e24aa; }

/* Botões Padrão (Calcular, Ver Detalhes) */
button {
    padding: 12px 25px;
    border-radius: 10px;
    border: none;
    background: #8a2be2;
    color: white;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    transition: transform 0.2s, background 0.3s;
}
button:hover { background: #9d4edd; transform: scale(1.02); }

/* Botão Full Width (Calcular Rota) */
.btn-full {
    width: 100%;
    background: linear-gradient(45deg, #00e5ff, #00b8d4);
    color: #003344;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(0, 229, 255, 0.3);
}
.btn-full:hover {
    background: linear-gradient(45deg, #40efff, #00e5ff);
    box-shadow: 0 6px 20px rgba(0, 229, 255, 0.5);
}

/* Resultados do Futuro */
.hidden { display: none; }
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 20px; }
.info-box { background: rgba(0, 0, 0, 0.2); padding: 10px; border-radius: 8px; text-align: center; }
.label { display: block; font-size: 0.8rem; color: #d8b4e2; margin-bottom: 5px; }
.highlight { font-size: 1.2rem; font-weight: bold; color: #e0aaff; }
.weather-box { background: rgba(138, 43, 226, 0.15); padding: 15px; border-radius: 8px; text-align: center; border-left: 4px solid #8a2be2; }

/* Resultados da Rota */
.transport-grid { margin-bottom: 15px; text-align: center; }
.big-item { 
    background: rgba(0, 0, 0, 0.4); 
    padding: 15px; 
    border-radius: 10px; 
    border: 1px solid rgba(0, 229, 255, 0.2);
}
.big-item span { color: #d8b4e2; font-size: 0.9rem; display: block; margin-bottom: 5px; }
.big-item strong { color: #00e5ff; font-size: 1.5rem; display: block; }
.route-msg { text-align: center; color: #ff6b6b; font-size: 0.9rem; }

/* Mapa */
.map-container {
    height: 350px;
    width: 100%;
    border-radius: 12px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    z-index: 1; /* Garante que fique abaixo de popups se houver */
}

/* Footer e Portfolio */
footer { text-align: center; margin-top: 30px; font-size: 0.9rem; color: #ccc; }
.contact-box { margin-top: 15px; padding: 10px; background: rgba(0,0,0,0.3); border-radius: 8px; }
.email-link { color: #ff9eeb; text-decoration: none; font-weight: bold; }
.portfolio-card { text-align: center; border: 1px solid rgba(0, 229, 255, 0.3); margin-top: 20px;}
.btn-animated {
    display: inline-block; padding: 12px 30px; margin-top: 15px;
    background: linear-gradient(45deg, #8a2be2, #00e5ff);
    color: white; text-decoration: none; font-weight: bold; border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0, 229, 255, 0.4); animation: pulse 2s infinite;
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.7); transform: scale(1); }
    70% { box-shadow: 0 0 0 10px rgba(0, 229, 255, 0); transform: scale(1.03); }
    100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0); transform: scale(1); }
}