/* static/css/share_experience_modal.css */

/* =========================
   1セット（解説→フロー→フォーム）
========================= */
.share-demo-set{
  margin:1.4rem 0;
  padding:1.1rem 1.2rem 1.3rem;
  background:#f7faff;
  border:.0625rem solid #dbe7f7;
  border-radius:.85rem;
}

.share-demo-set__title{
  margin:0 0 .4rem;
  font-size:1rem;
  color:#0175d8;
}

.share-demo-set__desc{
  margin:0 0 .9rem;
  font-size:.88rem;
  line-height:1.7;
  color:#444;
}

.share-demo-set__flow{
  margin:0 0 1.1rem;
}

/* =========================
   フロー図（このページの操作 → 後工程、すべて矢印で連結）
========================= */
.share-demo-flow{
  display:flex;
  flex-direction:column;
  gap:.5rem;
}

.share-demo-flow__row{
  display:flex;
  align-items:stretch;
  flex-wrap:wrap;
  gap:.35rem;
}

.share-demo-flow__step{
  flex:1 1 8rem;
  min-width:7rem;
  display:flex;
  align-items:center;
  gap:.4rem;
  border-radius:.6rem;
  padding:.5rem .6rem;
  background:#dff5e5;
  border:.0625rem solid #b9e6c6;
}

.share-demo-flow__step p{
  margin:0;
  font-size:.78rem;
  font-weight:700;
  line-height:1.35;
  color:#1a1a1a;
}

.share-demo-flow__step--2{
  background:#fff6b0;
  border-color:#ecdd6e;
}

.share-demo-flow__step--3{
  background:#d7f1fa;
  border-color:#a6dcee;
}

.share-demo-flow__step--after{
  background:#eef2f7;
  border-color:#cfd8e3;
}

.share-demo-flow__step--after p{
  color:#555;
  font-weight:600;
}

.share-demo-flow__arrow{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  font-weight:700;
  color:#9aa3ad;
  flex:0 0 auto;
}

.share-demo-flow__legend{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.3rem 1rem;
  margin:0;
  font-size:.74rem;
  color:#666;
}

.share-demo-flow__legend-item{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
}

.share-demo-flow__legend-dot{
  display:inline-block;
  width:.6rem;
  height:.6rem;
  border-radius:50%;
  flex:0 0 auto;
}

.share-demo-flow__legend-dot--page{
  background:#b9e6c6;
}

.share-demo-flow__legend-dot--page2{
  background:#ecdd6e;
}

.share-demo-flow__legend-dot--page3{
  background:#a6dcee;
}

.share-demo-flow__legend-dot--after{
  background:#cfd8e3;
}

@media (max-width:480px){
  .share-demo-flow__step{
    flex:1 1 100%;
  }

  .share-demo-flow__arrow{
    transform:rotate(90deg);
  }
}

.share-demo-set__form{
  display:flex;
  flex-direction:column;
  gap:.8rem;
  max-width:26rem;
}

/* =========================
   実行領域（フローの色と対応する背景色分け）
========================= */
.share-demo-step-area{
  display:flex;
  flex-direction:column;
  gap:.5rem;
  border-radius:.7rem;
  border:.0625rem solid #d9d9d9;
  padding:.85rem .9rem;
}

.share-demo-step-area--1{
  background:#e9f8ee;
}

.share-demo-step-area--2{
  background:#fffce0;
}

.share-demo-step-area--3{
  background:#e7f7fc;
}

.share-demo-group__field{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  min-width:0;
}

.share-demo-group__field label{
  font-size:.83rem;
  font-weight:700;
  color:#333;
}

.share-demo-step-chip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:1.25rem;
  height:1.25rem;
  border-radius:50%;
  font-size:.72rem;
  font-weight:700;
  margin-right:.35rem;
  flex:0 0 auto;
  vertical-align:middle;
  transition:background .15s ease, color .15s ease, transform .15s ease;
}

.share-demo-step-chip--1{
  background:#dff5e5;
  color:#0d7a33;
}

.share-demo-step-chip--2{
  background:#fff6b0;
  color:#8a7000;
}

.share-demo-step-chip--3{
  background:#d7f1fa;
  color:#0b6e8c;
}

.share-demo-step-chip--after{
  background:#e6e8eb;
  color:#666;
}

.share-demo-step-chip.is-done{
  background:#0175d8;
  color:#fff;
  transform:scale(1.08);
}

.share-demo-step-heading{
  display:flex;
  align-items:center;
  margin:0;
  font-size:.83rem;
  font-weight:700;
  color:#333;
}

.share-demo-group__field .share-demo-hint{
  font-size:.76rem;
  font-weight:400;
  color:#888;
  margin-left:.3rem;
}

.share-demo-group__field input,
.share-demo-group__field textarea{
  width:100%;
  box-sizing:border-box;
  padding:.55rem .7rem;
  border:.0625rem solid #ccc;
  border-radius:.45rem;
  font-size:.9rem;
  font-family:inherit;
  color:#333;
  background:#fff;
}

