/* =========================================================
   HP Patient Portal — Design System CSS
   Implements "The Clinical Sanctuary" design from DESIGN.md
   Colors: Material You / Teal palette
   Fonts: Manrope (headlines) + Inter (body)
   Rules: no 1px borders, ambient shadows, glassmorphism
   ========================================================= */

/* ── Design tokens ───────────────────────────────────────── */
:root {
  --hp-primary:                #006876;
  --hp-primary-container:      #29b6cc;
  --hp-on-primary:             #ffffff;
  --hp-on-primary-container:   #00434c;
  --hp-primary-fixed:          #a1efff;
  --hp-primary-fixed-dim:      #58d7ed;

  --hp-secondary:              #3b656d;
  --hp-secondary-container:    #beeaf4;

  --hp-surface:                #f5fafc;
  --hp-surface-dim:            #d5dbdc;
  --hp-surface-bright:         #f5fafc;
  --hp-surface-container-low:  #eff4f6;
  --hp-surface-container:      #e9eff0;
  --hp-surface-container-high: #e4e9ea;
  --hp-surface-container-highest: #dee3e5;
  --hp-surface-container-lowest:  #ffffff;

  --hp-on-surface:             #171d1e;
  --hp-on-surface-variant:     #3d494c;
  --hp-outline:                #6d797c;
  --hp-outline-variant:        #bcc9cc;

  --hp-error:                  #ba1a1a;
  --hp-error-container:        #ffdad6;
  --hp-on-error:               #ffffff;

  --hp-success:                #1a6b3a;
  --hp-success-container:      #d6f5e3;
  --hp-warning:                #7a4f00;
  --hp-warning-container:      #ffedc2;

  --hp-shadow:                 0px 12px 32px rgba(23, 29, 30, 0.06);
  --hp-shadow-md:              0px 8px 24px  rgba(23, 29, 30, 0.08);
  --hp-shadow-lg:              0px 16px 48px rgba(23, 29, 30, 0.10);

  --hp-radius:   1rem;
  --hp-radius-sm: 0.75rem;
  --hp-radius-full: 9999px;
}

/* ── Reset / base ────────────────────────────────────────── */
.hp-portal-root *,
.hp-portal-root *::before,
.hp-portal-root *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.hp-portal-root {
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: var(--hp-on-surface);
  background: var(--hp-surface);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

.hp-portal-root h1,
.hp-portal-root h2,
.hp-portal-root h3,
.hp-portal-root h4 {
  font-family: 'Manrope', sans-serif;
}

/* ── Ambient background ──────────────────────────────────── */
.hp-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hp-ambient__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
}

.hp-ambient__blob--1 {
  top: -10%;
  left: -10%;
  width: 50%;
  aspect-ratio: 1;
  background: rgba(190, 234, 244, 0.20);
}

.hp-ambient__blob--2 {
  bottom: -10%;
  right: -10%;
  width: 40%;
  aspect-ratio: 1;
  background: rgba(41, 182, 204, 0.10);
}

/* ── LOGIN SHELL ─────────────────────────────────────────── */
.hp-login-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  border-radius: var(--hp-radius);
  overflow: hidden;
  box-shadow: var(--hp-shadow-lg);
}

@media (min-width: 1024px) {
  .hp-login-shell {
    grid-template-columns: 1fr 1fr;
    min-height: auto;
    margin: 2rem auto;
  }
}

/* ── Branding column ─────────────────────────────────────── */
.hp-login-brand {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  padding: 3rem;
  background: var(--hp-surface-container-low);
  position: relative;
  overflow: hidden;
}

@media (min-width: 1024px) {
  .hp-login-brand {
    display: flex;
  }
}

.hp-login-brand__inner {
  position: relative;
  z-index: 1;
}

.hp-brand-headline {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--hp-on-surface);
  margin-bottom: 1.5rem;
  margin-top: 4rem;
}

.hp-brand-headline__accent {
  color: var(--hp-primary);
}

.hp-brand-desc {
  font-size: 1.125rem;
  color: var(--hp-on-surface-variant);
  max-width: 28rem;
  line-height: 1.7;
}

