/* =========================================================================
   Kavenio CV — Unified Responsive Layer
   ---------------------------------------------------------------------------
   هذا الملف هو طبقة الـ mobile responsive الموحدة لكل صفحات المشروع.
   يُحمَّل أخيرًا (آخر <link>) في كل صفحة ليتفوّق على inline styles عند الحاجة.

   فلسفة الـ breakpoints (نظام موحد):
     ≤ 480px   هاتف صغير  (iPhone SE)
     ≤ 768px   هاتف كبير + tablet عمودي
     ≤ 1024px  tablet أفقي + شاشة لابتوب صغيرة

   هذا الملف يستخدم !important بسخاء لأن الصفحات الحالية تحتوي على inline
   styles بـ !important تتطلب التغلب عليها. لاحقًا عند نقل الـ inline styles
   إلى ملفات CSS مستقلة، يمكن إزالة !important من هنا.
   ========================================================================= */

/* =========================================================================
   1. أساسيات الجوال (تنطبق دائمًا)
   ========================================================================= */

/* تكبير حقول الإدخال إلى 16px لمنع iOS من تكبير الصفحة عند focus
   (مشكلة سيئة تحدث في Safari iOS إذا كان font-size أقل من 16px). */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="url"],
  input[type="search"],
  input[type="date"],
  textarea,
  select {
    font-size: 16px !important;
  }
}

/* أزرار وعناصر تفاعلية: حد أدنى 44px لتجربة لمس سليمة (Apple HIG / Material). */
@media (max-width: 768px) {
  button,
  .btn-primary,
  .btn-secondary,
  .btn-outline-small,
  a.btn-primary,
  a.btn-secondary,
  .nav-controls button,
  .nav-actions button {
    min-height: 44px !important;
  }
}

/* منع overflow أفقي في الـ body كلّه على الجوال — كثير من الصفحات تعاني من هذا. */
@media (max-width: 768px) {
  html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }
  /* استثناء: الـ builder يحتاج body بـ overflow طبيعي في بعض الحالات. */
  body.editor-mobile-preview-open {
    overflow: hidden !important;
  }
}

/* =========================================================================
   2. صفحات الـ Landing (index.html, en.html)
   ========================================================================= */
