/* Profile page styling for the names site (adapted from the main site look). */

.profile-wrapper { max-width: 640px; }

/* Alerts */
.alert-warning-custom, .alert-danger-custom, .alert-info-custom {
  display: flex; gap: 14px; align-items: flex-start;
  border-radius: 12px; padding: 16px 18px; border: 1px solid transparent;
}
.alert-warning-custom { background: #fff8e6; border-color: #ffe6a0; color: #7a5b00; }
.alert-danger-custom  { background: #fdecec; border-color: #f5c2c2; color: #8a1f1f; }
.alert-info-custom    { background: #e8f4fb; border-color: #b8ddf2; color: #0e5a86; }
.alert-icon { font-size: 1.25rem; line-height: 1.4; }
.alert-link { font-weight: 700; }

/* Profile card */
.profile-card, .auth-card {
  background: #fff; border-radius: 16px; border: 1px solid #eef0f2;
  overflow: hidden; margin-top: 6px;
}
.profile-header {
  text-align: center; padding: 28px 24px 18px;
  background: linear-gradient(180deg, #f8fafc 0%, #fff 100%);
  border-bottom: 1px solid #eef0f2;
}
.avatar-wrapper { display: inline-block; position: relative; margin-bottom: 12px; }
.profile-avatar { width: 84px; height: 84px; border-radius: 50%; background: #f3f4f6; padding: 8px; }
.profile-name { font-weight: 800; color: #1f2937; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0; }

.btn-edit-inline {
  background: none; border: none; color: #17a2b8; cursor: pointer;
  font-size: 0.9rem; padding: 3px 7px; border-radius: 6px;
}
.btn-edit-inline:hover { background: #e6f6f9; color: #0e7490; }

/* Details */
.profile-details { padding: 22px 24px; }
.section-title { text-transform: uppercase; letter-spacing: 0.05em; color: #9ca3af; font-weight: 700; margin-bottom: 16px; }
.detail-item { padding: 12px 0; border-bottom: 1px solid #f1f3f5; }
.detail-item:last-child { border-bottom: none; }
.detail-label { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: #9ca3af; font-weight: 700; margin-bottom: 4px; }
.detail-value-group { display: flex; align-items: center; gap: 8px; }
.detail-value { font-size: 1rem; color: #374151; font-weight: 600; }

/* Actions - full-width stacked rows (matches main site) */
.profile-actions { padding: 6px 24px 24px; }
.actions-grid { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.btn-action-card {
  display: flex; flex-direction: row; align-items: center; gap: 16px;
  padding: 14px 18px; border-radius: 12px; background: #f8fafc;
  border: 1px solid #eef0f2; color: #374151; text-decoration: none; font-weight: 600;
  font-size: 1.05rem; transition: all .12s ease;
}
.btn-action-card:hover { border-color: #17a2b8; color: #0e7490; text-decoration: none; }
.icon-box { font-size: 1.15rem; width: 44px; height: 44px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; }
.btn-primary-light { background: #e6f0ff; color: #2563eb; }
.btn-info-light    { background: #e6f6f9; color: #0e7490; }
.btn-success-light { background: #e7f8ee; color: #047857; }
.btn-warning-light { background: #fff5e0; color: #b45309; }

/* Auth (login/register) */
.auth-tabs-header { border-bottom: 1px solid #eef0f2; }
.auth-tabs-header .nav-pills .nav-link { color: #6b7280; border-radius: 0; }
.auth-tabs-header .nav-pills .nav-link.active { color: #17a2b8; background: none; border-bottom: 3px solid #17a2b8; }
.custom-input { border-radius: 10px; border: 1px solid #dfe3e8; }
.custom-input:focus { border-color: #17a2b8; box-shadow: 0 0 0 3px rgba(23,162,184,0.12); }

/* Password show/hide */
.password-field { position: relative; }
.password-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: #9ca3af; cursor: pointer; padding: 6px 10px;
}
.password-toggle:hover { color: #17a2b8; }

/* Modals */
.custom-modal { border-radius: 16px; border: none; }
.custom-modal .modal-header { border-bottom: 1px solid #eef0f2; }
.custom-modal .modal-footer { border-top: 1px solid #eef0f2; }