:root {
    --career-purple: #4C2777;
}

/* ====== CARD BASE ====== */
.aj-card {
    position: relative;
    display: block;
    width: 100%;
    border-radius: 32px;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    min-height: 360px;
}

/* الخلفية */
.aj-card-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* ====== OVERLAY ====== */
.aj-card-overlay {
    position: absolute;
    inset: 0;
    background: rgba(76, 39, 119, 0);
    transition: background 0.35s ease;
    z-index: 1;
}

.aj-card:hover .aj-card-overlay {
    background: rgba(76, 39, 119, 0.92);
}

/* ====== BLOB (الحبة) ====== */
.aj-card-blob {
    position: absolute;
    bottom: 0;            /* ملتصق من تحت */
    width: 55%;           /* عرض الحبة */
    aspect-ratio: 3.4/2;  /* ارتفاع الحبة تلقائي */
    z-index: 2;
    pointer-events: none;
}

/* RTL = يمين */
html[dir="rtl"] .aj-card-blob,
body[dir="rtl"] .aj-card-blob,
[dir="rtl"] .aj-card-blob {
    right: -6px;          /* نزقها شوية لبرا عشان تلصق بالحافة بصرياً */
    left: auto;
    text-align: right;
}

/* LTR = يسار */
html[dir="ltr"] .aj-card-blob,
body[dir="ltr"] .aj-card-blob,
[dir="ltr"] .aj-card-blob {
    left: -6px;           /* نفس الفكرة في الإنجليزي */
    right: auto;
    text-align: left;
}

/* صورة الحبة */
.aj-blob-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: fill;
    transition: transform 0.35s ease, opacity 0.35s ease;
}

/* النص داخل الحبة */
.aj-blob-title-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: 1.4rem;
    text-align: center;
}

.aj-blob-title {
    margin: 0;
    /* font-size: 1.9rem; */
    font-weight: 200;
    line-height: 1.3;
    color: #f7f4ff;
}

/* حركة الحبة */
.aj-card:hover .aj-blob-img {
    transform: scale(1.45);
    opacity: 0;
}

.aj-card:hover .aj-blob-title {
    opacity: 0;
    transform: translateY(-8px);
    transition: 0.25s ease;
}

/* ====== HOVER CONTENT ====== */
.aj-card-hover {
    position: absolute;
    bottom: 1.8rem;
    inset-inline: 2rem;
    z-index: 3;

    opacity: 0;
    transform: translateY(12px);
    transition: opacity .32s ease, transform .32s ease;

    display: flex;
    flex-direction: column;
    gap: .7rem;
}

/* RTL – نخلي الاتجاه يمين والعناصر تاخد عرض كامل */
html[dir="rtl"] .aj-card-hover,
body[dir="rtl"] .aj-card-hover,
[dir="rtl"] .aj-card-hover {
    direction: rtl;
    text-align: right !important;
    align-items: stretch;
}

/* LTR – شمال */
html[dir="ltr"] .aj-card-hover,
body[dir="ltr"] .aj-card-hover,
[dir="ltr"] .aj-card-hover {
    direction: ltr;
    text-align: left !important;
    align-items: stretch;
}

/* العنوان والنص فقط ياخدوا عرض الكارت */
.aj-hover-title,
.aj-hover-text {
    width: 100%;
}

/* إظهار المحتوى عند الهوفر */
.aj-card:hover .aj-card-hover {
    opacity: 1;
    transform: translateY(0);
}

/* العنوان */
.aj-hover-title {
    margin: 0;
    font-size: 1.9rem;
    font-weight: 800;
    color: #f7f4ff;
}

/* نص الهوفر */
.aj-hover-text {
    margin: 0;
    font-size: 1rem;
    color: #f7f4ff;
    line-height: 1.7;
}

/* تأكيد إضافي لمحاذاة النص في RTL/LTR مع أولوية أعلى */
html[dir="rtl"] .aj-hover-title,
body[dir="rtl"] .aj-hover-title,
[dir="rtl"] .aj-hover-title,
html[dir="rtl"] .aj-hover-text,
body[dir="rtl"] .aj-hover-text,
[dir="rtl"] .aj-hover-text {
    text-align: right !important;
}

html[dir="ltr"] .aj-hover-title,
body[dir="ltr"] .aj-hover-title,
[dir="ltr"] .aj-hover-title,
html[dir="ltr"] .aj-hover-text,
body[dir="ltr"] .aj-hover-text,
[dir="ltr"] .aj-hover-text {
    text-align: left !important;
}

