/* ==========================================================================
   Ecart Pay – Tarjeta directa (Checkout clásico y Cart/Checkout Blocks)
   ========================================================================== */

.ecartpay-card-form {
    --ep-border: #d9dadc;
    --ep-border-hover: #a7a8aa;
    --ep-border-focus: #2c7be5;
    --ep-bg: #ffffff;
    --ep-text: #1d2327;
    --ep-muted: #6c7178;
    --ep-radius: 8px;
    --ep-error: #d63638;
    --ep-success: #16a34a;

    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    margin: 8px 0 4px;
    background: var(--ep-bg);
    border: 1px solid var(--ep-border);
    border-radius: var(--ep-radius);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.5;
}

.ecartpay-card-form *,
.ecartpay-card-form *::before,
.ecartpay-card-form *::after {
    box-sizing: border-box;
}

/* Honor the HTML `hidden` attribute even when we use display:flex below.
   Without this rule, `display:flex` always wins and "hidden" elements
   stay visible (e.g. the "Loading installment options…" hint). */
.ecartpay-card-form [hidden] {
    display: none !important;
}

.ecartpay-card-form .ep-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    padding: 0;
    width: 100%;
}

.ecartpay-card-form .ep-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.ecartpay-card-form label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ep-muted);
    margin: 0;
}

/* Selector with extra specificity to win over WooCommerce / theme CSS that
   may try to reset positioning inside .payment_box. */
.ecartpay-card-form .ep-field > .ep-input-wrapper {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    /* Forces a new containing block so position:absolute children always
       anchor here, never bubble up to .payment_box or the viewport. */
    contain: layout style;
}

.ecartpay-card-form input,
.ecartpay-card-form select {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    font-size: 15px;
    line-height: 1.4;
    color: var(--ep-text);
    background: #fff;
    border: 1px solid var(--ep-border);
    border-radius: 6px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    font-family: inherit;
    margin: 0;
}

.ecartpay-card-form input::placeholder {
    color: #b6b9bd;
}

.ecartpay-card-form input:hover,
.ecartpay-card-form select:hover {
    border-color: var(--ep-border-hover);
}

.ecartpay-card-form input:focus,
.ecartpay-card-form select:focus {
    border-color: var(--ep-border-focus);
    box-shadow: 0 0 0 3px rgba(44, 123, 229, 0.15);
    outline: none;
}

.ecartpay-card-form input.has-error {
    border-color: var(--ep-error);
}

.ecartpay-card-form input.has-error:focus {
    box-shadow: 0 0 0 3px rgba(214, 54, 56, 0.15);
}

.ecartpay-card-form .ep-field-error {
    font-size: 12px;
    color: var(--ep-error);
    margin: 0;
}

.ecartpay-card-form .ep-card-input {
    padding-right: 96px;
    letter-spacing: 0.05em;
}

.ecartpay-card-form .ep-card-brands {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    pointer-events: none !important;
    line-height: 0 !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ecartpay-card-form .ep-brand {
    flex: 0 0 auto;
    display: inline-block;
    width: 26px;
    height: 18px;
    border-radius: 3px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.35;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.ecartpay-card-form .ep-card-brands.has-brand .ep-brand {
    opacity: 1;
    transform: scale(1.05);
}

.ecartpay-card-form .ep-brand-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");
}

.ecartpay-card-form .ep-brand-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");
}

.ecartpay-card-form .ep-brand-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");
}

.ecartpay-card-form .ep-cvc-wrapper input {
    padding-right: 42px;
}

.ecartpay-card-form .ep-cvc-icon {
    position: absolute !important;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    pointer-events: none;
    opacity: 0.6;
    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;
}

.ecartpay-card-form select {
    cursor: pointer;
    padding-right: 38px;
    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='%236c7178' 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 12px center;
    background-size: 16px;
}

.ecartpay-card-form .ep-installments-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--ep-success);
}

.ecartpay-card-form .ep-secure-note {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--ep-muted);
}

.ecartpay-card-form .ep-secure-note::before {
    content: '';
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%236c7178'%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Instituciones financieras (compartido entre clásico y bloques) */
.ecartpay-institutions {
    margin-top: 8px;
    padding: 12px 16px;
    background: #f8f9fb;
    border: 1px solid #ecedef;
    border-radius: 8px;
}

.ecartpay-institutions-title {
    font-size: 12px;
    font-weight: 600;
    color: #6c7178;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: 0 0 10px;
}

.ecartpay-institutions-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px 14px;
    align-items: center;
}

.ecartpay-institutions-grid .ecartpay-institution {
    height: 16px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.78;
    filter: grayscale(0.2);
}

/* Mensaje general de error de WooCommerce dentro del checkout */
.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;
}

@media (max-width: 540px) {
    .ecartpay-card-form .ep-row {
        grid-template-columns: 1fr;
    }

    .ecartpay-institutions-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}