:root {
      --primary: #d32f2f; --primary-glow: rgba(211,47,47,0.4);
      --dark: #080C10; --navy: #111820; --slate: #9BA8B9;
      --light: #EEF2F8; --success: #4CAF50; --error: #ff4d4d;
      --border: #1d2d44; --font: 'DM Sans', sans-serif; --heading: 'Barlow Condensed', sans-serif;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: var(--font); background: linear-gradient(#ffffff,#ffffff), url('/assets/images/mechanic1.jpg') no-repeat center/cover fixed;
      min-height: 100vh; color: var(--slate);
    }
    body::before { content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
      background: linear-gradient(rgba(211,47,47,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(211,47,47,.03) 1px,transparent 1px);
      background-size:60px 60px; }
    .wrap { max-width:800px; margin:0 auto; padding:7.5rem 2rem 2rem; position:relative; z-index:1; }

    /* Navbar */
    .navbar {
      position:fixed; top:0; left:0; right:0; z-index:1000;
      background:#ffffff; backdrop-filter:blur(16px);
      border-bottom:1px solid var(--border);
    }
    .navbar-container { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
    .navbar-logo { display:block; text-decoration:none; flex-shrink:0; }
    .navbar-menu { display:flex; align-items:center; gap:1.8rem; }
    .hamburger { display:none; align-items:center; justify-content:center; width:44px; height:44px; border:0; border-radius:8px; background:#f8fafc; color:#344054; font-size:20px; }
    .navbar-link { color:var(--slate); text-decoration:none; font-size:0.9rem; font-weight:600; transition:color 0.2s; }
    .navbar-link:hover, .navbar-link.active { color:var(--light); }
    .nav-call { display:flex; align-items:center; gap:0.5rem; padding:0.5rem 1.1rem; background:var(--primary); color:#fff; text-decoration:none; font-weight:700; font-size:0.85rem; border-radius:6px; white-space:nowrap; }

    /* Header */
    .hdr { text-align:center; padding:2rem 0 1.5rem; }
    .hdr h1 { font-family:var(--heading); font-size:clamp(2rem,5vw,3rem); font-weight:900; text-transform:uppercase; color:var(--light); }
    .hdr h1 span { color:var(--primary); }
    .hdr p { color:var(--slate); margin-top:0.4rem; }

    /* Steps */
    .steps { display:flex; align-items:center; justify-content:center; margin-bottom:2rem; }
    .step { display:flex; flex-direction:column; align-items:center; gap:0.3rem; }
    .step-num { width:34px; height:34px; border-radius:50%; background:var(--border); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:0.8rem; color:var(--slate); transition:all 0.3s; border:2px solid var(--border); }
    .step.active .step-num { background:var(--primary); border-color:var(--primary); color:#fff; }
    .step.done .step-num { background:var(--success); border-color:var(--success); color:#fff; }
    .step-lbl { font-size:0.7rem; color:var(--slate); white-space:nowrap; }
    .step.active .step-lbl { color:var(--primary); font-weight:600; }
    .step.done .step-lbl { color:var(--success); }
    .step-line { flex:1; height:2px; background:var(--border); max-width:50px; margin:0 4px 18px; transition:background 0.3s; }
    .step-line.done { background:var(--success); }

    /* Panel */
    .panel { background:var(--navy); border:1px solid var(--border); border-radius:12px; padding:2.5rem; position:relative; overflow:hidden; }
    .panel::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--primary); }

    /* Form pages */
    .fp { display:none; }
    .fp.active { display:block; }

    .section-title { color:var(--primary); font-size:1.1rem; font-weight:700; display:flex; align-items:center; gap:0.5rem; margin-bottom:1.2rem; padding-bottom:0.8rem; border-bottom:1px solid var(--border); }

    .fg { margin-bottom:1.1rem; }
    .fg label { display:block; color:var(--light); font-size:0.85rem; font-weight:500; margin-bottom:0.4rem; }
    .fg label .req { color:var(--error); }
    .fi {
      width:100%; padding:0.85rem 1rem; background:var(--dark); border:1px solid var(--border);
      border-radius:8px; color:var(--light); font-family:var(--font); font-size:0.95rem; transition:all 0.2s;
    }
    .fi::placeholder { color:var(--slate); opacity:0.7; }
    .fi:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-glow); }
    .fsel { appearance:none; background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238892b0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e"); background-repeat:no-repeat; background-position:right 1rem center; background-size:1em; padding-right:3rem; }
    .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }

    /* Location btn */
    .loc-btn { display:flex; align-items:center; justify-content:center; gap:0.5rem; width:100%; padding:0.85rem; font-size:0.9rem; font-weight:600; color:var(--slate); background:var(--dark); border:1px dashed var(--border); border-radius:8px; cursor:pointer; transition:all 0.2s; margin-top:0.5rem; }
    .loc-btn:hover { border-color:var(--primary); color:var(--light); }
    .loc-btn:disabled { opacity:0.55; cursor:not-allowed; }
    .loc-ok { display:none; align-items:center; gap:0.6rem; margin-top:0.6rem; padding:0.65rem 1rem; background:rgba(76,175,80,0.1); border:1px solid var(--success); border-radius:8px; font-size:0.82rem; color:var(--success); }
    .loc-ok.show { display:flex; }

    /* Info box */
    .info-box { background:rgba(0,120,200,0.07); border:1px solid #1d4d7a; border-radius:8px; padding:1rem; margin-bottom:1.2rem; font-size:0.87rem; }
    .info-box p { margin-bottom:0.35rem; color:var(--slate); }
    .info-box p:last-child { margin-bottom:0; }

    /* PW strength */
    .pw-bars { display:flex; gap:4px; height:4px; border-radius:2px; overflow:hidden; margin-top:0.5rem; }
    .pw-bar { flex:1; background:var(--border); border-radius:2px; transition:background 0.3s; }

    /* Checkbox */
    .chk { display:flex; align-items:flex-start; gap:0.5rem; margin-bottom:1.2rem; }
    .chk input { width:17px; height:17px; accent-color:var(--primary); margin-top:3px; flex-shrink:0; }
    .chk label { color:var(--slate); font-size:0.9rem; }
    .chk a { color:var(--primary); text-decoration:none; }

    /* Buttons */
    .btn-row { display:flex; gap:0.8rem; margin-top:1.5rem; }
    .btn-p { flex:1; padding:0.95rem; font-family:var(--font); font-weight:700; font-size:0.95rem; background:var(--primary); color:#fff; border:none; border-radius:8px; cursor:pointer; transition:all 0.25s; display:flex; align-items:center; justify-content:center; gap:0.5rem; }
    .btn-p:hover { transform:translateY(-2px); box-shadow:0 0 25px var(--primary-glow); }
    .btn-p:disabled { opacity:0.6; cursor:not-allowed; transform:none; }
    .btn-s { padding:0.95rem 1.2rem; font-family:var(--font); font-weight:600; font-size:0.9rem; background:transparent; color:var(--slate); border:1px solid var(--border); border-radius:8px; cursor:pointer; transition:all 0.2s; white-space:nowrap; }
    .btn-s:hover { border-color:var(--primary); color:var(--light); }

    /* Toast message */
    .toast { padding:0.85rem 1rem; border-radius:8px; margin-bottom:1rem; font-size:0.9rem; display:none; }
    .toast.err { background:rgba(255,77,77,0.12); border:1px solid var(--error); color:var(--error); display:block; }
    .toast.ok { background:rgba(76,175,80,0.12); border:1px solid var(--success); color:var(--success); display:block; }

    /* Success */
    .success-wrap { display:none; text-align:center; padding:3rem 1rem; }
    .success-wrap.show { display:block; }
    .sicon { font-size:4rem; color:var(--success); animation:popIn 0.5s ease; }
    @keyframes popIn { 0%{transform:scale(0.5);opacity:0} 70%{transform:scale(1.1)} 100%{transform:scale(1);opacity:1} }
    .success-wrap h2 { font-family:var(--heading); font-size:2.5rem; font-weight:900; color:var(--light); text-transform:uppercase; margin:0.8rem 0 0.5rem; }
    .success-wrap p { color:var(--slate); margin-bottom:1rem; }
    .mech-id-box { background:rgba(211,47,47,0.08); border:1px solid var(--primary); border-radius:10px; padding:1.2rem 2rem; display:inline-block; margin:1rem 0; }
    .mech-id-box small { display:block; font-size:0.72rem; color:var(--slate); text-transform:uppercase; letter-spacing:0; margin-bottom:0.3rem; }
    .mech-id-box strong { font-family:monospace; font-size:1.25rem; color:var(--primary); letter-spacing:0; }

    /* ── LOCATION AUTOSUGGEST ── */
    .location-wrapper { position: relative; }
    #serviceArea-suggestions {
      display: none;
      position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 10;
      background: var(--navy); border: 1px solid var(--border); border-radius: 8px;
      max-height: 200px; overflow-y: auto;
    }
    .sugg-item {
      padding: 0.8rem 1rem; cursor: pointer; color: var(--light); font-size: 0.9rem;
      border-bottom: 1px solid var(--border); transition: background 0.15s;
    }
    .sugg-item:hover { background: rgba(211,47,47,0.1); }
    .sugg-item:last-child { border-bottom: none; }
    .sugg-item i { color: var(--primary); margin-right: 0.6rem; }

    .footer-note { text-align:center; margin-top:1.5rem; color:var(--slate); font-size:0.9rem; }
    .footer-note a { color:var(--primary); text-decoration:none; }

    @media(max-width:900px) {
      .hamburger { display:inline-flex; margin-left:auto; }
      .navbar-menu { display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:0; padding:12px 20px; background:#fff; border-bottom:1px solid #e4e7ec; max-height:calc(100dvh - 72px); overflow-y:auto; }
      .navbar-menu.open { display:flex; }
      .navbar-menu a { min-height:44px; display:flex; align-items:center; }
    }
    @media(max-width:640px) { .grid2{grid-template-columns:1fr;} .wrap{padding:6.8rem 1rem 1rem;} .panel{padding:1.5rem;} }

    /* Index-style MechWay navbar spacing */

    .navbar-logo, .nav-logo { display: inline-flex !important; align-items: center; flex-shrink: 0; min-width: 64px; }
    .navbar-logo img, .nav-logo img { object-fit: contain; max-width: 150px; }
    .navbar { padding: .35rem 5% !important; min-height: 42px; }
    .navbar.scrolled { padding: .2rem 5% !important; }
    .navbar-container, .nav-inner { max-width: 1200px; margin: 0 auto; }
    .navbar-logo img, .nav-logo img { height: 4.25rem !important; width: auto; border-radius: 16px; display: block; transition: height .3s ease; }
    .navbar.scrolled .navbar-logo img, .navbar.scrolled .nav-logo img { height: 4.25rem !important; }
    @media (max-width: 768px) {
      .navbar { padding: .3rem 5% !important; }
      .navbar-logo img, .nav-logo img { height: 3.5rem !important; }
      .navbar.scrolled .navbar-logo img, .navbar.scrolled .nav-logo img { height: 3.5rem !important; }
    }
  

    /* Shared shop-style footer */
    .mw-footer {
      --mw-footer-bg: #080C10;
      --mw-footer-panel: #111820;
      --mw-footer-border: rgba(255,255,255,0.08);
      --mw-footer-text: #9BA8B9;
      --mw-footer-soft: #EEF2F8;
      --mw-footer-accent: #d32f2f;
      background: var(--mw-footer-bg);
      border-top: 1px solid var(--mw-footer-border);
      padding: 4rem 5% 0;
      color: var(--mw-footer-text);
    }
    .mw-footer .mw-footer-container { max-width: 1240px; margin: 0 auto; }
    .mw-footer .mw-footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 3rem; padding-bottom: 3rem; }
    .mw-footer .mw-footer-logo { display: inline-flex; align-items: center; margin-bottom: 1rem; }
    .mw-footer .mw-footer-logo img { height: 4.25rem; width: auto; border-radius: 14px; display: block; }
    .mw-footer .mw-footer-brand p { font-size: .9rem; color: var(--mw-footer-text); line-height: 1.7; max-width: 280px; }
    .mw-footer .mw-footer-social { display: flex; gap: .75rem; margin-top: 1.5rem; }
    .mw-footer .mw-footer-social a { width: 38px; height: 38px; border-radius: 8px; background: var(--mw-footer-panel); border: 1px solid var(--mw-footer-border); color: var(--mw-footer-text); font-size: .95rem; display: flex; align-items: center; justify-content: center; transition: all .25s; text-decoration: none; }
    .mw-footer .mw-footer-social a:hover { background: var(--mw-footer-accent); border-color: var(--mw-footer-accent); color: #fff; transform: translateY(-2px); }
    .mw-footer .mw-footer-col h5 { color: var(--mw-footer-soft); font-size: .9rem; font-weight: 700; letter-spacing: 0; text-transform: uppercase; margin-bottom: 1.2rem; }
    .mw-footer .mw-footer-col a { display: block; color: var(--mw-footer-text); font-size: .88rem; text-decoration: none; margin-bottom: .6rem; transition: color .2s; }
    .mw-footer .mw-footer-col a:hover { color: var(--mw-footer-accent); }
    .mw-footer .mw-footer-contact-item { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .8rem; }
    .mw-footer .mw-footer-contact-item i { color: var(--mw-footer-accent); font-size: .9rem; margin-top: .1rem; flex-shrink: 0; }
    .mw-footer .mw-footer-contact-item span { font-size: .88rem; color: var(--mw-footer-text); line-height: 1.5; }
    .mw-footer .mw-footer-contact-item a { color: inherit; text-decoration: none; }
    .mw-footer .mw-footer-bottom { border-top: 1px solid var(--mw-footer-border); padding: 1.5rem 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; }
    .mw-footer .mw-footer-bottom p { font-size: .82rem; color: var(--mw-footer-text); margin: 0; }
    .mw-footer .mw-footer-badges { display: flex; gap: .8rem; flex-wrap: wrap; }
    .mw-footer .mw-footer-badge { padding: .35rem .8rem; background: var(--mw-footer-panel); border: 1px solid var(--mw-footer-border); border-radius: 8px; font-size: .75rem; font-weight: 700; color: var(--mw-footer-soft); letter-spacing: 0; }
    @media (max-width: 1024px) { .mw-footer .mw-footer-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 768px) { .mw-footer .mw-footer-grid { grid-template-columns: 1fr; gap: 2rem; } .mw-footer .mw-footer-bottom { flex-direction: column; text-align: center; } .mw-footer .mw-footer-logo img { height: 3.5rem; } }

  
.inline-mech-signup-1 { height:4.5rem;width:auto;border-radius:14px;display:block;margin:0 auto 0.6rem }
.inline-mech-signup-2 { margin-top:-0.2rem; }
.inline-mech-signup-3 { color:var(--primary);margin-right:5px; }
.inline-mech-signup-4 { color:var(--light); }
.inline-mech-signup-5 { color:var(--primary);margin-right:5px; }
.inline-mech-signup-6 { color:var(--light); }
.inline-mech-signup-7 { margin-top:1.5rem; }
.inline-mech-signup-8 { background:rgba(255,255,255,0.02); color:var(--success); border-style:dashed; }
.inline-mech-signup-9 { background:rgba(255,255,255,0.02); color:var(--success); border-style:dashed; }
.inline-mech-signup-10 { color:var(--light); }
.inline-mech-signup-11 { text-align:center;margin:0.7rem 0;font-size:0.85rem; }
.inline-mech-signup-12 { font-size:0.75rem;color:var(--slate);display:block;margin-top:0.3rem;margin-bottom:1rem; }
.inline-mech-signup-13 { margin-top:1.5rem; }
.inline-mech-signup-14 { max-width:260px;margin:0 auto; }