/* App Tabs 1.1.3: one location row (Near me + city/ZIP + Show food + radius chips)
   and Open now beside Food type. Distance label on cards when a radius is set.
   Does not touch ads, consent, or BWG. Layout does not depend on Elementor container order. */

/* Visual order: location row, chips, Food type + Open now, then the existing hint/card/actions. */
.wtf-deck.wtf-deck--merged-loc{display:flex;flex-direction:column}
.wtf-deck.wtf-deck--merged-loc .wtf-deck__area{order:0}
.wtf-deck.wtf-deck--merged-loc .wtf-deck__filters{order:1}
.wtf-deck.wtf-deck--merged-loc .wtf-deck__category{order:2}
.wtf-deck.wtf-deck--merged-loc .wtf-deck__hint{order:3}
.wtf-deck.wtf-deck--merged-loc .wtf-deck__stage{order:4}
.wtf-deck.wtf-deck--merged-loc .wtf-deck__status{order:5}
.wtf-deck.wtf-deck--merged-loc .wtf-deck__actions{order:6}

/* Hide the older Find me control; Near me in the same row replaces it. */
.wtf-deck.wtf-deck--merged-loc [data-wtf-findme],
.wtf-deck.wtf-deck--merged-loc .wtf-findme__status{display:none!important}

