/* ============================================================================
   Restaurants list view stylesheet — registered as com_deliveryplus.restaurants
   in HtmlView. Loaded ONLY on com_deliveryplus_restaurants, so anything here
   never costs site-wide CSS weight.

   Section guide:
     1. Tokens / theme
     2. Layout shell (page-level row containers)
     3. Filter sidebar
     4. Quick-filter rows (cuisines + offers)
     5. Site search bar + suggestions dropdown
     6. Sort (in the aside filter column)
     7. Active-filter chips
     8. Image placeholder + load-gated fade-in
     9. List/grid view-style toggle
    10. Restaurant card + in-list product strip
    11. Responsive (≤600px, ≤992px) — kept at the bottom so every breakpoint
        lives in one place.
   ============================================================================ */


/* Filter slide-out close-X overlay — list arm of the shared 3-way rule in
   template.min.css (login + cart arms remain there). */
.list-restaurants-filter-block.mso-list-filter-block--visible::before{
  content:" ";
  position:absolute;top:-60px;left:50%;transform:translateX(-50%);
  display:flex;align-items:center;justify-content:center;
  width:20px;height:20px;padding:10px;
  background-color:#fff;border-radius:50%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cline stroke='%23707070' stroke-miterlimit='10'%0Astroke-width='10px' linecap='round' x1='0' y1='0' x2='100' y2='100'%3E%3C/line%3E%3Cline stroke='%23707070' stroke-miterlimit='10'%0Astroke-width='10px' linecap='round' x1='100' y1='0' x2='0' y2='100'%3E%3C/line%3E%3C/svg%3E");
  background-size:15px;background-repeat:no-repeat;background-position:center;
  color:#707070;
  opacity:0;pointer-events:none;
  -webkit-animation:fadeInOpacity .7s ease-out forwards;
  -moz-animation:fadeInOpacity .7s ease-out forwards;
  -o-animation:fadeInOpacity .7s ease-out forwards;
  animation:fadeInOpacity .7s ease-out forwards;
}


/* ============================================================================
   1. Tokens / theme
   ============================================================================ */

/* Accent green: action / highlight (Search button + hover, loading spinner,
   selected quick-filter, offer tag, clear-all link). Single source — change
   the three vars per-site without touching any rule below.
   --restaurants-accent-rgb = the same colour as `r,g,b` for rgb()/rgba(). */
:root{
  --restaurants-accent:#09cc94;
  --restaurants-accent-dark:#07b384;
  --restaurants-accent-rgb:9,204,148;
}


/* ============================================================================
   2. Layout shell — page-level row containers (sidebar + main column)
   ============================================================================ */

/* Top-of-page flex row: filter sidebar (25%) sits next to the main column. */
div.list-restaurants-outer{margin-top:100px;display:flex;flex-direction:row;}

/* Main content column (sibling of the filter sidebar). */
.list-restaurants{display:block;flex:1;max-width:75%;}

/* Horizontal gutters for the top + body containers. */
.list-restaurants-top,
.list-restaurants-body{padding:0 15px;}


/* ============================================================================
   3. Filter sidebar
   ============================================================================ */

/* Filter sidebar layout shell — 25% of the row on desktop. On ≤992px
   this column becomes a fixed slide-up bottom-sheet (see Section 11). */
.list-restaurants-filter-block{display:block;flex:0 0 25%;max-width:25%;}
.list-restaurants-filter-outer{padding:0 15px;}

/* Card chrome shared by the filter section blocks AND the top-fields
   search bar: white surface, soft shadow, rounded corners. The ≤992px
   block at the bottom swaps the shadow for a light outline on phones. */
.list-restaurants-filter .filter-tree .section,
.list-restaurants-top-fields{
  background:#fff;border-radius:.25rem;
  box-shadow:0 2px 4px 0 rgba(0,0,0,.13);
  margin-bottom:1.5rem;
  outline:1px solid #e1e1e1;
}

/* Section header (e.g. "Cuisines", "Offers"). No longer interactive — the
   open/close toggle and chevron were removed; sections stay open. */
.list-restaurants-filter .filter-tree .section .filter-section-head{
  display:flex;align-items:center;
  padding:5px 10px;
  font-weight:700;font-size:.85rem;
}

