/* =========================================================================
   on-tuition — «تقویم آموزشی و شهریه» · طرح 09-tuition.html
   تب نوع کلاس → جدول شهریه + کارت تقویم + کارت پرداخت.
   وابسته به: de-base.css   ·   تعامل: on-tuition.js
   ========================================================================= */

.ontu { position: relative; overflow: hidden; background: var(--ontu-bg, var(--zn-bg1)); border-bottom: 2px solid rgba(var(--zn-line), .14); }
.ontu-ghost { bottom: 22px; right: -16px; font-size: var(--ontu-ghost-fs, 150px); --ghost-stroke: 1.5px; }
.ontu-wrap { position: relative; z-index: 1; max-width: var(--ontu-mw, 1180px); margin: 0 auto; }

.ontu-headrow { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.ontu-headrow .ontu-head { flex: 1 1 420px; }
.ontu-h2 {
  margin: 16px 0 8px; font-size: var(--ontu-h-fs, 34px); font-weight: 900; line-height: 1.55;
  background: linear-gradient(110deg, var(--ontu-h1, var(--zn-t1)) 35%, var(--ontu-h2c, var(--zn-accent-head)));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.ontu-lead { margin: 0; font-size: 14px; color: var(--zn-t5); line-height: 2; font-weight: 500; }
.ontu-lead p { margin: 0 0 10px; color: inherit; font: inherit; }
.ontu-lead p:last-child { margin-bottom: 0; }
.ontu-tag {
  background: var(--ontu-tag-bg, rgba(245, 179, 1, .14));
  border: 1px solid var(--ontu-tag-bd, rgba(245, 179, 1, .45));
  color: var(--ontu-tag-fg, var(--zn-gold-soft));
  font-size: 12px; font-weight: 800; padding: 8px 16px; border-radius: 999px;
}

/* ---------- تب‌های نوع کلاس ---------- */
.ontu-modes { display: flex; gap: 10px; flex-wrap: wrap; margin: 28px 0 20px; }
.ontu-mode {
  cursor: pointer; user-select: none;
  padding: var(--ontu-mode-p, 12px 24px); border-radius: var(--ontu-mode-r, 999px);
  font-size: var(--ontu-mode-fs, 13.5px); font-weight: 800;
  background: var(--ontu-mode-bg, rgba(255, 255, 255, .5));
  color: var(--ontu-mode-fg, var(--zn-t4));
  border: 2px solid var(--ontu-mode-bd, rgba(var(--zn-line), .22));
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.ontu-mode:hover { border-color: var(--ontu-mode-bd-h, rgba(225, 29, 72, .34)); }
.ontu-mode.is-sel {
  background: var(--ontu-sel-bg, linear-gradient(135deg, var(--zn-crim), var(--zn-rose)));
  color: var(--ontu-sel-fg, #FFF); border-color: transparent;
  box-shadow: var(--ontu-sel-sh, 0 0 28px rgba(255, 59, 92, .34));
}
.ontu-mode:focus-visible { outline: 2px solid var(--zn-crim); outline-offset: 2px; }

/* ---------- جدول ---------- */
.ontu-table {
  background: var(--ontu-tb-bg, rgba(255, 255, 255, .44));
  border: 2px solid var(--ontu-tb-bd, rgba(var(--zn-line), .18));
  border-radius: var(--ontu-tb-r, 22px); overflow: hidden;
}
.ontu-thead {
  display: grid; grid-template-columns: var(--ontu-grid, 1.4fr 1fr 1fr 1.2fr); gap: 14px;
  padding: 17px var(--ontu-cell-px, 26px);
  background: var(--ontu-th-bg, rgba(225, 29, 72, .08));
  border-bottom: 2px solid rgba(var(--zn-line), .16);
  font-size: 12.5px; font-weight: 800; color: var(--ontu-th-fg, var(--zn-accent-soft));
}
.ontu-row {
  display: grid; grid-template-columns: var(--ontu-grid, 1.4fr 1fr 1fr 1.2fr); gap: 14px;
  padding: 16px var(--ontu-cell-px, 26px); align-items: center;
  border-bottom: 1px solid rgba(var(--zn-line), .1);
  transition: background .15s ease;
}
.ontu-row:last-child { border-bottom: 0; }
.ontu-row:hover { background: var(--ontu-row-hover, rgba(225, 29, 72, .04)); }

.ontu-name { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ontu-code {
  direction: ltr; min-width: 42px; text-align: center;
  background: var(--code-bg, linear-gradient(135deg, var(--zn-rose), var(--zn-crim)));
  color: var(--code-fg, #FFF);
  font-size: 12.5px; font-weight: 900; padding: 5px 9px; border-radius: 9px;
}
.ontu-title { font-size: 14px; font-weight: 700; color: var(--zn-t2); }
.ontu-cell { font-size: 13.5px; color: var(--zn-t5); font-weight: 600; }
.ontu-price { font-size: var(--ontu-price-fs, 16px); font-weight: 900; color: var(--zn-t1); font-variant-numeric: tabular-nums; }
.ontu-price .unit { font-size: 11px; font-weight: 600; color: var(--zn-t6); }
.ontu-cell .k, .ontu-price .k { display: none; font-size: 11px; font-weight: 700; color: var(--zn-t6); margin-left: 6px; }

.ontu-note { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--zn-t6); font-weight: 600; }
.ontu-note .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--zn-rose); box-shadow: 0 0 8px var(--zn-rose); }

/* ---------- تقویم و پرداخت ---------- */
.ontu-bottom { display: grid; grid-template-columns: var(--ontu-bcols, 1.1fr 1fr); gap: var(--ontu-bgap, 20px); margin-top: 26px; }

.ontu-cal {
  background: var(--ontu-cal-bg, rgba(255, 255, 255, .44));
  border: 2px solid var(--ontu-cal-bd, rgba(var(--zn-line), .18));
  border-radius: var(--ontu-box-r, 20px);
  padding: var(--ontu-box-p, 24px 26px);
}
.ontu-btitle { font-size: var(--ontu-bt-fs, 16.5px); font-weight: 900; color: var(--zn-t1); margin-bottom: 16px; }
.ontu-terms { display: flex; flex-direction: column; gap: 12px; }
.ontu-term { display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid rgba(var(--zn-line), .14); padding-bottom: 11px; }
.ontu-term:last-child { border-bottom: 0; padding-bottom: 0; }
.ontu-tname { display: flex; align-items: center; gap: 10px; }
.ontu-tdot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--t-c, var(--zn-rose)); box-shadow: 0 0 9px var(--t-c, var(--zn-rose)); }
.ontu-tlabel { font-size: 13.5px; font-weight: 800; color: var(--zn-t2); }
.ontu-tvalue { font-size: 12.5px; color: var(--zn-t5); font-weight: 600; }
.ontu-cfoot { font-size: 11.5px; color: var(--zn-t6); font-weight: 600; line-height: 1.95; margin-top: 14px; }

.ontu-pay {
  background: var(--ontu-pay-bg, linear-gradient(160deg, rgba(255, 92, 138, .12), rgba(255, 252, 246, .6)));
  border: 2px solid var(--ontu-pay-bd, rgba(225, 29, 72, .3));
  border-radius: var(--ontu-box-r, 20px);
  padding: var(--ontu-box-p, 24px 26px);
}
.ontu-plist { display: flex; flex-direction: column; gap: 11px; }
.ontu-pitem { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--zn-t3); font-weight: 600; line-height: 1.95; }
.ontu-tick {
  width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; border-radius: 50%;
  background: var(--ontu-tick-bg, linear-gradient(135deg, var(--zn-crim), var(--zn-rose)));
  color: var(--ontu-tick-fg, #FFF);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900;
}
.de-scope .ontu-btn {
  display: block; text-align: center; cursor: pointer; margin-top: 18px;
  background: var(--ontu-btn-bg, linear-gradient(135deg, var(--zn-crim), var(--zn-rose)));
  color: var(--ontu-btn-fg, #FFF);
  font-size: 13.5px; font-weight: 900;
  padding: var(--ontu-btn-p, 14px); border-radius: var(--ontu-btn-r, 13px);
  box-shadow: 0 0 32px rgba(255, 59, 92, .3);
  transition: transform .18s ease, box-shadow .18s ease;
}
.de-scope .ontu-btn:hover { color: var(--ontu-btn-fg, #FFF); transform: translateY(-2px); }

@media (max-width: 980px) { .ontu-bottom { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .ontu-thead { display: none; }
  .ontu-row { grid-template-columns: 1fr; gap: 8px; padding: 18px var(--ontu-cell-px, 22px); }
  .ontu-cell .k, .ontu-price .k { display: inline; }
}
@media (max-width: 600px) { .ontu-mode { flex: 1 1 100%; text-align: center; } }