/* ==========================================================================
   CART PAGE — MaskeZaMob.rs
   File: flatsome-child/css/_cart.css
   Verzija: 1.0
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Sakrij sidebar widget (Archives/Categories) na cart/checkout stranici
   -------------------------------------------------------------------------- */
.woocommerce-cart .widget_archive,
.woocommerce-cart .widget_categories,
.woocommerce-cart .sidebar,
.woocommerce-checkout .widget_archive,
.woocommerce-checkout .widget_categories,
.woocommerce-checkout .sidebar {
  display: none !important;
}

/* --------------------------------------------------------------------------
   2. Progress bar — SHOPPING CART > CHECKOUT DETAILS > ORDER COMPLETE
   -------------------------------------------------------------------------- */
.woocommerce-cart .woocommerce-cart-form,
.woocommerce-cart .cart-collaterals {
  font-family: var(--mzm-font-family);
}

/* Flatsome cart steps */
.woocommerce-cart .steps,
.shop_table.cart ~ .cart-collaterals .steps,
nav.woocommerce-cart-form__cart-item {
  font-family: var(--mzm-font-family);
}

/* Progress steps container */
.woocommerce ol.progtrckr,
.woocommerce-cart .checkout-steps,
.cart-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: clamp(1rem, 3vw, 1.5rem) 0 clamp(1.5rem, 4vw, 2.5rem);
  list-style: none;
  margin: 0;
  font-family: var(--mzm-font-family);
}

/* Flatsome specifični progress bar */
.woocommerce-cart .woocommerce-steps,
.woocommerce .woocommerce-steps {
  text-align: center;
  padding: clamp(1rem, 3vw, 1.5rem) 0 clamp(1.5rem, 4vw, 2rem);
  font-family: var(--mzm-font-family);
  font-size: var(--mzm-text-sm);
}

.woocommerce .woocommerce-steps a,
.woocommerce .woocommerce-steps span {
  color: var(--mzm-text-secondary);
  font-weight: var(--mzm-font-medium);
  text-decoration: none;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

.woocommerce .woocommerce-steps .current a,
.woocommerce .woocommerce-steps .current span {
  color: var(--mzm-accent);
  font-weight: var(--mzm-font-bold);
}

/* Separator između koraka */
.woocommerce .woocommerce-steps li::after {
  color: var(--mzm-border);
  margin: 0 0.5rem;
}

/* --------------------------------------------------------------------------
   3. Cart tabela — proizvodi
   -------------------------------------------------------------------------- */
.woocommerce-cart table.shop_table {
  border: var(--mzm-border-width) solid var(--mzm-border);
  border-radius: var(--mzm-radius-md);
  overflow: hidden;
  font-family: var(--mzm-font-family);
  border-collapse: separate;
  border-spacing: 0;
}

.woocommerce-cart table.shop_table th {
  background-color: var(--mzm-surface);
  color: var(--mzm-text-secondary);
  font-size: 0.7rem;
  font-weight: var(--mzm-font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.875rem 1.25rem;
  border-bottom: var(--mzm-border-width) solid var(--mzm-border);
}

.woocommerce-cart table.shop_table td {
  padding: 1.25rem;
  border-bottom: var(--mzm-border-width) solid var(--mzm-border);
  vertical-align: middle;
  font-family: var(--mzm-font-family);
  font-size: var(--mzm-text-sm);
  color: var(--mzm-text-primary);
}

.woocommerce-cart table.shop_table tr:last-child td {
  border-bottom: none;
}

/* Slika proizvoda */
.woocommerce-cart table.shop_table td.product-thumbnail img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: var(--mzm-radius-sm);
  border: var(--mzm-border-width) solid var(--mzm-border);
}

/* Naziv proizvoda */
.woocommerce-cart table.shop_table td.product-name a {
  color: var(--mzm-text-primary);
  font-weight: var(--mzm-font-semibold);
  font-size: var(--mzm-text-sm);
  text-decoration: none;
  transition: color var(--mzm-transition-fast);
}

.woocommerce-cart table.shop_table td.product-name a:hover {
  color: var(--mzm-accent);
}

/* Opis ispod naziva — sakrij (prekratak opis koji se probija) */
.woocommerce-cart table.shop_table td.product-name .product-description,
.woocommerce-cart table.shop_table td.product-name p {
  display: none;
}

/* Cena */
.woocommerce-cart table.shop_table td.product-price,
.woocommerce-cart table.shop_table td.product-subtotal {
  font-weight: var(--mzm-font-semibold);
  color: var(--mzm-text-primary);
}

/* Quantity +/- dugmad */
.woocommerce-cart .quantity .qty {
  font-family: var(--mzm-font-family);
  font-size: var(--mzm-text-sm);
  border: var(--mzm-border-width) solid var(--mzm-border);
  border-radius: var(--mzm-radius-sm);
  padding: 0.35rem 0.5rem;
  width: 52px;
  text-align: center;
}

/* Remove dugme (x) */
.woocommerce-cart table.shop_table td.product-remove a.remove {
  color: var(--mzm-text-secondary) !important;
  font-size: 1.25rem;
  transition: color var(--mzm-transition-fast);
}

.woocommerce-cart table.shop_table td.product-remove a.remove:hover {
  color: #ef4444 !important;
  background: transparent !important;
}

/* --------------------------------------------------------------------------
   4. Cart Totals box
   -------------------------------------------------------------------------- */
.woocommerce-cart .cart-collaterals .cart_totals {
  background-color: var(--mzm-surface);
  border: var(--mzm-border-width) solid var(--mzm-border);
  border-radius: var(--mzm-radius-md);
  padding: 1.5rem;
  font-family: var(--mzm-font-family);
}

.woocommerce-cart .cart_totals h2 {
  font-size: var(--mzm-text-base);
  font-weight: var(--mzm-font-bold);
  color: var(--mzm-text-primary);
  margin: 0 0 1.25rem 0;
  padding-bottom: 1rem;
  border-bottom: var(--mzm-border-width) solid var(--mzm-border);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.8rem;
}

.woocommerce-cart .cart_totals table {
  width: 100%;
  border: none;
  font-family: var(--mzm-font-family);
}

.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
  padding: 0.625rem 0;
  border: none;
  border-bottom: var(--mzm-border-width) solid var(--mzm-border);
  font-size: var(--mzm-text-sm);
  background: transparent;
}

