/* ═══════════════════════════════════════════════════
   KOŠARICA / CHECKOUT — cart.css
   Svi koraci: 1 pregled · 2 kupac · 3 dostava ·
               4 plaćanje · 5 potvrda · 6 uspjeh
   Montserrat · #2a6db5 · #1a4f8a
   ═══════════════════════════════════════════════════ */

:root {
  --blue:      #2a6db5;
  --blue-dark: #1a4f8a;
  --accent:    #e8f0fb;
  --text:      #2d2d2d;
  --gray:      #f4f5f7;
  --white:     #ffffff;
  --border:    #d8e4f0;
  --muted:     #aab8cc;
}


/* ═══════════════════════════════════════════════════
   WRAPPER
   ═══════════════════════════════════════════════════ */

section.basic_site_inner_content {
  width: 100%;
  padding: 40px 0 56px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}


/* ═══════════════════════════════════════════════════
   STEPPER — dl.HeadShop
   ═══════════════════════════════════════════════════ */

dl.HeadShop {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 14px 20px;
  counter-reset: step;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(42,109,181,.06);
}
dl.HeadShop dt {
  counter-increment: step;
  display: flex; align-items: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px; font-weight: 600;
  letter-spacing: .4px; color: var(--muted);
  white-space: nowrap; padding: 4px 0;
}
dl.HeadShop dt::before {
  content: counter(step);
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: #dde8f4; color: var(--muted);
  font-size: 11px; font-weight: 800;
  margin-right: 7px; flex-shrink: 0;
  transition: background .2s, color .2s;
}
dl.HeadShop dt:not(:last-child)::after {
  content: '';
  display: inline-block;
  width: 32px; height: 2px;
  background: #dde8f4;
  margin: 0 10px; flex-shrink: 0;
}
dl.HeadShop dt.sel { color: var(--blue); font-weight: 800; }
dl.HeadShop dt.sel::before {
  background: var(--blue); color: #fff;
  box-shadow: 0 2px 8px rgba(42,109,181,.3);
}
dl.HeadShop dt a { color: inherit; text-decoration: none; transition: color .2s; }
dl.HeadShop dt a.hoverable:hover { color: var(--blue); text-decoration: underline; }


/* ═══════════════════════════════════════════════════
   KORAK 1 — TABLICA ARTIKALA
   ═══════════════════════════════════════════════════ */

form.checkout_process {
  display: flex; flex-direction: column; gap: 0;
}

/* Zaglavlje tablice */
dl.ListTop {
  display: grid;
  grid-template-columns: 42px 1fr 80px 120px 150px 110px;
  gap: 0 8px; align-items: center;
  background: var(--blue);
  border-radius: 8px 8px 0 0;
  padding: 12px 16px; margin: 0;
}
dl.ListTop dt {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 800;
  letter-spacing: .8px; text-transform: uppercase;
  color: rgba(255,255,255,.85);
}
dl.ListTop dt.cart_number { text-align: center; }
dl.ListTop dt.cart_unit,
dl.ListTop dt.cart_unit_price,
dl.ListTop dt.cart_quantity,
dl.ListTop dt.cart_total { text-align: center; }

