/* Non-header/footer specifics */

@font-face {
    font-family: "LA28-Normal";
    src: url(../../../fonts/ole-la//LA28-Normal.woff) format("woff");
    font-display: swap;
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: "LA28-Bold";
    src: url(../../../fonts/ole-la/LA28-Bold.woff) format("woff");
    font-display: swap;
    font-weight: 700;
    font-style: normal
}

@font-face {
    font-family: "LA28-Black";
    src: url(../../../fonts/ole-la/LA28-Black.woff) format("woff");
    font-display: swap;
    font-weight: 800;
    font-style: normal
}

@font-face {
    font-family: "LA28-Display";
    src: url(../../../fonts/ole-la/LA28Display-Regular.woff) format("woff");
    font-display: swap;
    font-weight: 800;
    font-style: normal
}

@font-face {
    font-family: "LA28 Sans Regular";
    src: url(../../../fonts/ole-la/LA28Sans-Regular.ttf) format("truetype");
    font-display: swap;
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "LA28 Sans Medium";
    src: url(../../../fonts/ole-la/LA28Sans-Medium.ttf) format("truetype");
    font-display: swap;
    font-weight: 500;
    font-style: normal;
}

iframe.iframe-form{
    margin-top: 0px !important;
}

.snow button, .snow input, .snow optgroup, .snow select, .snow textarea{
    font-family: var(--font-primary) !important;
}

.payment > * {
    font-family: "LA28-Normal", sans-serif;
}
@media (min-width: 992px) {
    .payment {
        margin-top: 250px;
    }
}
.payment .title-main {
    font-family: "LA28-Normal", sans-serif;
    color: #000;
    border-radius:25px;
}

.payment .title {
    color: #fff;
    background-color: #00AAF2;
    border-radius: 8px !important;
}

.payment .row .col-sm-6.col-md-6.col-lg-6.col-xl-6.align-right span {
    font-family: "LA28-bold", sans-serif;
}

.payment .payment-row .payment-col.align-right {
    font-family: "LA28-bold", sans-serif;
}

.payment .btn-wrapper{
    display:flex;
    justify-content: center;
    align-items: center;
}

.payment .btn-wrapper button:first-child {
    font-family: "LA28-Bold" sans-serif;
    background: #fff !important;
    color: #00AAF2 !important;
    border-radius: 25px !important;
    border: 2px solid #00AAF2 !important;
}

.payment .btn-wrapper button:first-child:hover {
    background: rgba(24, 147, 219, 0.20) !important;
    color: #00AAF2 !important;
    border-radius: 25px !important;
    border: 2px solid #00AAF2 !important;
}

.payment .btn-wrapper button:nth-child(2) {
    font-family: "LA28-Bold" sans-serif;
    background: #00AAF2 !important;
    color: #fff !important;
    border-radius: 25px !important;
    border: unset !important;
}

.payment .btn-wrapper button:nth-child(2):hover {
    background: #0398d8 !important;
    color: #fff !important;
    border-radius: 25px !important;
    border: unset !important;
}

button.btn-back-home,
button.btn-try-again {
    background-color: #91CBEB !important;
    color: #ffffff !important;
    border: 2px solid #91CBEB !important;
    font-weight: 700;
    border-radius: 4px !important;
    width: 160px !important;
    height: auto !important;
    padding: 8px !important;
    font-family: "LA28-Bold", sans-serif !important;
    font-size: 20px !important;
    margin:0px !important;
}

.btn-back-home:hover,
.btn-try-again:hover {
    background: #91CBEB !important;
    color: #ffffff !important;
}

/* ------------------------------------------------------------------
   Adyen Drop-in styles (LA28)

   _payment_adyen.css is linked AFTER this file in AdyenPay.cshtml, so
   every override here needs to out-specify the base rule it replaces.
   That is why the selectors carry a `body` prefix and !important.
   ------------------------------------------------------------------ */

/* Page shell ------------------------------------------------------- */

body .payment-wrapper {
    font-family: "LA28 Sans Regular", "LA28-Normal", sans-serif !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 480px !important;
    margin: 30px auto 0 !important;
    padding: 0 16px !important;
}

body .payment-wrapper .back-btn-wrapper {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 12px !important;
}

body .payment-wrapper .back-btn-payment {
    gap: 6px !important;
    font-family: "LA28 Sans Medium", "LA28 Sans Regular", "LA28-Normal", sans-serif !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    color: #171717 !important;
    text-decoration: none !important;
}

body .payment-wrapper .back-btn-payment span {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: inherit !important;
    text-decoration: underline !important;
}

body .payment-wrapper .back-btn-payment i.back-btn {
    font-size: 18px !important;
    color: #171717 !important;
}

body .payment-wrapper .payment-container {
    background-color: #f7f7f7 !important;
    border-radius: 8px !important;
    padding: 24px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

body .payment-wrapper .payment-container .payment-container-inner {
    align-items: stretch !important;
    gap: 0 !important;
}

/* Amount and payment reference ------------------------------------- */

body .payment-container .payment-details {
    display: block !important;
    background-color: transparent !important;
    color: #000000 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

body .payment-container .payment-details h1 {
    font-family: "LA28-Bold", sans-serif !important;
    font-size: 25px !important;
    line-height: 30px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    text-align: right !important;
}

body .payment-container .payment-details h2 {
    margin-top: 2px !important;
    font-family: "LA28 Sans Medium", "LA28-Normal", sans-serif !important;
    font-size: 16px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    color: #000000 !important;
    text-align: right !important;
}

body .payment-container .payment-details p {
    margin-top: 16px !important;
    font-family: "LA28 Sans Regular", "LA28-Normal", sans-serif !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
    color: #171717 !important;
    text-align: left !important;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Credit card panel ------------------------------------------------
   Adyen renders the Pay button as a sibling of the card form, so a
   single bordered wrapper around "heading + fields only" does not
   exist. The border is therefore split: the heading draws the top and
   sides, the card form draws the sides and bottom. They meet seamlessly
   and the Pay button stays outside the box.
   ------------------------------------------------------------------ */

body #dropin-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin: 26px 0 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    font-family: "LA28-Normal", sans-serif !important;
}

body #dropin-container .dropin-header {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 16px 16px 0 !important;
    border: 1px solid #9d9da5 !important;
    border-bottom: 0 !important;
    border-radius: 3px 3px 0 0 !important;
    font-family: "LA28 Sans Bold", "LA28-Bold", sans-serif !important;
    font-size: 18px !important;
    line-height: 24px !important;
    font-weight: 700 !important;
    color: #111111 !important;
}

body #dropin-container .dropin-header span {
    display: flex !important;
    align-items: center !important;
}

body #dropin-container .dropin-header span img {
    display: block;
    width: 24px;
    height: auto;
    filter: brightness(0) invert(0);
}

