/* =========================================================
   CNHK mobile layer - applies at <=767px only.
   The <link> tag carries the media query; the @media block
   below is belt-and-braces in case the file is ever loaded plainly.
   ========================================================= */

:root {
  --cn-cream:  #FBF7EC;  /* base cream             */
  --cn-cream2: #F3EDE0;  /* page background        */
  --cn-pink:   #E9C8E2;  /* primary                */
  --cn-pink-d: #D9A8CF;  /* primary, selected      */
  --cn-wine:   #8A2842;  /* price / primary button */
  --cn-ink:    #33262C;  /* text                   */
  --cn-mute:   #6B5F66;  /* secondary text         */
  --cn-line:   #E9DFCF;  /* borders                */
  --cn-jade:   #D8E0DC;  /* member / booking bg    */
  --cn-tab-h:  60px;
}

@media (max-width: 767px) {

  /* ---- base ---------------------------------------------------- */
  body.cnhk-mobile {
    background: var(--cn-cream2);
    color: var(--cn-ink);
    padding-bottom: calc(var(--cn-tab-h) + env(safe-area-inset-bottom, 0px));
  }

  /* Comfortable tap targets for real buttons. Links inside text are left alone. */
  body.cnhk-mobile button,
  body.cnhk-mobile .button,
  body.cnhk-mobile input[type="submit"] {
    min-height: 44px;
  }

  /* Astra scroll-to-top must not sit on the tab bar. */
  body.cnhk-mobile #ast-scroll-top {
    bottom: calc(var(--cn-tab-h) + 16px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ---- STEP 2 WILL ENABLE THIS ---------------------------------
     Hide the desktop header on phones once the mobile home template
     provides its own header. Leave commented for now.

  body.cnhk-mobile .ast-above-header-wrap,
  body.cnhk-mobile .ast-below-header-wrap,
  body.cnhk-mobile .site-header .main-header-bar,
  body.cnhk-mobile #secondary { display: none !important; }
  --------------------------------------------------------------- */

  /* ---- bottom tab bar ------------------------------------------ */
  body.cnhk-mobile .cnhk-tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 9999;
    display: flex;
    background: #fff;
    border-top: 1px solid var(--cn-line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -2px 10px rgba(51, 38, 44, .06);
  }
  .cnhk-tabbar .cnhk-tab {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: var(--cn-tab-h);
    position: relative;
    color: var(--cn-mute);
    font-size: 11px;
    line-height: 1;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .cnhk-tabbar .cnhk-tab:hover,
  .cnhk-tabbar .cnhk-tab:focus { color: var(--cn-mute); text-decoration: none; }
  .cnhk-tabbar .cnhk-tab svg   { width: 24px; height: 24px; }
  .cnhk-tabbar .cnhk-tab.is-on { color: var(--cn-wine); }
  .cnhk-tabbar .cnhk-tab.is-on svg { stroke-width: 2.2; }

  .cnhk-badge {
    position: absolute;
    top: 8px;
    left: calc(50% + 6px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: var(--cn-wine);
    color: #fff;
    font: 700 10px/16px sans-serif;
    text-align: center;
  }
  .cnhk-badge[hidden] { display: none; }
}