/* GLOBAL FONTS FOR TRADE KNOCK */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Manrope:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700&family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
    /* The "Clean Corporate" choice (Great for data/tables) */
    --font-primary-inter: 'Inter', sans-serif;

    /* The "Technical & Precise" choice (Great for analytics) */
    --font-data-manrope: 'Manrope', sans-serif;

    /* The "Premium Tech" choice (Great for marketing/headlines) */
    --font-brand-jakarta: 'Plus Jakarta Sans', sans-serif;

    /* The "Minimalist Luxury" choice (Great for profiles/nav) */
    --font-sleek-outfit: 'Outfit', sans-serif;

    /* --- THE MASTER SWITCH --- */
    /* Change this variable to switch the font everywhere instantly */
    --tk-main-font: var(--font-sleek-outfit);
}

/* 1. Reset high-level elements */
html, body {
    font-family: var(--tk-main-font) !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

/* 2. Force inheritance on all interactive components */
*, *::before, *::after {
    box-sizing: border-box !important;
}

button, 
input, 
optgroup, 
select, 
textarea {
    font-family: var(--tk-main-font) !important;
}

/* 3. Specific weights for that "fine" professional look */
h1, h2, h3, .tk-action-title, .tk-main-name {
    font-weight: 600 !important; /* Semi-bold for titles */
    letter-spacing: -0.02em !important;
}

p, .tk-action-desc, .tk-label {
    font-weight: 400 !important; /* Clean weight for body text */
}

/* GLOBAL FONTS FOR TRADE KNOCK END */

a:hover {
    color: #ed1e24;
    text-decoration: none;
}

.custom-control-input:checked~.custom-control-label::before {
    color: #fff;
    border-color: #ed1e24;
    background-color: #ed1e24;
    box-shadow: none;
}

.login-box, .register-box {
    width: 600px;
}

.card {
    border-radius: 0px;
}

/* Role Selector Styling */
.role-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

/* 1. The Base Container */
.role-item {
    cursor: pointer;
    margin-bottom: 0;
    perspective: 1000px; /* Prepares for smooth 3D-like transition */
}

/* 2. The Content Card */
.role-content {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 15px 5px;
    text-align: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* 3. THE HOVER EFFECT */
.role-item:hover .role-content {
    border-color: #ed1e24; /* Trade Knock Red */
    background-color: #fffafa; /* Extremely light red tint */
    transform: translateY(-4px); /* Subtle lift */
}

/* 4. Hover effect for Icons and Text */
.role-item:hover .role-content i {
    color: #ed1e24;
    transform: scale(1.1); /* Slightly enlarge icon */
}

.role-item:hover .role-content span {
    color: #ed1e24;
}

/* 5. Selected State (Keep this strong) */
.role-item input:checked + .role-content {
    border-color: #ed1e24;
    background-color: #ed1e24; /* Solid red background when selected */
}

.role-item input:checked + .role-content i,
.role-item input:checked + .role-content span {
    color: #ffffff; /* White text/icon when active */
}

/* Smooth transition for the icon */
.role-content i {
    font-size: 1.4rem;
    margin-bottom: 8px;
    color: #adb5bd;
    transition: all 0.3s ease;
}

.role-content span {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #6c757d;
    transition: all 0.3s ease;
}

.role-item input {
    display: none; /* Hide radio */
}

/* Active State */
.role-item input:checked + .role-content {
    border-color: #ed1e24;
    background-color: #ed1e24;
}

.role-item input:checked + .role-content i,
.role-item input:checked + .role-content span {
    color: #fff;
}

/* Button & Input refinements */
.btn-tk-primary {
    background: #ed1e24;
    color: white;
    border: none;
    padding: 12px;
    font-weight: 700;
    border-radius: 6px;
    letter-spacing: 1px;
    transition: 0.3s;
}

.btn-tk-primary:hover {
    background: #c41318;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(237, 30, 36, 0.3);
}

.tkf-field-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #bbb;
    z-index: 10;
}

.tkf-input-group input {
    padding-left: 45px !important;
    height: 50px;
    border-radius: 8px;
    border: 1px solid #ddd;
}

You are right; while we focused on the new Role Selector, the input fields need that specific Trade Knock aesthetic to match your other modules—including the floating icons, custom borders, and focus effects.

Here is the CSS specifically for the Identity Fields (Username/Email and Password) to ensure they look premium and consistent with your design.css.

1. Updated CSS for Input Fields (signin-inputs.css)
CSS
/* Container for the Icon and Input */
.tkf-input-group {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

/* Field Icons (Envelope & Lock) */
.tkf-field-icon {
    position: absolute;
    left: 18px;
    color: #adb5bd;
    font-size: 1.1rem;
    z-index: 10;
    transition: color 0.3s ease;
}

/* The Input Control */
.tkf-input-group .form-control {
    height: 55px; /* Taller, premium feel */
    padding-left: 50px !important; /* Space for the icon */
    padding-right: 20px;
    border: 2px solid #e9ecef;
    border-radius: 12px !important;
    font-size: 15px;
    font-weight: 500;
    color: #495057;
    background-color: #ffffff;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none;
}

/* Focus State: Brand Red Border & Shadow */
.tkf-input-group .form-control:focus {
    border-color: #ed1e24;
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(237, 30, 36, 0.1);
    outline: none;
}

/* Change Icon color on Focus */
.tkf-input-group .form-control:focus + .tkf-field-icon,
.tkf-input-group .form-control:focus ~ .tkf-field-icon {
    color: #ed1e24;
}

/* Password Toggle Button */
.tkf-password-toggle {
    position: absolute;
    right: 15px;
    background: none;
    border: none;
    color: #adb5bd;
    cursor: pointer;
    padding: 5px;
    z-index: 10;
    transition: color 0.2s ease;
}

.tkf-password-toggle:hover {
    color: #495057;
}

.tkf-password-toggle:focus {
    outline: none;
}

/* Validation Status Container (for JS feedback) */
.tkf-validation-status {
    position: absolute;
    right: 45px; /* Placed before the eye icon */
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 5;
}

/* Placeholder Styling */
.form-control::placeholder {
    color: #ced4da;
    font-weight: 400;
}

/* Container remains relative */
.tkf-input-group {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

/* Move Icons to the Right */
.tkf-field-icon {
    position: absolute;
    right: 18px; /* Changed from left to right */
    color: #adb5bd;
    font-size: 1.1rem;
    z-index: 10;
    transition: color 0.3s ease;
    pointer-events: none; /* Allows clicking the input underneath */
}

/* Adjust Input Padding */
.tkf-input-group .form-control {
    height: 55px;
    padding-left: 10% !important; /* Standard left padding */
    padding-right: 10px !important; /* Space for icon on the right */
    border: 2px solid #e9ecef;
    border-radius: 12px !important;
    font-size: 15px;
    transition: all 0.3s ease;
}

/* Password Toggle Adjustment */
/* We stack the eye icon slightly to the left of the field icon or replace it */
.tkf-password-toggle {
    position: absolute;
    right: 10px !important; /* Positioned just before the lock icon */
    background: none;
    border: none;
    color: #adb5bd;
    cursor: pointer;
    z-index: 11;
}

/* Focus State */
.tkf-input-group .form-control:focus {
    border-color: #ed1e24;
    box-shadow: 0 0 0 4px rgba(237, 30, 36, 0.1);
}

.tkf-input-group .form-control:focus + .tkf-field-icon,
.tkf-input-group .form-control:focus ~ .tkf-field-icon {
    color: #ed1e24;
}

/* Validation Status (Success Checkmark) */
.tkf-validation-status {
    position: absolute;
    right: 18px; 
    top: 50%;
    transform: translateY(-50%);
    z-index: 12;
}

.small-font {
    font-size: 14px !important;
}