/**
 * AP Social Login - Enhanced Login Form Styles
 *
 * Professional styling that respects WordPress theme variables
 * and provides clear, accessible design
 */

/* ============================================
   WORDPRESS LOGIN FORM ENHANCEMENTS
   ============================================ */

/* Login Form Container */
#login {
    --wp-input-border: #8c8f94;
    --wp-input-border-focus: #2271b1;
    --wp-input-bg: #fff;
    --wp-input-text: #2c3338;
    --wp-border-radius: 4px;
    --wp-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Enhanced Input Fields - Username and Password */
#login input[type="text"],
#login input[type="password"],
#login input[type="email"] {
    border: 1px solid var(--wp-input-border) !important;
    border-radius: var(--wp-border-radius) !important;
    background-color: var(--wp-input-bg) !important;
    color: var(--wp-input-text) !important;
    box-shadow: var(--wp-box-shadow) !important;
    padding: 8px 12px !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Input Focus State */
#login input[type="text"]:focus,
#login input[type="password"]:focus,
#login input[type="email"]:focus {
    border-color: var(--wp-input-border-focus) !important;
    box-shadow: 0 0 0 1px var(--wp-input-border-focus) !important;
    outline: none !important;
}

/* Login Button Enhancement */
#login .button-primary,
#login input[type="submit"] {
    border: 1px solid #2271b1 !important;
    border-radius: var(--wp-border-radius) !important;
    background: #2271b1 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    color: #fff !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    transition: all 0.2s ease !important;
}

#login .button-primary:hover,
#login input[type="submit"]:hover {
    background: #135e96 !important;
    border-color: #135e96 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* ============================================
   SOCIAL LOGIN BUTTONS
   ============================================ */

/* Social Login Section Separator */
.wp-social-login-separator {
    display: flex !important;
    align-items: center !important;
    text-align: center !important;
    margin: 20px 0 !important;
    color: #646970 !important;
    font-size: 14px !important;
}

.wp-social-login-separator::before,
.wp-social-login-separator::after {
    content: '' !important;
    flex: 1 !important;
    border-bottom: 1px solid #dcdcde !important;
}

.wp-social-login-separator::before {
    margin-right: 10px !important;
}

.wp-social-login-separator::after {
    margin-left: 10px !important;
}

/* Social Button Wrapper */
.wp-social-login-button-wrapper {
    margin: 12px auto !important;
    padding: 0 !important;
    text-align: center !important;
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 320px !important;
}

/* Base Social Button Style */
.wp-social-login-button {
    box-sizing: border-box !important;
    cursor: pointer !important;
    overflow: hidden !important;
    text-shadow: none !important;
    width: 100% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-decoration: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 44px !important;
    line-height: 1 !important;
    border-radius: var(--wp-border-radius) !important;
    border: 1px solid #dcdcde !important;
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s ease !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
}

/* Social Button Hover */
.wp-social-login-button:hover {
    background: #f6f7f7 !important;
    border-color: #8c8f94 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
    transform: translateY(-1px) !important;
}

/* Social Button Active/Focus */
.wp-social-login-button:active,
.wp-social-login-button:focus {
    outline: 2px solid #2271b1 !important;
    outline-offset: 2px !important;
}

/* Icon Wrapper */
.wp-social-login-icon-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 12px !important;
    min-width: 44px !important;
    height: 44px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    border-right: 1px solid #f0f0f1 !important;
}

/* Icon Image */
.wp-social-login-icon-wrapper img {
    border: none !important;
    box-shadow: none !important;
    height: 20px !important;
    width: 20px !important;
    vertical-align: middle !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Button Text */
.wp-social-login-text {
    display: inline-block !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #2c3338 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 !important;
    text-align: left !important;
}

/* ============================================
   GOOGLE SPECIFIC STYLES
   ============================================ */

.wp-social-login-button-wrapper-google .wp-social-login-button {
    border-color: #dcdcde !important;
}

.wp-social-login-button-wrapper-google .wp-social-login-button:hover {
    border-color: #4285f4 !important;
    background: #f8f9fa !important;
}

.wp-social-login-button-wrapper-google .wp-social-login-icon-wrapper {
    background: #fff !important;
}

/* ============================================
   APPLE SPECIFIC STYLES
   ============================================ */

.wp-social-login-button-wrapper-apple .wp-social-login-button {
    background: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
}

.wp-social-login-button-wrapper-apple .wp-social-login-button:hover {
    background: #2c2c2c !important;
    border-color: #2c2c2c !important;
}

.wp-social-login-button-wrapper-apple .wp-social-login-icon-wrapper {
    background: transparent !important;
    border-right-color: #333 !important;
}

.wp-social-login-button-wrapper-apple .wp-social-login-text {
    color: #fff !important;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media screen and (max-width: 480px) {
    .wp-social-login-button-wrapper {
        max-width: 100% !important;
    }

    .wp-social-login-button {
        height: 48px !important;
    }

    .wp-social-login-icon-wrapper {
        height: 48px !important;
    }

    .wp-social-login-text {
        font-size: 15px !important;
    }
}

/* ============================================
   RTL SUPPORT
   ============================================ */

.rtl .wp-social-login-button {
    justify-content: flex-end !important;
}

.rtl .wp-social-login-icon-wrapper {
    border-right: none !important;
    border-left: 1px solid #f0f0f1 !important;
}

.rtl .wp-social-login-text {
    text-align: right !important;
}

/* ============================================
   ACCESSIBILITY ENHANCEMENTS
   ============================================ */

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    #login input[type="text"],
    #login input[type="password"],
    #login input[type="email"] {
        border-width: 2px !important;
    }

    .wp-social-login-button {
        border-width: 2px !important;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    #login input[type="text"],
    #login input[type="password"],
    #login input[type="email"],
    .wp-social-login-button,
    #login .button-primary {
        transition: none !important;
    }

    .wp-social-login-button:hover {
        transform: none !important;
    }
}

/* Focus Visible for Keyboard Navigation */
.wp-social-login-button:focus-visible {
    outline: 2px solid #2271b1 !important;
    outline-offset: 2px !important;
}

/* ============================================
   CUSTOM THEME INTEGRATION
   ============================================ */

/* Allow theme to override colors via CSS variables */
#login {
    --social-button-bg: #fff;
    --social-button-border: #dcdcde;
    --social-button-text: #2c3338;
    --social-button-hover-bg: #f6f7f7;
    --social-button-hover-border: #8c8f94;
}

/* Apply custom theme colors if defined */
.wp-social-login-button {
    background: var(--social-button-bg) !important;
    border-color: var(--social-button-border) !important;
}

.wp-social-login-button:hover {
    background: var(--social-button-hover-bg) !important;
    border-color: var(--social-button-hover-border) !important;
}

.wp-social-login-text {
    color: var(--social-button-text) !important;
}

/* ============================================
   LOADING STATE (Future Enhancement)
   ============================================ */

.wp-social-login-button.loading {
    opacity: 0.6 !important;
    cursor: wait !important;
    pointer-events: none !important;
}

.wp-social-login-button.loading .wp-social-login-text::after {
    content: '...' !important;
    animation: loading-dots 1.4s infinite !important;
}

@keyframes loading-dots {
    0%, 20% { content: '.' !important; }
    40% { content: '..' !important; }
    60%, 100% { content: '...' !important; }
}