@media (max-width: 768px) {
  .page-shell {
    padding: 12px !important;
  }

  /* بطاقة الـ hero: padding أقل، خط أصغر */
  .hero-card {
    padding: 1.25rem 1rem !important;
  }
  .hero-title {
    font-size: 1.4rem !important;
    line-height: 1.4 !important;
  }
  .hero-subtitle {
    font-size: 0.9rem !important;
    line-height: 1.7 !important;
  }

  /* meta tags في صف عمودي */
  .hero-meta {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }
  .hero-meta span {
    text-align: center !important;
  }

  /* feature-grid: 1 عمود على الجوال */
  .feature-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* template-grid: 1 عمود */
  .template-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .hero-title {
    font-size: 1.2rem !important;
  }
  .preview-window {
    height: 280px !important;
  }
  .preview-image {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* =========================================================================
   3. شريط الإدارة الموحد (admin-actions, profile-actions, admin-header)
      مستخدم في: dashboard, my-resumes, profile, pro-admin, admin-billing,
      checkout — كل الصفحات الإدارية.
   ========================================================================= */
@media (max-width: 768px) {
  /* الهيدر العلوي */
  .admin-header,
  .profile-header,
  .dashboard-header {
    padding: 16px !important;
    border-radius: 22px !important;
    gap: 14px !important;
  }

  /* الـ brand area يصبح كولونًا */
  .admin-header .brand,
  .profile-brand,
  .dashboard-brand {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 10px !important;
  }

  /* العناوين أصغر على الجوال */
  .admin-header .admin-title h1,
  .profile-title h1,
  .dashboard-header h1 {
    font-size: 1.35rem !important;
    line-height: 1.3 !important;
  }
  .admin-header .admin-title p,
  .profile-title p,
  .dashboard-header p {
    font-size: 0.85rem !important;
  }

  /* الأزرار في شبكة 2x2 على الـ tablet والجوال الكبير */
  .admin-actions,
  .profile-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
  }
  .admin-actions > *,
  .profile-actions > * {
    width: 100% !important;
    min-width: 0 !important;
    padding: 10px 12px !important;
    font-size: 0.85rem !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

@media (max-width: 480px) {
  /* على الجوال الصغير: كولون واحد للأزرار */
  .admin-actions,
  .profile-actions {
    grid-template-columns: 1fr !important;
  }
  .admin-header .admin-title h1,
  .profile-title h1 {
    font-size: 1.2rem !important;
  }
}

/* =========================================================================
   4. شبكات الـ Dashboard (dashboard-stat-grid, pricing-grid, two-col)
   ========================================================================= */
@media (max-width: 768px) {
  .dashboard-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }
  .dashboard-stat,
  .pricing-card,
  .dashboard-panel {
    padding: 16px !important;
    border-radius: 18px !important;
  }
  .dashboard-stat strong {
    font-size: 24px !important;
  }
  .dashboard-two-col {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .dashboard-mini-list div {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
  }
}

@media (max-width: 480px) {
  .dashboard-stat-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================================================
   5. الجداول (my-resumes, pro-admin, admin-billing)
      الجداول العريضة تكسر الـ layout على الجوال — نجعلها قابلة للسحب أفقيًا.
   ========================================================================= */
@media (max-width: 768px) {
  /* نلف الجداول بـ container scrollable */
  .resume-table-wrap,
  .admin-table-wrap,
  table.resume-table,
  table.admin-table,
  table.billing-table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }

  /* للجداول التي ليس فيها wrapper: نطبق التمرير على الجدول نفسه */
  .resume-dashboard-shell table,
  .admin-shell table {
    min-width: 600px !important;
  }

  /* تصغير padding الخلايا */
  table th, table td {
    padding: 8px 10px !important;
    font-size: 0.82rem !important;
  }
}

/* =========================================================================
   6. صفحة Login / Checkout
   ========================================================================= */
@media (max-width: 768px) {
  .auth-shell,
  .login-shell,
  .checkout-shell {
    padding: 16px !important;
  }
  .auth-card,
  .login-card,
  .checkout-card {
    padding: 20px !important;
    border-radius: 22px !important;
  }
  .auth-tabs,
  .login-tabs {
    flex-direction: row !important;
    gap: 6px !important;
  }
  .auth-tabs button,
  .login-tabs button {
    flex: 1 1 auto !important;
    font-size: 0.85rem !important;
    padding: 10px 12px !important;
  }
}

/* =========================================================================
   7. الـ Builder (builder.html) — Live Preview Dock للجوال
   ---------------------------------------------------------------------------
   الفكرة:
     - لا يوجد زر معاينة منفصل ولا overlay في الهاتف.
     - المعاينة تظهر مباشرة أعلى نموذج التعديل وتتحدث فور الكتابة.
     - أزرار الحفظ والتنزيل تبقى في شريط الجوال/القائمة ولا تختفي.
     - تبويبات الأقسام تبقى ثابتة أسفل الشاشة مثل تطبيقات الهاتف.
   ========================================================================= */

.mobile-preview-toggle,
.mobile-live-preview-header {
  display: none;
}

@media (max-width: 768px) {
  :root {
    --kv-mobile-bar-height: 60px;
    --kv-mobile-tabs-height: 66px;
    --kv-mobile-preview-height: clamp(218px, 34dvh, 310px);
    --mobile-preview-scale: 0.39;
  }

  html,
  body.cv-builder-page {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    background: #020617 !important;
  }

  body.cv-builder-page .kavenio-editor-app {
    height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
    background: #020617 !important;
  }

  body.cv-builder-page.kv-mobile-nav-ready .kavenio-editor-app {
    height: calc(100dvh - var(--kv-mobile-bar-height)) !important;
    min-height: calc(100dvh - var(--kv-mobile-bar-height)) !important;
  }

  body.cv-builder-page .editor-workspace {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: var(--kv-mobile-preview-height) minmax(0, 1fr) !important;
    grid-template-areas:
      "canvas"
      "form" !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: #020617 !important;
  }

  body.cv-builder-page.kv-mobile-nav-ready .editor-workspace {
    height: calc(100dvh - var(--kv-mobile-bar-height)) !important;
    padding-top: 0 !important;
  }

  body.cv-builder-page .editor-canvas-container {
    grid-area: canvas !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    inset: auto !important;
    z-index: 20 !important;
    width: 100% !important;
    height: var(--kv-mobile-preview-height) !important;
    min-height: var(--kv-mobile-preview-height) !important;
    max-height: var(--kv-mobile-preview-height) !important;
    padding: 8px 10px 10px !important;
    overflow: hidden !important;
    background-color: #020617 !important;
    background-image: radial-gradient(rgba(255,255,255,.12) 1px, transparent 1px) !important;
    background-size: 22px 22px !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.25) !important;
    box-shadow: 0 12px 30px rgba(2, 6, 23, 0.38) !important;
    direction: ltr !important;
  }

  body.cv-builder-page .mobile-live-preview-header {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    width: min(100%, calc((var(--kv-a4-w, 794px) * var(--mobile-preview-scale)) + 4px)) !important;
    margin: 0 auto 6px !important;
    color: #e2e8f0 !important;
    direction: rtl !important;
    text-align: right !important;
    pointer-events: none !important;
  }

  html[dir="ltr"] body.cv-builder-page .mobile-live-preview-header {
    direction: ltr !important;
    text-align: left !important;
  }

  body.cv-builder-page .mobile-live-preview-header strong {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 0.78rem !important;
    font-weight: 950 !important;
    color: #facc15 !important;
    white-space: nowrap !important;
  }

  body.cv-builder-page .mobile-live-preview-header strong::before {
    content: "";
    width: 7px !important;
    height: 7px !important;
    border-radius: 999px !important;
    background: #22c55e !important;
    box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.14) !important;
  }

  body.cv-builder-page .mobile-live-preview-header span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #94a3b8 !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
  }

  body.cv-builder-page .editor-canvas-container .canvas-inner-wrapper {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    width: min(100%, calc(var(--kv-a4-w, 794px) * var(--mobile-preview-scale))) !important;
    height: calc(var(--kv-a4-h, 1123px) * var(--mobile-preview-scale)) !important;
    max-height: 100% !important;
    margin: 0 auto !important;
    position: relative !important;
    overflow: auto !important;
    border-radius: 14px !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
  }

  body.cv-builder-page .canvas-inner {
    width: var(--kv-a4-w, 794px) !important;
    min-width: var(--kv-a4-w, 794px) !important;
    max-width: var(--kv-a4-w, 794px) !important;
    margin: 0 auto !important;
    transform: scale(var(--mobile-preview-scale)) !important;
    transform-origin: top center !important;
  }

  @supports (zoom: 1) {
    body.cv-builder-page .canvas-inner {
      transform: none !important;
      zoom: var(--mobile-preview-scale) !important;
    }
  }

  body.cv-builder-page #cvPreview.cv-page {
    margin: 0 !important;
    transform: none !important;
    transform-origin: top center !important;
  }

  body.cv-builder-page .editor-sidebar-tabs {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: var(--kv-mobile-tabs-height) !important;
    z-index: 90 !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-around !important;
    align-items: center !important;
    gap: 4px !important;
    background: rgba(15, 23, 42, 0.97) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-top: 1px solid rgba(148, 163, 184, 0.25) !important;
    border-bottom: 0 !important;
    border-inline: 0 !important;
    padding: 6px calc(6px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left)) !important;
    box-shadow: 0 -10px 26px rgba(0,0,0,0.34) !important;
    overflow: hidden !important;
  }

  body.cv-builder-page .editor-sidebar-tabs .tab {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 52px !important;
    padding: 6px 4px !important;
    font-size: 0.68rem !important;
    border-radius: 13px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
  }

  body.cv-builder-page .editor-sidebar-tabs .tab-icon {
    font-size: 1.16rem !important;
    line-height: 1 !important;
  }

  body.cv-builder-page .editor-sidebar-form {
    grid-area: form !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-inline: 0 !important;
    border-top: 1px solid rgba(148, 163, 184, 0.16) !important;
    background: rgba(15, 23, 42, 0.98) !important;
  }

  body.cv-builder-page .form-header {
    flex: 0 0 auto !important;
    padding: 14px 14px 10px !important;
  }

  body.cv-builder-page .form-header h2 {
    font-size: 1rem !important;
    line-height: 1.35 !important;
  }

  body.cv-builder-page .form-header .panel-helper {
    font-size: 0.74rem !important;
    line-height: 1.55 !important;
  }

  body.cv-builder-page .form-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 14px 12px calc(var(--kv-mobile-tabs-height) + 24px + env(safe-area-inset-bottom)) !important;
    -webkit-overflow-scrolling: touch !important;
  }

  body.cv-builder-page .field-grid,
  body.cv-builder-page .ai-grid,
  body.cv-builder-page .ai-actions,
  body.cv-builder-page .ai-apply-actions {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  body.cv-builder-page .repeat-group,
  body.cv-builder-page .ai-assistant-card,
  body.cv-builder-page .cv-health-card {
    padding: 14px !important;
    border-radius: 16px !important;
  }

  body.cv-builder-page .editor-navbar {
    padding: 10px 12px !important;
    grid-template-areas:
      "brand brand"
      "actions actions"
      "controls controls" !important;
  }

  body.cv-builder-page .nav-brand h1 {
    font-size: 0.95rem !important;
    margin: 0 !important;
  }

  body.cv-builder-page .nav-brand small {
    font-size: 0.68rem !important;
  }

  body.cv-builder-page .nav-brand img {
    width: 32px !important;
    height: 32px !important;
  }

  body.cv-builder-page .nav-controls {
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    width: 100% !important;
  }

  body.cv-builder-page .nav-controls select,
  body.cv-builder-page .nav-controls input[type="color"],
  body.cv-builder-page .language-toggle button {
    min-height: 42px !important;
    font-size: 0.82rem !important;
  }

  body.cv-builder-page .nav-actions {
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
  }

  body.cv-builder-page .nav-actions > * {
    flex: 1 1 calc(50% - 6px) !important;
  }

  body.cv-builder-page .nav-actions #downloadPdfBtn {
    flex: 1 1 100% !important;
  }

  body.cv-builder-page .paywall-modal {
    padding: 12px !important;
  }

  body.cv-builder-page .paywall-card {
    max-width: 100% !important;
    border-radius: 20px !important;
    padding: 18px !important;
  }

  body.cv-builder-page .paywall-actions {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 560px) {
  :root {
    --kv-mobile-preview-height: clamp(205px, 32dvh, 270px);
    --mobile-preview-scale: 0.35;
  }

  body.cv-builder-page .mobile-live-preview-header {
    margin-bottom: 5px !important;
  }

  body.cv-builder-page .mobile-live-preview-header strong {
    font-size: 0.74rem !important;
  }

  body.cv-builder-page .mobile-live-preview-header span {
    font-size: 0.68rem !important;
  }
}

