﻿/* Please see documentation at https://docs.microsoft.com/aspnet/core/client-side/bundling-and-minification
for details on configuring this project to bundle and minify static web assets. */

:root {
    --light-blue: #CFEBF4;
    --dark-blue: #0F99C7;

    --gray-0: #ffffff;
    --gray-1: #F2F3F4;
    --gray-2: #E6E7EB;
    --gray-3: #CECFD7;
    --gray-4: #9D9FAF;
    --gray-5: #6C6E87;
    --gray-6: #3B3E5E;
    --gray-7: #090E36;

    --error-light: #FEEAF1;
    --error-dark: #DC3545;

    --border-radius: 6px;
}

* {
    font-family: 'IBM Plex Sans Hebrew', sans-serif;
}

.container {
    box-sizing: content-box;
    padding-right: 0px !important;
    padding-left: 0px !important;
}

a.navbar-brand {
  white-space: normal;
  text-align: center;
  word-break: break-all;
}

/* Provide sufficient contrast against white background */
a {
  color: var(--dark-blue);
}

.navbar-dark {
    background-color: var(--dark-blue);
}

.checkout_navbar {
    background-color: white;
    border-bottom: 2px solid var(--gray-2);
    max-width: 1138px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
    font-size: 25px;
}

.checkout_navbar span {
    color: var(--gray-5);
    font-style: normal;
    font-weight: 500;
    line-height: 22px;
    font-size: 1.1rem;
}

.payment-panel_container {
    display: flex;
    max-width: 1135px;
    margin: 0 auto;
    justify-content: space-between;
}

.payment-panel_container > img {
    max-height: 600px;
    margin-top: 100px;
}
.left-wrapper {
    display: flex;
    flex-direction: row;
    align-items: left;
    width: 30%;
}
.center-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    width: 40%;
}

.right-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    width: 30%;
}
.nav-countdown {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: 60%;
    align-items: flex-end;
}
.nav-lng-sel-right {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    width: 40%;
}

@media screen and (max-width: 1135px) {
    .payment-panel_container {
        flex-direction: column;
    }
    .payment-panel {
        align-self: center;
    }
    .payment-panel_container > img {
        display: none;
    }
    .checkout_navbar {
        padding: 0 1rem;
    }
}

@media screen and (max-width: 600px) {
    .checkout_navbar {
        border-bottom: none;
    }
    .payment-panel {
        padding-top: 0.5rem !important;
    }
    .messagepop {
        width: 100%!important;
    }

    .right-wrapper {
        flex-direction: column-reverse;
        justify-content: flex-end;
        align-self: self-start;
    }

    .nav-countdown {
        width: auto;
    }

    .nav-lng-sel-right {
        width: auto;
        margin-top: 0.4em;
    }

    .left-wrapper {
        align-self: self-start;
    }

    .center-wrapper {
        align-self: self-start;
    }
    span.marketing-name {
        margin-top: 3.3rem;
    }

    #merchant-logo {
        margin: auto;
    }

    .row {
        margin-left: auto;
        margin-right: auto;
    }
}

@media screen and (max-width: 400px) {
    .payment-panel {
        padding-left: 0.5rem!important;
        padding-right: 0.5rem!important;
    }
}

.payment-panel {
    display: flex;
    flex-direction: column;
    max-width: 400px;
    min-width: 300px;
    padding: 1rem 0;
    text-align: start;
}

.payment-panel_heading,
.payment-panel_method {
    font-weight: 600;
    font-size: 1.5rem;
    text-align: start;
}
.payment-panel_total {
    font-weight: 600;
    font-size: 1.2rem;
    text-align: start;
}
 
.payment-panel_title {
    font-weight: 600;
    font-size: 1.1rem;
    margin: 1.4rem 0;
}

.payment-panel_method  {
    font-size: 1.4rem;
}

.payment-type-select{
    direction: ltr;
}

.payment-panel input,
.payment-panel select {
    background-color: var(--gray-1);
    border-radius: var(--border-radius);
    border: none;
    height: 35px;
}

.payment-panel input::placeholder,
.payment-panel select::placeholder {
    color: var(--gray-4);
    font-weight: 400;
    font-size: 0.875rem;
    padding-left: 1rem;
}

.payment-panel label {
    font-weight: 700;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--gray-5);
    margin-bottom: 0.4rem;
    max-width: 100%;
}

