/* checkout-information.css */
.ci-back-button {
    display: inline-block;
    margin-bottom: 1em;
    padding: 6px 12px;
    background-color: #fca7bb;
    color: #000000;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: background-color 0.2s;
}

.ci-back-button:hover {
    background-color: #ff7f9d;
}

.ci-checkout-form .ci-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 1em;
}

.ci-checkout-form .ci-name {
    flex: 0 0 22%;
    max-width: 22%;
    background-color: #ffc0cf9a;   
}

.ci-checkout-form .ci-address {
    flex: 0 0 40%;
    max-width: 40%;
    background-color: #ffc0cf9a;
}

.ci-checkout-form .ci-zip {
    flex: 0 0 15%;
    max-width: 15%;
    background-color: #ffc0cf9a;   
}

.ci-checkout-form .ci-state {
    flex: 0 0 20%;
    max-width: 20%;
    background-color: #ffc0cf9a;      
}
.ci-checkout-form .ci-card {
    flex: 1 1 30%;
    max-width: 30%;
    background-color: #ffc0cf9a;
}

.ci-checkout-form .ci-month {
    flex: 0 0 8%;
    max-width: 8%;
    background-color: #ffc0cf9a;
}

.ci-checkout-form .ci-year {
    flex: 0 0 10%;
    max-width: 10%;
    background-color: #ffc0cf9a;
}

.ci-checkout-form .ci-cvv {
    flex: 0 0 9%;
    max-width: 9%;
    background-color: #ffc0cf9a;
}

.ci-checkout-form .small input {
    font-size: 0.9em;
    padding: 6px;
}

.ci-checkout-form label {
    display: block;
    font-weight: 600;
}

.ci-checkout-form input[type="text"],
.ci-checkout-form input[type="number"],
.ci-checkout-form input[type="email"] {
    width: 100%;
    padding: 8px;
    margin-top: 4px;
    box-sizing: border-box;
    background-color: #ffc0cf;
    color: #000000;
}

.ci-checkout-form input::placeholder {
    color:#000000;
    opacity: 40%;
}
.ci-checkout-form *, 
.ci-checkout-form *::before, 
.ci-checkout-form *::after {
    box-sizing: border-box;
}

.ci-checkout-form input[type="submit"] {
    background-color: #fca7bb;
    color: rgb(0, 0, 0);
    border: none;
    padding: 10px 16px;
    cursor: pointer;
    border-radius: 4px;
}

.ci-checkout-form input[type="submit"]:hover {
    background-color: #ff7f9d;
}

.ci-checkout-form p {
    margin: 0;
    padding: 0;
}

.ci-subtotal {
    display: inline-block;
    font-weight: bold;
    margin: 1em 0 0.5em;
    color: #000000;
    background-color: #ffc0cf9a;
    padding: 10px 16px;
    border-radius: 4px;
}
.ci-subtotal-amount {
    background-color: #ffc0cf;
    padding: 2px 6px;
    border-radius: 4px;
}


@media (max-width: 912px) {
    .ci-checkout-form .ci-name {
        flex: 0 0 48%;
        max-width: 48%;
    }
    .ci-checkout-form .ci-address {
        flex: 0 0 80%;
        max-width: 80%;
    }
    .ci-checkout-form .ci-zip {
        flex: 0 0 35%;
        max-width: 35%;
    }
    .ci-checkout-form .ci-card {
        flex: 0 0 80%;
        max-width: 80%;
    }
    .ci-checkout-form .ci-month {
        flex: 0 0 30%;
        max-width: 30%;
    }
    .ci-checkout-form .ci-year {
        flex: 0 0 35%;
        max-width: 35%;
    }
    .ci-checkout-form .ci-cvv {
        flex: 0 0 28%;
        max-width: 28%;
    }
    .ci-checkout-form .ci-state {
        flex: 0 0 48%;
        max-width: 48%;
    }
}