/* ============================================================
   cv.clickdz.ai — RESUME TEMPLATE ENGINE
   .cv-root is A4 width (794px @96dpi). Driven by CSS vars:
   --accent, --accent-soft, --ink, --font (body), --head (headings).
   Layout via [data-layout], headings via [data-head], header via [data-hdr].
   Per-template signatures via [data-template="..."].
   Full RTL: everything uses logical properties; works under dir="rtl".
   ============================================================ */
.cv-root{
  --accent:#2D8CEB; --accent-soft:#e8f1fd; --ink:#1c2533; --sub:#5a6b85;
  --line:#e3e8f0; --font:"Inter"; --head:"Inter"; --page:#ffffff;
  width:794px; min-height:1123px; background:var(--page); color:var(--ink);
  font-family:var(--font),system-ui,"Cairo",sans-serif; font-size:13.6px; line-height:1.5;
  position:relative; overflow:hidden;
}
.cv-root *{box-sizing:border-box}
.cv-root h1,.cv-root h2,.cv-root h3{font-family:var(--head),var(--font),"Cairo",sans-serif;margin:0}
.cv-page{padding:46px 50px;min-height:1123px}
.cv-name{font-size:33px;font-weight:800;letter-spacing:-.01em;line-height:1.05;color:var(--ink)}
.cv-title{font-size:15.5px;font-weight:600;color:var(--accent);margin-top:5px;letter-spacing:.2px}
.cv-contact{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.3px;color:var(--sub);margin-top:12px}
.cv-contact .ci{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.cv-contact .ci svg{width:13px;height:13px;flex:none;opacity:.85;color:var(--accent)}
.cv-photo img{width:96px;height:96px;border-radius:50%;object-fit:cover;border:3px solid var(--accent)}

/* sections */
.cv-section{margin-top:20px;break-inside:avoid}
.cv-section:first-child{margin-top:0}
.cv-sec-title{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.13em;color:var(--ink);
  margin-bottom:10px;display:flex;align-items:center;gap:9px}
.cv-summary{font-size:13.4px;color:var(--ink);line-height:1.6}
.cv-entry{margin-bottom:13px;break-inside:avoid}
.cv-entry:last-child{margin-bottom:0}
.cv-entry .top{display:flex;justify-content:space-between;gap:12px;align-items:baseline}
.cv-entry .role{font-weight:700;font-size:14.2px;color:var(--ink)}
.cv-entry .org{font-weight:600;font-size:13.2px;color:var(--accent)}
.cv-entry .when{font-size:11.8px;color:var(--sub);white-space:nowrap;font-weight:600}
.cv-entry .place{font-size:11.8px;color:var(--sub)}
.cv-bullets{margin:6px 0 0;padding-inline-start:17px}
.cv-bullets li{margin-bottom:3px;font-size:12.7px;line-height:1.5}
.cv-chips{display:flex;flex-wrap:wrap;gap:7px}
.cv-chip{background:var(--accent-soft);color:var(--accent);border-radius:6px;padding:4px 10px;font-size:12px;font-weight:600}
.cv-skline{margin-bottom:8px}
.cv-skline .nm{font-size:12.6px;font-weight:600;display:flex;justify-content:space-between;margin-bottom:4px}
.cv-skline .nm small{color:var(--sub);font-weight:500}
.cv-meter{height:6px;background:var(--line);border-radius:99px;overflow:hidden}
.cv-meter i{display:block;height:100%;background:var(--accent);border-radius:99px}
.cv-langs .lang{display:flex;justify-content:space-between;font-size:12.6px;margin-bottom:5px}
.cv-langs .lang b{font-weight:600}.cv-langs .lang span{color:var(--sub)}
.cv-aside .cv-sec-title{color:inherit}

/* ===== LAYOUT: single (header on top, one column) ===== */
[data-layout="single"] .cv-head{margin-bottom:8px}
[data-layout="single"] .cv-head .hrow{display:flex;gap:22px;align-items:center}
[data-layout="single"] .cv-body{display:block}
[data-layout="single"] .cv-aside{display:flex;flex-wrap:wrap;gap:24px;margin-top:0}
[data-layout="single"] .cv-aside>.cv-section{flex:1;min-width:200px;margin-top:20px}

/* ===== LAYOUT: sidebar ===== */
[data-layout^="sidebar"] .cv-page{padding:0;display:flex;min-height:1123px}
[data-layout^="sidebar"] .cv-aside{width:262px;flex:none;background:var(--accent);color:#fff;padding:40px 28px}
[data-layout^="sidebar"] .cv-aside .cv-sec-title{color:#fff;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:6px}
[data-layout^="sidebar"] .cv-aside .cv-chip{background:rgba(255,255,255,.16);color:#fff}
[data-layout^="sidebar"] .cv-aside .cv-meter{background:rgba(255,255,255,.25)}
[data-layout^="sidebar"] .cv-aside .cv-meter i{background:#fff}
[data-layout^="sidebar"] .cv-aside .cv-contact{flex-direction:column;color:rgba(255,255,255,.92);gap:9px}
[data-layout^="sidebar"] .cv-aside .cv-contact .ci svg{color:#fff}
[data-layout^="sidebar"] .cv-aside .cv-langs .lang span{color:rgba(255,255,255,.8)}
[data-layout^="sidebar"] .cv-aside .cv-photo{display:flex;justify-content:center;margin-bottom:18px}
[data-layout^="sidebar"] .cv-aside .cv-photo img{width:120px;height:120px;border-color:rgba(255,255,255,.6)}
[data-layout^="sidebar"] .cv-main{flex:1;padding:40px 38px}
[data-layout^="sidebar"] .cv-main .cv-name{font-size:30px}
[data-layout="sidebar-right"] .cv-page{flex-direction:row-reverse}

/* ===== LAYOUT: banner (full-width colored header band) ===== */
[data-layout="banner"] .cv-page{padding:0}
[data-layout="banner"] .cv-head{background:var(--accent);color:#fff;padding:38px 50px;display:flex;align-items:center;gap:24px}
[data-layout="banner"] .cv-head .cv-name{color:#fff;font-size:34px}
[data-layout="banner"] .cv-head .cv-title{color:rgba(255,255,255,.92)}
[data-layout="banner"] .cv-head .cv-contact{color:rgba(255,255,255,.9)}
[data-layout="banner"] .cv-head .cv-contact .ci svg{color:#fff}
[data-layout="banner"] .cv-head .cv-photo img{border-color:rgba(255,255,255,.7)}
[data-layout="banner"] .cv-body{display:grid;grid-template-columns:1fr 1fr;gap:0;padding:34px 50px}
[data-layout="banner"] .cv-main{padding-inline-end:26px}
[data-layout="banner"] .cv-aside{padding-inline-start:26px;border-inline-start:1px solid var(--line)}
[data-layout="banner"] .cv-aside>.cv-section:first-child{margin-top:0}
[data-layout="banner"] .cv-main>.cv-section:first-child{margin-top:0}

/* ===== LAYOUT: timeline ===== */
[data-layout="timeline"] .cv-head{margin-bottom:14px}
[data-layout="timeline"] .cv-body{display:block}
[data-layout="timeline"] .cv-main .cv-entry{position:relative;padding-inline-start:22px;border-inline-start:2px solid var(--line);padding-bottom:6px}
[data-layout="timeline"] .cv-main .cv-entry:before{content:"";position:absolute;inset-inline-start:-6px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--accent)}
[data-layout="timeline"] .cv-aside{display:flex;flex-wrap:wrap;gap:24px}
[data-layout="timeline"] .cv-aside>.cv-section{flex:1;min-width:210px}

/* ===== COVER LETTER (reuses template accent / fonts / header vibe) ===== */
.cl-page{padding:54px 58px;min-height:1123px;display:flex;flex-direction:column}
.cl-head{margin-bottom:24px}
.cl-head .cv-name{font-size:30px}
.cl-head .cv-contact{margin-top:11px}
.cl-head--plain{border-bottom:2px solid var(--accent);padding-bottom:16px}
.cl-head--band{background:var(--accent);color:#fff;margin:-54px -58px 28px;padding:42px 58px}
.cl-head--band .cv-name,.cl-head--band .cv-title{color:#fff}
.cl-head--band .cv-contact{color:rgba(255,255,255,.92)}
.cl-head--band .cv-contact .ci svg{color:#fff}
.cl-head--center{text-align:center}
.cl-head--center .cv-contact{justify-content:center}
.cl-meta{font-size:12.6px;color:var(--sub);margin:2px 0 20px;text-align:end}
.cl-to{font-size:13px;line-height:1.55;margin-bottom:18px;color:var(--ink)}
.cl-subject{font-weight:700;color:var(--accent);font-family:var(--head),var(--font);margin-bottom:16px;font-size:14.5px}
.cl-greeting{font-size:13.6px;margin-bottom:12px;color:var(--ink)}
.cl-body{font-size:13.6px;line-height:1.75;color:var(--ink)}
.cl-body p{margin:0 0 12px}
.cl-close{margin-top:18px;font-size:13.6px;color:var(--ink)}
.cl-close .sig{font-weight:800;font-family:var(--head),var(--font);font-size:17px;margin-top:8px;color:var(--ink)}

/* ===== EMPTY-ASIDE GRACEFUL COLLAPSE =====
   When the user hasn't added any side content yet, sidebar/banner templates
   render as a clean single column instead of a big empty colored panel. */
[data-layout^="sidebar"] .cv-page--solo{display:block;padding:0}
[data-layout^="sidebar"] .cv-page--solo .cv-main{padding:46px 52px;flex:none}
[data-layout="banner"] .cv-body--solo{grid-template-columns:1fr}
[data-layout="banner"] .cv-body--solo .cv-main{padding-inline-end:0}
[data-layout="banner"] .cv-body--solo .cv-aside{display:none}

/* ===== HEADING STYLES ===== */
[data-head="underline"] .cv-main .cv-sec-title,[data-head="underline"] .cv-section .cv-sec-title{border-bottom:2px solid var(--accent);padding-bottom:6px}
[data-head="bar"] .cv-sec-title:before{content:"";width:18px;height:3px;background:var(--accent);border-radius:9px}
[data-head="block"] .cv-main .cv-sec-title{background:var(--accent-soft);color:var(--accent);padding:5px 10px;border-radius:6px;letter-spacing:.1em}
[data-head="side"] .cv-main .cv-sec-title{border-inline-start:4px solid var(--accent);padding-inline-start:10px}
[data-head="dot"] .cv-sec-title:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
[data-head="tracked"] .cv-sec-title{letter-spacing:.28em;font-weight:700;font-size:11.5px}
[data-head="plain"] .cv-sec-title{letter-spacing:.05em}

/* ===== HEADER VARIANTS ===== */
[data-hdr="center"] .cv-head{text-align:center}
[data-hdr="center"] .cv-head .hrow{flex-direction:column;align-items:center}
[data-hdr="center"] .cv-contact{justify-content:center}
[data-hdr="badge"] .cv-head .hrow:before{content:attr(data-initials);width:74px;height:74px;border-radius:18px;background:var(--accent);
  color:#fff;font-family:var(--head);font-weight:800;font-size:28px;display:flex;align-items:center;justify-content:center;flex:none}
[data-hdr="split"] .cv-head{border-bottom:3px solid var(--ink);padding-bottom:14px}
[data-hdr="rule"] .cv-head{border-bottom:1px solid var(--line);padding-bottom:16px}

/* ===== SIGNATURE TEMPLATE OVERRIDES ===== */
/* 03 Classic serif */
[data-template="classic"]{--font:"Source Serif 4";--head:"Playfair Display"}
[data-template="classic"] .cv-name{font-weight:800;letter-spacing:0}
[data-template="classic"] .cv-sec-title{font-weight:700}
/* 04 Elegant gold */
[data-template="elegant"]{--head:"Playfair Display"}
[data-template="elegant"] .cv-name{font-weight:800}
[data-template="elegant"] .cv-title{font-style:italic;font-family:var(--head)}
/* 05 Swiss grid — heavy left rule, helvetica feel */
[data-template="swiss"]{--font:"Inter";--head:"Inter"}
[data-template="swiss"] .cv-name{font-weight:900;text-transform:uppercase;letter-spacing:-.02em;font-size:36px}
/* 06 Mono / tech */
[data-template="tech"]{--font:"JetBrains Mono";--head:"JetBrains Mono"}
[data-template="tech"] .cv-name{font-weight:700;font-size:28px}
[data-template="tech"] .cv-sec-title:before{content:"// "}
[data-template="tech"] .cv-chip{border-radius:3px}
/* 07 Minimal — airy */
[data-template="minimal"] .cv-page{padding:54px 58px}
[data-template="minimal"] .cv-name{font-weight:600;letter-spacing:.02em}
[data-template="minimal"] .cv-title{color:var(--sub)}
/* 08 Bold header band already via banner */
/* 09 Corporate navy */
[data-template="corporate"]{--head:"Montserrat"}
/* 10 Designer — playful accent block */
[data-template="designer"] .cv-name{font-weight:900}
[data-template="designer"] .cv-title{display:inline-block;background:var(--accent);color:#fff;padding:3px 10px;border-radius:6px;margin-top:8px}
/* 11 Compact dense */
[data-template="compact"]{font-size:12.6px}
[data-template="compact"] .cv-page{padding:36px 44px}
[data-template="compact"] .cv-section{margin-top:14px}
[data-template="compact"] .cv-name{font-size:27px}
/* 12 Monochrome */
[data-template="mono"]{--accent:#111827;--accent-soft:#eceef1}
/* 13 Startup gradient name */
[data-template="startup"] .cv-name{background:linear-gradient(90deg,var(--accent),#9b5cff);-webkit-background-clip:text;background-clip:text;color:transparent}
/* 14 Academic */
[data-template="academic"]{--font:"Source Serif 4";--head:"Source Serif 4"}
[data-template="academic"] .cv-page{padding:50px 56px}
[data-template="academic"] .cv-name{font-weight:700;font-size:30px}
/* 15 Photo profile (round large) handled by layout */
/* 16 Infographic-lite: meters everywhere (handled by data) */
/* 17 Executive */
[data-template="executive"]{--head:"Playfair Display"}
[data-template="executive"] .cv-name{font-weight:800;font-size:35px}
[data-template="executive"] .cv-head{border-bottom:2px solid var(--accent)}
/* 18 Vibrant two-tone */
[data-template="vibrant"] .cv-sec-title{color:var(--accent)}
/* 19 ATS plain (no color blocks, print-safe) */
[data-template="ats"]{--accent:#222;--accent-soft:#f1f1f1}
[data-template="ats"] .cv-title{color:#333}
[data-template="ats"] .cv-chip{background:#f1f1f1;color:#222;border:1px solid #ddd}
[data-template="ats"] .cv-entry .org{color:#222}
/* 20 Slate sidebar dark */
[data-template="slate"] [data-layout]{}
[data-template="slate"] .cv-aside{background:#1f2937 !important}

/* credit footer on the CV */
.cv-credit{position:absolute;inset-inline:0;bottom:0;text-align:center;font-size:9.5px;color:#aab4c4;padding:8px 0;letter-spacing:.04em}
.cv-credit b{color:var(--accent)}

/* ===== RTL / ARABIC FIXES (apply to any CV rendered right-to-left) =====
   1) Force an Arabic-capable font everywhere (template --font/--head may be Latin-only).
   2) Kill letter-spacing/word-spacing — tracking breaks Arabic cursive joining.
   3) Normalize a few Latin-centric treatments. */
.cv-root[dir="rtl"], [dir="rtl"] .cv-root{
  font-family:"Cairo","Tajawal",sans-serif;
}
.cv-root[dir="rtl"] *{
  letter-spacing:normal !important;
  word-spacing:normal !important;
}
.cv-root[dir="rtl"] .cv-name,
.cv-root[dir="rtl"] .cv-title,
.cv-root[dir="rtl"] .cv-sec-title,
.cv-root[dir="rtl"] h1,
.cv-root[dir="rtl"] h2,
.cv-root[dir="rtl"] h3,
.cv-root[dir="rtl"] .role,
.cv-root[dir="rtl"] .org{
  font-family:"Cairo","Tajawal",sans-serif !important;
}
/* uppercase has no meaning in Arabic and can look off with some fonts */
.cv-root[dir="rtl"] .cv-name,
.cv-root[dir="rtl"] .cv-sec-title{ text-transform:none !important; }
.cv-root[dir="rtl"] .cv-entry .when{direction:ltr;unicode-bidi:isolate}
/* keep monospace prefixes from looking odd in Arabic */
.cv-root[dir="rtl"][data-template="tech"] .cv-sec-title:before{content:""}