/* StockkuApp Brand Theme - Final Perfected Polish */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* GLOBAL RESET */
html body {
    background-color: #0f172a;
    background-image:
        radial-gradient(at 0% 0%, hsla(158, 82%, 25%, 0.3) 0px, transparent 50%),
        radial-gradient(at 100% 0%, hsla(250, 70%, 30%, 0.3) 0px, transparent 50%),
        radial-gradient(at 100% 100%, hsla(330, 80%, 30%, 0.2) 0px, transparent 50%),
        radial-gradient(at 0% 100%, hsla(190, 80%, 30%, 0.2) 0px, transparent 50%);
    background-attachment: fixed;
    background-size: cover;
    min-height: 100vh;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    overflow-y: auto !important;
    /* Allow scroll only if absolutely needed, but aim for hidden */
}

/* CARD CONTAINER - COMPACT & RESPONSIVE */
html body .fi-simple-main,
html body .fi-simple-main-ctn .fi-section,
html body div[class*="fi-section"] {
    background-color: rgba(15, 23, 42, 0.75) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 20px 25px -5px rgba(0, 0, 0, 0.4) !important;
    border-radius: 24px !important;
    /* Compact Padding to prevent scrolling */
    padding: 2rem 2.5rem !important;
    max-width: 480px !important;
    /* Prevent it from getting too wide */
    width: 100% !important;
    margin: 0 auto !important;
}

/* HEADERS - COMPACT */
html body .fi-simple-main-ctn h1,
html body .fi-simple-main-ctn .fi-section-header-heading {
    color: white !important;
    font-size: 1.75rem !important;
    /* Slightly smaller */
    letter-spacing: -0.5px !important;
    margin-bottom: 2rem !important;
    /* Reduced margin */
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
    text-align: center !important;
}

html body label,
html body span,
html body p {
    color: #cbd5e1 !important;
}

/* INPUT WRAPPER - THE BOX */
html body .fi-input-wrp {
    display: flex !important;
    align-items: center !important;
    background-color: rgba(15, 23, 42, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 12px !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    padding: 0 !important;
    margin-top: 0.5rem !important;
    transition: all 0.2s ease !important;
}

html body .fi-input-wrp:focus-within {
    border-color: #22c55e !important;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25) !important;
    background-color: rgba(15, 23, 42, 0.8) !important;
}

/* GHOST INPUT */
html body .fi-input-wrp input:not([type="checkbox"]) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: white !important;
    width: 100% !important;
    height: 100% !important;
    padding: 12px 16px !important;
    /* Compact padding */
    margin: 0 !important;
    font-size: 0.95rem !important;
}

/* AUTOFILL HACK */
html body input:-webkit-autofill,
html body input:-webkit-autofill:hover,
html body input:-webkit-autofill:focus,
html body input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px rgba(15, 23, 42, 0.95) inset !important;
    -webkit-text-fill-color: white !important;
    transition: background-color 5000s ease-in-out 0s;
}

html body input::placeholder {
    color: rgba(255, 255, 255, 0.3) !important;
}

/* EYE ICON */
html body .fi-input-wrp .flex.items-center,
html body .fi-input-wrp div[class*="flex"] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    padding-right: 8px !important;
}

html body .fi-input-wrp [x-on\:click] {
    color: #94a3b8 !important;
    padding: 4px !important;
    border-radius: 50% !important;
}

html body .fi-input-wrp [x-on\:click]:hover {
    color: white !important;
}

html body .fi-input-wrp svg {
    width: 20px !important;
    height: 20px !important;
}

/* 
   RESTORED BUTTON (The Approved One) 
   Double Gradient, Bevel, Elegant
*/
html body .fi-btn-primary {
    background: linear-gradient(to bottom right, #4ade80, #16a34a) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    font-weight: 600 !important;
    padding: 12px 24px !important;
    /* Not too huge */
    border-radius: 99px !important;
    box-shadow:
        0 4px 6px -1px rgba(22, 163, 74, 0.3),
        0 10px 15px -3px rgba(22, 163, 74, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
    /* Bevel top */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    letter-spacing: 0.5px;
    width: 100% !important;
    margin-top: 1.5rem !important;
    /* Normalized spacing */
    transition: all 0.3s ease !important;
}

html body .fi-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow:
        0 10px 20px -5px rgba(22, 163, 74, 0.4),
        0 4px 6px -2px rgba(22, 163, 74, 0.3) !important;
    background: linear-gradient(to bottom right, #22c55e, #15803d) !important;
}

/* UTILITIES */
html body .fi-theme-switcher {
    display: none !important;
}

html body input[type="checkbox"] {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    border-radius: 6px !important;
    width: 1.1rem !important;
    height: 1.1rem !important;
    color: #22c55e !important;
    margin-right: 0.5rem !important;
}

html body a {
    color: #4ade80 !important;
    font-weight: 600 !important;
}

/* RESPONSIVE */
@media (max-width: 640px) {
    html body .fi-simple-main-ctn .fi-section {
        padding: 1.5rem !important;
        margin: 1rem !important;
    }

    html body .fi-simple-main-ctn h1 {
        font-size: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }
}