.hero .container .intro {
    max-width: 980px;
    padding: 30px 0 20px;
    margin: 0 auto;
}

button,
input,
optgroup,
select,
textarea, html input[type="button"],
input[type="reset"],
input[type="submit"], button[disabled],
html input[disabled], button::-moz-focus-inner,
input::-moz-focus-inner, input[type="checkbox"],
input[type="radio"], input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button, input[type="search"], input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    border: none;
    background-image: none;
    background-color: transparent;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    outline: none;
}

.wtl-container * {
    box-sizing: border-box;
}

.wtl-container *,
.wtl-container ::after,
.wtl-container::before {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: var(--wtl-panel-gray-input-border);
}

.wtl-body {
    margin: 0;
}

.wtl-container,
.wtl-fullpage {
    font-family: var(--wtl-panel-font-family);
}

.wtl-container {
    max-width: 426px;
    width: 100%;
    margin: 0 auto;
}

.wtl-container.s-template {
    margin: 0 auto;
}

.wtl-label {
    display: block;
    color: #2E3234;
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: 500;
}

.wtl-form {
    background: var(--wtl-panel-color-bg-white);
    padding: 30px;
    margin-bottom: 1rem;
    border-radius: 10px;
    border-width: 1px;
    border-style: solid;
}

@media (max-width: 1024px) {
    .wtl-form {
        padding: 20px;
    }
}

.wtl-form h3 {
    margin: 30px 0 15px 0;
    font-size: 19px;
    font-weight: 700;
}

.wtl-form-group {
    margin-bottom: 15px;
    position: relative;
}

.wtl-form-group.fvat-check {
    margin: 30px 0;
}

.wtl-form-group .input-desc {
    line-height: 21px;
    display: inline-block;
}

.wtl-form-group input.wtl-input.blik_code {
    padding-left: 82px;
    height: 50px;
    -moz-appearance: textfield;
}

.wtl-form-group input.wtl-input.blik_code::-webkit-outer-spin-button,
.wtl-form-group input.wtl-input.blik_code::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.wtl-form-group input.wtl-input.blik_code::-webkit-input-placeholder { /* Edge */
    color: var(--wtl-panel-color-font-dark-50);
    opacity: 1;
}

.wtl-form-group input.wtl-input.blik_code:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: var(--wtl-panel-color-font-dark-50);
    opacity: 1;
}

.wtl-form-group input.wtl-input.blik_code::placeholder {
    color: var(--wtl-panel-color-font-dark-50);
    opacity: 1;
}

.wtl-form-group .wtl-form-logo-blik {
    position: absolute;
    left: 10px;
    bottom: 10px;
    height: 30px;
    width: auto;
    pointer-events: none;
}

.wtl-error-msg {
  display: none;
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 4px;
}

.is-invalid + .wtl-error-msg {
  display: block;
}


.wtl-form-group.s2-template {
    margin-top: 20px;
}


/*  =================================
    Inpost Popup
    ================================= */

.delivery-popup-overlay {
    align-items: center;
    background-color: var(--wtl-panel-color-bg-overlay);
    bottom: 0;
    display: none;
    justify-content: center;
    left: 0;
    padding: 50px 10px 10px 10px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 902;
}

.delivery-popup-overlay.show {
    display: flex;
}

.delivery-popup-content {
    position: relative;
    max-height: 700px;
    max-width: 950px;
    width: 100%;
    background-color: #ffffff;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    height: 100%;
}

.delivery-popup-content #wtl_inpost_geowidget {
    height: 100%;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
}

.delivery-popup-content #wtl_inpost_geowidget iframe {
    height: 100% !important;
    width: 100% !important;
}

.delivery-popup-close {
    position: absolute;
    top: -40px;
    right: 0px;
    width: 30px;
    height: 30px;
    background: white;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
    z-index: 10000;
}

.delivery-popup-close:hover {
    background-color: #000000;
    color: #ffffff;
}


/*  =================================
    Modal Blik
    ================================= */

.modal-blik-wrap {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background-color: var(--wtl-panel-color-bg-overlay);
    z-index: 1;
}

.modal-blik {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 630px;
    max-height: 100%;
    width: 100%;
    background-color: var(--wtl-panel-color-bg-white);
    border-radius: 20px;
    margin: 0 auto;
    padding: 30px;
    overflow: auto;
    color: var(--wtl-panel-color-font-dark-100);
}

.modal-blik .modal-blik-header {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 35px;
    line-height: 42px;
    font-weight: 700;
    text-align: center;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--wtl-panel-color-bg-border);
}

.modal-blik .modal-blik-header span {
    font-size: 17px;
    line-height: 24px;
    font-weight: 500;
}

.modal-blik .modal-blik-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
}

.modal-blik .modal-blik-content p {
    font-size: 15px;
    line-height: 24px;
    font-weight: 500;
}

.modal-blik .modal-blik-content-banklist {
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 450px;
}

.modal-blik .modal-blik-content-banklist img {
    max-width: 130px;
    max-height: 28px;
}

