/*
 * CYC Ride UI141 R38S
 * Safe four-action layout.
 *
 * This stylesheet does not move, clone, create, or delete any DOM node.
 * The existing buttons, category panels, click handlers, weather card, and
 * A-T advertisement frames remain owned by the existing passenger runtime.
 */

/* Home: title -> four category actions -> A advertisement -> About. */
html body.passenger-ui66-beauty #appCard #passengerHome:not(.hidden) {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  column-gap: clamp(2px, 1vw, 8px) !important;
  row-gap: 12px !important;
  align-items: start !important;
}

html body.passenger-ui66-beauty #appCard #passengerHome > h2 {
  grid-column: 1 / -1 !important;
  order: 10 !important;
}

html body.passenger-ui66-beauty #appCard #passengerHome > p.hint {
  grid-column: 1 / -1 !important;
  order: 11 !important;
}

html body.passenger-ui66-beauty #appCard #passengerHome > .menu-grid.passenger-category-grid {
  display: contents !important;
}

html body.passenger-ui66-beauty #appCard #passengerHome > .menu-grid.passenger-category-grid > button {
  grid-column: auto !important;
  min-width: 0 !important;
  width: 100% !important;
  order: 20 !important;
}

html body.passenger-ui66-beauty #appCard #passengerHome > .menu-grid.passenger-category-grid > [data-open-category="ride"] {
  order: 21 !important;
}

html body.passenger-ui66-beauty #appCard #passengerHome > .menu-grid.passenger-category-grid > [data-open-category="account"] {
  order: 22 !important;
}

html body.passenger-ui66-beauty #appCard #passengerHome > .menu-grid.passenger-category-grid > [data-open-category="info"] {
  order: 23 !important;
}

html body.passenger-ui66-beauty #appCard #passengerHome > .menu-grid.passenger-category-grid > [data-open-feature="help"] {
  order: 24 !important;
}

/* batch4b：About 鈕寬度唯一來源（鈕已移入首頁獨立板 .passenger-about-board）。
   max-content 實際由「副標」撐開（現值：副標「合作專區與廣告刊登」14px ≈126px >
   主標「關於我們」22px 88px）；日後營運改副標文字，按鈕寬度會跟著變，
   改文案前先確認 320px 下仍排得下。 */
html body.passenger-ui66-beauty #appCard .passenger-about-board > [data-open-feature="about"] {
  width: max-content !important;
  min-width: 78px !important;
  max-width: 100% !important;
}

/*
 * Category page: original active panel -> the existing F/G/H advertisement
 * host -> original return action. The live site may keep F/G/H as direct page
 * children or inside an existing wrapper. Both structures are supported.
 */
html body.passenger-ui66-beauty #appCard #passengerCategoryPage:not(.hidden) {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  column-gap: clamp(2px, 1vw, 8px) !important;
  row-gap: 12px !important;
  align-items: start !important;
}

html body.passenger-ui66-beauty #appCard #passengerCategoryPage > .passenger-back-row {
  grid-column: 1 / -1 !important;
  order: 10 !important;
}

html body.passenger-ui66-beauty #appCard #passengerCategoryPage > [data-category-panel]:not(.hidden),
html body.passenger-ui66-beauty #appCard #passengerCategoryPage > [data-category-panel]:not(.hidden) > .menu-grid {
  display: contents !important;
}

html body.passenger-ui66-beauty #appCard #passengerCategoryPage > [data-category-panel].hidden {
  display: none !important;
}

/* batch4b：F/G/H 廣告板已移出 #passengerCategoryPage 成兄弟板，頁內不再有廣告容器。 */

html body.passenger-ui66-beauty #appCard #passengerCategoryPage > [data-category-panel] > .menu-grid > button {
  grid-column: auto !important;
  min-width: 0 !important;
  width: 100% !important;
  order: 20 !important;
}

/* Ride row: scan, reservation, live seats, guest pass. */
html body.passenger-ui66-beauty #appCard #passengerCategoryPage > [data-category-panel="ride"]:not(.hidden) > .menu-grid > [data-open-feature="scan"] {
  order: 21 !important;
}

html body.passenger-ui66-beauty #appCard #passengerCategoryPage > [data-category-panel="ride"]:not(.hidden) > .menu-grid > [data-open-feature="reservation"] {
  order: 22 !important;
}

html body.passenger-ui66-beauty #appCard #passengerCategoryPage > [data-category-panel="ride"]:not(.hidden) > .menu-grid > [data-open-feature="seatBalance"] {
  order: 23 !important;
}

html body.passenger-ui66-beauty #appCard #passengerCategoryPage > [data-category-panel="ride"]:not(.hidden) > .menu-grid > [data-open-feature="guest"] {
  order: 24 !important;
}

/* Account row follows the user's marked order. */
html body.passenger-ui66-beauty #appCard #passengerCategoryPage > [data-category-panel="account"]:not(.hidden) > .menu-grid > [data-open-feature="recharge"] {
  order: 21 !important;
}

