/* ===================================================================
   sw-widgets.css — ShengWei floating-widget styles (externalised)

   Source of truth: mu-plugins/sw-theme-functions.php v1.4.0
   Deployed to: /wp-content/uploads/sw-assets/sw-widgets.css
   Version pin: option `sw_widgets_css_ver` (mu-plugin appends ?ver=)

   Loaded NON-BLOCKING by the mu-plugin:
     <link rel="stylesheet" media="print" onload="this.media='all'"> + <noscript>

   Contains, in cascade order:
     1. Header language trigger button (.sw-header-trigger / .sw-trigger-icon)
     2. Language modal (#sw-modal-overlay / .sw-modal-* / .sw-lang-* / .sw-custom-lang-item)
     3. Sticky contact bar (.sw-sticky-*)
     4. Back-to-top button (.sw-back-top)

   NOTES
   - This file is SELF-CONTAINED: it re-declares the small "critical" skeleton
     the mu-plugin still inlines, so it also works on its own via <noscript>.
     The mu-plugin prints this <link> at wp_head priority 21, i.e. AFTER both
     inline critical blocks (priority 6 and 20), so equal-specificity ties
     resolve in favour of this file. It is still printed BEFORE the Customizer
     Custom CSS (wp_custom_css_cb, priority 101), so 额外样式.css keeps winning
     where it deliberately overrides — notably:
         .sw-mobile-top .sw-modal-close-btn{position:static;flex-shrink:0}
         body:has(.sw-mobile-menu.is-open) .sw-sticky-bar{display:none!important}
   - NO :root block here. Design tokens live in 额外样式.css / sw-global.css
     (single source of truth). var() fallbacks are supplied so this file still
     renders correctly if it ever lands before the token sheet.
   - .sw-modal-close-btn is ALSO used by the mobile header menu (header.html
     post 3082, #swMobileClose). Do not scope it under #sw-modal-overlay.
   - Icon classes keep their historical fa-* names (icons are inline SVG; names may be GTM selectors).
     Never reintroduce fa-* here — Elementor's bundled FA5 defines ::before
     content for those names.
   =================================================================== */


/* ── 1. Header language trigger ──────────────────────────────────── */

.sw-header-trigger{
  position:relative;
  width:44px !important;
  height:44px !important;
  min-width:44px !important;
  min-height:44px !important;
  border-radius:50% !important;
  background:rgba(255,255,255,0.52) !important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,0.64) !important;
  cursor:pointer;
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
  padding:0 !important;
  line-height:1 !important;
  transition:all 0.3s ease;
  box-shadow:0 2px 10px rgba(0,0,0,0.06) !important;
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}

.sw-header-trigger:hover{
  border-color:var(--sw-accent,#df0024) !important;
  background:#ffffff !important;
  transform:translateY(-2px);
  box-shadow:0 5px 15px rgba(0,0,0,0.1) !important;
}

.sw-header-trigger:focus-visible{
  outline:2px solid var(--sw-accent,#df0024);
  outline-offset:3px;
}

.sw-header-trigger::after{
  content:"Languages";
  position:absolute;
  top:125%;
  left:50%;
  transform:translateX(-50%) translateY(5px);
  background:var(--sw-accent,#df0024);
  color:#ffffff;
  font-size:12px;
  font-family:'Inter',sans-serif;
  font-weight:500;
  padding:6px 12px;
  border-radius:6px;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:all 0.2s ease-out;
  z-index:100;
  box-shadow:0 4px 10px rgba(0,0,0,0.15);
}

.sw-header-trigger:hover::after,
.sw-header-trigger:focus-visible::after{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}

.sw-trigger-icon{
  width:24px !important;
  height:24px !important;
  display:block !important;
  margin:0 !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M832 426.666667a64 64 0 0 1 64 64v341.333333a64 64 0 0 1-64 64h-341.333333a64 64 0 0 1-64-64v-341.333333a64 64 0 0 1 64-64h341.333333z m-265.130667 358.4h44.757334l16.554666-46.037334h85.930667l16.512 45.994667h47.274667l-76.544-218.026667h-55.552l-78.933334 218.026667z m135.594667-82.517334h-62.549333l31.829333-93.141333h1.152l29.568 93.141333z' fill='%23DF0024'/%3E%3Cpath d='M841.130667 347.434667H786.346667a109.696 109.696 0 0 0-109.696-109.696V182.869333a164.565333 164.565333 0 0 1 164.522666 164.565334zM182.869333 676.608H237.653333a109.696 109.696 0 0 0 109.696 109.653333v54.869334a164.565333 164.565333 0 0 1-164.522666-164.522667zM539.477333 106.666667v0.042666a76.074667 76.074667 0 0 1 70.4 47.018667c3.84 9.216 5.76 19.114667 5.76 29.098667v356.608l-0.426666 7.424a76.032 76.032 0 0 1-75.733334 68.778666H182.826667v-0.042666a76.074667 76.074667 0 0 1-70.4-47.018667 76.117333 76.117333 0 0 1-5.76-29.141333V182.826667a76.117333 76.117333 0 0 1 76.16-76.117334l356.650666-0.042666zM179.541333 149.504a33.408 33.408 0 0 0-30.208 33.322667v356.650666l0.170667 3.285334a33.365333 33.365333 0 0 0 33.322667 30.208h356.650666a33.450667 33.450667 0 0 0 33.493334-33.493334V182.826667l-0.170667-3.285334a33.28 33.28 0 0 0-30.037333-30.037333l-3.285334-0.170667H182.826667l-3.285334 0.170667z' fill='%23252525'/%3E%3C/svg%3E") !important;
}


/* ── 2. Language modal (DOM is built by JS on first trigger click) ── */

#sw-modal-overlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:999999;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.4);
  backdrop-filter:blur(5px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 0.3s ease;
  direction:ltr !important;
  text-align:left !important;
}

#sw-modal-overlay.active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.sw-modal-content{
  width:90% !important;
  max-width:720px !important;
  max-height:85vh !important;
  overflow-y:auto !important;
  border-radius:24px !important;
  position:relative !important;
  background:rgba(255,255,255,0.85) !important;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.8) !important;
  box-shadow:0 25px 80px rgba(0,0,0,0.15) !important;
  transform:scale(0.95) translateY(20px);
  transition:transform 0.3s cubic-bezier(0.16,1,0.3,1);
  display:flex !important;
  flex-direction:column !important;
}

#sw-modal-overlay.active .sw-modal-content{
  transform:scale(1) translateY(0);
}

