/**
 * WooCommerce Custom Authentication - Frontend Styles
 * Simple, clean styling for custom authentication forms
 * Version: 2.1.1 - Simplified Implementation
 */

/* Basic WooCommerce Form Styling */
.woocommerce-form-row .woocommerce-Input--text {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.woocommerce-form-row .woocommerce-Input--text:focus {
    border-color: #007cba;
    outline: none;
    box-shadow: 0 0 0 1px #007cba;
}

/* Phone number input styling */
input[type="tel"].woocommerce-Input--text {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"/></svg>');
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 16px;
    padding-left: 40px;
}

/* Email input styling */
input[type="email"].woocommerce-Input--text {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>');
    background-repeat: no-repeat;
    background-position: 12px center;
    background-size: 16px;
    padding-left: 40px;
}

/* Phone verification form styling */
.wc-custom-auth-phone-verification {
    background: #f8f8f8;
    border: 1px solid #ddd;
    padding: 1.5rem;
    margin: 1rem 0;
    border-radius: 4px;
}

.wc-custom-auth-phone-verification h3 {
    margin-top: 0;
    margin-bottom: 1rem;
    color: #333;
    font-size: 1.2em;
}

.wc-custom-auth-verification-message {
    margin: 0.75rem 0;
    font-weight: 500;
    padding: 0.5rem;
    border-radius: 4px;
}

.wc-custom-auth-verification-message.success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.wc-custom-auth-verification-message.error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.wc-custom-auth-verification-message.info {
    background-color: #d1ecf1;
    color: #0c5460;
    border: 1px solid #bee5eb;
}

/* Simple button styling */
.wc-custom-auth-button {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    margin-right: 0.5rem;
    background-color: #007cba;
    color: #fff;
    text-decoration: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

.wc-custom-auth-button:hover {
    background-color: #005a87;
    color: #fff;
}

.wc-custom-auth-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Loading state */
.wc-custom-auth-loading {
    position: relative;
    opacity: 0.7;
    pointer-events: none;
}

.wc-custom-auth-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid transparent;
    border-top: 2px solid #007cba;
    border-radius: 50%;
    animation: wc-custom-auth-spin 1s linear infinite;
}

@keyframes wc-custom-auth-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Basic responsive behavior */
@media (max-width: 768px) {
    .wc-custom-auth-phone-verification {
        padding: 1rem;
        margin: 0.75rem 0;
    }
    
    .wc-custom-auth-button {
        display: block;
        width: 100%;
        margin: 0.5rem 0;
        text-align: center;
    }
    
    input[type="tel"].woocommerce-Input--text,
    input[type="email"].woocommerce-Input--text {
        padding-left: 12px;
        background-image: none;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .wc-custom-auth-button,
    .wc-custom-auth-loading::after {
        transition: none;
        animation: none;
    }
}