/*
Theme Name: Hello Elementor Child
Theme URI: https://kinfirtech.com.ng/
Description: Custom child theme for Hello Elementor with advanced login styling and JS interactivity.
Author: Ayomide David
Author URI: https://kinfirtech.com.ng/
Template: hello-elementor
Version: 1.0.0
*/

/* Import child theme custom styles below */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
body {
  font-family: 'Inter', sans-serif;
}


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

body,
html {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100vh;
    height: 100%;
    background: #0a0a0a !important;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Hide scrollbars but keep functionality */
body::-webkit-scrollbar,
html::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

/* For Firefox */
body,
html {
    scrollbar-width: none;
}

/* For IE and Edge */
body,
html {
    -ms-overflow-style: none;
}

/* Wrapper elements centering */
.woocommerce-account,
.woocommerce,
.woocommerce-page,
#primary,
.site-content,
.ast-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 100vh !important;
    width: 100% !important;
}

/* Animated gradient mesh background */
.gradient-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: 
    radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255, 90, 205, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 40% 80%, rgba(29, 185, 255, 0.3) 0%, transparent 50%);
filter: blur(80px);
animation: gradientMove 20s ease infinite;
z-index: 0;
}

@keyframes gradientMove {
0%, 100% { transform: scale(1) rotate(0deg); }
50% { transform: scale(1.1) rotate(10deg); }
}

/* Grid overlay */
.grid-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: 
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
background-size: 50px 50px;
animation: gridScroll 20s linear infinite;
z-index: 0;
}

@keyframes gridScroll {
0% { transform: translateY(0); }
100% { transform: translateY(50px); }
}

/* Floating orbs */
.orb {
position: fixed;
border-radius: 50%;
filter: blur(40px);
opacity: 0.6;
animation: float 25s infinite ease-in-out;
z-index: 0;
}

