/*
Theme Name: ENT Emergency RTL
Theme URI: https://dalilent.com/ent-theme
Author: ENT Team
Author URI: https://dalilent.com
Description: RTL medical emergency theme with MCQ engine, importer, and Arabic mobile-first UI.
Version: 1.4.1
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: ent-rtl
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap');

:root {
  --turq: #1abc9c;
  --turq-light: #53d3bf;
  --neon: #21c8ff;
}

html,
body {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  direction: rtl;
  background: #071c26;
  color: #eaf4f8;
  font-size: 16px;
  line-height: 1.6
}

.container {
  width: min(1100px, 92vw);
  margin: 0 auto
}

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(7, 28, 38, .9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, .08)
}

.header .inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0
}

.nav {
  flex: 1;
  display: flex;
  gap: 8px
}

@media(max-width:640px) {
  .nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px
  }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: #0c2a36;
  color: #eaf4f8;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .06);
  font-weight: 800;
  transition: transform .12s ease, box-shadow .15s ease, background .2s ease
}

.btn:hover {
  transform: translateY(-1px)
}

.btn:active {
  transform: translateY(0.5px) scale(.98)
}

.btn-turq {
  background: #1abc9c;
  color: #05242d;
  animation: slowPulse 4.5s ease-in-out infinite
}

.btn-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, .25)
}

.small {
  padding: 8px 10px;
  border-radius: 12px;
  min-width: 44px
}

.lock-slot {
  display: flex;
  align-items: center
}

@keyframes slowPulse {
  0% {
    box-shadow: 0 0 0 rgba(26, 188, 156, 0.0)
  }

  50% {
    box-shadow: 0 0 18px rgba(26, 188, 156, 0.35)
  }

  100% {
    box-shadow: 0 0 0 rgba(26, 188, 156, 0.0)
  }
}

.site-title {
  padding: 10px 0 6px;
  border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.site-title .title {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
  margin: 0;
  color: #eaf4f8
}

@media(max-width:640px) {
  .site-title {
    display: none
  }
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 18px 0 32px
}

@media(min-width:640px) {
  .grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(min-width:1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr)
  }
}

.tile {
  position: relative;
  border-radius: 18px;
  padding: 22px 14px 54px;
  min-height: 160px;
  background: linear-gradient(180deg, #0f2d3c 0%, #0b2230 100%);
  border: 1px solid rgba(255, 255, 255, .06);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .06);
  animation: glowLoop 3.8s ease-in-out infinite
}

.tile .emoji {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #0d3546;
  border: 1px solid rgba(255, 255, 255, .08);
  font-size: 22px
}

.tile .lock-ico {
  position: absolute;
  top: 10px;
  left: 12px;
  font-size: 18px
}

.tile .title-wrap {
  text-align: center;
  padding: 0 60px;
  word-wrap: break-word;
  overflow-wrap: anywhere
}

.tile .title {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  line-height: 1.3;
  margin: 0 0 8px;
  color: #ffffff
}

.tile .subtitle {
  display: block;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--neon);
  text-shadow: none;
  text-decoration: none;
  border: none
}

.tile .meta {
  position: absolute;
  left: 14px;
  bottom: 10px;
  font-size: 12px;
  color: #c2d6dc
}

.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  background: rgba(255, 255, 255, .08);
  color: #c2d6dc
}

@keyframes glowLoop {
  0% {
    box-shadow: 0 0 0 rgba(33, 200, 255, .0), 0 14px 32px rgba(0, 0, 0, .25)
  }

  50% {
    box-shadow: 0 0 18px rgba(33, 200, 255, .25), 0 14px 32px rgba(0, 0, 0, .25)
  }

  100% {
    box-shadow: 0 0 0 rgba(33, 200, 255, .0), 0 14px 32px rgba(0, 0, 0, .25)
  }
}

.mcq-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 10px
}

.mcq-btn {
  padding: 12px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .06)
}

.mcq-btn.test10 {
  background: linear-gradient(135deg, #2cd4bf, #18b39a)
}

.mcq-btn.test100 {
  background: linear-gradient(135deg, #21c8ff, #0aa0d1)
}

.mcq-btn:active {
  transform: scale(.98);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .28)
}

.mcq-btn:hover {
  filter: brightness(1.02)
}

.q-card {
  background: #0a2531;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 18px;
  padding: 14px;
  margin: 12px 0 18px;
  font-family: 'Beiruti', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

.q-text {
  font-size: 24px !important;
  line-height: 1.5 !important;
  font-family: 'Beiruti', 'Segoe UI', Tahoma, sans-serif !important;
  font-weight: 700;
  margin-bottom: 8px;
}

.notice-correct {
  font-size: 12px;
  color: #9fdfec;
  margin-bottom: 8px
}

.option {
  display: flex;
  gap: 10px;
  align-items: center;
  background: #0c2a36;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  padding: 10px 12px;
  margin-top: 8px;
  cursor: pointer;
  font-size: 21px !important;
}

.option .opt-txt {
  font-size: 21px !important;
  font-weight: 600;
  line-height: 1.6 !important;
  flex: 1;
}

/* 3. الموبايل: تصغير متناسق */
@media (max-width: 768px) {
  .q-text {
    font-size: 20px !important;
  }

  .option,
  .option .opt-txt {
    font-size: 18px !important;
  }
}

