/* =========================================================
   Afnihi Design System — shared tokens & base components
   Used by: storefront, track page, client authorization form,
   signed PDF, admin panel. Do not fork these values.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  /* Color */
  --bg:#FFFFFF;
  --surface:#F6F7FB;
  --border:#E6E8F0;
  --ink:#0E1330;          /* headings */
  --text:#4A5070;         /* body */
  --muted:#8A90AB;
  --violet:#5B2EFF;       /* primary */
  --violet-600:#4A1FEB;
  --violet-50:#F1EDFF;
  --violet-100:#E3DAFF;
  --mint:#12C9A5;         /* success / removed */
  --mint-50:#E3F9F4;
  --mint-700:#0A8A71;
  --amber:#F5A524;        /* pending / warning (admin + form) */
  --amber-50:#FEF4E2;
  --amber-700:#A86A00;
  --red:#E5484D;          /* rejected / error */
  --red-50:#FDECEC;
  --gradient:linear-gradient(120deg,#5B2EFF 0%,#7A4DFF 55%,#3D1FC2 100%);

  /* Type */
  --font:'Plus Jakarta Sans','Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fs-display:clamp(2.5rem,5.2vw,4.25rem);
  --fs-h1:clamp(2rem,3.6vw,3rem);
  --fs-h2:clamp(1.6rem,2.6vw,2.4rem);
  --fs-h3:1.25rem;
  --fs-body:1.0625rem;    /* 17px */
  --fs-sm:.9375rem;
  --fs-xs:.8125rem;

  /* Shape & depth */
  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px; --r-pill:999px;
  --shadow-sm:0 1px 2px rgba(14,19,48,.06);
  --shadow-md:0 6px 24px -8px rgba(14,19,48,.14);
  --shadow-lg:0 24px 60px -20px rgba(14,19,48,.22);
  --ring:0 0 0 4px rgba(91,46,255,.18);

  /* Space */
  --container:1200px;
  --gutter:clamp(16px,4vw,32px);
  --section:clamp(64px,9vw,120px);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{color:var(--ink);line-height:1.12;margin:0 0 .5em;letter-spacing:-.02em;font-weight:800}
h3,h4{font-weight:700;letter-spacing:-.01em}
p{margin:0 0 1em}
a{color:var(--violet);text-decoration:none}
a:hover{text-decoration:underline}
img,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}