.woocommerce-cart .cart_totals table tr:last-child th,
.woocommerce-cart .cart_totals table tr:last-child td {
  border-bottom: none;
  font-weight: var(--mzm-font-bold);
  font-size: var(--mzm-text-base);
  padding-top: 1rem;
}

/* Kupon sekcija */
.woocommerce-cart .cart_totals .woocommerce-shipping-calculator,
.woocommerce-cart .cart_totals .coupon {
  font-family: var(--mzm-font-family);
  font-size: var(--mzm-text-sm);
}

/* --------------------------------------------------------------------------
   5. "Proceed to Checkout" dugme — accent plava
   -------------------------------------------------------------------------- */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
  background-color: var(--mzm-accent) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--mzm-radius-md) !important;
  font-family: var(--mzm-font-family) !important;
  font-weight: var(--mzm-font-semibold) !important;
  font-size: var(--mzm-text-base) !important;
  padding: 0.875rem 1.5rem !important;
  width: 100%;
  display: block;
  text-align: center;
  transition: background-color var(--mzm-transition-base) !important;
  margin-top: 1.25rem;
  letter-spacing: 0.01em;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
  background-color: #2d6fd4 !important;
}

/* --------------------------------------------------------------------------
   6. Mini korpa dropdown — VIEW CART / CHECKOUT dugmad
   -------------------------------------------------------------------------- */

/* VIEW CART — outline stil */
.cart-sidebar .button.wc-forward,
.widget_shopping_cart .button.wc-forward,
.woocommerce-mini-cart__buttons a:first-child {
  background-color: transparent !important;
  color: var(--mzm-accent) !important;
  border: 2px solid var(--mzm-accent) !important;
  border-radius: var(--mzm-radius-md) !important;
  font-family: var(--mzm-font-family) !important;
  font-weight: var(--mzm-font-semibold) !important;
  transition: all var(--mzm-transition-base) !important;
}

.cart-sidebar .button.wc-forward:hover,
.widget_shopping_cart .button.wc-forward:hover {
  background-color: var(--mzm-accent) !important;
  color: #ffffff !important;
}

