/* =========================================================
   JOSPORT.CZ — REDESIGN 2026 / UNIFIED BUTTON SYSTEM V2
   Jeden soubor pro PC, notebook, iPad/tablet i mobil.
   Nahrazuje:
   - josport-buttons-v1.2.css
   - josport-banners-v7.css

   Cíl:
   - jedna barevnost
   - jednotné radiusy
   - jednotná typografie
   - responzivní velikosti
   - bez zásahu do pozic bannerů
   ========================================================= */


/* =========================================================
   0. DESIGN TOKENS
   ========================================================= */

:root {
  --jo-btn-primary: #155f9d;
  --jo-btn-primary-hover: #104f84;
  --jo-btn-primary-active: #0d426e;

  --jo-btn-secondary-bg: #ffffff;
  --jo-btn-secondary-text: #17385f;
  --jo-btn-secondary-border: #cbdbea;
  --jo-btn-secondary-hover: #f3f7fb;

  --jo-btn-radius: 12px;
  --jo-btn-radius-small: 10px;

  --jo-btn-height: 46px;
  --jo-btn-height-small: 42px;

  --jo-btn-padding-x: 26px;
  --jo-btn-padding-x-small: 20px;

  --jo-btn-font-size: 15px;
  --jo-btn-font-size-small: 14px;

  --jo-btn-shadow: 0 8px 20px rgba(21, 95, 157, .18);
  --jo-btn-shadow-hover: 0 11px 24px rgba(21, 95, 157, .24);
}


/* =========================================================
   1. ZÁKLADNÍ TLAČÍTKA SHOPTETU
   ========================================================= */

.btn,
a.btn,
button.btn,
input.btn,
input[type="submit"],
input[type="button"],
button[type="submit"] {
  border-radius: var(--jo-btn-radius) !important;
  font-weight: 700 !important;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease !important;
}


/* =========================================================
   2. PRIMÁRNÍ / KONVERZNÍ TLAČÍTKA
   ========================================================= */

.btn-primary,
.btn-conversion,
a.btn-primary,
a.btn-conversion,
button.btn-primary,
button.btn-conversion,
input.btn-primary,
input.btn-conversion {
  color: #fff !important;
  background: var(--jo-btn-primary) !important;
  border-color: var(--jo-btn-primary) !important;
  box-shadow: var(--jo-btn-shadow) !important;
}

.btn-primary:hover,
.btn-conversion:hover,
a.btn-primary:hover,
a.btn-conversion:hover,
button.btn-primary:hover,
button.btn-conversion:hover,
input.btn-primary:hover,
input.btn-conversion:hover {
  color: #fff !important;
  background: var(--jo-btn-primary-hover) !important;
  border-color: var(--jo-btn-primary-hover) !important;
  box-shadow: var(--jo-btn-shadow-hover) !important;
  transform: translateY(-1px);
}

.btn-primary:active,
.btn-conversion:active,
a.btn-primary:active,
a.btn-conversion:active,
button.btn-primary:active,
button.btn-conversion:active {
  color: #fff !important;
  background: var(--jo-btn-primary-active) !important;
  border-color: var(--jo-btn-primary-active) !important;
  transform: translateY(0);
}


/* =========================================================
   3. SEKUNDÁRNÍ / ZPĚT / NEUTRÁLNÍ
   ========================================================= */

.btn-default,
.btn-secondary,
.next-step-back,
a.btn-default,
a.btn-secondary,
button.btn-default,
button.btn-secondary {
  color: var(--jo-btn-secondary-text) !important;
  background: var(--jo-btn-secondary-bg) !important;
  border-color: var(--jo-btn-secondary-border) !important;
  box-shadow: none !important;
}

.btn-default:hover,
.btn-secondary:hover,
.next-step-back:hover,
a.btn-default:hover,
a.btn-secondary:hover,
button.btn-default:hover,
button.btn-secondary:hover {
  color: var(--jo-btn-secondary-text) !important;
  background: var(--jo-btn-secondary-hover) !important;
  border-color: #9fbad2 !important;
  transform: translateY(-1px);
}


/* =========================================================
   4. BANNERY — VÍCE
   Zachována původní pozice tlačítek.
   Záměrně zde není position, margin ani display.
   ========================================================= */

.josport-mobile-button-v3,
.banner-wrapper .extended-banner-link {
  background: var(--jo-btn-primary) !important;
  color: #fff !important;
  border-radius: var(--jo-btn-radius) !important;
  border: none !important;

  padding: 13px var(--jo-btn-padding-x) !important;

  font-size: var(--jo-btn-font-size) !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;

  box-shadow: var(--jo-btn-shadow) !important;

  transition:
    background-color .18s ease,
    box-shadow .18s ease,
    color .18s ease !important;
}

