/* =====================
   STARSZA WARSTWA — nowe style dodawaj do ms-frontend.css, nie tutaj.
   Ten plik: typografia bazowa, marquee inputów, resety. Do scalenia docelowo.
   =====================
   00. IMPORTY + FONTY (BAZA)
   ===================== */
/* JDEV: input text – typografia */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
textarea {
    font-size: 15px;
    letter-spacing: -0.40px !important;
}
/* =====================
   01. TYPOGRAFIA GLOBALNA + UTILITIES
   ===================== */
  body {
    position: relative;
      min-height: 100vh;
      min-height: -webkit-fill-available;
  }
  html {
      height: -webkit-fill-available;
  }
  /* WYMUSZENIE scrolla dla listy wpłat */
    #donations-list-items[data-jdev-simplebar]{
    max-height: 360px;
    overflow-y: auto;
    }

    span.required,
    label.donation-hide-amount:first-of-type input[type="radio"],
    .donations-list-inner > .uk-text-small,
    .quantity {
        display: none;
    }
    #payment .payment_box {
        display: none !important;
    }

/* =====================
   02. FORM FIELDS (INPUT/LABEL) + FLOATING LABELS + CHECKOUT – DONATION FIELDS (kwoty, wybór, input)
   ===================== */
/* FORMULARZ FORM */

.jdev-ux-inline input {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.jdev-ux-inline input.has-overflow:hover,
.jdev-ux-inline input.has-overflow[readonly]:hover {
  animation: marquee-smart 4s linear infinite !important;
}

@keyframes marquee-smart {
  0%, 10% {
    text-indent: 0;
  }
  50%, 60% {
    text-indent: var(--overflow-amount);
  }
  100% {
    text-indent: 0;
  }
}

.jdev-ux-inline input:focus {
  animation: none !important;
  cursor: text;
}

   input:hover, input:focus {
    box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 4px 0px !important;
}
label:has(> input[type="checkbox"]:checked) {
    border-color: #6ac46a;
    background: #F2F8E4;
}
label.donation-hide-amount:first-of-type input[type="radio"] + span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 45px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    color: #333;
    background: #f7f8fa; 
    border: 1px solid #D9D9D9;
    transition: all 0.25s ease-in-out;
}