/* Flatten Adyen's own wrappers so the form border lines up with the
   heading border above it. */
body #dropin-container .adyen-checkout__dropin,
body #dropin-container .adyen-checkout__payment-methods-list,
body #dropin-container .adyen-checkout__payment-methods-list > li.adyen-checkout__payment-method,
body #dropin-container .adyen-checkout__payment-method__details {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body #dropin-container .adyen-checkout__payment-methods-list .adyen-checkout__payment-method--card .adyen-checkout__payment-method__details__content {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

body #dropin-container .adyen-checkout__payment-method__details__content .adyen-checkout__card-input {
    background: transparent !important;
    border: 1px solid #9d9da5 !important;
    border-top: 0 !important;
    border-radius: 0 0 3px 3px !important;
    padding: 26px 16px 16px !important;
}

/* While the form is absent (loading, 3DS challenge) the heading closes
   its own box instead of leaving an open-bottomed border. */
body #dropin-container:not(:has(.adyen-checkout__card-input)) .dropin-header {
    padding-bottom: 16px !important;
    border-bottom: 1px solid #9d9da5 !important;
    border-radius: 3px !important;
}

/* Adyen sizes the 3DS challenge iframe itself, and the panel is now narrower
   than the old fixed 552px, so let it shrink rather than overflow the page. */
