/* ═══════════════════════════════════════════════════
   Maritime Hub — Register Page Styles
   File: mh-register.css (child theme root)
═══════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600&family=DM+Sans:wght@300;400;500&display=swap');

:root {
  --navy:        #0B1F3A;
  --navy-mid:    #122d50;
  --navy-light:  #1a3a5c;
  --teal:        #5DCAA5;
  --teal-mid:    #1D9E75;
  --teal-dark:   #0F6E56;
  --teal-pale:   #E1F5EE;
  --blue:        #378ADD;
  --blue-pale:   #E6F1FB;
  --blue-dark:   #185FA5;
  --pink:        #D4537E;
  --pink-pale:   #FBEAF0;
  --pink-dark:   #72243E;
  --purple-pale: #EEEDFE;
  --purple-dark: #3C3489;
  --amber:       #EF9F27;
  --amber-pale:  #FAEEDA;
  --amber-dark:  #633806;
  --gray-pale:   #F8F7F5;
  --gray-100:    #D3D1C7;
  --gray-400:    #888780;
  --gray-600:    #5F5E5A;
  --gray-800:    #444441;
  --coral-pale:  #FAECE7;
  --coral-dark:  #712B13;
  --text:        #0f0f0f;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
}

/* ── Reset & base ── */
body.mh-register-page {
  margin: 0;
  padding: 0;
  background: var(--gray-pale);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

body.mh-register-page *,
body.mh-register-page *::before,
body.mh-register-page *::after {
  box-sizing: border-box;
}

/* hide WP admin bar on this page */
#wpadminbar { display: none !important; }
html { margin-top: 0 !important; }

/* ── Shell ── */
.mhr-shell {
  min-height: 100vh;
  width: 100%;
  position: relative;
}

/* ══════════════════════════════════════════
   STEP VISIBILITY
   Uses visibility+height instead of display:none
   so UM can initialise its JS on hidden forms
══════════════════════════════════════════ */
.mhr-step {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  visibility: hidden;
  pointer-events: none;
  height: 0;
  overflow: hidden;
  z-index: 0;
}

.mhr-step.active {
  position: relative;
  visibility: visible;
  pointer-events: auto;
  height: auto;
  overflow: visible;
  z-index: 1;
}

/* ══════════════════════════════════════════
   STEP 1 HEADER
══════════════════════════════════════════ */
.mhr-header {
  background: var(--navy);
  padding: 2rem 3rem 2.5rem;
}

.mhr-header-content,
.mhr-steps-indicator {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.mhr-header h1 {
  font-family: 'Syne', sans-serif;
  font-size: 28px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 6px;
  line-height: 1.2;
}

.mhr-header p {
  font-size: 14px;
  color: #85B7EB;
  margin: 0 0 1.5rem;
  font-weight: 300;
}

/* ── Step indicator ── */
.mhr-steps-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mhr-step-pip {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0.45;
}

.mhr-step-pip.active { opacity: 1; }

.mhr-step-pip span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--navy-light);
  color: #85B7EB;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: 'Syne', sans-serif;
}

.mhr-step-pip.active span {
  background: var(--teal);
  color: var(--navy);
}

.mhr-step-pip em {
  font-style: normal;
  font-size: 12px;
  color: #85B7EB;
}

.mhr-step-pip.active em { color: var(--teal); }

.mhr-step-connector {
  flex: 0 0 32px;
  height: 1px;
  background: var(--navy-light);
}

/* ══════════════════════════════════════════
   TIER SECTION LABELS
══════════════════════════════════════════ */
.mhr-tiers-wrap {
  background: var(--gray-pale);
  padding-bottom: 0;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

.mhr-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Syne', sans-serif;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gray-400);
  padding: 1.75rem 3rem 0.75rem;
}

/* ══════════════════════════════════════════
   TIER GRID + CARDS
══════════════════════════════════════════ */
.mhr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  padding: 0 3rem 1.5rem;
}

.mhr-card {
  background: #fff;
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: border-color 0.15s, transform 0.1s;
}

.mhr-card:hover:not(.mhr-card-locked) {
  border-color: var(--blue);
  transform: translateY(-1px);
}

.mhr-card.selected {
  border: 2px solid var(--blue-dark);
}

