/* ═══ BikeAholic Registo & Login – v2.0 ═══ */

.ba-form-container { max-width: 600px; margin: 20px auto; padding: 30px; border: 1px solid #eee; border-radius: 10px; background: #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.05); font-family: sans-serif; }
.ba-login-box { max-width: 480px; }

.ba-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 20px; }
@media (max-width: 600px) { .ba-form-grid { grid-template-columns: 1fr; } }

.ba-field { margin-bottom: 15px; }
.ba-field label { display: block; margin-bottom: 8px; font-weight: bold; color: #333; font-size: 14px; }
.ba-field label small { font-weight: normal; color: #666; font-size: 12px; }
.ba-field input, .ba-field select { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 5px; box-sizing: border-box; font-size: 14px; transition: border-color 0.2s; }
.ba-field input:focus, .ba-field select:focus { border-color: #0c5c5c; outline: none; box-shadow: 0 0 0 2px rgba(12,92,92,0.1); }

.ba-form-row { margin-bottom: 20px; }
.ba-main-label { display: block; font-weight: bold; color: #333; margin-bottom: 10px; font-size: 14px; }

.ba-radio-group { display: flex; gap: 20px; }
.ba-radio { display: flex; align-items: center; gap: 5px; cursor: pointer; font-size: 14px; }
.ba-radio input { width: auto; margin: 0; }

.ba-checkbox-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; gap: 10px; background: #f9f9f9; padding: 15px; border-radius: 5px; }
@media (max-width: 600px) { .ba-checkbox-grid { grid-template-columns: 1fr 1fr; } }

.ba-check { display: flex; align-items: center; gap: 5px; cursor: pointer; font-size: 13px; }
.ba-check input { width: auto; margin: 0; }

.ba-submit-btn { width: 100%; padding: 15px; background-color: #0c5c5c; color: white; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; font-size: 16px; letter-spacing: 1px; transition: background-color 0.2s; margin-top: 10px; }
.ba-submit-btn:hover { background-color: #084d4d; }

.ba-alert { padding: 15px; margin-bottom: 20px; border-radius: 5px; font-weight: bold; font-size: 14px; }
.ba-alert-error { background-color: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }
.ba-alert-error a { color: #991b1b; text-decoration: underline; }
.ba-alert-success { background-color: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }

.ba-form-container a { color: #0c5c5c; text-decoration: none; }
.ba-form-container a:hover { text-decoration: underline; }
.ba-form-container a strong { color: #0c5c5c; }

/* v1.8 FIX: Alinhamento dos campos de password no perfil
   Os dois campos ficam lado a lado com as labels alinhadas no topo,
   e os inputs perfeitamente alinhados horizontalmente */
.ba-password-grid {
    align-items: end;  /* Alinha os inputs na base (ficam na mesma linha) */
}
.ba-password-grid .ba-field {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
}
.ba-password-grid .ba-field label {
    min-height: 38px;
    display: flex;
    align-items: flex-end;
    margin-bottom: 8px;
    line-height: 1.3;
}
.ba-password-grid .ba-field input {
    width: 100%;
}

/* Estilo para o wrapper do distrito dinâmico */
.ba-district-wrapper select,
.ba-district-wrapper input { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 5px; box-sizing: border-box; font-size: 14px; transition: border-color 0.2s; }
.ba-district-wrapper select:focus,
.ba-district-wrapper input:focus { border-color: #0c5c5c; outline: none; box-shadow: 0 0 0 2px rgba(12,92,92,0.1); }
.ba-district-wrapper label { display: block; margin-bottom: 8px; font-weight: bold; color: #333; font-size: 14px; }

/* Estilo para o wrapper do país customizado */
.ba-country-wrapper select,
.ba-country-wrapper input[type="text"] { width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 5px; box-sizing: border-box; font-size: 14px; transition: border-color 0.2s; }
.ba-country-wrapper select:focus,
.ba-country-wrapper input[type="text"]:focus { border-color: #0c5c5c; outline: none; box-shadow: 0 0 0 2px rgba(12,92,92,0.1); }
.ba-country-wrapper label { display: block; margin-bottom: 8px; font-weight: bold; color: #333; font-size: 14px; }