/* ============================================================================
 *  components.css — buttons, badges, glass cards, stars, forms, hours,
 *  quotes, service cards, spec list. Reusable pieces on the graphite floor.
 * ========================================================================== */

/* ---- Buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55em;
  padding: 0.78em 1.35em; font: inherit; font-weight: 700; line-height: 1;
  color: var(--accent-text); background: var(--azure);
  border: 1px solid transparent; border-radius: var(--r-pill); cursor: pointer;
  text-decoration: none; box-shadow: var(--glow-azure-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.btn:hover { color: var(--accent-text); transform: translateY(-2px); box-shadow: var(--glow-azure); background: var(--azure-soft); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.15em; height: 1.15em; }
.btn--lg { padding: 0.95em 1.7em; font-size: var(--step-0); }

.btn--ghost {
  background: transparent; color: var(--ink);
  border-color: var(--line-strong); box-shadow: none;
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { color: var(--ink); background: var(--glass); border-color: var(--azure); box-shadow: var(--glow-azure-sm); }

.btn[disabled] { opacity: 0.55; cursor: default; transform: none; box-shadow: none; }

/* ---- Pills / badges ---------------------------------------------------- */
.pill {
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.4em 0.85em; border-radius: var(--r-pill);
  font-size: var(--step--1); font-weight: 600; letter-spacing: 0.01em;
  background: var(--glass); border: 1px solid var(--line); color: var(--ink);
  backdrop-filter: blur(8px);
}
.pill svg { width: 1.05em; height: 1.05em; }
.pill b { color: var(--ink); }

/* ---- Stars ------------------------------------------------------------- */
.stars { display: inline-flex; gap: 0.12em; color: var(--star); filter: drop-shadow(0 0 6px oklch(70% 0.17 248 / 0.55)); }
.stars svg { width: 1.05em; height: 1.05em; }

/* ---- Glass card -------------------------------------------------------- */
.card {
  background: var(--glass); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--space-l);
  backdrop-filter: blur(12px); box-shadow: var(--shadow-1);
  position: relative; overflow: hidden;
}
.card::before {  /* top hairline glow */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}

/* ---- Forms ------------------------------------------------------------- */
.form { display: grid; gap: var(--space-s); }
.form__row { display: grid; gap: var(--space-s); grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 0.4em; }
.field label { font-size: var(--step--1); font-weight: 600; color: color-mix(in oklab, var(--ink) 85%, var(--graphite)); }
.req { color: var(--azure-ink); }
.input, .select, .textarea {
  width: 100%; padding: 0.8em 0.95em; font: inherit; color: var(--ink);
  background: oklch(11% 0.014 262 / 0.7); border: 1px solid var(--line-strong);
  border-radius: var(--r-sm); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: color-mix(in oklab, var(--muted) 80%, transparent); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--azure); box-shadow: 0 0 0 3px oklch(70% 0.17 248 / 0.20);
}
.textarea { min-height: 116px; resize: vertical; }
.select { appearance: none; background-image:
  linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) center, calc(100% - 14px) center; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; }
.check { display: flex; align-items: flex-start; gap: 0.6em; font-size: var(--step--1); color: var(--muted); line-height: 1.4; cursor: pointer; }
.check input { margin-top: 0.15em; accent-color: var(--azure); width: 1.05em; height: 1.05em; }
.form__status { min-height: 1.2em; margin-top: calc(-1 * var(--space-2xs)); }

/* ---- Hours table ------------------------------------------------------- */
.hours { width: 100%; border-collapse: collapse; margin-top: var(--space-s); font-size: var(--step--1); }
.hours th, .hours td { text-align: left; padding: 0.5em 0; border-bottom: 1px solid var(--line); }
.hours th { font-weight: 500; color: var(--muted); }
.hours td { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.hours .closed { color: color-mix(in oklab, var(--muted) 90%, transparent); }
.hours tr.is-today th, .hours tr.is-today td { color: var(--azure-ink); font-weight: 700; }
.hours tr.is-today th::before { content: "● "; color: var(--azure); font-size: 0.7em; vertical-align: middle; }

/* ---- Quote (review) card ---------------------------------------------- */
.quote {
  background: var(--glass); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--space-l); backdrop-filter: blur(12px); display: flex; flex-direction: column; gap: var(--space-s);
  box-shadow: var(--shadow-1);
}
.quote__text { font-size: var(--step-1); line-height: 1.5; color: var(--ink); }
.quote__foot { display: flex; align-items: center; gap: 0.7em; margin-top: auto; }
.quote__avatar {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: linear-gradient(140deg, var(--azure), var(--magenta)); color: oklch(98% 0.01 250);
  font-weight: 700; font-family: var(--font-display); flex: none;
}
.quote__who { font-weight: 600; color: var(--ink); }
.quote__src { font-size: var(--step--1); color: var(--muted); }
.quote__tag { color: var(--azure-ink); }

/* ---- Trust item -------------------------------------------------------- */
.trust__item { display: inline-flex; align-items: center; gap: 0.55em; color: color-mix(in oklab, var(--ink) 88%, var(--graphite)); font-weight: 500; font-size: var(--step--1); white-space: nowrap; }
.trust__item svg { width: 1.2em; height: 1.2em; color: var(--azure); flex: none; }

/* ---- Spec list (the "why us" panel) ------------------------------------ */
.specs { display: grid; gap: var(--space-s); margin-top: var(--space-2xs); }
.spec { display: flex; gap: 0.8em; align-items: flex-start; }
.spec__check {
  flex: none; width: 1.7rem; height: 1.7rem; border-radius: var(--r-sm);
  display: grid; place-items: center; color: var(--azure);
  background: oklch(70% 0.17 248 / 0.12); border: 1px solid color-mix(in oklab, var(--azure) 35%, transparent);
}
.spec__check svg { width: 1rem; height: 1rem; }
.spec b { display: block; color: var(--ink); font-weight: 600; }
.spec span { color: var(--muted); font-size: var(--step--1); }