@charset "utf-8";
/* CSS Document */
.onboard-container {
            width: 100%;
/*            max-width: 1200px;*/
            background: var(--bg-card);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow);
            overflow: hidden;
            border: 1px solid var(--border);
        }

        /* Header Styling */
        .onboard-header {
            background: var(--primary);
            padding: 3px 30px;
            color: white;
            text-align: center;
			justify-items: center;
	}
        

        .onboard-header h1 {
            font-size: 1.5rem;
            margin-bottom: 5px;
        }

        .onboard-header p {
            opacity: 0.5;
    		font-size: 12px;
        }

        /* Content Area */
        .onboard-content {
            padding: 12px 6px 18px 6px;
        }

        /* Progress Bar */
        .onboard-progress-container {
            display: flex;
            gap: 8px;
            justify-content: center;
            margin-bottom: 30px;
        }

        .onboard-progress-step {
            height: 6px;
            width: 50px;            
    		background: var(--bottom-line);
            border-radius: 10px;
            transition: background 0.4s ease;
        }

        .onboard-progress-step.active {
            background: var(--accent-purple);
        }

        /* Stage Wrappers */
        .onboard-stage {
            display: none;
            animation: onboardFadeIn 0.5s ease-out;
        }

        .onboard-stage.active {
            display: block;
        }

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

        /* Level Display Grid */
        .onboard-stats-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 6px;
            margin-bottom: 6px;
			    justify-items: center;
        }

        .onboard-stat-card {
            padding: 20px 3px;
            border-radius: var(--radius-md);
            text-align: center;
            border: 1px solid var(--border);
        }

        .onboard-stat-card.blue { 
/*			    background: var(--accent-purple);*/
				border-color: #dbeafe;
				height: 120px;
				width: 120px;
				border-radius: 50%;
				margin-bottom: 18px;
				border: 6px solid var(--accent-purple);
				    opacity: 0.6;
		}
        .onboard-stat-card.green {
			    background: transparent; 
			    justify-items: center;
			    display: grid;
				width: 100%;
		}

        .onboard-stat-label {
            font-size: 0.7rem;
            text-transform: uppercase;
            font-weight: 700;
            color: var(--text-blue-to-darkblue-color);
            margin-bottom: 1px;
            display: block;
        }

        .onboard-stat-value {
            font-size: 2.5rem;
            font-weight: 500;
            color: var(--text-blue-to-darkblue-color);
        }

        .onboard-stat-value.small { 
			font-size: 1.5rem; 
/*			color: #065f46; */
		}

        /* Range Slider Custom CSS */
        .onboard-slider-container {
               margin: 3px 0px 18px 0;
			
        }

        .onboard-slider-label {
            font-size: 0.75rem;
    		color: var(--accent-purple);
/*            margin-bottom: 10px;*/
            display: block;
			text-align: center;
        }

        input[type=range].onboard-range {
            -webkit-appearance: none;
            width: 100%;
            height: 8px;
            background: var(--accent-purple);
            border-radius: 5px;
            outline: none;
        }

        input[type=range].onboard-range::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 24px;
            height: 24px;
            background: var(--primary);
            cursor: pointer;
            border-radius: 50%;
            border: 3px solid white;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        }

        /* Calculated Results Box */
        .onboard-results-box {
            background: transparent;
            border: 2px dashed var(--border-color);
/*            border-radius: var(--radius-md);*/
            padding: 3px;
            margin-bottom: 25px;
            display: flex;
            justify-content: space-around;
        }

        .onboard-result-item { 
			display: grid;
			align-items: center;
			gap: 3px;
			justify-items: center;
		}
        .onboard-result-item i { 
			color: var(--primary); 
		}
        .onboard-result-data p { 
			font-size: 0.7rem; 
			font-weight: bold; 
			color: var(--text-blue-to-darkblue-color); 
			text-transform: uppercase; 
		}
        .onboard-result-data span { 
			font-size: 1.8rem; 
			font-weight: 800; 
			color: var(--text-blue-to-darkblue-color);
		}

        /* Buttons */
        .onboard-btn {
            width: 100%;
            padding: 6px;
            border: none;
                   
            color: #000f50;
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
			    background: var(--blue-to-blue);
			border-radius: 36px;
			max-width: 500px;
			justify-self: anchor-center;
        }

        .onboard-btn:hover { 
			background:  var(--accent-pink);
			transform: translateY(-1px); 
			color: #fff;
		}
        .onboard-btn:disabled { 
			background: #cbd5e1; 
			cursor: not-allowed; 
			}
        .onboard-btn-indigo { 
			    background: #00bbff;
    			color: #000f50;
		}
        .onboard-btn-indigo:hover { 
			background: #ec038a;
			color: #fff;
		}

        /* Input Styling */
        .onboard-input-group {
            margin-bottom: 20px;
            position: relative;
        }

        .onboard-input-group i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-muted);
        }

        .onboard-form-control {
            width: 100%;
            padding: 15px 15px 15px 45px;
            border: 1px solid var(--border);
            background: #f8fafc;
            border-radius: 8px;
            font-size: 1rem;
            outline: none;
            transition: border 0.3s;
        }

        .onboard-form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }

        .onboard-otp-input {
            text-align: center;
            letter-spacing: 0.5rem;
            font-size: 1.5rem;
            padding-left: 15px;
        }

        /* Profile Verification Card */
        .onboard-profile-confirm {
            background:  var(--border-color);
            border: 1px solid var(--border);
            padding: 20px;
            margin-bottom: 25px;
/*            	display: flex;*/
            align-items: center;
            gap: 15px;
			border-radius: 8px;
    		margin-top: 21px;
        }

        .onboard-avatar {
            width: 50px;
            height: 50px;
            background: var(--primary);
            color: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
        }

        /* Questions */
        .onboard-question-block { 
			margin-bottom: 20px; 
		}

        .onboard-question-label { 
			font-size: 0.9rem; 
			font-weight: 600; 
			display: block; 
			margin-bottom: 8px; 
		}
        textarea.onboard-form-control { 
			padding: 15px; 
			height: 80px; 
			resize: none; 
		}

        /* Select styling */
        select.onboard-form-control { 
			padding-left: 15px; 
			appearance: none; 
		}

        .onboard-note-box {
            background: #fff7ed;
            border: 1px solid #ffedd5;
            padding: 15px;
            border-radius: 8px;
			font-size: 0.75rem;
			color: #000f50;
            margin-bottom: 20px;
            display: flex;
            gap: 10px;
        }

        .onboard-footer-text {
            text-align: center;
            color: var(--bottom-line);
            font-size: 0.7rem;
            margin-top: 30px;
        }

        @media (max-width: 480px) {
            .onboard-stats-grid { 
				grid-template-columns: 1fr; 
			}
            .onboard-header { 
				padding: 3px 12px; 
				line-height: normal;
			}
			
			
			.onboard-progress-container {
				
				gap: 8px;
				justify-content: center;
				margin-bottom: 3px;
			}
        }