.option .key {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #08212b;
  border: 1px solid rgba(255, 255, 255, .08);
  font-weight: 800
}

.option.correct {
  background: rgba(46, 204, 113, .18);
  border-color: rgba(46, 204, 113, .5)
}

.option.wrong {
  background: rgba(231, 76, 60, .18);
  border-color: rgba(231, 76, 60, .5)
}

.expl {
  margin-top: 10px;
  font-size: 14px;
  color: #c7dce3;
  background: #07202a;
  border: 1px solid rgba(255, 255, 255, .08);
  padding: 10px 12px;
  border-radius: 12px;
  display: none
}

.expl.show {
  display: block
}

.topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 6px 0
}

.answered {
  font-weight: 700;
  color: #cfe9ef
}

.progress {
  height: 8px;
  background: rgba(255, 255, 255, .08);
  border-radius: 999px;
  overflow: hidden;
  margin: 6px 0 10px
}

.progress .bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #21c8ff, #1abc9c)
}

.footer {
  margin-top: 40px;
  padding: 20px 0;
  color: #b7cad0;
  border-top: 1px solid rgba(255, 255, 255, .08)
}

.footer a {
  color: #bfeaf2
}

.editor-styles-wrapper {
  font-family: 'Tajawal', system-ui;
  direction: rtl
}


/* v9 cleanup: remove decorative underline or glow under headings */
.tile .title,
.tile .subtitle {
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}


/* Typography adjustments */
body {
  font-size: 18px;
}

@media (max-width: 768px) {
  body {
    font-size: 16px;
  }
}

/* Page titles */
.page-title {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-weight: 700;
  font-size: 2rem;
}

@media (max-width: 768px) {
  .page-title {
    font-size: 1.8rem;
  }
}

/* Tile Arabic title */
.tile .title {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.3;
}

@media (max-width: 768px) {
  .tile .title {
    font-size: 1.4rem;
  }
}

/* Tile English subtitle */
.tile .subtitle {
  font-family: 'Segoe UI', Tahoma, sans-serif;
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--neon);
  text-decoration: none;
  border: none;
  text-shadow: none;
}

@media (max-width: 768px) {
  .tile .subtitle {
    font-size: 1.1rem;
  }
}

@media(min-width:1024px) {
  body {
    font-size: 18px
  }
}

@media(min-width:1024px) {
  .tile .title {
    font-size: 1.6rem
  }

  .tile .subtitle {
    font-size: 1.2rem
  }
}

.hero-title {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 1.8rem;
  font-weight: 800;
  margin: 10px 0
}

@media(min-width:1024px) {

  .site-title .title,
  .hero-title {
    font-size: 2rem
  }
}

.tile .title,
.tile .subtitle {
  text-decoration: none !important;
  border: none !important;
  box-shadow: none !important
}

/* backbar */
.backbar {
  position: sticky;
  top: 60px;
  z-index: 40;
  margin: 8px 0 12px
}

.backbtn {
  padding: 8px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: #0c2a36;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .06);
  font-weight: 700
}

.backbtn:active {
  transform: translateY(1px);
}

.lock-banner {
  background: #102c38;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px;
  padding: 10px 12px;
  margin: 10px 0
}


/* --- Contact form layout (RTL-safe) --- */
.content-card {
  background: #0a2531;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 16px;
  padding: 14px
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px
}

@media(min-width:640px) {
  .form-grid {
    grid-template-columns: 1fr 1fr
  }
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px
}

.form-field.full {
  grid-column: 1 / -1
}

.form-field .lbl {
  font-weight: 700;
  color: #eaf4f8
}

.content-card input[type="text"],
.content-card input[type="email"],
.content-card input[type="tel"],
.content-card textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: #0c2a36;
  color: #eaf4f8;
  outline: none;
  transition: border .15s ease, box-shadow .15s ease;
}

.content-card textarea {
  min-height: 140px;
  resize: vertical
}

.content-card input::placeholder,
.content-card textarea::placeholder {
  color: #93b6c1
}