@media (max-width: 420px) {
  :root {
    --kv-mobile-preview-height: clamp(188px, 30dvh, 238px);
    --mobile-preview-scale: 0.31;
  }

  body.cv-builder-page .editor-canvas-container {
    padding-inline: 8px !important;
  }

  body.cv-builder-page .editor-sidebar-tabs .tab {
    font-size: 0.58rem !important;
    min-height: 50px !important;
  }

  body.cv-builder-page .nav-actions > * {
    flex: 1 1 100% !important;
  }
}

/* =========================================================================
   8. Tablet (768px - 1024px): توازن بين النموذج والمعاينة في الـ builder
   ========================================================================= */
@media (min-width: 769px) and (max-width: 1024px) {
  .editor-workspace {
    grid-template-columns: 60px 1fr 1fr !important;
  }
  .canvas-inner {
    transform: scale(0.72) !important;
    transform-origin: top center !important;
  }
}

/* =========================================================================
   9. تحسينات أداء / accessibility
   ========================================================================= */

/* احترام تفضيل المستخدم في تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* تحسين focus visibility (a11y) — مهم على الجوال أيضًا */
@media (max-width: 768px) {
  button:focus-visible,
  a:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    outline: 2px solid #facc15 !important;
    outline-offset: 2px !important;
  }
}

