/* ============================================================
   WooCommerce Classic Checkout — Block-style dvostubičan layout
   v2.0 — precizno prema HTML strukturi sajta
   ============================================================ */

/* -----------------------------------------------------------
   1. GLAVNI GRID: form.checkout
      Levo: #customer_details (col2-set)
      Desno: #order_review_heading + #order_review
   ----------------------------------------------------------- */

form.woocommerce-checkout {
  display: grid !important;
  grid-template-columns: 1fr 380px !important;
  grid-template-rows: auto !important;
  column-gap: 40px !important;
  align-items: start;
  max-width: 1100px;
  margin: 0 auto;
}

/* Leva kolona: forma */
form.woocommerce-checkout #customer_details {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  float: none !important;
}

/* Desna kolona: naslov (sakriven) */
form.woocommerce-checkout #order_review_heading {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: none !important;
}

/* Desna kolona: order review + payment */
form.woocommerce-checkout #order_review {
  grid-column: 2 !important;
  grid-row: 1 !important;
  position: sticky;
  top: 24px;
  align-self: start;
}

/* -----------------------------------------------------------
   2. ORDER SUMMARY KARTICA
   ----------------------------------------------------------- */

#order_review.woocommerce-checkout-review-order {
  background: #f5f5f3 !important;
  border-radius: 12px !important;
  padding: 24px !important;
  border: 1px solid #e5e5e3 !important;
}

/* Naslov "Pregled porudžbine" sintetički */
#order_review.woocommerce-checkout-review-order::before {
  content: "Pregled porudžbine";
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 20px;
  letter-spacing: -0.01em;
}

/* Tabela — ukloni sve default bordere */
#order_review .shop_table {
  border: none !important;
  background: transparent !important;
  width: 100% !important;
  border-collapse: collapse !important;
}

#order_review .shop_table thead {
  display: none !important;
}

/* Redovi proizvoda */
#order_review .shop_table tbody tr.cart_item td {
  border: none !important;
  border-bottom: 1px solid #e0e0de !important;
  padding: 12px 0 !important;
  background: transparent !important;
  vertical-align: top;
}

/* Naziv proizvoda */
#order_review .shop_table .product-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  padding-right: 12px !important;
}

#order_review .shop_table .product-name .product-quantity {
  font-weight: 400;
  color: #666;
}

/* Varijante (Veličina, Boja) */
#order_review .shop_table .variation {
  margin-top: 4px !important;
  font-size: 12px !important;
  color: #666 !important;
}

#order_review .shop_table .variation dt,
#order_review .shop_table .variation dd {
  display: inline !important;
  font-weight: 400 !important;
  margin: 0 !important;
  font-size: 12px !important;
  color: #666 !important;
}

#order_review .shop_table .variation dd::after {
  content: " ";
}

#order_review .shop_table .variation p {
  display: inline !important;
  margin: 0 !important;
}

/* Cena u tabeli */
#order_review .shop_table .product-total {
  font-size: 13px !important;
  font-weight: 700 !important;
  text-align: right !important;
  white-space: nowrap !important;
  color: #1a1a1a !important;
  border: none !important;
  border-bottom: 1px solid #e0e0de !important;
  padding: 12px 0 !important;
  background: transparent !important;
}

/* Footer tabele — ukupno */
#order_review .shop_table tfoot tr th,
#order_review .shop_table tfoot tr td {
  border: none !important;
  padding: 8px 0 !important;
  background: transparent !important;
  font-size: 13px !important;
  color: #444 !important;
}

#order_review .shop_table tfoot .order-total th,
#order_review .shop_table tfoot .order-total td {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  border-top: 1px solid #1a1a1a !important;
  padding-top: 12px !important;
}

#order_review .shop_table tfoot .order-total td {
    text-align: right!important;
}

/* -----------------------------------------------------------
   3. PAYMENT SEKCIJA — unutar order_review
   ----------------------------------------------------------- */

#payment {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-top: 20px !important;
}

#payment .wc_payment_methods {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  list-style: none !important;
  margin: 0 !important;
}

#payment .wc_payment_method {
  padding: 12px 14px !important;
  border: 1px solid #ddddd9 !important;
  border-radius: 8px !important;
  margin-bottom: 8px !important;
  background: #fff !important;
}

#payment .wc_payment_method:has(input:checked) {
  border-color: #1a1a1a !important;
  background: #fff !important;
}

#payment .wc_payment_method label {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

#payment .wc_payment_method label img {
  height: 20px;
  width: auto;
}

#payment .payment_box {
  background: #f0f0ee !important;
  border: none !important;
  border-radius: 6px !important;
  margin: 10px 0 0 0 !important;
  padding: 10px 12px !important;
  font-size: 12px !important;
  color: #666 !important;
}

#payment .payment_box::before {
  display: none !important;
}

