/*  premiumdomains.site — design layer
 *  Loaded LAST from pages/_document.js so it wins against Tailwind utilities.
 *  Scope: every rule is prefixed .pdx-* or a documented override; nothing global except tokens.
 *  Palette: midnight navy + sapphire, cyan accent, mint for "sell/hold" signals.
 */

:root{
  --pdx-ink:#0A1738;
  --pdx-ink-2:#17264B;
  --pdx-body:#41506B;
  --pdx-muted:#6B7A99;
  --pdx-line:#E2E8F2;
  --pdx-line-2:#EDF1F8;
  --pdx-bg:#F5F7FB;
  --pdx-card:#FFFFFF;
  --pdx-brand:#1F5BFF;
  --pdx-brand-700:#1447CC;
  --pdx-cyan:#22B8E6;
  --pdx-mint:#0E9F6E;
  --pdx-amber:#B45309;
  --pdx-shadow-sm:0 1px 2px rgba(10,23,56,.06),0 1px 3px rgba(10,23,56,.04);
  --pdx-shadow:0 10px 30px -12px rgba(10,23,56,.18),0 2px 6px rgba(10,23,56,.05);
  --pdx-shadow-lg:0 30px 60px -24px rgba(10,23,56,.28),0 6px 16px rgba(10,23,56,.07);
  --pdx-r-sm:10px; --pdx-r:14px; --pdx-r-lg:20px; --pdx-r-xl:28px;
  --pdx-wrap:1180px;
}

/* ---------- base ---------- */
html{-webkit-text-size-adjust:100%}
body{
  background:var(--pdx-bg) !important;
  color:var(--pdx-body);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-feature-settings:"cv02","cv03","cv04","ss01";
  -webkit-font-smoothing:antialiased;
}
body.pdx-ar{font-family:"Noto Kufi Arabic", Cairo, ui-sans-serif, system-ui, sans-serif}
h1,h2,h3,h4,.pdx-display{color:var(--pdx-ink);letter-spacing:-.02em}
h1{letter-spacing:-.03em}

/* ---------- header ---------- */
.pdx-head{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--pdx-line);
}
.pdx-head::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,var(--pdx-brand),var(--pdx-cyan) 55%,var(--pdx-mint));
  opacity:.9;
}
.pdx-head .pdx-wrap{display:flex;align-items:center;gap:18px;height:68px}
.pdx-wrap{width:100%;max-width:var(--pdx-wrap);margin:0 auto;padding:0 24px}

.pdx-brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.pdx-brand .pdx-mark{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(145deg,var(--pdx-brand),var(--pdx-brand-700));
  box-shadow:0 6px 14px -6px rgba(31,91,255,.7);
  color:#fff;font-weight:800;font-size:15px;letter-spacing:-.02em;
}
.pdx-brand .pdx-word{font-weight:750;font-size:16.5px;color:var(--pdx-ink);letter-spacing:-.02em;white-space:nowrap}
.pdx-brand .pdx-word b{color:var(--pdx-brand);font-weight:750}