.payment-type-area label {
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    margin-top: 1.4rem;
    margin-bottom: 0;
}

.checkbox-group{
    display: flex;
    flex-direction: row;
    align-items: end;
    padding-bottom: 0.3rem;
}

.checkbox-group label {
    margin-bottom: 0 !important;
    white-space: nowrap;
    padding-left: 0.2rem;
}

.checkbox-group input {
    position: initial !important;
    margin: 0 3px 0.25rem 3px;
    height: 18px !important;
}

.form-group__line {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.form-group__line > div:first-of-type {
    width: 70%;
}

.form-group__line > div:last-of-type {
    width: 25%;
}

fieldset {
    border-top: 1px solid var(--gray-2);
    padding: 0.5rem 0;
    margin: 0.5rem 0 1rem 0;
}

.googlepay-button-container {
    margin-right: 8px;
    margin-left: 8px;
    width: 160px;
}

.applepaymark {
    padding-left:10px;
    height: 29px;
}

.applelepay-button-container {
    margin-right: 8px;
    margin-left: 8px;
    width: 160px;
}

.bit_payment_button {
    background: url("/img/bit-button.svg") no-repeat;
    background-size: 169px 47px;
    width: 169px;
    height: 47px;
    display: inline-block;
}
.bit_payment_button:hover {
    background: url("/img/bit-button_hover.svg") no-repeat;
    background-size: 169px 47px;
    cursor: pointer;
}

.googlepay-cancel-button {
    border-radius: 1vh !important;
    min-height: 40px !important;
    width: 160px;
}

.applelepay-cancel-button {
    border-radius: 100vh !important;
    min-height: 48px !important;
    width: 160px;
    margin: 0 0 0 5px;
}

.bit_payment-cancel-button {
    border-radius: 7px !important;
    width: 160px;
    height: 47px !important;
    margin-right: 8px;
    margin-left: 8px;
}

.payment-panel_button-group,
.payment-panel_button-group__bit
.payment-panel_button-group__google
.payment-panel_button-group__apple {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 0.5rem;
    max-width: 360px;
}

.payment-panel_button-group button,
.payment-panel_button-group input {
    width: 48%;
    height: 35px;
}

input {
    color: black !important;
    font-weight: 500 !important;
}

.btn, button, input {
    border: none;
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.125rem;
    border-radius: var(--border-radius);
    height: 35px;
}

.btn-outline {
    border: 1px solid !important;
}
.btn-outline-primary {
    color: black !important;
}

.btn-outline-primary:hover,
.btn-outline-primary.active,
.payment-panel_button-group input {
    color: white !important;
    text-align: center !important;
}

button:hover,
.payment-panel_button-group input:hover,
.payment-type-select label:hover,
.payment-panel_button-group__bit img:hover{
    transform: scale(1.02);
    font-weight: 600;
}

.btn-primary {
    background-color: var(--dark-blue) !important;
    color: white;
}

.btn-secondary {
    background-color: var(--light-blue);
    color: var(--dark-blue);
}

.btn-danger {
    background-color: var(--error-dark)!important;
}

.btn-outline-danger {
    border: 2px solid var(--error-dark) !important;
}

.text-danger {
   color: var(--error-dark);
}

.culture-select {
    background-color: var(--light-blue);
    color: var(--dark-blue);
    font-weight: bold;
    font-family: "Open Sans Semibold", sans-serif;
    border-radius: var(--border-radius);
    border: none;
}

/*.btn-primary {
  color: #fff;
  background-color: #1b6ec2;
  border-color: #1861ac;
}*/

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  color: #fff;
    background-color: var(--dark-blue);
  border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  font-size: 14px;
}
@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.border-top {
  border-top: 1px solid #e5e5e5;
}
.border-bottom {
  border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
  font-size: 1rem;
  line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}

body {
  /* Margin bottom by footer height */
  margin-bottom: 80px;
    background-color: white;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  white-space: nowrap;
  line-height: 30px; /* Vertically center the text there */
}

.field-validation-error {
    color: var(--error-dark);
    font-weight: 400;
    font-size: 0.75rem;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    background-color: var(--error-light);
}

input.input-validation-error::placeholder {
    color: var(--error-dark);
    font-weight: 500;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #b94a48;
}

.validation-summary-valid {
    display: none;
}

.has-error input {
    border-width: 2px;
}

.validation.text-danger:after {
    content: 'Validation failed';
}