/* منع التحديد العرضي على عناصر التفاعل (تجربة لمس أفضل) */
@media (max-width: 768px) {
  button,
  .tab,
  .btn-primary,
  .btn-secondary {
    -webkit-tap-highlight-color: transparent !important;
    -webkit-touch-callout: none !important;
    user-select: none !important;
  }
}

/* تحسين التمرير على iOS */
@media (max-width: 768px) {
  .editor-canvas-container,
  .editor-sidebar-form,
  .resume-table-wrap,
  table.resume-table {
    -webkit-overflow-scrolling: touch !important;
  }
}

/* =========================================================================
   10. صفقات صغيرة شائعة عبر كل الصفحات
   ========================================================================= */
@media (max-width: 768px) {
  /* صور كبيرة لا تتجاوز عرض الحاوية */
  img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* الـ container max-width = 100% on mobile */
  .container,
  .wrapper,
  .page-shell,
  .resume-dashboard-shell {
    width: 100% !important;
    padding-inline: 12px !important;
    margin-inline: 0 !important;
  }

  /* h1/h2/h3 لا تطفح خارج الشاشة */
  h1, h2, h3 {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }
}

/* =========================================================================
   11. Hamburger menu + drawer (assets/js/mobile-nav.js يحقن هذه العناصر)
   ---------------------------------------------------------------------------
   على الـ desktop: كل ما هنا مخفي. السكريبت يحقن العناصر دائمًا لكن CSS
   يخفيها فوق 768px ويُظهرها تحته.
   ========================================================================= */