/* Shared with the mobile header menu close button (#swMobileClose in header 3082). */
.sw-modal-close-btn{
  position:absolute !important;
  top:15px !important;
  right:15px !important;
  width:32px !important;
  height:32px !important;
  border-radius:50% !important;
  background-color:var(--sw-accent,#df0024) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  cursor:pointer !important;
  z-index:100 !important;
  transition:transform 0.3s !important;
  box-shadow:0 2px 8px rgba(0,0,0,0.1) !important;
}

.sw-modal-close-btn svg{
  width:12px !important;
  height:12px !important;
  fill:#ffffff !important;
}

.sw-modal-close-btn:hover{
  transform:rotate(90deg) !important;
}

.sw-modal-header{
  padding:32px 32px 10px 32px !important;
  flex-shrink:0 !important;
}

.sw-modal-title{
  font-family:'Inter',sans-serif !important;
  font-size:22px !important;
  font-weight:800 !important;
  color:#333 !important;
  margin:0 !important;
}

.sw-modal-sub{
  margin:5px 0 0 !important;
  color:#666 !important;
  font-size:14px !important;
}

.sw-modal-body{
  padding:10px 32px 32px 32px !important;
  overflow-y:auto !important;
}

.sw-region-title{
  font-size:11px !important;
  font-weight:700 !important;
  color:#666 !important;
  text-transform:uppercase !important;
  letter-spacing:1.2px !important;
  margin:15px 0 12px !important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.sw-lang-grid{
  display:grid !important;
  grid-template-columns:repeat(2,1fr) !important;
  gap:12px !important;
  margin-bottom:10px !important;
}

.sw-custom-lang-item{
  display:flex !important;
  align-items:center !important;
  padding:12px 16px !important;
  background:rgba(255,255,255,0.6) !important;
  border:1px solid rgba(255,255,255,0.8) !important;
  border-radius:12px !important;
  text-decoration:none !important;
  transition:all 0.2s ease;
}

.sw-custom-lang-item:hover,
.sw-custom-lang-item:focus-visible{
  border-color:var(--sw-accent,#df0024) !important;
  background:#ffffff !important;
  transform:translateY(-2px) !important;
  box-shadow:0 4px 12px rgba(0,0,0,0.05) !important;
  outline:none;
}

.sw-custom-lang-item:hover .sw-text-en,
.sw-custom-lang-item:focus-visible .sw-text-en{
  color:var(--sw-accent,#df0024) !important;
}

.sw-custom-lang-item.is-active{
  border-color:rgba(223,0,36,0.32) !important;
  background:rgba(223,0,36,0.06) !important;
}

.sw-cdn-flag{
  width:26px !important;
  height:20px !important;
  min-width:26px !important;
  min-height:20px !important;
  border-radius:4px !important;
  margin-right:12px !important;
  box-shadow:0 1px 3px rgba(0,0,0,0.1) !important;
  object-fit:cover !important;
  flex-shrink:0 !important;
  display:block !important;
}

.sw-lang-text-col{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  line-height:1.25 !important;
  overflow:hidden !important;
}

.sw-text-native{
  font-size:14px !important;
  font-weight:700 !important;
  color:#333 !important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.sw-text-en{
  font-size:11px !important;
  font-weight:500 !important;
  color:#888 !important;
  margin-top:2px !important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

@media (max-width:600px){
  #sw-modal-overlay{
    align-items:flex-end !important;
  }

  .sw-modal-content{
    width:100% !important;
    border-radius:24px 24px 0 0 !important;
    max-height:80vh !important;
    transform:translateY(100%);
  }

  #sw-modal-overlay.active .sw-modal-content{
    transform:translateY(0);
  }

  .sw-lang-grid{
    grid-template-columns:repeat(2,1fr) !important;
    gap:8px !important;
  }

  .sw-modal-header{
    padding:24px 24px 5px 24px !important;
  }

  .sw-modal-body{
    padding:5px 24px 60px 24px !important;
  }

  .sw-custom-lang-item{
    padding:10px 10px !important;
  }

  .sw-text-native{
    font-size:13px !important;
  }

  .sw-text-en{
    font-size:10px !important;
  }

  .sw-region-title{
    font-size:10px !important;
    margin-top:20px !important;
  }
}


/* ── 3. Sticky contact bar ───────────────────────────────────────── */
/* The bar is born hidden (opacity/visibility) and is only revealed by the
   .active class defined HERE — so it can never flash before this sheet
   lands, no matter how late the async load resolves. */

.sw-sticky-bar{
  position:fixed;
  right:0;
  top:50%;
  transform:translateY(-50%) translateX(120%);
  z-index:999999;
  background-color:#ffffff;
  border-radius:12px 0 0 12px;
  box-shadow:0 4px 20px rgba(0,0,0,0.1);
  padding:20px 10px;
  transition:transform 0.4s cubic-bezier(0.175,0.885,0.32,1.275),opacity 0.4s ease;
  opacity:0;
  visibility:hidden;
  border:1px solid #E4E7EC;
  border-right:none;
}

.sw-sticky-bar.active{
  transform:translateY(-50%) translateX(0);
  opacity:1;
  visibility:visible;
}

.sw-sticky-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:16px;
  align-items:center;
}

.sw-sticky-item{
  position:relative;
  width:48px;
  height:48px;
}

.sw-sticky-item a,
.sw-sticky-item button{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background-color:#F7F8FA;
  color:#475467;
  font-size:24px;
  text-decoration:none;
  border:1px solid transparent;
  transition:all 0.3s ease;
  cursor:pointer;
  padding:0;
  box-shadow:0 2px 5px rgba(0,0,0,0.05);
}

.sw-sticky-item a:hover,
.sw-sticky-item button:hover{
  background-color:#DF0024;
  color:#ffffff;
  transform:scale(1.1);
  box-shadow:0 5px 15px rgba(223,0,36,0.35);
}

/* Brand icon colours — renamed from .fa-whatsapp/.fa-weixin in v1.4.0. */
.sw-sticky-item .fa-whatsapp{
  color:#25d366;
}

.sw-sticky-item .fa-weixin{
  color:#1aad19;
}

.sw-sticky-item:hover .fa-whatsapp,
.sw-sticky-item:hover .fa-weixin{
  color:#ffffff;
}

.sw-sticky-tooltip{
  position:absolute;
  right:65px;
  top:50%;
  transform:translateY(-50%);
  background-color:#111827;
  color:#ffffff;
  padding:6px 12px;
  border-radius:6px;
  font-size:14px;
  font-weight:500;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:all 0.3s ease;
  box-shadow:0 4px 10px rgba(0,0,0,0.15);
}

.sw-sticky-tooltip::after{
  content:'';
  position:absolute;
  right:-6px;
  top:50%;
  transform:translateY(-50%);
  border-width:6px 0 6px 6px;
  border-style:solid;
  border-color:transparent transparent transparent #111827;
}

.sw-sticky-item:hover .sw-sticky-tooltip{
  opacity:1;
  visibility:visible;
  right:60px;
}

.sw-sticky-qr-box{
  position:absolute;
  right:65px;
  top:50%;
  transform:translateY(-50%) scale(0.9);
  width:160px;
  background-color:#ffffff;
  padding:12px;
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,0.15);
  border:1px solid #E4E7EC;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:all 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
  z-index:1000;
  text-align:center;
}

.sw-sticky-qr-box img{
  width:100%;
  height:auto;
  border-radius:8px;
  display:block;
  margin-bottom:8px;
}

.sw-qr-label{
  display:block;
  font-size:12px;
  color:#475467;
  font-weight:600;
}

.sw-has-qr:hover .sw-sticky-tooltip{
  display:none;
}

.sw-has-qr:hover .sw-sticky-qr-box{
  opacity:1;
  visibility:visible;
  transform:translateY(-50%) scale(1);
  pointer-events:auto;
}

.sw-contact-toggle{
  display:none;
  position:absolute;
  left:-32px;
  top:50%;
  transform:translateY(-50%);
  width:32px;
  height:auto;
  min-height:110px;
  background:rgba(255,255,255,0.65);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,0.4);
  border-right:none;
  border-radius:12px 0 0 12px;
  cursor:pointer;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-shadow:-4px 4px 15px rgba(0,0,0,0.08);
  transition:all 0.3s ease;
  padding:12px 0;
  gap:8px;
  z-index:10;
}

