/* ══════════════════════════════════════════════════════════════════════════════
   ACCOUNT DELETION — the Danger Zone and its confirmation walk.

   ADDITIVE ONLY. Every selector below is prefixed `adel-` or scoped inside
   `#ADEL`, so no existing rule on the platform changes by one pixel. The card
   deliberately does NOT reuse `.px-card`'s appearance: requirement 1 says the
   entry point must not look like a normal primary action, and the surest way to
   guarantee that is to give it its own surface rather than a variant of the one
   every other setting uses.

   RTL. Spacing and alignment use logical properties (`padding-inline`,
   `text-align:start`, `inset-inline`) throughout, so the Arabic rendering mirrors
   from the same rules rather than from a second stylesheet or a direction sniff —
   the approach the password-reveal control already established on this page.

   The palette is red, and only red. Gold is this platform's affirmative colour; a
   destructive step must never borrow it, or a customer scanning the page reads
   "Permanently Delete Account" as the same kind of button as "Save Preferences".
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── The Danger Zone card ────────────────────────────────────────────────────
   Separated from the settings stack above it by a rule and a wide margin, so it
   reads as a different region of the page and not as one more card. */
.adel-zone{
  margin-top:34px;padding-top:30px;border-top:1px solid rgba(239,68,68,.22);
}
.adel-card{
  border-radius:var(--r-lg,18px);padding:24px 26px;
  background:rgba(239,68,68,.045);border:1px solid rgba(239,68,68,.22);
}
.adel-card .adel-hd{display:flex;align-items:center;gap:11px;margin-bottom:9px;}
.adel-card .adel-hd svg{flex-shrink:0;color:#F87171;}
.adel-card h3{
  margin:0;font-size:14.5px;font-weight:700;letter-spacing:-.2px;color:#FCA5A5;
}
.adel-card p{
  margin:0;font-size:12.5px;line-height:1.75;color:rgba(242,239,232,.56);text-align:start;
}
.adel-card p + p{margin-top:10px;}
.adel-card .adel-foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:18px;
}
.adel-note{
  font-size:11.5px;line-height:1.7;color:rgba(242,239,232,.4);text-align:start;
}

/* The entry point. Outlined, never filled: a destructive action should require a
   deliberate read, and a solid red block competes for the eye with the page's
   primary actions. */
.adel-open{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  padding:9px 17px;border-radius:var(--r-sm,10px);
  font-size:12.5px;font-weight:600;font-family:inherit;
  background:transparent;border:1px solid rgba(239,68,68,.42);color:#FCA5A5;
  transition:background .18s ease,border-color .18s ease,color .18s ease;
}
.adel-open:hover{background:rgba(239,68,68,.13);border-color:rgba(239,68,68,.62);color:#FECACA;}
.adel-open:focus{outline:none;}
.adel-open:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(239,68,68,.2);}
.adel-open[disabled]{opacity:.5;pointer-events:none;}

/* A request already open. Shown in place of the button, because a second request
   is neither possible nor useful. */
.adel-state{
  border-radius:var(--r-sm,10px);padding:13px 15px;margin-top:16px;
  background:rgba(251,191,36,.07);border:1px solid rgba(251,191,36,.24);
  font-size:12.5px;line-height:1.7;color:#FDE68A;text-align:start;
}
.adel-state b{display:block;margin-bottom:4px;color:#FCD34D;}
.adel-state code{
  font-family:'JetBrains Mono',monospace;font-size:11px;
  color:rgba(242,239,232,.62);direction:ltr;unicode-bidi:embed;
}

/* ── The dialog ──────────────────────────────────────────────────────────────
   One overlay, four panes. The pane is swapped rather than the dialog reopened,
   so the customer's place in the walk survives a mistyped password. */
#ADEL{
  position:fixed;inset:0;z-index:9750;display:none;
  align-items:center;justify-content:center;padding:24px;
  background:rgba(4,5,8,.76);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
}
#ADEL.show{display:flex;}
.adel-box{
  width:100%;max-width:560px;max-height:calc(100vh - 48px);overflow-y:auto;
  border-radius:22px;padding:30px 32px;text-align:start;
  background:rgba(16,18,24,.97);border:1px solid rgba(239,68,68,.26);
  box-shadow:0 40px 100px rgba(0,0,0,.66);
}
.adel-box h3{
  margin:0 0 10px;font-size:19px;font-weight:700;letter-spacing:-.45px;color:#F2EFE8;
}
.adel-box p{margin:0 0 14px;font-size:13px;line-height:1.72;color:rgba(242,239,232,.6);}
.adel-box p.adel-lede{color:rgba(242,239,232,.74);}
.adel-ic{
  width:44px;height:44px;border-radius:13px;margin-bottom:17px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(239,68,68,.11);border:1px solid rgba(239,68,68,.26);color:#F87171;
}

/* Progress through the four steps. Numbers, not a bar: the customer needs to know
   how many deliberate acts remain, which is the point of the walk. */
.adel-steps{display:flex;gap:6px;margin-bottom:20px;}
.adel-steps i{
  flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.08);
  font-style:normal;transition:background .25s ease;
}
.adel-steps i.on{background:rgba(239,68,68,.66);}

/* The consequence lists. Three columns of meaning, not decoration: removed,
   anonymized, retained — rendered from what the server actually returns, so this
   screen cannot promise an erasure the policy does not perform. */
