/* Authorize.Net Form Specific Styles */

.authorize-net-form-container {
    display: block; /* Ensure the form is visible by default */
    padding: 0 20px; /* Add padding to match other forms */
    margin: 20px auto; /* Center the form */
    max-width: 400px; /* Max width for consistency */
    box-sizing: border-box;
    /* Removed properties related to JS-managed visibility and animation */
    max-height: none;
    overflow: visible;
    opacity: 1;
    transform: none;
    transition: none;
}
/* The .visible class is no longer needed as the form is always visible */

.authorize-net-form-container .payment-form-title {
    color: #007bff; /* Example color, adjust as needed */
}

.authorize-net-form-container .form-group {
    margin-bottom: 15px;
}

.authorize-net-form-container label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: #333;
}

.authorize-net-form-container .form-control {
    width: 100%;
    padding: 12px 15px; /* Increased padding for better touch targets and aesthetics */
    border: 1px solid #d1d5db; /* Lighter border color */
    border-radius: 8px; /* More rounded corners */
    box-sizing: border-box;
    font-size: 1rem; /* Consistent font size */
    color: #374151; /* Darker text color */
    background-color: #f9fafb; /* Light background for inputs */
    transition: border-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transitions */
}

.authorize-net-form-container .form-control:focus {
    outline: none; /* Remove default outline */
    border-color: #2563eb; /* Blue border on focus */
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25); /* Blue glow on focus */
    background-color: #ffffff; /* White background on focus */
}

.authorize-net-form-container .form-control::placeholder {
    color: #9ca3af; /* Lighter placeholder text */
}

.authorize-net-form-container .btn-primary {
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    width: 100%;
}

.authorize-net-form-container .btn-primary:hover {
    background-color: #0056b3;
}

.expiry-container {
    display: flex;
    gap: 10px;
}

.expiry-container select {
    flex: 1;
}

body.ff-cart-page #payment-form-container .loader,
body.ff-cart-page .authorize-net-form-container .loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    animation: spin 1s linear infinite;
}

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

.hidden {
    display: none;
}