.orb1 {
width: 400px;
height: 400px;
background: linear-gradient(135deg, #667eea, #764ba2);
top: -200px;
left: -200px;
animation-delay: 0s;
}

.orb2 {
width: 350px;
height: 350px;
background: linear-gradient(135deg, #f093fb, #f5576c);
bottom: -175px;
right: -175px;
animation-delay: -8s;
}

.orb3 {
width: 300px;
height: 300px;
background: linear-gradient(135deg, #4facfe, #00f2fe);
top: 50%;
left: 50%;
animation-delay: -15s;
}

@keyframes float {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(50px, -50px) scale(1.1); }
66% { transform: translate(-50px, 50px) scale(0.9); }
}

.container {
position: relative;
z-index: 10;
width: 1000px;
max-width: 92%;
display: flex;
gap: 30px;
animation: containerAppear 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
margin: auto;
left: 50%;
transform: translateX(-50%);
}

.left-section {
flex: 1;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 400px;
backdrop-filter: blur(20px);
background: rgba(255, 255, 255, 0.05);
border-radius: 24px;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.right-section {
flex: 0.8;
padding: 50px 40px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}

.right-section::before {
display: none;
}

.icon-group {
display: flex;
gap: 20px;
margin-bottom: 40px;
animation: slideUp 0.8s ease 0.2s both;
}

.icon-card {
width: 80px;
height: 80px;
backdrop-filter: blur(20px);
background: rgba(255, 255, 255, 0.05);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease;
}

.icon-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 40px rgba(102, 126, 234, 0.3);
border-color: rgba(102, 126, 234, 0.4);
}

.icon-card svg {
filter: drop-shadow(0 2px 8px rgba(102, 126, 234, 0.4));
}

.content-wrapper {
position: relative;
z-index: 1;
}

.feature-title {
font-size: 32px;
font-weight: 700;
color: white;
margin-bottom: 16px;
line-height: 1.2;
text-align: center;
animation: slideUp 0.8s ease 0.3s both;
}

.feature-subtitle {
font-size: 15px;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 0;
line-height: 1.6;
text-align: center;
animation: slideUp 0.8s ease 0.4s both;
}

.features-list {
display: none;
}

.stats {
display: none;
}

@keyframes containerAppear {
from {
    opacity: 0;
    transform: translateX(-50%) scale(0.9) translateY(30px);
}
to {
    opacity: 1;
    transform: translateX(-50%) scale(1) translateY(0);
}
}

.logo {
width: 60px;
height: 60px;
margin: 0 auto 30px auto;
background: linear-gradient(135deg, #667eea, #764ba2);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 28px;
font-weight: 700;
color: white;
box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
animation: logoFloat 3s ease-in-out infinite;
}

@keyframes logoFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}

h1 {
font-size: 36px;
font-weight: 700;
text-align: center;
color: white !important;
margin-bottom: 8px;
letter-spacing: -0.5px;
}

.subtitle {
text-align: center;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 35px;
font-size: 15px;
}

.input-group {
margin-bottom: 20px;
position: relative;
}

.input-group label {
position: absolute;
left: 45px;
top: 50%;
transform: translateY(-50%);
color: rgba(255, 255, 255, 0.5);
font-size: 15px;
font-weight: 400;
pointer-events: none;
transition: all 0.3s ease;
}

.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label {
top: -10px;
left: 12px;
font-size: 12px;
color: #667eea;
background: rgba(10, 10, 10, 0.9);
padding: 0 8px;
border-radius: 4px;
}

.input-wrapper {
position: relative;
}

.input-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: rgba(255, 255, 255, 0.4);
transition: all 0.3s ease;
}

.input-group input {
width: 100%;
padding: 16px 16px 16px 45px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
color: white;
font-size: 15px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.input-group input::placeholder {
color: transparent;
}

.input-group input:focus {
outline: none;
background: rgba(255, 255, 255, 0.08);
border-color: rgba(102, 126, 234, 0.6);
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

.input-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: rgba(255, 255, 255, 0.4);
transition: all 0.3s ease;
pointer-events: none;
}

.input-group input:focus ~ .input-icon {
color: #667eea;
}

.remember-forgot {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 28px;
font-size: 14px;
}

.checkbox-wrapper {
display: flex;
align-items: center;
cursor: pointer;
}

.checkbox-wrapper input[type="checkbox"] {
appearance: none;
width: 18px;
height: 18px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 5px;
margin-right: 8px;
cursor: pointer;
position: relative;
transition: all 0.3s ease;
}

.checkbox-wrapper input[type="checkbox"]:checked {
background: linear-gradient(135deg, #667eea, #764ba2);
border-color: #667eea;
}

.checkbox-wrapper input[type="checkbox"]:checked::after {
content: '✓';
position: absolute;
color: white;
font-size: 12px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.checkbox-wrapper label {
color: rgba(255, 255, 255, 0.7);
cursor: pointer;
user-select: none;
}

.remember-forgot a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: color 0.3s ease;
position: relative;
}

.remember-forgot a::after {
content: '';
position: absolute;
width: 0;
height: 1px;
bottom: -2px;
left: 0;
background: #667eea;
transition: width 0.3s ease;
}

.remember-forgot a:hover {
color: white;
}

.remember-forgot a:hover::after {
width: 100%;
}

.login-btn {
width: 100%;
padding: 16px;
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border: none;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
}

.login-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s ease;
}

.login-btn:hover::before {
left: 100%;
}

.login-btn:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(102, 126, 234, 0.4);
}

.login-btn:active {
transform: translateY(0);
}

.divider {
display: flex;
align-items: center;
margin: 28px 0 24px 0;
color: rgba(255, 255, 255, 0.4);
font-size: 12px;
font-weight: 500;
}

.divider::before,
.divider::after {
content: '';
flex: 1;
height: 1px;
background: rgba(255, 255, 255, 0.1);
}

.divider span {
padding: 0 16px;
}

.social-buttons {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 24px;
}

.social-btn {
padding: 12px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
height: 50px;
}

.social-btn:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
transform: translateY(-4px);
}

.signup-link {
text-align: center;
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
}

