:root{
  --bg:#f6f7fb;
  --card:#fff;
  --text:#0f172a;
  --muted:rgba(15,23,42,.62);
  --line:rgba(15,23,42,.10);
  --shadow:0 10px 22px rgba(15,23,42,.06);
  --orange:#ff7a1a;
}

*{ box-sizing:border-box; }

body.sloc-page{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}

/* ✅ lock background scroll while modal open */
body.sloc-page.is-modalOpen{
  overflow:hidden;
  height:100vh;
}

.sloc-top{
  position:sticky; top:0; z-index:50;
  background:#fff;
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:10px;
  padding:12px;
}
.sloc-back{
  width:40px;height:40px;border-radius:12px;
  display:grid;place-items:center;
  border:1px solid var(--line);
  background:#fff;
  text-decoration:none;
  color:var(--text);
  font-weight:900;
}
.sloc-title{ font-weight:900; letter-spacing:-0.2px; }

.sloc-wrap{ max-width:520px; margin:0 auto; padding:12px; }

.sloc-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:12px;
}
.sloc-searchRow{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
}
.sloc-ico{ opacity:.7; }
.sloc-search{
  border:none; outline:none; width:100%;
  font-weight:700; background:transparent;
}

.sloc-actions{ margin-top:10px; display:flex; flex-direction:column; gap:10px; }
.sloc-action{
  width:100%;
  border:none;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  display:flex; align-items:center; justify-content:space-between;
  cursor:pointer;
}
.sloc-actionLeft{ display:flex; align-items:center; gap:10px; font-weight:900; color:rgba(15,23,42,.85); }
.sloc-plus{
  width:26px;height:26px;border-radius:10px;
  display:grid;place-items:center;
  background:#f1f5f9; border:1px solid rgba(0,0,0,.06);
}
.sloc-arrow{ opacity:.55; font-weight:900; font-size:18px; }
.sloc-precise{ font-size:12px; font-weight:800; color:rgba(15,23,42,.62); padding:0 2px; }

.sloc-saved{ margin-top:14px; }
.sloc-savedTitle{
  font-weight:900; font-size:12px; color:rgba(15,23,42,.55);
  margin-bottom:8px; padding:0 2px;
}
.sloc-savedList{ display:flex; flex-direction:column; gap:10px; }
.sloc-savedCard{
  width:100%;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:12px;
  display:flex; gap:12px;
  text-align:left;
  cursor:pointer;
}
.sloc-savedIco{
  width:38px;height:38px;border-radius:14px;
  display:grid;place-items:center;
  background:#fff7ed;
  border:1px solid rgba(255,122,26,.22);
}
.sloc-savedBody{ flex:1; min-width:0; }
.sloc-savedName{ font-weight:900; font-size:13px; }
.sloc-savedAddr{ margin-top:4px; color:rgba(15,23,42,.68); font-weight:700; font-size:12.5px; line-height:1.3; }
.sloc-edit{ margin-top:6px; font-weight:900; font-size:12px; color:var(--orange); }
.sloc-empty{
  padding:12px; background:#fff; border:1px solid var(--line); border-radius:16px;
  color:var(--muted); font-weight:800;
}

/* =======================
   Modal
======================= */
.sloc-modal{
  position:fixed; inset:0;
  display:none;
  z-index:1000;
}
.sloc-modal.is-open{ display:block; }
.sloc-backdrop{
  position:absolute; inset:0;
  background:rgba(2,6,23,.55);
}
.sloc-panel{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(520px, calc(100% - 18px));
  max-height: calc(100dvh - 24px);
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 20px 50px rgba(2,6,23,.35);
  display:flex;
  flex-direction:column;
}
.sloc-panelTop{
  padding:12px;
  border-bottom:1px solid var(--line);
  background:#fff;
  position:relative;
}
.sloc-x{
  position:absolute; right:10px; top:8px;
  width:40px; height:40px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  font-size:20px;
  font-weight:900;
  cursor:pointer;
}
.sloc-panelSearch{
  display:flex; gap:10px; align-items:center;
  border:1px solid var(--line);
  border-radius:14px;
  padding:10px 12px;
  min-height:48px; /* ✅ stability */
}
.sloc-panelSearch input{
  width:100%;
  border:none; outline:none;
  font-weight:700;
  background:transparent;
}

