/*
 * BOIT Kyber Akademie — Global Design System Fixes
 * Přidat do child theme style.css nebo jako samostatný soubor
 * načtený z functions.php pomocí wp_enqueue_style()
 *
 * Verze: 1.0 | 2026-10-03
 * ─────────────────────────────────────────────────────────
 */

/* ═══════════════════════════════════════════════
   0. BOIT DESIGN TOKENS
   ═══════════════════════════════════════════════ */
:root {
  /* Barvy */
  --boit-bg:           #000000;
  --boit-surface-1:    #181B20;
  --boit-surface-2:    #232833;
  --boit-accent:       #D3FD22;       /* limetka — primární akce */
  --boit-accent-hover: #e8ff66;
  --boit-accent-text:  #000000;       /* text NA limetkových prvcích */
  --boit-purple:       #AE00FF;       /* sekundární akcent */
  --boit-purple-hover: #c840ff;
  --boit-text-heading: #E5E9EF;
  --boit-text-body:    #C7CDD9;
  --boit-text-muted:   #8A939F;
  --boit-border:       #2C2F36;

  /* Typografie */
  --boit-font: 'Inconsolata', ui-monospace, 'Courier New', monospace;

  /* Cut corners */
  --cut-btn:  12px;     /* tlačítka */
  --cut-card: 18px;     /* karty */
  --cut-lg:   32px;     /* velké plochy */
}


/* ═══════════════════════════════════════════════
   1. FONT — Inconsolata všude, vždy
   Přebíjí Sora (WooCommerce/Elementor default)
   a Courier New (systémový fallback)
   ═══════════════════════════════════════════════ */

/* Načtení fontu (pokud ještě není v child theme functions.php) */
/* @import url('https://fonts.googleapis.com/css2?family=Inconsolata:wdth,wght@75..125,200..900&display=swap'); */

body,
body *,
input, textarea, select, button,
.elementor-widget-container,
.woocommerce,
.woocommerce-page,
.wc-block-grid,
.wp-block-woocommerce-all-products {
  font-family: var(--boit-font) !important;
}

/* Konkrétní WooCommerce a Elementor prvky co unikají */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.product_title,
.woocommerce-loop-product__title,
.entry-title,
.widget-title,
.woocommerce-products-header__title,
.related.products > h2,
.upsells.products > h2,
p.stars a,
.woocommerce-breadcrumb {
  font-family: var(--boit-font) !important;
}


/* ═══════════════════════════════════════════════
   2. NADPISY — uppercase + správná barva
   ═══════════════════════════════════════════════ */

h1, h2, h3,
.elementor-heading-title,
.product_title,
.woocommerce-loop-product__title,
.entry-title,
.related.products > h2,
.upsells.products > h2 {
  text-transform: uppercase !important;
  color: var(--boit-text-heading) !important;
  letter-spacing: 0.02em;
  line-height: 1.15;
}

h4, h5, h6 {
  font-family: var(--boit-font) !important;
  color: var(--boit-text-heading) !important;
}


/* ═══════════════════════════════════════════════
   3. GLOBÁLNÍ POZADÍ & TEXT
   ═══════════════════════════════════════════════ */

body {
  background-color: var(--boit-bg) !important;
  color: var(--boit-text-body) !important;
}

p, li, td, th, label, span {
  color: var(--boit-text-body);
}


/* ═══════════════════════════════════════════════
   4. TLAČÍTKA — seříznuté rohy (správná technika)
   Outer polygon = border barva (background prvku)
   Inner ::before = výplň
   Nikdy nekombinovat border + clip-path!
   ═══════════════════════════════════════════════ */

/* ─── Sdílený základ pro všechna BOIT tlačítka ─── */
.btn,
.btn-primary,
.btn-secondary,
.elementor-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .single_add_to_cart_button,
.woocommerce .checkout-button,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.added_to_cart {
  --cut: var(--cut-btn);
  --inner-cut: calc(var(--cut) - 0.585786px);

  position: relative !important;
  isolation: isolate !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 24px !important;

  /* Reset všeho co koliduje */
  border: 0 !important;
  border-radius: 0 !important;
  outline: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  cursor: pointer !important;

  font-family: var(--boit-font) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  white-space: nowrap !important;

  transition: background-color 0.18s ease, color 0.18s ease !important;
}