.signup-link a {
color: white;
text-decoration: none;
font-weight: 600;
background: linear-gradient(135deg, #667eea, #764ba2);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
transition: all 0.3s ease;
}

.signup-link a:hover {
opacity: 0.8;
}

/* Responsive design */
@media (max-width: 968px) {
    body,
    html {
        display: block;
        min-height: 100vh;
        height: auto;
    }

    .woocommerce-account,
    .woocommerce,
    .woocommerce-page,
    #primary,
    .site-content,
    .ast-container {
        display: block !important;
        min-height: auto !important;
    }

    .container {
        flex-direction: column;
        margin: 20px auto;
        padding: 20px 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .left-section {
        min-width: unset;
        padding: 40px 30px;
    }

    .right-section {
        border-left: none;
        border-top: none;
        padding: 40px 30px;
    }

    .feature-title {
        font-size: 28px;
    }

    .stats {
        gap: 20px;
    }

    .stat-number {
        font-size: 28px;
    }

    h1 {
        text-align: center;
    }

    .subtitle {
        text-align: center;
    }

    .logo {
        margin: 0 auto 30px;
    }

    .icon-group {
        gap: 15px;
    }

    .icon-card {
        width: 70px;
        height: 70px;
    }
}

@media (max-width: 480px) {
    .container {
        max-width: 95%;
        gap: 20px;
        margin: 15px auto;
        left: 50%;
        transform: translateX(-50%);
    }

    .left-section {
        padding: 30px 24px;
    }

    .right-section {
        padding: 30px 24px;
    }

    h1 {
        font-size: 26px;
    }

    .subtitle {
        font-size: 14px;
    }

    .logo {
        width: 50px;
        height: 50px;
        font-size: 24px;
        margin-bottom: 24px;
    }

    .input-group input,
    .woocommerce-Input {
        padding: 14px 14px 14px 42px !important;
        font-size: 14px !important;
    }

    .login-btn,
    .woocommerce-button {
        padding: 14px !important;
        font-size: 15px !important;
    }

    .remember-forgot,
    .form-row.remember-forgot {
        font-size: 13px;
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px;
    }

    .social-buttons {
        gap: 10px;
    }

    .social-btn {
        height: 45px;
    }

    .divider {
        font-size: 11px;
        margin: 20px 0 20px 0;
    }

    .feature-title {
        font-size: 24px;
    }

    .feature-subtitle {
        font-size: 14px;
    }

    .icon-group {
        gap: 12px;
    }

    .icon-card {
        width: 60px;
        height: 60px;
    }

    .icon-card svg {
        width: 24px;
        height: 24px;
    }

    .signup-link {
        font-size: 13px;
    }
}

/* Smooth entrance animations */
.input-group:nth-child(1) { animation: slideUp 0.6s ease 0.2s both; }
.input-group:nth-child(2) { animation: slideUp 0.6s ease 0.3s both; }
.remember-forgot { animation: slideUp 0.6s ease 0.4s both; }
.login-btn { animation: slideUp 0.6s ease 0.5s both; }
.divider { animation: slideUp 0.6s ease 0.6s both; }
.social-buttons { animation: slideUp 0.6s ease 0.7s both; }
.signup-link { animation: slideUp 0.6s ease 0.8s both; }

@keyframes slideUp {
from {
    opacity: 0;
    transform: translateY(20px);
}
to {
    opacity: 1;
    transform: translateY(0);
}
}

/* WooCommerce Form Styling */
.woocommerce-form-login h2,
.woocommerce-form-register h2 {
    display: none;
}

.woocommerce-form-row {
    margin-bottom: 20px;
    position: relative;
}

.woocommerce-form-row label {
    display: none !important;
}

.woocommerce-Input {
    width: 100%;
    padding: 12px 16px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    color: white !important;
    font-size: 15px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.woocommerce-Input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.woocommerce-Input:focus {
    outline: none !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(102, 126, 234, 0.6) !important;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1) !important;
}

/* Hide register form by default */
.woocommerce-form-register {
    display: none;
}

/* Register form specific styling */
.woocommerce-form-register p:not(.woocommerce-form-row) {
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    text-align: center;
    margin: 20px 0;
    padding: 0;
}

/* Remove extra spacing from both forms */
.woocommerce-form-login,
.woocommerce-form-register {
    margin: 0 !important;
    padding: 0 !important;
}

/* Consistent button spacing for register form */
.woocommerce-form-register .form-row {
    margin-bottom: 0 !important;
    margin-top: 8px !important;
}

/* Remove default WooCommerce form row spacing */
.woocommerce-form-login .woocommerce-form-row,
.woocommerce-form-register .woocommerce-form-row {
    margin-bottom: 20px !important;
    padding: 0 !important;
}

/* Last form row before button */
.woocommerce-form-login .woocommerce-form-row:last-of-type,
.woocommerce-form-register .woocommerce-form-row:last-of-type {
    margin-bottom: 20px !important;
}

/* Remember me and Lost Password */
.form-row.remember-forgot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px !important;
    font-size: 14px;
    flex-wrap: wrap;
    gap: 10px;
}

.woocommerce-form-login__rememberme {
    display: flex !important;
    align-items: center;
    cursor: pointer;
    margin: 0 !important;
}

.woocommerce-form__input-checkbox {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 5px !important;
    margin-right: 8px !important;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    background: transparent !important;
}

.woocommerce-form__input-checkbox:checked {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    border-color: #667eea !important;
}

.woocommerce-form__input-checkbox:checked::after {
    content: '✓';
    position: absolute;
    color: white;
    font-size: 12px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.woocommerce-form-login__rememberme span {
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    user-select: none;
}

.woocommerce-LostPassword {
    margin: 0 !important;
}

.woocommerce-LostPassword a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    transition: color 0.3s ease;
    position: relative;
}

.woocommerce-LostPassword a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -2px;
    left: 0;
    background: #667eea;
    transition: width 0.3s ease;
}

