/* ========================================
   LISTMAILZ REGISTRATION PAGE STYLES
   Version: 1.0
   Color Scheme: Deep Blue + Vibrant Cyan
   
   NOTE: Uses same class names as original
   Only colors/styling updated to ListMailz brand
======================================== */

/* Navigation Header Override */
header,
.topbar,
nav.navbar,
.site-header {
  background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 100%) !important;
}

/* Two-column card */
.register-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  margin: 2rem 0;
}

@media(max-width:900px){
  .register-card { 
    flex-direction: column; 
  }
}

/* Left panel */
.card-left {
  flex: 1;
  background: linear-gradient(135deg, #1e3a8a, #2563eb);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.card-left::before {
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(rgba(255,255,255,0.05) 1px,transparent 1px),
    radial-gradient(rgba(255,255,255,0.03) 1px,transparent 1px);
  background-size:24px 24px,32px 32px;
  animation:moveDots 20s linear infinite;
}

.card-left::after {
  content:"";
  position:absolute;
  top:0;left:-60%;
  width:40%;height:100%;
  background:rgba(255,255,255,0.15);
  backdrop-filter:blur(5px);
  transform:skewX(-25deg);
  animation:glassSlide 3s infinite;
}

@keyframes moveDots {
  0% { background-position: 0 0, 12px 12px; }
  100% { background-position: 24px 24px, 36px 36px; }
}

@keyframes glassSlide {
  0%, 100% { left: -60%; opacity: 0; }
  50% { left: 120%; opacity: 1; }
}

/* Welcome content */
.card-left .welcome-content {
  z-index:1;
  text-align:center;
  color:#fff;
  padding:1rem;
}

.card-left h2 {
  font-size:2rem;
  margin-bottom:.5rem;
  text-shadow:1px 1px 3px rgba(0,0,0,.3);
}

.card-left p {
  margin-bottom:1rem;
  font-size:1.05rem;
}

.card-left .icon-bounce i {
  font-size:2.5rem;
  animation:bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Right panel form width */
.card-right {
  flex: 1;
  display:flex;
  align-items:center;
  justify-content:center;
}

.card-right .form-inner {
  width:100%;
  max-width:360px;
}

/* Referrer toast */
.referrer-toast {
  background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
  border-left:4px solid #06b6d4;
  border-radius: var(--radius);
  padding: .8rem 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
  margin-bottom:1.5rem;
  animation: fadeIn .6s ease both;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.referrer-toast img {
  width:36px;
  height:36px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid #06b6d4;
}

.referrer-toast span {
  font-size: .95rem;
  color: #0f172a;
}