html body.passenger-ui66-beauty #appCard #passengerCategoryPage > [data-category-panel="account"]:not(.hidden) > .menu-grid > [data-open-feature="family"] {
  order: 22 !important;
}

html body.passenger-ui66-beauty #appCard #passengerCategoryPage > [data-category-panel="account"]:not(.hidden) > .menu-grid > [data-open-feature="monthly"] {
  order: 23 !important;
}

html body.passenger-ui66-beauty #appCard #passengerCategoryPage > [data-category-panel="account"]:not(.hidden) > .menu-grid > [data-open-feature="accountSettings"] {
  order: 24 !important;
}

/* Records row: ride records, survey, recharge records, lost property. */
html body.passenger-ui66-beauty #appCard #passengerCategoryPage > [data-category-panel="info"]:not(.hidden) > .menu-grid > [data-open-feature="rides"] {
  order: 21 !important;
}

html body.passenger-ui66-beauty #appCard #passengerCategoryPage > [data-category-panel="info"]:not(.hidden) > .menu-grid > [data-open-feature="survey"] {
  order: 22 !important;
}

html body.passenger-ui66-beauty #appCard #passengerCategoryPage > [data-category-panel="info"]:not(.hidden) > .menu-grid > [data-open-feature="rechargeHistory"] {
  order: 23 !important;
}

html body.passenger-ui66-beauty #appCard #passengerCategoryPage > [data-category-panel="info"]:not(.hidden) > .menu-grid > [data-open-feature="lost"] {
  order: 24 !important;
}

/* batch4d：按鈕移出分類頁格線，改置於分類廣告板之後的獨立白底板；格線專用屬性隨之移除 */
html body.passenger-ui66-beauty #appCard #passengerBackHomeBoard > .passenger-bottom-back {
  width: 100% !important;
}

/* Four columns need compact app icons and labels at phone widths. */
html body.passenger-ui66-beauty #appCard #passengerHome .ui66-tile,
html body.passenger-ui66-beauty #appCard #passengerCategoryPage .ui66-tile {
  min-height: 92px !important;
  padding: 4px 1px !important;
  gap: 6px !important;
}

html body.passenger-ui66-beauty #appCard #passengerHome .ui66-tile .ui66-tile-icon,
html body.passenger-ui66-beauty #appCard #passengerCategoryPage .ui66-tile .ui66-tile-icon {
  width: clamp(50px, 15vw, 64px) !important;
  height: clamp(50px, 15vw, 64px) !important;
  flex: 0 0 clamp(50px, 15vw, 64px) !important;
  border-radius: clamp(14px, 4vw, 19px) !important;
  font-size: clamp(23px, 7vw, 31px) !important;
}

html body.passenger-ui66-beauty #appCard #passengerHome .ui66-tile b,
html body.passenger-ui66-beauty #appCard #passengerCategoryPage .ui66-tile b {
  max-width: 100% !important;
  margin: 0 auto !important;
  font-size: clamp(11.5px, 3.4vw, 15px) !important;
  line-height: 1.16 !important;
  letter-spacing: -0.02em !important;
  white-space: normal !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

html body.passenger-ui66-beauty.passenger-size-normal #appCard #passengerHome .ui66-tile,
html body.passenger-ui66-beauty.passenger-size-normal #appCard #passengerCategoryPage .ui66-tile {
  min-height: 84px !important;
}

html body.passenger-ui66-beauty.passenger-size-normal #appCard #passengerHome .ui66-tile .ui66-tile-icon,
html body.passenger-ui66-beauty.passenger-size-normal #appCard #passengerCategoryPage .ui66-tile .ui66-tile-icon {
  width: clamp(46px, 13vw, 56px) !important;
  height: clamp(46px, 13vw, 56px) !important;
  flex-basis: clamp(46px, 13vw, 56px) !important;
  font-size: clamp(21px, 6.2vw, 27px) !important;
}

html body.passenger-ui66-beauty.passenger-size-normal #appCard #passengerHome .ui66-tile b,
html body.passenger-ui66-beauty.passenger-size-normal #appCard #passengerCategoryPage .ui66-tile b {
  font-size: clamp(11px, 3.1vw, 13.5px) !important;
}

@media (max-width: 360px) {
  html body.passenger-ui66-beauty #appCard #passengerHome:not(.hidden),
  html body.passenger-ui66-beauty #appCard #passengerCategoryPage:not(.hidden) {
    column-gap: 1px !important;
  }

  html body.passenger-ui66-beauty #appCard #passengerHome .ui66-tile .ui66-tile-icon,
  html body.passenger-ui66-beauty #appCard #passengerCategoryPage .ui66-tile .ui66-tile-icon {
    width: 48px !important;
    height: 48px !important;
    flex-basis: 48px !important;
    font-size: 22px !important;
  }

  html body.passenger-ui66-beauty #appCard #passengerHome .ui66-tile b,
  html body.passenger-ui66-beauty #appCard #passengerCategoryPage .ui66-tile b {
    font-size: 11px !important;
  }
}