/* الزر */
.aj-hover-btn {
    margin-top: .4rem;
    padding: .6rem 2rem;
    border-radius: 999px;
    border: 2px solid #fff;
    color: #fff;
    background: transparent;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-weight: bold;
}

.aj-hover-btn:hover {
    background: #fff;
    color: var(--career-purple);
}
/* محاذاة الزر حسب اللغة */
html[dir="rtl"] .aj-hover-btn,
body[dir="rtl"] .aj-hover-btn,
[dir="rtl"] .aj-hover-btn {
    align-self: flex-end;   /* يمين */
}

html[dir="ltr"] .aj-hover-btn,
body[dir="ltr"] .aj-hover-btn,
[dir="ltr"] .aj-hover-btn {
    align-self: flex-start; /* شمال */
}




/* long section with shape  */


/* ========================= */
/* CTA SECTION (Main Wrapper) */
/* ========================= */
.aj-cta-section {
    position: relative;
    background: #4d2562; /* Purple Background */
    border-radius: 32px;
    padding: 3rem 3.5rem;
    overflow: hidden;
    margin-top: 2rem;
}

/* WHITE BLOB (right side in Arabic / left in English) */
.aj-cta-section::after {
    content: url('../imgs/financial-services.svg');
    /* content: url('https://www.aljfinance.com/themes/custom/aljuf/images/befor-cta-block.png'); */
    width: 100px;
    height: 100px;
    position: absolute;
    bottom: -5px;
    z-index: 2;
    scale: 1.2;
}

/* RTL — blob on RIGHT */
html[dir="rtl"] .aj-cta-section::after {
    right: 0;
    left: auto;
}

/* LTR — blob on LEFT */
html[dir="ltr"] .aj-cta-section::after {
    left: 0;
    right: auto;
}

/* TOP SHAPE (DIAMOND STYLE - matches design) */
.aj-cta-section::before {
    /* content: ""; */
    position: absolute;
    width: 180px;
    height: 180px;
    background: #a774d1;
    opacity: 0.45;
    border-radius: 40px;
    transform: rotate(25deg);
    top: 0;
    z-index: 1;
}

/* RTL — before shape on RIGHT */
html[dir="rtl"] .aj-cta-section::before {
    right: 260px;
    left: auto;
}

/* LTR — before shape on LEFT */
html[dir="ltr"] .aj-cta-section::before {
    left: 260px;
    right: auto;
}

/* CONTENT WRAPPER */
.aj-cta-content {
    text-align: center;
    position: relative;
    z-index: 5;
}

/* TITLE */
.aj-cta-title {
    font-size: 3rem;
    font-weight: 900;
    color: #fff;
    margin-bottom: 2rem;
    line-height: 1.3;
}
.aj-cta-des {
    font-size: 2rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 2rem;
    line-height: 1.3;
}



/* BUTTON */
/* =========================================================
   ALJ CTA BUTTON – Clean Brand Version
   ========================================================= */

.aj-cta-btn {
    --primary: #48BCCC;
    --secondary: #4d2d79;

    display: inline-flex;
    align-items: center;
    gap: 14px;

    padding: 14px 30px;
    border-radius: 999px;
    border: none;

    background-color: var(--primary);
    color: #ffffff;

    font-size: 15px;
    font-weight: 700;
    letter-spacing: .2px;

    cursor: pointer;
    position: relative;
    overflow: hidden;

    transition:
        transform .28s cubic-bezier(.2,.8,.2,1),
        box-shadow .28s ease,
        background-color .28s ease;
}

/* النص */
.aj-cta-text {
    white-space: nowrap;
}

/* الأيقونة */
.aj-cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .28s ease;
}

.aj-cta-icon svg {
    fill: #ffffff;
    transition: transform .28s ease;
}

/* Hover */
.aj-cta-btn:hover {
    transform: translateY(-3px);
    box-shadow:
        0 10px 26px rgba(0,0,0,.18),
        0 0 0 4px rgba(72,188,204,.25);
}

/* حركة السهم */
.aj-cta-btn:hover .aj-cta-icon {
    transform: translateX(6px);
}

/* Active */
.aj-cta-btn:active {
    transform: translateY(-1px) scale(.98);
    box-shadow: 0 6px 18px rgba(0,0,0,.22);
}

/* Focus – Accessibility */
.aj-cta-btn:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px #ffffff,
        0 0 0 6px rgba(72,188,204,.55);
}

/* =========================================================
   RTL / LTR
   ========================================================= */

/* عربي */
html[dir="rtl"] .aj-cta-btn {
    align-self: flex-end;
}

