/* ============================================================
   Center Animal Button Variants — Divi 5
   Usage: add class to a Code Module wrapping an <a> tag
   Variants: et-btn--card et-btn--call
   ============================================================ */

/* ── Variables ── */
:root {
  --dark-brown: #392218;
  --btn-font: "Clother", serif;
  --btn-fs: 20px;
  --btn-fs-mobile: 1.25rem;
}

/* ── Shared structure ── */
.et-btn {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid var(--dark-brown);
}

.et-btn__text {
  font-family: var(--btn-font);
  font-size: var(--btn-fs);
  font-weight: 400;
  font-style: normal;
  line-height: normal;
  color: var(--dark-brown);
  padding: 0.6rem 1rem;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
  border-right: 1px solid var(--dark-brown);
  transition: background 0.2s ease;
}

.et-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 3rem;
  width: 3rem;
  align-self: stretch;
  font-family: var(--btn-font);
  font-size: var(--btn-fs);
  font-weight: 400;
  font-style: normal;
  line-height: normal;
  color: var(--dark-brown);
  transition: background 0.2s ease;
}

/* ── Variant 1: Card Button ── */
.et-btn--card {
  border-color: #806447;
}
.et-btn--card .et-btn__text {
  background: #FFFDFB;
  color: var(--Brown, #806447);
  border-right-color: #806447;
}
.et-btn--card .et-btn__icon {
  background: #FFFDFB;
  color: var(--Brown, #806447);
}
.et-btn--card:hover .et-btn__text {
  background: #f0e8dc;
}
.et-btn--card:hover .et-btn__icon {
  background: #e3d5c5;
}

/* ── Variant 2: Call Us (split typography) ── */
.et-btn--call {
  border: 1px solid #FFF5EC;
}
.et-btn--call .et-btn__text {
  background: #DCC9D6;
  border-right: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2.4rem;
  white-space: nowrap;
}
.et-btn--call .et-btn__label {
  color: var(--purple, #6D004B);
  font-family: "Clother", serif;
  font-size: 25px;
  font-weight: 400;
  font-style: normal;
  line-height: normal;
}
.et-btn--call .et-btn__number {
  color: var(--purple, #6D004B);
  font-family: "Clother", serif;
  font-size: 24px;
  font-weight: 700;
  font-style: normal;
  line-height: normal;
}
.et-btn--call:hover .et-btn__text {
  background: #DCC9D6;
}

/* ── Variant 3: Call Us with Phone Icon ── */
.et-btn--call-icon {
  border: none;
}
.et-btn--call-icon .et-btn__text {
  background: #DCC9D6;
  border-right: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  padding: .875rem 2.4rem;
}
.et-btn--call-icon .et-btn__text::before {
  content: "";
  display: flex;
  width: 1.2rem;
  height: 1.2rem;
  flex-shrink: 0;
  align-self: center;
  background-color: var(--purple, #6D004B);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M19.95 21q-3.125 0-6.175-1.362t-5.55-3.863t-3.862-5.55T3 4.05q0-.45.3-.75T4.05 3H8.9q.35 0 .625.238t.325.562l.65 3.5q.05.35-.025.625T10.2 8.3L7.625 10.9q.5.925 1.187 1.787t1.513 1.663q.775.775 1.625 1.438T13.1 16.4l2.6-2.6q.2-.2.5-.275t.6-.025l3.4.7q.35.075.575.337T21 15.1v4.85q0 .45-.3.75t-.75.3'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M19.95 21q-3.125 0-6.175-1.362t-5.55-3.863t-3.862-5.55T3 4.05q0-.45.3-.75T4.05 3H8.9q.35 0 .625.238t.325.562l.65 3.5q.05.35-.025.625T10.2 8.3L7.625 10.9q.5.925 1.187 1.787t1.513 1.663q.775.775 1.625 1.438T13.1 16.4l2.6-2.6q.2-.2.5-.275t.6-.025l3.4.7q.35.075.575.337T21 15.1v4.85q0 .45-.3.75t-.75.3'/%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.et-btn--call-icon .et-btn__label {
  color: var(--purple, #6D004B);
  font-family: "Clother", serif;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: normal;
}
.et-btn--call-icon .et-btn__number {
  color: var(--purple, #6D004B);
  font-family: "Clother", serif;
  font-size: 16px;
  font-weight: 700;
  font-style: normal;
  line-height: normal;
}
.et-btn--call-icon:hover .et-btn__text {
  background: #DCC9D6;
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .et-btn__text,
  .et-btn__icon {
    font-size: var(--btn-fs-mobile);
  }

  .et-btn--call .et-btn__text {
    padding: 0.5rem 1.2rem;       /* ← adjust these for spacing */
    gap: 0.3rem;
  }
  .et-btn--call .et-btn__label {
    font-size: 16px;
  }
  .et-btn--call .et-btn__number {
    font-size: 16px;
  }
}