/* hothotel.net public site — layered on top of sticky-bootstrap.css /
   sticky-style.css, same convention as the admin panel's app.css. */

/* The bundled sticky-style.css ships Splide's `.splide{visibility:hidden}`
   base rule (used to hide the slider until it has measured/mounted) but
   never ships the matching `.splide.is-initialized{visibility:visible}`
   reveal rule that the real splide-core.css normally pairs it with. Every
   dynamic slider on this page (offers slider, categories, recommend,
   browse-quickly) mounts successfully but stays invisible without this —
   this is the missing half of that rule. */
.splide.is-initialized,
.splide.is-rendered {
  visibility: visible;
}

/* The bundled sticky-style.css's `.splide__track` rule also dropped
   `overflow: hidden` (present in the real splide-core.css) — without
   it the track doesn't clip the slide list, so the current slide's
   large horizontal transform just shifts it off-screen instead of
   being clipped into view. */
/* Splide appends a screen-reader-only live region (`.splide__sr`) inside
   the track on every slide change and removes it ~100ms later. Splide's
   own core CSS hides it (clipped to 1px, absolutely positioned) but we
   don't ship that file and sticky-style.css lacks the rule, so it was
   rendering as a visible 26px block — growing the slider and pushing the
   whole section below it down and back up on every slide change (swipe or
   autoplay). This is that missing rule. */
