/* =========================================================================
   Product Request — modal + OTP + toast  (Figma 13335/13339)
   ========================================================================= */
.tk_pr_modal { position: fixed; inset: 0; z-index: 100000; font-family: 'Estedad-FD', 'Estedad', sans-serif; }
.tk_pr_overlay { position: absolute; inset: 0; background: #060707;
  opacity: 0.32; }
.tk_pr_dialog {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(416px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow-y: auto;
  background: #fff; border: 2px solid #E4E9E9; border-radius: 16px; box-sizing: border-box; direction: rtl;
  box-shadow: 0 12px 40px rgba(6, 7, 7, 0.2);
}

/* ---- head ---- */
.tk_pr_head { display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  padding: 16px; border-bottom: 1px solid #E4E9E9; }
.tk_pr_title { font-weight: 700; font-size: 18px; line-height: 1.4; color: #060707; }
.tk_pr_close {
  width: 40px; height: 40px; background: none; border: 0; border-radius: 999px; cursor: pointer;
  font-size: 24px; line-height: 1; color: #060707; display: flex; align-items: center; justify-content: center; padding: 0;
}
.tk_pr_close:hover { background: #F5F6F6; }

/* ---- form ---- */
.tk_pr_form { padding: 32px 24px 24px; display: flex; flex-direction: column; gap: 32px; }
.tk_pr_field { position: relative; }
.tk_pr_label {
  position: absolute; top: -12px; right: 8px; background: #fff; padding: 0 4px; z-index: 1;
  font-size: 14px; font-weight: 400; line-height: 1.4; color: #060707;
  pointer-events: none; transition: top .15s ease, font-size .15s ease, color .15s ease;
}
/* خالی و غیرفوکوس → لیبل داخل فیلد مثل placeholder (خاکستری، ۱۶px) */
.tk_pr_input:placeholder-shown:not(:focus) ~ .tk_pr_label {
  top: 19px; right: 12px; padding: 0; background: transparent;
  font-size: 16px; font-weight: 500; color: #7E928F;
}
.tk_pr_input {
  box-sizing: border-box !important;
  width: 100% !important;
  border: 2px solid #060707 !important;
  border-radius: 4px !important;
  padding: 20px 12px !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  color: #060707 !important;
  background: #fff !important;
  outline: none !important;
  text-align: right !important;
  margin: 0 !important;
}
.tk_pr_input:focus { border-color: #FF9900; }
.tk_pr_input::placeholder { color: #7E928F; font-weight: 500; }
.tk_pr_textarea { resize: vertical; min-height: 98px; border-color: #394040; }
.tk_pr_input.tk_pr_invalid { border-color: #ED1C24; }

.tk_pr_note {
  background: #F5F6F6; border-radius: 8px; padding: 12px 16px; text-align: right;
  font-size: 14px; line-height: 1.9; color: #060707;
}
.tk_pr_error { font-size: 13px; color: #ED1C24; text-align: right; }
.tk_pr_submit {
  width: 100%; height: 56px; border: 0; border-radius: 999px; cursor: pointer; box-sizing: border-box;
  background: #FF9900; color: #060707; font-family: 'Estedad-FD'; font-weight: 500; font-size: 16px;
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px;
}
.tk_pr_submit:hover { background: #F08C00; }
.tk_pr_submit:disabled { background: #CCD5D3; color: #7E928F; cursor: default; }
.tk_pr_submit:disabled:hover { background: #CCD5D3; }
/* موقع لودینگ دکمه نارنجی می‌ماند (مثل سایت) + لودر تیره روی آن */
.tk_pr_submit.is-loading:disabled { background: #FF9900; color: #060707; }
/* لودر دکمه — همان استایل .tk_loader سایت */
.tk_pr_submit .tk_loader {
  border: 2px solid transparent; border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  border-left: 2px solid currentColor; border-radius: 50%; width: 16px; height: 16px;
  box-sizing: border-box; animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- OTP step ---- */
.tk_pr_step_otp { padding: 16px 16px 20px; display: flex; flex-direction: column; }
.tk_pr_head_otp { border: 0; padding: 0 0 8px; justify-content: space-between; }
.tk_pr_back { background: none; border: 0; font-size: 22px; color: #394040; cursor: pointer; }
.tk_pr_logo { height: 40px; }
.tk_pr_otp_title { display: block; font-weight: 700; font-size: 18px; color: #060707; margin-top: 8px; text-align: right; }
.tk_pr_otp_sub { display: block; font-size: 13px; color: #394040; margin-top: 6px; text-align: right; }
.tk_pr_otp_boxes { display: flex; flex-direction: row; gap: 12px; margin: 20px 0 12px; justify-content: center; }
.tk_pr_otp_digit {
  width: 56px; height: 56px; text-align: center; font-size: 22px; font-weight: 700; color: #060707;
  border: 1.5px solid #CCD5D3; border-radius: 12px; outline: none; background: #fff;
}
.tk_pr_otp_digit:focus, .tk_pr_otp_digit.filled { border-color: #060707; }
.tk_pr_otp_timer { font-size: 13px; color: #7E928F; text-align: center; margin-bottom: 16px; }
.tk_pr_otp_timer a { color: #FF9900; font-weight: 500; cursor: pointer; }

/* ---- toast ---- */
.tk_pr_toast {
  position: fixed; left: 50%; top: 40px; transform: translateX(-50%); z-index: 100001;
  width: min(560px, calc(100% - 32px)); box-sizing: border-box; direction: rtl;
  background: #060707; border-radius: 12px; padding: 16px; color: #fff;
  display: flex; flex-direction: row; align-items: center; gap: 12px;
  box-shadow: 0 12px 40px rgba(6, 7, 7, 0.35); font-family: 'Estedad-FD', sans-serif;
  opacity: 0; transition: opacity .25s ease, transform .25s ease;
}
.tk_pr_toast.show { opacity: 1; }
.tk_pr_toast_icon { flex: 0 0 auto; width: 32px; height: 32px; display: block; }
.tk_pr_toast_text { display: flex; flex-direction: column; gap: 4px; text-align: right; }
.tk_pr_toast_title { font-weight: 700; font-size: 15px; color: #fff; }
.tk_pr_toast_sub { font-size: 12px; color: #B9C2C0; line-height: 1.6; }

/* ---- mobile: bottom sheet ---- */
@media (max-width: 1024px) {
  .tk_pr_dialog {
    left: 0; right: 0; bottom: 0; top: auto; transform: none;
    width: 100%; max-width: 100%; max-height: 90vh;
    border-radius: 16px 16px 0 0;
  }
  .tk_pr_toast { top: 12px; }
}