.list-restaurants-filter .filter-tree .section li {
  display:flex;align-items:center;
  padding:.55rem 1.5rem;
  cursor:pointer;
  transition:all .15s linear;
}
.list-restaurants-filter .filter-tree .section li:hover,
.list-restaurants-filter .filter-tree .section li.selected{background:#f2f2f2;}
.list-restaurants-filter .filter-tree .section li.selected:hover{background:#f5f5f5;}

/* CSS-only ✓: rotated bordered ::after. */
.list-restaurants-filter .filter-tree .section li.selected::after{
  content:"";display:block;
  width:6px;height:12px;
  border:solid currentColor;border-width:0 3px 3px 0;
  transform:rotate(45deg);
  margin-left:auto;
}

/* Delivery filter list is always visible (template.min.css hides it by
   default because of the removed toggle — re-open it here). */
.list-restaurants-filter #filter-bydelivery ul{display:block;}

/* Option with no matching restaurants under the active filters
   (com_deliveryplus config "Show disabled" mode). Selected options never
   get this — they always stay clickable. */
.list-restaurants-filter .filter-tree li.is-unavailable,
.quick-filter-tree li.is-unavailable{
  opacity:.35;
  pointer-events:none;
  cursor:default;
  filter:grayscale(1);
}


/* ============================================================================
   4. Quick-filter rows (cuisines + offers, horizontal above the list)
   ============================================================================ */

/* -- common base -- */
.quick-filter-tree{padding:0 15px;margin-bottom:.5rem;}
.quick-filter-tree > li > ul > li{transition:all .2s linear;}
.quick-filter-tree > li > ul > li.selected{
  box-shadow:0 0 2px 0 rgb(var(--restaurants-accent-rgb));
}

/* -- cuisines row -- */
#filter-quick-bycuisines > ul{
  display:inline-flex;width:100%;height:auto;gap:8px;
  overflow-x:scroll;overflow-y:hidden;
  padding:.5rem 0;
  -ms-overflow-style:none;scrollbar-width:none;
}
#filter-quick-bycuisines > ul > li{
  display:inline-flex;flex-wrap:nowrap;white-space:nowrap;
  position:relative;width:auto;max-width:150px;flex-shrink:0;
  border:1px solid #e7e7e7;border-radius:4px;background:#fff;
  cursor:pointer;
}
.quick-filter-cuisine-wrapper{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;width:100%;padding:.25rem;overflow:hidden;
}
.quick-filter-cuisine-img{display:flex;width:100%;height:80px;}
.quick-filter-cuisine-img img{width:100%;height:100%;object-fit:contain;}
.quick-filter-cuisine-name{
  color:#747474;font-size:.75rem;width:100%;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* -- offers row -- */
#filter-byoffers > ul{
  display:inline-flex;width:100%;height:auto;gap:8px;
  overflow-x:scroll;overflow-y:hidden;
  padding:.5rem 0;
  -ms-overflow-style:none;scrollbar-width:none;
}
#filter-byoffers > ul > li{
  display:inline-flex;flex-wrap:nowrap;white-space:nowrap;
  position:relative;width:auto;max-width:150px;flex-shrink:0;
  border:1px solid #e7e7e7;border-radius:4px;background:#fff;
  cursor:pointer;
}
.quick-filter-offer-wrapper{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;
}
.quick-filter-offer-img{display:flex;width:100%;height:140px;}
.quick-filter-offer-img img{
  width:100%;height:100%;object-fit:cover;border-radius:4px;
}
.quick-filter-offer-name{padding:0 .25rem;}

/* hide WebKit scrollbar on both rows */
#filter-quick-bycuisines > ul::-webkit-scrollbar,
#filter-byoffers > ul::-webkit-scrollbar{display:none;}

/* -- prev/next arrows -- same affordance as the product strip:
   revealed on hover (hover devices); auto-hidden at scroll extents or when
   nothing overflows (JS toggles [disabled]). */
#filter-byoffers,
#filter-quick-bycuisines{position:relative;}
.qf-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:30px;height:30px;
  display:none;align-items:center;justify-content:center;
  border:0;border-radius:50%;background:#fff;color:#333;
  box-shadow:0 1px 5px rgba(0,0,0,.25);
  font-size:18px;line-height:1;padding:0;
  cursor:pointer;
}
.qf-nav.prev{left:2px;}
.qf-nav.next{right:2px;}
.qf-nav[disabled]{opacity:0;pointer-events:none;}


/* ============================================================================
   5. Site search bar + suggestions dropdown (Phase 3)
   ============================================================================ */

/* -- top row layout (input + Search button) --
   Both live inside #list-restaurants-search-outer so the suggestions dropdown
   spans the full width (input + button). Sort moved to the aside. */
.list-restaurants-top-fields{
  display:flex;flex-direction:row;align-items:stretch;
  padding:10px 0;
  transition:box-shadow .2s linear;
}
.list-restaurants-top-fields.activesearch{box-shadow:0 0 3px 0 #ffc20050;}
#list-restaurants-search-outer{
  position:relative;flex:1 1 auto;
  display:flex;align-items:stretch;gap:8px;
}
.site-search-field{
  position:relative;flex:1 1 auto;
  display:flex;align-items:stretch;min-width:0;
}

/* -- search input (consolidated with the migrated template.min.css defaults) --
   border-box so the right padding stays INSIDE the input's width (no widening).
   font-size:1rem (= 16px at default root) avoids iOS auto-zoom on focus.
   background:#fff because the theme sets no bg → iOS renders type=search gray.
   appearance:none drops the native search chrome/inset.
   padding right (25px) leaves room for the ✕ button (right:8px + 24px wide). */
#list-restaurants-search-outer #list-restaurants-search{
  font-family:inherit;
  flex:1 1 auto;min-width:0;
  font-size:1rem;color:#212121;
  background:#fff;
  border:0;outline:0;text-decoration:none;
  padding:12px 25px 12px 14px;
  height:54px;
  box-sizing:border-box;
  -webkit-appearance:none;appearance:none;
}

/* -- clear ✕ button --
   `hidden` attr must win, so re-assert it at attribute specificity. */
