:root{--bg:#0c0e10;--surface:#15191c;--line:#2b3034;--orange:#ff641e;--muted:#a1a9af;--text:#f4f5f6;color-scheme:dark;font-family:'Noto Sans Thai',sans-serif;color:var(--text);background:var(--bg)}
*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button,a,input,select,textarea{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.45;cursor:not-allowed}a:hover{color:var(--orange)}[hidden]{display:none!important}:focus-visible{outline:3px solid #ffae82;outline-offset:3px}
.rs-header{min-height:84px;display:flex;align-items:center;gap:48px;border-bottom:1px solid var(--line);padding:18px max(24px,calc((100vw - 1320px)/2));background:#0c0e10}.rs-brand{font-size:30px;font-weight:800;font-style:italic;letter-spacing:-1.6px;line-height:1}.rs-brand span,.rs-orange{color:var(--orange)}.rs-brand small{display:block;color:#8e969d;font-size:9px;letter-spacing:2px;font-style:normal;margin-top:8px}.rs-header nav{display:flex;gap:32px;flex:1;font-size:14px;color:var(--muted)}.rs-header nav [aria-current]{color:var(--orange)}.rs-header-action{font-size:14px;border:1px solid #444;padding:11px 18px;border-radius:8px}.rs-main{max-width:1320px;margin:auto;padding:0 24px 60px}.rs-demo{background:#412919;color:#ffd2b9;padding:12px 24px;text-align:center;font-size:14px;line-height:1.8;border-bottom:1px solid #865333}.rs-demo a{text-decoration:underline;margin-left:12px}.rs-demo .rs-btn{padding:6px 12px;margin:6px;font-size:13px}.rs-intro{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:44px 0 32px}.rs-eyebrow{color:var(--orange);font-size:12px;letter-spacing:2px;font-weight:600;margin:0 0 15px}.rs-intro h1{font-size:clamp(32px,3.1vw,46px);letter-spacing:-1.2px;line-height:1.3;margin:0}.rs-intro h1 em{font-style:normal;color:var(--orange)}.rs-intro p:not(.rs-eyebrow){color:var(--muted);margin-bottom:0;font-size:16px;line-height:1.8}.rs-radius{display:flex;flex-direction:column;border-left:1px solid #3d3029;padding-left:32px;white-space:nowrap;color:var(--muted);font-size:13px}.rs-radius strong{color:var(--orange);font-size:58px;line-height:1.3;letter-spacing:-3px;font-weight:600}.rs-radius strong span{font-size:22px;letter-spacing:0}
.rs-workshop-actions{margin-left:auto;justify-content:flex-end}
.rs-workspace{display:grid;grid-template-columns:minmax(0,1.32fr) minmax(360px,1fr);gap:28px;align-items:start}.rs-map-panel{min-width:0;position:sticky;top:20px}.rs-map-top,.rs-map-bottom{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--surface);padding:16px 18px;font-size:13px;border:1px solid var(--line)}.rs-map-top{border-radius:16px 16px 0 0}.rs-map-top>span:last-child{color:var(--muted)}.rs-map{height:395px;background:#252a2d;z-index:0}.rs-map .leaflet-tile-pane,.rs-shop-map .leaflet-tile-pane{filter:saturate(.4)}.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:#fff;color:#202020}.rs-map-bottom{border-radius:0 0 14px 14px;color:var(--muted);font-size:12px}.rs-dot{display:inline-block;width:7px;height:7px;margin-right:6px;background:var(--orange);border-radius:50%}.rs-dot-light{background:#fff}.rs-map-tools{display:flex;gap:10px;margin-top:18px}.rs-map-tools .rs-btn{flex:1;font-size:14px}.rs-coordinates{font-size:13px;color:var(--muted);padding-bottom:14px;border-bottom:1px solid var(--line)}summary{cursor:pointer}.rs-coordinates .rs-two{margin-top:14px}.rs-nearby-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:16px}.rs-nearby-heading h2{font-size:18px}.rs-shop-list{display:grid;gap:10px}.rs-shop{border:1px solid var(--line);border-radius:10px;padding:16px;background:var(--surface);display:flex;justify-content:space-between;gap:14px;align-items:center}.rs-shop h3{font-size:15px;margin:0 0 6px}.rs-shop p{font-size:13px;margin:4px 0;color:var(--muted)}.rs-shop-distance{white-space:nowrap;font-size:14px;color:var(--orange);text-align:right}.rs-shop-distance a{display:block;font-size:12px;text-decoration:underline;margin-top:6px}.rs-shop.outside{opacity:.65}.rs-card{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:26px}.rs-card h2{font-size:23px;margin:12px 0 18px}.rs-step{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--muted);font-size:12px;font-weight:500;letter-spacing:.3px;margin:24px 0 16px}.rs-step:first-child{margin-top:0}.rs-chip{padding:4px 10px;background:#352319;border:1px solid #6e3e23;border-radius:99px;color:#ffa876;font-size:12px;white-space:nowrap}.rs-services{display:grid;grid-template-columns:1fr 1fr;gap:10px}.rs-service{position:relative;display:flex!important;flex-direction:row;align-items:center;gap:10px;border:1px solid #373d42;border-radius:10px;padding:14px 10px;font-size:14px!important;cursor:pointer;background:#101315;margin:0!important}.rs-service:has(input:checked){border-color:var(--orange);background:#2b201a;color:#ffae82}.rs-service input{position:absolute;opacity:0;width:1px}.rs-service:has(input:focus-visible){outline:2px solid #ffae82}.rs-service-icon{font-size:24px;color:var(--orange);width:25px;text-align:center}.rs-notice{padding:13px 15px;border:1px solid #58432f;border-radius:8px;background:#292118;font-size:13px;color:#eac8a3;line-height:1.8;margin:18px 0}.rs-success{background:#152921;color:#a3d5ba;border-color:#315746}.rs-muted{color:var(--muted);line-height:1.8;font-size:14px}.rs-small{font-size:12px}.rs-btn{border:1px solid #3b4247;border-radius:8px;padding:12px 17px;background:#1d2226;color:#f6f6f6;line-height:1.4;font-weight:600;display:inline-block;text-align:center}.rs-btn:hover{border-color:var(--orange);color:#ffad81}.rs-primary{background:var(--orange);border-color:var(--orange);color:#13100e}.rs-primary:hover{background:#ff8148;color:#13100e}.rs-danger{color:#ffb5a5;border-color:#734638}.rs-wide{width:100%}.rs-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}.rs-inline{display:flex;align-items:center;gap:12px;flex-wrap:wrap}label{display:block;font-size:14px;color:#cbd0d4;margin:14px 0}input:not([type=radio]):not([type=checkbox]),select,textarea{display:block;width:100%;min-width:0;background:#101315;color:#f2f2f2;border:1px solid #383f44;border-radius:7px;padding:12px;margin-top:7px;font-size:16px}input::placeholder,textarea::placeholder{color:#747e86;font-size:14px}textarea{resize:vertical}input[type=checkbox]{accent-color:var(--orange);width:18px;height:18px;flex-shrink:0}.rs-consent{display:flex;align-items:flex-start;gap:10px;font-size:12px;line-height:1.8;margin:18px 0}.rs-consent a{text-decoration:underline}.rs-section{margin-top:60px;scroll-margin-top:24px}.rs-section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.rs-section-heading h2,.rs-section h2{margin:0;font-size:26px}.rs-section-heading .rs-eyebrow{margin-bottom:8px}.rs-job-list{display:grid;gap:14px}.rs-job-card{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px;background:var(--surface);border:1px solid var(--line);border-radius:12px}.rs-job-card h3{font-size:17px;margin:8px 0}.rs-job-card p{color:var(--muted);margin:6px 0;font-size:13px}.rs-job-card .rs-inline{justify-content:flex-end}.rs-faq{border-top:1px solid var(--line);padding-top:36px}.rs-faq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:20px}.rs-faq h3{font-size:16px}.rs-faq p,.rs-directory p{font-size:14px;line-height:1.9;color:var(--muted)}.rs-directory{border-top:1px solid var(--line);padding-top:24px}.rs-directory h3{font-size:16px}.rs-footer{border-top:1px solid var(--line);padding:30px max(24px,calc((100vw - 1272px)/2));display:flex;justify-content:space-between;align-items:center;gap:24px;color:var(--muted);font-size:13px}.rs-footer .rs-brand{color:#fff;font-size:26px}
.rs-dialog{background:var(--surface);color:var(--text);border:1px solid #4b5055;border-radius:16px;padding:30px;width:min(720px,94vw);max-height:90dvh;overflow:auto}.rs-dialog::backdrop{background:#000b;backdrop-filter:blur(4px)}.rs-dialog h2{font-size:24px;padding-right:24px}.rs-close{position:absolute;top:10px;right:15px;background:none;border:0;color:#fff;font-size:30px}.rs-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0}.rs-detail-grid p{margin:0;background:#0f1214;padding:14px;border-radius:8px;font-size:14px;overflow-wrap:anywhere}.rs-detail-grid small{display:block;color:var(--muted);margin-bottom:4px}.rs-chat{background:#0e1113;padding:16px;border-radius:10px;max-height:290px;overflow:auto;margin-top:12px}.rs-chat p{margin:8px 0 16px;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}.rs-chat small{display:block;font-size:11px;color:#faad83;margin-bottom:5px}.rs-chat.internal{border:1px dashed #60533e}.rs-history{font-size:12px;color:var(--muted);line-height:1.9;margin-top:20px}.rs-login{max-width:430px;margin:30px auto}.rs-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:32px}.rs-stats>div{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:6px}.rs-stats span{color:var(--muted);font-size:14px}.rs-stats strong{font-size:32px;color:var(--orange)}.rs-shop-map{height:280px;min-height:280px;width:100%;position:relative;z-index:0;background:#1e2429;border-radius:10px;border:1px solid #383f44;margin:10px 0 6px;overflow:hidden}fieldset{border:1px solid var(--line);border-radius:8px;padding:12px}legend{font-size:14px}label small{color:var(--muted);font-size:12px}.rs-marker{width:24px;height:24px;background:var(--orange);border:3px solid #fff;border-radius:50%;box-shadow:0 2px 10px #0006}.rs-customer-marker{background:#101315;border:5px solid #fff}.rs-empty{padding:30px;border:1px dashed #3d444a;border-radius:12px;color:var(--muted);font-size:14px;text-align:center}.rs-password-wrapper{position:relative;display:flex;align-items:center;width:100%}.rs-password-wrapper input{padding-right:46px!important}.rs-toggle-pw{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--muted);font-size:18px;padding:6px 8px;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:color .15s,background .15s;line-height:1;user-select:none}.rs-toggle-pw:hover{color:var(--orange);background:rgba(255,100,30,.12)}.rs-image-upload-box{display:flex;align-items:center;gap:14px;background:#101315;border:1px solid #383f44;border-radius:10px;padding:14px;margin-top:8px}.rs-image-upload-box img{width:68px;height:68px;border-radius:10px;object-fit:cover;border:1.5px solid #ff641e;background:#1e293b;flex-shrink:0}.rs-shop-avatar{width:56px;height:56px;border-radius:12px;object-fit:cover;border:1.5px solid #3b4247;background:#13181e;flex-shrink:0}
@media(max-width:980px){.rs-header{gap:25px}.rs-header nav{gap:18px}.rs-workspace{gap:18px;grid-template-columns:1fr 1fr}.rs-card{padding:20px}.rs-map{height:360px}.rs-radius{display:none}.rs-map-tools{flex-direction:column}.rs-map-top>span:last-child{display:none}}
@media(max-width:720px){.rs-header{flex-wrap:wrap;gap:18px;padding:18px 20px}.rs-header nav{order:3;flex-basis:100%;justify-content:space-between;border-top:1px solid var(--line);padding-top:14px;font-size:12px}.rs-header-action,.rs-header>#rs-logout{margin-left:auto}.rs-main{padding:0 18px 40px}.rs-intro{padding:28px 0 24px}.rs-intro p:not(.rs-eyebrow){font-size:14px}.rs-eyebrow{font-size:10px;letter-spacing:1.4px}.rs-workspace{grid-template-columns:1fr}.rs-map-panel{position:static}.rs-map{height:310px}.rs-map-tools{flex-direction:row}.rs-faq-grid{grid-template-columns:1fr;gap:12px}.rs-section{margin-top:38px}.rs-section-heading{align-items:flex-start}.rs-section-heading h2,.rs-section h2{font-size:22px}.rs-job-card{align-items:stretch;flex-direction:column;padding:18px}.rs-job-card .rs-inline{justify-content:flex-start}.rs-job-card>button{align-self:flex-start}.rs-footer{flex-wrap:wrap;padding:24px 20px}.rs-footer>span{order:3;width:100%}.rs-stats{gap:8px}.rs-stats>div{padding:12px}.rs-stats span{font-size:12px}.rs-stats strong{font-size:26px}.rs-dialog{padding:24px 18px}.rs-detail-grid{grid-template-columns:1fr}.rs-shop-distance{font-size:13px}.rs-section-heading>.rs-inline{max-width:160px}.rs-map-bottom{font-size:11px}.rs-demo{font-size:12px}.rs-intro>.rs-btn{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important}}

/* ==========================================================================
   LNWROD FULLSCREEN MAP APPLICATION (GRAB / UBER / TRACKING APP STYLE)
   ========================================================================== */
.rs-fullscreen-body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: fixed;
  font-family: 'IBM Plex Sans Thai', 'Noto Sans Thai', sans-serif;
  background: #080b0e;
  color: #f8fafc;
}

.rs-fullscreen-map {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  background: #111827;
}

/* Floating Glassmorphic Top Header */
.rs-float-header {
  position: fixed;
  top: 14px;
  left: 14px;
  right: 14px;
  max-width: 1200px;
  margin: 0 auto;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  gap: 12px;
}

.rs-header-left, .rs-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rs-back-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  color: #f8fafc;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s;
  text-decoration: none;
}
.rs-back-btn:hover {
  background: rgba(255, 100, 30, 0.2);
  border-color: #ff641e;
  color: #ff9a59;
}

.rs-top-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rs-brand-text {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.5px;
}
.rs-brand-text span { color: #ff641e; }

.rs-live-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #10b981;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 3px 10px;
  border-radius: 20px;
}

.rs-pulse-dot {
  width: 8px;
  height: 8px;
  background: #10b981;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: rs-pulse 1.8s infinite;
}

@keyframes rs-pulse {
  0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
  100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.rs-btn-hotline {
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #ef4444, #b91c1c);
  color: #fff !important;
  padding: 7px 14px;
  border-radius: 12px;
  font-size: 13px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.35);
  transition: all 0.2s;
}
.rs-btn-hotline:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.45);
}

.rs-header-jobs-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #f1f5f9;
  padding: 7px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.rs-header-jobs-btn:hover {
  background: rgba(255, 255, 255, 0.16);
}
.rs-badge {
  background: #ff641e;
  color: #fff;
  padding: 2px 7px;
  border-radius: 10px;
  font-size: 11px;
}

.rs-header-workshop-link {
  font-size: 12px;
  color: #94a3b8;
  padding: 6px 10px;
  text-decoration: none;
}
.rs-header-workshop-link:hover { color: #fff; }

.rs-float-demo-banner {
  position: fixed;
  top: 74px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 95;
  background: rgba(65, 41, 25, 0.95);
  backdrop-filter: blur(8px);
  color: #ffd2b9;
  border: 1px solid #865333;
  border-radius: 12px;
  padding: 6px 18px;
  font-size: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
  white-space: nowrap;
}
.rs-float-demo-banner a { color: #ffb181; font-weight: 700; text-decoration: underline; }

/* Floating Map Controls (Right Side) */
.rs-map-controls {
  position: fixed;
  right: 18px;
  top: 100px;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rs-ctrl-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  background: rgba(15, 23, 42, 0.92);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  color: #f8fafc;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  transition: all 0.2s;
  padding: 4px;
}
.rs-ctrl-btn:hover {
  background: #1e293b;
  border-color: #ff641e;
  transform: translateY(-2px);
}
.rs-ctrl-locate {
  background: linear-gradient(135deg, #ff641e, #ea580c);
  border-color: #ff8148;
  box-shadow: 0 6px 20px rgba(255, 100, 30, 0.4);
}
.rs-ctrl-locate:hover {
  background: linear-gradient(135deg, #ff8148, #ff641e);
}
.rs-ctrl-icon { font-size: 18px; line-height: 1; margin-bottom: 2px; }
.rs-ctrl-text { font-size: 9px; font-weight: 700; }

/* Floating Pill (GPS status / instructions) */
.rs-float-pill {
  position: fixed;
  top: 76px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: rgba(15, 23, 42, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 99px;
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 6px 24px rgba(0,0,0,0.3);
  max-width: 90vw;
  white-space: nowrap;
  pointer-events: none;
  transition: all 0.3s ease;
}

/* ==========================================================================
   SLIDING BOTTOM SHEET / DRAWER (GRAB / UBER STYLE)
   ========================================================================== */
.rs-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 680px;
  margin: 0 auto;
  z-index: 85;
  background: #0f172a;
  border: 1px solid #334155;
  border-bottom: none;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  max-height: 78vh;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.rs-sheet.rs-sheet-collapsed {
  transform: translateY(calc(100% - 56px));
}

.rs-sheet-handle-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px 8px;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
}

.rs-sheet-handle {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 5px;
  background: #475569;
  border-radius: 99px;
}

.rs-sheet-handle-title {
  font-size: 14px;
  font-weight: 700;
  color: #f1f5f9;
  padding-top: 4px;
}

.rs-sheet-arrow-btn {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 13px;
  cursor: pointer;
  padding: 4px;
  transition: transform 0.3s;
}
.rs-sheet-collapsed .rs-sheet-arrow-btn {
  transform: rotate(180deg);
}

.rs-sheet-body {
  overflow-y: auto;
  padding: 16px 20px 24px;
  overscroll-behavior: contain;
}

/* Service Grid (Pills) */
.rs-services-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.rs-section-label {
  font-size: 13px;
  font-weight: 700;
  color: #cbd5e1;
}
.rs-tag-radius {
  font-size: 11px;
  font-weight: 700;
  background: rgba(255, 100, 30, 0.15);
  border: 1px solid rgba(255, 100, 30, 0.35);
  color: #ff8148;
  padding: 2px 8px;
  border-radius: 12px;
}

.rs-service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.rs-service-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: #1e293b;
  border: 1.5px solid #334155;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}
.rs-service-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.rs-service-card:hover {
  background: #24344d;
  border-color: #475569;
}
.rs-service-card.active, .rs-service-card:has(input:checked) {
  background: rgba(255, 100, 30, 0.12);
  border-color: #ff641e;
  box-shadow: 0 0 0 2px rgba(255, 100, 30, 0.2);
}

.rs-srv-icon {
  font-size: 24px;
  line-height: 1;
}
.rs-srv-info strong {
  display: block;
  font-size: 13px;
  color: #f8fafc;
  line-height: 1.2;
  margin-bottom: 2px;
}
.rs-srv-info small {
  display: block;
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.3;
}

/* 50 KM Coverage Status Card */
.rs-coverage-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 14px;
  margin-bottom: 16px;
  transition: all 0.2s;
}
.rs-coverage-card.rs-cov-success {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.4);
}
.rs-coverage-card.rs-cov-danger {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.4);
}

.rs-cov-icon {
  font-size: 22px;
  flex-shrink: 0;
}
.rs-cov-content strong {
  display: block;
  font-size: 13px;
  color: #f8fafc;
  margin-bottom: 2px;
}
.rs-cov-content p {
  margin: 0;
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.4;
}

/* Form Styles */
.rs-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rs-form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rs-form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.rs-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}
.rs-label-title {
  font-size: 12px;
  font-weight: 600;
  color: #94a3b8;
}
.rs-req { color: #ef4444; }

.rs-field input, .rs-field select, .rs-field textarea {
  width: 100%;
  padding: 10px 12px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 10px;
  color: #f8fafc;
  font-size: 13px;
  transition: border-color 0.2s;
}
.rs-field input:focus, .rs-field select:focus, .rs-field textarea:focus {
  border-color: #ff641e;
  outline: none;
}

/* Anti-fraud Phone & OTP Section */
.rs-otp-section {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid #334155;
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rs-phone-input-group {
  display: flex;
  gap: 8px;
}
.rs-phone-input-group input {
  flex: 1;
}
.rs-btn-otp {
  background: #ff641e;
  color: #fff;
  border: none;
  padding: 0 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}
.rs-btn-otp:hover {
  background: #ea580c;
}

.rs-code-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rs-otp-hint-banner {
  background: #332014;
  border: 1px solid #7c3e1d;
  color: #ffb181;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
}
.rs-code-input-row {
  display: flex;
  gap: 8px;
}
.rs-code-input-row input {
  flex: 1;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 4px;
  text-align: center;
}
.rs-btn-verify {
  background: #10b981;
  color: #fff;
  border: none;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.rs-verified-badge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 12px;
  color: #a7f3d0;
}
.rs-badge-check {
  font-weight: 800;
  margin-right: 6px;
  color: #10b981;
}
.rs-change-btn {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 11px;
  text-decoration: underline;
  cursor: pointer;
}

.rs-consent-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.4;
}
.rs-consent-row input {
  accent-color: #ff641e;
  margin-top: 2px;
}
.rs-consent-row a { color: #ff9a59; }

.rs-btn-submit {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #ff641e 0%, #e64a19 100%);
  color: #fff;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(255, 100, 30, 0.35);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.rs-btn-submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(255, 100, 30, 0.45);
}
.rs-btn-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}
.rs-submit-subnote {
  text-align: center;
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}

/* ==========================================================================
   VIEW B: LIVE TRACKING & DISPATCH (EGEA / GRAB STYLE)
   ========================================================================== */
.rs-track-stepper-box {
  background: #1e293b;
  border-radius: 16px;
  padding: 16px 12px;
  margin-bottom: 14px;
  border: 1px solid #334155;
}

.rs-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.rs-step-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  z-index: 2;
}

.rs-step-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #0f172a;
  border: 2px solid #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: all 0.3s;
}

