[hidden] { display: none !important; }

body[data-page] main { overflow: clip; }

img, svg { max-width: 100%; }

.site-header .brand,
.site-header .brand img { width: 116px; }
.site-header .brand img { height: 39px; }
.site-header nav { font-size: 16px; }
.site-header nav,
.site-header nav :is(a, button) { font-weight: 500 !important; }
.reason-button { display: flex; align-items: center; justify-content: center; }
.qr-item { text-align: center; }
.qr-item:hover img { outline: none; }
.ab-contact-card:hover { transform: none; box-shadow: 0 2px 10px #1e2d4517; }

#main-nav [data-resource-page][aria-current="page"] {
  color: var(--blue, #2868dd);
  font-weight: 500;
}

[data-pending-link][aria-disabled="true"] { cursor: default; }

.header-actions .user-center-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid #328af0;
  border-radius: 18px;
  color: #2583ec;
  font-size: 14px;
  white-space: nowrap;
}
.header-actions .user-center-button:hover { background: #eaf4ff; }
.header-actions .user-center-chevron {
  width: 6px;
  height: 6px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}
.tiktok-active .site-header:not(.is-scrolled) .user-center-button {
  color: #fff;
  border-color: #fff;
}
.tiktok-active .site-header:not(.is-scrolled) .user-center-button:hover {
  color: #2583ec;
}

@media (min-width: 1200px) {
  .site-header .brand,
  .site-header .brand img { width: 134px; }
  .site-header .brand img { height: 45px; }
}

@media (min-width: 981px) {
  .ep-mercado .ep-hero-copy,
  .ep-coupang .ep-hero-copy { transform: translateY(-16px); }
}

@media (max-width: 760px) {
  body[data-page] .container { width: min(100% - 32px, 1200px); }
  body[data-page] .site-footer .footer-main { display: grid; grid-template-columns: 1fr; gap: 32px; }
  body[data-page] .site-footer .footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  body[data-page] .site-footer .footer-links > div { min-width: 0; }
}

@media (max-width: 420px) {
  .site-header .header-inner { gap: 10px; }
  .site-header .header-actions { gap: 8px; }
  .site-header .login-button { white-space: nowrap; }
  .site-header .menu-toggle { flex: none; }
  body[data-page] .site-footer .footer-links { grid-template-columns: 1fr 1fr; gap: 18px 10px; }
}

@media (max-width: 600px) {
  body[data-page="home"] .hero {
    height: 610px;
    background-size: auto 610px;
  }
  body[data-page="home"] .hero-copy { top: 52px; right: 0; }
  body[data-page="home"] .hero h1,
  body[data-page="home"] .hero-subtitle { white-space: normal; }
  body[data-page="home"] .hero-badge { left: auto; right: 0; }
  body[data-page="home"] .hero-art {
    left: 50%;
    right: auto;
    bottom: 42px;
    width: min(100%, 290px);
    height: 240px;
    transform: translateX(-50%);
  }
  body[data-page="home"] .platform-top { white-space: normal; }
  body[data-page="home"] .platform-brands { flex-wrap: wrap; justify-content: center; }
  body[data-page="home"] .bottom-cta {
    height: auto;
    min-height: 350px;
    padding: 24px 0;
    background-size: cover;
  }
  body[data-page="home"] .bottom-cta h2 { white-space: normal; }
}

/* Public freight directory loading controls. */
.fr-load-status { text-align: center; color: #7b879b; margin-top: 24px; }
.fr-load-status:has(#fr-load-message:empty):has(#fr-retry[hidden]) { display: none; }
.fr-load-actions { display: flex; justify-content: center; margin-top: 28px; }
.fr-load-actions:has([hidden]) { display: none; }
#fr-load-more, #fr-retry { padding: 10px 28px; border: 1px solid #dbe4ff; border-radius: 6px; background: #fff; color: #5276ff; cursor: pointer; font: inherit; }
#fr-retry { margin-left: 12px; }
#fr-load-more:disabled { opacity: .6; cursor: wait; }
.fr-card-tags { flex-wrap: wrap; gap: 7px; max-height: 55px; overflow: hidden; }
.fr-card-tags span { flex: 0 0 auto; max-width: 100%; box-sizing: border-box; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-card-description-wrap { position: relative; margin-top: 12px; }
.fr-card-description { margin-top: 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; line-clamp: 7; overflow: hidden; }
.fr-card-description-full { position: absolute; left: -12px; right: -12px; bottom: calc(100% + 12px); z-index: 5; padding: 12px 14px; border-radius: 5px; background: rgba(22, 22, 22, .96); color: #fff; font-size: 13px; line-height: 1.75; overflow-wrap: anywhere; box-shadow: 0 8px 22px rgba(20, 31, 51, .22); visibility: hidden; opacity: 0; transform: translateY(5px); transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s; pointer-events: none; }
.fr-card-description-full::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 14px; height: 14px; background: rgba(22, 22, 22, .96); transform: translateX(-50%) rotate(45deg); border-radius: 0 0 2px 0; }
.fr-card-description-wrap.is-overflowing:hover .fr-card-description-full,
.fr-card-description-wrap.is-overflowing:focus-within .fr-card-description-full { visibility: visible; opacity: 1; transform: translateY(0); transition-delay: 0s; }
.fr-card-description-wrap.is-overflowing .fr-card-description { cursor: help; }
@media (hover: none), (max-width: 760px) { .fr-card-description-full { display: none; } }
@media (prefers-reduced-motion: reduce) { .fr-card-description-full { transition: none; } }

.site-footer .copyright { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; align-items: center; column-gap: 6px; row-gap: 4px; height: auto; min-height: 85px; padding-bottom: 24px; white-space: normal; }
.site-footer .copyright a { display: inline-flex; align-items: center; gap: 2px; color: inherit; text-decoration: none; white-space: nowrap; }
.site-footer .copyright a:hover { text-decoration: underline; }
.site-footer .copyright img { display: inline-block; width: 12px; height: 12px; flex-shrink: 0; }

/* Keep footer headings readable against the dark background. */
.site-footer .footer-links h3 { color: #fff; }

/* Center mobile hero copy and calls to action across public pages. */
@media (max-width: 700px) {
  body[data-page] :is(.hero-copy, .sh-hero-copy, .tk-hero-copy, .ep-hero-copy, .fr-hero-copy, .ai-hero-copy, .mcp-hero-copy, .pt-hero-copy, .sel-hero-copy, .ab-hero-copy) {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    text-align: center;
    align-items: center;
  }
  body[data-page] :is(.hero-copy, .sh-hero-copy, .tk-hero-copy, .ep-hero-copy, .fr-hero-copy, .ai-hero-copy, .mcp-hero-copy, .pt-hero-copy, .sel-hero-copy, .ab-hero-copy) :is(h1, p) {
    margin-inline: auto;
    text-align: center;
  }
  body[data-page] :is(.hero-copy, .sh-hero-copy, .tk-hero-copy, .ep-hero-copy, .fr-hero-copy, .ai-hero-copy, .mcp-hero-copy, .pt-hero-copy, .sel-hero-copy, .ab-hero-copy) > a {
    margin-inline: auto;
  }
  body[data-page] .fr-hero-actions { justify-content: center; }
}

@media (max-width: 700px) {
  body[data-page] :is(.ai-hero-copy .ai-actions, .pt-hero-copy .pt-actions, .sel-hero-copy .sel-actions, .mcp-hero-copy .mcp-actions) {
    display: flex;
    width: 100%;
    justify-content: center;
  }
}

/* Explicit action-link states prevent generic a:hover rules changing CTA text. */
body[data-page] :is(.orange-button, .reason-button, .sh-text-link, .tk-button, .ep-button, .ai-button-blue):is(:link, :visited, :hover, :focus, :active),
body[data-page] .fr-card-actions a:first-child:is(:link, :visited, :hover, :focus, :active) {
  color: #fff !important;
  text-decoration: none;
}
body[data-page] :is(.orange-button, .reason-button, .sh-text-link, .tk-button, .ep-button, .ai-button-blue) .button-label {
  color: inherit;
}
body[data-page] :is(.pt-button-outline, .ai-button-outline):is(:link, :visited, :hover, :focus, :active) {
  color: #527dff !important;
  text-decoration: none;
}
body[data-page] .fr-card-actions a:last-child:is(:link, :visited, :hover, :focus, :active) {
  color: #6381b7 !important;
  text-decoration: none;
}

/* Explicit heading color for the dark TikTok hero. */
body[data-page] .tk-hero .tk-hero-copy h1 { color: #fff; }
body[data-page] .tk-hero .tk-hero-copy h1 > span { color: #25f4ee; }

/* Dark TikTok sections must not inherit global black heading colors. */
body[data-page] .tk-dark :is(h2, h3, h4),
body[data-page] .tk-bottom-banner h2 { color: #fff; }

/* Stronger separation beneath the fixed navigation. */
body .site-header { box-shadow: none; }
body .site-header.is-scrolled { box-shadow: 0 4px 12px rgba(31, 47, 67, .16), 0 12px 28px rgba(31, 47, 67, .12); }

/* Closed native dialogs must not occupy space below page content. */
body dialog:not([open]) { display: none !important; }
#ab-lightbox .ab-lightbox-bar h2 { color: #fff; }

body[data-page="shopee"] .core-free-use:is(:link, :visited, :hover, :focus, :active) { color: #d63c20 !important; text-decoration: none; }

/* The closing banner uses a white CTA, unlike the orange body buttons. */
body[data-page="shopee"] .sh-bottom-banner a.sh-text-link,
body[data-page="shopee"] .sh-bottom-banner a.sh-text-link:is(:link, :visited, :hover, :focus, :active) {
  color: #d83c20 !important;
}

/* Desktop contact toolbar, matching the Nuxt slide-tooltip. */
.slide-tooltip{position:fixed;right:40px;bottom:45%;transform:translateY(50%);z-index:100;padding:8px;background:#fff;border-radius:36px;box-shadow:0 10px 30px #6184ff12,0 4px 8px #6184ff0b;display:flex;flex-direction:column;align-items:center}
.slide-tooltip-item{position:relative}
.slide-tooltip-button{width:62px;height:70px;padding:0 10px;border:0;border-radius:28px;background:transparent;color:#1a2035;font:12px inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.slide-tooltip-button span{font-size:12px}
.slide-tooltip-button svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.slide-tooltip-button:hover,.slide-tooltip-button:focus-visible{color:#318ffc;box-shadow:0 4px 16px #6184ff18}
.slide-tooltip-content{position:absolute;right:80px;top:50%;transform:translate(8px,-50%);width:126px;padding:6px 8px 10px;box-sizing:border-box;border-radius:6px;background:#fff;box-shadow:0 10px 30px #6184ff12,0 4px 8px #6184ff0b;text-align:center;visibility:hidden;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
.slide-tooltip-item:hover .slide-tooltip-content,.slide-tooltip:not(:hover) .slide-tooltip-button:focus-visible + .slide-tooltip-content{visibility:visible;opacity:1;transform:translate(0,-50%)}
.slide-tooltip-title{color:#318ffc;font-size:14px;margin-bottom:6px;white-space:nowrap}
.slide-tooltip-content img{display:block;width:110px;height:110px;object-fit:contain}
.slide-tooltip-content img[alt="货叮咚官方客服二维码"]{clip-path:inset(0 0 2px)}
.slide-tooltip-tip{color:#666;font-size:12px;margin-top:4px}
.slide-tooltip-back{color:#318ffc;overflow:hidden;transition:height .4s cubic-bezier(.25,.8,.25,1),opacity .3s ease,transform .4s cubic-bezier(.25,.8,.25,1)}
.slide-tooltip-back.is-hidden{height:0;opacity:0;transform:translateY(-8px);pointer-events:none}
@media(prefers-reduced-motion:reduce){.slide-tooltip-back{transition:none}}
@media(max-width:980px),(hover:none) and (pointer:coarse){.slide-tooltip{display:none}}