.site-search-clear{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);z-index:2;
  width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;background:#ececec;color:#555;
  padding:0;cursor:pointer;
}
.site-search-clear svg{display:block;}
.site-search-clear:hover{background:#dcdcdc;color:#000;}
.site-search-clear[hidden]{display:none;}

/* -- loading spinner (sits left of the ✕ so they never overlap) -- */
.site-search-loading{
  position:absolute;right:40px;top:50%;margin-top:-8px;
  width:16px;height:16px;
  border:2px solid #e2e2e2;border-top-color:var(--restaurants-accent);
  border-radius:50%;display:none;
  animation:loadspin .7s linear infinite;
}
#list-restaurants-search-outer.is-loading .site-search-loading{display:block;}
@keyframes loadspin{to{transform:rotate(360deg);}}

/* -- Search button (Enter alternative) -- */
.site-search-btn{
  flex:0 0 auto;
  display:inline-flex;align-items:center;gap:8px;
  border:0;border-radius:4px;
  background:var(--restaurants-accent);color:#fff;
  font-weight:700;font-size:1rem;
  padding:0 16px;margin-right:8px;
  white-space:nowrap;cursor:pointer;
  transition:background .15s linear, opacity .15s linear;
}
.site-search-btn:hover:not(:disabled){background:var(--restaurants-accent-dark);}
.site-search-btn:disabled{background:#555;color:#fff;cursor:not-allowed;}
.site-search-btn svg{display:block;}

/* -- suggestions dropdown wrap -- */
.site-search-suggest-wrap{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;
  background:#fff;border:1px solid #e7e7e7;border-radius:8px;
  box-shadow:0 8px 28px rgba(0,0,0,.16);
  max-height:70vh;overflow-y:auto;overflow-x:hidden;
  padding:6px;
}

/* helper tip — sticky at top of dropdown. WHETHER it renders is PHP-handled
   (suggest.php: only when results exist). CSS only controls its <br>:
   desktop fits on one line so the break is suppressed; phones get the
   two-line break + centered text (see Responsive section). */
.site-search-suggest-wrap .site-search-tip{
  position:sticky;top:-6px;z-index:1;
  margin:-6px -6px 6px;padding:10px 14px;
  background:#fafafa;border-bottom:1px solid #eee;
  border-radius:8px 8px 0 0;
  font-size:.78rem;color:#8a8a8a;
}
.site-search-suggest-wrap .site-search-tip br{display:none;}

/* -- suggestion groups + rows -- */
.site-search-group + .site-search-group{
  border-top:1px solid #f0f0f0;margin-top:4px;padding-top:4px;
}
.site-search-group-title{
  padding:8px 10px 4px;
  font-size:.72rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:#9b9b9b;
}
.site-search-row{
  display:flex;align-items:center;gap:10px;
  width:100%;box-sizing:border-box;
  text-align:left;border:0;background:none;
  padding:8px 10px;border-radius:6px;
  color:inherit;text-decoration:none;cursor:pointer;
}
.site-search-row:hover{background:#f5f5f5;}
.site-search-thumb{
  flex:0 0 40px;width:40px;height:40px;border-radius:8px;
  background:#f0f0f0 center/cover no-repeat;
}
.site-search-cuisine .site-search-thumb{border-radius:50%;}
.site-search-meta{display:flex;flex-direction:column;min-width:0;}
.site-search-line{display:flex;align-items:center;gap:6px;min-width:0;}
.site-search-name{
  font-weight:600;font-size:.92rem;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.site-search-sub{
  font-size:.78rem;color:#9b9b9b;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* "Pre-order" badge on rows whose only path is a tier-1 restaurant */
.site-search-preorder{
  flex:0 0 auto;
  font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  color:var(--restaurants-accent);
  border:1px solid var(--restaurants-accent);border-radius:4px;
  padding:1px 5px;line-height:1.45;
}

.site-search-empty{padding:18px;text-align:center;color:#9b9b9b;}


/* ============================================================================
   6. Sort (in the aside filter column)
   ============================================================================ */

.list-restaurants-filter .list-restaurants-sort-aside{
  padding:0 0 12px;margin-bottom:8px;
  border-bottom:1px solid #f0f0f0;
}

/* sort-outer keeps the absolute header anchored to it (position:relative). */
#list-restaurants-sorting-outer{display:flex;position:relative;}

/* sort header (consolidated: old absolute-overlay defaults + aside typography). */
#list-restaurants-sorting-header{
  position:absolute;top:3px;left:11px;
  pointer-events:none;
  font-weight:700;font-size:.85rem;
  margin-bottom:6px;
}

/* sort <select> (single consolidated rule — defaults + overrides absorbed
   into one selector now that the legacy template.min.css default is gone. */
#list-restaurants-sorting{
  width:100%;height:54px;
  margin:0;padding:20px 20px 0 10px;
  border:0;box-shadow:0 2px 4px 0 rgba(0,0,0,.13);
  border-radius:4px;background:#fff;
  /* native chevron replaced with an inline SVG indicator */
  background-position:95% 50%;background-repeat:no-repeat;background-size:15px 15px;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 16.933333 16.933333' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3e%3cg id='layer1' transform='translate(0 -280.067)'%3e%3cpath id='path828' d='m8.40625 281.12695a1.0584391 1.0584391 0 0 0 -.5742188.20899l-4.234375 3.17578a1.0587895 1.0587895 0 1 0 1.2714844 1.69336l3.5976563-2.69922 3.5976561 2.69922a1.0587897 1.0587897 0 1 0 1.271485-1.69336l-4.2343755-3.17578a1.0584391 1.0584391 0 0 0 -.6953125-.20899z'/%3e%3cpath id='path830' d='m12.722656 290.64062a1.0584391 1.0584391 0 0 0 -.658203.22266l-3.5976561 2.70508-3.5976563-2.70508a1.0584391 1.0584391 0 1 0 -1.2714844 1.69141l4.2324219 3.18359a1.0584391 1.0584391 0 0 0 1.2734375 0l4.2324224-3.18359a1.0584391 1.0584391 0 0 0 -.613282-1.91407z'/%3e%3c/g%3e%3c/svg%3e");
  -webkit-appearance:none;-moz-appearance:none;
  box-sizing:border-box;cursor:pointer;
  outline:1px solid #e1e1e1;
}


/* ============================================================================
   7. Active-filter chips
   ============================================================================ */

.active-filters{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:0 0 10px;
}
.active-filters[hidden]{display:none;}

.active-filter-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 6px 4px 12px;
  border:1px solid #e2e2e2;border-radius:16px;background:#f1f1f1;
  font-size:.82rem;color:#333;
}
.active-filter-label{
  max-width:220px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.active-filter-x{
  width:18px;height:18px;border-radius:50%;
  border:0;background:#dcdcdc;color:#555;
  display:flex;align-items:center;justify-content:center;
  padding:0;line-height:1;font-size:14px;cursor:pointer;
}
.active-filter-x svg{display:block;}
.active-filter-x:hover{background:#c4c4c4;color:#000;}
.active-filter-clear{
  border:0;background:none;
  color:#198352;
  font-weight:700;font-size:.82rem;
  padding:4px 8px;cursor:pointer;
}
.active-filter-clear:hover{text-decoration:underline;}


/* ============================================================================
   8. Image placeholder + load-gated fade-in
   ============================================================================ */

/* Tiny blurred JPEG placeholder behind logos/backgrounds while the real
   image is still loading. Kept as a data URI to avoid an extra HTTP request. */
.bg-img-container{
  background-image:url('data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABkAAD/7gAmQWRvYmUAZMAAAAABAwAVBAMGCg0AAAH2AAACKwAAAn0AAALU/9sAhAABAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAgICAgICAgICAgIDAwMDAwMDAwMDAQEBAQEBAQIBAQICAgECAgMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwP/wgARCAAKABQDAREAAhEBAxEB/8QApgAAAQUAAAAAAAAAAAAAAAAAAQQFBgcIAQACAwAAAAAAAAAAAAAAAAAEBgIDBRAAAQIEBQUAAAAAAAAAAAAAAwEEABECEhAhMUEyIjNDFBURAAEBBgcAAAAAAAAAAAAAAAABETFRAkIDcSKCEzNDBBIAAwEBAAAAAAAAAAAAAAAAACAhEWETAAICAQMFAQAAAAAAAAAAAAABETFBIWGREPBRgbFx/9oADAMBAAIRAxEAAAHEk84M2PACL3RBZVZ6tVrQX//aAAgBAQABBQL6L0AUenIKY/bBwe9nyf/aAAgBAgABBQKk1V4nF6Tzhlh//9oACAEDAAEFArOlaEnsThRrH//aAAgBAgIGPwLhi//aAAgBAwIGPwKkX//aAAgBAQEGPwJtq4qriLP6JsyxNxonLqcVOpO0/9oACAEBAwE/IY54+A8hDrIwiZv30CpD9Pdn/9oACAECAwE/IV5yF6gyDplnfT//2gAIAQMDAT8hT0msiKl5Z0//2gAMAwEAAhEDEQAAEByGP//aAAgBAQMBPxBqRSHK3vTJ9xOROq3Z+omrOuznlzK9jsFV9O72Qf/aAAgBAgMBPxBweCMiGcI8o3dYs5nJzR//2gAIAQMDAT8QkHEaWUeObSsG7vJjB//Z');
  background-repeat:no-repeat;background-size:cover;
}

/* Load-gated fade-in (matches the old .fadeInBg behaviour): the image fades
   in ONLY after it actually loads. CSS can't detect image load, so a tiny JS
   helper (restaurants-list.js → fadeInImages) toggles `.is-loaded` on first
   paint AND after every AJAX swap (cached images included).
   Selectors MATCH the theme's scope (.list-restaurants-body .restaurants …)
   so .is-loaded has one more class than the theme's opacity:0 rule and wins
   regardless of stylesheet load order. */
.list-restaurants-body .restaurants .bg-img-container img,
.list-restaurants-body .restaurants .img-container img,
.quick-filter-cuisine-img img,
.quick-filter-offer-img img{opacity:0;transition:opacity .4s ease-out;}
.list-restaurants-body .restaurants .bg-img-container img.is-loaded,
.list-restaurants-body .restaurants .img-container img.is-loaded,
.quick-filter-cuisine-img img.is-loaded,
.quick-filter-offer-img img.is-loaded{opacity:1;}


/* ============================================================================
   9. List/grid view-style toggle (the grid|list icon picker)
   ============================================================================ */

.list-view-style-wrapper{
  display:flex;justify-content:flex-end;
  margin-bottom:12px;padding:0 15px;
}
.list-view-style{
  display:flex;width:fit-content;
  background-color:rgb(244,244,244);
  border:2px solid #fff;border-radius:4px;
}
.list-view-style .view-style{
  display:flex;align-items:center;justify-content:center;
  width:14px;aspect-ratio:1/1;
  padding:.25rem .5rem;margin:.125rem;
  border-radius:4px;color:rgb(112,112,112);
  cursor:pointer;
}
.list-view-style .view-style.isactive{background-color:#fff;color:rgb(20,20,20);}


/* ============================================================================
   10. Restaurant card + in-list product strip (Phase 4)
   ============================================================================ */

/* -- Card grid (base) --
   CSS Grid with named template-areas; pieces are direct children of
   .oneitem and we shuffle them per breakpoint / layout variant by
   redefining grid-template-areas. No HTML duplicates. */
.list-restaurants-body .oneitem-container{
  display:flex;cursor:pointer;position:relative;
}
.list-restaurants-body .oneitem-container:hover{color:initial;}
.list-restaurants-body .oneitem-container .oneitem{
  /* The card chrome (bg/shadow/radius/margin + hover) lives on .oneitem-container;
     .oneitem is just the grid + inner padding. box-sizing:border-box keeps
     width:100% + padding from overflowing the card. */
  display:grid;width:100%;box-sizing:border-box;
  padding:1rem .75rem;
  /* logo (auto), then the remaining width split 70-30 name/rating. minmax(0,…)
     lets the name track shrink so a long name/address can't shove rating out. */
  grid-template-columns:auto minmax(0,7fr) minmax(0,3fr);
  grid-template-areas:
    "logo name    rating"
    "logo status  status"
    "logo cuisine cuisine"
    "logo fee     fee"
    "logo info    info";
  column-gap:4px;row-gap:0;
  align-items:center;
  position:relative;   /* anchors the byimage .shipfee absolute overlay */
}
.list-restaurants-body .oneitem-container .oneitem > .bg-img-container,
.list-restaurants-body .oneitem-container .oneitem > .img-container { grid-area:logo;align-self:center; }
.list-restaurants-body .oneitem-container .oneitem > .rest-heading      { grid-area:name; }
.list-restaurants-body .oneitem-container .oneitem > .review-rest-outer { grid-area:rating;justify-self:end; }
.list-restaurants-body .oneitem-container .oneitem > .rest-cuisine     { grid-area:cuisine; }
.list-restaurants-body .oneitem-container .oneitem > .rest-info        { grid-area:info; }
.list-restaurants-body .oneitem-container .oneitem > .shipfee          { grid-area:fee; }
.list-restaurants-body .oneitem-container .oneitem > .opening-status   { grid-area:status;justify-self:start; }

/* Shipfee chip — inline-block (not flex) preserves the natural whitespace
   between "Κόστος", the <X €> span and "για…". */
.list-restaurants-body .oneitem-container .oneitem > .shipfee{
  display:inline-block;
  padding:0 5px;
  border:1px solid gray;border-radius:.25rem;
  color:#9b9b9b;font-size:.8rem;
  line-height:20px;min-height:22px;
  width:fit-content;
  white-space:nowrap;
}

.list-restaurants-body .tags.withtags ~ .oneitem{padding-top:1.5rem;}

/* -- Card content typography -- */
/* name + address grouped as one heading block (left of the reviews); min-width:0
   lets the address ellipsis kick in on narrow cards. */
.list-restaurants-body .rest-heading{display:flex;flex-direction:column;gap:2px;min-width:0;}
.list-restaurants-body .rest-name{font-weight:700;font-size:1.0625rem;}
.list-restaurants-body .rest-address{font-size:.875rem;}
.list-restaurants-body .rest-cuisine{color:#767676;font-size:.75rem;text-transform:capitalize;}
/* Info line — plain inline text (estimated time · delivery · min amount),
   middot-separated. No chip border: the boxed look made these read as clickable
   when only the opening-status pill actually is. */
.list-restaurants-body .rest-info{color:#767676;font-size:.75rem;}
.list-restaurants-body .rest-info > div{display:inline;white-space:nowrap;}
.list-restaurants-body .rest-info > div:not(:last-child)::after{content:" · ";}
.list-restaurants-body .rest-info .value{margin:0 2px;}

/* The opening-status pill IS clickable (opens the hours popover) — give it the
   bordered, padded box so it reads as a button (the look the info chips lost).
   Scoped to the list; the shared pill base stays borderless elsewhere. */
.list-restaurants-body .opt-status-pill{
  border:1px solid gray;border-radius:.25rem;
  padding:2px 8px;
  background:#fff;
}
.list-restaurants-body .opt-status-pill:hover{background:#f5f5f5;}

/* -- Card logo image container -- (split from a shared rule that also
   targets .mainmenu-body — that copy lives in menu.css now). */
.list-restaurants-body .oneitem > .img-container{
  display:flex;width:92px;max-width:100%;
  border-radius:4px;overflow:hidden;
}
.list-restaurants-body .oneitem > .img-container img{
  width:100%;height:auto;opacity:0;
}

/* Review block + "see more" link. Always a vertical stack (stars over count),
   right-aligned — it lives in the narrow rating column next to the heading. */
.list-restaurants-body .review-rest-outer{
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;
}
.list-restaurants-body .review-rest-outer .review-more{
  display:inline-flex;align-items:center;gap:4px;
  font-size:.825rem;color:#444;white-space:nowrap;
}
.list-restaurants-body .review-rest-outer .review-more span{
  display:inline;white-space:nowrap;
}
/* Leading eye icon — inherits the text colour, never shrinks. */
.list-restaurants-body .review-rest-outer .review-more .review-more-icon{
  flex:0 0 auto;display:block;opacity:.8;
}


/* -- byimage variant (grid view): image-on-top, content stacked below.
   Avatar img overlays the bg image; on desktop the shipfee turns into a
   pinned pill at the bottom-right of the image (see Section 11). */
.list-restaurants-body .restaurants.byimage{display:flex;flex-wrap:wrap;gap:1%;}
.list-restaurants-body .restaurants.byimage .oneitem-container{flex:0 0 49.5%;max-width:100%;}
.list-restaurants-body .restaurants.byimage .oneitem{
  padding:0 0 1rem 0;
  /* First content row: the name+address heading block (left, takes the 1fr) +
     reviews (right auto col — only as wide as they need, ~30%). The opening-
     status badge sits on the row right after. Everything else spans both cols. */
  grid-template-columns:minmax(0,7fr) minmax(0,3fr);
  grid-template-areas:
    "logo    logo"
    "name    rating"
    "status  status"
    "cuisine cuisine"
    "info    info";
  column-gap:0;row-gap:4px;
  align-items:start;
  /* align-content:start packs rows at the top — without it, equal-height
     flex siblings drift a shorter card's content toward the middle. */
  align-content:start;
}
/* reviews (vertical stack from the base rule) sit at the top of the row + the .75rem gutter. */
.list-restaurants-body .restaurants.byimage .oneitem > .review-rest-outer{align-self:start;padding:0 .75rem;}
.list-restaurants-body .restaurants.byimage .oneitem > .rest-heading,
.list-restaurants-body .restaurants.byimage .oneitem > .rest-cuisine,
.list-restaurants-body .restaurants.byimage .oneitem > .rest-info{padding:0 .75rem;justify-self:stretch;}
/* address = smaller subtitle right under the name inside the heading block. */
.list-restaurants-body .restaurants.byimage .rest-heading .rest-address{font-size:.75rem;}
/* shipfee: pinned as a small white pill on the bottom-right of the image, at
   ALL widths (mobile matches desktop). grid-area:logo → the logo cell is the
   absolute containing block; the now-empty `fee` row is dropped from the grid. */
.list-restaurants-body .restaurants.byimage .oneitem > .shipfee{
  grid-area:logo;position:absolute;bottom:0;right:5px;
  margin:0;
  background:#fff;border:0;padding:0 5px;
  font-size:.75rem;
  border-radius:.25rem .25rem 0 0;
  min-height:0;z-index:1;
}
/* opening-status pill on its own row after name+review; left-aligned like review. */
.list-restaurants-body .restaurants.byimage .oneitem > .opening-status{padding:0 .75rem;justify-self:start;}

/* List view hides the big bg image (default); byimage shows it. */
.bg-img-container{display:none;}
.list-restaurants-body .restaurants.byimage .oneitem .bg-img-container{
  display:block;width:100%;height:170px;
  border-top-left-radius:.25rem;border-top-right-radius:.25rem;
  overflow:hidden;
}
.list-restaurants-body .restaurants .bg-img-container img{
  width:100%;height:100%;object-fit:cover;opacity:0;
}
.list-restaurants-body .restaurants.byimage .oneitem .img-container{
  position:absolute;left:.5rem;bottom:.5rem;
  width:55px;height:55px;
  border-radius:50%;border:1px solid rgb(112,112,112);
  overflow:hidden;
  z-index:2;   /* round logo sits above the shipfee pill + closed veil (z-index:1) */
}
.list-restaurants-body .restaurants.byimage .oneitem .img-container img{display:inline-block;}

/* -- Card state (closed / notaccept) -- the verbose .isopen block is gone; the
   opening-status pill carries the hours and a compact status tag (.tag.status)
   conveys closed/preorder. Closed cards stay visually muted (grayscaled); the
   coupon tags grayscale too, but the status tags keep their colour. */
.list-restaurants-body .oneitem-container.closed .oneitem > *,
.list-restaurants-body .oneitem-container.notaccept .oneitem > *{filter:grayscale(1);}
.list-restaurants-body .oneitem-container.closed .tags .tag.coupon,
.list-restaurants-body .oneitem-container.notaccept .tags .tag.coupon{filter:grayscale(1);}


/* -- Card tags (split from the shared 3-way comma rule in template.min.css
   — list-restaurants-body lives here, .mainmenu-body in menu.css,
   .rest_coupon_header stays in template until coupon/redeem get their own
   per-view CSS). The two .tag.coupon.redeem orange variants live here too. */
.list-restaurants-body .tags{
  position:absolute;top:0;left:0;z-index:1;
  display:flex;height:1.5rem;
  margin-top:-.5rem;margin-left:.75rem;
}
.list-restaurants-body .tags .tag{
  position:relative;z-index:2;
  display:flex;align-items:center;
  width:auto;height:100%;
  padding:0 .25rem;margin-right:.5rem;
  background-color:var(--restaurants-accent);color:#fff;
  font-size:.65rem;line-height:.65rem;font-weight:500;
  border-radius:0 0 .125rem .125rem;
  box-shadow:.0625rem .0625rem .0625rem rgba(0,0,0,.2);
}
.list-restaurants-body .tags .tag:before{
  content:"";position:absolute;top:0;left:0;z-index:0;
  width:0;height:0;
  border-bottom:.5rem solid #087556;
  border-left:.25rem solid transparent;
  margin-left:-.24rem;
}
.list-restaurants-body .tag.coupon.redeem{background:#ff8600;}
.list-restaurants-body .tag.coupon.redeem:before{border-bottom-color:#d16e00;}
/* Status tags (replace the old verbose .isopen block): closed = muted charcoal,
   preorder = blue. Shown via the .tags ribbon row at the card's top-left. */
.list-restaurants-body .tag.status.closed{background:#5a5a5a;}
.list-restaurants-body .tag.status.closed:before{border-bottom-color:#3f3f3f;}
.list-restaurants-body .tag.status.preorder{background:#2f80ed;}
.list-restaurants-body .tag.status.preorder:before{border-bottom-color:#1f63c0;}


/* -- Card chrome overrides (Phase 4) --
   .oneitem-container becomes the WHITE CARD: bg, radius, shadow, margin,
   hover effect move here from .oneitem (which keeps only its grid + inner
   padding). Column layout stacks the .oneitem <a>, the divider and the
   product strip inside one card. */
.list-restaurants-body .restaurants .oneitem-container{
  flex-direction:column;
  background:#fff;border-radius:.25rem;
  box-shadow:0 1px 1px 0 rgba(0,0,0,.13);
  margin-bottom:1rem;
  transition:box-shadow .2s linear;
}
.list-restaurants-body .restaurants .oneitem-container:hover{
  box-shadow:0 2px 4px 0 rgba(0,0,0,.13);
}

/* Grid (byimage) view: intrinsic responsive grid — no breakpoints.
   min(100%,400px) → 1 full-width column on phones, 2+ columns as it grows. */
.list-restaurants .list-restaurants-body .restaurants.byimage{
  display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,400px),1fr));
}

/* Divider between the card and the product strip */
.oneitem-divider{
  flex:0 0 auto;height:1px;background:#ececec;
  margin:.25rem .75rem .65rem;
}

/* Horizontal product strip (scrollable, snap-to-item, drag-to-scroll) */
.list-product-strip{
  flex:0 0 auto;width:100%;box-sizing:border-box;
  padding:0 .75rem;margin:0 0 1rem;
  position:relative;
}
.list-product-strip-inner{
  display:flex;gap:10px;
  overflow-x:auto;overflow-y:hidden;
  padding:0 2px 2px;
  -ms-overflow-style:none;scrollbar-width:none;
  scroll-snap-type:x proximity;scroll-behavior:smooth;
  cursor:grab;
}
.list-product-strip-inner.is-dragging{
  cursor:grabbing;
  scroll-behavior:auto;scroll-snap-type:none;
  user-select:none;
}
.list-product-strip-inner::-webkit-scrollbar{display:none;}

/* Single item card inside the strip */
.list-product-strip-item{
  position:relative;flex:0 0 130px;
  display:flex;flex-direction:column;
  border:1px solid #eee;border-radius:8px;overflow:hidden;
  background:#fff;color:inherit;text-decoration:none;
  scroll-snap-align:start;
}
.list-product-strip-item:hover{box-shadow:0 2px 8px rgba(0,0,0,.12);}
.list-product-strip-tag{
  position:absolute;top:6px;left:6px;z-index:1;
  background:var(--restaurants-accent);color:#fff;
  font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  padding:4px 6px;line-height:initial;border-radius:4px;
}
.list-product-strip-thumb{height:84px;background:#f0f0f0 center/cover no-repeat;}
.list-product-strip-name{
  padding:6px 8px 0;font-size:.82rem;font-weight:600;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.list-product-strip-price{padding:2px 8px 8px;font-size:.8rem;font-weight:700;color:#222;}

/* Products without a photo are pushed to the end of the strip and packed 2 per
   column (they need no image, so they're half-height) — keeps the strip tidy
   instead of showing blank grey thumbs. The group is one flex child of the
   strip; internally a 2-row grid that flows into columns. */
.list-product-strip-noimg{
  flex:0 0 auto;
  display:grid;grid-auto-flow:column;grid-template-rows:1fr 1fr;
  gap:10px;
}
.list-product-strip-item.no-image{
  flex:initial;width:130px;
  justify-content:center;   /* no thumb → centre name+price in the half-height card */
}

/* Prev/next arrows — desktop affordance: shown on card hover, hover devices only */
.list-product-strip-nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:30px;height:30px;
  display:none;align-items:center;justify-content:center;
  border:0;border-radius:50%;background:#fff;color:#333;
  box-shadow:0 1px 5px rgba(0,0,0,.25);
  font-size:15px;line-height:1;padding:0;
  cursor:pointer;
}
.list-product-strip-nav.prev{left:.35rem;}
.list-product-strip-nav.next{right:.35rem;}
.list-product-strip-nav[disabled]{opacity:0;pointer-events:none;}


/* ============================================================================
   11. Responsive — all breakpoint blocks live here (one place to scan)
   ============================================================================ */

/* Hover devices: reveal in-row + in-strip arrows on parent hover. */
@media (hover:hover){
  #filter-byoffers:hover .qf-nav,
  #filter-quick-bycuisines:hover .qf-nav{display:flex;}
  .list-product-strip:hover .list-product-strip-nav{display:flex;}
}

/* Desktop+ (≥993px) — list view only: shipfee sits as plain text above info,
   no chip border/radius/padding so it doesn't read as a loose chip. (The byimage
   shipfee pill is now defined in the base byimage rule, at all widths.) */
@media (min-width:993px){
  .list-restaurants-body .restaurants:not(.byimage) .oneitem-container .oneitem > .shipfee{
    border:0;border-radius:0;padding:0;
  }
}

/* Phones (≤600px) — search bar + dropdown tip tweaks. */
@media (max-width:600px){
  /* icon-only Search button (aria-label keeps it accessible). */
  .site-search-btn span{display:none;}
  /* tip line break + centred text only on phones (desktop is one line). */
  .site-search-suggest-wrap .site-search-tip{text-align:center;}
  .site-search-suggest-wrap .site-search-tip br{display:inline;}
  /* shorter offer thumbnails on phones (desktop is 140px). */
  .quick-filter-offer-img{height:125px;}
}

/* Tablet+ (≤992px) — top bar wraps, side gutters collapse, filter sidebar
   becomes a fixed slide-up bottom-sheet. */
@media (max-width:992px){
  .quick-filter-tree{padding:0;}
  .list-view-style-wrapper{padding:0;}
  .list-restaurants-top-fields{flex-wrap:wrap;}

  /* Mobile card layouts — list view reflows to 2-column grid; byimage
     cards span full width (one card per row). */
  .list-restaurants-body .restaurants.byimage .oneitem-container{flex:0 0 100%;}
  .list-restaurants-body .restaurants:not(.byimage) .oneitem-container .oneitem{
    grid-template-columns:80px minmax(0,7fr) minmax(0,3fr);
    grid-template-areas:
      "logo name    rating"
      "logo status  status"
      "logo cuisine cuisine"
      "info  info   info"
      "fee   fee    fee";
  }

  /* Mobile structural reflow — sidebar above main column, no horizontal
     gutters, top-fields stacks. */
  .list-restaurants-top-fields{flex-direction:column;}
  .list-restaurants-top-fields #list-restaurants-sorting{flex:1;}
  div.list-restaurants-outer{flex-direction:column;}
  .list-restaurants-outer .list-restaurants{order:-1;}
  .list-restaurants{max-width:100%;}
  .list-restaurants-top,
  .list-restaurants-body{padding:0;}
  .list-restaurants-body .oneitem-container .oneitem{padding:.75rem;}
  .list-restaurants-body .restaurants.byimage .oneitem{padding-top:0;}

  /* Tighter filter-tree leaf padding (was overridden by template.min.css). */
  .list-restaurants-filter .filter-tree .section li{padding:.25rem 1.5rem;}

  /* Compact info chips on mobile — ellipsis address/cuisine, collapse
     chip borders, one chip per row. */
  .list-restaurants-body .rest-address,
  .list-restaurants-body .rest-cuisine{
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .list-restaurants-body .rest-info div,
  .list-restaurants-body .oneitem-container .oneitem > .shipfee{
    height:20px;padding:0;
    border:unset;border-radius:0;
    font-size:.7rem;
  }
  .list-restaurants-body .rest-info span.value{white-space:nowrap;}

  /* Mobile filter bottom-sheet. Outer .list-restaurants-filter-block =
     fixed slide frame. Inner .list-restaurants-filter-outer = the white
     card (rounded top, slide transform, toggled via the mso-list-filter-
     block--visible / --animatable JS state classes). Deepest child
     .list-restaurants-filter is the scroll container — no overflow:hidden. */
  .list-restaurants-outer .list-restaurants-filter-block{
    display:block;flex:0 0 100%;max-width:100%;
  }
  .list-restaurants-filter-block{
    position:fixed;left:0;bottom:0;width:100%;height:52%;
    z-index:55552;padding:0;
    pointer-events:none;
  }
  .mso-list-filter-block--visible{pointer-events:auto;}

  /* padding:0 wipes the desktop default (padding:0 15px in Section 3). */
  .list-restaurants-filter-outer{
    display:flex;flex-direction:column;
    height:100%;background:#fff;
    padding:0;
    border-radius:14px 14px 0 0;
    box-shadow:0 -4px 16px rgba(0,0,0,.08);
    overflow:visible;
    pointer-events:auto;
    -webkit-transform:translateY(103%);transform:translateY(103%);
    will-change:transform;
  }
  .mso-list-filter-block--visible .list-restaurants-filter-outer{
    -webkit-transform:none;transform:none;
  }
  .mso-list-filter-block--animatable .list-restaurants-filter-outer{
    transition:all 130ms ease-in;
  }
  .mso-list-filter-block--visible.mso-list-filter-block--animatable .list-restaurants-filter-outer{
    transition:all 330ms ease-out;
  }

  /* Inner = scroll container. min-height:0 is required — without it the
     flex child won't shrink so overflow-y never engages. */
  .list-restaurants-filter-outer .list-restaurants-filter{
    flex:1 1 auto;min-height:0;
    overflow-y:auto;overflow-x:hidden;
    padding:14px 12px;
    -ms-overflow-style:none;scrollbar-width:none;
  }
  .list-restaurants-filter-outer .list-restaurants-filter::-webkit-scrollbar{display:none;}
}

/* Mobile floating "Filter" FAB — desktop base (hidden); mobile @media reveals it. */
.mso-rest-filter-btn {
    display: none;
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 10px;
    text-align: center;
    text-decoration: none;
    margin: 4px 2px;
    border-radius: 50%;
    position: fixed;
    right: 20px;
    bottom: 25px;
    z-index: 10;
    height: 60px;
    width: 60px;
    /*	box-shadow: 0 1px 1px 0px rgba(0,0,0,.13);*/
    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, .2);
    font-size: 0.72rem;
    outline: none;
}

@media (max-width:992px){
  /* FAB visible on mobile — desktop base hides it. */
  .mso-rest-filter-btn{display:flex;flex-direction:column;align-items:center;}
}

/* Review stars — gray base layer + amber fill via inline width%. Shared
   widget; this is a per-view copy (template.min.css no longer hosts it). */
.star-rating{position:relative;width:100px;height:20px;}
.star-rating:before{
    content:"";display:block;position:absolute;inset:0;
    width:100px;height:20px;
    background-image:url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22929%22%20height%3D%22886%22%20viewBox%3D%220%200%20929%20886%22%3E%3Cstyle%3Epath%20%7B%20fill%3A%20%23888%20!important%20%7D%3C%2Fstyle%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M929%20343c0%208-5%2017-15%2027L711%20567l48%20279c1%203%201%207%201%2012%200%2015-8%2027-22%2027-7%201-15-1-23-6L464%20747%20214%20879c-9%205-16%207-23%207-14%200-23-15-23-28%200-3%200-7%201-12l48-279L14%20370c-9-10-14-19-14-27%200-14%2010-23%2031-26l280-40L437%2023c7-15%2016-23%2027-23s20%208%2028%2023l125%20254%20280%2040c21%203%2032%2012%2032%2026z%22%2F%3E%3C%2Fsvg%3E)!important;
    background-repeat:repeat-x;background-size:20px;
}
.star-rating > span{
    display:block;position:absolute;overflow:hidden;
    width:100px;height:20px;text-indent:-10000px;
}
.star-rating > span:before{
    content:"";display:block;position:absolute;inset:0;height:20px;
    background-image:url(data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22929%22%20height%3D%22886%22%20viewBox%3D%220%200%20929%20886%22%3E%3Cstyle%3Epath%20%7B%20fill%3A%20%23ff981a%20%20!important%20%7D%3C%2Fstyle%3E%3Cpath%20fill%3D%22%23000000%22%20d%3D%22M929%20343c0%208-5%2017-15%2027L711%20567l48%20279c1%203%201%207%201%2012%200%2015-8%2027-22%2027-7%201-15-1-23-6L464%20747%20214%20879c-9%205-16%207-23%207-14%200-23-15-23-28%200-3%200-7%201-12l48-279L14%20370c-9-10-14-19-14-27%200-14%2010-23%2031-26l280-40L437%2023c7-15%2016-23%2027-23s20%208%2028%2023l125%20254%20280%2040c21%203%2032%2012%2032%2026z%22%2F%3E%3C%2Fsvg%3E)!important;
    background-repeat:repeat-x;background-size:20px;
    text-indent:10000px;
}


@media (max-width:992px){
  .star-rating,
  .star-rating:before,
  .star-rating > span{width:75px;height:15px;}
  .star-rating:before,
  .star-rating > span:before{background-size:15px;height:15px;}
}