/* Redovi artikala */
dl.ListBottomDarker,
dl.ListBottomLighter {
  display: grid;
  grid-template-columns: 42px 1fr 80px 120px 150px 110px;
  gap: 0 8px; align-items: center;
  padding: 14px 16px; margin: 0;
  border-left: 1.5px solid var(--border);
  border-right: 1.5px solid var(--border);
  border-bottom: 1px solid #edf2f9;
  transition: background .15s;
}
dl.ListBottomDarker  { background: #fff; }
dl.ListBottomLighter { background: #f9fbfe; }
dl.ListBottomDarker:hover,
dl.ListBottomLighter:hover { background: var(--accent); }
dl.ListBottomDarker:last-of-type,
dl.ListBottomLighter:last-of-type {
  border-bottom: 1.5px solid var(--border);
  border-radius: 0 0 8px 8px;
}

dl.ListBottomDarker dd.cart_number,
dl.ListBottomLighter dd.cart_number {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px; font-weight: 600;
  color: var(--muted); text-align: center;
}

/* Artikl: slika + info */
dd.cart_product { display: flex; align-items: center; gap: 12px; min-width: 0; }
.artikl-img {
  flex-shrink: 0; width: 54px; height: 54px;
  border-radius: 6px; overflow: hidden;
  border: 1.5px solid var(--border); background: var(--gray);
}
.artikl-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.artikl-info { min-width: 0; }
.artikl-info h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px; font-weight: 700; color: var(--text);
  margin: 0 0 3px; line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.artikl-info p { font-size: 10px; color: var(--muted); margin: 0; }
.artikl-info p.notice { color: #e03131; font-size: 10px; font-weight: 600; margin-top: 3px; }

dd.cart_unit { font-family: 'Montserrat', sans-serif; font-size: 11px; color: #888; text-align: center; }

dd.cart_unit_price { text-align: center; }
dd.cart_unit_price .kn_price { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; color: var(--blue); }

/* Količina */
dd.cart_quantity {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
}
dd.cart_quantity input.spinner {
  width: 64px; height: 34px; padding: 0 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px; font-weight: 600; color: var(--text);
  background: #fff; border: 1.5px solid #c8d8ee;
  border-radius: 5px; outline: none; text-align: center;
  transition: border-color .2s; -moz-appearance: textfield; display: block;
}
dd.cart_quantity input.spinner::-webkit-inner-spin-button,
dd.cart_quantity input.spinner::-webkit-outer-spin-button { -webkit-appearance: none; }
dd.cart_quantity input.spinner:focus {
  border-color: var(--blue); box-shadow: 0 0 0 3px rgba(42,109,181,.1);
}
dd.cart_quantity a {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; cursor: pointer;
  padding: 4px 9px; border-radius: 4px; white-space: nowrap;
  text-decoration: none; display: inline-block;
  transition: background .2s, color .2s;
}
dd.cart_quantity a:nth-of-type(1) { color: var(--blue); border: 1.5px solid var(--blue); background: transparent; }
dd.cart_quantity a:nth-of-type(1):hover { background: var(--blue); color: #fff; }
dd.cart_quantity a:nth-of-type(2) { color: #e03131; border: 1.5px solid #e03131; background: transparent; }
dd.cart_quantity a:nth-of-type(2):hover { background: #e03131; color: #fff; }

dd.cart_total { text-align: right; }
dd.cart_total .kn_price { font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 800; color: var(--blue); }

.kn_price    { font-family: 'Montserrat', sans-serif; font-weight: 700; color: var(--blue); }
.kn_oldprice { font-size: 13px; font-weight: 400; color: #aaa; text-decoration: line-through; }


/* ═══════════════════════════════════════════════════
   PDV TABLICA — KORAK 1
   
   Problem: h2 ne smije ići na cijelu širinu wrappera
   Rješenje: .PDVList je flex-end container,
   a sav sadržaj (h2 + dl-ovi) je u unutarnjem
   .pdv-inner bloku fiksne širine
   ═══════════════════════════════════════════════════ */

.PDVList {
  display: flex;
  flex-direction: column;
  align-items: flex-end;   /* gurni sve desno */
  margin-top: 10px;
  width: 100%;
}

/* Unutarnji wrapper koji drži i h2 i dl-ove */
.PDVList-inner,
.PDVList > h2 ~ dl,    /* fallback ako nema .PDVList-inner */
.PDVList > dl {
  width: 460px;
  max-width: 100%;
}

/* h2 naslov — iste širine kao tablica */
.PDVList > h2 {
  width: 460px;
  max-width: 100%;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 800;
  letter-spacing: .8px; text-transform: uppercase; color: #888;
  padding: 9px 14px 7px;
  background: var(--gray);
  border: 1.5px solid var(--border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  margin: 0;
  box-sizing: border-box;
}

.PDVList > h2.dostavaH2 {
	width: 100%;
}


/* PDV zaglavlje — 3 kolone */
dl.PdvListTop {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  margin: 0;
  width: 460px;
  max-width: 100%;
  background: #edf4ff;
  border-left:  1.5px solid var(--border);
  border-right: 1.5px solid var(--border);
  border-bottom: 1px solid var(--border);
  box-sizing: border-box;
}
dl.PdvListTop dt {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px; font-weight: 800;
  letter-spacing: .5px; text-transform: uppercase; color: #888;
  padding: 7px 12px 5px; text-align: right;
  border-right: 1px solid #d0dfee;
}
dl.PdvListTop dt:first-child { text-align: left; }
dl.PdvListTop dt:last-child  { border-right: none; }

/* PDV redci */
dl.PdvListBottomDarker,
dl.PdvListBottomLighter {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  margin: 0;
  width: 460px;
  max-width: 100%;
  border-left:   1.5px solid var(--border);
  border-right:  1.5px solid var(--border);
  border-bottom: 1px solid #edf2f9;
  box-sizing: border-box;
}
dl.PdvListBottomDarker  { background: #fff; }
dl.PdvListBottomLighter { background: #f9fbfe; }
dl.PdvListBottomDarker:last-child,
dl.PdvListBottomLighter:last-child {
  border-bottom: 1.5px solid var(--border);
  border-radius: 0 0 8px 8px;
}
dl.PdvListBottomDarker dd,
dl.PdvListBottomLighter dd {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px; color: #555;
  padding: 8px 12px; text-align: right; margin: 0;
  border-right: 1px solid #edf2f9;
}
dl.PdvListBottomDarker dd:first-child,
dl.PdvListBottomLighter dd:first-child { text-align: left; }
dl.PdvListBottomDarker dd:last-child,
dl.PdvListBottomLighter dd:last-child  { border-right: none; }
dl.PdvListBottomDarker dd .kn_price,
dl.PdvListBottomLighter dd .kn_price   { font-size: 12px; font-weight: 700; color: var(--text); }


/* ─────────────────────────────────────────────
   PDV DOSTAVE — 5 kolona (korak 5)
   Aktivira se kad postoji dt.delivery_service
   ───────────────────────────────────────────── */
dl.PdvListTop:has(dt.delivery_service),
dl.PdvListBottomDarker:has(dd.delivery_service),
dl.PdvListBottomLighter:has(dd.delivery_service) {
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  width: 100%;
}


/* ─────────────────────────────────────────────
   PDV PUNA ŠIRINA (korak 5 — dostava + promo)
   ───────────────────────────────────────────── */
.promo_pdv_content .PDVList,
form#complete_order .PDVList {
  align-items: flex-start;
}
.promo_pdv_content .PDVList > h2,
form#complete_order .PDVList > h2 {
  width: 100%;
}
.promo_pdv_content dl.PdvListTop,
.promo_pdv_content dl.PdvListBottomDarker,
.promo_pdv_content dl.PdvListBottomLighter,
form#complete_order dl.PdvListTop,
form#complete_order dl.PdvListBottomDarker,
form#complete_order dl.PdvListBottomLighter {
  width: 100%;
}


/* ─────────────────────────────────────────────
   PROMOTIVNI KÔD — .PDVList s formom (korak 5)
   ───────────────────────────────────────────── */
.PDVList:has(form),
.PDVList.promo-kod {
  align-items: flex-start;
  background: var(--gray);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 20px 24px;
  gap: 12px;
}

.PDVList:has(form) > h2,
.PDVList.promo-kod > h2 {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--accent);
  border-radius: 0;
  padding: 0 0 10px;
  margin-bottom: 4px;
  font-size: 11px; font-weight: 800;
  letter-spacing: .8px; text-transform: uppercase;
  color: var(--blue);
}

.PDVList:has(form) > p,
.PDVList.promo-kod > p {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px; color: #555;
  margin: 0; line-height: 1.6;
  width: 100%;
}

.PDVList:has(form) form,
.PDVList.promo-kod form {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}

.PDVList:has(form) form input[type="text"],
.PDVList.promo-kod form input[type="text"] {
  flex: 1;
  min-width: 180px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px; color: var(--text);
  background: #fff; border: 1.5px solid var(--border);
  border-radius: 6px; padding: 10px 14px;
  outline: none; transition: border-color .2s;
  box-sizing: border-box;
}
.PDVList:has(form) form input[type="text"]:focus,
.PDVList.promo-kod form input[type="text"]:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(42,109,181,.1);
}

.PDVList:has(form) form input[type="submit"],
.PDVList.promo-kod form input[type="submit"],
input.confirmStep {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase;
  color: #fff; background: var(--blue);
  border: none; padding: 10px 22px; border-radius: 20px;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 3px 12px rgba(42,109,181,.28);
  transition: background .2s, transform .15s;
  -webkit-appearance: none; appearance: none;
}
.PDVList:has(form) form input[type="submit"]:hover,
.PDVList.promo-kod form input[type="submit"]:hover,
input.confirmStep:hover {
  background: var(--blue-dark); transform: translateY(-1px);
}


/* ═══════════════════════════════════════════════════
   UKUPNI IZNOS — .IznosBottom
   ═══════════════════════════════════════════════════ */

.IznosBottom {
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding: 16px 20px; background: var(--blue);
  border-radius: 8px; margin-top: 12px;
}
.IznosBottom span {
  font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,.75);
}
.IznosBottom p { margin: 0; display: flex; align-items: center; gap: 8px; }
.IznosBottom p::before {
  content: 'Ukupno:';
  font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600;
  color: rgba(255,255,255,.75);
}
.IznosBottom .kn_price { font-size: 22px; font-weight: 800; color: #fff; }

.IznosBottomLast { border-radius: 8px; margin-top: 16px; }
.IznosBottomLast p { font-family: 'Montserrat', sans-serif; font-weight: 700; color: #fff; }
.IznosBottomLast p::before { display: none; }


/* ═══════════════════════════════════════════════════
   GUMBI — .ButtonBox
   ═══════════════════════════════════════════════════ */

.ButtonBox {
  display: flex; align-items: center;
  justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding-top: 16px; width: 100%;
}

#back_to_shop a,
input.prevStep,
a.prevStep {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; text-decoration: none;
  color: var(--blue); border: 1.5px solid var(--blue);
  padding: 10px 20px; border-radius: 20px;
  background: transparent; cursor: pointer;
  transition: background .2s, color .2s;
  -webkit-appearance: none; appearance: none;
}
#back_to_shop a::before,
a.prevStep::before { content: '←'; font-size: 13px; }
#back_to_shop a:hover,
input.prevStep:hover,
a.prevStep:hover { background: var(--blue); color: #fff; }

a.nextStep,
input.nextStep,
a.confirmStep,
input.confirmStep {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; text-decoration: none;
  color: #fff; background: var(--blue);
  padding: 11px 28px; border-radius: 20px;
  cursor: pointer; border: none;
  box-shadow: 0 3px 12px rgba(42,109,181,.28);
  transition: background .2s, transform .15s, box-shadow .2s;
  -webkit-appearance: none; appearance: none;
}
a.nextStep::after { content: '→'; font-size: 13px; }
a.nextStep:hover, input.nextStep:hover,
a.confirmStep:hover, input.confirmStep:hover {
  background: var(--blue-dark); transform: translateY(-1px);
  box-shadow: 0 5px 18px rgba(42,109,181,.36);
}

em.empty_basket_sentence {
  display: block; font-style: normal;
  font-family: 'Montserrat', sans-serif; font-size: 14px; color: #888;
  text-align: center; padding: 40px 0 16px;
}
a.back_to_homepage {
  font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 700;
  color: #fff; background: var(--blue);
  padding: 11px 28px; border-radius: 20px;
  text-decoration: none; display: block;
  width: fit-content; margin: 0 auto;
  box-shadow: 0 3px 12px rgba(42,109,181,.28);
  transition: background .2s;
}
a.back_to_homepage:hover { background: var(--blue-dark); }


/* ═══════════════════════════════════════════════════
   KORACI 2, 3, 4 — ZAJEDNIČKI WRAPPER
   ═══════════════════════════════════════════════════ */

.LoginRegisterMain {
  width: 100%;
}

.RightRegister,
.LeftLogin {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 28px 32px 24px;
  width: 100%;
  box-sizing: border-box;
}
.RightRegister h1, .RightRegister h2,
.LeftLogin h1, .LeftLogin h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px; font-weight: 800; color: var(--blue);
  letter-spacing: .5px; margin: 0 0 22px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--accent);
}


/* ═══════════════════════════════════════════════════
   KORAK 2 — PODACI O KUPCU
   
   HTML:
   .LoginRegisterMain
     .RightRegister.MiddleOrderForm   ← vizualni card
       h1
       form#order_form
         fieldset.customer_type       ← puna širina
         .middle_order_form_left_column
         .middle_order_form_right_column
         .ButtonBox                   ← puna širina
   
   form#order_form = 2-col grid
   ═══════════════════════════════════════════════════ */

form#order_form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 28px;
  align-items: start;
  width: 100%;
}

/* Puna širina unutar forme */
form#order_form > fieldset.customer_type {
  grid-column: 1 / -1;
}

/* Lijeva i desna kolona */
form#order_form > .middle_order_form_left_column {
  grid-column: 1;
  display: flex; flex-direction: column;
}
form#order_form > .middle_order_form_right_column {
  grid-column: 2;
  display: flex; flex-direction: column;
}

/* ButtonBox ispod obje kolone */
form#order_form > .ButtonBox {
  grid-column: 1 / -1;
  margin-top: 8px;
}


/* ═══════════════════════════════════════════════════
   KORAK 3 — PODACI O DOSTAVI
   
   HTML:
   .LoginRegisterMain
     form#second_step_form
       div.MiddleOrderForm             ← 2-col grid
         .middle_order_form_left_column
         .middle_order_form_right_column
         .ButtonBox
   ═══════════════════════════════════════════════════ */

div.MiddleOrderForm {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 28px;
  align-items: start;
  width: 100%;
}

div.RightRegister {
  grid-template-columns: 1fr;
}

div.MiddleOrderForm > .middle_order_form_left_column { grid-column: 1; }
div.MiddleOrderForm > .middle_order_form_right_column { grid-column: 2; }
div.MiddleOrderForm > .ButtonBox {
  grid-column: 1 / -1;
  margin-top: 8px;
}

/* Naslovi unutar kolona (korak 3) */
div.MiddleOrderForm .middle_order_form_left_column > h2,
div.MiddleOrderForm .middle_order_form_right_column > h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px; font-weight: 800; color: var(--blue);
  margin: 0 0 18px; padding-bottom: 12px;
  border-bottom: 2px solid var(--accent);
}


