/* KUBIK component classes. Five states everywhere: base, hover, focus, active, disabled.
   Hover is never the only signal — touch screens have no hover. */

/* ---- Button ---- */
.k-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1);min-height:var(--button-height);padding:0 var(--space-3);border-radius:var(--radius-button);border:var(--hairline) solid transparent;font-family:var(--font-core);font-size:var(--fs-body);font-weight:var(--weight-medium);line-height:1;letter-spacing:0;cursor:pointer;text-decoration:none;transition:var(--transition-interactive);-webkit-tap-highlight-color:transparent}
.k-btn--sm{min-height:var(--button-height-sm);padding:0 var(--space-2);font-size:var(--fs-small)}
.k-btn--full{width:100%}
.k-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.k-btn--primary{background:var(--action-bg);color:var(--action-fg);border-color:var(--action-bg)}
.k-btn--primary:hover{background:var(--action-bg-hover);border-color:var(--action-bg-hover)}
.k-btn--primary:active{background:var(--action-bg-active);border-color:var(--action-bg-active)}
.k-btn--secondary{background:var(--surface-card);color:var(--text-body);border-color:var(--line)}
.k-btn--secondary:hover{border-color:var(--grafit)}
.k-btn--secondary:active{background:#FAFAF9;border-color:var(--grafit)}
.k-btn--ghost{background:transparent;color:var(--text-link);border-color:transparent;padding:0 var(--space-1)}
.k-btn--ghost:hover{color:var(--melyzold-hover);border-bottom-color:var(--melyzold-hover)}
.k-btn--ghost:active{color:var(--melyzold-active)}
.k-btn[disabled],.k-btn[aria-disabled=true]{cursor:not-allowed;background:var(--action-disabled-bg);color:var(--text-disabled);border-color:var(--action-disabled-bg)}
.k-btn--secondary[disabled],.k-btn--ghost[disabled]{background:transparent;border-color:var(--line);color:var(--text-disabled)}

/* ---- IconButton ---- */
.k-iconbtn{display:inline-flex;align-items:center;justify-content:center;width:var(--tap-min);height:var(--tap-min);border-radius:var(--radius-button);border:var(--hairline) solid var(--line);background:var(--surface-card);color:var(--grafit);cursor:pointer;transition:var(--transition-interactive)}
.k-iconbtn:hover{border-color:var(--grafit)}
.k-iconbtn:active{background:#FAFAF9}
.k-iconbtn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.k-iconbtn--bare{border-color:transparent;background:transparent}
.k-iconbtn--bare:hover{border-color:var(--line)}
.k-iconbtn[aria-pressed=true]{border-color:var(--melyzold);color:var(--melyzold)}
.k-iconbtn[disabled]{cursor:not-allowed;color:var(--text-disabled);border-color:var(--line)}
.k-iconbtn svg{width:20px;height:20px;stroke-width:1.5}

/* ---- Label ---- */
.k-label{display:block;font-size:var(--fs-label);line-height:var(--lh-label);letter-spacing:var(--ls-label);font-weight:var(--weight-medium);text-transform:uppercase;color:var(--text-faint)}
.k-label--ink{color:var(--grafit)}
.k-label--accent{color:var(--accent)}

/* ---- Badge ---- */
.k-badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border:var(--hairline) solid var(--line);border-radius:var(--radius-button);background:var(--surface-card);font-size:var(--fs-label);line-height:1;letter-spacing:var(--ls-label);text-transform:uppercase;font-weight:var(--weight-medium);color:var(--text-muted);white-space:nowrap}
.k-badge--active{border-color:var(--melyzold);color:var(--melyzold)}
.k-badge--accent{border-color:var(--rez);color:var(--rez)}
.k-badge--dark{background:var(--surface-dark);border-color:var(--surface-dark);color:var(--text-on-dark)}

/* ---- Field / Input / Textarea / Select ---- */
.k-field{display:flex;flex-direction:column;gap:6px}
.k-field__label{font-size:var(--fs-small);font-weight:var(--weight-medium);color:var(--text-body)}
.k-field__hint{font-size:var(--fs-small);color:var(--text-faint)}
.k-field__error{font-size:var(--fs-small);color:var(--rez)}
.k-input,.k-textarea,.k-select{width:100%;min-height:var(--field-height);padding:10px 12px;background:var(--surface-field);color:var(--text-body);border:var(--hairline) solid var(--border-field);border-radius:var(--radius-field);font-family:var(--font-core);font-size:var(--fs-body);line-height:1.4;transition:var(--transition-interactive)}
.k-textarea{min-height:120px;resize:vertical;line-height:var(--lh-body)}
.k-input::placeholder,.k-textarea::placeholder{color:var(--text-faint)}
.k-input:hover,.k-textarea:hover,.k-select:hover{border-color:var(--szoveg-3)}
.k-input:focus-visible,.k-textarea:focus-visible,.k-select:focus-visible{outline:none;border-color:var(--melyzold);box-shadow:var(--focus-ring)}
.k-input[aria-invalid=true],.k-textarea[aria-invalid=true]{border-color:var(--rez)}
.k-input[disabled],.k-textarea[disabled],.k-select[disabled]{color:var(--text-disabled);border-color:var(--line);background:var(--surface-field);cursor:not-allowed}
.k-select{appearance:none;padding-right:36px;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--grafit) 50%),linear-gradient(135deg,var(--grafit) 50%,transparent 50%);background-size:6px 6px,6px 6px;background-position:right 16px center,right 10px center;background-repeat:no-repeat}

