/* =========================================================
   REGISTER PAGE
   First Credit Merchant
   ========================================================= */

:root {
  --primary-color: #032d3f;
  --primary-color-dark: #011d2c;
  --primary-color-light: #d2c66a;

  --secondary-color: #e4ea00;
  --secondary-color-dark: #9c9f0b;
  --secondary-color-light: #e4f327;

  --text-color: #111827;
  --bg-color: #f9fafb;
  --card-bg-color: #ffffff;
}

/* ---------------------------------------------------------
   BASE
   --------------------------------------------------------- */

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background: var(--bg-color);
  color: var(--text-color);
  font-family: "Lato", sans-serif;
}

* {
  box-sizing: border-box;
}

/* ---------------------------------------------------------
   PAGE LOADER
   --------------------------------------------------------- */

.page-loading {
  position: fixed;
  inset: 0;

  width: 100%;
  height: 100%;

  background-color: #ffffff;

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 0.4s 0.2s ease-in-out,
    visibility 0.4s 0.2s ease-in-out;

  z-index: 9999;
}

.page-loading.active {
  opacity: 1;
  visibility: visible;
}

.page-loading-inner {
  position: absolute;

  top: 50%;
  left: 0;

  width: 100%;

  text-align: center;

  transform: translateY(-50%);

  transition: opacity 0.2s ease-in-out;

  opacity: 0;
}

.page-loading.active > .page-loading-inner {
  opacity: 1;
}

.loading-container {
  display: flex;

  align-items: center;
  justify-content: center;

  flex-direction: column;
}

/* ---------------------------------------------------------
   LOADER ANIMATION
   --------------------------------------------------------- */

.loading-animation {
  position: relative;

  display: flex;

  align-items: center;
  justify-content: center;

  width: 80px;
  height: 80px;

  margin-bottom: 1rem;
}

.loading-animation .circle {
  position: absolute;

  width: 100%;
  height: 100%;

  border: 4px solid transparent;
  border-radius: 50%;

  mix-blend-mode: overlay;

  animation: registerRotateCircle 1.5s linear infinite;
}

.loading-animation .circle:nth-child(1) {
  border-top-color: var(--primary-color);
  animation-delay: 0s;
}

.loading-animation .circle:nth-child(2) {
  border-right-color: var(--primary-color-light);
  animation-delay: 0.2s;
}

.loading-animation .circle:nth-child(3) {
  border-bottom-color: var(--secondary-color);
  animation-delay: 0.4s;
}

.loading-animation .circle:nth-child(4) {
  border-left-color: var(--primary-color-light);
  animation-delay: 0.6s;
}

.loading-animation .core {
  width: 20px;
  height: 20px;

  border-radius: 50%;

  background: linear-gradient(
    45deg,
    var(--primary-color-light),
    var(--primary-color-dark)
  );

  box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);

  animation: registerPulse 1s ease-in-out infinite alternate;
}

.page-loading .text {
  margin-top: 0.5rem;

  color: var(--primary-color);

  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.05em;

  background: linear-gradient(
    90deg,
    var(--primary-color-dark),
    var(--primary-color-light),
    var(--primary-color-dark)
  );

  background-size: 200% auto;

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;

  animation: registerGradient 2s linear infinite;
}

/* ---------------------------------------------------------
   FLOATING BACKGROUND ELEMENTS
   --------------------------------------------------------- */

.floating {
  animation: registerFloating 3s ease-in-out infinite;
}

.floating-slow {
  animation: registerFloating 6s ease-in-out infinite;
}

.floating-slower {
  animation: registerFloating 8s ease-in-out infinite;
}

/* ---------------------------------------------------------
   INPUT INTERACTIONS
   --------------------------------------------------------- */