/* CHECKOUT — puna plava */
.cart-sidebar .button.checkout,
.widget_shopping_cart .button.checkout,
.woocommerce-mini-cart__buttons a.checkout {
  background-color: var(--mzm-accent) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: var(--mzm-radius-md) !important;
  font-family: var(--mzm-font-family) !important;
  font-weight: var(--mzm-font-semibold) !important;
  transition: background-color var(--mzm-transition-base) !important;
}

.cart-sidebar .button.checkout:hover,
.widget_shopping_cart .button.checkout:hover {
  background-color: #2d6fd4 !important;
}

/* --------------------------------------------------------------------------
   7. WooCommerce notices (success/error poruke)
   -------------------------------------------------------------------------- */
.woocommerce-notices-wrapper .woocommerce-message {
  border-top-color: var(--mzm-accent);
  font-family: var(--mzm-font-family);
  font-size: var(--mzm-text-sm);
}

.woocommerce-notices-wrapper .woocommerce-message a.button {
  background-color: var(--mzm-accent);
  color: #ffffff;
  border-radius: var(--mzm-radius-sm);
  font-family: var(--mzm-font-family);
}

/* --------------------------------------------------------------------------
   8. Mobile cart
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .woocommerce-cart table.shop_table thead {
    display: none;
  }

  .woocommerce-cart table.shop_table td {
    padding: 0.875rem 1rem;
  }

  .woocommerce-cart table.shop_table td.product-thumbnail img {
    width: 56px;
    height: 56px;
  }

  .woocommerce-cart .cart-collaterals .cart_totals {
    padding: 1.25rem;
  }
}
/* --------------------------------------------------------------------------
   WooCommerce Blocks — cart (Flatsome koristi block verziju)
   -------------------------------------------------------------------------- */

/* Proceed to Checkout dugme */
.wc-block-cart__submit-button.contained {
    background-color: var(--mzm-accent, #3c83f5) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: var(--mzm-radius-md, 8px) !important;
    font-family: var(--mzm-font-family) !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    padding: 0.875rem 1.5rem !important;
    transition: background-color 0.2s ease !important;
}

.wc-block-cart__submit-button.contained:hover {
    background-color: #2d6fd4 !important;
}

/* Progress steps */
.wc-block-cart__sidebar,
.wp-block-woocommerce-cart {
    font-family: var(--mzm-font-family);
}

/* Sakrij Archives/Categories widget */
.woocommerce-cart .widget_archive,
.woocommerce-cart .widget_categories {
    display: none !important;
}
/* Sakrij opis proizvoda u cart tabeli */
.woocommerce-cart table.shop_table td.product-name .product-description,
.woocommerce-cart table.shop_table td.product-name p:not(.product-quantity) {
    display: none !important;
}
/* --------------------------------------------------------------------------
   Flatsome checkout breadcrumb — progress bar
   -------------------------------------------------------------------------- */

/* Kontejner */
nav.checkout-breadcrumbs {
    font-family: var(--mzm-font-family) !important;
    padding: clamp(1rem, 3vw, 1.5rem) 0 clamp(1.5rem, 4vw, 2rem) !important;
}

/* Svi linkovi — neaktivni koraci */
nav.checkout-breadcrumbs a {
    color: var(--mzm-text-secondary) !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.05em !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    transition: color 0.2s ease !important;
}

/* Aktivan korak */
nav.checkout-breadcrumbs a.current {
    color: var(--mzm-accent, #3c83f5) !important;
}

/* Separator strelica */
nav.checkout-breadcrumbs .divider {
    color: var(--mzm-border) !important;
    margin: 0 0.25rem !important;
}
/* --------------------------------------------------------------------------
   WooCommerce Blocks — Cart totals sekcija
   -------------------------------------------------------------------------- */

/* "Cart totals" naslov */
.wc-block-cart__totals-title {
    font-family: var(--mzm-font-family) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--mzm-text-primary) !important;
    padding-bottom: 1rem !important;
    border-bottom: var(--mzm-border-width) solid var(--mzm-border) !important;
    margin-bottom: 1rem !important;
}

/* "Estimated total" label */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    font-family: var(--mzm-font-family) !important;
    font-weight: 700 !important;
    font-size: var(--mzm-text-base) !important;
    color: var(--mzm-text-primary) !important;
}

/* Ukupan iznos */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-family: var(--mzm-font-family) !important;
    font-weight: 700 !important;
    font-size: var(--mzm-text-base) !important;
    color: var(--mzm-text-primary) !important;
}