/* Icons — 2px outline set */
.i{width:22px;height:22px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none;display:inline-block}
.i-sm{width:18px;height:18px}.i-lg{width:28px;height:28px}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 22px;border-radius:var(--r-pill);border:1.5px solid transparent;font-weight:700;font-size:var(--fs-sm);cursor:pointer;white-space:nowrap;transition:transform .15s,background .15s,box-shadow .15s;text-decoration:none!important}
.btn-primary{background:var(--violet);color:#fff;box-shadow:0 8px 20px -8px rgba(91,46,255,.6)}
.btn-primary:hover{background:var(--violet-600);transform:translateY(-1px)}
.btn-secondary{background:#fff;color:var(--ink);border-color:var(--border)}
.btn-secondary:hover{border-color:var(--ink)}
.btn-ghost{background:transparent;color:var(--ink)}
.btn-ghost:hover{background:var(--surface)}
.btn-danger{background:var(--red);color:#fff}
.btn-white{background:#fff;color:var(--violet)}
.btn-sm{height:36px;padding:0 14px;font-size:var(--fs-xs)}
.btn-lg{height:58px;padding:0 30px;font-size:1rem}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}

/* Form controls */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:18px}
.label{font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.label .req{color:var(--red);margin-left:2px}
.hint{font-size:var(--fs-xs);color:var(--muted)}
.input,.select,.textarea{width:100%;height:50px;padding:0 16px;border:1.5px solid var(--border);border-radius:var(--r-md);background:#fff;transition:border .15s,box-shadow .15s}
.textarea{height:auto;min-height:110px;padding:12px 16px;resize:vertical}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%234A5070' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:44px}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:var(--violet);box-shadow:var(--ring)}
.is-invalid .input,.is-invalid .select,.is-invalid .textarea,.input.is-invalid{border-color:var(--red)}
.is-invalid .input:focus{box-shadow:0 0 0 4px rgba(229,72,77,.15)}
.error-msg{display:none;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--red);font-weight:600}
.is-invalid .error-msg{display:flex}
.is-valid .input{border-color:var(--mint)}
.check{display:flex;gap:12px;align-items:flex-start;cursor:pointer;font-size:var(--fs-sm)}
.check input{appearance:none;width:22px;height:22px;border:1.5px solid #C9CDDD;border-radius:7px;flex:none;margin:1px 0 0;display:grid;place-content:center;background:#fff;cursor:pointer}
.check input:checked{background:var(--violet);border-color:var(--violet)}
.check input:checked::after{content:"";width:11px;height:6px;border:2.5px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.check input[type=radio]{border-radius:50%}
.check input[type=radio]:checked::after{width:8px;height:8px;border:0;background:#fff;border-radius:50%;transform:none}

/* Cards, chips, badges */
.card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:28px;transition:transform .2s,box-shadow .2s,border-color .2s}
.card-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent}
.chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:var(--r-pill);background:var(--surface);color:var(--ink);font-size:var(--fs-xs);font-weight:600}
.chip .i{width:16px;height:16px;color:var(--mint)}
.badge{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--r-pill);font-size:12px;font-weight:700;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.plain::before{display:none}
.b-violet{background:var(--violet-50);color:var(--violet)}
.b-mint{background:var(--mint-50);color:var(--mint-700)}
.b-amber{background:var(--amber-50);color:var(--amber-700)}
.b-red{background:var(--red-50);color:var(--red)}
.b-grey{background:var(--surface);color:var(--text)}
.b-ink{background:var(--ink);color:#fff}

.eyebrow{display:inline-block;font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--violet);margin-bottom:12px}
.legal-flag{display:inline-block;font-size:11px;font-weight:700;color:var(--amber-700);background:var(--amber-50);border:1px dashed var(--amber);border-radius:6px;padding:2px 8px;letter-spacing:.01em}
.placeholder{border:2px dashed #C9CDDD;border-radius:var(--r-md);color:var(--muted);font-weight:600;display:grid;place-items:center;text-align:center;padding:20px}

/* Logo wordmark */
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:1.4rem;color:var(--ink);letter-spacing:-.03em;text-decoration:none!important}
.logo-mark{width:34px;height:34px}

/* Motion */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.float{animation:float 6s ease-in-out infinite}
.float-slow{animation:float 9s ease-in-out infinite}
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
.skeleton{background:linear-gradient(90deg,#EEF0F6 0,#F7F8FB 40%,#EEF0F6 80%);background-size:800px 100%;animation:shimmer 1.4s linear infinite;border-radius:8px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Toast */
.toast-wrap{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:10px;z-index:200}
.toast{display:flex;align-items:center;gap:12px;background:var(--ink);color:#fff;padding:14px 18px;border-radius:var(--r-md);box-shadow:var(--shadow-lg);font-size:var(--fs-sm);font-weight:600;min-width:280px;animation:toastIn .25s ease}
.toast .i{color:var(--mint)}
.toast.err .i{color:#FF8A8E}
@keyframes toastIn{from{opacity:0;transform:translateY(10px)}}

/* Modal */
.modal-back{position:fixed;inset:0;background:rgba(14,19,48,.45);display:none;align-items:center;justify-content:center;padding:16px;z-index:150}
.modal-back.open{display:flex}
.modal{background:#fff;border-radius:var(--r-lg);max-width:460px;width:100%;padding:28px;box-shadow:var(--shadow-lg)}
.modal-icon{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:16px}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap}