/* ============================================================
   AmoozYar — Exam Page CSS  (RTL)
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --c-primary:   #2563eb;
  --c-success:   #16a34a;
  --c-danger:    #dc2626;
  --c-warning:   #d97706;
  --c-muted:     #64748b;
  --c-border:    #e2e8f0;
  --c-bg:        #f1f5f9;
  --c-white:     #ffffff;
  --c-text:      #1e293b;
  --radius:      12px;
  --shadow:      0 1px 4px rgba(0,0,0,.1);
}

body.ay-exam-body {
  direction: rtl;
  background: var(--c-bg);
  color: var(--c-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---- Header ---- */
#ay-header {
  background: var(--c-primary);
  color: #fff;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 2px 8px rgba(37,99,235,.3);
  flex-wrap: wrap;
}
#ay-header-title .ay-exam-name  { font-size: 1rem; font-weight: 700; }
#ay-header-title .ay-set-name   { font-size: .75rem; opacity: .75; }
#ay-header-title .ay-set-name code { background: rgba(255,255,255,.2); padding: 1px 5px; border-radius: 4px; }

/* ---- Timer ---- */
#ay-timer-box {
  background: rgba(255,255,255,.15);
  border-radius: 10px;
  padding: 6px 16px;
  text-align: center;
  min-width: 110px;
  transition: background .3s;
}
#ay-timer-digits { font-size: 1.7rem; font-weight: 800; letter-spacing: 2px; line-height: 1; }
#ay-timer-label  { font-size: .65rem; opacity: .8; margin-top: 2px; }
.ay-timer-warning  #ay-timer-digits { color: #fde68a; }
.ay-timer-critical #ay-timer-digits { color: #fca5a5; animation: blink .8s infinite; }
@keyframes blink { 50% { opacity: .3; } }

/* ---- Header info ---- */
#ay-header-info { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
#ay-save-indicator { font-size: .75rem; padding: 2px 8px; border-radius: 5px; }
.ay-save-saving { background: rgba(255,255,255,.2); }
.ay-save-saved  { background: rgba(22,163,74,.4); }
.ay-save-error  { background: rgba(220,38,38,.4); }
#ay-offline-banner { background: var(--c-warning); color: #fff; padding: 2px 10px; border-radius: 5px; font-size: .75rem; }

/* ---- Progress ---- */
#ay-progress-wrap {
  height: 8px;
  background: var(--c-border);
  position: relative;
}
#ay-progress-bar {
  height: 100%;
  background: var(--c-success);
  transition: width .4s ease;
  width: 0%;
}
#ay-progress-label {
  position: absolute;
  left: 12px;
  top: 10px;
  font-size: .72rem;
  color: var(--c-muted);
  white-space: nowrap;
}

/* ---- Main ---- */
#ay-main { flex: 1; padding: 20px 16px 100px; }
#ay-slides-wrap { max-width: 820px; margin: 0 auto; }

/* ---- Slide ---- */
.ay-slide { animation: fadeUp .2s ease; }
@keyframes fadeUp { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

.ay-q-num {
  font-size: .82rem;
  color: var(--c-muted);
  margin-bottom: 10px;
  font-weight: 600;
}
.ay-q-body {
  background: var(--c-white);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 20px;
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 18px;
  box-shadow: var(--shadow);
}
.ay-q-body img { max-width: 100%; height: auto; border-radius: 6px; }

/* ---- Options ---- */
.ay-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }

.ay-opt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--c-white);
  border: 2px solid var(--c-border);
  border-radius: var(--radius);
  padding: 12px 16px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  user-select: none;
}
.ay-opt:hover { border-color: var(--c-primary); }
.ay-opt-selected {
  border-color: var(--c-primary);
  background: #eff6ff;
}
.ay-opt-bubble {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #dbeafe;
  color: var(--c-primary);
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: .95rem;
  transition: background .15s, color .15s;
}
.ay-opt-selected .ay-opt-bubble { background: var(--c-primary); color: #fff; }
.ay-opt-text { line-height: 1.65; font-size: .95rem; }
.ay-opt-text img { max-width: 100%; height: auto; }

.ay-clear-btn {
  background: none;
  border: 1px dashed var(--c-border);
  color: var(--c-muted);
  font-size: .75rem;
  padding: 4px 12px;
  border-radius: 6px;
  cursor: pointer;
  margin-bottom: 10px;
}
.ay-clear-btn:hover { border-color: var(--c-danger); color: var(--c-danger); }

/* ---- Footer Nav ---- */
#ay-footer {
  position: fixed;
  bottom: 0; right: 0; left: 0;
  background: var(--c-white);
  border-top: 1px solid var(--c-border);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 150;
  box-shadow: 0 -2px 8px rgba(0,0,0,.07);
}
#ay-nav-left, #ay-nav-right { display: flex; gap: 8px; flex-shrink: 0; }

#btn-prev, #btn-next {
  padding: 8px 18px;
  border: 1px solid var(--c-border);
  background: var(--c-white);
  border-radius: 8px;
  cursor: pointer;
  font-size: .9rem;
  transition: all .15s;
}
#btn-prev:hover, #btn-next:hover { border-color: var(--c-primary); color: var(--c-primary); }
#btn-prev:disabled, #btn-next:disabled { opacity: .4; cursor: default; }

.ay-finish-btn {
  padding: 8px 20px;
  background: var(--c-danger);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 600;
  transition: opacity .15s;
}
.ay-finish-btn:hover { opacity: .88; }