.share-demo-group__field textarea{
  resize:vertical;
  min-height:15rem;
  line-height:1.6;
}

.share-demo-group__field input:focus,
.share-demo-group__field textarea:focus{
  outline:none;
  border-color:#0175d8;
  box-shadow:0 0 0 .15rem rgba(1,117,216,.15);
}

.share-demo-field-row{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  align-items:stretch;
}

.share-demo-field-row input{
  flex:1 1 auto;
  min-width:0;
}

.share-demo-btn--pick{
  flex:0 0 auto;
  min-width:0;
  padding:.55rem .9rem;
  font-size:.82rem;
  white-space:nowrap;
}

@media (max-width:480px){
  .share-demo-field-row{
    flex-direction:column;
  }

  .share-demo-btn--pick{
    width:100%;
  }
}

.share-demo-group__actions{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  gap:.6rem;
  padding-top:.2rem;
}

.share-demo-group__actions .share-demo-btn{
  flex:1 1 auto;
  min-width:8rem;
}

@media (max-width:480px){
  .share-demo-set__form{
    max-width:none;
  }

  .share-demo-group__actions .share-demo-btn{
    width:100%;
  }
}

/* =========================
   アクション行
========================= */
.share-demo-action-row{
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  margin:1.2rem 0 .5rem;
}

.share-demo-action-row--flat{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:.9rem;
}

.share-demo-action-row--flat .share-demo-btn{
  width:100%;
}

@media (max-width:700px){
  .share-demo-action-row--flat{
    grid-template-columns:1fr 1fr;
  }
}

@media (max-width:420px){
  .share-demo-action-row--flat{
    grid-template-columns:1fr;
  }
}

.share-demo-note{
  font-size:.85rem;
  color:#888;
  margin-top:.5rem;
}

.share-demo-note--storage{
  display:flex;
  align-items:flex-start;
  gap:.5rem;
  background:#fff8ec;
  border:.0625rem solid #f0dfb8;
  color:#8a6a1f;
  padding:.7rem .9rem;
  border-radius:.5rem;
  font-size:.85rem;
  margin-top:1rem;
}

/* =========================
   ボタン（order_selection_modal.cssと共通の見た目）
========================= */
.share-demo-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  min-width:8rem;
  padding:.65rem 1.3rem;
  border:none;
  border-radius:.45rem;
  font-size:.95rem;
  font-weight:700;
  cursor:pointer;
  transition:background .15s, opacity .15s, border-color .15s, color .15s;
}