.rs-step-name {
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  margin-top: 6px;
  text-align: center;
  white-space: nowrap;
}

.rs-step-node.active .rs-step-icon {
  background: #ff641e;
  border-color: #ff641e;
  box-shadow: 0 0 0 4px rgba(255, 100, 30, 0.3);
}
.rs-step-node.active .rs-step-name {
  color: #ff8148;
  font-weight: 700;
}

.rs-step-node.completed .rs-step-icon {
  background: #10b981;
  border-color: #10b981;
}
.rs-step-node.completed .rs-step-name {
  color: #10b981;
}

.rs-step-connector {
  flex: 1;
  height: 3px;
  background: #334155;
  margin: -16px -6px 0 -6px;
  z-index: 1;
}
.rs-step-connector.completed {
  background: #10b981;
}

/* ETA & Live Status Card */
.rs-eta-card {
  background: linear-gradient(135deg, #ff641e 0%, #c2410c 100%);
  color: #fff;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 14px;
  box-shadow: 0 8px 24px rgba(255, 100, 30, 0.3);
}

.rs-eta-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  opacity: 0.9;
  margin-bottom: 4px;
}

.rs-gps-live-badge {
  background: rgba(0, 0, 0, 0.25);
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 11px;
}

.rs-eta-main-text {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
  margin: 4px 0;
}
.rs-eta-sub-text {
  font-size: 12px;
  opacity: 0.92;
}

