.hmjot { max-width: 620px; margin: 40px auto 56px; font-family: inherit; text-align: right; color: #10263d; }
.hmjot * { box-sizing: border-box; }
.hmjot-panel { padding: clamp(22px, 5vw, 38px); border: 1px solid #e4ecf3; border-radius: 24px; background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%); box-shadow: 0 18px 50px rgba(16,38,61,.06); }
.hmjot-icon { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 16px; border-radius: 18px; background: #ddf3fb; color: #1e9bd7; font-size: 34px; line-height: 1; }
.hmjot h2 { color: #10263d; margin: 0 0 10px; font-weight: 900; font-size: clamp(23px, 3vw, 30px); text-align: center; }
.hmjot-subtitle { color: #6f8190; font-size: 13px; text-align: center; line-height: 2; margin: 0 0 24px; }
.hmjot-field { margin-bottom: 16px; }
.hmjot label { display: block; margin-bottom: 8px; font-size: 13px; font-weight: 800; color: #10263d; }
.hmjot input[type=text], .hmjot input[type=tel] { width: 100%; background: #f9fbfd; color: #10263d; border: 1px solid #dce6ee; border-radius: 14px; height: 50px; padding: 10px 16px; font-size: 15px; direction: ltr; text-align: right; box-shadow: none; outline: none; }
.hmjot input[type=text]:focus, .hmjot input[type=tel]:focus { border-color: #1e9bd7; box-shadow: 0 0 0 4px rgba(30,155,215,.12); }
.hmjot-submit { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; background: linear-gradient(135deg, #10263d 0%, #16395a 100%); border: 0; color: #fff; border-radius: 14px; padding: 15px 20px; font-size: 14px; font-weight: 800; cursor: pointer; transition: all .2s ease; }
.hmjot-submit:hover { background: linear-gradient(135deg, #1e9bd7 0%, #1687bd 100%); color: #fff; transform: translateY(-1px); }
.hmjot-submit:disabled { opacity: .65; cursor: wait; transform: none; }
.hmjot-message { margin: 18px 0 0; padding: 13px 14px; border-radius: 12px; background: #ebf8ff; color: #10263d; font-size: 13px; border: 1px solid #d2edf9; }
.hmjot-error { background: #fff3f1; color: #9c3326; border-color: #ffd8d0; }
.hmjot-result { border: 1px solid #dbe6ed; background: #f9fcff; border-radius: 16px; padding: 20px; margin-top: 22px; }
.hmjot-result-header { display: flex; justify-content: space-between; gap: 8px; color: #8192a1; font-size: 12px; }
.hmjot-number { color: #10263d; font-weight: 800; }
.hmjot-state { font-size: 28px; color: #10263d; font-weight: 900; margin-top: 10px; }
.hmjot-description { font-size: 14px; line-height: 2; color: #637585; margin: 8px 0 18px; }
.hmjot-steps { display: flex; padding: 0; list-style: none; margin: 20px 0 0; gap: 5px; border-top: 1px solid #e3ebf2; padding-top: 18px; }
.hmjot-steps li { flex: 1; font-size: 11px; text-align: center; line-height: 1.9; color: #8a9aab; }
.hmjot-dot { display: block; margin: 0 auto 8px; width: 13px; height: 13px; background: #d4dee7; border-radius: 50%; box-shadow: 0 0 0 6px rgba(30,155,215,.06); }
.hmjot-steps li.is-done { color: #10263d; font-weight: 800; }
.hmjot-steps li.is-done .hmjot-dot { background: #1e9bd7; }
.hmjot-privacy { font-size: 11px; color: #8795a2; line-height: 2; margin: 18px 0 0; text-align: center; }
.hmjot [hidden] { display: none !important; }
@media(max-width: 480px) {
  .hmjot { margin: 22px auto 34px; }
  .hmjot-panel { border-radius: 18px; padding: 20px; }
  .hmjot-state { font-size: 24px; }
  .hmjot-steps li { font-size: 9px; }
}

/* Helpful SMS order number hint, shown under order number input */
.hmjot .hmjot-order-tip { display:flex; align-items:flex-start; gap:10px; margin:11px 0 3px; padding:12px 14px; background:#f0faff; border:1px solid #d8effa; border-radius:12px; color:#536f84; font-size:12px; line-height:2; }
.hmjot .hmjot-order-tip strong { color:#10263d; font-size:12px; font-weight:800; }
.hmjot .hmjot-tip-icon { flex:0 0 25px; width:25px; height:25px; display:grid; place-items:center; background:#ddf3fb; border-radius:8px; color:#1e9bd7; font-size:15px; line-height:1; margin-top:2px; }