.hidden {
    display: none;
}

         * {
             box-sizing: border-box;
         }
    
         body {
             font-family: 'Open Sans', sans-serif;
             background-color: #f4f8fb;
             margin: 0;
             padding: 0;
             display: flex;
             flex-direction: column;
             align-items: center;
             min-height: 100vh;
             color: #444;
         }
    
         /* --- Header Logo --- */
         .header-logo {
             text-align: center;
             padding: 25px 0;
             font-size: 28px;
         }
    
         .logo-icon {
             color: #ff7353;
             margin-right: 5px;
         }
    
         .logo-text {
             color: #444;
         }
    
         .logo-text strong {
             color: #1d73be;
         }
    
         /* --- Main Container --- */
.main-container {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
}
    
         /* --- Steps Navigation Bar --- */
         .trade-steps-container {
             display: flex;
             width: 100%;
             box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
             background: #fff;
             border-radius: 4px 4px 0 0;
         }
    
         .trade-steps-single {
             flex: 1;
             background: #fff;
             text-align: center;
             padding: 25px 10px;
             border-right: 1px solid #eee;
             color: #bbb;
             position: relative;
             transition: all 0.3s ease;
         }
    
         .trade-steps-single:last-child {
             border-right: none;
         }
    
         .trade-steps-single i.icon-main {
             font-size: 26px;
             display: block;
             margin-bottom: 12px;
         }
    
         .step-title {
             font-size: 11px;
             font-weight: 700;
             text-transform: uppercase;
             line-height: 1.4;
         }
    
         /* Active Step */
         .trade-steps-single.active {
             background-color: #1d73be;
             color: #fff;
         }
    
         /* Completed Step (Green tick style logic if needed, but keeping blue for now) */
         .trade-steps-single.completed {
             color: #1d73be;
             /* Blue icon when done but not active */
         }
    
         /* Arrow for active step */
         .trade-steps-single.active::after {
             content: '';
             position: absolute;
             bottom: -8px;
             left: 50%;
             transform: translateX(-50%);
             border-left: 8px solid transparent;
             border-right: 8px solid transparent;
             border-top: 8px solid #1d73be;
             z-index: 2;
         }
    
         /* --- Form Card Area --- */
         .form-card {
             background: #fff;
             margin-top: 25px;
             padding: 40px 50px;
             box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
             border-radius: 4px;
             text-align: left;
         }
    
         .hidden {
             display: none;
         }
    
         /* --- Typography --- */
         .main-title {
             font-size: 26px;
             font-weight: 700;
             color: #445;
             margin-bottom: 15px;
         }
    
         .main-subtitle {
             font-size: 16px;
             color: #666;
             margin: 0 0 30px 0;
             padding-bottom: 25px;
             border-bottom: 1px solid #eee;
             line-height: 1.5;
         }
    
         /* --- Input Fields --- */
         .form-group {
             margin-bottom: 20px;
         }
    
         label {
             display: block;
             font-size: 11px;
             font-weight: 700;
             color: #888;
             text-transform: uppercase;
             margin-bottom: 8px;
             letter-spacing: 0.5px;
         }
    
         input[type="text"],
         input[type="password"] {
             width: 100%;
             padding: 14px 15px;
             font-size: 16px;
             color: #333;
             border: 1px solid #ddd;
             border-radius: 3px;
             outline: none;
             transition: border 0.3s;
         }
    
         input:focus {
             border-color: #1d73be;
         }
    
         .special-note {
             background: #f0f7fd;
             padding: 10px;
             font-size: 13px;
             color: #1d73be;
             margin-top: 5px;
             border-radius: 3px;
             display: flex;
             align-items: center;
         }
    
         .special-note i {
             margin-right: 8px;
         }
    
         /* --- Buttons --- */
         .btn-container {
             margin-top: 30px;
         }
    
         button.continue {
             width: 100%;
             background-color: #ff7353;
             color: white;
             border: none;
             padding: 16px;
             font-size: 18px;
             font-weight: 600;
             border-radius: 4px;
             cursor: pointer;
             transition: background 0.2s;
         }
    
         button.continue:hover {
             background-color: #e65c3e;
         }
    
         button.back {
             background: none;
             border: none;
             color: #999;
             font-size: 14px;
             cursor: pointer;
             text-decoration: underline;
             margin-top: 15px;
             width: 100%;
         }
    
         /* --- STEP 2: TRADE CHECKBOX GRID --- */
         .trades-grid {
             display: grid;
             grid-template-columns: 1fr 1fr;
             /* 2 Columns */
             gap: 15px;
         }
    
         .checkbox-single {
             display: flex;
             align-items: center;
             padding: 10px;
             cursor: pointer;
             border: 1px solid transparent;
             border-radius: 4px;
         }
    
         .checkbox-single:hover {
             background-color: #f9f9f9;
         }
    
         /* Custom Checkbox UI */
         .custom-check {
             width: 20px;
             height: 20px;
             border: 2px solid #ddd;
             border-radius: 3px;
             margin-right: 12px;
             position: relative;
         }
    
         /* When active/checked via JS */
         .checkbox-single.checked .custom-check {
             background-color: #1d73be;
             border-color: #1d73be;
         }
    
         .checkbox-single.checked .custom-check::after {
             content: '✓';
             color: white;
             font-size: 14px;
             position: absolute;
             top: -2px;
             left: 3px;
         }
    
         .trade-label {
             font-size: 15px;
             color: #555;
         }
    
         .cat-link {
             font-size: 13px;
             color: #ff7353;
             margin-top: 20px;
             display: block;
             text-decoration: none;
         }
    
         /* --- STEP 3: TERMS --- */
         .terms-checkbox {
             display: flex;
             align-items: center;
             margin-top: 20px;
             font-size: 14px;
             color: #555;
         }
    
         .terms-checkbox input {
             margin-right: 10px;
             transform: scale(1.2);
         }
    
         .terms-checkbox a {
             color: #1d73be;
             text-decoration: none;
         }
  .checkbox-single {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.checkbox-single .custom-check {
    width: 18px;
    height: 18px;
    border: 2px solid #ccc;
    border-radius: 4px;
    margin-right: 10px;
    position: relative;
}

/* ✅ CHECK MARK WHEN ACTIVE */
.checkbox-single.active .custom-check::after {
    content: "✓";
    position: absolute;
    top: -2px;
    left: 3px;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
}

.checkbox-single.active .custom-check {
    background: #ff7353;   /* theme color */
    border-color: #ff7353;
}
 a.smp-logout-btn {
    background: red;
    padding: 10px;
    border-radius: 4px;
    color: white;
    margin: 10px 0px;
} 

         /* Responsive */
         @media (max-width: 600px) {
             .form-card {
                 padding: 25px;
             }
    
             .trades-grid {
                 grid-template-columns: 1fr;
             }
    
             /* 1 Column on mobile */
             .step-title {
                 font-size: 9px;
             }
         }