/* ==========================================================================
   ElitJob · Modals
   Credits, payment, errors, processing and the sign-up soft gate.
   Markup order follows the approved popup mockups.
   ========================================================================== */

.ej-ovl {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(23, 35, 67, .55);
  backdrop-filter: blur(3px);
  opacity: 0; visibility: hidden;
  transition: opacity .26s ease, visibility .26s ease;
}
.ej-ovl.is-open { opacity: 1; visibility: visible; }

.ej-modal {
  position: relative;
  inline-size: 100%; max-inline-size: 440px;
  max-block-size: calc(100vh - 40px);
  overflow-y: auto;
  background: #fff;
  border-radius: var(--ej-r-lg);
  box-shadow: 0 30px 70px rgba(0, 12, 40, .35);
  padding: clamp(26px, 4vw, 38px) clamp(20px, 3.4vw, 34px) clamp(22px, 3vw, 30px);
  text-align: center;
  transform: translateY(16px) scale(.96);
  transition: transform .32s cubic-bezier(.2, .9, .3, 1);
}
.ej-ovl.is-open .ej-modal { transform: none; }
.ej-modal--wide { max-inline-size: 520px; }

/* One close button, identical in every popup: same glyph, same size,
   same corner. Nothing overrides it per-modal. */
.ej-modal__x {
  position: absolute; inset-block-start: 18px; inset-inline-end: 18px;
  inline-size: 34px; block-size: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: none; color: var(--ej-muted-2);
  transition: background-color .18s, color .18s;
}
.ej-modal__x:hover { background: rgba(23,35,67,.06); color: var(--ej-ink); }
.ej-modal__x:focus-visible { outline: 2px solid var(--ej-blue); outline-offset: 2px; }
.ej-modal__x svg { inline-size: 21px; block-size: 21px; }

/* the round icon badge at the top of every popup */
.ej-modal__ico {
  inline-size: 56px; block-size: 56px;
  margin: 0 auto 18px;
  border-radius: 15px;
  display: grid; place-items: center;
  color: #fff;
}
.ej-modal__ico svg { inline-size: 26px; block-size: 26px; }
.ej-modal__ico--blue   { background: var(--ej-blue); box-shadow: 0 10px 24px rgba(0,85,255,.28); }
.ej-modal__ico--amber  { background: var(--ej-amber); box-shadow: 0 10px 24px rgba(255,180,43,.34); }
.ej-modal__ico--green  { background: var(--ej-success); box-shadow: 0 10px 24px rgba(39,194,129,.3); }
.ej-modal__ico--red    { background: var(--ej-error); box-shadow: 0 10px 24px rgba(244,67,54,.28); }

.ej-modal h3 { font-size: clamp(1.25rem, 1.05rem + .7vw, 1.5rem); }
.ej-modal > p {
  margin-block-start: 10px;
  font-size: 14.5px; line-height: 1.62; color: var(--ej-text);
  max-width: 34ch; margin-inline: auto;
}
.ej-modal > p strong { color: var(--ej-ink); font-weight: 600; }
.ej-modal__actions { display: grid; gap: 4px; margin-block-start: 24px; }
.ej-modal__dismiss {
  font-size: 14px; font-weight: 600; color: var(--ej-blue);
  padding: 12px; border-radius: var(--ej-r-sm);
  transition: background-color .18s;
}
.ej-modal__dismiss:hover { background: var(--ej-blue-50); }
.ej-modal__fine { margin-block-start: 12px; font-size: 12px; color: var(--ej-muted-2); }
/* ---------- language switch inside the soft gate ---------- */
.ej-modal__langs {
  display: flex; gap: 4px;
  padding-block-end: 14px; margin-block-end: 20px;
  border-block-end: 1px solid var(--ej-line);
}
.ej-modal__langs button {
  font-size: 13px; font-weight: 700; color: var(--ej-muted);
  padding: 5px 10px; border-radius: var(--ej-r-xs);
}
.ej-modal__langs button[aria-pressed="true"] { color: var(--ej-blue); background: var(--ej-blue-50); }

/* ---------- processing state ---------- */
.ej-spin {
  display: block;
  inline-size: 56px; block-size: 56px; margin: 0 auto 18px;
  border-radius: 50%;
  border: 4px solid var(--ej-blue-100);
  border-block-start-color: var(--ej-blue);
  animation: ej-spin 1s linear infinite;
}
@keyframes ej-spin { to { transform: rotate(360deg); } }

