@charset "UTF-8";/* ============================================================================
   ESLROK REGISTRATION CSS
   Loaded on: teacher-register, employer-register, login pages
   Covers: sidebar blurb widget, registration form styling
   ============================================================================ */


/* ============================================================================
   KEYFRAMES
   ============================================================================ */

@keyframes esb-float1 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-8px) rotate(5deg); }
}

@keyframes esb-float2 {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-6px) rotate(-5deg); }
}


/* ============================================================================
   SIDEBAR BLURB WRAPPER
   ============================================================================ */

#eslrok-sidebar-blurb {
  width: 100% !important;
  max-width: 420px !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, #fef7f0 0%, #fdf2f8 40%, #f5f0ff 100%) !important;
  border: 2px solid rgba(244,114,182,.05) !important;
  box-shadow: 0 20px 60px rgba(244,114,182,.08), 0 4px 12px rgba(0,0,0,.03) !important;
  position: relative !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  box-sizing: border-box !important;
  margin-top: 30px;
}

#eslrok-sidebar-blurb *,
#eslrok-sidebar-blurb *::before,
#eslrok-sidebar-blurb *::after {
  box-sizing: border-box !important;
}

/* Polka dot texture overlay */
#eslrok-sidebar-blurb::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  opacity: 0.3 !important;
  background-image: radial-gradient(circle, #f9a8d4 0.5px, transparent 0.5px) !important;
  background-size: 24px 24px !important;
  pointer-events: none !important;
  z-index: 0 !important;
}


/* ============================================================================
   HEADER
   ============================================================================ */

#eslrok-sidebar-blurb .esb-header {
  position: relative !important;
  z-index: 1 !important;
  padding: 28px 24px 0 !important;
  text-align: center !important;
}

#eslrok-sidebar-blurb .esb-float {
  position: absolute !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

#eslrok-sidebar-blurb .esb-float-blossom {
  top: 12px !important;
  left: 18px !important;
  font-size: 1.4rem !important;
  animation: esb-float1 4s ease-in-out infinite !important;
}

#eslrok-sidebar-blurb .esb-float-pencil {
  top: 8px !important;
  right: 22px !important;
  font-size: 1.2rem !important;
  animation: esb-float2 5s ease-in-out infinite !important;
}

#eslrok-sidebar-blurb .esb-float-star {
  top: 50px !important;
  right: 40px !important;
  font-size: 0.9rem !important;
  animation: esb-float1 3.5s ease-in-out 0.5s infinite !important;
}

#eslrok-sidebar-blurb .esb-stamp {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 16px !important;
  border-radius: 50px !important;
  background: linear-gradient(135deg, #f472b6, #e879a8) !important;
  color: white !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  margin-bottom: 14px !important;
  box-shadow: 0 4px 15px rgba(244,114,182,.3) !important;
}

/* Pink stamp variant */
.esb-stamp--pink {
  background: linear-gradient(135deg, #f472b6, #a855f7) !important;
  box-shadow: 0 4px 12px rgba(168,85,247,.25) !important;
}

#eslrok-sidebar-blurb .esb-title {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  color: #1a1a2e !important;
  line-height: 1.2 !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
}

#eslrok-sidebar-blurb .esb-subtitle {
  font-size: 0.85rem !important;
  color: #94a3b8 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.5 !important;
}

/* Standalone .esb-subtitle (outside #eslrok-sidebar-blurb) */
.esb-subtitle {
  font-size: 0.78rem;
  color: #94a3b8;
  margin: 4px 0 0;
  line-height: 1.5;
}

#eslrok-sidebar-blurb .esb-count {
  font-weight: 700 !important;
  background: linear-gradient(135deg, #f472b6, #a855f7) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Dot divider */
#eslrok-sidebar-blurb .esb-dots {
  margin-top: 18px !important;
  display: flex !important;
  justify-content: center !important;
  gap: 4px !important;
}

#eslrok-sidebar-blurb .esb-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  display: inline-block !important;
}

