﻿/* =========================================================
   RUNHOTEL BUFFET SEARCH PAGE
========================================================= */

.rh-search-page {
    --rh-orange: #f58220;
    --rh-orange-hover: #e56f0a;
  
    --rh-blue: #1f67c7;
  
    --rh-text: #243447;
    --rh-heading: #1f2f46;
    --rh-secondary: #475569;
    --rh-muted: #6b7785;
    --rh-text-light: #8a96a3;
  
    --rh-price: #f55d3e;
  
    --rh-green: #2f9e44;
  
    --rh-border: #e6ebf0;
    --rh-border-soft: #eef2f7;
  
    --rh-surface: #ffffff;
    --rh-background: #f7f9fc;
  
    --rh-radius-sm: 8px;
    --rh-radius-md: 12px;
    --rh-radius-lg: 16px;
  
    font-family:
      "Noto Sans TC",
      "PingFang TC",
      "Microsoft JhengHei",
      Arial,
      sans-serif;
  
    color: var(--rh-text);
    font-weight: 500;
  
    background: var(--rh-background);
  
    padding: 28px 0 64px;
  }
  
  
  .rh-search-page * {
    box-sizing: border-box;
  }
  
  
  
  /* =========================================================
     MAIN WIDTH
  ========================================================= */
  
  .rh-search-page {
    width: 100%;
  }
  
  .rh-search-toolbar,
  .rh-search-layout {
    width: calc(100% - 48px);
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
  }
  
  
  
  /* =========================================================
     TOP SEARCH TOOLBAR
  ========================================================= */
  
  .rh-search-toolbar {
    display: grid;
  
    grid-template-columns:
      minmax(170px, 1fr)
      minmax(150px, .75fr)
      minmax(170px, .85fr)
      auto;
  
    align-items: end;
  
    gap: 14px;
  
    padding: 18px 20px;
  
    background: #ffffff;
  
    border: 1px solid var(--rh-border);
  
    border-radius: 16px;
  
    box-shadow:
      0 4px 18px rgba(15, 23, 42, .04);
  
    margin-bottom: 26px;
    overflow: visible;
  }
  
  
  .rh-search-toolbar__field {
    min-width: 0;
  }
  
  
  .rh-search-toolbar label {
    display: block;
  
    margin-bottom: 6px;
  
    font-size: 13px;
    font-weight: 500;
  
    line-height: 1.4;
  
    color: var(--rh-muted);
  }
  
  
  .rh-search-toolbar input:not([type="hidden"]),
  .rh-search-toolbar select {
  
    width: 100%;
    height: 48px;
  
    padding: 0 14px;
  
    border: 1px solid #d7dee7;
  
    border-radius: 10px;
  
    background: #ffffff;
  
    color: var(--rh-text);
  
    font-size: 14px;
  
    outline: none;
  }
  
  
  .rh-search-toolbar input:focus,
  .rh-search-toolbar select:focus {
  
    border-color: var(--rh-orange);
  
    box-shadow:
      0 0 0 3px rgba(245, 130, 32, .10);
  }
  
  
  .rh-search-toolbar__button {
  
    height: 48px;
  
    padding: 0 22px;
  
    border: 0;
  
    border-radius: 10px;
  
    background: var(--rh-orange);
  
    color: #ffffff;
  
    font-size: 14px;
  
    font-weight: 700;
  
    cursor: pointer;
  }
  
  
  .rh-search-toolbar__button:hover {
    background: var(--rh-orange-hover);
  }
  
  
  
  /* =========================================================
     MAIN LAYOUT
  ========================================================= */
  
  .rh-search-layout {
  
    display: grid;
  
    grid-template-columns:
      280px
      minmax(0, 1fr);
  
    gap: 26px;
  
    align-items: start;
  }
  
  
  
  /* =========================================================
     SIDEBAR
  ========================================================= */
  
  .rh-search-sidebar {
  
    padding: 20px;
  
    background: #ffffff;
  
    border: 1px solid var(--rh-border);
  
    border-radius: 16px;
  }
  
  
  .rh-filter-header {
  
    display: flex;
  
    align-items: center;
  
    justify-content: space-between;
  
    gap: 12px;
  }
  
  
  .rh-filter-header h2 {
  
    margin: 0;
  
    font-size: 21px;
  
    line-height: 1.35;
  
    font-weight: 700;
  
    color: var(--rh-text);
  }
  
  
  .rh-filter-clear {
  
    border: 0;
  
    background: none;
  
    color: var(--rh-blue);
  
    font-size: 13px;
  
    cursor: pointer;
  }
  
  
  
  /* =========================================================
     FILTER SECTIONS
  ========================================================= */
  
  .rh-filter-section {
  
    margin-top: 22px;
  
    padding-top: 22px;
  
    border-top:
      1px solid var(--rh-border-soft);
  }
  
  
  .rh-filter-title {
  
    margin:
      0
      0
      13px;
  
    font-size: 17px;
  
    line-height: 1.4;
  
    font-weight: 700;
  
    color: var(--rh-text);
  }
  
  
  .rh-filter-title__range {
  
    color: var(--rh-secondary);
  
    font-weight: 400;
  }
  
  
  
  /* =========================================================
     PRICE
  ========================================================= */
  
  .rh-price-type {
  
    width: 100%;
  
    height: 44px;
  
    padding:
      0
      12px;
  
    border:
      1px solid #d7dee7;
  
    border-radius: 10px;
  
    background: #ffffff;
  
    color: var(--rh-secondary);
  
    font-size: 13px;
  }
  
  
  
  /* =========================================================
     PRICE SLIDER VISUAL
  ========================================================= */
  
  .rh-price-slider {
  
    position: relative;
  
    height: 28px;
  
    margin:
      20px
      9px
      16px;
  }
  
  
  .rh-price-slider__track {
  
    position: absolute;
  
    left: 0;
  
    right: 0;
  
    top: 13px;
  
    height: 3px;
  
    background: #d9dee5;
  
    border-radius: 20px;
  }
  
  
  .rh-price-slider__selected {
  
    position: absolute;
  
    left: 0;
  
    right: 0;
  
    top: 13px;
  
    height: 3px;
  
    background: #111827;
  
    border-radius: 20px;
  }
  
  
  .rh-price-slider__handle {
  
    position: absolute;
  
    top: 3px;
  
    width: 22px;
  
    height: 22px;
  
    padding: 0;
  
    border:
      3px solid #111827;
  
    border-radius: 50%;
  
    background: #ffffff;
  
    cursor: pointer;
  }
  
  
  .rh-price-slider__handle--min {
    left: -9px;
  }
  
  
  .rh-price-slider__handle--max {
    right: -9px;
  }
  
  
  
  /* =========================================================
     PRICE CHIPS
  ========================================================= */
  
  .rh-price-chips {
  
    display: flex;
  
    flex-wrap: wrap;
  
    gap: 8px;
  }
  
  
  .rh-price-chip {
  
    min-height: 34px;
  
    padding:
      0
      10px;
  
    border:
      1px solid #e2e8f0;
  
    border-radius: 8px;
  
    background: #f8fafc;
  
    color: var(--rh-text);
  
    font-size: 12px;
  
    cursor: pointer;
  }
  
  
  .rh-price-chip:hover,
  .rh-price-chip.is-active {
  
    border-color: var(--rh-orange);
  
    background: #fff4e9;
  
    color: #c75b00;
  }
  
  
  
  /* =========================================================
     CHECKBOX OPTIONS
  ========================================================= */
  
  .rh-filter-options {
  
    display: flex;
  
    flex-direction: column;
  
    gap: 11px;
  }
  
  
  .rh-checkbox {
  
    display: flex;
  
    align-items: center;
  
    gap: 9px;
  
    min-height: 27px;
  
    color: var(--rh-text);
  
    font-size: 14px;
  
    line-height: 1.45;
  
    cursor: pointer;
  }
  
  
  .rh-checkbox input {
  
    width: 17px;
  
    height: 17px;
  
    accent-color: var(--rh-orange);
  
    cursor: pointer;
  }

  .rh-checkbox--locked {
    opacity: 0.85;
    cursor: default;
  }

  .rh-checkbox--locked input {
    cursor: default;
  }
  
  
  .rh-filter-more {
  
    margin-top: 12px;
  
    padding: 0;
  
    border: 0;
  
    background: none;
  
    color: var(--rh-blue);
  
    font-size: 13px;
  
    cursor: pointer;
  }
  
  
  
  /* =========================================================
     RESULTS HEADER
  ========================================================= */
  
  .rh-results-header {
  
    display: flex;
  
    justify-content: space-between;
  
    align-items: flex-end;
  
    gap: 20px;
  
    margin-bottom: 18px;
  }
  
  
  .rh-results-title {
  
    margin: 0;
  
    font-size: 26px;
  
    line-height: 1.3;
  
    font-weight: 700;
  
    color: var(--rh-text);
  }
  
  
  .rh-results-summary {
  
    margin:
      6px
      0
      0;
  
    color: var(--rh-secondary);
  
    font-size: 14px;
  
    font-weight: 500;
  
    line-height: 1.5;
  }
  
  
  .rh-results-sort {
  
    height: 42px;
  
    padding:
      0
      34px
      0
      12px;
  
    border:
      1px solid #d7dee7;
  
    border-radius: 9px;
  
    background: #ffffff;
  
    color: var(--rh-text);
  
    font-size: 13px;
  }
  
  
  
  /* =========================================================
     RESULT CARD
  ========================================================= */
  
  .rh-result-card {
  
    display: grid;
  
    grid-template-columns:
      280px
      minmax(0, 1fr)
      180px;
  
    gap: 18px;
  
    margin-bottom: 18px;
  
    padding: 15px;
  
    background: #ffffff;
  
    border:
      1px solid var(--rh-border);
  
    border-radius: 16px;
  
    transition:
      transform .2s ease,
      box-shadow .2s ease;
  }
  
  
  .rh-result-card:hover {
  
    transform: translateY(-1px);
  
    box-shadow:
      0 8px 24px rgba(15, 23, 42, .06);
  }
  
  
  
  /* =========================================================
     IMAGE
  ========================================================= */
  
  .rh-result-card__image-wrap {
    position: relative;
  }
  
  
  .rh-result-card__image {
  
    display: block;
  
    width: 100%;
  
    height: 205px;
  
    object-fit: cover;
  
    border-radius: 12px;
  }
  
  
  .rh-result-card__availability {
  
    position: absolute;
  
    top: 10px;
  
    right: 10px;
  
    padding:
      6px
      9px;
  
    background: #329548;
  
    color: #ffffff;
  
    border-radius: 7px;
  
    font-size: 12px;
  
    font-weight: 600;
  }

  .rh-result-card--soldout {
    background: #f1f5f9;
    opacity: 0.78;
    filter: grayscale(0.55);
  }

  .rh-result-card--soldout:hover {
    box-shadow: none;
    transform: none;
  }

  .rh-result-card--soldout .rh-result-card__availability {
    background: #64748b;
  }

  .rh-result-card--soldout .rh-result-card__price,
  .rh-result-card__price--soldout {
    color: #64748b;
  }

  .rh-result-card--soldout .rh-result-card__button {
    background: #94a3b8;
  }

  .rh-result-card--soldout .rh-result-card__button:hover {
    background: #64748b;
  }

  .rh-results-soldout-sep {
    margin: 8px 0 18px;
    padding: 14px 4px 6px;
    border-top: 1px solid #e2e8f0;
    color: #64748b;
    font-size: 14px;
    font-weight: 600;
  }
  
  
  
  /* =========================================================
     RESULT INFORMATION
  ========================================================= */
  
  .rh-result-card__content {
  
    min-width: 0;
  
    padding:
      4px
      2px;
  }
  
  
  .rh-result-card__title {
  
    margin: 0 0 5px;
  
    color: var(--rh-text);
  
    font-size: 22px;
  
    line-height: 1.35;
  
    font-weight: 700;
  }
  
  
  .rh-result-card__hotel {
  
    color: var(--rh-secondary);
  
    font-size: 15px;
  
    line-height: 1.5;
  }
  
  
  .rh-result-card__location {
  
    margin-top: 3px;
  
    color: var(--rh-muted);
  
    font-size: 13px;
  
    line-height: 1.5;
  }
  
  
  .rh-result-card__tags {
  
    display: flex;
  
    flex-wrap: wrap;
  
    gap: 7px;
  
    margin-top: 12px;
  }
  
  
  .rh-result-tag {
  
    display: inline-flex;
  
    align-items: center;
  
    min-height: 28px;
  
    padding:
      0
      9px;
  
    border:
      1px solid #e2e8f0;
  
    border-radius: 999px;
  
    background: #f8fafc;
  
    color: var(--rh-secondary);
  
    font-size: 12px;
  }
  
  
  .rh-result-tag--offer {
  
    border-color: #fed7aa;
  
    background: #fff7ed;
  
    color: #c65a00;
  }
  
  
  .rh-result-card__description {
  
    margin:
      12px
      0
      0;
  
    color: var(--rh-muted);
  
    font-size: 13px;
  
    line-height: 1.55;
  }
  
  
  
  /* =========================================================
     PRICE AREA
  ========================================================= */
  
  .rh-result-card__price-area {
  
    display: flex;
  
    flex-direction: column;
  
    justify-content: center;
  
    align-items: flex-end;
  
    text-align: right;
  }
  
  
  .rh-result-card__price-label {
  
    color: var(--rh-muted);
  
    font-size: 12px;
  
    margin-bottom: 5px;
  }
  
  
  .rh-result-card__price {
  
    color: var(--rh-price);
  
    font-size: 27px;
  
    line-height: 1.15;
  
    font-weight: 800;
  
    white-space: nowrap;
  }
  
  
  .rh-result-card__price span {
  
    margin-left: 3px;
  
    color: var(--rh-muted);
  
    font-size: 12px;
  
    font-weight: 400;
  }
  
  
  .rh-result-card__button {
  
    display: inline-flex;
  
    align-items: center;
  
    justify-content: center;
  
    min-width: 120px;
  
    min-height: 43px;
  
    margin-top: 14px;
  
    padding:
      0
      18px;
  
    border-radius: 9px;
  
    background: var(--rh-orange);
  
    color: #ffffff;
  
    font-size: 14px;
  
    font-weight: 700;
  
    text-decoration: none;
  }
  
  
  .rh-result-card__button:hover {
    background: var(--rh-orange-hover);
  }
  
  
  .rh-result-card__compare-note {
  
    margin-top: 8px;
  
    color: var(--rh-blue);
  
    font-size: 11px;
  }
  
  
  
  /* =========================================================
     PAGINATION
  ========================================================= */
  
  .rh-pagination {
  
    display: flex;
  
    justify-content: center;
  
    gap: 8px;
  
    margin-top: 30px;
  }
  
  
  .rh-pagination__button {
  
    min-width: 40px;
  
    height: 40px;
  
    padding:
      0
      12px;
  
    border:
      1px solid var(--rh-border);
  
    border-radius: 8px;
  
    background: #ffffff;
  
    color: var(--rh-text);
  
    cursor: pointer;
  }
  
  
  .rh-pagination__button.is-active {
  
    border-color: var(--rh-orange);
  
    background: var(--rh-orange);
  
    color: #ffffff;
  }
  
  
  
  /* =========================================================
     TABLET
  ========================================================= */
  
  @media (max-width: 1000px) {
  
    .rh-search-layout {
  
      grid-template-columns:
        230px
        minmax(0, 1fr);
  
      gap: 18px;
    }
  
  
    .rh-result-card {
  
      grid-template-columns:
        220px
        minmax(0, 1fr);
    }
  
  
    .rh-result-card__price-area {
  
      grid-column: 2;
  
      flex-direction: row;
  
      justify-content: space-between;
  
      align-items: center;
  
      text-align: left;
    }
  
  
    .rh-result-card__button {
      margin-top: 0;
    }
  
  }
  
  
  
  /* =========================================================
     MOBILE
  ========================================================= */
  
  @media (max-width: 767px) {
  
    .rh-search-page {
      padding-top: 16px;
    }
  
  
    .rh-search-toolbar,
    .rh-search-layout {
  
      width: calc(100% - 32px);
    }
  
  
    .rh-search-toolbar {
  
      grid-template-columns:
        1fr;
  
      gap: 10px;
  
      padding: 14px;
    }
  
  
    /*
     Mobile version:
     Sidebar should eventually become a drawer/modal.
     For the first static layout, it can be hidden.
    */
  
    .rh-search-sidebar {
      display: none;
    }
  
  
    .rh-search-layout {
      display: block;
    }
  
  
    .rh-results-header {
  
      align-items: flex-start;
  
      flex-direction: column;
    }
  
  
    .rh-results-title {
  
      font-size: 22px;
    }
  
  
    .rh-result-card {
  
      display: block;
  
      padding: 12px;
    }
  
  
    .rh-result-card__image {
  
      height: auto;
  
      aspect-ratio: 16 / 9;
    }
  
  
    .rh-result-card__content {
  
      padding:
        14px
        2px
        4px;
    }
  
  
    .rh-result-card__title {
  
      font-size: 20px;
    }
  
  
    /* Label above price on the left, button on the right spanning both rows. */
    .rh-result-card__price-area {
  
      display: grid;
  
      grid-template-columns:
        minmax(0, 1fr)
        auto;
  
      grid-template-rows:
        auto
        auto;
  
      column-gap: 12px;
  
      align-items: center;
  
      margin-top: 14px;
  
      padding-top: 14px;
  
      border-top:
        1px solid var(--rh-border-soft);
  
      text-align: left;
    }
  
  
    .rh-result-card__price-label {
  
      grid-column: 1;
  
      grid-row: 1;
  
      min-width: 0;
  
      margin-bottom: 2px;
  
      overflow: hidden;
  
      white-space: nowrap;
  
      text-overflow: ellipsis;
    }
  
  
    .rh-result-card__price {
  
      grid-column: 1;
  
      grid-row: 2;
  
      min-width: 0;
  
      font-size: 24px;
    }
  
  
    .rh-result-card__button {
  
      grid-column: 2;
  
      grid-row: 1 / span 2;
  
      width: auto;
  
      min-width: 0;
  
      padding:
        0
        16px;
    }
  
  
    .rh-result-card__compare-note {
      display: none;
    }
  
  }
