/* ============================================================================
   KB WC CUSTOM LOGIN - THEME MY LOGIN STYLES
   ========================================================================= */

/* Main TML container */
.tml {
    font-size: 1em;
    max-width: 400px;
    margin: 40px auto;
    padding: 40px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.tml * {
    box-sizing: border-box;
}

/* TML Form */
.tml form {
    margin: 0;
}

/* TML Field wrapper */
.tml .tml-field-wrap {
    margin-bottom: 20px;
}

/* TML Labels */
.tml .tml-label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

.tml .tml-checkbox + .tml-label {
    display: inline;
    font-weight: 400;
    color: #4B5563;
}

/* TML Input fields */
.tml .tml-field,
.tml input[type="text"],
.tml input[type="email"],
.tml input[type="password"],
.tml input[type="tel"],
.tml input[type="url"],
.tml input[type="number"],
.tml textarea,
.tml select {
    width: 100%;
    max-width: 100%;
    padding: 12px 16px;
    border: 1px solid #D1D5DB !important;
    border-radius: 6px !important;
    font-size: 14px;
    background: #ffffff !important;
    background-image: none !important;
    transition: border-color 0.2s ease;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.tml .tml-field:focus,
.tml input[type="text"]:focus,
.tml input[type="email"]:focus,
.tml input[type="password"]:focus,
.tml input[type="tel"]:focus,
.tml input[type="url"]:focus,
.tml input[type="number"]:focus,
.tml textarea:focus,
.tml select:focus {
    border-color: #E84B19 !important;
    outline: none !important;
    box-shadow: none !important;
}

.tml .tml-field:active,
.tml input[type="text"]:active,
.tml input[type="email"]:active,
.tml input[type="password"]:active,
.tml input[type="tel"]:active,
.tml input[type="url"]:active,
.tml input[type="number"]:active,
.tml textarea:active,
.tml select:active {
    border-color: #E84B19 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* TML Description */
.tml .tml-description {
    display: block;
    font-size: 0.85em;
    font-style: italic;
    margin: 0.5em 0;
    color: #6B7280;
}

/* TML Remember me checkbox */
.tml .tml-rememberme-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.tml .tml-rememberme-wrap .tml-label {
    margin-bottom: 0;
}

.tml .tml-checkbox {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #E84B19;
}

/* TML Submit button */
.tml .tml-button,
.tml button,
.tml input[type="submit"],
.tml input[type="button"] {
    width: 100%;
    padding: 14px 24px;
    background-color: #212223 !important;
    background-image: none !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.tml .tml-button:hover,
.tml button:hover,
.tml input[type="submit"]:hover,
.tml input[type="button"]:hover {
    background-color: #E84B19 !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

.tml .tml-button:focus,
.tml button:focus,
.tml input[type="submit"]:focus,
.tml input[type="button"]:focus {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    background-color: #212223 !important;
}

.tml .tml-button:focus:hover,
.tml button:focus:hover,
.tml input[type="submit"]:focus:hover,
.tml input[type="button"]:focus:hover {
    background-color: #E84B19 !important;
}

.tml .tml-button:active,
.tml button:active,
.tml input[type="submit"]:active,
.tml input[type="button"]:active {
    background-color: #c43d12 !important;
    transform: translateY(1px);
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* TML Links (Register, Lost Password) */
.tml .tml-links {
    list-style: none;
    margin: 24px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid #E5E7EB;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.tml .tml-links li {
    margin: 0;
    padding: 0;
}

.tml .tml-links a {
    color: #E84B19;
    font-size: 14px;
    text-decoration: none;
}

.tml .tml-links a:hover {
    text-decoration: underline;
}

/* TML Alerts/Messages */
.tml .tml-alerts {
    margin-bottom: 20px;
}

.tml .tml-errors,
.tml .tml-messages {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tml .tml-error,
.tml .tml-message,
.tml .tml-success,
.tml .tml-action-confirmaction .success {
    border-left: 4px solid #00a0d2;
    box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);
    display: block;
    margin: 0 0 1em;
    padding: 0.75em;
    border-radius: 4px;
    background: #f7f7f7;
}

.tml .tml-error {
    border-left-color: #dc3232;
    background: #fef2f2;
}

.tml .tml-success,
.tml .tml-action-confirmaction .success {
    border-left-color: #46b450;
    background: #f0fdf4;
}

/* Password Strength Indicator */
#pass-strength-result {
    background-color: #eee;
    border: 1px solid #ddd;
    border-radius: 4px;
    color: #23282d;
    font-weight: bold;
    opacity: 0;
    margin-bottom: 1em;
    padding: 0.5em;
    text-align: center;
}

#pass-strength-result.strong {
    background-color: #c1e1b9;
    border-color: #83c373;
    opacity: 1;
}

#pass-strength-result.good {
    background-color: #ffe399;
    border-color: #ffc733;
    opacity: 1;
}

#pass-strength-result.bad {
    background-color: #fbc5a9;
    border-color: #f78b53;
    opacity: 1;
}

#pass-strength-result.short {
    background-color: #f1adad;
    border-color: #e35b5b;
    opacity: 1;
}

/* ============================================================================
   RESPONSIVE STYLES
   ========================================================================= */

@media (max-width: 480px) {
    .tml {
        margin: 20px auto;
        padding: 24px 20px;
        border-radius: 0;
        box-shadow: none;
    }

    .tml .tml-links {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
}