/* ==========================================================================
   FL Bonovi — front
   1) Blok poklon bona [fl_poklon_bon] u košarici i u koraku plaćanja na blagajni.
   2) „Kome je bon?” na stranici proizvoda Poklon bon (isti uzorak kao .fl-nacin__opt na blagajni).
   Vrijednosti iz ACSS / FL tokena. Bez krugova, bez obojene lijeve trake; žuta je samo za akciju.
   ========================================================================== */

/* 1) Blok poklon bona */
.fl-bon { display: grid; gap: calc(var(--space-xs) * 0.75); inline-size: 100%; min-inline-size: 0; }
.fl-bon.is-radi { cursor: progress; }

.fl-bon__ulaz {
  border: var(--border-width) var(--border-style) var(--border-color-dark);
  border-radius: var(--radius);
  background-color: var(--white);
}
.fl-bon__sum {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-block-size: var(--fl-tap);
  padding-inline: var(--space-s);
  color: var(--base);
  font-size: var(--text-s);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.fl-bon__sum::-webkit-details-marker { display: none; }
.fl-bon__sum::after { content: "+"; margin-inline-start: auto; color: var(--text-dark-muted); font-size: var(--text-m); font-weight: 400; line-height: 1; }
.fl-bon__ulaz[open] > .fl-bon__sum::after { content: "\2212"; }
.fl-bon__sum:hover { text-decoration: underline; text-decoration-thickness: var(--border-width); text-underline-offset: 0.25em; }
.fl-bon__sum:focus-visible { outline: var(--focus-width) solid var(--primary-semi-dark); outline-offset: calc(var(--focus-width) * -1); border-radius: var(--radius); }

.fl-bon__ico {
  flex: none;
  inline-size: calc(var(--text-m) * 1.15);
  block-size: calc(var(--text-m) * 1.15);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.fl-bon__forma { display: grid; gap: calc(var(--space-xs) * 0.5); padding: 0 var(--space-s) var(--space-s); }
.fl-bon__lbl { color: var(--text-dark-muted); font-size: var(--text-xs); font-weight: 600; }
.fl-bon__red { display: flex; gap: calc(var(--space-xs) * 0.5); }
.fl-bon__in {
  flex: 1 1 auto;
  min-inline-size: 0;
  min-block-size: var(--fl-tap);
  margin: 0;
  padding: 0 var(--space-xs);
  border: var(--border-width) var(--border-style) var(--border-color-dark);
  border-radius: var(--radius);
  background-color: var(--white);
  color: var(--base);
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: var(--text-m);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.fl-bon__in:focus { border-color: var(--base); outline: none; box-shadow: inset 0 0 0 var(--border-width) var(--base); }
.fl-bon__btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: calc(var(--space-xs) * 0.5);
  min-block-size: var(--fl-tap);
  padding-inline: var(--space-s);
  border: 0;
  border-radius: var(--radius);
  background-color: var(--base);
  color: var(--white);
  font-size: var(--text-s);
  font-weight: 700;
  cursor: pointer;
}
.fl-bon__btn:hover:not(:disabled) { background-color: color-mix(in oklch, var(--base) 82%, var(--white)); }
.fl-bon__btn:disabled { cursor: progress; opacity: 0.85; }
.fl-bon__msg { margin: 0; color: var(--success-dark); font-size: var(--text-xs); line-height: 1.4; }
.fl-bon__msg:empty { display: none; }
.fl-bon__msg.is-greska { color: var(--danger-dark); font-weight: 600; }

.fl-bon__lista { display: grid; gap: calc(var(--space-xs) * 0.5); margin: 0; padding: 0; list-style: none; }
.fl-bon__stavka {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: calc(var(--space-xs) * 0.25) var(--space-xs);
  padding: calc(var(--space-xs) * 0.75) var(--space-s);
  border: var(--border-width) var(--border-style) color-mix(in oklch, var(--success) 40%, transparent);
  border-radius: var(--radius);
  background-color: color-mix(in oklch, var(--success) 8%, var(--white));
  color: var(--base);
}
.fl-bon__stavka .fl-bon__ico { grid-row: span 2; align-self: start; color: var(--success-dark); }
.fl-bon__kod { display: grid; gap: calc(var(--space-xs) * 0.15); min-inline-size: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--text-s); font-weight: 700; letter-spacing: 0.03em; overflow-wrap: anywhere; }
.fl-bon__kod small { font-family: inherit; color: var(--text-dark-muted); font-size: var(--text-xs); font-weight: 400; letter-spacing: 0; }
.fl-bon__iznos { font-size: var(--text-s); white-space: nowrap; font-variant-numeric: tabular-nums; }
.fl-bon__ukloni {
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--space-xs) * 0.4);
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-dark-muted);
  font-size: var(--text-xs);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.fl-bon__ukloni:hover { color: var(--base); }