body #dropin-container .adyen-checkout__threeds2__challenge,
body #dropin-container .adyen-checkout__iframe--threeDSIframe {
    max-width: 100% !important;
}

/* Fields ------------------------------------------------------------ */

body #dropin-container .adyen-checkout__payment-methods-list .adyen-checkout__payment-method__details .adyen-checkout__card-input .adyen-checkout__card__form {
    background: transparent !important;
    gap: 28px !important;
}

/* Expiry and security code stack on mobile; the desktop block below puts
   them back on one row, as the desktop reference shows. */
body #dropin-container .adyen-checkout__payment-methods-list .adyen-checkout__payment-method__details .adyen-checkout__card-input .adyen-checkout__card__form .adyen-checkout__card__exp-cvc {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 28px !important;
}

body #dropin-container .adyen-checkout__card__exp-cvc > * {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

/* Spacing is driven by the label/helper margins below, not wrapper gaps */
body #dropin-container .adyen-checkout__field,
body #dropin-container .adyen-checkout__field .adyen-checkout__label {
    gap: 0 !important;
}

body #dropin-container .adyen-checkout__field .adyen-checkout__label .adyen-checkout__label__text {
    font-family: "LA28 Sans Medium", "LA28-Normal", sans-serif !important;
    font-size: 14px !important;
    line-height: 18px !important;
    font-weight: 500 !important;
    color: #171717 !important;
    margin-bottom: 8px !important;
}

/* Inputs ------------------------------------------------------------ */

body #dropin-container .adyen-checkout__field--cardNumber .adyen-checkout__label .adyen-checkout__input-wrapper .adyen-checkout__input {
    align-items: center !important;
    min-height: 48px !important;
    padding: 0 12px !important;
    background-color: #ffffff !important;
    border: 1px solid #a8a8b0 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}

body #dropin-container .adyen-checkout__field:not(.adyen-checkout__field--cardNumber) .adyen-checkout__label .adyen-checkout__input-wrapper {
    align-items: center !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 12px !important;
    background-color: #ffffff !important;
    border: 1px solid #a8a8b0 !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}

body #dropin-container .adyen-checkout__field--cardNumber .adyen-checkout__label .adyen-checkout__input-wrapper .adyen-checkout__input--focus,
body #dropin-container .adyen-checkout__field--cardNumber .adyen-checkout__label .adyen-checkout__input-wrapper .adyen-checkout__input:focus-within,
body #dropin-container .adyen-checkout__field:not(.adyen-checkout__field--cardNumber) .adyen-checkout__label .adyen-checkout__input-wrapper:focus-within {
    border-color: #6d6d75 !important;
    box-shadow: none !important;
    outline: none !important;
}

/* The design has no hint under the card number */
body #dropin-container .adyen-checkout__field--cardNumber .adyen-checkout__label .adyen-checkout__input-wrapper::after {
    display: none !important;
}

/* Helper text ------------------------------------------------------- */

body #dropin-container .adyen-checkout__field__exp-date::after,
body #dropin-container .adyen-checkout__field__cvc::after {
    margin-top: 6px !important;
    font-family: "LA28 Sans Medium", "LA28-Normal", sans-serif !important;
    font-size: 12px !important;
    line-height: 16px !important;
    /* The only face in this family is declared at 500; asking for 400 relies on
       the matching algorithm and risks synthetic weighting in some browsers. */
    font-weight: 500 !important;
    color: #62626b !important;
}

/* Pay button: sits below the bordered card ------------------------- */