/* ✅ Results overlay (NO shaking / NO pushing map) */
.sloc-modalResults{
  position:absolute;
  left:12px;
  right:12px;
  top:72px;
  margin-top:0;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:auto;
  max-height:240px;
  background:#fff;
  z-index:50;
  box-shadow:0 18px 40px rgba(2,6,23,.18);
}

/* Map */
.sloc-mapWrap{
  position:relative;
  height:360px;
  background:#eef2ff;
}
#slocMap{ width:100%; height:100%; }

.sloc-mapInfo{
  padding:12px;
  border-top:1px solid var(--line);
  background:#fff;
}
.sloc-mapLabel{
  font-weight:900;
  font-size:13px;
  color:rgba(15,23,42,.85);
}
.sloc-mapBtn{
  margin-top:10px;
  width:100%;
  border:1px solid var(--line);
  background:#fff;
  border-radius:14px;
  padding:12px;
  font-weight:900;
  cursor:pointer;
}

.sloc-confirmBtn{
  border:none;
  background:#16a34a;
  color:#fff;
  font-weight:900;
  padding:14px;
  cursor:pointer;
}

/* result item */
.sloc-rItem{
  width:100%;
  text-align:left;
  border:none;
  padding:12px;
  background:#fff;
  cursor:pointer;
  font-weight:700;
  border-bottom:1px solid var(--line);
}
.sloc-rItem:last-child{ border-bottom:none; }

/* Form modal */
.sloc-panelForm{ max-height:92vh; }
.sloc-formTitle{ font-weight:900; padding:10px 4px 0; }

.sloc-form{
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.sloc-form input{
  width:100%;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--line);
  outline:none;
  font-weight:700;
}
.sloc-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media (max-width:420px){ .sloc-grid2{ grid-template-columns:1fr; } }

.sloc-tabs{
  display:flex; gap:10px;
}
.sloc-tab{
  flex:1;
  border:1px solid var(--line);
  background:#fff;
  border-radius:14px;
  padding:10px;
  font-weight:900;
  cursor:pointer;
}
.sloc-tab.is-active{
  border-color: rgba(255,122,26,.35);
  box-shadow:0 0 0 3px rgba(255,122,26,.12);
}

.sloc-picked{
  position:relative;
  border:1px solid var(--line);
  border-radius:14px;
  padding:12px;
  background:#fff;
}
.sloc-pickedLbl{
  font-weight:900;
  font-size:12px;
  color:rgba(15,23,42,.55);
}
.sloc-pickedVal{
  margin-top:6px;
  font-weight:800;
  font-size:12.5px;
  color:rgba(15,23,42,.80);
  padding-right:84px;
}
.sloc-change{
  position:absolute;
  right:10px; top:50%;
  transform:translateY(-50%);
  border:none;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:8px 10px;
  font-weight:900;
  cursor:pointer;
  color:var(--orange);
}

.sloc-subHead{
  font-weight:900;
  color:rgba(15,23,42,.70);
  font-size:12px;
  margin-top:2px;
}

.sloc-saveBtn{
  width:100%;
  border:none;
  border-radius:16px;
  padding:14px;
  background:#16a34a;
  color:#fff;
  font-weight:900;
  cursor:pointer;
}

.sloc-msg{
  font-weight:900;
  font-size:13px;
  color:rgba(15,23,42,.70);
}