#eslrok-sidebar-blurb .esb-dot-pink   { background: linear-gradient(135deg, #f472b6, #e879a8) !important; opacity: 0.5 !important; }
#eslrok-sidebar-blurb .esb-dot-purple { background: linear-gradient(135deg, #a855f7, #c4b5fd) !important; opacity: 0.35 !important; }
#eslrok-sidebar-blurb .esb-dot:nth-child(1) { opacity: 0.4 !important; }
#eslrok-sidebar-blurb .esb-dot:nth-child(2) { opacity: 0.55 !important; }
#eslrok-sidebar-blurb .esb-dot:nth-child(3) { opacity: 0.7 !important; }
#eslrok-sidebar-blurb .esb-dot:nth-child(4) { opacity: 0.55 !important; }
#eslrok-sidebar-blurb .esb-dot:nth-child(5) { opacity: 0.7 !important; }
#eslrok-sidebar-blurb .esb-dot:nth-child(6) { opacity: 0.55 !important; }
#eslrok-sidebar-blurb .esb-dot:nth-child(7) { opacity: 0.4 !important; }


/* ============================================================================
   BENEFITS
   ============================================================================ */

#eslrok-sidebar-blurb .esb-benefits {
  position: relative !important;
  z-index: 1 !important;
  padding: 14px 18px 8px !important;
}

#eslrok-sidebar-blurb .esb-benefit {
  display: flex !important;
  gap: 14px !important;
  padding: 14px !important;
  border-radius: 18px !important;
  margin-bottom: 10px !important;
  background: rgba(255,255,255,.7) !important;
  border: 1.5px solid rgba(244,114,182,.1) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.02) !important;
  transition: all .3s ease !important;
  cursor: default !important;
  align-items: flex-start !important;
}

#eslrok-sidebar-blurb .esb-benefit:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(244,114,182,.1) !important;
  border-color: rgba(244,114,182,.2) !important;
}

#eslrok-sidebar-blurb .esb-benefit-icon {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: 16px !important;
  background: white !important;
  border: 2px solid rgba(168,85,247,.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.4rem !important;
  flex-shrink: 0 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.04) !important;
  position: relative !important;
}

#eslrok-sidebar-blurb .esb-badge {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #f472b6, #a855f7) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.55rem !important;
  font-weight: 800 !important;
  color: white !important;
  border: 2px solid #fef7f0 !important;
  line-height: 1 !important;
}

#eslrok-sidebar-blurb .esb-benefit-text  { flex: 1 !important; min-width: 0 !important; }
#eslrok-sidebar-blurb .esb-benefit-title { font-weight: 700 !important; font-size: 0.98rem !important; color: #1a1a2e !important; margin-bottom: 3px !important; line-height: 1.3 !important; }
#eslrok-sidebar-blurb .esb-benefit-desc  { font-size: 0.98rem !important; color: #94a3b8 !important; line-height: 1.55 !important; margin: 0 !important; }


/* ============================================================================
   TRUST BADGE
   ============================================================================ */

#eslrok-sidebar-blurb .esb-trust {
  position: relative !important;
  z-index: 1 !important;
  margin: 6px 18px 20px !important;
  padding: 14px 18px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.6) !important;
  border: 2px dashed rgba(168,85,247,.15) !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  justify-content: center !important;
}

#eslrok-sidebar-blurb .esb-trust-logo {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 50% !important;
  border: 2px solid rgba(168,85,247,.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.75rem !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

#eslrok-sidebar-blurb .esb-logo-e   { color: #22c55e !important; }
#eslrok-sidebar-blurb .esb-logo-r   { color: #ef4444 !important; }
#eslrok-sidebar-blurb .esb-trust-text { font-size: 0.75rem !important; color: #94a3b8 !important; line-height: 1.4 !important; font-weight: 500 !important; }
#eslrok-sidebar-blurb .esb-trust-flag { font-size: 1rem !important; }


/* ============================================================================
   GROUP CARDS (esb-group-* variant used on employer register)
   ============================================================================ */

.esb-group-card {
  border-radius: 20px;
  background: rgba(255,255,255,.8);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,.02);
  transition: transform .2s ease, box-shadow .2s ease;
}
.esb-group-card:last-child { margin-bottom: 0; }
.esb-group-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.05); }
.esb-group-card--green { border: 1.5px solid rgba(34,197,94,.12); }
.esb-group-card--blue  { border: 1.5px solid rgba(96,165,250,.12); }

