/* static/css/order_selection_modal.css */

/* =========================
   操作方法モーダル内のスライダー幅調整
   （共通部品 step_demo_slider.css の既定34remだと
     フレーム4のボタン2つが折り返してしまうため拡張）
========================= */
#orderSelectHelpModal .step-demo-slider{
  max-width:44rem;
}

/* =========================
   2カラムレイアウト（PC：2列 / モバイル：1列）
========================= */
.order-select-columns{
  display:grid;
  grid-template-columns:6fr 4fr;
  gap:1.5rem;
  align-items:start;
  margin:1.2rem 0;
}

.order-select-column{
  min-width:0;
}

.order-select-column .order-select-table-wrap{
  margin:0;
}

.order-select-action-row{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:1rem;
  margin:1.5rem 0;
}

.order-select-action-row .order-select-btn{
  width:100%;
}

@media (max-width:900px){
  .order-select-columns{
    grid-template-columns:1fr;
    gap:1rem;
  }

  .order-select-action-row{
    grid-template-columns:1fr;
  }
}

/* =========================
   商品テーブル
========================= */
.order-select-table-wrap{
  width:100%;
  overflow-x:auto;
  margin:1.2rem 0;
  -webkit-overflow-scrolling:touch;
}

.order-select-table,
.order-select-shipping-table{
  width:100%;
  min-width:0;
  border-collapse:collapse;
  font-size:.9rem;
  background:#fff;
}

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

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

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

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

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

.order-select-price{
  white-space:nowrap;
  font-weight:700;
  color:#333;
}

.order-select-qty,
.order-select-dest{
  padding:.35rem .5rem;
  border:.0625rem solid #ccc;
  border-radius:.35rem;
  font-size:.92rem;
  background:#fff;
  color:#333;
  cursor:pointer;
}

.order-select-qty:focus,
.order-select-dest:focus{
  outline:none;
  border-color:#0175d8;
  box-shadow:0 0 0 .15rem rgba(1,117,216,.15);
}

.order-select-table-title{
  font-size:.98rem;
  font-weight:700;
  color:#0175d8;
  margin:0 0 .5rem;
}

.order-select-note{
  font-size:.85rem;
  color:#888;
  margin-top:1rem;
}

/* =========================
   アクションボタン
========================= */
.order-select-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  min-width:8rem;
  padding:.65rem 1.4rem;
  border:none;
  border-radius:.45rem;
  font-size:.98rem;
  font-weight:700;
  cursor:pointer;
  transition:background .15s, opacity .15s, border-color .15s, color .15s;
}

.order-select-btn--primary{
  background:#3e93dd;
  color:#fff;
}

.order-select-btn--primary:hover{
  background:#2f80c9;
}

.order-select-btn--secondary{
  background:#4caf7d;
  color:#fff;
}

.order-select-btn--secondary:hover{
  background:#3d9968;
}

.order-select-btn--tertiary{
  background:#e2985c;
  color:#fff;
}

.order-select-btn--tertiary:hover{
  background:#d0813f;
}

.order-select-btn--ghost{
  background:#fff;
  color:#444;
  border:.0625rem solid #ccc;
}

.order-select-btn--ghost:hover{
  background:#f5f5f5;
  border-color:#999;
}

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

.order-select-modal.is-open{
  display:flex;
}

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

.order-select-modal__dialog{
  position:relative;
  display:flex;
  flex-direction:column;
  width:min(54rem, 95vw);
  min-width:20rem;
  min-height:15rem;
  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;
}

.order-select-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;
}

.order-select-modal__header[data-order-select-drag]{
  cursor:move;
  user-select:none;
}

/* =========================
   モーダルのリサイズハンドル（四隅）
========================= */
.order-select-modal__resize-handle{
  position:absolute;
  width:1.75rem;
  height:1.75rem;
  z-index:10;
}

.order-select-modal__resize-handle--se{ right:0; bottom:0; cursor:nwse-resize; }
.order-select-modal__resize-handle--sw{ left:0;  bottom:0; cursor:nesw-resize; }
.order-select-modal__resize-handle--ne{ right:0; top:0;    cursor:nesw-resize; }
.order-select-modal__resize-handle--nw{ left:0;  top:0;    cursor:nwse-resize; }

.order-select-modal__resize-handle::before,
.order-select-modal__resize-handle::after{
  content:"";
  position:absolute;
}