/* Polygon vnějšího obalu (viditelná šikmá hrana = border) */
.btn::before,
.btn-primary::before,
.btn-secondary::before,
.elementor-button::before,
.woocommerce a.button::before,
.woocommerce button.button::before,
.woocommerce input.button::before,
.woocommerce #respond input#submit::before,
.woocommerce .single_add_to_cart_button::before,
.woocommerce .checkout-button::before,
.woocommerce .wc-proceed-to-checkout a.checkout-button::before,
.added_to_cart::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  z-index: -1 !important;
  pointer-events: none !important;
}


/* ─── PRIMÁRNÍ tlačítko (limetkové) ─── */
.btn-primary,
.elementor-button.elementor-button-primary,
.woocommerce .single_add_to_cart_button,
.woocommerce .checkout-button,
.woocommerce .wc-proceed-to-checkout a.checkout-button {
  --edge: var(--boit-accent);
  --fill: var(--boit-accent);

  background: var(--edge) !important;
  color: var(--boit-accent-text) !important;

  clip-path: polygon(
    0 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut))
  ) !important;
}

.btn-primary::before,
.elementor-button.elementor-button-primary::before,
.woocommerce .single_add_to_cart_button::before,
.woocommerce .checkout-button::before,
.woocommerce .wc-proceed-to-checkout a.checkout-button::before {
  background: var(--fill) !important;
  clip-path: polygon(
    0 0,
    calc(100% - var(--inner-cut)) 0,
    100% var(--inner-cut),
    100% 100%,
    var(--inner-cut) 100%,
    0 calc(100% - var(--inner-cut))
  ) !important;
}

.btn-primary:hover, .btn-primary:focus-visible,
.woocommerce .single_add_to_cart_button:hover,
.woocommerce .checkout-button:hover {
  --edge: var(--boit-accent-hover);
  --fill: var(--boit-accent-hover);
  background: var(--boit-accent-hover) !important;
}


/* ─── SEKUNDÁRNÍ tlačítko (fialová obrysová hrana) ─── */
.btn-secondary,
.elementor-button.elementor-button-secondary,
.woocommerce a.button:not(.single_add_to_cart_button):not(.checkout-button),
.woocommerce button.button:not(.single_add_to_cart_button):not(.checkout-button) {
  --edge: var(--boit-purple);
  --fill: transparent;                 /* průhledná výplň = "outlined" */

  background: var(--edge) !important;  /* vnější polygon = fialová hrana */
  color: var(--boit-purple) !important;

  clip-path: polygon(
    0 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut))
  ) !important;
}

.btn-secondary::before,
.elementor-button.elementor-button-secondary::before,
.woocommerce a.button:not(.single_add_to_cart_button):not(.checkout-button)::before,
.woocommerce button.button:not(.single_add_to_cart_button):not(.checkout-button)::before {
  background: var(--boit-bg) !important;  /* výplň = tmavé pozadí */
  clip-path: polygon(
    0 0,
    calc(100% - var(--inner-cut)) 0,
    100% var(--inner-cut),
    100% 100%,
    var(--inner-cut) 100%,
    0 calc(100% - var(--inner-cut))
  ) !important;
}

.btn-secondary:hover, .btn-secondary:focus-visible,
.woocommerce a.button:not(.single_add_to_cart_button):not(.checkout-button):hover {
  --edge: var(--boit-purple-hover);
  background: var(--boit-purple-hover) !important;
  color: #fff !important;
}

/* Focus visible — jasný stav pro klávesnici (outline se musí dostat přes clip-path) */
.btn:focus-visible,
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible {
  outline: 2px solid var(--boit-accent) !important;
  outline-offset: 4px !important;
}


/* ═══════════════════════════════════════════════
   5. KARTY KURZŮ (.kurz-thumb) — seříznuté rohy
   ═══════════════════════════════════════════════ */

.kurz-thumb,
.kurz-card,
.elementor-posts--skin-classic .elementor-post,
.wc-block-grid__product,
.products .product {
  --cut: var(--cut-card);
  --inner-cut: calc(var(--cut) - 0.585786px);
  --edge: var(--boit-border);
  --fill: var(--boit-surface-1);

  position: relative !important;
  isolation: isolate !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--edge) !important;
  overflow: visible !important;   /* nutné pro clip-path efekt */

  clip-path: polygon(
    0 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut))
  ) !important;
}