/* مخفي افتراضيًا — يظهر فقط على الجوال */
.kv-mobile-bar,
.kv-mobile-drawer,
.kv-drawer-backdrop {
  display: none;
}

@media (max-width: 768px) {
  /* ---- إخفاء الـ navs الأصلية على الجوال ---- */
  body.kv-mobile-nav-ready .editor-navbar,
  body.kv-mobile-nav-ready .admin-header,
  body.kv-mobile-nav-ready .profile-header,
  body.kv-mobile-nav-ready .landing-header,
  body.kv-mobile-nav-ready .resume-dashboard-header,
  body.kv-mobile-nav-ready .auth-top-actions,
  body.kv-mobile-nav-ready .auth-brand {
    display: none !important;
  }

  /* ---- Mobile bar (الشريط العلوي الصغير) ---- */
  .kv-mobile-bar {
    display: flex !important;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 80;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(15, 23, 42, 0.96);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.24);
    min-height: 60px;
  }

  .kv-mobile-bar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 1 auto;
    min-width: 0;
  }
  .kv-mobile-bar-brand a {
    display: inline-flex;
    align-items: center;
  }
  .kv-mobile-bar-logo {
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px;
    object-fit: contain;
    display: block;
  }
  .kv-mobile-bar-title {
    font-size: 0.92rem;
    font-weight: 800;
    color: #f8fafc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
  }

  .kv-mobile-bar-primary {
    margin-inline-start: auto;
    flex: 0 0 auto;
    /* اجعل الزر مدمجًا في الـ bar — لا يلوث الـ layout */
    padding: 8px 14px !important;
    font-size: 0.85rem !important;
    min-height: 40px !important;
    border-radius: 999px !important;
  }

  /* ---- زر الـ hamburger ---- */
  .kv-mobile-hamburger {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: #f8fafc;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, border-color 0.2s ease;
  }
  .kv-mobile-hamburger:hover,
  .kv-mobile-hamburger:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(250, 204, 21, 0.5);
    outline: none;
  }
  .kv-hamburger-bars {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 20px;
  }
  .kv-hamburger-bars span {
    display: block;
    height: 2px;
    width: 100%;
    background: currentColor;
    border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
  }
  /* تحويل لـ × عند الفتح */
  .kv-mobile-hamburger[aria-expanded="true"] .kv-hamburger-bars span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .kv-mobile-hamburger[aria-expanded="true"] .kv-hamburger-bars span:nth-child(2) {
    opacity: 0;
  }
  .kv-mobile-hamburger[aria-expanded="true"] .kv-hamburger-bars span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* ---- backdrop ---- */
  .kv-drawer-backdrop {
    display: block !important;
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.6);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 98;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .kv-drawer-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  /* ---- الـ drawer ---- */
  .kv-mobile-drawer {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0;
    bottom: 0;
    width: min(86vw, 340px);
    max-width: 340px;
    z-index: 99;
    background:
      radial-gradient(circle at top right, rgba(250, 204, 21, 0.10), transparent 40%),
      linear-gradient(180deg, #0f172a 0%, #020617 100%);
    color: #f8fafc;
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
  }
  /* RTL: ينزلق من اليمين */
  html[dir="rtl"] .kv-mobile-drawer {
    right: 0;
    left: auto;
    transform: translateX(105%);
  }
  html[dir="rtl"] .kv-mobile-drawer.is-open {
    transform: translateX(0);
  }
  /* LTR: ينزلق من اليسار */
  html[dir="ltr"] .kv-mobile-drawer,
  html:not([dir]) .kv-mobile-drawer {
    left: 0;
    right: auto;
    transform: translateX(-105%);
    box-shadow: 20px 0 60px rgba(0, 0, 0, 0.5);
  }
  html[dir="ltr"] .kv-mobile-drawer.is-open,
  html:not([dir]) .kv-mobile-drawer.is-open {
    transform: translateX(0);
  }

  /* رأس الـ drawer */
  .kv-drawer-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 18px 14px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
  }
  .kv-drawer-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #facc15;
    letter-spacing: 0.02em;
  }
  .kv-drawer-close {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(148, 163, 184, 0.22);
    color: #f8fafc;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .kv-drawer-close:hover,
  .kv-drawer-close:focus-visible {
    background: rgba(255, 255, 255, 0.10);
    outline: none;
  }

  /* جسم الـ drawer (قابل للسحب عموديًا لو طويل) */
  .kv-drawer-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 14px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  /* كل بند داخل الـ drawer */
  .kv-drawer-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .kv-drawer-item-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 2px;
    padding-inline-start: 4px;
  }

  /* الأزرار/الروابط داخل الـ drawer */
  .kv-drawer-action {
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 16px !important;
    border-radius: 14px !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    text-align: start !important;
    justify-content: flex-start !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    /* تجاوز الأنماط الأصلية للأزرار */
    background: rgba(255, 255, 255, 0.04) !important;
    color: #f8fafc !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    box-shadow: none !important;
    transition: background 0.2s ease, border-color 0.2s ease;
  }
  .kv-drawer-action:hover,
  .kv-drawer-action:focus-visible {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(250, 204, 21, 0.4) !important;
    outline: none;
  }
  /* احتفظ بالنمط الذهبي للزر الـ primary */
  .kv-drawer-action.btn-primary {
    background: linear-gradient(135deg, #f59e0b, #facc15) !important;
    color: #111827 !important;
    border-color: transparent !important;
  }
  .kv-drawer-action.btn-primary:hover {
    filter: brightness(1.08);
  }

  /* select داخل الـ drawer */
  .kv-drawer-select {
    width: 100% !important;
    min-height: 46px !important;
    padding: 10px 14px !important;
    border-radius: 12px !important;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: #f8fafc !important;
    font-size: 0.9rem !important;
  }
  .kv-drawer-select option {
    background: #0f172a;
    color: #f8fafc;
  }

  /* color picker داخل الـ drawer */
  .kv-drawer-color {
    width: 60px !important;
    height: 40px !important;
    border-radius: 10px !important;
    border: 1px solid rgba(148, 163, 184, 0.28) !important;
    padding: 2px !important;
    background: transparent !important;
    cursor: pointer;
  }

  /* language toggle داخل الـ drawer */
  .kv-drawer-language-toggle {
    display: flex !important;
    gap: 6px;
    padding: 4px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
  }
  .kv-drawer-language-toggle button {
    flex: 1 1 0 !important;
    min-height: 40px !important;
    border-radius: 10px !important;
    border: 0 !important;
    background: transparent !important;
    color: #cbd5e1 !important;
    font-weight: 700 !important;
    cursor: pointer;
  }
  .kv-drawer-language-toggle button.is-active {
    background: linear-gradient(135deg, #f59e0b, #facc15) !important;
    color: #111827 !important;
  }

  /* منع scroll الـ body عند فتح الـ drawer */
  body.kv-drawer-open {
    overflow: hidden !important;
  }

  /* ---- الـ builder تحديدًا: الشريط الصغير يبقى ظاهرًا والمعاينة داخل الصفحة. ---- */
  body.kv-mobile-nav-ready .editor-workspace {
    padding-top: 0 !important;
  }
}

/* أعلى من 768px: تأكد بشكل صريح أن الـ mobile bar/drawer مخفية */
@media (min-width: 769px) {
  .kv-mobile-bar,
  .kv-mobile-drawer,
  .kv-drawer-backdrop,
  .kv-mobile-hamburger {
    display: none !important;
  }
  body.kv-drawer-open {
    overflow: auto;
  }
}

/* =========================================================
   Kavenio CV Landing Hotfix — Mobile Header + Pricing Cards
   ضع هذا الكود في نهاية: assets/css/responsive.css
   السبب: responsive.css هو آخر ملف يتم تحميله في صفحات الهبوط.
   ========================================================= */

/* 1) لا تستخدم شريط الموبايل العام في صفحات الهبوط */
@media (max-width: 768px) {
  body.landing-page.kv-mobile-nav-ready .landing-header {
    display: flex !important;
  }

  body.landing-page .kv-mobile-bar,
  body.landing-page .kv-mobile-drawer,
  body.landing-page .kv-drawer-backdrop {
    display: none !important;
  }
}

/* 2) إصلاح الهيدر في الهواتف */
@media (max-width: 640px) {
  body.landing-page .page-shell {
    padding: 0.85rem !important;
    gap: 1rem !important;
  }

  body.landing-page .landing-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0.85rem !important;
    padding: 0.9rem !important;
    border-radius: 18px !important;
  }

  body.landing-page .brand {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.7rem !important;
  }

  body.landing-page .brand-logo {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    flex: 0 0 42px !important;
  }

  body.landing-page .brand-titles,
  body.landing-page .brand > div:last-child {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  body.landing-page .brand-text-title {
    font-size: 0.95rem !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  body.landing-page .brand-text-sub {
    font-size: 0.73rem !important;
    line-height: 1.45 !important;
    white-space: normal !important;
    overflow: visible !important;
  }

  body.landing-page .header-right {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0.65rem !important;
    align-items: stretch !important;
    justify-content: stretch !important;
  }

  body.landing-page .chip {
    display: none !important;
  }

  body.landing-page .lang-switch {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body.landing-page .lang-switch a {
    min-width: 0 !important;
    width: auto !important;
    padding: 0.55rem 0.7rem !important;
    text-align: center !important;
  }

  body.landing-page .header-right > .btn-outline-small {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    padding: 0.62rem 1rem !important;
    font-size: 0.86rem !important;
    justify-content: center !important;
  }

  body.landing-page .hero-actions .btn-primary,
  body.landing-page .landing-footer-cta .btn-primary {
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
  }
}

/* 3) تحسين المعاينة في الجوال */
@media (max-width: 640px) {
  body.landing-page .preview-header {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  body.landing-page .preview-tabs {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  body.landing-page .preview-tab {
    padding: 0.48rem 0.35rem !important;
    font-size: 0.76rem !important;
  }

  body.landing-page .preview-window {
    height: 300px !important;
    padding: 0.75rem !important;
    overflow: hidden !important;
  }
}

/* 4) تصميم جديد وأنظف للباقات المتاحة */
body.landing-page .pricing-grid {
  align-items: stretch !important;
}

body.landing-page .pricing-card {
  position: relative !important;
  isolation: isolate !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0.85rem !important;
  min-height: 100% !important;
  padding: 1.15rem !important;
  border-radius: 24px !important;
  border: 1px solid rgba(148, 163, 184, 0.32) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.018)),
    radial-gradient(circle at top left, rgba(148, 163, 184, 0.14), transparent 46%),
    rgba(15, 23, 42, 0.78) !important;
  color: var(--text-muted) !important;
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.26) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  overflow: hidden !important;
}

body.landing-page .pricing-card::before {
  content: "" !important;
  position: absolute !important;
  inset-inline: 1rem !important;
  top: 0 !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.62), transparent) !important;
}