.splide__sr {
  clip: rect(0 0 0 0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.splide__track {
  overflow: hidden;
  /* Neither our bundled sticky-style.css nor Splide's own default CSS
     (we don't ship that file separately) sets this, so a horizontal
     drag/swipe had nothing telling the browser to leave vertical
     scrolling alone — the touchmove briefly fought between the
     browser's own rubber-band vertical scroll attempt and Splide's JS
     horizontal drag, which is what showed up as the whole page
     (and the section right below the slider) jumping down and back up
     once during every swipe. This tells the browser "handle vertical
     panning yourself, JS owns horizontal" and stops that fight. */
  touch-action: pan-y;
}

/* The bundled sticky-style.css also gives `.splide__list` an explicit
   `width: max-content`, which the real splide-core.css never sets. Our
   slides use Splide's percentage+gap sizing (`calc(100% + 0rem)`), and
   that percentage needs to resolve against the track's real pixel
   width — against `max-content` it blows up to the combined width of
   every slide, which is what was pushing every slide far off-screen. */
.splide__list {
  width: auto;
}

.pub-hero {
  padding-top: 6px;
}

.pub-hero h1 {
  font-weight: 800;
}

.pub-updated {
  opacity: 0.5;
}

.pub-tabs {
  display: flex;
  background: #f0f0f2;
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
}

.pub-tabs button {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  background: transparent;
  border-radius: 9px;
  padding: 9px 6px;
  font-size: 12px;
  color: #777;
}

.pub-tabs button.active {
  background: #fff;
  color: #222;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.pub-tabs button span {
  font-size: 10px;
  opacity: 0.65;
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 6px;
  border-radius: 8px;
}

.pub-tabs button.active span {
  background: rgba(0, 0, 0, 0.08);
}

.pub-card {
  position: relative;
}

.pub-card-request {
  border-right: 3px solid #2979ff;
}

.pub-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  font-size: 11px;
  opacity: 0.75;
}

.pub-meta span {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.pub-desc {
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pub-empty {
  text-align: center;
  opacity: 0.55;
  padding: 50px 10px;
  font-size: 12px;
}

.pub-footer {
  padding: 22px 10px 90px;
  text-align: center;
}

@media (min-width: 768px) {
  .content {
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ---- v2: Sticky-Mobile-template-faithful hothotel.net ---- */

/* Stand-in for the theme's demo photography (images/grocery/*),
   which was never supplied to this project. Keeps the same card
   proportions the template expects instead of a broken <img>. */
.pub-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 140px;
  border-radius: 16px;
  background: linear-gradient(135deg, #e9edf5, #d7deee);
  color: #96a1b8;
  font-size: 40px;
}

.theme-dark .pub-photo-placeholder {
  background: linear-gradient(135deg, #2a2e38, #20232b);
  color: #545b6b;
}

.pub-photo-placeholder-sm {
  height: 100px;
  width: 100px;
  border-radius: 12px;
  font-size: 28px;
}

/* Wrapper now also renders a real <img> when the record has one —
   keeps the exact same box (size/position/rounding) whether it's
   showing the icon placeholder or an actual photo. */
.pub-photo-filled {
  padding: 0;
  overflow: hidden;
}

.pub-photo-filled img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

/* Fills the entire former "small icon" slot on the trending/suggested
   grid cards with a full-width photo area instead. */
.pub-grid-card-image {
  height: 110px;
  width: 100%;
  margin: 0;
  border-radius: 16px 16px 0 0;
  font-size: 28px;
}

.pub-category-card .pub-photo-placeholder,
.pub-category-card {
  height: 150px;
  border-radius: 12px;
  background: linear-gradient(135deg, #cfd8ea, #aebbda);
}

/* Featured Categories tile (populated state): photo constrained to the
   top of the card via a real <img>, same reliable approach as the grid
   cards — not a full-card background-image, which depended on the
   template's data-card-height JS behavior that was never implemented
   here and let the image grow to fill the whole card. */
.pub-category-tile-image {
  height: 110px;
  width: 100%;
  border-radius: 12px 12px 0 0;
  font-size: 24px;
}

.pub-category-tile-name {
  padding: 8px 10px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Same data-card-height reliance as Featured Categories had — give the
   bottom-sheet's main image an explicit height so it can't grow to fill
   the sheet the same way. */
.pub-sheet-banner {
  height: 220px;
}

.pub-slide-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pub-sheet-banner .card-top {
  display: flex;
  justify-content: flex-end;
}

/* Fallback look for the bottom-sheet's main image area when the
   selected record has no configured images yet. */
.pub-sheet-banner-empty {
  background: linear-gradient(135deg, #e9edf5, #d7deee);
}

.theme-dark .pub-sheet-banner-empty {
  background: linear-gradient(135deg, #2a2e38, #20232b);
}

.pub-sheet-banner-icon {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 46px;
  color: #96a1b8;
  z-index: 0;
}

.theme-dark .pub-sheet-banner-icon {
  color: #545b6b;
}

/* Thumbnail gallery beneath the main bottom-sheet image. */
.pub-thumb-row {
  display: flex;
  gap: 8px;
  padding: 10px 15px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.pub-thumb {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 10px;
  overflow: hidden;
  padding: 0;
  background: none;
  border: 2px solid transparent;
  cursor: pointer;
}

.pub-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pub-thumb-active {
  border-width: 2px;
  border-style: solid;
}

/* "Tap to your Cart" row thumbnail — matches the original template's
   width="110" demo image proportions. */
.pub-cartrow-image {
  width: 110px;
  height: 80px;
  font-size: 22px;
  flex-shrink: 0;
}

.pub-sheet-body {
  padding-bottom: 20px;
}

.pub-detail-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 2px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 13px;
}

.theme-dark .pub-detail-row {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.pub-detail-row:last-child {
  border-bottom: none;
}

.pub-detail-icon {
  width: 18px;
  text-align: center;
  opacity: 0.6;
  flex-shrink: 0;
}

.pub-detail-label {
  opacity: 0.6;
  flex-shrink: 0;
}

.pub-detail-value {
  margin-right: auto;
  font-weight: 600;
  text-align: left;
  word-break: break-word;
}

/* Details bottom sheet (#menu-product): cap its height at 70% of the
   screen and keep the banner pinned while only the fields list scrolls.
   Before this the sheet simply grew with the number of populated fields
   and ran past the top of the page. Scoped to this one sheet so the
   cart/settings menus are untouched. sticky-ui.js opens a menu by setting
   inline `display: block`, so flex is applied only while `.menu-active`
   (with !important to win over that inline style) — once the class is
   removed the inline `display: none` hides it again as before. */
#menu-product {
  max-height: 70vh;
  max-height: 70dvh;
  overflow: hidden;
}

#menu-product.menu-active {
  display: flex !important;
  flex-direction: column;
}

#menu-product .pub-sheet-banner,
#menu-product .pub-thumb-row {
  flex: 0 0 auto;
}

#menu-product .pub-sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}