/* ---- Grid ---- */
#ay-grid-wrap {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  max-height: 52px;
  overflow-y: auto;
}
.ay-grid-cell {
  width: 34px; height: 34px;
  border-radius: 7px;
  border: 1px solid var(--c-border);
  background: var(--c-white);
  cursor: pointer;
  font-size: .78rem;
  transition: all .12s;
}
.ay-grid-cell:hover       { border-color: var(--c-primary); }
.ay-grid-cell.ay-grid-answered { background: var(--c-success); color: #fff; border-color: var(--c-success); }
.ay-grid-cell.ay-grid-current  { border: 2px solid var(--c-primary); font-weight: 700; }

/* ---- Overlay & Modals ---- */
#ay-overlay {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.65);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ay-modal {
  background: var(--c-white);
  border-radius: 18px;
  padding: 40px 32px;
  max-width: 440px;
  width: 92%;
  text-align: center;
  box-shadow: 0 24px 64px rgba(0,0,0,.35);
}
.ay-modal h2 { font-size: 1.3rem; margin-bottom: 12px; }
.ay-modal-icon { font-size: 3rem; margin-bottom: 10px; }
.ay-modal-btns { display: flex; gap: 12px; justify-content: center; margin-top: 20px; }

.ay-btn-danger    { background: var(--c-danger); color: #fff; border: none; padding: 10px 22px; border-radius: 8px; cursor: pointer; font-size: .95rem; font-weight: 600; }
.ay-btn-secondary { background: #e2e8f0; color: var(--c-text); border: none; padding: 10px 22px; border-radius: 8px; cursor: pointer; font-size: .95rem; }
.ay-btn-danger:hover    { opacity: .88; }
.ay-btn-secondary:hover { background: #cbd5e1; }

/* ---- Spinner ---- */
.ay-spinner {
  width: 42px; height: 42px;
  border: 4px solid var(--c-border);
  border-top-color: var(--c-primary);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin: 16px auto;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Responsive ---- */
@media (max-width:600px) {
  #ay-header { padding: 8px 12px; }
  #ay-timer-digits { font-size: 1.3rem; }
  .ay-q-body { padding: 14px; font-size: .93rem; }
  .ay-opt { padding: 10px 12px; gap: 8px; }
  #ay-grid-wrap { max-height: 40px; }
  .ay-grid-cell { width: 28px; height: 28px; font-size: .7rem; }
}

/* ---- Help Bar ---- */
#ay-exam-help-bar {
  background: #1e40af;
  color: rgba(255,255,255,.88);
  font-size: .78rem;
  padding: 6px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
#ay-exam-help-bar span:first-child { font-weight: 700; color: #fde68a; }
#btn-close-help {
  background: none; border: none; color: rgba(255,255,255,.6);
  cursor: pointer; margin-right: auto; font-size: .9rem; padding: 0 4px;
}
#btn-close-help:hover { color: #fff; }
@media(max-width:600px) { #ay-exam-help-bar { display:none; } }

/* ---- نمودار دایره‌ای پیشرفت ---- */
#ay-circle-progress {
  position: relative;
  width: 64px; height: 64px;
  cursor: help;
  flex-shrink: 0;
}
.ay-circle-svg {
  width: 64px; height: 64px;
  transform: rotate(-90deg);
}
.ay-circle-bg {
  fill: none;
  stroke: rgba(255,255,255,.2);
  stroke-width: 3.8;
}
.ay-circle-fill {
  fill: none;
  stroke: #4ade80;
  stroke-width: 3.8;
  stroke-linecap: round;
  transition: stroke-dasharray .4s ease;
}
.ay-circle-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  line-height: 1;
}
#ay-circle-pct  { font-size: .72rem; font-weight: 800; }
.ay-circle-lbl  { font-size: .55rem; opacity: .75; margin-top: 1px; }

/* ---- Page indicator ---- */
#ay-page-indicator {
  background: rgba(255,255,255,.15);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: .78rem;
  white-space: nowrap;
  flex-shrink: 0;
}
@media(max-width:600px) { #ay-page-indicator { display:none; } }

/* ---- صفحه‌بندی سوالات ---- */
#ay-footer-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  overflow: hidden;
  min-width: 0;
}

.ay-page-ind {
  font-size: .8rem;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  background: rgba(255,255,255,.15);
  padding: 2px 12px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* وقتی inline است */
.ay-ie-footer .ay-page-ind {
  color: #475569;
  background: #e2e8f0;
}

/* Prev/Next به صورت دکمه صفحه */
#btn-prev, #btn-next {
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---- ناوبری صفحات آزمون ---- */
.ay-page-top-nav {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  padding:12px 16px;
  background:#f8fafc;
  border-right:1px solid var(--c-border);
  border-left:1px solid var(--c-border);
}
.ay-page-nav-btn,
.ay-page-jump-btn {
  border:1px solid var(--c-border);
  background:#fff;
  color:#334155;
  border-radius:9px;
  padding:7px 12px;
  font-size:.84rem;
  font-weight:700;
  cursor:pointer;
  transition:all .15s ease;
  white-space:nowrap;
}
.ay-page-nav-btn:hover,
.ay-page-jump-btn:hover {
  border-color:var(--c-primary);
  color:var(--c-primary);
}
.ay-page-nav-btn:disabled {
  opacity:.45;
  cursor:not-allowed;
}
.ay-page-jump-wrap {
  display:flex;
  align-items:center;
  gap:6px;
  max-width:100%;
  overflow-x:auto;
  padding:2px 0 4px;
}
.ay-page-jump-btn.ay-page-current {
  background:var(--c-primary);
  border-color:var(--c-primary);
  color:#fff;
}
.ay-page-ind-top {
  color:#475569 !important;
  background:#e2e8f0 !important;
}
@media(max-width:600px) {
  .ay-page-top-nav { gap:6px; padding:10px; }
  .ay-page-nav-btn, .ay-page-jump-btn { font-size:.76rem; padding:6px 9px; }
}