body.landing-page .pricing-card-pro {
  border-color: rgba(234, 179, 8, 0.58) !important;
  background:
    linear-gradient(180deg, rgba(250, 204, 21, 0.12), rgba(255, 255, 255, 0.02)),
    radial-gradient(circle at top right, rgba(234, 179, 8, 0.22), transparent 46%),
    rgba(15, 23, 42, 0.86) !important;
}

body.landing-page .pricing-card-pro::before {
  background: linear-gradient(90deg, transparent, var(--accent-strong), transparent) !important;
}

body.landing-page .pricing-card .template-badge {
  width: fit-content !important;
  min-height: 28px !important;
  padding: 0.25rem 0.65rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(148, 163, 184, 0.38) !important;
  background: rgba(15, 23, 42, 0.72) !important;
  color: var(--text-soft) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.38rem !important;
  font-size: 0.7rem !important;
  font-weight: 800 !important;
}

body.landing-page .pricing-card-pro .template-badge {
  border-color: rgba(234, 179, 8, 0.5) !important;
  background: linear-gradient(135deg, #facc15, #a67c00) !important;
  color: #020617 !important;
  box-shadow: 0 10px 26px rgba(234, 179, 8, 0.18) !important;
}

body.landing-page .pricing-title {
  margin: 0 !important;
  color: var(--text-main) !important;
  font-size: clamp(1.02rem, 2vw, 1.2rem) !important;
  line-height: 1.35 !important;
  font-weight: 900 !important;
}

body.landing-page .pricing-price {
  width: fit-content !important;
  margin: -0.15rem 0 0.1rem !important;
  padding: 0.22rem 0.72rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(234, 179, 8, 0.28) !important;
  background: rgba(234, 179, 8, 0.08) !important;
  color: var(--accent-strong) !important;
  font-size: 1.25rem !important;
  line-height: 1.35 !important;
  font-weight: 900 !important;
}

body.landing-page .pricing-card ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: grid !important;
  gap: 0.55rem !important;
}

body.landing-page .pricing-card li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.55rem !important;
  padding: 0.6rem 0.65rem !important;
  border-radius: 14px !important;
  background: rgba(2, 6, 23, 0.34) !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  color: var(--text-muted) !important;
}

body.landing-page .pricing-card li i {
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
  margin-top: 0.05rem !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(34, 197, 94, 0.13) !important;
  color: #4ade80 !important;
  font-size: 0.72rem !important;
}

body.landing-page .pricing-card-pro li i {
  background: rgba(250, 204, 21, 0.15) !important;
  color: #facc15 !important;
}

body.landing-page .pricing-card .btn-outline-small,
body.landing-page .pricing-card .btn-primary {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 46px !important;
  margin-top: auto !important;
  padding: 0.7rem 1rem !important;
  font-size: 0.86rem !important;
  justify-content: center !important;
}

@media (max-width: 768px) {
  body.landing-page .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 0.9rem !important;
  }

  body.landing-page .pricing-card {
    padding: 1rem !important;
    border-radius: 22px !important;
  }
}