.fl-bon__manjak,
.fl-bon__upoz {
  display: grid;
  gap: calc(var(--space-xs) * 0.25);
  margin: 0;
  padding: var(--space-xs) var(--space-s);
  border: var(--border-width) var(--border-style) var(--border-color-dark);
  border-radius: var(--radius);
  background-color: var(--neutral-ultra-light);
  color: var(--base);
  font-size: var(--text-xs);
  line-height: 1.45;
}
.fl-bon__manjak strong { font-size: var(--text-s); }
.fl-bon__upoz { border-color: color-mix(in oklch, var(--danger) 35%, transparent); background-color: color-mix(in oklch, var(--danger) 6%, var(--white)); }

.fl-bon__busy { display: inline-flex; align-items: center; gap: calc(var(--space-xs) * 0.2); }
.fl-bon__busy i { inline-size: calc(var(--text-xs) * 0.4); block-size: calc(var(--text-xs) * 0.4); border-radius: calc(var(--radius) * 0.5); background-color: currentColor; animation: fl-bon-busy 1s ease-in-out infinite; }
.fl-bon__busy i:nth-child(2) { animation-delay: 0.15s; }
.fl-bon__busy i:nth-child(3) { animation-delay: 0.3s; }
@keyframes fl-bon-busy { 0%, 80%, 100% { opacity: 0.25; } 40% { opacity: 1; } }

/* Red u zbroju košarice ([fl_poklon_bon_red]) */
.fl-total-row--bon small { color: var(--text-dark-muted); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--text-xs); }

/* 2) Stranica proizvoda: kome je bon */
.fl-bon-za { display: grid; gap: var(--space-s); inline-size: 100%; min-inline-size: 0; margin: 0 0 var(--space-s); padding: 0; border: 0; }
.fl-bon-za__l { margin: 0 0 calc(var(--space-xs) * 0.5); padding: 0; color: var(--base); font-size: var(--text-m); font-weight: 700; }
.fl-bon-za__izbor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--grid-gap) * 0.5); }
.fl-bon-za__opt {
  position: relative;
  display: grid;
  align-content: start;
  gap: calc(var(--space-xs) * 0.25);
  min-block-size: var(--fl-tap);
  padding: var(--space-s);
  border: var(--border-width) var(--border-style) var(--border-color-dark);
  border-radius: var(--radius);
  background-color: var(--white);
  cursor: pointer;
  transition: var(--transition);
}
.fl-bon-za__opt:hover { border-color: var(--base); }
.fl-bon-za__opt:has(input:checked) { border-color: var(--primary); box-shadow: inset 0 0 0 var(--border-width) var(--primary); background-color: var(--primary-ultra-light); }
.fl-bon-za__opt:has(input:focus-visible) { outline: var(--focus-width) solid var(--primary-semi-dark); outline-offset: var(--focus-offset); }
.fl-bon-za__opt input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
.fl-bon-za__t { color: var(--base); font-size: var(--text-s); font-weight: 700; line-height: 1.25; }
.fl-bon-za__d { color: var(--text-dark-muted); font-size: var(--text-xs); line-height: 1.35; }

.fl-bon-za__polja { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs) var(--space-s); }
.fl-bon-za__polja[hidden] { display: none; }
.fl-bon-za__f { display: grid; gap: calc(var(--space-xs) * 0.4); margin: 0; }
.fl-bon-za__f--puno { grid-column: 1 / -1; }
.fl-bon-za__f label { color: var(--base); font-size: var(--text-xs); font-weight: 600; }
.fl-bon-za__f label span { color: var(--text-dark-muted); font-weight: 400; }
.fl-bon-za__f abbr { color: var(--danger); text-decoration: none; }
.fl-bon-za__f :is(input, textarea) {
  inline-size: 100%;
  min-block-size: var(--fl-tap);
  margin: 0;
  padding: calc(var(--space-xs) * 0.5) var(--space-xs);
  border: var(--border-width) var(--border-style) var(--border-color-dark);
  border-radius: var(--radius);
  background-color: var(--white);
  color: var(--base);
  font-size: var(--text-m);
}
.fl-bon-za__f textarea { resize: vertical; }
.fl-bon-za__f :is(input, textarea):focus { border-color: var(--base); outline: none; box-shadow: inset 0 0 0 var(--border-width) var(--base); }
.fl-bon-za__info { margin: 0; color: var(--text-dark-muted); font-size: var(--text-xs); line-height: 1.45; }

@media (max-width: 478px) {
  .fl-bon-za__polja { grid-template-columns: minmax(0, 1fr); }
}