/*
 * YUBEEN Product UI — Pilot v0.1.0
 *
 * Shared component architecture.
 * Currently enabled for GX55L only.
 *
 * Colors are page-scoped custom properties.
 * Do not apply GX55L colors globally.
 */

/* =========================================
   GX55L THEME
   ========================================= */

body.page-id-14212.yb-product-ui-pilot {

  --yb-ui-language-bg: rgba(18, 33, 26, .94);
  --yb-ui-language-text: #F5F7F3;
  --yb-ui-language-hover: rgba(255,255,255,.10);
  --yb-ui-language-border: rgba(255,255,255,.18);

}

/* =========================================
   MOBILE SHARED COMPONENTS
   ========================================= */

@media (max-width: 900px) {

  /* ---------------------------------------
     Language floating side tab
     --------------------------------------- */

  body.yb-product-ui-pilot
  nav.trp-language-switcher.trp-floating-switcher {

    --bg: var(--yb-ui-language-bg) !important;
    --text: var(--yb-ui-language-text) !important;
    --text-hover: #FFFFFF !important;
    --bg-hover: var(--yb-ui-language-hover) !important;
    --border: 1px solid var(--yb-ui-language-border) !important;

    --switcher-width: 44px !important;
    --switcher-padding: 6px 0 !important;

    position: fixed !important;

    top: 58vh !important;
    top: 58dvh !important;

    bottom: auto !important;

    right: 0 !important;
    left: auto !important;

    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;

    border-radius: 12px 0 0 12px !important;

    background: var(--yb-ui-language-bg) !important;
    color: var(--yb-ui-language-text) !important;

    border: 1px solid var(--yb-ui-language-border) !important;
    border-right: 0 !important;

    box-shadow:
      -4px 5px 18px rgba(0,0,0,.20) !important;

    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;

    z-index: 9900 !important;
  }

  body.yb-product-ui-pilot
  nav.trp-floating-switcher
  .trp-language-switcher-inner {

    width: 100% !important;
    min-width: 0 !important;
  }

  body.yb-product-ui-pilot
  nav.trp-floating-switcher
  .trp-language-item__current {

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 100% !important;
    min-height: 42px !important;
    padding: 0 6px !important;

    background: transparent !important;
    color: var(--yb-ui-language-text) !important;
  }

  body.yb-product-ui-pilot
  nav.trp-floating-switcher .trp-flag-image {

    width: 20px !important;
    min-width: 20px !important;
    height: 15px !important;

    object-fit: cover !important;
    border-radius: 2px !important;
  }

  /* Collapsed: flag only */
  body.yb-product-ui-pilot
  nav.trp-floating-switcher:not(.is-open)
  .trp-language-item__current
  .trp-language-item-name {

    display: none !important;
  }

  /* Expanded: show full language choices */
  body.yb-product-ui-pilot
  nav.trp-floating-switcher.is-open {

    --switcher-width: 170px !important;

    top: clamp(72px, 12dvh, 112px) !important;

    width: 170px !important;
    min-width: 170px !important;
    max-width: 170px !important;
  }

  body.yb-product-ui-pilot
  nav.trp-floating-switcher.is-open
  .trp-language-item__current {

    justify-content: flex-start !important;
    gap: 10px !important;
    padding: 0 13px !important;
  }

  body.yb-product-ui-pilot
  nav.trp-floating-switcher.is-open
  .trp-language-item-name {

    display: inline !important;
    font-size: 13px !important;
    white-space: nowrap !important;
  }

  body.yb-product-ui-pilot
  nav.trp-floating-switcher.is-open
  .trp-switcher-dropdown-list {

    max-height: min(55dvh, 340px) !important;
    overflow-y: auto !important;

    background: var(--yb-ui-language-bg) !important;
    overscroll-behavior: contain;
  }

  body.yb-product-ui-pilot
  nav.trp-floating-switcher.is-open
  .trp-switcher-dropdown-list .trp-language-item {

    color: var(--yb-ui-language-text) !important;
    background: transparent !important;

    min-height: 42px !important;
    gap: 10px !important;
  }

  body.yb-product-ui-pilot
  nav.trp-floating-switcher.is-open
  .trp-switcher-dropdown-list .trp-language-item:hover {

    background: var(--yb-ui-language-hover) !important;
  }

  /* ---------------------------------------
     Back to Top — bottom-right
     --------------------------------------- */

  body.yb-product-ui-pilot .ybn-back-to-top {

    top: auto !important;

    bottom: calc(
      20px + env(safe-area-inset-bottom, 0px)
    ) !important;

    right: 0 !important;
    left: auto !important;

    transform: translateX(8px) !important;
  }

  body.yb-product-ui-pilot
  .ybn-back-to-top.is-visible {

    transform: translateX(0) !important;
  }

  body.yb-product-ui-pilot
  .ybn-back-to-top.is-visible:active {

    transform: scale(.96) !important;
  }

}

/* Tablet and desktop remain unchanged */

/*
 * ST35Pro admin-only theme pilot v0.2
 *
 * Only loaded for editors with edit_page access
 * while viewing page 5469.
 *
 * Independent from GX55L forest-green palette.
 */

body.page-id-5469.yb-product-ui-pilot {
    --yb-ui-language-bg: rgba(25, 29, 34, 0.94);
    --yb-ui-language-text: #F6F7F8;
    --yb-ui-language-hover: rgba(255,255,255,0.12);
    --yb-ui-language-border: rgba(255,255,255,0.22);
}


/* ===============================================
   ED5 Optical Silver Pilot v0.3

   Page: 4609
   Admin/editor pilot only

   Theme: Arctic Silver
   Uses shared language switcher geometry.
   Does not modify optical Hero or Header.
   =============================================== */

body.page-id-4609.yb-product-ui-pilot {

  --yb-ui-language-bg: rgba(239, 242, 245, .97);

  --yb-ui-language-text: #202B35;

  --yb-ui-language-hover: rgba(26, 38, 49, .085);

  --yb-ui-language-border: rgba(32, 45, 58, .18);

}

@media (max-width: 900px) {

  body.page-id-4609.yb-product-ui-pilot
  nav.trp-language-switcher.trp-floating-switcher {

    --text-hover: #111B24 !important;

    --bg-hover: var(
      --yb-ui-language-hover
    ) !important;

    box-shadow:
      -4px 5px 18px rgba(28, 40, 52, .12)
      !important;

    backdrop-filter: blur(12px) !important;

    -webkit-backdrop-filter: blur(12px) !important;
  }

  body.page-id-4609.yb-product-ui-pilot
  nav.trp-floating-switcher
  .trp-language-item__current {

    color: #202B35 !important;
  }

  body.page-id-4609.yb-product-ui-pilot
  nav.trp-floating-switcher.is-open
  .trp-switcher-dropdown-list {

    background:
      rgba(239, 242, 245, .98) !important;

    color: #202B35 !important;
  }

  body.page-id-4609.yb-product-ui-pilot
  nav.trp-floating-switcher.is-open
  .trp-switcher-dropdown-list
  .trp-language-item {

    color: #202B35 !important;
  }

  body.page-id-4609.yb-product-ui-pilot
  nav.trp-floating-switcher.is-open
  .trp-switcher-dropdown-list
  .trp-language-item:hover {

    color: #111B24 !important;

    background: rgba(26, 38, 49, .085)
      !important;
  }

}