/* =========================================================
   PAGE HOST + MARKET / SELLING PRICE
========================================================= */

.RHdealpage:has(.rh-search-page),
.rh-buffet-page:has(.rh-search-page) {
  max-width: none;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
  background: #f8fafc;
}

.rh-search-page .rh-result-card__market {
  margin-bottom: 2px;
  color: var(--rh-muted);
  font-size: 13px;
  font-weight: 500;
  text-decoration: line-through;
}

@media (min-width: 768px) {
  .rh-search-page .rh-result-card__price {
    font-size: 28px;
  }
}

.rh-search-page .rh-filter-options.is-collapsed .rh-checkbox:nth-child(n + 7) {
  display: none;
}

.rh-search-page .rh-price-chip.is-active {
  border-color: var(--rh-orange);
  background: #fff4e9;
  color: #c75b00;
}

.rh-search-page .rh-result-card__title a {
  color: inherit;
  text-decoration: none;
}

.rh-search-page .rh-result-card__title a:hover {
  color: var(--rh-orange);
  text-decoration: none;
}

.RHdealpage:has(.rh-search-page) > .rh-buffet-header {
  margin-left: 0;
  margin-right: 0;
  width: 100%;
}

.RHdealpage:has(.rh-search-page) > .rh-buffet-footer,
.RHdealpage:has(.rh-search-page) > .rh-buffet-disclaimer {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

.rh-search-page .rh-filter-empty {
  color: var(--rh-muted);
  font-size: 13px;
}

/* Date picker inside search toolbar */
.rh-search-toolbar__field--date {
  position: relative;
  overflow: visible;
}

.rh-search-toolbar .rh-date-picker__label {
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--rh-muted);
}

.rh-search-toolbar .rh-date-picker__trigger {
  width: 100%;
  min-height: 48px;
  margin-top: 0;
  padding: 0 14px;
  border: 1px solid #d7dee7;
  border-radius: 10px;
  background: #ffffff;
}

.rh-search-toolbar .rh-date-picker__date {
  font-size: 14px;
  font-weight: 700;
}

.rh-search-toolbar .rh-date-picker__popover {
  top: calc(100% + 8px);
  z-index: 1300;
}

/* Soft radius selects in search toolbar / results header */
.rh-search-toolbar .rh-select__label {
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--rh-muted);
}

.rh-search-toolbar .rh-select__trigger {
  margin-top: 0;
  min-height: 48px;
  border-radius: 12px;
}

.rh-results-sort-wrap {
  min-width: 160px;
}

.rh-results-sort-wrap .rh-select__trigger {
  min-height: 42px;
  padding: 0 34px 0 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--rh-text);
}

.rh-results-sort-wrap .rh-select__trigger::after {
  right: 14px;
}