.kurz-thumb::before,
.kurz-card::before,
.elementor-posts--skin-classic .elementor-post::before,
.wc-block-grid__product::before,
.products .product::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background: var(--fill) !important;
  clip-path: polygon(
    0 0,
    calc(100% - var(--inner-cut)) 0,
    100% var(--inner-cut),
    100% 100%,
    var(--inner-cut) 100%,
    0 calc(100% - var(--inner-cut))
  ) !important;
}

.kurz-thumb:hover,
.kurz-card:hover,
.wc-block-grid__product:hover,
.products .product:hover {
  --edge: var(--boit-purple) !important;
}


/* ═══════════════════════════════════════════════
   6. BLOG KARTY — seříznuté rohy
   ═══════════════════════════════════════════════ */

.elementor-post__card,
.blog .hentry,
.blog article,
.elementor-posts .elementor-post {
  --cut: var(--cut-card);
  --inner-cut: calc(var(--cut) - 0.585786px);
  --edge: var(--boit-border);
  --fill: var(--boit-surface-1);

  position: relative !important;
  isolation: isolate !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: var(--edge) !important;

  clip-path: polygon(
    0 0,
    calc(100% - var(--cut)) 0,
    100% var(--cut),
    100% 100%,
    var(--cut) 100%,
    0 calc(100% - var(--cut))
  ) !important;
}

.elementor-post__card::before,
.blog .hentry::before,
.blog article::before,
.elementor-posts .elementor-post::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background: var(--fill) !important;
  clip-path: polygon(
    0 0,
    calc(100% - var(--inner-cut)) 0,
    100% var(--inner-cut),
    100% 100%,
    var(--inner-cut) 100%,
    0 calc(100% - var(--inner-cut))
  ) !important;
}


/* ═══════════════════════════════════════════════
   7. WOOCOMMERCE — komplexní override
   ═══════════════════════════════════════════════ */

/* Odstraň modrý WooCommerce default */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
  background-color: transparent !important;  /* přebíjí jen kvůli pořadí; skutečná barva z sekce 4 */
}

/* WooCommerce "Přidat do košíku" = primární CTA */
.woocommerce .single_add_to_cart_button,
.woocommerce .cart button[type="submit"] {
  --cut: 14px;
  width: auto !important;
  min-width: 220px !important;
}

/* Ceny */
.woocommerce .price,
.woocommerce .amount,
.woocommerce-Price-amount {
  color: var(--boit-accent) !important;
  font-family: var(--boit-font) !important;
  font-weight: 700 !important;
}

/* Přeškrtnutá původní cena */
.woocommerce .price del,
.woocommerce-Price-amount del {
  color: var(--boit-text-muted) !important;
  opacity: 0.7 !important;
}

/* Badge sale */
.woocommerce span.onsale {
  background: var(--boit-accent) !important;
  color: var(--boit-accent-text) !important;
  font-family: var(--boit-font) !important;
  font-weight: 700 !important;
  border-radius: 0 !important;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)) !important;
}

/* Breadcrumb */
.woocommerce-breadcrumb {
  color: var(--boit-text-muted) !important;
  font-size: 13px !important;
}

.woocommerce-breadcrumb a {
  color: var(--boit-text-muted) !important;
  text-decoration: underline !important;
}

.woocommerce-breadcrumb a:hover {
  color: var(--boit-accent) !important;
}

/* Tab navigace (Popis, Hodnocení…) */
.woocommerce-tabs .tabs li a,
.woocommerce-tabs .tabs li {
  font-family: var(--boit-font) !important;
  background: var(--boit-surface-1) !important;
  border-color: var(--boit-border) !important;
  color: var(--boit-text-body) !important;
  border-radius: 0 !important;
}

.woocommerce-tabs .tabs li.active a {
  color: var(--boit-accent) !important;
  background: var(--boit-surface-2) !important;
}

/* Popis produktu */
.woocommerce-product-details__short-description,
.woocommerce-Tabs-panel {
  color: var(--boit-text-body) !important;
  font-family: var(--boit-font) !important;
}