.adel-list{
  border-radius:var(--r-sm,12px);padding:14px 16px;margin-bottom:12px;
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.07);
}
.adel-list h4{
  margin:0 0 9px;font-size:10px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;
  font-family:'JetBrains Mono',monospace;color:rgba(242,239,232,.42);
}
.adel-list.red{border-color:rgba(239,68,68,.2);}
.adel-list.red h4{color:#FCA5A5;}
.adel-list.amber{border-color:rgba(251,191,36,.2);}
.adel-list.amber h4{color:#FCD34D;}
.adel-list.blue{border-color:rgba(76,125,240,.2);}
.adel-list.blue h4{color:#93B4FF;}
.adel-list ul{margin:0;padding:0;list-style:none;}
.adel-list li{
  position:relative;padding-inline-start:16px;margin-bottom:6px;
  font-size:12.5px;line-height:1.6;color:rgba(242,239,232,.62);
}
.adel-list li:last-child{margin-bottom:0;}
.adel-list li::before{
  content:'';position:absolute;inset-inline-start:2px;top:8px;
  width:5px;height:5px;border-radius:5px;background:rgba(242,239,232,.28);
}
.adel-list li b{color:rgba(242,239,232,.82);font-weight:600;}
.adel-list li span{display:block;font-size:11.5px;color:rgba(242,239,232,.4);margin-top:2px;}

/* The retention caveat. Requirement 3 forbids claiming every record is erased, so
   the statement that some records survive is given the same visual weight as the
   list of what does not. */
.adel-keep{
  border-radius:var(--r-sm,12px);padding:13px 15px;margin-bottom:16px;
  background:rgba(76,125,240,.06);border:1px solid rgba(76,125,240,.2);
  font-size:12px;line-height:1.7;color:rgba(242,239,232,.58);
}

.adel-field{margin-bottom:14px;}
.adel-field label{
  display:block;margin-bottom:7px;font-size:11.5px;font-weight:600;
  color:rgba(242,239,232,.6);text-align:start;
}
.adel-input{
  width:100%;box-sizing:border-box;padding:11px 14px;border-radius:var(--r-sm,10px);
  background:var(--c-surface,#111315);border:1px solid rgba(255,255,255,.1);
  color:var(--c-text,#F2EFE8);font-size:13.5px;font-family:inherit;outline:none;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.adel-input:focus{border-color:rgba(239,68,68,.5);box-shadow:0 0 0 4px rgba(239,68,68,.13);}
/* The confirmation phrase is a fixed Latin string in both languages, so the field
   stays left-to-right even when the page is mirrored — otherwise the caret jumps
   and the customer cannot see what they typed. */
.adel-input.phrase{
  font-family:'JetBrains Mono',monospace;letter-spacing:1.4px;text-transform:none;
  direction:ltr;text-align:start;
}
.adel-phrase-hint{
  margin-top:7px;font-size:11.5px;color:rgba(242,239,232,.42);text-align:start;
}
.adel-phrase-hint code{
  font-family:'JetBrains Mono',monospace;color:#FCA5A5;letter-spacing:1.2px;
  direction:ltr;unicode-bidi:embed;
}

.adel-err{
  display:none;border-radius:var(--r-sm,10px);padding:11px 14px;margin-bottom:14px;
  background:rgba(239,68,68,.09);border:1px solid rgba(239,68,68,.26);
  font-size:12.5px;line-height:1.65;color:#FCA5A5;text-align:start;
}
.adel-err.show{display:block;}

.adel-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;}
.adel-acts button{
  appearance:none;-webkit-appearance:none;cursor:pointer;font-family:inherit;
  padding:11px 20px;border-radius:var(--r-sm,10px);font-size:13px;font-weight:600;
  transition:background .18s ease,border-color .18s ease,opacity .18s ease;
}
.adel-acts button:focus{outline:none;}
.adel-acts button:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(239,68,68,.2);}
.adel-acts .adel-cancel{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);color:rgba(242,239,232,.75);
}
.adel-acts .adel-cancel:hover{background:rgba(255,255,255,.09);}
.adel-acts .adel-go{
  margin-inline-start:auto;
  background:rgba(239,68,68,.16);border:1px solid rgba(239,68,68,.45);color:#FCA5A5;
}
.adel-acts .adel-go:hover:not([disabled]){background:rgba(239,68,68,.26);border-color:rgba(239,68,68,.66);color:#FECACA;}
/* Disabled until the phrase matches exactly. The customer can see the destination
   the whole time; they simply cannot arrive at it by accident. */
.adel-acts .adel-go[disabled]{opacity:.4;cursor:not-allowed;}
.adel-acts button.busy{opacity:.6;pointer-events:none;}

.adel-done{text-align:center;padding:8px 0 4px;}
.adel-done .adel-ic{margin-inline:auto;}
.adel-done h3{text-align:center;}
.adel-done p{text-align:center;}

@media (max-width:520px){
  .adel-box{padding:24px 20px;border-radius:18px;}
  .adel-acts .adel-go{margin-inline-start:0;width:100%;}
  .adel-acts .adel-cancel{width:100%;}
}
@media (prefers-reduced-motion:reduce){
  .adel-open,.adel-acts button,.adel-steps i,.adel-input{transition:none;}
}