/* Decorative image placeholder — replace with real image via CSS or inline style */
.hp-brand-deco {
  position: absolute;
  bottom: -2.5rem;
  right: -5rem;
  width: 120%;
  height: 55%;
  z-index: 0;
  transform: rotate(3deg);
  background:
    url('https://images.unsplash.com/photo-1598300042247-d088f8ab3a91?w=800&q=80')
    center/cover no-repeat;
  border-radius: var(--hp-radius);
  opacity: 0.75;
}

/* ── Security badge ──────────────────────────────────────── */
.hp-security-badge {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--hp-surface-container-lowest);
  border-radius: var(--hp-radius-sm);
  box-shadow: var(--hp-shadow);
  max-width: 20rem;
}

.hp-security-badge__icon {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--hp-primary-fixed);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hp-primary);
}

.hp-security-badge__title {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--hp-on-surface);
}

.hp-security-badge__desc {
  font-size: 0.75rem;
  color: var(--hp-on-surface-variant);
  margin-top: 0.125rem;
}

/* ── Form column ─────────────────────────────────────────── */
.hp-login-form-col {
  background: var(--hp-surface-container-lowest);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (min-width: 768px) {
  .hp-login-form-col {
    padding: 4rem;
  }
}

.hp-login-form-wrap {
  max-width: 28rem;
  margin: 0 auto;
  width: 100%;
}

/* ── Logo ────────────────────────────────────────────────── */
.hp-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 4rem;
}

.hp-logo--mobile {
  justify-content: center;
  margin-bottom: 2rem;
}

@media (min-width: 1024px) {
  .hp-logo--mobile {
    display: none;
  }
}

.hp-logo__img {
  height: 2.5rem;
  width: auto;
}

.hp-logo__name {
  font-family: 'Manrope', sans-serif;
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  color: var(--hp-primary);
}

/* ── Login header ────────────────────────────────────────── */
.hp-login-header {
  margin-bottom: 2.5rem;
}

.hp-login-header__title {
  font-size: 1.875rem;
  font-weight: 700;
  color: var(--hp-on-surface);
  margin-bottom: 0.5rem;
}

.hp-login-header__sub {
  color: var(--hp-on-surface-variant);
  line-height: 1.6;
}

/* ── Alerts ──────────────────────────────────────────────── */
.hp-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border-radius: var(--hp-radius-sm);
  font-size: 0.875rem;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.hp-alert .material-symbols-outlined {
  font-size: 1.25rem;
  flex-shrink: 0;
  margin-top: 0.05rem;
}

.hp-alert--error {
  background: var(--hp-error-container);
  color: var(--hp-error);
}

.hp-alert--success {
  background: var(--hp-success-container);
  color: var(--hp-success);
}

.hp-alert--warning {
  background: var(--hp-warning-container);
  color: var(--hp-warning);
}

.hp-alert--full {
  margin-bottom: 2rem;
}

/* ── Form ────────────────────────────────────────────────── */
.hp-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.hp-form--inline {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* ── Field ───────────────────────────────────────────────── */
.hp-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.hp-field__label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--hp-on-surface);
}

.hp-field__label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hp-field__forgot {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--hp-primary);
  text-decoration: none;
  transition: color 0.2s;
}

.hp-field__forgot:hover {
  color: var(--hp-primary-container);
}

.hp-field__input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.hp-field__icon {
  position: absolute;
  left: 0.875rem;
  font-size: 1.25rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--hp-outline);
  pointer-events: none;
  user-select: none;
}

.hp-field__input {
  width: 100%;
  padding: 1rem 1rem 1rem 3.25rem !important;
  background: var(--hp-surface-container-low);
  border: none;
  outline: none;
  border-radius: var(--hp-radius-sm);
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: var(--hp-on-surface);
  transition: box-shadow 0.2s;
  -webkit-appearance: none;
}

.hp-field__input::placeholder {
  color: rgba(109, 121, 124, 0.6);
}

