/* Layout Reg-Form (uses Reg-Form > child selectors below) */
  .Reg-Form{
    width: 100%;
    margin:0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:22px;
    align-items:start;
    margin-top: min(8%, 180px);
  }

  .Reg-Form > h2 {
    text-align: center;
    margin: 0 0;
    margin: auto;
   }

  .Reg-Form > a {
    display: block;
    padding: 14px 64px;
    border-radius: 6px;
    text-align: center;
    font-weight: 800;
    font-size: large;
    margin: auto;
    background: rgb(219, 37, 36);
   }

  .Reg-Form * {
    background: transparent;
  }

  /* Card base */
  .Reg-Form > .card {
    background: #263141;
    box-shadow: 0 0 20px rgb(38, 38, 38);
    border-radius:16px;
    padding:20px;
    width: 100%;
    max-width: 1200px;
    overflow:visible;
  }

  /* Hero card (top banner). It spans full width on all sizes to match the original look */
  .Reg-Form > .card.hero{
    grid-column: 1 / -1;
    padding:32px 24px;
    position:relative;
    display:flex;
    flex-direction:column;
    gap:12px;
    color:#fff;
    background: linear-gradient(180deg,rgb(219, 37, 36),rgb(289, 107, 106));
  }

  /* Reserved placeholder for crypto/QR icon (top-right in hero) */
  .Reg-Form > .card.hero > .hero__crypto{
    position:absolute;
    right:18px;
    top:18px;
    width:56px;
    height:56px;
    border-radius:8px;
    background: black;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .Reg-Form > .card.hero > .hero__crypto > svg {
    height: 46px;
    width: 46px;
    fill: rgb(219, 37, 36);
   }

  .Reg-Form > .card.hero > h1{
    margin:0;
    font-size:34px;
    font-weight:700;
    letter-spacing:-0.02em;
  }

 .Reg-Form > .Card-wrapper {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0 2%;
    width: 100%;
    max-width: 1200px;
    margin: auto;
  }
  

.Reg-Form > .Card-wrapper > .card {
    background: #263141;
    box-shadow: 0 0 20px rgb(38, 38, 38);
    border-radius:16px;
    padding:20px;
    width: 49%;
    max-width: 100%;
    margin-bottom: 2%;
    overflow:visible;
  }

  .Reg-Form > .card.hero > p{margin:0; opacity:0.95;}
  /* Card header */
  .Reg-Form > .Card-wrapper > .card > .card__header{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:12px;
  }
  .Reg-Form > .Card-wrapper > .card > .card__header > .badge{
    width:36px;
    height:36px;
    padding: 8px;
    border-radius:50%;
    display:inline-grid;
    place-items:center;
  }
  .Reg-Form > .Card-wrapper > .card > .card__title{
    font-size:20px;
    font-weight:700;
    margin:0;
  }
  .Reg-Form > .Card-wrapper > .card > .card__sub{
    color:#6b7280;
    font-size:14px;
    margin-bottom:12px;
  }

  /* Fields */
  .Reg-Form > .Card-wrapper > .card > .field{
    margin-bottom:26px;
  }
  .Reg-Form > .Card-wrapper > .card > .field > label{
    display:block;
    font-weight:600;
    margin-bottom:8px;
  }

  /* Input wrapper */
  .Reg-Form > .Card-wrapper > .card > .field > .input{
    position:relative;
    display:flex;
    align-items:center;
    gap:10px;
    border:1px solid #202535;
    border-radius:12px;
    padding:10px 12px;
    width: 100%;
    background: #141929;
  }
  .Reg-Form > .Card-wrapper > .card > .field > .input input,
  .Reg-Form > .Card-wrapper > .card > .field > .input select,
  .Reg-Form > .Card-wrapper > .card > .field > .input textarea{
    border:0;
    outline:0;
    background:transparent;
    font-size:15px;
    flex:1;
    min-width:0;
    width: 100%;
  }
  .Reg-Form > .Card-wrapper > .card > .field > .input .input__icon{
    margin-left:auto; /* keep icons on the right */
    width:22px;
    height:22px;
    display:inline-grid;
    place-items:center;
    opacity:0.75;
  }
   
  /* Name pair: two inputs side-by-side */
  .Reg-Form > .Card-wrapper > .card > .field.name-pair > .input{
    width: auto;
    gap:12px;
  }
  .Reg-Form > .Card-wrapper > .card > .field.name-pair > .input > input{
    flex:1 1 0;
  }

  /* Small round badges used inside inputs */
  .small-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    border-radius:10px;
    background:  #202535;
    flex:0 0 36px;
  }
  
    .small-badge > svg {
      height: 20px;
      width: 20px;
    }

  /* Password strength bar */
  .Reg-Form > .Card-wrapper > .card > .strength{
    height:8px;
    background:#eef0f5;
    border-radius:6px;
    overflow:hidden;
    margin-top:8px;
  }
  
  .Reg-Form > .Card-wrapper > .card > .strength > .bar{
    width:30%;
    height:100%;
    background:#f87171;
    border-radius:6px;
  }

  /* Checkbox list */
  .Reg-Form > .Card-wrapper > .card > .checkbox-list{
    display:flex;
    flex-direction:column;
    gap:18px;
    margin-bottom:18px;
  }

  .Reg-Form > .Card-wrapper > .card > .checkbox-list label{
    display:flex;
    gap:12px;
    align-items:flex-start;
  }
  .Reg-Form > .Card-wrapper > .card > .checkbox-list input[type="checkbox"]{
    margin-top:6px;
    width:18px;
    height:18px;
    background: gray;
  }

  /* Data protection block */
  .Reg-Form > .Card-wrapper > .card > .protection{
    background: rgba(0, 0, 160, 10%);
    padding:12px;
    border-radius:12px;
    margin-top:12px;
  }

 .Reg-Form > .Card-wrapper > .card > .protection li {
   margin-bottom: 10px;
  }

  /* Verification boxes */
  .Reg-Form > .Card-wrapper > .card > .verify-row{
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .Reg-Form > .Card-wrapper > .card > .verify-row > .verify{
    border-radius:12px;
    padding:14px;
    border:1px solid rgba(16,24,40,0.06);
    background: rgba(0, 0, 150, 12%);
  }
  .Reg-Form > .Card-wrapper > .card > .verify-row > .verify.green{
    background: rgba(0, 150, 0, 9%);
  }
  .Reg-Form > .Card-wrapper > .card > .verify-row > .verify > button{
    margin-top:10px;
    padding:12px 14px;
    border-radius:10px;
    border:0;
    cursor:pointer;
    font-weight:700;
  }
  .Reg-Form > .Card-wrapper > .card > .verify-row > .verify > button.primary{
    background:#1951ff;
    color:#fff;
  }
  .Reg-Form > .Card-wrapper > .card > .verify-row > .verify > button.positive{
    background:#1f8a3d;
    color:#fff;
  }

  /* utility badge color variants (used on card badges) */
  .badge--purple{ background: rgba(128, 0, 128, 20%); }
  .badge--green { background: rgba(0, 128, 0, 20%); }
  .badge--pink  { background: rgba(255, 192, 203, 20%); }

   /* Toast Notification Styles */
        .toast-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 9999;
        }

        .toast {
            min-width: 300px;
            padding: 16px 20px;
            margin-bottom: 10px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            display: flex;
            align-items: center;
            animation: slideIn 0.3s ease-out;
            opacity: 0;
            transform: translateX(100%);
        }

        .toast.show {
            opacity: 1;
            transform: translateX(0);
        }

        .toast.hide {
            animation: slideOut 0.3s ease-out forwards;
        }

        .toast-success {
            background-color: #10b981;
            color: white;
        }

        .toast-error {
            background-color: #ef4444;
            color: white;
        }

        .toast-info {
            background-color: #3b82f6;
            color: white;
        }

        .toast-warning {
            background-color: #f59e0b;
            color: white;
        }

        .toast-icon {
            width: 24px;
            height: 24px;
            margin-right: 12px;
            flex-shrink: 0;
        }

        .toast-content {
            flex: 1;
            font-size: 14px;
            font-weight: 500;
        }

        .toast-close {
            background: none;
            border: none;
            color: white;
            font-size: 20px;
            cursor: pointer;
            padding: 0;
            margin-left: 12px;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0.8;
            transition: opacity 0.2s;
        }

        .toast-close:hover {
            opacity: 1;
        }

        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateX(100%);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        @keyframes slideOut {
            from {
                opacity: 1;
                transform: translateX(0);
            }
            to {
                opacity: 0;
                transform: translateX(100%);
            }
        }

        /* Loading state for button */
        .btn-loading {
            opacity: 0.7;
            pointer-events: none;
            position: relative;
        }

        .btn-loading::after {
            content: "";
            position: absolute;
            width: 16px;
            height: 16px;
            top: 50%;
            left: 50%;
            margin-left: -8px;
            margin-top: -8px;
            border: 2px solid #ffffff;
            border-radius: 50%;
            border-top-color: transparent;
            animation: spinner 0.6s linear infinite;
        }

        @keyframes spinner {
            to {
                transform: rotate(360deg);
            }
        }

  /* minor responsive tune */
  @media (max-width:420px){
    .Reg-Form > .card.hero > h1{ font-size:28px; }
  }

@media (max-width:420px){
    .Reg-Form{ padding:0 8px; 
    margin-top: 0;
    }
    .Reg-Form > .card.hero > h1{ font-size:28px; }
  }

@media (max-width:680px) {
   .Reg-Form > .Card-wrapper {
     flex-direction: column;
     gap: 22px 0;
    }
  
   .Reg-Form > .Card-wrapper > .card {
     width: 100%;
     max-width: 560px;
     margin-bottom: 0;
    }
 }