/* --- Personalizare Modernă Cassiopeia pentru Site Meteo --- */

:root {
    --weather-bg: #f0f4f8;
    --weather-primary: #0077cc;
    --weather-accent: #ff9f1c;
    --card-radius: 20px;
    --glass-effect: rgba(255, 255, 255, 0.8);
}

/* Fundalul paginii */
body {
    background-color: var(--weather-bg);
    background-image: linear-gradient(180deg, #d6eaf8 0%, #f0f4f8 300px);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Header rotunjit și "plutitor" */
.header {
    background: var(--glass-effect) !important;
    backdrop-filter: blur(10px);
    margin: 10px 20px;
    border-radius: var(--card-radius);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid rgba(255,255,255,0.3);
}

/* Navigație */
.navbar-brand img {
    max-height: 50px;
}

.metismenu.mod-menu a {
    font-weight: 500;
    color: #444 !important;
    border-radius: 10px;
    transition: all 0.3s ease;
}

.metismenu.mod-menu a:hover {
    background-color: rgba(0, 119, 204, 0.1);
    color: var(--weather-primary) !important;
}

/* Containerul principal de conținut sub formă de card */
.container-component, .com-content-article {
    background: #ffffff;
    padding: 2rem !important;
    border-radius: var(--card-radius);
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    margin-bottom: 2rem;
}

/* Carduri pentru Module (ideal pentru widget-uri meteo) */
.card, .mod-custom {
    border: none !important;
    border-radius: var(--card-radius) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.04);
    transition: transform 0.2s ease;
    background: #fff;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-5px);
}

.card-title, .module-title {
    color: var(--weather-primary);
    font-weight: 700;
    border-bottom: 2px solid #f0f4f8;
    padding-bottom: 10px;
}

/* Butoane rotunjite (Pill shape) */
.btn-primary {
    background-color: var(--weather-primary) !important;
    border-radius: 50px !important;
    padding: 0.6rem 1.5rem !important;
    border: none !important;
    box-shadow: 0 4px 10px rgba(0, 119, 204, 0.2);
}

/* Stil pentru Footer */
.footer {
    background: # #1a2f4e !important;
    color: #fff;
    margin-top: 4rem;
    padding: 3rem 0;
    border-radius: var(--card-radius) var(--card-radius) 0 0;
}

.container-footer {
  background: linear-gradient(145deg, #1a2f4e 0%, var(--meteo-primary) 100%);
  background-image: none;
  color: rgba(255, 255, 255, 0.8);
  padding: 2rem 0;
  margin-top: 3rem;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.05);
}

.container-footer a {
  color: var(--meteo-accent);
  text-decoration: none;
  transition: color 0.2s;
}

.container-footer a:hover {
  color: #fff;
  text-decoration: underline;
}

.footer-menu .mod-menu {
  justify-content: center;
  gap: 2rem;
}


/* Efect de "sticlă" pentru prognoza zilei (dacă folosești module personalizate) */
.weather-today-box {
    background: linear-gradient(135deg, #0077cc 0%, #00aaff 100%);
    color: white;
    padding: 30px;
    border-radius: var(--card-radius);
    text-align: center;
    margin-bottom: 20px;
}

/* Ajustări pentru mobil */
@media (max-width: 768px) {
    .header {
        margin: 5px;
    }
    .container-component {
        padding: 1rem !important;
    }
}