/* Layout & Alignment Wrapper */
.lfel-login-wrapper {
     display: flex;
     justify-content: var(--lfel-align);
     width: 100%;
     box-sizing: border-box;
     /* Base font reset to inherit nicely */
     font-family: inherit;

     /* Negate aggressive WordPress core block-support styles */
     border: none !important;
     outline: none !important;
     background: transparent !important;
     padding: 0 !important;
     margin: 0 !important;
     box-shadow: none !important;
}

/* Main Box Styling */
.lfel-login-box {
     background-color: var(--lfel-bg-color);
     width: 100%;
     max-width: var(--lfel-width);
     padding: var(--lfel-form-padding);
     border: var(--lfel-border-width) solid var(--lfel-border-color);
     border-radius: var(--lfel-border-radius);
     box-shadow: var(--lfel-box-shadow);
     box-sizing: border-box;
}

/* Typography */
.lfel-login-title {
     margin: 0 0 8px 0;
     font-size: var(--lfel-typo-title);
     font-weight: 600;
     color: inherit; /* Allow theme inheritance for headers */
     line-height: 1.2;
}

.lfel-login-description {
     margin: 0 0 24px 0;
     font-size: var(--lfel-typo-desc);
     opacity: 0.8;
     line-height: 1.5;
}

/* Fields */
.lfel-login-field {
     margin: 0 0 var(--lfel-field-spacing) 0;
     padding: 0;
     border: none;
}

.lfel-login-field label {
     display: block;
     margin-bottom: var(--lfel-label-spacing);
     font-size: var(--lfel-typo-label);
     font-weight: 500;
}

/* Inputs */
.lfel-input {
     display: block;
     width: 100%;
     height: var(--lfel-input-height);
     padding: var(--lfel-input-padding);
     background-color: var(--lfel-input-bg);
     color: var(--lfel-input-text);
     border: 1px solid var(--lfel-input-border);
     border-radius: var(--lfel-input-radius);
     font-size: var(--lfel-typo-input);
     box-sizing: border-box;
     transition: border-color 0.2s, box-shadow 0.2s;
     font-family: inherit;
}

.lfel-input:focus {
     outline: none;
     border-color: var(--lfel-input-focus-border);
     box-shadow: var(--lfel-input-focus-shadow);
}

/* Password Toggle Wrapper */
.lfel-password-wrapper {
     position: relative;
     display: block;
}

.lfel-toggle-password {
     position: absolute;
     right: 10px;
     top: 50%;
     transform: translateY(-50%);
     background: none;
     border: none;
     padding: 0;
     cursor: pointer;
     color: #64748b;
     display: flex;
     align-items: center;
     justify-content: center;
}

.lfel-toggle-password:hover {
     color: var(--lfel-input-focus-border);
}

.lfel-toggle-password:focus {
     outline: none;
}

/* Remember Me Checkbox */
.lfel-login-remember {
     margin: 0 0 var(--lfel-field-spacing) 0;
     font-size: var(--lfel-typo-label);
}

.lfel-login-remember label {
     display: flex;
     align-items: center;
     gap: 8px;
     cursor: pointer;
     font-weight: normal;
}

.lfel-login-remember input[type="checkbox"] {
     margin: 0;
}

/* Submit Button */
.lfel-login-submit {
     margin: 0 0 var(--lfel-field-spacing) 0;
}

.lfel-button {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: var(--lfel-btn-width);
     height: var(--lfel-btn-height);
     background-color: var(--lfel-btn-bg);
     color: var(--lfel-btn-text);
     border: var(--lfel-btn-border-width) solid var(--lfel-btn-border);
     border-radius: var(--lfel-btn-radius);
     font-size: var(--lfel-typo-btn);
     font-weight: 600;
     cursor: pointer;
     transition: background-color 0.2s, border-color 0.2s;
     text-decoration: none;
     box-sizing: border-box;
     font-family: inherit;
}

.lfel-button:hover,
.lfel-button:focus {
     background-color: var(--lfel-btn-hover);
     border-color: var(--lfel-btn-hover);
     color: var(--lfel-btn-text);
     outline: none;
}

/* Links */
.lfel-login-links {
     margin: 0;
     text-align: center;
}

.lfel-login-links a {
     color: var(--lfel-link-color);
     font-size: var(--lfel-typo-label);
     text-decoration: none;
     transition: color 0.2s;
}

.lfel-login-links a:hover {
     color: var(--lfel-link-hover);
}