.mhr-card-locked {
  cursor: default;
  opacity: 0.55;
}

/* ── Badges ── */
.mhr-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 4px;
  width: fit-content;
  font-family: 'Syne', sans-serif;
  letter-spacing: 0.02em;
}

.mhr-badge-free       { background: var(--teal-pale);   color: var(--teal-dark); }
.mhr-badge-popular    { background: var(--blue-pale);   color: var(--blue-dark); }
.mhr-badge-pro        { background: var(--purple-pale); color: var(--purple-dark); }
.mhr-badge-invite     { background: var(--amber-pale);  color: var(--amber-dark); }
.mhr-badge-shore      { background: var(--pink-pale);   color: var(--pink-dark); }
.mhr-badge-api        { background: #F1EFE8;             color: var(--gray-800); }
.mhr-badge-enterprise { background: var(--coral-pale);  color: var(--coral-dark); }

/* ── Card headings ── */
.mhr-card h3 {
  font-family: 'Syne', sans-serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.mhr-price {
  font-family: 'Syne', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
}

.mhr-price span {
  font-size: 12px;
  color: var(--gray-400);
  font-weight: 400;
  font-family: 'DM Sans', sans-serif;
}

.mhr-price-contact {
  font-size: 14px;
  color: var(--blue-dark);
}

.mhr-divider {
  border: none;
  border-top: 1px solid var(--gray-100);
  margin: 0;
}

/* ── Feature list ── */
.mhr-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.mhr-features li {
  font-size: 12px;
  color: var(--gray-600);
  display: flex;
  align-items: flex-start;
  gap: 6px;
  line-height: 1.4;
}

.mhr-features li::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  min-width: 5px;
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
}

.mhr-features li.yes::before { background: var(--teal-mid); }
.mhr-features li.no { opacity: 0.38; }
.mhr-features li.no::before { background: var(--gray-100); }

/* ── Select button ── */
.mhr-select-btn {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  background: #fff;
  cursor: pointer;
  margin-top: auto;
  font-family: 'DM Sans', sans-serif;
  transition: background 0.1s, color 0.1s;
}

.mhr-card.selected .mhr-select-btn {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

/* Never let the select button inherit red/error colours */
.mhr-select-btn { color: var(--text) !important; background: #fff !important; }
.mhr-card.selected .mhr-select-btn { background: var(--navy) !important; color: #fff !important; }

/* ── Locked note ── */
.mhr-locked-note {
  font-size: 11px;
  color: #B4B2A9;
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: auto;
}

.mhr-locked-note svg { width: 10px; height: 12px; }

/* ══════════════════════════════════════════
   STEP 1 FOOTER
══════════════════════════════════════════ */
.mhr-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 3rem 2rem;
  background: var(--gray-pale);
  border-top: 1px solid var(--gray-100);
  gap: 1rem;
  flex-wrap: wrap;
  max-width: 1280px;
  margin: 0 auto;
}

.mhr-founding-note {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--gray-600);
}

.mhr-founding-note svg { width: 14px; height: 14px; flex-shrink: 0; }

/* ══════════════════════════════════════════
   STEP 2 — FORM PAGE
══════════════════════════════════════════ */
.mhr-form-wrap {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  min-height: 100vh;
}

/* ── Left panel ── */
.mhr-form-left {
  background: var(--navy);
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.mhr-selected-card {
  background: var(--navy-mid);
  border-radius: var(--radius-md);
  padding: 1.25rem;
}

.mhr-sc-badge {
  font-size: 10px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 4px;
  width: fit-content;
  margin-bottom: 10px;
  font-family: 'Syne', sans-serif;
}

.mhr-sc-name {
  font-family: 'Syne', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: #fff;
}

.mhr-sc-price {
  font-size: 13px;
  color: #85B7EB;
  margin-top: 3px;
  font-weight: 300;
}

.mhr-sc-features {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mhr-sc-features li {
  font-size: 12px;
  color: #9FE1CB;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.mhr-sc-features li::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  min-width: 5px;
  border-radius: 50%;
  background: var(--teal);
  margin-top: 4px;
  flex-shrink: 0;
}

.mhr-change-link {
  font-size: 12px;
  color: var(--blue);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: 'DM Sans', sans-serif;
  text-decoration: underline;
  text-align: left;
}

.mhr-step2-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--navy-light);
}

/* ── Right panel ── */
.mhr-form-right {
  background: #fff;
  padding: 2.5rem 2.5rem 3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.mhr-form-right h2 {
  font-family: 'Syne', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}

.mhr-form-sub {
  font-size: 13px;
  color: var(--gray-400);
  margin: 0;
  font-weight: 300;
}

/* ── Enquiry form fields ── */
.mhr-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.mhr-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.mhr-field label {
  font-size: 11px;
  font-weight: 500;
  color: var(--gray-800);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-family: 'Syne', sans-serif;
}

.mhr-field input,
.mhr-field select,
.mhr-field textarea {
  width: 100%;
  padding: 9px 12px;
  font-size: 13px;
  border: 1px solid var(--gray-100);
  border-radius: var(--radius-sm);
  color: var(--text);
  background: #fff;
  outline: none;
  font-family: 'DM Sans', sans-serif;
  transition: border-color 0.15s;
}

.mhr-field input:focus,
.mhr-field select:focus,
.mhr-field textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px var(--blue-pale);
}

.mhr-field textarea { resize: vertical; min-height: 80px; }

/* ── Notices ── */
.mhr-pay-notice {
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 12px;
  line-height: 1.6;
}

.mhr-notice-free    { background: var(--teal-pale);  color: var(--teal-dark); }
.mhr-notice-paid    { background: var(--blue-pale);  color: var(--blue-dark); }
.mhr-notice-contact { background: var(--pink-pale);  color: var(--pink-dark); }

/* ── Submit ── */
.mhr-submit-btn {
  width: 100%;
  padding: 11px;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  transition: background 0.15s;
}

.mhr-submit-btn:hover { background: #0e2848; }

.mhr-login-row {
  text-align: center;
  font-size: 12px;
  color: var(--gray-400);
  margin-top: 4px;
}

.mhr-login-row a {
  color: var(--blue-dark);
  text-decoration: none;
}

/* ── Back button ── */
.mhr-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0 0 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--gray-400);
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
}
.mhr-back-btn:hover { color: var(--text); }
.mhr-back-btn svg { width: 14px; height: 14px; }

/* ══════════════════════════════════════════
   UM FORM OVERRIDES
══════════════════════════════════════════ */
.mhr-form-right .um-field-label label {
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--gray-800) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-family: 'Syne', sans-serif !important;
}

