/* iTULOD — registration page styles (extracted from register.html). */
      /* ============================================================
   REGISTER PAGE — Premium Multi-Step Wizard Redesign
   ============================================================ */

      *,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      body {
        font-family: "Inter", sans-serif;
        background: #faf6f5;
        color: #2b3440;
        min-height: 100vh;
        -webkit-font-smoothing: antialiased;
      }

      /* ── Shared Layout ─────────────────────────────────────── */
      .reg-page {
        min-height: 100vh;
        display: grid;
        grid-template-columns: 45% 55%;
      }

      /* ── Left Branding Panel (same as login) ──────────────── */
      .brand-panel {
        background: linear-gradient(
          145deg,
          #0d47a1 0%,
          #2196f3 40%,
          #42a5f5 75%,
          #90caf9 100%
        );
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 44px 48px 44px;
        overflow: hidden;
        min-height: 100vh;
      }
      .brand-panel::before {
        content: "";
        position: absolute;
        top: -120px;
        right: -120px;
        width: 400px;
        height: 400px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.06);
        pointer-events: none;
      }
      .brand-panel::after {
        content: "";
        position: absolute;
        bottom: -80px;
        left: -80px;
        width: 350px;
        height: 350px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.05);
        pointer-events: none;
      }
      .orb {
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.08);
        animation: floatOrb 8s ease-in-out infinite;
        pointer-events: none;
      }
      .orb-1 {
        width: 180px;
        height: 180px;
        top: 30%;
        left: -40px;
        animation-delay: 0s;
      }
      .orb-2 {
        width: 100px;
        height: 100px;
        top: 55%;
        right: 20px;
        animation-delay: 2s;
      }
      .orb-3 {
        width: 60px;
        height: 60px;
        top: 15%;
        right: 60px;
        animation-delay: 4s;
      }
      @keyframes floatOrb {
        0%,
        100% {
          transform: translateY(0) scale(1);
        }
        50% {
          transform: translateY(-20px) scale(1.05);
        }
      }

      .bp-logo {
        display: flex;
        align-items: center;
        gap: 12px;
        text-decoration: none;
        z-index: 2;
        position: relative;
      }
      .bp-logo img {
        width: 52px;
        height: 52px;
        object-fit: contain;
        filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.25));
      }
      .bp-logo-text {
        font-family: "Poppins", sans-serif;
        font-weight: 800;
        font-size: 1.5rem;
        color: #fff;
        letter-spacing: -0.5px;
      }
      .bp-logo-text span {
        color: #b06b79;
      }

      .bp-body {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        z-index: 2;
        position: relative;
        margin: 32px 0;
      }

      .bp-tagline {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.25);
        color: rgba(255, 255, 255, 0.92);
        font-size: 0.72rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        padding: 6px 14px;
        border-radius: 999px;
        margin-bottom: 22px;
        width: fit-content;
      }
      .bp-tagline i {
        color: #b06b79;
      }

      .bp-headline {
        font-family: "Poppins", sans-serif;
        font-weight: 800;
        font-size: clamp(1.4rem, 2.2vw, 1.85rem);
        color: #fff;
        line-height: 1.2;
        margin-bottom: 16px;
        max-width: 22ch;
      }
      .bp-subtitle {
        color: rgba(255, 255, 255, 0.8);
        font-size: 0.95rem;
        line-height: 1.7;
        max-width: 36ch;
        margin-bottom: 28px;
      }

      /* Steps preview on left */
      .bp-steps-preview {
        display: flex;
        flex-direction: column;
        gap: 14px;
        margin-bottom: 32px;
      }
      .bp-step-row {
        display: flex;
        align-items: center;
        gap: 14px;
      }
      .bp-step-dot {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.18);
        border: 1.5px solid rgba(255, 255, 255, 0.35);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 0.85rem;
        font-weight: 700;
        flex-shrink: 0;
      }
      .bp-step-dot.active {
        background: #b06b79;
        border-color: #b06b79;
        box-shadow: 0 0 0 4px rgba(176, 107, 121, 0.25);
      }
      .bp-step-dot.done {
        background: #1a9d63;
        border-color: #1a9d63;
      }
      .bp-step-info {
        color: rgba(255, 255, 255, 0.85);
        font-size: 0.88rem;
      }
      .bp-step-info strong {
        display: block;
        color: #fff;
        font-weight: 600;
        font-size: 0.9rem;
      }

      .bp-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        z-index: 2;
        position: relative;
      }
      .bp-stat-card {
        background: rgba(255, 255, 255, 0.12);
        backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 18px;
        padding: 18px 20px;
        transition:
          transform 0.25s ease,
          background 0.25s;
      }
      .bp-stat-card:hover {
        transform: translateY(-3px);
        background: rgba(255, 255, 255, 0.18);
      }
      .bp-stat-icon {
        font-size: 1.4rem;
        margin-bottom: 8px;
        display: block;
      }
      .bp-stat-value {
        font-family: "Poppins", sans-serif;
        font-weight: 800;
        font-size: 1.4rem;
        color: #fff;
        display: block;
        line-height: 1;
        margin-bottom: 4px;
      }
      .bp-stat-label {
        color: rgba(255, 255, 255, 0.75);
        font-size: 0.78rem;
        font-weight: 500;
      }

      .back-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: rgba(255, 255, 255, 0.75);
        font-size: 0.85rem;
        font-weight: 500;
        text-decoration: none;
        transition:
          color 0.2s,
          gap 0.2s;
        z-index: 2;
        position: relative;
      }
      .back-link:hover {
        color: #fff;
        gap: 10px;
      }

      /* ── Right Form Panel ─────────────────────────────────── */
      .form-panel {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        padding: 40px 48px;
        background: #faf6f5;
        overflow-y: auto;
        min-height: 100vh;
      }

      .reg-card {
        width: 100%;
        max-width: 540px;
        background: #ffffff;
        border-radius: 24px;
        box-shadow:
          0 4px 6px rgba(43, 52, 64, 0.04),
          0 20px 60px rgba(43, 52, 64, 0.1),
          0 0 0 1px rgba(43, 52, 64, 0.04);
        padding: 44px 44px;
        margin: auto;
        animation: cardEntry 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
      }
      @keyframes cardEntry {
        from {
          opacity: 0;
          transform: translateY(20px) scale(0.97);
        }
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      /* Mobile logo row */
      .card-logo-row {
        display: none;
        align-items: center;
        gap: 10px;
        margin-bottom: 28px;
        text-decoration: none;
      }
      .card-logo-row img {
        width: 38px;
        height: 38px;
        object-fit: contain;
      }
      .card-logo-row span {
        font-family: "Poppins", sans-serif;
        font-weight: 800;
        font-size: 1.2rem;
        color: #2b3440;
      }
      .card-logo-row span em {
        color: #b06b79;
        font-style: normal;
      }

      /* ── Wizard Steps Indicator ───────────────────────────── */
      .step-indicator {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 36px;
        gap: 0;
        /* Accent tracks the chosen role: blue for customer, rose for rider. */
        --step-accent: #2196f3;
        --step-accent-glow: rgba(33, 150, 243, 0.25);
      }
      .step-indicator.role-rider {
        --step-accent: #b06b79;
        --step-accent-glow: rgba(176, 107, 121, 0.25);
      }
      .step-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        flex: 1;
      }
      .step-item:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 18px;
        left: 50%;
        width: 100%;
        height: 2px;
        background: #ecdedd;
        z-index: 0;
        transition: background 0.4s;
      }
      .step-item.completed:not(:last-child)::after {
        background: #1a9d63;
      }
      .step-item.active:not(:last-child)::after {
        background: linear-gradient(90deg, var(--step-accent), #ecdedd);
      }

      .step-circle {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 2px solid #ecdedd;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.82rem;
        font-weight: 700;
        color: #9aa6b2;
        z-index: 1;
        position: relative;
        transition: all 0.3s;
      }
      .step-item.active .step-circle {
        border-color: var(--step-accent);
        background: var(--step-accent);
        color: #fff;
        box-shadow: 0 0 0 4px var(--step-accent-glow);
      }
      .step-item.completed .step-circle {
        border-color: #1a9d63;
        background: #1a9d63;
        color: #fff;
      }
      .step-label {
        font-size: 0.68rem;
        font-weight: 600;
        color: #9aa6b2;
        margin-top: 6px;
        text-align: center;
        transition: color 0.3s;
        letter-spacing: 0.02em;
        text-transform: uppercase;
      }
      .step-item.active .step-label {
        color: var(--step-accent);
      }
      .step-item.completed .step-label {
        color: #1a9d63;
      }

      /* ── Wizard Panels ────────────────────────────────────── */
      .wizard-panel {
        display: none;
        animation: fadeSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
      }
      .wizard-panel.active {
        display: block;
      }
      @keyframes fadeSlideIn {
        from {
          opacity: 0;
          transform: translateX(16px);
        }
        to {
          opacity: 1;
          transform: translateX(0);
        }
      }

      .panel-title {
        font-family: "Poppins", sans-serif;
        font-weight: 700;
        font-size: 1.35rem;
        color: #2b3440;
        margin-bottom: 6px;
      }
      .panel-sub {
        color: #7b8794;
        font-size: 0.88rem;
        margin-bottom: 28px;
        line-height: 1.6;
      }

      /* ── User Type Selection Cards ────────────────────────── */
      .role-cards {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        margin-bottom: 28px;
      }
      .role-card {
        border: 2px solid #ecdedd;
        border-radius: 20px;
        padding: 28px 20px;
        text-align: center;
        cursor: pointer;
        transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
        background: #fffafa;
        position: relative;
        overflow: hidden;
      }
      .role-card::before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity 0.25s;
      }
      .role-card.customer::before {
        background: linear-gradient(
          135deg,
          rgba(33, 150, 243, 0.06) 0%,
          rgba(33, 150, 243, 0.02) 100%
        );
      }
      .role-card.rider::before {
        background: linear-gradient(
          135deg,
          rgba(176, 107, 121, 0.08) 0%,
          rgba(176, 107, 121, 0.02) 100%
        );
      }
      .role-card.selected {
        border-color: #2196f3;
        box-shadow:
          0 0 0 4px rgba(33, 150, 243, 0.12),
          0 8px 24px rgba(33, 150, 243, 0.15);
        transform: translateY(-4px);
      }
      .role-card.selected.rider {
        border-color: #b06b79;
        box-shadow:
          0 0 0 4px rgba(176, 107, 121, 0.12),
          0 8px 24px rgba(176, 107, 121, 0.15);
      }
      .role-card.selected::before {
        opacity: 1;
      }
      .role-card:hover:not(.selected) {
        border-color: #90caf9;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(33, 150, 243, 0.08);
      }
      .role-card-icon {
        width: 64px;
        height: 64px;
        border-radius: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.6rem;
        margin: 0 auto 14px;
        transition: all 0.25s;
      }
      .role-card.customer .role-card-icon {
        background: #e3f2fd;
        color: #2196f3;
      }
      .role-card.rider .role-card-icon {
        background: #faf6f5;
        color: #b06b79;
      }
      .role-card.selected.customer .role-card-icon {
        background: #2196f3;
        color: #fff;
        box-shadow: 0 8px 16px rgba(33, 150, 243, 0.35);
      }
      .role-card.selected.rider .role-card-icon {
        background: #b06b79;
        color: #fff;
        box-shadow: 0 8px 16px rgba(176, 107, 121, 0.35);
      }
      .role-card-title {
        font-family: "Poppins", sans-serif;
        font-weight: 700;
        font-size: 1rem;
        color: #2b3440;
        margin-bottom: 6px;
      }
      .role-card-desc {
        font-size: 0.8rem;
        color: #7b8794;
        line-height: 1.5;
      }
      .role-card .selected-badge {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #2196f3;
        color: #fff;
        font-size: 0.65rem;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transform: scale(0);
        transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
      }
      .role-card.selected.rider .selected-badge {
        background: #b06b79;
      }
      .role-card.selected .selected-badge {
        opacity: 1;
        transform: scale(1);
      }

      /* ── Form fields ──────────────────────────────────────── */
      .input-group {
        margin-bottom: 18px;
      }
      .input-group label {
        display: block;
        font-size: 0.83rem;
        font-weight: 600;
        color: #3c4650;
        margin-bottom: 8px;
        letter-spacing: 0.01em;
      }
      .input-wrap {
        position: relative;
        display: flex;
        align-items: center;
      }
      .input-icon {
        position: absolute;
        left: 14px;
        color: #9aa6b2;
        font-size: 0.95rem;
        pointer-events: none;
        transition: color 0.2s;
        z-index: 1;
      }
      .input-wrap input,
      .input-wrap select {
        width: 100%;
        padding: 13px 14px 13px 42px;
        border: 1.5px solid #ecdedd;
        border-radius: 12px;
        font-family: "Inter", sans-serif;
        font-size: 0.95rem;
        color: #2b3440;
        background: #faf6f5;
        transition:
          border-color 0.2s,
          box-shadow 0.2s,
          background 0.2s;
        outline: none;
        appearance: none;
      }
      .input-wrap input:focus,
      .input-wrap select:focus {
        border-color: #2196f3;
        background: #fff;
        box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
      }
      .input-wrap:focus-within .input-icon {
        color: #2196f3;
      }
      .input-wrap input::placeholder {
        color: #d9c9c8;
      }
      .pw-toggle-btn {
        position: absolute;
        right: 12px;
        background: none;
        border: none;
        cursor: pointer;
        color: #9aa6b2;
        font-size: 0.9rem;
        padding: 4px;
        border-radius: 6px;
        transition:
          color 0.2s,
          background 0.2s;
      }
      .pw-toggle-btn:hover {
        color: #2196f3;
        background: #e3f2fd;
      }

      .field-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
      }

      /* Password strength meter */
      .pw-strength {
        margin-top: 8px;
      }
      .pw-strength-bar {
        display: flex;
        gap: 4px;
        margin-bottom: 5px;
      }
      .pw-strength-seg {
        flex: 1;
        height: 4px;
        border-radius: 999px;
        background: #ecdedd;
        transition: background 0.3s;
      }
      .pw-strength-seg.weak {
        background: #e0455f;
      }
      .pw-strength-seg.fair {
        background: #d98e04;
      }
      .pw-strength-seg.good {
        background: #42a5f5;
      }
      .pw-strength-seg.strong {
        background: #1a9d63;
      }
      .pw-strength-label {
        font-size: 0.75rem;
        color: #9aa6b2;
        font-weight: 500;
      }
      .pw-strength-label.weak {
        color: #e0455f;
      }
      .pw-strength-label.fair {
        color: #d98e04;
      }
      .pw-strength-label.good {
        color: #42a5f5;
      }
      .pw-strength-label.strong {
        color: #1a9d63;
      }

      /* Terms checkbox */
      .terms-row {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-bottom: 24px;
        padding: 14px 16px;
        background: #faf6f5;
        border-radius: 12px;
        border: 1.5px solid #ecdedd;
      }
      .terms-row input[type="checkbox"] {
        width: 18px;
        height: 18px;
        accent-color: #2196f3;
        margin-top: 1px;
        flex-shrink: 0;
        cursor: pointer;
      }
      .terms-row label {
        font-size: 0.85rem;
        color: #7b8794;
        line-height: 1.5;
        cursor: pointer;
      }
      .terms-row label a {
        color: #2196f3;
        font-weight: 600;
        text-decoration: none;
      }
      .terms-row label a:hover {
        text-decoration: underline;
      }

      /* ── Vehicle Cards Grid ───────────────────────────────── */
      .vehicle-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 10px;
        margin-bottom: 24px;
      }
      .vehicle-card {
        border: 2px solid #ecdedd;
        border-radius: 14px;
        padding: 14px 8px;
        text-align: center;
        cursor: pointer;
        transition: all 0.22s;
        background: #fffafa;
      }
      .vehicle-card:hover:not(.selected) {
        border-color: #90caf9;
        background: #e3f2fd;
        transform: translateY(-2px);
      }
      .vehicle-card.selected {
        border-color: #2196f3;
        background: #e3f2fd;
        box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.12);
        transform: translateY(-2px);
      }
      .vehicle-card .vc-icon {
        font-size: 1.5rem;
        margin-bottom: 6px;
        display: block;
        color: #9aa6b2;
        transition: color 0.22s;
      }
      .vehicle-card.selected .vc-icon {
        color: #2196f3;
      }
      .vehicle-card .vc-name {
        font-size: 0.72rem;
        font-weight: 600;
        color: #7b8794;
        transition: color 0.22s;
      }
      .vehicle-card.selected .vc-name {
        color: #2196f3;
      }

      /* ── Upload Zones ─────────────────────────────────────── */
      .upload-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        margin-bottom: 24px;
      }
      .upload-zone {
        border: 2px dashed #ecdedd;
        border-radius: 16px;
        padding: 22px 14px;
        text-align: center;
        cursor: pointer;
        transition: all 0.25s;
        position: relative;
        overflow: hidden;
        background: #fffafa;
        min-height: 130px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      .upload-zone input[type="file"] {
        position: absolute;
        inset: 0;
        opacity: 0.01;
        cursor: pointer;
        width: 100%;
        height: 100%;
        z-index: 5;
      }
      .upload-zone .upload-action {
        margin-top: 8px;
        padding: 7px 10px;
        border-radius: 999px;
        border: 1px solid #d3e9fb;
        background: #e3f2fd;
        color: #2196f3;
        font-size: 0.72rem;
        font-weight: 700;
        pointer-events: none;
      }
      .upload-zone:hover {
        border-color: #2196f3;
        background: #e3f2fd;
        transform: translateY(-2px);
      }
      .upload-zone.has-file {
        border-color: #1a9d63;
        background: #e9f8f0;
        border-style: solid;
      }
      .upload-zone.dragging {
        border-color: #2196f3;
        background: #e3f2fd;
        transform: scale(1.02);
      }
      .upload-icon {
        font-size: 1.6rem;
        color: #9aa6b2;
        margin-bottom: 8px;
        transition: color 0.25s;
      }
      .upload-zone:hover .upload-icon {
        color: #2196f3;
      }
      .upload-zone.has-file .upload-icon {
        color: #1a9d63;
      }
      .upload-label {
        font-size: 0.78rem;
        font-weight: 600;
        color: #3c4650;
        margin-bottom: 3px;
      }
      .upload-hint {
        font-size: 0.7rem;
        color: #9aa6b2;
      }
      .upload-preview {
        width: 100%;
        height: 70px;
        object-fit: cover;
        border-radius: 8px;
        margin-bottom: 6px;
        display: none;
      }
      .upload-zone.has-file .upload-preview {
        display: block;
      }
      .upload-zone.has-file .upload-icon {
        font-size: 1.2rem;
      }
      .upload-check {
        position: absolute;
        top: 8px;
        right: 8px;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: #1a9d63;
        color: #fff;
        font-size: 0.65rem;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transform: scale(0);
        transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
      }
      .upload-zone.has-file .upload-check {
        opacity: 1;
        transform: scale(1);
      }
      .upload-optional {
        font-size: 0.68rem;
        color: #9aa6b2;
        background: #f4ecec;
        padding: 2px 8px;
        border-radius: 999px;
        margin-top: 4px;
      }

      /* ── Navigation Buttons ───────────────────────────────── */
      .wizard-nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        margin-top: 28px;
      }
      .btn-back {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 13px 20px;
        background: #f4ecec;
        border: 1.5px solid #ecdedd;
        border-radius: 12px;
        font-family: "Inter", sans-serif;
        font-weight: 600;
        font-size: 0.9rem;
        color: #7b8794;
        cursor: pointer;
        transition: all 0.2s;
      }
      .btn-back:hover {
        background: #ecdedd;
        color: #3c4650;
      }
      .btn-next {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 14px 24px;
        background: linear-gradient(135deg, #2196f3 0%, #0d47a1 100%);
        color: #fff;
        border: none;
        border-radius: 12px;
        font-family: "Poppins", sans-serif;
        font-weight: 700;
        font-size: 0.95rem;
        cursor: pointer;
        transition: all 0.2s;
        box-shadow: 0 4px 14px rgba(33, 150, 243, 0.35);
        position: relative;
        overflow: hidden;
      }
      .btn-next::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.15),
          transparent
        );
        opacity: 0;
        transition: opacity 0.2s;
      }
      .btn-next:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(33, 150, 243, 0.4);
      }
      .btn-next:hover::before {
        opacity: 1;
      }
      .btn-next:active {
        transform: translateY(0);
      }
      .btn-next:disabled {
        opacity: 0.65;
        cursor: not-allowed;
        transform: none;
      }
      .btn-next.orange {
        background: linear-gradient(135deg, #b06b79 0%, #7d3f4a 100%);
        box-shadow: 0 4px 14px rgba(176, 107, 121, 0.35);
      }
      .btn-next.orange:hover {
        box-shadow: 0 8px 20px rgba(176, 107, 121, 0.4);
      }

      /* Login link */
      .login-link {
        text-align: center;
        font-size: 0.88rem;
        color: #7b8794;
        margin-top: 16px;
      }
      .login-link a {
        color: #2196f3;
        font-weight: 700;
        text-decoration: none;
      }
      .login-link a:hover {
        text-decoration: underline;
      }

      /* ── Review / Summary ────────────────────────────────── */
      .review-summary {
        background: #faf6f5;
        border: 1px solid #ecdedd;
        border-radius: 16px;
        padding: 16px 18px;
        margin-bottom: 18px;
        text-align: left;
      }
      .review-summary-title {
        font-size: 0.9rem;
        font-weight: 700;
        color: #2b3440;
        margin-bottom: 10px;
      }
      .review-summary-list {
        display: grid;
        gap: 8px;
      }
      .review-summary-item {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        font-size: 0.82rem;
        color: #3c4650;
      }
      .review-summary-item strong {
        color: #2b3440;
        font-weight: 600;
      }
      .review-summary-success {
        text-align: left;
        margin: 0 auto 24px;
        max-width: 560px;
      }

      /* ── Success Panel ────────────────────────────────────── */
      .success-panel {
        text-align: center;
        padding: 20px 0;
      }
      .success-icon-wrap {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: linear-gradient(135deg, #1a9d63, #157a4d);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 24px;
        font-size: 2.5rem;
        color: #fff;
        box-shadow: 0 8px 32px rgba(26, 157, 99, 0.35);
        animation: successPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
      }
      @keyframes successPop {
        from {
          opacity: 0;
          transform: scale(0.5);
        }
        to {
          opacity: 1;
          transform: scale(1);
        }
      }
      .success-rider-illo {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: linear-gradient(135deg, #b06b79, #7d3f4a);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 24px;
        font-size: 3rem;
        color: #fff;
        box-shadow: 0 8px 32px rgba(176, 107, 121, 0.35);
        animation: successPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
      }
      .success-title {
        font-family: "Poppins", sans-serif;
        font-weight: 800;
        font-size: 1.4rem;
        color: #2b3440;
        margin-bottom: 10px;
      }
      .success-message {
        color: #7b8794;
        font-size: 0.92rem;
        line-height: 1.7;
        margin-bottom: 28px;
        max-width: 34ch;
        margin-left: auto;
        margin-right: auto;
      }
      .success-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: #faf6f5;
        border: 1.5px solid #f7d6d0;
        color: #7d3f4a;
        font-size: 0.82rem;
        font-weight: 600;
        padding: 8px 18px;
        border-radius: 999px;
        margin-bottom: 28px;
      }
      .btn-goto-login {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 14px 32px;
        background: linear-gradient(135deg, #2196f3 0%, #0d47a1 100%);
        color: #fff;
        border: none;
        border-radius: 12px;
        font-family: "Poppins", sans-serif;
        font-weight: 700;
        font-size: 0.95rem;
        cursor: pointer;
        text-decoration: none;
        transition: all 0.2s;
        box-shadow: 0 4px 14px rgba(33, 150, 243, 0.35);
      }
      .btn-goto-login:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(33, 150, 243, 0.4);
      }

      /* ── Responsive ───────────────────────────────────────── */
      /* Below 900px the left branding panel (logo, tagline, steps preview,
         stats) is hidden entirely — only the form and its own wizard step
         indicator are retained. */
      @media (max-width: 900px) {
        .reg-page {
          display: block;
        }
        .brand-panel {
          display: none;
        }
        /* Top-aligned natural flow — no vertical centering. Centering a card
           that's taller than the (mobile) viewport pushed the Continue / Login
           buttons off the bottom with no way to scroll to them. */
        .form-panel {
          display: block;
          align-items: initial;
          justify-content: initial;
          overflow-y: visible;
          padding: 28px 20px calc(40px + env(safe-area-inset-bottom, 0px));
          min-height: 100vh;
          min-height: 100dvh;
        }
        .reg-card {
          margin: 0 auto;
          padding: 32px 24px;
        }
        .card-logo-row {
          display: flex;
        }
      }
      @media (max-width: 600px) {
        .form-panel {
          padding: 20px 14px calc(36px + env(safe-area-inset-bottom, 0px));
        }
        .reg-card {
          padding: 24px 18px;
          border-radius: 18px;
        }
        .vehicle-grid {
          grid-template-columns: repeat(3, 1fr);
        }
        .upload-grid {
          grid-template-columns: 1fr;
        }
        .field-row {
          grid-template-columns: 1fr;
        }
        .role-cards {
          grid-template-columns: 1fr 1fr;
        }
      }