/*
Theme Name: Hello Elementor Child
Template: hello-elementor
Version: 1.0
*/
/* === Checkout layout fix (Halabooka) === */
.woocommerce-checkout form.checkout{
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 16px;
}

@media (min-width: 992px){
  .woocommerce-checkout form.checkout{
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 32px;
    align-items: start;
  }
}

/* Make blocks look like cards */
.woocommerce-checkout #customer_details,
.woocommerce-checkout #order_review{
  background: #fff;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  padding: 20px;
  box-sizing: border-box;
}

/* Ensure order review stays in the right column */
@media (min-width: 992px){
  .woocommerce-checkout #customer_details{ grid-column: 1; }
  .woocommerce-checkout #order_review{ grid-column: 2; }
}

/* Full-width place order button */
.woocommerce-checkout #place_order{
  width: 100%;
  padding: 14px 16px;
  border-radius: 10px;
  font-weight: 700;
}

/* Mobile */
@media (max-width: 991px){
  .woocommerce-checkout #customer_details,
  .woocommerce-checkout #order_review{
    margin-bottom: 16px;
  }
}
/* === Align checkout columns + fix "Vaša narudžbina" heading === */

/* desktop grid */
@media (min-width: 992px){
  .woocommerce-checkout form.checkout{
    display: grid !important;
    grid-template-columns: 1fr 420px !important;
    gap: 32px !important;
    align-items: start !important;
  }

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

  /* sakrij default naslov (stoji kao poseban element i kvari grid) */
  .woocommerce-checkout #order_review_heading{
    display: none !important;
  }

  /* desna kolona */
  .woocommerce-checkout #order_review{
    grid-column: 2 !important;
    margin: 0 !important;
  }

  /* ubaci naslov u "karticu" */
  .woocommerce-checkout #order_review::before{
    content: "Vaša narudžbina";
    display: block;
    font-size: 42px;
    line-height: 1.1;
    font-weight: 700;
    margin: 0 0 18px 0;
  }
}

/* očisti random margine */
.woocommerce-checkout #order_review,
.woocommerce-checkout #customer_details{
  margin-top: 0 !important;
}
/* === Checkout inputs fill the column === */

/* osnovno: svaki form-row nek bude full u svojoj koloni */
.woocommerce-checkout #customer_details .woocommerce-billing-fields .form-row,
.woocommerce-checkout #customer_details .woocommerce-shipping-fields .form-row{
  width: 100% !important;
  margin-right: 0 !important;
  margin-left: 0 !important;
}

/* 2 kolone za ime/prezime itd */
@media (min-width: 992px){
  .woocommerce-checkout #customer_details .form-row-first,
  .woocommerce-checkout #customer_details .form-row-last{
    float: none !important;
    display: inline-block !important;
    width: calc(50% - 10px) !important;
    vertical-align: top !important;
  }
  .woocommerce-checkout #customer_details .form-row-first{ margin-right: 20px !important; }
  .woocommerce-checkout #customer_details .form-row-last{ margin-right: 0 !important; }
}

/* sami inputi/select/textarea da popune red */
.woocommerce-checkout #customer_details input.input-text,
.woocommerce-checkout #customer_details select,
.woocommerce-checkout #customer_details textarea{
  width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}
/* === Checkout: 2 columns for paired fields (desktop) === */

/* grid na wrapperu billing polja */
@media (min-width: 992px){
  .woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px 20px !important;
  }

  /* normalna polja neka idu preko obe kolone */
  .woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper .form-row{
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* “uparena” polja (ime/prezime itd.) neka budu po 1 kolona */
  .woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper .form-row-first,
  .woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper .form-row-last{
    grid-column: auto !important;
    width: 100% !important;
    float: none !important;
    margin: 0 !important;
  }
}

/* inputi da pune svoj grid-cell */
.woocommerce-checkout #customer_details input.input-text,
.woocommerce-checkout #customer_details select,
.woocommerce-checkout #customer_details textarea{
  width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}
/* Checkout – inputi da zauzmu celu širinu kolone */
.woocommerce-checkout #customer_details .woocommerce-input-wrapper,
.woocommerce-checkout #customer_details .woocommerce-input-wrapper *{
  max-width: none !important;
}

.woocommerce-checkout #customer_details .form-row input.input-text,
.woocommerce-checkout #customer_details .form-row select,
.woocommerce-checkout #customer_details .form-row textarea{
  width: 100% !important;
  max-width: none !important;
  display: block !important;
  box-sizing: border-box !important;
}

/* Da se i sam red ne skuplja */
.woocommerce-checkout #customer_details .form-row{
  width: 100% !important;
  max-width: none !important;
}

/* Ako tema “centrira” input pa ostavlja prazno desno */
.woocommerce-checkout #customer_details .form-row .woocommerce-input-wrapper{
  width: 100% !important;
  display: block !important;
}
/* Checkout: ukloni srednju kolonu (shipping+notes) i napravi 2 kolone */
body.woocommerce-checkout form.checkout{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 48px !important;
  align-items: start !important;
}

