/* ==========================================================================
   Likoma Airlines — Buttons
   --------------------------------------------------------------------------
   One base class, then variant + size + shape modifiers. Every button is a
   pill by default; the square-cornered variant exists for controls that sit
   flush inside an input group.

   <button class="lk-btn lk-btn--primary lk-btn--lg">Search flights</button>
   ========================================================================== */

.lk-btn {
  --btn-bg: transparent;
  --btn-fg: var(--color-text-primary);
  --btn-border: transparent;
  --btn-shadow: var(--shadow-none);
  --btn-height: 44px;
  --btn-px: var(--space-6);
  --btn-font: var(--text-base);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: var(--btn-height);
  padding-inline: var(--btn-px);
  padding-block: 0;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-button);
  background-color: var(--btn-bg);
  color: var(--btn-fg);
  box-shadow: var(--btn-shadow);
  font-family: var(--font-sans);
  font-size: var(--btn-font);
  font-weight: var(--weight-medium);
  line-height: var(--leading-none);
  letter-spacing: var(--tracking-normal);
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  overflow: hidden;            /* clips the ripple */
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--duration-fast) var(--ease-soft),
    border-color var(--duration-fast) var(--ease-soft),
    color var(--duration-fast) var(--ease-soft),
    box-shadow var(--duration-base) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
}

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

/* A 1px press is enough to feel physical */
.lk-btn:active:not(:disabled):not([aria-disabled="true"]) {
  transform: translateY(1px);
}

.lk-btn:disabled,
.lk-btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: var(--opacity-disabled);
  box-shadow: none;
  transform: none;
  pointer-events: none;
}

/* --- Variants ------------------------------------------------------------ */

/* Buttons darken on hover rather than lifting and glowing. A solid fill is
   already the loudest thing in a quiet layout; it does not need help. */
.lk-btn--primary {
  --btn-bg: var(--color-primary);
  --btn-fg: var(--color-on-primary);
}

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

.lk-btn--primary:active:not(:disabled) {
  --btn-bg: var(--color-primary-active);
}

.lk-btn--secondary {
  --btn-bg: var(--color-secondary);
  --btn-fg: var(--color-on-secondary);
}

.lk-btn--secondary:hover {
  --btn-bg: var(--color-secondary-hover);
}

.lk-btn--accent {
  --btn-bg: var(--color-accent);
  --btn-fg: var(--color-on-accent);
}

.lk-btn--accent:hover {
  --btn-bg: var(--color-accent-hover);
}

/* The everyday button: reads as a surface, not as chrome */
.lk-btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--color-text-primary);
  --btn-border: var(--color-border-strong);
}

.lk-btn--outline:hover {
  --btn-border: var(--color-secondary);
  --btn-bg: var(--color-hover-tint);
}

.lk-btn--soft {
  --btn-bg: var(--color-primary-soft);
  --btn-fg: var(--color-primary-active);
}

.lk-btn--soft:hover {
  --btn-bg: var(--color-primary-soft-hover);
}

.lk-btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--color-text-secondary);
}

.lk-btn--ghost:hover {
  --btn-bg: var(--color-hover-tint);
  --btn-fg: var(--color-text-primary);
}

/* Text-only, for tertiary actions inside dense layouts */
.lk-btn--link {
  --btn-bg: transparent;
  --btn-fg: var(--color-text-link);
  --btn-px: 0;
  --btn-height: auto;
  border-radius: var(--radius-xs);
  overflow: visible;
}