.onboard-result-data{
	text-align: center;
	    line-height: normal;
	    margin-bottom: 12px;
}

.onboard-slider-msg {
               font-size: 12px;
			/* color: var(--accent-purple); */
			/* margin-bottom: 10px; */
			display: block;
			text-align: center;
			padding-bottom: 18px;
        }
.onboard-otp-screen2{
	text-align:center; 
	margin-top:50px;
} 

.onboard-info1{
	text-align:center; 
/*	margin-top:50px;*/
	margin-bottom: 16px;
	font-size: 14px;
} 

.clickpidbutton{
	background: var(--border-color);
    font-size: 14px;
    text-align: center;
    border-radius: 36px;
    width: 40%;
    justify-self: anchor-center;
    font-weight: 700;
	margin-bottom: 45px;
}
/* ======================================================
   ONBOARD – OTP OVERLAY (NAMESPACED)
====================================================== */

.onboard-otp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* Popup box */
.onboard-otp-popup {
  background: #ffffff;
  width: 90%;
  max-width: 380px;
  padding: 24px;
  border-radius: 14px;
  text-align: center;
  position: relative;
  animation: onboardOtpPopIn 0.25s ease;
}

/* Pop animation */
@keyframes onboardOtpPopIn {
  from {
    transform: scale(0.92);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Close button */
.onboard-otp-close-btn {
  position: absolute;
  top: 10px;
  right: 12px;
  border: none;
  background: none;
  font-size: 18px;
  cursor: pointer;
  color: #444;
}

/* Info text */
.onboard-otp-info {
  font-size: 13px;
  color: #555;
  margin-bottom: 14px;
  line-height: 1.4;
}

/* OTP boxes container */
.onboard-otp-container {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 12px;
}

/* OTP input box */
.onboard-otp-input {
  width: 42px;
  height: 48px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  border: 1px solid #ccc;
  border-radius: 6px;
}

/* Focus state */
.onboard-otp-input:focus {
  outline: none;
  border-color: #111;
  box-shadow: 0 0 0 2px rgba(0,0,0,0.08);
}

/* Verify button spacing */
.onboard-otp-popup .onboard-btn {
  margin-top: 18px;
  width: 100%;
}

/* Resend link */
.onboard-otp-popup .onboard-link-btn {
  margin-top: 10px;
  font-size: 13px;
  color: #555;
  background: none;
  border: none;
  cursor: pointer;
}

/* Mobile safe */
@media (max-width: 480px) {
  .onboard-otp-popup {
    padding: 20px;
  }
}

.onboard-card {
  background: var(--card-background);
/*  border: 1px solid #e5e7eb;*/
  border-radius: 12px;
    padding: 12px 12px 24px 12px;
    margin-bottom: 12px;
}

.onboard-section-title {
  font-size: 15px;
  font-weight: 700;
/*  margin-bottom: 15px;*/
	    color: #ec038a;
}

.onboard-profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 15px;
}

.onboard-input {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
}

.onboard-toggle-grid {
  display: flex;
  gap: 15px;
}

.onboard-toggle-grid2 {
      display: grid;
    gap: 15px;
    margin-top: 10px;
}
.onboard-toggle {
    flex: 1;
    border: 3px solid #d1d5db;
    border-radius: 36px;
    padding: 2px;
    text-align: center;
    cursor: pointer;
    font-size: 16px;
	background: #000f50;
	margin-top: 15px;
}

.onboard-toggle:hover {
    
    border: 3px solid #ec038a;
    color:#fff;
    
/*	background: #ec038a;	*/
}

.onboard-toggle input {
  display: none;
	
}

.onboard-toggle input:checked + span {
  font-weight: 700;
  color: #ec038a;
	
}

.onboard-revenue-display {
  font-size: 21px;
  font-weight: 800;
  text-align: center;
  margin-top: 10px;
	color: #00bbff;
}
.onboard-user-name{
	font-size: 18px;
    color: #00bbff;
    font-weight: 600;
}

.onboard-user-meta{
	font-size: 12px;
	 opacity: 0.7;
	
}

/*
#onboard-userPayout{
	font-size: 18px;
    font-weight: 600;
    color: var(--blue-to-blue);
}
*/
/*
#onboard-userLevel{
	font-size: 18px;
    font-weight: 600;
    color: var(--text-blue-to-darkblue-color);
}
*/


#onboard-primaryPhone{
	    font-size: 16px;
    color: var(--background-color);
    background: var(--slider-nav-hover-bg);
	
}