.mhr-form-right .um-field input,
.mhr-form-right .um-field select {
  border: 1px solid var(--gray-100) !important;
  border-radius: var(--radius-sm) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  padding: 9px 12px !important;
  height: auto !important;
}

.mhr-form-right .um-field input:focus,
.mhr-form-right .um-field select:focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px var(--blue-pale) !important;
}

.mhr-form-right .um-col-12 { padding: 0 !important; }

.mhr-form-right .um-button,
.mhr-form-right input[type="submit"] {
  background: var(--navy) !important;
  border: none !important;
  border-radius: var(--radius-md) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 11px !important;
  height: auto !important;
  letter-spacing: 0 !important;
}

/* Force UM form visible regardless of UM's own show/hide logic */
#mhr-sea-form .um-form,
#mhr-sea-form .um,
#mhr-sea-form .um-field {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media (max-width: 900px) {
  .mhr-header { padding: 1.5rem; }
  .mhr-grid   { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); padding: 0 1.5rem 1.25rem; }
  .mhr-section-label { padding: 1.25rem 1.5rem 0.5rem; }
  .mhr-footer { padding: 1rem 1.5rem 1.5rem; }
  .mhr-form-wrap { grid-template-columns: 1fr; }
  .mhr-form-left { padding: 1.5rem; }
  .mhr-form-right { padding: 1.5rem; }
}

@media (max-width: 600px) {
  .mhr-header h1 { font-size: 22px; }
  .mhr-grid { grid-template-columns: 1fr 1fr; padding: 0 1rem 1rem; }
  .mhr-section-label { padding: 1rem 1rem 0.5rem; }
  .mhr-footer { padding: 1rem; flex-direction: column; align-items: flex-start; }
  .mhr-field-row { grid-template-columns: 1fr; }
}