/* ــــــــ کارت سفید ــــــــ */
.tgju-card{
  background:#fff;
  color:#000;
  border-radius:15px;
  padding:16px;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
  direction: rtl;
  max-width:100%;
}

/* ردیف اصلی: همه چیز در یک خط (روی اسکرین کوچک اسکرول افقی نرم) */
.tgju-row{
  display:flex;
  align-items:stretch;
  gap:12px;
  flex-wrap:nowrap;
  overflow-x:auto;
  scrollbar-width: thin;
}

/* فیلدها: لیبل بالا، ورودی پایین */
.tgju-field{
  display:flex;
  flex-direction:column;
  min-width:170px; /* برای جلوگیری از شکستن دوخطی */
}
.tgju-field--sm{ min-width:120px; }
.tgju-field--result{ min-width:200px; }
.tgju-field--btn{ min-width:160px; display:flex; justify-content:flex-end; }

/* لیبل‌ها */
.tgju-label{
  font-size:12px;
  font-weight:700;
  color:#222;
  margin:0 4px 6px;
  white-space:nowrap;      /* جلوگیری از دو‌خطی شدن متن‌ها */
}
.tgju-label--hidden{ visibility:hidden; height:0; margin:0; }

/* ورودی‌ها و سلکت‌ها */
.tgju-input{
  background:#fff;
  color:#111;
  border:1px solid #e5e7eb;
  padding:10px 12px;
  border-radius:12px;
  font-size:14px;
  line-height:1.4;
  height:42px;
  outline:none;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.tgju-input:focus{
  border-color:#f39327;
  box-shadow:0 0 0 4px rgba(243,147,39,.18);
}

/* خروجی تبدیل (استایل قرص‌مانند) */
.tgju-output{
  display:flex;
  align-items:center;
  justify-content:center;
  height:42px;
  padding:0 14px;
  border-radius:12px;
  background:#f8fafc;
  border:1px dashed #e5e7eb;
  font-weight:800;
  font-size:15px;
  white-space:nowrap;   /* یک خطی */
}

/* دکمه ثبت */
.tgju-button{
  height:42px;
  padding:0 22px;
  border:none;
  border-radius:12px;
  background:#f39327;
  color:#fff;
  font-weight:800;
  font-size:14px;
  cursor:pointer;
  transition: transform .08s ease, box-shadow .2s ease, background-color .2s ease;
  box-shadow:0 8px 20px rgba(243,147,39,.25);
}
.tgju-button:hover{ background:#d67e1e; }
.tgju-button:active{ transform:translateY(1px); }

/* حذف استایل قدیمی فرم */
.tgju-currency-request-form{ margin:0; }
.tgju-currency-request-label,
.tgju-currency-request-input,
.tgju-currency-request-output,
.tgju-currency-request-button{ all:unset; }

/* ــــــــ مودال‌ها: مرکز صفحه بدون تغییر JS ــــــــ */
.tgju-modal{
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.55);
  z-index:9999;
  padding:16px;
}

/* وقتی jQuery با fadeIn → display:block می‌گذارد، با این هک تبدیل به flex و مرکز می‌کنیم */
.tgju-modal[style*="display: block"]{
  display:flex !important;
  justify-content:center;
  align-items:center;
}

.tgju-modal .tgju-modal-content{
  background:#fff;
  color:#000;
  border-radius:14px;
  padding:22px 18px;
  width:min(92vw,420px);
  box-shadow:0 18px 40px rgba(0,0,0,.2);
  text-align:center;
}
.tgju-modal .tgju-modal-content h3{
  margin:0 0 8px;
  font-size:18px;
  font-weight:800;
}
.tgju-modal .tgju-modal-content p{
  margin:0;
  font-size:14px;
  line-height:1.7;
}

.tgju-modal-field{
  margin-top:12px;
  text-align:right;
}
.tgju-modal-field label{
  display:block;
  font-size:13px;
  font-weight:700;
  margin-bottom:6px;
}
.tgju-modal-input{
  width:100%;
  padding:10px 12px;
  border:1px solid #e5e7eb;
  border-radius:10px;
  font-size:14px;
  background:#fff;
  color:#111;
}
.tgju-modal-input:focus{
  outline:none;
  border-color:#f39327;
  box-shadow:0 0 0 4px rgba(243,147,39,.18);
}

.tgju-modal .tgju-modal-actions{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:18px;
}
.tgju-modal .tgju-modal-btn{
  padding:8px 16px;
  border:none;
  border-radius:10px;
  font-size:14px;
  cursor:pointer;
}
.tgju-modal .tgju-modal-primary{
  background:#f39327;
  color:#fff;
}
.tgju-modal .tgju-modal-btn:not(.tgju-modal-primary){
  background:#e9ecef;
  color:#333;
}

/* === Responsive layout (only layout change) === */

/* Tablet & Desktop: یک‌خطی بدون اسکرول افقی */
@media (min-width: 768px) {
  .tgju-row{
    flex-wrap: nowrap;     /* یک خط */
    overflow-x: visible;   /* حذف اسکرول افقی */
  }
}

/* Mobile: فیلدها ستونی و تمام‌عرض */
@media (max-width: 767.98px) {
  .tgju-row{
    flex-direction: column;
    align-items: stretch;
    overflow-x: visible;   /* اسکرول افقی نداشته باشد */
  }
  .tgju-field,
  .tgju-field--sm,
  .tgju-field--result,
  .tgju-field--btn{
    min-width: 100%;
  }
  .tgju-field--btn{ justify-content: center; }
  .tgju-button{ width: 100%; }
}

/* Desktop compact: کوچک‌تر شدن فیلدها و دکمه تا همگی در یک خط جا شوند */
@media (min-width: 992px) {
  .tgju-row{
    gap:10px;                 /* فاصله کمتر بین فیلدها */
  }
  .tgju-field{ min-width:150px; }     /* کشور/ارز */
  .tgju-field--sm{ min-width:100px; } /* مقدار */
  .tgju-field--result{ min-width:170px; } /* خروجی تومان */
  .tgju-field--btn{ min-width:140px; }    /* جای دکمه */

  /* ارتفاع و پدینگ کمی کوچک‌تر شود */
  .tgju-input,
  .tgju-output,
  .tgju-button{
    height:38px;
  }
  .tgju-input{ padding:8px 10px; }
  .tgju-output{ padding:0 12px; font-size:14px; }
  .tgju-button{
    padding:0 18px;
    font-size:13px;
  }
}