body #dropin-container .adyen-checkout__payment-methods-list .adyen-checkout__payment-method--card .adyen-checkout__payment-method__details__content .adyen-checkout__button {
    width: 100% !important;
    min-height: 45px !important;
    margin: 24px 0 0 !important;
    padding: 8px 16px !important;
    border: 0 !important;
    border-radius: 4px !important;
    background-color: #009DE5 !important;
    color: #000000 !important;
    font-family: "LA28 Sans Medium", "LA28 Sans Regular", "LA28-Normal", sans-serif !important;
    font-size: 16px !important;
    line-height: 20px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
}

body #dropin-container .adyen-checkout__payment-methods-list .adyen-checkout__payment-method--card .adyen-checkout__payment-method__details__content .adyen-checkout__button:hover:not(:disabled),
body #dropin-container .adyen-checkout__payment-methods-list .adyen-checkout__payment-method--card .adyen-checkout__payment-method__details__content .adyen-checkout__button:focus:not(:disabled) {
    background-color: #009DE5 !important;
    color: #000000 !important;
}

body #dropin-container .adyen-checkout__payment-methods-list .adyen-checkout__payment-method--card .adyen-checkout__payment-method__details__content .adyen-checkout__button:disabled,
body #dropin-container .adyen-checkout__payment-methods-list .adyen-checkout__payment-method--card .adyen-checkout__payment-method__details__content .adyen-checkout__button.adyen-checkout__button--disabled {
    background-color: #009DE5 !important;
    color: #000000 !important;
    opacity: 1 !important;
}

body #dropin-container .adyen-checkout__payment-methods-list .adyen-checkout__payment-method--card .adyen-checkout__payment-method__details__content .adyen-checkout__button:disabled .adyen-checkout__button__content,
body #dropin-container .adyen-checkout__payment-methods-list .adyen-checkout__payment-method--card .adyen-checkout__payment-method__details__content .adyen-checkout__button:disabled .adyen-checkout__button__text,
body #dropin-container .adyen-checkout__payment-methods-list .adyen-checkout__payment-method--card .adyen-checkout__payment-method__details__content .adyen-checkout__button.adyen-checkout__button--disabled .adyen-checkout__button__content,
body #dropin-container .adyen-checkout__payment-methods-list .adyen-checkout__payment-method--card .adyen-checkout__payment-method__details__content .adyen-checkout__button.adyen-checkout__button--disabled .adyen-checkout__button__text {
    color: #000000 !important;
}

body #dropin-container .adyen-checkout__payment-methods-list .adyen-checkout__payment-method--card .adyen-checkout__payment-method__details__content .adyen-checkout__button .adyen-checkout__button__content,
body #dropin-container .adyen-checkout__payment-methods-list .adyen-checkout__payment-method--card .adyen-checkout__payment-method__details__content .adyen-checkout__button .adyen-checkout__button__text {
    color: #000000 !important;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: inherit !important;
}

body #dropin-container .adyen-checkout__payment-methods-list .adyen-checkout__payment-method--card .adyen-checkout__payment-method__details__content .adyen-checkout__button .adyen-checkout__button__content {
    gap: 8px !important;
    color: #000000 !important;
}

body #dropin-container .adyen-checkout__payment-methods-list .adyen-checkout__payment-method--card .adyen-checkout__payment-method__details__content .adyen-checkout__button .adyen-checkout__button__icon,
body #dropin-container .adyen-checkout__payment-methods-list .adyen-checkout__payment-method--card .adyen-checkout__payment-method__details__content .adyen-checkout__button .adyen-checkout__button__icon img {
    height: 16px !important;
    width: auto !important;
    filter: brightness(0) !important;
}

