/* Shared UI components used across pages — design-spec.md Section 1 */

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  /* --color-secondary is a golden amber; it does not meet AA contrast with
     white text (~2:1), so button text uses the dark charcoal token instead
     (~7.2:1 contrast) — see brand-brief.md Section 5. */
  background: var(--color-secondary);
  color: var(--color-charcoal);
}

.btn-primary:hover {
  background: var(--color-secondary-600);
  color: var(--color-charcoal);
}

.btn-outline {
  background: transparent;
  border-color: currentColor;
  color: var(--color-primary);
}

.btn-outline:hover {
  background: var(--color-primary-100);
}

.btn-outline-light {
  background: transparent;
  border-color: #fff;
  color: #fff;
}

.btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.15);
}

.btn-ghost {
  background: transparent;
  color: var(--color-primary);
  border-color: transparent;
  padding-inline: var(--space-2);
}

.btn-ghost:hover {
  background: var(--color-primary-100);
}

.btn-danger {
  background: var(--color-error);
  color: #fff;
}

.btn-danger:hover {
  background: #8f1e18;
}

.btn-sm {
  padding: 0.45rem 0.8rem;
  font-size: var(--fs-xs);
}

.btn-block {
  width: 100%;
}

.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  color: #fff;
  /* Overlay tint follows brand-brief.md Section 5's hero note: navy
     (--color-primary-600 family, rgb(30,58,138)) over a primary-blue
     gradient, replacing the old dark-teal tint/gradient. */
  background: linear-gradient(180deg, rgba(30, 58, 138, 0.55), rgba(30, 58, 138, 0.75)),
    linear-gradient(120deg, #1d4ed8, #1e3a8a);
  background-size: cover;
  background-position: center;
  padding-block: var(--space-8) var(--space-6);
}

.hero__inner {
  max-width: 720px;
}

.hero h1 {
  color: #fff;
}

/* Home hero only (services.html reuses .hero/.hero__inner without a
   search widget below it, so it keeps the rule above unchanged). On the
   home page, .hero__inner sits above the Hero Search Widget, and both
   need to share one left/right edge — so .hero__inner here drops the
   bespoke 720px cap and instead uses the same .container geometry as the
   search widget's wrapper. Line length for the heading is controlled on
   the heading itself instead of the block, so it doesn't stretch edge to
   edge on wide screens. */
.hero--home .hero__inner {
  max-width: none;
}

.hero--home h1 {
  max-width: 22ch;
}

.hero p.hero__lede {
  font-size: var(--fs-md);
  /* Was a hardcoded warm-sand hex left over from the old palette; swapped to
     the new primary tint so hero lede copy reads blue-toned, not tan. */
  color: var(--color-primary-100);
  max-width: 46ch;
}

/* ---------- Search / filter widget ---------- */

.search-widget {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--space-5);
  margin-top: var(--space-6);
  color: var(--color-charcoal);
}

.search-widget--sticky {
  position: sticky;
  top: var(--header-height);
  z-index: 90;
  margin-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-md);
}

.search-widget__toggle {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.search-widget__toggle button {
  flex: 1;
}

/* The self-drive/chauffeur toggle uses a hidden radio + a button-styled
   label (same pattern as .field-toggle-group below). Hide the native
   control and drive the pill's selected look off :checked so the radio
   never renders as a visible circle floating next to the button. */
.search-widget__toggle input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.search-widget__toggle input:checked + label {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.search-widget__toggle input:focus-visible + label {
  /* --color-secondary-600 used instead of --color-secondary: the base
     amber only reaches ~2:1 against white, short of the 3:1 WCAG 1.4.11
     minimum for focus-indicator contrast. */
  outline: 3px solid var(--color-secondary-600);
  outline-offset: 2px;
}

.search-widget__grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: 1fr;
}

@media (min-width: 800px) {
  .search-widget__grid {
    grid-template-columns: repeat(4, 1fr) auto;
    align-items: end;
  }
}

.search-widget__submit {
  white-space: nowrap;
}

/* ---------- Trust bar ---------- */

.trust-bar {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, 1fr);
  text-align: center;
  padding-block: var(--space-6);
}

@media (min-width: 700px) {
  .trust-bar {
    grid-template-columns: repeat(4, 1fr);
  }
}

.trust-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.trust-bar__icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--color-primary-100);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Cards ---------- */