/* Tabulky */
.woocommerce table,
.shop_table {
  font-family: var(--boit-font) !important;
  border-color: var(--boit-border) !important;
  color: var(--boit-text-body) !important;
}

.woocommerce table th {
  color: var(--boit-text-heading) !important;
  text-transform: uppercase !important;
  background: var(--boit-surface-1) !important;
  border-color: var(--boit-border) !important;
}

.woocommerce table td {
  border-color: var(--boit-border) !important;
}

/* Notices (chyba, úspěch) */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info {
  font-family: var(--boit-font) !important;
  border-radius: 0 !important;
  border-top: 4px solid var(--boit-accent) !important;
  background: var(--boit-surface-1) !important;
  color: var(--boit-text-body) !important;
}

.woocommerce-error {
  border-top-color: #ff4d4d !important;
}

/* Notice button (Pokračovat v nákupu apod.) */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
  background: transparent !important;
  color: var(--boit-accent) !important;
  border: 1px solid var(--boit-accent) !important;
  padding: 6px 16px !important;
  float: right !important;
}


/* ═══════════════════════════════════════════════
   7B. KOŠÍK & POKLADNA
   ═══════════════════════════════════════════════ */

/* Cart table — ostré rohy, BOIT border */
.shop_table,
.woocommerce table.cart {
  border-radius: 0 !important;
  border-color: var(--boit-border) !important;
}
.shop_table thead tr,
.woocommerce table.cart thead tr {
  background: var(--boit-surface-1) !important;
}
.shop_table tbody tr:hover td {
  background: rgba(211,253,34,.04) !important;
}

/* Remove (✕) tlačítko u produktu */
.woocommerce table.cart a.remove {
  color: #ff5555 !important;
  background: transparent !important;
  border: 1px solid #ff5555 !important;
  border-radius: 0 !important;
  width: 22px !important;
  height: 22px !important;
  line-height: 20px !important;
  font-size: 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  transition: background .15s, color .15s !important;
}
.woocommerce table.cart a.remove:hover {
  background: #ff5555 !important;
  color: #000 !important;
}

/* Coupon row */
.woocommerce table.cart td.actions {
  background: var(--boit-surface-1) !important;
  border-top: 1px solid var(--boit-border) !important;
}
.woocommerce table.cart td.actions .coupon input.input-text {
  background: var(--boit-surface-2) !important;
  border: 1px solid var(--boit-border) !important;
  border-radius: 0 !important;
  color: var(--boit-text-body) !important;
  padding: 10px 14px !important;
  min-width: 200px !important;
}
/* Slevový kód – Použít button (byl purple bg + purple text → neviditelný) */
.woocommerce table.cart td.actions [name="apply_coupon"],
.woocommerce table.cart td.actions .coupon .button {
  background: transparent !important;
  color: var(--boit-purple) !important;
  border: 1px solid var(--boit-purple) !important;
  border-radius: 0 !important;
  font-family: var(--boit-font) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  padding: 10px 18px !important;
  cursor: pointer !important;
  transition: background .15s, color .15s !important;
}
.woocommerce table.cart td.actions [name="apply_coupon"]:hover,
.woocommerce table.cart td.actions .coupon .button:hover {
  background: var(--boit-purple) !important;
  color: #fff !important;
}

/* Aktualizovat košík */
.woocommerce table.cart td.actions [name="update_cart"] {
  background: transparent !important;
  color: var(--boit-text-muted) !important;
  border: 1px solid var(--boit-border) !important;
  border-radius: 0 !important;
  font-family: var(--boit-font) !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  padding: 10px 18px !important;
  cursor: pointer !important;
}

/* Cart totals box */
.cart_totals {
  background: var(--boit-surface-1) !important;
  border: 1px solid var(--boit-border) !important;
  border-radius: 0 !important;
  padding: 28px !important;
}
.cart_totals h2 {
  font-size: 13px !important;
  letter-spacing: .12em !important;
  margin-bottom: 20px !important;
}
.cart_totals table {
  border: 0 !important;
  background: transparent !important;
}
.cart_totals table th,
.cart_totals table td {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--boit-border) !important;
  padding: 12px 0 !important;
}
.cart_totals .order-total td strong,
.cart_totals .order-total .woocommerce-Price-amount {
  color: var(--boit-accent) !important;
  font-size: 22px !important;
}

