/* ==================================================================
   tt-share.css — Truetagg SNSシェアモジュール
   ------------------------------------------------------------------
   本番 truetagg-ui.css の配色に整合:
     アクセント #4A90D9 / 基本テキスト #333・#555 / サブ #888
     ボーダー #ddd・#eee / ホバー面 #f5f5f5 / ピル角丸 24px
   truetagg-ui.css とは別に読み込む独立ファイル。
   ================================================================== */

.tt-share, .tt-share * { -webkit-tap-highlight-color:transparent; box-sizing:border-box; }

.tt-share {
  --tt-blue:#4A90D9;
  --tt-ink:#333;
  --tt-icon:#555;
  --tt-sub:#888;
  --tt-line:#ddd;
  --tt-line2:#eee;
  --tt-hover:#f5f5f5;
  --tt-c-x:#222;
  --tt-c-fb:#1877f2;
  --tt-c-line:#06c755;
  --tt-c-ig:#e1306c;
  display:inline-flex; align-items:center; font-family:inherit; line-height:1;
}

/* ── inlineモード（商品詳細） ───────────────────── */
.tt-share--pdp { display:block; margin:-2px 0 16px; }
@media (max-width:639px){ .tt-share--pdp { margin:-2px 0 14px; } }

.tt-share--inline { gap:10px; flex-wrap:wrap; }
.tt-share-inline-label { font-size:12px; color:var(--tt-sub); letter-spacing:.02em; }
.tt-share-row { display:inline-flex; align-items:center; gap:8px; }

.tt-share-icon {
  appearance:none; -webkit-appearance:none;
  width:34px; height:34px; padding:0;
  border:1px solid #e0e0e0; border-radius:50%;
  background:#fff; color:var(--tt-icon);
  display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer;
  transition:color .18s ease, border-color .18s ease, background .18s ease, transform .12s ease;
}
.tt-share-icon svg { display:block; width:16px; height:16px; }
.tt-share-icon:hover { border-color:var(--tt-blue); color:var(--tt-blue); background:#f0f6ff; }
.tt-share-icon:active { transform:scale(.94); }
.tt-share-icon:focus-visible { outline:none; box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--tt-blue); }
.tt-share-icon--x:hover    { color:var(--tt-c-x);    border-color:var(--tt-c-x);    background:#f5f5f5; }
.tt-share-icon--fb:hover   { color:var(--tt-c-fb);   border-color:var(--tt-c-fb);   background:#eef5ff; }
.tt-share-icon--line:hover { color:var(--tt-c-line); border-color:var(--tt-c-line); background:#ecfbf3; }
.tt-share-icon--ig:hover   { color:var(--tt-c-ig);   border-color:var(--tt-c-ig);   background:#fdeef4; }

@media (max-width:639px){ .tt-share-icon { width:33px; height:33px; } }

/* ── popoverモード（検索 / SEO） ────────────────── */
.tt-share--popover { position:relative; flex-shrink:0; }
.tt-share-mount { flex-shrink:0; }

/* 検索結果: common.js が注入する #sort-filter-bar 右側に配置 */
.sort-filter-bar__right { display:flex; align-items:center; gap:8px; }

.tt-share-trigger {
  appearance:none; -webkit-appearance:none;
  display:inline-flex; align-items:center; gap:6px;
  height:36px; padding:0 16px;
  border:1.5px solid var(--tt-line); border-radius:24px;
  background:#fff; color:var(--tt-icon);
  font-size:13px; font-family:inherit; letter-spacing:.02em;
  white-space:nowrap; flex-shrink:0;
  cursor:pointer; transition:border-color .18s ease, color .18s ease, background .18s ease;
}
.tt-share-trigger svg { display:block; width:16px; height:16px; }
.tt-share-trigger:hover { border-color:var(--tt-blue); color:var(--tt-blue); }
.tt-share--popover.is-open .tt-share-trigger { border-color:var(--tt-blue); color:var(--tt-blue); background:#f0f6ff; }
.tt-share-trigger:focus-visible { outline:none; box-shadow:0 0 0 2px #fff, 0 0 0 3.5px var(--tt-blue); }

@media (max-width:639px){ .tt-share-trigger { height:34px; padding:0 14px; font-size:12px; } }

.tt-share-menu {
  position:absolute; top:calc(100% + 8px); right:0;
  z-index:9997;
  min-width:210px; padding:6px;
  background:#fff; border:1px solid var(--tt-line2); border-radius:12px;
  box-shadow:0 4px 24px rgba(0,0,0,.12);
}
.tt-share-menu[hidden] { display:none; }
.tt-share-menu-head { font-size:11px; color:var(--tt-sub); padding:6px 10px 4px; letter-spacing:.02em; }

.tt-share-menu-item {
  appearance:none; -webkit-appearance:none;
  width:100%; display:flex; align-items:center; gap:10px;
  padding:9px 10px; border:none; border-radius:8px;
  background:transparent; color:var(--tt-ink);
  font-size:13px; font-family:inherit; text-align:left; cursor:pointer;
  transition:background .14s ease;
}
.tt-share-menu-item:hover { background:var(--tt-hover); }
.tt-share-menu-item:focus-visible { outline:none; background:var(--tt-hover); box-shadow:inset 0 0 0 1.5px var(--tt-blue); }
.tt-share-menu-ico { width:22px; display:inline-flex; align-items:center; justify-content:center; color:var(--tt-c-x); flex-shrink:0; }
.tt-share-menu-ico svg { display:block; width:17px; height:17px; }
.tt-share-menu-item--fb .tt-share-menu-ico   { color:var(--tt-c-fb); }
.tt-share-menu-item--line .tt-share-menu-ico { color:var(--tt-c-line); }
.tt-share-menu-item--ig .tt-share-menu-ico   { color:var(--tt-c-ig); }
.tt-share-menu-item--copy .tt-share-menu-ico { color:var(--tt-icon); }
.tt-share-menu-txt { flex:1; min-width:0; }
.tt-share-menu-divider { height:1px; background:var(--tt-line2); margin:5px 10px; }

/* ── トースト（SPは固定ボトムナビ60pxの上に出す） ── */
.tt-share-toast {
  position:fixed; left:50%; bottom:28px;
  transform:translate(-50%,16px);
  z-index:10000;
  max-width:min(88vw,420px);
  padding:12px 18px;
  background:#222; color:#fff;
  font-size:13px; line-height:1.6; letter-spacing:.02em;
  border-radius:8px; box-shadow:0 4px 20px rgba(0,0,0,.28);
  opacity:0; pointer-events:none;
  transition:opacity .22s ease, transform .22s ease;
}
.tt-share-toast.is-visible { opacity:1; transform:translate(-50%,0); }
@media (max-width:768px){
  .tt-share-toast { bottom:calc(60px + env(safe-area-inset-bottom) + 16px); font-size:12px; }
}

@media (prefers-reduced-motion:reduce){
  .tt-share-icon, .tt-share-trigger, .tt-share-menu-item, .tt-share-toast { transition:none; }
}