.esb-group-cta { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-bottom: 14px; }
.esb-group-cta:hover .esb-group-cta-label--green { color: #15803d; }
.esb-group-cta:hover .esb-group-cta-label--blue  { color: #1d4ed8; }

.esb-group-cta-icon {
  width: 44px; height: 44px; min-width: 44px;
  border-radius: 14px;
  background: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  box-shadow: 0 4px 12px rgba(0,0,0,.04);
  transition: transform .2s ease;
}
.esb-group-cta:hover .esb-group-cta-icon { transform: scale(1.05); }
.esb-group-cta-icon--green { border: 2px solid rgba(34,197,94,.15); }
.esb-group-cta-icon--blue  { border: 2px solid rgba(96,165,250,.15); }

.esb-group-cta-label        { font-weight: 700; font-size: 0.92rem; transition: color .2s ease; }
.esb-group-cta-label--green { color: black !important; }
.esb-group-cta-label--blue  { color: black !important; }

.esb-group-list { display: flex; flex-direction: column; gap: 8px; padding-left: 4px; }
.esb-group-item { display: flex; align-items: flex-start; gap: 10px; }
.esb-group-item-icon { font-size: 0.9rem; margin-top: 1px; flex-shrink: 0; }
.esb-group-item-text { font-size: 1rem; color: #64748b; line-height: 1.5; }


/* ============================================================================
   REGISTRATION FORM
   ============================================================================ */

.registration form#member-registration fieldset dt {
  margin: 0;
  text-align: right;
  padding-right: 10px;
}

.registration form#member-registration fieldset dd {
  margin: 0;
  padding-bottom: 10px;
}

label#jform_spacer-lbl  { display: none; }
label#description-lbl   { display: none; }

#member-registration div.buttons {
  overflow: visible;
  padding-left: 218px !important;
  margin-top: 20px;
}

#member-registration fieldset dd input { border: 1px solid #c1bbee; }

form#member-registration { color: #ab6f8c; }

div#users-profile-custom-webauthn { display: none; }

.com-users-reset.reset,
.com-users-reset-confirm.reset-confirm,
.com-users-reset-complete.reset-complete,
.com-users-remind.remind { max-width: 600px; margin: auto; }

a.com-users-login__register.list-group-item { display: none; }

a.com-users-login__reset.list-group-item {
  background: none; font-size: 13px; text-align: center;
  margin: 0; padding: 0; border: none;
  margin-bottom: 5px; margin-top: 10px;
  font-family: 'Space Grotesk', sans-serif;
}

a.com-users-login__remind.list-group-item {
  background: none; font-size: 13px; text-align: center;
  margin: 0; padding: 0; border: none;
  font-family: 'Space Grotesk', sans-serif;
}

span.sa_edetail_val       { font-weight: 300; }
span.sa_edetail_seperator { font-weight: 300; }


/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 480px) {
  #eslrok-sidebar-blurb { max-width: 100% !important; border-radius: 20px !important; }
  #eslrok-sidebar-blurb .esb-header   { padding: 22px 18px 18px !important; }
  #eslrok-sidebar-blurb .esb-title    { font-size: 1.3rem !important; }
  #eslrok-sidebar-blurb .esb-benefits { padding: 4px 14px 8px !important; }
  #eslrok-sidebar-blurb .esb-benefit  { padding: 12px !important; }
  #eslrok-sidebar-blurb .esb-trust    { margin: 6px 14px 16px !important; }
}

@media (max-width: 768px) {
  .registration form#member-registration fieldset dt { text-align: left; }
  #member-registration div.buttons { padding-left: 0 !important; }
}