label.donation-hide-amount:hover input[type="radio"] + span {
    border-color: #aaa;
}
label.donation-hide-amount:first-of-type input[type="radio"]:checked + span {
    background-color: #f0fbe2; 
    border: 1px solid #7fae2a;  
    color: #7fae2a; 
    font-weight: 600;
    border-radius: 6px;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.donation-amount-form{
      margin-top: 0px;
      margin-bottom: 15px;
  }
  
  .donation-amount-form .donation-amount-selector {
      display: inline-block;
      padding: 2px 5px;
      border: 1px solid #d9d9d9;
      cursor: pointer;
      border-radius: 5px;
  }
  
  .donation-amount-form .donation-amount-selector.selected{
      font-weight: 900;
      color: #7eae2a;
      background: #F0F8E2;
      border: 1px solid #7eae2a;
      box-shadow: 0px 4px 4px 0px #0000000D;
  }
  .donation-amount-form .donation-amount-selector:hover {
    box-shadow: 0px 4px 4px 0px #0000000D;
}
span.donation-amount-selector-input {
     padding: 0px !important;
    margin: 0px;
}

span.donation-amount-selector-input > div {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
}

span.donation-amount-selector-input input {
    border: none;
    background: transparent;
    padding: 0 0px;
    background: transparent !important;
        font-size: 16px;
    font-size-adjust: 0.448;
}
 div.donation-amount-form {
      display: flex;
      flex-wrap: wrap;
      flex: 1;
  }
  div.donation-amount-form span.donation-amount-selector {
      width: 100%;
    height: 47px;
    display: block;
      font-size: 16px;
      font-size-adjust: 0.448;
      text-align: center;
      font-weight: 600;
      letter-spacing: -0.8px;
      padding: 10px 0px;
      position: relative;
      overflow: hidden;
      box-sizing: border-box;
  }
  div.donation-amount-form span.donation-amount-selector.selected {
      font-weight: 400;
  }
  
  span.donation-amount-selector + span.donation-amount-selector {
      margin-left: 10px;
  }

  .donation-progress-bar {
      background: #f1f1f1;
      border-radius: 50px;
      overflow: hidden;
      height: 25px;
  }
  span.progressInnerLabel {
      position: absolute;
      text-align: center;
      color: white;
      height: 25px;
      font-weight: bold;
      left: 0;
  }
  
  .progress-bar.progressValue {
      overflow: hidden;
      position: absolute;
      height: 25px;
      background: #912888;
      background: -webkit-linear-gradient(left, #912888 30%, #EA030A);
      background: -moz-linear-gradient(left, #912888 30%, #EA030A);
      background: linear-gradient(to right, #912888 30%, #EA030A);
      border-radius: 50px;
  }
  
  .progress-bar.progressLabel {
      color: #000; /* czarna czcionka na niewypełnionej części (biały innerLabel ma z-index nad) */
      font-weight: bold;
  }

/* button z ikona
   ────────────────────────────────────────────────────────────────────────
   PRZENIESIONE 2026-08-17 do ms-pages.css, sekcja „STANDARD PRZYCISKU
   Z SERDUSZKIEM". Zostały tu tylko kolory i marginesy, czyli rzeczy
   swoiste dla tego jednego przycisku. Wygląd wspólny (wysokość, font,
   padding, sama ikona i jej animacja) opisuje standard.

   Usunięte stąd, bo dublowały standard i wygrywały z nim kolejnością
   (ms-legacy.css ładuje się jako ostatni):
     font-size: 24px          → --ms-btn-font
     padding: 0 20px 0 50px   → padding 0 25px z palety plus flex gap
     position: relative       → niepotrzebne, serce nie jest absolutne
     line-height: 41px        → line-height: 1 w standardzie
     reguła :before z ikoną   → jedna reguła w ms-pages.css
     @keyframes heartbeat     → martwy zestaw, nic go nie używało
     @keyframes beatHeart2    → razem z ikoną w ms-pages.css             */
  .single_add_to_cart_button.button.alt {
      margin: 30px auto 10px;
      text-align: center;
      float: none !important;
      border: 3px solid var(--ms-btn-bg);
      background: var(--ms-btn-bg);
      color: #fff;
  }

  .okok a.uk-button.uk-button-primary,
  div button#place_order {
      margin-top: 10px;
      margin-bottom: 10px;
  }
    /* MODAL */
  .ag-quick-amount {
    border: 1px solid #cacaca;
    border-radius: 5px;
    font-size: 14px;
}

/* =====================
   03. LUZ
   ===================== */

/* =====================
   04. CHECKOUT – ZGODY / TERMS / PLACE ORDER
   ===================== */


/* =====================
   05. CHECKOUT – PAYMENT METHODS (logo, radio UI, ms-checked)
   ===================== */

/* ukrycie radio, kafelki, ms-checked, hover */

/* logo Przelewy24 / BACS */
  label[for="payment_method_przelewy24"]:after, label[for="payment_method_p24-online-payments"]::after {
    content: "";
    display: inline-block;
    background-image: url(/wp-content/plugins/jdev-ms-donations/assets/img/przelewy24.svg?v=1);
    width: 84px;
    height: 30px;
    background-size: 80px 28px;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0px 10px 0px 10px;
    position: relative;
    bottom: -3px;
  }
  label[for="payment_method_przelewy24"] img, label[for="payment_method_p24-online-payments"] img  {
      display: none;
  } 
  label[for="payment_method_bacs"]:after {
    content:"";
    display: inline-block;
    background-image: url(/wp-content/plugins/jdev-ms-donations/assets/img/przelew-bankowy.svg?v=1);
    width: 120px;
    height: 33px;
    margin: 0px 10px 0px 10px;
    position: relative;
    bottom: -2px;
    background-size: 75px 32px;
    background-repeat: no-repeat;
    background-position: center;}
  label[for="payment_method_bacs"] img {
      display: none;
  } 
  
.form-row.place-order > p {
    margin-bottom: 15px !important;
    margin-top: 0px !important;
}
.form-row.place-order > p.consent-paragraph {
    margin-bottom: 0px !important;
}
.form-row.place-order > p label {
    border: 1px solid #D9D9D9;
    border-radius: 5px;
    padding: 0px 5px;
    line-height: 1.8;
    display: flex;
    align-items: center;
    gap: 4px;
    height: 45px;
}
div#order_reviewms-ms > .form-row.place-order {
    margin-bottom: 0px;
}

/* =====================
   06. WOO – BLOCKUI / overlay / notices
   ===================== */
.woocommerce  .blockUI.blockOverlay {
    background-color: transparent !important;
        width: 100vw !important;
    max-width: 100vw !important;
    position: fixed !important;
}
 .woocommerce  .blockUI.blockOverlay::before {
    background-color: transparent !important;
}
.ms-consent-text-small {
    font-size: 10px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.10px;
}

.ms-share-icons > ul > li a {
  position:relative;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #fff;
      border-radius: 5px;
      border: 1px solid #D9D9D9;
      width: 100%;
          height: 47px;
}
.ms-share-icons > ul > li a:hover {
      box-shadow: 0px 4px 4px 0px #0000000d !important;
      cursor: pointer;
      border: 1px solid #7eae2a;
      background: #F2F8E4;
}

/* =====================
   07. PRODUCTS LISTING / KARTY PRODUKTÓW / MINI-DESCRIPTION
   ===================== */

/* li.product.type-product ... tytuły, buttony, progress, mini-description... */

/* =====================
   08. SINGLE PRODUCT / ZBIÓRKA (elementy strony produktu)
   ===================== */
/* .single_add_to_cart_button, wishlist, modal more-option, sticky for-mobile itd. */

/* =====================
   09. DONATIONS LIST / “DONATION OF THE DAY” / SIMPLEBAR
   ===================== */
/* #donations-list-items + wariant [data-jdev-simplebar] itd. */

  .donation-item span.gender {
      width: 40px;
      height: 50px;
      display: block;
      background-image: url(/wp-content/uploads/2021/03/mam_serce_avatary_male.svg);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
  }
  
  .donation-item span.gender.female {
      background-image: url(/wp-content/uploads/2021/03/mam_serce_avatary_female.svg);
      height: 58px;
  }
  .donation-item .uk-text-bold {
      color: #9C277D;
  }

  span.signature {
      font-size: 13px;
      line-height: 1.1;
      letter-spacing: -0.40px;
      display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;  /* max 2 linie */
    overflow: hidden;
    text-overflow: ellipsis;
  }
div.checkout-donation-fields,
p#terms_description {
    display: none;
}


/* =====================
   10. COMMENTS / REVIEWS (układ, dymek, kolejność)
   ===================== */
/* #reviews flex reverse, .comment-text bubble, avatar hide itd. */

/* =====================
   11. MY ACCOUNT / ORDERS / THANK YOU PAGE
   ===================== */
/* nav.woocommerce-MyAccount..., .woocommerce-order-received..., ukrycia sekcji... */

/* =====================
   12. WYJĄTKI per strona / template / kategorie
   ===================== */
/* body.product-template-default..., .product_cat-..., postid-..., itp. */

/* =====================
   90. RESPONSIVE / MOBILE (na końcu)
   ===================== */

/* ---- MOBILE: ogólne (<=960) ---- */
@media (max-width: 960px) {

  /* [Checkout] */
  /* ... */

  /* [Products listing] */
  /* ... */

  /* [Header / mobile menu] */
  /* ... */

  /* [Comments] */
  /* ... */
}

/* ---- MOBILE: węższe (<=640) tylko jeśli musisz ---- */
@media (min-width: 960px) {
    /* [Checkout] */
    form.checkout.woocommerce-checkout > div {
        max-width: 550px;
        width: 100%;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}


label.required_field:after, span.woocommerce-terms-and-conditions-checkbox-text:after {
    content: "*";
    font-size: 70%;
    vertical-align: top;
}

.uk-notification-close.uk-icon.uk-close {
    display: block;
}
.donation-item.uk-grid-small.uk-grid + .donation-item.uk-grid-small.uk-grid {
    margin-top: 10px;
}

.checkout-donation-fields input[type=radio] {
    border-radius: 0%;
}
.checkout-donation-fields  input[type="radio"]:checked {
    background-image: url(data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2214%22%20height%3D%2211%22%20viewBox%3D%220%200%2014%2011%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Cpolygon%20fill%3D%22%23fff%22%20points%3D%2212%201%205%207.5%202%205%201%205.5%205%2010%2013%201.5%22%20%2F%3E%0A%3C%2Fsvg%3E%0A);
}

.woocommerce-billing-fields .form-row, div[data-yooessentials-form-field], .jdev-ms-zbiorki-search {
    position: relative;
  }

  /* Pola /pomoz/ — białe z delikatną ramką (jak ms07), nie szare tło YOOtheme.
     Wysoka specyficzność (.ms-native-checkout + input.input-text) — musi wygrać
     z regułami motywu YOOtheme, które mają !important i tę samą specyficzność. */
  .ms-native-checkout .woocommerce-billing-fields .form-row input.input-text {
    background: #fff !important;
    border: 1px solid #e2e2e2 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    height: auto !important;
    padding: 10px 42px 10px 14px !important; /* miejsce na ołówek po prawej */
  }
  .ms-native-checkout .woocommerce-billing-fields .form-row.focused input.input-text,
  .ms-native-checkout .woocommerce-billing-fields .form-row input.input-text:focus {
    border-color: #b7d98a !important;
    box-shadow: 0 0 0 1px #b7d98a inset !important;
  }

  .woocommerce-billing-fields .form-row label, div[data-yooessentials-form-field] label, .jdev-ms-zbiorki-search label {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    transition: all 0.3s ease;
    pointer-events: none;
    font-size: 16px;
    color: #999;
    z-index: 1; 
  }
  .woocommerce-billing-fields .form-row label {
    left: 20px;
  }
  
  .woocommerce-billing-fields .form-row.focused label,
  .woocommerce-billing-fields .form-row.has-value label,
  div[data-yooessentials-form-field].focused label,
  div[data-yooessentials-form-field].has-value label,
  .jdev-ms-zbiorki-search.focused label,
  .jdev-ms-zbiorki-search.has-value label {
    top: 0px;
    font-size: 12px;
    line-height: 10px;
    margin: 0px;
    color: #000;
    background: #fff;
    padding: 1px 5px;
  }
  
  
  .woocommerce-billing-fields .form-row textarea,
  div[data-yooessentials-form-field] textarea {
    resize: vertical;
    padding-top: 20px;
  }
  
  .woocommerce-billing-fields .form-row textarea + label {
    top: 20px;
    transform: none; 
  }
  
  .woocommerce-billing-fields .form-row .woocommerce-input-wrapper {
    position: relative;
    z-index: 0;
  }
  
  .woocommerce-billing-fields .form-row textarea ~ label {
    position: absolute;
    top: 0;
    left: 10px;
    transform: none;
    font-size: 16px;
    color: #999;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 1;
  }
  
  .woocommerce-billing-fields .form-row.focused textarea ~ label,
  .woocommerce-billing-fields .form-row.has-value textarea ~ label {
    top: -10px;
    font-size: 12px;
    color: #000;
          background: #fff;
      padding: 1px 5px;
  }
  
  
  .checkout-donation-fields {
      margin-bottom: 25px;
  }

  .uk-navbar-right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      align-content: center;
  }
  
  .uk-box-shadow-small:empty {
      display: none !important;
  }
  .widget_shopping_cart {
      padding: 0px;
  }
  .widget_shopping_cart_content {
      height: 60px;
  }
  .widget_shopping_cart_content svg {
      height: 40px;
      width: 35px;
  }
  
  .tm-header .ms-header {
    background: #ffffff;
    border-radius: 15px;
    box-shadow: 0 0 8px 0 rgba(108, 67, 97, .15);
    padding: 15px;
  }
  
  
  .uk-navbar-item.widget.widget_woocommerce_widget_cart.woocommerce.widget_shopping_cart {
      max-height: 40px;
  }
  
  .uk-box-shadow-small-inset {
      box-shadow: inset 0 -15px 40px -40px #9a2881;
      box-shadow: inset 0 -15px 40px -40px rgba(108, 67, 97, 0.5);
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
  }
  

  /* HOME */
  @media (max-width: 960px) {
    /* PRZENIESIONE 2026-08-17 do ms-pages.css, sekcja „Jedna reguła paddingu
       dla KAŻDEJ białej karty". Było tu #tm-main .uk-card-body { padding:
       14px 14px }. Przez ID reguła pomijała stopkę, która leży poza #tm-main,
       więc karta „zebraliśmy" miała 25px, gdy pozostałe miały 14px. */

        #tm-main .donation-amount-form > div > span.uk-grid-margin {
        margin-top: 10px !important;
        }

        #tm-main .single_add_to_cart_button.button.alt,
        #tm-main button#place_order {
        margin-top: 25px !important;
        margin-bottom: 0px;
        }

        #tm-main .cky-btn-revisit-wrapper.cky-revisit-bottom-left {
        position: absolute;
        left: -10px;
        bottom: -10px;
        transform: scale(0.5);
        }

        #tm-main .woocommerce-billing-fields .form-row:not(:last-child) {
        margin-bottom: 10px;
        }
    .uk-grid + .uk-grid, .uk-grid > .uk-grid-margin, * + .uk-grid-margin {
        margin-top: 15px;
    }
    h5, .uk-h5 {
        font-size: 19px;
        line-height: 0.9;
    }
  }
  
  /* TOP */
  .uk-navbar-right-top .uk-navbar-item {
      min-height: 60px;
  }
  a.uk-button.uk-button-small {
      border-width: 2px;
      min-width:  130px;
  }
  .uk-navbar-right-top a.uk-button-default.uk-button-small {
      background-color: transparent;
      color: #424242;
      border: 2px solid #424242;
      background-image: linear-gradient(90deg, #424242 50%, transparent 50%);
  }
  .uk-navbar-right-top a.uk-button-default.uk-button-small:hover {
      color: #fff;
  }
  .tm-header > div {
      padding-top: 0px;
      padding-bottom: 0px;
  }
  


  ul.page-numbers > li > *, .uk-pagination > li > * {
      width: 40px !important;
      height: 40px !important;
      display: flex !important;
      justify-content: center;
      align-items: center;
  }
  /* Mobile */
  @media (max-width: 960px) {
      ul .page-numbers, .uk-pagination > li > * {
          width: 26px !important;
          height: 26px !important;
          column-gap: 0.1em;
          border: 2px solid #9C277D;
      }
      .uk-pagination > * {
          flex: none;
          padding-left: 6px;
          position: relative;
      }
  }
  
  .uk-panel ol {
    list-style-type: none;
    counter-reset: item;
    margin: 0;
    padding: 0;
    }

    .uk-panel ol > li {
    display: table;
    counter-increment: item;
    margin-bottom: 0.6em;
    }

    .uk-panel ol > li:before {
    content: counters(item, ".") ". ";
    display: table-cell;
    padding-right: 0.6em;
    }

    .uk-panel li ol > li {
    margin: 10px 0;
    }

    .uk-panel li ol > li:before {
    content: counters(item, ".") " ";
    }

    .uk-panel ol.alfanumeric {
    list-style-type: lower-alpha !important;
    }

  .uk-tile {
      box-shadow: 0px 0px 8px 0px rgba(108, 67, 97, 0.15);
      border-radius: 15px;
  }
  a.uk-hidden.menu-item + ul {
      display: none;
  }
  
  ul.uk-nav.uk-nav-primary {
      padding-top: 40px;
  }
  ul.uk-nav.uk-nav-primary li + li {
      border-top: 2px solid #eee;
  }
  ul.uk-nav.uk-nav-primary li + li.uk-parent {
      border: none;
  }
  .uk-icon.uk-navbar-toggle-icon svg {
      width: 30px;
      height: 30px;
  }
  button.uk-modal-close-full.uk-icon.uk-close svg {
      width: 30px;
      height: 30px;
  }
  .uk-modal-dialog, div .uk-modal-close-full {
      background: #fff;
  }
  div#tm-mobile  {
      overflow-y: scroll;
  }
  

  @media (max-width: 786px) {
      .uk-box-shadow-small.footer-top.uk-section-muted.uk-section.uk-section-small {
          display: none!important;
      }
  }

  span.woocommerce-review__dash {
      display: none;
  }
  
  time.woocommerce-review__published-date {
      display: none !important;
  }
  
  p.meta {
      margin: 0px !important;
      font-weight: bold !important;
  }
  
  .comment-text {
      background: #F2F2F2;
      padding: 10px 20px;
      border-radius: 30px;
  }
  
  .description p:last-child {
      margin: 0px !important;
  }
  
  
  /*Comments*/
  .comment_container .avatar {
      display: none;
  }
  @media (min-width: 960px) {
      .comment_container:before {
          background-image: url(/wp-content/uploads/2021/03/mam_serce_avatary_male.svg);
          background-repeat: no-repeat;
          content: " ";
          width: 60px;
          height: 50px;
          position: absolute;
          display: block;
          background-size: 100%;
          background-position: center;
          left: 0;
      }}
  .comment-text:before {
      background-image: url(../../../uploads/2020/12/cloudy.png);
      background-size: 100%;
      background-repeat: no-repeat;
      background-position: center;
      content: " ";
      width: 26px;
      height: 34px;
      position: absolute;
      left: 55px;
      top: 13px;
  }

  .uk-modal-dialog .donation-summary {
      width: 100%;
      max-width: 320px;
  }

  .for-mobile .donation-summary {
      display: flex;
      justify-content: space-around;
      align-items: center;
      order: 3;
  }

  @media (max-width: 960px) {
      /* padding: 0 10px USUNIĘTY 2026-08-17. Ta jedna deklaracja zerowała
         padding KAŻDEMU przyciskowi na telefonie, także tym z serduszkiem,
         przez co ikona wchodziła w napis. Bolało tym bardziej, że
         ms-legacy.css ładuje się ostatni, więc bił padding ustawiony
         w ms-frontend.css. Padding boczny jest teraz jeden, ze zmiennej
         padding: 0 25px z palety YOOtheme, ten sam na obu ekranach. */
      /* :not(.ms-amount-btn) dodane 2026-08-17. Ta reguła obniża przyciskom
         font z 24px palety YOOtheme do 16px, co jest w porządku dla „Rozwiń
         listę" czy przycisków w treści. Ale łapała też kafelki kwot, które
         mają własne 14px, i podbijała je do 16px.

         Zmierzone: kafelek „50 zł" miał 14px na komputerze i 16px na
         telefonie, czyli na mniejszym ekranie napis był WIĘKSZY. Stąd
         wrażenie, że mobilny widok jest rozdęty i mało kompaktowy. */
      .tm-page .uk-button:not(.ms-amount-btn) {
          font-size: var(--ms-btn-font);
      }

      div.comment-text {
          margin: 0 0 0 15px!important;
      }
      .comment-text:before {
          left: 0;
      }
  
      ul.uk-subnav.ms-subnav > li > a {
          width: 100px;
          font-size: 16px;
          padding: 2px 0px;
      }
      .donation-summary__left span {
          font-size: 20px;
      }
      .donation-summary__right {
          font-size: 20px;
      }
     
      .single-product div#tm-main {
          padding-top: 0px;
      }

      a.add_to_wishlist.single_add_to_wishlist.button.alt {
          left: 50%;
          transform: translate(-50%, 0%);
          font-size: 20px;
          padding: 0 20px;
      }
  
  }
 
  /*Comments order*/
  div#reviews {
      display: flex;
      flex-direction: column-reverse;
  }
  div#reviews > div#comments > ol.commentlist {
      flex-direction: column-reverse;
      display: flex;
  }
  div#reviews > div#comments > ol.commentlist > li {
      margin: 0 0 65px 0!important;
      position: relative;
  }
  div#reviews > div#comments > ol.commentlist > li:first-child {
      margin-bottom: 0px!important;
  }
  form#commentform.comment-form {
      display: flex;
      flex-direction: column;
  }
  .woocommerce #reviews #comments ol.commentlist li .comment-text, .woocommerce-page #reviews #comments ol.commentlist li .comment-text {
      margin: 0 0 0 70px;
  }
  .woocommerce #review_form #respond p, .woocommerce-page #review_form #respond p {
      margin: 0 0 25px;
  }
  .woocommerce #reviews #comment, .woocommerce-page #reviews #comment {
      height: 75px;
      min-height: 75px;
  }
  #reviews div.description {
      clear: both;
      margin-top: 0px;
  }
  #reviews .woocommerce-review__author {
      color: #b0a4ac;
      font-size: 14px;
      line-height: 1.4;
      FONT-WEIGHT: 600;
  }
  /* padding, line-height i font-size 25px usunięte 2026-08-17 — trzeci
     komplet liczb dla tego samego przycisku. Rządzi standard z ms-pages.css. */
  button#place_order {
      width: auto;
      margin-top: 22px;
  }

  textarea#order_comments::-webkit-input-placeholder {
      padding-top: 15px;
  }

  
  table.shop_table.woocommerce-checkout-review-order-table tbody, table.shop_table.woocommerce-checkout-review-order-table thead {
      display: none;
  }
  .woocommerce-billing-fields h3, table.shop_table.woocommerce-checkout-review-order-table h3, div#payment h3 {
      text-align: center;
  }

  button#place_order {
      float: none !important;
      margin: auto;
      display: flex;
  }
  ul.wc_payment_methods.payment_methods.methods {
      display: flex;
      justify-content: center;
      flex-wrap: nowrap;
  }
  
  ul.wc_payment_methods.payment_methods.methods li {
      margin: 0px;
  }
  
  table.shop_table.woocommerce-checkout-review-order-table {
      line-height: 1.2;
      font-size: 30px;
      color: #992781;
      font-weight: 600;
  }
  
  .cart_list > li {
      padding-left: 25px !important;
      font-size: 15px;
  }
  
  a.button.checkout.wc-forward {
      display: none;
  }
  
  #more-option .donation-summary > .uk-child-width-expand {
      display: none;
  }
  #more-option form.cart {
      margin-top: -20px !important;
  }
  
  
  @media (min-width: 960px) {
      div#more-option > #modal-full {
          display: flex;
          position: relative;
          padding: 0px;
          opacity: 1;
          background: transparent;
      }
      div#more-option > #modal-full > .uk-modal-dialog {
          background: transparent;
          transform: none;
          opacity: 1;
      }
      a.uk-button-default[href*="facebook.com/sharer"] {
          padding: 0 15px;
          font-size: 20px;
      }
      a.uk-button-default[href*="facebook.com/sharer"] svg {
          top: -3px;
          position: relative;
      }
  }
  
  .more-option-modal .uk-modal-dialog {
      padding: 55px 20px;
      text-align: center;
      display: flex;
      justify-content: center;
  }
  .more-option-modal .uk-modal-close-full {
      padding: 15px;
  }
  
  .uk-tile-default.uk-tile {
      overflow: hidden;
  }
  
  .ms-zbiorka ul.uk-switcher img, .ms-description img {
      border-radius: 15px;
      box-shadow: 0px 0px 8px 0px rgba(108, 67, 97, 0.15);
      width: 100%;
      /* max-height: 493px; */
      object-fit: cover;
      margin-bottom: 20px;
      float: none;
  }
  
  div .uk-box-shadow-bottom::before {
      bottom: 0px;
  }

  .donation-item span.ms-amount {
    font-size: 15px;
    letter-spacing: -0.40px;
}
  .woocommerce-Price-currencySymbol {
      margin-left: 3px;
  }

  body.woocommerce-order-received .woocommerce-order {
      display: flex;
      flex-direction: column;
  }
  body.woocommerce-order-received .woocommerce-order
        .woocommerce-notice.woocommerce-notice--success.woocommerce-thankyou-order-received {
        order: 0;
        }

        body.woocommerce-order-received .woocommerce-order ul.woocommerce-order-overview {
        order: 1;
        }

        body.woocommerce-order-received .woocommerce-order p + p {
        order: 2;
        margin: 0;
        }

        body.woocommerce-order-received .woocommerce-order ul.woocommerce-order-overview + p {
        order: 5;
        font-size: 23px;
        font-weight: 600;
        margin-top: -10px;
        }

        body.woocommerce-order-received .woocommerce-order section.woocommerce-bacs-bank-details {
        order: 4;
        }
  
  p.comment-form-comment > textarea#comment {
      margin-top: 20px!important;
  }
  
  ul.wc_payment_methods li input[type=radio] {  
      display: none;  
  }
  
  ul.wc_payment_methods li > div {
      position:relative;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #fff;
      border-radius: 5px;
      border: 1px solid #D9D9D9;
      width: 100%;
          height: 45px;
  }
  ul.wc_payment_methods li > div > label {
      display: flex;
      flex-direction: column-reverse;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: center;
    font-size: 0px;
    color: transparent;
  }

    li.wc_payment_method.ms-checked > div {
    box-shadow: 0px 4px 4px 0px #0000000d !important;
      cursor: pointer;
      border: 1px solid #7eae2a;
      background: #F2F8E4;
  }
  li.wc_payment_method:hover > div {
    box-shadow: 0px 4px 4px 0px #0000000d !important;
  }

  ul.wc_payment_methods li > div > label img {
      margin: 0px!important;  
      padding: 0px!important;
  }
  ul.wc_payment_methods > * {
    margin-top: 0px;
    padding-top: 0px;
    border-top: none;
}

  input#donation-custom-amount-input {
      border: 2px solid #9C277D;
  }
  input#donation-custom-amount-input::placeholder,
  input#donation-custom-amount-input:-ms-input-placeholder,
  input#donation-custom-amount-input::-ms-input-placeholder { 
      color: #9C277D;
      opacity: 1; 
  }
  .woocommerce input[type=checkbox], .woocommerce input[type=radio] {
      margin-right: 5px;
  }


  @media (max-width: 640px) {
      .zbiorki-menu > .uk-panel > a {
          width: 100%;
          margin: 2px 0px!important;
      }
  }
  
  
  .tm-header-mobile {
      padding-top: 0px;
      margin-bottom: 0px;
      display: block;
      position: relative;
      
  }
  
  .tm-header-mobile div > nav {
      background: #fff;
      padding: 8px 8px 8px 8px;
      border-radius: 15px;
      margin: -5px 0px 55px 0px;
      bottom: 0px;
      box-shadow: 0 0 8px 0 rgba(108,67,97,.15);}
  
      
      .tm-header-mobile-top a.uk-button.uk-button-small {
      font-size: 12px;
      padding: 0px !important;
      min-width: 65px;
      line-height: 20px;
  }

  .uk-navbar-right-top {
      justify-content: space-between;
  }
  
  .uk-navbar-right-top	.uk-button-secondary:hover {
  color:  #424242;
      }
      .uk-navbar-right-top .uk-navbar-item {
      min-height: 40px;
  }
      .tm-header-mobile-top {
      background: #fff;
              z-index: 1;
      position: relative;
  }
  .tm-header-mobile nav.uk-navbar > .uk-navbar-right {
      width: 100%;
  }
  div#builderwidget-10 {
      flex: 1;
      min-width: 1px;
  }
  
  .uk-card-default .okok .el-meta.uk-text-small.uk-margin-small-top,
  .uk-panel.okok .el-meta.uk-text-small.uk-margin-small-top {
      color: #c10534;
      font-weight: 600;
      margin-bottom: 8px;
      font-size: 16px;
  }
  .woocommerce input[type=checkbox], .woocommerce input[type=radio] {
      margin-right: 0px;
  }

  
  @media (min-width: 260px) {
      .uk-card-default .okok .el-meta.uk-text-small.uk-margin-small-top,
  .uk-panel.okok .el-meta.uk-text-small.uk-margin-small-top {
      font-size: 18px;
  }
  }
  
  a.uk-navbar-toggle {
      display: flex;
      flex-direction: column-reverse;
  }
  
  a.uk-navbar-toggle > span {
      font-size: 14px;
      line-height: 1.1;
      margin: 0px !important;
  }
  
  label.uk-form-label > span {
      display: none;
  }

  .uk-nav.uk-nav-primary  li a {
  text-align: left;
      justify-content: left;
  }

