/** * MTP Registration - Styles * Version:1.0.0 */ /* ========================================= Variables ========================================= */:root{--mtp-bg-dark:#1a1816;--mtp-bg-panel:#232019;--mtp-bg-input:#1a1816;--mtp-bg-feature:#2a2520;--mtp-border:#3d352a;--mtp-gold:#c9a84c;--mtp-gold-dark:#a07d30;--mtp-text-white:#ffffff;--mtp-text-gray:#888888;--mtp-text-muted:#a09080;--mtp-text-dim:#666666;--mtp-success:#5a8f7b;--mtp-success-dark:#3d6355;--mtp-font-display:'Caveat',cursive;--mtp-font-body:'Nunito',sans-serif}/* ========================================= Base Wrapper ========================================= */ .mtp-reg-wrapper{font-family:var(--mtp-font-body);background:var(--mtp-bg-dark);border-radius:16px;padding:32px;max-width:900px;margin:0 auto;box-sizing:border-box}.mtp-reg-wrapper *,.mtp-reg-wrapper *::before,.mtp-reg-wrapper *::after{box-sizing:border-box}.mtp-reg-container{display:grid;grid-template-columns:1fr 1fr;gap:40px}/* ========================================= Left Panel - Benefits ========================================= */ .mtp-reg-benefits{display:flex;flex-direction:column;justify-content:center}.mtp-reg-headline{font-family:var(--mtp-font-display);font-size:38px;color:var(--mtp-gold);margin:0 0 8px;line-height:1.1;font-weight:400}.mtp-reg-subhead{font-size:22px;color:var(--mtp-text-white);font-weight:600;margin:0 0 16px}.mtp-reg-desc{color:var(--mtp-text-muted);font-size:14px;line-height:1.6;margin:0 0 32px}/* Features list */ .mtp-reg-features{display:flex;flex-direction:column;gap:18px}.mtp-reg-feature{display:flex;align-items:flex-start;gap:14px}.mtp-reg-feature-icon{width:40px;height:40px;background:var(--mtp-bg-feature);border:1px solid var(--mtp-border);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--mtp-gold)}.mtp-reg-feature-text{display:flex;flex-direction:column;gap:2px}.mtp-reg-feature-text strong{color:var(--mtp-text-white);font-weight:600;font-size:15px}.mtp-reg-feature-text span{color:var(--mtp-text-gray);font-size:13px}/* ========================================= Right Panel - Form ========================================= */ .mtp-reg-form-panel{background:var(--mtp-bg-panel);border:1px solid var(--mtp-border);border-radius:12px;padding:28px}/* Step Indicator */ .mtp-reg-steps{display:flex;align-items:center;justify-content:center;gap:6px;margin-bottom:24px}.mtp-reg-step{display:flex;align-items:center;gap:6px}.mtp-reg-step-circle{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}.mtp-reg-step.pending .mtp-reg-step-circle{background:var(--mtp-border);color:var(--mtp-text-dim)}.mtp-reg-step.active .mtp-reg-step-circle{background:var(--mtp-gold);color:var(--mtp-bg-dark)}.mtp-reg-step.complete .mtp-reg-step-circle{background:var(--mtp-success-dark);color:var(--mtp-text-white)}.mtp-reg-step-label{font-size:12px;font-weight:600}.mtp-reg-step.pending .mtp-reg-step-label{color:var(--mtp-text-dim)}.mtp-reg-step.active .mtp-reg-step-label{color:var(--mtp-gold)}.mtp-reg-step.complete .mtp-reg-step-label{color:var(--mtp-success)}.mtp-reg-step-line{width:32px;height:2px;background:var(--mtp-border)}.mtp-reg-step-line.complete{background:var(--mtp-success)}/* Form Header */ .mtp-reg-form-header{text-align:center;margin-bottom:20px}.mtp-reg-badge{display:inline-block;color:var(--mtp-gold);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.08em}.mtp-reg-form-header h3{color:var(--mtp-text-white);font-size:18px;font-weight:600;margin:4px 0 0}/* Form Fields */ .mtp-reg-form{display:flex;flex-direction:column}.mtp-reg-form-row{margin-bottom:12px}.mtp-reg-form-row-2col{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mtp-reg-field{margin-bottom:12px}.mtp-reg-form-row .mtp-reg-field{margin-bottom:0}.mtp-reg-field label{display:block;font-size:12px;color:var(--mtp-text-gray);margin-bottom:6px;font-weight:600}.mtp-reg-field input{width:100%;padding:12px 14px;background:var(--mtp-bg-input);border:1px solid var(--mtp-border);border-radius:8px;color:var(--mtp-text-white);font-size:14px;font-family:var(--mtp-font-body);transition:border-color 0.2s}.mtp-reg-field input::placeholder{color:var(--mtp-text-dim)}.mtp-reg-field input:focus{outline:none;border-color:var(--mtp-gold)}/* Checkbox */ .mtp-reg-checkbox{margin-bottom:20px}.mtp-reg-checkbox label{display:flex;align-items:flex-start;gap:10px;cursor:pointer}.mtp-reg-checkbox input[type="checkbox"]{width:auto;margin-top:3px;accent-color:var(--mtp-gold)}.mtp-reg-checkbox span{color:var(--mtp-text-gray);font-size:13px;line-height:1.4}.mtp-reg-checkbox a{color:var(--mtp-gold);text-decoration:none}.mtp-reg-checkbox a:hover{text-decoration:underline}/* Error message */ .mtp-reg-error{background:rgba(192,64,46,0.15);border:1px solid rgba(192,64,46,0.3);border-radius:8px;padding:12px 14px;margin-bottom:16px;color:#e57373;font-size:13px}/* Submit button */ .mtp-reg-submit{width:100%;padding:14px;background:var(--mtp-gold);border:none;border-radius:8px;color:var(--mtp-bg-dark);font-size:15px;font-weight:700;font-family:var(--mtp-font-body);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:background-color 0.2s}.mtp-reg-submit:hover{background:var(--mtp-gold-dark)}.mtp-reg-submit:disabled{opacity:0.7;cursor:not-allowed}.mtp-reg-submit-arrow{flex-shrink:0}/* Footer */ .mtp-reg-footer{text-align:center;margin-top:16px;color:var(--mtp-text-dim);font-size:13px}.mtp-reg-footer a{color:var(--mtp-gold);text-decoration:none;font-weight:600}.mtp-reg-footer a:hover{text-decoration:underline}/* ========================================= Step 2 - Verification ========================================= */ .mtp-reg-verify-content{text-align:center;padding:20px 0}.mtp-reg-verify-icon{width:72px;height:72px;background:var(--mtp-bg-feature);border:1px solid var(--mtp-border);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px;color:var(--mtp-gold)}.mtp-reg-verify-content h2{font-size:20px;color:var(--mtp-text-white);font-weight:600;margin:0 0 12px}.mtp-reg-verify-subtitle{color:var(--mtp-text-gray);font-size:14px;margin:0 0 8px}.mtp-reg-verify-email{color:var(--mtp-gold);font-size:15px;font-weight:600;margin:0 0 28px}.mtp-reg-verify-note{background:var(--mtp-bg-input);border:1px solid var(--mtp-border);border-radius:8px;padding:16px;margin-bottom:24px}.mtp-reg-verify-note p{color:var(--mtp-text-gray);font-size:13px;margin:0;line-height:1.5}.mtp-reg-resend{width:100%;padding:14px;background:transparent;border:1px solid var(--mtp-border);border-radius:8px;color:var(--mtp-text-gray);font-size:14px;font-weight:600;font-family:var(--mtp-font-body);cursor:pointer;margin-bottom:12px;transition:border-color 0.2s,color 0.2s}.mtp-reg-resend:hover{border-color:var(--mtp-gold);color:var(--mtp-gold)}.mtp-reg-resend:disabled{opacity:0.5;cursor:not-allowed}.mtp-reg-resend-message{font-size:13px;padding:8px;margin-bottom:12px;border-radius:6px}.mtp-reg-resend-message.success{background:rgba(90,143,123,0.15);color:var(--mtp-success)}.mtp-reg-resend-message.error{background:rgba(192,64,46,0.15);color:#e57373}/* ========================================= Step 3 - Success ========================================= */ .mtp-reg-success-content{text-align:center;padding:20px 0}.mtp-reg-success-icon{width:72px;height:72px;background:#2d4a3a;border:2px solid var(--mtp-success);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px;color:var(--mtp-success)}.mtp-reg-success-welcome{font-family:var(--mtp-font-display);font-size:32px;color:var(--mtp-gold);margin:0 0 8px;font-weight:400}.mtp-reg-success-content h3{font-size:20px;color:var(--mtp-text-white);font-weight:600;margin:0 0 12px}.mtp-reg-success-content p{color:var(--mtp-text-gray);font-size:14px;margin:0 0 28px;line-height:1.5}.mtp-reg-btn-primary{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:14px;background:var(--mtp-gold);border:none;border-radius:8px;color:var(--mtp-bg-dark);font-size:15px;font-weight:700;font-family:var(--mtp-font-body);text-decoration:none;margin-bottom:12px;transition:background-color 0.2s}.mtp-reg-btn-primary:hover{background:var(--mtp-gold-dark);color:var(--mtp-bg-dark)}.mtp-reg-btn-secondary{display:block;width:100%;padding:14px;background:transparent;border:1px solid var(--mtp-border);border-radius:8px;color:var(--mtp-text-gray);font-size:14px;font-weight:600;font-family:var(--mtp-font-body);text-decoration:none;text-align:center;transition:border-color 0.2s,color 0.2s}.mtp-reg-btn-secondary:hover{border-color:var(--mtp-gold);color:var(--mtp-gold)}/* ========================================= Already Logged In ========================================= */ .mtp-reg-logged-in{text-align:center;padding:40px}.mtp-reg-logged-in p{color:var(--mtp-text-gray);font-size:16px;margin:0 0 20px}/* ========================================= Responsive ========================================= */ @media (max-width:768px){.mtp-reg-wrapper{padding:24px 20px}.mtp-reg-container{grid-template-columns:1fr;gap:24px}.mtp-reg-benefits{order:2}.mtp-reg-form-panel{order:1}.mtp-reg-headline{font-size:32px;text-align:center}.mtp-reg-subhead{font-size:18px;text-align:center}.mtp-reg-desc{text-align:center;margin-bottom:24px}.mtp-reg-features{gap:14px}.mtp-reg-form-row-2col{grid-template-columns:1fr;gap:12px}.mtp-reg-form-row .mtp-reg-field{margin-bottom:12px}.mtp-reg-form-row .mtp-reg-field:last-child{margin-bottom:0}.mtp-reg-steps{flex-wrap:wrap;gap:8px}.mtp-reg-step-line{width:20px}}@media (max-width:480px){.mtp-reg-wrapper{padding:20px 16px;border-radius:12px}.mtp-reg-form-panel{padding:20px}.mtp-reg-headline{font-size:28px}.mtp-reg-step-label{display:none}.mtp-reg-step-line{width:24px}}