/* unidash.food account deletion pages (2026-10-14): delete.html and delete-account.html.
   Loaded AFTER each page's own <style>, and only restyles: fonts, colours, corners, focus. It never
   changes what is shown or hidden (the flow's .hidden steps, its buttons and its messages), because
   App Review completes a deletion on this page. */

@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-latin-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Epilogue"; src: url("/assets/fonts/epilogue-latin-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Plex Arabic"; src: url("/assets/fonts/plex-arabic-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Plex Arabic"; src: url("/assets/fonts/plex-arabic-600.woff2") format("woff2"); font-weight: 500 600; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Plex Arabic"; src: url("/assets/fonts/plex-arabic-700.woff2") format("woff2"); font-weight: 700 900; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }

body {
  font-family: "Inter", "Plex Arabic", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background:
    radial-gradient(900px 420px at 50% -120px, rgba(21, 51, 191, 0.16), transparent 70%),
    #F8FAFC;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
body[dir="rtl"] { font-family: "Plex Arabic", "Inter", system-ui, "Segoe UI", Tahoma, sans-serif; }
.wrap { padding-top: 48px; }
.brand {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px;
  font: 700 0.92rem/1 "Epilogue", "Inter", sans-serif; letter-spacing: -0.02em;
  background: #1533BF; color: #fff; box-shadow: 0 10px 24px -12px rgba(21, 51, 191, 0.7);
}
.brand::before { content: ""; width: 22px; height: 22px; border-radius: 7px; background: #fff url("/brand/favicon.svg") center / 18px no-repeat; }
body[dir="rtl"] .brand { padding: 6px 6px 6px 12px; }
h1 { font-family: "Epilogue", "Inter", "Plex Arabic", sans-serif; font-size: clamp(1.7rem, 5vw, 2.2rem); letter-spacing: -0.035em; line-height: 1.15; margin-top: 4px; }
body[dir="rtl"] h1 { font-family: "Plex Arabic", sans-serif; letter-spacing: 0; line-height: 1.4; }
.card {
  border-radius: 20px; padding: 24px; border-color: rgba(17, 24, 39, 0.08);
  box-shadow: 0 1px 2px rgba(9, 26, 115, 0.05), 0 16px 40px -18px rgba(9, 26, 115, 0.22);
}
.steps { font-weight: 600; letter-spacing: 0.02em; color: #1533BF; }
input[type=email], input[type=password], input[type=text], textarea, select {
  border-radius: 12px; background: #F4F6FB; border-color: rgba(17, 24, 39, 0.12); padding: 13px 14px;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
input:focus, textarea:focus { outline: none; border-color: #1533BF; background: #fff; box-shadow: 0 0 0 4px rgba(21, 51, 191, 0.16); }
button { border-radius: 14px; padding: 14px 18px; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s, background 0.2s; }
button:not(:disabled):hover { transform: translateY(-1px); }
button:not(:disabled):active { transform: translateY(0) scale(0.99); }
.primary { background: #1533BF; box-shadow: 0 12px 26px -14px rgba(21, 51, 191, 0.8); }
.primary:not(:disabled):hover { background: #2747D9; }
.danger { box-shadow: 0 12px 26px -14px rgba(185, 28, 28, 0.8); }
.ghost { border-color: rgba(17, 24, 39, 0.14); }
.ghost:not(:disabled):hover { background: #E6EAFC; }
button:focus-visible, a:focus-visible, input[type=checkbox]:focus-visible { outline: 3px solid #8CA1FF; outline-offset: 3px; }
input[type=checkbox] { width: 18px; height: 18px; accent-color: #1533BF; }
.warn { border-radius: 12px; }
footer { border-color: rgba(17, 24, 39, 0.1); }

@media (prefers-color-scheme: dark) {
  body { background: radial-gradient(900px 420px at 50% -120px, rgba(140, 161, 255, 0.16), transparent 70%), #060B26; }
  .card { background: #0F1638; border-color: rgba(255, 255, 255, 0.09); box-shadow: 0 16px 40px -18px rgba(0, 0, 0, 0.6); }
  .steps { color: #8CA1FF; }
  input[type=email], input[type=password], input[type=text], textarea, select { background: #0B1230; border-color: rgba(255, 255, 255, 0.12); }
  input:focus, textarea:focus { background: #0B1230; border-color: #8CA1FF; box-shadow: 0 0 0 4px rgba(140, 161, 255, 0.2); }
  .ghost:not(:disabled):hover { background: #18215A; }
  footer { border-color: rgba(255, 255, 255, 0.1); }
}
@media (prefers-reduced-motion: reduce) { button { transition: none; } button:not(:disabled):hover, button:not(:disabled):active { transform: none; } }

/* delete.html fills its text from script that runs only once supabase-js has arrived from the CDN,
   so the empty heading and form painted first and then jumped down (CLS 0.31 before this restyle).
   Keep everything under the badge unpainted until the heading has its text. The animation shows it
   after 4 s whatever happens, so a failed script can never leave the page blank. */
.wrap:has(> h1:empty) > :not(.brand) { visibility: hidden; animation: ud-show 0s 4s forwards; }
@keyframes ud-show { to { visibility: visible; } }