wickes-css2 2.94.0-develop.5 → 2.94.0-develop.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wickes-css2",
-  "version": "2.94.0-develop.5",
+  "version": "2.94.0-develop.7",
   "description": "CSS and JS and page templates in use by Wickes",
   "main": "index.js",
   "scripts": {

package/src/components/checkout-action.hbs

@@ -1,14 +1,15 @@
-<div class="checkout-action__wrapper {{mod}}">
+<div class="checkout-action__wrapper {{lookup . "mod"}} {{view}}">
     {{#if head}}
         {{> checkout-section-title title=head}}
     {{/if}}
-    <div class="checkout-action">
+    <div class="checkout-action {{#if container}}container{{/if}}">
         <div class="checkout-action__section">
             <a href="#" class="btn btn_full btn-action btn-checkout">
-                Checkout
-                <span class="icon">
-                  <i class="fas fa-arrow-right"></i>
-                </span>
+              <span class="btn-wickes-checkout__label checkout-text--mixed">Checkout</span>
+              <span class="btn-wickes-checkout__label checkout-text--collect">Wickes Checkout</span>
+              <span class="icon">
+                <i class="fas fa-arrow-right"></i>
+              </span>
             </a>
         </div>
         <div class="checkout-action__section checkout-widget__basket-block">
@@ -23,13 +24,15 @@
                         </div>
                     </div>
                 </a>
+              {{#unless hidePaypalEmail}}
                 <div class="pay-pal_container-email">
-                    <div class="pay-pal_email-heading">Your PayPal email: </div>
-                    <div class="pay-pal_email-value">John.doe@gmail.com</div>
-                    <div class="pay-pal_email-link">
-                        <a href="#" title="" target="_blank">Don't use this email</a>
-                    </div>
+                  <div class="pay-pal_email-heading">Your PayPal email: </div>
+                  <div class="pay-pal_email-value">John.doe@gmail.com</div>
+                  <div class="pay-pal_email-link">
+                    <a href="#" title="" target="_blank">Don't use this email</a>
+                  </div>
                 </div>
+              {{/unless}}
             </div>
         </div>
     </div>

package/src/components/checkout-voucher-accordion.hbs

@@ -0,0 +1,15 @@
+<li class="checkout-widget__voucher-accordion">
+  <div
+      class="checkout-widget__voucher-toggle collapsed"
+      data-toggle="collapse"
+      data-target="#checkout-voucher-accordion-{{id}}"
+  >
+    Got a voucher?
+    <span class="checkout-widget__icon">
+            <i class="fal fa-angle-up fa-2x"></i>
+          </span>
+  </div>
+  <div class="collapse" id="checkout-voucher-accordion-{{id}}">
+    {{> checkout_voucher_large  id=id title=""}}
+  </div>
+</li>

package/src/components/checkout_order-summary-new.hbs

@@ -12,12 +12,13 @@
             {{/each}}
         {{else}}
             {{#each info}}
-                <li class="checkout-widget__item {{#if mod}}checkout-widget__item-{{mod}}{{/if}}">
+                <li class="checkout-widget__item {{#if (lookup this "mod")}}checkout-widget__item-{{lookup this "mod"}}{{/if}}">
                     <span>{{title}}</span>
                     <span class="checkout-widget__item-value">{{value}}</span>
                 </li>
             {{/each}}
         {{/if}}
+        {{> checkout-voucher-accordion id=id}}
         {{#if discounts}}
             <li class="checkout-widget__accordion-wrap checkout-widget__details-discount">
             <span class="checkout-widget__detail-name checkout-widget__detail-name_accordion collapsed" data-toggle="collapse"
@@ -35,6 +36,7 @@
             </li>
         {{/if}}
     </ul>
+  {{#unless mobile}}
     <div class="checkout-widget__total">
         {{#if confirmationSummary}}
             <div> {{ confirmation-summary.total.title }}</div>
@@ -44,5 +46,5 @@
             <div class="checkout-widget__total-value">{{ total.value }}</div>
         {{/if}}
     </div>
-
+  {{/unless}}
 </div>

package/src/components/checkout_voucher_large.hbs

@@ -1,19 +1,23 @@
 <div class="voucher">
-    {{#if title}}
-        {{> checkout-section-title}}
-    {{/if}}
-    <div class="checkout-widget checkout-voucher checkout-voucher_fixed">
-        <form id="form-checkout-voucher{{id}}">
-            {{> form-row id=(concat 'voucher-code' id) label="Voucher" label-hidden="true" required="true" placeholder="Enter code"}}
-            <button class="voucher__btn btn btn-secondary btn_full">
-                <span class="btn__text">Apply</span>
-            </button>
-        </form>
+  {{#if title}}
+    {{> checkout-section-title}}
+  {{/if}}
+  <div class="checkout-widget checkout-voucher checkout-voucher_fixed">
+    <form id="form-checkout-voucher{{id}}">
+      {{> form-row id=(concat 'voucher-code' id) label="Voucher" label-hidden="true" required="true" placeholder="Enter code" info=""}}
+      <button class="voucher__btn btn btn-primary">
+        <span class="btn__text">Apply</span>
+      </button>
+    </form>
+  </div>
+  {{#unless voucherApplied}}
+    <div class="checkout-widget checkout-voucher voucher-applied checkout-voucher-hide">
+      <div class="voucher-applied__inner">
+      <span class="icon icon__check">
+        <i class="fas fa-check-circle"></i>
+      </span>
+        <h5 class="heading-5 text-center">Voucher has been applied</h5>
+      </div>
     </div>
-    {{#unless voucherApplied}}
-        <div class="checkout-widget checkout-voucher voucher-applied checkout-voucher-hide">
-            <i class="fas fa-check-circle"></i>
-            <h3 class="heading-3 text-center">Voucher has been applied</h3>
-        </div>
-    {{/unless}}
+  {{/unless}}
 </div>

package/src/components/order-summary.hbs

@@ -1,66 +1,101 @@
+{{#if basket}}
+<div class="summary summary--mobile d-lg-none" id="summary-mobile-{{id}}">
+  {{> summary-mobile-bar}}
+  <div class="collapse summary__aside container" id="checkout-summary-mobile-accordion-{{id}}">
+
+    {{> checkout_order-summary-new head=title mod=mod id=(concat id "-mobile") mobile="true"}}
+    {{#unless basket}}
+      <div class="summary__payment footer-checkout">
+        {{#unless merged}}
+          {{#if paymentsCheckoutV2}}
+            <div class="footer-checkout-holder footer-checkout-holder--payways">
+              {{> payments-checkout-v2}}
+            </div>
+          {{else}}
+            <div class="footer-checkout-holder">
+              {{> payments-checkout clearPayIcon="true"}}
+              <span class="footer-checkout__copyright">
+                        Copyright ©
+                        <span class="current-year"></span> Wickes.co.uk
+                      </span>
+            </div>
+          {{/if}}
+        {{else}}
+          <div class="summary__payment-message">
+            <p class="summary__payment-main">{{vat-message.main}}</p>
+            <p class="summary__payment-additional">{{vat-message.additional}}</p>
+          </div>
+        {{/unless}}
+      </div>
+    {{/unless}}
+  </div>
+</div>
+{{/if}}
+
+
 <div class="summary {{#if mod}}summary-large{{/if}} {{#if paymentsCheckoutV2 }}summary--payways{{/if}}">
-    {{> checkout-section-title}}
-    {{#if mod}}
-        <div class="summary__accordion collapsed"
-              data-toggle="collapse"
-              data-target="#checkout-details-accordion-{{id}}"
-        >
-            <span class="summary__accordion-text">Show full summary</span>
-            <span class="icon summary-icon-small">
+  {{> checkout-section-title}}
+  {{#if mod}}
+    <div class="summary__accordion collapsed"
+         data-toggle="collapse"
+         data-target="#checkout-details-accordion-{{id}}"
+    >
+      <span class="summary__accordion-text">Show full summary</span>
+      <span class="icon summary-icon-small">
                 <i class="fas fa-angle-up"></i>
             </span>
-        </div>
-    {{/if}}
-    <div class="summary__aside">
-        {{> checkout_order-summary-new head=title mod=mod id=id}}
+    </div>
+  {{/if}}
+  <div class="summary__aside">
+    {{> checkout_order-summary-new head=title mod=mod id=id}}
 
-        {{#if klarna-placement}}
-            <div class="summary__klarna">
-                <klarna-placement
-                    data-key="credit-promotion-badge"
-                    data-locale="en-GB"
-                    data-purchase-amount="12000"
-                ></klarna-placement>
+    {{#if klarna-placement}}
+      <div class="summary__klarna">
+        <klarna-placement
+            data-key="credit-promotion-badge"
+            data-locale="en-GB"
+            data-purchase-amount="12000"
+        ></klarna-placement>
+      </div>
+    {{/if}}
+    {{#if clearpay-placement}}
+      {{> clearpay applyMargin=true hasKlarna=true}}
+    {{/if}}
+    {{#unless basket}}
+      <div class="summary__payment footer-checkout">
+        {{#unless merged}}
+          {{#if paymentsCheckoutV2 }}
+            <div class="footer-checkout-holder footer-checkout-holder--payways">
+              {{> payments-checkout-v2 }}
             </div>
-        {{/if}}
-        {{#if clearpay-placement}}
-            {{> clearpay applyMargin=true hasKlarna=true}}
-        {{/if}}
-        {{#unless basket}}
-            <div class="summary__payment footer-checkout">
-                {{#unless merged}}
-                  {{#if paymentsCheckoutV2 }}
-                    <div class="footer-checkout-holder footer-checkout-holder--payways">
-                      {{> payments-checkout-v2 }}
-                    </div>
-                  {{else}}
-                    <div class="footer-checkout-holder">
-                      {{> payments-checkout clearPayIcon="true" }}
-                      <span class="footer-checkout__copyright">Copyright © <span class="current-year"></span> Wickes.co.uk</span>
-                    </div>
-                  {{/if}}
-                {{else}}
-                    <div class="summary__payment-message">
-                        <p class="summary__payment-main">{{vat-message.main}}</p>
-                        <p class="summary__payment-additional">{{vat-message.additional}}</p>
-                    </div>
-                {{/unless}}
+          {{else}}
+            <div class="footer-checkout-holder">
+              {{> payments-checkout clearPayIcon="true" }}
+              <span class="footer-checkout__copyright">Copyright © <span class="current-year"></span> Wickes.co.uk</span>
             </div>
+          {{/if}}
+        {{else}}
+          <div class="summary__payment-message">
+            <p class="summary__payment-main">{{vat-message.main}}</p>
+            <p class="summary__payment-additional">{{vat-message.additional}}</p>
+          </div>
         {{/unless}}
-    </div>
+      </div>
+    {{/unless}}
+  </div>
 
-    {{#if basket-id}}
-        <div class="summary__basked-id">
-            Basket ID: <span class="id-number">136589003</span>
-        </div>
-    {{/if}}
+  {{#if basket-id}}
+    <div class="summary__basked-id">
+      Basket ID: <span class="id-number">136589003</span>
+    </div>
+  {{/if}}
 
-    {{#if email}}
-        <div class="summary__email">
-            <h3 class="heading-3">Email</h3>
-            <div class="summary__email-info">
-                Examplemail@wickes.co.uk
-            </div>
-        </div>
-    {{/if}}
+  {{#if email}}
+    <div class="summary__email">
+      <h3 class="heading-3">Email</h3>
+      <div class="summary__email-info">
+        Examplemail@wickes.co.uk
+      </div>
+    </div>
+  {{/if}}
 </div>

package/src/components/summary-mobile-bar.hbs

@@ -0,0 +1,17 @@
+<div class="summary__mobile-bar">
+  <div class="summary__mobile-order collapsed"
+       data-toggle="collapse"
+       aria-expanded="false"
+       data-target="#checkout-summary-mobile-accordion-{{id}}">
+    <div class="summary__mobile-container container">
+      <span class="summary__mobile-bar-label">Order Summary</span>
+      <div class="summary__icon-container">
+        <span class="summary__mobile-bar-total">{{ total.value }}</span>
+        <span class="summary__icon summary__icon-up">
+          <i class="fal fa-angle-up fa-2x"></i>
+        </span>
+      </div>
+    </div>
+  </div>
+  {{> checkout-action container="true" hidePaypalEmail="true"}}
+</div>

package/src/js/components/general/is-trade-pro.js

@@ -21,4 +21,24 @@ $(document).ready(function () {
     if (navigator.userAgent.match(/TradeProMobile_iOS|TradeProMobile_Android|DIYMobile_iOS|DIYMobile_Android/i)) {
         $('body').addClass('tp-app');
     }
-});
+});
+
+$(function(){
+    if (Wick.isTradePro) {
+        $('body').addClass('tp-app');
+    }
+
+    if (Wick.isTradeProAndroid) {
+        $('body').addClass('tp-android');
+    }
+
+    if (Wick.isTradeProiOS) {
+        $('body').addClass('tp-ios');
+
+        if (
+          window.matchMedia('(min-width: 768px)').matches
+        ) {
+            $('body').addClass('tp-ios-notch');
+        }
+    }
+});

package/src/js/components/general/switchVat.js

@@ -54,7 +54,8 @@ Wick.VatToggle = {
   },
 
   isToggleVatAvailable: function() {
-    return window.ACC.app.isVatToggleAvailable;
+    //TODO: remove true
+    return true;
   },
 
   isOn: function () {

package/src/js/emulation/basket-data.js

@@ -43,7 +43,7 @@ Wick.BasketData = (function () {
       "status": 400,
       "responseJSON": {
         "globalMessage": {
-          "message": "Delivery is already free. Coupon can’t be applied",
+          "message": "Delivery is already free.\nCoupon can’t be applied."
         }
       }
     },
@@ -443,8 +443,8 @@ Wick.BasketData = (function () {
       "appliedProductPromotions": [],
       "appliedOrderPromotions": [],
       "promotionsInfo": null,
-      "clickAndCollectOnly": true,
-      "deliveryItemsQuantity": 0,
+      "clickAndCollectOnly": false,
+      "deliveryItemsQuantity": 1,
       "pickupItemsQuantity": 2,
       "freeDelivery": false,
       "subtotalWithoutCharity": {"value": 19.0, "formattedValue": "£19.00", "currencyIso": "GBP", "formattedPriceWithoutCurrencySymbol": "19.00"},

package/src/js/page/basket/summary-mobile.js

@@ -0,0 +1,17 @@
+const summaryMobileEl = {
+  summaryAside: '.summary__aside',
+  backToTop : '#back-to-top',
+};
+
+export function addClassToSummaryAside(data) {
+  const payPalEnabled = data?.paymentInfos?.payPalEnabled;
+  const clickAndCollectOnly = data.clickAndCollectOnly;
+  const isPayPalAllowed = payPalEnabled && clickAndCollectOnly;
+  const $aside = $(summaryMobileEl.summaryAside);
+  const $backToTop = $(summaryMobileEl.backToTop);
+
+  if (isPayPalAllowed === false) {
+    $aside.addClass('single-button');
+    $backToTop.addClass('single-button');
+  }
+}

package/src/js/page/components/order-summary.js

@@ -1,4 +1,5 @@
 import {updateDiscount} from "./discounts";
+import {addClassToSummaryAside} from "../basket/summary-mobile";
 
 const osEl = {
     $summarySection: $('.summary'),
@@ -9,9 +10,9 @@ const osEl = {
     itemFree: '.checkout-widget__item-free',
     itemDeficit: '.checkout-widget__item-deficit',
     summaryDelivery: '.checkout-widget__item-delivery',
+    summaryMobileTotal: '.summary__mobile-bar-total',
 }
 
-
 export function updateOrderSummary(data, equalMap, isVoucher) {
     equalMap.forEach((obj) => {
         if ($(obj.item).length) {
@@ -32,9 +33,13 @@ export function updateOrderSummary(data, equalMap, isVoucher) {
         }
     })
 
+    const value = data.totalPrice?.formattedValue || data.total;
+
     updateDiscount(data, isVoucher);
     hideUnusedDeliveryTypeCost(data, isVoucher);
     calculateFreeDelivery(data);
+    updateSummaryMobileBarTotal(value);
+    addClassToSummaryAside(data);
 }
 
 function createCheckoutWidgetItem(obj) {
@@ -97,3 +102,6 @@ function calculateFreeDelivery(data) {
     })
 }
 
+function updateSummaryMobileBarTotal(formattedValue) {
+    $(osEl.summaryMobileTotal).text(formattedValue);
+}

package/src/js/page/components/voucher.js

@@ -15,7 +15,7 @@ const voucherEl = {
     formInvalid: 'form_invalid',
     fieldRow: '.form-row[data-row-required]',
     rowValidationError: 'form-row_validation-error',
-    voucherHide: '.checkout-voucher-hide',
+    voucherHide: 'checkout-voucher-hide',
     fieldError: '.form-row__error',
     subtotal: '.checkout-widget__item-bold',
     vat: '.checkout-widget__item-vat',

package/src/layouts/basket-new.hbs

@@ -38,7 +38,7 @@
       {{#block "prefooter"}}{{/block}}
     </main>
     {{#block "footer"}}
-      {{> footer-checkout-v2 }}
+      {{> footer-checkout-v2}}
     {{/block}}
     {{#block "foot"}}
       {{> scripts }}

package/src/page_checkout_payment-details_with-card-loader.html

@@ -0,0 +1,56 @@
+{{#extend "checkout" pageClass="page_checkout-delivery-new page_checkout-confirmation-new" title="Checkout - Payment details" isAsideSticky="true"}}
+{{#content "steps"}}
+{{> steps-three-steps active-step-index="3" }}
+{{/content}}
+
+{{#content "head" mode="append"}}
+<link type="text/css" rel="stylesheet" href="./css/pages/checkout-new.css">
+<link type="text/css" rel="stylesheet" href="./css/pages/page_checkout_delivery-new.css">
+<link type="text/css" rel="stylesheet" href="./css/components/payment-details-BPS-form.css">
+<link type="text/css" rel="stylesheet" href="./css/components/checkout-payment-details-v2.css">
+{{/content}}
+
+{{#content "aside"}}
+{{> order-summary delivery-address-v2.summary no-action=true id=1 basket-id=true}}
+{{/content}}
+
+
+{{#content "main"}}
+<div class="delivery-block">
+    <h3 class="delivery-block__heading">Delivery Information</h3>
+    <div class="delivery-block__wrapper">
+        {{#with checkoutOrder.deliveryPayments.[0]}}
+        <div class="checkout-order">
+            {{> checkout-order-block}}
+        </div>
+        {{/with}}
+    </div>
+</div>
+
+<div class="click-collect-block">
+    <h3 class="click-collect-block__heading">Click & Collect</h3>
+    <div class="click-collect-block__wrapper">
+        {{#with checkoutOrder.clickCollectDeliveryAddress.[0]}}
+        <div class="checkout-order">
+            {{> checkout-order-block}}
+        </div>
+        {{/with}}
+    </div>
+</div>
+
+<div class="billing-payment-block">
+    <h3 class="billing-payment-block__heading">Billing & Payment</h3>
+    <div class="billing-payment-block__wrapper">
+        {{> checkout-payment-details-v2 }}
+    </div>
+</div>
+
+{{/content}}
+
+{{#content "foot" mode="append"}}
+<script defer src="./js/page/checkout-confirmation-new.js"></script>
+<script defer src="./js/page/checkout-payment-details.js"></script>
+{{> checkout-terms-and-conditions-modal }}
+{{> payment-loader }}
+{{/content}}
+{{/extend}}

package/src/page_shopping-cart-v2.html

@@ -19,15 +19,14 @@
   {{/content}}
 {{#content "aside"}}
   {{> order-summary
-    shopping-cart-v2.checkout
-    id=1
-    title="Order Summary"
-    basket=true
+  shopping-cart-v2.checkout
+  id=1
+  title="Order Summary"
+  basket=true
   }}
   {{> checkout-action  mod="mounted"}}
+  {{> checkout-action  mod="mounted" view="mobile"}}
   {{> summary-payment paymentsCheckoutV2=true}}
-  {{> checkout_voucher_large  title="Voucher Code" id="1"}}
-  {{> checkout-action  mod="large checkout-action-payways"}}
 {{/content}}
 {{#content "main"}}
   <input type="hidden" id="SUPPLIER_DELIVERED_7_DAYS" value="<b> Wickes Supplier </b> - Delivery within 7 days">
@@ -41,16 +40,7 @@
       {{/each}}
     </section>
   {{/each}}
-  {{> charity-donations-multiple shopping-cart-v2.charityDonationMultiple}}
-  {{> checkout_voucher_large  title="Voucher Code" id="2"}}
-  {{> order-summary
-    shopping-cart-v2.checkout
-    title="Order Summary"
-    id=2
-    mod="large"
-    basket=true
-  }}
-  {{> checkout-action mod="checkout-action-payways"}}
+{{> charity-donations-multiple shopping-cart-v2.charityDonationMultiple}}
 {{/content}}
 {{#content "foot" mode="append"}}
   <script defer src="./js/basket.min.js"></script>

package/src/scss/barclays-paypage-combined-minified.css

@@ -1 +1 @@
-#acsHeading,#cscHeading,#expiryMonthTooltipText,#messagePanel img,#paymentDetailsHeader,#paypageHeading,#submitHelp,.invisible,.logoImg{display:none}#messagePanel,#storeName,.logo{text-align:center}.bodyText,body{font-family:Roboto,Helvetica,Arial,sans-serif}#amexAcceptanceMarkLink,#jcbAcceptanceMarkLink,#mcAcceptanceMarkLink,#paypalAcceptanceMarkLink,#vbvAcceptanceMarkLink,.submitButton,a,a:hover,a:visited{text-decoration:none}#commands,#footer{margin-top:30px}@font-face{font-family:Roboto;src:url(../fonts/Roboto-Regular.woff2) format("woff2"),url(../fonts/Roboto-Regular.woff) format("woff");font-weight:400;font-style:normal}body{color:#626d75;font-size:100%;margin:0}a img,body{border:0}#requiredFieldsMessage1{font-size:12px}.dateDropDownLabel,.description{position:absolute;left:-10000px;top:auto;width:.063em;height:.063em;overflow:hidden}#cardEntryForm,.formSection,.formSection #cardNumber.formInput,.formSection #cardType.formInput,.formSection #cardholderName.formInput,.formSection #expiryYear.formInput,.submitButton{box-sizing:border-box;width:99vw}.formSection{width:97vw}.formSection #expiryYear.formInput{width:80px}.formSection.inputError .tooltip{display:block!important}.formSection.inputError .formInput{border-color:#cf000f}#cardEntryForm{margin:0 auto;width:100%;text-align:left}.logo{width:100%;margin:auto}.logoImg{width:12.563em;height:2.938em}#storeName{margin:2%;font-weight:700}#messagePanel{font-size:medium;font-weight:400;background-color:#c00;border:.125em solid #c00;padding:5px 2px;margin:5px;list-style:none;color:#fff}.inlineText{display:block;font-size:.75em;font-weight:400;width:100%;float:left}#errorIcon,.noJsErrorIcon{width:1em;height:1em}#errorIcon{margin-right:1em}.centered{margin:0 auto}#basketPanel,#billingAddressPanel,#customerAddressPanel,#paymentDetailsPanel,#paymentMethodPanel,#purchaseDetailsPanel,#shippingAddressPanel{padding-top:2%;margin-bottom:2%}.formInput{font-size:.875rem;line-height:1.57143;background:#fff;border:1px solid #ccc;border-radius:3px;color:#3e3e3e;padding:8px 16px;outline:0;height:40px;width:100%;box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none;margin-bottom:5px}label.inputError{color:#800}input.inputError,select.inputError{background-color:#ffe3e3!important;color:#800;border:.1em solid #800}input.inputValid,select.inputValid{background-color:#dfffdf!important;color:#005f00;border:.1em solid #005f00}label.labelError{color:#d00!important}.bodyText{color:#626d75;font-size:medium;text-align:left}#cscBottomImage,#cscDialog,#dccEntryForm,#footer,#mainDccDiv,#payerAuthDialog,#progressText,#subHeaderText,.basketItemQty,.basketQtyHeader,.bodyStyle,.cancelButton,.noJsContinueButton,.progressSpinner,.quantityCol,.wait,div#purchaseDetailsAmount,span#amount,tbody tr td{text-align:center}#purchaseDetailsHeader{padding-top:.5%}#addressLabel,#amountLabel,#goodsLabel,#postCodeLabel,.basketItemFooter,.basketItemPriceFooter{display:inline-block}#address,#amount,#goods,#postCode{width:48%;display:inline-block}#cardType,#cscDialogContent{width:95%}#expiryMonth,#expiryYear,#startMonth,#startYear{width:70px;padding:8px}#expiryYear,#startYear{margin-left:2px}#expiryMonth,#startMonth{margin-right:2px}#expiryYearLabel{font-size:0;position:static}#cardType::-ms-expand,#expiryMonth::-ms-expand,#expiryYear::-ms-expand{display:none}#expiryYearLabel:after{font-size:16px;content:"/"}#issue{width:15%}#ifAvailable{font-style:italic;font-weight:400;font-size:medium;margin-left:.625em}#confirmCsc,#csc{box-sizing:border-box}#cscSection:after{content:"";width:38%;height:51px;display:block;position:absolute;bottom:-15px;right:125px}#dccSubmit,#newCardLink{float:right}.linkText{font-family:Roboto,Helvetica,Arial,sans-serif!important;font-size:medium;font-weight:700;margin:1% 2% 1% 8%;padding:1.5% 5%;border:thin solid #626d75;background-color:#eee!important;background-image:linear-gradient(bottom,#f5a30d,#ffd786 82%)!important;background-image:-ms-linear-gradient(bottom,#f5a30d 0,#ffd786 82%)!important;background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0,#f5a30d),color-stop(.82,#ffd786))!important;color:#036!important;border-radius:.313em;-moz-border-radius:.313em;-webkit-border-radius:.313em;box-shadow:.188em .188em .188em #ccc;-moz-box-shadow:.188em .188em .188em #ccc;-webkit-box-shadow:.188em .188em .188em #ccc}#cardHolderText,#merchantText,#progressText,.cancelButton,.formLabel,.submitButton{font-family:Roboto,Helvetica,Arial,sans-serif}.cancelButton,legend{color:#000;font-weight:700}a,a:hover,a:visited{color:#626d75!important}#closeCSCLink{display:block;padding:2%;margin:1% 2% 1% 1%}#cscDialog{display:none;margin:0;position:fixed;top:25%;width:95%;z-index:6000}#cscDialogContent,#payerAuthDialogContent{box-shadow:.313em .313em .313em #ccc;-moz-box-shadow:.313em .313em .313em #ccc;-webkit-box-shadow:.313em .313em .313em #ccc;display:block;margin:0 auto;background:#fff;border:.063em solid #636b70;text-align:center}#addressPanel,#amexAcceptanceMark,#btnCancel,#cardNumberHelpPanel,#cscDescLink .linkText,#cscRightImage,#footer,#paymentDetailsLegend,#paymentDetailsTitle,#ppLogo,#purchaseDetailsGoods,#purchaseDetailsHeader,#purchaseDetailsPanel,#shippingAddressPanel,#storeName,#visaCheckoutPaymentDetailsPanel,#visaCheckoutPaymentSummaryPanel,.basketPriceHeader,.closeDialogIcon,.labelHelpImg,.priceCol,.tooltipBottom{display:none}#cscDialogTitle{margin:.75em 0 .563em .6em}#cscDialogTitle,.dialogTitle{display:block;font-weight:700}.dialogTitle{margin-bottom:1.15em}#cscDescriptionBody{height:10.938em;width:100%}#cscText{width:100%;text-align:left}#cscBottomImage{height:6em;width:100%;margin:.625em 0 .5em}.cancelButton{width:30%;float:left;background:#9fc2c1;border:1px solid #8daf9c;font-size:16px;padding:3%;border-radius:6px;display:none}#footer,#payerAuthDialog{width:100%}#payerAuthDialog{display:block;margin:0 auto;position:absolute;top:6.25em}#payerAuthDialogContent{width:25em;height:31.25em}#payerAuthIframe{width:100%;border:0;padding:0;height:30em}.bodyStyle{display:block;margin:4%;width:90%}.noJsReturnPanel{display:block;margin-top:.938em;border:thin solid #d00;padding:.625em .625em .625em 2.5em;color:#cc292b;font-size:medium}.noJsContinueButton{display:block;margin:0 auto;padding:.313em}.wait{top:50%;left:50%;margin-top:-7em;margin-left:-7em;z-index:6000;overflow:auto;border:.063em solid #636b70;width:14.5em;height:4em;background-color:#fff;padding-top:1em}#overlay,.wait{display:none;position:absolute}#overlay{opacity:.4;top:0;left:0;background-color:#dcdcdc;width:100%;z-index:5000}.opaque{opacity:.4;zoom:1}tbody tr td{margin:0 auto;height:auto!important;background:#fff}#progressSpinnerImage{margin:0 auto .6em;width:2em;height:2em;display:block}#progressText{color:#e4141d;font-size:medium}#mainDccDiv{width:95%;margin-left:auto;margin-right:auto}#subHeaderText{font-size:medium;font-weight:700;margin-bottom:2%}#dccEntryForm{margin:0 auto}#selectionPanel,.errorText{text-align:left}#cardHolderText,#merchantText{color:#626d75;margin-top:3%;font-size:large;font-weight:700}#dccCommands{margin:2% auto 0}#dccCancel,#dccSubmit{font-size:medium}#dccCancel{float:left}#basketTable{width:100%}.basketHeader{font-weight:700;font-size:.625em;padding-left:.625em}.basketFooter,.basketSubTotalHeader,.subTotalCol{text-align:right}.basketFooter{font-weight:700;width:100%}.basketItemFooter{padding-right:1em;width:80%}.billingAddress,.shippingAddress{display:block;padding-left:.625em;text-align:left;clear:left}#paymentMethodHeader{padding-top:.313em}button{width:auto;overflow:visible}.paymentMethodCARD,.paymentMethodGIRO_PAY,.paymentMethodIDEAL,.paymentMethodMASTER_PASS,.paymentMethodMISTER_CASH,.paymentMethodPAY_PAL,.paymentMethodSOFORT{display:block;margin:.625em}.paymentMethodCARD{width:12.125em;border:.063em solid #ccc;border-radius:.625em}.paymentMethodPAY_PAL{width:12.188em}.paymentMethodMASTER_PASS{width:9.063em}.paymentMethodIDEAL{width:2.313em}.paymentMethodGIRO_PAY{width:4.5em}.paymentMethodSOFORT{width:6.25em}.paymentMethodMISTER_CASH{width:3.313em}.paymentMethodOption{display:inline-block;vertical-align:middle!important;height:2.125em;font-size:0;position:absolute;left:-9000px}#cardNumberSection,#commands,#cscMessagePanel,#cscSection,#expiryDateMessagePanel,#expirySection,.tooltipText{position:relative}legend{display:block;text-align:left;border-style:none}fieldset{display:block;border:0;background-color:transparent;padding-top:1%;padding-bottom:2%}#confirmCheck1,#confirmCheck2{float:left;margin:1% 0 1% 2%}#confirmCheck1LabelPanel,#confirmCheck2LabelPanel{display:inline-block;width:82%;font-weight:400}#checkBoxSection,#checkBoxSection2{margin-top:.5em}.basketItemImage{width:2.5em;height:2.5em;float:left;margin-right:.5em}#amexAcceptanceMarkImg,#jcbAcceptanceMarkImg,#mcAcceptanceMarkImg,#paypalAcceptanceMarkImg,#vbvAcceptanceMarkImg{height:2em!important;display:inline-block!important;overflow:hidden}#vbvAcceptanceMarkImg{width:3.55em!important}#mcAcceptanceMarkImg{width:4.35em!important}#amexAcceptanceMarkImg,#jcbAcceptanceMarkImg{width:4.4em!important}#paypalAcceptanceMarkImg{width:3.125em!important}.cardType{display:block!important;background-repeat:no-repeat;padding:.125em}#confirmCardLabel{display:block!important;font-size:.75em;font-weight:700}#confirmCardExpiryLabel{display:block!important;font-size:.6em;font-style:italic}#cscImage{width:16em}span#amountLabel{font-size:20px;color:#616161}span#amount{font-size:18px}#confirmCheck2Label:after{content:"";width:15px;height:15px;position:relative;top:1px;margin-left:5px;display:inline-block;background-image:url(../lock.png);background-size:contain;background-repeat:no-repeat}input,textarea{-webkit-appearance:none;-webkit-border-radius:0}.formLabel{text-align:left;display:block;margin:20px 0 5px;color:#3e3e3e;font-size:16px;font-weight:700;letter-spacing:0;line-height:22px}#messagePanel,.tooltip{display:none!important}.formLabelDescr{font-size:12px;line-height:20px;font-weight:500}#cardNumberHelpPanel:before{content:"*";display:block}input[type=radio]{margin:1em .25em}input.inputError{background-color:#fff!important;border-color:#c00;color:#c00}.tooltip{padding:0}.tooltipText{width:100%;min-height:1px;color:#cf000f;margin-top:8px;font-size:14px;letter-spacing:0;line-height:22px}#cscDescLink{display:none;background-image:url(../images/hybrid_cvv.png);width:37px;height:25px;background-size:cover;margin:-39px 0 15px 100px}.submitButton{float:none;box-shadow:none;display:inline-block;cursor:pointer;background-color:#0277bd;color:#fff;font-weight:500;text-align:center;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;padding:8px 0;width:100%;font-size:16px;line-height:24px;border-radius:3px;transition:none;height:40px}#commands{width:100%}#commands:before{height:32px;width:33px;box-sizing:border-box}#paymentDetailsPanel #paymentDetailsFieldset{padding:0;margin:0}#cscSection,#expirySection{display:inline-block;vertical-align:top}#expirySection{width:150px;white-space:nowrap;margin-right:16px}#cscSection{width:100px;order:5}#paymentDetailsPanel{display:flex;width:100%;flex-flow:wrap}#cardNumber,#cardholderName{width:99vw;box-sizing:border-box}#expiryDateMessagePanel{display:block;margin-top:5px;margin-left:0;order:6;width:300px}.formInputForError{font-size:.875rem;line-height:1.57143;background:#fff;border:1px solid red;border-radius:3px;color:#3e3e3e;padding:8px 16px;outline:0;height:40px;box-shadow:none;margin-bottom:5px;width:90%}#cscMessagePanel{white-space:normal;width:300px;right:165px}#errorIconDiv{display:flex;align-items:center;justify-content:center}.inlineErrorIcon{width:15px;height:auto}.errorMessagePanel{gap:3px}#cardNumberSection,#cardholderNameSection{display:block;width:100%}@media (min-width:490px){@font-face{font-weight:500}.formInput{touch-action:none}.formInput.visa{background:url(../images/icons/visa-icon.png) 99% no-repeat #fff}.formInput.mastercard{background:url(../images/icons/mastercard-icon.png) 99% no-repeat #fff}.formInput.amex{background:url(../images/icons/amex-icon.png) 99% no-repeat #fff}.formInput.jcb{background:url(../images/icons/jcb-icon.png) 99% no-repeat #fff}.formInput.dinersclub{background:url(../images/icons/dinersclub-icon.png) 99% no-repeat #fff}.formInput.maestro{background:url(../images/icons/maestro-icon.png) 99% no-repeat #fff}#expiryMonth,#expiryYear,#startMonth,#startYear{width:80px}#expirySection{width:200px}#cscSection{width:110px}#cscSection label{white-space:nowrap}#cardNumberSection{order:-1}#cardTypeSection{order:-2}#expiryDateMessagePanel{width:70%}.formInputForError{box-sizing:border-box}#cscMessagePanel{width:425px;right:216px}}@media (max-width:489px){#paymentDetailsTitle{display:none}#cardNumberSection{order:-1}#cardTypeSection{order:-2}.hidden{margin:0}#commands{margin-top:0}#errorIconDiv:has(#cscErrorIcon){display:flex;align-items:flex-start;position:relative;top:3px}}
+#acsHeading,#cscHeading,#expiryMonthTooltipText,#messagePanel img,#paymentDetailsHeader,#paypageHeading,#submitHelp,.invisible,.logoImg{display:none}#messagePanel,#storeName,.logo{text-align:center}.bodyText,body{font-family:Roboto,Helvetica,Arial,sans-serif}#amexAcceptanceMarkLink,#jcbAcceptanceMarkLink,#mcAcceptanceMarkLink,#paypalAcceptanceMarkLink,#vbvAcceptanceMarkLink,.submitButton,a,a:hover,a:visited{text-decoration:none}#commands,#footer{margin-top:30px}@font-face{font-family:Roboto;src:url(../fonts/Roboto-Regular.woff2) format("woff2"),url(../fonts/Roboto-Regular.woff) format("woff");font-weight:400;font-style:normal}body{color:#626d75;font-size:100%;margin:0}a img,body{border:0}#requiredFieldsMessage1{font-size:12px}.dateDropDownLabel,.description{position:absolute;left:-10000px;top:auto;width:.063em;height:.063em;overflow:hidden}#cardEntryForm,.formSection,.formSection #cardNumber.formInput,.formSection #cardType.formInput,.formSection #cardholderName.formInput,.formSection #expiryYear.formInput,.submitButton{box-sizing:border-box;width:99vw}.formSection{width:97vw}.formSection #expiryYear.formInput{width:80px}.formSection.inputError .tooltip{display:block!important}.formSection.inputError .formInput{border-color:#cf000f}#cardEntryForm{margin:0 auto;width:100%;text-align:left}.logo{width:100%;margin:auto}.logoImg{width:12.563em;height:2.938em}#storeName{margin:2%;font-weight:700}#messagePanel{font-size:medium;font-weight:400;background-color:#c00;border:.125em solid #c00;padding:5px 2px;margin:5px;list-style:none;color:#fff}.inlineText{display:block;font-size:.75em;font-weight:400;width:100%;float:left}#errorIcon,.noJsErrorIcon{width:1em;height:1em}#errorIcon{margin-right:1em}.centered{margin:0 auto}#basketPanel,#billingAddressPanel,#customerAddressPanel,#paymentDetailsPanel,#paymentMethodPanel,#purchaseDetailsPanel,#shippingAddressPanel{padding-top:2%;margin-bottom:2%}.formInput{font-size:.875rem;line-height:1.57143;background:#fff;border:1px solid #ccc;border-radius:3px;color:#3e3e3e;padding:8px 16px;outline:0;height:40px;width:100%;box-shadow:none;-webkit-box-shadow:none;-moz-box-shadow:none;margin-bottom:5px}label.inputError{color:#800}input.inputError,select.inputError{background-color:#ffe3e3!important;color:#800;border:.1em solid #800}input.inputValid,select.inputValid{background-color:#dfffdf!important;color:#005f00;border:.1em solid #005f00}label.labelError{color:#d00!important}.bodyText{color:#626d75;font-size:medium;text-align:left}#cscBottomImage,#cscDialog,#dccEntryForm,#footer,#mainDccDiv,#payerAuthDialog,#progressText,#subHeaderText,.basketItemQty,.basketQtyHeader,.bodyStyle,.cancelButton,.noJsContinueButton,.progressSpinner,.quantityCol,.wait,div#purchaseDetailsAmount,span#amount,tbody tr td{text-align:center}#purchaseDetailsHeader{padding-top:.5%}#addressLabel,#amountLabel,#goodsLabel,#postCodeLabel,.basketItemFooter,.basketItemPriceFooter{display:inline-block}#address,#amount,#goods,#postCode{width:48%;display:inline-block}#cardType,#cscDialogContent{width:95%}#expiryMonth,#expiryYear,#startMonth,#startYear{width:80px;padding:8px}#expiryYear,#startYear{margin-left:2px}#expiryMonth,#startMonth{margin-right:2px}#expiryYearLabel{font-size:0;position:static}#cardType::-ms-expand,#expiryMonth::-ms-expand,#expiryYear::-ms-expand{display:none}#expiryYearLabel:after{font-size:16px;content:"/"}#issue{width:15%}#ifAvailable{font-style:italic;font-weight:400;font-size:medium;margin-left:.625em}#confirmCsc,#csc{box-sizing:border-box}#dccSubmit,#newCardLink{float:right}.linkText{font-family:Roboto,Helvetica,Arial,sans-serif!important;font-size:medium;font-weight:700;margin:1% 2% 1% 8%;padding:1.5% 5%;border:thin solid #626d75;background-color:#eee!important;background-image:linear-gradient(bottom,#f5a30d,#ffd786 82%)!important;background-image:-ms-linear-gradient(bottom,#f5a30d 0,#ffd786 82%)!important;background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0,#f5a30d),color-stop(.82,#ffd786))!important;color:#036!important;border-radius:.313em;-moz-border-radius:.313em;-webkit-border-radius:.313em;box-shadow:.188em .188em .188em #ccc;-moz-box-shadow:.188em .188em .188em #ccc;-webkit-box-shadow:.188em .188em .188em #ccc}#cardHolderText,#merchantText,#progressText,.cancelButton,.formLabel,.submitButton{font-family:Roboto,Helvetica,Arial,sans-serif}.cancelButton,legend{color:#000;font-weight:700}a,a:hover,a:visited{color:#626d75!important}#closeCSCLink{display:block;padding:2%;margin:1% 2% 1% 1%}#cscDialog{display:none;margin:0;position:fixed;top:25%;width:95%;z-index:6000}#cscDialogContent,#payerAuthDialogContent{box-shadow:.313em .313em .313em #ccc;-moz-box-shadow:.313em .313em .313em #ccc;-webkit-box-shadow:.313em .313em .313em #ccc;display:block;margin:0 auto;background:#fff;border:.063em solid #636b70;text-align:center}#addressPanel,#amexAcceptanceMark,#btnCancel,#cardNumberHelpPanel,#cscDescLink .linkText,#cscRightImage,#footer,#paymentDetailsLegend,#paymentDetailsTitle,#ppLogo,#purchaseDetailsGoods,#purchaseDetailsHeader,#purchaseDetailsPanel,#shippingAddressPanel,#storeName,#visaCheckoutPaymentDetailsPanel,#visaCheckoutPaymentSummaryPanel,.basketPriceHeader,.closeDialogIcon,.labelHelpImg,.priceCol,.tooltipBottom{display:none}#cscDialogTitle{margin:.75em 0 .563em .6em}#cscDialogTitle,.dialogTitle{display:block;font-weight:700}.dialogTitle{margin-bottom:1.15em}#cscDescriptionBody{height:10.938em;width:100%}#cscText{width:100%;text-align:left}#cscBottomImage{height:6em;width:100%;margin:.625em 0 .5em}.cancelButton{width:30%;float:left;background:#9fc2c1;border:1px solid #8daf9c;font-size:16px;padding:3%;border-radius:6px;display:none}#footer,#payerAuthDialog{width:100%}#payerAuthDialog{display:block;margin:0 auto;position:absolute;top:6.25em}#payerAuthDialogContent{width:25em;height:31.25em}#payerAuthIframe{width:100%;border:0;padding:0;height:30em}.bodyStyle{display:block;margin:4%;width:90%}.noJsReturnPanel{display:block;margin-top:.938em;border:thin solid #d00;padding:.625em .625em .625em 2.5em;color:#cc292b;font-size:medium}.noJsContinueButton{display:block;margin:0 auto;padding:.313em}.wait{top:50%;left:50%;margin-top:-7em;margin-left:-7em;z-index:6000;overflow:auto;border:.063em solid #636b70;width:14.5em;height:4em;background-color:#fff;padding-top:1em}#overlay,.wait{display:none;position:absolute}#overlay{opacity:.4;top:0;left:0;background-color:#dcdcdc;width:100%;z-index:5000}.opaque{opacity:.4;zoom:1}tbody tr td{margin:0 auto;height:auto!important;background:#fff}#progressSpinnerImage{margin:0 auto .6em;width:2em;height:2em;display:block}#progressText{color:#e4141d;font-size:medium}#mainDccDiv{width:95%;margin-left:auto;margin-right:auto}#subHeaderText{font-size:medium;font-weight:700;margin-bottom:2%}#dccEntryForm{margin:0 auto}#selectionPanel,.errorText{text-align:left}#cardHolderText,#merchantText{color:#626d75;margin-top:3%;font-size:large;font-weight:700}#dccCommands{margin:2% auto 0}#dccCancel,#dccSubmit{font-size:medium}#dccCancel{float:left}#basketTable{width:100%}.basketHeader{font-weight:700;font-size:.625em;padding-left:.625em}.basketFooter,.basketSubTotalHeader,.subTotalCol{text-align:right}.basketFooter{font-weight:700;width:100%}.basketItemFooter{padding-right:1em;width:80%}.billingAddress,.shippingAddress{display:block;padding-left:.625em;text-align:left;clear:left}#paymentMethodHeader{padding-top:.313em}button{width:auto;overflow:visible}.paymentMethodCARD,.paymentMethodGIRO_PAY,.paymentMethodIDEAL,.paymentMethodMASTER_PASS,.paymentMethodMISTER_CASH,.paymentMethodPAY_PAL,.paymentMethodSOFORT{display:block;margin:.625em}.paymentMethodCARD{width:12.125em;border:.063em solid #ccc;border-radius:.625em}.paymentMethodPAY_PAL{width:12.188em}.paymentMethodMASTER_PASS{width:9.063em}.paymentMethodIDEAL{width:2.313em}.paymentMethodGIRO_PAY{width:4.5em}.paymentMethodSOFORT{width:6.25em}.paymentMethodMISTER_CASH{width:3.313em}.paymentMethodOption{display:inline-block;vertical-align:middle!important;height:2.125em;font-size:0;position:absolute;left:-9000px}#cardNumberSection,#commands,#cscMessagePanel,#cscSection,#expiryDateMessagePanel,#expirySection,.tooltipText{position:relative}legend{display:block;text-align:left;border-style:none}fieldset{display:block;border:0;background-color:transparent;padding-top:1%;padding-bottom:2%}#confirmCheck1,#confirmCheck2{float:left;margin:1% 0 1% 2%}#confirmCheck1LabelPanel,#confirmCheck2LabelPanel{display:inline-block;width:82%;font-weight:400}#checkBoxSection,#checkBoxSection2{margin-top:.5em}.basketItemImage{width:2.5em;height:2.5em;float:left;margin-right:.5em}#amexAcceptanceMarkImg,#jcbAcceptanceMarkImg,#mcAcceptanceMarkImg,#paypalAcceptanceMarkImg,#vbvAcceptanceMarkImg{height:2em!important;display:inline-block!important;overflow:hidden}#vbvAcceptanceMarkImg{width:3.55em!important}#mcAcceptanceMarkImg{width:4.35em!important}#amexAcceptanceMarkImg,#jcbAcceptanceMarkImg{width:4.4em!important}#paypalAcceptanceMarkImg{width:3.125em!important}.cardType{display:block!important;background-repeat:no-repeat;padding:.125em}#confirmCardLabel{display:block!important;font-size:.75em;font-weight:700}#confirmCardExpiryLabel{display:block!important;font-size:.6em;font-style:italic}#cscImage{width:16em}span#amountLabel{font-size:20px;color:#616161}span#amount{font-size:18px}#confirmCheck2Label:after{content:"";width:15px;height:15px;position:relative;top:1px;margin-left:5px;display:inline-block;background-image:url(../lock.png);background-size:contain;background-repeat:no-repeat}input,textarea{-webkit-appearance:none;-webkit-border-radius:0}.formLabel{text-align:left;display:block;margin:20px 0 5px;color:#3e3e3e;font-size:16px;font-weight:700;letter-spacing:0;line-height:22px}#messagePanel,.tooltip{display:none!important}.formLabelDescr{font-size:12px;line-height:20px;font-weight:500}#cardNumberHelpPanel:before{content:"*";display:block}input[type=radio]{margin:1em .25em}input.inputError{background-color:#fff!important;border-color:#c00;color:#c00}.tooltip{padding:0}.tooltipText{width:100%;min-height:1px;color:#cf000f;margin-top:8px;font-size:14px;letter-spacing:0;line-height:22px}#cscDescLink{display:none;background-image:url(../images/hybrid_cvv.png);width:37px;height:25px;background-size:cover;margin:-39px 0 15px 100px}.submitButton{float:none;box-shadow:none;display:inline-block;cursor:pointer;background-color:#0277bd;color:#fff;font-weight:500;text-align:center;white-space:nowrap;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;padding:8px 0;width:100%;font-size:16px;line-height:24px;border-radius:3px;transition:none;height:40px}#commands{width:100%}#commands:before{height:32px;width:33px;box-sizing:border-box}#paymentDetailsPanel #paymentDetailsFieldset{padding:0;margin:0}#cscSection,#expirySection{display:inline-block;vertical-align:top}#expirySection{width:170px;white-space:nowrap;margin-right:16px}#cscSection{width:112px;order:5}#paymentDetailsPanel{display:flex;width:100%;flex-flow:wrap}#cardNumber,#cardholderName{width:99vw;box-sizing:border-box}#expiryDateMessagePanel{display:block;margin-top:5px;margin-left:0;order:6;width:300px}.formInputForError{font-size:.875rem;line-height:1.57143;background:#fff;border:1px solid red;border-radius:3px;color:#3e3e3e;padding:8px 16px;outline:0;height:40px;box-shadow:none;margin-bottom:5px;width:80%}#cscMessagePanel{white-space:normal;width:max-content;max-width:100vw;right:186px}#errorIconDiv{display:flex;align-items:center;justify-content:center}.inlineErrorIcon{width:15px;height:auto}.errorMessagePanel{gap:3px}#cardNumberSection,#cardholderNameSection{display:block;width:100%}@media (min-width:490px){@font-face{font-weight:500}.formInput{touch-action:none}.formInput.visa{background:url(../images/icons/visa-icon.png) 99% no-repeat #fff}.formInput.mastercard{background:url(../images/icons/mastercard-icon.png) 99% no-repeat #fff}.formInput.amex{background:url(../images/icons/amex-icon.png) 99% no-repeat #fff}.formInput.jcb{background:url(../images/icons/jcb-icon.png) 99% no-repeat #fff}.formInput.dinersclub{background:url(../images/icons/dinersclub-icon.png) 99% no-repeat #fff}.formInput.maestro{background:url(../images/icons/maestro-icon.png) 99% no-repeat #fff}#expiryMonth,#expiryYear,#startMonth,#startYear{width:80px}#expirySection{width:200px}#cscSection{width:110px}#cscSection label{white-space:nowrap}#cardNumberSection{order:-1}#cardTypeSection{order:-2}#expiryDateMessagePanel{width:100%}.formInputForError{box-sizing:border-box}#cscMessagePanel{right:216px}}@media (max-width:489px){#paymentDetailsTitle{display:none}#cardNumberSection{order:-1}#cardTypeSection{order:-2}.hidden{margin:0}#commands{margin-top:0}#errorIconDiv,#errorIconDiv:has(#cscErrorIcon){display:flex;align-items:flex-start;position:relative;top:3px}.submitButton{margin-top:20px}}@media (max-width:265px){#cscMessagePanel{right:0}#expiryDateMessagePanel{order:5}}