/**

 * Shared styles for standalone auth pages (login.php, register.php).

 * Scoped to body.auth-page — does not affect site-wide buttons.css.

 */

body.auth-page {

  font-family: 'Tajawal', sans-serif;

  background: linear-gradient(135deg, #f7fcfa 0%, #eef8f4 100%);

  min-height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  color: #062824;

  margin: 0;

  padding: 20px;

}



body.auth-page.auth-page--wizard {

  align-items: flex-start;

  padding-top: 24px;

  padding-bottom: 32px;

}



.auth-card {

  width: 100%;

  max-width: 640px;

  background: #fff;

  border: 1px solid rgba(23, 148, 123, 0.12);

  border-radius: 24px;

  padding: 34px 28px;

  box-shadow: 0 20px 50px rgba(15, 79, 71, 0.08);

}



.auth-card--narrow {

  max-width: 460px;

}



.auth-card--wizard {

  max-width: 760px;

}



.auth-title {

  font-size: 2rem;

  font-weight: 800;

  margin-bottom: 10px;

  text-align: center;

}



.auth-subtitle {

  text-align: center;

  color: #6b7280;

  margin-bottom: 24px;

  line-height: 1.9;

  font-size: 0.95rem;

}



.auth-note {

  background: #f5fbf9;

  border: 1px solid rgba(23, 148, 123, 0.14);

  border-radius: 14px;

  padding: 12px 14px;

  color: #475569;

  margin-bottom: 20px;

  line-height: 1.85;

  font-size: 0.9rem;

}



body.auth-page .btn-brand {

  background: #17947B;

  color: #fff;

  border: none;

  border-radius: 14px;

  padding: 12px 18px;

  font-weight: 700;

}



body.auth-page .btn-brand:hover:not(:disabled) {

  background: #0f7d68;

  color: #fff;

}



body.auth-page .btn-brand:disabled {

  opacity: 0.65;

}



body.auth-page .btn-outline-brand {

  background: #fff;

  color: #17947B;

  border: 1px solid rgba(23, 148, 123, 0.28);

  border-radius: 14px;

  padding: 12px 18px;

  font-weight: 700;

  text-decoration: none;

  display: inline-flex;

  align-items: center;

  justify-content: center;

}



body.auth-page .btn-outline-brand:hover {

  background: #f5fbf9;

  color: #0f7d68;

  border-color: #17947B;

}



body.auth-page .btn-outline-secondary {

  background: #fff;

  color: #475569;

  border: 1px solid #dbe4ee;

  border-radius: 14px;

  padding: 12px 18px;

  font-weight: 700;

}



body.auth-page .btn-outline-secondary:hover {

  background: #f8fafc;

  color: #0f172a;

}



.auth-actions {

  display: grid;

  gap: 12px;

  margin-top: 10px;

}



.auth-footer-links {

  margin-top: 20px;

  text-align: center;

  color: #6b7280;

  font-size: 0.95rem;

}



.auth-footer-links a {

  color: #17947B;

  font-weight: 700;

  text-decoration: none;

}



.auth-footer-links a:hover {

  color: #0f7d68;

  text-decoration: underline;

}



/* login.js */

.login-message {

  margin-top: 16px;

  text-align: center;

  font-size: 0.95rem;

  font-weight: 700;

}



.login-message.success {

  color: #198754;

}



.login-message.error {

  color: #dc3545;

}



/* register.js */

.register-message {

  margin-bottom: 16px;

  text-align: center;

  font-size: 0.95rem;

  font-weight: 700;

  display: none;

  line-height: 1.85;

  padding: 12px 14px;

  border-radius: 14px;

}



.register-message.success,

.register-message.error,

.register-message.warning {

  display: block;

}



.register-message.success {

  color: #198754;

  background: rgba(25, 135, 84, 0.08);

  border: 1px solid rgba(25, 135, 84, 0.16);

}



.register-message.error {

  color: #dc3545;

  background: rgba(220, 53, 69, 0.08);

  border: 1px solid rgba(220, 53, 69, 0.16);

}



.register-message.warning {

  color: #b45309;

  background: rgba(245, 158, 11, 0.1);

  border: 1px solid rgba(245, 158, 11, 0.2);

}



/* Wizard */

.wizard-progress {

  margin-bottom: 28px;

}



.wizard-progress-label {

  text-align: center;

  font-weight: 700;

  color: #17947B;

  margin-bottom: 14px;

  font-size: 0.95rem;

}



.wizard-steps {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0;

}



.wizard-step-dot {

  width: 36px;

  height: 36px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: 800;

  font-size: 0.9rem;

  background: #eef2f7;

  color: #94a3b8;

  border: 2px solid #e2e8f0;

  flex-shrink: 0;

  transition: all 0.2s ease;

}



.wizard-step-dot.active {

  background: #17947B;

  color: #fff;

  border-color: #17947B;

}



.wizard-step-dot.done {

  background: #e8f7f3;

  color: #17947B;

  border-color: rgba(23, 148, 123, 0.35);

}



.wizard-step-line {

  flex: 1;

  max-width: 80px;

  height: 3px;

  background: #e2e8f0;

  border-radius: 2px;

}



.wizard-step-line.done {

  background: rgba(23, 148, 123, 0.45);

}



.wizard-step-names {

  display: flex;

  justify-content: space-between;

  margin-top: 10px;

  gap: 8px;

  font-size: 0.78rem;

  color: #94a3b8;

  font-weight: 600;

  text-align: center;

}



.wizard-step-names span.active {

  color: #17947B;

  font-weight: 800;

}



.wizard-panel {

  display: none;

}



.wizard-panel.active {

  display: block;

}



.wizard-section-title {

  font-size: 1.05rem;

  font-weight: 800;

  color: #0f172a;

  margin: 0 0 16px;

}



.wizard-nav {

  display: flex;

  gap: 12px;

  margin-top: 24px;

  flex-wrap: wrap;

}



.wizard-nav .btn {

  flex: 1;

  min-width: 120px;

}



.wizard-nav .btn-ms-auto {

  margin-right: auto;

}



.review-block {

  background: #f8fafc;

  border: 1px solid #e2e8f0;

  border-radius: 14px;

  padding: 16px 18px;

  margin-bottom: 14px;

}



.review-block h4 {

  font-size: 0.95rem;

  font-weight: 800;

  color: #17947B;

  margin: 0 0 12px;

}



.review-row {

  display: flex;

  justify-content: space-between;

  gap: 12px;

  padding: 6px 0;

  border-bottom: 1px dashed #e2e8f0;

  font-size: 0.9rem;

  line-height: 1.7;

}



.review-row:last-child {

  border-bottom: none;

}



.review-row .label {

  color: #64748b;

  font-weight: 600;

  flex-shrink: 0;

}



.review-row .value {

  color: #0f172a;

  font-weight: 700;

  text-align: left;

  word-break: break-word;

}



.wizard-map-box {

  border: 1px solid #dbe4ee;

  border-radius: 14px;

  overflow: hidden;

  background: #fff;

}



#wizardCenterMap {

  width: 100%;

  height: 280px;

}