.hp-field__input:focus {
  box-shadow: 0 0 0 3px rgba(0, 104, 118, 0.18);
}

.hp-field__toggle-pwd {
  position: absolute;
  right: 1rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--hp-outline);
  display: flex;
  align-items: center;
  padding: 0;
  line-height: 1;
  transition: color 0.2s;
}

.hp-field__toggle-pwd:hover {
  color: var(--hp-primary);
}

/* ── Checkbox ────────────────────────────────────────────── */
.hp-check {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hp-check__input {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 0.25rem;
  background: var(--hp-surface-container-low);
  border: none;
  accent-color: var(--hp-primary);
  cursor: pointer;
  flex-shrink: 0;
}

.hp-check__label {
  font-size: 0.875rem;
  color: var(--hp-on-surface-variant);
  cursor: pointer;
  line-height: 1.4;
}

/* ── Buttons ─────────────────────────────────────────────── */
.hp-submit {
  padding-top: 1rem;
}

.hp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  border: none;
  transition: box-shadow 0.2s, transform 0.1s, filter 0.2s;
  text-decoration: none;
  white-space: nowrap;
}

.hp-btn--primary {
  width: 100%;
  padding: 1rem 2rem;
  border-radius: var(--hp-radius-full);
  background: linear-gradient(90deg, var(--hp-primary) 0%, var(--hp-primary-container) 100%);
  color: var(--hp-on-primary);
  box-shadow: 0 8px 24px rgba(0, 104, 118, 0.20);
}

.hp-btn--primary:hover {
  box-shadow: 0 12px 32px rgba(0, 104, 118, 0.35);
  filter: saturate(1.2);
}

.hp-btn--primary:active {
  transform: scale(0.98);
}

.hp-btn--sm {
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  border-radius: var(--hp-radius-full);
}

.hp-btn--ghost {
  background: transparent;
  color: var(--hp-on-surface-variant);
  padding: 0.5rem 1rem;
}

.hp-btn--ghost:hover {
  background: var(--hp-surface-container);
  color: var(--hp-on-surface);
}

.hp-btn__arrow {
  transition: transform 0.2s;
}

.hp-btn--primary:hover .hp-btn__arrow {
  transform: translateX(4px);
}

/* ── Login footer ────────────────────────────────────────── */
.hp-login-footer {
  margin-top: 3rem;
  padding-top: 2rem;
  /* Separator via background shift, no border */
  background: linear-gradient(to bottom, var(--hp-surface-container) 1px, transparent 1px);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  text-align: center;
}

.hp-login-footer p {
  font-size: 0.875rem;
  color: var(--hp-on-surface-variant);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

.hp-login-footer strong {
  color: var(--hp-on-surface);
}

.hp-login-footer__links {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.hp-login-footer__register-link {
  font-weight: 700;
  color: var(--hp-primary);
  text-decoration: none;
  transition: color 0.2s;
}

.hp-login-footer__register-link:hover {
  color: var(--hp-primary-container);
  text-decoration: underline;
}

.hp-footer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--hp-outline);
  text-decoration: none;
  transition: color 0.2s;
}

.hp-footer-link .material-symbols-outlined {
  font-size: 1rem;
}

.hp-footer-link:hover {
  color: var(--hp-primary);
}

/* ── Editorial BG text ───────────────────────────────────── */
.hp-bg-text {
  position: fixed;
  bottom: 2.5rem;
  left: 2.5rem;
  display: none;
  pointer-events: none;
  user-select: none;
  font-family: 'Manrope', sans-serif;
  font-weight: 900;
  font-size: 12rem;
  line-height: 1;
  color: var(--hp-on-surface);
  opacity: 0.03;
}

@media (min-width: 1280px) {
  .hp-bg-text {
    display: block;
  }
}

/* ============================================================
   DASHBOARD
   ============================================================ */
.hp-portal-root--dashboard {
  background: var(--hp-surface-container-low);
}

.hp-dashboard {
  position: relative;
  z-index: 1;
  max-width: 64rem;
  margin: 0 auto;
  padding: 0 1rem 4rem;
}

