@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');

/* Utilise les variables du thème global */
:root{
  --bg-elev: var(--bg-elevated);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --brand: var(--brand);
  --brand-600: var(--brand-dark);
  --stroke: var(--border);
  --radius: var(--radius-lg);
  --shadow: var(--shadow-xl);
}

/* Page */
.auth-page{
  width:min(1280px,100%);
  margin:32px auto 64px;
  padding:0 20px;
}

/* Flash messages */
.flash-stack{display:flex;flex-direction:column;gap:10px;align-items:center;margin-bottom:16px}
.flash{
  padding:10px 14px;border-radius:10px;font-weight:600;
  border:1px solid var(--stroke); background:var(--bg-card); color:var(--text);
}
.flash.error{background:var(--danger-light);border-color:var(--danger);color:var(--danger)}
.flash.success{background:var(--success-light);border-color:var(--success);color:var(--success)}
.flash.info{background:var(--brand-light);border-color:var(--brand);color:var(--brand)}

/* Carte auth */
.auth-card{
  width:min(440px,100%);
  margin:0 auto;
  background:var(--bg-card);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
}

/* Tabs */
.tabs{
  position:relative; display:grid; grid-template-columns:1fr 1fr;
  border-bottom:1px solid var(--stroke); background:var(--bg-elevated);
}
.tab{
  text-align:center; padding:14px 10px; font-weight:700; cursor:pointer; color:var(--text-secondary); user-select:none;
}
.tab:hover{background:var(--bg-card)}
.tab-indicator{
  position:absolute; bottom:0; left:0; width:50%; height:2px;
  background:linear-gradient(90deg,var(--brand),var(--brand-600));
  transition: transform .25s ease;
}

/* Checkbox pilotage des vues */
#check{display:none}
#check ~ .tabs .tab-indicator{transform:translateX(0)}
#check:checked ~ .tabs .tab-indicator{transform:translateX(100%)}

/* Couleur onglet actif */
#check ~ .tabs .login-tab{color:var(--text-primary)}
#check ~ .tabs .register-tab{color:var(--text-secondary)}
#check:checked ~ .tabs .login-tab{color:var(--text-secondary)}
#check:checked ~ .tabs .register-tab{color:var(--text-primary)}

/* Panneaux (un seul visible à la fois) */
.pane{display:none;padding:18px}
#check ~ .login{display:block}
#check ~ .registration{display:none}
#check:checked ~ .login{display:none}
#check:checked ~ .registration{display:block}

/* Form */
.form header{font-size:22px;font-weight:800;text-align:center;margin-bottom:12px;color:var(--text-primary)}
.form input{
  height:48px;width:100%;padding:0 12px;font-size:15px;margin-bottom:12px;
  background:var(--bg-card);color:var(--text-primary);border:1px solid var(--stroke);border-radius:12px;
}
.form input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-light)}

.right{text-align:right;margin:6px 0 12px}
.reset-link{color:var(--brand);font-weight:700;text-decoration:underline}
.reset-link:hover{color:var(--brand-hover)}

.button{
  width:100%;height:46px;border:none;border-radius:12px;font-weight:800;cursor:pointer;
  background:linear-gradient(135deg,var(--brand),var(--brand-dark));color:white;
  transition:filter .15s ease, transform .05s ease;
}
.button:hover{filter:brightness(1.05)}
.button:active{transform:translateY(1px)}

.switch{font-size:14px;text-align:center;color:var(--text-secondary);margin-top:10px}
.switch label{color:var(--brand);cursor:pointer;font-weight:800}
.switch label:hover{text-decoration:underline}

.status{margin-top:10px;font-size:14px;font-weight:700}

/* Select2 dark */
.nationality-select{margin-top:2px}
.select2-container{width:100% !important}
.select2-container--default .select2-selection--single{
  background:var(--bg-card);border:1px solid var(--stroke);border-radius:12px;height:48px;
}
.select2-container .select2-selection--single .select2-selection__rendered{
  color:var(--text-primary);line-height:48px;padding-left:12px
}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:48px;right:8px}
.select2-dropdown{background:var(--bg-elevated);border:1px solid var(--border)}
.select2-results__option{padding:8px 10px;color:var(--text-primary)}
.select2-results__option--highlighted[aria-selected]{background:var(--brand-light)}
.select2-results__option[aria-selected="true"]{background:var(--bg-card)}

/* Small helpers */
.auth-page a{color:inherit}

/* Responsive */
@media (max-width: 420px){
  .auth-card{border-radius:12px}
}



/* Icônes de drapeaux dans Select2 */
.flag-icon {
  width: 20px;
  height: auto;
  margin-right: 8px;
  vertical-align: middle;
}

/* Options Select2 avec drapeaux */
.select2-results__option {
  display: flex !important;
  align-items: center !important;
  gap: 8px;
  background-color: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
}

.select2-results__option--highlighted[aria-selected] {
  background-color: var(--brand-light) !important;
  color: var(--brand) !important;
}

.select2-results__option[aria-selected="true"] {
  background-color: var(--bg-card) !important;
  color: var(--text-primary) !important;
}

/* Zone sélectionnée */
.select2-container .select2-selection__rendered img.flag-icon {
  width: 20px;
  height: auto;
  margin-right: 8px;
  vertical-align: middle;
}