.onboard-step-error {
  background: #fff3cd;
  color: #664d03;
  border: 1px solid #ffecb5;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  margin-bottom: 14px;
	    margin-top: 24px;
}

.onboard-char-count {
  font-size: 12px;
  color: #777;
  text-align: right;
  margin-top: 4px;
}

.onboard-section-title2{
	font-size: 15px;
  font-weight: 700;
/*  margin-bottom: 15px;*/
color: var(--accent-purple);
	
}
.apl-slider { margin-top: 15px; }
.apl-track {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  position: relative;
  height: 50px;
  border-radius: 8px;
  overflow: hidden;
  font-size: 12px;
  text-align: center;
}

.apl-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.very-poor { background:#b71c1c; }
.poor { background:#e53935; }
.average { background:#fb8c00; }
.normal { background:#fdd835; color:#000; }
.good { background:#43a047; }
.very-good { background:#1e88e5; }
.excellent { background:#8e24aa; }

.apl-center-marker {
  position: absolute;
  left: 50%;
  top: -18px;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: bold;
}

.apl-user-marker {
    position: absolute;
    top: 0px;
    width: 10px;
    height: 14px;
    background: #fff;
    transform: translateX(-50%);
    margin-left: 9px;
}

.apl-result { margin-top: 8px; font-weight: 700; }
.apl-decision { font-size: 13px; color:#444; }


.onboard-payout-display {
  text-align: center;
  margin-bottom: 20px;
}

.onboard-payout-display .label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

.onboard-payout-display .value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-blue-to-darkblue-color);
}

.perf-level-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--blue-to-blue);
  margin-top: 6px;
}

.onboard-revenue-display-card {
  text-align: center;
  margin-top: 18px;
  padding: 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
}

.onboard-revenue-display-card .label {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

.onboard-revenue-display-card .value {
  font-size: 1.1rem;
  font-weight: 600;
}

.simple-rule-note {
  display: block;
}

.simple-rule-header {
  width: 100%;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 10px;
  color: var(--text);
}

.simple-rule-list {
  margin: 0;
  padding-left: 18px;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.simple-rule-list li {
  margin-bottom: 6px;
  line-height: 1.4;
}


.onboard-highlight-text {
  font-size: 0.95rem;
/*  font-weight: 500;*/
  margin-bottom: 12px;
/*	    color: #999aaa;*/
}

.onboard-earning-box {
  background: rgba(0,0,0,0.03);
  padding: 14px;
  border-radius: var(--radius-md);
}

.onboard-earning-box .muted {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 4px;
}

.text-h5-c {
    font-size: 14px;
    color: var(--accent-purple);
    text-align: center;
	text-transform: uppercase;
}

.text-h5-c2 {
    font-size: 12px;
    color: var(--blue-to-blue);
    text-align: center;
    text-transform: uppercase;
    font-weight: 800;
}

.text-h6-c {
    font-size: 10px;
    color: var(--text-blue-to-darkblue-color);
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    margin: 12px 12px;
}

#onboard-s3-userPayout{
	    font-size: 18px;
    font-weight: 600;
    color: var(--text-blue-to-darkblue-color);
}
/*

#onboard-s4-workMode{
	 font-size: 18px;
    font-weight: 600;
    color: var(--text-blue-to-darkblue-color);
}
*/


/*
#onboard-s4-userPayout{
	 font-size: 18px;
	font-weight: 600;
    color: var(--text-blue-to-darkblue-color);
}
*/



/*
#onboard-s4-userLevel{
	 font-size: 18px;
	font-weight: 600;
    color: var(--text-blue-to-darkblue-color);
}
*/

#onboard-s4-dartoRevenue{
/*	 font-size: 18px;*/
	font-weight: 600;
    color: var(--text-blue-to-darkblue-color);
}

#onboard-s4-dartoMonthlyTarget{
/*	font-size: 18px;*/
	font-weight: 600;
    color: var(--text-blue-to-darkblue-color);
	
}

/*
#perfRevenueValue{
	
	font-weight: 600;
    color: var(--text-blue-to-darkblue-color);
}
*/
/*
.onboard-toggle2 {
    flex: 1;
    border: 3px solid #d1d5db;
    border-radius: 36px;
    padding: 2px;
    text-align: center;
    cursor: pointer;
    font-size: 16px;
	background: #000f50;
}



.onboard-toggle2:hover {
    
    border: 3px solid #ec038a;
    color:#fff;

}*/

.onboard-toggle2 {
   
    font-size: 16px;
	
}
.onboard-toggle2 input[type="radio"] {
  transform: scale(1.4);   /* increase size */
  margin-right: 12px;
  cursor: pointer;
}
.apl-user-revenue,
.apl-darto-revenue{
	font-size: 14px;
    margin-bottom: 12px;
}
#apl-userRevenueText,
#apl-dartoRevenueText{
	font-size: 16px;
    color: var(--blue-to-blue);
	font-weight: 600;
}
	
#onboard-userDesignation{
/*	font-size: 16px;*/
    color: var(--blue-to-blue);
	font-weight: 600;
}

/*
#onboard-s4-territory{
	font-size: 16px;
    color: var(--blue-to-blue);
	font-weight: 600;
}
*/

.onboard-slider-container {
  width: 100%;
/*  max-width: 1200px;*/
  margin: auto;
  position: relative;
}

.onboard-slider-markers {
  position: relative;
  height: 14px;
  margin-bottom: 1px;
  margin-top: 16px;
}

.onboard-slider-markers span {
  position: absolute;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 600;
  color: #555;
}

.onboard-range {
  width: 100%;
}

.label{
	font-size: 14px;
}

.value{
	font-size: 14px;
    color: var(--blue-to-blue);
	font-weight: 600;
}

.onboard-stage {
  display: none;
}

.onboard-stage.active {
  display: block;
}



.onboard-slider-container {
  overflow: hidden;              /* prevents scroll indicators */
  touch-action: none;            /* disables horizontal pan */
}

.onboard-range {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  touch-action: none;            /* IMPORTANT */
}

/* Remove focus outline (optional) */
.onboard-range:focus {
  outline: none;
}

.onboard-subvalue-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.onboard-subvalue {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.onboard-inline-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.onboard-inline-item {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
}

.onboard-inline-item .label {
  color: var(--text-muted);
}

.onboard-inline-item.highlight .value {
  font-weight: 600;
}

.onboard-summary-item{
	
}


.onboard-inline-item {
  display: flex;
  justify-content: space-between; /* 👈 equal spacing */
  align-items: center;
  gap: 12px;
  width: 100%;
}

.onboard-inline-item .label {
  font-weight: 500;
  color: var(--text-muted);
}

.onboard-inline-item .value {
  font-weight: 600;
  white-space: nowrap;
}

.onboard-inline-item .label {
  flex: 1;
}

.onboard-inline-item .value {
  flex-shrink: 0;
  text-align: right;
}

/*
@media (max-width: 600px) {
  .onboard-level-item,
  .onboard-inline-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .value {
    font-weight: 600;
  }
}
*/

.onboard-level-item{
	
}

/*
.onboard-level-item .value,
.onboard-inline-item .value {
  text-align: right;
  white-space: nowrap;
	justify-content: space-between;
}
*/

.onboard-subvalue {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  color: var(--text-muted);
}


/* Parent container */
.onboard-level-summary {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Each row */
.onboard-level-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between; /* 🔑 LEFT ↔ RIGHT */
  align-items: center;
  width: 100%;
}

/* Label & value */
.onboard-level-item .label {
  color: var(--text-muted);
}

/*
.onboard-level-item .value {
  font-weight: 600;
  text-align: right;
}
*/

/* Designation row (same div, justified) */
.onboard-subvalue {
  display: flex;
  justify-content: space-between; /* 🔑 */
  width: 100%;
  font-size: 0.85rem;
  margin-top: 4px;
  color: var(--text-muted);
}

/*
@media (max-width: 600px) {
  .onboard-level-item,
  .onboard-subvalue {
    flex-direction: column;
    align-items: flex-start;
  }

  .value {
    margin-top: 4px;
  }
}
*/

/* Grid wrapper */
.onboard-summary-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Normal summary rows */
.onboard-summary-item,
.onboard-inline-item {
  display: flex;
  justify-content: space-between; /* 🔑 LEFT ↔ RIGHT */
  align-items: center;
  width: 100%;
  gap: 12px;
}

/* Label */
.onboard-summary-item .label,
.onboard-inline-item .label {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* Value */
.onboard-summary-item .value,
.onboard-inline-item .value {
  font-weight: 600;
  text-align: right;
  white-space: nowrap;
}

/* Highlight row (performance) */
.onboard-inline-item.highlight {
/*  padding: 10px 12px;*/
/*  background: rgba(236, 3, 138, 0.06);*/
  border-radius: 8px;
}

.onboard-congrats {
  margin-top: 10px;
  padding: 14px 16px;
  border-radius: 10px;
  background: linear-gradient(
    90deg,
    rgba(236,3,138,0.08),
    rgba(34,197,94,0.08)
  );
}

.onboard-congrats-title {
  margin: 0 0 6px 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--accent-aqua);
}

.onboard-congrats-text {
	margin: 0;
	font-size: 0.9rem;
	color: var(--text);
}

#savingOverlay{
	display:flex;
	 position:fixed;
	 top:0;
	left:0;
	 width:100%;
	 height:100%;
	background:rgba(0,0,0,0.7);
	z-index:9999;
	display:none;
	flex-direction:column;
	align-items:center;
	justify-content:center;
}

#spinner{
	border:4px solid #f3f3f3;
	border-top:4px solid #ec038a;
	border-radius:50%;
	width:40px;
	height:40px;
	animation: spin 1s linear infinite;
}


.onboard-final-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 25px;
}

.onboard-btn-outline {
  background: var(--error-color);
    /* border: 1px solid #ccc; */
    color: #fff;
}

.onboard-btn-primary {
      background: var(--text-blue-to-darkblue-color);
    color: #000f50;
}
}