/* ── Top bar ─────────────────────────────────────────────── */
.hp-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 0;
  margin-bottom: 2rem;
}

.hp-topbar__right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.hp-topbar__patient-id {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--hp-on-surface-variant);
  background: var(--hp-surface-container);
  padding: 0.375rem 0.75rem;
  border-radius: var(--hp-radius-full);
}

.hp-topbar__logout-form {
  margin: 0;
}

/* ── Cards ───────────────────────────────────────────────── */
.hp-card {
  background: var(--hp-surface-container-lowest);
  border-radius: var(--hp-radius);
  padding: 1.5rem;
  box-shadow: var(--hp-shadow);
  margin-bottom: 1.5rem;
}

/* ── Welcome card ────────────────────────────────────────── */
.hp-welcome-card {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.hp-welcome-card__avatar {
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--hp-primary) 0%, var(--hp-primary-container) 100%);
  color: var(--hp-on-primary);
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hp-welcome-card__info {
  flex: 1;
}

.hp-welcome-card__name {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--hp-on-surface);
  margin-bottom: 0.5rem;
}

.hp-welcome-card__meta {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
  color: var(--hp-on-surface-variant);
  margin-bottom: 0.25rem;
}

.hp-welcome-card__meta .material-symbols-outlined {
  font-size: 1rem;
  color: var(--hp-primary);
}

/* ── Status badge ────────────────────────────────────────── */
.hp-status-badge {
  padding: 0.375rem 1rem;
  border-radius: var(--hp-radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hp-status-badge--active {
  background: var(--hp-success-container);
  color: var(--hp-success);
}

.hp-status-badge--inactive,
.hp-status-badge--suspended {
  background: var(--hp-surface-container-high);
  color: var(--hp-on-surface-variant);
}

/* ── Section title ───────────────────────────────────────── */
.hp-section-title {
  font-family: 'Manrope', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--hp-on-surface);
  margin-bottom: 1rem;
  margin-top: 0.5rem;
  letter-spacing: -0.01em;
}

/* ── Info grid ───────────────────────────────────────────── */
.hp-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.hp-info-card {
  background: var(--hp-surface-container-lowest);
  border-radius: var(--hp-radius-sm);
  padding: 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  box-shadow: var(--hp-shadow);
}

.hp-info-card__icon {
  font-size: 1.5rem;
  color: var(--hp-primary);
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.hp-info-card__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--hp-on-surface-variant);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.25rem;
}

.hp-info-card__value {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--hp-on-surface);
  word-break: break-word;
}

/* ── Password card ───────────────────────────────────────── */
.hp-pwd-card__desc {
  font-size: 0.875rem;
  color: var(--hp-on-surface-variant);
  margin-bottom: 1.5rem;
  line-height: 1.6;
}

/* ── Placeholder card ────────────────────────────────────── */
.hp-placeholder-card {
  text-align: center;
  padding: 3rem 2rem;
  background: var(--hp-surface-container);
}

.hp-placeholder-card__icon {
  font-size: 3rem;
  color: var(--hp-primary-container);
  display: block;
  margin-bottom: 1rem;
}

.hp-placeholder-card p {
  color: var(--hp-on-surface-variant);
  font-size: 0.9375rem;
}

.hp-placeholder-card__sub {
  font-size: 0.8125rem !important;
  margin-top: 0.5rem;
  color: var(--hp-outline) !important;
}

/* ── Password strength bar ───────────────────────────────── */
.hp-pwd-strength {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: .5rem;
}