/* Location row: [Near me / Use my location] or [city-or-ZIP] [Show food] */
.wtf-deck.wtf-deck--merged-loc .wtf-deck__area{
  display:grid;
  grid-template-columns:auto auto minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  justify-content:center;
  justify-items:center;
  width:100%;
  max-width:100%;
  margin:0;
}
.wtf-deck.wtf-deck--merged-loc .wtf-deck__area label{grid-column:1/-1;width:auto;margin:0;font-size:.9rem;line-height:1.4;text-align:center}
.wtf-deck.wtf-deck--loc-b .wtf-deck__area label{font-weight:700;color:#1a1a1a}
.wtf-loc__or{font:600 .9rem/1 system-ui,sans-serif;color:#555;padding:0 2px;user-select:none;white-space:nowrap}
.wtf-deck.wtf-deck--merged-loc .wtf-deck__area input{
  flex:none;width:100%;min-width:0;max-width:none;min-height:44px;padding:10px;font-size:16px;border:1px solid #999;border-radius:8px
}
.wtf-deck.wtf-deck--merged-loc .wtf-deck__area .wtf-btn{
  flex:none;width:auto!important;min-height:44px;padding:8px 14px!important;white-space:nowrap;
  background:#333!important;color:#fff!important;opacity:1;border:0
}
.wtf-deck.wtf-deck--merged-loc .wtf-deck__area .wtf-loc__near{
  background:#FFC72C!important;color:#1A1A1A!important;font-weight:700;border:0
}
.wtf-deck.wtf-deck--merged-loc .wtf-deck__area .wtf-loc__near:disabled{opacity:.7}

/* Chips + status sit directly under the location row. */
.wtf-deck__filters{order:1;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;justify-content:center;text-align:center;margin:0 0 4px;font:500 .95rem/1.3 system-ui,sans-serif;color:#1a1a1a}
.wtf-loc{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:center;width:100%}
.wtf-loc .wtf-btn{min-height:40px;padding:8px 12px!important;width:auto!important}
.wtf-loc__active{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;justify-content:center;width:100%}
.wtf-loc__active[hidden]{display:none}
.wtf-loc__label{width:100%;font-size:.9rem;color:#333;text-align:center}
.wtf-loc__chips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;flex:1 1 100%}
.wtf-chip{border-radius:999px!important;border:1px solid #9b3b0b!important;background:#fff!important;color:#9b3b0b!important;min-height:36px!important;padding:6px 12px!important;flex:none}
.wtf-chip[aria-pressed="true"]{background:#9b3b0b!important;color:#fff!important}
.wtf-loc__clear{background:transparent!important;color:#333!important;text-decoration:underline;border:0;min-height:36px!important;flex:1 1 100%;margin-left:0!important;width:auto;display:flex;justify-content:center}
.wtf-loc__status{width:100%;margin:2px 0;font-size:14px;color:#333;text-align:center}
.wtf-loc__status:empty{display:none}

/* Open now sits on the Food type row. */
.wtf-open-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;user-select:none;position:relative;flex:0 0 auto;margin-left:0}
.wtf-open-toggle input{position:absolute;opacity:0;width:1px;height:1px}
.wtf-open-toggle__track{width:44px;height:26px;border-radius:13px;background:#c9c2bc;position:relative;transition:background .15s;flex:none}
.wtf-open-toggle__track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.3);transition:transform .15s}
.wtf-open-toggle input:checked + .wtf-open-toggle__track{background:#1f7a3a}
.wtf-open-toggle input:checked + .wtf-open-toggle__track::after{transform:translateX(18px)}
.wtf-open-toggle input:focus-visible + .wtf-open-toggle__track{outline:3px solid #FFC72C;outline-offset:2px}
.wtf-open-toggle__text{font-weight:700}
.wtf-deck.wtf-deck--merged-loc .wtf-deck__category{
  display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:center;margin:0
}
.wtf-deck.wtf-deck--merged-loc .wtf-deck__category label{flex:0 1 auto;width:auto;margin:0}
.wtf-deck.wtf-deck--merged-loc .wtf-deck__category-select{flex:1 1 12rem;min-width:0;width:auto;max-width:22rem}

@media (max-width:767px){
  .wtf-deck.wtf-deck--merged-loc .wtf-deck__area{order:0!important;margin:0!important;grid-template-columns:auto auto minmax(80px,1fr) auto;gap:6px;justify-content:center;justify-items:center}
  .wtf-deck.wtf-deck--merged-loc .wtf-deck__area label{grid-column:1/-1}
  .wtf-deck.wtf-deck--merged-loc .wtf-deck__area input{font-size:16px!important}
  .wtf-deck.wtf-deck--merged-loc .wtf-deck__area .wtf-btn{padding-left:12px!important;padding-right:12px!important}
  /* B's longer button wraps onto its own row so the input and Show food stay usable. */
  .wtf-deck.wtf-deck--loc-b .wtf-deck__area{grid-template-columns:auto minmax(0,1fr) auto}
  .wtf-deck.wtf-deck--loc-b .wtf-loc__near{grid-column:1/-1;justify-self:center}
  .wtf-deck.wtf-deck--loc-b .wtf-loc__or{grid-column:1}
  .wtf-deck.wtf-deck--merged-loc .wtf-deck__filters{order:1!important;margin:0!important}
  .wtf-deck.wtf-deck--merged-loc .wtf-deck__category{order:2!important;margin:0!important}
  .wtf-deck.wtf-deck--merged-loc .wtf-deck__hint{order:3!important}
  .wtf-deck.wtf-deck--merged-loc .wtf-deck__stage{order:4!important}
  .wtf-deck.wtf-deck--merged-loc .wtf-deck__status{order:5!important}
  .wtf-deck.wtf-deck--merged-loc .wtf-deck__actions{order:6!important}
  .wtf-deck.wtf-deck--merged-loc .wtf-deck__category label{flex:0 0 auto;order:1}
  .wtf-deck.wtf-deck--merged-loc .wtf-open-toggle{order:2;margin-left:0}
  .wtf-deck.wtf-deck--merged-loc .wtf-deck__category-select{flex:1 1 100%;order:3;width:100%;max-width:22rem;margin-inline:auto}
}

/* 1.1.2: distance on a card when a radius/location is set (e.g. "2.3 mi"). */
.wtf-card__distance{position:absolute;left:12px;bottom:12px;z-index:4;padding:4px 8px;border-radius:999px;background:rgba(0,0,0,.62);color:#fff;font:700 .85rem/1.2 system-ui,sans-serif;letter-spacing:.01em;pointer-events:none;text-shadow:0 1px 1px rgba(0,0,0,.4)}
.wtf-card--next .wtf-card__distance{font-size:.75rem;padding:3px 7px;opacity:.9}

/* 1.1.4: "Found You!" toast after a successful Use my location.
   In the flow between the radius chips and Food type, so it never covers the card or the dropdown. */
.wtf-found-you-wrap{order:2;display:flex;justify-content:center;align-items:center;min-height:0;margin:0;pointer-events:none}
.wtf-found-you{
  box-sizing:border-box;max-width:calc(100% - 16px);margin:0;padding:0 16px;
  border-radius:999px;background:#FFC72C;color:#1A1A1A;
  font:700 1rem/1.3 system-ui,sans-serif;letter-spacing:.01em;text-align:center;
  box-shadow:0 2px 10px rgba(26,26,26,.2);
  opacity:0;visibility:hidden;max-height:0;overflow:hidden;white-space:nowrap;pointer-events:none;
  transition:opacity .25s ease,visibility .25s ease,max-height .25s ease,padding .25s ease,margin .25s ease
}
.wtf-found-you.is-on{opacity:1;visibility:visible;max-height:48px;padding:8px 16px;margin:2px 0 4px}
.wtf-found-you:empty{display:none;max-height:0;padding:0;margin:0;box-shadow:none}
@media (prefers-reduced-motion:reduce){
  .wtf-found-you{transition:none}
}
@media (max-width:767px){
  .wtf-found-you.is-on{font-size:.95rem;padding:8px 14px}
  .wtf-found-you-wrap{order:2!important}
}
