/*
 * Donation QR Card
 *
 * 投稿本文の中に展開されるため、テーマ側のCSSと衝突しないよう次の方針で書いている。
 *  - class名は全て dqr- 接頭辞。元の .card / .grid / .item など汎用名は使わない。
 *  - 全セレクタを .dqr-wrap.dqr-wrap で始めて詳細度を1段上げ、テーマの
 *    .entry-content p のような指定に打ち消されないようにしている(!important は不使用)。
 *  - リセットは .dqr-wrap の内側だけに閉じる。元の `* { }` のような全体リセットは厳禁。
 */

.dqr-wrap.dqr-wrap,
.dqr-wrap.dqr-wrap *,
.dqr-wrap.dqr-wrap *::before,
.dqr-wrap.dqr-wrap *::after {
  box-sizing: border-box;
}

.dqr-wrap.dqr-wrap {
  width: 100%;
  max-width: 560px;
  margin: 0;
  padding: 0;
  /* テーマの text-align に引きずられないよう基準を固定する。
     カード自体の左右位置は下の .dqr-align-* で決める */
  text-align: left;
  background: #ffffff;
  color: #333333;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

.dqr-wrap.dqr-wrap .dqr-card {
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid #e2e2e2;
  border-radius: 10px;
}

.dqr-wrap.dqr-wrap .dqr-header {
  margin: 0;
  padding: 10px 16px 6px 16px;
  border-bottom: 1px solid #e2e2e2;
}

/*
 * カードの左右位置。ショートコードの align 属性から付与される。
 * max-width を持つブロック要素なので text-align では動かず、左右marginで寄せる。
 * .dqr-wrap.dqr-wrap の margin:0 (詳細度0-2-0) を確実に上書きするため、
 * ここは .dqr-wrap.dqr-wrap.dqr-align-* (0-3-0) にしている。
 */
.dqr-wrap.dqr-wrap.dqr-align-center {
  margin-left: auto;
  margin-right: auto;
}

.dqr-wrap.dqr-wrap.dqr-align-right {
  margin-left: auto;
  margin-right: 0;
}

.dqr-wrap.dqr-wrap.dqr-align-left {
  margin-left: 0;
  margin-right: auto;
}

/* テーマの `.entry-content div { line-height: 2 }` のような直接指定は継承より強いので、
   文字が乗る箱には行送りを明示しておく */
.dqr-wrap.dqr-wrap .dqr-card,
.dqr-wrap.dqr-wrap .dqr-header,
.dqr-wrap.dqr-wrap .dqr-grid,
.dqr-wrap.dqr-wrap .dqr-item {
  line-height: 1.3;
}

.dqr-wrap.dqr-wrap .dqr-title {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  color: #333333;
  letter-spacing: 0.02em;
}

.dqr-wrap.dqr-wrap .dqr-note {
  margin: 1px 0 0 0;
  padding: 0;
  font-family: inherit;
  font-size: 9.5px;
  line-height: 1.3;
  color: #333333;
}

.dqr-wrap.dqr-wrap .dqr-grid {
  flex: 1;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.dqr-wrap.dqr-wrap .dqr-item {
  margin: 0;
  padding: 7px 6px 6px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  border-right: 1px solid #e2e2e2;
  text-align: center;
}

.dqr-wrap.dqr-wrap .dqr-item:last-child {
  border-right: none;
}

.dqr-wrap.dqr-wrap .dqr-label {
  margin: 0;
  padding: 0;
  height: 22px;
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.15;
  color: #333333;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dqr-wrap.dqr-wrap .dqr-sub {
  margin: 1px 0 0 0;
  padding: 0;
  font-size: 7.5px;
  line-height: 1.15;
  color: #b45309;
}

/* 補足(no tag)を持つ項目は、ラベル+補足の合計を他と同じ 22px に収めて
   QR画像以降の縦位置が下にずれないようにする (11 + 1 + 10 = 22px) */
.dqr-wrap.dqr-wrap .dqr-item:has(.dqr-sub) .dqr-label {
  height: 11px;
}

.dqr-wrap.dqr-wrap .dqr-item:has(.dqr-sub) .dqr-sub {
  height: 10px;
}

/* テーマが .entry-content img に角丸や影を付けていることが多いので明示的に打ち消す */
.dqr-wrap.dqr-wrap .dqr-qr {
  width: 84px;
  height: 84px;
  max-width: 100%;
  margin: 3px 0 4px 0;
  padding: 3px;
  display: block;
  float: none;
  background: #ffffff;
  border: 1px solid #eeeeee;
  border-radius: 4px;
  box-shadow: none;
  filter: none;
}

.dqr-wrap.dqr-wrap .dqr-addr {
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: "SF Mono", "Consolas", "Menlo", monospace;
  font-size: 10px;
  line-height: 1.35;
  color: #333333;
  word-break: break-all;
  cursor: pointer;
}

/* テーマがボタンを大きく装飾していることが多いので、必要な指定は明示的に打ち消す */
.dqr-wrap.dqr-wrap .dqr-copy {
  width: auto;
  height: auto;
  min-height: 0;
  margin: 4px 0 0 0;
  padding: 2px 8px;
  font-family: inherit;
  font-size: 7.5px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
  color: #333333;
  background: #f5f5f5;
  border: 1px solid #d5d5d5;
  border-radius: 4px;
  box-shadow: none;
  cursor: pointer;
}

.dqr-wrap.dqr-wrap .dqr-copy:hover {
  background: #ececec;
}

.dqr-wrap.dqr-wrap .dqr-copy:focus-visible,
.dqr-wrap.dqr-wrap .dqr-addr:focus-visible {
  outline: 2px solid #2271b1;
  outline-offset: 1px;
}

.dqr-wrap.dqr-wrap .dqr-copy.dqr-copied {
  color: #2a7a2a;
  background: #eaf7ea;
  border-color: #b9dfb9;
}

/* スマートフォン: 2列 × 2行 (USDC USDT / USDT XRP) */
@media (max-width: 600px) {
  .dqr-wrap.dqr-wrap .dqr-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* カラムが広くなるぶんQRを拡大 */
  .dqr-wrap.dqr-wrap .dqr-qr {
    width: 140px;
    height: 140px;
  }

  /* 右端(2n番目)の縦罫線を消し、1行目(1〜2番目)に横罫線を引く */
  .dqr-wrap.dqr-wrap .dqr-item:nth-child(2n) {
    border-right: none;
  }

  .dqr-wrap.dqr-wrap .dqr-item:nth-child(-n+2) {
    border-bottom: 1px solid #e2e2e2;
  }

  /* 3番目は last-child ではないため縦罫線を明示的に戻す */
  .dqr-wrap.dqr-wrap .dqr-item:nth-child(3) {
    border-right: 1px solid #e2e2e2;
  }
}