/* =============================================================================
   buttons.css — Amazon-style buttons: pill-ish rounded corners, gradient fill,
   subtle 1px border + inset highlight. Maple red replaces Amazon yellow.
   ============================================================================= */

.ft-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  border-radius: var(--radius-pill);
  border: 1px solid #ADB1B8;
  cursor: pointer;
  user-select: none;
  background: linear-gradient(to bottom, #F7F8FA, #E7E9EC);
  color: var(--clr-text-primary);
  box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset;
  white-space: nowrap;
}
.ft-btn svg { width: 14px; height: 14px; stroke-width: 2; }
.ft-btn:hover {
  background: linear-gradient(to bottom, #E7E9EC, #D9DCE1);
  text-decoration: none;
  color: var(--clr-text-primary);
  border-color: #A2A6AC;
}
.ft-btn:active {
  background: #D9DCE1;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
}
.ft-btn:focus-visible {
  outline: 0;
  border-color: #E47911;
  box-shadow: var(--shadow-amazon-focus);
}
.ft-btn[disabled],
.ft-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ----- Primary (maple-red CTA) ----------------------------------------- */
.ft-btn-primary {
  background: linear-gradient(to bottom, #E0202F, var(--clr-primary));
  border-color: var(--clr-primary-dark) var(--clr-primary-darker) var(--clr-primary-darker);
  color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset;
}
.ft-btn-primary:hover {
  background: linear-gradient(to bottom, var(--clr-primary), var(--clr-primary-dark));
  border-color: var(--clr-primary-darker);
  color: #fff;
}
.ft-btn-primary:active {
  background: var(--clr-primary-darker);
  color: #fff;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ----- Secondary (white panel with subtle border) ---------------------- */
.ft-btn-secondary {
  background: linear-gradient(to bottom, #FFFFFF, #F0F0F0);
  border-color: #ADB1B8 #A2A6AC #8D9096;
  color: var(--clr-text-primary);
}
.ft-btn-secondary:hover {
  background: linear-gradient(to bottom, #F7F8FA, #E7E9EC);
  border-color: #A2A6AC;
}

/* ----- Ghost (inline link-like button) --------------------------------- */
.ft-btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--clr-link);
  box-shadow: none;
}
.ft-btn-ghost:hover {
  background: #F0F2F2;
  color: var(--clr-link-hover);
}

/* ----- Dark (Amazon "Get started" or sign-in panel CTA) --------------- */
.ft-btn-dark {
  background: linear-gradient(to bottom, #37475A, #232F3E);
  border-color: #131A22;
  color: #fff;
}
.ft-btn-dark:hover {
  background: linear-gradient(to bottom, #485769, #2C3A4C);
  color: #fff;
}

/* ----- Danger ---------------------------------------------------------- */
.ft-btn-danger {
  background: linear-gradient(to bottom, #E0202F, var(--clr-error));
  border-color: #99001A;
  color: #fff;
}
.ft-btn-danger:hover {
  background: var(--clr-error);
  color: #fff;
}

/* ----- Sizes ----------------------------------------------------------- */
.ft-btn-sm { padding: 4px 10px; font-size: 12px; }
.ft-btn-lg { padding: 10px 22px; font-size: 14px; font-weight: 700; }
.ft-btn-xl { padding: 12px 28px; font-size: 15px; font-weight: 700; }

.ft-btn-block { display: flex; width: 100%; }

.ft-btn-link {
  background: transparent;
  border: 0;
  color: var(--clr-link);
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 400;
  box-shadow: none;
  border-radius: 0;
}
.ft-btn-link:hover {
  color: var(--clr-link-hover);
  text-decoration: underline;
  background: transparent;
}
.ft-btn-link svg { width: 13px; height: 13px; }