@media (max-width:768px){
  .sw-sticky-bar{
    padding:10px 8px;
    background:rgba(255,255,255,0.95);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-radius:16px 0 0 16px;
    transition:transform 0.4s cubic-bezier(0.25,0.8,0.25,1);
  }

  .sw-sticky-bar.collapsed{
    background:rgba(255,255,255,0.0);
    box-shadow:none;
    border:none;
    transform:translateY(-50%) translateX(100%);
  }

  .sw-sticky-bar.collapsed .sw-contact-toggle{
    left:-32px;
  }

  .sw-sticky-bar.collapsed .sw-sticky-list{
    opacity:0;
    pointer-events:none;
  }

  .sw-sticky-list{
    transition:opacity 0.3s ease;
  }

  .sw-sticky-item{
    width:36px;
    height:36px;
  }

  .sw-sticky-item a,
  .sw-sticky-item button{
    font-size:18px;
  }

  .sw-sticky-qr-box{
    display:none !important;
  }

  .sw-sticky-tooltip{
    display:none !important;
  }

  .sw-contact-toggle{
    display:flex;
  }
}

.sw-contact-toggle:hover{
  background:rgba(255,255,255,0.85);
}

.sw-sticky-item svg.sw-icon{
  width:1em;
  height:1em;
  fill:currentColor;
  display:block;
}

