/* =========================================================
   JAL Mall  キャンセル可否／返品可否 表示ブロック  共通CSS
   ---------------------------------------------------------
   ・モール側でテンプレート等に1回だけ読み込んでください
   ・店子はHTMLを1行貼るだけ（クラス名 jal-cr）
   ・幅768px超=横並び / 768px以下=縦並び（下部@mediaで調整可）
   ========================================================= */

.jal-cr{
  --jcr-border:#e3e3e0;
  --jcr-bg:#ffffff;
  --jcr-panel:#f7f7f5;
  --jcr-text:#1a1a18;
  --jcr-sub:#6b6b66;
  --jcr-link:#185fa5;
  --jcr-radius:12px;
  --jcr-ok:#0f6e56;
  --jcr-cond:#b06b00;
  --jcr-ng:#c0392b;
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  color:var(--jcr-text);
  box-sizing:border-box;
  margin:0 0 16px;
}
.jal-cr *{ box-sizing:border-box; }

.jal-cr-grid{ display:flex; gap:12px; align-items:flex-start; }
.jal-cr-item{
  flex:1; min-width:0; background:var(--jcr-bg);
  border:1px solid var(--jcr-border); border-radius:var(--jcr-radius); overflow:hidden;
}

.jal-cr-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 16px; }
.jal-cr-status{ display:flex; align-items:center; gap:10px; min-width:0; }
.jal-cr-label{ font-size:13px; color:var(--jcr-sub); width:72px; flex:none; white-space:nowrap; }
.jal-cr-judge{ font-size:14px; font-weight:600; }
.jal-cr-mark{ font-size:22px; line-height:1; font-weight:600; }

/* 状態ごとの記号色（キャンセル・返品それぞれ個別に色付け） */
.jal-cr-item--ok   .jal-cr-mark{ color:var(--jcr-ok); }
.jal-cr-item--cond .jal-cr-mark{ color:var(--jcr-cond); }
.jal-cr-item--ng   .jal-cr-mark{ color:var(--jcr-ng); }

.jal-cr-btn{
  flex:none; display:inline-flex; align-items:center; gap:4px; white-space:nowrap;
  font-size:12px; line-height:1; padding:8px 12px; cursor:pointer;
  background:#fff; color:var(--jcr-text); border:1px solid #cfcfca; border-radius:6px;
}
.jal-cr-btn:hover{ background:#f2f2ef; }
.jal-cr-caret{ display:inline-block; font-size:10px; transition:transform .2s; }
.jal-cr-btn[aria-expanded="true"] .jal-cr-caret{ transform:rotate(180deg); }

.jal-cr-panel{
  display:none; padding:14px 16px; border-top:1px solid var(--jcr-border);
  background:var(--jcr-panel); font-size:13px; line-height:1.9;
}
.jal-cr-panel.is-open{ display:block; }
.jal-cr-panel a{ color:var(--jcr-link); }
.jal-cr-note-ttl{ margin-top:12px; font-weight:600; }
.jal-cr-sub{ color:var(--jcr-sub); }
.jal-cr-ng-ttl{ margin-top:12px; font-weight:600; color:var(--jcr-ng); }

@media (max-width:768px){
  .jal-cr-grid{ flex-direction:column; align-items:stretch; }
}