/* GLOBAL BTN */
.btn{ padding:10px 18px; border-radius:12px; border:1px solid var(--ui-border); background:#fff; color:var(--ui-text); cursor:pointer; display:inline-flex; align-items:center; gap:6px; text-decoration:none; font-weight:600; }
.btn.primary{ background: var(--ui-primary); color:#fff; border-color:#111827; }
.btn:hover{ opacity: .92; }


/* Light UI overrides to match the clean Arabic layout */
:root{
  --ui-bg:#ffffff;
  --ui-text:#0f172a;
  --ui-muted:#6b7280;
  --ui-border:#e5e7eb;
  --ui-soft:#f3f4f6;
  --ui-primary:#0f172a;
  --ui-primary-contrast:#ffffff;
}

body{ background: var(--ui-bg); color: var(--ui-text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; }

.container{ max-width: 1100px; margin:0 auto; padding:24px; }

/* cards */
.cv-card{
  background:#fff;
  border:1px solid var(--ui-border);
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.04);
}

/* grid */
.cv-grid{ display:grid; grid-template-columns: 1fr; gap:20px; }
@media(min-width: 980px){ .cv-grid{ grid-template-columns: 1.1fr 0.9fr; } }

/* inputs */
.cv-input, textarea{
  width:100%;
  background:#fff;
  color:var(--ui-text);
  border:1px solid var(--ui-border);
  border-radius: 14px;
  padding:12px 14px;
}
.cv-input:focus, textarea:focus{ outline: 3px solid #11182722; border-color:#111827; }

/* buttons */
.cv-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
.cv-btn{
  border:1px solid var(--ui-border);
  background:#fff;
  color:var(--ui-text);
  padding:10px 16px;
  border-radius:14px;
  cursor:pointer;
}
.cv-btn.primary{ background: var(--ui-primary); color: var(--ui-primary-contrast); border-color:#111827; }
.cv-btn.warn{ background:#fff5f5; color:#7f1d1d; border-color:#fecaca; }
.cv-badge{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--ui-border); padding:6px 12px; border-radius:999px;
  color:var(--ui-text);
}
.cv-score{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px; border-radius:14px; border:1px solid var(--ui-border); background:#fff; }
.cv-score .value{ font-size: 32px; font-weight:800; }

.cv-list{ list-style:none; margin:0; padding:0; }
.cv-list li{ padding:8px 0; border-bottom:1px dashed var(--ui-border); color:var(--ui-text); }
.cv-list li:last-child{ border-bottom:0; }

.cv-cta{ margin-top: 14px; display:flex; flex-direction: column; gap:10px; background:#fff; border:1px solid var(--ui-border); padding:14px; border-radius:14px; }

.notice{ color:#92400e; background:#fff7ed; border:1px solid #fed7aa; padding:10px 12px; border-radius:12px; }
.error{ color:#7f1d1d; background:#fef2f2; border:1px solid #fecaca; padding:10px 12px; border-radius:12px; }

/* hero section */
.hero{ text-align:center; margin: 30px auto 10px; }
.hero .icon{ font-size: 34px; }
.hero h1{ margin: 16px 0 6px; font-weight:800; }
.hero p{ margin: 0 auto 14px; color: var(--ui-muted); }
.hero .cta{ display:inline-flex; gap:10px; margin-top:6px; }
.hero .cta .btn{ padding:10px 18px; border-radius:12px; border:1px solid var(--ui-border); background:#fff; color:var(--ui-text); cursor:pointer; }
.hero .cta .btn.primary{ background: var(--ui-primary); color:#fff; border-color:#111827; }

/* features row */
.features{ display:grid; grid-template-columns: 1fr; gap:16px; margin: 24px auto; }
@media(min-width: 980px){ .features{ grid-template-columns: repeat(3,1fr); } }
.feature{ background:#fff; border:1px solid var(--ui-border); border-radius:18px; padding:18px; }
.feature h3{ margin:0 0 8px; font-weight:800; }
.feature p{ margin:0; color: var(--ui-muted); }

/* section title */
.section-title{ font-size: 24px; font-weight:900; margin: 22px 0 10px; }

/* RTL */
body.rtl{ direction: rtl; }


/* Hero logo */
.hero .logo { display:flex; justify-content:center; align-items:center; margin-top:8px; }
.hero .logo .custom-logo-link { display:inline-flex; }
.hero .logo img.custom-logo { width:72px; height:auto; border-radius:12px; display:block; }
@media (min-width: 980px){ .hero .logo img.custom-logo { width:84px; } }