/* Bosla Addons - Modern Professional Tests - v3.6.2 */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;800&display=swap');

.bosla-tests-wrapper, .bosla-test-container {
  font-family: 'Cairo', Tahoma, sans-serif;
  direction: rtl;
  max-width: 900px;
  margin: 20px auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  overflow: hidden;
}

.bosla-tests-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
  padding: 0;
  direction: rtl;
  font-family: 'Cairo', sans-serif;
}

/* Modern Card - Applies to ALL cards */
.bosla-test-card {
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 18px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 180px !important;
  box-sizing: border-box !important;
  text-align: right !important;
  box-shadow: none !important;
}
.bosla-test-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08) !important;
  border-color: #cbd5e1 !important;
}
.bosla-test-card::before {
  content: '';
  position: absolute;
  top: 0; right: 0; left: 0;
  height: 4px;
  background: #00C853;
  border-radius: 16px 16px 0 0;
}
.bosla-test-card[data-category*="English"]::before,
.bosla-test-card.english-card::before {
  background: linear-gradient(90deg, #0f172a, #3b82f6, #00C853) !important;
}

/* Hide old elements if present */
.bosla-test-card .card-icon,
.bosla-test-card .card-category,
.bosla-test-card .card-meta,
.bosla-test-card .btn-start {
  display: none !important;
}

/* New structure - ensure visible */
.bosla-test-card > div {
  text-align: right;
}

/* Single Test */
.bosla-test-header {
  background: linear-gradient(135deg, #00C853 0%, #009624 100%);
  color: #fff;
  padding: 30px;
  text-align: center;
}
.bosla-test-header h1 { font-size: 26px; margin:0 0 10px; font-weight:700; }
.bosla-test-header p { opacity:0.9; font-size:15px; line-height:1.6; max-width:700px; margin:0 auto; }

.bosla-test-body { padding: 24px; }

.bosla-progress {
  background:#f1f5f9;
  height:8px;
  border-radius:20px;
  overflow:hidden;
  margin: 16px 0;
}
.bosla-progress-bar {
  height:100%;
  background: linear-gradient(90deg, #00C853, #009624);
  width:0%;
  transition: width 0.4s ease;
}

.bosla-question {
  background:#f8fafc;
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:20px;
  margin-bottom:20px;
  display:none;
}
.bosla-question.active { display:block; animation: fadeIn 0.3s; }
@keyframes fadeIn { from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }

.bosla-question h3 {
  font-size:18px;
  font-weight:700;
  margin-bottom:16px;
  color:#0f172a;
}
.bosla-question .q-number {
  display:inline-block;
  background:#00C853;
  color:#fff;
  width:32px; height:32px;
  border-radius:50%;
  text-align:center;
  line-height:32px;
  font-size:14px;
  margin-left:8px;
}

.bosla-options { display:flex; flex-direction:column; gap:10px; }
.bosla-option {
  background:#fff;
  border:2px solid #e2e8f0;
  border-radius:10px;
  padding:14px 16px;
  cursor:pointer;
  transition: all 0.2s;
  display:flex;
  align-items:center;
  gap:10px;
}
.bosla-option:hover { border-color:#00C853; background:#f0fdf4; }
.bosla-option.selected { border-color:#00C853; background:#e8f5e9; }
.bosla-option input { accent-color:#00C853; }
.bosla-option .opt-text { flex:1; font-size:15px; }

.bosla-nav {
  display:flex;
  justify-content:space-between;
  margin-top:24px;
  gap:12px;
}
.bosla-btn {
  padding:12px 24px;
  border-radius:10px;
  border:none;
  font-family:'Cairo', sans-serif;
  font-weight:600;
  cursor:pointer;
  transition:all 0.2s;
}
.btn-prev { background:#f1f5f9; color:#475569; }
.btn-next { background:#00C853; color:#fff; flex:1; }
.btn-finish { background:linear-gradient(135deg, #00C853, #009624); color:#fff; flex:1; font-size:16px; }
.bosla-btn:disabled { opacity:0.5; cursor:not-allowed; }

/* Result */
.bosla-result {
  text-align:center;
  padding:30px 20px;
  animation: fadeIn 0.5s;
}
.bosla-result-icon { font-size:64px; margin-bottom:16px; }
.bosla-result h2 { font-size:28px; font-weight:700; margin-bottom:8px; }
.bosla-result .level-badge {
  display:inline-block;
  padding:6px 18px;
  border-radius:20px;
  color:#fff;
  font-weight:700;
  margin:12px 0;
  font-size:16px;
}
.bosla-result .score-circle {
  width:140px; height:140px;
  border-radius:50%;
  margin:20px auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  border:6px solid;
  font-weight:700;
}
.bosla-result .result-desc {
  background:#f8fafc;
  border-radius:12px;
  padding:20px;
  text-align:right;
  line-height:1.8;
  margin:20px 0;
  font-size:15px;
}

.bosla-result-actions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:20px;
}
.bosla-result-actions .btn {
  padding:12px;
  border-radius:10px;
  text-decoration:none;
  font-weight:600;
  text-align:center;
  display:block;
}
.btn-cert { background:#00C853; color:#fff; }
.btn-retake { background:#f1f5f9; color:#334155; }
.btn-share { background:#10b981; color:#fff; }

/* Typing Test */
.bosla-typing-setup {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin:20px 0;
}
.bosla-typing-setup .setup-group {
  background:#f8fafc;
  padding:16px;
  border-radius:10px;
}
.bosla-typing-setup label { font-weight:600; display:block; margin-bottom:8px; }
.bosla-typing-setup select, .bosla-typing-setup button {
  width:100%;
  padding:10px;
  border-radius:8px;
  border:1px solid #e2e8f0;
  font-family:'Cairo';
}

.bosla-typing-area {
  background:#fff;
  border:2px solid #e2e8f0;
  border-radius:12px;
  padding:20px;
  margin:20px 0;
  min-height:120px;
  font-size:20px;
  line-height:2;
  letter-spacing:0.5px;
}
.bosla-typing-area .char.correct { color:#10b981; }
.bosla-typing-area .char.incorrect { color:#ef4444; background:#fee2e2; border-radius:3px; }
.bosla-typing-area .char.current { border-bottom:3px solid #00C853; animation: blink 1s infinite; }
@keyframes blink { 0%,50%{border-color:#00C853;} 51%,100%{border-color:transparent;} }

.bosla-typing-stats {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin:16px 0;
}
.bosla-typing-stats .stat {
  background:#f8fafc;
  padding:14px;
  border-radius:10px;
  text-align:center;
}
.bosla-typing-stats .stat .value { font-size:24px; font-weight:700; color:#00C853; }
.bosla-typing-stats .stat .label { font-size:12px; color:#64748b; }

.bosla-typing-input {
  width:100%;
  padding:14px;
  border:2px solid #00C853;
  border-radius:10px;
  font-size:18px;
  font-family:'Cairo';
  direction:rtl;
}

@media(max-width:600px){
  .bosla-tests-grid{grid-template-columns:1fr !important;}
  .bosla-typing-setup{grid-template-columns:1fr;}
  .bosla-typing-stats{grid-template-columns:repeat(2,1fr);}
  .bosla-result-actions{grid-template-columns:1fr;}
}