.share-demo-btn--primary{ background:#3e93dd; color:#fff; }
.share-demo-btn--primary:hover{ background:#2f80c9; }

.share-demo-btn--mail,
.share-demo-btn--gmail,
.share-demo-btn--sms{ background:#e5e8ec; color:#444; }

.share-demo-btn--mail:hover,
.share-demo-btn--gmail:hover,
.share-demo-btn--sms:hover{ background:#d5d9de; }

.share-demo-btn--webshare{ background:#7a5fd3; color:#fff; }
.share-demo-btn--webshare:hover{ background:#6a4fbf; }

.share-demo-btn--qr{ background:#e5e8ec; color:#444; width:100%; }
.share-demo-btn--qr:hover{ background:#d5d9de; }

.share-demo-btn--ghost{ background:#fff; color:#444; border:.0625rem solid #ccc; }
.share-demo-btn--ghost:hover{ background:#f5f5f5; border-color:#999; }

.share-demo-btn:disabled{
  opacity:.5;
  cursor:not-allowed;
}

/* =========================
   モーダル
========================= */
.share-demo-modal{
  position:fixed;
  inset:0;
  z-index:10090;
  display:none;
  align-items:center;
  justify-content:center;
  padding:1rem;
  box-sizing:border-box;
}

.share-demo-modal.is-open{
  display:flex;
}

.share-demo-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.45);
}

.share-demo-modal__dialog{
  position:relative;
  display:flex;
  flex-direction:column;
  width:min(38rem, 95vw);
  max-height:88vh;
  background:#fff;
  border-radius:.75rem;
  box-shadow:0 1rem 2.5rem rgba(0,0,0,.25);
  overflow:hidden;
  box-sizing:border-box;
}

.share-demo-modal__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1rem 1.25rem;
  border-bottom:.0625rem solid #eee;
  flex:0 0 auto;
}

.share-demo-modal__title{
  margin:0;
  font-size:1.1rem;
  font-weight:700;
  color:#0175d8;
}

.share-demo-modal__close{
  background:none;
  border:none;
  font-size:1.5rem;
  line-height:1;
  color:#888;
  cursor:pointer;
  padding:.2rem .5rem;
  border-radius:.35rem;
  transition:background .15s, color .15s;
}

.share-demo-modal__close:hover{
  background:#f0f4ff;
  color:#0175d8;
}

.share-demo-modal__body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  padding:1.25rem;
}

.share-demo-modal__footer{
  display:flex;
  justify-content:flex-end;
  gap:.6rem;
  padding:1rem 1.25rem;
  border-top:.0625rem solid #eee;
  flex:0 0 auto;
}

.share-demo-preview{
  white-space:pre-wrap;
  word-break:break-word;
  background:#f7f7f7;
  border:.0625rem solid #e3e3e3;
  border-radius:.5rem;
  padding:.9rem 1rem;
  font-size:.9rem;
  color:#333;
  line-height:1.7;
  margin:0 0 1.2rem;
}

.share-demo-modal__label{
  font-size:.8rem;
  font-weight:700;
  color:#666;
  margin:0 0 .4rem;
}

.share-demo-modal__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.75rem;
}

.share-demo-modal__grid .share-demo-btn{
  width:100%;
}

.share-demo-webshare-status{
  margin-top:.9rem;
  padding:.65rem .8rem;
  border-radius:.5rem;
  font-size:.85rem;
  display:none;
}

.share-demo-webshare-status.is-visible{
  display:block;
}

.share-demo-webshare-status--info{
  background:#eef4ff;
  border:.0625rem solid #cfe0fb;
  color:#1c4f9c;
}

.share-demo-webshare-status--success{
  background:#f0fbf3;
  border:.0625rem solid #b7e4c0;
  color:#196c2e;
}

/* =========================
   トークンURL発行（QR）
========================= */
.share-demo-qr-label{
  margin-top:1.4rem;
  padding-top:1rem;
  border-top:.0625rem dashed #e3e3e3;
}

.share-demo-qr-row{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.9rem;
}

.share-demo-qr-result{
  width:100%;
  text-align:center;
}

.share-demo-qr-result:empty{
  display:none;
}

.share-demo-qr-result img{
  width:100%;
  max-width:16rem;
  height:auto;
  aspect-ratio:1 / 1;
  image-rendering:pixelated;
  border:.0625rem solid #e3e3e3;
  border-radius:.5rem;
  padding:.4rem;
  background:#fff;
}

.share-demo-qr-result a{
  display:block;
  margin-top:.6rem;
  font-size:.82rem;
  color:#0175d8;
  word-break:break-all;
}

/* =========================
   定型文選択リスト
========================= */
.share-demo-template-list{
  display:flex;
  flex-direction:column;
  gap:.75rem;
  margin-top:.9rem;
}

.share-demo-template-card{
  display:flex;
  align-items:flex-start;
  gap:.7rem;
  border:.0625rem solid #dbe4ee;
  border-radius:.5rem;
  padding:.75rem .9rem;
  background:#fafcff;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease;
}

.share-demo-template-card:hover{
  border-color:#8fb8e6;
}

.share-demo-template-card:has(.share-demo-template-card__radio:checked){
  border-color:#0175d8;
  background:#eef6ff;
  box-shadow:0 0 0 .0625rem #0175d8 inset;
}

.share-demo-template-card__radio{
  flex:0 0 auto;
  width:1.1rem;
  height:1.1rem;
  margin-top:.15rem;
  accent-color:#0175d8;
  cursor:pointer;
}

.share-demo-template-card__body{
  flex:1 1 auto;
  min-width:0;
  display:block;
}

.share-demo-template-card__title{
  display:block;
  margin:0 0 .3rem;
  font-size:.92rem;
  font-weight:700;
  color:#0175d8;
}

.share-demo-template-card__preview{
  display:block;
  margin:0;
  font-size:.82rem;
  color:#555;
  line-height:1.6;
  white-space:pre-wrap;
}

/* =========================
   宛先リスト選択テーブル
========================= */
.recipient-select-table-wrap{
  width:100%;
  overflow-x:auto;
  margin:.9rem 0 0;
  -webkit-overflow-scrolling:touch;
}

.recipient-select-table{
  width:100%;
  min-width:0;
  border-collapse:collapse;
  font-size:.88rem;
  background:#fff;
}

.recipient-select-table th,
.recipient-select-table td{
  border:.0625rem solid #cfcfcf;
  padding:.5rem .6rem;
  text-align:left;
  vertical-align:middle;
  line-height:1.5;
}

.recipient-select-table thead th{
  background:#f2f7ff;
  color:#0175d8;
  font-weight:700;
  white-space:nowrap;
}

.recipient-select-table tbody tr:nth-child(even) td{
  background:#fcfcfc;
}

.recipient-select-table__check{
  width:2.5rem;
}

.recipient-select-checkbox{
  width:1.2rem;
  height:1.2rem;
  accent-color:#0175d8;
  cursor:pointer;
}

@media (max-width:600px){
  .share-demo-modal__grid{
    grid-template-columns:1fr;
  }

  .share-demo-btn{
    width:100%;
  }

  .share-demo-modal__dialog{
    max-height:92vh;
    border-radius:.6rem;
  }
}