.hp-pwd-strength__track {
  flex: 1;
  min-width: 0;
  height: 4px;
  border-radius: var(--hp-radius-full);
  background: var(--hp-surface-container-high, #e4e9ea);
  overflow: hidden;
}

.hp-pwd-strength__bar {
  height: 100%;
  width: 0;
  border-radius: var(--hp-radius-full);
  background: var(--hp-primary);
  transition: width .3s, background .3s;
}

.hp-pwd-strength__label {
  flex-shrink: 0;
  min-width: 5.5rem;
  font-size: .75rem;
  color: var(--hp-on-surface-variant);
  white-space: nowrap;
}

/* ── Material Symbols ────────────────────────────────────── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  line-height: 1;
}

/* ============================================================
   REGISTRATION PAGE
   ============================================================ */

.hp-reg-root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Shell (two columns) ─────────────────────────────────── */
.hp-reg-shell {
  flex: 1;
  display: flex;
  min-height: 100vh;
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  border-radius: var(--hp-radius);
  overflow: hidden;
  box-shadow: var(--hp-shadow-lg);
}

@media (min-width: 1024px) {
  .hp-reg-shell {
    min-height: auto;
    margin: 2rem auto;
  }
}

/* ── Left: Editorial branding ────────────────────────────── */
.hp-reg-brand {
  display: none;
  position: relative;
  overflow: hidden;
  padding: 4rem;
  flex-direction: column;
  justify-content: space-between;
  background: var(--hp-surface-container);
}

@media (min-width: 1024px) {
  .hp-reg-brand {
    display: flex;
    width: 50%;
    flex-shrink: 0;
  }
}

.hp-reg-brand__inner {
  position: relative;
  z-index: 1;
}

.hp-reg-headline {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--hp-on-surface);
  margin-top: 4rem;
  margin-bottom: 2rem;
  max-width: 26rem;
}

.hp-reg-headline__accent {
  color: var(--hp-primary);
  font-style: italic;
}

.hp-reg-desc {
  font-size: 1.125rem;
  color: var(--hp-on-surface-variant);
  max-width: 22rem;
  line-height: 1.7;
}

/* Background image via pseudo-element */
.hp-reg-brand__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(to right, var(--hp-surface-container) 20%, rgba(233, 239, 240, 0.4) 60%, transparent 100%),
    url('https://images.unsplash.com/photo-1571019613454-1cb2f99b2d8b?w=900&q=80') right top / cover no-repeat;
  opacity: 0.4;
  mix-blend-mode: multiply;
}

/* ── Trust badge (glassmorphism) ─────────────────────────── */
.hp-reg-trust {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 2rem;
  background: rgba(255,255,255, 0.80);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: var(--hp-radius);
  box-shadow: var(--hp-shadow);
  max-width: 22rem;
}

.hp-reg-trust__icon {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--hp-secondary-container);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hp-primary);
}

.hp-reg-trust__title {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--hp-on-surface);
  margin-bottom: 0.125rem;
}

.hp-reg-trust__sub {
  font-size: 0.75rem;
  color: var(--hp-on-surface-variant);
  margin-bottom: 0.75rem;
}

.hp-reg-trust__body {
  font-size: 0.8125rem;
  color: var(--hp-on-surface-variant);
  line-height: 1.6;
}

/* ── Right: Form column ──────────────────────────────────── */
.hp-reg-form-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: var(--hp-surface-container-lowest);
}

@media (min-width: 768px) {
  .hp-reg-form-col {
    padding: 3rem 4rem;
  }
}

@media (min-width: 1024px) {
  .hp-reg-form-col {
    padding: 4rem;
  }
}

.hp-reg-form-wrap {
  width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* ── Form header ─────────────────────────────────────────── */
.hp-reg-header__title {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--hp-on-surface);
  margin-bottom: 0.5rem;
}

.hp-reg-header__sub {
  color: var(--hp-on-surface-variant);
  font-size: 1rem;
  line-height: 1.6;
}

/* ── Registration form ───────────────────────────────────── */
.hp-reg-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.hp-reg-name-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* Labels: uppercase compact style (matches design) */
.hp-field__label--upper {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--hp-on-surface-variant);
}

/* Inputs: no left icon, rounded-xl (0.75rem) */
.hp-field__input--reg {
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
  background: var(--hp-surface-container-low);
}

.hp-field__input--no-icon {
  padding-left: 1.25rem !important;
  padding-right: 3rem;
}

.hp-field__hint {
  font-size: 0.75rem;
  color: var(--hp-outline);
  margin-top: 0.25rem;
}