.lk-btn--link:hover {
  --btn-fg: var(--color-text-link-hover);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.lk-btn--danger {
  --btn-bg: var(--color-danger);
  --btn-fg: #ffffff;
}

.lk-btn--danger:hover {
  --btn-bg: var(--red-700);
}

/* For placement on photography or dark bands. A plain outlined button rather
   than a frosted one — the blur was the most dated thing on the hero. */
.lk-btn--glass {
  --btn-bg: transparent;
  --btn-fg: #ffffff;
  --btn-border: rgb(255 255 255 / 0.5);
}

.lk-btn--glass:hover {
  --btn-bg: rgb(255 255 255 / 0.1);
  --btn-border: #ffffff;
}

.lk-btn--on-dark {
  --btn-bg: #ffffff;
  --btn-fg: var(--navy-800);
}

.lk-btn--on-dark:hover {
  --btn-bg: var(--navy-100);
}

/* --- Sizes --------------------------------------------------------------- */

.lk-btn--xs {
  --btn-height: 30px;
  --btn-px: var(--space-3);
  --btn-font: var(--text-xs);
  gap: var(--space-1-5);
}

.lk-btn--sm {
  --btn-height: 36px;
  --btn-px: var(--space-4);
  --btn-font: var(--text-sm);
}

.lk-btn--lg {
  --btn-height: 52px;
  --btn-px: var(--space-8);
  --btn-font: var(--text-md);
}

.lk-btn--xl {
  --btn-height: 60px;
  --btn-px: var(--space-10);
  --btn-font: var(--text-lg);
  font-weight: var(--weight-medium);
}

/* --- Shape --------------------------------------------------------------- */

.lk-btn--square { border-radius: var(--radius-control); }
.lk-btn--block  { display: flex; inline-size: 100%; }

.lk-btn--icon {
  --btn-px: 0;
  inline-size: var(--btn-height);
  aspect-ratio: 1;
  gap: 0;
}

/* --- Icons inside buttons ------------------------------------------------ */

.lk-btn .lk-icon,
.lk-btn svg {
  inline-size: 1.15em;
  block-size: 1.15em;
  flex-shrink: 0;
}

.lk-btn--lg .lk-icon,
.lk-btn--lg svg,
.lk-btn--xl .lk-icon,
.lk-btn--xl svg {
  inline-size: 1.25em;
  block-size: 1.25em;
}

/* --- Loading state -------------------------------------------------------
   Label stays in the DOM (so width never jumps) but is visually swapped for
   a spinner. `aria-busy` is what assistive tech reads.
   ------------------------------------------------------------------------ */

.lk-btn[data-loading="true"] {
  pointer-events: none;
  color: transparent;
}

.lk-btn[data-loading="true"] > * {
  opacity: 0;
}

.lk-btn[data-loading="true"]::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  inline-size: 1.1em;
  block-size: 1.1em;
  margin-block-start: -0.55em;
  margin-inline-start: -0.55em;
  border: 2px solid currentColor;
  border-block-start-color: transparent;
  border-radius: var(--radius-full);
  color: var(--btn-fg);
  animation: lk-spin 640ms linear infinite;
}

/* --- Button group --------------------------------------------------------
   Segmented control used for trip type, sort order, currency.
   ------------------------------------------------------------------------ */

/* A bordered segmented control with hairline dividers, rather than pills
   floating in a tray. */
.lk-btn-group {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.lk-btn-group .lk-btn {
  --btn-height: 38px;
  --btn-px: var(--space-5);
  --btn-font: var(--text-sm);
  --btn-fg: var(--color-text-secondary);
  border-radius: 0;
  box-shadow: none;
}

.lk-btn-group .lk-btn + .lk-btn {
  border-inline-start: 1px solid var(--color-border);
}

.lk-btn-group .lk-btn:hover {
  --btn-fg: var(--color-text-primary);
  --btn-bg: var(--color-hover-tint);
  transform: none;
  box-shadow: none;
}

.lk-btn-group .lk-btn[aria-pressed="true"],
.lk-btn-group .lk-btn.is-active {
  --btn-bg: var(--color-secondary);
  --btn-fg: var(--color-on-secondary);
  font-weight: var(--weight-medium);
  box-shadow: none;
}

/* --- Icon button --------------------------------------------------------- */

.lk-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 40px;
  block-size: 40px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  background-color: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: var(--transition-colors), transform var(--duration-fast) var(--ease-out);
}

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

.lk-icon-btn:active {
  transform: scale(0.94);
}

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

.lk-icon-btn .lk-icon,
.lk-icon-btn svg {
  inline-size: 20px;
  block-size: 20px;
}

.lk-icon-btn--sm { inline-size: 32px; block-size: 32px; }
.lk-icon-btn--sm .lk-icon,
.lk-icon-btn--sm svg { inline-size: 16px; block-size: 16px; }

.lk-icon-btn--lg { inline-size: 48px; block-size: 48px; }

.lk-icon-btn--bordered {
  border-color: var(--color-border);
  background-color: var(--color-surface);
}

.lk-icon-btn--bordered:hover {
  border-color: var(--color-border-strong);
}

.lk-icon-btn--filled {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-primary);
}

.lk-icon-btn--filled:hover {
  background-color: var(--color-primary-hover);
}

.lk-icon-btn--on-dark {
  color: rgb(255 255 255 / 0.82);
}

.lk-icon-btn--on-dark:hover {
  background-color: rgb(255 255 255 / 0.12);
  color: #ffffff;
}

/* --- Chip / filter pill --------------------------------------------------- */

.lk-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 34px;
  padding-inline: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-colors), box-shadow var(--duration-fast) var(--ease-out);
}

.lk-chip:hover {
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

.lk-chip[aria-pressed="true"],
.lk-chip.is-active {
  border-color: var(--color-primary);
  background-color: var(--color-primary-soft);
  color: var(--color-primary-active);
}

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

.lk-chip__remove {
  display: inline-flex;
  margin-inline-end: calc(var(--space-1) * -1);
  color: var(--color-text-muted);
  border-radius: var(--radius-full);
  transition: var(--transition-colors);
}

.lk-chip__remove:hover {
  color: var(--color-danger);
}