/* App Tabs 1.1.9: full-screen swipe + contain/blur on the normal deck too.
   Photos use object-fit:contain (normal cards and full screen) with a blurred
   copy of the same photo filling the empty space. Full screen / close / Add photo
   (and idle Filters) are a dark semi-opaque pill so they stay readable on light
   dishes. CSS overlay is the baseline (iOS Safari + AppMySite webview); the
   Fullscreen API is used in addition when the browser supports it.
   Does not touch consent, Auto ads, or ad settings. */

.wtf-fs-enter{
  position:absolute;top:10px;right:10px;z-index:6;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-width:44px;min-height:44px;padding:8px 12px;margin:0;
  border:0;border-radius:999px;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background:rgba(0,0,0,.6)!important;color:#fff!important;-webkit-text-fill-color:#fff;
  font:700 .85rem/1 system-ui,sans-serif;
  box-shadow:0 1px 4px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.wtf-fs-enter svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;color:#fff}
.wtf-fs-enter:focus-visible{outline:3px solid #FFC72C;outline-offset:2px}
.wtf-fs-enter__label{font:700 .8rem/1 system-ui,sans-serif;letter-spacing:.01em;color:#fff!important;-webkit-text-fill-color:#fff}
.wtf-fs-enter[hidden],.wtf-deck.is-fullscreen .wtf-fs-enter{display:none!important}
.wtf-deck:not([data-state="card"]):not([data-state="ad"]):not([data-state="revealing"]) .wtf-fs-enter{display:none!important}

html.wtf-fs-open,body.wtf-fs-open{overflow:hidden!important;overscroll-behavior:none}
body.wtf-fs-locked{position:fixed;left:0;right:0;width:100%;overflow:hidden}

.wtf-deck.is-fullscreen{
  position:fixed;inset:0;z-index:100000;
  max-width:none;width:100%;height:100%;height:100dvh;min-height:100%;
  margin:0;box-sizing:border-box;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
  background:#111;color:#fff;
  display:flex;flex-direction:column;gap:0;overflow:hidden;
  isolation:isolate;
}
.wtf-deck.is-fullscreen .wtf-deck__hint,
.wtf-deck.is-fullscreen > .wtf-deck__area,
.wtf-deck.is-fullscreen > .wtf-deck__filters,
.wtf-deck.is-fullscreen > .wtf-deck__category{display:none!important}

.wtf-fs-topbar{
  order:0;flex:0 0 auto;display:none;
  box-sizing:border-box;width:100%;
  min-height:48px;padding:6px 10px;
  align-items:center;justify-content:space-between;gap:6px;
  background:linear-gradient(to bottom,rgba(0,0,0,.72),rgba(0,0,0,.28));
  color:#fff;z-index:8;
}
.wtf-deck.is-fullscreen .wtf-fs-topbar{display:flex}
.wtf-fs-topbar__start{display:flex;align-items:center;gap:6px;min-width:0;flex:1 1 auto}
.wtf-fs-filters,.wtf-fs-close,.wtf-fs-add{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:44px;margin:0;border:0;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  color:#fff!important;-webkit-text-fill-color:#fff;
  font:700 .95rem/1 system-ui,sans-serif;
  background:rgba(0,0,0,.6)!important;
  box-shadow:0 1px 4px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.wtf-fs-filters{padding:0 14px;border-radius:999px}
.wtf-fs-filters[data-count]:not([data-count="0"]){
  background:#FFC72C!important;color:#1A1A1A!important;-webkit-text-fill-color:#1A1A1A;
  box-shadow:0 1px 4px rgba(0,0,0,.35);
}
.wtf-fs-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:1.25rem;height:1.25rem;padding:0 5px;border-radius:999px;
  background:#9b3b0b;color:#fff!important;-webkit-text-fill-color:#fff;
  font:700 .75rem/1.25rem system-ui,sans-serif;
}
.wtf-fs-filters[data-count="0"] .wtf-fs-count{display:none}
.wtf-fs-close{width:44px;flex:0 0 44px;border-radius:999px;font-size:1.35rem;line-height:1;color:#fff!important;text-decoration:none}
.wtf-fs-add{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  min-height:44px;padding:0 10px;margin:0;border:0;border-radius:999px;
  appearance:none;-webkit-appearance:none;cursor:pointer;text-decoration:none;
  background:rgba(0,0,0,.6)!important;color:#fff!important;-webkit-text-fill-color:#fff;
  font:700 .82rem/1 system-ui,sans-serif;letter-spacing:.01em;white-space:nowrap;
  box-shadow:0 1px 4px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  flex:0 1 auto;min-width:0;max-width:100%;
}
.wtf-fs-add svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wtf-fs-filters:focus-visible,.wtf-fs-close:focus-visible,.wtf-fs-add:focus-visible{outline:3px solid #FFC72C;outline-offset:2px}
@media (max-width:380px){
  .wtf-fs-topbar{padding:6px 8px;gap:6px}
  .wtf-fs-filters{padding:0 10px;font-size:.85rem}
  .wtf-fs-add{padding:0 8px;font-size:.78rem;gap:4px}
}

.wtf-deck.is-fullscreen .wtf-deck__stage{
  order:1;flex:1 1 auto;aspect-ratio:auto!important;
  width:100%;height:auto!important;max-height:none!important;min-height:0;
  margin:0;
}
.wtf-deck.is-fullscreen .wtf-card{border-radius:0}
.wtf-deck.is-fullscreen .wtf-card:not(.wtf-ad-card):not(.wtf-photo-cta):not(.wtf-card--next){
  background:transparent;box-shadow:none;
}
.wtf-deck.is-fullscreen .wtf-card:not(.wtf-ad-card):not(.wtf-photo-cta) img:not(.wtf-card__blur){object-fit:contain}
.wtf-fs-blur{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(28px) saturate(1.1);transform:scale(1.14);
  opacity:.55;z-index:0;pointer-events:none;display:none;
}
.wtf-deck.is-fullscreen .wtf-fs-blur{display:block}

.wtf-deck.is-fullscreen .wtf-card--next{display:none} /* peek is less useful edge-to-edge */
.wtf-deck.is-fullscreen .wtf-deck__yum{border-radius:0;background:#fff5e9}
.wtf-deck.is-fullscreen .wtf-deck__status{
  order:2;flex:0 0 auto;margin:0;padding:4px 12px;color:#eee;min-height:0;
}
.wtf-deck.is-fullscreen .wtf-deck__status:empty{display:none}
.wtf-deck.is-fullscreen .wtf-deck__actions{
  order:3;flex:0 0 auto;justify-content:center;gap:16px;
  padding:8px 16px calc(10px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.2));
  z-index:7;
}
.wtf-deck.is-fullscreen .wtf-deck__actions .wtf-btn{
  flex:1 1 0;max-width:160px;min-height:48px;
}
.wtf-deck.is-fullscreen .wtf-btn.wtf-ad-next{max-width:none}

/* Ad card stays a distinct inset panel, never object-fit cover. */
.wtf-deck.is-fullscreen .wtf-ad-card{
  inset:12px;border-radius:12px;overflow:hidden;
}
.wtf-deck.is-fullscreen[data-state="ad"] .wtf-fs-blur{display:none!important}


/* Filter bottom sheet — same controls as the normal deck, over the photo. */
.wtf-fs-sheet-root{display:none;position:absolute;inset:0;z-index:20}
.wtf-deck.is-fullscreen.is-fs-sheet .wtf-fs-sheet-root{display:block}
.wtf-fs-sheet-dim{position:absolute;inset:0;background:rgba(0,0,0,.45);border:0;padding:0;margin:0;cursor:pointer}
.wtf-fs-sheet{
  position:absolute;left:0;right:0;bottom:0;
  max-height:min(78%, 640px);
  display:flex;flex-direction:column;
  background:#f7efe8;color:#1a1a1a;
  border-radius:16px 16px 0 0;
  box-shadow:0 -8px 28px rgba(0,0,0,.35);
  padding-bottom:env(safe-area-inset-bottom,0px);
  overflow:hidden;
}
.wtf-fs-sheet__handle{flex:0 0 auto;width:40px;height:4px;margin:8px auto 0;border-radius:99px;background:#c9b8aa}
.wtf-fs-sheet__head{
  flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:8px;padding:6px 12px 8px;
  border-bottom:1px solid #e2d3c7;
}
.wtf-fs-sheet__title{margin:0;font:700 1.05rem/1.3 system-ui,sans-serif}
.wtf-fs-sheet__done{
  min-height:44px;padding:0 14px;margin:0;border:0;border-radius:999px;cursor:pointer;
  background:#9b3b0b;color:#fff;font:700 .95rem/1 system-ui,sans-serif;
}
.wtf-fs-sheet__done:focus-visible{outline:3px solid #FFC72C;outline-offset:2px}
.wtf-fs-sheet__body{
  flex:1 1 auto;overflow:auto;-webkit-overflow-scrolling:touch;
  padding:12px 14px 20px;
  display:flex;flex-direction:column;gap:12px;
}
/* Restore filter chrome inside the sheet (they are hidden as direct deck children). */
.wtf-fs-sheet__body .wtf-deck__area,
.wtf-fs-sheet__body .wtf-deck__filters,
.wtf-fs-sheet__body .wtf-deck__category{display:flex!important;order:unset!important;margin:0!important;color:#1a1a1a}
.wtf-fs-sheet__body .wtf-deck__area{display:grid!important}
.wtf-deck.is-fullscreen.is-fs-sheet .wtf-found-you-wrap{
  position:absolute;top:calc(env(safe-area-inset-top,0px) + 56px);
  left:0;right:0;z-index:21;pointer-events:none;
}
.wtf-deck.is-fullscreen .wtf-found-you-wrap{order:0}

@media (prefers-reduced-motion:reduce){
  .wtf-fs-sheet,.wtf-fs-topbar,.wtf-fs-enter{transition:none}
}

/* Native Fullscreen API element (same node as the deck when used). */
.wtf-deck.is-fullscreen:fullscreen,
.wtf-deck.is-fullscreen:-webkit-full-screen{width:100%;height:100%;background:#111}

.wtf-deck.is-fullscreen,.wtf-deck.is-fullscreen .wtf-card{touch-action:pan-y}

/* In-place restaurant reveal stays in full screen and must be readable / scrollable. */
.wtf-deck.is-fullscreen[data-state="revealed"] .wtf-deck__stage{
  overflow:auto;-webkit-overflow-scrolling:touch;background:#f4ebe3;display:block;
}
.wtf-deck.is-fullscreen[data-state="revealed"] .wtf-tabs-reveal{
  margin:12px auto;max-width:520px;box-sizing:border-box;
}
.wtf-deck.is-fullscreen[data-state="empty"] .wtf-deck__stage{
  overflow:auto;background:#f4ebe3;display:flex;align-items:center;justify-content:center;
}
.wtf-deck.is-fullscreen[data-state="empty"] .wtf-filters-empty,
.wtf-deck.is-fullscreen[data-state="empty"] .wtf-tabs-empty{color:#1a1a1a;padding:16px}


/* 1.1.8: normal (and peek) food cards show the whole photo, with a blurred fill.
   Ad cards and the share-your-photo prompt are left alone. !important beats the
   widget's .wtf-card img{object-fit:cover} which may load after this file. */
.wtf-deck .wtf-card:not(.wtf-ad-card):not(.wtf-photo-cta){background:#1a1a1a}
.wtf-deck .wtf-card__blur{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:blur(28px) saturate(1.1);transform:scale(1.14);
  opacity:.55;z-index:0;pointer-events:none;display:block;
}
.wtf-deck .wtf-card:not(.wtf-ad-card):not(.wtf-photo-cta) > img:not(.wtf-card__blur){
  position:relative;z-index:1;object-fit:contain!important;
}
.wtf-deck .wtf-ad-card .wtf-card__blur,
.wtf-deck .wtf-photo-cta .wtf-card__blur{display:none!important}

/* Share-your-photo prompt (not an ad). Full screen only. */
.wtf-deck[data-state="photo-cta"] .wtf-btn--no,
.wtf-deck[data-state="photo-cta"] .wtf-btn--yes,
.wtf-deck[data-state="photo-cta"] .wtf-ad-next,
.wtf-deck[data-state="photo-cta"] .wtf-deck__yum,
.wtf-deck[data-state="photo-cta"] .wtf-card--next,
.wtf-deck[data-state="photo-cta"] .wtf-fs-enter{display:none!important}
.wtf-deck[data-state="photo-cta"] .wtf-deck__hint{display:none}
.wtf-deck[data-state="photo-cta"] .wtf-deck__actions{display:none}
.wtf-deck .wtf-card.wtf-photo-cta,
.wtf-deck.is-fullscreen .wtf-card.wtf-photo-cta,
.wtf-photo-cta{
  display:flex;flex-direction:column;align-items:stretch;justify-content:center;
  box-sizing:border-box;padding:24px 20px;gap:14px;
  /* !important beats the homepage widget's later .wtf-card{background:#222}
     and theme heading colors (the same wash that made Full screen / X pale). */
  background:#f7efe8!important;color:#1a1a1a!important;-webkit-text-fill-color:#1a1a1a;
  border:0;box-shadow:none!important;text-align:center;
}
.wtf-deck.is-fullscreen .wtf-card.wtf-photo-cta,
.wtf-deck.is-fullscreen .wtf-photo-cta{inset:16px;border-radius:16px}
.wtf-photo-cta__icon{font-size:2rem;line-height:1;display:flex;justify-content:center;color:#9b3b0b;-webkit-text-fill-color:#9b3b0b}
.wtf-photo-cta__icon svg{width:40px;height:40px;stroke:#9b3b0b!important;fill:none}
.wtf-photo-cta__title{margin:0;font:800 1.35rem/1.25 system-ui,sans-serif;color:#1a1a1a!important;-webkit-text-fill-color:#1a1a1a!important}
.wtf-photo-cta__body{margin:0;font:500 1rem/1.45 system-ui,sans-serif;color:#3d2a22!important;-webkit-text-fill-color:#3d2a22!important}
.wtf-photo-cta__actions{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.wtf-photo-cta__add,.wtf-photo-cta__skip{
  display:flex;align-items:center;justify-content:center;gap:8px;
  box-sizing:border-box;width:100%;min-height:48px;margin:0;padding:10px 16px;
  border-radius:24px;cursor:pointer;text-decoration:none;font:700 1.05rem/1.3 system-ui,sans-serif;
  appearance:none;-webkit-appearance:none;
}
.wtf-photo-cta__add{border:0;background:#9b3b0b!important;color:#fff!important}
.wtf-photo-cta__skip{border:2px solid #9b3b0b;background:#fff!important;color:#9b3b0b!important}
.wtf-photo-cta__add:focus-visible,.wtf-photo-cta__skip:focus-visible{outline:3px solid #FFC72C;outline-offset:2px}