/* Full-width primary button for register */
.hp-btn--reg {
  width: 100%;
  padding: 1rem;
  font-size: 1rem;
}

/* ── Divider ─────────────────────────────────────────────── */
.hp-reg-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.hp-reg-divider__line {
  flex: 1;
  height: 1px;
  background: var(--hp-surface-container-highest);
}

.hp-reg-divider__text {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--hp-outline-variant);
  letter-spacing: 0.1em;
  white-space: nowrap;
}

/* ── Social buttons ──────────────────────────────────────── */
.hp-reg-social {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.hp-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 0.75rem;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: background 0.2s, opacity 0.2s;
}

.hp-social-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.hp-social-btn--google {
  background: var(--hp-surface-container-lowest);
  color: var(--hp-on-surface);
  /* Subtle border via box-shadow (not a 1px solid border) */
  box-shadow: 0 0 0 1.5px var(--hp-surface-container-highest);
  border: none;
}

.hp-social-btn--google:hover:not(:disabled) {
  background: var(--hp-surface-container-low);
}

.hp-social-btn--apple {
  background: var(--hp-on-surface);
  color: var(--hp-surface);
  border: none;
}

.hp-social-btn--apple:hover:not(:disabled) {
  opacity: 0.88;
}

.hp-social-btn__icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

/* ── Login redirect ──────────────────────────────────────── */
.hp-reg-login-link {
  text-align: center;
  font-size: 0.875rem;
  color: var(--hp-on-surface-variant);
}

.hp-reg-login-link__a {
  color: var(--hp-primary);
  font-weight: 700;
  text-decoration: none;
  margin-left: 0.25rem;
}

.hp-reg-login-link__a:hover {
  text-decoration: underline;
}

/* ── Trust badges (grayscale icons) ─────────────────────── */
.hp-reg-badges {
  display: flex;
  justify-content: center;
  gap: 2rem;
  opacity: 0.35;
  filter: grayscale(1);
}

.hp-reg-badges .material-symbols-outlined {
  font-size: 2.5rem;
}

/* ── Success state ───────────────────────────────────────── */
.hp-reg-success {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.hp-reg-success__icon {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: var(--hp-success-container);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hp-reg-success__icon .material-symbols-outlined {
  font-size: 2.5rem;
  color: var(--hp-success);
}

.hp-reg-success__title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--hp-on-surface);
}

.hp-reg-success__desc {
  font-size: 1rem;
  color: var(--hp-on-surface-variant);
  max-width: 24rem;
  line-height: 1.7;
}

/* ── Alert list ──────────────────────────────────────────── */
.hp-alert__list {
  margin: 0;
  padding-left: 1.25rem;
  list-style: disc;
}

.hp-alert__list li + li {
  margin-top: 0.25rem;
}

/* ── Footer ──────────────────────────────────────────────── */
.hp-reg-footer {
  padding: 2rem 3rem;
  background: var(--hp-surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  font-size: 0.75rem;
  color: var(--hp-outline);
}

@media (min-width: 768px) {
  .hp-reg-footer {
    flex-direction: row;
    justify-content: space-between;
  }
}

.hp-reg-footer__links {
  display: flex;
  gap: 1.5rem;
}

.hp-reg-footer__links a {
  color: var(--hp-outline);
  text-decoration: none;
  transition: color 0.2s;
}

.hp-reg-footer__links a:hover {
  color: var(--hp-primary);
}

/* ── Consents block ──────────────────────────────────────── */
.hp-reg-consents {
  display: flex;
  flex-direction: column;
  gap: .625rem;
  margin-bottom: 1.25rem;
}

.hp-reg-consent-label {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  cursor: pointer;
  font-size: .8125rem;
  color: var(--hp-on-surface-variant);
  line-height: 1.5;
}

.hp-reg-consent-chk {
  flex-shrink: 0;
  margin-top: .2rem;
  width: 1rem;
  height: 1rem;
  accent-color: var(--hp-primary);
  cursor: pointer;
}

.hp-reg-consent-text a {
  color: var(--hp-primary);
  text-decoration: underline;
}