/* ห้องน้ำใกล้ฉัน — read at arm's length, in a hurry, one-handed.
   Type is deliberately larger than the rest of the site and the tap targets
   are deliberately bigger than they need to be on a desktop. */

/* ใส่ไว้ที่หน้าจอโฮม — the door to the app, at the size of an offer rather
   than the size of a footnote. */
.looapp{margin:1rem 0 1.2rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem}
.looappgo{display:inline-flex;align-items:center;min-height:44px;padding:.4rem 1.1rem;
 border-radius:999px;border:2px solid var(--ant);background:var(--ant);color:#fff;
 text-decoration:none;font-weight:600}
.looappgo:hover,.looappgo:focus-visible{background:var(--ant-dark);border-color:var(--ant-dark);color:#fff}
.looapk{font-size:.85rem;color:var(--mute)}
/* The starting-point bar. It used to be one enormous button whose only job
   was to raise a permission dialog; it is now four equal doors, and the page
   behind it already works. */
.looorigin{margin:.2rem 0 0;padding:.9rem 1rem .95rem;border:1px solid #E4D8C4;
  border-radius:1rem;background:linear-gradient(160deg,rgba(255,253,248,.92),rgba(250,244,233,.86));
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  box-shadow:0 .4rem 1rem rgba(107,88,74,.07)}
.looways{display:flex;flex-wrap:wrap;gap:.5rem;align-items:stretch;margin-top:.5rem}
.loofind{flex:0 0 auto;border:0;border-radius:.9rem;cursor:pointer;
  padding:.85rem 1.1rem;font:700 1.08rem/1.2 var(--face-th),system-ui,sans-serif;
  color:#fff;background:linear-gradient(160deg,#D4552C,#A8371A);
  box-shadow:0 .4rem .9rem rgba(168,55,26,.26);letter-spacing:.01em;
  transition:transform .12s ease,filter .12s ease,box-shadow .12s ease}
.loofind:hover{filter:brightness(1.06);transform:translateY(-1px);
  box-shadow:0 .6rem 1.2rem rgba(168,55,26,.32)}
.loofind:active{transform:translateY(1px) scale(.985)}
.loofind:focus-visible{outline:3px solid #2A1E16;outline-offset:3px}
.loofind[disabled]{opacity:.6;cursor:progress}
.loosearchwrap{flex:1 1 12rem;display:block;min-width:0}
#loosearch{width:100%;box-sizing:border-box;border:1.5px solid #C9B79B;
  border-radius:.9rem;padding:.85rem .95rem;background:#FFF;color:#2A1E16;
  font:500 1.05rem/1.2 var(--face-th),system-ui,sans-serif;
  transition:border-color .12s ease,box-shadow .12s ease}
#loosearch:focus{outline:0;border-color:#D4552C;box-shadow:0 0 0 3px rgba(212,85,44,.18)}
.loohits{margin:.5rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.4rem}
.loohits button{border:1.5px solid #C9B79B;border-radius:2rem;background:#FFF;
  padding:.45rem .9rem;cursor:pointer;font:600 .98rem/1.2 var(--face-th),system-ui,sans-serif;
  color:#2A1E16;transition:transform .12s ease,border-color .12s ease}
.loohits button:hover{border-color:#D4552C;transform:translateY(-1px)}
.loohits .loomiss{color:#6B584A;font-size:.95rem;padding:.3rem 0}
.loostate{margin:0;font-size:1rem;min-height:1.4em}
.loostate.err{color:#8C2A12;font-weight:600}
/* Not-an-error. The list behind this note is still sorted and still usable,
   so it must not wear the colour that means something broke. */
.loostate.soft{color:#6B584A}

/* The pre-prompt. Deliberately small and plain: it is a question, not a
   marketing interstitial, and it must be readable before it is dismissed. */
.loogate{position:fixed;inset:0;z-index:60;display:flex;align-items:center;
  justify-content:center;padding:1.1rem;background:rgba(42,30,22,.45);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.loogate[hidden]{display:none}
.loogatebox{max-width:24rem;background:#FFFDF8;border:1px solid #E4D8C4;
  border-radius:1rem;padding:1.1rem 1.15rem;box-shadow:0 1rem 2.4rem rgba(42,30,22,.3)}
.loogatebox b{display:block;font-size:1.12rem;margin-bottom:.4rem}
.loogatebox p{margin:0 0 .9rem;font-size:1rem;line-height:1.45}
/* Stacked, not side-by-side. Both labels carry their Thai and their English,
   which at 375px is wider than half a dialog — the primary button ran off
   the edge of the box. Full width also gives the bigger tap target this
   site's type sizes are already asking for. */
.loogateacts{display:flex;flex-direction:column;gap:.5rem}
.loogateacts button{width:100%;text-align:center}
.loogateno{border:1.5px solid #C9B79B;border-radius:.9rem;background:#FFF;
  padding:.85rem 1.1rem;cursor:pointer;color:#2A1E16;
  font:600 1.05rem/1.2 var(--face-th),system-ui,sans-serif}
.loogateno:hover{border-color:#8C7A63}

/* The which-way panel. Capped so it never eats the results it is there to
   help you reach — direction is a glance, the list is the answer. */
.loomap{margin:.9rem 0 .2rem}
.loomap:empty{display:none}
.loomapsvg{display:block;width:100%;max-width:20rem;height:auto;margin:0 auto}
.loopin{cursor:pointer}
.loopin:hover circle{filter:brightness(1.12)}
.loopin:focus-visible{outline:2px solid #2A1E16;outline-offset:2px}
.loorow.loohit{background:#FBEBD0;border-radius:.6rem}
@media (prefers-reduced-motion:no-preference){
  .loorow{transition:background .35s ease}
}
.loofilters{display:flex;flex-wrap:wrap;gap:.45rem;margin:1rem 0 .2rem}
.loofilters button{cursor:pointer;border:1.5px solid #C9B79B;background:#FFFDF8;
  border-radius:2rem;padding:.5rem .95rem;font:600 .98rem/1 var(--face-th),system-ui,sans-serif;
  color:#2A1E16}
.loofilters button[aria-pressed=true]{background:#2A1E16;border-color:#2A1E16;color:#FAF3E7}

.loolist{list-style:none;margin:.9rem 0 0;padding:0}
.loorow{display:flex;gap:.8rem;align-items:flex-start;padding:.95rem .2rem;
  border-bottom:1px solid #E4D8C4}
.loorow:first-child{border-top:1px solid #E4D8C4}
.lootier{flex:0 0 auto;font-size:1.9rem;line-height:1.1;width:2.2rem;text-align:center}
.loobody{flex:1 1 auto;min-width:0}
.looname{font-size:1.18rem;line-height:1.3;display:block}
.looname a{text-decoration:none;color:inherit;border-bottom:2px solid #E0CDAE}
.looname a:hover{border-bottom-color:#A8371A}
.loometa{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center;margin:.3rem 0 0}
.lookline{flex-basis:100%;padding:.3rem .2rem 0}
.loodist{font-weight:700;font-size:1.12rem}
.loowalk{font-size:.9rem;color:#4A3B30}
.loochip{font-size:.86rem;border-radius:2rem;padding:.18rem .6rem;
  border:1.5px solid #C9B79B;background:#FFFDF8;white-space:nowrap}
.loochip.free{background:#DCEFD2;border-color:#8FBF77;font-weight:700}
.loochip.fee{background:#FBEBD0;border-color:#D9A441;font-weight:700}
.loochip.cust{background:#EDE7F5;border-color:#A99BC6}
.loochip.open{background:#DCEFD2;border-color:#8FBF77}
.loochip.shut{background:#F0E7E2;border-color:#C4A79A}
.loochip.sure{background:#2A1E16;border-color:#2A1E16;color:#FAF3E7;font-weight:700}
.loochip.wc{background:#DEE6F4;border-color:#8FA5CC}
.loobasis{margin:.4rem 0 0;font-size:.94rem;line-height:1.5;color:#4A3B30}
.looacts{margin:.45rem 0 0;font-size:.95rem}
.looacts a{margin-right:.75rem;white-space:nowrap}
/* The ticks. Same closed vocabulary as LINE and the worker, five buttons, no
   typing — the whole report is one tap and it says thank you on the spot. */
.looticks{display:flex;flex-wrap:wrap;gap:.4rem;margin:.55rem 0 .1rem;
  padding:.55rem;border:1.5px dashed #C9B79B;border-radius:.7rem;background:#FFFDF8}
.looticks button{cursor:pointer;border:1.5px solid #C9B79B;background:#FFF;
  border-radius:2rem;padding:.45rem .8rem;font:600 .92rem/1 var(--face-th),system-ui,sans-serif;
  color:#2A1E16}
.looticks button:hover{background:#DCEFD2;border-color:#8FBF77}
.looticks button[disabled]{opacity:.5;cursor:progress}
.lookthx{font-weight:700;color:#3F6B2B;padding:.45rem .2rem}
.lookerr{font-weight:600;color:#8C2A12;padding:.45rem .2rem;flex-basis:100%}
.loomore{margin:1.1rem 0 0}
.loomore button{cursor:pointer;width:100%;border:1.5px dashed #C9B79B;background:#FFFDF8;
  border-radius:.9rem;padding:.85rem 1rem;font:600 1.05rem/1.3 var(--face-th),system-ui,sans-serif;
  color:#2A1E16}
/* Nested inside the origin bar now, so it drops the box it used to draw
   around itself — a card inside a card reads as two unrelated things. */
.looorigin .loonear{margin:.75rem 0 0;padding:.75rem 0 0;border:0;
  border-top:1px dashed #E4D8C4;border-radius:0;background:none}
/* Once the location door is gone for good, the picker is the whole control
   rather than the alternative to one, and it says so by standing alone. */
.looorigin.sole .loonear{border-top:0;padding-top:.2rem}
.loonear{margin:1.2rem 0 0;padding:.9rem 1rem;border:1px solid #E4D8C4;
  border-radius:.9rem;background:#FFFDF8}
.loonear ul{margin:.5rem 0 0;padding:0;list-style:none;display:flex;
  flex-wrap:wrap;gap:.45rem}
.loonear a{display:inline-block;border:1.5px solid #C9B79B;border-radius:2rem;
  padding:.45rem .9rem;background:#FFF;text-decoration:none}
.tiertable{width:100%;border-collapse:collapse;margin:.8rem 0}
.tiertable th,.tiertable td{text-align:left;vertical-align:top;padding:.55rem .5rem;
  border-bottom:1px solid #E4D8C4;font-size:.96rem}
.tiertable th{font-size:.86rem;text-transform:uppercase;letter-spacing:.04em;color:#6B584A}
.tiertable td.tk{white-space:nowrap;font-weight:700}
@media (max-width:34rem){
  .tiertable thead{display:none}
  .tiertable tr{display:block;border-bottom:1px solid #E4D8C4;padding:.4rem 0}
  .tiertable td{display:block;border:0;padding:.2rem .1rem}
}
@media (prefers-reduced-motion:reduce){
  .loofind,.loohits button{transition:none}
  .loofind:hover,.loofind:active,.loohits button:hover{transform:none}
}