/* ==========================================================================
   Churro component styles — buttons, inputs, cards, alerts, etc.
   ========================================================================== */

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0;
  border-radius: var(--radius-md);
  padding: 0 16px;
  height: 40px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .05s ease;
  white-space: nowrap;
  user-select: none;
}
.btn:focus-visible { outline: 2px solid var(--indigo-400); outline-offset: 2px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn--sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: var(--radius-sm); }
.btn--lg { height: 48px; padding: 0 20px; font-size: 15px; border-radius: var(--radius-lg); }
.btn--full { border-radius: var(--radius-full); }
.btn--icon { padding: 0; width: 40px; }
.btn--icon.btn--sm { width: 32px; }

.btn--primary   { background: var(--indigo-950); color: #fff; }
.btn--primary:hover:not(:disabled)   { background: #1a1680; }
.btn--primary:active:not(:disabled)  { background: #070458; }

.btn--accent    { background: var(--orange-500); color: #fff; }
.btn--accent:hover:not(:disabled)    { background: var(--orange-600); }

.btn--secondary { background: var(--neutral-900); color: #fff; }
.btn--secondary:hover:not(:disabled) { background: var(--neutral-700); }

.btn--outline   { background: #fff; color: var(--text); border-color: var(--border); }
.btn--outline:hover:not(:disabled)   { background: var(--neutral-50); border-color: var(--border-strong); }

.btn--ghost     { background: transparent; color: var(--text); }
.btn--ghost:hover:not(:disabled)     { background: var(--neutral-100); }

.btn--destructive { background: var(--red-500); color: #fff; }
.btn--destructive:hover:not(:disabled) { background: var(--red-600); }

.btn--link { background: transparent; color: var(--indigo-950); padding: 0; height: auto; text-decoration: underline; text-underline-offset: 3px; }

/* ---- Badges ---- */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px;
  padding: 0 8px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  border-radius: var(--radius-sm);
  background: var(--neutral-100);
  color: var(--text);
  border: 1px solid transparent;
}
.badge--outline { background: transparent; border-color: var(--border); color: var(--text); }
.badge--brand   { background: var(--indigo-50); color: var(--indigo-950); }
.badge--accent  { background: var(--orange-100); color: var(--orange-700); }
.badge--success { background: var(--green-100); color: var(--green-800); }
.badge--warning { background: var(--yellow-100); color: var(--yellow-800); }
.badge--danger  { background: var(--red-100); color: var(--red-700); }
.badge--info    { background: var(--blue-100); color: var(--blue-700); }
.badge--dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; opacity: .8;
}

/* ---- Inputs ---- */
.input {
  display: flex; align-items: center; gap: 8px;
  height: 40px;
  padding: 0 12px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text);
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.input::placeholder { color: var(--text-muted); }
.input:hover { border-color: var(--border-strong); }
.input:focus-visible, .input:focus { outline: none; border-color: var(--indigo-950); box-shadow: 0 0 0 3px rgba(10,7,119,0.12); }
.input:disabled { background: var(--neutral-50); color: var(--text-muted); cursor: not-allowed; }
.input--error { border-color: var(--red-500); }
.input--error:focus { box-shadow: 0 0 0 3px rgba(239,68,68,.15); border-color: var(--red-500); }

/* ---- Input group ---- */
.input-group { display: flex; align-items: stretch; position: relative; }
.input-group .input { padding-left: 36px; }
.input-group .input-icon {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-muted); pointer-events: none;
}
.input-group--addon { display: flex; }
.input-group--addon .addon {
  display: inline-flex; align-items: center; padding: 0 12px;
  background: var(--neutral-50); border: 1px solid var(--border);
  color: var(--text-muted); font-size: 14px;
}
.input-group--addon .addon:first-child { border-right: 0; border-top-left-radius: var(--radius-md); border-bottom-left-radius: var(--radius-md); }
.input-group--addon .addon:last-child  { border-left: 0; border-top-right-radius: var(--radius-md); border-bottom-right-radius: var(--radius-md); }
.input-group--addon .input:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group--addon .input:not(:last-child)  { border-top-right-radius: 0; border-bottom-right-radius: 0; }

/* ---- Field (label + input + help) ---- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: 14px; font-weight: 500; color: var(--text); }
.field__hint  { font-size: 12px; color: var(--text-muted); }
.field__error { font-size: 12px; color: var(--red-600); }
.field--req .field__label::after { content: " *"; color: var(--red-500); }

/* ---- Textarea ---- */
.textarea {
  font-family: var(--font-sans); font-size: 14px; color: var(--text);
  padding: 10px 12px;
  min-height: 96px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  width: 100%; resize: vertical;
  background: #fff;
}
.textarea:focus { outline: none; border-color: var(--indigo-950); box-shadow: 0 0 0 3px rgba(10,7,119,0.12); }

/* ---- Checkbox / Radio / Switch ---- */
.checkbox, .radio {
  appearance: none;
  width: 18px; height: 18px;
  border: 1.5px solid var(--border-strong);
  background: #fff;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s;
  flex-shrink: 0;
}
.checkbox { border-radius: 4px; }
.radio    { border-radius: 999px; }
.checkbox:checked, .radio:checked { background: var(--indigo-950); border-color: var(--indigo-950); }
.checkbox:checked::after {
  content: ""; width: 10px; height: 10px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'><path d='M3 8.5L6.5 12L13 4.5' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}
.radio:checked::after {
  content: ""; width: 6px; height: 6px; border-radius: 999px; background: #fff;
}
.checkbox:focus-visible, .radio:focus-visible { outline: 2px solid var(--indigo-400); outline-offset: 2px; }

.switch {
  appearance: none;
  width: 36px; height: 20px;
  background: var(--neutral-300);
  border-radius: 999px;
  position: relative;
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0;
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  transition: transform .2s;
}
.switch:checked { background: var(--indigo-950); }
.switch:checked::after { transform: translateX(16px); }

.check-row { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); cursor: pointer; }

/* ---- Tabs ---- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); }
.tab {
  padding: 10px 14px;
  font-size: 14px; font-weight: 500; color: var(--text-muted);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color .15s, border-color .15s;
  margin-bottom: -1px;
  background: transparent; border-top: none; border-left: none; border-right: none;
  font-family: var(--font-sans);
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--indigo-950); }
.tab-counter { margin-left: 6px; background: var(--neutral-100); color: var(--text-subtle); font-size: 11px; padding: 1px 6px; border-radius: 999px; }
.tab[aria-selected="true"] .tab-counter { background: var(--indigo-50); color: var(--indigo-950); }

/* ---- Alert ---- */
.alert {
  display: flex; gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--surface);
}
.alert__icon { flex-shrink: 0; margin-top: 2px; }
.alert__title { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.alert__body  { font-size: 13px; color: var(--text-subtle); }
.alert--info    { background: var(--blue-50);   border-color: var(--blue-200); }
.alert--info .alert__icon    { color: var(--blue-600); }
.alert--success { background: var(--green-50);  border-color: var(--green-200); }
.alert--success .alert__icon { color: var(--green-600); }
.alert--warning { background: var(--yellow-50); border-color: var(--yellow-200); }
.alert--warning .alert__icon { color: var(--yellow-700); }
.alert--danger  { background: var(--red-50);    border-color: var(--red-200); }
.alert--danger .alert__icon  { color: var(--red-600); }

/* ---- Separator ---- */
.sep { height: 1px; width: 100%; background: var(--border); border: 0; margin: 0; }
.sep--vert { width: 1px; height: 100%; background: var(--border); }

/* ---- Spinner ---- */
.spinner {
  width: 18px; height: 18px; border-radius: 999px;
  border: 2px solid var(--neutral-200);
  border-top-color: var(--indigo-950);
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
.spinner--sm { width: 14px; height: 14px; border-width: 1.5px; }
.spinner--lg { width: 28px; height: 28px; border-width: 2.5px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Item (list row) ---- */
.item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background .15s;
  font-size: 14px;
  color: var(--text);
}
.item:hover { background: var(--neutral-100); }
.item[aria-selected="true"] { background: var(--indigo-50); color: var(--indigo-950); }
.item__label { flex: 1; font-weight: 500; }
.item__hint  { color: var(--text-muted); font-size: 12px; }
.item__kbd {
  font-family: var(--font-mono); font-size: 11px;
  padding: 1px 6px; border: 1px solid var(--border); border-radius: 4px;
  background: var(--neutral-50); color: var(--text-muted);
}

/* ---- Label pill ---- */
.label-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px;
  font-size: 12px; font-weight: 500;
  background: var(--neutral-100); color: var(--text);
  border-radius: 999px;
}

/* ---- Cards ---- */
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
}
.card--hover:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }

/* ---- Listing card (Spotahome flavor) ---- */
.listing {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column;
}
.listing__media { aspect-ratio: 4/3; background: var(--neutral-100); position: relative; overflow: hidden; }
.listing__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.listing__fav {
  position: absolute; top: 10px; right: 10px;
  width: 32px; height: 32px; border-radius: 999px;
  background: rgba(255,255,255,.9); backdrop-filter: blur(4px);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--neutral-800); cursor: pointer; border: 0;
}
.listing__tag {
  position: absolute; top: 10px; left: 10px;
  font-size: 11px; font-weight: 600;
  padding: 4px 8px; border-radius: 6px;
  background: var(--orange-500); color: #fff;
  letter-spacing: 0.02em;
}
.listing__body { padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.listing__title { font-size: 15px; font-weight: 600; color: var(--text); }
.listing__sub { font-size: 13px; color: var(--text-muted); }
.listing__price { font-size: 16px; font-weight: 600; color: var(--indigo-950); }
.listing__price small { font-weight: 400; color: var(--text-muted); font-size: 12px; }

/* ---- Swatch ---- */
.swatch {
  width: 100%; aspect-ratio: 1.4/1; border-radius: var(--radius-md);
  border: 1px solid rgba(0,0,0,.06);
}
.swatch-cell { display: flex; flex-direction: column; gap: 6px; }
.swatch-cell__meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); }
.swatch-cell__name { font-size: 12px; font-weight: 500; color: var(--text); }

/* ---- Code block ---- */
.code {
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: var(--neutral-900);
  color: #e7e7e7;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  overflow-x: auto;
  line-height: 1.55;
}
.code .tok-attr { color: #a5b4fc; }
.code .tok-str  { color: #fdba74; }
.code .tok-tag  { color: #86efac; }
.code .tok-com  { color: #737373; }

/* ---- Inline code ---- */
code.i {
  font-family: var(--font-mono); font-size: 12.5px;
  padding: 1.5px 6px; border-radius: 4px;
  background: var(--neutral-100); color: var(--indigo-950);
  border: 1px solid var(--border);
}

/* ---- Kbd ---- */
kbd {
  font-family: var(--font-mono); font-size: 11px;
  padding: 2px 6px; border: 1px solid var(--border); border-bottom-width: 2px;
  border-radius: 4px;
  background: #fff; color: var(--text-subtle);
}

/* ---- Prose ---- */
.prose p { color: var(--text-subtle); font-size: 15px; line-height: 1.65; }
.prose p + p { margin-top: 12px; }
.prose a { color: var(--indigo-950); text-decoration: underline; text-underline-offset: 3px; }