/* ===== Blue Dot (GPS) ===== */
.sloc-blueDot{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:18px;
  height:18px;
  pointer-events:none;
  z-index: 450;
}
.sloc-blueDot__dot{
  position:absolute;
  inset:0;
  border-radius:999px;
  background:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,.25);
  border:2px solid #fff;
}
.sloc-blueDot__pulse{
  position:absolute;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:44px;
  height:44px;
  border-radius:999px;
  background:rgba(37,99,235,.18);
  animation: slocPulse 1.8s infinite ease-in-out;
}
@keyframes slocPulse{
  0%{ transform:translate(-50%,-50%) scale(.85); opacity:.85; }
  70%{ transform:translate(-50%,-50%) scale(1.15); opacity:.35; }
  100%{ transform:translate(-50%,-50%) scale(1.25); opacity:0; }
}
.sloc-savedIco{
  width:44px;
  height:44px;
  border-radius:16px;
  display:grid;
  place-items:center;

  /* premium orange tile */
  background: linear-gradient(180deg, rgba(255,122,26,.12), rgba(255,122,26,.06));
  border: 1px solid rgba(255,122,26,.22);
  box-shadow:
    0 10px 18px rgba(15,23,42,.06),
    inset 0 1px 0 rgba(255,255,255,.9);

  color: var(--orange);
}

.sloc-icoSvg{
  width:22px;
  height:22px;
  display:block;
}
/* Better spacing + tap feel */
.sloc-savedCard{
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.sloc-savedCard:active{
  transform: scale(.99);
}

.sloc-savedCard:hover{
  border-color: rgba(255,122,26,.22);
  box-shadow: 0 14px 28px rgba(15,23,42,.10);
}

/* Make SELECT look like a real CTA */
.sloc-edit{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,122,26,.25);
  background: rgba(255,122,26,.08);
  width: fit-content;
}
.sloc-selectedTag{
  margin-left:10px;
  font-size:12px;
  font-weight:800;
  padding:4px 8px;
  border-radius:999px;
  background:#fff2e7;
  color:#ff6a00;
  border:1px solid #ffd4b8;
}



/* keep cards inside screen */
.sloc-wrap{ max-width:520px; margin:0 auto; padding:12px; overflow-x:hidden; }

/* card layout never overflows */
.sloc-savedCard{
  width:100%;
  display:flex;
  gap:12px;
  align-items:flex-start;
  text-align:left;
  cursor:pointer;

  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:var(--shadow);
  padding:12px;

  overflow:hidden;              /* ✅ prevents attribute text spill */
}

/* body is allowed to shrink (important on mobile) */
.sloc-savedBody{
  flex:1;
  min-width:0;                 /* ✅ critical */
}

/* address wraps nicely */
.sloc-savedAddr{
  margin-top:6px;
  color:rgba(15,23,42,.70);
  font-weight:700;
  font-size:12.8px;
  line-height:1.35;

  word-break: break-word;      /* ✅ */
  overflow-wrap:anywhere;      /* ✅ */

  display:-webkit-box;         /* ✅ clamp */
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;        /* 3 lines max */
  overflow:hidden;
}

/* make SELECT pill always visible */
.sloc-edit{
  margin-top:8px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(255,122,26,.25);
  background: rgba(255,122,26,.08);
  width: fit-content;
  font-weight:900;
  font-size:12px;
  color:var(--orange);
}