.content-card input:focus,
.content-card textarea:focus {
  border-color: #21c8ff;
  box-shadow: 0 0 0 3px rgba(33, 200, 255, .18)
}

/* Prevent overlap on very narrow screens */
@media(max-width:360px) {
  .form-grid {
    gap: 10px
  }

  .content-card input,
  .content-card textarea {
    padding: 10px
  }
}

/* === MCQ Toolbar — 3 buttons in one row + orange 10/100 + oncall panel in row 2 === */

/* اجعل الشريط Grid بثلاثة أعمدة ثابتة للأزرار */
.mcq-bar {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(40px, auto);
  gap: 8px;
  align-items: stretch;
}

.mcq-bar>* {
  min-width: 0
}

/* الأزرار الثلاثة دائماً في الصف الأول */
#btn-random-10,
#btn-random-100,
#btn-oncall {
  grid-row: 1
}

/* 10/100 باللون البرتقالي */
#btn-random-10,
#btn-random-100 {
  background: linear-gradient(135deg, #f59e0b, #f97316) !important;
  color: #05242d;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* زر المناوبة توركواز */
#btn-oncall {
  background: linear-gradient(135deg, #1abc9c, #53d3bf);
  color: #05242d;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .06);
}

/* نترك الحاوية الخارجية كـ contents ليلتحق زر المناوبة بالصف */
.oncall-wrap {
  display: contents
}

/* ⚠️ مهم: أبقِ .oncall-controls حاوية (لا تستعمل contents) لنُسقِطها في الصف الثاني */
.oncall-controls {
  display: none;
  /* مخفية افتراضياً */
  grid-column: 1 / -1;
  /* تأخذ كامل العرض */
  grid-row: 2;
  /* في الصف الثاني */
  grid-template-columns: minmax(120px, 1fr) minmax(160px, 2fr) auto;
  gap: 8px;
  align-items: center;
  background: #0b2632;
  border: 1px solid rgba(255, 255, 255, .10);
  padding: 8px;
  border-radius: 12px;
}

/* عند الفتح نُظهرها */
.mcq-bar.oncall-open .oncall-controls {
  display: grid
}

/* عناصر الإدخال داخل لوحة المناوبة */
.oncall-controls select,
.oncall-controls input {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #0c2a36;
  color: #eaf4f8;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 10px;
  padding: 8px 10px;
  font-weight: 700;
}

.oncall-controls select option {
  background: #fff;
  color: #05242d
}

/* موبايل: ضغط أقوى */
@media (max-width:640px) {
  .mcq-bar {
    gap: 6px
  }

  .mcq-bar .mcq-btn {
    padding: 8px 10px;
    min-height: 34px;
    font-size: 13px;
    line-height: 1.15
  }

  .oncall-controls {
    grid-template-columns: 1fr 1.4fr auto;
    /* نمط – قسم – عدد */
    padding: 6px;
    gap: 6px;
  }
}

@media (max-width:360px) {
  .mcq-bar .mcq-btn {
    padding: 7px 9px;
    min-height: 32px;
    font-size: 12.5px
  }
}

/* === تكبير زر MCQ على الموبايل فقط — بدون المساس بباقي الأزرار === */
@media (max-width:640px) {

  .nav a.btn[href*="mcq"],
  .nav button.btn[href*="mcq"],
  .nav .btn-mcq,
  .nav .btn:nth-child(4) {
    padding: 12px 26px !important;
    min-height: 44px !important;
    font-size: 16px !important;
    border-radius: 14px !important;
    font-weight: 900 !important;
  }
}

/* ==== MCQ random card: full width & balanced ==== */

/* 0) شبكة الشريط: عمودان للأزرار + عمود مرن */
.mcq-bar {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) !important;
  gap: 12px;
}

/* 1) ألغِ صندوق الغلاف حتى لا يقيّد البطاقة */
.mcq-bar .oncall-compact {
  display: contents !important;
  /* يجعل q-card هو العنصر الشبكي الحقيقي */
}

/* 2) مدّ البطاقة على عرض الصفحة داخل الشبكة */
.mcq-bar .q-card {
  grid-column: 1 / -1 !important;
  /* تمتد كل الأعمدة أسفل الأزرار */
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
  box-sizing: border-box;
}

/* 3) زر التحقق بعرض البطاقة */
.mcq-bar .q-card .btn-check {
  width: 100% !important;
  display: block !important;
  min-height: 44px;
  font-weight: 900;
}

/* 4) موبايل: ملء الشاشة مع حواف آمنة */
@media (max-width:640px) {
  .mcq-bar {
    grid-template-columns: 1fr 1fr !important;
    /* الزران جنبًا لجنب */
  }

  .mcq-bar .q-card {
    grid-column: 1 / -1 !important;
  }
}