/* Checkout button v košíku */
.wc-proceed-to-checkout .checkout-button,
.cart_totals .checkout-button {
  display: block !important;
  width: 100% !important;
  margin-top: 20px !important;
  padding: 15px 24px !important;
  background: var(--boit-accent) !important;
  color: var(--boit-accent-text) !important;
  font-family: var(--boit-font) !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  text-align: center !important;
  text-decoration: none !important;
  border-radius: 0 !important;
  border: 0 !important;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)) !important;
  transition: background .18s !important;
}
.wc-proceed-to-checkout .checkout-button:hover,
.cart_totals .checkout-button:hover {
  background: var(--boit-accent-hover) !important;
}

/* ── POKLADNA (Checkout) ── */

/* Step indicator (WPMC) */
.wpmc-tabs-wrapper {
  background: var(--boit-surface-1) !important;
  border-bottom: 1px solid var(--boit-border) !important;
  padding: 0 !important;
  margin-bottom: 40px !important;
}
.wpmc-tabs-list {
  display: flex !important;
  gap: 0 !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.wpmc-tab-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 16px 24px !important;
  font-family: var(--boit-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  color: var(--boit-text-muted) !important;
  border-bottom: 2px solid transparent !important;
  cursor: default !important;
}
.wpmc-tab-item.current {
  color: var(--boit-accent) !important;
  border-bottom-color: var(--boit-accent) !important;
}
.wpmc-tab-item.done {
  color: var(--boit-text-muted) !important;
  border-bottom-color: var(--boit-border) !important;
}
.wpmc-tab-number {
  width: 22px !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--boit-border) !important;
  color: var(--boit-text-muted) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  flex-shrink: 0 !important;
}
.wpmc-tab-item.current .wpmc-tab-number {
  background: var(--boit-accent) !important;
  color: #000 !important;
}
.wpmc-tab-item.done .wpmc-tab-number {
  background: var(--boit-border) !important;
}

/* Checkout billing sekce */
.woocommerce-checkout #order_review_heading {
  font-size: 13px !important;
  letter-spacing: .12em !important;
  margin-bottom: 20px !important;
}
.woocommerce-checkout-review-order-table {
  border-radius: 0 !important;
  border-color: var(--boit-border) !important;
}
.woocommerce-checkout-review-order-table thead th {
  background: var(--boit-surface-1) !important;
}
.woocommerce-checkout-review-order-table .order-total td,
.woocommerce-checkout-review-order-table .order-total .woocommerce-Price-amount {
  color: var(--boit-accent) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
}

/* Payment box — bylo tmavě šedý text na tmavém bg */
.payment_box {
  background: var(--boit-surface-2) !important;
  color: var(--boit-text-body) !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 16px !important;
  margin-top: 10px !important;
}
.payment_box p,
.payment_box label {
  color: var(--boit-text-body) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

/* Payment methods radio */
.wc_payment_methods .wc_payment_method > label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px !important;
  background: var(--boit-surface-1) !important;
  border: 1px solid var(--boit-border) !important;
  cursor: pointer !important;
  color: var(--boit-text-body) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 14px !important;
}
.wc_payment_methods li.payment_method_stripe.active > label,
.wc_payment_methods li.active > label {
  border-color: var(--boit-purple) !important;
  color: var(--boit-text-heading) !important;
}

/* Place order button */
#place_order,
.woocommerce-checkout #place_order {
  background: var(--boit-accent) !important;
  color: var(--boit-accent-text) !important;
  font-family: var(--boit-font) !important;
  font-weight: 800 !important;
  font-size: 15px !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  border-radius: 0 !important;
  border: 0 !important;
  padding: 16px 32px !important;
  width: 100% !important;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)) !important;
  transition: background .18s !important;
  cursor: pointer !important;
}
#place_order:hover {
  background: var(--boit-accent-hover) !important;
}

/* Checkout coupon forma */
.woocommerce form.checkout_coupon {
  background: var(--boit-surface-1) !important;
  border: 1px solid var(--boit-border) !important;
  border-radius: 0 !important;
}

/* Order received / thank you page */
.woocommerce-order-received .woocommerce-thankyou-order-received,
.woocommerce-order h2 {
  color: var(--boit-accent) !important;
}


