/* ห้องน้ำใกล้ฉัน — 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. */
.loogo{display:block;width:100%;border:0;border-radius:1.1rem;cursor:pointer;
  padding:1.15rem 1rem;font:700 1.35rem/1.25 var(--face-th),system-ui,sans-serif;
  color:#fff;background:linear-gradient(160deg,#D4552C,#A8371A);
  box-shadow:0 .55rem 1.3rem rgba(168,55,26,.28);letter-spacing:.01em}
.loogo:hover{filter:brightness(1.06)}
.loogo:active{transform:translateY(1px)}
.loogo:focus-visible{outline:3px solid #2A1E16;outline-offset:3px}
.loogo[disabled]{opacity:.6;cursor:progress}
.loostate{margin:.6rem 0 0;font-size:1rem;min-height:1.4em}
.loostate.err{color:#8C2A12;font-weight:600}

/* 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}
.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){.loogo:active{transform:none}}