/* ==========================================================================
   Likoma Airlines — Component Library
   --------------------------------------------------------------------------
   Everything that is neither a button, a form control, a card, the header nor
   the footer. Each block is self-contained and depends only on tokens.

   Contents
     1.  Icon
     2.  Badge & pill
     3.  Avatar
     4.  Alert
     5.  Tabs
     6.  Accordion
     7.  Dropdown / menu
     8.  Popover & tooltip
     9.  Modal & dialog
     10. Side drawer
     11. Toast
     12. Progress & meter
     13. Loader
     14. Skeleton
     15. Pagination
     16. Breadcrumb
     17. Empty state
     18. Table
     19. Autocomplete list
     20. Panel & surface
     21. Trust strip
     22. Logo lockup
   ========================================================================== */

/* ---------------------------------------------------------------- 1. ICON */

.lk-icon {
  display: inline-block;
  inline-size: 1em;
  block-size: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
  flex-shrink: 0;
}

.lk-icon--filled { fill: currentColor; stroke: none; }
.lk-icon--sm { inline-size: 16px; block-size: 16px; }
.lk-icon--md { inline-size: 20px; block-size: 20px; }
.lk-icon--lg { inline-size: 24px; block-size: 24px; }
.lk-icon--xl { inline-size: 32px; block-size: 32px; }

/* ------------------------------------------------------- 2. BADGE & PILL */

.lk-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  padding: 0.28em 0.66em;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-sunken);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
}

.lk-badge--primary { background-color: var(--color-primary-soft); color: var(--color-primary-active); }
.lk-badge--accent  { background-color: var(--color-accent-soft);  color: var(--red-800); }
.lk-badge--success { background-color: var(--color-success-bg);   color: var(--color-success-fg); }
.lk-badge--warning { background-color: var(--color-warning-bg);   color: var(--color-warning-fg); }
.lk-badge--danger  { background-color: var(--color-danger-bg);    color: var(--color-danger-fg); }
.lk-badge--info    { background-color: var(--color-info-bg);      color: var(--color-info-fg); }
.lk-badge--navy    { background-color: var(--color-secondary);    color: var(--color-on-secondary); }
.lk-badge--solid   { background-color: var(--color-primary);      color: var(--color-on-primary); }

.lk-badge--outline {
  background-color: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

.lk-badge--glass {
  background-color: rgb(255 255 255 / 0.18);
  color: #fff;
}

.lk-badge--lg { font-size: var(--text-sm); padding: 0.36em 0.9em; }
.lk-badge--uppercase { text-transform: uppercase; letter-spacing: var(--tracking-wider); }

/* Status dot */
.lk-dot {
  inline-size: 7px;
  block-size: 7px;
  border-radius: var(--radius-full);
  background-color: currentColor;
  flex-shrink: 0;
}

/* Small count bubble on an icon button */
.lk-badge-count {
  position: absolute;
  inset-block-start: 2px;
  inset-inline-end: 2px;
  min-inline-size: 18px;
  block-size: 18px;
  padding-inline: 5px;
  border-radius: var(--radius-full);
  background-color: var(--color-accent);
  color: #fff;
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  line-height: 18px;
  text-align: center;
}

/* ------------------------------------------------------------- 3. AVATAR */

.lk-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--avatar-size, 40px);
  block-size: var(--avatar-size, 40px);
  border-radius: var(--radius-full);
  background-color: var(--color-primary-soft);
  color: var(--color-primary-active);
  font-size: calc(var(--avatar-size, 40px) * 0.38);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  overflow: hidden;
  flex-shrink: 0;
  user-select: none;
}

.lk-avatar img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.lk-avatar--xs { --avatar-size: 24px; }
.lk-avatar--sm { --avatar-size: 32px; }
.lk-avatar--lg { --avatar-size: 56px; }
.lk-avatar--xl { --avatar-size: 80px; }