.validation.text-success:after {
    content: 'Validation passed';
}

.form-control {
    font-weight: 500;
    font-size: 0.875rem;
}
.form-check{
    padding-left: 0;
}
.rtl  .form-check{
    text-align: right;
}

.card_number{
    padding: 0 1.25rem;
    display: flex;
}
.card_number input{
    height: 10px !important;
    margin: 0.3rem -1.25rem;
}
.card_number span,
.card_expiration{
    line-height: 18px;
    font-size: 0.875rem;
    /*font-family: 'Anelisa', sans-serif;*/
}

/*card block rtl*/
.card_number .rtl .form-check {
    transform: none;
}


.rtl input {
    direction: ltr;
    text-align: right;
}
#merchant-logo{
    max-height: 40px;
    margin: 0.4rem;
}
.list-group-item {
    background-color: transparent;
    border: none;
    margin: 0;
    padding: 0.75rem 0;
}

.spanner {
    position: absolute;
    top: 50%;
    left: 0;
    background: #2a2a2a;
    width: 100%;
    display: block;
    text-align: center;
    height: 300px;
    color: #FFF;
    transform: translateY(-50%);
    z-index: 1000;
}

.overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
}
.overlay .dot-spin{
    position: absolute;
    top: 50%;
    left: 50%;
}
.no-scroll{
    overflow: hidden;
}

.signalr-toast.toast-info {
    background-color: var(--dark-blue);
    opacity: 1 !important;
}
.text-end {
    text-align: end !important;
}

.payment-type-select label {
   width: 175px;
}
.cursor-pointer{
    cursor: pointer;
}
.form-area{
    padding-top: 1rem;
}

.messagepop {
    direction: ltr;
    background-color: #FFFFFF;
    border: 1px solid #999999;
    cursor: default;
    display: none;
    position: absolute;
    text-align: left;
    width: 600px;
    height: 450px;
    z-index: 50;
    top: 50px;
    left: 50%;
    transform: translate(-50%, 0px);
    z-index: 1001; /**ensure it's above .overlay*/
}

.text-bit {
    color: #2d5082;
}

.bit-result-container {
    height: 80vh;
    justify-content: center;
    display: flex;
    flex-direction: column;
}

.custom-toastr {
    position: fixed;
    z-index: 999999;
    pointer-events: none;
    top: 0;
    right: 0;
    padding: 1rem 3rem;
}

.hideDealDescription {
    display: none;
}

@media(max-width: 320px) { 
    .payment-panel {
        display: flex;
        flex-direction: column;  
        max-width: 90vw;   
        min-width: 80vw;
        padding: 1rem;
        text-align: start;
    }
    .payment-type-area label,
    .btn, button, input {
        font-size:0.8rem;
        line-height: 0.8rem;
    }
}

.kashcash-svg-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    overflow: hidden; /* prevent scrollbars if svg tries to overflow */
}

.kashcash-svg-wrapper svg {
    width: 530px; /* original size for big screens */
    height: auto; /* auto keeps aspect ratio */
    max-width: 100%; /* allow shrinking below 530px */
    display: block; /* removes extra inline spacing */
}

/* for screens smaller than 600px */
@media (max-width: 600px) {
    .kashcash-svg-wrapper svg {
        width: 100%; /* scale proportionally to screen width */
        height: auto; /* maintain aspect ratio */
    }
}

@supports (-webkit-appearance: -apple-pay-button) {
    .apple-pay-button {
        display: inline-block;
        -webkit-appearance: -apple-pay-button;
    }
    .apple-pay-button-black {
        -apple-pay-button-style: black;
    }
    .apple-pay-button-white {
        -apple-pay-button-style: white;
    }
    .apple-pay-button-white-with-line {
        -apple-pay-button-style: white-outline;
    }
    .apple-pay-button-with-text {
        display: inline-block;
        -webkit-appearance: -apple-pay-button;
        -apple-pay-button-type: buy;
    }
    .apple-pay-button-with-text > * {
        display: none;
    }
    .apple-pay-button-black-with-text {
        -apple-pay-button-style: black;
        padding: 5px 0;
        box-sizing: border-box;
        min-width: 110px;
        min-height: 35px;
        max-height: 64px;
        margin: 0 10px 0 0;
    }
    .apple-pay-button-white-with-text {
        -apple-pay-button-style: white;
    }
    .apple-pay-button-white-with-line-with-text {
        -apple-pay-button-style: white-outline;
    }
}