label.donation-anonymous, .donation-hide-amount {
    letter-spacing: -0.50px;
}
.checkout-donation-fields {
    display: flex;
    width: 100%;
    justify-content: space-between;
    position: relative;
}

.consent-paragraph > label {
    display: flex;
    gap: 3px;
}

.consent-paragraph > label > input {
    flex-shrink: 0;
    margin: 0;
}

.consent-paragraph > label > .checkbox-text {
    display: inline-block;
}

@media (max-width: 960px) {

    .sid-active div#beneficiary-cart-01 > div {
        display: flex;
        flex-direction: column;
    }
    .sid-active .pomagam-01 {
        order: 1;
    }
    .sid-active .pomagam-02 {
        order: 0;
        margin-top: -5px;
        margin-bottom: -15px;
    }
    ul.wc_payment_methods li > label {
        height: 68px;
        justify-content: center;
        align-items: center;
    }
    
}

p.selectAllwrap label:has(> input[type="checkbox"]) {
    border-color: #6ac46a;
    background: #F2F8E4;
}
p.selectAllwrap  input[type="checkbox"],p.selectAllwrap input[type="checkbox"]:focus {
    background-color: #FFFFFF;
    border-color: #89AC43;
}

.donation-amount-selector-input input::placeholder { transition: opacity .012s ease; }
.donation-amount-selector-input input:focus::placeholder { opacity: 0; }