.pdx-nav{display:flex;align-items:center;gap:2px;flex:1 1 auto;min-width:0;overflow:hidden}
.pdx-nav a{
  display:inline-flex;align-items:center;height:34px;padding:0 12px;border-radius:999px;
  font-size:14px;font-weight:520;color:var(--pdx-body);text-decoration:none;white-space:nowrap;
  transition:background .16s ease,color .16s ease;
}
.pdx-nav a:hover{background:#EEF3FF;color:var(--pdx-brand-700)}
.pdx-nav a[aria-current="page"]{background:#EEF3FF;color:var(--pdx-brand-700);font-weight:620}

.pdx-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex:0 0 auto}

/* buttons (override Tailwind where the markup already uses them) */
.pdx-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:40px;padding:0 18px;border-radius:11px;font-size:14px;font-weight:600;
  text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:transform .14s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
}
.pdx-btn-primary{
  background:linear-gradient(180deg,var(--pdx-brand),var(--pdx-brand-700));
  color:#fff;box-shadow:0 8px 20px -10px rgba(31,91,255,.75),inset 0 1px 0 rgba(255,255,255,.22);
}
.pdx-btn-primary:hover{transform:translateY(-1px);box-shadow:0 14px 26px -12px rgba(31,91,255,.85)}
.pdx-btn-ghost{background:#fff;color:var(--pdx-ink);border-color:var(--pdx-line)}
.pdx-btn-ghost:hover{background:#F7F9FF;border-color:#CFDAF0}
.pdx-btn-sell{background:var(--pdx-ink);color:#fff}
.pdx-btn-sell:hover{background:var(--pdx-brand);transform:translateY(-1px)}
.pdx-lang{
  display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 12px;border-radius:10px;
  background:#F2F5FB;border:1px solid var(--pdx-line);color:var(--pdx-ink);
  font-size:13.5px;font-weight:600;cursor:pointer;
}
.pdx-lang:hover{background:#E9EFFF;color:var(--pdx-brand-700)}

/* ---------- page shell for auth screens (login / register / activate) ---------- */
.pdx-auth{
  position:relative;
  min-height:calc(100vh - 68px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:0;align-items:stretch;
  background:
    radial-gradient(1100px 520px at 8% -8%, #E8F0FF 0%, rgba(232,240,255,0) 62%),
    radial-gradient(900px 520px at 100% 0%, #E6FBFF 0%, rgba(230,251,255,0) 58%),
    var(--pdx-bg);
}
.pdx-auth .pdx-auth-form{
  display:flex;align-items:center;justify-content:center;
  padding:56px 40px;
}
.pdx-auth-card{
  width:100%;max-width:420px;background:var(--pdx-card);
  border:1px solid var(--pdx-line);border-radius:var(--pdx-r-xl);
  box-shadow:var(--pdx-shadow-lg);padding:34px 32px 30px;position:relative;overflow:hidden;
}
.pdx-auth-card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,var(--pdx-brand),var(--pdx-cyan) 55%,var(--pdx-mint));
}
.pdx-auth-card h1{font-size:26px;line-height:1.22;margin:0 0 8px;font-weight:780}
.pdx-auth-card .pdx-sub{font-size:14.5px;color:var(--pdx-muted);line-height:1.6;margin:0 0 24px}

.pdx-field{margin-bottom:16px}
.pdx-field label{display:block;font-size:13px;font-weight:600;color:var(--pdx-ink-2);margin-bottom:6px}
.pdx-input{
  width:100% !important;height:46px;padding:0 14px !important;font-size:14.5px;
  color:var(--pdx-ink) !important;background:#FBFCFE !important;
  border:1.5px solid var(--pdx-line) !important;border-radius:12px !important;
  box-shadow:var(--pdx-shadow-sm);outline:none;transition:border-color .16s,box-shadow .16s,background .16s;
}
.pdx-input::placeholder{color:#9AA7BD}
.pdx-input:focus{
  background:#fff !important;border-color:#9FB8FF !important;
  box-shadow:0 0 0 4px rgba(31,91,255,.14) !important;
}
.pdx-submit{
  width:100%;height:48px;margin-top:6px;border:0;border-radius:12px;cursor:pointer;
  font-size:15px;font-weight:650;color:#fff;
  background:linear-gradient(180deg,var(--pdx-brand),var(--pdx-brand-700));
  box-shadow:0 12px 26px -14px rgba(31,91,255,.9),inset 0 1px 0 rgba(255,255,255,.22);
  transition:transform .14s ease,box-shadow .18s ease,filter .18s;
}
.pdx-submit:hover{transform:translateY(-1px);box-shadow:0 18px 32px -16px rgba(31,91,255,1)}
.pdx-submit:disabled{filter:grayscale(.15) brightness(.92);cursor:progress;transform:none}
.pdx-auth-foot{margin-top:20px;padding-top:18px;border-top:1px dashed var(--pdx-line);font-size:13.5px;color:var(--pdx-muted);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pdx-auth-foot a{color:var(--pdx-brand-700);font-weight:600;text-decoration:none}
.pdx-auth-foot a:hover{text-decoration:underline}

/* the marketing half of the auth screen */
.pdx-auth .pdx-auth-side{
  position:relative;overflow:hidden;
  background:
    radial-gradient(900px 600px at 80% 10%, #1B3A8C 0%, rgba(27,58,140,0) 60%),
    radial-gradient(700px 500px at 10% 90%, #0B6E8C 0%, rgba(11,110,140,0) 60%),
    linear-gradient(160deg,#0A1738 0%,#0C1F4B 52%,#0A1738 100%);
  display:flex;flex-direction:column;justify-content:center;padding:56px 52px;color:#DCE6FA;
}
.pdx-auth .pdx-auth-side::before{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.13) 1px,transparent 1px);
  background-size:22px 22px;opacity:.5;mask-image:linear-gradient(180deg,#000,transparent 78%);
}
.pdx-auth .pdx-auth-side > *{position:relative}
.pdx-auth-side .pdx-eyebrow{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  height:28px;padding:0 12px;border-radius:999px;font-size:12px;font-weight:650;letter-spacing:.03em;
  text-transform:uppercase;color:#BFE9FF;background:rgba(34,184,230,.14);
  border:1px solid rgba(34,184,230,.35);
}
.pdx-auth-side h2{color:#fff;font-size:30px;line-height:1.2;margin:18px 0 10px;max-width:15ch}
.pdx-auth-side p{color:#A9BBDD;font-size:14.5px;line-height:1.7;max-width:38ch;margin:0 0 26px}
.pdx-feat{display:grid;gap:12px}
.pdx-feat div{
  display:flex;gap:12px;align-items:flex-start;padding:13px 15px;border-radius:14px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);
  backdrop-filter:blur(6px);font-size:13.6px;line-height:1.55;color:#CBD8F2;
}
.pdx-feat b{color:#fff;font-weight:640}
.pdx-feat i{
  flex:0 0 auto;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  background:rgba(34,184,230,.18);color:#8FE3FF;font-style:normal;font-size:13px;font-weight:700;
}

/* ---------- cards / tables / KPI used inside the app ---------- */
.pdx-card{background:var(--pdx-card);border:1px solid var(--pdx-line);border-radius:var(--pdx-r-lg);box-shadow:var(--pdx-shadow)}
.pdx-kpi{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.pdx-kpi > *{
  background:var(--pdx-card);border:1px solid var(--pdx-line);border-radius:var(--pdx-r-lg);
  padding:18px 20px;box-shadow:var(--pdx-shadow-sm);transition:transform .16s,box-shadow .2s;
}
.pdx-kpi > *:hover{transform:translateY(-2px);box-shadow:var(--pdx-shadow)}
table{font-variant-numeric:tabular-nums}
thead th{color:var(--pdx-muted);font-size:12px;text-transform:uppercase;letter-spacing:.06em;font-weight:650}
tbody tr{transition:background .14s}
tbody tr:hover{background:#F8FAFF}
.pdx-chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;font-size:12px;font-weight:620}
.pdx-chip-blue{background:#EAF1FF;color:var(--pdx-brand-700)}
.pdx-chip-mint{background:#E6F7F0;color:var(--pdx-mint)}
.pdx-chip-amber{background:#FEF3E2;color:var(--pdx-amber)}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .pdx-nav{gap:0}
  .pdx-nav a{padding:0 9px;font-size:13.5px}
}
@media (max-width:900px){
  .pdx-auth{grid-template-columns:1fr}
  .pdx-auth .pdx-auth-side{display:none}
  .pdx-auth .pdx-auth-form{padding:34px 18px 44px}
  .pdx-nav{display:none}
}
@media (max-width:640px){
  .pdx-head .pdx-wrap{height:60px;padding:0 16px}
  .pdx-brand .pdx-word{display:none}
  .pdx-auth-card{padding:26px 20px;border-radius:22px}
  .pdx-auth-card h1{font-size:22px}
}

/* RTL: keep the mirrored flow honest */
body.pdx-ar .pdx-actions{margin-left:0;margin-right:auto}

/* ---------- login: the AuthLanding half plays the marketing panel ---------- */
.pdx-auth.pdx-auth-login{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}
.pdx-auth-side-host{position:relative;min-width:0;display:flex;align-items:center}
.pdx-auth-side-host > *{width:100%;height:100%}
@media (max-width:900px){
  .pdx-auth.pdx-auth-login{grid-template-columns:1fr}
  .pdx-auth-side-host{display:none}
}

/* focus rings for keyboard users everywhere in the app */
:where(a,button,input,select,textarea):focus-visible{outline:2px solid var(--pdx-brand);outline-offset:2px}