/* ===== MAPELDA — Shared page UI (used by register.php, status.php, dst.) =====
   Relies on the color/font CSS variables already defined in partials/header.php:
   --primary, --primary-dark, --accent, --accent-light, --surface-card, --muted, --font-body */

.mp-page{ max-width:1120px; margin:0 auto; --mp-border:#dee2e6; --mp-text:#313c4c; --mp-error:#b42318; }
.mp-page h1, .mp-page h2, .mp-page h3{ font-family: var(--font-body); }

/* -- Page header -- */
.mp-page-header{ padding:40px 4px 28px; }
.mp-page-title{ font-size:32px; font-weight:700; color:var(--mp-text); margin:0 0 8px; letter-spacing:-.01em; }
.mp-page-subtitle{ font-size:15px; color:var(--muted); margin:0; max-width:640px; }

/* -- Card -- */
.mp-card{ background:var(--surface-card); border:1px solid var(--mp-border); border-radius:16px;
  box-shadow:0 1px 2px rgba(1,74,54,.05), 0 4px 16px rgba(1,74,54,.04); padding:32px; margin-bottom:24px; }

/* -- Sections -- */
.mp-section + .mp-section{ margin-top:32px; }
.mp-section-title{ font-size:18px; font-weight:600; color:var(--mp-text); margin:0 0 20px;
  display:flex; align-items:center; gap:8px; font-family: var(--font-body) !important; }
.mp-section-title::before{ content:""; width:4px; height:16px; background:var(--accent); border-radius:2px; flex-shrink:0; }
.mp-divider{ height:1px; background:var(--mp-border); margin:24px 0; }

/* -- Grid -- */
.mp-grid{ display:grid; grid-template-columns:1fr; gap:20px; }
@media (min-width:768px){ .mp-grid-2{ grid-template-columns:1fr 1fr; } }

/* -- Fields, labels, inputs -- */
.mp-field{ display:flex; flex-direction:column; min-width:0; }
.mp-label{ font-size:14px; font-weight:600; color:var(--mp-text); margin-bottom:7px; }
.mp-required{ color:var(--mp-error); margin-left:2px; }
.mp-helper{ font-size:13px; color:var(--muted); margin-top:6px; }

.mp-input, .mp-select, .mp-textarea{
  width:100%; height:46px; padding:0 14px; font-size:15px; color:var(--mp-text);
  background:#fff; border:1px solid var(--mp-border); border-radius:8px; font-family:var(--font-body);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.mp-textarea{ height:auto; min-height:110px; padding:12px 14px; line-height:1.5; resize:vertical; }
.mp-input::placeholder, .mp-textarea::placeholder{ color:#9aa3af; }
.mp-input:hover, .mp-select:hover, .mp-textarea:hover{ border-color:#c3c9cf; }
.mp-input:focus, .mp-select:focus, .mp-textarea:focus,
.mp-input:focus-visible, .mp-textarea:focus-visible{
  outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(1,74,54,.10);
}
.mp-field.has-error .mp-input, .mp-field.has-error .mp-select, .mp-field.has-error .mp-textarea{ border-color:var(--mp-error); }
.mp-field.has-error .mp-input:focus, .mp-field.has-error .mp-textarea:focus{ box-shadow:0 0 0 3px rgba(180,35,24,.10); }

.mp-input-icon{ position:relative; }
.mp-input-icon > i{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#5f9384; font-size:15px; pointer-events:none; }
.mp-input-icon .mp-input{ padding-left:40px; }

.mp-error{ display:none; align-items:flex-start; gap:6px; font-size:13px; color:var(--mp-error); margin:6px 0 0; }
.mp-error.show{ display:flex; }
.mp-error i{ margin-top:1px; flex-shrink:0; }

/* -- Alerts (status/feedback banners) -- */
.mp-alert{ display:flex; align-items:flex-start; gap:10px; border-radius:10px; padding:14px 16px; font-size:14px; line-height:1.5; border:1px solid transparent; }
.mp-alert i{ margin-top:2px; flex-shrink:0; font-size:15px; }
.mp-alert-success{ background:#f0f7f4; border-color:#bfe0d1; color:#0c5132; }
.mp-alert-success i{ color:var(--primary); }
.mp-alert-info{ background:#faf7ee; border-color:#e9d8a6; color:#7a5b12; }
.mp-alert-info i{ color:#b8922e; }
.mp-alert-warning{ background:#fff8ec; border-color:#f3ddab; color:#7a4a0a; }
.mp-alert-warning i{ color:#c47a12; }
.mp-alert-danger{ background:#fdf2f1; border-color:#f2c4bd; color:var(--mp-error); }
.mp-alert-danger i{ color:var(--mp-error); }
.mp-alert a{ color:inherit; font-weight:700; text-decoration:underline; }
.mp-alert strong{ font-weight:700; }

/* -- Status badges -- */
.mp-badge{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:700;
  padding:5px 12px; border-radius:999px; white-space:nowrap; }
.mp-badge-success{ background:rgba(1,74,54,.10); color:var(--primary); }
.mp-badge-warning{ background:rgba(212,168,67,.18); color:#8a6a1d; }

/* -- Buttons -- */
.mp-btn{ height:46px; padding:0 22px; border-radius:8px; font-size:15px; font-weight:600; display:inline-flex;
  align-items:center; justify-content:center; gap:8px; border:1px solid transparent; cursor:pointer; text-decoration:none;
  font-family:var(--font-body); transition:background .18s ease, border-color .18s ease, color .18s ease, transform 80ms ease; }
.mp-btn-primary{ background:var(--primary); color:#fff; }
.mp-btn-primary:hover{ background:var(--primary-dark); color:#fff; }
.mp-btn-primary:active{ transform:translateY(1px); }
.mp-btn-primary:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.mp-btn-primary:disabled{ background:#9db8af; cursor:not-allowed; }
.mp-btn-secondary{ background:#fff; color:var(--primary); border-color:var(--mp-border); }
.mp-btn-secondary:hover{ border-color:var(--primary); background:rgba(1,74,54,.04); color:var(--primary); }
.mp-btn-secondary:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.mp-btn-outline{ background:#fff; border-color:var(--mp-border); color:var(--mp-text); min-height:44px; }
.mp-btn-outline:hover{ border-color:var(--primary); color:var(--primary); }
.mp-btn-outline:disabled{ color:#9aa3af; cursor:not-allowed; }
.mp-btn-outline:disabled:hover{ border-color:var(--mp-border); color:#9aa3af; }
.mp-btn-sm{ height:38px; padding:0 16px; font-size:13.5px; }

.mp-spinner{ width:16px; height:16px; border:2px solid rgba(255,255,255,.5); border-top-color:#fff; border-radius:50%; animation:mp-spin .6s linear infinite; }
@keyframes mp-spin{ to{ transform:rotate(360deg); } }

.mp-actions{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:36px; flex-wrap:wrap; }
.mp-actions-center{ justify-content:center; }
@media (max-width:767.98px){ .mp-actions{ flex-direction:column-reverse; } .mp-actions .mp-btn{ width:100%; } }

/* -- Mobile -- */
@media (max-width:767.98px){
  .mp-page-header{ padding:24px 4px 20px; }
  .mp-page-title{ font-size:25px; }
  .mp-page-subtitle{ font-size:14px; }
  .mp-card{ padding:20px; border-radius:14px; }
}