.lk-avatar--ring {
  box-shadow: 0 0 0 2px var(--color-background), 0 0 0 4px var(--color-primary);
}

.lk-avatar-group {
  display: inline-flex;
  align-items: center;
}

.lk-avatar-group .lk-avatar + .lk-avatar {
  margin-inline-start: -0.7em;
}

.lk-avatar-group .lk-avatar {
  box-shadow: 0 0 0 2px var(--color-background);
}

/* -------------------------------------------------------------- 4. ALERT */

.lk-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-lg);
  background-color: var(--color-info-bg);
  color: var(--color-info-fg);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
}

/* The left rule carries the status colour so the fill can stay very light */
.lk-alert::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block: 0;
  inline-size: 3px;
  border-start-start-radius: var(--radius-lg);
  border-end-start-radius: var(--radius-lg);
  background-color: currentColor;
  opacity: 0.6;
}

.lk-alert {
  position: relative;
  overflow: hidden;
}

.lk-alert__icon {
  flex-shrink: 0;
  inline-size: 20px;
  block-size: 20px;
  margin-block-start: 1px;
}

.lk-alert__body { flex: 1 1 auto; min-inline-size: 0; }

.lk-alert__title {
  font-weight: var(--weight-medium);
  color: inherit;
  margin-block-end: var(--space-1);
}

.lk-alert__close {
  flex-shrink: 0;
  margin-inline-start: auto;
  opacity: 0.65;
  transition: opacity var(--duration-fast) var(--ease-soft);
}

.lk-alert__close:hover { opacity: 1; }

.lk-alert--success { background-color: var(--color-success-bg); color: var(--color-success-fg); }
.lk-alert--warning { background-color: var(--color-warning-bg); color: var(--color-warning-fg); }
.lk-alert--danger  { background-color: var(--color-danger-bg);  color: var(--color-danger-fg); }
.lk-alert--neutral { background-color: var(--color-surface-sunken); color: var(--color-text-secondary); }

/* --------------------------------------------------------------- 5. TABS */

.lk-tabs {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.lk-tablist {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-1);
  overflow-x: auto;
  scrollbar-width: none;
}

.lk-tablist::-webkit-scrollbar { display: none; }

.lk-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-colors);
}

.lk-tab:hover {
  color: var(--color-text-primary);
  background-color: var(--color-hover-tint);
}

.lk-tab[aria-selected="true"] {
  color: var(--color-text-primary);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.lk-tab:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Pill container variant */
.lk-tablist--pill {
  padding: var(--space-1);
  border-radius: var(--radius-full);
  background-color: var(--color-surface-sunken);
  inline-size: fit-content;
  max-inline-size: 100%;
}

/* Underlined variant, for content pages */
.lk-tablist--underline {
  gap: var(--space-6);
  border-block-end: 1px solid var(--color-divider);
}

.lk-tablist--underline .lk-tab {
  padding-inline: 0;
  padding-block: var(--space-4);
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.lk-tablist--underline .lk-tab::after {
  content: "";
  position: absolute;
  inset-block-end: -1px;
  inset-inline: 0;
  block-size: 2px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--duration-base) var(--ease-out);
}

.lk-tablist--underline .lk-tab[aria-selected="true"] {
  color: var(--color-primary);
}

.lk-tablist--underline .lk-tab[aria-selected="true"]::after {
  transform: scaleX(1);
}

.lk-tabpanel:focus-visible { outline: none; }
.lk-tabpanel[hidden] { display: none; }

/* ---------------------------------------------------------- 6. ACCORDION */

.lk-accordion {
  display: flex;
  flex-direction: column;
}

.lk-accordion__item {
  border-block-end: 1px solid var(--color-divider);
}

.lk-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  inline-size: 100%;
  padding-block: var(--space-5);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  text-align: start;
  cursor: pointer;
  transition: color var(--duration-fast) var(--ease-soft);
}