.wizard-map-help {

  padding: 10px 12px;

  border-top: 1px solid #eef2f7;

  color: #64748b;

  font-size: 0.88rem;

  line-height: 1.7;

  background: #f8fafc;

}



.wizard-coords-box {

  background: #f8fafc;

  border: 1px solid #e2e8f0;

  border-radius: 14px;

  padding: 12px 14px;

  color: #334155;

  font-weight: 700;

  font-size: 0.9rem;

  line-height: 1.8;

}



.wizard-file-preview {

  margin-top: 8px;

  padding: 10px 12px;

  border: 1px dashed #cbd5e1;

  border-radius: 12px;

  background: #f8fafc;

  color: #334155;

  font-size: 0.88rem;

  font-weight: 600;

  display: none;

}



.wizard-file-preview.show {

  display: block;

}



#retryDetailBtn {

  display: none;

}



#retryDetailBtn.show {

  display: inline-flex;

}



@media (max-width: 575.98px) {

  .auth-card {

    padding: 28px 20px;

  }



  .auth-title {

    font-size: 1.65rem;

  }



  .wizard-step-names {

    font-size: 0.7rem;

  }



  .wizard-step-line {

    max-width: 40px;

  }



  .wizard-nav {

    flex-direction: column;

  }



  .wizard-nav .btn {

    width: 100%;

  }



  #wizardCenterMap {

    height: 220px;

  }



  .review-row {

    flex-direction: column;

    gap: 2px;

  }



  .review-row .value {

    text-align: right;

  }

}