/* ===========================================================================
 * BuyShip.jp - public.css  (marketing site)
 * Uses theme custom properties from default.css. Loaded after default.css.
 * =========================================================================== */

.site { background: #fff; }
.site-container { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* ---- Header ------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid var(--border);
}
/* gap keeps the first nav item off the logo — space-between alone let them touch. */
.site-header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 20px; }
/* 0 1 auto, not 0 0 auto: the logo may yield when the row is tight. Pinning it
   rigid pushed the hamburger off the right edge of a phone. The desktop nav is
   kept on one line by white-space: nowrap and the 1024px collapse, not by
   freezing the logo. */
.site-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 18px; color: var(--text-color); text-decoration: none; flex: 0 1 auto; min-width: 0; }
.site-logo .logo-mark { width: 32px; height: 32px; border-radius: 8px; background: var(--primary-color); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; }
.site-nav { display: flex; align-items: center; gap: 20px; flex-wrap: nowrap; }
/* A dropdown trigger is a nav item too. `.site-nav > a` only matches DIRECT children,
   so a <summary> inside <details> missed all of this and fell back to the browser
   default font — which is why 代購/集運 looked different from 收費/常見問題. */
/* nowrap is load-bearing: without it "Shopping Service" / 購入代行 broke onto two
   lines, which also shoved the dropdown caret to the far right of the item (the
   summary is an inline-flex row, so a wrapped label eats the width and the caret
   lands after it). Labels must stay on one line or collapse to the hamburger. */
.site-nav > a,
.site-nav > .nav-dd > summary { color: #374151; font-weight: 600; font-size: 15px; text-decoration: none;
                                font-family: inherit; line-height: inherit; white-space: nowrap; }