.sw-contact-toggle svg.sw-icon{
  width:10px;
  height:10px;
  fill:currentColor;
  color:#111827;
  opacity:0.6;
  transition:transform 0.4s ease;
}

.sw-sticky-bar.collapsed .sw-contact-toggle svg.sw-icon{
  transform:rotate(180deg);
}

.sw-toggle-text{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-size:10px;
  font-weight:700;
  letter-spacing:1px;
  color:#111827;
  text-transform:uppercase;
  font-family:sans-serif;
  opacity:0.7;
  max-height:80px;
  overflow:hidden;
  text-overflow:clip;
  white-space:nowrap;
}

.sw-contact-toggle::after{
  content:'';
  position:absolute;
  top:12px;
  right:6px;
  width:5px;
  height:5px;
  background:#ff4444;
  border-radius:50%;
  opacity:0;
  transition:opacity 0.3s ease;
}

.sw-sticky-bar.collapsed .sw-contact-toggle::after{
  opacity:1;
  box-shadow:0 0 6px rgba(255,68,68,0.4);
}


/* ── 4. Back-to-top button ───────────────────────────────────────── */
/* Same guarantee as the sticky bar: reveal depends on .is-visible which is
   only defined here, so the button cannot appear before this sheet lands. */

.sw-back-top{
  position:fixed;
  right:20px;
  bottom:24px;
  z-index:9990;
  width:44px;
  height:44px;
  border-radius:6px;
  background:#DF0024;
  border:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 18px rgba(223,0,36,0.32);
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:opacity .3s ease,transform .3s ease,visibility .3s ease,background-color .2s ease;
  padding:0;
  -webkit-tap-highlight-color:transparent;
}

.sw-back-top.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

/* NOTE: #b80020 is intentionally NOT --sw-accent-hover (#b3001d). Kept verbatim
   from v1.3.0 — swapping it would be an unrequested visual change. */
.sw-back-top:hover{
  background:#b80020;
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(223,0,36,0.45);
}

.sw-back-top:focus-visible{
  outline:2px solid #DF0024;
  outline-offset:3px;
}

.sw-back-top svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:#ffffff;
  stroke-width:2.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  display:block;
}

@media (max-width:768px){
  .sw-back-top{
    right:14px;
    bottom:80px;
    width:40px;
    height:40px;
  }
}