@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"); .woocommerce-checkout #payment div.payment_box .pl-form-container,
.wp-block-woocommerce-checkout .pl-form-container,
#payload-add-payment-method .pl-form-container {
max-width: 500px;
padding-right: 1rem;
}
.woocommerce-checkout #payment div.payment_box .pl-input,
.wp-block-woocommerce-checkout .pl-input,
#payload-add-payment-method .pl-input {
width: 100%;
height: 1.5rem;
padding: 2px 5px;
font-family: Lato, sans-serif;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 0.2rem;
outline: none;
}
.woocommerce-checkout #payment div.payment_box .pl-input::-moz-placeholder, .wp-block-woocommerce-checkout .pl-input::-moz-placeholder, #payload-add-payment-method .pl-input::-moz-placeholder {
color: #6c757d;
}
.woocommerce-checkout #payment div.payment_box .pl-input::placeholder,
.wp-block-woocommerce-checkout .pl-input::placeholder,
#payload-add-payment-method .pl-input::placeholder {
color: #6c757d;
}
.woocommerce-checkout #payment div.payment_box .pl-input:focus, .woocommerce-checkout #payment div.payment_box .pl-input.pl-focus,
.wp-block-woocommerce-checkout .pl-input:focus,
.wp-block-woocommerce-checkout .pl-input.pl-focus,
#payload-add-payment-method .pl-input:focus,
#payload-add-payment-method .pl-input.pl-focus {
box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--wc-primary) 15%, transparent);
border-color: color-mix(in srgb, var(--wc-primary) 70%, transparent);
}
.woocommerce-checkout #payment div.payment_box .pl-input:focus.pl-input-invalid, .woocommerce-checkout #payment div.payment_box .pl-input.pl-focus.pl-input-invalid,
.wp-block-woocommerce-checkout .pl-input:focus.pl-input-invalid,
.wp-block-woocommerce-checkout .pl-input.pl-focus.pl-input-invalid,
#payload-add-payment-method .pl-input:focus.pl-input-invalid,
#payload-add-payment-method .pl-input.pl-focus.pl-input-invalid {
box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--wc-red) 15%, transparent);
}
.woocommerce-checkout #payment div.payment_box .pl-input.pl-input-invalid,
.wp-block-woocommerce-checkout .pl-input.pl-input-invalid,
#payload-add-payment-method .pl-input.pl-input-invalid {
border-color: color-mix(in srgb, var(--wc-red) 70%, transparent);
}
.woocommerce-checkout #payment div.payment_box label.pl-input-label,
.wp-block-woocommerce-checkout label.pl-input-label,
#payload-add-payment-method label.pl-input-label {
display: block;
margin-bottom: 0.2rem;
font-size: 0.9rem;
font-weight: 700;
}
.woocommerce-checkout #payment div.payment_box .pl-form-control,
.wp-block-woocommerce-checkout .pl-form-control,
#payload-add-payment-method .pl-form-control {
margin-bottom: 1rem;
}
.woocommerce-checkout #payment div.payment_box .pl-invalid-hint,
.wp-block-woocommerce-checkout .pl-invalid-hint,
#payload-add-payment-method .pl-invalid-hint {
font-size: 0.7rem;
color: var(--wc-red);
height: 0.7rem;
padding-top: 0.2rem;
}
.woocommerce-checkout #payment div.payment_box .pl-form-error,
.wp-block-woocommerce-checkout .pl-form-error,
#payload-add-payment-method .pl-form-error {
margin: 1rem 0;
border: 1px solid color-mix(in srgb, var(--wc-red) 70%, transparent);
color: var(--wc-red);
background: color-mix(in srgb, var(--wc-red) 20%, transparent);
padding: 0.5rem 0 0.5rem 1rem;
border-radius: 0.2rem;
}