/**
 * カートの「あと何点で何が得か」（inc/cart-progress.php）。
 *
 * まとめ買い割引と基本送料の免除を 1 枠で出す。もとは
 * nicobay-bulk-discount.css と nicobay-shipping-progress.css の 2 枠だったので、
 * 枠・背景・升目・チェックの緑はその 2 つと同じ値をそのまま使う
 * （#34a853 / #f7f7f5 / #e6e4e0）。ブランド色 #138808 は点数の強調にだけ使う。
 */

.nb-goals {
  padding: 14px 18px;
  background: #f7f7f5;
  border: 1px solid #e6e4e0;
  border-radius: 10px;
  box-sizing: border-box;
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 24px;
  align-items: center;
}

/* 送料の内訳が出せないときは右の列ごと畳む。 */
.nb-goals:not(:has(.nb-goals__cost)) {
  grid-template-columns: minmax(0, 1fr);
  column-gap: 0;
}

/* カート: 商品一覧の直前。表との間隔は他ブロックと同じ 36px。 */
.nb-goals--cart {
  margin: 0 0 36px;
}

.nb-goals__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  /* 注記の文字の大きさを、この枠の幅に合わせるための基準（下の .nb-goals__note）。 */
  container-type: inline-size;
}

/* ---------- 1 行ぶん（見出し＋バー） ---------- */

.nb-goals__lead {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  color: #222;
}

.nb-goals__num {
  color: #138808;
  font-weight: 800;
  font-size: 18px;
}

/* 得になる数字（割引率と基本送料の額）は一段大きく、「あと◯点」の数字と同じ緑で。
   数字だけを拾って読めるようにするのが狙いなので、3 つとも同じ扱いにする
   （.nb-goals__num と同値。到達済みの行でも色は変えない）。
   金額は wc_price が出す <span class="woocommerce-Price-amount">。見出しの中に
   出てくる金額はこれ 1 つだけなので、クラスを足さずそのまま拾う。 */
.nb-goals__big,
.nb-goals__lead .woocommerce-Price-amount {
  font-style: normal;
  font-size: 18px;
  font-weight: 800;
  color: #138808;
}

.nb-goals.is-reached .nb-goals__lead {
  color: #1a7f4b;
}

.nb-goals__check {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #34a853;
  position: relative;
}

.nb-goals__check::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 3px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.nb-goals__bar {
  display: flex;
  gap: 4px;
}

.nb-goals__seg {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: #e2e7de;
}

.nb-goals__seg.is-on {
  background: #34a853;
}

/* 2 行以上出るのは、割引と送料で残り点数がずれたときだけ。
   行の切れ目が分かるよう、2 行目以降の見出しの上に少し余白を置く。 */
.nb-goals__bar + .nb-goals__lead {
  margin-top: 4px;
}

/* 注記は 1 項目 1 行で、行の途中では折り返さない（2026-10-06 指示）。
   いちばん長い 1 行目「※セット商品・定期便・一部の対象外商品は割引の点数に
   数えません。」はちょうど全角 32 文字。枠の幅 ÷ 34 を上限にして、端末ごとの
   字幅の誤差ぶん（約 6%）の余裕を残す（ドロワー 306px なら 9px、
   320px 幅の端末でも約 7.4px）。÷ 32 だと幅ぴったりで余裕が 0 だった（実測）。 */
.nb-goals__note {
  margin: 0;
  font-size: min(11px, calc(100cqi / 34));
  line-height: 1.6;
  color: #8a8a8a;
}

.nb-goals__note-line {
  display: block;
  white-space: nowrap;
}

/* ---------- 送料の内訳（右） ---------- */

.nb-goals__cost {
  margin: 0;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
  color: #222;
}

.nb-goals__cost-label {
  margin-right: 6px;
}

.nb-goals__cost-was {
  margin-right: 6px;
  color: #222;
  text-decoration: line-through;
  font-weight: 400;
}

.nb-goals__cost-value {
  color: #1a7f4b;
}

.nb-goals__cost-parts {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 400;
  color: #767676;
}

/* ---------- 狭いとき ---------- */

/* カートページのスマホ幅。右に置けないので下へ回す。 */
@media screen and (max-width: 749px) {
  .nb-goals--cart {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: 8px;
  }

  .nb-goals--cart .nb-goals__cost {
    white-space: normal;
  }
}

/* ドロワー（幅 342px）。器の縁まで敷いて、上下を詰める。
   枠線はドロワー側（nicobay-cart-drawer.css の .nb-drawer__meter）に任せる。 */
.nb-goals--drawer {
  margin: 0;
  border: 0;
  border-radius: 0;
  padding: 10px 18px;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 0;
  row-gap: 6px;
}

.nb-goals--drawer .nb-goals__lead {
  font-size: 13px;
}

.nb-goals--drawer .nb-goals__num,
.nb-goals--drawer .nb-goals__big,
.nb-goals--drawer .nb-goals__lead .woocommerce-Price-amount {
  font-size: 16px;
}

.nb-goals--drawer .nb-goals__note {
  font-size: min(10px, calc(100cqi / 34));
}

.nb-goals--drawer .nb-goals__cost {
  font-size: 12px;
  white-space: normal;
}

/* 内訳の但し書きは、幅 342px では 2 行に折り返して場所を食う。
   いくら掛かるかの結論（送料 $30）だけ残す。内訳はカートページで見られる。 */
.nb-goals--drawer .nb-goals__cost-parts {
  display: none;
}