/* Loader Principal */
.loader-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0f172a; /* fundal închis premium */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease;
}

.loader-content {
  text-align: center;
}

.loader-title {
  font-size: 2.5rem;
  font-weight: bold;
  color: #ffffff;
  margin-top: 20px;
  animation: fadeIn 2s ease infinite alternate;
}

.loader-subtitle {
  font-size: 1rem;
  font-weight: 400;
  color: #94a3b8;
  margin-top: 8px;
}

.dot {
  width: 16px;
  height: 16px;
  background-color: #3b82f6;
  border-radius: 50%;
  animation: pulseDot 1.2s infinite ease-in-out;
}

@keyframes pulseDot {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.4);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.7;
  }
}

@keyframes fadeIn {
  from { opacity: 0.7; }
  to { opacity: 1; }
}


/* Fundal și text general */
body {
  color: #222;
  font-family: 'Arial', sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Header și Footer */
header, footer {
  color: white;
}

/* Butoane și Select */
button, select {
  min-width: 220px;
  max-width: 220px;
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  white-space: normal; /* permite text pe două rânduri dacă e nevoie */
  word-break: break-word;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

button:hover, select:hover {
  transform: scale(1.08);
}

/* Steaguri */
img.flag {
  width: 28px;
  height: 18px;
  object-fit: cover;
  border-radius: 2px;
  transition: transform 0.2s ease;
}

img.flag:hover {
  transform: scale(1.15);
}

/* Main buttons style */
.main-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* --- Teme clare cu !important --- */

/* DEFAULT */
body:not(.theme-dark):not(.theme-light):not(.theme-nordic):not(.theme-normand):not(.theme-epic),
header, footer {
  background-color: #e0f2fe !important;
  color: #10b981 !important;
}

body:not(.theme-dark):not(.theme-light):not(.theme-nordic):not(.theme-normand):not(.theme-epic) button,
body:not(.theme-dark):not(.theme-light):not(.theme-nordic):not(.theme-normand):not(.theme-epic) select {
  background-color: #10b981 !important;
  color: #ffffff !important;
}

/* DARK */
.theme-dark body, .theme-dark header, .theme-dark footer {
  background-color: #0f172a !important;
  background-image: none !important;
  color: #94a3b8 !important;
}

.theme-dark button, .theme-dark select {
  background-color: #1e293b !important;
  color: #ffffff !important;
}

/* LIGHT */
.theme-light body, .theme-light header, .theme-light footer {
  background-color: #ffffff !important;
  background-image: none !important;
  color: #0f172a !important;
}

.theme-light button, .theme-light select {
  background-color: #3b82f6 !important;
  color: #ffffff !important;
}

/* NORDIC */
.theme-nordic body, .theme-nordic header, .theme-nordic footer {
  background-color: #5e81ac !important;
  background-image: none !important;
  color: #eceff4 !important;
}

.theme-nordic button, .theme-nordic select {
  background-color: #81a1c1 !important;
  color: #0f172a !important;
}

/* NORMAND */
.theme-normand body, .theme-normand header, .theme-normand footer {
  background-color: #b45309 !important;
  background-image: none !important;
  color: #fef9c3 !important;
}

.theme-normand button, .theme-normand select {
  background-color: #ea580c !important;
  color: #ffffff !important;
}

/* EPIC */
.theme-epic body, .theme-epic header, .theme-epic footer {
  background: linear-gradient(135deg, #f43f5e, #8b5cf6, #10b981) !important;
  color: #f9fafb !important;
}

.theme-epic button, .theme-epic select {
  background-color: #10b981 !important;
  color: #ffffff !important;
}
.main-background {
  background-color: #f3f4f6; /* Un gri deschis optimizat */
  transition: background 0.5s ease-in-out;
}

/* DARK */
.theme-dark .main-background {
  background-color: #1e293b !important;
}

/* LIGHT */
.theme-light .main-background {
  background-color: #ffffff !important;
}

/* NORDIC */
.theme-nordic .main-background {
  background-color: #4c566a !important;
}

/* NORMAND */
.theme-normand .main-background {
  background-color: #f59e0b !important;
}

/* EPIC */
.theme-epic .main-background {
  background: linear-gradient(135deg, #f43f5e, #8b5cf6, #10b981) !important;
}
body, main, header, footer {
  transition: all 0.4s ease-in-out;
}
/* Butoane generale (Main + Footer) */
button, select {
  min-width: 220px;
  max-width: 220px;
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Butoane speciale din Header (Mod + Tema) */
header button, header select {
  min-width: 120px;
  max-width: 120px;
  height: 36px;
  padding: 6px 12px;
  font-size: 0.875rem;
  font-weight: bold;
  white-space: nowrap;
  text-align: center;
}
/* Stiluri generale pentru Desktop și Tablete */
button, select {
  min-width: 220px;
  max-width: 220px;
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

/* Butoane speciale Header */
header button, header select {
  min-width: 120px;
  max-width: 120px;
  height: 36px;
  padding: 6px 12px;
  font-size: 0.875rem;
  font-weight: bold;
  white-space: nowrap;
  text-align: center;
}

/* OPTIMIZARE PENTRU MOBILE */
@media (max-width: 600px) {
  button, select {
    min-width: 160px;
    max-width: 160px;
    padding: 8px 16px;
    font-size: 0.875rem;
  }

  header button, header select {
    min-width: 100px;
    max-width: 100px;
    height: 32px;
    padding: 4px 8px;
    font-size: 0.75rem;
  }

  .main-buttons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    width: 100%;
    max-width: 320px;
  }

  footer button {
    min-width: 80px;
    max-width: 80px;
    font-size: 0.75rem;
    padding: 6px 10px;
  }
}
#flag-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.flag-img {
  width: 48px;
  height: 32px;
  object-fit: contain;
  cursor: pointer;
  border-radius: 4px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.flag-img:hover {
  transform: scale(1.1);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
}

#flag-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-left: auto;
  margin-right: auto;
}
.flag-img.selected {
  animation: bounceSelect 0.5s ease;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.8);
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 6px;
}

@keyframes bounceSelect {
  0% { transform: scale(1); }
  30% { transform: scale(1.2); }
  50% { transform: scale(0.9); }
  70% { transform: scale(1.1); }
  100% { transform: scale(1); }
}