/* ============================================================
   /pomoz/ — NADRZĘDNY blok (ładuje się ostatni, wygrywa spory).
   Baza wg ustaleń: height 47px, border 1px #d9d9d9, radius 5px.
   ============================================================ */

/* 1) INPUTY = baza jak selektory kwot (białe, delikatna ramka, radius 5px) */
.ms-native-checkout .woocommerce-billing-fields .form-row input.input-text {
    height: 47px !important;
    background: #fff !important;
    border: 1px solid #d9d9d9 !important;
    border-radius: 5px !important;
    box-shadow: none !important;
    padding: 0 42px 0 14px !important;   /* miejsce na ołówek po prawej */
    vertical-align: middle;
    box-sizing: border-box !important;
}
/* Focus: BEZ zielonej ramki — tylko delikatne podbicie cieniem jak ms07. */
.ms-native-checkout .woocommerce-billing-fields .form-row.focused input.input-text,
.ms-native-checkout .woocommerce-billing-fields .form-row input.input-text:focus {
    border-color: #d9d9d9 !important;
    box-shadow: 0px 4px 4px 0px #0000000d !important;
}

/* 2) Główny CTA #place_order — styl w ms-frontend.css (.ms-checkout-box #place_order),
   1:1 jak .ms-btn-submit z kroku kwot. Tutaj nie dublujemy. */

