/* =============================================================
   外構の見積もりフォーム ／ 電話番号のSMS認証（見た目）
   2026-09-18

   ⛔ このファイルは「SMS認証がオンのときだけ」読み込まれる。
   ⛔ 左線（border-left）は使わない。状態は背景色で表す（gm-simulator.css と同じ）。
   ============================================================= */

.gm-smsm[hidden] { display: none !important; }

.gm-smsm {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(24, 38, 30, .55);
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}

body.gm-smsm-open { overflow: hidden; }

.gm-smsm-panel {
  width: 100%;
  max-width: 460px;
  background: #fff;
  border-radius: 16px;
  padding: 26px 24px 22px;
  box-shadow: 0 18px 50px rgba(20, 40, 30, .28);
  text-align: left;
}

.gm-smsm-title {
  font-size: 20px;
  font-weight: 800;
  line-height: 1.5;
  margin: 0 0 10px;
  color: var(--accent, #2f7d4f);
}

.gm-smsm-lead {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text, #333);
  margin: 0 0 14px;
}

.gm-smsm-phone {
  background: #f4faf5;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 800;
  color: var(--text, #333);
  margin: 0 0 14px;
  text-align: center;
}

/* 状態は背景色で出す（緑＝うまくいった／赤＝直してほしい） */
.gm-smsm-ok {
  background: #eaf7ee;
  color: #1c6b39;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 12px;
}
.gm-smsm-ng {
  background: #fdecea;
  color: #a1261a;
  border-radius: 12px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 12px;
}
.gm-smsm-ok[hidden], .gm-smsm-ng[hidden] { display: none !important; }

.gm-smsm-coderow { margin: 0 0 6px; }
.gm-smsm-coderow[hidden] { display: none !important; }
.gm-smsm-label {
  display: block;
  font-weight: 800;
  font-size: 15px;
  margin: 0 0 7px;
}
.gm-smsm-code {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #e6ece7;
  border-radius: 12px;
  background: #fbfdfb;
  font-family: inherit;
  font-size: 22px;   /* 16px 未満だと iPhone で勝手に拡大するので下げない */
  font-weight: 800;
  letter-spacing: .32em;
  text-align: center;
  line-height: 1.5;
  color: var(--text, #333);
}
.gm-smsm-code:focus {
  outline: none;
  border-color: var(--accent-light, #7bc687);
  background: #fff;
}

.gm-smsm-send,
.gm-smsm-verify {
  display: block;
  width: 100%;
  margin: 14px 0 0;
  padding: 16px 20px;
  border: 0;
  border-radius: 999px;
  background: #e8590c;
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.5;
  cursor: pointer;
  box-shadow: 0 5px 14px rgba(232, 89, 12, .3);
  transition: background .15s ease, transform .1s ease;
}
.gm-smsm-send:hover, .gm-smsm-verify:hover { background: #d24f06; }
.gm-smsm-send:active, .gm-smsm-verify:active { transform: translateY(1px); }
.gm-smsm-send:disabled, .gm-smsm-verify:disabled {
  background: #b9bfc7;
  box-shadow: none;
  cursor: default;
}
.gm-smsm-send[hidden], .gm-smsm-verify[hidden] { display: none !important; }

.gm-smsm-close {
  display: block;
  width: 100%;
  margin: 10px 0 0;
  padding: 12px 20px;
  border: 0;
  border-radius: 999px;
  background: #eef2f7;
  color: var(--muted, #777);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.gm-smsm-close:hover { background: #e3e9f0; }

.gm-smsm-note {
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted, #777);
  margin: 14px 0 0;
}

@media (max-width: 600px) {
  .gm-smsm { padding: 14px; align-items: flex-start; }
  .gm-smsm-panel { margin-top: 24px; padding: 22px 18px 18px; }
  .gm-smsm-title { font-size: 18px; }
}