/* IKO Template Variables mapped to your purple */
:root {
    --tg-primary-color: #b312db;   /* Your purple */
    --tg-secondary-color: #0F101E; /* Dark card background */
    --tg-black: #010314;           /* Deep dark background from IKO frontend */
    --tg-body-font-color: #92939E; /* From IKO template */
    --tg-heading-font-color: #FFFFFF; /* From IKO template */
    --tg-paragraph-color: #92939E; /* From IKO template */
    --tg-green: #00FF00; /* Defined for consistency, but not used in main background */
}

/* Apply background to the html and body to ensure it covers the entire page */
/* This is the most robust way to set a full-page background */
html {
    height: 100%; /* Ensure html takes full height */
}

body.pace-top, body {
    background-color: var(--tg-black) !important;
    /* Replicating the IKO "Hero 2" and "Banner" subtle glow effect.
       Using two radial gradients with your primary purple. */
    background-image: 
        radial-gradient(circle at 80% 0%, rgba(179, 18, 219, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 20% 100%, rgba(179, 18, 219, 0.15) 0%, transparent 40%) !important;
    background-attachment: fixed !important; /* Keeps background fixed during scroll */
    background-size: cover !important; /* Ensures background covers the entire viewport */
    background-position: center center !important; /* Centers the background image */
    color: var(--tg-body-font-color) !important; /* Ensure body text color is consistent */
    min-height: 100vh; /* Ensure body takes at least full viewport height */
    margin: 0;
    padding: 0;

    /* Crucially, override any layout-altering properties from other frameworks */
    display: block !important; /* Revert to default block display */
    align-items: unset !important; /* Remove flex alignment */
    justify-content: unset !important; /* Remove flex justification */
}

/* Ensure the main page container also doesn't have an interfering background */
#page-container {
    background-color: transparent !important;
}

/* Ensure the login/register container matches the IKO widget style */
.login-container {
    background-color: var(--tg-secondary-color) !important; /* Darker background for the card */
    border: 1px solid rgba(255, 255, 255, 0.1) !important; /* Subtle white border */
    border-radius: 15px !important; /* Rounded corners */
    box-shadow: 0px 30px 70px 0px rgba(0, 0, 0, 0.8) !important; /* Deep shadow */
    
    /* Ensure no layout changes are introduced by this override */
    display: block !important; /* Revert to default block display */
    margin: auto !important; /* Keep it centered if it was originally */
    position: relative !important; /* Ensure it stacks correctly */
    z-index: 10 !important; /* Ensure it's above the body background */
}

/* Ensure inner elements of the login form don't have conflicting backgrounds */
/* This makes sure the dark background of the login-container shows through */
.login, /* Target the .login wrapper */
.login.login-v1, /* Specificity for the login-v1 class */
.login-header,
.login-body,
.login-content {
    background-color: transparent !important;
}

/* Adjust text colors within the login form to match IKO theme for readability */
.login-header .brand small,
.login-content .text-muted,
.login-content label { /* Added label for the "Terms and Conditions" text */
    color: var(--tg-paragraph-color) !important;
}

.login-header .icon i {
    color: var(--tg-primary-color) !important;
}

/* Ensure links and buttons retain their original structure but adopt IKO colors */
.text-teal, a {
    color: var(--tg-primary-color) !important;
}

.text-teal:hover, a:hover {
    color: var(--tg-heading-font-color) !important; /* White on hover */
}

.btn-teal {
    background-color: var(--tg-primary-color) !important; /* IKO primary color for button */
    color: var(--tg-white) !important;
    border: none !important;
    transition: background-color 0.3s ease !important;
}

.btn-teal:hover {
    background-color: var(--tg-secondary-color) !important; /* Darker on hover */
    color: var(--tg-white) !important;
}

/* Input fields to match IKO's transparent/glassmorphism style */
.form-control.inverse-mode {
    background: rgba(255, 255, 255, 0.07) !important; /* Transparent white background */
    border: 1px solid rgba(255, 255, 255, 0.1) !important; /* Subtle border */
    color: var(--tg-white) !important; /* White text */
    border-radius: 30px !important; /* Rounded corners */
}

.form-control.inverse-mode::placeholder {
    color: #AAABB2 !important; /* Placeholder color from IKO */
}

.form-control.inverse-mode:focus {
    border-color: var(--tg-primary-color) !important; /* Primary color border on focus */
    box-shadow: none !important; /* Remove any default box-shadow */
}

/* Preloader styling from IKO */
#page-loader {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tg-black);
    z-index: 9999; /* Ensure it's on top */
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

#page-loader.fade.show {
    opacity: 1;
}

#page-loader.fade {
    opacity: 0;
    visibility: hidden;
}

.spinner-border.text-white {
    width: 40px;
    height: 40px;
    border: 4px solid var(--tg-primary-color);
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
    background: transparent;
    display: block;
}

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

/* Adjustments for the scroll-to-top button */
.btn-scroll-to-top {
    background: var(--tg-primary-color) !important;
    color: var(--tg-white) !important;
    border-radius: 50% !important;
}
.btn-scroll-to-top:hover {
    background: var(--tg-secondary-color) !important;
}