/* シェア買いの進捗表示（メーター・キャラ・バッジ・光沢）
   PC の content-product.css と SP の smp-content-product.css で同一だった指定をここに集約している。
   文字サイズ・リストの組み方・容器の枠は PC/SP で違うので各ファイルに残してある。

   読み込み順: 各ページの content-product.css / smp-content-product.css の *後* に link する。
   commodity-coupon-assist.css と同じ並び。

   マークアップは /WEB-INF/jsp/commodity/elm_sharing_purchase.jsp（PC/SP 共通）。 */

/* 土台の継承色は #000 なので、このユニットの文字色はここで決める */
.share_status_container {
  color: #333;
}

.share_status-meter {
  background: #ddd;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.status-meter-inner,
.status-meter-inner:before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
}

.status-meter-inner.aggregating {
  background: linear-gradient(100deg, rgba(197, 197, 197, 1) 0%, rgba(153, 153, 153, 1) 100%);
}

.share_status-list .share_status-num:first-child {
  margin-left: 0;
}

.share_status-head {
  margin-bottom: 0;
}

/* SP の土台（smp-common-locondo_style_2401.css）は h3 に灰色の背景と padding と太字を当てている。
   PC の土台には無いが、打ち消しは共通で持たせる */
.share_status_container h3 {
  background: initial;
  padding: 0;
  font-weight: normal;
}

/* バッジが出る行は flex をやめて通常のインライン組みにする。
   flex のままだと「現在」「個数」「個購入されています」が別々のアイテムになり、
   幅が足りないときに語の途中で折り返す。
   バッジは inline-block・vertical-align: middle・50px で行の高さを作るので、
   flex をやめても上下中央は保たれる */
.share_status_container .share_status-title:has(.share_badge) {
  display: block;
  text-align: center;
}

.share_badge {
  display: inline-block;
  vertical-align: middle;
  margin-right: 8px;
  width: 50px;
  height: 50px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  /* 光沢を :before で載せるための基準 */
  position: relative;
}

/* 2枚は8px重ねて目標数を前面に置く。1枚目の margin-right 8px を打ち消すので 8 + 8 = 16px 引く
   （緑バッジの「CLEAR!」は右端から8pxしか余白がないので、重なりはこれ以上詰められない） */
.share_badge+.share_badge {
  margin-left: -16px;
  z-index: 1;
}

.share_badge.is-min {
  background-image: url(https://media.aws.locondo.jp/contents/img/common/share_purchase/badge_min_clear.png);
}

.share_badge.is-goal {
  background-image: url(https://media.aws.locondo.jp/contents/img/common/share_purchase/badge_goal_clear.png);
}

.share_badge:before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0) 60%);
  background-repeat: no-repeat;
  background-size: 200% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  animation: share_meter_shine 3.2s ease-in-out infinite;
}