/* ═══════════════════════════════════════════════
   8. FORMULÁŘE — vstupy v BOIT stylu
   ═══════════════════════════════════════════════ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
  font-family: var(--boit-font) !important;
  background: var(--boit-surface-1) !important;
  color: var(--boit-text-body) !important;
  border: 1px solid var(--boit-border) !important;
  border-radius: 0 !important;
  padding: 10px 14px !important;
  box-shadow: none !important;
  transition: border-color 0.18s ease !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--boit-purple) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(174, 0, 255, 0.2) !important;
}

label {
  font-family: var(--boit-font) !important;
  color: var(--boit-text-body) !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}


/* ═══════════════════════════════════════════════
   9. NAVIGACE
   ═══════════════════════════════════════════════ */

.site-header,
#masthead,
.elementor-location-header {
  background: var(--boit-bg) !important;
  border-bottom: 1px solid var(--boit-border) !important;
}

.main-navigation a,
.nav-menu a,
.elementor-nav-menu a {
  font-family: var(--boit-font) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--boit-text-heading) !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.main-navigation a:hover,
.nav-menu a:hover,
.elementor-nav-menu a:hover {
  color: var(--boit-accent) !important;
}

/* Dropdown */
.main-navigation ul ul,
.elementor-nav-menu .sub-menu {
  background: var(--boit-surface-1) !important;
  border: 1px solid var(--boit-border) !important;
  border-radius: 0 !important;
}


/* ═══════════════════════════════════════════════
   10. FOOTER
   ═══════════════════════════════════════════════ */

.site-footer,
#colophon,
.elementor-location-footer {
  background: var(--boit-surface-1) !important;
  border-top: 1px solid var(--boit-border) !important;
  color: var(--boit-text-muted) !important;
  font-family: var(--boit-font) !important;
}

.site-footer a,
.elementor-location-footer a {
  color: var(--boit-text-muted) !important;
  text-decoration: none !important;
}

.site-footer a:hover,
.elementor-location-footer a:hover {
  color: var(--boit-accent) !important;
}


/* ═══════════════════════════════════════════════
   11. ACCESSIBILITY & REDUCED MOTION
   ═══════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Skip to content link */
.skip-link:focus {
  background: var(--boit-accent) !important;
  color: var(--boit-accent-text) !important;
  font-family: var(--boit-font) !important;
}

/* ═══════════════════════════════════════════════
   TUTOR LMS — LESSON PLAYER (BOIT SKIN)
   Classes: .tutor-learning-area and children
   ═══════════════════════════════════════════════ */

/* ── Reset: celá learning area ── */
.tutor-learning-area,
.tutor-learning-area * {
  font-family: var(--boit-font) !important;
  box-sizing: border-box !important;
}

.tutor-learning-area {
  background: var(--boit-bg) !important;
  color: var(--boit-text-body) !important;
  min-height: 100vh !important;
  display: flex !important;
  flex-direction: column !important;
}

/* ── Top header bar ── */
.tutor-learning-header {
  background: var(--boit-surface-1) !important;
  border-bottom: 1px solid var(--boit-border) !important;
  padding: 0 !important;
  height: 52px !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

.tutor-learning-header-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 52px !important;
  padding: 0 16px !important;
  max-width: 100% !important;
}

.tutor-learning-header-title,
.tutor-learning-header-title * {
  color: var(--boit-text-heading) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  line-height: 1.3 !important;
}

/* Back-arrow button */
.tutor-learning-header-back .tutor-btn,
.tutor-learning-header .tutor-btn-ghost {
  background: transparent !important;
  border: 1px solid var(--boit-border) !important;
  color: var(--boit-text-muted) !important;
  border-radius: 0 !important;
  padding: 6px 10px !important;
}
.tutor-learning-header-back .tutor-btn:hover,
.tutor-learning-header .tutor-btn-ghost:hover {
  border-color: var(--boit-accent) !important;
  color: var(--boit-accent) !important;
  background: transparent !important;
}

.tutor-learning-header svg path,
.tutor-learning-header svg polyline,
.tutor-learning-header svg line {
  stroke: currentColor !important;
}

/* ── Body: sidebar + content ── */
.tutor-learning-area-body {
  display: flex !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  background: var(--boit-bg) !important;
}