/* Mechanic Profile Card */
.rs-mechanic-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 14px;
}

.rs-mech-avatar {
  width: 48px;
  height: 48px;
  background: #0f172a;
  border: 2px solid #ff641e;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.rs-mech-info {
  flex: 1;
  min-width: 0;
}
.rs-mech-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rs-mech-name-row strong {
  font-size: 14px;
  color: #f8fafc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rs-badge-verified {
  font-size: 10px;
  color: #10b981;
  background: rgba(16, 185, 129, 0.15);
  padding: 1px 6px;
  border-radius: 6px;
}
.rs-mech-shop {
  font-size: 12px;
  color: #94a3b8;
  margin: 2px 0;
}
.rs-mech-distance {
  font-size: 11px;
  color: #ff8148;
  font-weight: 600;
}

.rs-mech-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rs-mech-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: none;
  white-space: nowrap;
}
.rs-mech-btn-call {
  background: #10b981;
  color: #fff !important;
}
.rs-mech-btn-chat {
  background: #ff641e;
  color: #fff;
  position: relative;
}
.rs-chat-unread {
  background: #ef4444;
  color: #fff;
  border-radius: 50%;
  width: 14px;
  height: 14px;
  font-size: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -4px;
  right: -4px;
}

/* Job Summary Card */
.rs-job-summary-card {
  background: #1e293b;
  border: 1px solid #334155;
  border-radius: 14px;
  padding: 14px;
}
.rs-summary-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #334155;
  padding-bottom: 8px;
  margin-bottom: 10px;
  font-size: 12px;
  color: #94a3b8;
}
.rs-summary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  font-size: 12px;
}
.rs-summary-grid small {
  color: #64748b;
  display: block;
}
.rs-summary-grid span {
  color: #e2e8f0;
}
.rs-summary-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px dashed #334155;
}
.rs-btn-text-danger {
  background: none;
  border: none;
  color: #ef4444;
  font-size: 12px;
  cursor: pointer;
  padding: 4px;
}
.rs-btn-text {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 12px;
  cursor: pointer;
  padding: 4px;
}