.share_badge.is-min:before {
  -webkit-mask-image: url(https://media.aws.locondo.jp/contents/img/common/share_purchase/badge_min_clear.png);
  mask-image: url(https://media.aws.locondo.jp/contents/img/common/share_purchase/badge_min_clear.png);
}

.share_badge.is-goal:before {
  -webkit-mask-image: url(https://media.aws.locondo.jp/contents/img/common/share_purchase/badge_goal_clear.png);
  mask-image: url(https://media.aws.locondo.jp/contents/img/common/share_purchase/badge_goal_clear.png);
}

.share_status-track {
  position: relative;
  /* キャラの頭の分。キャラ 70px - バー 24px - 足の沈み 4px でバーより上に42px 出るので、見出しに10px 重ねて32px */
  padding-top: 32px;
  /* padding は % の行の場所、margin は区切り線までのすき間。キャラと % は padding 側の下端を基準にしている */
  padding-bottom: 32px;
  margin-bottom: 10px;
  /* キャラと%の立ち位置。両端は 20px 残して切れないようにする */
  --pos: clamp(20px, 100% * var(--ratio, 0), 100% - 20px);
}

.share_status-meter,
.status-meter-inner,
.status-meter-inner:before {
  height: 24px;
  border-radius: 15px;
}

.share_status-track .status-meter-inner {
  transition: width 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.share_status-track .share_status-runner,
.share_status-track .status-meter-message {
  transition: left 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes share_meter_shine {
  0% {
    background-position: 150% 0;
  }
  45%, 100% {
    background-position: -50% 0;
  }
}

.share_status-track .status-meter-inner:before {
  content: '';
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 62%);
  background-repeat: no-repeat;
  background-size: 200% 100%;
  opacity: 1;
  animation: share_meter_shine 3.2s ease-in-out infinite;
}

.status-meter-inner.accepting {
  background: linear-gradient(90deg, #34c759 0%, #08ff0c 100%);
}

.status-meter-inner.accepting.is-clear {
  /* 金はオーカー→オレンジがかった黄→明るい黄の3段。帯の長さが変わっても崩れない */
  background-image: linear-gradient(90deg, #34c759 0%, #08ff0c 100%), linear-gradient(90deg, #d4a041 0%, #f7d14e 55%, #fbe67b 100%);
  background-repeat: no-repeat, no-repeat;
  background-size: var(--min-stop, 100%) 100%, calc(100% - var(--min-stop, 100%)) 100%;
  background-position: left center, right center;
}

.status-meter-inner.achieved {
  background-image: linear-gradient(90deg, #00ffe0 0%, #f1d80c 25%, #ff383c 50%, #ed8bf7 75%, #5768ff 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.status-meter-inner.accepting.is-goal {
  background-image: linear-gradient(90deg, #00ffe0 0%, #f1d80c 25%, #ff383c 50%, #ed8bf7 75%, #5768ff 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.share_status-track .status-meter-message {
  position: absolute;
  left: var(--pos);
  bottom: 5px;
  transform: translateX(-50%);
  /* 「集計中」は12pxの灰色。受付中の % は下の .accepting で大きくする */
  color: #999;
  font-size: 12px;
  padding: 0;
}

/* ITCRE-94: 受付中の % を目立たせる。グラデーションを文字の形で切り抜く。
   達成前はバーの緑に合わせ、白地で読める濃さの緑にする */
.share_status-track .status-meter-message.accepting {
  bottom: 2px;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  --ratio-color: linear-gradient(90deg, #22b84d 0%, #34c759 50%, #1fbf85 100%);
  /* 1枚目はバーと同じ光沢。同じ keyframes で動かす（2枚目は幅100%なので位置が動いても変わらない） */
  background-image: linear-gradient(105deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 62%), var(--ratio-color);
  background-repeat: no-repeat;
  background-size: 200% 100%, 100% 100%;
  animation: share_meter_shine 3.2s ease-in-out infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* 目標数があり、必要な個数を超えてバーが金に入ったら金にする。金も白地で読める濃さに寄せる */
.share_status-track:has(.status-meter-inner.is-clear:not(.is-goal)) .status-meter-message.accepting {
  --ratio-color: linear-gradient(90deg, #c98a12 0%, #e0a92a 50%, #d4961a 100%);
}

/* 達成（キャラが中央で banzai）したら、バーの虹色のうち赤から先の濃い色だけにする
   （水色と黄色は白地で読めないので使わない） */
.share_status-track.has-center-runner .status-meter-message.accepting {
  --ratio-color: linear-gradient(90deg, #ff383c 0%, #d63fd0 50%, #5768ff 100%);
}

/* 動きを減らす設定の端末では、バーやバッジと同じく光沢を止める */
@media (prefers-reduced-motion: reduce) {
  .share_status-track .status-meter-message.accepting {
    animation: none;
  }
}

.share_status-track.has-center-runner .status-meter-message {
  left: 50%;
}

.share_status-runner {
  position: absolute;
  left: calc(var(--pos) - 35px);
  /* トラックの padding-bottom 32px より4px低く置いてバーに足を乗せる */
  bottom: 28px;
  width: 70px;
  height: 70px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-image: url(https://media.aws.locondo.jp/contents/img/common/share_purchase/tocotoco.gif);
  transform: scaleX(-1);
  z-index: 1;
  pointer-events: none;
}

.share_status-track.is-static {
  padding-bottom: 8px;
}

.share_status-track.is-static .share_status-runner {
  bottom: 4px;
}

.share_status-runner.is-center.is-aggregating {
  background-image: url(https://media.aws.locondo.jp/contents/img/common/share_purchase/kyoro.gif);
}

.share_status-track.is-empty {
  min-height: 24px;
}

.share_status-runner.is-center.is-not-achieved {
  background-image: url(https://media.aws.locondo.jp/contents/img/common/share_purchase/kyoro.gif);
}

.share_status-runner.is-center.is-prev-reception {
  left: auto;
  right: -25px;
  margin-left: 0;
  transform: scaleX(-1);
  background-image: url(https://media.aws.locondo.jp/contents/img/common/share_purchase/chira.gif);
}

.share_status-runner.is-center.is-achieved {
  background-image: url(https://media.aws.locondo.jp/contents/img/common/share_purchase/banzai.gif);
}

.share_status-runner.is-center {
  left: 50%;
  width: 68px;
  height: 68px;
  margin-left: -34px;
  background-image: url(https://media.aws.locondo.jp/contents/img/common/share_purchase/banzai.gif);
  transform: none;
}

.share_status-track+.share_status-list {
  margin-top: 0;
}

.share_status-list .share_status-num {
  font-size: 22px;
}

.share_status-list .share_status-time .share_status-num {
  font-size: 20px;
}

.share_status-list .share_countdown.overDays,
.share_status-list .share_countdown.overDays .share_status-num {
  font-size: 13px;
}

/* 「残り」は「日」と「時分秒」を2行に分ける。土台の margin-left: 5px は中央揃えをずらすだけなので消す */
.share_status-list .share_countdown.overDays {
  display: block;
  margin-left: 0;
  margin-top: 6px;
}

/* リストの土台。並べ方（SPは width:50%、PCは flex+擬似要素の区切り線）だけ各ファイルに残す */
.share_status-list {
  display: flex;
  padding-top: 14px;
  border-top: 1px solid #ddd;
}

/* セル内のラベル（必要な個数／残り）から数値までの間隔。注記までの間隔と同じ6pxで揃える */
.share_status-list li>div {
  margin-top: 6px;
}

.share_status-list h4 {
  color: #666;
  font-size: 12px;
  /* h4 の既定は太字。SP の土台では bold のままなので明示して揃える */
  font-weight: normal;
}

/* 受付終了後の印。見出しは結果しか言わないので、下段だけ見たときに終わったことが分かるようにする */
.share_status-purchased h4::before {
  content: '受付終了';
  display: inline-flex;
  vertical-align: middle;
  margin-right: 6px;
  /* vertical-align: middle だと中心が少し下に来るので上げる */
  position: relative;
  top: -2px;
  padding: 4px 6px;
  border-radius: 2px;
  background: #666;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  transform: scale(.9);
  transform-origin: center right;
}


.share_status-note {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  color: #999;
  line-height: 1.4;
}

/* カウントダウンの文字。太さは PC/SP 同じ */
.share_countdown.overDays,
.share_countdown.overDays .share_status-num {
  font-weight: 500;
}

/* % と「集計中」の文字の太さ。位置と大きさは下の .share_status-track 側で決める */
.status-meter-message {
  font-weight: bold;
  z-index: 1;
}

/* お届け予定（ReZARD × ヒカルのコラボだけ JS で足す。CRE_DEV-812） */
.share_status-delivery {
  margin-top: 16px;
  padding-top: 20px;
  border-top: 1px solid #ddd;
  text-align: center;
}

.share_status-delivery-date {
  margin: 0 0 4px;
  color: #333;
}

.share_status-delivery-date span {
  margin-right: 8px;
  font-size: 13px;
  color: #666;
}

.share_status-delivery-date strong {
  font-size: 16px;
  font-weight: bold;
}

.share_status-delivery-note {
  margin: 0;
  font-size: 11px;
  color: #888;
  line-height: 1.4;
}