/* Team Kasper — component atoms
   Estrazione meccanica dei blocchi CSS-in-JS da _ds_bundle.js (useStyleOnce).
   Ogni blocco e' il CSS esatto iniettato a runtime dal componente React originale. */

/* ---- tk-kicker-css ---- */
.tk-kicker { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-cond);
  font-weight: 900; text-transform: uppercase; letter-spacing: var(--tracking-caps);
  font-size: var(--text-sm); line-height: 1; color: var(--blue-700); }
.tk-kicker__rule { width: 28px; height: 4px; border-radius: 2px; flex: none;
  background: linear-gradient(90deg, var(--red-500) 0 50%, var(--orange-500) 50% 100%); }
.tk-kicker--red { color: var(--red-500); }
.tk-kicker--ink { color: var(--ink-700); }
.tk-kicker--invert { color: #fff; }
.tk-kicker--norule .tk-kicker__rule { display: none; }

/* ---- tk-stripeband-css ---- */
.tk-stripeband { position: relative; overflow: hidden; background: var(--blue-700); }
.tk-stripeband__slats { position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='54'%20height='54'%3E%3Crect%20width='54'%20height='54'%20fill='%23004f94'/%3E%3Cpath%20d='M-13.5,13.5%20l27,-27%20M0,54%20l54,-54%20M40.5,67.5%20l27,-27'%20stroke='%23ffffff'%20stroke-width='13'/%3E%3C/svg%3E");
  background-size: 54px 54px; background-repeat: repeat; background-position: 0 0; }
/* Accent: red + orange slats, ONE blue-gap apart (same width & spacing as the
   white louvers — not adjacent), same "/" angle, spanning the band. */
.tk-stripeband__accent { position: absolute; top: 50%; left: 30%; }
.tk-stripeband__accent-inner { position: absolute;
  transform: translate(-50%, -50%) rotate(-45deg); }
.tk-stripeband__accent-bar { display: block; width: 1600px; height: 13px; }
.tk-stripeband__accent-bar--red { background: var(--red-500); }
.tk-stripeband__accent-bar--orange { background: var(--orange-500); margin-top: 25px; }
.tk-stripeband--subtle { background: var(--ink-50); }
.tk-stripeband--subtle .tk-stripeband__slats { background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='54'%20height='54'%3E%3Crect%20width='54'%20height='54'%20fill='%23eef4fb'/%3E%3Cpath%20d='M-13.5,13.5%20l27,-27%20M0,54%20l54,-54%20M40.5,67.5%20l27,-27'%20stroke='%23c9ddf2'%20stroke-width='13'/%3E%3C/svg%3E"); }
.tk-stripeband--subtle .tk-stripeband__accent { display: none; }
.tk-stripeband__content { position: relative; }

/* ---- tk-btn-css ---- */
.tk-btn {
  --_bg: var(--blue-700); --_bg-h: var(--blue-800); --_bg-a: var(--blue-900);
  --_fg: #fff; --_bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  font-family: var(--font-display); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight); line-height: 1;
  border: var(--border-width-thick) solid var(--_bd); border-radius: var(--radius-md);
  background: var(--_bg); color: var(--_fg); cursor: pointer; white-space: nowrap;
  text-decoration: none; transition: background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out); user-select: none;
}
.tk-btn:hover { background: var(--_bg-h); }
.tk-btn:active { background: var(--_bg-a); transform: translateY(1px); }
.tk-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.tk-btn[disabled], .tk-btn[aria-disabled="true"] {
  opacity: 0.45; pointer-events: none; }

/* sizes */
.tk-btn--sm { font-size: var(--text-sm); padding: 0 0.85em; height: 34px; }
.tk-btn--md { font-size: var(--text-md); padding: 0 1.15em; height: 42px; }
.tk-btn--lg { font-size: var(--text-lg); padding: 0 1.5em; height: 52px; }

/* variants */
.tk-btn--primary  { --_bg: var(--blue-700); --_bg-h: var(--blue-800); --_bg-a: var(--blue-900); --_fg:#fff; }
.tk-btn--warm     { --_bg: var(--orange-500); --_bg-h: var(--orange-600); --_bg-a: var(--orange-700); --_fg:#fff; }
.tk-btn--danger   { --_bg: var(--red-500); --_bg-h: var(--red-600); --_bg-a: var(--red-700); --_fg:#fff; }
.tk-btn--secondary{ --_bg: #fff; --_bg-h: var(--blue-50); --_bg-a: var(--blue-100);
                    --_fg: var(--blue-700); --_bd: var(--blue-700); }
.tk-btn--ghost    { --_bg: transparent; --_bg-h: var(--ink-100); --_bg-a: var(--ink-150);
                    --_fg: var(--ink-800); --_bd: transparent; }
.tk-btn--block { width: 100%; }
.tk-btn svg { width: 1.15em; height: 1.15em; flex: none; }

/* ---- tk-iconbtn-css ---- */
.tk-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--border-width-thick) solid transparent; cursor: pointer;
  background: transparent; color: var(--ink-700); border-radius: var(--radius-md);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.tk-iconbtn:hover { background: var(--ink-100); color: var(--ink-900); }
.tk-iconbtn:active { background: var(--ink-150); }
.tk-iconbtn:focus-visible { outline: none; box-shadow: var(--ring); }
.tk-iconbtn[disabled] { opacity: .45; pointer-events: none; }
.tk-iconbtn--solid { background: var(--blue-700); color: #fff; }
.tk-iconbtn--solid:hover { background: var(--blue-800); color:#fff; }
.tk-iconbtn--sm { width: 34px; height: 34px; }
.tk-iconbtn--md { width: 42px; height: 42px; }
.tk-iconbtn--lg { width: 52px; height: 52px; }
.tk-iconbtn svg { width: 1.25em; height: 1.25em; }
.tk-iconbtn--sm svg { font-size: 16px; }
.tk-iconbtn--md svg { font-size: 18px; }
.tk-iconbtn--lg svg { font-size: 22px; }

/* ---- tk-badge-css ---- */
.tk-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-cond);
  font-weight: 900; text-transform: uppercase; letter-spacing: var(--tracking-wide);
  font-size: var(--text-xs); line-height: 1; padding: 5px 9px; border-radius: var(--radius-sm);
  white-space: nowrap; }
.tk-badge--solid  { background: var(--blue-700); color: #fff; }
.tk-badge--blue   { background: var(--blue-100); color: var(--blue-800); }
.tk-badge--red    { background: var(--red-100); color: var(--red-700); }
.tk-badge--orange { background: var(--orange-100); color: var(--orange-700); }
.tk-badge--yellow { background: var(--yellow-300); color: var(--ink-900); }
.tk-badge--green  { background: var(--success-100); color: var(--success-500); }
.tk-badge--neutral{ background: var(--ink-100); color: var(--ink-700); }
.tk-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* ---- tk-tag-css ---- */
.tk-tag { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-body);
  font-size: var(--text-sm); color: var(--ink-800); background: #fff;
  border: var(--border-width) solid var(--border-default); border-radius: var(--radius-pill);
  padding: 6px 13px; line-height: 1; transition: border-color var(--dur-fast) var(--ease-out),
  background var(--dur-fast) var(--ease-out); }
.tk-tag--active { background: var(--blue-700); border-color: var(--blue-700); color: #fff; }
.tk-tag--clickable { cursor: pointer; }
.tk-tag--clickable:hover { border-color: var(--blue-500); }
.tk-tag--active.tk-tag--clickable:hover { background: var(--blue-800); border-color: var(--blue-800); }
.tk-tag__x { display: inline-flex; cursor: pointer; opacity: .7; margin: -2px -4px -2px 0; padding: 2px; }
.tk-tag__x:hover { opacity: 1; }
.tk-tag__x svg { width: 14px; height: 14px; }
.tk-tag svg { width: 15px; height: 15px; }

/* ---- tk-check-css ---- */
.tk-check { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer;
  font-family: var(--font-body); font-size: var(--text-md); color: var(--ink-800); line-height: 1.3; }
.tk-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.tk-check__box { flex: none; width: 20px; height: 20px; border-radius: var(--radius-sm);
  border: 2px solid var(--border-strong); background: #fff; display: grid; place-items: center;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
  margin-top: 1px; }
.tk-check__box svg { width: 14px; height: 14px; stroke: #fff; stroke-width: 3.5;
  opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.tk-check:hover .tk-check__box { border-color: var(--blue-500); }
.tk-check input:checked + .tk-check__box { background: var(--blue-700); border-color: var(--blue-700); }
.tk-check input:checked + .tk-check__box svg { opacity: 1; }
.tk-check input:focus-visible + .tk-check__box { box-shadow: var(--ring); }
.tk-check input:disabled + .tk-check__box { background: var(--ink-100); border-color: var(--ink-200); }
.tk-check--disabled { color: var(--ink-400); cursor: not-allowed; }

/* ---- tk-input-css ---- */
.tk-field { display: flex; flex-direction: column; gap: 6px; }
.tk-field__label { font-family: var(--font-cond); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-wide); font-size: var(--text-xs); color: var(--ink-700); }
.tk-field__req { color: var(--red-500); margin-left: 2px; }
.tk-input-wrap { position: relative; display: flex; align-items: center; }
.tk-input {
  width: 100%; font-family: var(--font-body); font-size: var(--text-md); color: var(--ink-900);
  background: #fff; border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md); height: 44px; padding: 0 14px;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.tk-input::placeholder { color: var(--ink-400); }
.tk-input:hover { border-color: var(--border-strong); }
.tk-input:focus { outline: none; border-color: var(--blue-500); box-shadow: var(--ring); }
.tk-input--has-left { padding-left: 42px; }
.tk-input--has-right { padding-right: 42px; }
.tk-input--invalid { border-color: var(--red-500); }
.tk-input--invalid:focus { box-shadow: 0 0 0 3px var(--red-100); }
.tk-input[disabled] { background: var(--ink-50); color: var(--ink-400); cursor: not-allowed; }
.tk-input-icon { position: absolute; display: inline-flex; color: var(--ink-400); pointer-events: none; }
.tk-input-icon--left { left: 14px; }
.tk-input-icon--right { right: 14px; }
.tk-input-icon svg { width: 18px; height: 18px; }
.tk-field__hint { font-size: var(--text-xs); color: var(--ink-500); font-family: var(--font-body); }
.tk-field__hint--error { color: var(--red-600); }

/* ---- tk-radio-css ---- */
.tk-radio { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer;
  font-family: var(--font-body); font-size: var(--text-md); color: var(--ink-800); line-height: 1.3; }
.tk-radio input { position: absolute; opacity: 0; width: 0; height: 0; }
.tk-radio__dot { flex: none; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--border-strong); background: #fff; display: grid; place-items: center;
  transition: border-color var(--dur-fast) var(--ease-out); margin-top: 1px; }
.tk-radio__dot::after { content: ""; width: 10px; height: 10px; border-radius: 50%;
  background: var(--blue-700); transform: scale(0); transition: transform var(--dur-fast) var(--ease-out); }
.tk-radio:hover .tk-radio__dot { border-color: var(--blue-500); }
.tk-radio input:checked + .tk-radio__dot { border-color: var(--blue-700); }
.tk-radio input:checked + .tk-radio__dot::after { transform: scale(1); }
.tk-radio input:focus-visible + .tk-radio__dot { box-shadow: var(--ring); }
.tk-radio input:disabled + .tk-radio__dot { background: var(--ink-100); border-color: var(--ink-200); }
.tk-radio--disabled { color: var(--ink-400); cursor: not-allowed; }

/* ---- tk-select-css ---- */
.tk-select-field { display: flex; flex-direction: column; gap: 6px; }
.tk-select-field__label { font-family: var(--font-cond); font-weight: 700; text-transform: uppercase;
  letter-spacing: var(--tracking-wide); font-size: var(--text-xs); color: var(--ink-700); }
.tk-select-wrap { position: relative; display: flex; align-items: center; }
.tk-select {
  width: 100%; appearance: none; font-family: var(--font-body); font-size: var(--text-md);
  color: var(--ink-900); background: #fff; border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md); height: 44px; padding: 0 40px 0 14px; cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.tk-select:hover { border-color: var(--border-strong); }
.tk-select:focus { outline: none; border-color: var(--blue-500); box-shadow: var(--ring); }
.tk-select[disabled] { background: var(--ink-50); color: var(--ink-400); cursor: not-allowed; }
.tk-select-caret { position: absolute; right: 14px; pointer-events: none; color: var(--ink-500);
  width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid currentColor; }

/* ---- tk-switch-css ---- */
.tk-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: var(--font-body); font-size: var(--text-md); color: var(--ink-800); }
.tk-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.tk-switch__track { flex: none; width: 44px; height: 26px; border-radius: 999px;
  background: var(--ink-300); padding: 3px; transition: background var(--dur-base) var(--ease-out); }
.tk-switch__thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff;
  box-shadow: var(--shadow-sm); transform: translateX(0); transition: transform var(--dur-base) var(--ease-out); }
.tk-switch input:checked + .tk-switch__track { background: var(--blue-700); }
.tk-switch input:checked + .tk-switch__track .tk-switch__thumb { transform: translateX(18px); }
.tk-switch input:focus-visible + .tk-switch__track { box-shadow: var(--ring); }
.tk-switch input:disabled + .tk-switch__track { background: var(--ink-200); }
.tk-switch--disabled { color: var(--ink-400); cursor: not-allowed; }

/* ---- tk-card-css ---- */
.tk-card { background: var(--surface-card); border-radius: var(--radius-lg);
  border: var(--border-width) solid var(--border-subtle); overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out),
  border-color var(--dur-base) var(--ease-out); }
.tk-card--raised { box-shadow: var(--shadow-md); border-color: transparent; }
.tk-card--flat { box-shadow: none; }
.tk-card--interactive { cursor: pointer; }
.tk-card--interactive:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px);
  border-color: transparent; }
.tk-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ink-100); }
.tk-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tk-card__media--stripe { background: var(--blue-700); background-image:
  repeating-linear-gradient(135deg, transparent 0 30px, rgba(255,255,255,.10) 30px 31px); }
.tk-card__body { padding: var(--space-5); }
.tk-card__pad { padding: var(--space-5); }