/* ==========================================================================
   IN-APP REAL-TIME CHAT DRAWER / MODAL
   ========================================================================== */
.rs-chat-drawer {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  max-width: 440px;
  height: 520px;
  max-height: 85vh;
  z-index: 200;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
}

.rs-chat-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #1e293b;
  border-bottom: 1px solid #334155;
  border-radius: 20px 20px 0 0;
}
.rs-chat-header-info {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rs-chat-avatar {
  font-size: 24px;
}
.rs-chat-header-info strong {
  display: block;
  font-size: 14px;
  color: #f8fafc;
}
.rs-chat-header-info small {
  font-size: 11px;
  color: #10b981;
}
.rs-chat-close-btn {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
}

.rs-quick-chips {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 8px 12px;
  background: #131d2e;
  border-bottom: 1px solid #1e293b;
  white-space: nowrap;
}
.rs-chip-btn {
  background: #1e293b;
  border: 1px solid #334155;
  color: #cbd5e1;
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 11px;
  cursor: pointer;
}
.rs-chip-btn:hover {
  background: #334155;
  color: #fff;
}

.rs-chat-messages-box {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rs-chat-bubble {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.4;
  word-break: break-word;
}
.rs-chat-bubble.rs-bubble-in {
  align-self: flex-start;
  background: #1e293b;
  color: #f8fafc;
  border-bottom-left-radius: 4px;
}
.rs-chat-bubble.rs-bubble-out {
  align-self: flex-end;
  background: #ff641e;
  color: #fff;
  border-bottom-right-radius: 4px;
}
.rs-bubble-meta {
  font-size: 10px;
  opacity: 0.75;
  margin-top: 4px;
  display: block;
}
.rs-chat-empty {
  text-align: center;
  color: #64748b;
  font-size: 12px;
  margin: auto;
  padding: 20px;
}

.rs-chat-input-bar {
  display: flex;
  gap: 8px;
  padding: 12px 14px;
  background: #1e293b;
  border-top: 1px solid #334155;
}
.rs-chat-input-bar input {
  flex: 1;
  padding: 10px 14px;
  background: #0f172a;
  border: 1px solid #334155;
  border-radius: 10px;
  color: #f8fafc;
  font-size: 13px;
}
.rs-chat-input-bar input:focus {
  border-color: #ff641e;
  outline: none;
}
.rs-btn-send {
  background: #ff641e;
  color: #fff;
  border: none;
  padding: 0 18px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}

/* ==========================================================================
   CUSTOM LEAFLET MARKERS & RADAR PULSE
   ========================================================================== */
.rs-marker-customer-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rs-cust-pin {
  width: 38px;
  height: 38px;
  background: #ef4444;
  border: 3px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
  z-index: 5;
}
.rs-radar-pulse {
  position: absolute;
  width: 70px;
  height: 70px;
  background: rgba(239, 68, 68, 0.35);
  border-radius: 50%;
  animation: rs-radar 2s infinite ease-out;
  z-index: 1;
}

@keyframes rs-radar {
  0% { transform: scale(0.5); opacity: 0.9; }
  100% { transform: scale(1.6); opacity: 0; }
}

.rs-driver-pin {
  width: 42px;
  height: 42px;
  background: #ff641e;
  border: 3px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 6px 18px rgba(255, 100, 30, 0.5);
  transition: all 0.5s ease-out;
}

.rs-shop-pin {
  width: 32px;
  height: 32px;
  background: #1e293b;
  border: 2px solid #ff641e;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

/* Header Toggle Button */
.rs-header-toggle-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #f1f5f9;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 0;
  flex-shrink: 0;
}
.rs-header-toggle-btn:hover {
  background: rgba(255, 100, 30, 0.3);
  border-color: #ff641e;
  color: #ff9a59;
}
.rs-float-header.is-collapsed {
  max-width: max-content;
  padding: 6px 14px;
}
.rs-float-header.is-collapsed .rs-back-btn,
.rs-float-header.is-collapsed .rs-live-indicator,
.rs-float-header.is-collapsed .rs-btn-hotline,
.rs-float-header.is-collapsed .rs-header-jobs-btn,
.rs-float-header.is-collapsed .rs-header-workshop-link {
  display: none !important;
}
.rs-float-header.is-collapsed .rs-header-toggle-btn {
  transform: rotate(180deg);
}

/* Bulletproof Toast (Zero vertical stretching on mobile & desktop) */
#rs-toast,
.rs-toast {
  position: fixed !important;
  top: 16px !important;
  bottom: auto !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 99999 !important;
  background: rgba(15, 23, 42, 0.96) !important;
  color: #f8fafc !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-left: 4px solid #ff641e !important;
  border-radius: 9999px !important;
  padding: 10px 22px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
  max-width: min(92vw, 460px) !important;
  width: max-content !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: max-content !important;
  pointer-events: auto;
  white-space: normal;
  text-align: center;
}

/* Customer GPS Marker Radar Pulse Animation */
.rs-gps-radar-pin {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ff641e;
  border: 3px solid #ffffff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.rs-gps-radar-pin::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 58px;
  height: 58px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(255, 100, 30, 0.25);
  border: 1.5px solid rgba(255, 100, 30, 0.6);
  animation: rs-radar-wave 2s infinite ease-out;
  pointer-events: none;
}
@keyframes rs-radar-wave {
  0% { transform: translate(-50%, -50%) scale(0.3); opacity: 1; }
  75% { transform: translate(-50%, -50%) scale(1.6); opacity: 0.2; }
  100% { transform: translate(-50%, -50%) scale(2.0); opacity: 0; }
}

/* Dialog Head */
.rs-dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.rs-dialog-close {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
}

/* Completed Box Styling */
.rs-completed-box {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.16), rgba(15, 23, 42, 0.95));
  border: 1.5px solid #10b981;
  border-radius: 14px;
  padding: 16px;
  margin: 14px 0;
  text-align: center;
}
.rs-btn-finish {
  background: #10b981 !important;
  border-color: #10b981 !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 12px 18px !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35) !important;
}
.rs-btn-finish:hover {
  background: #059669 !important;
  border-color: #059669 !important;
}