/* ensure icon never shrinks */
.sloc-savedIco{
  flex:0 0 44px;
}


    /* ✅ Small action row UI (if you don't want to touch location.css right now) */
    .sloc-savedWrap{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
    .sloc-cardActions{display:flex;gap:10px;padding-left:4px}
    .sloc-miniBtn{
      border:1px solid rgba(0,0,0,.08);
      background:#fff;
      border-radius:12px;
      padding:10px 12px;
      font-weight:800;
      font-size:13px;
      cursor:pointer;
      flex:1;
    }
    .sloc-miniBtn--edit{box-shadow:0 8px 20px rgba(0,0,0,.06)}
    .sloc-miniBtn--delete{border-color:rgba(225,29,72,.20); color:#e11d48; box-shadow:0 8px 20px rgba(225,29,72,.08)}
    .slocConfirm{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;padding:18px}
    .slocConfirm__bg{position:absolute;inset:0;background:rgba(15,18,20,.55);backdrop-filter:blur(3px)}
    .slocConfirm__card{position:relative;z-index:2;width:min(380px,92vw);background:#fff;border-radius:18px;padding:16px 16px 14px;
      box-shadow:0 18px 60px rgba(0,0,0,.22);font-family:Inter,system-ui,Arial}
    .slocConfirm__title{font-weight:900;font-size:16px;color:#121417;margin:4px 0 6px}
    .slocConfirm__sub{font-size:12.5px;line-height:1.4;color:#6a7178;margin:0 0 12px}
    .slocConfirm__btns{display:flex;gap:10px}
    .slocConfirm__btn{border:0;border-radius:12px;padding:11px 12px;font-weight:900;font-size:13px;cursor:pointer;flex:1}
    .slocConfirm__btn--ghost{background:#f3f4f6;color:#222}
    .slocConfirm__btn--danger{background:#e11d48;color:#fff;box-shadow:0 10px 24px rgba(225,29,72,.18)}
/* =========================================================
   ✅ FIX: saved address card box + buttons INSIDE box
   ========================================================= */

.sloc-savedList{
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* the full box itself */
.sloc-savedCard{
  width:100%;
  text-align:left;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 10px 26px rgba(0,0,0,.06);
  padding:14px;
  cursor:pointer;
  outline:none;
}

.sloc-savedCard:focus{
  box-shadow:0 0 0 4px rgba(255,122,26,.16), 0 10px 26px rgba(0,0,0,.06);
  border-color: rgba(255,122,26,.28);
}

.sloc-savedTop{
  display:flex;
  gap:12px;
  align-items:flex-start;
}

.sloc-savedBody{
  flex:1;
  min-width:0;
}

.sloc-savedAddr{
  margin-top:6px;
  color:#2b2b2b;
  opacity:.92;
  line-height:1.35;
  font-size:13.5px;
  word-break:break-word;
}

.sloc-cardActions{
  margin-top:12px;
  display:flex;
  gap:10px;
}

.sloc-miniBtn{
  flex:1;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  border-radius:14px;
  padding:12px 12px;
  font-weight:900;
  font-size:14px;
  cursor:pointer;
}

.sloc-miniBtn:active{ transform:scale(.995); }

.sloc-miniBtn--edit{
  box-shadow:0 10px 22px rgba(0,0,0,.06);
}

.sloc-miniBtn--delete{
  border-color:rgba(225,29,72,.22);
  color:#e11d48;
  background:rgba(225,29,72,.04);
  box-shadow:0 10px 22px rgba(225,29,72,.10);
}

/* =========================================================
   ✅ FIX: current-location button "outside of box" issue
   (usually caused by overflow / width calc)
   ========================================================= */

.sloc-card{
  overflow:hidden;
}

.sloc-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.sloc-action{
  width:100%;
  box-sizing:border-box;
}

/* =========================================================
   ✅ Delete confirm premium overlay (if not already styled)
   ========================================================= */

.slocConfirm{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  padding:18px;
}

.slocConfirm__bg{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
}

.slocConfirm__card{
  position:relative;
  width:min(420px, 100%);
  border-radius:18px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 24px 70px rgba(0,0,0,.18);
  padding:16px 16px 14px;
}

.slocConfirm__title{
  font-weight:900;
  font-size:16px;
}

.slocConfirm__sub{
  margin-top:6px;
  color:#444;
  font-size:13.5px;
  line-height:1.35;
}

.slocConfirm__btns{
  display:flex;
  gap:10px;
  margin-top:12px;
}

.slocConfirm__btn{
  flex:1;
  border-radius:14px;
  padding:12px 12px;
  font-weight:900;
  cursor:pointer;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
}

.slocConfirm__btn--ghost{
  background:#fff;
}

.slocConfirm__btn--danger{
  border-color:rgba(225,29,72,.22);
  color:#fff;
  background:#e11d48;
}