.lk-accordion__trigger:hover { color: var(--color-primary); }

.lk-accordion__trigger:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

.lk-accordion__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 32px;
  block-size: 32px;
  flex-shrink: 0;
  border-radius: var(--radius-full);
  background-color: var(--color-surface-sunken);
  color: var(--color-text-secondary);
  transition: transform var(--duration-base) var(--ease-out),
              background-color var(--duration-fast) var(--ease-soft),
              color var(--duration-fast) var(--ease-soft);
}

.lk-accordion__trigger[aria-expanded="true"] .lk-accordion__marker {
  transform: rotate(180deg);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

/* grid-template-rows animates cleanly from 0fr to 1fr — no fixed heights */
.lk-accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--duration-base) var(--ease-out);
}

.lk-accordion__panel[data-open="true"] {
  grid-template-rows: 1fr;
}

.lk-accordion__panel > div {
  overflow: hidden;
}

.lk-accordion__content {
  padding-block-end: var(--space-6);
  padding-inline-end: var(--space-12);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

/* ------------------------------------------------- 7. DROPDOWN / MENU */

.lk-dropdown {
  position: relative;
  display: inline-flex;
}

.lk-menu {
  position: absolute;
  inset-block-start: calc(100% + var(--space-2));
  inset-inline-start: 0;
  z-index: var(--z-dropdown);
  min-inline-size: 13rem;
  padding: var(--space-2);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-xl);
  /* Hidden but focusable-safe: visibility removes it from the tab order */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top;
  transition:
    opacity var(--duration-fast) var(--ease-soft),
    transform var(--duration-fast) var(--ease-out),
    visibility var(--duration-fast);
}

.lk-menu--end { inset-inline: auto 0; }
.lk-menu--wide { min-inline-size: 20rem; }

/* For a trigger pinned to the bottom of the viewport (the nav rail foot) —
   opens upward instead of down, so the panel is never clipped. */
.lk-dropdown--up .lk-menu {
  inset-block-start: auto;
  inset-block-end: calc(100% + var(--space-2));
  transform: translateY(6px) scale(0.98);
  transform-origin: bottom;
}

.lk-dropdown--up[data-open="true"] .lk-menu,
.lk-dropdown--up .lk-menu[data-open="true"] {
  transform: translateY(0) scale(1);
}

.lk-dropdown[data-open="true"] .lk-menu,
.lk-menu[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.lk-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  inline-size: 100%;
  padding: var(--space-2-5) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  text-align: start;
  cursor: pointer;
  transition: var(--transition-colors);
}

.lk-menu__item:hover,
.lk-menu__item:focus-visible {
  outline: none;
  background-color: var(--color-hover-tint);
  color: var(--color-text-primary);
}

.lk-menu__item[aria-current="true"],
.lk-menu__item.is-active {
  background-color: var(--color-primary-soft);
  color: var(--color-primary-active);
  font-weight: var(--weight-medium);
}

.lk-menu__item svg { inline-size: 18px; block-size: 18px; }