.card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  overflow: hidden;
}

.vehicle-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.vehicle-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.vehicle-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--color-primary-100);
}

.vehicle-card__media img {
  /* Fixed aspect-ratio + object-fit: cover keeps every card's photo the
     same rendered height regardless of the source image's native
     dimensions (reviewer flagged the Toyota Corolla photo rendering at a
     different height than the rest of the fleet grid). display: block is
     set explicitly here (in addition to the sitewide img{display:block}
     reset in base.css) so this still holds if that global rule ever
     changes. */
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vehicle-card__badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-primary);
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
}

.vehicle-card__unavailable {
  position: absolute;
  inset: 0;
  /* rgb(30,41,59) = --color-charcoal; was rgb(38,48,46), the old warm
     charcoal. */
  background: rgba(30, 41, 59, 0.6);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  text-align: center;
  padding: var(--space-3);
}

.vehicle-card__body {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
}

.vehicle-card__title {
  font-size: var(--fs-md);
  margin: 0;
}

.vehicle-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  list-style: none;
  padding: 0;
  margin: 0;
}

.vehicle-card__meta li {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.vehicle-card__trust {
  font-size: var(--fs-xs);
  color: var(--color-success);
  font-weight: 500;
}

.vehicle-card__footer {
  margin-top: auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.vehicle-card__price {
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--color-primary);
}

.vehicle-card__price small {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.vehicle-card__actions {
  display: flex;
  gap: var(--space-2);
}

/* ---------- Service / value-prop cards ---------- */

.value-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.value-card__icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-sm);
  background: var(--color-secondary-100);
  color: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
}

/* ---------- Destination cards ---------- */

.dest-card {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.dest-card__media {
  aspect-ratio: 16 / 10;
  background: var(--color-primary-100);
}

.dest-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dest-card__body {
  padding: var(--space-4);
}

.dest-card__body h3 {
  margin-bottom: var(--space-2);
}

.dest-card__body p {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  margin-bottom: 0;
}

/* ---------- Testimonial / review card ---------- */

.review-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.review-card__stars {
  color: var(--color-secondary);
  letter-spacing: 0.1em;
  font-size: var(--fs-md);
}

.review-card__quote {
  margin: 0;
  color: var(--color-charcoal);
}

.review-card__meta {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.review-card__meta strong {
  color: var(--color-charcoal);
}

/* ---------- CTA banner ---------- */

.cta-banner {
  /* --color-secondary (amber) fails AA contrast with white text — use
     charcoal instead. See brand-brief.md Section 5 contrast note. */
  background: var(--color-secondary);
  color: var(--color-charcoal);
  text-align: center;
  padding-block: var(--space-7);
}

.cta-banner h2 {
  color: var(--color-charcoal);
}

.cta-banner--teal {
  /* Primary blue passes AA with white text, so this variant keeps white
     text unlike the base amber .cta-banner above. */
  background: var(--color-primary);
  color: #fff;
}

.cta-banner--teal h2 {
  color: #fff;
}

/* ---------- Forms ---------- */

.form-grid {
  display: grid;
  gap: var(--space-4);
}

.form-row {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .form-row--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-row--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field label {
  font-weight: 600;
  font-size: var(--fs-sm);
}

.field .hint {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.field .error-msg {
  font-size: var(--fs-xs);
  color: var(--color-error);
  display: none;
}

.field.has-error .error-msg {
  display: block;
}

.field.has-error input,
.field.has-error select,
.field.has-error textarea {
  border-color: var(--color-error);
}

input:not([type="radio"]):not([type="checkbox"]),
select,
textarea {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--color-charcoal);
  width: 100%;
}

textarea {
  resize: vertical;
  min-height: 6rem;
}

/* Radios/checkboxes are checkable controls, not text fields — they must
   never inherit the text-field width/padding/border rule above (that is
   what caused radios site-wide to render as full-width bordered boxes
   instead of small circles). Give them a small, fixed, native-shaped size
   with the brand color applied via accent-color, and stop them from being
   crushed or stretched by flex/grid ancestors. */
input[type="radio"],
input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  min-width: 1.15rem;
  min-height: 1.15rem;
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border-radius: initial;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.field-inline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.field-inline label {
  font-weight: 400;
}

.phone-input {
  display: flex;
  gap: var(--space-2);
}

.phone-input select {
  width: 6.5rem;
  flex-shrink: 0;
}

.field-toggle-group {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.field-toggle-group input[type="radio"],
.field-toggle-group input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.field-toggle-group label {
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 0.6rem 1rem;
  cursor: pointer;
  font-weight: 500;
  font-size: var(--fs-sm);
}

.field-toggle-group input:checked + label {
  border-color: var(--color-primary);
  background: var(--color-primary-100);
  color: var(--color-primary);
}

.field-toggle-group input:focus-visible + label {
  /* --color-secondary-600 used instead of --color-secondary: the base
     amber only reaches ~2:1 against white, short of the 3:1 WCAG 1.4.11
     minimum for focus-indicator contrast. */
  outline: 3px solid var(--color-secondary-600);
  outline-offset: 2px;
}

/* ---------- Filter sidebar ---------- */
/* Compacted per reviewer feedback ("Filters is large compared to other
   sections") — tighter panel padding, tighter fieldset rhythm, a smaller
   heading, and the Category/Transmission radio lists wrap inline instead
   of stacking one-per-line. Tap targets are unchanged (inputs stay
   1.15rem via the shared radio/checkbox rule above; labels keep enough
   padding to stay comfortably tappable). */

.filter-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.filter-panel h2 {
  font-size: var(--fs-md);
  margin-bottom: var(--space-3);
}

.filter-panel fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-4);
}

.filter-panel fieldset:last-of-type {
  margin-bottom: var(--space-3);
}

.filter-panel legend {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-sm);
  padding: 0 0 var(--space-2);
}

.filter-panel .checkbox-list {
  display: flex;
  flex-flow: row wrap;
  gap: var(--space-2) var(--space-4);
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Extras/Category lists with longer labels (e.g. "Airport pickup
   available") still read fine wrapped; short lists (Category options,
   Automatic/Manual/Any) pack multiple per row automatically since each
   <li> only takes the width its content needs. */
.filter-panel .checkbox-list li {
  flex: 0 0 auto;
}

.filter-panel .checkbox-list label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-block: 0.15rem;
  font-weight: 400;
  font-size: var(--fs-sm);
}

.filter-drawer {
  display: none;
}

@media (max-width: 899px) {
  .filter-drawer[open] {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 300;
    background: var(--color-sand);
    overflow-y: auto;
    padding: var(--space-5);
    border: 0;
  }
}

/* Fleet page: filter sidebar collapses to a drawer under 900px */
#fleet-layout {
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  #fleet-layout {
    grid-template-columns: 17rem 1fr;
    align-items: start;
  }
}

