/* ==========================================
   共通 注文モーダル
   menu / calendar / card / album
========================================== */

/* ===============================
   注文画面 全体
=============================== */
#orderModal {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  overflow: hidden;
  z-index: 9999;
  background: rgba(0,0,0,0.55);
}

/* ===============================
   注文ウィンドウ本体
   上下を画面いっぱい近くまで使う
=============================== */
#orderArea {
  position: relative;
  width: 420px;
  max-width: 90vw;
  max-height: 90vh;

  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

/* ===============================
   フォーム本体
=============================== */
#orderForm {
  margin: 0 !important;
  padding: 18px !important;
  box-sizing: border-box;
  max-height: 90vh;
  overflow-y: auto;
}

/* ===============================
   見出し・説明
=============================== */
#orderForm h2 {
  margin: 0 0 8px 0 !important;
  padding: 0;
  font-size: 18px;
  line-height: 1.2;
}

#orderForm .note {
  margin: 0 0 10px 0 !important;
  font-size: 13px;
  line-height: 1.4;
}

/* ===============================
   ラベル
=============================== */
#orderForm label {
  display: block;
  margin: 8px 0 4px 0 !important;
  font-size: 13px;
  line-height: 1.2;
  font-weight: bold;
}

/* ===============================
   入力欄
=============================== */
#orderForm input,
#orderForm select {
  display: block;
  width: 100%;
  height: 36px;
  margin: 0 0 8px 0 !important;
  padding: 4px 10px;
  font-size: 14px;
  box-sizing: border-box;
}

/* ===============================
   要望欄
   ← ここを明示的に大きくする
=============================== */
#comment {
  display: block;
  width: 100%;
  min-height: 84px !important;
  height: 70px !important;
  margin: 0 0 10px 0 !important;
  padding: 8px 10px;
  font-size: 14px;
  line-height: 1.4;
  resize: none;
  box-sizing: border-box;
}

#submitBtn{
  display:block;
  width:100%;
  margin-top:16px;
  padding:10px;
  background:#ff6600;
  color:#fff;
  border:none;
  border-radius:5px;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
}

#submitBtn:hover{
  background:#e65c00;
}

.closeOrderBtn{
  display:block;
  width:100%;
  margin-top:12px;
  padding:10px;
  background:#888;
  color:#fff;
  border:none;
  border-radius:5px;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
}

.closeOrderBtn:hover{
  background:#666;
}

/* ===============================
   ボタン
=============================== */
#submitBtn {
  display: block;
  width: 100%;
  height: 52px;
  margin: 0 0 8px 0 !important;
  font-size: 18px;
  box-sizing: border-box;
}

#closeOrderBtn {
  display: block;
  width: 100%;
  height: 44px;
  margin: 0 !important;
  font-size: 16px;
  box-sizing: border-box;
}

#autozip {
  display: none !important;
}

#editorLoading {
  position: fixed;        /* ← これが最重要 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  z-index: 9999;
}

#bgModal {
  overflow-y: auto;
}

#bgModal > div {
  max-height: 80vh;
  overflow-y: auto;
}
#bgModalClose:hover {
  background:#555;
  transform:scale(1.1);
}
.bgItem.selected {
  outline: 3px solid #2b8cff;
  outline-offset: 2px;
}
/* ===== モーダル全体 ===== */
#orderArea {
  overflow: hidden;
}

/* ===== フォーム全体 ===== */
#orderArea form {
  font-size: 13px;
  line-height: 1.2;
}

/* ===== ラベル ===== */
#orderArea label {
  font-size: 12px;
  margin-bottom: 2px;
  display: block;
}

/* ===== 入力欄 ===== */
#orderArea input,
#orderArea select {
  font-size: 13px;
  padding: 4px 6px;
  height: 30px;
  margin-bottom: 6px;
  box-sizing: border-box;
}

/* ===== テキストエリア ===== */
#orderArea textarea {
  font-size: 13px;
  padding: 4px 6px;
  height: 48px;
  margin-bottom: 6px;
  resize: none;
  box-sizing: border-box;
}

/* ===== セクション間の余白 ===== */
#orderArea div {
  margin-bottom: 4px;
}

/* ===== 見出し ===== */
#orderArea h2 {
  font-size: 16px;
  margin-bottom: 6px;
}

/* ===== 注意文 ===== */
#orderArea p {
  font-size: 12px;
  margin-bottom: 6px;
}

/* ===== ボタン ===== */
#orderArea button,
#orderArea .orderBtn {
  font-size: 16px;
  font-weight: 700;
  padding: 8px;
  height: 40px;
  margin-top: 6px;
}

#orderLoading{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.45);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.orderLoadingBox{
  background:#fff;
  padding:40px;
  border-radius:10px;
  text-align:center;
  width:320px;
}

.orderLoadingText{
  font-size:16px;
  margin-top:15px;
}

.orderSpinner{
  width:40px;
  height:40px;
  border:4px solid #ddd;
  border-top:4px solid #ff6b00;
  border-radius:50%;
  animation:spin 1s linear infinite;
  margin:auto;
}

@keyframes spin{
  0%{transform:rotate(0deg);}
  100%{transform:rotate(360deg);}
}

/* ===============================
   PDFボタン
=============================== */
#pdfBtn,
#printBtn{

    padding:8px 16px;

    background:#ff6600;

    color:#fff;

    border:none;

    border-radius:5px;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

}

#pdfBtn:hover,
#printBtn:hover{

    background:#e65c00;

}

#priceText{
    font-size:inherit;
    font-weight:inherit;
    color:#d00000;
}

/* ===== お支払金額 ===== */

#priceArea{

    display:none;

    margin-top:15px;

    padding:15px;

    background:#fff8e1;

    border:1px solid #ffcc33;

    border-radius:8px;

    font-size:22px;

    font-weight:bold;

}

#priceText{

    font-size:inherit;

    font-weight:inherit;

    color:#d00000;

}

#priceDetail{

    margin-top:12px;

    padding-top:10px;

    border-top:1px solid #999;

    font-size:16px;

    font-weight:normal;

    line-height:1.8;

    text-align:left;

}