/* فونت پایه برای کل عناصر فرم */
body, input, button, select, textarea {
  font-family: 'Vazirmatn', Tahoma, sans-serif;
  font-size: 14px;
  letter-spacing: -0.2px;
}


*{box-sizing:border-box} body{font-family:'Vazirmatn',Tahoma,sans-serif;background:#f7f7f7;margin:0}
.enroll-wrap{max-width:1100px;margin:28px auto;padding:0 16px}
.card{background:#fff;border:1px solid #e7e7e7;border-radius:14px;padding:18px 18px 24px;margin-bottom:18px;box-shadow:0 8px 20px rgba(0,0,0,.03)}
h3{margin:0 0 12px 0;font-size:18px}
.summary-line{color:#444;font-size:14px}
.stepper{display:flex;gap:8px;background:#fff;border:1px solid #e7e7e7;border-radius:14px;padding:10px 12px;margin-bottom:16px}
.step{flex:1;text-align:center;padding:10px;border-radius:10px;border:1px dashed #ddd;color:#777;background:#fafafa}
.step.active{border-color:#FFC000;background:#fff7db;color:#333;font-weight:600}
.step.done{border-color:#cce5cc;background:#f3fff3;color:#2e7d32}

.student-box{border:1px solid #dcdcdc;border-radius:12px;padding:14px;margin:14px 0}
.student-box .box-title{font-weight:600;margin-bottom:12px;color:#333}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:10px}
.col-6{grid-column:span 6} .col-4{grid-column:span 4} .col-8{grid-column:span 8} .col-12{grid-column:span 12}
.input{width:100%;padding:10px 12px;border:1px solid #ddd;border-radius:10px;background:#fbfbfb}
.label{display:block;font-size:12px;margin-bottom:6px;color:#555}
.hint{font-size:12px;color:#999;margin-top:6px}
.extra-address{border-top:1px dashed #eee;margin-top:10px;padding-top:10px}

.form-actions{text-align:center;margin-top:10px}
.btn{border:0;border-radius:10px;padding:12px 20px;cursor:pointer}
.btn-primary{background:#FFC000;color:#333;font-weight:700}
.error{border-color:#ff6161!important;background:#fff3f3}
.msg{color:#c62828;font-size:12px;margin-top:4px}

.class-review-box {
  background: #fffefa;
  border: 1px solid #f2e3c5;
  border-radius: 18px;
  padding: 22px 28px;
  box-shadow: 0 6px 20px rgba(0,0,0,.03);
  margin-bottom: 28px;
}

.class-review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.class-review-header h3 {
  font-size: 20px;
  color: #333;
  margin: 0;
}

.btn-edit {
  background: #00bcd4;
  border: none;
  color: #fff;
  font-weight: 600;
  padding: 8px 16px;
  font-size: 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.3s ease;
}
.btn-edit:hover {
  background: #0097a7;
}

.class-review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px 32px;
  font-size: 15px;
  color: #333;
}

.class-review-grid .label {
  font-weight: 600;
  color: #444;
  margin-left: 6px;
}

.class-review-grid .discount {
  color: #e67e22;
  font-weight: 600;
  margin-right: 4px;
}


.section-title-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
  margin-top: 50px;
}
.section-title-divider::before,
.section-title-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: #ccc;
  margin: 0 16px;
}
.section-title-divider span {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  white-space: nowrap;
}




.section-title{
  font-size:20px; margin:0 0 14px 0; color:#333; text-align:center;
  position:relative;
}
.section-title::after{
  content:""; display:block; height:1px; background:#e9e9e9; margin:12px auto 0; width:92%;
}

.class-review-box{
  background:#ffffff; border:1px solid rgb(226, 226, 226); border-radius:18px;
  padding:24px 28px; box-shadow:0 6px 20px rgba(0,0,0,.03); max-width:1100px; margin:18px auto 32px;
}

.class-review-header{ display:flex; justify-content:flex-end; margin-bottom:8px; }
.btn-edit{
  background:#333; color:#fff; border:0; border-radius:10px; padding:8px 14px;
  font-weight:600; cursor:pointer;
}
.btn-edit:hover{ background:#0097a7; }

/* جدول دوبخشی؛ عنوان و مقدار در یک ردیف روبه‌رو */
.class-kv{ display:grid; grid-template-columns:1fr 1fr; gap:10px 40px; }
@media (max-width:900px){ .class-kv{ grid-template-columns:1fr; } }

.kv-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px dashed #f2e3c5; }
.kv-row:last-child{ border-bottom:0; }

.kv-label{
  color:#756329; /* خاکستری متفاوت برای عنوان ثابت */
  font-weight:400; white-space:nowrap; position:relative; padding-left:8px;
}
.kv-label::after{
  content:" :"; position:relative; margin-right:6px; color:#6b7280; font-weight:700;
}

.kv-value{
  color:#333; font-weight:600; text-align:left;  /* در RTL می‌ایستد روبه‌روی لیبل */
}
.kv-badge{
  background:#fff3d6; color:#d97706; border:1px solid #f7d58e; border-radius:999px;
  padding:2px 8px; font-size:12px; font-weight:700; margin-right:8px;
}

.star {
  color: red;
  font-weight: bold;
  margin-right: 2px;
}

.student-box {
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 16px;
  margin: 20px 0;
  background: #fff;
}

.student-box .box-title {
  font-weight: bold;
  margin-bottom: 12px;
  color: #333;
}

:where(.class-review-box, .class-kv, .some-other-box) .grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}


/* عرض‌های پیش‌فرض */
.col-6  { grid-column: span 6; }
.col-4  { grid-column: span 4; }
.col-8  { grid-column: span 8; }
.col-12 { grid-column: span 12; }

/* ✅ ریسپانسیو: در عرض زیر 768px → فقط 2 فیلد در ردیف */
@media (max-width: 768px) {
  .col-6, .col-4, .col-8 {
    grid-column: span 6;
  }
}

/* ✅ موبایل خیلی کوچک (زیر 500px) → فقط 1 فیلد در هر ردیف */
@media (max-width: 500px) {
  .col-6, .col-4, .col-8 {
    grid-column: span 12;
  }
}


.input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.label {
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
  color: #444;
}

.btn-primary {
  background: #FFC000;
  color: #000;
  padding: 12px 24px;
  border-radius: 10px;
  border: 0;
  font-weight: bold;
  cursor: pointer;
}


.student-form-wrapper {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
}

.full-width-form {
  width: 100%;
  max-width: 100%;
  display: block;
  margin-top: 60px;
  padding: 0 20px;
}

.full-width-form .student-box {
  width: 100%;
  margin-bottom: 30px;
  border: 1px solid #eee;
  padding: 20px;
  border-radius: 12px;
  background: #fff;
}

.full-width-form .grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.full-width-form .col-4 {
  flex: 1 1 calc(33.333% - 20px);
  min-width: 240px;
}

.full-width-form .col-12 {
  flex: 1 1 100%;
}


.student-form-reset {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* داخلش هر چیزی کلاس grid داشته باشه با flex بازنویسی بشه */
.student-form-reset .grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.student-form-reset .col-4 {
  flex: 1 1 calc(33.333% - 20px);
  min-width: 240px;
}

.student-form-reset .col-12 {
  flex: 1 1 100%;
}

.remove-student {
  background: none;
  border: none;
  color: #c00;
  font-size: 20px;
  float: left;
  cursor: pointer;
  margin-top: -4px;
  padding: 0 6px;
}

body.modal-open{overflow:hidden}
.custom-modal.booking-auth-modal{direction:rtl;padding:20px}
.custom-modal-box.booking-auth-box{position:relative;width:500px;max-width:100%;padding:32px 34px 28px;border-radius:22px;border:1px solid #eee3c4;box-shadow:0 24px 70px rgba(20,30,50,.24);text-align:right}
.booking-auth-close{position:absolute;top:14px;left:14px;display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:10px;background:#f2f4f7;color:#566174;font:700 22px/1 Arial;cursor:pointer}
.booking-auth-icon{display:grid;place-items:center;width:58px;height:58px;margin:0 0 17px auto;border-radius:18px;background:#fff3cc;color:#9a7000}
.booking-auth-icon svg{width:29px;height:29px}
.booking-auth-box .modal-title{margin:0 0 10px;color:#253650;font-size:21px;line-height:1.7;text-align:right}
.booking-auth-box .modal-text{margin:0 0 24px;color:#627087;font-size:14px;line-height:2;text-align:right}
.booking-auth-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.booking-auth-actions .modal-btn{display:flex;align-items:center;justify-content:center;min-height:48px;padding:10px 14px;text-align:center;text-decoration:none;line-height:1.7}
.booking-auth-login{background:#fff!important;color:#3e4d63!important;border:1px solid #cdd5df!important}
.booking-auth-later{display:block;margin:16px auto 0;padding:5px;border:0;background:none;color:#778397;font:inherit;font-size:12px;cursor:pointer}
@media(max-width:560px){.custom-modal.booking-auth-modal{align-items:flex-end;padding:12px}.custom-modal-box.booking-auth-box{width:100%;max-width:none;padding:27px 20px 22px;border-radius:20px}.booking-auth-actions{grid-template-columns:1fr}.booking-auth-box .modal-title{font-size:18px}.booking-auth-box .modal-text{font-size:13px}}