/*!
 * Elementor Fusen - Sticky Label CSS (final)
 * Version: 1.0.0
 */

/* ========== Base ================================================== */
.fsn-fusen{
  position: fixed;
  /* 初期縦位置（JSの data-topvh または data-align="mid" で上書き） */
  top: 20vh;

  /* 画面端のセーフエリア + 任意オフセット */
  right: calc(var(--fusen-offset-x, 0px) + max(0px, env(safe-area-inset-right)));
  left: auto !important;

  z-index: var(--fusen-z, 99999);

  /* 見た目（変数で上書き可能） */
  --fusen-bg: #fff8cc;
  --fusen-tc: #333333;
  --fusen-radius: 12px;
  --fusen-shadow: 0 8px 22px rgba(0,0,0,.14);

  background: var(--fusen-bg);
  color: var(--fusen-tc);
  font: 600 0.95rem/1.2 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;

  padding: var(--fusen-py, 8px) var(--fusen-px, 6px);
  border-radius: var(--fusen-radius);
  box-shadow: var(--fusen-shadow);

  display: flex;
  align-items: center;
  justify-content: center;

  width: var(--fusen-w, auto);
  min-height: var(--fusen-h, auto);

  transition: opacity .25s ease, transform .25s ease;
  opacity: 0;
  pointer-events: none;

  overflow: visible; /* 外側ナビを見せるため必須 */
  writing-mode: horizontal-tb; /* 既定は横書き */
}

/* 左側に出す */
.fsn-fusen[data-side="left"]{
  left:  calc(var(--fusen-offset-x, 0px) + max(0px, env(safe-area-inset-left))) !important;
  right: auto !important;
}

/* 表示時 */
.fsn-fusen.is-visible{
  opacity: 1;
  pointer-events: auto;
}

/* 画面中央寄せ（JSが top=50vh を入れます） */
.fsn-fusen[data-align="mid"]{
  transform: translateY(-50%);
}

/* ========== Vertical mode (縦書き) ================================ */
.fsn-fusen[data-orient="vertical"]{
  writing-mode: vertical-rl;
  text-orientation: upright;
  /* スリムな既定 */
  width: 36px;             /* 32〜40で好み調整 */
  min-height: 120px;       /* 端末やデザインに合わせて */
  max-height: 50vh;
  padding: 8px 6px;
}

/* ラベル（共通） */
.fsn-label{
  display: block;
  text-align: center;
  user-select: none;
  cursor: pointer;
  line-height: 1.2;
  letter-spacing: .04em;
}

/* ========== Navigation (上下ボタンのみ) =========================== */
/* 調整変数 */
.fsn-fusen{
  --nav-size: 24px;      /* 丸ボタン直径（22〜28推奨） */
  --nav-offset-y: 16px;  /* 本体から上下にどれだけ離すか */
}

/* コンテナは本体基準、子ボタンだけクリック可 */
.fsn-fusen .fsn-nav{
  position: absolute;
  inset: 0;                 /* 本体を基準 */
  pointer-events: none;     /* 子のみ可 */
}

/* ボタン（ガラス風） */
.fsn-fusen .fsn-btn{
  all: unset;
  width: var(--nav-size);
  height: var(--nav-size);
  border-radius: 10px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 8px 22px rgba(0,0,0,.16);
  backdrop-filter: saturate(160%) blur(8px);
  display: grid; place-items: center;
  pointer-events: auto;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, opacity .16s ease;
}
.fsn-fusen .fsn-btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.9);
  box-shadow: 0 10px 26px rgba(0,0,0,.18);
}
.fsn-fusen .fsn-btn:disabled{
  opacity: .35;
  box-shadow: none;
  cursor: default;
}

/* アイコンはSVGマスク（下向き）。prevは回転で上向き */
.fsn-fusen .fsn-btn::before{
  content:"";
  width:60%; height:60%;
  background: rgba(0,0,0,.58);
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.7 9.7a1 1 0 0 1 1.4 0L12 13.6l3.9-3.9a1 1 0 1 1 1.4 1.4l-4.6 4.6a1 1 0 0 1-1.4 0L6.7 11.1a1 1 0 0 1 0-1.4z"/></svg>') center/contain no-repeat;
          mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.7 9.7a1 1 0 0 1 1.4 0L12 13.6l3.9-3.9a1 1 0 1 1 1.4 1.4l-4.6 4.6a1 1 0 0 1-1.4 0L6.7 11.1a1 1 0 0 1 0-1.4z"/></svg>') center/contain no-repeat;
}
.fsn-fusen .fsn-prev::before{ transform: rotate(180deg); }

/* 位置：本体の「外」に上下配置（重なりなし） */
.fsn-fusen .fsn-prev{
  position: absolute;
  top:    calc(-1 * (var(--nav-offset-y) + var(--nav-size)));
  left: 50%;
  transform: translateX(-50%);
}
.fsn-fusen .fsn-next{
  position: absolute;
  bottom: calc(-1 * (var(--nav-offset-y) + var(--nav-size)));
  left: 50%;
  transform: translateX(-50%);
}

/* ========== fsn-anchor（フロントで不可視、エディタで可視） ======== */
.fsn-anchor{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.elementor-editor-active .fsn-anchor{
  position: relative !important;
  width: auto; height: auto;
  clip: auto; clip-path: none; overflow: visible; margin: 0;
  display: inline-block;
  background: #eef4ff; color: #334;
  font-size: 12px; padding: 2px 6px;
  border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

/* ========== 左右強制（論理プロパティ干渉対策） ======================= */
.fsn-fusen{ inset-inline-start: auto; inset-inline-end: auto; }
.fsn-fusen[data-side="left"]{ inset-inline-end: auto; inset-inline-start: auto; }

/* ========== Mobile behavior ===================================== */
@media (max-width: 767.98px){
  .fsn-fusen[data-hide-mobile="1"]{ display: none !important; }
  /* モバイルは少しだけコンパクトに */
  .fsn-fusen[data-orient="vertical"]{
    width: 32px;
    min-height: 110px;
    max-height: 45vh;
    padding: 6px 5px;
  }
  .fsn-fusen{
    --nav-size: 22px;
    --nav-offset-y: 12px;
  }
}

/* ========== Elementor editor tweak =============================== */
.elementor-editor-active .fsn-fusen{
  opacity: .6; pointer-events: none;
}

/* ========== Optional desktop tweak =============================== */
@media (min-width: 1024px){
  .fsn-fusen[data-orient="vertical"]{
    width: 38px;            /* デスクトップだけ少し太めに */
    min-height: 130px;
    padding: 9px 6px;
  }
}