.woocommerce-LostPassword a:hover {
    color: white;
}

.woocommerce-LostPassword a:hover::after {
    width: 100%;
}

/* Login Button - Fixed hover effect */
.woocommerce-button,
.login-btn {
    width: 100%;
    padding: 16px !important;
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    color: white !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative;
    overflow: hidden !important;
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3) !important;
    margin-top: 8px !important;
    text-transform: none !important;
    transform: translateY(0) !important;
    line-height: 1.4 !important;
    height: auto !important;
    min-height: 50px !important;
}

.woocommerce-button::before,
.login-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
    opacity: 0;
}

.woocommerce-button:hover,
.login-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 32px rgba(102, 126, 234, 0.4) !important;
}

.woocommerce-button:hover::before,
.login-btn:hover::before {
    opacity: 1;
    left: 100%;
}

.woocommerce-button:active,
.login-btn:active {
    transform: translateY(0) !important;
}

/* Hide default WooCommerce styling */
.woocommerce-form-login {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.u-columns,
.u-column1 {
    margin: 0 !important;
    padding: 0 !important;
}

/* Error messages - Positioned below fields */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
    background: rgba(255, 90, 90, 0.1) !important;
    border: 1px solid rgba(255, 90, 90, 0.3) !important;
    color: #ff9999 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    margin: 8px 0 12px 0 !important;
    position: relative !important;
    width: 100% !important;
    display: block !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
}

.woocommerce-message {
    background: rgba(102, 126, 234, 0.1) !important;
    border-color: rgba(102, 126, 234, 0.3) !important;
    color: #a8b8ff !important;
}

/* Move errors inside form */
.woocommerce-form-login .woocommerce-error,
.woocommerce-form-login .woocommerce-message,
.woocommerce-form-login .woocommerce-info {
    order: -1 !important;
}

/* Animation delays for form elements */
.woocommerce-form-row:nth-child(1) { animation: slideUp 0.6s ease 0.2s both; }
.woocommerce-form-row:nth-child(2) { animation: slideUp 0.6s ease 0.3s both; }
.form-row { animation: slideUp 0.6s ease 0.4s both; }

/* Responsive adjustments */
@media (max-width: 480px) {
    .form-row {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .woocommerce-LostPassword {
        width: 100%;
        text-align: left;
    }
}
body .woocommerce form.login, body .woocommerce form.checkout_coupon, body .woocommerce form.register {
    border: none;
    padding: 20px;
    margin: 2em 0;
    text-align: left;
    border-radius: 5px;
}
body .woocommerce form.login, body .woocommerce form.checkout_coupon, body .woocommerce form.register {
    border: none;
    padding: 20px;
    margin: 2em 0;
    text-align: left;
    border-radius: 5px;
}