.lk-menu__label {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* --- Live chat widget ----------------------------------------------------- */

.lk-chat {
  position: fixed;
  inset-block-end: var(--space-6);
  inset-inline-end: calc(var(--space-6) + 60px);
  z-index: var(--z-popover);
}

.lk-chat__toggle {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  border: none;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  transition: var(--transition-colors);
}

.lk-chat__toggle:hover { background-color: var(--color-primary-active, var(--color-primary)); }

.lk-chat__toggle:focus-visible {
  outline: none;
  box-shadow: var(--shadow-lg), var(--focus-ring);
}

.lk-chat__toggle svg { inline-size: 20px; block-size: 20px; }

.lk-chat__badge {
  position: absolute;
  inset-block-start: -4px;
  inset-inline-end: -4px;
  display: grid;
  place-items: center;
  min-inline-size: 18px;
  block-size: 18px;
  padding: 0 4px;
  border-radius: var(--radius-full);
  background-color: var(--color-danger, #d1373f);
  color: #fff;
  font-size: 10px;
  font-weight: var(--weight-semibold);
}

.lk-chat__panel {
  position: absolute;
  inset-block-end: calc(100% + var(--space-3));
  inset-inline-end: 0;
  display: flex;
  flex-direction: column;
  inline-size: min(22rem, calc(100vw - var(--space-8)));
  max-block-size: 30rem;
  border-radius: var(--radius-panel);
  background-color: var(--color-surface, #fff);
  box-shadow: var(--shadow-2xl);
  overflow: hidden;
}

.lk-chat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-primary);
  color: #fff;
}

.lk-chat__title { font-weight: var(--weight-semibold); margin: 0; }

.lk-chat__body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.lk-chat__intro {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.lk-chat__msg {
  max-inline-size: 85%;
  padding: var(--space-2-5) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

.lk-chat__msg--visitor {
  align-self: flex-end;
  background-color: var(--color-primary-soft);
  color: var(--color-text-primary);
}

.lk-chat__msg--staff {
  align-self: flex-start;
  background-color: var(--color-hover-tint);
  color: var(--color-text-primary);
}

.lk-chat__msg-text { margin: 0; white-space: pre-wrap; }

.lk-chat__msg-time {
  display: block;
  margin-block-start: var(--space-1);
  font-size: var(--text-2xs);
  color: var(--color-text-muted);
}

.lk-chat__form {
  border-block-start: 1px solid var(--color-border);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.lk-chat__identity {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.lk-chat__send {
  display: flex;
  gap: var(--space-2);
  align-items: flex-end;
}

.lk-chat__send textarea { flex: 1; resize: none; }

.lk-menu__sep {
  block-size: 1px;
  margin-block: var(--space-2);
  background-color: var(--color-divider);
}

/* ------------------------------------------------- 8. POPOVER & TOOLTIP */

.lk-popover {
  position: absolute;
  z-index: var(--z-popover);
  inline-size: min(24rem, calc(100vw - var(--space-8)));
  padding: var(--space-5);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-xl);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity var(--duration-fast) var(--ease-soft),
    transform var(--duration-fast) var(--ease-out),
    visibility var(--duration-fast);
}

.lk-popover[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lk-tooltip {
  position: relative;
}

.lk-tooltip__bubble {
  position: absolute;
  inset-block-end: calc(100% + var(--space-2));
  inset-inline-start: 50%;
  transform: translateX(-50%) translateY(4px);
  z-index: var(--z-tooltip);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background-color: var(--navy-900);
  color: #fff;
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-soft),
              transform var(--duration-fast) var(--ease-out);
}

.lk-tooltip:hover .lk-tooltip__bubble,
.lk-tooltip:focus-within .lk-tooltip__bubble {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ------------------------------------------------------ 9. MODAL/DIALOG */

.lk-modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: var(--space-4);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-base) var(--ease-soft),
              visibility var(--duration-base);
}

.lk-modal[data-open="true"] {
  opacity: 1;
  visibility: visible;
}

.lk-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: var(--color-overlay);
}

.lk-modal__panel {
  position: relative;
  z-index: 1;
  inline-size: min(34rem, 100%);
  max-block-size: min(85dvh, 48rem);
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-panel);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-2xl);
  overflow: hidden;
  transform: translateY(12px) scale(0.98);
  transition: transform var(--duration-base) var(--ease-out);
}

.lk-modal[data-open="true"] .lk-modal__panel {
  transform: translateY(0) scale(1);
}

.lk-modal__panel--lg { inline-size: min(52rem, 100%); }
.lk-modal__panel--xl { inline-size: min(68rem, 100%); }

.lk-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-6) var(--space-4);
}

.lk-modal__title {
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--color-text-primary);
}

