/* General Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

 .inactive-message {
        background-color: #f8d7da; /* Light red background */
        color: #721c24; /* Dark red text */
        padding: 15px; /* Space around the text */
        text-align: center; /* Center the text */
        position: sticky; /* Make it stick to the top */
        top: 0; /* Stick at the very top */
        z-index: 1000; /* Make sure it stays on top of other things */
        border-bottom: 1px solid #f5c6cb; /* A line at the bottom */
    }

/* Body Styling */
body {
    font-family: 'Arial', sans-serif;
    color: #000000;
    line-height: 1.5;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    min-height: 100vh; /* Full viewport height */
    padding: 0;
    margin: 0;
    position: relative; /* Required for pseudo-element positioning */
    overflow: auto; /* Changed from hidden to auto to enable scrolling */
    background-color: #f9f9f9; /* Fallback background color */
}

/* Pseudo-element for Background Image */
body::before {
    content: '';
    position: fixed; /* Fixed position to cover the entire viewport */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('/assets/background.png'); /* Path to your image */
    background-size: cover; /* Cover the entire viewport */
    background-repeat: no-repeat; /* Prevent repeating */
    background-position: center; /* Center the image */
    opacity: 1; /* Adjust opacity (0 = fully transparent, 1 = fully opaque) */
    z-index: -1; /* Place behind other elements */
}

/* Container Styling */
.container {
    max-width: 500px; /* Slightly smaller for better aesthetics */
    width: 99%; /* Ensure it takes full width on small screens */
    padding: 30px;
    background: rgba(255, 255, 255, 0.9); /* Semi-transparent white background for readability */
    border-radius: 12px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
    text-align: left; /* Center all text inside the container */
    position: relative; /* Ensure proper stacking context */
}

/* Custom Logout Button Styling */
.logout-button {
    background-color: green; /* Orange color */
    color: white; /* White text */
    font-size: 12px; /* Smaller font size */
    padding: 5px 10px; /* Reduced padding for smaller size */
    border: none; /* No border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Pointer cursor on hover */
    text-transform: uppercase; /* Uppercase text */
    text-decoration: none; /* Remove underline */
    margin-bottom: 10px; /* Space below the button */
}

/* Align Logout Button to the Right */
.logout-container {
    text-align: right;
    margin-bottom: 10px;
}

/* Flexbox for Logo and Welcome Message */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

/* Logo Styling */
.logo {
    display: flex;
    align-items: center;
}

.logo img {
    width: 80px; /* Adjust logo size */
    height: auto;
    margin-right: 10px; /* Space between logo and welcome message */
}

/* Accordion Styling */
.accordion {
    margin-bottom: 10px;
}

.accordion-header {
    background-color: #dcdcdc;
    padding: 10px;
    cursor: pointer;
    font-weight: bold;
    border: 1px solid #ddd;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: left;
}

.accordion-header:hover {
    background-color: #e9ecef;
}

.accordion-content {
    display: none;
    font-size:14px;
    padding: 10px;
    border: 1px solid #ddd;
    border-top: none;
    background-color: #fff;
}

.accordion-content.active {
    display: block;
}

/* General styling for the user-info container */
/* General styling for the user-info container */
.user-info {
    display: flex;
    align-items: flex-start; /* Align items at the top */
    justify-content: space-between; /* Space out left and right sections */
}

.user-info-left {
    flex: 1; /* Take up 1 part of the available space */
}

.user-info-right {
    flex: 2; /* Take up 2 parts of the available space */
    text-align: right; /* Align all content inside .user-info-right to the right */
}

.user-info-right p,
.user-info-right form {
    margin: 0 0 10px 0; /* Add spacing between elements */
}

/* Styling for the recharge form */
.recharge-form {
    display: inline-flex; /* Ensure the form stays inline */
    align-items: center; /* Vertically align the input and button */
    gap: 10px; /* Add spacing between the input and button */
}

/* Input field styling */
.recharge-form input[type="number"] {
    width: 60px; /* Set the width of the input field to 30px */
    height: 30px; /* Set the height of the input field */
    padding: 0 1px; /* Add padding for better usability */
    font-size: 14px; /* Adjust font size */
    text-align: center; /* Center-align the text inside the input */
    border: 1px solid #ccc; /* Add a border */
    border-radius: 4px; /* Add rounded corners */
}

/* Styling for the stk form */
.stk-form {
    align-items: left; /* Vertically align the input and button */
    gap: 10px; /* Add spacing between the input and button */
}

/* Input field styling */
.stk-form input[type="number"] {
    width: 100%; /* Set the width of the input field to 30px */
    height: 35px; /* Set the height of the input field */
    padding: 2 1px; /* Add padding for better usability */
    font-size: 14px; /* Adjust font size */
    text-align: left; /* Center-align the text inside the input */
    border: 2px solid #ccc; /* Add a border */
    border-radius: 4px; /* Add rounded corners */
}

/* Remove spinners from number input fields */
input[type="number"] {
    -moz-appearance: textfield; /* For Firefox */
    appearance: textfield; /* Standard property */
}