.site-nav > a:hover,
.site-nav > .nav-dd > summary:hover { color: var(--primary-color); }
.site-nav > a.active,
.site-nav > .nav-dd > summary.active { color: var(--primary-color); }
/* "Log in" / "Sign up" were wrapping to two lines and stretching the header. */
.site-nav-cta { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.site-nav-cta .btn { white-space: nowrap; }
/* flex: none — the hamburger is the one control that must never be squeezed or
   clipped; without a menu there is no navigation at all on a phone. */
.site-nav-toggle { display: none; width: 42px; height: 42px; flex: 0 0 auto; border: 1px solid var(--border); border-radius: 8px; background: #fff; cursor: pointer; align-items: center; justify-content: center; }
.lang-switch { display: flex; gap: 2px; }
.lang-switch a { padding: 5px 9px; border-radius: 7px; font-size: 13px; color: var(--muted); text-decoration: none; border: 1px solid transparent; }
.lang-switch a.active { color: var(--primary-color); border-color: var(--border); background: var(--surface-2); }

/* Compact globe language picker */
.lang-dd { position: relative; }
.lang-dd > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  height: 38px; padding: 0 10px; border-radius: 8px; color: var(--muted); border: 1px solid var(--border, #e5e7eb); }
.lang-dd > summary::-webkit-details-marker { display: none; }
.lang-dd > summary svg { width: 20px; height: 20px; }
.lang-dd > summary .lang-cur { font-size: 14px; margin-left: 6px; font-weight: 600; white-space: nowrap; }
.lang-dd > summary .lang-caret { font-size: 10px; margin-left: 3px; opacity: .6; }
.lang-dd > summary:hover { background: var(--surface-2); }
.lang-dd[open] > summary { background: var(--surface-2); color: var(--primary-color); }
.lang-dd-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 160px; padding: 6px;
  background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 10px 30px rgba(2,6,23,.14); display: flex; flex-direction: column; gap: 2px; }
.lang-dd-menu a { padding: 9px 12px; border-radius: 8px; font-size: 14px; color: var(--text-color, #0f172a);
  text-decoration: none; white-space: nowrap; }
.lang-dd-menu a:hover { background: var(--surface-2); }
.lang-dd-menu a.active { color: var(--primary-color); font-weight: 600; background: var(--surface-2); }
/* Language switcher: desktop one lives in the nav; a mobile one sits in the top bar so it's
   always visible without opening the hamburger. Show exactly one per breakpoint. */
.site-lang-m { display: none; }
@media (max-width: 1024px) {
  .site-lang-m { display: inline-flex; margin-left: auto; margin-right: 0; flex: 0 0 auto; }
  .site-lang-d { display: none; }

  /* Width budget for the mobile header row. At ~412px CSS the logo alone was
     taking 207px, which with a 20px gap either side and the language pill left
     the 42px hamburger hanging past the right edge. Smaller logo + tighter gaps
     buy back roughly 90px. The language NAME stays visible on purpose — it was
     added because customers could not find the globe on its own. */
  .site-header-inner { gap: 10px; }
  .site-header .site-logo .brand-logo { height: 30px; max-width: 150px; }
}
@media (max-width: 360px) {
  /* Last resort on the narrowest phones only: the language name goes so the
     hamburger cannot be clipped. The globe + caret still reads as a switcher. */
  .site-lang-m .lang-cur { display: none; }
  .site-header .site-logo .brand-logo { max-width: 120px; }
}

/* Apple-style footer language selector: labelled, every language as text, current highlighted. */
.site-lang-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 18px 0; border-top: 1px solid rgba(255,255,255,.10); }
.site-lang-label { color: #94a3b8; font-size: 13px; display: inline-flex; align-items: center; gap: 6px; }
.site-lang-label svg { width: 16px; height: 16px; }
.site-lang-bar a { color: #cbd5e1; text-decoration: none; font-size: 14px; }
.site-lang-bar a:hover { color: #fff; }
.site-lang-bar a.active { color: #fff; font-weight: 700; }

/* Carriers strip — each carrier's OWN official icon + name. */
.carriers { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 32px;
  padding: 16px 20px; margin: 6px 0; border: 1px solid var(--border, #e5e7eb); border-radius: 14px; background: #fff; }
.carriers-label { color: var(--muted, #64748b); font-size: 14px; font-weight: 600; }
.carrier { display: inline-flex; align-items: center; gap: 10px; }
.carrier-img { height: 30px; width: auto; max-width: 130px; object-fit: contain; display: block; }
.carrier-nm { font-weight: 800; font-size: 16px; color: var(--text-color, #0f172a); }
.carrier-nm small { color: var(--muted, #64748b); font-weight: 600; font-size: 12px; margin-left: 4px; }
/* Mobile: put the label on its own centred line so BOTH carrier logos sit together
   on the next row (avoids FedEx on line 1, Japan Post orphaned on line 2). */
@media (max-width: 560px) {
  .carriers { gap: 10px 24px; }
  .carriers-label { flex-basis: 100%; text-align: center; }
}

/* ---- Shops page -------------------------------------------------------- */
.shops-group-title { font-size: 16px; font-weight: 700; margin: 26px 0 12px; color: var(--text-color, #0f172a); }
.shops-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.shop-card { position: relative; border: 1px solid var(--border, #e5e7eb); border-radius: 12px; background: #fff; transition: box-shadow .15s, border-color .15s; }
.shop-card:hover { box-shadow: 0 6px 18px rgba(15,23,42,.08); border-color: var(--primary-color, #1f6feb); }
.shop-link { display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-decoration: none; }
.shop-fav { width: 28px; height: 28px; flex: none; border-radius: 6px; object-fit: contain; background: #fff; border: 1px solid var(--border, #e5e7eb); }
.shop-logo-img { height: 30px; width: auto; max-width: 84px; flex: none; object-fit: contain; }
.shop-txt { min-width: 0; }
.shop-name { display: block; font-weight: 700; color: var(--text-color, #0f172a); font-size: 15px; }
.shop-host { display: block; color: var(--muted, #64748b); font-size: 12px; margin-top: 3px; }
.shop-orig { position: absolute; top: 10px; right: 12px; font-size: 11px; color: var(--muted, #64748b); text-decoration: none; }
.shop-orig:hover { color: var(--primary-color, #1f6feb); }
/* A highlight card that links somewhere (e.g. "Any Japanese shop" → /shops). */
.highlight-link, .highlight-link:hover, .highlight-link:hover h3, .highlight-link:hover p { text-decoration: none; }
.highlight-link { color: inherit; transition: box-shadow .15s, transform .15s, border-color .15s; }
.highlight-link:hover { box-shadow: 0 8px 22px rgba(15,23,42,.09); transform: translateY(-2px); border-color: var(--primary-color, #1f6feb); }
.highlight-link h3 span { color: var(--primary-color, #1f6feb); transition: transform .15s; display: inline-block; }
.highlight-link:hover h3 span { transform: translateX(3px); }

/* ---- Hero --------------------------------------------------------------- */
.hero {
  background:
    radial-gradient(1200px 400px at 100% -10%, color-mix(in srgb, var(--primary-color) 16%, transparent), transparent),
    linear-gradient(180deg, var(--surface-2), #fff);
  border-bottom: 1px solid var(--border);
}
.hero-inner { padding: 72px 0 64px; max-width: 760px; }
/* Slim hero for interior pages (guides, finds, country/store guides, rates).
   The class was used by six views but never defined, so those pages had NO top
   padding at all and their first element sat flush against the sticky header.
   The homepage uses .hero-inner instead, which is why it looked fine. */
.hero--slim { padding: 42px 0 30px; }
.hero--slim h1 { font-size: 34px; }
.eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--primary-color); background: color-mix(in srgb, var(--primary-color) 12%, transparent); padding: 6px 12px; border-radius: 999px; margin-bottom: 18px; }
.hero h1 { font-size: 44px; line-height: 1.1; margin: 0 0 16px; letter-spacing: -.02em; }
.hero p.lead { font-size: 18px; color: var(--muted); margin: 0 0 28px; line-height: 1.6; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero-note { color: var(--muted); font-size: 13px; margin-top: 16px; }
.btn-lg { padding: 14px 28px; min-height: 54px; font-size: 17px; border-radius: var(--radius-pill, 100px); }

/* ---- Sections ----------------------------------------------------------- */
.section { padding: 64px 0; }
.section.alt { background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.section-head { max-width: 640px; margin: 0 auto 40px; text-align: center; }
.section-head h2 { font-size: 32px; margin: 0 0 10px; letter-spacing: -.01em; }
.section-head p { color: var(--muted); font-size: 17px; margin: 0; }

/* ---- Feature grid ------------------------------------------------------- */
.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.feature { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 24px; }
.feature .ic { width: 46px; height: 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--primary-color) 12%, transparent); color: var(--primary-color); margin-bottom: 14px; }
.feature .ic svg { width: 24px; height: 24px; }
.feature h3 { font-size: 18px; margin: 0 0 8px; }
.feature p { color: var(--muted); margin: 0; line-height: 1.6; }

.highlights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: -36px; position: relative; z-index: 2; }
.highlight { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 22px; box-shadow: var(--shadow); }
.highlight h3 { font-size: 16px; margin: 0 0 6px; }
.highlight p { color: var(--muted); margin: 0; font-size: 14px; line-height: 1.6; }

/* ---- Steps -------------------------------------------------------------- */
.process-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.process-col h3 { font-size: 20px; margin: 0 0 18px; }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li { position: relative; padding: 0 0 18px 48px; counter-increment: step; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--primary-color); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.steps li::after { content: ''; position: absolute; left: 15px; top: 32px; bottom: 0; width: 2px; background: var(--border); }
.steps li:last-child::after { display: none; }
.steps li span { color: #374151; line-height: 1.55; }

/* ---- Pricing ------------------------------------------------------------ */
/* Two columns so four cards form two even rows (no lone card leaving 2/3 of a row
   blank). Single column on mobile (see the query below). */
.price-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.price-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 24px; }
.price-card h3 { font-size: 17px; margin: 0 0 10px; }
.price-card p { color: var(--muted); margin: 0; line-height: 1.6; }
.price-card .big { font-size: 30px; font-weight: 800; color: var(--text-color); }
/* One highlighted key fact per card, for a consistent, scannable row. */
.price-card .price-key { font-size: 15px; font-weight: 800; color: #1f6feb; margin: 0 0 8px; }
/* Bulleted facts (e.g. the withdrawals card) instead of one dense paragraph. */
.price-card .price-bullets { margin: 8px 0 0; padding: 0; list-style: none; }
.price-card .price-bullets li { position: relative; padding-left: 18px; margin-bottom: 8px; color: var(--muted); line-height: 1.55; }
.price-card .price-bullets li:last-child { margin-bottom: 0; }
.price-card .price-bullets li::before { content: "–"; position: absolute; left: 0; color: #1f6feb; font-weight: 800; }
.calc-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.calc-cta .calc-cta-text { flex: 1 1 320px; }
.calc-cta .btn { white-space: nowrap; flex-shrink: 0; }
.rate-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.rate-table th, .rate-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); font-size: 14px; text-align: left; }
.rate-table th { background: var(--table-header-color); }
.rate-table td:last-child, .rate-table th:last-child { text-align: right; }
.pay-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.pay-pill { border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; font-weight: 600; font-size: 14px; background: var(--surface-2); }

/* Accepted card brands strip (self-contained marks; see partials/card_brands.php) */
.pay-brands { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.pay-brands--center { justify-content: center; }
.pay-brands-label { font-size: 12px; color: var(--muted); font-weight: 600; margin-right: 2px; }
.card-brand { display: inline-flex; align-items: center; justify-content: center; height: 26px; min-width: 42px;
  padding: 0 8px; border-radius: 5px; background: #fff; border: 1px solid #e5e7eb; box-shadow: 0 1px 2px rgba(0,0,0,.05);
  font-weight: 800; font-size: 12px; letter-spacing: .04em; line-height: 1; }
.card-brand.cb-visa { color: #1a1f71; font-style: italic; }
.card-brand.cb-jcb  { color: #0b4ea2; }
.card-brand.cb-amex { color: #2e77bb; }
.card-brand.cb-mc   { padding: 0 6px; }

/* ---- FAQ ---------------------------------------------------------------- */
.faq-search { max-width: 760px; margin: 0 auto 20px; }
.faq-search .form-control { font-size: 16px; padding: 13px 16px; border-radius: 12px; }
.faq-chips { max-width: 760px; margin: 0 auto 26px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.faq-chip { border: 1px solid var(--border); background: var(--surface); color: var(--text-color);
  padding: 7px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; }
.faq-chip:hover { border-color: var(--primary-color); }
.faq-chip.active { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.faq-empty { max-width: 760px; margin: 0 auto 12px; text-align: center; color: var(--muted); }
.faq-group { margin-bottom: 30px; }
.faq-group-title { max-width: 760px; margin: 0 auto 14px; font-size: 20px; }
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 12px; background: #fff; overflow: hidden; }
.faq-item summary { list-style: none; cursor: pointer; padding: 18px 20px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; font-size: 22px; color: var(--muted); font-weight: 400; }
.faq-item[open] summary::after { content: '\2212'; }
.faq-item .faq-a { padding: 0 20px 18px; color: var(--muted); line-height: 1.7; }

/* ---- CTA band ----------------------------------------------------------- */
.cta-band { background: var(--primary-color); color: #fff; text-align: center; padding: 56px 0; }
.cta-band h2 { font-size: 30px; margin: 0 0 10px; color: #fff; }
.cta-band p { color: rgba(255,255,255,.85); font-size: 17px; margin: 0 0 24px; }
.cta-band .btn { background: #fff; color: var(--primary-color); border-color: #fff; }

/* ---- Footer ------------------------------------------------------------- */
.site-footer { background: #0f172a; color: #cbd5e1; margin-top: 0; }
.site-footer-inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; padding: 48px 0 24px; }
.site-footer .muted { color: #94a3b8; font-size: 14px; max-width: 320px; line-height: 1.6; }
.site-footer-links { display: flex; flex-direction: column; gap: 10px; }
.site-footer-links strong { color: #fff; font-size: 14px; margin-bottom: 4px; }
.site-footer-links a { color: #cbd5e1; text-decoration: none; font-size: 14px; }
.site-footer-links a:hover { color: #fff; }
.site-copy { border-top: 1px solid #1e293b; padding: 18px 20px; color: #94a3b8; font-size: 13px; }

/* ---- Homepage (image-forward) ------------------------------------------- */
/* padding-top/bottom, NOT the `padding` shorthand: .hero-grid IS the .site-container,
   so a shorthand here wipes its `0 20px` and the hero alone runs 20px wider per side
   than the header and every other section (and touches the screen edge on phones). */
.hero .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; padding-top: 60px; padding-bottom: 52px; }
.hero-copy { max-width: 560px; }
.hero-art img { width: 100%; height: auto; display: block; }

.svc-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.svc-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 22px; text-align: center; box-shadow: var(--shadow); }
.svc-art { background: var(--surface-2); border-radius: 12px; margin-bottom: 14px; }
.svc-art img { width: 100%; height: 200px; object-fit: contain; display: block; }
.svc-card h3 { font-size: 19px; margin: 0 0 8px; }
.svc-card p { color: var(--muted); margin: 0; line-height: 1.6; }

.how-art { text-align: center; margin: 0 auto 28px; }
.how-art img { width: 100%; max-width: 720px; height: auto; border-radius: 16px; }
.how-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; max-width: 940px; margin: 0 auto; padding: 0; }
.how-steps li { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.how-steps .n { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: var(--primary-color); color: #fff;
  font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.how-steps li > span:last-child { color: #374151; line-height: 1.45; font-weight: 500; }
.how-more { text-align: center; margin-top: 26px; }

.global-band { padding: 64px 0; border-top: 1px solid var(--border); }
.global-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center; }
.global-copy h2 { font-size: 30px; margin: 0 0 10px; letter-spacing: -.01em; }
.global-copy p { color: var(--muted); font-size: 17px; margin: 0 0 20px; line-height: 1.6; }
.global-art img { width: 100%; height: auto; display: block; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1024px) {
  .site-nav-toggle { display: inline-flex; }
  .site-nav { display: none; position: absolute; left: 0; right: 0; top: 64px; flex-direction: column; align-items: stretch;
    gap: 0; background: #fff; border-bottom: 1px solid var(--border); padding: 8px 16px 16px; box-shadow: var(--shadow); }
  .site-nav.open { display: flex; }
  /* Stacked full-width menu — long labels may wrap freely again here. */
  .site-nav > a,
  .site-nav > .nav-dd > summary { padding: 12px 4px; border-bottom: 1px solid var(--border); white-space: normal; }
  .site-nav-cta { flex-direction: column; align-items: stretch; gap: 8px; padding-top: 12px; }
  .site-nav-cta .btn { width: 100%; }
  .lang-switch { justify-content: center; }
  .hero h1 { font-size: 32px; }
  .hero--slim { padding: 26px 0 20px; }
  .hero--slim h1 { font-size: 27px; }
  .features, .highlights, .process-cols, .price-grid { grid-template-columns: 1fr; }
  .highlights { margin-top: 24px; }
  .site-footer-inner { grid-template-columns: 1fr; gap: 24px; }

  /* Homepage: image-first hero, single-column sections */
  .hero .hero-grid { grid-template-columns: 1fr; gap: 16px; padding-top: 26px; padding-bottom: 28px; text-align: center; }
  .hero-copy { max-width: none; }
  .hero-actions { justify-content: center; }
  .hero .pay-brands { justify-content: center; } /* flex row needs this — text-align won't centre it */
  .hero-art { order: -1; }
  .hero-art img { max-height: 230px; width: auto; max-width: 100%; margin: 0 auto; }
  .svc-cards { grid-template-columns: 1fr; }
  .svc-art img { height: 180px; }
  .how-steps { grid-template-columns: 1fr; }
  .global-grid { grid-template-columns: 1fr; gap: 18px; text-align: center; }
  .global-art { order: -1; }
}
/* Buying-guide link in a shop card (see /buy-from/{slug}). */
.shop-meta { padding: 0 16px 12px; margin-top: -4px; }
.shop-guide { font-size: 12px; font-weight: 600; color: var(--primary-color, #1f6feb); text-decoration: none; }
.shop-guide:hover { text-decoration: underline; }