/* Estilos generales del formulario de pago */
.ecartpay-fields {
    margin: 20px 0;
    padding: 15px;
    background: #f8f8f8;
    border-radius: 4px;
    max-width: 500px;
    margin: 0 auto;
}

.ecartpay-fields .form-row {
    margin-bottom: 15px;
}

.ecartpay-fields label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

.ecartpay-fields input,
.ecartpay-fields select {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: white;
    font-size: 15px;
    color: #333;
    transition: border-color 0.3s ease;
    height: 48px;
    line-height: 1.5;
}

.ecartpay-fields select {
    cursor: pointer;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 20px;
    padding-right: 40px;
}

.ecartpay-fields select option {
    padding: 12px;
    font-size: 15px;
}

.ecartpay-fields input:hover,
.ecartpay-fields select:hover {
    border-color: #999;
}

.ecartpay-fields input:focus,
.ecartpay-fields select:focus {
    border-color: #4CAF50;
    outline: none;
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.1);
}

/* Estilos para el botón de pago */
.ecartpay-button {
    background-color: #4CAF50;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.ecartpay-button:hover {
    background-color: #45a049;
}

/* Estilos para mensajes de error */
.woocommerce-error {
    background: #f8d7da;
    border-left: 3px solid #dc3545;
    color: #721c24;
    padding: 12px;
    margin: 0 0 20px;
    border-radius: 4px;
    list-style: none;
}

.woocommerce-error li {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ecartpay-error {
    color: #dc3545;
    font-size: 14px;
    margin-top: 5px;
    background: none;
    border: none;
    padding: 0;
}

.installment-message {
    margin-top: 15px;
    padding: 12px 15px;
    background-color: #e8f5e9;
    border: 1px solid #c8e6c9;
    border-radius: 4px;
    color: #2e7d32;
    font-size: 14px;
    text-align: center;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.installment-message::before {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232e7d32'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Estilos responsivos */
@media (max-width: 768px) {
    .ecartpay-fields {
        max-width: 100%;
    }
    
    .ecartpay-button {
        padding: 10px 15px;
        font-size: 14px;
    }
}

/* Estilos para el contenedor de iconos de tarjetas */
.card-icons {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    gap: 8px;
    align-items: center;
}

.card-icon {
    width: 32px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.card-icon.active {
    opacity: 1;
}

/* Iconos específicos de tarjetas */
.card-icon.visa {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 16' fill='none' xmlns='http://www.w3.org/2000/svg' role='presentation' focusable='false'%3E%3Cg%3E%3Crect stroke='%23DDD' fill='%23FFF' x='.25' y='.25' width='23.5' height='15.5' rx='2'%3E%3C/rect%3E%3Cpath d='M2.788 5.914A7.201 7.201 0 0 0 1 5.237l.028-.125h2.737c.371.013.672.125.77.519l.595 2.836.182.854 1.666-4.21h1.799l-2.674 6.167H4.304L2.788 5.914Zm7.312 5.37H8.399l1.064-6.172h1.7L10.1 11.284Zm6.167-6.021-.232 1.333-.153-.066a3.054 3.054 0 0 0-1.268-.236c-.671 0-.972.269-.98.531 0 .29.365.48.96.762.98.44 1.435.979 1.428 1.681-.014 1.28-1.176 2.108-2.96 2.108-.764-.007-1.5-.158-1.898-.328l.238-1.386.224.099c.553.23.917.328 1.596.328.49 0 1.015-.19 1.022-.604 0-.27-.224-.466-.882-.769-.644-.295-1.505-.788-1.491-1.674C11.878 5.84 13.06 5 14.74 5c.658 0 1.19.138 1.526.263Zm2.26 3.834h1.415c-.07-.308-.392-1.786-.392-1.786l-.12-.531c-.083.23-.23.604-.223.59l-.68 1.727Zm2.1-3.985L22 11.284h-1.575s-.154-.71-.203-.926h-2.184l-.357.926h-1.785l2.527-5.66c.175-.4.483-.512.889-.512h1.316Z' fill='%23666'/%3E%3C/g%3E%3C/svg%3E");
}

.card-icon.mastercard {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 16' fill='none' xmlns='http://www.w3.org/2000/svg' role='presentation' focusable='false'%3E%3Crect fill='%23252525' height='16' rx='2' width='24'%3E%3C/rect%3E%3Ccircle cx='9' cy='8' fill='%23eb001b' r='5'%3E%3C/circle%3E%3Ccircle cx='15' cy='8' fill='%23f79e1b' r='5'%3E%3C/circle%3E%3Cpath 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' fill='%23ff5f00'%3E%3C/path%3E%3C/svg%3E");
}

.card-icon.amex {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 16' fill='none' xmlns='http://www.w3.org/2000/svg' role='presentation' focusable='false'%3E%3Crect fill='%23016fd0' height='16' rx='2' width='24'%3E%3C/rect%3E%3Cpath d='M13.764 13.394V7.692l10.148.01v1.574l-1.173 1.254 1.173 1.265v1.608h-1.873l-.995-1.098-.988 1.102z' fill='%23fffffe'%3E%3C/path%3E%3Cpath d='M14.442 12.769v-4.45h3.772v1.026h-2.55v.695h2.49v1.008h-2.49v.684h2.55v1.037z' fill='%23016fd0'%3E%3C/path%3E%3Cpath d='m18.195 12.769 2.088-2.227-2.088-2.222h1.616l1.275 1.41 1.28-1.41h1.546v.035l-2.043 2.187 2.043 2.164v.063H22.35l-1.298-1.424-1.285 1.424z' fill='%23016fd0'%3E%3C/path%3E%3Cpath d='M14.237 2.632h2.446l.86 1.95v-1.95h3.02l.52 1.462.523-1.462h2.306v5.701H11.725z' fill='%23fffffe'%3E%3C/path%3E%3Cg fill='%23016fd0'%3E%3Cpath d='m14.7 3.251-1.974 4.446h1.354l.373-.89h2.018l.372.89h1.387L16.265 3.25zm.17 2.558.592-1.415.592 1.415z'%3E%3C/path%3E%3Cpath d='M18.212 7.696V3.25l1.903.006.98 2.733.985-2.74h1.832v4.446l-1.179.01V4.653L21.62 7.696h-1.075l-1.136-3.054v3.054z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
}

/* Estilo para el contenedor de input con iconos */
.input-with-icons {
    position: relative;
}

/* Estilo para el icono de CVC */
.cvc-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23666' d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.5;
}

/* Estilos para la cuadrícula de instituciones financieras */
.financial-institutions {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee;
}

.financial-institutions-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 10px;
}

.financial-institution-logo {
    width: 100%;
    height: 12px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* Estilos responsivos para la cuadrícula */
@media (max-width: 768px) {
    .financial-institutions-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .financial-institution-logo {
        height: 16px;
    }
}