.lk-modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 var(--space-6) var(--space-6);
}

.lk-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-6);
  border-block-start: 1px solid var(--color-divider);
  background-color: var(--color-surface-sunken);
}

/* --- Alert modal ----------------------------------------------------------
   A single centred, blocking alert — built on `.lk-modal`, styled to read
   the way a SweetAlert-style warning does: a coloured icon first, then the
   message, then one action.
   ------------------------------------------------------------------------ */

.lk-alert-modal__panel {
  align-items: center;
  padding: var(--space-8) var(--space-6) var(--space-6);
  text-align: center;
}

.lk-alert-modal__icon {
  display: grid;
  place-items: center;
  inline-size: 64px;
  block-size: 64px;
  margin-block-end: var(--space-5);
  border-radius: var(--radius-full);
}

.lk-alert-modal__icon svg { inline-size: 32px; block-size: 32px; }

.lk-alert-modal__icon--warning { background-color: rgb(217 119 6 / 0.12); color: #d97706; }
.lk-alert-modal__icon--danger  { background-color: rgb(220 38 38 / 0.12); color: #dc2626; }
.lk-alert-modal__icon--success { background-color: rgb(22 163 74 / 0.12); color: #16a34a; }
.lk-alert-modal__icon--info    { background-color: var(--color-primary-soft); color: var(--color-primary); }

.lk-alert-modal__body {
  padding: 0;
  flex: 0 0 auto;
}

.lk-alert-modal__message {
  margin-block-start: var(--space-2);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}

.lk-alert-modal__footer {
  justify-content: center;
  border-block-start: none;
  background-color: transparent;
  padding-block-start: var(--space-6);
}

/* --- Global action loader ---------------------------------------------
   One overlay, shown the moment any form on the site actually submits, so a
   slow save/payment/reply action reads as "working" rather than inviting a
   second click. See loader.js.
   ------------------------------------------------------------------------ */

.lk-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-max);
  display: grid;
  place-items: center;
  background-color: var(--color-overlay);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-fast) var(--ease-soft), visibility var(--duration-fast);
}

.lk-loading-overlay[data-open="true"] {
  opacity: 1;
  visibility: visible;
}

.lk-loading-overlay__spinner {
  display: grid;
  place-items: center;
  padding: var(--space-6);
  border-radius: var(--radius-full);
}

.lk-loading-overlay__ring {
  inline-size: 48px;
  block-size: 48px;
  border-radius: var(--radius-full);
  border: 4px solid rgb(255 255 255 / 0.25);
  border-block-start-color: #fff;
  animation: lk-loading-spin 0.8s linear infinite;
}

@keyframes lk-loading-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .lk-loading-overlay__ring { animation-duration: 1.6s; }
}

/* --------------------------------------------------------- 10. DRAWER */

.lk-drawer {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  visibility: hidden;
  transition: visibility var(--duration-base);
  /* The closed panel is parked at translateX(100%), i.e. a full panel-width
     past the right edge. A fixed element still counts toward the document's
     scroll width in Chromium, and `overflow-x: hidden` on <body> does not
     clip fixed descendants — so without this the whole page could be scrolled
     sideways by the width of the drawer. */
  overflow: hidden;
}

.lk-drawer[data-open="true"] { visibility: visible; }

.lk-drawer__backdrop {
  position: absolute;
  inset: 0;
  background-color: var(--color-scrim);
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-soft);
}

.lk-drawer[data-open="true"] .lk-drawer__backdrop { opacity: 1; }

.lk-drawer__panel {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: min(24rem, 88vw);
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface);
  box-shadow: var(--shadow-2xl);
  transform: translateX(100%);
  transition: transform var(--duration-slow) var(--ease-out);
}

.lk-drawer[data-open="true"] .lk-drawer__panel { transform: translateX(0); }

.lk-drawer--start .lk-drawer__panel {
  inset-inline: 0 auto;
  transform: translateX(-100%);
}

