/* 共有ボタン */
.wc-share-trigger {
  width: 100%;
  background-color: #fff;
  border: 1px solid #00A7DB;
  border-radius: 50px;
  display: flex;
  justify-content: center;   /* 中央寄せに変更 */
  align-items: center;
  padding: 10px 15px;
  cursor: pointer;
  color: #00A7DB;
  gap: 8px; /* テキストとアイコンの間隔 */
}

.wc-share-trigger img {
  margin-left: 0; /* gapで調整するので不要 */
  width: 20px;    /* 必要ならサイズ指定 */
  height: auto;
}


/* モーダル全体 */
.wc-share-modal {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 9999;
}

.wc-share-modal[aria-hidden="false"] {
  display: flex;
  align-items: center;       /* 上下中央 */
  justify-content: center;   /* 左右中央 */
  padding: 0 20px;           /* 左右余白 */
}

.wc-share-overlay {
  position: absolute;
  top:0; left:0; right:0; bottom:0;
  background: rgba(0,0,0,0.5);
}

/* モーダル内容 */
.wc-share-content {
  position: relative;
  background: #fff;
  width: 100%;
  max-width: 400px;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  z-index: 1; /* オーバーレイより前面 */
}

/* モーダル閉じるボタン */
.wc-share-close {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background: none;
  font-size: 24px;
  cursor: pointer;
}

/* SNSボタン */
.wc-share-buttons {
  display: flex;
  justify-content: space-around;
  margin: 15px 0;
}

.wc-share-buttons img {
  width: 40px;
  height: 40px;
  cursor: pointer;
}

/* URLコピー欄 */
.wc-share-copy {
  display: flex;
  align-items: stretch; /* inputとボタンの高さを揃える */
  gap: 10px;
}

.wc-share-copy input.wc-share-url {
  flex: 1;
  padding: 10px;        /* 高さを調整 */
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 14px;
  box-sizing: border-box; /* padding込みで高さを正確に */
  margin-bottom: 0;
}

.wc-copy-btn {
  background-color: #00A7DB;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0 15px;
  cursor: pointer;
  font-size: 14px;
  height: auto;             /* 高さを自動にして合わせる */
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;   /* 高さ計算を正確に */
}

/* コピー完了テキスト */
.wc-copy-text {
  margin-top: 15px; /* 下に配置 */
  text-align: center;
  color: #00A7DB;
  font-weight: bold;
}

.wc-copy-msg {
  margin-top: 10px; /* コピー欄の下に余白 */
  text-align: center;
  color: #00A7DB;
  font-weight: bold;
}