/* Floating contact rail, same presentation as the ALUX site rail, in ANYANG blue.
   Desktop: white panel centred on the right edge, square buttons that fill blue on hover, label with a pointer.
   Phones (<=600px): a full-width bar on the bottom edge, buttons share the width. */
.ay-contact-rail {
  --ay-rail-btn: 54px; --ay-rail-icon: 24px; --ay-rail-blue: #0057b8; --ay-rail-ink: #16232b;
  position: fixed; right: 18px; top: 50%; z-index: 60; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 6px; padding: 9px 8px;
  background: #fff; border-radius: 18px; box-shadow: 0 16px 44px -14px rgba(16, 35, 45, .30);
  font-family: inherit; box-sizing: border-box;
}
.ay-contact-rail * { box-sizing: border-box; }
.ay-contact-rail .ay-rail-item {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: var(--ay-rail-btn); height: var(--ay-rail-btn); margin: 0; padding: 0;
  border: 0; border-radius: 12px; background: transparent; color: var(--ay-rail-ink);
  line-height: 1; text-decoration: none; cursor: pointer; -webkit-appearance: none; appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.ay-contact-rail svg { display: block; width: var(--ay-rail-icon); height: var(--ay-rail-icon); }
.ay-contact-rail .ay-rail-rule { height: 1px; margin: 3px 6px; background: #e3e8ec; }

/* Label to the left of the button, with a small pointer. */
.ay-contact-rail .ay-rail-tip {
  position: absolute; right: calc(100% + 12px); top: 50%;
  padding: 9px 14px; border-radius: 9px; background: var(--ay-rail-ink); color: #fff;
  font-size: 13px; font-weight: 600; letter-spacing: .01em; line-height: 1.2; white-space: nowrap;
  box-shadow: 0 10px 26px -10px rgba(16, 35, 45, .5);
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-50%) translateX(8px);
}
.ay-contact-rail .ay-rail-tip::after {
  content: ""; position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
  border: 6px solid transparent; border-left-color: var(--ay-rail-ink);
}
.ay-contact-rail .ay-rail-item:focus-visible { outline: 2px solid var(--ay-rail-blue); outline-offset: 2px; }
.ay-contact-rail .ay-rail-item:focus-visible .ay-rail-tip { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }

@media (hover: hover) {
  .ay-contact-rail .ay-rail-item:hover { background: var(--ay-rail-blue); color: #fff; }
  .ay-contact-rail .ay-rail-item:hover .ay-rail-tip { opacity: 1; visibility: visible; transform: translateY(-50%) translateX(0); }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ay-contact-rail .ay-rail-item { transition: background-color .25s ease, color .25s ease, transform .25s ease; }
  .ay-contact-rail .ay-rail-item:hover { transform: translateY(-2px); }
  .ay-contact-rail .ay-rail-tip { transition: opacity .25s ease, transform .25s ease, visibility .25s; }
}

/* Phones: full-width bottom bar; the page gets matching bottom padding so the footer is never covered. */
@media (max-width: 600px) {
  .ay-contact-rail {
    --ay-rail-btn: 44px; --ay-rail-icon: 21px;
    top: auto; bottom: 0; left: 0; right: 0; width: 100%; transform: none;
    flex-direction: row; justify-content: space-around; align-items: center; gap: 2px;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0; box-shadow: 0 -10px 30px -12px rgba(16, 35, 45, .32);
  }
  .ay-contact-rail .ay-rail-item { flex: 1 1 0; }
  .ay-contact-rail .ay-rail-item:active { background: rgba(0, 87, 184, .10); color: var(--ay-rail-blue); }
  .ay-contact-rail .ay-rail-rule { width: 1px; height: 26px; margin: 0 4px; align-self: center; }
  .ay-contact-rail .ay-rail-tip { display: none; }
  /* !important: the site-page stylesheets reset body padding to 0, and this space must always be reserved. */
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom)) !important; }
}
@media print { .ay-contact-rail { display: none; } }