/* 3) KAFELKI BRAMEK — radius 5px jak baza */
.ms-native-checkout ul.wc_payment_methods li > div > label {
    border-radius: 5px !important;
}

/* 4) CHOWAMY TEKST BRAMKI („Przelew bankowy" / „Płać przez Przelewy24").
   font-size:0 zjada tekst; ikona to background-image na ::after ze stałym
   rozmiarem, więc zostaje widoczna. Nie kasujemy — ukrywamy. */
.ms-checkout-box ul.wc_payment_methods li label,
.ms-native-checkout ul.wc_payment_methods li label {
    font-size: 0 !important;
}

/* 5) CHOWAMY PLACEHOLDER dokładany przez YOOtheme („imię", „nazwisko"…).
   Hintem jest floating-label; sam placeholder robimy przezroczysty. */
.ms-checkout-box .form-row input.input-text::placeholder,
.ms-native-checkout .form-row input.input-text::placeholder {
    color: transparent !important;
    opacity: 0 !important;
}

/* ============================================================
   6) STEROWANIE WYSOKOŚCIĄ — jedna zmienna dla input + kafelek + CTA.
   Zmień --ms-h i rusza się wszystko naraz.
   ============================================================ */
/* 47px to wysokosc kontrolek w calym portalu (decyzja 2026-08-15). Wczesniej
   checkout stal na 48px, a strony tresciowe na 47px — stad rozjazd o 1px
   miedzy polem na /kontakt/ a polem w checkoucie. */
