/* ==========================================================================
   Email Mitra — Premium Red theme (shared by login + send pages)
   ========================================================================== */
:root{
  --brand-50:  #fef2f2;
  --brand-100: #fee2e2;
  --brand-500: #dc2626;
  --brand-600: #b91c1c;
  --brand-700: #991b1b;

  --ink-900: #18181b;
  --ink-700: #3f3f46;
  --ink-500: #71717a;
  --ink-300: #d4d4d8;
  --ink-200: #e4e4e7;
  --ink-100: #f4f4f5;
  --ink-50:  #fafafa;

  --danger-50: #fff1f0;
  --danger-500: #f43f5e;
  --danger-600: #e11d48;

  --radius-md: 12px;
  --radius-lg: 18px;

  --shadow-sm: 0 1px 2px rgba(24,24,27,0.06);
  --shadow-md: 0 8px 24px rgba(24,24,27,0.08);
  --shadow-lg: 0 20px 45px rgba(153,27,27,0.16);

  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: .15s;
  --dur-med: .25s;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink-900);
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    radial-gradient(900px 420px at 8% -8%, var(--brand-100), transparent),
    radial-gradient(760px 420px at 108% 108%, var(--brand-50), transparent),
    var(--ink-50);
}

@keyframes em-fade-up{from{opacity:0;transform:translateY(12px);} to{opacity:1;transform:translateY(0);}}
@keyframes em-fade-in{from{opacity:0;} to{opacity:1;}}
@keyframes em-pop{0%{transform:scale(.95);opacity:0;} 100%{transform:scale(1);opacity:1;}}
@keyframes em-spin{to{transform:rotate(360deg);}}
@keyframes toast-in{from{opacity:0;transform:translateX(16px);} to{opacity:1;transform:translateX(0);}}

.container{
  width:100%;
  max-width:480px;
  background:#ffffff;
  border:1px solid var(--ink-200);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:32px;
  animation:em-fade-up var(--dur-med) var(--ease-out);
}
.login-card{max-width:380px;text-align:center;}

.brand{text-align:center;margin-bottom:22px;}
.brand .logo-badge{
  width:52px;height:52px;border-radius:14px;margin:0 auto 14px;
  background:linear-gradient(135deg,var(--brand-500),var(--brand-700));
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:20px;
  box-shadow:var(--shadow-md);
}
.brand h1{margin:0;color:var(--ink-900);font-size:22px;font-weight:800;letter-spacing:-.01em;}
.brand p{margin:4px 0 0;color:var(--ink-500);font-size:13px;}

label{display:block;font-size:13px;font-weight:700;color:var(--ink-700);margin-bottom:6px;}
.field{margin-bottom:16px;position:relative;}

input, textarea{
  width:100%;
  padding:12px 13px;
  border:1.5px solid var(--ink-200);
  border-radius:10px;
  font-size:14px;
  font-family:inherit;
  color:var(--ink-900);
  background:#fff;
  transition:border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
textarea{resize:vertical;}
input:focus, textarea:focus{
  border-color:var(--brand-500);
  outline:none;
  box-shadow:0 0 0 3px var(--brand-100);
}
.pin-input{letter-spacing:8px;text-align:center;font-size:19px;font-weight:700;}

.suggest-box{
  position:absolute;
  left:0; right:0; top:calc(100% + 4px);
  background:#fff;
  border:1px solid var(--ink-200);
  border-radius:10px;
  box-shadow:var(--shadow-md);
  max-height:220px;
  overflow-y:auto;
  z-index:50;
  display:none;
}
.suggest-box.show{display:block;animation:em-fade-up .18s var(--ease-out);}
.suggest-item{padding:10px 13px;font-size:13.5px;cursor:pointer;border-bottom:1px solid var(--ink-100);transition:background var(--dur-fast) ease;}
.suggest-item:last-child{border-bottom:none;}
.suggest-item:hover, .suggest-item.active{background:var(--brand-50);color:var(--brand-700);}
.suggest-empty{padding:12px 13px;font-size:13px;color:var(--ink-500);}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;
  padding:14px;
  border-radius:10px;
  border:none;
  font-size:15px;font-weight:700;
  cursor:pointer;
  background:linear-gradient(135deg,var(--brand-500),var(--brand-700));
  color:#fff;
  box-shadow:0 6px 16px rgba(153,27,27,.28);
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) ease, opacity var(--dur-fast) ease;
}
.btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 22px rgba(153,27,27,.34);}
.btn:active:not(:disabled){transform:translateY(0);box-shadow:0 4px 10px rgba(153,27,27,.24);}
.btn:disabled{opacity:.65;cursor:not-allowed;}
.btn .spinner{
  width:15px;height:15px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;
  border-radius:50%;animation:em-spin .7s linear infinite;
}
.btn .spinner.spinner-dark{border:2px solid var(--brand-100);border-top-color:var(--brand-600);}

/* Resend-by-Order-ID lookup */
.lookup-box{
  background:var(--brand-50);
  border:1px solid var(--brand-100);
  border-radius:12px;
  padding:14px 16px;
  margin-bottom:20px;
}
.lookup-box label{color:var(--brand-700);margin-bottom:8px;}
.lookup-row{display:flex;gap:8px;}
.lookup-row input{flex:1;background:#fff;}
.btn-outline{
  width:auto;
  flex-shrink:0;
  padding:0 16px;
  background:#fff;
  color:var(--brand-700);
  border:1.5px solid var(--brand-200,var(--brand-100));
  box-shadow:none;
}
.btn-outline:hover:not(:disabled){background:var(--brand-100);box-shadow:none;transform:translateY(-1px);}

.error-banner{
  background:var(--danger-50);color:var(--danger-600);
  border:1px solid #fecdd3;border-radius:10px;
  padding:10px 12px;font-size:13px;margin-bottom:16px;text-align:center;
  animation:em-fade-in var(--dur-fast) ease;
}

.footer{text-align:center;font-size:12px;color:var(--ink-500);margin-top:20px;}

/* Toasts */
.toast-stack{
  position:fixed;top:20px;right:20px;z-index:200;
  display:flex;flex-direction:column;gap:10px;
  width:min(340px, calc(100vw - 40px));
}
.toast{
  background:#fff;border:1px solid var(--ink-200);border-left-width:4px;
  border-radius:10px;box-shadow:var(--shadow-md);
  padding:13px 15px;display:flex;gap:11px;
  animation:toast-in .25s ease;
}
.toast.success{border-left-color:#16a34a;}
.toast.error{border-left-color:var(--danger-500);}
.toast-icon{flex-shrink:0;width:20px;height:20px;margin-top:1px;}
.toast.success .toast-icon{color:#16a34a;}
.toast.error .toast-icon{color:var(--danger-600);}
.toast-body{flex:1;min-width:0;}
.toast-title{font-size:13.5px;font-weight:700;margin:0 0 2px;}
.toast-msg{font-size:12.5px;color:var(--ink-500);margin:0;line-height:1.5;}
.toast-close{cursor:pointer;color:var(--ink-500);background:none;border:none;font-size:16px;line-height:1;padding:0;}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

@media (max-width:480px){
  .container{padding:24px 20px;}
}