/* Leva strana (billing) */
body.woocommerce-checkout #customer_details{
  width: 100% !important;
}

/* Srednja zona (shipping/notes) – sakrij / spusti ispod po želji */
body.woocommerce-checkout .col2-set #ship-to-different-address,
body.woocommerce-checkout .col2-set .woocommerce-shipping-fields,
body.woocommerce-checkout .col2-set .woocommerce-additional-fields{
  display: none !important;
}

/* Desna strana (order review + payment) */
body.woocommerce-checkout #order_review{
  width: 100% !important;
}
/* Checkout – 2 kolone polja (billing) + inputi da popune kolonu */
body.woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 18px 18px !important;
}

/* pola/pola za first/last, full za wide */
body.woocommerce-checkout #customer_details .form-row-first,
body.woocommerce-checkout #customer_details .form-row-last{
  width: calc(50% - 9px) !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
}
body.woocommerce-checkout #customer_details .form-row-wide{
  width: 100% !important;
  float: none !important;
  clear: both !important;
  margin: 0 !important;
}

/* input/select/textarea da budu 100% */
body.woocommerce-checkout #customer_details .woocommerce-input-wrapper,
body.woocommerce-checkout #customer_details input.input-text,
body.woocommerce-checkout #customer_details select,
body.woocommerce-checkout #customer_details textarea{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
/* CHECKOUT layout: levo forma, desno narudžbina */
body.woocommerce-checkout .woocommerce form.checkout{
  float: none !important;
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1fr 420px !important;
  gap: 32px !important; /* ovo ti je falilo */
  align-items: start !important;
}

/* ubij pravilo koje ti prepisuje u 1fr 1fr */
body.woocommerce-checkout form.checkout{
  grid-template-columns: 1fr 420px !important;
  gap: 32px !important;
}
/* Billing polja u 2 kolone + full width inputi */
body.woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 18px !important;
  row-gap: 14px !important;
}

/* Woo default “first/last” zna da pravi gluposti – reset */
body.woocommerce-checkout #customer_details .form-row{
  width: 100% !important;
  margin: 0 !important;
  float: none !important;
}

body.woocommerce-checkout #customer_details .form-row input,
body.woocommerce-checkout #customer_details .form-row select,
body.woocommerce-checkout #customer_details .form-row textarea{
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Adresa i dodatna adresa da budu preko cele širine */
body.woocommerce-checkout #billing_address_1_field,
body.woocommerce-checkout #billing_address_2_field{
  grid-column: 1 / -1 !important;
}
/* LEVA KOLONA – pusti je da diše */
body.woocommerce-checkout #customer_details{
  width: 100% !important;
  max-width: none !important;
}

/* Billing fields wrapper – pravi 2 kolone */
body.woocommerce-checkout
#customer_details
.woocommerce-billing-fields__field-wrapper{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  column-gap: 20px !important;
  row-gap: 14px !important;
  width: 100% !important;
}

/* Ubija Woo default float/width */
body.woocommerce-checkout #customer_details .form-row{
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
}

/* Inputi da popune ćeliju */
body.woocommerce-checkout #customer_details
input,
body.woocommerce-checkout #customer_details
select,
body.woocommerce-checkout #customer_details
textarea{
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Adresa u punoj širini */
#billing_address_1_field,
#billing_address_2_field{
  grid-column: 1 / -1 !important;
}
/* Ubiti WooCommerce kolonsku logiku */
body.woocommerce-checkout #customer_details .form-row-first,
body.woocommerce-checkout #customer_details .form-row-last {
  width: 100% !important;
  float: none !important;
}

/* Grid neka zaista popuni prostor */
body.woocommerce-checkout
#customer_details
.woocommerce-billing-fields__field-wrapper {
  grid-template-columns: 1fr 1fr !important;
}

/* Da inputi stvarno popune kolonu */
body.woocommerce-checkout #customer_details .form-row {
  padding-right: 0 !important;
}
/* Checkout billing fields: neka sve popuni širinu kolone */
body.woocommerce-checkout #customer_details .woocommerce-billing-fields,
body.woocommerce-checkout #customer_details .woocommerce-billing-fields__field-wrapper{
  width: 100% !important;
  max-width: none !important;
}

/* Svaki form-row neka zauzme celu širinu grid ćelije */
body.woocommerce-checkout #customer_details .form-row{
  width: 100% !important;
  max-width: none !important;
  justify-self: stretch !important;
}

/* Inputi/select/textarea neka budu 100% */
body.woocommerce-checkout #customer_details .form-row input.input-text,
body.woocommerce-checkout #customer_details .form-row select,
body.woocommerce-checkout #customer_details .form-row textarea{
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  display: block !important;
}