
/* public/css/terms-modal.css */
* { box-sizing: border-box; }

.btn-link {
  background: none;
  border: none;
  padding: 0;
  color: #2563eb;
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
}
.btn-link:hover { color: #1d4ed8; }

/* Backdrop for <dialog> */
.modal::backdrop { background: rgba(0,0,0,.35); }

/* ===== Modal base ===== */
.modal::backdrop { background: rgba(0,0,0,.35); }

.modal {
  border: none;
  padding: 0;
  max-width: 900px;
  width: 96%;
  border-radius: 12px;
  margin: 0; /* برای iOS بهتر عمل می‌کند */
}

.modal-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  display: flex;           /* به‌جای grid */
  flex-direction: column;  /* header | body | footer */
  height: 90vh;            /* ارتفاع ثابت مودال */
  max-height: 90vh;
}

/* Header */
.modal-header {
  padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid #e5e7eb;
}
.modal-close { background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; }

/* Body */
.modal-body {
  flex: 1;                 /* فضای میانی کش بیاید */
  overflow: hidden;        /* اسکرول را می‌سپاریم به iframe */
  position: relative;
  background: #fff;
}
.modal-iframe {
  width: 100%;
  height: 100%;           /* تمام فضای بدنه را پر کند */
  border: none;
  display: block;
}

/* Footer (actions) */
.modal-actions {
  flex: 0 0 auto;          /* همیشه دیده شود */
  padding: 12px 16px;
  display: flex; gap: 8px; justify-content: flex-end;
  border-top: 1px solid #e5e7eb;
  background: #fff;
  z-index: 2;
}

/* Buttons (همسان با تم) */
.btn { padding: 10px 14px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; }
.btn-primary { background:#2563eb; color:#fff; }
.btn-primary:hover { background:#1d4ed8; }
.btn-light { background:#f3f4f6; color:#111827; border-color:#e5e7eb; }
.btn-light:hover { background:#e5e7eb; }

/* لینک در فرم */
.btn-link {
  background: none; border: none; padding: 0; color: #2563eb;
  text-decoration: underline; cursor: pointer; font: inherit;
}
.btn-link:hover { color: #1d4ed8; }

/* Mobile tweaks */
@media (max-width: 600px) {
  .modal-card { height: 92vh; max-height: 92vh; }
  .modal-body { /* همون تنظیمات باقی بمونه */ }
}
  .modal-body {
    flex: 1;             /* بخش محتوا کش بیاد */
    overflow-y: auto;    /* اسکرول داخل مودال */
  }
  .modal-actions {
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1px solid #e5e7eb;
  }
}


/* اطمینان از اینکه دیالوگ تمام عرض/ارتفاع منطقی بگیرد */
.modal {
  margin: 0;           /* iOS Safari بهتر عمل می‌کند */
}

/* موبایل: اکشن‌ها همیشه پایین بمانند و محتوا اسکرول شود */
@media (max-width: 600px) {
  .modal-card {
    height: 90vh;          /* ارتفاع بزرگتر در گوشی */
  }
  .modal-body {
    flex: 1;               /* قسمت وسط کش بیاید */
    overflow-y: auto;      /* اسکرول داخل بدنه */
    -webkit-overflow-scrolling: touch;
  }
  .modal-actions {
    position: sticky;
    bottom: 0;
    background: #fff;
    border-top: 1px solid #e5e7eb;
  }
}

/* Backdrop */
.modal::backdrop { background: rgba(0,0,0,.35); }

/* Dialog */
.modal{
  border: none;
  padding: 0;
  max-width: 900px;
  width: 96%;
  border-radius: 12px;
  margin: 0;
}

/* کارت داخلی: ارتفاع بر اساس --vh */
.modal-card{
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  display:flex;               /* header | body | footer */
  flex-direction:column;

  /* 92vh «واقعی» با فیکس iOS: اگر --vh نبود، 1vh معمولی fallback می‌شود */
  height: calc(var(--vh, 1vh) * 92);
  max-height: calc(var(--vh, 1vh) * 92);

  padding-bottom: env(safe-area-inset-bottom);
}

/* Header */
.modal-header{
  padding:12px 16px;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid #e5e7eb;
  flex:0 0 auto;
  background:#fff;
  z-index:3;
}
.modal-close{ background:none; border:none; font-size:22px; line-height:1; cursor:pointer; }

/* Body (قابل اسکرول) */
.modal-body{
  flex:1 1 auto;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  position:relative;
  background:#fff;
  z-index:1;
}

/* Iframe تمام فضای بدنه را پر کند */
.modal-iframe{
  width:100%;
  height:100%;
  border:none;
  display:block;
}

/* Footer همیشه دیده شود (بدون sticky سراسری) */
.modal-actions{
  flex:0 0 auto;
  padding:12px 16px;
  display:flex; gap:8px; justify-content:flex-end;
  border-top:1px solid #e5e7eb;
  background:#fff;
  z-index:2;
  /* حاشیه امن پایین برای آیفون */
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
}

/* دکمه‌ها */
.btn{ padding:10px 14px; border-radius:10px; cursor:pointer; border:1px solid transparent; }
.btn-primary{ background:#2563eb; color:#fff; }
.btn-primary:hover{ background:#1d4ed8; }
.btn-light{ background:#f3f4f6; color:#111827; border-color:#e5e7eb; }
.btn-light:hover{ background:#e5e7eb; }

/* لینک سبک داخل فرم */
.btn-link{
  background:none; border:none; padding:0; color:#2563eb;
  text-decoration:underline; cursor:pointer; font:inherit;
}
.btn-link:hover{ color:#1d4ed8; }

/* موبایل: کمی ارتفاع بیشتر */
@media (max-width:600px){
  .modal-card{
    height: calc(var(--vh, 1vh) * 94);
    max-height: calc(var(--vh, 1vh) * 94);
  }
}