@media (max-width: 899px) {
  #mobile-filter-toggle {
    display: inline-flex !important;
  }

  #filter-panel {
    display: none;
  }

  #filter-panel.is-open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 300;
    overflow-y: auto;
    border-radius: 0;
  }
}

/* ---------- Price breakdown ---------- */

.price-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  position: sticky;
  top: calc(var(--header-height) + var(--space-4));
}

.price-panel h2,
.price-panel h3 {
  margin-bottom: var(--space-3);
}

.price-panel__row {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-sm);
  padding-block: var(--space-2);
  border-bottom: 1px dashed var(--color-border);
}

.price-panel__row--total {
  border-bottom: none;
  border-top: 2px solid var(--color-charcoal);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-md);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
}

.price-panel__note {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}

/* ---------- Step indicator ---------- */

.step-indicator {
  list-style: none;
  display: flex;
  gap: var(--space-2);
  padding: 0;
  margin: 0 0 var(--space-6);
  counter-reset: step;
}

.step-indicator li {
  counter-increment: step;
  flex: 1;
  text-align: center;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  position: relative;
  padding-top: 2.5rem;
}

.step-indicator li::before {
  content: counter(step);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--color-surface);
  border: 2px solid var(--color-border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
}

.step-indicator li.is-active {
  color: var(--color-primary);
}

.step-indicator li.is-active::before,
.step-indicator li.is-complete::before {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}

.step-indicator li.is-complete {
  color: var(--color-primary);
}

/* ---------- Accordion ---------- */

.accordion {
  border-top: 1px solid var(--color-border);
}

.accordion-item {
  border-bottom: 1px solid var(--color-border);
}