/* "Add coupons" panel */
.wc-block-components-totals-coupon .wc-block-components-panel__button {
    font-family: var(--mzm-font-family) !important;
    font-size: var(--mzm-text-sm) !important;
    color: var(--mzm-accent) !important;
}
/* Opis u cart tabeli */
.woocommerce-cart table.shop_table td.product-name .product-description,
.wc-block-components-order-summary-item__description p,
.wc-block-cart-items__row .wc-block-components-product-metadata__description p {
    display: none !important;
}
/* --------------------------------------------------------------------------
   9. KLIZNA KORPA NA TELEFONU — plutajuća kartica, ne fioka preko ekrana
      (10.09.2026., F-088)

   Flatsome fioci daje FIKSNIH 360px i punu visinu. Na ekranu od 390px to je
   92% širine i 100% visine — izmereno `360×842 @ 30,0` na `iw=390` — pa
   dodavanje u korpu izgleda kao da je sajt nestao. Na širokom ekranu ista
   radnja otvara mali dropdown ispod ikonice, i to je izgled koji je tražen.

   ⚠️ NIJE u pitanju Flatsome pravilo `width: 100%` za male ekrane. Izmereno:
      `width: 360px`, `max-width: 100%`. Zato se širina SUŽAVA, a ne gasi se
      tuđe pravilo koje ne postoji.

   ⚠️ Specifičnost je NAMERNO četiri klase, bez `!important`. Flatsome cilja
      `.off-canvas .mfp-content` (dve do tri klase); ovo ga nadjačava kaskadom,
      pa pravilo ostaje čitljivo i može dalje da se nadjača ako zatreba.

   ⛔ VISINA NE DOLAZI OD PANELA NEGO OD `.cart-popup-inner`, koji ima
      `min-height: 796px` (= visina prozora manje 46px). Prva verzija ovog
      pravila je postavila `height: auto` na panel i na `#cart-popup` — i to
      NIJE bilo dovoljno: kartica je i dalje išla do gornje granice
      (izmereno `300×589` na `iw=390`, a 589 je tačno 70vh). Merenje lanca je
      pokazalo da `#cart-popup` ima `min-height: 0`, a njegovo dete 796px.
      **Tek gašenje tog `min-height` skuplja karticu oko sadržaja.**

   ⚠️ `!important` je ovde jedini način koji radi: Flatsome tu brojku računa i
      upisuje sa strane, u px, pa je obična kaskada ne dohvata. Gasi se SAMO
      unutar ovog `@media` bloka i samo unutar korpe — široki ekran ostaje
      netaknut.

   ⚠️ `border-radius` na kontejneru koji SKROLUJE već seče sadržaj, pa
      `overflow: hidden` nije potreban — a bio bi štetan, jer bi ubio
      unutrašnji skrol kad se korpa napuni.

   ⚠️ Klizanje ide preko `transform: translateX(100%)` u zatvorenom stanju.
      Pomeranje od desne ivice za 12px NE kvari to skrivanje — 100% je širina
      samog panela (300px), dakle mnogo više od 12px pomaka.

   ⚠️ Z-index se NE dira. `.mfp-bg` 1042 / `.mfp-wrap` 1043 su Flatsome-ovi i
      od njih zavisi `F-082` (sticky „Dodaj u korpu" mora da ostane ispod).
   -------------------------------------------------------------------------- */
@media (max-width: 549px) {
  .mfp-wrap.off-canvas.off-canvas-right .mfp-content.off-canvas-cart {
    top: 12px;
    right: 12px;
    left: auto;
    width: min(300px, calc(100% - 48px));
    height: auto;
    max-height: 70vh;
    border-radius: var(--mzm-radius-md, 8px);
    box-shadow: 0 14px 40px rgba(14, 22, 41, 0.25);
  }

  /* Vidi napomenu o visini iznad — bez ovoga kartica ostaje visoka 70vh. */
  .mfp-wrap.off-canvas.off-canvas-right .mfp-content.off-canvas-cart #cart-popup {
    height: auto;
  }

  .mfp-wrap.off-canvas.off-canvas-right .mfp-content.off-canvas-cart .cart-popup-inner {
    min-height: 0 !important;
    height: auto;
  }
}