/* Bottom sheet — the mobile pattern for pickers */
.lk-drawer--bottom .lk-drawer__panel {
  inset: auto 0 0 0;
  inline-size: 100%;
  max-block-size: 88dvh;
  border-start-start-radius: var(--radius-sheet);
  border-start-end-radius: var(--radius-sheet);
  transform: translateY(100%);
}

.lk-drawer--bottom[data-open="true"] .lk-drawer__panel { transform: translateY(0); }

.lk-drawer__grabber {
  inline-size: 40px;
  block-size: 4px;
  margin: var(--space-3) auto var(--space-1);
  border-radius: var(--radius-full);
  background-color: var(--color-border-strong);
  flex-shrink: 0;
}

.lk-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-block-end: 1px solid var(--color-divider);
  flex-shrink: 0;
}

.lk-drawer__body {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-5);
}

.lk-drawer__footer {
  padding: var(--space-5);
  border-block-start: 1px solid var(--color-divider);
  flex-shrink: 0;
}

/* ----------------------------------------------------------- 11. TOAST */

.lk-toast-region {
  position: fixed;
  inset-block-end: var(--space-6);
  inset-inline-end: var(--space-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  inline-size: min(24rem, calc(100vw - var(--space-8)));
  pointer-events: none;
}

.lk-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-xl);
  pointer-events: auto;
  animation: lk-toast-in var(--duration-base) var(--ease-out) both;
}

.lk-toast[data-closing="true"] {
  animation: lk-toast-out var(--duration-fast) var(--ease-in) forwards;
}

.lk-toast__icon {
  inline-size: 20px;
  block-size: 20px;
  flex-shrink: 0;
  margin-block-start: 1px;
  color: var(--color-primary);
}

.lk-toast--success .lk-toast__icon { color: var(--color-success); }
.lk-toast--danger  .lk-toast__icon { color: var(--color-danger); }
.lk-toast--warning .lk-toast__icon { color: var(--color-warning); }

.lk-toast__body { flex: 1 1 auto; min-inline-size: 0; }

