/* === Import Professional Font === */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
/* ===================================================== */
/* ============== Pallette ============================== */
/* ====================================================== */
:root {
    /* Company A (JALUR) Colors */
    --jalur-dark: #000000;
    --jalur-primary: rgb(255, 25, 25);
    --jalur-secondary: #ffffff;
    --jalur-dark-light: #666666;
    --jalur-primary-light: rgba(255, 25, 25, 0.5);
    --jalur-secondary-light: #d3d3d3;

    /* Company B (PTR) Colors */
    --ptr-dark: #000000;
    --ptr-primary: rgb(23, 55, 94);
    --ptr-secondary: rgb(236, 151, 82);
    --ptr-dark-light: #666666;
    --ptr-primary-light: rgba(23, 55, 94, 0.5);
    --ptr-secondary-light: #d3d3d3;

	/* ERPT Color Scheme */
    --erpt-dark: #000000;  /* Black for strong emphasis and text */
    --erpt-primary: #204D74;  /* Deep blue for primary interface elements */
    --erpt-secondary: #ffffff; /*#57A0D3;  /* Lighter blue for secondary interface elements */
    --erpt-dark-light: #666666;  /* Grey for less emphasized text or shadows */
    --erpt-primary-light: #B0CFE7;  /* Light blue for backgrounds or lighter elements */
    --erpt-secondary-light: rgba(87, 160, 211, 0.5);  /* Translucent light blue for overlays or decorative elements */

	
    /* Greyscale Colors */
    --greyscale-dark: #333333;
    --greyscale-primary: #666666;
    --greyscale-secondary: #999999;
    --greyscale-dark-light: #666666;
    --greyscale-primary-light: #cccccc;
    --greyscale-secondary-light: #e6e6e6;
	
    /* Testing Colors */
	--testing-pink: #ff69b4; /* Hot Pink */
}

/* ERPT */
/* :root { */
    /* --dark: var(--erpt-dark); */
    /* --dark-light: var(--erpt-dark-light); */
    /* --primary: var(--erpt-primary); */
    /* --secondary: var(--erpt-secondary); */
    /* --primary-light: var(--erpt-primary-light); */
    /* --secondary-light: var(--erpt-secondary-light); */
	/* --red: rgb(255, 25, 25); */
/* } */

/* GREYSCALE */
/* :root { */
    /* --dark: var(--greyscale-dark); */
    /* --dark-light: var(--greyscale-dark-light); */
    /* --primary: var(--greyscale-primary); */
    /* --secondary: var(--greyscale-secondary); */
    /* --primary-light: var(--greyscale-primary-light); */
    /* --secondary-light: var(--greyscale-secondary-light); */
/* } */

/* PTR */
/* :root {
    --dark: var(--ptr-dark);
    --dark-light: var(--ptr-dark-light);
    --primary: var(--ptr-primary);
    --secondary: var(--ptr-secondary);
    --primary-light: var(--ptr-primary-light);
    --secondary-light: var(--ptr-secondary-light);
}

 */
/* JALUR */
:root {
    --dark: var(--jalur-dark);
    --dark-light: var(--jalur-dark-light);
    --primary: var(--jalur-primary);
    --primary-light: var(--jalur-primary-light);
    --secondary: var(--jalur-secondary);
    --secondary-light: var(--jalur-secondary-light);
}

/* TESTING - Apply to see what page elements are not following the standard colors */
/* :root {
    --dark: var(--testing-pink);
    --primary: var(--testing-pink);
    --secondary: var(--testing-pink);
    --primary-light: var(--testing-pink);
    --secondary-light: var(--testing-pink);
} */






/* ===================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* === General Styles (No Background Override) === */
body {
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    /* height: 100vh; */
    /* display: flex; */
	height: auto; /* Instead of 100vh, let content flow */
    /* display: block; /* Prevents flexbox from centering everything unnaturally */ */
    flex-direction: column;
    justify-content: center; /* Centers vertically */
    align-items: center; /* Centers horizontally */
}