.modal-blik button {
    color: var(--wtl-panel-color-font-white);
    background-color: var(--wtl-panel-color-bg-dark);
    border-radius: 20px;
    flex: none;
    justify-content: center;
    align-items: center;
    padding: 10px 15px;
    font-size: 15px;
    line-height: 20px;
    font-weight: 500;
    text-decoration: none;
    transition: all .2s;
    display: flex;
    cursor: pointer;
    grid-column-gap: 10px;
    flex-direction: row;
    border: none;
}

.modal-blik button:hover {
    background-color: var(--wtl-panel-color-bg-dark-hover);
}

.modal-blik button.light {
    color: var(--wtl-panel-color-font-dark-100);
    background: var(--wtl-panel-color-dark-light);
}

.modal-blik button.light:hover {
    background: var(--wtl-panel-color-dark-light-hover);
}

/*  End – Modal Blik */


/*  =================================
    WTL Payments Choices & Delivery Choices
    ================================= */

.form-group.delivery-checks .wtl-delivery-wrap label {
    border-radius: 0px;
    border: 1px solid #191919;
    background: #ffffff;
}

.wtl-delivery-wrap,
.wtl-payments-wrap {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.wtl-delivery-wrap > label,
.wtl-payments-wrap label {
    background-color: var(--wtl-panel-gray-input-bg);
    border-radius: 10px;
    border: 1px solid var(--wtl-panel-gray-input-border);
    padding: 10px 10px 10px 40px;
    position: relative;
    min-height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
    cursor: pointer;
}

.wtl-delivery-wrap.s1 label,
.wtl-payments-wrap.s1 label {
    background-color: var(---wtl-panel-color-bg-white);
    border-radius: 0px;
    border: 1px solid #191919;
}

.wtl-delivery-wrap label input[type=radio],
.wtl-payments-wrap label input {
    display: none;
}

.wtl-delivery-wrap label .checkmark,
.wtl-payments-wrap label .checkmark {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-shadow: inset 0px 0px 1px #000000;
    background: #ffffff;
    box-sizing: border-box;
}

.wtl-delivery-wrap label input:checked ~ .checkmark,
.wtl-payments-wrap label input:checked ~ .checkmark {
    background: url(../../next/public/images/circle-check.svg);
}

.wtl-delivery-wrap label p,
.wtl-payments-wrap label p {
    margin: 0px;
    font-size: 14px;
    line-height: 20px;
    color: var(--wtl-panel-color-font-dark-100);
}

.wtl-payments-wrap label .logo-przelewy24 {
    max-width: 62px;
}

.wtl-payments-wrap label .logo-paybylink {
    max-width: 70px;
}

.wtl-payments-wrap label .logo-dotpay {
    max-width: 60px;
}

.wtl-payments-wrap label .logo-hotpay {
    max-width: 80px;
}

.wtl-payments-wrap label .logo-bluemedia {
    max-width: 32px;
}

.wtl-payments-wrap label .logo-tpay {
    max-width: 46px;
}

.wtl-payments-wrap label .logo-paynow {
    max-width: 70px;
}

.wtl-payments-wrap label .logo-payu-new {
    max-width: 64px;
}

.wtl-payments-wrap label .logo-payu {
    max-width: 45px;
}

.wtl-payments-wrap label .logo-tubapay {
    max-width: 63px;
}

.wtl-payments-wrap label .logo-comfino {
    max-width: 80px;
}

.wtl-payments-wrap label .logo-leaselink {
    max-width: 88px;
}

.wtl-payments-wrap label .logo-paypal {
    max-width: 72px;
}

.wtl-payments-wrap label .logo-stripe {
    max-width: 46px;
}

.wtl-payments-wrap label .logo-blik {
    max-width: 43px;
}

.wtl-payments-wrap label .logo-blik_recurring {
    max-width: 43px;
}

.wtl-payments-wrap label input:checked ~ .wtl-payment-content {
    display: flex;
}

.wtl-payments-wrap label .wtl-payment-content {
    display: none;
    flex-direction: column;
    gap: 15px;
    padding: 10px 0 0 0;
    margin: 0;
    border-top: 1px solid var(--wtl-panel-color-bg-border);
}

.wtl-payments-wrap label .wtl-payment-content p {
    font-size: 13px;
    line-height: 20px;
}

.wtl-payments-wrap label .wtl-payment-content .wtl-payment-blik-banklist {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

.wtl-payments-wrap label .wtl-payment-content .wtl-payment-blik-banklist img {
    max-width: 130px;
    max-height: 28px;
}

.wtl-delivery-wrap label input:checked ~ button {
    display: flex;
}

.wtl-delivery-wrap label .delivery-price {
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
}

.wtl-delivery-wrap label button {
    padding: 5px 10px;
    border-radius: 5px;
    line-height: 20px;
    color: var(--wtl-panel-color-font-dark-100);
    background: var(--wtl-panel-color-dark-light);
    transition: all .2s ease;
    cursor: pointer;
    display: none;
    text-align: center;
    justify-content: center;
}

.wtl-delivery-wrap label button:hover {
    background: var(--wtl-panel-color-dark-light-hover);
}

.wtl-delivery-wrap img {
    object-fit: contain;
    object-position: left;
    max-height: 26px;
    max-width: 70px;
}

/*  End – WTL Payments Choices & Delivery Choices */


.wtl-form-group span.input-desc {
    font-size: 14px;
    color: var(--wtl-panel-color-font-dark-75);
}

.wtl-form-group--select {
    position: relative;
}

select.wtl-input {
    cursor: pointer;
}

.wtl-form-group--coupon .wtl-form-group-inputs {
    display: flex;
    gap: 5px;
}

.wtl-form-group-inputs .wtl-input {
    flex: 3;
    min-width: 0;
}

.wtl-form-group-inputs .wtl-activate {
    flex: 1;
}

.wtl-form-group--error .wtl-input {
    background: #ffe2e2;
    border-color: #f03f00;
    color: red;
}

.wtl-form-group--success .wtl-input {
    background: #f5ffef;
    border-color: #61bf7e;
}

.wtl-form-group--cta {
    text-align: center;
    margin: 30px 0 20px;
}

.wtl-watching-now {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 13px;
    color: var(--wtl-panel-color-font-dark-100);
    margin-top: 15px;
    line-height: 20px;
}

.wtl-watching-now svg {
    margin-right: 5px;
    width: 16px;
    height: 16px;
    fill: #000000;
}

.wtl-error {
    color: #e53e3e;
    font-size: 12px;
    margin-top: 3px;
}

.wtl-input {
    background-color: var(--wtl-panel-gray-input-bg);
    border-radius: 6px;
    border: 1px solid var(--wtl-panel-gray-input-border);
    box-sizing: border-box;
    color: var(--wtl-panel-color-font-dark-100);
    cursor: text;
    display: inline-block;
    font-family: var(--wtl-panel-font-family);
    font-size: 15px;
    font-weight: 400;
    height: 40px;
    line-height: 20px;
    margin: 0;
    padding: 10px 12px 10px 12px;
    width: 100%;
    max-width: 100%;
}
.wtl-input.is-invalid {
  background: #ffe2e2;
  border-color: #f03f00;
}

.wtl-input:focus-within,
.wtl-input:focus-visible,
.wtl-input:focus {
    border: 1px solid var(--wtl-panel-gray-input-border-hover);
}

select.wtl-input {
    cursor: pointer;
}

textarea.wtl-input {
    height: auto;
}

.wtl-checkbox-label {
    border-bottom-color: rgb(226, 232, 240);
    border-bottom-style: solid;
    border-bottom-width: 0px;
    border-left-color: rgb(226, 232, 240);
    border-left-style: solid;
    border-left-width: 0px;
    border-right-color: rgb(226, 232, 240);
    border-right-style: solid;
    border-right-width: 0px;
    border-top-color: rgb(226, 232, 240);
    border-top-style: solid;
    border-top-width: 0px;
    box-sizing: border-box;
    color: rgb(160, 174, 192);
    cursor: default;
    display: block;
    font-family: var(--wtl-panel-font-family);
    font-weight: 700;
    line-height: 24px;
    text-size-adjust: 100%;
    width: 362px;
}

.wtl-checkbox-label-text {
    border-bottom-color: rgb(226, 232, 240);
    border-bottom-style: solid;
    border-bottom-width: 0px;
    border-left-color: rgb(226, 232, 240);
    border-left-style: solid;
    border-left-width: 0px;
    border-right-color: rgb(226, 232, 240);
    border-right-style: solid;
    border-right-width: 0px;
    border-top-color: rgb(226, 232, 240);
    border-top-style: solid;
    border-top-width: 0px;
    box-sizing: border-box;
    color: rgb(113, 128, 150);
    cursor: default;
    display: inline;
    font-family: var(--wtl-panel-font-family);
    font-size: 12px;
    font-weight: 700;
    height: auto;
    line-height: 24px;
    text-size-adjust: 100%;
    width: auto;
}

.wtl-cta {
    background-color: #28C162;
    border-radius: 10px;
    color: rgb(255, 255, 255);
    cursor: pointer;
    font-family: var(--wtl-panel-font-family);
    font-size: 17px;
    font-weight: 500;
    height: 50px;
    line-height: 20px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    overflow-x: visible;
    overflow-y: visible;
    padding: 10px 30px 10px 30px;
    text-align: center;
    text-size-adjust: 100%;
    text-transform: none;
    transition: all .2s ease;
    width: 100%;
}

.wtl-cta:hover {
    opacity: .8;
}

.wtl-activate {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    background: #313131;
    transition: all .2s ease;
    font-size: 15px;
    line-height: 20px;
    padding: 10px 15px;
    border-radius: 6px;
    cursor: pointer;
}

.wtl-activate:hover {
    background: #111111;
}

.wtl-nip-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: #ffffff;
    background: #313131;
    transition: all .2s ease;
    font-size: 15px;
    line-height: 20px;
    padding: 10px 15px;
    border-radius: 6px;
    cursor: pointer;
}

.wtl-nip-btn:hover {
    background: #111111;
}

@media (max-width: 640px) {
    .wtl-form-group-inputs.company-nip {
        flex-direction: column;
    }
}

.wtl-form-title {
    font-size: 18px;
    color: #455568;
    font-weight: 900;
    margin-bottom: 15px;
}

.wtl-form-group--safety {
    display: flex;
    margin: 20px 0 0 0;
    flex-direction: column;
}

.wtl-safety {
    color: var(--wtl-panel-color-font-dark-75);
    font-size: 12px;
    line-height: 16px;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wtl-safety svg {
    margin-right: 5px;
    width: 16px;
    height: 16px;
    fill: var(--wtl-panel-color-font-dark-75);
}

.wtl-powered {
    text-align: center;
    margin-top: -30px;
    position: relative;
}

.wtl-powered span {
    background: #fff;
    padding: 5px 10px;
    border: 1px solid var(--wtl-panel-gray-input-border);
    border-radius: 6px;
    display: block;
    margin: 0 auto;
    width: 200px;
    font-size: 11px;
    color: #455568;
    line-height: 14px;
}

.wtl-powered span a {
    color: #455568;
}

.wtl-copy {
    font-size: 12px;
    color: #455568;
    text-align: center;
    margin-top: 50px;
}

/* Customize the label (the container) */
.wtl-checkbox-container {
    display: block;
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    font-size: 14px;
    line-height: 20px;
    color: #2e3234;
    font-weight: 400;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.wtl-checkbox-container a {
    color: rgb(113, 128, 150);
}

.wtl-checkbox-container a:hover {
    color: rgb(113, 128, 150);
    text-decoration: none;
}

/* Edge */
.wtl-container ::-webkit-input-placeholder {
    color: var(--wtl-panel-color-font-dark-50);
    opacity: 1;
}

/* Internet Explorer 10-11 */
.wtl-container :-ms-input-placeholder {
    color: var(--wtl-panel-color-font-dark-50);
    opacity: 1;
}

.wtl-container ::placeholder {
    color: var(--wtl-panel-color-font-dark-50);
    opacity: 1;
}

/* Hide the browser's default checkbox */
.wtl-checkbox-container input {
    cursor: pointer;
    position: absolute;
    left: 0;
    top: 5px;
    opacity: 0;
}

/* Create a custom checkbox */
.wtl-checkbox-container .checkmark {
    position: absolute;
    top: 0px;
    left: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-shadow: inset 0px 0px 1px #000000;
    background: #ffffff;
    box-sizing: border-box;
    margin: 0;
    border: none;
}

/* When the checkbox is checked, add a blue background */
.wtl-checkbox-container input:checked ~ .checkmark {
    background: url(../../next/public/images/circle-check.svg);
}

.wtl-fullpage {
    width: 100%;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.wtl-page-column {
    display: flex;
    flex: 1;
    justify-content: center;
    padding: 20px 30px 50px 30px;
}

.wtl-page-column--first {
    color: #182d3b;
    min-height: 0;
    background: #f3bb1a;
    text-align: center;
    padding-bottom: 50px;
}

.wtl-page-column--first pre {
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

.wtl-page-column--first .wtl-page-content {
    position: static;
    max-width: 100%;
    width: 100%;
}

/* Warianty cenowe: karty to jedyny width:100% blok w tej kolumnie (reszta — opis,
   cena, licznik, content2 — jest wyśrodkowana i wąska z natury). Bez capa na
   szerokich ekranach kolumna rośnie do 50% viewportu (4K ≈ 1800px), więc karty
   rozjeżdżały się na całą szerokość. Ograniczamy i centrujemy jak formularz
   (.wtl-container = 426px) i s3 (.left-inner = 460px); zapas do 600px trzyma długie
   etykiety wariantu + cenę w jednej linii. Scope na --first celuje wyłącznie w s2
   (s1/s3/embed nie używają .wtl-page-column). */
.wtl-page-column--first .wtl-variant-picker {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.wtl-page-column--first .wtl-page-content img {
    max-width: 100%;
}

@media (max-width: 640px) {
    .wtl-page-column {
        padding: 20px 15px 50px 15px;
    }

    .wtl-page-column--first .wtl-page-content {
        padding: 0 15px;
    }
}

.wtl-page-column--first .wtl-page-header {
    padding-bottom: 20px;
    margin-bottom: 20px;
}

.wtl-page-header {
    font-weight: bold;
    text-align: center;
    font-size: 24px;
    line-height: 28px;
    color: #182d3b;
}

.wtl-product-photo {
    max-width: 428px;
    margin: 25px 0;
    max-width: 100%;
}

.wtl-product-photo img {
    max-width: 100%;
}

.wtl-old-price {
}

.wtl-new-price-label {
    font-size: 21px;
    font-weight: 500;
}

.wtl-new-price {
    font-size: 48px;
    font-weight: 900;
    margin-bottom: 10px;
    line-height: 48px;
}

.wtl-page-content {
    font-family: var(--wtl-panel-font-family);
    font-size: 17px;
    line-height: 28px;
}

.wtl-page-content p {
    text-wrap: wrap;
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
    max-width: 100%;
}

.wtl-mobile-cta {
    margin: 0 auto !important;
    display: table;
    padding-bottom: 10px auto 10px !important;
}

.wtl-mobile-cta .wtl-cta {
    width: 100%;
    margin: 10px auto 25px auto;
}

@media (min-width: 1024px) {
    .wtl-fullpage {
        flex-direction: row;
    }

    .wtl-page-column {
        padding: 20px 50px 50px 50px;
    }

    .wtl-page-column--first {
        min-height: 100vh;
        max-width: 50%;
    }

    .wtl-page-header {
        font-size: 32px;
        line-height: 37px;
    }

    .wtl-page-column--first .wtl-page-header {
        padding-bottom: 5px;
        margin-bottom: 5px;
    }

    .wtl-new-price {
        font-size: 40px;
        font-weight: 700;
        margin-bottom: 5px;
    }

    .wtl-mobile-cta {
        display: none !important;
    }
}

/* WTL SUMMARY */
.wtl-form-group.wtl-form-group--summary {
    margin-top: 25px;
}

.wtl-summary-header {
    text-transform: uppercase;
    font-size: 12px;
    color: #455568;
    margin-bottom: 5px;
}

.wtl-summary-product {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #455568;
    margin: 7px 0;
}

.wtl-summary-total-wrapper {
    font-size: 12px;
    color: #455568;
    margin: 15px 0 7px;
    text-align: right;
    padding-top: 10px;
    border-top: 1px solid #D8DFE6;
}

.wtl-summary-total {
    display: inline;
    font-weight: bold;
}


/*  =================================
    Timer - Webinar - W formularzu
    ================================= */

#webinar_form .timer {
    flex-direction: row;
}

.timer .unit {
    text-align: center;
    width: 50px;
    position: relative;
}

.timer .unit:after {
    content: ':';
    position: absolute;
    right: -3px;
    top: 0;
    font-size: 28px;
    font-weight: 900;
}

.timer .unit:last-child:after {
    content: '';
}

.timer .value {
    font-size: 28px;
    font-weight: 900;
    position: relative;
}

.timer .label {
    font-size: 9px;
    margin-top: -6px;
    margin-bottom: 3px;
}


/*  =================================
    Timer - s2
    ================================= */

.timer {
    padding: 3px 5px;
    display: flex;
    justify-content: center;
    margin: 15px auto;
    border-radius: 5px;
    flex-direction: column;
}

.wtl-countdown {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 30px;
    margin: 30px 0;
}

.wtl-countdown .wtl-countdown-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.wtl-countdown-value {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 90px;
    height: 90px;
    border-radius: 10px;
    font-size: 42px;
    line-height: 42px;
    font-weight: 400;
    color: #fff;
    background: #916f0f;
}

.wtl-countdown-heading {
    text-transform: uppercase;
    display: block;
    font-size: 17px;
    line-height: 20px;
    font-weight: 700;
    color: #916f0f;
}

@media (max-width: 640px) {
    .wtl-countdown {
        gap: 20px;
    }

    .wtl-countdown-heading {
        font-size: 14px;
    }

    .wtl-countdown-value {
        width: 60px;
        height: 60px;
        font-size: 28px;
        line-height: 28px;
    }
}

/*  =================================
    Timer - s1
    ================================= */

.countdown {
    text-transform: uppercase;
}

.countdown > div {
    display: inline-block;
}

.countdown > div > span {
    display: block;
    text-align: center;
}

.countdown-container {
    margin: 0 3px;
}

.countdown-container .countdown-heading {
    font-size: 12px;
    margin: 3px;
}

.countdown-container .countdown-value {
    font-size: 50px;
    background: #000;
    padding: 0px 10px 0px 10px;
    color: #fff;
    border-radius: 5px;
}


/*  =================================
    Alert
    ================================= */

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 3px;
}

.alert-danger {
    background-color: #FBE9E7;
    border-color: #FF5722;
    color: #D84315;
}

.alert-danger hr {
    border-top-color: #ff4408;
}

.alert-danger .alert-link {
    color: #aa3510;
}

.alert-success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #205f2e;
}

.embed-container {
    position: relative;
    padding-bottom: 46.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    margin: 0 auto;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/*  =================================
    PayU
    ================================= */

.container_payu * {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
}

.container_payu {
    text-align: center;
    margin: 20px auto 20px;
    display: block;
    border-radius: 5px;
    box-sizing: border-box;
    max-width: 420px;
}

.card-container-payu {
    width: 100%;
    margin: 0 auto;
    border-radius: 10px;
    padding: 17px 20px 20px 20px;
    background: #F4F4F4;
    border: 1px solid #E9EAEA;
    text-align: left;
    box-sizing: border-box;
}

.card-container-payu .aside {
    padding-bottom: 7px;
    color: #2E3234;
    font-size: 15px;
}

.card-container-payu .aside span {
    color: #969899;
    font-size: 12px;
}

.payu-card-form {
    background-color: #ffffff;
    border: 1px solid #E9EAEA;
    padding: 14px 15px 15px 15px;
    border-radius: 10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-height: 50px;
    max-height: 50px;
}

.card-details-payu {
    clear: both;
    overflow: auto;
    margin-top: 15px;
}

.card-details-payu .expiration-payu {
    width: 50%;
    float: left;
    padding-right: 5px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.card-details-payu .cvv-payu {
    width: 50%;
    float: left;
    padding-left: 5px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.button-payu {
    border: none;
    background: #438F29;
    padding: 8px 15px;
    margin: 10px auto;
    cursor: pointer;
}

.response-success {
    color: #438F29;
}

.response-error {
    color: #990000;
}


/*  =================================
    WTL Limited – Bump Offer
    ================================= */

.wtl-form-group--limited {
    background: #E9F9EF;
    padding: 14px;
    border-radius: 10px;
    position: relative;
    margin: 30px 0 30px 0px;
    width: 100%;
    border: 1px dashed var(--wtl-color-green);
}

.wtl-form-group--limited .wtl-boxes {
    display: flex;
}

.wtl-form-group--limited .wtl-boxes .wtl-box:first-child {
    width: 100%;
}

.wtl-form-group--limited .wtl-checkbox-container {
    margin-bottom: 0;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #B9ECCB;
    font-size: 15px;
    font-weight: 400;
    padding: 10px 20px 10px 40px;
    line-height: 20px;
}

.wtl-form-group--limited .wtl-checkbox-container .checkmark {
    position: absolute;
    top: 9px;
    left: 9px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    box-shadow: inset 0px 0px 1px #000000;
    background: #ffffff;
    box-sizing: border-box;
    margin: 0;
    border: none;
}

.wtl-form-group--limited .wtl-checkbox-container input {
    display: none;
}

.wtl-form-group--limited .wtl-checkbox-container input:checked ~ .checkmark {
    background: url(../../next/public/images/circle-check.svg);
}

.wtl-limited {
    margin: -15px 0px 15px -15px;
    font-size: 19px;
    font-weight: 600;
    line-height: 24px;
    text-transform: none;
    position: relative;
    left: 0;
    width: calc(100% + 30px);
    border-radius: 10px 10px 0 0;
    padding: 10px 10px 10px 15px;
}

.wtl-limited-title {
    color: #2E3234;
    font-size: 17px;
    font-weight: 500;
}

.wtl-limited-price {
    margin-bottom: 15px;
    font-weight: 500;
    font-size: 17px;
    color: #28C162;
}

.wtl-limited-price.hi-price {
    color: var(--wtl-panel-color-font-dark-50);
    font-size: 13px;
    margin-bottom: 0px;
    font-weight: normal;
}

.wtl-limited-desc {
    color: #2E3234;
    font-size: 14px;
    margin: 10px 0 15px 0;
    text-transform: none;
    font-weight: normal;
    line-height: 21px;
}

.wtl-limited-preview {
    margin: 5px 0px 0 0;
    max-width: 70px;
    max-height: 120px;
}

/*  =================================
    Bumps?
    ================================= */

.payment-additionl-information {
    width: 100%;
    padding: 10px 20px 5px 20px;
    background: #F4F4F4;
}

.payment-additionl-information p {
    position: relative;
    padding-left: 30px;
    line-height: 21px;
    margin: 5px 0;
    font-size: 15px;
}

.payment-additionl-information p.pai-trial {
    font-size: 12px;
    padding: 5px 10px;
    background: #ffffff;
    border-radius: 5px;
    margin-left: -10px;
    width: calc(100% + 20px);
    margin-top: 10px;
}

.payment-additionl-information i {
    width: 17px;
}

.payment-additionl-information i:before {
    width: 15px;
    height: 15px;
    top: 1px;
    left: 0;
    position: absolute;
    color: blue;
}

.payment-additionl-information i.pai-calendar:before {
    content: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%232E3234' viewBox='0 0 448 512'%3E%3C!--! --%3E%3Cpath d='M112 0C120.8 0 128 7.164 128 16V64H320V16C320 7.164 327.2 0 336 0C344.8 0 352 7.164 352 16V64H384C419.3 64 448 92.65 448 128V448C448 483.3 419.3 512 384 512H64C28.65 512 0 483.3 0 448V128C0 92.65 28.65 64 64 64H96V16C96 7.164 103.2 0 112 0zM416 192H32V448C32 465.7 46.33 480 64 480H384C401.7 480 416 465.7 416 448V192zM384 96H64C46.33 96 32 110.3 32 128V160H416V128C416 110.3 401.7 96 384 96z'/%3E%3C/svg%3E");
}

.payment-additionl-information i.pai-gift:before {
    content: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%232E3234' viewBox='0 0 512 512'%3E%3C!--!  --%3E%3Cpath d='M256 101L294.8 38.97C309.9 14.73 336.5 0 365.1 0H368C412.2 0 448 35.82 448 80C448 98.01 442 114.6 432 128H464C490.5 128 512 149.5 512 176V240C512 260.9 498.6 278.7 480 285.3V448C480 483.3 451.3 512 416 512H96C60.65 512 32 483.3 32 448V285.3C13.36 278.7 0 260.9 0 240V176C0 149.5 21.49 128 48 128H79.99C69.95 114.6 64 98.01 64 80C64 35.82 99.82 0 144 0H146.9C175.5 0 202.1 14.73 217.2 38.97L256 101zM365.1 32C347.5 32 331.2 41.04 321.9 55.93L276.9 128H368C394.5 128 416 106.5 416 80C416 53.49 394.5 32 368 32H365.1zM235.1 128L190.1 55.93C180.8 41.04 164.5 32 146.9 32H144C117.5 32 96 53.49 96 80C96 106.5 117.5 128 144 128H235.1zM48 160C39.16 160 32 167.2 32 176V240C32 248.8 39.16 256 48 256H240V160H48zM272 256H464C472.8 256 480 248.8 480 240V176C480 167.2 472.8 160 464 160H272V256zM240 288H64V448C64 465.7 78.33 480 96 480H240V288zM272 480H416C433.7 480 448 465.7 448 448V288H272V480z'/%3E%3C/svg%3E");
}

.payment-additionl-information i.pai-circle-dollar-to-slot:before {
    content: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%232E3234' viewBox='0 0 512 512'%3E%3C!--! --%3E%3Cpath d='M272 143C285.5 144 298.6 147.7 311.6 151.3C313.2 151.7 314.7 152.1 316.2 152.6C324.8 154.9 329.8 163.8 327.4 172.3C325.1 180.8 316.2 185.8 307.7 183.4C305.3 182.8 302.9 182.1 300.5 181.4C292.1 179.2 285.4 176.1 277.7 175.8C258.5 173 241 175.5 228.4 180.9C215.5 186.5 209.8 194 208.6 200.4C206.8 210.1 210.7 216.9 218.8 222.1C229.5 228.9 245.3 233.4 264.7 238.9L264.9 238.1C282.7 244 303.8 250 319.3 260.6C338.3 273.7 347 294.5 342.9 317.2C338.9 338.8 323.9 353.2 305 360.8C295.1 364.8 283.9 367.1 272 367.8L272 392C272 400.8 264.8 408 256 408C247.2 408 240 400.8 240 392L240 366.1C231.9 364.9 218.2 360.9 207.6 357.7C200.7 355.6 193.8 353.4 186.1 351.2C178.6 348.4 174 339.4 176.8 330.1C179.6 322.6 188.6 318 197 320.8C203.6 322.1 210.3 325.1 216.9 327.1C228.2 330.5 239.6 333.7 245 334.5C264.8 337.5 281.5 335.8 293.1 331.2C304.2 326.7 309.8 319.9 311.4 311.4C313.3 300.9 309.9 293 301.2 287C289.2 278.8 274.4 274.8 260.2 270.9C257.9 270.2 255.6 269.6 253.3 268.1C236.2 264.1 216.3 258.5 201.6 249C193.5 243.9 185.9 236.9 181.1 227.4C176.2 217.6 174.9 206.6 177.1 194.6C180.9 173.9 197.2 159.5 215.7 151.5C223.2 148.3 231.3 145.9 239.1 144.5V120C239.1 111.2 247.2 104 255.1 104C264.8 104 272 111.2 272 120V143zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 32C132.3 32 32 132.3 32 256C32 379.7 132.3 480 256 480C379.7 480 480 379.7 480 256C480 132.3 379.7 32 256 32z'/%3E%3C/svg%3E");
}

.payment-additionl-information i.pai-circle-xmark:before {
    content: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%232E3234' viewBox='0 0 512 512'%3E%3C!--!  --%3E%3Cpath d='M180.7 180.7C186.9 174.4 197.1 174.4 203.3 180.7L256 233.4L308.7 180.7C314.9 174.4 325.1 174.4 331.3 180.7C337.6 186.9 337.6 197.1 331.3 203.3L278.6 256L331.3 308.7C337.6 314.9 337.6 325.1 331.3 331.3C325.1 337.6 314.9 337.6 308.7 331.3L256 278.6L203.3 331.3C197.1 337.6 186.9 337.6 180.7 331.3C174.4 325.1 174.4 314.9 180.7 308.7L233.4 256L180.7 203.3C174.4 197.1 174.4 186.9 180.7 180.7zM512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 32C132.3 32 32 132.3 32 256C32 379.7 132.3 480 256 480C379.7 480 480 379.7 480 256C480 132.3 379.7 32 256 32z'/%3E%3C/svg%3E");
}

/* ================== SZYBKA SPRZEDAŻ: GALERIA ZDJĘĆ (slider przy opisie) ================== */
/* markup: templates/_ss_partials/gallery.tpl.php (s1/s2); szablon nr 3 ma własny bundle */
.wtl-gallery { margin: 16px 0 24px; }
.wtl-gallery-frame {
    position: relative; border: 1px solid #e2e4e9; border-radius: 12px;
    overflow: hidden; background: #eef0f3;
}
.wtl-gallery-track { display: flex; transition: transform .35s ease; }
.wtl-gallery-slide { flex: 0 0 100%; min-width: 0; }
.wtl-gallery-slide img {
    display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover;
    cursor: zoom-in; margin: 0;
}
.wtl-gallery-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 28px; height: 28px; border-radius: 9999px; padding: 0;
    background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(6px);
    border: 1px solid #e2e4e9; color: #3d414d;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; opacity: 0; transition: opacity .2s;
}
.wtl-gallery-frame:hover .wtl-gallery-nav, .wtl-gallery-nav:focus-visible { opacity: 1; }
.wtl-gallery-nav.prev { left: 8px; }
.wtl-gallery-nav.next { right: 8px; }
.wtl-gallery-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.wtl-gallery-dots button {
    height: 6px; width: 6px; padding: 0; border: 0; border-radius: 9999px;
    background: #c3c7d1; cursor: pointer; transition: all .2s;
}
.wtl-gallery-dots button.active { width: 16px; background: #3d414d; }
@media (hover: none) {
    .wtl-gallery-nav { opacity: 1; }
}

/* lightbox (podgląd zdjęcia po kliknięciu) */
.wtl-lightbox {
    position: fixed; inset: 0; z-index: 10050;
    background: rgba(10, 12, 16, 0.88);
    display: flex; align-items: center; justify-content: center;
}
.wtl-lightbox-img {
    max-width: 92vw; max-height: 92vh; object-fit: contain;
    border-radius: 8px; box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}
.wtl-lightbox-close {
    position: absolute; top: 14px; right: 18px;
    width: 40px; height: 40px; border: 0; border-radius: 9999px;
    background: rgba(255, 255, 255, 0.12); color: #fff;
    font-size: 26px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .2s;
}
.wtl-lightbox-close:hover { background: rgba(255, 255, 255, 0.24); }
.wtl-lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border: 0; border-radius: 9999px;
    background: rgba(255, 255, 255, 0.12); color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .2s;
}
.wtl-lightbox-nav:hover { background: rgba(255, 255, 255, 0.24); }
.wtl-lightbox-nav.prev { left: 16px; }
.wtl-lightbox-nav.next { right: 16px; }

/* ================== SZYBKA SPRZEDAŻ: SEKCJA OPINII (slider kart) ================== */
/* markup: templates/_ss_partials/opinions.tpl.php (s1/s2/embed) */
.wtl-reviews { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid #e2e4e9; text-align: left; }
.wtl-reviews-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.wtl-reviews-header h3 {
    font-size: 16px; font-weight: 600; color: inherit;
    display: flex; align-items: center; gap: 8px; margin: 0;
}
.wtl-reviews-nav { display: flex; gap: 4px; }
.wtl-rnav-btn {
    height: 24px; width: 24px; border-radius: 9999px; padding: 0;
    border: 1px solid #d9dce2; background: rgba(255, 255, 255, 0.85);
    display: flex; align-items: center; justify-content: center;
    color: #3d414d; cursor: pointer; transition: background .2s;
}
.wtl-rnav-btn:hover { background: #eef0f3; }
.wtl-reviews-frame { overflow: hidden; }
.wtl-reviews-track { display: flex; transition: transform .35s ease; }
.wtl-review-slide { flex: 0 0 85%; min-width: 0; padding-right: 12px; box-sizing: border-box; }
.wtl-review-card {
    border: 1px solid #e9ebef; border-radius: 12px; padding: 12px;
    background: #fff; height: 100%; box-sizing: border-box;
}
.wtl-review-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.wtl-review-avatar {
    width: 28px; height: 28px; border-radius: 9999px; flex-shrink: 0;
    background: linear-gradient(135deg, #2c2f38, #4a4e5c);
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700;
}
.wtl-review-meta { flex: 1; min-width: 0; }
.wtl-review-name { font-size: 13px; font-weight: 600; color: #25282f; margin: 0; }
.wtl-review-role { font-size: 12px; color: #7a7f8c; margin: 0; }
.wtl-review-stars { display: flex; gap: 2px; }
.wtl-review-stars svg { color: hsl(45, 90%, 55%); fill: hsl(45, 90%, 55%); }
.wtl-review-text { font-size: 13px; line-height: 1.55; color: #5e626e; margin: 0; overflow-wrap: anywhere; }
.wtl-reviews-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.wtl-reviews-dots button {
    height: 6px; width: 6px; padding: 0; border: 0; border-radius: 9999px;
    background: color-mix(in srgb, currentColor 35%, transparent);
    cursor: pointer; transition: all .2s;
}
.wtl-reviews-dots button.active { width: 16px; background: currentColor; }
/* embed: plakietka "Napędzane przez" celowo nachodzi na formularz (margin-top:-30px),
   ale po sekcji opinii ma nie zasłaniać kart (~ zamiast +, bo partial kończy
   się elementem <script> stojącym między sekcją a plakietką) */
.wtl-reviews ~ .wtl-powered { margin-top: 10px; }
/* s1: sekcja opinii żyje w pełnoszerokim .container — cap na szerokość kolumny
   treści, żeby karty nie rozciągały się na cały ekran (s2/s3 ogranicza kolumna) */
.wtl-reviews-narrow { max-width: 600px; margin-left: auto; margin-right: auto; }