html[dir="rtl"] .aj-cta-icon svg {
    transform: rotate(180deg);
}

html[dir="rtl"] .aj-cta-btn:hover .aj-cta-icon {
    transform: translateX(-6px);
}

/* إنجليزي */
html[dir="ltr"] .aj-cta-btn {
    align-self: flex-start;
}

/* =========================================================
   Dark Mode
   ========================================================= */

[data-bs-theme="dark"] .aj-cta-btn {
    box-shadow:
        0 10px 30px rgba(0,0,0,.55),
        0 0 0 4px rgba(72,188,204,.30);
}




.aj-hover-details {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
    font-size: 1rem;
    line-height: 1.7;
    color: #f7f4ff;
}




/* ========================= */
/* UL Inside Card  */
/* ========================= */

.aj-hover-details li {
    display: flex;
    gap: .35rem;
    margin-bottom: .3rem;
}

.aj-hover-details .label {
    font-weight: 700;
}

.aj-hover-details .value {
    font-weight: 400;
    opacity: .95;
}

/* RTL */
[dir="rtl"] .aj-hover-details li {
    flex-direction: row-reverse;
    justify-content: flex-end;
}

/* LTR */
[dir="ltr"] .aj-hover-details li {
    flex-direction: row;
    justify-content: flex-start;
}



/* modal submit cv  */

/* =========================
   CV MODAL – ALJ (Global UI)
   Primary: #48BCCC
   Secondary: #4d2d79
   ========================= */

:root{
  --alj-primary: #48BCCC;
  --alj-secondary: #4d2d79;

  --aj-ink: #0f172a;
  --aj-muted: rgba(15, 23, 42, .68);

  --aj-card: #ffffff;
  --aj-border: rgba(15, 23, 42, .10);
  --aj-shadow: 0 18px 55px rgba(2, 6, 23, .18);

  --aj-radius: 18px;
}

/* bootstrap modal overlay tweak */
.aj-cv-modal .modal-dialog{ padding-inline: 12px; }
.aj-cv-modal .modal-content{ border: 0; }

.aj-cv-card{
  border-radius: var(--aj-radius);
  overflow: hidden;
  background: var(--aj-card);
  box-shadow: var(--aj-shadow);
}

/* Header like screenshot */
.aj-cv-head{
  display:flex;
  align-items:flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(15,23,42,.08);
  background: #fff;
}

.aj-cv-title{
  margin: 0;
  font-weight: 900;
  color: var(--aj-ink);
  font-size: 18px;
  line-height: 1.25;
}

.aj-cv-role{
  font-weight: 900;
  color: var(--alj-secondary);
}

.aj-cv-sub{
  margin: 6px 0 0;
  color: rgba(15,23,42,.55);
  font-size: 13px;
}

.aj-cv-x{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
  color: rgba(15,23,42,.75);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
}

.aj-cv-x:hover{
  transform: translateY(-1px);
  border-color: rgba(72,188,204,.45);
  color: var(--alj-secondary);
  box-shadow: 0 10px 22px rgba(2, 6, 23, .10), 0 0 0 6px rgba(72,188,204,.08);
}

.aj-cv-x span{
  font-size: 22px;
  line-height: 1;
  transform: translateY(-1px);
}

/* Body spacing */
.aj-cv-body{
  padding: 18px 20px 20px;
}

/* labels & inputs */
.aj-f-label{
  display:block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  color: rgba(15,23,42,.72);
}

.aj-f-input{
  width:100%;
  min-height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.12);
  background: #f8fcfd;
  padding: 12px 14px;
  font-size: 14px;
  color: var(--aj-ink);
  outline: none;
  transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}

.aj-f-input::placeholder{ color: rgba(15,23,42,.35); }

.aj-f-input:focus{
  border-color: rgba(72,188,204,.55);
  box-shadow: 0 0 0 6px rgba(72,188,204,.12);
}

.aj-f-textarea{
  min-height: 100px;
  resize: vertical;
}

/* Dropzone */
.aj-drop{
  position: relative;
  border-radius: 14px;
  border: 2px dashed rgba(15,23,42,.16);
  background: rgba(72,188,204,.04);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}

.aj-drop-input{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  opacity:0;
  cursor:pointer;
}

.aj-drop-inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 14px;
  padding: 18px 16px;
  text-align: center;
}

.aj-drop-ic{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(77,45,121,.08);
  color: var(--alj-secondary);
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}

.aj-drop-txt{ display:flex; flex-direction:column; gap: 4px; }
.aj-drop-main{
  font-weight: 800;
  color: rgba(15,23,42,.72);
  font-size: 14px;
}
.aj-drop-sub{
  color: rgba(15,23,42,.45);
  font-size: 12.5px;
}