/* ── SIDEBAR ── */
.tutor-learning-sidebar {
  background: var(--boit-surface-1) !important;
  border-right: 1px solid var(--boit-border) !important;
  width: 300px !important;
  min-width: 260px !important;
  max-width: 300px !important;
  overflow-y: auto !important;
  display: flex !important;
  flex-direction: column !important;
  flex-shrink: 0 !important;
}

/* Sidebar title */
.tutor-learning-sidebar > .tutor-learning-header-title,
.tutor-learning-sidebar > h5 {
  display: none !important;  /* skrytý – je v headeru */
}

/* Progress bar */
.tutor-learning-progress {
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--boit-border) !important;
  background: var(--boit-surface-2) !important;
}

.tutor-learning-progress-text,
.tutor-learning-progress-text * {
  font-size: 11px !important;
  color: var(--boit-text-muted) !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}

.tutor-progress-bar {
  background: var(--boit-border) !important;
  height: 3px !important;
  border-radius: 0 !important;
}

.tutor-progress-bar-fill {
  background: var(--boit-accent) !important;
  height: 3px !important;
  border-radius: 0 !important;
  transition: width 0.3s ease !important;
}

/* ── Curriculum nav ── */
.tutor-learning-nav {
  padding: 8px 0 !important;
}

/* Topic/section header */
.tutor-learning-nav-topic {
  border-bottom: 1px solid var(--boit-border) !important;
}

.tutor-learning-nav-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 16px !important;
  cursor: pointer !important;
  background: transparent !important;
  transition: background 0.15s !important;
}
.tutor-learning-nav-header:hover {
  background: var(--boit-surface-2) !important;
}

.tutor-learning-nav-header-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--boit-text-heading) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  flex: 1 !important;
  line-height: 1.4 !important;
}

.tutor-learning-nav-header-progress {
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  border: 2px solid var(--boit-border) !important;
  background: transparent !important;
  flex-shrink: 0 !important;
}

.tutor-learning-nav-header-arrow svg {
  width: 14px !important;
  height: 14px !important;
  color: var(--boit-text-muted) !important;
  transition: transform 0.2s !important;
}
.tutor-learning-nav-topic.expanded .tutor-learning-nav-header-arrow svg,
.tutor-learning-nav-topic.active .tutor-learning-nav-header-arrow svg {
  transform: rotate(180deg) !important;
}

/* Lesson items inside topic */
.tutor-learning-nav-body {
  display: none !important;
}
.tutor-learning-nav-topic.expanded .tutor-learning-nav-body,
.tutor-learning-nav-topic.active .tutor-learning-nav-body {
  display: block !important;
}

.tutor-learning-nav-item {
  display: flex !important;
  flex-direction: column !important;
  padding: 8px 16px 8px 32px !important;
  text-decoration: none !important;
  border-left: 3px solid transparent !important;
  background: transparent !important;
  transition: background 0.15s, border-color 0.15s !important;
  gap: 2px !important;
}
.tutor-learning-nav-item:hover {
  background: var(--boit-surface-2) !important;
  border-left-color: var(--boit-purple) !important;
  text-decoration: none !important;
}
.tutor-learning-nav-item.active {
  background: rgba(211, 253, 34, 0.06) !important;
  border-left-color: var(--boit-accent) !important;
}

.tutor-learning-nav-item > *:first-child {
  font-size: 12px !important;
  color: var(--boit-text-body) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}
.tutor-learning-nav-item.active > *:first-child {
  color: var(--boit-accent) !important;
}
.tutor-learning-nav-item > *:last-child {
  font-size: 10px !important;
  color: var(--boit-text-muted) !important;
  letter-spacing: 0.04em !important;
}

/* ── MAIN CONTENT AREA ── */
.tutor-learning-area-content {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  background: var(--boit-bg) !important;
  min-width: 0 !important;
}

