/**
 * Copyright since 2007 PrestaShop SA and Contributors
 * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License version 3.0
 * that is bundled with this package in the file LICENSE.md.
 * It is also available through the world-wide-web at this URL:
 * https://opensource.org/licenses/AFL-3.0
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to license@prestashop.com so we can send you a copy immediately.
 *
 * @author SeQura Tech <prestashop@sequra.com>
 * @copyright Since 2013 SeQura WorldWide SA and Contributors
 * @license https://opensource.org/licenses/AFL-3.0 Academic Free License version 3.0
 */
/** OPC: the payment option logo inside a third-party one-page checkout **/
#onepagecheckoutps_step_three_container img[src*="sequra"] {
    width: 86px;
    border: 0px;
    background-color: inherit;
}

/** Checkout: the radio and the label on one line with the logo **/
.custom-radio.float-xs-left {
    float: none !important;
    display: inline-block;
}

body#checkout section.checkout-step .payment-options label {
    display: inline-block;
    margin-bottom: 0;
}

.sequra-image .payment-option__form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 0;
}

.sequra-image .payment-option__form-check > .payment-option__input,
.sequra-image .payment-option__form-check > .form-check-input {
    float: none;
    margin-left: 0;
    flex-shrink: 0;
}

/**
 * Checkout: the logo after the title. The classic theme prints the title first, the
 * hummingbird theme prints the logo first, so its label is laid out as a row and the
 * logo ordered behind the title's text.
 **/
.sequra-image .payment-option__label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.sequra-image .payment-option__label > img {
    order: 1;
}

.sequra-image.payment-option > label > img {
    margin-left: 0.5rem;
    vertical-align: middle;
}

/** Checkout: the "+ info" link of a payment option, coloured like the theme's links **/
.sequra-more-info {
    color: var(--bs-link-color, #24b9d7);
    cursor: pointer;
}

.sequra-more-info:hover {
    color: var(--bs-link-hover-color, #208094);
}

/** Mini teasers **/
small.sequra-educational-popup {
    width: 100%;
    display: inline-block;
    text-align: center;
}

/**
 * The 1.7.7 classic card locks its description box to 70px, so the mini-widget
 * appended under the price spills over the card. Later versions ship height: auto.
 **/
#products .product-miniature .product-description,
.featured-products .product-miniature .product-description,
.product-accessories .product-miniature .product-description,
.product-miniature .product-description {
    height: auto;
    min-height: 70px;
}

/** Loader **/
#lds-sequra-container {
    background: rgba(0, 0, 0, 0.6);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    text-align: left;
    font-weight: normal;
    z-index: 2147483647;
    overflow-y: auto;
}
#lds-sequra-container > div {
    margin: 15% auto;
    overflow: hidden;
}
.lds-sequra {
    display: block;
    position: relative;
    width: 80px;
    height: 80px;
    background-color: #fff;
    border-radius: 5px;
    margin: auto;
}
.lds-sequra div {
    display: inline-block;
    position: absolute;
    left: 8px;
    width: 16px;
    background: #009c5c;
    animation: lds-sequra 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}
.lds-sequra div:nth-child(1) {
    left: 8px;
    animation-delay: -0.24s;
}
.lds-sequra div:nth-child(2) {
    left: 32px;
    animation-delay: -0.12s;
}
.lds-sequra div:nth-child(3) {
    left: 56px;
    animation-delay: 0;
}
@keyframes lds-sequra {
    0% {
        top: 8px;
        height: 64px;
    }
    50%,
    100% {
        top: 24px;
        height: 32px;
    }
}

/** [CLS] Minimize jump due to height resize**/

.sequra-promotion-widget:not([data-type]),
.sequra-promotion-widget[data-type="text"] {
    min-height: 20px;
}
.sequra-promotion-widget[data-type="legacy"] {
    min-height: 101px;
}
.sequra-banner, .sequra-banner a, .sequra-banner img  {
    width: 100%;
}