.order-select-modal__resize-handle--se::before{
  right:.375rem; bottom:.375rem; width:1rem; height:1rem;
  border-right:.1875rem solid #999; border-bottom:.1875rem solid #999;
}
.order-select-modal__resize-handle--se::after{
  right:.75rem; bottom:.75rem; width:.5rem; height:.5rem;
  border-right:.125rem solid #bbb; border-bottom:.125rem solid #bbb;
}
.order-select-modal__resize-handle--sw::before{
  left:.375rem; bottom:.375rem; width:1rem; height:1rem;
  border-left:.1875rem solid #999; border-bottom:.1875rem solid #999;
}
.order-select-modal__resize-handle--sw::after{
  left:.75rem; bottom:.75rem; width:.5rem; height:.5rem;
  border-left:.125rem solid #bbb; border-bottom:.125rem solid #bbb;
}
.order-select-modal__resize-handle--ne::before{
  right:.375rem; top:.375rem; width:1rem; height:1rem;
  border-right:.1875rem solid #999; border-top:.1875rem solid #999;
}
.order-select-modal__resize-handle--ne::after{
  right:.75rem; top:.75rem; width:.5rem; height:.5rem;
  border-right:.125rem solid #bbb; border-top:.125rem solid #bbb;
}
.order-select-modal__resize-handle--nw::before{
  left:.375rem; top:.375rem; width:1rem; height:1rem;
  border-left:.1875rem solid #999; border-top:.1875rem solid #999;
}
.order-select-modal__resize-handle--nw::after{
  left:.75rem; top:.75rem; width:.5rem; height:.5rem;
  border-left:.125rem solid #bbb; border-top:.125rem solid #bbb;
}

@media (max-width:768px){
  .order-select-modal__resize-handle{
    display:none;
  }

  .order-select-modal__header[data-order-select-drag]{
    cursor:default;
  }
}

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

.order-select-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;
}

.order-select-modal__close:hover{
  background:#f0f4ff;
  color:#0175d8;
}

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

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

/* 選択内容サマリー */
.order-select-summary-empty{
  text-align:center;
  color:#999;
  padding:2.5rem 1rem;
  font-size:.95rem;
}

.order-select-summary-table{
  width:100%;
  border-collapse:collapse;
  font-size:.92rem;
  margin-bottom:1rem;
}

.order-select-summary-table th,
.order-select-summary-table td{
  border:.0625rem solid #e0e0e0;
  padding:.55rem .6rem;
  text-align:left;
}

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

.order-select-summary-shipping{
  margin:1rem 0;
  padding-top:.75rem;
  border-top:.0625rem dashed #ddd;
}

.order-select-summary-shipping h4{
  margin:0 0 .5rem;
  font-size:.95rem;
  color:#333;
}

.order-select-summary-shipping ul{
  list-style:none;
  margin:0;
  padding:0;
  font-size:.9rem;
}

.order-select-summary-shipping li{
  display:flex;
  justify-content:space-between;
  padding:.3rem 0;
  border-bottom:.0625rem solid #f0f0f0;
}

.order-select-summary-total{
  text-align:right;
  font-size:1.1rem;
  font-weight:700;
  color:#0175d8;
  margin-top:.75rem;
}

.order-select-summary-total span{
  font-size:1.35rem;
  margin-left:.35rem;
}

.order-select-success{
  display:flex;
  align-items:center;
  gap:.5rem;
  background:#f0fbf3;
  border:.0625rem solid #b7e4c0;
  color:#196c2e;
  font-weight:700;
  padding:.8rem 1rem;
  border-radius:.5rem;
  margin-bottom:1rem;
}

/* =========================
   送信確認ダイアログ
========================= */
.order-select-confirm{
  position:fixed;
  inset:0;
  z-index:10095;
  display:none;
  align-items:center;
  justify-content:center;
  padding:1rem;
  box-sizing:border-box;
}

.order-select-confirm.is-open{
  display:flex;
}

.order-select-confirm__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.5);
}

.order-select-confirm__box{
  position:relative;
  width:min(22rem, 100%);
  background:#fff;
  border-radius:.75rem;
  box-shadow:0 1rem 2.5rem rgba(0,0,0,.3);
  padding:1.75rem 1.5rem 1.5rem;
  text-align:center;
}

.order-select-confirm__message{
  margin:0 0 1.4rem;
  font-size:1.05rem;
  font-weight:700;
  color:#222;
}

.order-select-confirm__actions{
  display:flex;
  gap:.75rem;
  justify-content:center;
}

.order-select-confirm__actions .order-select-btn{
  min-width:6.5rem;
}

/* =========================
   レスポンシブ
========================= */
@media (max-width:600px){
  .order-select-table,
  .order-select-shipping-table{
    font-size:.84rem;
  }

  .order-select-table th,
  .order-select-table td,
  .order-select-shipping-table th,
  .order-select-shipping-table td{
    padding:.45rem .5rem;
  }

  .order-select-btn{
    width:100%;
  }

  .order-select-modal__dialog{
    max-height:92vh;
    border-radius:.6rem;
  }

  .order-select-modal__footer{
    flex-direction:column-reverse;
  }

  .order-select-confirm__actions{
    flex-direction:column;
  }
}