.tutor-learning-area-container {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

.tutor-lesson-content {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

/* ── Video wrapper ── */
.tutor-lesson-video-wrapper,
.tutor-lesson-video-wrapper.tutor-border-b {
  background: #000 !important;
  border-bottom: 1px solid var(--boit-border) !important;
  padding: 0 !important;
}

.tutor-video-player {
  width: 100% !important;
  max-width: 100% !important;
}

/* Plyr overrides */
.plyr {
  --plyr-color-main: var(--boit-accent) !important;
  font-family: var(--boit-font) !important;
}
.plyr__control--overlaid {
  background: var(--boit-accent) !important;
  color: var(--boit-accent-text) !important;
  border-radius: 0 !important;
}
.plyr__progress__buffer::-webkit-progress-value,
.plyr__volume__display { background: var(--boit-accent) !important; }

/* Tabs below video (Oznámení, Recenze…) */
.tutor-lesson-content-tab .tutor-tabs,
.tutor-lesson-content-tab [role="tablist"] {
  background: var(--boit-surface-1) !important;
  border-bottom: 1px solid var(--boit-border) !important;
  display: flex !important;
  gap: 0 !important;
  padding: 0 16px !important;
}

.tutor-lesson-content-tab [role="tab"],
.tutor-lesson-content-tab .tutor-tab-item,
.tutor-lesson-content-tab .tutor-tabs li a {
  font-family: var(--boit-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--boit-text-muted) !important;
  padding: 12px 16px !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: color 0.15s, border-color 0.15s !important;
}
.tutor-lesson-content-tab [role="tab"]:hover,
.tutor-lesson-content-tab .tutor-tabs li a:hover {
  color: var(--boit-text-heading) !important;
}
.tutor-lesson-content-tab [role="tab"][aria-selected="true"],
.tutor-lesson-content-tab .tutor-tab-item.active,
.tutor-lesson-content-tab .tutor-tabs li.active a {
  color: var(--boit-accent) !important;
  border-bottom-color: var(--boit-accent) !important;
}

/* Tab panel content */
.tutor-lesson-content-tab [role="tabpanel"],
.tutor-tab-content {
  background: var(--boit-bg) !important;
  color: var(--boit-text-body) !important;
  padding: 24px !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

/* ── Prev/Next footer ── */
.tutor-learning-area-footer {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  background: var(--boit-surface-1) !important;
  border-top: 1px solid var(--boit-border) !important;
  gap: 12px !important;
}

.tutor-learning-area-footer .tutor-btn {
  font-family: var(--boit-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 8px 20px !important;
  border-radius: 0 !important;
  background: var(--boit-accent) !important;
  color: var(--boit-accent-text) !important;
  border: none !important;
  text-decoration: none !important;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)) !important;
  transition: opacity 0.15s !important;
  position: relative !important;
}
.tutor-learning-area-footer .tutor-btn:hover {
  opacity: 0.88 !important;
  color: var(--boit-accent-text) !important;
}
.tutor-learning-area-footer .tutor-btn.disabled,
.tutor-learning-area-footer .tutor-btn[disabled] {
  background: var(--boit-surface-2) !important;
  color: var(--boit-text-muted) !important;
  clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)) !important;
  cursor: not-allowed !important;
}

/* SVG icons in footer nav */
.tutor-learning-area-footer svg {
  color: currentColor !important;
}
.tutor-learning-area-footer svg path,
.tutor-learning-area-footer svg polyline {
  stroke: currentColor !important;
}

/* ── Sidebar expand button ── */
.tutor-expand-btn {
  background: var(--boit-surface-1) !important;
  border: 1px solid var(--boit-border) !important;
  color: var(--boit-text-muted) !important;
  border-radius: 0 !important;
  width: 28px !important;
  min-width: 28px !important;
  padding: 0 !important;
}
.tutor-expand-btn:hover {
  border-color: var(--boit-accent) !important;
  color: var(--boit-accent) !important;
}

/* ── Mobile: full width below 768px ── */
@media (max-width: 768px) {
  .tutor-learning-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid var(--boit-border) !important;
  }
  .tutor-learning-area-body {
    flex-direction: column !important;
  }
  .tutor-learning-area-footer {
    flex-wrap: wrap !important;
  }
}

/* ── Scrollbar styling ── */
.tutor-learning-sidebar::-webkit-scrollbar { width: 4px !important; }
.tutor-learning-sidebar::-webkit-scrollbar-track { background: var(--boit-bg) !important; }
.tutor-learning-sidebar::-webkit-scrollbar-thumb { background: var(--boit-border) !important; }