/* ═══════════════════════════════════════════════════
   KORAK 4 — NAČINI PLAĆANJA
   
   HTML:
   .LoginRegisterMain
     form#payment_type
       div                            ← 2-col grid
         .LeftLogin
         .RightRegister
         .ButtonBox
   ═══════════════════════════════════════════════════ */

form#payment_type > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 28px;
  align-items: start;
  width: 100%;
}
form#payment_type > div > .ButtonBox {
  grid-column: 1 / -1;
  margin-top: 8px;
}
form#payment_type .LeftLogin p {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px; line-height: 1.7; color: #555; margin: 0;
}


/* ═══════════════════════════════════════════════════
   ZAJEDNIČKI STILOVI FORMI
   ═══════════════════════════════════════════════════ */

/* Fieldset reset */
form#order_form fieldset,
form#second_step_form fieldset,
form#payment_type fieldset,
div.MiddleOrderForm fieldset,
.middle_order_form_left_column fieldset,
.middle_order_form_right_column fieldset {
  border: none; margin: 0 0 16px; padding: 0;
}

/* Label */
form#order_form label,
form#second_step_form label,
form#payment_type label,
div.MiddleOrderForm label,
.middle_order_form_left_column label,
.middle_order_form_right_column label,
.RightRegister label, .LeftLogin label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px; font-weight: 700;
  letter-spacing: .4px; text-transform: uppercase;
  color: #666; margin-bottom: 6px;
}

