/**
 * Franky Payments v2 - Checkout Form Styles
 */

/* Contenedor principal del formulario */
.franky-cc-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    max-width: 500px;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
}

/* Campos de ancho completo */
.franky-cc-wrap .form-row-wide {
    grid-column: 1 / -1;
}

/* Labels */
.franky-cc-wrap label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    font-size: 14px;
    color: #333;
}

.franky-cc-wrap .required {
    color: #e53935;
}

/* Inputs */
.franky-cc-wrap input.input-text {
    width: 100%;
    padding: 12px 15px;
    font-size: 16px;
    border: 1px solid #dcdcdc;
    border-radius: 6px;
    background: #fff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.franky-cc-wrap input.input-text:focus {
    border-color: #2271b1;
    box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.15);
    outline: none;
}

.franky-cc-wrap input.input-text::placeholder {
    color: #a0a0a0;
}

/* Campo de tarjeta con icono */
.franky-cc-wrap input#franky_card {
    padding-right: 50px;
    background-image: url('../images/icons/credit-cards/visa.png');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 35px auto;
}

.franky-cc-wrap input#franky_card[data-card-brand="mastercard"] {
    background-image: url('../images/icons/credit-cards/mastercard.png');
}

.franky-cc-wrap input#franky_card[data-card-brand="amex"] {
    background-image: url('../images/icons/credit-cards/amex.png');
}

.franky-cc-wrap input#franky_card[data-card-brand="discover"] {
    background-image: url('../images/icons/credit-cards/discover.png');
}

.franky-cc-wrap input#franky_card[data-card-brand="diners"] {
    background-image: url('../images/icons/credit-cards/diners.png');
}

.franky-cc-wrap input#franky_card[data-card-brand="jcb"] {
    background-image: url('../images/icons/credit-cards/jcb.png');
}

.franky-cc-wrap input#franky_card[data-card-brand="unknown"] {
    background-image: none;
}

/* Campo CVV tipo password */
.franky-cc-wrap input#franky_cvv {
    letter-spacing: 3px;
    font-family: monospace;
}

/* Estados de error */
.franky-cc-wrap input.franky-field-error,
.franky-cc-wrap .woocommerce-invalid input.input-text {
    border-color: #e53935;
}

.franky-cc-wrap input.franky-field-error:focus,
.franky-cc-wrap .woocommerce-invalid input.input-text:focus {
    box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.15);
}

/* Clear para floats */
.franky-cc-wrap .clear {
    clear: both;
    display: block;
}

/* Seguridad visual */
.franky-cc-wrap::before {
    content: '';
    grid-column: 1 / -1;
    display: block;
    height: 0;
}

/* Indicador de seguridad */
.franky-security-badge {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    background: #e8f5e9;
    border-radius: 4px;
    font-size: 12px;
    color: #2e7d32;
}

.franky-security-badge svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* Responsive */
@media screen and (max-width: 480px) {
    .franky-cc-wrap {
        grid-template-columns: 1fr;
        padding: 15px;
    }

    .franky-cc-wrap .form-row-first,
    .franky-cc-wrap .form-row-last {
        grid-column: 1;
    }

    .franky-cc-wrap input.input-text {
        font-size: 16px; /* Previene zoom en iOS */
    }
}

/* WooCommerce overrides */
.woocommerce-checkout #payment .franky-cc-wrap {
    margin-top: 10px;
}

.woocommerce-checkout .wc-credit-card-form.wc-payment-form {
    background: transparent;
    border: none;
    padding: 0;
}

/* Animaciones sutiles */
@keyframes frankyShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.franky-cc-wrap input.franky-field-error {
    animation: frankyShake 0.3s ease-in-out;
}

/* Estilos para modo prueba */
.franky-test-mode-notice {
    background: #fff3cd;
    color: #856404;
    padding: 10px 15px;
    border-radius: 4px;
    font-size: 13px;
    margin-bottom: 15px;
    border-left: 4px solid #ffc107;
}

/* Estilos legacy para compatibilidad - scoped bajo .franky-cc-wrap */
.franky-cc-wrap .form-container {
    display: grid;
    grid-column-gap: 10px;
    grid-template-columns: auto auto;
    grid-template-rows: 90px 90px 80px;
    grid-template-areas: "name name" "number number" "expiration security";
    max-width: 400px;
    padding: 5px;
    color: #707070;
}

.franky-cc-wrap .form-container .field-container:first-of-type {
    grid-area: name;
}

.franky-cc-wrap .form-container .field-container:nth-of-type(2) {
    grid-area: number;
}

.franky-cc-wrap .form-container .field-container:nth-of-type(3) {
    grid-area: expiration;
}

.franky-cc-wrap .form-container .field-container:nth-of-type(4) {
    grid-area: security;
}

.franky-cc-wrap .field-container {
    position: relative;
}

.franky-cc-wrap .input-style {
    margin-top: 3px;
    padding: 15px;
    font-size: 16px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid #dcdcdc;
}

.franky-cc-wrap .mandatory {
    color: red;
}

.franky-cc-wrap .labelColor {
    color: white;
}