/* MediScope Academy — Premium Medical Theme Layer */
:root[data-theme="dark"]{--bg:#071426;--surface:#0d2238;--border:rgba(148,163,184,.18);--text:#eef6ff;--text2:#9fb4c9;--primary:#d6b25e;--teal:#16b8a6;--success:#20c997;--danger:#ef5b5b;--premium-blue:#0b3c5d;--premium-card:rgba(13,34,56,.82);--premium-card-2:rgba(17,43,69,.92);--premium-glow:rgba(22,184,166,.16)}
:root[data-theme="light"]{--bg:#f5f8fb;--surface:#fff;--border:#dbe5ef;--text:#102033;--text2:#5d7187;--primary:#b98a2e;--teal:#0f9f91;--success:#15946f;--danger:#d83b3b}
*{font-family:'Inter','DM Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important}
body{background:radial-gradient(circle at top left,rgba(22,184,166,.09),transparent 34%),radial-gradient(circle at top right,rgba(214,178,94,.08),transparent 30%),var(--bg)!important;letter-spacing:-.01em}
.nav{backdrop-filter:blur(18px);background:rgba(13,34,56,.84)!important;box-shadow:0 10px 30px rgba(0,0,0,.16)}
.logo{font-weight:800!important;letter-spacing:-.03em}
.nav-menu span,button,.btn-primary,.btn-outline{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease,color .18s ease}
.nav-menu span:hover{color:var(--teal)!important}
.btn-primary,.auth-btn-main{background:linear-gradient(135deg,var(--primary),#f0d48b)!important;color:#071426!important;box-shadow:0 10px 22px rgba(214,178,94,.18);border-radius:10px!important}
.btn-primary:hover,.auth-btn-main:hover{transform:translateY(-1px);box-shadow:0 14px 28px rgba(214,178,94,.26)}
.btn-outline{border-color:rgba(214,178,94,.45)!important;border-radius:10px!important}
.page{animation:fadeInPremium .22s ease}
@keyframes fadeInPremium{from{opacity:.86;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
.hero-wrapper,.card,.feature-box,.contact-info-card,.contact-form-card,.auth-form-box,.modal-box,.sidebar,.viewer-toolbar,.notes-panel{border-radius:18px!important}
.card,.feature-box,.contact-form-card,.modal-box,.notes-panel{background:linear-gradient(180deg,var(--premium-card-2),var(--premium-card))!important;border:1px solid var(--border)!important;box-shadow:0 18px 45px rgba(0,0,0,.18)}
.card:hover,.feature-box:hover{transform:translateY(-4px);border-color:rgba(22,184,166,.45)!important;box-shadow:0 22px 55px rgba(0,0,0,.22),0 0 0 1px var(--premium-glow)}
.grid{gap:28px!important}
h1,h2,h3{letter-spacing:-.035em}
h1{line-height:1.08!important}
input,select,textarea,.auth-input,.contact-input,.contact-textarea{border-radius:11px!important;border-color:var(--border)!important;background:rgba(7,20,38,.72)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.03)}
input:focus,select:focus,textarea:focus,.auth-input:focus,.contact-input:focus,.contact-textarea:focus{border-color:var(--teal)!important;box-shadow:0 0 0 4px rgba(22,184,166,.12)!important}
.progress-container{background:rgba(255,255,255,.08)!important;height:9px!important}
.progress-fill{background:linear-gradient(90deg,var(--teal),#4da3ff)!important}
.lesson-item{transition:background .18s ease,border-color .18s ease,padding .18s ease}
.lesson-item:hover,.lesson-item.active{background:rgba(22,184,166,.10)!important;border-left-color:var(--teal)!important}
.lesson-item.completed .title{color:var(--success)!important}
.viewer-toolbar{background:rgba(13,34,56,.92)!important;backdrop-filter:blur(14px)}
.html-frame,iframe{border-radius:14px}
.auth-right,.contact-info-card{background:radial-gradient(circle at top right,rgba(214,178,94,.16),transparent 30%),linear-gradient(135deg,#082039,#0b3c5d)!important}
.footer{background:rgba(13,34,56,.86)!important}
.badge,.pill,.course-badge,.status-badge{border-radius:999px!important;letter-spacing:.01em}
@media(max-width:768px){.nav{padding:12px 4%!important}.page{padding:28px 4%!important}h1{font-size:36px!important}}
.doctor-hero {
    position: relative;
    background: linear-gradient(145deg, #0A1A2F, #112B45);
    border-radius: 20px;
    padding: 20px;
    width: fit-content;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
    border: 1px solid rgba(26, 188, 156, 0.2);
}

.doctor-img {
    width: 320px;
    border-radius: 16px;
    display: block;
}

.doctor-info {
    position: absolute;
    bottom: -15px;
    left: 20px;
    background: #0B3C5D;
    padding: 10px 15px;
    border-radius: 12px;
    color: white;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
}

.doctor-info span {
    display: block;
    font-size: 12px;
    color: #1ABC9C;
}
/* ==============================
   Mobile Responsive Patch
   Safe CSS only
   ============================== */

@media (max-width: 900px) {

  body {
    overflow-x: hidden !important;
  }

  .nav {
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding: 12px 16px !important;
  }

  .logo {
    font-size: 20px !important;
  }

  .nav-links,
  .nav-menu {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .nav-menu span,
  .nav-menu a,
  .btn-primary,
  .btn-outline {
    font-size: 13px !important;
    padding: 8px 12px !important;
  }

  .page {
    padding: 24px 16px !important;
    max-width: 100% !important;
  }

  .hero-wrapper {
    flex-direction: column !important;
    padding: 32px 0 !important;
    gap: 28px !important;
    text-align: center !important;
  }

  .hero-content h1 {
    font-size: 34px !important;
    line-height: 1.15 !important;
  }

  .hero-content p {
    font-size: 16px !important;
  }

  .hero-image {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  .doctor-hero {
    width: 92vw !important;
    max-width: 360px !important;
    height: auto !important;
  }

  .doctor-img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }

  .grid,
  #courses-grid,
  #home-courses-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .card {
    padding: 18px !important;
  }

  .card img {
    width: 100% !important;
    height: auto !important;
    max-height: 220px !important;
    object-fit: cover !important;
  }

  .viewer-layout {
    flex-direction: column !important;
    height: auto !important;
    min-height: 100vh !important;
  }

  .sidebar {
    width: 100% !important;
    max-height: 45vh !important;
    overflow-y: auto !important;
    border-right: none !important;
    border-bottom: 1px solid var(--border) !important;
  }

  .main-content {
    width: 100% !important;
  }

  .viewer-toolbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 10px !important;
  }

  .viewer-toolbar button {
    font-size: 12px !important;
    padding: 7px 10px !important;
  }

  .lesson-content-area {
    min-height: 70vh !important;
    overflow-x: hidden !important;
  }

  iframe,
  .html-frame {
    width: 100% !important;
    max-width: 100% !important;
  }

  .video-watermark-wrap {
    height: 55vh !important;
    min-height: 300px !important;
    border-radius: 12px !important;
  }

  .student-video-watermark {
    font-size: 11px !important;
    padding: 5px 8px !important;
  }

  .notes-panel {
    width: calc(100% - 24px) !important;
    right: 12px !important;
    left: 12px !important;
    top: 12px !important;
  }

  .contact-grid,
  .contact-input-row,
  .auth-input-row {
    grid-template-columns: 1fr !important;
  }

  table {
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 480px) {

  .hero-content h1 {
    font-size: 28px !important;
  }

  .hero-content p {
    font-size: 14px !important;
  }

  .btn-primary,
  .btn-outline {
    width: auto !important;
  }

  .viewer-toolbar {
    justify-content: center !important;
  }

  .lesson-item {
    font-size: 14px !important;
    padding: 13px 14px !important;
  }

  .student-video-watermark {
    font-size: 10px !important;
    opacity: .55 !important;
  }
}
/* تحسين وضوح أزرار الموبايل */

.nav-menu span,
.nav-menu a,
.btn-primary,
.btn-outline {
  color: #ffffff !important; /* أبيض واضح */
  font-weight: 600 !important;
}

/* زرار Menu و Courses و Full Screen */

.nav-menu span,
.nav-menu a {
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 10px !important;
}

/* Hover effect */

.nav-menu span:hover,
.nav-menu a:hover {
  background: rgba(255,255,255,0.12) !important;
  color: #ffffff !important;
}

/* تحسين زرار Full Screen */

.btn-outline {
  border: 1px solid #f5c86b !important;
  color: #f5c86b !important;
}

.btn-outline:hover {
  background: #f5c86b !important;
  color: #061426 !important;
}
/* iPhone / Safari navbar fix */
@supports (-webkit-touch-callout: none) {
  .viewer-toolbar,
  .nav,
  .nav-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 8px !important;
    white-space: nowrap !important;
  }

  .viewer-toolbar button,
  .nav-menu span,
  .nav-menu a,
  .btn-primary,
  .btn-outline {
    flex: 0 0 auto !important;
    min-width: auto !important;
    width: auto !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    padding: 9px 12px !important;
    white-space: nowrap !important;
    -webkit-text-size-adjust: 100% !important;
  }

  body {
    -webkit-text-size-adjust: 100% !important;
  }

  .viewer-toolbar::-webkit-scrollbar,
  .nav::-webkit-scrollbar,
  .nav-menu::-webkit-scrollbar {
    display: none !important;
  }
}

@media (max-width: 430px) {
  .viewer-toolbar {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
  }

  .viewer-toolbar button {
    flex: 0 0 auto !important;
    font-size: 12px !important;
    padding: 8px 10px !important;
  }
}
/* iPhone / mobile lesson file iframe fix */
@media (max-width: 768px) {
  .html-frame,
  iframe.html-frame,
  .lesson-file iframe,
  .content-frame iframe {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 75vh !important;
    border: 0 !important;
  }

  .html-content,
  .lesson-file,
  .content-frame {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  iframe {
    max-width: 100% !important;
  }
}
/* ==============================
   iPhone Safe Experience Patch
   CSS ONLY - لا يلمس تشغيل الموقع
   ============================== */

@supports (-webkit-touch-callout: none) {

  body {
    -webkit-text-size-adjust: 100% !important;
    overflow-x: hidden !important;
  }

  .viewer-layout {
    height: 100dvh !important;
    min-height: 100dvh !important;
  }

  .main-content {
    min-width: 0 !important;
  }

  .lesson-content-area {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .html-frame,
  iframe.html-frame {
    width: 100% !important;
    max-width: 100% !important;
    height: 78dvh !important;
    min-height: 620px !important;
    border: 0 !important;
    display: block !important;
    background: #fff !important;
  }

  .viewer-toolbar {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 8px !important;
    white-space: nowrap !important;
  }

  .viewer-toolbar button {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    padding: 8px 11px !important;
  }

  .viewer-toolbar::-webkit-scrollbar {
    display: none !important;
  }

  .student-video-watermark {
    font-size: 11px !important;
    max-width: 85% !important;
  }
}

@media (max-width: 768px) {
  .sidebar.mobile-open {
    display: block !important;
    height: 42dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .lesson-content-area {
    min-height: 70dvh !important;
  }
}