body #dropin-container .adyen-checkout__payment-methods-list .adyen-checkout__payment-method--card .adyen-checkout__payment-method__details__content .adyen-checkout__button .adyen-checkout__button__icon svg,
body #dropin-container .adyen-checkout__payment-methods-list .adyen-checkout__payment-method--card .adyen-checkout__payment-method__details__content .adyen-checkout__button .adyen-checkout__button__icon svg path {
    fill: #000000 !important;
    color: #000000 !important;
}

/* Error states ------------------------------------------------------ */

body #dropin-container .adyen-checkout__field .adyen-checkout__label .adyen-checkout__label__text.adyen-checkout__label__text--error {
    color: #FF5D5D !important;
}

body #dropin-container .adyen-checkout__field--cardNumber.adyen-checkout__field--error .adyen-checkout__label .adyen-checkout__input-wrapper .adyen-checkout__input,
body #dropin-container .adyen-checkout__field:not(.adyen-checkout__field--cardNumber).adyen-checkout__field--error .adyen-checkout__label .adyen-checkout__input-wrapper {
    border: 1px solid #FF5D5D !important;
}

body #dropin-container .adyen-checkout__field.adyen-checkout__field--error .adyen-checkout__label .adyen-checkout__input-wrapper::after,
body #dropin-container .adyen-checkout__field.adyen-checkout__field--error::after {
    color: #FF5D5D !important;
}

/* Visa logo: sits below the Pay button, inside the checkout box ------ */

body .payment-wrapper .payment-container .visa-pay-logo {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 20px !important;
}

body .payment-wrapper .payment-container .visa-pay-logo img {
    display: block;
    width: 111px;
    height: 28px;
}

body #dropin-container:has(.adyen-checkout__threeds2__challenge) ~ .visa-pay-logo,
body #dropin-container:has(.adyen-checkout__iframe--threeDSIframe) ~ .visa-pay-logo {
    display: none !important;
}

/* Language selector -------------------------------------------------- */

body .payment-wrapper .lang-btn {
    /* Not !important: attachLoaderToSubmitButton() hides this with an inline
       style.display during a 3DS challenge, and an important declaration here
       would override that. Specificity alone is enough to beat the base rule. */
    display: flex;
    justify-content: center !important;
    align-items: center !important;
    gap: 6px !important;
    width: auto !important;
    margin: 24px auto 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #111111 !important;
    font-family: "LA28-Normal", sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

/* Globe reads before the language code */
body .payment-wrapper .lang-btn i.material-icons {
    order: -1;
    font-size: 18px !important;
    color: #111111 !important;
}

body .payment-wrapper .lang-btn .language-selector #language-select {
    color: #111111 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    background: transparent !important;
    border: 0 !important;
}

body .payment-wrapper .lang-btn .language-selector #language-select option {
    color: #111111;
    background-color: #ffffff;
}

body .payment-wrapper .lang-btn .language-selector #language-select:focus {
    outline: 1px solid #000000;
}

/* Desktop ------------------------------------------------------------
   Same panel, but a little wider, with the back link restored and the
   expiry/security code pair back on a single row.
   ------------------------------------------------------------------ */

@media (min-width: 768px) {
    body .payment-wrapper {
        max-width: 552px !important;
    }

    body #dropin-container .adyen-checkout__payment-methods-list .adyen-checkout__payment-method__details .adyen-checkout__card-input .adyen-checkout__card__form .adyen-checkout__card__exp-cvc {
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 16px !important;
    }

    body #dropin-container .adyen-checkout__card__exp-cvc > * {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
    }
}

/* ------------------ New success and faliure styles -----------------------------*/

.payment-success-new,
.payment-fail-new {
    font-family: "LA28-Normal", sans-serif !important;
    background-color: #F5F5F5 !important;
}

.payment-success-new-top h1,
.payment-fail-new-top h1 {
    font-family: "LA28-Black", sans-serif !important;
    color: #000000 !important;
    text-transform: uppercase;
}

.payment-success-new-wrapper p,
.payment-fail-new-wrapper p {
    color: #666 !important;
}