/* ========================================
  BUTTON COMPONENT – BEM + Modern CSS
  ======================================== */
  button {
    border-style: unset;


  }

  .button {
  /* Core Config */
  --button-height: 50px;
  --button-size: 50px;
  --button-inner-height: 50px;
  --button-padding: var(--padding, 1.5rem);
  --button-border-size: 2px;
  --button-background-color: transparent;
  --button-background-color-hover: color-mix(in oklab, var(--button-background-color), #000 10%);
  --button-text-color: var(--primary-text-color);
  --button-svg-size: 20px;
  --button-svg-padding: calc((var(--button-inner-height) - var(--button-svg-size)) / 2);

  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--button-padding) * 2/3);
  padding: 0 calc(var(--button-padding) * 3/2);
  height: var(--button-height);
  min-width: var(--button-size);
  background-color: var(--button-background-color);
  border: var(--button-border-size) solid transparent;
  border-radius: var(--half-border-radius-width, 8px);
  cursor: pointer;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  position: relative;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  overflow: hidden;
  color: var(--button-text-color, black);

  /* Hover / Focus / Active */
  &:hover,
  &:active,
  &:focus-visible {
    background-color: var(--button-background-color-hover);
    text-decoration: none;
    color: var(--button-text-color);
  }

  &:focus-visible {
    outline: 2px solid var(--color-primary, #0066ff);
    outline-offset: 2px;
  }

  /* Disabled State */
  &[disabled] {
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none;

    & .show-when-enabled { display: inherit !important; }
    & .show-when-disabled { display: none !important; }
  }

  /* Enabled/Disabled Content Toggle */
  & .show-when-enabled { display: inherit !important; }
  & .show-when-disabled { display: none !important; }

  /* Text & Icon Base */
  & .button__text,
  & .button__icon,
  & .button__caret-down {
    height: var(--button-inner-height);
    line-height: var(--button-inner-height);
    color: var(--button-text-color);
  }

  & .button__text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
  }

  & .button__icon,
  & .button__caret-down {
    display: flex;
    align-items: center;
    justify-content: center;

    & svg {
      height: var(--button-svg-size);
      width: auto;
      fill: var(--button-text-color);
      /* padding: 0 var(--button-svg-padding); */
      padding: 0;
    }

    & .spinner-container {
      padding: 0 var(--button-svg-padding);
    }
  }

  /* Progress Bar (via ::before) */
  &--with-progress-bar::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--color-primary-complementary, #0066ff);
    border-radius: var(--half-border-radius-width, 8px) var(--half-border-radius-width, 8px) 0 0;
    width: var(--progress, 0%);
    transition: width 0.3s ease;
  }

  /* Dropdown Menu */
  &--with-dropdown {
    & .button__dropdown {
      display: none;
      position: absolute;
      top: 100%;
      right: 0;
      min-width: 250px;
      background: var(--secondary-background-color, #fff);
      border: 2px solid white;
      border-radius: .25rem;
      z-index: 2048;
      box-shadow: 0 8px 16px rgba(0,0,0,0.1);

      & a {
        display: block;
        padding: 0 1rem;
        height: var(--button-height);
        line-height: var(--button-height);
        color: inherit;
        text-decoration: none;
        transition: background 0.2s;

        &:hover {
          background: color-mix(in oklab, var(--secondary-background-color, #fff), #000 8%);
        }
      }
    }

    &--visible .button__dropdown {
      display: block;
    }
  }
}

/* ========================================
    SHAPES
    ======================================== */

.button--square,
.button--circle {
  width: var(--button-size);
  padding: 0;

  & .button__icon svg,
  & .button__caret-down svg {
    padding: 0 calc(var(--button-svg-padding) * 1.5);
  }
}

.button--square { border-radius: 0; }
.button--circle { border-radius: 50%; }

.button--rounded { border-radius: 3rem; }
.button--with-half-radius { border-radius: var(--half-border-radius-width, 8px); }

/* ========================================
    SIZES
    ======================================== */

.button--small {
  --button-size: 30px;
  --button-height: 30px;
  --button-inner-height: 30px;
  --button-svg-size: 16px;
}

.button--medium {
  --button-size: 40px;
  --button-height: 40px;
  --button-inner-height: 40px;
  --button-svg-size: 18px;
}

.button--large {
  --button-size: 75px;
  --button-height: 75px;
  --button-inner-height: 75px;
  --button-padding: 2rem;
  --button-svg-size: 25px;
  font-size: 1.5rem;
}

.button--giant {
  --button-size: 75px;
  --button-height: 75px;
  --button-inner-height: 75px;
  --button-padding: 3rem;
  --button-svg-size: 25px;
  font-size: 1.75rem;
  border-radius: 3rem;
}

/* ========================================
    LAYOUT VARIANTS
    ======================================== */

.button--full-width {
  display: flex;
  width: 100%;
}

.button--fixed-width {
  width: 256px;
  margin: 0 auto;
  display: flex;
}

.button--with-text {
  --button-inner-height: calc(var(--button-height) - 2 * var(--button-border-size));
  padding: 0 1rem;
}

.button--with-svg-only {
  --button-inner-height: var(--button-size);
  --button-svg-size: calc(var(--button-inner-height) * 0.6);

  & .button__icon svg,
  & .button__caret-down svg {
    padding: 0;
  }
}

.button--with-text-and-svg,
.button--with-svg-and-text {
  --button-inner-height: calc(var(--button-height) - 2 * var(--button-border-size));
  /* padding-left: 1rem; */
  padding-left: calc(var(--button-padding) * 3/2);
  padding-right: calc(var(--button-padding) * 3/2);
}

.button--rectangle {
  padding: 0 var(--button-padding);
}

.button--fixed-height {
  height: var(--button-height);
  line-height: var(--button-height);
}

.button-min-width {
  min-width: 100px;

  & .button__text {
    width: 100%;
  }
}

/* ========================================
    COLOR VARIANTS
    ======================================== */

.button--primary {
  --button-background-color: var(--color-primary, #0066ff);
  --button-background-color-hover: color-mix(in oklab, var(--button-background-color), #000 5%);
  --button-text-color: white;

  & svg {
    fill: white;
  }

  &:visited {
    color: white;
    text-decoration: none;
  }
}

.button--danger {
  --button-background-color: #dc2626;
  --button-background-color-hover: #b91c1c;
  --button-text-color: white;

  & svg { fill: white; }
  &:visited { color: white; text-decoration: none; }
}

.button--secondary {
  --button-background-color: var(--color-primary-complementary, #ff9900);
  --button-background-color-hover: color-mix(in oklab, var(--button-background-color), #000 15%);
  --button-text-color: #231c33;

  & svg { fill: #231c33; }
}

.button--tertiary {
  --button-background-color: var(--button-tertiary-background-color, transparent);
  --button-text-color: var(--button-tertiary-text-color, currentColor);
  border: var(--button-tertiary-border, 1px solid currentColor);
  border-radius: var(--button-tertiary-border-radius, 6px);

  &:hover:not([disabled]) {
    border-color: var(--button-tertiary-border-hover, currentColor);
  }
}

.button--outline {
  --button-inner-height: 46px;
  background: var(--button-tertiary-background-color, transparent);
  border: var(--button-tertiary-border, 2px solid currentColor);
  color: var(--button-tertiary-text-color, currentColor);

  &:hover:not([disabled]) {
    border-color: var(--button-tertiary-border-hover, currentColor);
  }

  & svg { fill: currentColor; }
}

.button--without-border {
  --button-border-size: 0;
  --button-inner-height: var(--button-size);
  border-width: 0;
}

/* Save/star button */
.button--icon.spot-save-btn {
  --button-svg-size: 30px;

  & svg {
    /* fill: transparent; */
    stroke: var(--color-primary);
  }
}

.button--icon.spot-save-btn--saved {
  & svg {
    fill: var(--color-primary);
    stroke: none;
  }
}

/* Icon-only button — replaces button--without-border + button--with-svg-only + button--small */
.button--icon {
  --button-size: 50px;
  --button-height: 50px;
  --button-inner-height: 50px;
  --button-border-size: 0;
  --button-svg-size: 20px;
  --button-background-color: transparent;
  --button-background-color-hover: rgba(0, 0, 0, 0.06);
  border-radius: 50%;
  padding: 0;
  width: var(--button-size);
  border-width: 0;

  & .button__icon {
    height: var(--button-inner-height);
    width: var(--button-inner-height);
    display: flex;
    align-items: center;
    justify-content: center;

    & svg {
      height: var(--button-svg-size);
      width: var(--button-svg-size);
      padding: 0;
    }
  }

  & svg { fill: var(--button-text-color); }

  &:active {
    --button-background-color-hover: rgba(0, 0, 0, 0.12);
  }
}

.button--transparent {
  --button-background-color: transparent;
  --button-background-color-hover: rgba(0, 0, 0, 0.06);
  --button-text-color: var(--primary-text-color);

  & svg { fill: var(--primary-text-color); }
}

.button--white {
  --button-background-color: white;
  --button-background-color-hover: #eee;
  --button-text-color: var(--primary-text-color-inverse, #231c33);

  &.button--outline {
    border: 2px solid white;
    backdrop-filter: blur(3px);
    --button-text-color: white;

    & svg { fill: white; }

    &:hover:not([disabled]) {
      background-color: white;
      --button-text-color: #231c33;

      & svg { fill: #231c33; }
    }
  }
}

.button--color-grey,
.button--grey {
  --button-background-color: var(--color-grey-light, #f5f5f5);
  --button-background-color-hover: color-mix(in oklab, var(--button-background-color), #000 8%);
  --button-text-color: var(--secondary-text-color, #555);

  & svg { fill: var(--button-text-color); }

  &:hover { background-color: var(--button-background-color-hover); }
}

.button--light-grey {
  --button-background-color: #EEE;
  --button-background-color-hover: color-mix(in oklab, #EEE, #BBB 10%);
  --button-text-color: #213343;

  & svg { fill: #213343; }
}

.button--dark-grey {
  --button-background-color: var(--secondary-background-color, #333);
  --button-background-color-hover: color-mix(in oklab, var(--button-background-color), #000 10%);
}

.button--primary-tertiary {
  --button-background-color: var(--color-primary-tertiary, #e6f0ff);
  --button-background-color-hover: var(--color-primary-tertiary-dark, #b3d1ff);
}

/* Secondary Outline Specific */
.button--secondary.button--outline {
  border: 2px solid var(--color-primary-complementary, #ff9900);
  --button-text-color: var(--color-primary-complementary, #ff9900);

  & svg { fill: var(--button-text-color); }

  &:hover:not([disabled]) {
    background-color: var(--color-primary-complementary, #ff9900);
    --button-text-color: #231c33;

    & svg { fill: #231c33; }
  }
}

/* ========================================
    INTERACTIONS
    ======================================== */

.button--underline:hover .button__text {
  text-decoration: underline;
}

/* ========================================
    UTILITIES
    ======================================== */

.button--with-dropdown-visible {
  & .button__dropdown { display: block; }
}

.button--large {
  --button-size: 75px;
  --button-height: 75px;
  --button-inner-height: 75px;
  --button-padding: 2rem;
  --button-svg-size: 25px;
  font-size: 1.5rem;
}

.button--svg-not-filled {
  & svg {
    fill: transparent !important;
    stroke: var(--button-text-color);
  }
}

.button--delete {
  --button-background-color: transparent;
  --button-background-color-hover: rgba(0, 0, 0, 0.06);
  --button-text-color: var(--primary-text-color);

  & svg {
    fill: var(--primary-text-color);
    stroke: none; 
  }
}