.banner-wrapper:hover .josport-mobile-button-v3,
.banner-wrapper:hover .extended-banner-link,
.josport-mobile-button-v3:hover,
.banner-wrapper .extended-banner-link:hover {
  background: var(--jo-btn-primary-hover) !important;
  color: #fff !important;
  box-shadow: var(--jo-btn-shadow-hover) !important;
}

.banner-wrapper .josport-mobile-button-v3:active,
.banner-wrapper .extended-banner-link:active,
.josport-mobile-button-v3:active {
  background: var(--jo-btn-primary-active) !important;
  color: #fff !important;
}


/* =========================================================
   5. PRODUKTOVÉ KARTY — DETAIL / KOŠÍK / IKONY
   ========================================================= */

/* Textová tlačítka v kartách */
.products .product .btn,
.products-block .product .btn,
.product .p-bottom .btn,
.product .p-tools .btn {
  border-radius: var(--jo-btn-radius-small) !important;
}

/* Primární / košík v produktové kartě */
.products .product .btn-cart,
.products .product .btn-conversion,
.products-block .product .btn-cart,
.products-block .product .btn-conversion,
.product .p-bottom .btn-cart,
.product .p-bottom .btn-conversion,
.product .p-tools .btn-cart,
.product .p-tools .btn-conversion,
.products .product button[type="submit"].btn,
.products-block .product button[type="submit"].btn {
  color: #fff !important;
  background: var(--jo-btn-primary) !important;
  border-color: var(--jo-btn-primary) !important;
  box-shadow: var(--jo-btn-shadow) !important;
}

.products .product .btn-cart *,
.products .product .btn-conversion *,
.products-block .product .btn-cart *,
.products-block .product .btn-conversion *,
.product .p-bottom .btn-cart *,
.product .p-bottom .btn-conversion *,
.product .p-tools .btn-cart *,
.product .p-tools .btn-conversion *,
.products .product button[type="submit"].btn *,
.products-block .product button[type="submit"].btn * {
  color: #fff !important;
}

.products .product .btn-cart:hover,
.products .product .btn-conversion:hover,
.products-block .product .btn-cart:hover,
.products-block .product .btn-conversion:hover,
.product .p-bottom .btn-cart:hover,
.product .p-bottom .btn-conversion:hover,
.product .p-tools .btn-cart:hover,
.product .p-tools .btn-conversion:hover {
  color: #fff !important;
  background: var(--jo-btn-primary-hover) !important;
  border-color: var(--jo-btn-primary-hover) !important;
}

/* Malá ikonová tlačítka */
.products .product .btn.btn-primary[aria-hidden="true"],
.products-block .product .btn.btn-primary[aria-hidden="true"],
.product .p-bottom .btn.btn-primary[aria-hidden="true"],
.product .p-tools .btn.btn-primary[aria-hidden="true"] {
  min-width: 40px;
  min-height: 40px;
  border-radius: var(--jo-btn-radius-small) !important;
  overflow: hidden;
}


/* =========================================================
   6. KOŠÍK / POPUP / OBJEDNÁVKA
   ========================================================= */

.advancedOrder__buttons .btn,
.cart-table .btn,
.cart-content .btn,
.ordering-process .btn,
.checkout-box .btn,
#colorbox .btn {
  border-radius: var(--jo-btn-radius) !important;
}

.advancedOrder__buttons .btn-conversion,
.cart-content .btn-conversion,
.ordering-process .btn-conversion,
#colorbox .btn-conversion {
  min-height: var(--jo-btn-height);
  box-shadow: var(--jo-btn-shadow) !important;
}


/* =========================================================
   7. FORMULÁŘE / LOGIN / REGISTRACE / NEWSLETTER
   ========================================================= */

.login-form .btn,
.registration-form .btn,
.contact-form .btn,
.newsletter-form .btn,
.search-form .btn,
.user-action .btn,
.form-group .btn {
  border-radius: var(--jo-btn-radius) !important;
}


/* =========================================================
   8. MALÁ TLAČÍTKA
   ========================================================= */

.btn-sm,
.btn.btn-sm,
a.btn-sm,
button.btn-sm {
  border-radius: var(--jo-btn-radius-small) !important;
}


/* =========================================================
   9. OTEVŘÍT FILTR — KATEGORIE
   ========================================================= */

