/**

    RPECK 24/11/2023 - Main CSS for Checkout Payment Form
    --
    Various elements provided to give us the means to customise how the form looks

**/

/* RPECK 24/11/2023 - General */
checkout-form { display:block; max-width: 100% !important; }

/* RPECK 24/11/2023 - Paragraph */
checkout-form p.response                     { text-align: center; }
checkout-form p.response span#customer-email { font-weight: bold; text-decoration: underline; }

/* RPECK 17/11/2023 - Loading */
checkout-form.loading       { position: relative; min-height: 25px; }
checkout-form.loading:after {
    display: block;
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(255,255,255,0.65);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' style='margin:auto;background:0 0;display:block;shape-rendering:auto' width='23' height='23' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E%3Cg transform='translate(80 50)'%3E%3Ccircle r='6' fill='%23202020'%3E%3CanimateTransform attributeName='transform' type='scale' begin='-0.426829268292683s' values='1.5 1.5;1 1' keyTimes='0;1' dur='0.48780487804878053s' repeatCount='indefinite'/%3E%3Canimate attributeName='fill-opacity' keyTimes='0;1' dur='0.48780487804878053s' repeatCount='indefinite' values='1;0' begin='-0.426829268292683s'/%3E%3C/circle%3E%3C/g%3E%3Cg transform='rotate(45 -50.35533906 121.5685425)'%3E%3Ccircle r='6' fill='%23202020' fill-opacity='.875'%3E%3CanimateTransform attributeName='transform' type='scale' begin='-0.3658536585365854s' values='1.5 1.5;1 1' keyTimes='0;1' dur='0.48780487804878053s' repeatCount='indefinite'/%3E%3Canimate attributeName='fill-opacity' keyTimes='0;1' dur='0.48780487804878053s' repeatCount='indefinite' values='1;0' begin='-0.3658536585365854s'/%3E%3C/circle%3E%3C/g%3E%3Cg transform='rotate(90 -15 65)'%3E%3Ccircle r='6' fill='%23202020' fill-opacity='.75'%3E%3CanimateTransform attributeName='transform' type='scale' begin='-0.30487804878048785s' values='1.5 1.5;1 1' keyTimes='0;1' dur='0.48780487804878053s' repeatCount='indefinite'/%3E%3Canimate attributeName='fill-opacity' keyTimes='0;1' dur='0.48780487804878053s' repeatCount='indefinite' values='1;0' begin='-0.30487804878048785s'/%3E%3C/circle%3E%3C/g%3E%3Cg transform='rotate(135 -.35533906 41.5685425)'%3E%3Ccircle r='6' fill='%23202020' fill-opacity='.625'%3E%3CanimateTransform attributeName='transform' type='scale' begin='-0.24390243902439027s' values='1.5 1.5;1 1' keyTimes='0;1' dur='0.48780487804878053s' repeatCount='indefinite'/%3E%3Canimate attributeName='fill-opacity' keyTimes='0;1' dur='0.48780487804878053s' repeatCount='indefinite' values='1;0' begin='-0.24390243902439027s'/%3E%3C/circle%3E%3C/g%3E%3Cg transform='rotate(180 10 25)'%3E%3Ccircle r='6' fill='%23202020' fill-opacity='.5'%3E%3CanimateTransform attributeName='transform' type='scale' begin='-0.1829268292682927s' values='1.5 1.5;1 1' keyTimes='0;1' dur='0.48780487804878053s' repeatCount='indefinite'/%3E%3Canimate attributeName='fill-opacity' keyTimes='0;1' dur='0.48780487804878053s' repeatCount='indefinite' values='1;0' begin='-0.1829268292682927s'/%3E%3C/circle%3E%3C/g%3E%3Cg transform='rotate(-135 20.35533906 8.4314575)'%3E%3Ccircle r='6' fill='%23202020' fill-opacity='.375'%3E%3CanimateTransform attributeName='transform' type='scale' begin='-0.12195121951219513s' values='1.5 1.5;1 1' keyTimes='0;1' dur='0.48780487804878053s' repeatCount='indefinite'/%3E%3Canimate attributeName='fill-opacity' keyTimes='0;1' dur='0.48780487804878053s' repeatCount='indefinite' values='1;0' begin='-0.12195121951219513s'/%3E%3C/circle%3E%3C/g%3E%3Cg transform='rotate(-90 35 -15)'%3E%3Ccircle r='6' fill='%23202020' fill-opacity='.25'%3E%3CanimateTransform attributeName='transform' type='scale' begin='-0.06097560975609757s' values='1.5 1.5;1 1' keyTimes='0;1' dur='0.48780487804878053s' repeatCount='indefinite'/%3E%3Canimate attributeName='fill-opacity' keyTimes='0;1' dur='0.48780487804878053s' repeatCount='indefinite' values='1;0' begin='-0.06097560975609757s'/%3E%3C/circle%3E%3C/g%3E%3Cg transform='rotate(-45 70.35533906 -71.5685425)'%3E%3Ccircle r='6' fill='%23202020' fill-opacity='.125'%3E%3CanimateTransform attributeName='transform' type='scale' begin='0s' values='1.5 1.5;1 1' keyTimes='0;1' dur='0.48780487804878053s' repeatCount='indefinite'/%3E%3Canimate attributeName='fill-opacity' keyTimes='0;1' dur='0.48780487804878053s' repeatCount='indefinite' values='1;0' begin='0s'/%3E%3C/circle%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: auto;
}

/* RPECK 18/11/2023 - Error */
checkout-form.error {
    display: block;
    background-color: rgba(255,0,0,0.15);
    border: 1px solid rgba(255,0,0,1);
    color: rgba(255,0,0,1);
    padding: 15px;
    border-radius: 5px;
    font-family: sans-serif;
}