/* Responsive adjustments for mobile screens */
@media (max-width: 640px) {
  .rs-float-header {
    top: 6px;
    left: 8px;
    right: 8px;
    padding: 4px 8px;
    border-radius: 12px;
    gap: 6px;
    height: 38px;
    min-height: 38px;
    max-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    overflow: hidden;
  }
  .rs-header-left {
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
  }
  .rs-header-right {
    gap: 5px;
    align-items: center;
    flex-shrink: 0;
  }
  .rs-back-btn {
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 14px;
    flex-shrink: 0;
  }
  .rs-back-label { display: none !important; }
  .rs-top-brand {
    gap: 6px;
    align-items: center;
  }
  .rs-brand-text {
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
  }
  .rs-live-indicator {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 8px;
    white-space: nowrap;
  }
  .rs-btn-hotline {
    width: 28px;
    height: 28px;
    padding: 0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
  }
  .rs-hotline-text { display: none !important; }
  .rs-header-jobs-btn {
    height: 28px;
    padding: 0 8px;
    font-size: 11px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 28px;
  }
  .rs-header-workshop-link { display: none !important; }
  .rs-header-toggle-btn {
    width: 26px;
    height: 26px;
    font-size: 10px;
    border-radius: 8px;
    flex-shrink: 0;
  }
  .rs-badge {
    padding: 1px 5px;
    font-size: 9.5px;
    margin-left: 2px;
  }
  .rs-float-demo-banner {
    top: 48px;
    font-size: 10.5px;
    padding: 3px 8px;
    max-width: calc(100vw - 16px);
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Repositioned Map Controls: Below 38px header */
  .rs-map-controls {
    right: 8px;
    top: 48px;
    z-index: 90 !important;
    gap: 6px;
  }
  .rs-ctrl-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    padding: 2px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
  }
  .rs-ctrl-icon { font-size: 15px; margin-bottom: 0; }
  .rs-ctrl-text { font-size: 7.5px; white-space: nowrap; }

  /* Floating GPS pill in booking mode: on the left side, never overlaps controls */
  .rs-float-pill {
    top: 48px;
    left: 8px;
    transform: none;
    font-size: 10.5px;
    padding: 5px 10px;
    max-width: calc(100vw - 60px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 85;
  }

  .rs-sheet { max-height: 82vh; border-radius: 18px 18px 0 0; }
  .rs-form-grid-2 { grid-template-columns: 1fr; }
  .rs-service-grid { grid-template-columns: 1fr; }
  .rs-chat-drawer { max-width: 100%; border-radius: 18px 18px 0 0; }
  .leaflet-top.leaflet-left { display: none !important; }
}