.ms-checkout-box, .ms-native-checkout { --ms-h: var(--ms-control-h); }

/* input do wpisywania */
.ms-native-checkout .woocommerce-billing-fields .form-row input.input-text {
    height: var(--ms-h) !important;
}
/* kafelek wyboru bramki — wysokość rządzi <li> (to on ma min-height:58px), nie label

   UWAGA (2026-08-15): kafelek jest JEDYNYM elementem checkoutu z
   box-sizing: content-box, więc --ms-h (48px) urastało mu do realnych 50px:
   48 zawartości plus ramka 1px z każdej strony. Reszta kontrolek jest
   border-box i ma równo 48px. Stąd kafelki wystawały o 2px ponad resztę.

   Docelowa wysokość kafelka to 47px, dlatego ma tu własną liczbę zamiast
   --ms-h. Label dostaje 45px, czyli 47 minus ramka. Jeśli kiedyś cały
   checkout ma zejść do 47px, wystarczy zmienić --ms-h wyżej i usunąć te
   dwie liczby stąd. */
.ms-checkout-box #payment ul.payment_methods li {
    box-sizing: border-box !important;
    min-height: var(--ms-h) !important;
    height: var(--ms-h) !important;
}
.ms-checkout-box #payment ul.payment_methods label {
    height: 100% !important;
}
/* główny czerwony CTA — wysokość. Wyśrodkowanie serca z napisem jako grupy
   opisuje teraz standard w ms-pages.css i obowiązuje wszystkie przyciski,
   nie tylko ten w checkoucie. Wcześniej ta reguła (plus jej para dla ::before
   z position: static) była JEDYNYM miejscem z układem flex, przez co checkout
   miał serce inaczej ułożone niż lista zbiórek i pasek sticky. */