.lk-toast__title {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

.lk-toast__text {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-block-start: 2px;
}

/* ------------------------------------------------ 12. PROGRESS & METER */

.lk-progress {
  position: relative;
  inline-size: 100%;
  block-size: 6px;
  border-radius: var(--radius-full);
  background-color: var(--color-surface-sunken);
  overflow: hidden;
}

.lk-progress__bar {
  block-size: 100%;
  inline-size: var(--progress, 0%);
  border-radius: inherit;
  background: var(--gradient-brand);
  transition: inline-size var(--duration-slow) var(--ease-out);
}

.lk-progress--indeterminate .lk-progress__bar {
  position: absolute;
  inline-size: 35%;
  animation: lk-indeterminate 1.4s var(--ease-in-out) infinite;
}

.lk-progress--thick { block-size: 10px; }

/* Draining urgency states — a countdown that is nearly out reads as more
   pressing in amber/red than in the brand colour it starts as. */
.lk-progress--warning .lk-progress__bar { background: var(--color-warning); }
.lk-progress--danger  .lk-progress__bar { background: var(--color-danger); }

/* Stepped progress — booking funnel */
.lk-steps {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.lk-steps__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.lk-steps__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 26px;
  block-size: 26px;
  border-radius: var(--radius-full);
  background-color: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  flex-shrink: 0;
}

.lk-steps__item[data-state="current"] { color: var(--color-text-primary); font-weight: var(--weight-medium); }
.lk-steps__item[data-state="current"] .lk-steps__marker { background-color: var(--color-primary); color: #fff; }
.lk-steps__item[data-state="done"] .lk-steps__marker { background-color: var(--color-success-bg); color: var(--color-success-fg); }

.lk-steps__line {
  flex: 1 1 auto;
  block-size: 1px;
  background-color: var(--color-border);
  min-inline-size: var(--space-4);
}

/* ---------------------------------------------------------- 13. LOADER */

.lk-spinner {
  display: inline-block;
  inline-size: var(--spinner-size, 20px);
  block-size: var(--spinner-size, 20px);
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  border-radius: var(--radius-full);
  opacity: 0.9;
  animation: lk-spin 640ms linear infinite;
}

.lk-spinner--sm { --spinner-size: 14px; }
.lk-spinner--lg { --spinner-size: 32px; border-width: 3px; }

/* Brand loading state: the tail-fin mark tracking across a runway line */
.lk-flight-loader {
  position: relative;
  inline-size: 100%;
  max-inline-size: 15rem;
  block-size: 24px;
  overflow: hidden;
}

.lk-flight-loader::before {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline: 0;
  block-size: 1px;
  background: repeating-linear-gradient(
    90deg,
    var(--color-border) 0 10px,
    transparent 10px 20px
  );
}

.lk-flight-loader__mark {
  position: absolute;
  inset-block-start: 50%;
  translate: 0 -50%;
  inline-size: 22px;
  block-size: 22px;
  animation: lk-fly-across 1.8s var(--ease-in-out) infinite;
}

.lk-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  gap: var(--space-4);
  border-radius: inherit;
  background-color: rgb(255 255 255 / 0.82);
}

/* -------------------------------------------------------- 14. SKELETON */

.lk-skeleton {
  display: block;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-sunken);
  background-image: linear-gradient(
    90deg,
    var(--color-surface-sunken) 0%,
    color-mix(in srgb, var(--color-surface-sunken) 45%, #fff) 50%,
    var(--color-surface-sunken) 100%
  );
  background-size: 220% 100%;
  animation: lk-shimmer 1.6s var(--ease-in-out) infinite;
}

.lk-skeleton--text   { block-size: 0.85em; margin-block: 0.25em; border-radius: var(--radius-xs); }
.lk-skeleton--title  { block-size: 1.4em; inline-size: 55%; }
.lk-skeleton--line   { block-size: 0.85em; inline-size: 100%; }
.lk-skeleton--short  { inline-size: 68%; }
.lk-skeleton--media  { aspect-ratio: var(--ratio-photo); border-radius: var(--radius-card); }
.lk-skeleton--circle { border-radius: var(--radius-full); aspect-ratio: 1; }
.lk-skeleton--btn    { block-size: 44px; inline-size: 9rem; border-radius: var(--radius-full); }

/* ------------------------------------------------------ 15. PAGINATION */

.lk-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
}

.lk-pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 40px;
  block-size: 40px;
  padding-inline: var(--space-2);
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  transition: var(--transition-colors);
}

.lk-pagination__item:hover {
  background-color: var(--color-hover-tint);
  color: var(--color-text-primary);
}

.lk-pagination__item[aria-current="page"] {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
}

.lk-pagination__item[aria-disabled="true"] {
  opacity: var(--opacity-disabled);
  pointer-events: none;
}

.lk-pagination__ellipsis {
  min-inline-size: 28px;
  text-align: center;
  color: var(--color-text-muted);
}

/* ------------------------------------------------------ 16. BREADCRUMB */

.lk-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

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

.lk-breadcrumb__item + .lk-breadcrumb__item::before {
  content: "";
  inline-size: 5px;
  block-size: 5px;
  border-block-start: 1.5px solid currentColor;
  border-inline-end: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.5;
}

.lk-breadcrumb a {
  color: inherit;
  transition: color var(--duration-fast) var(--ease-soft);
}

.lk-breadcrumb a:hover { color: var(--color-primary); }

.lk-breadcrumb [aria-current="page"] {
  color: var(--color-text-primary);
  font-weight: var(--weight-medium);
}

/* ----------------------------------------------------- 17. EMPTY STATE */

.lk-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-16) var(--space-6);
  text-align: center;
}