.input-wrapper {
  position: relative;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.input-wrapper:focus-within {
  transform: translateY(-2px);
}

.input-icon {
  position: absolute;

  top: 50%;
  left: 1rem;

  transform: translateY(-50%);

  color: #94a3b8;

  transition: color 0.3s ease;
}

.input-wrapper:focus-within .input-icon {
  color: var(--primary-color);
}

input:focus + .input-toggle {
  color: var(--primary-color);
}

/* ---------------------------------------------------------
   FORM ELEMENT POLISH
   --------------------------------------------------------- */

input,
select,
button {
  font-family: inherit;
}

input,
select {
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

input::placeholder {
  color: #94a3b8;
}

button {
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease;
}

button:active {
  transform: translateY(1px);
}

/* Alpine: don't flash hidden steps before Alpine loads */

[x-cloak] {
  display: none !important;
}

/* ---------------------------------------------------------
   ANIMATIONS
   --------------------------------------------------------- */

@keyframes registerRotateCircle {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes registerPulse {
  from {
    transform: scale(0.8);
    opacity: 0.8;
  }

  to {
    transform: scale(1.2);
    opacity: 1;
  }
}

@keyframes registerGradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

@keyframes registerFloating {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 1023px) {
  body {
    background: #f9fafb;
  }
}

/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .floating,
  .floating-slow,
  .floating-slower,
  .loading-animation .circle,
  .loading-animation .core,
  .page-loading .text {
    animation: none;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}
/* =========================================================
   REGISTER PAGE
   MOBILE RESPONSIVE FIX ONLY
   Desktop layout remains unchanged
========================================================= */

@media (max-width: 639px) {
  /* =======================================================
     PAGE
  ======================================================= */

  html,
  body {
    width: 100%;
    min-width: 0;
    min-height: 100%;

    margin: 0;
    padding: 0;

    overflow-x: hidden;

    background: #f8fafc;
  }

  /* Main registration panel */

  body > .w-full.lg\:w-1\/2 {
    width: 100%;
    min-height: 100vh;

    display: block;

    padding: 26px 18px max(36px, env(safe-area-inset-bottom));

    box-sizing: border-box;
  }

  body > .w-full.lg\:w-1\/2 > .w-full.max-w-2xl {
    width: 100%;
    max-width: 460px;

    margin: 0 auto;
  }

  /* =======================================================
     MOBILE LOGO
  ======================================================= */

  body > .w-full.lg\:w-1\/2 .lg\:hidden.text-center {
    width: 100%;

    margin: 0 auto 26px;

    text-align: center;
  }

  body > .w-full.lg\:w-1\/2 .lg\:hidden.text-center a {
    display: inline-flex;

    align-items: center;
    justify-content: center;
  }

  body > .w-full.lg\:w-1\/2 .lg\:hidden.text-center img {
    display: block;

    width: min(260px, 72vw);
    height: auto;

    max-width: 100%;

    margin: 0 auto;

    object-fit: contain;
  }

  /* =======================================================
     REGISTRATION CARD
  ======================================================= */

  body > .w-full.lg\:w-1\/2 .bg-white.rounded-2xl.shadow-xl {
    width: 100%;
    max-width: 100%;

    margin: 0;

    overflow: hidden;

    border-radius: 22px;

    background: #ffffff;

    box-shadow:
      0 18px 42px rgba(15, 23, 42, 0.1),
      0 4px 12px rgba(15, 23, 42, 0.04);

    box-sizing: border-box;
  }

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

  body > .w-full.lg\:w-1\/2 .bg-gray-50.px-8.py-6 {
    padding: 24px 22px 20px;

    background: #f8fafc;

    border-bottom: 1px solid #e5e7eb;
  }

  body > .w-full.lg\:w-1\/2 .bg-gray-50 .flex.justify-between.items-center {
    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 14px;
  }

  body > .w-full.lg\:w-1\/2 .bg-gray-50 h2 {
    margin: 0;

    font-size: 26px;
    line-height: 1.2;

    font-weight: 700;

    letter-spacing: -0.025em;

    color: #111827;
  }

  body > .w-full.lg\:w-1\/2 .bg-gray-50 .text-sm.font-medium.text-gray-500 {
    flex-shrink: 0;

    padding-top: 5px;

    font-size: 13px;

    color: #6b7280;
  }

  /* =======================================================
     PROGRESS BAR
  ======================================================= */

  body > .w-full.lg\:w-1\/2 .h-2.w-full.bg-gray-200 {
    width: 100%;
    height: 7px;

    margin-top: 5px;

    overflow: hidden;

    border-radius: 999px;

    background: #e5e7eb;
  }

  body > .w-full.lg\:w-1\/2 .h-2.w-full.bg-gray-200 > .h-full {
    height: 100%;

    border-radius: inherit;

    background: #032d3f;
  }

  /* =======================================================
     STEP LABELS
  ======================================================= */

  body > .w-full.lg\:w-1\/2 .grid.grid-cols-4.gap-2.mt-3 {
    display: grid;

    grid-template-columns: repeat(4, minmax(0, 1fr));

    gap: 5px;

    width: 100%;

    margin-top: 13px;

    font-size: 10px;
    line-height: 1.25;

    color: #9ca3af;
  }

  body > .w-full.lg\:w-1\/2 .grid.grid-cols-4.gap-2.mt-3 > div {
    min-width: 0;

    overflow-wrap: anywhere;
  }

  /* =======================================================
     FORM BODY
  ======================================================= */

  body > .w-full.lg\:w-1\/2 .bg-white.rounded-2xl.shadow-xl > .px-8.py-7 {
    padding: 26px 22px 28px;
  }

  #customer-register-form {
    width: 100%;

    margin: 0;
    padding: 0;

    box-sizing: border-box;
  }

  /* =======================================================
     STEP HEADINGS
  ======================================================= */

  #customer-register-form h3 {
    margin: 0;

    color: #111827;

    font-size: 21px;
    font-weight: 700;

    line-height: 1.25;
  }

  #customer-register-form h3 + p {
    margin-top: 6px;

    color: #6b7280;

    font-size: 14px;

    line-height: 1.5;
  }

  #customer-register-form .mb-6 {
    margin-bottom: 22px;
  }

  /* =======================================================
     STEP ONE GRID
     Force one field per row on phone.
  ======================================================= */

  #customer-register-form .grid.grid-cols-1.md\:grid-cols-2 {
    display: grid;

    grid-template-columns: 1fr;

    gap: 18px;

    width: 100%;
  }

  /* =======================================================
     LABELS
  ======================================================= */

  #customer-register-form label {
    display: block;

    margin-bottom: 8px;

    color: #374151;

    font-size: 14px;
    font-weight: 500;

    line-height: 1.35;
  }

  /* Don't affect the final terms flex label */

  #customer-register-form label.flex.items-start {
    display: flex;

    align-items: flex-start;

    margin: 0;
  }

  /* =======================================================
     INPUTS + SELECTS
  ======================================================= */

  #customer-register-form input[type="text"],
  #customer-register-form input[type="email"],
  #customer-register-form input[type="tel"],
  #customer-register-form input[type="password"],
  #customer-register-form select {
    display: block;

    width: 100%;
    height: 56px;
    min-height: 56px;

    margin: 0;

    padding: 0 15px;

    border: 1px solid #d1d5db;

    border-radius: 12px;

    background: #ffffff;

    color: #1f2937;

    font-family: inherit;

    font-size: 16px;

    line-height: 1.2;

    box-sizing: border-box;

    outline: none;

    -webkit-appearance: none;
    appearance: none;

    transition:
      border-color 0.2s ease,
      box-shadow 0.2s ease;
  }

  #customer-register-form input::placeholder {
    color: #a0a9b8;

    opacity: 1;
  }

  #customer-register-form input:focus,
  #customer-register-form select:focus {
    border-color: #52736f;

    box-shadow: 0 0 0 3px rgba(3, 45, 63, 0.08);
  }

  /* Restore dropdown arrow */

  #customer-register-form select {
    padding-right: 42px;

    background-image:
      linear-gradient(45deg, transparent 50%, #64748b 50%),
      linear-gradient(135deg, #64748b 50%, transparent 50%);

    background-position:
      calc(100% - 20px) 24px,
      calc(100% - 15px) 24px;

    background-size:
      5px 5px,
      5px 5px;

    background-repeat: no-repeat;
  }

  /* =======================================================
     SPACE-Y FALLBACK
  ======================================================= */

  #customer-register-form .space-y-5 > * + * {
    margin-top: 18px;
  }

  /* =======================================================
     PIN HELP
  ======================================================= */

  #customer-register-form p.text-xs.text-gray-500 {
    margin: 8px 0 0;

    color: #6b7280;

    font-size: 12px;

    line-height: 1.45;
  }

  /* =======================================================
     PASSWORD INPUTS
  ======================================================= */

  #customer-register-form .relative {
    position: relative;

    width: 100%;
  }

  #customer-register-form #register-password,
  #customer-register-form #password_confirmation {
    padding-right: 54px;
  }

  #customer-register-form .relative > button.absolute {
    position: absolute;

    top: 0;
    right: 0;

    width: 50px;
    height: 56px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;

    background: transparent;

    color: #9ca3af;
  }

  #customer-register-form .relative > button.absolute svg {
    width: 21px;
    height: 21px;
  }

  /* =======================================================
     PASSWORD REQUIREMENTS
  ======================================================= */

  #customer-register-form .grid.grid-cols-1.sm\:grid-cols-2 {
    display: grid;

    grid-template-columns: 1fr;

    gap: 7px;

    margin-top: 14px;

    font-size: 12px;

    line-height: 1.4;
  }

  /* =======================================================
     TERMS CHECKBOX
  ======================================================= */

  #customer-register-form input[type="checkbox"] {
    width: 19px;
    height: 19px;

    margin: 2px 0 0;

    flex: 0 0 19px;

    accent-color: #032d3f;
  }

  #customer-register-form label.flex.items-start > span {
    margin-left: 11px;

    color: #4b5563;

    font-size: 13px;

    line-height: 1.55;
  }

  #customer-register-form label.flex.items-start a {
    color: #032d3f;

    font-weight: 600;

    text-decoration: none;
  }

  /* =======================================================
     NAVIGATION BUTTON ROWS
  ======================================================= */

  #customer-register-form .flex.justify-end.mt-8,
  #customer-register-form .flex.items-center.justify-between.mt-8 {
    width: 100%;

    margin-top: 26px;
  }

  #customer-register-form .flex.justify-end.mt-8 {
    display: flex;

    justify-content: stretch;
  }

  #customer-register-form .flex.justify-end.mt-8 button {
    width: 100%;
  }

  #customer-register-form .flex.items-center.justify-between.mt-8 {
    display: grid;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);

    gap: 12px;
  }

  /* =======================================================
     ALL STEP BUTTONS
  ======================================================= */

  #customer-register-form button {
    min-height: 54px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 0 15px;

    border: 0;

    border-radius: 11px;

    font-family: inherit;

    font-size: 14px;
    font-weight: 600;

    line-height: 1;

    cursor: pointer;
  }

  /* Previous */

  #customer-register-form button.bg-gray-100 {
    width: 100%;

    background: #f1f5f9;

    color: #475569;
  }

  /* Next + Create */

  #customer-register-form button.bg-primary-600 {
    width: 100%;

    background: #082f3f;

    color: #ffffff;

    box-shadow: 0 7px 16px rgba(8, 47, 63, 0.12);
  }

  #customer-register-form button.bg-primary-600:hover {
    background: #032d3f;
  }

  #customer-register-form button:disabled {
    opacity: 0.5;

    cursor: not-allowed;
  }

  #customer-register-form button svg {
    width: 17px;
    height: 17px;

    flex-shrink: 0;
  }

  /* =======================================================
     SIGN-IN LINK
  ======================================================= */

  body > .w-full.lg\:w-1\/2 .bg-white.rounded-2xl.shadow-xl .mt-7.text-center {
    margin: 24px 0 0;

    color: #6b7280;

    font-size: 14px;

    line-height: 1.55;
  }

  body > .w-full.lg\:w-1\/2 a[href="/login"] {
    color: #032d3f;

    font-weight: 600;

    text-decoration: none;
  }

  /* =======================================================
     ALPINE VISIBILITY
  ======================================================= */

  [x-cloak] {
    display: none !important;
  }
}