.accordion-item__trigger {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: var(--space-4) 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--fs-base);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  cursor: pointer;
  color: var(--color-charcoal);
}

.accordion-item__trigger .chevron {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.accordion-item__trigger[aria-expanded="true"] .chevron {
  transform: rotate(180deg);
}

.accordion-item__panel {
  padding: 0 0 var(--space-4);
  color: var(--color-text-muted);
}

.accordion-item__panel[hidden] {
  display: none;
}

/* ---------- Modal / lightbox ---------- */

.modal-backdrop {
  position: fixed;
  inset: 0;
  /* rgb(30,41,59) = --color-charcoal; was rgb(20,24,22), a warm near-black
     left over from the old palette. */
  background: rgba(30, 41, 59, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  z-index: 500;
}

.modal-backdrop[hidden] {
  display: none;
}

.modal {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  max-width: 32rem;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--space-6);
  position: relative;
}

.modal--wide {
  max-width: 60rem;
}

.modal__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: transparent;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-muted);
}

.lightbox__image {
  width: 100%;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}

.lightbox__thumbs {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
}

.lightbox__thumbs button {
  border: 2px solid transparent;
  padding: 0;
  background: none;
  cursor: pointer;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  width: 4.5rem;
  height: 3.4rem;
}

.lightbox__thumbs button.is-active {
  border-color: var(--color-primary);
}

.lightbox__thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Toasts / alerts ---------- */

.toast-region {
  position: fixed;
  bottom: var(--space-5);
  right: var(--space-5);
  left: var(--space-5);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  z-index: 600;
  pointer-events: none;
}

.toast {
  pointer-events: auto;
  background: var(--color-charcoal);
  color: #fff;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  max-width: 24rem;
  font-size: var(--fs-sm);
}

.toast--success {
  background: var(--color-success);
}

.toast--error {
  background: var(--color-error);
}

.alert {
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  border: 1px solid transparent;
  margin-bottom: var(--space-4);
}

.alert--info {
  background: var(--color-info-bg);
  border-color: var(--color-info);
  color: var(--color-charcoal);
}

.alert--success {
  background: var(--color-success-bg);
  border-color: var(--color-success);
  color: var(--color-success);
}

.alert--error {
  background: var(--color-error-bg);
  border-color: var(--color-error);
  color: var(--color-error);
}

/* ---------- Status badges ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  text-transform: capitalize;
}

.badge--confirmed,
.badge--approved,
.badge--active,
.badge--paid,
.badge--completed {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.badge--pending,
.badge--pending_payment,
.badge--pending_moderation,
.badge--maintenance,
.badge--partially_paid {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

.badge--cancelled,
.badge--rejected,
.badge--retired,
.badge--failed {
  background: var(--color-error-bg);
  color: var(--color-error);
}

.badge--in_progress {
  background: var(--color-info-bg);
  color: var(--color-info);
}

/* ---------- Misc ---------- */

.skeleton {
  /* Shimmer highlight was a hardcoded warm tan (#eee4d3) left over from the
     old sand palette; swapped to a cool grey-blue so it matches the new
     --color-border family instead of clashing against it. */
  background: linear-gradient(90deg, var(--color-border) 25%, #f1f5f9 37%, var(--color-border) 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeleton-loading {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

.empty-state {
  text-align: center;
  padding: var(--space-8) var(--space-4);
  color: var(--color-text-muted);
}

.pagination {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  list-style: none;
  padding: 0;
}

.pagination button {
  min-width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 600;
}

.pagination button[aria-current="page"] {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.pagination button[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

.icon-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--fs-sm);
}

.icon-list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.definition-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3) var(--space-4);
  margin: 0;
}

.definition-list dt {
  font-weight: 600;
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
}

.definition-list dd {
  margin: 0;
  font-size: var(--fs-sm);
}

.breadcrumbs {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  list-style: none;
  display: flex;
  gap: var(--space-2);
  padding: 0;
  margin-bottom: var(--space-4);
}

.breadcrumbs a {
  color: var(--color-text-muted);
}

.toc {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
}

.toc ol {
  margin: 0;
  padding-left: 1.1rem;
}

.stars {
  color: var(--color-secondary);
}

.rating-summary {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}

.rating-summary__score {
  font-family: var(--font-heading);
  font-size: var(--fs-3xl);
  font-weight: 700;
  color: var(--color-primary);
}