/* Inputi, selecti, textarea */
form#order_form input[type="text"],
form#order_form input[type="email"],
form#order_form input[type="password"],
form#order_form select,
form#second_step_form input[type="text"],
form#second_step_form input[type="email"],
form#second_step_form select,
.middle_order_form_left_column input[type="text"],
.middle_order_form_left_column select,
.middle_order_form_right_column input[type="text"],
.middle_order_form_right_column input[type="email"],
.middle_order_form_right_column select {
  width: 100%;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px; color: var(--text);
  background: var(--gray); border: 1.5px solid var(--border);
  border-radius: 6px; padding: 10px 14px;
  outline: none; box-sizing: border-box;
  transition: border-color .2s, background .2s, box-shadow .2s;
  -webkit-appearance: none;
}
form#order_form input:focus,
form#order_form select:focus,
form#second_step_form input:focus,
form#second_step_form select:focus,
.middle_order_form_left_column input:focus,
.middle_order_form_left_column select:focus,
.middle_order_form_right_column input:focus,
.middle_order_form_right_column select:focus {
  border-color: var(--blue); background: #fff;
  box-shadow: 0 0 0 3px rgba(42,109,181,.1);
}

.required_field_mark { color: #e03131; font-weight: 800; }

/* Tip kupca */
fieldset.customer_type {
  display: flex !important; align-items: center !important;
  gap: 20px; flex-wrap: wrap;
  margin-bottom: 20px !important;
  padding: 12px 16px !important;
  background: var(--accent) !important;
  border-radius: 8px !important;
  border: 1.5px solid var(--border) !important;
}
fieldset.customer_type.no_border {
  background: transparent !important; border: none !important;
  padding: 0 !important; margin-bottom: 12px !important;
}
fieldset.customer_type input[type="radio"] {
  width: auto; accent-color: var(--blue); cursor: pointer; flex-shrink: 0;
}
fieldset.customer_type label {
  font-size: 13px; font-weight: 600;
  text-transform: none; letter-spacing: 0;
  color: var(--text); margin: 0; cursor: pointer;
}

/* Company detalji */
.company_details_form, .order_company_info {
  background: #fff9f0; border: 1.5px solid #fcd9a0;
  border-radius: 8px; padding: 14px 16px; margin-bottom: 14px;
}

/* Podaci ulogiranog korisnika */
ul.order_user_info {
  list-style: none; margin: 0 0 20px; padding: 0;
  background: var(--gray); border: 1.5px solid var(--border);
  border-radius: 8px; overflow: hidden;
}
ul.order_user_info li {
  display: flex; gap: 12px; padding: 9px 16px;
  border-bottom: 1px solid #edf2f9;
  font-family: 'Montserrat', sans-serif; font-size: 12px;
}
ul.order_user_info li:last-child { border-bottom: none; }
ul.order_user_info li span {
  font-weight: 700; color: #888; min-width: 120px; flex-shrink: 0;
  text-transform: uppercase; font-size: 10px; letter-spacing: .4px; padding-top: 1px;
}
ul.order_user_info li p { margin: 0; color: var(--text); font-weight: 500; }

a.copy_info {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .4px; text-transform: uppercase; color: var(--blue);
  text-decoration: none; margin-bottom: 16px;
  padding: 6px 14px; border: 1.5px solid var(--blue); border-radius: 20px;
  transition: background .2s, color .2s;
  grid-column: 1 / -1;
}
a.copy_info::before { content: '↓'; font-size: 12px; }
a.copy_info:hover { background: var(--blue); color: #fff; }


/* ═══════════════════════════════════════════════════
   KORAK 3 — DOSTAVA (stilovi unutar left column)
   ═══════════════════════════════════════════════════ */

ul.delivery_type {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
ul.delivery_type li {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; background: var(--gray);
  border: 1.5px solid var(--border); border-radius: 8px; cursor: pointer;
  transition: border-color .2s, background .2s;
}
ul.delivery_type li:has(input:checked) { border-color: var(--blue); background: var(--accent); }
ul.delivery_type li input[type="radio"] { width: auto; accent-color: var(--blue); flex-shrink: 0; cursor: pointer; }
ul.delivery_type li label {
  font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600;
  color: var(--text); cursor: pointer; margin: 0; text-transform: none; letter-spacing: 0;
}

.delivery_services_container,
.shop_locations_container {
  margin-top: 14px; padding: 16px;
  background: #fff; border: 1.5px solid var(--border); border-radius: 8px;
}
.delivery_services_container label,
.shop_locations_container label {
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; color: #888;
  display: block; margin-bottom: 8px;
}
.delivery_services_container select,
.shop_locations_container select,
.shop_locations_container input[type="text"] {
  width: 100%; font-family: 'Montserrat', sans-serif;
  font-size: 13px; color: var(--text); background: var(--gray);
  border: 1.5px solid var(--border); border-radius: 6px;
  padding: 10px 14px; outline: none; box-sizing: border-box;
  transition: border-color .2s; -webkit-appearance: none;
}
.delivery_services_container select:focus,
.shop_locations_container select:focus {
  border-color: var(--blue); box-shadow: 0 0 0 3px rgba(42,109,181,.1);
}
#delivery_cost {
  margin-top: 10px; font-family: 'Montserrat', sans-serif;
  font-size: 13px; font-weight: 700; color: var(--blue);
}
.second_step_inner_padding > p {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px; line-height: 1.8; color: #555; margin-bottom: 16px;
}


/* ═══════════════════════════════════════════════════
   KORAK 4 — PLAĆANJE (ul.Payment)
   ═══════════════════════════════════════════════════ */

ul.Payment {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
ul.Payment li {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px; background: var(--gray);
  border: 1.5px solid var(--border); border-radius: 8px; cursor: pointer;
  transition: border-color .2s, background .2s;
}
ul.Payment li:has(input:checked) { border-color: var(--blue); background: var(--accent); }
ul.Payment li input[type="radio"] {
  width: 18px; height: 18px; accent-color: var(--blue); flex-shrink: 0; cursor: pointer;
}
ul.Payment li label {
  font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 600;
  color: var(--text); cursor: pointer; margin: 0; text-transform: none; letter-spacing: 0;
}


/* ═══════════════════════════════════════════════════
   KORAK 5 — POTVRDA NARUDŽBE
   ═══════════════════════════════════════════════════ */

.shop_receipt_customer_info {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
}
.shop_receipt_customer_info_left_column,
.shop_receipt_customer_info_right_column {
  background: #fff; border: 1.5px solid var(--border); border-radius: 10px; overflow: hidden;
}
.shop_receipt_customer_info_left_column h3,
.shop_receipt_customer_info_right_column h3 {
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 800;
  letter-spacing: .8px; text-transform: uppercase; color: #fff; background: var(--blue);
  margin: 0; padding: 11px 16px;
}
.shop_receipt_customer_info_left_column dl dt,
.shop_receipt_customer_info_right_column dl dt {
  font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 800;
  letter-spacing: .5px; text-transform: uppercase; color: #888; padding: 8px 16px 2px;
}
.shop_receipt_customer_info_left_column dl dd,
.shop_receipt_customer_info_right_column dl dd {
  font-size: 13px; font-weight: 500; color: var(--text);
  padding: 0 16px 8px; margin: 0; border-bottom: 1px solid #edf2f9;
}
.shop_receipt_customer_info_left_column dl dd:last-child,
.shop_receipt_customer_info_right_column dl dd:last-child { border-bottom: none; }

/* Napomena */
dl.order_note { margin: 0 0 16px; padding: 0; }
dl.order_note dt {
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; color: #666; margin-bottom: 6px;
}
dl.order_note dd { margin: 0; padding: 0; }
dl.order_note dd textarea {
  width: 100%; min-height: 90px;
  font-family: 'Montserrat', sans-serif; font-size: 13px; color: var(--text);
  background: var(--gray); border: 1.5px solid var(--border); border-radius: 6px;
  padding: 10px 14px; outline: none; resize: vertical;
  line-height: 1.6; box-sizing: border-box; transition: border-color .2s, background .2s;
}
dl.order_note dd textarea:focus {
  border-color: var(--blue); background: #fff; box-shadow: 0 0 0 3px rgba(42,109,181,.1);
}

/* GDPR */
dl.consent_data {
  background: var(--accent); border: 1.5px solid var(--border);
  border-radius: 8px; padding: 14px 18px; margin-bottom: 16px;
  display: flex; flex-direction: column; gap: 8px;
}
dl.consent_data dt { display: flex; align-items: center; gap: 10px; margin: 0; }
dl.consent_data dt input[type="checkbox"] {
  width: 18px; height: 18px; accent-color: var(--blue); cursor: pointer; flex-shrink: 0;
}
dl.consent_data dt .formInfo { font-size: 16px; font-weight: 700; color: #e03131; flex-shrink: 0; }
dl.consent_data dd { margin: 0; font-size: 12px; line-height: 1.7; color: #555; }
dl.consent_data dd a { color: var(--blue); font-weight: 600; text-decoration: underline; }

/* Tablica potvrde */
dl.ListTopConfirm {
  display: grid;
  grid-template-columns: 42px 1fr 80px 120px 80px 110px;
  gap: 0 8px; align-items: center;
  background: var(--blue); border-radius: 8px 8px 0 0; padding: 12px 16px; margin: 0;
}
dl.ListTopConfirm dt {
  font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 800;
  letter-spacing: .8px; text-transform: uppercase; color: rgba(255,255,255,.85);
}
dl.ListTopConfirm dt.cart_number,
dl.ListTopConfirm dt.cart_unit,
dl.ListTopConfirm dt.cart_unit_price,
dl.ListTopConfirm dt.cart_quantity { text-align: center; }
dl.ListTopConfirm dt.cart_total { text-align: right; }

dl.ListBottomconfirmDarker,
dl.ListBottomconfirmLighter {
  display: grid;
  grid-template-columns: 42px 1fr 80px 120px 80px 110px;
  gap: 0 8px; align-items: center;
  padding: 12px 16px; margin: 0;
  border-left: 1.5px solid var(--border); border-right: 1.5px solid var(--border);
  border-bottom: 1px solid #edf2f9; transition: background .15s;
}
dl.ListBottomconfirmDarker  { background: #fff; }
dl.ListBottomconfirmLighter { background: #f9fbfe; }
dl.ListBottomconfirmDarker:hover,
dl.ListBottomconfirmLighter:hover { background: var(--accent); }
dl.ListBottomconfirmDarker:last-of-type,
dl.ListBottomconfirmLighter:last-of-type {
  border-bottom: 1.5px solid var(--border); border-radius: 0 0 8px 8px;
}
dl.ListBottomconfirmDarker dd,
dl.ListBottomconfirmLighter dd {
  font-family: 'Montserrat', sans-serif; font-size: 12px; color: var(--text); margin: 0;
}
dl.ListBottomconfirmDarker dd.cart_number,
dl.ListBottomconfirmLighter dd.cart_number { font-size: 11px; color: var(--muted); text-align: center; }
dl.ListBottomconfirmDarker dd.cart_product,
dl.ListBottomconfirmLighter dd.cart_product { font-weight: 600; }
dl.ListBottomconfirmDarker dd.cart_unit,
dl.ListBottomconfirmLighter dd.cart_unit { text-align: center; color: #888; font-size: 11px; }
dl.ListBottomconfirmDarker dd.cart_unit_price,
dl.ListBottomconfirmLighter dd.cart_unit_price { text-align: center; }
dl.ListBottomconfirmDarker dd.cart_quantity,
dl.ListBottomconfirmLighter dd.cart_quantity { text-align: center; font-weight: 700; color: var(--blue); }
dl.ListBottomconfirmDarker dd.cart_total,
dl.ListBottomconfirmLighter dd.cart_total { text-align: right; }
dl.ListBottomconfirmDarker dd .kn_price,
dl.ListBottomconfirmLighter dd .kn_price { font-size: 13px; font-weight: 700; color: var(--blue); }

form#complete_order .ButtonBox { margin-top: 16px; }


/* ═══════════════════════════════════════════════════
   KORAK 6 — USPJEH
   ═══════════════════════════════════════════════════ */

.shop_steps_info {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding: 56px 24px; text-align: center;
}
p.order_success {
  font-family: 'Montserrat', sans-serif; font-size: 18px; font-weight: 700; color: #2e7d32;
  background: #f0fff4; border: 1.5px solid #a5d6a7;
  border-radius: 10px; padding: 22px 36px; margin: 0;
}
.shop_steps_info h2 {
  font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 700; color: var(--blue);
}


/* ═══════════════════════════════════════════════════
   RECEIPT
   ═══════════════════════════════════════════════════ */

.shop_receipt_header {
  display: flex; align-items: center; gap: 20px;
  padding: 20px 0 24px; border-bottom: 2px solid var(--border); margin-bottom: 24px;
}
.shop_receipt_header img { max-height: 60px; width: auto; }
.shop_receipt_header p { font-size: 12px; line-height: 1.7; color: #555; margin: 0; }

.main_headlines_order { padding: 16px 0; border-bottom: 1.5px solid var(--border); margin-bottom: 20px; }
.main_headlines_order h1 { font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: 800; color: var(--blue); margin: 0 0 6px; }
.main_headlines_order h2 { font-family: 'Montserrat', sans-serif; font-size: 14px; font-weight: 700; color: #555; margin: 0 0 4px; }
.main_headlines_order h3 { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600; color: #888; margin: 0; }

.shop_receipt_content dl {
  display: grid;
  grid-template-columns: 36px 90px 1fr 60px 80px 50px 50px 90px;
  gap: 0 6px; padding: 10px 14px; margin: 0; border-bottom: 1px solid #edf2f9;
}
.shop_receipt_content dl:first-child { background: var(--blue); border-radius: 8px 8px 0 0; }
.shop_receipt_content dl:first-child dt {
  font-family: 'Montserrat', sans-serif; font-size: 10px; font-weight: 800;
  letter-spacing: .6px; text-transform: uppercase; color: rgba(255,255,255,.85);
}
.shop_receipt_content dl:not(:first-child) { background: #fff; }
.shop_receipt_content dl:not(:first-child):nth-child(odd) { background: #f9fbfe; }
.shop_receipt_content dl dd { font-family: 'Montserrat', sans-serif; font-size: 12px; color: var(--text); margin: 0; }

.shop_receipt_payment {
  margin-top: 16px; padding: 16px 20px;
  background: var(--accent); border: 1.5px solid var(--border); border-radius: 8px;
}
.shop_receipt_payment dl { margin: 0; }
.shop_receipt_payment dl dt {
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 800;
  letter-spacing: .5px; text-transform: uppercase; color: #888; margin: 10px 0 4px;
}
.shop_receipt_payment dl dt:first-child { margin-top: 0; }
.shop_receipt_payment dl dd { font-size: 14px; font-weight: 700; color: var(--blue); margin: 0; }

.shop_receipt_totals { margin-top: 12px; padding: 14px 20px; background: var(--blue); border-radius: 8px; }
.shop_receipt_totals dl { margin: 0; display: flex; gap: 12px 32px; flex-wrap: wrap; align-items: center; }
.shop_receipt_totals dl dt { font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.75); }
.shop_receipt_totals dl dd { font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: 800; color: #fff; margin: 0; }

p.shop_receipt_footer_info {
  font-size: 11px; color: #aaa; line-height: 1.7;
  padding: 16px 0; border-top: 1.5px solid var(--border); margin-top: 16px;
}


/* ═══════════════════════════════════════════════════
   RESPONSIVE ≤1000px
   ═══════════════════════════════════════════════════ */

@media (max-width: 1000px) {
  dl.ListTop, dl.ListBottomDarker, dl.ListBottomLighter {
    grid-template-columns: 36px 1fr 70px 100px 130px 90px;
    gap: 0 6px; padding: 12px;
  }
  dl.ListTopConfirm, dl.ListBottomconfirmDarker, dl.ListBottomconfirmLighter {
    grid-template-columns: 36px 1fr 60px 90px 60px 90px;
    gap: 0 6px; padding: 10px 12px;
  }
  .PDVList > h2,
  dl.PdvListTop,
  dl.PdvListBottomDarker,
  dl.PdvListBottomLighter { width: 380px; }
}


/* ═══════════════════════════════════════════════════
   RESPONSIVE ≤768px
   ═══════════════════════════════════════════════════ */

@media (max-width: 768px) {

  dl.ListTop dt.cart_unit,
  dl.ListBottomDarker dd.cart_unit,
  dl.ListBottomLighter dd.cart_unit,
  dl.ListTopConfirm dt.cart_unit,
  dl.ListBottomconfirmDarker dd.cart_unit,
  dl.ListBottomconfirmLighter dd.cart_unit { display: none; }

  dl.ListTop, dl.ListBottomDarker, dl.ListBottomLighter {
    grid-template-columns: 32px 1fr 90px 130px 90px;
  }
  dl.ListTopConfirm, dl.ListBottomconfirmDarker, dl.ListBottomconfirmLighter {
    grid-template-columns: 32px 1fr 90px 70px 90px;
  }

  /* PDV → puna širina */
  .PDVList { align-items: flex-start; }
  .PDVList > h2,
  dl.PdvListTop,
  dl.PdvListBottomDarker,
  dl.PdvListBottomLighter { width: 100%; }

  /* Forme → 1 kolona */
  form#order_form { grid-template-columns: 1fr; }
  form#order_form > fieldset.customer_type,
  form#order_form > .middle_order_form_left_column,
  form#order_form > .middle_order_form_right_column,
  form#order_form > .ButtonBox { grid-column: 1; }

  div.MiddleOrderForm { grid-template-columns: 1fr; }
  div.MiddleOrderForm > .middle_order_form_left_column,
  div.MiddleOrderForm > .middle_order_form_right_column,
  div.MiddleOrderForm > .ButtonBox { grid-column: 1; }

  form#payment_type > div { grid-template-columns: 1fr; }
  form#payment_type > div > .ButtonBox { grid-column: 1; }

  .shop_receipt_customer_info { grid-template-columns: 1fr; }

  dl.HeadShop dt { font-size: 10px; }
  dl.HeadShop dt:not(:last-child)::after { width: 18px; margin: 0 6px; }

  .RightRegister, .LeftLogin { padding: 20px; }

  .shop_receipt_content dl { grid-template-columns: 1fr 1fr; gap: 4px; }
}


/* ═══════════════════════════════════════════════════
   RESPONSIVE ≤600px — kartični prikaz tablice
   ═══════════════════════════════════════════════════ */

@media (max-width: 600px) {

  dl.ListTop, dl.ListTopConfirm { display: none; }

  dl.ListBottomDarker, dl.ListBottomLighter,
  dl.ListBottomconfirmDarker, dl.ListBottomconfirmLighter {
    display: flex; flex-direction: column; gap: 10px;
    padding: 14px; border-radius: 8px;
    border: 1.5px solid var(--border); margin-bottom: 10px;
  }
  dl.ListBottomDarker dd.cart_number,
  dl.ListBottomLighter dd.cart_number,
  dl.ListBottomconfirmDarker dd.cart_number,
  dl.ListBottomconfirmLighter dd.cart_number { display: none; }

  dd.cart_product { width: 100%; }
  .artikl-img { width: 60px; height: 60px; }
  .artikl-info h2 { font-size: 13px; -webkit-line-clamp: 3; }
  dd.cart_quantity { align-items: flex-start; }
  dd.cart_quantity input.spinner { width: 70px; }
  dd.cart_unit_price, dd.cart_total { text-align: left; }
  dd.cart_unit_price::before {
    content: 'Cijena: '; font-family: 'Montserrat', sans-serif;
    font-size: 10px; font-weight: 700; text-transform: uppercase; color: #aaa; margin-right: 4px;
  }
  dd.cart_total { padding-top: 8px; border-top: 1px solid #edf2f9; }
  dd.cart_total::before {
    content: 'Iznos: '; font-family: 'Montserrat', sans-serif;
    font-size: 10px; font-weight: 700; text-transform: uppercase; color: #aaa; margin-right: 4px;
  }

  dl.HeadShop { overflow-x: auto; scrollbar-width: none; justify-content: flex-start; padding: 10px 14px; }
  dl.HeadShop::-webkit-scrollbar { display: none; }
  dl.HeadShop dt { font-size: 9px; }
  dl.HeadShop dt:not(:last-child)::after { width: 12px; margin: 0 4px; }

  .ButtonBox { flex-direction: column; align-items: stretch; gap: 10px; }
  #back_to_shop a, input.prevStep, a.prevStep,
  a.nextStep, input.nextStep, a.confirmStep, input.confirmStep {
    width: 100%; justify-content: center; text-align: center;
  }

  .IznosBottom { padding: 14px 16px; }
  .IznosBottom .kn_price { font-size: 18px; }

  .PDVList { align-items: flex-start; }
  .PDVList > h2,
  dl.PdvListTop,
  dl.PdvListBottomDarker,
  dl.PdvListBottomLighter { width: 100%; }

  dl.PdvListTop dt,
  dl.PdvListBottomDarker dd,
  dl.PdvListBottomLighter dd { padding: 6px 8px; font-size: 10px; }

  .shop_receipt_customer_info { grid-template-columns: 1fr; }
  .RightRegister, .LeftLogin { padding: 18px 16px; }

  form#order_form { grid-template-columns: 1fr; }
  div.MiddleOrderForm { grid-template-columns: 1fr; }
  form#payment_type > div { grid-template-columns: 1fr; }

  .PDVList:has(form) { padding: 16px; }
  .PDVList:has(form) form input[type="text"] { min-width: 120px; }
}


/* ═══════════════════════════════════════════════════
   RESPONSIVE ≤400px
   ═══════════════════════════════════════════════════ */

@media (max-width: 400px) {
  dl.HeadShop dt { font-size: 8px; padding: 5px 0; }
  dl.HeadShop dt::before { width: 22px; height: 22px; font-size: 10px; }

  .artikl-info h2 { font-size: 12px; }
  dd.cart_quantity input.spinner { width: 56px; height: 32px; }
  dd.cart_quantity a { font-size: 8px; padding: 4px 7px; }

  .RightRegister, .LeftLogin { padding: 14px 12px; }
  .RightRegister h1, .RightRegister h2,
  .LeftLogin h1, .LeftLogin h2 { font-size: 13px; margin-bottom: 16px; }

  p.order_success { font-size: 14px; padding: 16px 18px; }
  .IznosBottom .kn_price { font-size: 16px; }
}

.cart_quantity {

    width: 220px;

    display: flex !important;

    align-items: center !important;

    flex-direction: row !important;

    flex-wrap: nowrap !important;

    gap: 8px;

}

 

.qty-wrapper {

    display: inline-flex;

    align-items: stretch;

    border: 1px solid #d7d7d7;

    border-radius: 3px;

    overflow: hidden;

}

 

.qty-btn {

    background: #ebebeb;

    border: none;

    width: 30px;

    height: 34px;

    font-size: 16px;

    font-weight: bold;

    color: #555;

    cursor: pointer;

    line-height: 1;

    padding: 0;

    transition: all .2s linear;

    font-family: "Muli", Arial, sans-serif;

}

 

.qty-btn:hover {

    background: #1da4e2;

    color: #fff;

}

 

.cart_quantity input {

    font-size: 12px !important;

    color: #555;

    font-weight: 400;

    margin: 0;

    padding: 9px 4px 8px !important;

    background: #fff;

    border: none;

    border-left: 1px solid #d7d7d7;

    border-right: 1px solid #d7d7d7;

    border-radius: 0;

    width: 44px;

    text-align: center;

    transition: all .3s linear;

    -moz-appearance: textfield;

    float: none;

}

 

.cart_quantity input::-webkit-outer-spin-button,

.cart_quantity input::-webkit-inner-spin-button {

    -webkit-appearance: none;

}

 

.cart_quantity input:hover {

    background: #fafafa;

}

 

.cart_quantity input:focus {

    background: rgba(239,66,54,0.05);

    outline: none;

}

 

.cart_quantity .remove-btn {

    font-size: 16px;

    color: #ccc;

    padding: 0 4px;

    display: inline-flex;

    align-items: center;

    cursor: pointer;

    text-decoration: none;

    flex-shrink: 0;

    line-height: 1;

}

 

.cart_quantity .remove-btn:hover {

    color: #e74c3c;

    text-decoration: none;

}

 

.cart_quantity a:not(.remove-btn) {

    display: none;

}