:root {
  --fkh-font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --fkh-text: #2d3748;
  --fkh-border: #e2e8f0;
  --fkh-primary: #1a365d;
  --fkh-secondary: #2d3748;
  --fkh-danger: #e53e3e;
  --fkh-radius: 10px;
  --fkh-space: 15px;
  --fkh-light-gray: #f7fafc;
  --fkh-white: #ffffff;
}

.sr-only { 
  position:absolute!important; 
  width:1px!important; 
  height:1px!important; 
  padding:0!important; 
  margin:-1px!important; 
  overflow:hidden!important; 
  clip:rect(0,0,0,0)!important; 
  white-space:nowrap!important; 
  border:0!important; 
}

/* Container principali */
.fkh-login, .fkh-register, .fkh-forgot, .fkh-passchg, .fkh-profile {
  font-family: var(--fkh-font); 
  color: var(--fkh-text);
  background-color: var(--fkh-white);
  border-radius: var(--fkh-radius);
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  padding: var(--fkh-space);
  margin-bottom: 20px;
}

/* Messaggi di stato */
.fkh-errors { 
  border: 1px solid rgba(229, 62, 62, 0.25); 
  background: rgba(229, 62, 62, 0.06); 
  color: var(--fkh-danger); 
  border-radius: 8px; 
  padding: 12px 15px; 
  margin: 0 0 calc(var(--fkh-space) * 1.25); 
  font-size: 0.9rem;
}

.fkh-info { 
  border: 1px solid rgba(26, 52, 93, 0.3); 
  background: rgba(26, 52, 93, 0.07); 
  color: var(--fkh-primary); 
  border-radius: 8px; 
  padding: 12px 15px; 
  font-size: 0.9rem;
}

/* Input fields - Stile allineato al tuo design */
.fkh-input { 
  width: 100%; 
  padding: 15px; 
  border: 1px solid var(--fkh-border); 
  border-radius: 8px; 
  background: var(--fkh-white); 
  color: var(--fkh-text);
  font-size: 1rem;
  transition: all 0.3s;
}

.fkh-input:focus {
  border-color: var(--fkh-primary);
  box-shadow: 0 0 0 3px rgba(26, 52, 93, 0.1);
  outline: none;
}

.fkh-label { 
  display: inline-block; 
  margin-bottom: 8px; 
  font-weight: 600; 
  color: var(--fkh-primary);
}

.fkh-field {
  position: relative;
}

.fkh-actions { 
  text-align: right;  
}

/* Bottoni - Stile allineato al tuo design */
.fkh-btn { 
  display: inline-block; 
  padding: 15px 25px; 
  border-radius: 8px; 
  border: none; 
  background: var(--fkh-white); 
  color: var(--fkh-text); 
  cursor: pointer; 
  font-weight: 700; 
  font-size: 1rem;
  transition: all 0.3s;
  text-align: center;
  text-decoration: none;
}

.fkh-btn--primary { 
  background: linear-gradient(135deg, var(--fkh-primary), var(--fkh-secondary)); 
  color: var(--fkh-white); 
  border: none;
  padding: 15px 30px;
  font-size: 1.1rem;
}

.fkh-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.fkh-link, .fkh-forgot { 
  color: var(--fkh-primary); 
  text-decoration: none;
  font-weight: 500;
}

.fkh-link:hover, .fkh-forgot:hover { 
  text-decoration: underline; 
}

.fkh-meta { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  margin-top: 10px; 
}

.fkh-remember { 
  display: inline-flex; 
  gap: 8px; 
  align-items: center; 
}

/* Grid system */
.fkh-grid { 
  display: grid; 
  grid-template-columns: 1fr; 
  gap: var(--fkh-space); 
}

.fkh-col-3 { grid-column: span 3; }
.fkh-col-4 { grid-column: span 4; }
.fkh-col-6 { grid-column: span 6; }

@media (min-width: 768px){ 
  .fkh-grid { 
    grid-template-columns: repeat(12, 1fr); 
  } 
}

/* Radio buttons */
.fkh-radio { 
  display: inline-flex; 
  align-items: center; 
  gap: 8px; 
  margin-right: 15px; 
}

.fkh-field--tipo { 
  margin-top: calc(var(--fkh-space) * 1.25); 
}

/* Password toggle styles - Aggiornato */
.fkh-password-wrapper {
  position: relative;
  display: block;
}

.fkh-toggle-pw {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #636363 !important;
  border-radius: 50%;
  transition: all 0.3s;
}

.fkh-toggle-pw:hover {
  color: var(--fkh-primary);
  background-color: var(--fkh-light-gray);
}

.fkh-toggle-pw svg {
  width: 20px;
  height: 20px;
}

.fkh-toggle-pw[aria-pressed="true"] {
  color: var(--fkh-primary);
}

/* Padding per input password */
.fkh-input[type="password"] {
  padding-right: 55px !important;
}

/* Messaggi di stato migliorati - Allineati al tuo design */
.fkh-info--success {
  background: #d4edda !important;
  border: 1px solid #c3e6cb !important;
  color: #155724 !important;
}

.fkh-info--warn {
  background: #fff3cd !important;
  border: 1px solid #ffeaa7 !important;
  color: #856404 !important;
}

.fkh-info--info {
  background: #cce7ff !important;
  border: 1px solid #b3d9ff !important;
  color: #004085 !important;
}

.fkh-success {
  animation: fadeInUp 0.5s ease-out;
}

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

/* Stile per il reCAPTCHA */
.fkh-recaptcha {
  margin: 15px 0;
  padding: 10px 0;
}

/* Responsive improvements */
@media (max-width: 768px) {
  .fkh-login, .fkh-register, .fkh-forgot, .fkh-passchg, .fkh-profile {
    margin: 10px;
    padding: 15px;
  }
  
  .fkh-btn {
    width: 100%;
    padding: 15px;
  }
  
  .fkh-actions {
    text-align: center;
  }
  
  .fkh-meta {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
}

/* Stile per i campi obbligatori */
.fkh-input:required {
  border-left: 3px solid var(--fkh-primary);
}

/* Placeholder styling */
.fkh-input::placeholder {
  color: #a0aec0;
  opacity: 1;
}

/* Checkbox styling */
.fkh-remember input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--fkh-primary);
}

/* Link di navigazione aggiuntivi */
.fkh-footer {
  margin-top: 20px;
  text-align: center;
  padding-top: 15px;
  border-top: 1px solid var(--fkh-border);
}

.fkh-footer .fkh-link {
  font-size: 0.9rem;
}