.filters-unveil-button-wrapper .btn.btn-default.unveil-button,
.filters-unveil-button-wrapper .unveil-button {
  background: linear-gradient(135deg, #155f9d, #0e4d87) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--jo-btn-radius) !important;
  min-height: 54px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .4px;
  box-shadow: var(--jo-btn-shadow) !important;
}

.filters-unveil-button-wrapper .btn.btn-default.unveil-button:hover,
.filters-unveil-button-wrapper .unveil-button:hover,
.filters-unveil-button-wrapper .btn.btn-default.unveil-button:focus,
.filters-unveil-button-wrapper .unveil-button:focus {
  background: linear-gradient(135deg, #104f84, #0d426e) !important;
  color: #fff !important;
}

.filters-unveil-button-wrapper .btn.btn-default.unveil-button *,
.filters-unveil-button-wrapper .unveil-button * {
  color: #fff !important;
}


/* =========================================================
   10. FOCUS / PŘÍSTUPNOST
   ========================================================= */

.btn:focus-visible,
a.btn:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
.josport-mobile-button-v3:focus-visible,
.banner-wrapper .extended-banner-link:focus-visible {
  outline: 3px solid rgba(40, 168, 233, .32) !important;
  outline-offset: 2px !important;
}


/* =========================================================
   11. DISABLED
   ========================================================= */

.btn:disabled,
.btn.disabled,
button:disabled,
input[type="submit"]:disabled {
  opacity: .55 !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: not-allowed !important;
}


/* =========================================================
   12. DESKTOP / NOTEBOOK — 1200 px+
   ========================================================= */

@media (min-width: 1200px) {
  :root {
    --jo-btn-height: 46px;
    --jo-btn-height-small: 42px;
    --jo-btn-padding-x: 26px;
    --jo-btn-font-size: 15px;
  }
}


/* =========================================================
   13. TABLET / iPAD LANDSCAPE / MENŠÍ NOTEBOOK
   768–1199 px
   ========================================================= */

@media (min-width: 768px) and (max-width: 1199px) {
  :root {
    --jo-btn-height: 44px;
    --jo-btn-height-small: 40px;
    --jo-btn-padding-x: 22px;
    --jo-btn-padding-x-small: 18px;
    --jo-btn-font-size: 14px;
    --jo-btn-font-size-small: 13px;
  }

  .josport-mobile-button-v3,
  .banner-wrapper .extended-banner-link {
    padding: 12px var(--jo-btn-padding-x) !important;
    font-size: var(--jo-btn-font-size) !important;
  }

  .advancedOrder__buttons .btn-conversion,
  .cart-content .btn-conversion,
  .ordering-process .btn-conversion {
    min-height: 44px;
  }
}


/* =========================================================
   14. MOBIL / iPAD PORTRAIT MENŠÍ ŠÍŘKY
   do 767 px
   ========================================================= */

@media (max-width: 767px) {
  :root {
    --jo-btn-radius: 11px;
    --jo-btn-radius-small: 9px;

    --jo-btn-height: 42px;
    --jo-btn-height-small: 38px;

    --jo-btn-padding-x: 18px;
    --jo-btn-padding-x-small: 15px;

    --jo-btn-font-size: 13px;
    --jo-btn-font-size-small: 12px;
  }

  .josport-mobile-button-v3,
  .banner-wrapper .extended-banner-link {
    padding: 11px var(--jo-btn-padding-x) !important;
    font-size: var(--jo-btn-font-size) !important;
    border-radius: var(--jo-btn-radius) !important;
  }

  .products .product .btn,
  .products-block .product .btn,
  .product .p-bottom .btn,
  .product .p-tools .btn {
    border-radius: var(--jo-btn-radius-small) !important;
  }

  .advancedOrder__buttons .btn,
  .cart-content .btn-conversion,
  .ordering-process .btn-conversion {
    min-height: 44px;
  }

  .filters-unveil-button-wrapper .btn.btn-default.unveil-button,
  .filters-unveil-button-wrapper .unveil-button {
    min-height: 50px !important;
    border-radius: var(--jo-btn-radius) !important;
  }
}


/* =========================================================
   15. VELMI MALÉ MOBILY
   do 420 px
   ========================================================= */

@media (max-width: 420px) {
  :root {
    --jo-btn-padding-x: 16px;
    --jo-btn-font-size: 13px;
  }

  .josport-mobile-button-v3,
  .banner-wrapper .extended-banner-link {
    padding: 10px 16px !important;
  }

  .products .product .btn,
  .products-block .product .btn {
    font-size: 13px !important;
  }
}


/* =========================================================
   16. BANNER CTA — PEVNÉ SJEDNOCENÍ ROZMĚRŮ
   Přidáno ve V3 kvůli přepisování rozměrů původním CSS.
   ========================================================= */

.josport-mobile-button-v3,
.banner-wrapper .extended-banner-link {
  box-sizing: border-box !important;
  width: 104px !important;
  min-width: 104px !important;
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 16px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-size: 14px !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap !important;
}

/* Tablet / iPad */
@media (min-width: 768px) and (max-width: 1199px) {
  .josport-mobile-button-v3,
  .banner-wrapper .extended-banner-link {
    width: 98px !important;
    min-width: 98px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    font-size: 13px !important;
  }
}

/* Mobil */
@media (max-width: 767px) {
  .josport-mobile-button-v3,
  .banner-wrapper .extended-banner-link {
    width: 92px !important;
    min-width: 92px !important;
    height: 42px !important;
    min-height: 42px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
  }
}