/* ============================================================
   Source of Bikes — site styles
   Shared across every public page (loaded from inc/header.php).
   ============================================================ */

html { scroll-behavior: smooth; }
body { margin: 0; font-family: 'Cairo', sans-serif; background: #020617; overflow-x: hidden; }
a { color: #10b981; text-decoration: none; }
a:hover { color: #34d399; }
::selection { background: #10b981; color: #fff; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0f172a; }
::-webkit-scrollbar-thumb { background: #10b981; border-radius: 4px; }

@keyframes dcspin { to { transform: rotate(360deg); } }
@keyframes dcspinrev { to { transform: rotate(-360deg); } }
@keyframes roadmove { to { background-position: -96px 10px; } }
@keyframes lanemove { to { background-position: 0 96px; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes fadeup { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes pulsering { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.45); } 100% { box-shadow: 0 0 0 20px rgba(16,185,129,0); } }
@keyframes sobline { 0%, 100% { opacity: 0.35; transform: translateX(0); } 50% { opacity: 1; transform: translateX(-9px); } }

/* LTR: anchor the nav dropdown to the button's inline-end so it never overflows the viewport */
[dir="ltr"] [data-nav-dropdown] { left: auto !important; right: 0 !important; }

/* slim mobile header: keep logo + globe + CTA + burger on one row */
@media (max-width: 640px) {
  [data-navbar] { padding: 8px 12px !important; gap: 10px !important; }
  [data-navbar] > a:first-child svg { width: 70px !important; height: 39px !important; }
  [data-nav-cta] { padding: 8px 13px !important; font-size: 12px !important; }
  [data-lang-btn] { padding: 7px 10px !important; }
  [data-lang-name] { display: none; }
}

/* quick-quote bar: when the fields wrap on small screens, a 999px pill clips them —
   switch to a modest rounded rectangle so nothing pokes outside the card */
@media (max-width: 720px) {
  .quote-bar { border-radius: 22px !important; }
  .quote-bar form { flex-direction: column !important; }
  .quote-bar select, .quote-bar a { box-sizing: border-box !important; min-width: 0 !important; width: 100% !important; justify-content: center; }
}

/* header search */
.search-btn { display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; flex-shrink:0; background:rgba(255,255,255,0.07); color:#cbd5e1; border:1px solid rgba(255,255,255,0.1); border-radius:50%; cursor:pointer; font-size:14px; transition:color 0.25s, background 0.25s; order:2; }
.search-btn:hover { color:#34d399; background:rgba(255,255,255,0.12); }
.search-overlay { position:fixed; inset:0; z-index:300; background:rgba(2,6,23,0.94); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:none; align-items:flex-start; justify-content:center; padding:120px 20px 20px; }
.search-overlay.open { display:flex; }
.search-overlay form { width:100%; max-width:640px; display:flex; gap:10px; }
.search-overlay input { flex:1; min-width:0; background:rgba(255,255,255,0.08); color:#fff; border:1px solid rgba(255,255,255,0.18); border-radius:14px; padding:16px 20px; font-family:'Cairo',sans-serif; font-size:16px; font-weight:600; outline:none; }
.search-overlay input::placeholder { color:#94a3b8; }
.search-overlay button[type=submit] { background:#10b981; color:#022c22; border:none; border-radius:14px; padding:0 26px; font-family:'Cairo',sans-serif; font-weight:900; font-size:15px; cursor:pointer; white-space:nowrap; }
.search-overlay .sc-close { position:fixed; top:24px; inset-inline-end:24px; width:46px; height:46px; border-radius:50%; border:none; background:rgba(255,255,255,0.1); color:#fff; font-size:18px; cursor:pointer; }
.search-overlay .sc-close:hover { background:#dc2626; }
.search-overlay .sc-hint { position:absolute; top:76px; color:#64748b; font-size:13px; font-weight:700; }

/* journey section on mobile: road hugs the inline-start edge, cards stack full width */
@media (max-width: 700px) {
  [dir="rtl"] [data-journey] .j-lane { right: 4px !important; left: auto !important; transform: none !important; width: 34px !important; }
  [dir="ltr"] [data-journey] .j-lane { left: 4px !important; right: auto !important; transform: none !important; width: 34px !important; }
  [dir="rtl"] [data-journey-bike] { right: -4px !important; transform: none !important; }
  [dir="ltr"] [data-journey-bike] { left: -4px !important; right: auto !important; transform: none !important; }
  [data-journey] [data-step] { flex-direction: row !important; margin-bottom: 32px !important; }
  [data-journey] [data-step] > div { width: calc(100% - 58px) !important; margin-inline-start: 58px; }
}

/* hover states */
.hov-nav { color:#cbd5e1; white-space:nowrap; transition:color 0.25s; }
.hov-nav:hover { color:#34d399; }
.hov-more-btn:hover { color:#34d399 !important; background:rgba(255,255,255,0.12) !important; }
.hov-drop { color:#cbd5e1; padding:10px 14px; border-radius:10px; white-space:nowrap; font-size:14px; font-weight:600; transition:color 0.25s, background 0.25s; }
.hov-drop:hover { color:#34d399; background:rgba(255,255,255,0.06); }
.hov-cta:hover { transform:scale(1.06); background:#34d399 !important; color:#020617; }
.hov-wa:hover { background:#34d399 !important; color:#020617; transform:scale(1.04); }
.hov-brand:hover { color:#34d399 !important; opacity:1 !important; }
.hov-typecard:hover { border-color:#10b981 !important; transform:translateY(-3px); box-shadow:0 12px 28px rgba(2,6,23,0.08); }
.imgzoom img { transition:transform 0.7s ease; }
.imgzoom:hover img { transform:scale(1.07); }
.hov-link-green:hover { color:#047857 !important; }
.hov-link-dark:hover { color:#10b981 !important; }
.hov-stepcard:hover { box-shadow:0 24px 50px rgba(2,6,23,0.14) !important; transform:translateY(-3px); }
.hov-guide:hover { border-color:#10b981 !important; transform:translateY(-4px); box-shadow:0 16px 34px rgba(2,6,23,0.09); }
.hov-faqmore:hover { border-color:#10b981 !important; color:#047857 !important; transform:translateY(-2px); box-shadow:0 12px 28px rgba(2,6,23,0.08); }
.hov-oemcard:hover { transform:translateY(-4px); border-color:rgba(185,28,28,0.55) !important; }
.hov-foot { color:#94a3b8; transition:color 0.25s; }
.hov-foot:hover { color:#34d399; }
.hov-foot2 { color:#64748b; transition:color 0.25s; }
.hov-foot2:hover { color:#fff; }
.hov-ctadark:hover { background:#0f172a !important; color:#fff; }
.hov-ctalight:hover { background:rgba(255,255,255,0.34) !important; color:#022c22; }

/* FAQ accordion (homepage) */
.faq-item { background:#fff; border:1px solid #e2e8f0; border-radius:18px; overflow:hidden; transition:border-color 0.3s; }
.faq-item.open { border-color:#10b981; }
.faq-item .faq-chev { color:#10b981; font-size:14px; flex-shrink:0; transition:transform 0.3s; }
.faq-item.open .faq-chev { transform:rotate(180deg); }
.faq-body { display:none; padding:0 24px 22px; }
.faq-item.open .faq-body { display:block; }

/* ── content pages (under the fixed pill header) ── */
.pg-hero { background:#020617; padding:150px 24px 64px; text-align:center; }
.pg-hero h1 { font-size:clamp(30px,4.5vw,52px); font-weight:900; color:#fff; margin:0 0 14px; line-height:1.35; }
.pg-hero p { color:#94a3b8; font-size:17px; line-height:1.9; max-width:680px; margin:0 auto; }
.pg-main { max-width:860px; margin:0 auto; padding:56px 24px 80px; }
.pg-main.wide { max-width:1120px; }
.pg-main.under-header { padding-top:140px; }
.pg-body { background:#fff; border:1px solid #e2e8f0; border-radius:24px; padding:clamp(24px,4vw,48px); color:#334155; font-size:16.5px; line-height:2; }
.pg-body h2 { color:#0f172a; font-size:24px; font-weight:900; margin:36px 0 12px; }
.pg-body h3 { color:#0f172a; font-size:19px; font-weight:800; margin:28px 0 10px; }
.pg-body ul, .pg-body ol { padding-inline-start:22px; margin:0 0 16px; }
.pg-body li { margin-bottom:8px; }
.pg-body strong { color:#0f172a; }
.wa-band { margin-top:40px; background:linear-gradient(270deg,#059669,#10b981); border-radius:22px; padding:28px 32px; display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.wa-band .t { color:#022c22; font-weight:900; font-size:20px; }
.wa-band a { background:#020617; color:#fff; padding:13px 28px; border-radius:14px; font-weight:800; display:inline-flex; align-items:center; gap:10px; }
.wa-band a:hover { background:#0f172a; color:#fff; }
.acc-item { background:#fff; border:1px solid #e2e8f0; border-radius:18px; overflow:hidden; margin-bottom:12px; transition:border-color 0.3s; }
.acc-item[open] { border-color:#10b981; }
.acc-item summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px; font-size:16.5px; font-weight:800; color:#0f172a; }
.acc-item summary::-webkit-details-marker { display:none; }
.acc-item summary i { color:#10b981; font-size:14px; transition:transform 0.3s; }
.acc-item[open] summary i { transform:rotate(180deg); }
.acc-item .a { padding:0 24px 22px; color:#64748b; font-size:14.5px; line-height:1.95; }
.guide-card { background:#fff; border:1px solid #e2e8f0; border-radius:24px; padding:clamp(24px,4vw,44px); margin-bottom:28px; }
.guide-card .ic { width:52px; height:52px; background:#fee2e2; color:#b91c1c; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:16px; }
.guide-card h2 { color:#0f172a; font-size:24px; font-weight:900; margin:0 0 10px; }
.guide-card .gb { color:#334155; font-size:16px; line-height:2; }
.guide-card .gb h3 { color:#0f172a; font-size:18px; font-weight:800; margin:24px 0 10px; }
.guide-card .gb ul, .guide-card .gb ol { padding-inline-start:22px; }
.guide-card .gb li { margin-bottom:8px; }
.guide-card .gb strong { color:#0f172a; }

/* ── products ── */
.notice-band { background:#fffbeb; border:1px solid #fcd34d; color:#92400e; border-radius:16px; padding:16px 22px; font-weight:700; font-size:14.5px; line-height:1.9; margin-bottom:28px; display:flex; gap:12px; align-items:flex-start; }
.cat-pills { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:32px; }
.cat-pills a { background:#fff; border:1px solid #e2e8f0; color:#334155; border-radius:999px; padding:8px 18px; font-weight:800; font-size:13.5px; transition:border-color 0.25s, color 0.25s; }
.cat-pills a:hover { border-color:#10b981; color:#059669; }
.cat-pills a.cur { background:#10b981; border-color:#10b981; color:#022c22; }
.prod-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:18px; }
.prod-card { background:#fff; border:1px solid #e2e8f0; border-radius:18px; overflow:hidden; display:flex; flex-direction:column; transition:border-color 0.3s, transform 0.3s, box-shadow 0.3s; position:relative; }
.prod-card:hover { border-color:#10b981; transform:translateY(-4px); box-shadow:0 16px 34px rgba(2,6,23,0.09); }
.prod-card .img { aspect-ratio:1; background:#f1f5f9; overflow:hidden; }
.prod-card .img img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.5s; }
.prod-card:hover .img img { transform:scale(1.05); }
.prod-card .cat-chip { position:absolute; top:12px; inset-inline-start:12px; background:rgba(2,6,23,0.75); color:#6ee7b7; font-size:11px; font-weight:800; padding:4px 12px; border-radius:999px; backdrop-filter:blur(4px); }
.prod-card .bd { padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; flex:1; }
.prod-card h3 { font-size:15px; font-weight:800; color:#0f172a; margin:0; line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.prod-card .meta { font-size:12.5px; color:#64748b; font-weight:700; margin-top:auto; }
.prod-card .meta b { color:#059669; }
.pager { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-top:44px; }
.pager a, .pager span { min-width:42px; text-align:center; background:#fff; border:1px solid #e2e8f0; color:#334155; border-radius:12px; padding:9px 12px; font-weight:800; font-size:14px; }
.pager a:hover { border-color:#10b981; color:#059669; }
.pager .cur { background:#10b981; border-color:#10b981; color:#022c22; }
.pager .dots { border:none; background:none; }
.spec-table { width:100%; border-collapse:collapse; font-size:14.5px; }
.spec-table td { padding:11px 14px; border-bottom:1px solid #f1f5f9; }
.spec-table td:first-child { font-weight:800; color:#0f172a; width:38%; }
.spec-table td:last-child { color:#475569; }
.spec-table tr:nth-child(odd) { background:#f8fafc; }

/* ── product gallery slider + lightbox ── */
.gal-main { position:relative; aspect-ratio:4/3; background:#fff; border:1px solid #e2e8f0; border-radius:20px; overflow:hidden; margin-bottom:12px; }
.gal-main img { width:100%; height:100%; object-fit:contain; display:block; cursor:zoom-in; }
.gal-arrow { position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; border:none; background:rgba(2,6,23,0.55); color:#fff; font-size:16px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background 0.25s; z-index:3; }
.gal-arrow:hover { background:#10b981; color:#022c22; }
.gal-prev { inset-inline-start:12px; }
.gal-next { inset-inline-end:12px; }
.gal-zoom-hint { position:absolute; bottom:12px; inset-inline-end:12px; background:rgba(2,6,23,0.55); color:#fff; border-radius:999px; padding:6px 14px; font-size:12px; font-weight:700; pointer-events:none; display:flex; align-items:center; gap:7px; }
.gal-thumbs { display:flex; gap:10px; overflow-x:auto; padding-bottom:8px; scrollbar-width:thin; scrollbar-color:#10b981 #e2e8f0; }
.gal-thumbs::-webkit-scrollbar { height:6px; }
.gal-thumbs::-webkit-scrollbar-track { background:#e2e8f0; border-radius:3px; }
.gal-thumbs::-webkit-scrollbar-thumb { background:#10b981; border-radius:3px; }
.gal-thumbs button { flex:0 0 76px; width:76px; aspect-ratio:1; border:2px solid #e2e8f0; border-radius:12px; overflow:hidden; padding:0; cursor:pointer; background:#fff; }
.gal-thumbs button.cur { border-color:#10b981; }
.gal-thumbs img { width:100%; height:100%; object-fit:cover; display:block; }
.lightbox { position:fixed; inset:0; z-index:300; background:rgba(2,6,23,0.94); display:none; align-items:center; justify-content:center; }
.lightbox.open { display:flex; }
.lightbox .lb-stage { position:relative; width:min(92vw, 1100px); height:min(86vh, 800px); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.lightbox img { max-width:100%; max-height:100%; object-fit:contain; cursor:zoom-in; transition:transform 0.25s ease; transform-origin:center; user-select:none; -webkit-user-drag:none; }
.lightbox img.zoomed { cursor:zoom-out; }
.lb-close { position:fixed; top:18px; inset-inline-end:18px; width:46px; height:46px; border-radius:50%; border:none; background:rgba(255,255,255,0.1); color:#fff; font-size:18px; cursor:pointer; z-index:302; }
.lb-close:hover { background:#dc2626; }
.lb-count { position:fixed; top:28px; inset-inline-start:24px; color:#94a3b8; font-weight:800; font-size:14px; z-index:302; }
.lightbox .gal-arrow { background:rgba(255,255,255,0.12); }

/* ── floating contact buttons (bottom-right): WhatsApp + WeChat ── */
.fab-contact { position:fixed; right:18px; bottom:18px; z-index:250; display:flex; flex-direction:column; gap:12px; }
.fab-btn { width:54px; height:54px; border-radius:50%; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#fff; font-size:27px; box-shadow:0 8px 24px rgba(2,44,34,0.28); transition:transform 0.2s, box-shadow 0.2s; text-decoration:none; }
.fab-btn:hover { transform:scale(1.08); box-shadow:0 12px 30px rgba(2,44,34,0.36); color:#fff; }
.fab-wa { background:#25D366; }
.fab-wc { background:#09B83E; }
.fab-wa::after { content:''; position:absolute; width:54px; height:54px; border-radius:50%; box-shadow:0 0 0 0 rgba(37,211,102,0.5); animation:pulsering 2s ease-out infinite; pointer-events:none; }
.wc-modal { position:fixed; inset:0; z-index:300; background:rgba(2,6,23,0.75); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; padding:20px; }
.wc-modal.open { display:flex; }
.wc-card { background:#fff; border-radius:24px; padding:28px; max-width:340px; width:100%; text-align:center; position:relative; box-shadow:0 30px 70px rgba(0,0,0,0.4); }
.wc-card h3 { margin:0 0 6px; font-size:22px; font-weight:900; color:#0f172a; }
.wc-card .wc-sub { margin:0 0 18px; color:#64748b; font-size:13.5px; font-weight:700; }
.wc-card img { width:100%; max-width:260px; height:auto; border-radius:14px; border:1px solid #e2e8f0; display:block; margin:0 auto 18px; }
.wc-close { position:absolute; top:14px; inset-inline-end:14px; width:34px; height:34px; border-radius:50%; border:none; background:#f1f5f9; color:#334155; font-size:16px; cursor:pointer; }
.wc-close:hover { background:#e2e8f0; }
.wc-save { display:inline-flex; align-items:center; justify-content:center; gap:10px; width:100%; background:#09B83E; color:#fff; font-weight:800; font-size:15px; padding:13px; border-radius:14px; text-decoration:none; }
.wc-save:hover { background:#079c34; color:#fff; }

/* ── legal entity card (footer, above the copyright bar) ── */
.legal-card { margin-bottom:26px; padding:18px 22px; border:1px solid rgba(255,255,255,0.1); border-radius:16px;
  background:rgba(255,255,255,0.03); font-size:12.5px; line-height:1.9; color:#94a3b8; }
.legal-card .lc-intro { margin:0 0 6px; font-size:12px; color:#64748b; }
.legal-card .lc-name { display:block; color:#e2e8f0; font-weight:800; font-size:14px; line-height:1.6; }
.legal-card .lc-name-cn { display:block; color:#cbd5e1; font-weight:700; font-size:13.5px; margin-bottom:8px; }
.legal-card .lc-row { display:block; }
.legal-card .lc-row b { color:#cbd5e1; font-weight:700; }
.legal-card .lc-val { color:#94a3b8; }
.legal-card .lc-code { color:#6ee7b7; font-weight:700; letter-spacing:0.4px; }
@media (max-width: 600px) { .legal-card { padding:16px 16px; font-size:12px; } }