.ms-checkout-box #place_order {
    min-height: var(--ms-h) !important;
}

/* 7) „(opcjonalne)" jest niewidoczne, ale rozpycha biały chip labela — chowamy,
   dzięki temu chip labela ma szerokość samego napisu (Imię/Nazwisko). */
.ms-checkout-box .form-row label .optional,
.ms-native-checkout .form-row label .optional {
    display: none !important;
}

/* 8) Label pola — font 12px, czarny, cienki (wg wskazania). */
.ms-checkout-box .form-row > label:first-child:not(.checkbox):not(.woocommerce-form__label-for-checkbox),
.ms-native-checkout .form-row > label:first-child:not(.checkbox):not(.woocommerce-form__label-for-checkbox) {
    font-size: 12px !important;
    color: #000 !important;
    font-weight: 300 !important;
}

/* 9) ZGODY — pokaż wiersze zgód (regulamin*, marketing). Reguła motywu
   .form-row label:not(.checkbox){display:none} chowała wszystkie oprócz „zaznacz
   wszystkie". !important bije display:none niezależnie od specyficzności. */
.ms-checkout-box .ms-pomoz-consents .ms-consent-row,
.ms-native-checkout .ms-pomoz-consents .ms-consent-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    /* STAŁA wysokość, nie minimalna: dzięki temu długość tekstu zgody nie
       rusza układem. Najdłuższa zgoda łamie się na trzy linie (3 × 9,9px
       = 29,7px przy line-height 0.9) i mieści się w 36px minus padding. */
    height: var(--ms-consent-h) !important;
    min-height: var(--ms-consent-h) !important;
    padding: 3px 12px !important;
    box-sizing: border-box !important;            /* padding NIE rozpycha (koniec 61px) */
    margin-bottom: 8px;
    /* font-size i line-height ZDJĘTE: ustawia je reguła dla span
       (11px / 0.9) w ms-frontend.css. Dwie deklaracje w dwóch plikach
       na ten sam tekst to była prosta droga do rozjazdu. */
    text-align: left;
    border-radius: 5px !important;        /* delikatny radius jak reszta */
}
.ms-checkout-box .ms-pomoz-consents .ms-consent-row input[type="checkbox"],
.ms-native-checkout .ms-pomoz-consents .ms-consent-row input[type="checkbox"] {
    margin: 0;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    accent-color: #89ac43 !important;   /* zielony check jak ms07 (nie czerwony) */
}