/**
 * Papel Payment Gateway Frontend Styles
 */

/* Payment Form Container */
.papel-payment-form {
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #f9f9f9;
}

/* Card Fields */
.papel-card-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.papel-card-fields .form-row {
    margin-bottom: 1rem;
}

.papel-card-fields input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    transition: border-color 0.2s ease;
}

.papel-card-fields input:focus {
    outline: none;
    border-color: #007cba;
    box-shadow: 0 0 0 1px #007cba;
}

/* Error States */
.papel-card-fields input.papel-error {
    border-color: #d63638;
    box-shadow: 0 0 0 1px #d63638;
}

.papel-field-error {
    color: #d63638;
    background: #fcf0f1;
    border: 1px solid #d63638;
    border-radius: 4px;
    padding: 0.75rem;
    margin: 0.5rem 0;
}

/* Card Type Icons */
.papel-card-fields #papel-card-number {
    position: relative;
    padding-right: 3rem;
}

.papel-card-fields #papel-card-number.papel-card-visa {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="16" viewBox="0 0 24 16"><rect width="24" height="16" fill="%23142787" rx="2"/><path fill="%23fff" d="M9.315 4.058h1.926l-1.203 7.885H8.112l1.203-7.885zm6.525 5.072c.008-.631-.378-.903-.747-1.096-.378-.198-.635-.331-.633-.531.005-.305.344-.442.669-.446.38-.007.655.08.862.151l.156-.93c-.2-.072-.511-.141-.867-.141-1.156 0-1.969.618-1.977 1.503-.009.654.582.958 1.027 1.162.457.209.611.343.608.531-.005.287-.343.411-.66.415-.556.006-.879-.15-1.136-.27l-.2.952c.258.118.736.221 1.232.226 1.228-.002 2.031-.607 2.033-1.547zm2.95-4.945h-1.486c-.46 0-.805.133-.992.618L13.75 11.94h1.228l.243-.676h1.504l.143.676h1.081L16.79 4.058zm-.859 1.963l.372 1.785h-.977l.605-1.785zm-7.717-.228l-1.922 5.147h-1.24L5.22 6.014c-.089-.351-.167-.48-.437-.628-.442-.24-.748-.372-1.483-.516l.035-.176h2.555c.326 0 .619.218.693.595l.635 3.377 1.568-3.972h1.233z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 2rem auto;
}

.papel-card-fields #papel-card-number.papel-card-mastercard {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="16" viewBox="0 0 24 16"><rect width="24" height="16" fill="%23000" rx="2"/><circle cx="9" cy="8" r="5" fill="%23eb001b"/><circle cx="15" cy="8" r="5" fill="%23f79e1b"/><path fill="%23ff5f00" d="M12 4c1.214.912 2 2.364 2 4s-.786 3.088-2 4c-1.214-.912-2-2.364-2-4s.786-3.088 2-4z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 2rem auto;
}

.papel-card-fields #papel-card-number.papel-card-amex {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="16" viewBox="0 0 24 16"><rect width="24" height="16" fill="%23006fcf" rx="2"/><path fill="%23fff" d="M8.27 2.2h3.91l.77 1.81.78-1.81h3.91l1.37 6.29-1.37 5.51h-3.91l-.78-1.81-.77 1.81H8.27L6.9 8.49 8.27 2.2z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 2rem auto;
}

/* Installments */
.papel-card-fields select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background: white;
}

/* Responsive Design */
@media (max-width: 768px) {
    .papel-card-fields {
        flex-direction: column;
        gap: 0;
    }
    
    .papel-card-fields .form-row-first,
    .papel-card-fields .form-row-last {
        width: 100%;
    }
}

@media (min-width: 769px) {
    .papel-card-fields .form-row-first {
        flex: 1;
        margin-right: 0.5rem;
    }
    
    .papel-card-fields .form-row-last {
        flex: 1;
        margin-left: 0.5rem;
    }
}

/* Loading States */
.papel-processing {
    opacity: 0.6;
    pointer-events: none;
}

.papel-loading::after {
    content: '';
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #007cba;
    border-radius: 50%;
    animation: papel-spin 1s linear infinite;
    margin-left: 0.5rem;
}

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

/* Accessibility */
.papel-card-fields label {
    font-weight: 600;
    margin-bottom: 0.25rem;
    display: block;
}

.papel-card-fields .required {
    color: #d63638;
}

/* Focus indicators for keyboard navigation */
.papel-card-fields input:focus,
.papel-card-fields select:focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .papel-payment-form {
        border: 2px solid #000;
        background: #fff;
    }
    
    .papel-card-fields input {
        border: 2px solid #000;
    }
    
    .papel-card-fields input:focus {
        border-color: #0073aa;
        box-shadow: 0 0 0 2px #0073aa;
    }
}