/* ===================================================== */
/* === Header Styling (Centered & Consistent) === */
.center-container {
    width: 90%;
    max-width: 600px;
    border: 2px solid var(--secondary-light); /* Adds border */
    border-radius: 4px; /* Tight corner radius */
    background-color: white; /* Prevents transparency issues */
    /* padding: 5px; /* Ensures content does not touch border */ 
	margin: 5px auto 0 auto; /* Adds 5px space at the top */
    box-sizing: border-box;
}



header {
    width: 100%; /* Matches center-container width */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--secondary-light) !important; /* Ensure color applies */
    border-radius: 4px 4px 0 0; /* Matches center-container border rounding */
    z-index: 1; /* Ensures header is on top */
    position: relative; /* Prevents it from inheriting transparency */
}






/* === Logo Container (Stacking Logo Above Heading) === */
.logo-container {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    align-items: center; /* Center them horizontally */
    text-align: center;
    margin-bottom: 15px; /* Adds spacing below */
}

.logo {
    /* height: 60px; /* Ensures proper height */ */
    max-width: 400px; /* Prevents excessive width */
    object-fit: contain; /* Ensures no distortion */
}

.pageheading {
    font-size: 24px;
    font-weight: bold;
    color: var(--dark);
    margin-top: 10px; /* Adds spacing between logo and heading */
}



/* ===================================================== */
/* === Centered Main Authentication Box (No Background Override) === */
/* Center the form */
main {
    width: 100%;
    /* max-width: 400px; */
    padding: 20px;
    /* background: white; */
    /* border-radius: 8px; */
    /* box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); */
    text-align: center;
}


/* ===================================================== */
/* === Form Styling === */
form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

label {
    color: var(--dark);
    font-weight: 500;
    text-align: left;
    width: 100%;
    margin-top: 12px;
    font-size: 15px;
}

/* input[type="email"],  */
/* input[type="password"] { */
    /* width: 100%; */
    /* padding: 12px; */
    /* margin-top: 5px; */
    /* border: 1px solid var(--secondary); */
    /* border-radius: 5px; */
    /* font-size: 16px; */
    /* background-color: white; */
    /* font-family: 'Inter', sans-serif; */
/* } */

/* ===================================================== */
/* === Button Styling === */
button {
    width: 100%;
    padding: 12px;
    margin-top: 15px;
    background-color: var(--primary);
    color: white;
    font-weight: 600;
    font-size: 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease;
    font-family: 'Inter', sans-serif;
}

button:hover {
    background-color: var(--primary-light);
}

/* ===================================================== */
/* === Password Rules Styling === */
#passwordRulesTitle {
    font-size: 12px;
    font-weight: bold; /* Make heading bold */
    margin-bottom: 5px; /* Space below heading */
}

/* Password Strength List */
#passwordRules {
    list-style-type: none;
    padding: 0;
    margin: 0;
    list-style: none;
    padding: 0;
    margin-top: 10px;
    text-align: left;
}

#passwordRules li {
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 400;
    margin-bottom: 5px;
    color: var(--dark);
    font-family: 'Inter', sans-serif;
}



/* ✅ Password Validation Icons */
.valid {
    color: green !important;
}
.invalid {
    color: red !important;
}

/* ===================================================== */
/* === Terms & Conditions Section === */
.terms-container {
    display: flex;
    align-items: center; /* Ensures both checkbox and text align properly */
    gap: 8px; /* Adds space between checkbox and text */
    width: 100%;
    justify-content: flex-start; /* Aligns content to the left */
}

/* Ensure checkboxes and labels are aligned */
.terms-container input {
    margin-right: 8px; /* Space between checkbox and text */
    transform: scale(1.2); /* Slightly larger checkboxes for better usability */
}


/* Adjust checkboxes for consistent size and alignment */
.terms-container input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
    appearance: none; /* Removes default browser styling */
    border: 1px solid var(--dark-light);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

/* Ensure checkboxes show correctly when checked */
.terms-container input[type="checkbox"]:checked::before {
    content: "✔";
    font-size: 12px;
    color: var(--dark);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Style the labels correctly */
.terms-container label {
    font-size: 14px;
    font-weight: 400;
    color: var(--dark);
    display: inline-block; /* Ensures text stays properly aligned */
    white-space: nowrap; /* Prevents text from wrapping under the checkbox */
}

/* ===================================================== */
/* === Password Match Error === */
#passwordMatchMessage {
    color: red;
    display: none;
}

