/**
 * Sella Payment Module
 *
 * @author      iPlusService S.r.l. <assistenza@iplusservice.it>
 * @category    Payment Module
 * @package     Ecommerce Sella
 * @version     1.6.0
 * @copyright   2024 Banca Sella
 * @license     GNU General Public License v3.0
 */

div.sella-payment-method-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

div.card-logos-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    column-gap: 10px;
    row-gap: 10px;
}

div.card-logos-container img {
    height: 20px;
}

div.sella-card-form {
    display: grid;
    grid-column-gap: 10px;
    max-width: 350px;
    margin-bottom: 30px;
    grid-template-areas:
        "number number"
        "expiration security";
}

div.sella-card-form div.field-container:first-of-type {
    grid-area: number;
    margin-bottom: 10px;
}

div.sella-card-form div.field-container:nth-of-type(2) {
    grid-area: expiration;
}

div.sella-card-form  div.field-container:nth-of-type(3) {
    grid-area: security;
}

div.sella-card-form div.field-container {
    position: relative;
}

div.sella-card-form svg.ccicon {
    height: 42px;
    position: absolute;
    right: 5px;
    top: calc(50% - 11px);
    width: 37px;
}

div.sella-error-form-message-container span {
    color: #f9423a;
}