/* WeChat QR contact supplied by ANYANG, media attachment 908. */
.ay-contact-rail .ay-rail-label { display:none; }
.ay-rail-wechat { position:relative; }
.ay-wechat-preview { display:none; position:absolute; right:calc(100% + 14px); top:50%; transform:translateY(-40%); width:282px; max-height:calc(100dvh - 32px); overflow:visible; padding:16px; background:#fff; border:1px solid #dde4e8; border-radius:14px; box-shadow:0 14px 44px #142f4033; color:#16232b; line-height:1.5; text-align:center; }
.ay-wechat-preview::after { content:""; position:absolute; top:0; right:-22px; width:22px; height:100%; }
.ay-wechat-preview strong { display:block; font-size:16px; margin-bottom:10px; }
.ay-wechat-preview p { margin:9px 0 12px; font-size:12px; }
.ay-wechat-image { display:block; width:100%; height:auto; max-width:100%; background:#fff; object-fit:contain; }
.ay-wechat-preview .ay-wechat-image { border-radius:4px; }
.ay-wechat-action { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 16px; border:0; border-radius:8px; background:#0057b8; color:#fff; font:inherit; font-size:13px; font-weight:600; line-height:1.35; text-decoration:none; cursor:pointer; }
.ay-wechat-action:hover { background:#03498e; color:#fff; }
.ay-wechat-action:focus-visible,.ay-wechat-close:focus-visible,.ay-wechat-open-original:focus-visible,.ay-wechat-original:focus-visible { outline:3px solid #0057b8; outline-offset:3px; }
@media (min-width:1025px) and (min-height:600px) { .ay-rail-wechat:hover .ay-wechat-preview,.ay-rail-wechat:focus-within .ay-wechat-preview { display:block; } }
html.ay-wechat-modal-open { overflow:hidden; }
dialog.ay-wechat-dialog { box-sizing:border-box; width:min(460px,calc(100vw - 24px)); max-width:calc(100vw - 24px); max-height:calc(100dvh - 24px); margin:auto; padding:20px; border:1px solid #dde4e8; border-radius:18px; background:#fff; color:#16232b; overflow:auto; overscroll-behavior:contain; box-shadow:0 18px 60px #142f4055; font-family:inherit; }
.ay-wechat-dialog:not([open]) { display:none; }
.ay-wechat-dialog::backdrop { background:#10232db3; }
.ay-wechat-dialog * { box-sizing:border-box; }
.ay-wechat-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.ay-wechat-dialog h2 { margin:0; font:600 23px/1.2 "Segoe UI",sans-serif; letter-spacing:-.02em; }
.ay-wechat-close { display:flex; align-items:center; justify-content:center; flex:0 0 44px; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:#eef3f6; color:#16232b; font-size:29px; line-height:1; cursor:pointer; }
.ay-wechat-dialog #ay-wechat-instructions { margin:10px 0 12px; font-size:13px; line-height:1.6; color:#53636d; }
.ay-wechat-original { display:block; border-radius:8px; }
.ay-wechat-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:14px; }
.ay-wechat-open-original { display:inline-flex; align-items:center; min-height:44px; color:#0057b8; font-size:13px; text-underline-offset:3px; }
.ay-wechat-save-note { margin:9px 0 0; color:#53636d; font-size:12px; line-height:1.5; }
/* Larger, labelled controls on phones/tablets; reserve the full bar height. */
@media (max-width:1024px) {
  .ay-contact-rail { --ay-rail-btn:64px; --ay-rail-icon:28px; inset:auto 0 0; width:100%; transform:none; flex-direction:row; justify-content:space-around; align-items:center; gap:2px; padding:8px 8px calc(8px + env(safe-area-inset-bottom)); border-radius:16px 16px 0 0; box-shadow:0 -10px 30px -12px #10232d52; }
  .ay-contact-rail > .ay-rail-item,.ay-contact-rail > .ay-rail-wechat { flex:1 1 0; min-width:0; }
  .ay-contact-rail .ay-rail-wechat > .ay-rail-item { width:100%; }
  .ay-contact-rail .ay-rail-item { flex-direction:column; gap:5px; height:64px; min-height:64px; }
  .ay-contact-rail .ay-rail-label { display:block; font-size:11px; font-weight:600; line-height:1.1; white-space:nowrap; }
  .ay-contact-rail .ay-rail-rule { width:1px; height:34px; margin:0 3px; align-self:center; }
  .ay-contact-rail .ay-rail-tip,.ay-contact-rail .ay-wechat-preview { display:none; }
  body { padding-bottom:calc(80px + env(safe-area-inset-bottom)) !important; padding-right:0 !important; }
}
@media (max-width:480px) { dialog.ay-wechat-dialog { width:calc(100vw - 16px); max-width:calc(100vw - 16px); max-height:calc(100dvh - 16px); padding:16px; border-radius:16px; } .ay-wechat-dialog h2 { font-size:22px; } }
@media print { .ay-contact-rail,.ay-wechat-dialog { display:none !important; } }

/* ALUX-style mobile switch: browse upward for site links, downward for contacts. */
.ay-mobile-buyer-nav { display:none; }
@media (max-width:1024px) {
  html.ay-rail-switch-ready .ay-mobile-buyer-nav {
    position:fixed; inset:auto 0 0; z-index:61; box-sizing:border-box;
    display:flex; justify-content:space-around; align-items:center; gap:2px;
    width:100%; padding:8px 8px calc(8px + env(safe-area-inset-bottom));
    border-radius:16px 16px 0 0; background:#fff;
    box-shadow:0 -10px 30px -12px #10232d52; font-family:inherit;
    transform:translateY(calc(100% + 18px)); visibility:hidden; pointer-events:none;
  }
  .ay-mobile-buyer-nav * { box-sizing:border-box; }
  .ay-mobile-buyer-nav .ay-mobile-buyer-link {
    display:flex; flex:1 1 0; min-width:0; height:64px; min-height:64px;
    flex-direction:column; align-items:center; justify-content:center; gap:5px;
    margin:0; padding:0 2px; border:0; border-radius:12px;
    background:transparent; color:#16232b; text-decoration:none;
    font-size:11px; font-weight:600; line-height:1.1; white-space:nowrap;
    -webkit-tap-highlight-color:transparent;
  }
  .ay-mobile-buyer-nav svg { display:block; width:28px; height:28px; }
  .ay-mobile-buyer-nav .ay-mobile-enquiry { color:#0057b8; background:#e9f2fc; }
  .ay-mobile-buyer-nav .ay-mobile-buyer-link[aria-current="page"] { color:#0057b8; }
  .ay-mobile-buyer-nav .ay-mobile-buyer-link:focus-visible { outline:2px solid #0057b8; outline-offset:-2px; }
  .ay-mobile-buyer-nav .ay-mobile-buyer-link:active { background:#e9f2fc; color:#0057b8; }
  html.ay-rail-switch-ready.ay-show-buyer-nav .ay-mobile-buyer-nav { transform:none; visibility:visible; pointer-events:auto; }
  html.ay-rail-switch-ready.ay-show-buyer-nav .ay-contact-rail { transform:translateY(calc(100% + 18px)); visibility:hidden; pointer-events:none; }
}
@media (max-width:1024px) and (prefers-reduced-motion:no-preference) {
  html.ay-rail-switch-ready .ay-contact-rail,html.ay-rail-switch-ready .ay-mobile-buyer-nav { transition:transform .22s ease; }
}
@media print { .ay-mobile-buyer-nav { display:none !important; } }