.aj-drop-file{
  margin-top: 6px;
  font-size: 13px;
  font-weight: 800;
  color: var(--alj-secondary);
}

.aj-drop.is-over{
  border-color: rgba(72,188,204,.70);
  background: rgba(72,188,204,.07);
  box-shadow: 0 0 0 6px rgba(72,188,204,.12);
  transform: translateY(-1px);
}
.aj-drop.is-over .aj-drop-ic{
  transform: translateY(-1px);
  background: rgba(72,188,204,.14);
  color: var(--alj-primary);
}

.aj-drop.is-has-file{
  border-style: solid;
  border-color: rgba(72,188,204,.55);
  background: rgba(72,188,204,.06);
}
.aj-drop.is-has-file .aj-drop-main{ color: rgba(15,23,42,.72); }

/* Errors */
.aj-drop-err{
  margin-top: 10px;
  font-size: 13px;
  font-weight: 700;
  color: #b91c1c;
}

/* Footer CTA like screenshot */
.aj-cv-foot{
  margin-top: 16px;
  display:flex;
  justify-content: flex-end;
}

.aj-cv-submit{
  width: min(100%, 360px);
  min-height: 52px;
  border-radius: 999px;
  border: 0;
  background: var(--alj-secondary);
  color: #fff;
  font-weight: 900;
  letter-spacing: .2px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;

  box-shadow: 0 14px 30px rgba(77,45,121,.28);
  cursor:pointer;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.aj-cv-submit:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(77,45,121,.34);
  filter: brightness(1.03);
}

.aj-cv-submit:active{ transform: translateY(0); }

.aj-cv-submit-ic{
  display:inline-flex;
  transition: transform .18s ease;
}
.aj-cv-submit:hover .aj-cv-submit-ic{
  transform: translateX(3px);
}

/* RTL arrow direction */
html[dir="rtl"] .aj-cv-submit:hover .aj-cv-submit-ic{
  transform: translateX(-3px);
}

/* Responsive */
@media (max-width: 575.98px){
  .aj-cv-head{ padding: 16px 16px; }
  .aj-cv-body{ padding: 16px 16px 18px; }
  .aj-cv-foot{ justify-content: stretch; }
  .aj-cv-submit{ width: 100%; }
}

/* =========================
   DARK MODE
   ========================= */
[data-bs-theme="dark"] .aj-cv-card{
  background: rgba(15, 23, 42, .96);
  box-shadow: 0 22px 70px rgba(0,0,0,.70);
}

[data-bs-theme="dark"] .aj-cv-head{
  background: rgba(2, 6, 23, .40);
  border-bottom-color: rgba(148,163,184,.18);
}

[data-bs-theme="dark"] .aj-cv-title{ color: rgba(255,255,255,.92); }
[data-bs-theme="dark"] .aj-cv-sub{ color: rgba(226,232,240,.68); }

[data-bs-theme="dark"] .aj-cv-x{
  background: rgba(255,255,255,.06);
  border-color: rgba(148,163,184,.18);
  color: rgba(255,255,255,.85);
}

[data-bs-theme="dark"] .aj-f-label{ color: rgba(226,232,240,.75); }

[data-bs-theme="dark"] .aj-f-input{
  background: rgba(2, 6, 23, .30);
  border-color: rgba(148,163,184,.22);
  color: rgba(255,255,255,.92);
}

[data-bs-theme="dark"] .aj-f-input::placeholder{ color: rgba(226,232,240,.35); }

[data-bs-theme="dark"] .aj-f-input:focus{
  border-color: rgba(72,188,204,.65);
  box-shadow: 0 0 0 6px rgba(72,188,204,.14);
}

[data-bs-theme="dark"] .aj-drop{
  border-color: rgba(148,163,184,.22);
  background: rgba(72,188,204,.06);
}

[data-bs-theme="dark"] .aj-drop-main{ color: rgba(226,232,240,.80); }
[data-bs-theme="dark"] .aj-drop-sub{ color: rgba(226,232,240,.60); }

[data-bs-theme="dark"] .aj-drop-ic{
  background: rgba(72,188,204,.10);
  color: rgba(255,255,255,.90);
}

[data-bs-theme="dark"] .aj-drop.is-over{
  border-color: rgba(72,188,204,.70);
  box-shadow: 0 0 0 6px rgba(72,188,204,.16);
}

[data-bs-theme="dark"] .aj-drop-file{ color: var(--alj-primary); }