/* إخفاء "اذهب" + "استئناف" في أوضاع الاختبارات والعشوائي/الإسعاف */
#mcq-random[data-context*="random"] .mcq-controls [data-role="goto"],
#mcq-random[data-context*="random"] .mcq-controls [data-role="resume"],
#mcq-random[data-context="oncall"] .mcq-controls [data-role="goto"],
#mcq-random[data-context="oncall"] .mcq-controls [data-role="resume"],
#mcq-random[data-context^="test"] .mcq-controls [data-role="goto"],
#mcq-random[data-context^="test"] .mcq-controls [data-role="resume"] {
  display: none !important;
}

/* EN subtitle as soft link-style with icon */
.tile .subtitle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  filter: brightness(1.05);
  transition: transform .15s ease, filter .15s ease;
}

/* أيقونة صغيرة تشير أنه رابط إنكليزي */
.tile .subtitle::after {
  content: "🌐";
  font-size: 0.9em;
  opacity: 0.9;
}

/* حركة خفيفة عند المرور (الكمبيوتر) */
.tile .subtitle:hover {
  transform: translateY(-1px) scale(1.02);
  filter: brightness(1.25);
}

/* حركة خفيفة عند الضغط (الموبايل) */
@media (hover:none) {
  .tile .subtitle:active {
    transform: scale(0.97);
    filter: brightness(1.18);
  }
}

/* ===== ترتيب شريط الاستئناف فوق رقم السؤال والنص داخل كرت MCQ ===== */

/* 1) اجعل كرت السؤال عمودي (stack) */
#mcq-random .q-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 2) ضع شريط الأزرار mcq-controls في الأعلى، ثم رقم السؤال، ثم نص السؤال */
#mcq-random .q-card .mcq-controls {
  order: 0;
}

#mcq-random .q-card .topline {
  order: 1;
}

#mcq-random .q-card .q-text {
  order: 2;
}

/* ===== الأساس (موبايل أولاً): Flex + صفّين مرتبين ===== */

#mcq-random .mcq-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* الأزرار داخل mcq-controls بشكل عام */
#mcq-random .mcq-controls .btn {
  width: auto !important;
  /* إلغاء width:100% القديمة */
  min-height: 38px;
  padding: 8px 10px;
  font-size: 13px;
  border-radius: 10px;
}

/* الأزرار المباشرة (استئناف + ابدأ من الأول) → نصف السطر */
#mcq-random .mcq-controls>.btn {
  flex: 1 1 calc(50% - 8px);
  min-width: 0;
}

/* حاوية اذهب إلى رقم (input + زر) */
#mcq-random .mcq-controls .mcq-goto {
  order: 2;
  /* تظهر بالصف الثاني على الموبايل */
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 8px;
}

/* حقل الرقم وزر "اذهب" في الموبايل */
#mcq-random .mcq-controls .mcq-goto input {
  min-height: 38px;
  text-align: center;
}

#mcq-random .mcq-controls .mcq-goto .btn {
  min-height: 38px;
}

/* هذا الجزء للموبايل (≤ 640) فقط — نحافظ على سطرين مريحين */
@media (max-width:640px) {
  #mcq-random .mcq-controls {
    justify-content: flex-start;
  }
}

/* ===== الكمبيوتر (≥ 641px): سطر واحد + أزرار أصغر + حقل رقم أعرض ===== */
@media (min-width:641px) {

  /* كل الشريط في سطر واحد */
  #mcq-random .mcq-controls {
    flex-wrap: nowrap;
    align-items: center;
  }

  /* الأزرار (استئناف + ابدأ من الأول) أصغر وتاخد حجم النص فقط */
  #mcq-random .mcq-controls>.btn {
    flex: 0 0 auto;
    padding: 4px 10px;
    font-size: 12px;
    min-height: 30px;
  }

  /* حاوية اذهب إلى رقم تبقى ضمن السطر */
  #mcq-random .mcq-controls .mcq-goto {
    order: 0;
    /* في الديسكتوب تعود مع البقية في نفس السطر */
    flex: 0 0 auto;
    grid-template-columns: auto auto;
    column-gap: 8px;
  }

  /* تكبير حقل الرقم في الديسكتوب */
  #mcq-random .mcq-controls .mcq-goto input {
    width: 200px;
    max-width: 220px;
    padding: 6px 10px;
    height: 32px;
  }

  /* زر "اذهب" بجوار الحقل */
  #mcq-random .mcq-controls .mcq-goto .btn {
    min-width: 70px;
    padding: 4px 10px;
    font-size: 12px;
    min-height: 30px;
  }
}