/* Hide spinners for WebKit-based browsers (Chrome, Safari, Edge) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none; /* Remove the spinner */
    margin: 0; /* Remove any extra space left by the spinner */
}

/* Button styling */
#pay-button {
    height: 30px; /* Match the height of the input field */
    padding: 0 10px; /* Add padding for better usability */
    font-size: 14px; /* Adjust font size */
    background-color: #007bff; /* Button background color */
    color: white; /* Button text color */
    border: none; /* Remove border */
    border-radius: 4px; /* Add rounded corners */
    cursor: pointer; /* Change cursor to pointer on hover */
    transition: background-color 0.3s ease; /* Smooth hover effect */
}

/* Hover effect for the button */
#pay-button:hover {
    background-color: #007BBE; /* Darker background color on hover */
}

/* Loading state for the button */
#pay-button.loading {
    background-color: #ccc; /* Gray background during loading */
    cursor: not-allowed; /* Disable pointer events */
}

/* Headings */
h2 {
    font-size: 28px;
    color: #007bff;
    margin-bottom: 20px;
}

h3 {
    font-size: 20px;
    color: #333;
    margin-top: 20px;
    margin-bottom: 10px;
    border-bottom: 2px solid #007bff;
    padding-bottom: 5px;
    text-align: left; /* Center headings */
}

/* Labels */
label {
    display: block;
    margin-top: 10px;
    color: #555;
    text-align: left; /* Align labels to the left within their containers */
}

/* Inputs, Textarea, Select */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
select,
textarea {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
    border: 2px solid #ccc;
    border-radius: 8px;
    font-size: 15px;
    transition: border-color 0.3s ease;
    text-align: left; /* Center text inside input fields */
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    border-color: #007bff;
    outline: none;
}

textarea {
    resize: vertical;
    min-height: 120px;
    text-align: left; /* Allow multi-line text alignment */
}

/* Buttons */
button {
    display: inline-block;
    background-color: #007BBE; /* Primary color */
    color: #fff; /* White text for contrast */
    font-size: 14px; /* Slightly larger for readability */
    letter-spacing: 1px; /* Spacing between letters for a clean look */
    text-transform: uppercase; /* Uppercase text for a professional feel */
    text-decoration: none; /* Remove underline */
    text-align: center; /* Center-align text */
    cursor: pointer; /* Pointer cursor for interactivity */
    transition: all 0.3s ease; /* Smooth transitions for hover and focus */
    border: none; /* No border */
    border-radius: 5px; /* Slightly rounded corners for a softer look */
    padding: 5px 10px; /* Balanced padding for better proportions */
    margin: 1px 0; /* Vertical spacing */
    margin-top: 10px;
    outline: none; /* Remove default outline */
}

/* Hover effect */
button:hover {
    background-color: #007BBE; /* Darker shade for hover */
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15); /* Slightly larger shadow on hover */
}

/* Focus state for accessibility */
button:focus {
    background-color: #007BBE; /* Same as hover for consistency */
    box-shadow: 0 0 0 3px rgba(0, 86, 179, 0.5); /* Highlight focus with a glowing border */
}

/* Disabled state */
button:disabled {
    background-color: #b3b3b3; /* Grayed-out background */
    color: #ffffff; /* White text for contrast */
    cursor: not-allowed; /* Indicate non-interactivity */
    box-shadow: none; /* Remove shadow */
}

/* Button Loading State */
button.loading {
    position: relative;
    cursor: wait; /* Change cursor to indicate waiting */
    pointer-events: none; /* Disable button interaction while loading */
}

/* Spinner Animation */
button.loading::after {
    content: ''; /* Create a pseudo-element for the spinner */
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 3px solid #fff;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 1s linear infinite; /* Spin animation */
    margin-left: 10px; /* Space between text and spinner */
}

/* Keyframes for Spinner Animation */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    button {
        font-size: 12px; /* Smaller font size for smaller screens */
        padding: 6px 12px; /* Reduced padding for compactness */
    }
}

/* Gateway Fields */
#gateway-fields {
    margin-top: 10px;
    text-align: left; /* Align gateway fields to the left */
}

#gateway-fields label {
    margin-top: 5px;
}

/* Response Message Styling */
.response-message {
    position: fixed; /* Fixed position to stay in the viewport */
    top: 50%; /* Move to 50% from the top */
    transform: translate(-50%, -50%); /* Center the element precisely */
    padding: 15px 30px; /* Adjust padding for better appearance */
    border-radius: 8px; /* Rounded corners */
    font-size: 16px; /* Larger font size for visibility */
    opacity: 0; /* Initially hidden */
    transition: opacity 1.0s ease, transform 1.0s ease; /* Smooth transitions */
    z-index: 1000; /* Ensure it appears above other elements */
    text-align: center; /* Center-align the text inside */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Add a subtle shadow for depth */
}

.response-message.show {
    opacity: 1; /* Fully visible */
    transform: translateY(0); /* Move into view */
}

.response-message.success {
    background-color: #d4edda; /* Green background for success */
    color: #155724;
    border: 1px solid #c3e6cb;
}

.response-message.error {
    background-color: #f8d7da; /* Red background for errors */
    color: #721c24;
    border: 1px solid #f5c6cb;
}