body {
  margin: 0;
  background: rgba(240,248,255,0.05);
  background: oklch(0.97 0.004 240);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
}
a { color: rgba(14,116,144,0.05); color: oklch(0.5 0.14 220); }
a:hover { color: rgba(8,80,99,0.05); color: oklch(0.4 0.14 220); }

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* ── RTL layout ── */
html[dir="rtl"] body { 
  font-family: 'Noto Sans Arabic', sans-serif; 
}

/* Override Tailwind's tracking utilities to prevent cursive disconnection */
html[lang="ar"] *, 
html[lang="ckb"] * {
  letter-spacing: normal !important; 
}

html[lang="ar"] .ar-text,
html[lang="ckb"] .ku-text { 
  font-size: calc(1em + 1px); 
}

/* ── Language visibility ── */
.ar-text { display: none; }
.ku-text { display: none; }
.en-text { display: inline; }
html[lang="ar"]  .ar-text { display: inline; }
html[lang="ar"]  .en-text { display: none; }
html[lang="ar"]  .ku-text { display: none; }
html[lang="ckb"] .ku-text { display: inline; }
html[lang="ckb"] .en-text { display: none; }
html[lang="ckb"] .ar-text { display: none; }

/* ── Lang dropdown ── */
.lang-toggle {
  display: flex; align-items: center; gap: 4px;
  background: rgba(14,116,144,0.12);
  border: 1px solid rgba(14,116,144,0.25);
  border-radius: 999px; padding: 4px 10px;
  font-size: 15px; font-weight: 600; cursor: pointer;
  color: #0e7490; transition: background 0.2s;
  white-space: nowrap;
}
.lang-toggle:hover { background: rgba(14,116,144,0.2); }

@keyframes subtleShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.anim-line-1 {
  display: inline-block;
  opacity: 0;
  animation: fadeUp 1.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

.anim-line-2 {
  display: block;
  opacity: 0;
  animation: 
    fadeUp 2.4s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards,
    subtleShimmer 6s ease infinite;
}

/* ── Panel/package cards: keep sub-rows level across a grid row,
   regardless of how long titles/subtitles/bullets are ── */
.test-card {
  height: 100%;
  box-sizing: border-box;
}
.card-heading {
  min-height: 3.7rem; /* reserves space for a 2-line title + 1-2 line subtitle */
}
.card-features {
  flex: 1 1 auto;
  min-height: 5.5rem; /* reserves space for 2 bullets so price/button don't float to different rows */
}

/* Modal Backdrop */
#panel-modal {
  position: fixed; inset: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center;
  background: rgba(240, 249, 255, 0.15); 
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
#panel-modal.open {
  opacity: 1; pointer-events: auto;
}

/* Modal Sheet */
#modal-sheet {
  width: 92%; max-width: 480px; max-height: 85vh;
  background: #f4f7f9;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12);
  transform: translateY(32px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
}
#panel-modal.open #modal-sheet {
  transform: translateY(0) scale(1);
}

/* New combined top section for the modal */
.modal-top-section {
  position: relative;
  background: #ffffff;
  overflow: hidden;
  clip-path: inset(0 0 0 0);
  flex-shrink: 0;
  border-radius: 20px 20px 0 0;
  z-index: 10;
}

/* Move icon to the left and flip it for RTL languages */
html[dir="rtl"] #modal-header-bg {
  right: auto !important;
  left: -10px !important;
  transform: scaleX(-1);
}

/* Layout overrides */
.modal-header {
  padding: 24px 24px 8px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-shrink: 0;
}
.modal-close-btn {
  width: 32px; height: 32px; border-radius: 50%; background: #f8fafc; border: none; color: #64748b; font-size: 22px; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: background 0.2s;
}
.modal-close-btn:hover { background: #e2e8f0; }