/* 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-set__form{
  display:flex;
  flex-direction:column;
  gap:.8rem;
  max-width:26rem;
}

.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-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:5rem;
  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-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{ background:#3e93dd; color:#fff; }
.share-demo-btn--mail:hover{ background:#2f80c9; }

.share-demo-btn--gmail{ background:#d64b3f; color:#fff; }
.share-demo-btn--gmail:hover{ background:#bf3c31; }

.share-demo-btn--sms{ background:#4caf7d; color:#fff; }
.share-demo-btn--sms:hover{ background:#3d9968; }

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

.share-demo-btn--qr{ background:#0175d8; color:#fff; width:100%; }
.share-demo-btn--qr:hover{ background:#0161b3; }

.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:9rem;
  height:9rem;
  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;
}

@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;
  }
}