/* Terms & privacy */
#payment .woocommerce-privacy-policy-text {
  font-size: 11px !important;
  color: #888 !important;
  margin: 16px 0 12px !important;
  line-height: 1.5 !important;
}

#payment .woocommerce-terms-and-conditions-wrapper .form-row {
  margin: 0 0 12px !important;
}

#payment .woocommerce-terms-and-conditions-checkbox-text {
  font-size: 12px !important;
  color: #444 !important;
  line-height: 1.4em;
}

/* Dugme NARUČI */
#payment #place_order {
  width: 100% !important;
  padding: 14px 24px !important;
  background: #1a1a1a !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
  display: block !important;
  text-align: center !important;
  margin-top: 4px !important;
  letter-spacing: 0.01em;
}

#payment #place_order:hover {
  background: #333 !important;
}

#add_payment_method #payment div.form-row, .woocommerce-cart #payment div.form-row, .woocommerce-checkout #payment div.form-row {
    padding: 0!important;
}

/* -----------------------------------------------------------
   4. LEVA KOLONA — col-1 (billing) i col-2 (additional)
   ----------------------------------------------------------- */

/* Resetuj float/width na col-1 i col-2 */
#customer_details .col-1,
#customer_details .col-2 {
  width: 100% !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Naslov "Detalji za naplatu" */
.woocommerce-billing-fields > h3 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #111111 !important;
  margin: 0 0 20px 0 !important;
  letter-spacing: -0.01em;
}

/* Sakrij naslov "Dodatne informacije" — prevelik je */
.woocommerce-additional-fields > h3 {
  font-size: 22px !important;
  font-weight: 600 !important;
  color: #111111 !important;
  margin: 20px 0 12px 0 !important;
  text-transform: unset;
  letter-spacing: 0.05em;
}

/* -----------------------------------------------------------
   5. INPUTI I LABELE
   ----------------------------------------------------------- */

.woocommerce-checkout .woocommerce-input-wrapper input[type="text"],
.woocommerce-checkout .woocommerce-input-wrapper input[type="email"],
.woocommerce-checkout .woocommerce-input-wrapper input[type="tel"],
.woocommerce-checkout .woocommerce-input-wrapper select,
.woocommerce-checkout .woocommerce-input-wrapper textarea {
  border: 1px solid #d5d5d0 !important;
  border-radius: 6px !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  color: #1a1a1a !important;
  background: #fff !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  height: auto !important;
  line-height: 1.4 !important;
}

.woocommerce-checkout .woocommerce-input-wrapper input:focus,
.woocommerce-checkout .woocommerce-input-wrapper select:focus,
.woocommerce-checkout .woocommerce-input-wrapper textarea:focus {
  border-color: #1a1a1a !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.07) !important;
}

/* Labele */
.woocommerce-checkout .form-row label:not(.woocommerce-form__label-for-checkbox) {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #111111 !important;
  margin-bottom: 5px !important;
  display: block !important;
}

/* Select za Država — samo tekst, bez dropdown izgleda */
#billing_country {
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 32px !important;
}

/* Ime i Prezime u redu */
#billing_first_name_field,
#billing_last_name_field {
  width: 48.5% !important;
  display: inline-block !important;
  float: left !important;
  box-sizing: border-box !important;
}

#billing_last_name_field {
  float: right !important;
}

/* Clearfix posle ime/prezime */
#billing_country_field {
  clear: both !important;
}

/* Razmak između polja */
.woocommerce-checkout .form-row {
  margin-bottom: 12px !important;
}

/* Textarea za napomene */
#order_comments {
  min-height: 80px;
  resize: vertical;
}

/* -----------------------------------------------------------
   6. NEWSLETTER CHECKBOX
   ----------------------------------------------------------- */

.woocommerce-form__label-for-checkbox {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: #111111 !important;
  cursor: pointer;
  margin-top: 4px !important;
  line-height: 0;
}

.woocommerce-form__label-for-checkbox input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
}

/* -----------------------------------------------------------
   7. SAKRIJ KUPON BANNER NA VRHU
   ----------------------------------------------------------- */

.woocommerce-form-coupon-toggle {
  display: none !important;
}

.checkout_coupon.woocommerce-form-coupon {
  display: none !important;
}

/* -----------------------------------------------------------
   8. RESPONZIVNOST
   ----------------------------------------------------------- */

@media (max-width: 860px) {
  form.woocommerce-checkout {
    grid-template-columns: 1fr !important;
    column-gap: 0 !important;
  }

  form.woocommerce-checkout #customer_details {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }

  form.woocommerce-checkout #order_review {
    grid-column: 1 !important;
    grid-row: 1 !important;
    position: static !important;
    margin-bottom: 32px !important;
  }

  #billing_first_name_field,
  #billing_last_name_field {
    width: 100% !important;
    float: none !important;
    display: block !important;
  }
}