.tw-container {
    max-width: 800px;
    margin: 40px auto;
    background: #fff;
    padding: 30px;
    border-radius: 0;
    overflow: hidden;
    text-align: center;
    border: 1px solid #d5d5d5;
}
            .tw-title { text-align:center; margin-bottom:10px; color:#333; }
            .tw-subtitle { text-align:center; color:#666; margin-bottom:25px; }
            .tw-step { display:none; animation: fadeIn 0.6s ease; }
            .tw-step.active { display:block;  margin-top: 60px;}
            @keyframes fadeIn { from {opacity:0; transform:translateY(10px);} to {opacity:1; transform:translateY(0);} }
            .tw-progress { display:flex; justify-content:space-between; margin-bottom:30px; position:relative; }
            .tw-progress::before { content:""; position:absolute; top:50%; left:15%; right:15%; height:2px; background:#eee; transform:translateY(-50%); z-index:0; border-radius:2px; }
            .tw-step-circle { position:relative; z-index:1; width:30px; height:30px; border-radius:50%; background:#eee; display:flex; align-items:center; justify-content:center; font-weight:bold; color:#777; transition: all 0.3s ease; cursor:pointer; }
            .tw-step-circle.active, .tw-step-circle.completed { background:#0b57d0; color:#fff; }
            .tw-step-circle.completed::after { content:""; position:absolute; top:50%; left:50%; width:100%; height:4px; background:#5a3fff; transform:translate(-50%,-50%) rotate(0deg); z-index:-1; }
            .tw-step-label { position:absolute; top:40px; font-size:13px; width:70px; margin-left:0; color:#555; }
            .tw-form-group { position: relative; margin-bottom: 20px; text-align: left; }
            .tw-form-group input, .tw-form-group select { width:100%; padding:14px 12px; border:1.5px solid #ccc; border-radius:0px; font-size:15px; background:#fff; outline:none; transition: all 0.3s ease; }


            .tw-form-group input:focus, .tw-form-group select:focus { border-color:#5a3fff; box-shadow:0 0 6px rgba(90,63,255,0.3); background:#f1f1f1; }
            .tw-form-group label { position:absolute; left:14px; top:14px; background:#fff; padding:0 6px; color:#777; font-size:14px; pointer-events:none; transition:0.3s ease; border-radius:4px; }
            


            .tw-form-group input:focus + label, .tw-form-group input:not(:placeholder-shown) + label, .tw-form-group select:focus + label, .tw-form-group select:valid + label { top:-8px; font-size:13px; color:#000; font-weight:500; }
            .tw-flex { display:flex; flex-wrap:wrap; gap:15px; }
            .tw-flex .tw-form-group { flex:1; min-width:200px; }


            /* Remove default arrow */
.tw-form-group select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%237d7d7d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 12px center;

  background-size: 16px;
  padding-right: 40px; /* space for arrow */
  cursor: pointer;
}

/* Optional hover/focus effect */
.tw-form-group select:focus {
  border-color: #5a3fff;
  box-shadow: 0 0 6px rgba(90,63,255,0.3);
}



            .tw-navigation { display:flex; justify-content:space-between; margin-top:20px; flex-wrap:wrap; gap:10px; }
            .tw-btn {
    padding: 8px 16px;
    font-size: 15px;
    font-weight: 500;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.tw-btn:hover {color: #fff}
            .tw-next { background:#0b57d0; color:#fff; }
            .tw-next:hover { background:#472ed1; }
            .tw-prev { background:#ccc; color:#333; }
            .tw-prev:hover { background:#aaa; }
            .tw-submit { background:#2b84ea; color:#fff; width:100%; margin-top:20px; margin-bottom: 24px;}
            .tw-submit:hover { background:#2074d4; }
            .tw-save { background:#ff9800; color:#fff; }
            .tw-clear { background:#dc3545; color:#fff; }
            .tw-clear:hover { background:#c82333; }
            .tw-review-table { width:100%; border-collapse: collapse; margin-bottom:20px; }
            .tw-review-table th, .tw-review-table td { border:1px solid #ddd; padding:12px; text-align:left; }
            .tw-review-table th { background:#f0f0ff; color:#333; }
            .tw-review-table td { color:#555; }
            .tw-edit-btn { background:none; border:none; color:#5a3fff; font-size:13px; cursor:pointer; text-decoration:underline; }
            .tw-success-msg { display:none; padding:40px 20px; text-align:center; animation:fadeIn 0.8s ease; }
            .tw-success-msg.active { display:block; }
            .tw-success-check { width:80px; height:80px; border-radius:50%; border:4px solid #28a745; display:flex; align-items:center; justify-content:center; margin:0 auto 20px; position:relative; }
            .tw-success-check::after { content:"✔"; font-size:40px; color:#28a745; }
            .tw-success-msg h2 { color:#28a745; margin-bottom:10px; }
            .tw-popup { position:fixed; top:20px; right:20px; background:#5a3fff; color:#fff; padding:14px 20px; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,0.2); opacity:0; transform:translateY(-20px); transition: all 0.5s ease; z-index:9999; pointer-events:none; }
            .tw-popup.show { opacity:1; transform:translateY(0); }
            @media(max-width:600px){
            .tw-flex { flex-direction:column; }
            .tw-review-table th, .tw-review-table td { font-size:14px; padding:8px; }
            }


            /* Designer Terms & Conditions Checkbox */
.tw-terms {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    font-size: 15px;
    color: #555;
}

.tw-terms input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 24px;
    height: 24px;
    border: 2px solid #ccc;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
}

.tw-terms input[type="checkbox"]:checked {
    background-color: #0b57d0;
    border-color: #0b57d0;
}

.tw-terms input[type="checkbox"]:checked::after {
    content: '✔';
    color: #fff;
    font-size: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.tw-terms label {
    cursor: pointer;
    margin: 0;
}

.tw-terms a {
    color: #0b57d0;
    text-decoration: underline;
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

.blink {
  animation: blink 1s infinite;
  color: #000; /* Optional: make it red to stand out */
  font-weight: bold;
}





/* OTP Popup */
.otp-popup {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
  z-index: 99999;
}
.otp-popup.active { display: flex; }
.otp-box {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  text-align: center;
  width: 300px;
  animation: fadeIn 0.3s ease;
}
.otp-box input {
  width: 100%;
  padding: 12px;
  margin: 15px 0;
  border: 1.5px solid #ccc;
  border-radius: 8px;
  font-size: 16px;
  text-align: center;
  letter-spacing: 4px;
}


.verify_btn {background: transparent;
    color: #555;
    text-decoration: underline;
    margin: 0;
    padding: 0;}


    .verify_btn:hover {
    color: #555;
    }