/* ==========================================================================
   CHECKOUT PAGE — MaskeZaMob.rs
   File: flatsome-child/css/_checkout.css
   Verzija: 1.1
   Napomena: Checkout koristi WooCommerce Blocks (Gutenberg), ne klasični
   WooCommerce template — isti pristup kao _cart.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Sakrij sidebar widget (Archives/Categories) na checkout stranici
   -------------------------------------------------------------------------- */
.woocommerce-checkout .widget_archive,
.woocommerce-checkout .widget_categories,
.woocommerce-checkout .sidebar,
.woocommerce-checkout .row.large-columns-4.mb-0 {
  display: none !important;
}

/* --------------------------------------------------------------------------
   2. Opšta tipografija — ceo checkout
   -------------------------------------------------------------------------- */
.wp-block-woocommerce-checkout,
.wc-block-checkout {
  font-family: var(--mzm-font-family);
}

/* Naslovi sekcija — "Contact information", "Billing address", "Payment options" */
.wc-block-components-checkout-step__title {
  font-family: var(--mzm-font-family) !important;
  font-size: var(--mzm-text-base) !important;
  font-weight: 700 !important;
  color: var(--mzm-text-primary) !important;
}

/* --------------------------------------------------------------------------
   3. Input polja
   -------------------------------------------------------------------------- */
.wc-block-components-text-input input,
.wc-block-components-text-input textarea,
.wc-block-components-country-input .components-combobox-control__input,
.wc-block-components-state-input .components-combobox-control__input {
  font-family: var(--mzm-font-family) !important;
  border: var(--mzm-border-width) solid var(--mzm-border) !important;
  border-radius: var(--mzm-radius-sm) !important;
  font-size: var(--mzm-text-sm) !important;
  transition: border-color var(--mzm-transition-fast), box-shadow var(--mzm-transition-fast) !important;
}

.wc-block-components-text-input input:focus,
.wc-block-components-text-input textarea:focus,
.wc-block-components-country-input .components-combobox-control__input:focus,
.wc-block-components-state-input .components-combobox-control__input:focus {
  border-color: var(--mzm-accent) !important;
  box-shadow: 0 0 0 3px var(--mzm-accent-light) !important;
  outline: none !important;
}

/* Label boja */
.wc-block-components-text-input label,
.wc-block-components-country-input label,
.wc-block-components-state-input label {
  font-family: var(--mzm-font-family) !important;
  color: var(--mzm-text-secondary) !important;
}

/* Dropdown select boja */
.wc-block-components-country-input,
.wc-block-components-state-input {
  font-family: var(--mzm-font-family) !important;
}

/* --------------------------------------------------------------------------
   4. Payment options box
   -------------------------------------------------------------------------- */
.wc-block-components-radio-control__option {
  border: var(--mzm-border-width) solid var(--mzm-border) !important;
  border-radius: var(--mzm-radius-md) !important;
  font-family: var(--mzm-font-family) !important;
  transition: border-color var(--mzm-transition-fast) !important;
}

.wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control__option[aria-checked="true"] {
  border-color: var(--mzm-accent) !important;
  background-color: var(--mzm-accent-light) !important;
}

.wc-block-components-radio-control__input:checked {
  accent-color: var(--mzm-accent) !important;
}

.wc-block-components-radio-control__option-layout__label {
  font-weight: var(--mzm-font-semibold) !important;
  color: var(--mzm-text-primary) !important;
}

.wc-block-components-radio-control__description {
  font-size: var(--mzm-text-xs) !important;
  color: var(--mzm-text-secondary) !important;
}

/* --------------------------------------------------------------------------
   5. "Place Order" dugme — accent plava
   -------------------------------------------------------------------------- */
.wc-block-components-checkout-place-order-button,
button.wc-block-components-checkout-place-order-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%;
  transition: background-color var(--mzm-transition-base) !important;
}

.wc-block-components-checkout-place-order-button:hover {
  background-color: #2d6fd4 !important;
}

/* --------------------------------------------------------------------------
   6. Order summary box (desno na desktopu)
   -------------------------------------------------------------------------- */
.wc-block-components-sidebar .wc-block-components-panel,
.wp-block-woocommerce-checkout-order-summary-block {
  background-color: var(--mzm-surface) !important;
  border: var(--mzm-border-width) solid var(--mzm-border) !important;
  border-radius: var(--mzm-radius-md) !important;
  padding: 1.5rem !important;
  font-family: var(--mzm-font-family) !important;
}

.wc-block-components-checkout-order-summary__title-text,
.wp-block-woocommerce-checkout-order-summary-block h2 {
  font-family: var(--mzm-font-family) !important;
  font-size: var(--mzm-text-base) !important;
  font-weight: 700 !important;
  color: var(--mzm-text-primary) !important;
}

/* Proizvod u order summary — sakrij SAMO opis paragraf, ne naziv */
.wc-block-components-product-metadata__description p {
  display: none !important;
}

/* Naziv proizvoda u order summary — stilizuj */
.wc-block-components-product-name {
  display: block !important;
  font-family: var(--mzm-font-family) !important;
  font-size: var(--mzm-text-sm) !important;
  font-weight: var(--mzm-font-semibold) !important;
  color: var(--mzm-text-primary) !important;
  margin: 0 0 0.25rem 0 !important;
}

/* Subtotal / Total redovi */
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
  font-family: var(--mzm-font-family) !important;
  color: var(--mzm-text-primary) !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-weight: 700 !important;
  font-size: var(--mzm-text-base) !important;
}

/* --------------------------------------------------------------------------
   7. Checkbox "Add a note" i terms linkovi
   -------------------------------------------------------------------------- */
.wc-block-checkout__add-note,
.wc-block-checkout-terms-block {
  font-family: var(--mzm-font-family) !important;
  font-size: var(--mzm-text-sm) !important;
  color: var(--mzm-text-secondary) !important;
}

.wc-block-checkout-terms-block a {
  color: var(--mzm-accent) !important;
}

/* --------------------------------------------------------------------------
   8. Order summary — količina vidljivija (plava pilula)
   -------------------------------------------------------------------------- */
.wc-block-components-order-summary-item__quantity {
  background-color: var(--mzm-accent) !important;
  color: #ffffff !important;
  font-family: var(--mzm-font-family) !important;
  font-weight: var(--mzm-font-bold) !important;
  font-size: 0.7rem !important;
  min-width: 20px !important;
  height: 20px !important;
  line-height: 20px !important;
  border-radius: 999px !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}

/* --------------------------------------------------------------------------
   9. Mobile
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .wc-block-components-sidebar .wc-block-components-panel,
  .wp-block-woocommerce-checkout-order-summary-block {
    padding: 1.25rem !important;
  }

  /* KRITIČNO: WooCommerce Blocks renderuje order summary DVA PUTA u DOM-u
     (sticky sidebar verzija + inline verzija pre Place Order dugmeta).
     Na desktopu se sidebar verzija prikazuje sa strane, a na mobilnom bi se
     obe prikazale jedna ispod druge ako se ne sakrije jedna.
     Sakrivamo sticky sidebar duplikat — ostaje samo inline verzija unutar forme. */
  .wc-block-components-sidebar.wc-block-checkout__sidebar {
    display: none !important;
  }

  /* Smanji razmak između breadcrumb-a i checkout sadržaja */
  .checkout-page-title.page-title {
    padding-bottom: 0.5rem !important;
  }

  .wc-block-components-sidebar-layout.wc-block-checkout {
    margin-top: 0 !important;
    gap: 0.75rem !important;
  }
}