/*
 * Кнопка «Get an Estimate» / «call us» — текст + квадратна плашка з іконкою.
 * Figma: 13:516 (light), 13:723 (primary), 13:17 (hero, lg), 13:110 (header, sm),
 *        13:542 (phone), 65:209 (Next step, fixed width).
 * Базові розміри: pl 20, pr 8, py 8, radius 12, gap 20, текст 18/1.2 Medium,
 * плашка 48×48 radius 8.
 */
.btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 8px 8px 20px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Блик при наведенні — діагональна світла смуга пробігає зліва направо */
.btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 60%;
  height: 100%;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-120%) skewX(-20deg);
  pointer-events: none;
}

.btn:hover::after {
  transform: translateX(260%) skewX(-20deg);
  transition: transform 0.75s ease;
}

/* Іконка для hover-стану білої кнопки (бірюзова на білій плашці) */
.btn__icon-hover {
  display: none;
}

.btn__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.btn__icon img {
  width: 32px;
  height: 32.667px;
}

.btn__icon--phone img {
  width: 20px;
  height: 20px;
}

/* Білий фон, бірюзова плашка */
.btn--light {
  background: var(--color-white);
  color: var(--color-black);
}

.btn--light .btn__icon {
  background: var(--color-primary);
}

/* Hover білої кнопки: фон → бірюзовий, плашка → біла, іконка → бірюзова */
.btn--light:hover,
.btn--surface:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

.btn--light:hover .btn__icon,
.btn--surface:hover .btn__icon {
  background: var(--color-white);
}

.btn--light:hover .btn__icon img,
.btn--surface:hover .btn__icon img {
  display: none;
}

.btn--light:hover .btn__icon .btn__icon-hover,
.btn--surface:hover .btn__icon .btn__icon-hover {
  display: block;
}

/* Бірюзовий фон, біла плашка */
.btn--primary {
  background: var(--color-primary);
  color: var(--color-white);
}

.btn--primary .btn__icon {
  background: var(--color-white);
}

/* Бірюзова кнопка при наведенні — лише блик (.btn::after), кольори не змінюються */

/* Hero: текст 24, плашка 60 — 13:17 */
.btn--lg {
  font-size: 24px;
}

.btn--lg .btn__icon {
  width: 60px;
  height: 60px;
}

/* Header: pl 12, pr 5, py 5, radius 6, текст 16, плашка 32 radius 4 — 13:110 */
.btn--sm {
  gap: 20px;
  padding: 5px 5px 5px 12px;
  border-radius: 6px;
  font-size: 16px;
}

.btn--sm .btn__icon {
  width: 32px;
  height: 32px;
  border-radius: 4px;
}

.btn--sm .btn__icon img {
  width: 19.592px;
  height: 20px;
}

/* «call us to order» — 13:542 / 68:1227 */
.btn__phone {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.btn__phone-label {
  font-size: 14px;
  font-weight: 400;
}

.btn__phone-number {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.1;
}

.btn--surface {
  background: var(--color-surface);
  color: var(--color-black);
}

.btn--surface .btn__icon {
  background: var(--color-primary);
}

/* «Next step» — фіксована ширина 221 — 65:209 */
.btn--wide {
  width: 221px;
}

@media (max-width: 900px) {
  /* Mobile hero: текст 18, плашка 48, ширина 231 — 44:2562 */
  .btn--lg {
    font-size: 18px;
    width: 231px;
  }

  .btn--lg .btn__icon {
    width: 48px;
    height: 48px;
  }

  /* Mobile phone button: label 12, номер 18, плашка 40 — 44:2699 */
  .btn__phone {
    gap: 4px;
  }

  .btn__phone-label {
    font-size: 12px;
  }

  .btn__phone-number {
    font-size: 18px;
  }

  .btn--compact-mobile {
    font-size: 16px;
  }

  .btn--compact-mobile .btn__icon {
    width: 40px;
    height: 40px;
  }
}