/* =========================================================
   JOSPORT.CZ — REDESIGN 2026 / BUTTON SYSTEM V1
   Sjednocený styl tlačítek pro Shoptet.
   ========================================================= */

: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-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;
}

/* Primární a 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 {
  background: var(--jo-btn-primary-active) !important;
  border-color: var(--jo-btn-primary-active) !important;
  transform: translateY(0);
}

/* Sekundární / zpět / neutrální */
.btn-default,
.btn-secondary,
.btn-cart,
.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,
.btn-cart: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);
}

/* =========================================================
   2. PRODUKTOVÉ KARTY — DETAIL / LUPA / KOŠÍK
   ========================================================= */

/* Textové tlačítko DETAIL */
.products .product .btn,
.products-block .product .btn,
.product .p-bottom .btn,
.product .p-tools .btn {
  border-radius: var(--jo-btn-radius-small) !important;
}

/* Malá ikonová tlačítka v produktových kartách */
.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"] {
  border-radius: var(--jo-btn-radius-small) !important;
  overflow: hidden;
}

/* Zachová čtvercový rozměr ikony */
.products .product .btn.btn-primary[aria-hidden="true"],
.products-block .product .btn.btn-primary[aria-hidden="true"] {
  min-width: 40px;
  min-height: 40px;
}

/* =========================================================
   3. KOŠÍK, POPUPY A 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 {
  box-shadow: var(--jo-btn-shadow) !important;
}

/* =========================================================
   4. FORMULÁŘE, PŘIHLÁŠENÍ, 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;
}

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

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

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

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

/* =========================================================
   7. VYPNUTÁ TLAČÍTKA
   ========================================================= */

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

/* =========================================================
   8. MOBIL
   ========================================================= */

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

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