/* Prevent the amount section flashing at its original position */ body.gr-online-payment-page #opc-product-selection:not(.gr-amount-section) { display: none !important; } /* Show it after JavaScript moves it below the additional fields */ body.gr-online-payment-page #opc-product-selection.gr-amount-section { display: block !important; position: static; width: 100%; margin: 63px 0 0; padding: 0; } body.gr-online-payment-page .page-content, body.gr-online-payment-page .wcopc { width: 100%; max-width: 100%; margin: 0; padding: 0; } body.gr-online-payment-page #opc-product-selection .woocommerce-product-gallery, body.gr-online-payment-page #opc-product-selection .woocommerce-product-gallery__wrapper, body.gr-online-payment-page #opc-product-selection .woocommerce-product-gallery__image--placeholder, body.gr-online-payment-page #opc-product-selection .product_title, body.gr-online-payment-page #opc-product-selection .summary > .price, body.gr-online-payment-page #opc-product-selection .product_meta, body.gr-online-payment-page #opc-product-selection .opc-complete-order, body.gr-online-payment-page .woocommerce-form-coupon-toggle, body.gr-online-payment-page .checkout_coupon, body.gr-online-payment-page #order_review_heading { display: none !important; } body.gr-online-payment-page #opc-product-selection .summary.entry-summary { float: none !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } body.gr-online-payment-page form.checkout.woocommerce-checkout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(380px, 0.95fr); margin: 0 auto; background: #fff; } body.gr-online-payment-page #order_review * { max-width: 500px; } body.gr-online-payment-page #customer_details { grid-column: 1; grid-row: 1; display: block; padding: 45px 63px 16px 0; background: #fff; } body.gr-online-payment-page #customer_details .col-1, body.gr-online-payment-page #customer_details .col-2 { float: none; width: 100%; margin: 0; } body.gr-online-payment-page #customer_details .col-2 { margin-top: 74px; } body.gr-online-payment-page #order_review { grid-column: 2; grid-row: 1; min-height: 100%; padding: 44px 46px 61px; background: #241F1F; color: #fff; } body.gr-online-payment-page tr.order-total bdi{ font-weight: 700 !important; font-size: 35px !important; line-height: normal; } body.gr-online-payment-page .gr-section-label { display: block; margin: 0 0 28px; color: #241F1F; font-size: 28px; font-weight: 500; line-height: 1.2; } body.gr-online-payment-page .gr-section-label--additional { margin-bottom: 28px; } body.gr-online-payment-page .gr-section-label { display: block; margin: 0 0 28px; color: #241f1f; font-size: 22px; font-weight: 500; line-height: 29px !important; } body.gr-online-payment-page .woocommerce-billing-fields > h3, body.gr-online-payment-page .woocommerce-additional-fields > h3 { color: #241f1f; font-size: 22px; font-weight: 500; line-height: 29px !important; } body.gr-online-payment-page .woocommerce-billing-fields > h3{ margin: 0 0 34px; } body.gr-online-payment-page .woocommerce-additional-fields > h3{ margin: 0 0 20px; } body.gr-online-payment-page .woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 39px 23px; } body.gr-online-payment-page .form-row { float: none !important; width: 100% !important; margin: 0; padding: 0; } body.gr-online-payment-page #customer_details{ background: #F9FAFB; } body.gr-online-payment-page .form-row-wide { grid-column: 1/-1; } body.gr-online-payment-page .woocommerce-billing-fields label, body.gr-online-payment-page .woocommerce-additional-fields label { display: none; } body.gr-online-payment-page input.input-text, body.gr-online-payment-page textarea.input-text, body.gr-online-payment-page select, body.gr-online-payment-page .select2-container .select2-selection--single { width: 100%; min-height: 48px !important; margin: 0; padding: 12px 21px !important; border: 0.5px solid #231F20 !important; border-radius: 0 !important; background: #fff !important; color: #241f1f !important; font-size: 18px; line-height: 25px !important; box-shadow: none; outline: none; } body.gr-online-payment-page select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 52px !important; background-color: #fff !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12' fill='none'%3E%3Cpath d='M0.558594 0.501709L9.55859 10.5017L18.5586 0.501709' stroke='%23BE2429' stroke-width='1.5'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 20px center !important; background-size: 20px 12px !important; cursor: pointer; } body.gr-online-payment-page .select2-container .select2-selection--single { position: relative; padding-right: 52px !important; } body.gr-online-payment-page .select2-container .select2-selection--single::after { content: ""; position: absolute; top: 50%; right: 20px; width: 20px; height: 12px; transform: translateY(-50%); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12' fill='none'%3E%3Cpath d='M0.558594 0.501709L9.55859 10.5017L18.5586 0.501709' stroke='%23BE2429' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 20px 12px; pointer-events: none; } body.gr-online-payment-page .select2-container .select2-selection__arrow { display: none !important; } body.gr-online-payment-page input.input-text::placeholder, body.gr-online-payment-page textarea.input-text::placeholder, body.gr-online-payment-page .select2-container .select2-selection--single::placeholder{ color: #241f1f !important; opacity: 0.6 !important; } body.gr-online-payment-page textarea.input-text { min-height: 96px !important; resize: vertical; } body.gr-online-payment-page .select2-container { width: 100% !important; } body.gr-online-payment-page #opc-product-selection .cart { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 280px); gap: 25px; align-items: flex-start; width: 100%; } body.gr-online-payment-page #opc-product-selection .single_add_to_cart_button{ margin-top: 33px; } body.gr-online-payment-page #opc-product-selection .nyp { position: relative; width: 100%; } body.gr-online-payment-page #opc-product-selection .nyp label { display: block; margin: 0 0 7px; color: #241f1f; font-size: 22px; font-weight: 500; line-height: normal; } body.gr-online-payment-page .opc-single-product .quantity{ display: none; } body.gr-online-payment-page #opc-product-selection .nyp label .woocommerce-Price-currencySymbol { display: none; } body.gr-online-payment-page #opc-product-selection .nyp:before { content: "$"; position: absolute; left: 0; top: 33px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 42px; height: 57px; border-right: 0.5px solid #231F20; font-size: 27px; pointer-events: none; font-weight: 500; } body.gr-online-payment-page #opc-product-selection .nyp .nyp-input { height: 57px; padding-left: 57px !important; text-align: left !important; color: #241F1F !important; font-size: 20px !important; font-weight: 400 !important; line-height: 25px !important; } /* Placeholder colour while no project is selected */ body.gr-online-payment-page #billing_project.gr-select-placeholder { color: rgba(36, 31, 31, 0.6) !important; } body.gr-online-payment-page #billing_project:not(.gr-select-placeholder) { color: #241F1F !important; } body.gr-online-payment-page #billing_project option { color: #241F1F; } /* Disabled placeholder inside the opened dropdown */ body.gr-online-payment-page #billing_project option[value=""]:disabled { color: rgba(36, 31, 31, 0.6) !important; } body.gr-online-payment-page #billing_country_field { display: none !important; } body.gr-online-payment-page #opc-product-selection .single_add_to_cart_button.nyp-disabled, body.gr-online-payment-page .gr-continue-payment:disabled { /*opacity: 0.3;*/ cursor: not-allowed; } body.gr-online-payment-page .gr-continue-payment:disabled{ opacity: 0.5; background: #747474; } body.gr-online-payment-page .gr-continue-payment:disabled::after{ background-color: #979797; } body.gr-online-payment-page #opc-product-selection .nyp input::placeholder { color: #241F1F; font-size: 20px; font-style: normal; font-weight: 400; line-height: 25px; } body.gr-online-payment-page #order_review::before { content: var(--gr-cart-title, "Su carrito"); display: block; margin: 0 0 45px; font-size: 26px; font-weight: 500; line-height: normal; } body.gr-online-payment-page #order_review .shop_table { width: 100%; margin: 0; border: 0; border-collapse: collapse; background: transparent; } body.gr-online-payment-page #order_review .shop_table thead { display: none; } body.gr-online-payment-page #order_review .shop_table tr, body.gr-online-payment-page #order_review .shop_table th, body.gr-online-payment-page #order_review .shop_table td { border: 0; background: transparent; color: #fff; } body.gr-online-payment-page .product-details{ color: #FFF; font-size: 18px; font-weight: 400; line-height: 21.6px; } body.gr-online-payment-page tr.cart_item.opc_cart_item td.product-total bdi{ color: #FFF; font-size: 18px; font-weight: 400; line-height: 21.6px; } body.gr-online-payment-page #order_review .shop_table tbody:before { content: var(--gr-products-title, "PRODUCTOS"); display: block; padding: 0 0 13px; border-bottom: 1px solid #c9cdca80; font-size: 16px; font-weight: 500; letter-spacing: 1.6px; color: #FFFFFF; } body.gr-online-payment-page #order_review .shop_table tbody tr.cart_item { display: grid; grid-template-columns: minmax(0, 1fr) auto; position: relative; padding: 27px 39px 25px 0; border-bottom: 1px solid #c9cdca80; } body.gr-online-payment-page #order_review .shop_table tbody td { display: block; padding: 0; } body.gr-online-payment-page #order_review .shop_table .product-quantity { display: none; } body.gr-online-payment-page #order_review .shop_table .product-total { text-align: right; white-space: nowrap; } /* Replace WooCommerce remove cross with trash icon */ body.gr-online-payment-page #order_review .shop_table .product-remove .remove { position: relative; display: inline-flex !important; align-items: center; justify-content: center; width: 17px; height: 23px; overflow: hidden; color: transparent !important; font-size: 0 !important; line-height: 1; text-indent: -9999px; background: transparent !important; } body.gr-online-payment-page #order_review .shop_table .product-remove .remove::before { content: ""; display: block; width: 17px; height: 23px; background-repeat: no-repeat; background-position: center; background-size: 17px 23px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='23' viewBox='0 0 17 23' fill='none'%3E%3Cpath d='M1.21484 6.6759V21.6834C1.21484 22.0516 1.51325 22.35 1.88139 22.35H14.6321C15.0003 22.35 15.2987 22.0516 15.2987 21.6834V6.6759H1.21484ZM10.8657 9.13885C10.8657 8.77087 11.1643 8.4723 11.5323 8.4723C11.9004 8.4723 12.1988 8.77087 12.1988 9.13885V18.5541C12.1988 18.9221 11.9004 19.2205 11.5323 19.2205C11.1643 19.2205 10.8657 18.9221 10.8657 18.5541V9.13885ZM7.59029 9.13885C7.59029 8.77087 7.8887 8.4723 8.25667 8.4723C8.62482 8.4723 8.92322 8.77087 8.92322 9.13885V18.5541C8.92322 18.9221 8.62482 19.2205 8.25667 19.2205C7.8887 19.2205 7.59029 18.9221 7.59029 18.5541V9.13885ZM4.31467 9.13885C4.31467 8.77087 4.61307 8.4723 4.98122 8.4723C5.34919 8.4723 5.6476 8.77087 5.6476 9.13885V18.5541C5.6476 18.9221 5.34919 19.2205 4.98122 19.2205C4.61307 19.2205 4.31467 18.9221 4.31467 18.5541V9.13885Z' fill='white'/%3E%3Cpath d='M16.512 5.34297V2.98336C16.512 2.61539 16.2136 2.31681 15.8454 2.31681H11.123V0.66655C11.123 0.298404 10.8246 0 10.4564 0H6.05539C5.68742 0 5.38901 0.298404 5.38901 0.66655V2.31681H0.66655C0.298404 2.31681 0 2.61539 0 2.98336V5.34297H16.512Z' fill='white'/%3E%3C/svg%3E"); } body.gr-online-payment-page #order_review .shop_table .product-remove .remove:hover::before { opacity: 0.75; } body.gr-online-payment-page #order_review .shop_table .product-remove { position: absolute; top: 25px; right: 0; } body.gr-online-payment-page #order_review .shop_table .product-remove .remove { color: #fff !important; background: transparent !important; border-radius: 0; } body.gr-online-payment-page #order_review .shop_table tfoot { display: table; width: 100%; margin-top: 96px; } body.gr-online-payment-page #order_review .shop_table tbody tr.cart_item:last-child{ padding-bottom: 0 !important; border-bottom: 0 !important; } body.gr-online-payment-page #order_review .shop_table tfoot:before { content: var(--gr-summary-title, "RESUMEN DE ORDEN"); display: block; padding: 0 0 20px; border-bottom: 1px solid #c9cdca80; font-size: 16px; letter-spacing: 1.6px; color: #FFFFFF; font-weight: 500; } body.gr-online-payment-page #order_review .shop_table tfoot tr.cart-subtotal th{ color: #FFF; font-size: 24px; font-weight: 400; line-height: 28.8px; } body.gr-online-payment-page span.woocommerce-Price-amount.amount bdi{ color: #FFF; text-align: right; font-size: 24px; font-style: normal; font-weight: 400; line-height: 28.8px; } body.gr-online-payment-page #order_review .shop_table tfoot tr { display: flex; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid #c9cdca80; } body.gr-online-payment-page #order_review .shop_table tfoot th, body.gr-online-payment-page #order_review .shop_table tfoot td { padding: 0; } body.gr-online-payment-page #order_review .shop_table .order-total th, body.gr-online-payment-page #order_review .shop_table .order-total td { color: #FFF; font-size: 35px; font-weight: 700; line-height: normal; } body.gr-online-payment-page #order_review .shop_table tfoot tr:last-child{ padding-bottom: 0 !important; border-bottom: 0 !important; } body.gr-online-payment-page .gr-continue-payment { margin-top: 84px; min-height: 57px; justify-content: center !important; } body.gr-online-payment-page:not(.gr-payment-step) #payment, body.gr-online-payment-page .gr-back-to-cart, body.gr-online-payment-page .gr-payment-total { display: none; } body.gr-online-payment-page.gr-payment-step #customer_details, body.gr-online-payment-page.gr-payment-step #opc-product-selection { position: relative; pointer-events: none; } body.gr-online-payment-page.gr-payment-step #customer_details:before{ content: ""; height: 100%; width: 100%; position: absolute; left: 0; top: 0; background: #F9FAFB; opacity: 0.7; z-index: 9; } body.gr-online-payment-page.gr-payment-step #order_review:before, body.gr-online-payment-page.gr-payment-step .opc_order_review, body.gr-online-payment-page.gr-payment-step .gr-continue-payment { display: none; } body.gr-online-payment-page.gr-payment-step .gr-back-to-cart { display: inline-flex; gap: 12px; margin: 0 0 71px; padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer; } body.gr-online-payment-page.gr-payment-step .gr-payment-total { display: block; margin-bottom: 48px; padding-bottom: 32px; border-bottom: 1px solid #c9cdca80; } body.gr-online-payment-page .gr-payment-total__label, body.gr-online-payment-page .gr-payment-total__amount { display: block; color: #fff; font-size: 35px; font-weight: 700; } body.gr-online-payment-page .gr-payment-total__label { margin-bottom: 8px; } body.gr-online-payment-page.gr-payment-step #payment { display: block; margin: 0; padding: 0; background: transparent; } body.gr-online-payment-page #payment .wc_payment_methods { margin: 0; padding: 0; border: 0; background: transparent; } body.gr-online-payment-page #payment .wc_payment_method { position: relative; margin: 0 0 16px !important; padding: 0 !important; background: #fff; } body.gr-online-payment-page #payment .wc_payment_method > input { position: absolute; opacity: 0; } body.gr-online-payment-page #payment .wc_payment_method > label { position: relative; display: flex; align-items: center; min-height: 57px; margin: 0; padding: 14px 52px 14px 28px; color: #241F1F; font-size: 23px; font-weight: 500; line-height: 27.6px; cursor: pointer; outline: none !important; } body.gr-online-payment-page #payment .wc_payment_method > label::after { content: ""; position: absolute; top: 50%; right: 33px; width: 26px; height: 27px; transform: translateY(-50%); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='27' viewBox='0 0 26 27' fill='none'%3E%3Cpath d='M0 13.4553H24.22' stroke='%23241F1F'/%3E%3Cpath d='M12 0.344238L24.4444 13.4553L12 26.5665' stroke='%23241F1F'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 26px 27px; font-size: 0; pointer-events: none; } body.gr-online-payment-page #payment .wc_payment_method > input:checked + label { outline: 2px solid #be2429; outline-offset: -2px; } body.gr-online-payment-page #payment .form-row.place-order { padding: 0; } body.gr-online-payment-page .woocommerce-privacy-policy-text { margin-top: 166px; color: #FFF; font-size: 14px; font-weight: 400; line-height: 19px; } body.gr-online-payment-page .woocommerce-privacy-policy-text a { color: #fff; text-decoration: underline; } /* ========================================================= STEP 1 VALIDATION ========================================================= */ body.gr-online-payment-page .form-row.gr-first-step-invalid input.input-text, body.gr-online-payment-page .form-row.gr-first-step-invalid select, body.gr-online-payment-page .form-row.gr-first-step-invalid .select2-selection--single { border-color: #BE2429 !important; } body.gr-online-payment-page .gr-first-step-error { display: block; width: 100%; margin-top: 7px; color: #BE2429; font-size: 13px; font-weight: 400; line-height: 1.35; } /* ========================================================= CHECKOUT ARROW BUTTONS ========================================================= */ /* * Used for: * 1. Add amount to cart * 2. Continue to payment * 3. Final WooCommerce payment button */ body.gr-online-payment-page #opc-product-selection .single_add_to_cart_button { background: transparent !important; color: #BE2429 !important; font-size: 22px; font-weight: 500; line-height: 26.4px; padding: 7px 52px 7px 21px !important; border: 0 !important; box-shadow: none !important; display: flex !important; align-items: center; justify-content: center; gap: 16px; width: 100%; text-align: left; min-height: 57px; outline: none; } body.gr-online-payment-page #opc-product-selection .single_add_to_cart_button::after { content: "" !important; width: 25px; height: 25px; min-width: 25px; flex: 0 0 25px; display: block !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' viewBox='0 0 25 25' fill='none'%3E%3Cpath d='M0 12.1051H24.22' stroke='%23BE2429' stroke-width='1.5'/%3E%3Cpath d='M12.1172 0L12.1172 24.22' stroke='%23BE2429' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 25px 25px; position: static !important; margin: 0 !important; transform: none !important; } body.gr-online-payment-page #opc-product-selection .single_add_to_cart_button:hover{ opacity: 0.8; } body.gr-online-payment-page .gr-continue-payment, body.gr-online-payment-page #place_order { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 57px; padding: 7px 52px 7px 21px; overflow: hidden; border: 0; border-radius: 0; background: #be2429; color: #fff; text-align: left; text-decoration: none; font-size: 22px; font-weight: 400; line-height: 1.2; cursor: pointer; box-shadow: none; transition: background-color 0.25s ease, opacity 0.25s ease; } body.gr-online-payment-page .gr-continue-payment::after, body.gr-online-payment-page #place_order::after { content: ""; position: absolute; top: 7px; right: 8px; width: 43px; height: 43px; overflow: hidden; border: 0; background-color: #d6363b; background-image: url("/wp-content/uploads/2026/07/arrow-button.png"); background-repeat: no-repeat; background-size: 70px auto; background-position: -36px center; pointer-events: none; transition: background-position 0.45s cubic-bezier(0.65, 0, 0.35, 1); } body.gr-online-payment-page .gr-continue-payment:hover::after, body.gr-online-payment-page .gr-continue-payment:focus-visible::after, body.gr-online-payment-page #place_order:hover::after, body.gr-online-payment-page #place_order:focus-visible::after { background-position: 12px center; } /* Disabled Name Your Price button */ body.gr-online-payment-page #opc-product-selection .single_add_to_cart_button.nyp-disabled, body.gr-online-payment-page #opc-product-selection .single_add_to_cart_button:disabled, body.gr-online-payment-page .gr-continue-payment:disabled, body.gr-online-payment-page #place_order:disabled { /*opacity: 0.35;*/ cursor: not-allowed; } /* Prevent arrow animation while disabled */ body.gr-online-payment-page #opc-product-selection .single_add_to_cart_button:disabled:hover::after, body.gr-online-payment-page .gr-continue-payment:disabled:hover::after, body.gr-online-payment-page #place_order:disabled:hover::after { background-position: -36px center; } /* Remove the older text-arrow span used by JavaScript */ body.gr-online-payment-page .gr-button-arrow { display: none !important; } /* Keyboard focus */ body.gr-online-payment-page .gr-continue-payment:focus-visible, body.gr-online-payment-page #place_order:focus-visible { outline: 2px solid #241f1f; outline-offset: 3px; } /* Empty cart row */ body.gr-online-payment-page #order_review .shop_table tbody .gr-empty-cart-row { display: table-row; } body.gr-online-payment-page #order_review .shop_table tbody .gr-empty-cart-row td { display: table-cell; width: 100%; padding: 37px 0 48px; border: 0; background: transparent; } /* Empty cart message */ body.gr-online-payment-page .gr-empty-cart-message { display: block; width: 100%; color: #FFF; font-size: 18px; font-weight: 400; line-height: 21.6px; } /* ========================================================= STEP 1 ========================================================= */ body.gr-online-payment-page:not(.gr-payment-step) #payment, body.gr-online-payment-page:not(.gr-payment-step) .gr-back-to-cart, body.gr-online-payment-page:not(.gr-payment-step) .gr-payment-total { display: none !important; } body.gr-online-payment-page:not(.gr-payment-step) .gr-continue-payment { display: inline-flex !important; } /* ========================================================= STEP 2 ========================================================= */ body.gr-online-payment-page.gr-payment-step #place_order { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } body.gr-online-payment-page.gr-payment-step #order_review::before, body.gr-online-payment-page.gr-payment-step .opc_order_review, body.gr-online-payment-page.gr-payment-step .gr-continue-payment{ display: none !important; } body.gr-online-payment-page.gr-payment-step .gr-back-to-cart { display: inline-flex !important; } body.gr-online-payment-page.gr-payment-step .gr-payment-total, body.gr-online-payment-page.gr-payment-step #payment { display: block !important; } /* ========================================================= PAYMENT METHOD LOGOS ========================================================= */ body.gr-online-payment-page #payment .wc_payment_method > label { display: flex; align-items: center; gap: 8px; } /* Hide the original gateway image added by the plugin */ body.gr-online-payment-page #payment .wc_payment_method > label > img { display: none !important; } /* Payment label layout */ body.gr-online-payment-page #payment .wc_payment_method > label.gr-payment-logo-added { display: flex; align-items: center; gap: 8px; padding-right: 62px; } /* "Pagar con" text */ body.gr-online-payment-page #payment .gr-payment-label-prefix { display: inline-block; flex: 0 0 auto; } /* Shared logo style */ body.gr-online-payment-page #payment .gr-payment-logo { display: inline-block; flex: 0 0 auto; background-repeat: no-repeat; background-position: left center; background-size: contain; } /* Tilopay */ body.gr-online-payment-page #payment .gr-payment-logo--tilopay { width: 126px; height: 25px; background-image: url("../images/tilopay.svg"); } /* Yappy */ body.gr-online-payment-page #payment .gr-payment-logo--yappy { width: 128px; height: 32px; background-image: url("../images/yappy.svg"); } body.gr-online-payment-page #payment .wc_payment_method > label:hover::after { opacity: 0.7; } body.gr-online-payment-page span.gr-payment-total__amount span.woocommerce-Price-amount.amount bdi{ color: #FFF; font-size: 35px; font-weight: 700; line-height: normal; } body.gr-online-payment-page #order_review { position: relative; } body.gr-online-payment-page #order_review.gr-cart-loading { pointer-events: none; } /* Fade cart content */ body.gr-online-payment-page #order_review.gr-cart-loading > *:not(.gr-cart-loader) { opacity: 0.35; transition: opacity 0.2s ease; } /* ========================================================= CART SKELETON LOADER ========================================================= */ body.gr-online-payment-page #order_review { position: relative; } /* Prevent clicks while updating */ body.gr-online-payment-page #order_review.gr-cart-loading { pointer-events: none; } /* Hide actual cart content while loading */ body.gr-online-payment-page #order_review.gr-cart-loading > *:not(.gr-cart-loader) { opacity: 0; } /* Skeleton overlay */ body.gr-online-payment-page .gr-cart-loader { position: absolute; inset: 0; z-index: 99; display: block; padding: 0; background: #241F1F; } /* Skeleton wrapper */ body.gr-online-payment-page .gr-cart-skeleton { width: 100%; } /* Generic skeleton line */ body.gr-online-payment-page .gr-cart-skeleton__line, body.gr-online-payment-page .gr-cart-skeleton__button { position: relative; overflow: hidden; background: rgba(255, 255, 255, 0.09); } /* Shimmer */ body.gr-online-payment-page .gr-cart-skeleton__line::after, body.gr-online-payment-page .gr-cart-skeleton__button::after { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.16), transparent ); animation: grCartShimmer 1.25s ease-in-out infinite; } /* Cart title */ body.gr-online-payment-page .gr-cart-skeleton__line--title { width: 38%; height: 34px; margin-bottom: 58px; } /* Product row */ body.gr-online-payment-page .gr-cart-skeleton__item { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-bottom: 26px; } /* Product name */ body.gr-online-payment-page .gr-cart-skeleton__line--name { width: 48%; height: 22px; } /* Product price */ body.gr-online-payment-page .gr-cart-skeleton__line--price { width: 27%; height: 22px; } /* Divider */ body.gr-online-payment-page .gr-cart-skeleton__divider { width: 100%; height: 1px; margin: 28px 0 52px; background: rgba(255, 255, 255, 0.18); } /* Order summary heading */ body.gr-online-payment-page .gr-cart-skeleton__line--heading { width: 43%; height: 20px; margin-bottom: 34px; } /* Summary row */ body.gr-online-payment-page .gr-cart-skeleton__summary { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 22px 0; border-top: 1px solid rgba(255, 255, 255, 0.12); } /* Summary text */ body.gr-online-payment-page .gr-cart-skeleton__line--small { width: 24%; height: 21px; } /* Summary amount */ body.gr-online-payment-page .gr-cart-skeleton__line--amount { width: 29%; height: 24px; } /* Total */ body.gr-online-payment-page .gr-cart-skeleton__summary--total .gr-cart-skeleton__line--small { height: 30px; width: 22%; } body.gr-online-payment-page .gr-cart-skeleton__summary--total .gr-cart-skeleton__line--amount { height: 30px; width: 34%; } /* Continue button placeholder */ body.gr-online-payment-page .gr-cart-skeleton__button { width: 100%; height: 76px; margin-top: 70px; background: rgba(190, 36, 41, 0.28); } /* Shimmer animation */ @keyframes grCartShimmer { 0% { left: -100%; } 100% { left: 100%; } } /* ========================================================= OPC SUCCESS NOTIFICATION ========================================================= */ body.gr-online-payment-page #opc-messages { position: fixed !important; top: 150px !important; right: 24px !important; left: auto !important; width: 420px !important; max-width: calc(100vw - 48px) !important; margin: 0 !important; padding: 0 !important; z-index: 999999 !important; transform: none !important; } /* Success message */ body.gr-online-payment-page #opc-messages .woocommerce-message { position: relative !important; display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 18px 20px 18px 48px !important; box-sizing: border-box !important; background: #ffffff !important; border: 1px solid rgba(36, 31, 31, 0.12) !important; border-left: 4px solid #80B918 !important; border-radius: 4px !important; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14) !important; color: #241F1F !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.5 !important; text-align: left !important; white-space: normal !important; word-break: normal !important; overflow-wrap: break-word !important; animation: grNoticeIn 0.3s ease forwards; } /* Success icon */ body.gr-online-payment-page #opc-messages .woocommerce-message::before { position: absolute !important; left: 18px !important; top: 19px !important; margin: 0 !important; color: #80B918 !important; } /* Remove unwanted pseudo content */ body.gr-online-payment-page #opc-messages .woocommerce-message::after { display: none !important; } /* Remove any inherited vertical writing mode */ body.gr-online-payment-page #opc-messages, body.gr-online-payment-page #opc-messages * { writing-mode: horizontal-tb !important; text-orientation: mixed !important; } /* Hide animation */ body.gr-online-payment-page #opc-messages .woocommerce-message.gr-notice-hiding { opacity: 0 !important; transform: translateY(-10px) !important; transition: opacity 0.25s ease, transform 0.25s ease !important; } /* Entrance animation */ @keyframes grNoticeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { body.gr-online-payment-page #opc-messages { top: 85px !important; left: 16px !important; right: 16px !important; width: auto !important; max-width: none !important; } body.gr-online-payment-page #opc-messages .woocommerce-message { width: 100% !important; padding: 16px 18px 16px 44px !important; font-size: 14px !important; } body.gr-online-payment-page #opc-messages .woocommerce-message::before { left: 16px !important; top: 17px !important; } } /* Mobile */ @media (max-width: 767px) { body.gr-online-payment-page #opc-messages { top: 16px; left: 16px; right: 16px; max-width: none; } body.gr-online-payment-page #opc-messages .woocommerce-message { width: 100%; } } @keyframes grNoticeIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } /* Mobile button sizing */ @media (max-width: 880px) { /* body.gr-online-payment-page #opc-product-selection .single_add_to_cart_button, body.gr-online-payment-page .gr-continue-payment, body.gr-online-payment-page #place_order { min-height: 57px; padding-right: 72px; font-size: 18px; justify-content: center; }*/ body.gr-online-payment-page form.checkout.woocommerce-checkout { display: flex; flex-direction: column; } body.gr-online-payment-page #customer_details { order: 1; } body.gr-online-payment-page #order_review * { max-width: 100% !important; } body.gr-online-payment-page #customer_details .col-2 { margin-top: 21px; } body.gr-online-payment-page #order_review { order: 2; padding: 44px 20px 108px; } body.gr-online-payment-page .woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr; grid-gap: 21px 20px !important; } body.gr-online-payment-page .form-row-wide { grid-column: auto; } body.gr-online-payment-page.gr-payment-step #customer_details { display: none; } body.gr-online-payment-page #opc-product-selection .cart{ grid-template-columns: 1fr !important; grid-gap: 26px !important; } .product .nyp .woocommerce-nyp-message, .wcopc .product-item .nyp .woocommerce-nyp-message ul, body.gr-online-payment-page #opc-product-selection .nyp{ margin-bottom: 0 !important; } body.gr-online-payment-page #opc-product-selection .nyp div#nyp-error-1{ margin-bottom: 0 !important; } body.gr-online-payment-page #opc-product-selection .single_add_to_cart_button{ margin-top: 0 !important; opacity: 1 !important; } body.gr-online-payment-page .woocommerce-privacy-policy-text{ margin-top: 36px !important; } } @media (max-width: 1100px) and (min-width: 881px) { body.gr-online-payment-page #opc-product-selection .cart{ grid-template-columns: 1fr !important; grid-gap: 30px !important; } .product .nyp .woocommerce-nyp-message, .wcopc .product-item .nyp .woocommerce-nyp-message ul, body.gr-online-payment-page #opc-product-selection .nyp{ margin-bottom: 0 !important; } body.gr-online-payment-page #opc-product-selection .nyp div#nyp-error-1{ margin-bottom: 0 !important; } body.gr-online-payment-page #opc-product-selection .single_add_to_cart_button{ margin-top: 0 !important; } body.gr-online-payment-page #order_review{ padding: 48px 20px !important; } body.gr-online-payment-page #order_review .shop_table .order-total th, body.gr-online-payment-page #order_review .shop_table .order-total td, body.gr-online-payment-page tr.order-total bdi{ font-size: 30px !important; } body.gr-online-payment-page #order_review .shop_table tbody tr.cart_item{ grid-gap: 10px; } body.gr-online-payment-page #customer_details{ padding-right: 25px; } body.gr-online-payment-page select{ padding-right: 30px !important; background-position: right 10px center !important; } } /* ========================================================= HIDE DEFAULT WOOCOMMERCE / OPC LOADER ========================================================= */ body.gr-online-payment-page #order_review .blockUI.blockOverlay, body.gr-online-payment-page #order_review .blockOverlay, body.gr-online-payment-page #opc-product-selection .blockUI.blockOverlay, body.gr-online-payment-page #opc-product-selection .blockOverlay, body.gr-online-payment-page .woocommerce-checkout-review-order-table .blockUI.blockOverlay, body.gr-online-payment-page .woocommerce-checkout-review-order-table .blockOverlay, body.gr-online-payment-page .wcopc > .blockUI.blockOverlay { display: none !important; } body.gr-online-payment-page #order_review .blockUI.blockOverlay::before, body.gr-online-payment-page #opc-product-selection .blockUI.blockOverlay::before, body.gr-online-payment-page .woocommerce-checkout-review-order-table .blockUI.blockOverlay::before, body.gr-online-payment-page .wcopc > .blockUI.blockOverlay::before { display: none !important; content: none !important; } /* ========================================================= FIXED CART SKELETON LOADER ========================================================= */ body.gr-online-payment-page .gr-cart-loader--fixed { position: fixed; z-index: 99; display: block; padding: 52px 56px; background: #241F1F; opacity: 0; visibility: hidden; pointer-events: none; box-sizing: border-box; overflow: hidden; transition: opacity 0.1s ease, visibility 0.1s ease; } /* Visible */ body.gr-online-payment-page .gr-cart-loader--fixed.is-visible { opacity: 1; visibility: visible; /* Loader is visual only. Never block add/remove clicks. */ pointer-events: none !important; } /* Skeleton wrapper */ body.gr-online-payment-page .gr-cart-skeleton { width: 100%; max-width: 500px; } /* Skeleton blocks */ body.gr-online-payment-page .gr-cart-skeleton__line, body.gr-online-payment-page .gr-cart-skeleton__button { position: relative; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, 0.10); } /* Shimmer */ body.gr-online-payment-page .gr-cart-skeleton__line::after, body.gr-online-payment-page .gr-cart-skeleton__button::after { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.20) 50%, rgba(255, 255, 255, 0.04) 75%, transparent 100% ); animation: grCartShimmer 1.2s ease-in-out infinite; } /* Cart title placeholder */ body.gr-online-payment-page .gr-cart-skeleton__line--title { width: 34%; height: 30px; margin-bottom: 54px; } /* Product row */ body.gr-online-payment-page .gr-cart-skeleton__item { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-bottom: 28px; } body.gr-online-payment-page .gr-cart-skeleton__line--name { width: 48%; height: 20px; } body.gr-online-payment-page .gr-cart-skeleton__line--price { width: 22%; height: 20px; } /* Divider */ body.gr-online-payment-page .gr-cart-skeleton__divider { width: 100%; height: 1px; margin: 28px 0 52px; background: rgba(255, 255, 255, 0.15); } /* Summary heading */ body.gr-online-payment-page .gr-cart-skeleton__line--heading { width: 38%; height: 18px; margin-bottom: 32px; } /* Summary rows */ body.gr-online-payment-page .gr-cart-skeleton__summary { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, 0.12); } body.gr-online-payment-page .gr-cart-skeleton__line--small { width: 22%; height: 21px; } body.gr-online-payment-page .gr-cart-skeleton__line--amount { width: 22%; height: 23px; } /* Total row */ body.gr-online-payment-page .gr-cart-skeleton__summary--total .gr-cart-skeleton__line--small { width: 20%; height: 32px; } body.gr-online-payment-page .gr-cart-skeleton__summary--total .gr-cart-skeleton__line--amount { width: 27%; height: 32px; } /* Button placeholder */ body.gr-online-payment-page .gr-cart-skeleton__button { width: 100%; height: 64px; margin-top: 66px; background: rgba(255, 255, 255, 0.11); } /* Shimmer animation */ @keyframes grCartShimmer { 0% { left: -100%; } 100% { left: 100%; } } /* Mobile */ @media (max-width: 767px) { body.gr-online-payment-page .gr-cart-loader--fixed { padding: 32px 24px; } body.gr-online-payment-page .gr-cart-skeleton__line--title { width: 48%; height: 26px; margin-bottom: 40px; } body.gr-online-payment-page .gr-cart-skeleton__divider { margin: 24px 0 40px; } body.gr-online-payment-page .gr-cart-skeleton__button { height: 58px; margin-top: 48px; } } /* ========================================================= MOBILE CHECKOUT ONLY BELOW 880PX DESKTOP STAYS UNCHANGED ========================================================= */ .gr-mobile-cart-bar, .gr-mobile-cart-header { display: none; } @media (max-width: 880px) { /* * Leave room for the sticky cart bar while * the drawer is closed. */ body.gr-online-payment-page { padding-bottom: 104px; } /* ===================================================== MOBILE BACKDROP The design keeps roughly 25% of the page visible above the 75% bottom sheet. ===================================================== */ body.gr-online-payment-page::after { content: ""; position: fixed; inset: 0; z-index: 9991; background: rgba(255, 255, 255, 0.72); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, visibility 0.25s ease; } body.gr-online-payment-page.gr-mobile-cart-open::after { opacity: 1; visibility: visible; pointer-events: auto; } /* ===================================================== STICKY BOTTOM CART BAR ===================================================== */ body.gr-online-payment-page .gr-mobile-cart-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 100px; padding: 16px 28px; box-sizing: border-box; background: #241F1F; color: #fff; transition: opacity 0.2s ease, visibility 0.2s ease; } body.gr-online-payment-page .gr-mobile-cart-bar__info { display: flex; flex-direction: column; gap: 6px; min-width: 0; } body.gr-online-payment-page .gr-mobile-cart-bar__count { display: block; color: #fff; font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 1.2px; text-transform: uppercase; } body.gr-online-payment-page .gr-mobile-cart-bar__total { display: block; color: #fff; font-size: 27px; font-weight: 400; line-height: 1.1; } /* ===================================================== VIEW CART BUTTON ===================================================== */ body.gr-online-payment-page .gr-mobile-view-cart:disabled { opacity: 0.45; cursor: default; } /* ===================================================== 75% BOTTOM CART / PAYMENT DRAWER ===================================================== */ body.gr-online-payment-page #order_review { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; z-index: 9995 !important; width: 100% !important; max-width: 100% !important; /* * Match the supplied design: * sheet occupies approximately 75% of viewport. */ height: 75dvh !important; max-height: 75dvh !important; margin: 0 !important; padding: 0 28px 28px !important; box-sizing: border-box; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #241F1F !important; transform: translateY(100%); visibility: hidden; opacity: 0; pointer-events: none; transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.2s ease, visibility 0.32s ease; } body.gr-online-payment-page.gr-mobile-cart-open #order_review { transform: translateY(0); visibility: visible; opacity: 1; pointer-events: auto; } /* * Hide the sticky bar while either the cart * or payment drawer is open. */ body.gr-online-payment-page.gr-mobile-cart-open .gr-mobile-cart-bar { opacity: 0; visibility: hidden; pointer-events: none; } /* ===================================================== MOBILE CART HEADER ===================================================== */ body.gr-online-payment-page .gr-mobile-cart-header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; min-height: 82px; margin: 0 -28px 26px; padding: 0 28px; box-sizing: border-box; background: #241F1F; } body.gr-online-payment-page .gr-mobile-cart-header__title { color: #fff; font-size: 25px; font-weight: 500; line-height: 1.2; } body.gr-online-payment-page .gr-mobile-cart-close { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer; } body.gr-online-payment-page .gr-mobile-cart-close svg { display: block; width: 23px; height: 13px; } /* ===================================================== CART TABLE ===================================================== */ body.gr-online-payment-page #order_review::before { display: none !important; } body.gr-online-payment-page #order_review .woocommerce-checkout-review-order-table { width: 100% !important; margin: 0 !important; background: transparent !important; } body.gr-online-payment-page #order_review .woocommerce-checkout-review-order-table th, body.gr-online-payment-page #order_review .woocommerce-checkout-review-order-table td { color: #fff; } /* * Product spacing closer to supplied mobile design. */ body.gr-online-payment-page #order_review .shop_table tbody tr.cart_item { padding: 22px 36px 20px 0; } body.gr-online-payment-page #order_review .shop_table .product-remove { top: 20px; } body.gr-online-payment-page #order_review .shop_table tfoot { margin-top: 72px; } /* ===================================================== PAYMENT STEP ===================================================== */ body.gr-online-payment-page.gr-payment-step .gr-mobile-cart-header { display: none !important; } body.gr-online-payment-page.gr-payment-step #order_review { padding: 32px 28px 28px !important; } body.gr-online-payment-page #order_review .shop_table tfoot tr{ padding: 29px 0 17px !important; } /* * Hide the normal cart table in payment mode. */ body.gr-online-payment-page.gr-payment-step #order_review .woocommerce-checkout-review-order-table { display: none !important; } body.gr-online-payment-page.gr-payment-step .gr-continue-payment { display: none !important; } body.gr-online-payment-page.gr-payment-step .gr-back-to-cart { display: inline-flex !important; margin: 0 0 48px !important; } body.gr-online-payment-page.gr-payment-step .gr-payment-total { display: block !important; margin-bottom: 42px !important; } body.gr-online-payment-page.gr-payment-step #payment { display: block !important; } /* * The desktop CSS deliberately dims/disables the form * in payment mode. On mobile the drawer is above it, * so preserve the dimmed page visible behind the sheet. */ body.gr-online-payment-page.gr-payment-step #customer_details { display: block; } /* ===================================================== MOBILE SKELETON LOADER Important: visual only; it must never steal taps. ===================================================== */ body.gr-online-payment-page .gr-cart-loader--fixed, body.gr-online-payment-page .gr-cart-loader--fixed.is-visible { pointer-events: none !important; } /* * When the drawer is OPEN, the fixed loader can cover * the full 75% cart sheet. */ body.gr-online-payment-page.gr-mobile-cart-open .gr-cart-loader--fixed { padding: 32px 28px !important; background: #241F1F !important; } /* * When adding an item from the FORM, the cart drawer * is closed. JS positions the loader over the sticky * bottom cart bar instead of the hidden #order_review. * Use a compact shimmer for this state. */ body.gr-online-payment-page:not(.gr-mobile-cart-open) .gr-cart-loader--fixed { padding: 16px 28px !important; background: #241F1F !important; } body.gr-online-payment-page:not(.gr-mobile-cart-open) .gr-cart-loader--fixed .gr-cart-skeleton { width: 100%; max-width: none; height: 100%; } body.gr-online-payment-page:not(.gr-mobile-cart-open) .gr-cart-loader--fixed .gr-cart-skeleton__line--title, body.gr-online-payment-page:not(.gr-mobile-cart-open) .gr-cart-loader--fixed .gr-cart-skeleton__divider, body.gr-online-payment-page:not(.gr-mobile-cart-open) .gr-cart-loader--fixed .gr-cart-skeleton__line--heading, body.gr-online-payment-page:not(.gr-mobile-cart-open) .gr-cart-loader--fixed .gr-cart-skeleton__summary, body.gr-online-payment-page:not(.gr-mobile-cart-open) .gr-cart-loader--fixed .gr-cart-skeleton__button { display: none !important; } body.gr-online-payment-page:not(.gr-mobile-cart-open) .gr-cart-loader--fixed .gr-cart-skeleton__item { display: flex !important; align-items: center; justify-content: space-between; gap: 24px; height: 100%; margin: 0 !important; } body.gr-online-payment-page:not(.gr-mobile-cart-open) .gr-cart-loader--fixed .gr-cart-skeleton__line--name { width: 35% !important; height: 18px !important; } body.gr-online-payment-page:not(.gr-mobile-cart-open) .gr-cart-loader--fixed .gr-cart-skeleton__line--price { width: 32% !important; height: 46px !important; } /* ===================================================== SUCCESS TOAST ABOVE THE SHEET ===================================================== */ body.gr-online-payment-page #opc-messages { z-index: 10000 !important; } /* ===================================================== SMALLER MOBILE ===================================================== */ @media (max-width: 480px) { body.gr-online-payment-page { padding-bottom: 94px; } body.gr-online-payment-page .gr-mobile-cart-bar { min-height: 94px; padding: 14px 20px; } body.gr-online-payment-page .gr-mobile-cart-bar__count { font-size: 12px; } body.gr-online-payment-page .gr-mobile-cart-bar__total { font-size: 24px; } body.gr-online-payment-page .gr-mobile-view-cart { min-height: 58px; } body.gr-online-payment-page .gr-mobile-view-cart__arrow { width: 54px; } body.gr-online-payment-page #order_review { height: 75dvh !important; max-height: 75dvh !important; padding: 0 20px 24px !important; } body.gr-online-payment-page .gr-mobile-cart-header { min-height: 76px; margin: 0 -20px 24px; padding: 0 20px; } body.gr-online-payment-page .gr-mobile-cart-header__title { font-size: 23px; } body.gr-online-payment-page.gr-payment-step #order_review { padding: 28px 20px 24px !important; } body.gr-online-payment-page.gr-mobile-cart-open .gr-cart-loader--fixed { padding: 28px 20px !important; } body.gr-online-payment-page:not(.gr-mobile-cart-open) .gr-cart-loader--fixed { padding: 14px 20px !important; } } } /* ========================================================= FINAL MOBILE DRAWER OVERRIDE MUST BE AT VERY END OF CSS FILE ========================================================= */ @media screen and (max-width: 889px) { html, body { overflow-x: hidden; } body.gr-online-payment-page #order_review { position: fixed !important; top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; max-width: none !important; /* * Critical. * * Override old: * min-height: 100%; */ min-height: 0 !important; /* * Fallback first. */ height: 75vh !important; max-height: 75vh !important; /* * Modern mobile viewport. */ height: 75dvh !important; max-height: 75dvh !important; margin: 0 !important; box-sizing: border-box !important; overflow-x: hidden !important; overflow-y: auto !important; transform: translate3d( 0, 100%, 0 ) !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; z-index: 9995 !important; background: #241F1F !important; transition: transform 0.32s cubic-bezier( .22, .61, .36, 1 ), opacity 0.2s ease, visibility 0.32s ease !important; } body.gr-online-payment-page .woocommerce-checkout #order_review { min-height: 0 !important; height: 75vh !important; height: 75dvh !important; max-height: 75vh !important; max-height: 75dvh !important; } body.gr-online-payment-page .gr-mobile-cart-open #order_review, body.gr-online-payment-page.gr-mobile-cart-open #order_review { transform: translate3d( 0, 0, 0 ) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* * Payment state MUST remain the same * 75% bottom sheet. */ body.gr-online-payment-page .gr-mobile-cart-open.gr-payment-step #order_review { min-height: 0 !important; height: 75vh !important; height: 75dvh !important; max-height: 75vh !important; max-height: 75dvh !important; transform: translate3d( 0, 0, 0 ) !important; } } /* ========================================================= FINAL OVERRIDES FOR LATEST gr-online-payment.js Keep this block at the absolute end of the file. ========================================================= */ /* Latest JS uses .gr-cart-loader (inline), not the old fixed loader. */ body.gr-online-payment-page .gr-cart-loader--fixed { display: none !important; } body.gr-online-payment-page .gr-cart-loader { position: absolute !important; inset: 0 !important; z-index: 999 !important; display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 40px 46px !important; box-sizing: border-box !important; overflow: hidden !important; background: #241F1F !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 0.12s ease, visibility 0.12s ease !important; } body.gr-online-payment-page .gr-cart-loader.is-visible { opacity: 1 !important; visibility: visible !important; pointer-events: none !important; } body.gr-online-payment-page .gr-cart-loader, body.gr-online-payment-page .gr-cart-loader * { pointer-events: none !important; } body.gr-online-payment-page .gr-cart-skeleton { width: 100% !important; max-width: 100% !important; margin: 0 !important; } body.gr-online-payment-page .gr-cart-skeleton__line, body.gr-online-payment-page .gr-cart-skeleton__button { position: relative; overflow: hidden; border-radius: 2px; background: rgba(255,255,255,.10); } body.gr-online-payment-page .gr-cart-skeleton__line::after, body.gr-online-payment-page .gr-cart-skeleton__button::after { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.05) 25%, rgba(255,255,255,.22) 50%, rgba(255,255,255,.05) 75%, transparent 100%); animation: grCartShimmer 1.1s ease-in-out infinite; } body.gr-online-payment-page #opc-product-selection .single_add_to_cart_button.gr-action-processing { opacity: .55 !important; cursor: wait !important; } body.gr-online-payment-page #order_review .product-remove .remove.gr-action-processing { opacity: .5 !important; } @media screen and (max-width: 880px) { html, body { overflow-x: hidden; } body.gr-online-payment-page .gr-section-label, .product .nyp label, .wcopc .product-item .nyp label{ display: none !important; } body.gr-online-payment-page #opc-product-selection .nyp:before{ top: 0 !important; } body.gr-online-payment-page input.input-text, body.gr-online-payment-page textarea.input-text, body.gr-online-payment-page select, body.gr-online-payment-page .select2-container .select2-selection--single{ min-height: 48px !important; height: 48px !important; padding: 10px 21px !important; } body.gr-online-payment-page { /* Leave room for the fixed mobile cart bar. */ padding-bottom: 100px !important; } body.gr-online-payment-page .wcopc { position: relative !important; width: 100% !important; max-width: 100% !important; overflow: visible !important; margin-top: 21px !important; } body.gr-online-payment-page form.checkout.woocommerce-checkout { display: flex !important; flex-direction: column !important; width: 100% !important; } body.gr-online-payment-page #customer_details { order: 1; width: 100% !important; padding: 33px 20px 90px !important; box-sizing: border-box !important; } /* Mobile cart bar stays visible at the bottom of the viewport. */ body.gr-online-payment-page .gr-mobile-cart-bar { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 9990 !important; display: flex !important; align-items: center; justify-content: space-between; gap: 16px; width: 100% !important; min-height: 100px; margin: 0 !important; padding: 16px 28px !important; box-sizing: border-box !important; background: #241F1F !important; color: #fff !important; } body.gr-online-payment-page .gr-mobile-cart-bar__info { display: flex; flex-direction: column; justify-content: center; gap: 10px; min-width: 0; } body.gr-online-payment-page .gr-mobile-cart-bar__count { display: block; color: #fff !important; font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 1.4px; text-transform: uppercase; } body.gr-online-payment-page .gr-mobile-cart-bar__total { display: block; color: #fff !important; font-size: 23px; font-weight: 400; line-height: 1; } body.gr-online-payment-page .gr-mobile-view-cart { display: inline-flex !important; align-items: stretch; flex: 0 0 auto; min-height: 62px; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: #BE2429 !important; color: #fff !important; cursor: pointer; box-shadow: none !important; appearance: none; -webkit-appearance: none; min-height: 57px; padding: 7px 7px 10px !important; grid-gap: 10px; } body.gr-online-payment-page .gr-mobile-view-cart__text { display: flex; align-items: center; justify-content: center; /*padding: 0 19px;*/ color: #fff; font-size: 22px; font-weight: 400; line-height: 26.4px; white-space: nowrap; } body.gr-online-payment-page .gr-mobile-view-cart__arrow { display: flex; align-items: center; justify-content: center; width: 43px; height: 43px; background: #D6363B; } body.gr-online-payment-page .gr-mobile-view-cart__arrow svg { display: block; width: 24.444px; height: 26.222px; } /* Compact add skeleton inside the sticky bar. */ body.gr-online-payment-page .gr-mobile-cart-bar .gr-cart-loader { padding: 14px 28px !important; background: #241F1F !important; } body.gr-online-payment-page .gr-mobile-cart-bar .gr-cart-skeleton { display: flex !important; align-items: center; justify-content: space-between; width: 100% !important; height: 100% !important; } body.gr-online-payment-page .gr-mobile-cart-bar .gr-cart-skeleton__line--title, body.gr-online-payment-page .gr-mobile-cart-bar .gr-cart-skeleton__divider, body.gr-online-payment-page .gr-mobile-cart-bar .gr-cart-skeleton__line--heading, body.gr-online-payment-page .gr-mobile-cart-bar .gr-cart-skeleton__summary, body.gr-online-payment-page .gr-mobile-cart-bar .gr-cart-skeleton__button { display: none !important; } body.gr-online-payment-page .gr-mobile-cart-bar .gr-cart-skeleton__item { display: flex !important; align-items: center; justify-content: space-between; gap: 28px; width: 100% !important; height: 100% !important; margin: 0 !important; } body.gr-online-payment-page .gr-mobile-cart-bar .gr-cart-skeleton__line--name { width: 34% !important; height: 18px !important; } body.gr-online-payment-page .gr-mobile-cart-bar .gr-cart-skeleton__line--price { width: 35% !important; height: 48px !important; } /* Backdrop. */ body.gr-online-payment-page::after { content: ""; position: fixed; inset: 0; z-index: 990; background: rgba(255,255,255,.72); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility .25s ease; } body.gr-online-payment-page.gr-mobile-cart-open::after { opacity: 1; visibility: visible; pointer-events: none; } /* 75% bottom sheet. */ body.gr-online-payment-page #order_review, body.gr-online-payment-page .woocommerce-checkout #order_review { order: 2; position: fixed !important; top: auto !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 999 !important; width: 100% !important; max-width: none !important; min-height: 0 !important; height: 75vh !important; max-height: 75vh !important; height: 75dvh !important; max-height: 75dvh !important; margin: 0 !important; padding: 0 28px 28px !important; box-sizing: border-box !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; background: #241F1F !important; color: #fff; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translate3d(0,100%,0) !important; transition: transform .34s cubic-bezier(.22,.61,.36,1), opacity .2s ease, visibility .34s ease !important; } body.gr-online-payment-page.gr-mobile-cart-open #order_review { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translate3d(0,0,0) !important; } body.gr-online-payment-page.gr-mobile-cart-open.gr-payment-step #order_review { min-height: 0 !important; height: 75vh !important; max-height: 75vh !important; height: 75dvh !important; max-height: 75dvh !important; transform: translate3d(0,0,0) !important; } body.gr-online-payment-page.gr-mobile-cart-open .gr-mobile-cart-bar { opacity: 0; visibility: hidden; pointer-events: none; } body.gr-online-payment-page .gr-mobile-cart-header { position: sticky; top: 0; z-index: 50; display: flex !important; align-items: center; justify-content: space-between; min-height: 82px; margin: 0 0px 26px; padding: 0 0px; box-sizing: border-box; background: #241F1F; } body.gr-online-payment-page .gr-mobile-cart-header__title { color: #fff; font-size: 25px; font-weight: 500; line-height: 1.2; } body.gr-online-payment-page .gr-mobile-cart-close { display: flex; align-items: center; justify-content: center; width: 23px; height: 13px; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; cursor: pointer; } body.gr-online-payment-page #order_review::before { display: none !important; } body.gr-online-payment-page #order_review .shop_table { width: 100% !important; margin: 0 !important; } body.gr-online-payment-page #order_review .shop_table tbody tr.cart_item { padding: 27px 38px 22px 0 !important; } body.gr-online-payment-page #order_review .shop_table .product-remove { top: 22px !important; } body.gr-online-payment-page #order_review .shop_table tfoot { margin-top: 60px !important; } /* Delete skeleton inside drawer. */ body.gr-online-payment-page #order_review > .gr-cart-loader { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; padding: 32px 28px !important; background: #241F1F !important; z-index: 500 !important; pointer-events: none !important; } body.gr-online-payment-page #order_review .gr-continue-payment { width: 100% !important; margin: 73px 0 0 !important; } /* Payment state. */ body.gr-online-payment-page.gr-payment-step .gr-mobile-cart-header { display: none !important; } body.gr-online-payment-page.gr-payment-step #order_review { padding: 32px 28px 28px !important; } body.gr-online-payment-page.gr-payment-step #order_review .woocommerce-checkout-review-order-table { display: none !important; } body.gr-online-payment-page.gr-payment-step .gr-continue-payment { display: none !important; } body.gr-online-payment-page.gr-payment-step .gr-back-to-cart { display: inline-flex !important; margin: 0 0 65px !important; } body.gr-online-payment-page.gr-payment-step .gr-payment-total { display: block !important; margin-bottom: 53px !important; } body.gr-online-payment-page.gr-payment-step #payment { display: block !important; } body.gr-online-payment-page.gr-payment-step #customer_details { display: block !important; } body.gr-online-payment-page #payment .wc_payment_method, body.gr-online-payment-page #payment .wc_payment_method > label { width: 100% !important; box-sizing: border-box; } body.gr-online-payment-page #opc-messages { top: 85px !important; left: 16px !important; right: 16px !important; width: auto !important; max-width: none !important; z-index: 999999 !important; } body.gr-online-payment-page.gr-payment-step .gr-back-to-cart{ color: #FFF; font-size: 18px; font-weight: 500; line-height: 21.6px; } body.gr-online-payment-page .gr-payment-total__label, body.gr-online-payment-page .gr-payment-total__amount{ color: #FFF; font-size: 30px; font-weight: 700; } body.gr-online-payment-page.gr-payment-step .gr-payment-total{ padding-bottom: 38px !important; } } @media screen and (max-width: 480px) { body.gr-online-payment-page .gr-mobile-cart-bar { min-height: 94px; padding: 14px 20px !important; } body.gr-online-payment-page #order_review { min-height: 0 !important; height: 75vh !important; max-height: 75vh !important; height: 75dvh !important; max-height: 75dvh !important; padding: 0 20px 24px !important; } body.gr-online-payment-page .gr-mobile-cart-header { min-height: auto; margin: 24px 0px 59px; padding: 0 0px; } body.gr-online-payment-page #order_review .shop_table tfoot tr{ align-items: center; } body.gr-online-payment-page #order_review .shop_table tbody:before{ width: calc(100% + 56px) !important; margin: 0 -28px !important; padding: 0 28px 13px; } body.gr-online-payment-page #order_review .shop_table tfoot:before{ width: calc(100% + 56px) !important; margin: 0 -28px !important; padding: 0 28px 20px; } body.gr-online-payment-page #order_review .shop_table .order-total th{ font-size: 30px !important; } body.gr-online-payment-page tr.order-total bdi{ font-size: 30px !important; } body.gr-online-payment-page .gr-mobile-cart-header__title { font-size: 26px; } body.gr-online-payment-page #order_review > .gr-cart-loader { padding: 28px 20px !important; } body.gr-online-payment-page .gr-mobile-cart-bar .gr-cart-loader { padding: 14px 20px !important; } body.gr-online-payment-page.gr-payment-step #order_review { padding: 28px 20px 24px !important; } body.gr-online-payment-page #opc-product-selection .nyp:before{ height: 48px !important; } } @media screen and (min-width: 880px) { body.gr-online-payment-page .gr-mobile-cart-bar, body.gr-online-payment-page .gr-mobile-cart-header { display: none !important; } body.gr-online-payment-page #order_review { visibility: visible; opacity: 1; transform: none; pointer-events: auto; } } /* ========================================================= FINAL MOBILE CART BAR POSITION FIX The bar must stay visible while scrolling the form. ========================================================= */ @media screen and (max-width: 880px) { body.gr-online-payment-page { padding-bottom: 100px !important; } body.gr-online-payment-page .gr-mobile-cart-bar { position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; z-index: 9990 !important; margin: 0 !important; } body.gr-online-payment-page.gr-mobile-cart-open .gr-mobile-cart-bar { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } } @media screen and (max-width: 480px) { body.gr-online-payment-page { padding-bottom: 94px !important; } } /* ========================================================= FINAL PARENT-BOUNDED MOBILE CART BAR + INLINE LOADER MUST REMAIN AT THE VERY END OF THIS FILE ========================================================= */ /* * The latest JS controls the mobile bar using inline !important * position values: * * - fixed while .wcopc continues below the viewport * - absolute at the bottom edge of .wcopc * * This creates "sticky inside the parent" behavior without the * normal-flow problem of CSS position: sticky. */ body.gr-online-payment-page .gr-cart-loader--fixed { display: none !important; } body.gr-online-payment-page .gr-cart-loader { position: absolute !important; inset: 0 !important; z-index: 999 !important; display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 40px 46px !important; box-sizing: border-box !important; overflow: hidden !important; background: #241F1F !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 0.12s ease, visibility 0.12s ease !important; } body.gr-online-payment-page .gr-cart-loader.is-visible { opacity: 1 !important; visibility: visible !important; pointer-events: none !important; } body.gr-online-payment-page .gr-cart-loader, body.gr-online-payment-page .gr-cart-loader * { pointer-events: none !important; } body.gr-online-payment-page #opc-product-selection .single_add_to_cart_button.gr-action-processing { opacity: 0.6 !important; cursor: wait !important; } body.gr-online-payment-page #order_review .product-remove .remove.gr-action-processing { opacity: 0.5 !important; } /*@media screen and (max-width: 480px) { body.gr-online-payment-page { padding-bottom: 94px !important; } body.gr-online-payment-page .gr-mobile-cart-bar { min-height: 94px !important; height: 94px !important; padding: 14px 20px !important; } body.gr-online-payment-page .gr-mobile-cart-bar__count { font-size: 12px; } body.gr-online-payment-page .gr-mobile-cart-bar__total { font-size: 24px; } body.gr-online-payment-page .gr-mobile-cart-bar .gr-cart-loader { padding: 14px 20px !important; } body.gr-online-payment-page #order_review > .gr-cart-loader { padding: 28px 20px !important; } } */ @media screen and (min-width: 880px) { body.gr-online-payment-page .gr-mobile-cart-bar, body.gr-online-payment-page .gr-mobile-cart-header { display: none !important; } }