/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 374px) {
  body > .w-full.lg\:w-1\/2 {
    padding-left: 14px;
    padding-right: 14px;
  }

  body > .w-full.lg\:w-1\/2 .lg\:hidden.text-center img {
    width: min(215px, 68vw);
  }

  body > .w-full.lg\:w-1\/2 .bg-gray-50.px-8.py-6 {
    padding: 21px 18px 18px;
  }

  body > .w-full.lg\:w-1\/2 .bg-white.rounded-2xl.shadow-xl > .px-8.py-7 {
    padding: 23px 18px 25px;
  }

  body > .w-full.lg\:w-1\/2 .bg-gray-50 h2 {
    font-size: 23px;
  }

  body > .w-full.lg\:w-1\/2 .grid.grid-cols-4.gap-2.mt-3 {
    font-size: 9px;
  }

  #customer-register-form .flex.items-center.justify-between.mt-8 {
    gap: 8px;
  }

  #customer-register-form button {
    min-height: 52px;

    padding: 0 10px;

    font-size: 13px;
  }
}
/* =========================================================
   REGISTER MOBILE FINAL OVERRIDE
========================================================= */

@media (max-width: 639px) {
  /*
   * Registration form-side container
   */

  #customer-register-form {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
  }

  /*
   * Container surrounding registration card.
   */

  .w-full.max-w-2xl {
    width: 100% !important;
    max-width: 460px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /*
   * Registration card.
   */

  .bg-white.rounded-2xl.shadow-xl.overflow-hidden {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 auto !important;

    border-radius: 20px !important;

    overflow: hidden !important;

    background: #ffffff !important;

    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1) !important;
  }

  /*
   * Progress/header area.
   */

  .bg-white.rounded-2xl.shadow-xl.overflow-hidden > .bg-gray-50 {
    padding: 22px 20px 18px !important;
  }

  .bg-white.rounded-2xl.shadow-xl.overflow-hidden > .bg-gray-50 h2 {
    margin: 0 !important;

    font-size: 25px !important;
    line-height: 1.2 !important;

    color: #111827 !important;
  }

  /*
   * Step counter.
   */

  .bg-white.rounded-2xl.shadow-xl.overflow-hidden > .bg-gray-50 .text-sm {
    font-size: 12px !important;
  }

  /*
   * Progress bar.
   */

  .bg-white.rounded-2xl.shadow-xl.overflow-hidden .h-2.w-full {
    height: 7px !important;

    border-radius: 999px !important;

    overflow: hidden !important;
  }

  /*
   * Step names.
   */

  .bg-white.rounded-2xl.shadow-xl.overflow-hidden .grid.grid-cols-4 {
    display: grid !important;

    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

    gap: 4px !important;

    width: 100% !important;

    font-size: 9px !important;
    line-height: 1.3 !important;
  }

  .bg-white.rounded-2xl.shadow-xl.overflow-hidden .grid.grid-cols-4 > div {
    min-width: 0 !important;

    overflow-wrap: anywhere !important;
  }

  /*
   * Main registration-card form area.
   */

  .bg-white.rounded-2xl.shadow-xl.overflow-hidden > .px-8.py-7 {
    padding: 24px 20px 26px !important;
  }

  /*
   * Step title.
   */

  #customer-register-form h3 {
    margin: 0 0 5px !important;

    font-size: 21px !important;
    line-height: 1.25 !important;

    color: #111827 !important;
  }

  #customer-register-form h3 + p {
    margin-top: 5px !important;

    font-size: 14px !important;
    line-height: 1.5 !important;

    color: #6b7280 !important;
  }

  /*
   * Personal-information grid.
   */

  #customer-register-form .grid.grid-cols-1 {
    display: grid !important;

    grid-template-columns: minmax(0, 1fr) !important;

    gap: 18px !important;

    width: 100% !important;
  }

  /*
   * Labels.
   */

  #customer-register-form label {
    font-size: 14px !important;

    line-height: 1.35 !important;

    color: #374151 !important;
  }

  /*
   * Form controls.
   */

  #customer-register-form input[type="text"],
  #customer-register-form input[type="email"],
  #customer-register-form input[type="tel"],
  #customer-register-form input[type="password"],
  #customer-register-form select {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    height: 56px !important;
    min-height: 56px !important;

    margin: 0 !important;

    padding: 0 15px !important;

    border: 1px solid #d1d5db !important;

    border-radius: 11px !important;

    background-color: #ffffff !important;

    color: #1f2937 !important;

    font-size: 16px !important;

    box-sizing: border-box !important;

    outline: none !important;
  }

  /*
   * Password controls need space
   * for their eye buttons.
   */

  #customer-register-form #register-password,
  #customer-register-form #password_confirmation {
    padding-right: 54px !important;
  }

  #customer-register-form .relative {
    position: relative !important;

    width: 100% !important;
  }

  #customer-register-form .relative > button.absolute {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;

    width: 52px !important;
    height: 56px !important;

    display: flex !important;

    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;

    background: transparent !important;

    box-shadow: none !important;
  }

  /*
   * Previous / Next rows.
   */

  #customer-register-form .flex.items-center.justify-between.mt-8 {
    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr) !important;

    gap: 10px !important;

    width: 100% !important;

    margin-top: 25px !important;
  }

  /*
   * Step-one Next button.
   */

  #customer-register-form .flex.justify-end.mt-8 {
    display: flex !important;

    width: 100% !important;

    margin-top: 25px !important;
  }

  #customer-register-form .flex.justify-end.mt-8 button {
    width: 100% !important;
  }

  /*
   * Registration navigation buttons.
   */

  #customer-register-form button[type="button"],
  #customer-register-form button[type="submit"] {
    min-height: 53px !important;

    border-radius: 11px !important;

    font-size: 14px !important;
  }

  #customer-register-form button.bg-primary-600 {
    background: #082f3f !important;

    color: #ffffff !important;
  }

  #customer-register-form button.bg-gray-100 {
    background: #f1f5f9 !important;

    color: #475569 !important;
  }

  /*
   * Password requirements.
   */

  #customer-register-form .grid.grid-cols-1.sm\:grid-cols-2 {
    display: grid !important;

    grid-template-columns: 1fr !important;

    gap: 7px !important;

    margin-top: 13px !important;
  }

  /*
   * Terms checkbox.
   */

  #customer-register-form input[type="checkbox"] {
    width: 19px !important;
    height: 19px !important;

    flex: 0 0 19px !important;

    margin-top: 2px !important;
  }

  /*
   * Sign-in link.
   */

  a[href="/login"] {
    color: #032d3f !important;

    font-weight: 600 !important;
  }
}
/* =========================================================
   REGISTER PAGE FIXES FOR MOBILE VIEWS
   First Credit Merchant
   ========================================================= */

