/* Custom MyAsist Theme - sms.myasist.ai style */

/* Login page full page styling */
.fi-simple-layout {
    background: linear-gradient(135deg, #0f0a1a 0%, #1a1025 50%, #0f0a1a 100%) !important;
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}

/* Animated circles background */
.fi-simple-layout::before {
    content: '';
    position: fixed;
    width: 600px;
    height: 600px;
    background: linear-gradient(135deg, #A234FD, #5259EB);
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    top: -200px;
    left: -200px;
    animation: float 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

.fi-simple-layout::after {
    content: '';
    position: fixed;
    width: 500px;
    height: 500px;
    background: linear-gradient(135deg, #EC04FB, #A234FD);
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    bottom: -150px;
    right: -150px;
    animation: float 8s ease-in-out infinite;
    animation-delay: -3s;
    pointer-events: none;
    z-index: 0;
}

/* Third floating circle via a pseudo element on the main container */
.fi-simple-main::before {
    content: '';
    position: fixed;
    width: 400px;
    height: 400px;
    background: linear-gradient(135deg, #5259EB, #A234FD);
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    top: 50%;
    left: 30%;
    transform: translate(-50%, -50%);
    animation: float 8s ease-in-out infinite;
    animation-delay: -5s;
    pointer-events: none;
    z-index: 0;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -30px) scale(1.05); }
    66% { transform: translate(-20px, 20px) scale(0.95); }
}

.fi-simple-main {
    position: relative;
    z-index: 1;
}

/* Login card styling - glassmorphism effect */
.fi-simple-page {
    background: rgba(15, 10, 26, 0.85) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(162, 52, 253, 0.3) !important;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5), 
                inset 0 0 60px rgba(162, 52, 253, 0.05) !important;
    border-radius: 20px !important;
}

/* Add a subtle gradient border effect */
.fi-simple-page::before {
    content: '';
    position: absolute;
    left: -1px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, transparent, #A234FD, #5259EB, transparent);
    border-radius: 3px 0 0 3px;
}

/* Form input styling */
.fi-simple-page .fi-input,
.fi-simple-page input[type="email"],
.fi-simple-page input[type="password"],
.fi-simple-page input[type="text"] {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: white !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
}

.fi-simple-page .fi-input:focus,
.fi-simple-page input[type="email"]:focus,
.fi-simple-page input[type="password"]:focus,
.fi-simple-page input[type="text"]:focus {
    border-color: #A234FD !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 0 25px rgba(162, 52, 253, 0.25) !important;
    outline: none !important;
}

.fi-simple-page input::placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
}

/* Button styling with gradient */
.fi-simple-page .fi-btn-primary,
.fi-simple-page button[type="submit"] {
    background: linear-gradient(135deg, #A234FD 0%, #5259EB 100%) !important;
    border: none !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
}

.fi-simple-page .fi-btn-primary:hover,
.fi-simple-page button[type="submit"]:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 15px 40px rgba(162, 52, 253, 0.4) !important;
}

.fi-simple-page .fi-btn-primary:active,
.fi-simple-page button[type="submit"]:active {
    transform: translateY(-1px) !important;
}

/* Labels and text */
.fi-simple-page label,
.fi-simple-page .fi-fo-field-wrp-label {
    color: rgba(255, 255, 255, 0.8) !important;
    font-weight: 500 !important;
}

.fi-simple-page .fi-simple-header-heading {
    color: white !important;
    font-size: 2rem !important;
    font-weight: 600 !important;
}

.fi-simple-page .fi-simple-header-subheading {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 0.95rem !important;
}

/* Checkbox styling */
.fi-simple-page .fi-checkbox-input:checked {
    background-color: #A234FD !important;
    border-color: #A234FD !important;
}

.fi-simple-page .fi-checkbox-input {
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Link styling */
.fi-simple-page .fi-link {
    color: #A234FD !important;
    transition: color 0.3s ease !important;
}

.fi-simple-page .fi-link:hover {
    color: #EC04FB !important;
}

/* Brand logo styling on login */
.fi-simple-layout .fi-logo {
    max-height: 3rem;
    filter: brightness(1.1);
}

/* Footer text */
.fi-simple-footer {
    color: rgba(255, 255, 255, 0.4) !important;
}

.fi-simple-footer a {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Ring focus removal for cleaner look */
.fi-simple-page *:focus {
    --tw-ring-color: transparent !important;
    --tw-ring-shadow: none !important;
}

/* Password reveal button */
.fi-simple-page .fi-input-wrp-suffix button {
    color: rgba(255, 255, 255, 0.5) !important;
}

.fi-simple-page .fi-input-wrp-suffix button:hover {
    color: #A234FD !important;
}

/* Remember me checkbox label */
.fi-simple-page .fi-checkbox label span {
    color: rgba(255, 255, 255, 0.7) !important;
}