/* ---- Checkbox / Radio ---- */
.k-choice{display:flex;align-items:center;gap:12px;min-height:var(--tap-min);cursor:pointer;font-size:var(--fs-body);color:var(--text-body)}
.k-choice__box{flex:none;display:grid;place-items:center;width:20px;height:20px;border:var(--hairline) solid var(--line);background:var(--surface-field);transition:var(--transition-interactive)}
.k-choice--radio .k-choice__box{border-radius:50%}
.k-choice:hover .k-choice__box{border-color:var(--grafit)}
.k-choice input{position:absolute;opacity:0;width:0;height:0}
.k-choice input:focus-visible+.k-choice__box{box-shadow:var(--focus-ring)}
.k-choice input:checked+.k-choice__box{border-color:var(--melyzold);background:var(--melyzold)}
.k-choice__box svg{width:12px;height:12px;color:var(--feher);opacity:0}
.k-choice input:checked+.k-choice__box svg{opacity:1}
.k-choice--radio input:checked+.k-choice__box{background:var(--surface-field)}
.k-choice--radio .k-choice__dot{width:10px;height:10px;border-radius:50%;background:var(--melyzold);opacity:0;transition:opacity var(--dur-fast) var(--ease-out)}
.k-choice--radio input:checked+.k-choice__box .k-choice__dot{opacity:1}
.k-choice--disabled{cursor:not-allowed;color:var(--text-disabled)}
.k-choice--disabled .k-choice__box{border-color:var(--line);background:var(--surface-field)}

/* ---- Card ---- */
.k-card{position:relative;background:var(--surface-card);border:var(--hairline) solid var(--border-card);border-radius:var(--radius-card);padding:var(--card-pad)}
.k-card--lg{padding:var(--card-pad-lg)}
.k-card--flush{padding:0;overflow:hidden}
.k-card--interactive{cursor:pointer;transition:var(--transition-interactive)}
.k-card--interactive:hover{border-color:var(--grafit)}
.k-card--interactive:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.k-card--selected{border-color:var(--melyzold)}
.k-card--corners{border-color:transparent;border-radius:0}
.k-card--corners::before,.k-card--corners::after{content:"";position:absolute;width:var(--corner-arm);height:var(--corner-arm);pointer-events:none}
.k-card--corners::before{top:0;left:0;border-top:var(--hairline) solid var(--grafit);border-left:var(--hairline) solid var(--grafit)}
.k-card--corners::after{bottom:0;right:0;border-bottom:var(--hairline) solid var(--grafit);border-right:var(--hairline) solid var(--grafit)}
.k-card__band{height:10px;border-radius:2px;background-size:cover;background-position:center;margin-bottom:var(--space-2)}

/* ---- Divider ---- */
.k-divider{width:100%;border:0;border-top:var(--hairline) solid var(--line)}
.k-divider--double{border-top:var(--hairline) solid var(--grafit);border-bottom:var(--hairline) solid var(--grafit);height:5px;box-sizing:content-box}
.k-divider--dots{border:0;height:1px;background-image:var(--dots-image)}

/* ---- RulerDivider (mérőléc) ---- */
.k-ruler{position:relative;width:100%;height:var(--ruler-height);border-bottom:var(--hairline) solid var(--line)}
.k-ruler::before{content:"";position:absolute;inset:0;background-image:var(--ruler-image);opacity:var(--ruler-opacity)}
.k-ruler--tall{height:16px}

/* ---- PhotoFrame ---- */
.k-photo{border:var(--hairline) solid var(--border-photo);padding:8px;background:var(--surface-card)}
.k-photo img{width:100%;height:100%;object-fit:cover;display:block}
.k-photo__media{overflow:hidden}
.k-photo__caption{display:flex;justify-content:space-between;gap:var(--space-2);margin-top:8px;padding-top:8px;border-top:var(--hairline) solid var(--line);font-size:var(--fs-small);color:var(--text-muted)}
.k-photo__caption span:last-child{color:var(--text-faint)}

/* ---- DarkBand ---- */
.k-darkband{position:relative;overflow:hidden;background:var(--surface-dark);color:var(--text-on-dark);padding:var(--space-4) var(--space-3);border-radius:2px}
.k-darkband::before{content:"";position:absolute;inset:0;background-image:var(--grain-image);opacity:var(--grain-opacity);pointer-events:none}
.k-darkband>*{position:relative}

/* ---- EmptyState ---- */
.k-empty{position:relative;overflow:hidden;border:var(--hairline) solid var(--line);border-radius:var(--radius-card);padding:var(--space-4) var(--space-3);text-align:center;color:var(--text-muted)}
.k-empty::before{content:"";position:absolute;inset:0;background-image:var(--hatch-image);opacity:.5;pointer-events:none}
.k-empty>*{position:relative}

/* ---- StepList ---- */
.k-steps{display:flex;flex-direction:column;gap:var(--space-3);margin:0;padding:0;list-style:none;counter-reset:k-step}
.k-steps__item{display:grid;grid-template-columns:32px 1fr;gap:var(--space-2);align-items:start}
.k-steps__n{font-size:var(--fs-h3);font-weight:var(--weight-semibold);line-height:1.2;color:var(--melyzold);font-variant-numeric:tabular-nums}
.k-steps__title{font-size:var(--fs-h3);font-weight:var(--weight-medium);line-height:var(--lh-h3);color:var(--text-body)}
.k-steps__body{margin-top:4px;font-size:var(--fs-body);color:var(--text-muted)}
.k-steps--done .k-steps__n{color:var(--text-faint)}