@supports not (-webkit-appearance: -apple-pay-button) {
    .apple-pay-button {
        display: inline-block;
        background-size: 100% 60%;
        background-repeat: no-repeat;
        background-position: 50% 50%;
        border-radius: 5px;
        padding: 5px 0;
        box-sizing: border-box;
        min-width: 110px;
        min-height: 35px;
        max-height: 64px;
        margin: 0 10px 0 0;
    }
    .apple-pay-button-black {
        background-image: -webkit-named-image(apple-pay-logo-white);
        background-color: black;
    }
    .apple-pay-button-white {
        background-image: -webkit-named-image(apple-pay-logo-black);
        background-color: white;
    }
    .apple-pay-button-white-with-line {
        background-image: -webkit-named-image(apple-pay-logo-black);
        background-color: white;
        border: .5px solid black;
    }
    .apple-pay-button-with-text {
        --apple-pay-scale: 1; /* (height / 32) */
        display: inline-flex;
        justify-content: center;
        font-size: 12px;
        border-radius: 5px;
        padding: 5px 0;
        box-sizing: border-box;
        min-width: 110px;
        min-height: 35px;
        max-height: 64px;
        margin: 0 10px 0 0;
    }
    .apple-pay-button-black-with-text {
        background-color: black;
        color: white;
    }
    .apple-pay-button-white-with-text {
        background-color: white;
        color: black;
    }
    .apple-pay-button-white-with-line-with-text {
        background-color: white;
        color: black;
        border: .5px solid black;
    }
    .apple-pay-button-with-text.apple-pay-button-black-with-text > .logo {
        background-image: -webkit-named-image(apple-pay-logo-white);
        background-color: black;
    }
    .apple-pay-button-with-text.apple-pay-button-white-with-text > .logo {
        background-image: -webkit-named-image(apple-pay-logo-black);
        background-color: white;
    }
    .apple-pay-button-with-text.apple-pay-button-white-with-line-with-text > .logo {
        background-image: -webkit-named-image(apple-pay-logo-black);
        background-color: white;
    }
    .apple-pay-button-with-text > .text {
        font-family: -apple-system;
        font-size: calc(1em * var(--apple-pay-scale));
        font-weight: 300;
        align-self: center;
        margin-right: calc(2px * var(--apple-pay-scale));
    }
    .apple-pay-button-with-text > .logo {
        width: calc(35px * var(--scale));
        height: 100%;
        background-size: 100% 60%;
        background-repeat: no-repeat;
        background-position: 0 50%;
        margin-left: calc(2px * var(--apple-pay-scale));
        border: none;
    }
}

.apple-pay-set-up-button {
    display: inline-block;
    -webkit-appearance: -apple-pay-button;
    -apple-pay-button-type: set-up;
}
.apple-pay-set-up-button-black {
    -apple-pay-button-style: black;
}
.apple-pay-set-up-button-white {
    -apple-pay-button-style: white;
}
.apple-pay-setup-button-white-with-line {
    -apple-pay-button-style: white-outline;
}

.apple-pay-donate-button {
    display: inline-block;
    -webkit-appearance: -apple-pay-button;
    -apple-pay-button-type: donate;
}

.apple-pay-donate-button-black {
    -apple-pay-button-style: black;
}

.apple-pay-donate-button-white {
    -apple-pay-button-style: white;
}

.apple-pay-donate-button-white-with-line {
    -apple-pay-button-style: white-outline;
}

.coupon-btn { width: 100px; }

#nav-countdown {
    visibility: hidden;
}

body.rtl {
    direction: rtl;
    text-align: right;
}

body.rtl .terms-and-conditions, body.rtl .terms-content, body.rtl .confirmation-checkbox {
    text-align: right;
}

.confirmation-checkbox {
    padding-top: 50px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.terms-content {
    margin-top: 50px;
    border-top: solid 1px gray;
    border-bottom: solid 1px gray;
}

.terms-and-conditions {
    padding-top: 20px;
    margin-bottom: 20px;
}

fieldset {
    border-top: none;
}

div#GooglePayPaymentMethodRadio {
    display: none;
}

div#applepay-mark-div {
    display: none;
}

.hidden {
    display: none;
}

input.no-spinner::-webkit-outer-spin-button,
input.no-spinner::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input.no-spinner {
    -moz-appearance: textfield;
    appearance: textfield;
}