/* Dotty Retro DS · buttons.css */

/* ─────────────────────────────────────────
   6. BUTTONS — Apple.com 2011 Free Download
   From images.apple.com …/itunes …/home.css
   .big-blue-button: gradient + border bevel
   (no half-height gloss strip).
   ───────────────────────────────────────── */
.ds-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 6px 16px 7px;
  border: 1px solid #3777bf;
  border-top-color: #4a86c1;
  border-bottom-color: #2469bc;
  border-radius: 12px;
  background-color: #408edb;
  background-image: linear-gradient(to bottom, #51a8e6, #2f78d0);
  color: #fff !important;
  font-size: 12px;
  font-weight: 700;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6);
  text-decoration: none !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  white-space: nowrap;
}
.ds-btn:hover {
  border-color: #376daa;
  /*border-top-color: #376daa;*/
  /*border-bottom-color: #376daa;*/
  background-color: #3a87d7;
  background-image: linear-gradient(to bottom, #4795cc, #2a6ab8);
}
.ds-btn:active {
  border-color: #376daa;
  background-image: linear-gradient(to bottom, #2a6ab8, #4795cc);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}

.ds-btn-ghost {
  border: 1px solid #b8b8b8;
  border-top-color: #c8c8c8;
  border-bottom-color: #aeaeae;
  background-color: #d8d8d8;
  background-image: linear-gradient(to bottom, #f4f4f4, #c4c4c4);
  color: #222 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.ds-btn-ghost:hover {
  border-color: #7a7a7a;
  border-top-color: #7a7a7a;
  border-bottom-color: #7a7a7a;
  background-image: linear-gradient(to bottom, #fafafa, #b8b8b8);
}
.ds-btn-ghost:active {
  background-image: linear-gradient(to bottom, #b8b8b8, #f0f0f0);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.18);
}

.ds-btn-green {
  border-color: #3d8f2e;
  border-top-color: #4aa038;
  border-bottom-color: #2e7824;
  background-color: #4ab830;
  background-image: linear-gradient(to bottom, #6ed24a, #2e9020);
}
.ds-btn-green:hover {
  border-color: #2e8020;
  background-image: linear-gradient(to bottom, #7ad854, #268018);
}
.ds-btn-green:active {
  border-color: #2e8020;
  background-image: linear-gradient(to bottom, #268018, #7ad854);
}

.ds-btn-purple {
  border-color: #7340a0;
  border-top-color: #8a58b4;
  border-bottom-color: #5e3488;
  background-color: #8a48c8;
  background-image: linear-gradient(to bottom, #b070e0, #6828a0);
}
.ds-btn-purple:hover {
  border-color: #5a2888;
  background-image: linear-gradient(to bottom, #bc80e8, #582090);
}
.ds-btn-purple:active {
  border-color: #5a2888;
  background-image: linear-gradient(to bottom, #582090, #bc80e8);
}

.ds-btn-sm { padding: 3px 12px 4px; font-size: 11px; border-radius: 10px; }
.ds-btn-lg { padding: 8px 22px 9px; font-size: 14px; border-radius: 10px; }
.ds-btn-block { width: 100%; }

/* iTunes 2011 Free Download badge — circle + down arrow */
.ds-btn-download {
  gap: 10px;
  padding-right: 14px;
}
.ds-btn-download::after {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background: url("/assets/images/icons/download-badge.svg?v=dup1") center / contain no-repeat;
}
.ds-btn-download.ds-btn-lg::after {
  width: 20px;
  height: 20px;
}

.ds-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ds-actions.center { justify-content: center; }
.ds-actions > .ds-btn {
  min-width: 11.5rem;
  box-sizing: border-box;
}
.ds-actions > .ds-btn-sm { min-width: 0; }

/* Text CTA with circle arrow — “All the reasons…” */
.ds-text-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 400;
  color: #0085cf;
}
.ds-text-cta:hover { text-decoration: underline; }
.ds-text-cta .arrow {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: linear-gradient(to bottom, #51a8e6, #2f78d0);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 0 0 1px rgba(29, 86, 155, 0.55);
  position: relative;
  flex: 0 0 auto;
}
.ds-text-cta .arrow::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 5px;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #fff;
}