/* ==========================================================================
   POBIS – košarica i naplata u 4 koraka (dizajn „Pobis Kosarica”)
   ========================================================================== */

/* ---------- koraci u tamnom uvodu ---------- */
.dhero--flow .dhero__in { padding-top: 36px; padding-bottom: 0; }
.dhero__h1--flow { margin-top: 12px; font-size: clamp(42px, 5vw, 72px); }
.fsteps { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 30px 0 0; padding: 0; list-style: none; }
.fsteps button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px 4px 18px; border: 0; border-bottom: 5px solid transparent; background: transparent; text-align: left; cursor: default; }
.fsteps__n { display: flex; align-items: center; justify-content: center; flex: none; width: 30px; height: 30px; border: 1px solid #3B4A58; font-family: var(--f-mono); font-size: 11px; color: var(--steel-3); }
.fsteps__l { font-family: var(--f-display); font-weight: 700; font-size: 18px; line-height: 1.1; letter-spacing: .06em; text-transform: uppercase; color: var(--steel-3); }
.fsteps li.is-active button { border-bottom-color: var(--sky); }
.fsteps li.is-active .fsteps__n { background: var(--sky); border-color: var(--sky); color: var(--night-2); }
.fsteps li.is-done button { border-bottom-color: var(--blue-400); }
.fsteps li.is-done button:not([disabled]) { cursor: pointer; }
.fsteps li.is-done .fsteps__n { background: var(--blue); border-color: var(--blue); color: #fff; }
.fsteps li.is-active .fsteps__l, .fsteps li.is-done .fsteps__l { color: #fff; }

/* ---------- raspored ---------- */
.flow-wrap { position: relative; min-height: 520px; background: var(--paper); }
.flow-wrap__grid { position: absolute; inset: 0; background-image: linear-gradient(#ECECE6 1px, transparent 1px), linear-gradient(90deg, #ECECE6 1px, transparent 1px); background-size: 44px 44px; }
.flow-wrap__in { position: relative; padding-top: 40px; padding-bottom: 80px; }
.flow { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 28px; }
.flow__main { flex: 1 1 600px; min-width: 0; }
.flow__side { position: sticky; top: 20px; flex: 0 0 340px; }
.flow__fine { margin: 12px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--muted-2); }
.flow__tel { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--muted-2); }
.flow__tel i { width: 6px; height: 6px; background: var(--blue); }

/* ---------- obavijesti ---------- */
.woocommerce-notices-wrapper:empty { display: none; }
.woocommerce-message, .woocommerce-info, .woocommerce-error { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin: 0 0 20px; padding: 14px 18px; border: 1px solid var(--sky); background: #F2F8FD; list-style: none; font-size: 15px; }
.woocommerce-error { display: block; border-color: #D9534F; background: #FDF3F2; color: #7A211C; }
.woocommerce-error li + li { margin-top: 4px; }
.woocommerce-message .button, .woocommerce-info .button { order: 2; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- korak 1: košarica ---------- */
.ctable { background: #fff; border: 1px solid var(--line); }
.ctable__head, .ctable__row { display: grid; grid-template-columns: minmax(0, 1fr) 150px 44px; align-items: center; gap: 16px; }
.ctable--priced .ctable__head, .ctable--priced .ctable__row { grid-template-columns: minmax(0, 1fr) 120px 150px 44px; }
.ctable__head { padding: 12px 20px; background: var(--ink); font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; color: #9FD2EE; }
.ctable__row { padding: 16px 20px; border-bottom: 1px solid var(--line-3); }
.ctable__prod { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 16px; min-width: 0; color: var(--ink); }
.ctable__prod:hover { color: var(--blue); }
.ctable__img { display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; background: #F3F3EF; }
.ctable__img img { width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; }
.ctable__txt { display: grid; gap: 6px; min-width: 0; }
.ctable__txt b { font-family: var(--f-display); font-weight: 700; font-size: 22px; line-height: 1.02; text-transform: uppercase; }
.ctable__txt small { font-family: var(--f-mono); font-size: 11px; line-height: 1.5; letter-spacing: .06em; color: var(--muted-2); }
.ctable__price { font-family: var(--f-mono); font-size: 13px; }
.qty { display: flex; height: 42px; border: 1px solid #DCDCD8; }
.qty button { width: 40px; border: 0; background: #fff; font-size: 18px; color: var(--ink); cursor: pointer; }
.qty button:hover { background: #F2F2EE; }
.qty input { flex: 1; width: 100%; min-width: 0; padding: 0; border: 0; border-left: 1px solid #DCDCD8; border-right: 1px solid #DCDCD8; border-radius: 0; background: #fff; font-family: var(--f-mono); font-size: 14px; text-align: center; color: var(--ink); -moz-appearance: textfield; appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.qty--fixed { align-items: center; justify-content: center; font-family: var(--f-mono); font-size: 14px; }
.ctable__x { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid var(--line); background: #fff; font-size: 16px; color: var(--muted); transition: color .15s ease, border-color .15s ease; }
.ctable__x:hover { border-color: #A83A2E; color: #A83A2E; }
.ctable__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; color: var(--muted-2); }
.ctable__update { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.fnote { display: grid; gap: 8px; margin-top: 18px; }
.fnote span { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; color: var(--muted-2); }
.fnote textarea { padding: 13px 14px; border: 1px solid #DCDCD8; border-radius: 0; background: #fff; font-family: var(--f-body); font-size: 16px; line-height: 1.5; resize: vertical; outline: none; }
.fnote textarea:focus { border-color: var(--blue); }
.flow-empty { padding: 56px 28px; background: #fff; border: 1px dashed #CFCFCA; text-align: center; }
.flow-empty h2 { margin: 0; font-family: var(--f-display); font-weight: 700; font-size: 34px; line-height: 1.05; text-transform: uppercase; }
.flow-empty p { max-width: 44ch; margin: 10px auto 20px; font-size: 16px; line-height: 1.6; color: var(--text); }

/* ---------- sažetak ---------- */
.fbox { position: relative; padding: 24px; background: var(--night-2); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%); color: #fff; }
.flow-summary__k { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .18em; color: #9FD2EE; }
.flow-summary__items { display: grid; margin: 12px 0 0; padding: 0; list-style: none; }
.flow-summary__items li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.flow-summary__items li > span:first-child { display: grid; gap: 2px; min-width: 0; }
.flow-summary__items b { font-family: var(--f-display); font-weight: 600; font-size: 16px; line-height: 1.1; text-transform: uppercase; }
.flow-summary__items small { display: block; font-family: var(--f-mono); font-size: 10px; line-height: 1.5; color: var(--steel); }
.flow-summary__q { font-family: var(--f-mono); font-size: 12px; white-space: nowrap; text-align: right; }
.flow-summary__tot { display: grid; gap: 8px; margin: 14px 0 0; font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; }
.flow-summary__tot > div { display: flex; justify-content: space-between; gap: 12px; }
.flow-summary__tot dt { color: var(--steel); }
.flow-summary__tot dd { margin: 0; text-align: right; }
.flow-summary__tot .is-accent { color: #FFD9B8; }
.flow-summary__tot .is-total { margin-top: 4px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: 14px; }
.fbox__next { display: block; width: 100%; margin-top: 20px; padding: 17px 20px; border: 0; background: var(--orange); clip-path: var(--clip-10); font-family: var(--f-display); font-weight: 700; font-size: 19px; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; text-align: center; color: #fff; cursor: pointer; transition: background .2s ease; }
.fbox__next:hover { background: #F08A45; color: #fff; }
.fbox__next.is-busy { background: #2C4157; color: var(--steel); pointer-events: none; }
.fbox__back { width: 100%; margin-top: 8px; padding: 12px; border: 1px solid #2C4157; background: transparent; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; color: #C3CFD9; cursor: pointer; }
.fbox__back:hover { border-color: var(--steel); }

/* ---------- korak 2: podaci ---------- */
.fcard { padding: 30px; background: #fff; border: 1px solid var(--line); }
.fcard + .fcard, .fcard--review { margin-top: 14px; }
.fcard .sec-title { font-size: clamp(28px, 3vw, 40px); }
.fcard--review { padding: 24px 30px; }
.ffields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 20px; }
.ffields .form-row { display: grid; align-content: start; gap: 6px; margin: 0; }
.ffields .form-row-wide, .ffields .notes, .ffields #billing_country_field, .ffields #billing_address_1_field { grid-column: 1 / -1; }
.ffields label { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2); }
.ffields abbr.required, .ffields .optional { border: 0; text-decoration: none; color: inherit; }
.ffields .optional { display: none; }
.ffields input.input-text, .ffields textarea, .ffields select { width: 100%; padding: 13px 14px; border: 1px solid #DCDCD8; border-radius: 0; background: #fff; font-family: var(--f-body); font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--ink); outline: none; }
.ffields textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.ffields input.input-text:focus, .ffields textarea:focus, .ffields select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(11, 82, 150, .12); }
.ffields .woocommerce-invalid > label { color: #A83A2E; }
.ffields .woocommerce-invalid input.input-text, .ffields .woocommerce-invalid select { border-color: #A83A2E; }
.ffields .checkout-inline-error-message { margin: 0; font-size: 13px; color: #A83A2E; }
.pobis-tip > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.pobis-tip .woocommerce-input-wrapper { display: flex; flex-wrap: wrap; gap: 4px; }
.pobis-tip input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.pobis-tip label.radio { padding: 11px 18px; border: 1px solid #DCDCD8; background: #fff; font-size: 11px; letter-spacing: .1em; color: var(--ink-2); cursor: pointer; }
.pobis-tip input[type=radio]:checked + label.radio { background: var(--blue); border-color: var(--blue); color: #fff; }
.pobis-tip input[type=radio]:focus-visible + label.radio { outline: 2px solid var(--blue-400); outline-offset: 2px; }
form.is-osoba .pobis-r1 { display: none; }
.pobis-tip label.radio .required { display: none; }
.pobis-r1 > label::after { content: " *"; }
.ferr { margin: 14px 0 0; font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; color: #A83A2E; }
.select2-container .select2-selection--single { height: 50px; border: 1px solid #DCDCD8; border-radius: 0; }
.select2-container .select2-selection--single .select2-selection__rendered { padding: 0 14px; font-family: var(--f-body); font-size: 16px; line-height: 48px; color: var(--ink); }
.select2-container .select2-selection--single .select2-selection__arrow { top: 12px; right: 8px; }

/* ---------- korak 3: dostava, plaćanje, pregled ---------- */
.fopts, .wc_payment_methods { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.fopts li { position: relative; }
.fopts input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.fopts label { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 14px; height: 100%; padding: 18px; background: #fff; border: 1px solid #DCDCD8; cursor: pointer; }
.fopts label i { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; border: 1px solid #DCDCD8; }
.fopts label i::after { content: ""; width: 12px; height: 12px; }
.fopts label b { display: block; font-family: var(--f-display); font-weight: 700; font-size: 20px; line-height: 1.1; text-transform: uppercase; color: var(--ink); }
.fopts label small { display: block; margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--text); }
.fopts input:checked + label { background: #F2F8FD; border-color: var(--blue); }
.fopts input:checked + label i { border-color: var(--blue); }
.fopts input:checked + label i::after { background: var(--blue); }
.fopts input:focus-visible + label { outline: 2px solid var(--blue-400); outline-offset: 2px; }
.fopts__none { margin: 14px 0 0; padding: 16px 18px; background: var(--paper); border: 1px dashed var(--line-2); font-size: 15px; color: var(--text); }

#payment { margin-top: 30px; }
#payment::before { content: "PLAĆANJE"; display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; color: var(--blue); }
.wc_payment_method { position: relative; padding: 18px 18px 18px 54px; background: #fff; border: 1px solid #DCDCD8; }
.wc_payment_method:has(input:checked) { background: #F2F8FD; border-color: var(--blue); }
.wc_payment_method input[type=radio] { position: absolute; opacity: 0; }
.wc_payment_method > label { display: block; font-family: var(--f-display); font-weight: 700; font-size: 20px; line-height: 1.1; text-transform: uppercase; color: var(--ink); cursor: pointer; }
.wc_payment_method > label img { display: none; }
.wc_payment_method > label::before { content: ""; position: absolute; left: 18px; top: 18px; width: 22px; height: 22px; border: 1px solid #DCDCD8; background: #fff; }
.wc_payment_method > label::after { content: ""; position: absolute; left: 23px; top: 23px; width: 12px; height: 12px; }
.wc_payment_method:has(input:checked) > label::before { border-color: var(--blue); }
.wc_payment_method:has(input:checked) > label::after { background: var(--blue); }
.wc_payment_method:has(input:focus-visible) { outline: 2px solid var(--blue-400); outline-offset: 2px; }
.payment_box { display: block !important; margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--text); }
.payment_box p { margin: 0; }
.place-order { margin: 0; padding: 0; }
#place_order { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.woocommerce-privacy-policy-text { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--muted-2); }
.woocommerce-privacy-policy-text p { margin: 0; }
.blockUI.blockOverlay { background: rgba(247, 247, 245, .6) !important; }

.freview__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.freview__head button { padding: 0; border: 0; background: transparent; font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; color: var(--blue); cursor: pointer; }
.freview { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px 24px; margin-top: 12px; font-size: 15px; line-height: 1.6; color: #2A2F35; }
.freview b { font-weight: 600; }
.fterms { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; font-size: 15px; line-height: 1.5; color: var(--ink-2); cursor: pointer; }
.fterms input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--blue); }
.fterms.is-invalid { color: #A83A2E; }

/* ---------- korak 4: potvrda ---------- */
.fdone { max-width: 880px; margin: 0 auto; }
.fdone__box { position: relative; padding: 40px; background: var(--night-2); clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px); color: #fff; }
.fdone__dots { position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1.4px); background-size: 8px 8px; }
.fdone__in { position: relative; }
.fdone__no { font-family: var(--f-mono); font-size: 11px; letter-spacing: .18em; color: #9FD2EE; }
.fdone__title { margin: 10px 0 0; font-family: var(--f-display); font-weight: 700; font-size: clamp(36px, 4vw, 56px); line-height: .95; text-transform: uppercase; color: #fff; }
.fdone__box p { max-width: 56ch; margin: 14px 0 0; font-size: 17px; line-height: 1.6; color: #C3CFD9; }
.fdone__steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; }
.fdone__steps li { padding: 22px; background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--blue); }
.fdone__steps span { font-family: var(--f-mono); font-size: 11px; color: var(--muted); }
.fdone__steps h3 { margin: 10px 0 0; font-family: var(--f-display); font-size: 22px; font-weight: 700; line-height: 1.1; text-transform: uppercase; }
.fdone__steps p { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--text); }
.fdone__items, .fdone__pay:not(:empty) { margin-top: 14px; padding: 18px 22px; background: #fff; border: 1px solid var(--line); }
.fdone__k { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .16em; color: var(--muted); }
.fdone__items ul { display: grid; margin: 8px 0 0; padding: 0; list-style: none; }
.fdone__items li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-3); font-size: 15px; }
.fdone__items small { font-family: var(--f-mono); font-size: 11px; color: var(--muted-2); }
.fdone__q { font-family: var(--f-mono); font-size: 12px; white-space: nowrap; }
.fdone__total { display: flex; justify-content: space-between; padding-top: 12px; font-family: var(--f-mono); font-size: 13px; }
.fdone__pay h2, .fdone__pay h3 { margin: 0 0 8px; font-family: var(--f-display); font-size: 22px; font-weight: 700; text-transform: uppercase; }
.fdone__pay ul { margin: 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.7; }
.fdone__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

@media (max-width: 1020px) {
	.flow__side { position: static; flex: 1 1 100%; }
}
@media (max-width: 760px) {
	.fsteps__l { display: none; }
	.fsteps li.is-active .fsteps__l { display: block; font-size: 16px; }
	.fsteps { grid-template-columns: auto auto auto auto; justify-content: start; gap: 6px; }
	.fsteps li.is-active { flex: 1; }
	.ctable__head { display: none; }
	.ctable__row, .ctable--priced .ctable__row { grid-template-columns: minmax(0, 1fr) 44px; }
	.ctable__prod { grid-column: 1 / -1; grid-template-columns: 64px minmax(0, 1fr); }
	.ctable__img { width: 64px; height: 64px; }
	.ctable__txt b { font-size: 19px; }
	.ffields { grid-template-columns: minmax(0, 1fr); }
	.fcard { padding: 20px; }
	.fdone__box { padding: 26px 22px; }
}