.ej-prog {
  block-size: 6px; border-radius: 4px;
  background: var(--ej-line); overflow: hidden;
  margin-block-start: 22px;
}
.ej-prog i {
  display: block; block-size: 100%; inline-size: 30%;
  border-radius: 4px; background: var(--ej-blue);
  animation: ej-prog 1.5s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes ej-prog {
  0%   { inline-size: 8%;  transform: translateX(-10%); }
  50%  { inline-size: 62%; }
  100% { inline-size: 8%;  transform: translateX(360%); }
}
[dir="rtl"] .ej-prog i { animation-name: ej-prog-rtl; }
@keyframes ej-prog-rtl {
  0%   { inline-size: 8%;  transform: translateX(10%); }
  50%  { inline-size: 62%; }
  100% { inline-size: 8%;  transform: translateX(-360%); }
}

/* ---------- success ---------- */
.ej-tick {
  inline-size: 56px; block-size: 56px; margin: 0 auto 18px;
  border-radius: 50%; background: var(--ej-success);
  display: grid; place-items: center; color: #fff;
  animation: ej-tick-in .5s cubic-bezier(.2,.9,.3,1) both;
}
.ej-tick svg { inline-size: 28px; block-size: 28px; }
@keyframes ej-tick-in {
  from { transform: scale(.5); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ej-modal { transform: none; }
  .ej-spin, .ej-prog i { animation: none; }
}

/* ==========================================================================
   LOG IN: phone-first, matching the supplied example.
   Soft grey body with a white cap at the top, oversized gem, uppercase CTA.
   ========================================================================== */
.ej-modal--login {
  padding: 0;
  overflow: hidden;
  background: var(--ej-soft);
}
.ej-modal--login__cap {
  background: #fff;
  block-size: 76px;
}
.ej-modal--login__body { padding: clamp(26px, 4vw, 42px) clamp(22px, 3.6vw, 40px) clamp(26px, 3.4vw, 36px); }

.ej-gem {
  display: block;
  inline-size: 132px; block-size: 108px;
  margin: 0 auto clamp(20px, 3vw, 30px);
}
.ej-gem__stone { animation: ej-gem-float 4.5s ease-in-out infinite; transform-origin: 66px 60px; }
@keyframes ej-gem-float {
  50% { transform: translateY(-5px) scale(1.02); }
}
.ej-gem__spark { animation: ej-gem-spark 2.6s ease-in-out infinite; }
.ej-gem__spark--b { animation-delay: .5s; }
.ej-gem__spark--c { animation-delay: 1.1s; }
@keyframes ej-gem-spark {
  0%, 100% { opacity: .35; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1.15); }
}

.ej-modal--login h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.8rem); }
.ej-modal--login > .ej-modal--login__body > p {
  margin-block-start: 12px;
  font-size: 15px; color: var(--ej-text);
  max-width: 34ch; margin-inline: auto;
}
.ej-phone {
  inline-size: 100%;
  margin-block-start: clamp(22px, 3vw, 30px);
  border: 1.5px solid var(--ej-line);
  border-radius: var(--ej-r-input);
  background: #fff;
  padding: 16px 18px;
  font-size: 15.5px;
  text-align: start;
  transition: border-color .18s, box-shadow .18s;
}
.ej-phone:focus { outline: none; border-color: var(--ej-blue); box-shadow: 0 0 0 4px var(--ej-blue-50); }
.ej-phone::placeholder { color: var(--ej-muted-2); }

.ej-modal--login .ej-btn--primary {
  margin-block-start: 14px;
  padding-block: 17px;
  font-size: 15.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
}
.ej-phone__err {
  margin-block-start: 8px; text-align: start;
  font-size: 12.5px; font-weight: 500; color: var(--ej-error);
}
.ej-phone.is-bad { border-color: var(--ej-error); }
.ej-phone.is-bad:focus { box-shadow: 0 0 0 4px var(--ej-error-bg); }

/* ---------- welcome to Premium ----------
   Same shell as the log-in popup: white cap, soft body, one amber CTA. */
.ej-modal--welcome .ej-modal--login__body { padding-block-end: clamp(30px, 4vw, 44px); }
.ej-modal--welcome h3 { margin-block-start: 4px; }
.ej-modal--welcome .ej-btn { margin-block-start: clamp(22px, 3vw, 30px); }

.ej-seal {
  position: relative; display: block;
  inline-size: 104px; block-size: 104px;
  margin: 0 auto clamp(18px, 2.6vw, 26px);
  color: var(--ej-amber);
  animation: ej-seal-in .5s cubic-bezier(.2,.9,.3,1) both;
}
.ej-seal__burst {
  inline-size: 100%; block-size: 100%;
  filter: drop-shadow(0 10px 22px rgba(255,180,43,.4));
}
.ej-seal__tick {
  position: absolute; inset: 0; margin: auto;
  inline-size: 42px; block-size: 42px;
  fill: none; stroke: #fff; stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
}
@keyframes ej-seal-in {
  from { transform: scale(.55) rotate(-25deg); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.ej-modal--login__join {
  margin-block-start: 20px;
  font-size: 14.5px; color: var(--ej-text);
}
.ej-modal--login__join a { color: var(--ej-blue); font-weight: 600; }
.ej-modal--login__join a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .ej-gem__stone, .ej-gem__spark, .ej-seal { animation: none; }
}