.lk-empty__art {
  display: grid;
  place-items: center;
  inline-size: 88px;
  block-size: 88px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary-soft);
  color: var(--color-primary);
}

.lk-empty__art svg { inline-size: 36px; block-size: 36px; }

.lk-empty__title {
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

.lk-empty__text {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
  max-inline-size: var(--measure-narrow);
}

/* ----------------------------------------------------------- 18. TABLE */

.lk-table-wrap {
  inline-size: 100%;
  overflow-x: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-ring);
}

.lk-table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
  background-color: var(--color-surface);
}

.lk-table thead th {
  padding: var(--space-4) var(--space-6);
  background-color: var(--color-surface-sunken);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.lk-table tbody td {
  padding: var(--space-5) var(--space-6);
  border-block-start: 1px solid var(--color-divider);
  color: var(--color-text-secondary);
  vertical-align: middle;
}

.lk-table tbody tr {
  transition: background-color var(--duration-fast) var(--ease-soft);
}

.lk-table tbody tr:hover {
  background-color: var(--color-hover-tint);
}

.lk-table__numeric {
  text-align: end;
  font-variant-numeric: tabular-nums;
}

.lk-table__strong {
  color: var(--color-text-primary);
  font-weight: var(--weight-medium);
}

/* -------------------------------------------- 19. AUTOCOMPLETE LISTBOX */

.lk-autocomplete {
  position: relative;
}

.lk-listbox {
  position: absolute;
  inset-block-start: calc(100% + var(--space-2));
  inset-inline: 0;
  z-index: var(--z-dropdown);
  max-block-size: 22rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-2);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-xl);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity var(--duration-fast) var(--ease-soft),
    transform var(--duration-fast) var(--ease-out),
    visibility var(--duration-fast);
}

.lk-listbox[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.lk-listbox__group {
  padding: var(--space-2) var(--space-3) var(--space-1);
  font-size: var(--text-2xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.lk-option-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--duration-instant) var(--ease-soft);
}

.lk-option-row:hover,
.lk-option-row[aria-selected="true"],
.lk-option-row.is-active {
  background-color: var(--color-primary-soft);
}

.lk-option-row__icon {
  display: grid;
  place-items: center;
  inline-size: 34px;
  block-size: 34px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-sunken);
  color: var(--color-text-muted);
}

.lk-option-row__main { flex: 1 1 auto; min-inline-size: 0; }

.lk-option-row__title {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
}

.lk-option-row__sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.lk-option-row__code {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* The matched substring in an autocomplete result */
.lk-option-row mark {
  background: none;
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
}

/* -------------------------------------------------- 20. PANEL/SURFACE */

.lk-panel {
  padding: clamp(var(--space-7), 3.5vw, var(--space-12));
  border-radius: var(--radius-panel);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-ring), var(--shadow-md);
}

.lk-panel--sunken {
  background-color: var(--color-surface-sunken);
  box-shadow: none;
}

.lk-panel--dark {
  background: var(--gradient-dawn);
  box-shadow: var(--shadow-lg);
}

/* ------------------------------------------------------ 21. TRUST STRIP */

.lk-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-8);
}

.lk-trust__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2-5);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.lk-trust__item svg {
  inline-size: 18px;
  block-size: 18px;
  color: var(--color-primary);
}

/* ------------------------------------------------------ 22. LOGO LOCKUP */

.lk-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  transition: opacity var(--duration-fast) var(--ease-soft);
}

.lk-logo:hover { opacity: 0.85; }

.lk-logo:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

.lk-logo img,
.lk-logo svg {
  block-size: var(--logo-height, 40px);
  inline-size: auto;
  transition: block-size var(--duration-base) var(--ease-out);
}

.lk-logo--sm { --logo-height: 32px; }
.lk-logo--lg { --logo-height: 52px; }
.lk-logo--mark img { --logo-height: 34px; }