/* ---------------------------------------------------------
   BASE FIXES
   --------------------------------------------------------- */

html,
body {
  min-height: 100%;
  overflow-x: hidden; /* Prevent horizontal page scrolling on mobile */
}

body {
  margin: 0;
  background: var(--bg-color);
  color: var(--text-color);
  font-family: "Lato", sans-serif;
}

* {
  box-sizing: border-box;
}

/* ---------------------------------------------------------
   CONTAINER & LAYOUT MOBILE FLUIDITY
   --------------------------------------------------------- */

/* Ensure the main container stack takes full width and prevents clipping */
.w-full.lg\:w-1\/2.flex.flex-col.justify-center.items-center {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Make inner cards and form elements strictly responsive and constrained to avoid overflow */
.w-full.max-w-2xl,
.bg-white.rounded-2xl.shadow-xl.overflow-hidden {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Fix mobile card padding so it fits neatly inside smaller screens */
@media (max-width: 640px) {
  .w-full.lg\:w-1\/2.flex.flex-col.justify-center.items-center {
    padding: 1rem !important;
  }

  .px-8 {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  .py-7,
  .py-6 {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }
}

/* ---------------------------------------------------------
   GRID & TEXT FLOW FIXES
   --------------------------------------------------------- */

/* Prevent long labels/inputs or step indicator elements from squishing or overflowing on mobile */
.grid.grid-cols-4.gap-2.mt-3 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.25rem !important;
}

.grid.grid-cols-4.gap-2.mt-3 > div {
  font-size: 0.65rem !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}

@media (min-width: 640px) {
  .grid.grid-cols-4.gap-2.mt-3 > div {
    font-size: 0.75rem !important;
  }
}

/* Form input, select, and button full-width fluid enforcement */
input,
select,
button {
  font-family: inherit;
  max-width: 100%;
}

input,
select {
  width: 100% !important;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

input::placeholder {
  color: #94a3b8;
}

button {
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease;
}

button:active {
  transform: translateY(1px);
}

/* Alpine: don't flash hidden steps before Alpine loads */
[x-cloak] {
  display: none !important;
}

/* ---------------------------------------------------------
   PAGE LOADER
   --------------------------------------------------------- */

.page-loading {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.4s 0.2s ease-in-out,
    visibility 0.4s 0.2s ease-in-out;
  z-index: 9999;
}

.page-loading.active {
  opacity: 1;
  visibility: visible;
}

.page-loading-inner {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  text-align: center;
  transform: translateY(-50%);
  transition: opacity 0.2s ease-in-out;
  opacity: 0;
}

.page-loading.active > .page-loading-inner {
  opacity: 1;
}

.loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* ---------------------------------------------------------
   LOADER ANIMATION
   --------------------------------------------------------- */

.loading-animation {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  margin-bottom: 1rem;
}

.loading-animation .circle {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 4px solid transparent;
  border-radius: 50%;
  mix-blend-mode: overlay;
  animation: registerRotateCircle 1.5s linear infinite;
}

.loading-animation .circle:nth-child(1) {
  border-top-color: var(--primary-color);
  animation-delay: 0s;
}

.loading-animation .circle:nth-child(2) {
  border-right-color: var(--primary-color-light);
  animation-delay: 0.2s;
}

.loading-animation .circle:nth-child(3) {
  border-bottom-color: var(--secondary-color);
  animation-delay: 0.4s;
}

.loading-animation .circle:nth-child(4) {
  border-left-color: var(--primary-color-light);
  animation-delay: 0.6s;
}

.loading-animation .core {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: linear-gradient(
    45deg,
    var(--primary-color-light),
    var(--primary-color-dark)
  );
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.5);
  animation: registerPulse 1s ease-in-out infinite alternate;
}

.page-loading .text {
  margin-top: 0.5rem;
  color: var(--primary-color);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  background: linear-gradient(
    90deg,
    var(--primary-color-dark),
    var(--primary-color-light),
    var(--primary-color-dark)
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: registerGradient 2s linear infinite;
}

/* ---------------------------------------------------------
   FLOATING BACKGROUND ELEMENTS
   --------------------------------------------------------- */

.floating {
  animation: registerFloating 3s ease-in-out infinite;
}

.floating-slow {
  animation: registerFloating 6s ease-in-out infinite;
}

.floating-slower {
  animation: registerFloating 8s ease-in-out infinite;
}

/* ---------------------------------------------------------
   INPUT INTERACTIONS
   --------------------------------------------------------- */

.input-wrapper {
  position: relative;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.input-wrapper:focus-within {
  transform: translateY(-2px);
}

.input-icon {
  position: absolute;
  top: 50%;
  left: 1rem;
  transform: translateY(-50%);
  color: #94a3b8;
  transition: color 0.3s ease;
}

.input-wrapper:focus-within .input-icon {
  color: var(--primary-color);
}

input:focus + .input-toggle {
  color: var(--primary-color);
}

/* ---------------------------------------------------------
   ANIMATIONS
   --------------------------------------------------------- */

@keyframes registerRotateCircle {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes registerPulse {
  from {
    transform: scale(0.8);
    opacity: 0.8;
  }
  to {
    transform: scale(1.2);
    opacity: 1;
  }
}

@keyframes registerGradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

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

/* ---------------------------------------------------------
   MOBILE RESPONSIVE OVERRIDES
   --------------------------------------------------------- */

@media (max-width: 1023px) {
  body {
    background: #f9fafb;
  }
}

/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .floating,
  .floating-slow,
  .floating-slower,
  .loading-animation .circle,
  .loading-animation .core,
  .page-loading .text {
    animation: none;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}
/* Force-hide the desktop branding panel on mobile screens */
@media (max-width: 1023px) {
  .hidden.lg\:flex {
    display: none !important;
  }
}