/* ===================================================== */
/* === Mobile & Tablet Responsiveness === */
@media (max-width: 768px) {
    main {
        width: 95%;
        padding: 20px;
    }

    h2 {
        font-size: 20px;
    }

    button {
        padding: 12px;
        font-size: 15px;
    }
}


/* ===================================================== */
/* Ensure stepProgress takes full width of header */
#stepProgress {
    width: 80%; /* Takes full width of header */
    max-width: 100%; /* Ensures it does not get restricted */
    margin-top: 10px; /* Adds spacing below the title */
    display: flex;
    justify-content: center; /* Centers step progress */
}

.progress-container {
    width: 100%; /* Ensure it spans the full width */
    display: flex;
    justify-content: space-between; /* Distribute steps evenly */
    align-items: center;
    gap: 10px; /* Adds spacing between steps */
}


/* .step-wrapper { */
    /* display: flex; */
    /* align-items: center; /* Centers the circle vertically */ */
    /* justify-content: center; /* Centers the circle horizontally */ */
    /* position: relative; */
    /* text-align: center; */
/* } */
.step-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center; /* Center them vertically */
    text-align: center; /* Ensure text aligns properly */
    gap: 2px; /* Add space between circle and label */
}


/* .step-circle { */
    /* display: flex; */
    /* align-items: center; /* Centers text inside the circle */ */
    /* justify-content: center; /* Centers text inside the circle */ */
    /* width: 24px; /* Adjust as needed */ */
    /* height: 24px; /* Adjust as needed */ */
    /* border-radius: 50%; */
    /* background-color: lightgray; /* Example color */ */
    /* font-size: 12px; */
    /* font-weight: bold; */
/* } */


/* Step circles */
.step-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    color: white;
    line-height: 1;
    z-index: 2; /* Keeps circles above connectors */
}

/* Colors for pending and completed steps */
.step-circle.pending {
    background-color: var(--dark-light) !important;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    color: white;
    line-height: 1;
    z-index: 2; /* Keeps circles above connectors */
}

.step-circle.completed {
    background-color: var(--primary) !important;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    color: white;
    line-height: 1;
    z-index: 2; /* Keeps circles above connectors */
}

/* Step labels under circles */
.step-label {
    margin-top: 5px;
    font-size: 10px;
    color: var(--dark);
    text-align: center;
    max-width: 80px;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Fix: Ensure connectors have enough space */
.connector-wrapper {
    flex-grow: 1; /* Allows connectors to stretch evenly */
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align connectors at the top */
    min-width: 30px; /* Ensures visibility on smaller screens */
    height: 2px; /* Set a fixed height */
    padding-top: 2px;
}


/* Connector line */
.step-connector {
    width: 100%;
    height: 2px;
    background-color: var(--dark-light);
}

/* Completed connectors */
.completed-line {
    background-color: var(--primary);
}







/* ===================================================== */
/* General styling for all input fields */
input, select, textarea {
    font-size: 16px; /* Avoids zoom-in issues on iOS */
}


input {
    width: 85%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid var(--dark-light);  /* Visible border for all inputs */
    border-radius: 5px;
    font-size: 14px;
    background-color: white;
    font-family: 'Inter', sans-serif;
    outline: none;  /* Removes default focus outline */
    transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Make the border darker when the input is focused */
input:focus {
    border-color: var(--dark);  /* Darker border when active */
    box-shadow: 0 0 5px var(--dark-light);  /* Subtle glow effect */
}

/* Adjust styles for different types of input */
input[type="checkbox"],
input[type="radio"] {
    width: auto;  /* Ensure checkboxes/radios keep default size */
    margin-right: 5px;
}

/* Optional: Style for textareas */
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--dark-light);
    border-radius: 5px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    resize: vertical;
}

/* Optional: Add style for select dropdowns */
select {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--dark-light);
    border-radius: 5px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    background-color: white;
    appearance: none;  /* Remove default styling for consistency */
}

/* Make dropdowns and textareas also highlight on focus */
select:focus, textarea:focus {
    border-color: var(--dark);
    box-shadow: 0 0 5px var(--dark-light);
}



.spinner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 4px solid var(--secondary);
    border-top: 4px solid var(--primary);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    z-index: 1000;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}