/* =========================================================
   CM Secure Download Button — Front-end styles (production)
   ========================================================= */

/* Wrapper */
.download-wrapper.cm-sdb {
  max-width: 600px;
  margin: 50px auto;
  padding: 0 15px;
  text-align: center;
  position: relative;
}

/* Progress Button */
.download-wrapper.cm-sdb .progress-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  border-radius: 30em;
  position: relative;
  overflow: hidden;
  color: #fff;
  font: 600 15px/1 Roboto, system-ui, -apple-system, Segoe UI, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  cursor: pointer;
  z-index: 1;
  background: #ff135a;
  border: 3px solid #fff;
  box-shadow: 6px 6px 12px rgba(0,0,0,.12), -6px -6px 12px rgba(255,255,255,.6);
  transition: background .6s ease-in, color .6s ease-in, transform .2s ease;
  text-align: center;
}

/* Gradient progress fill */
.download-wrapper.cm-sdb .progress-btn::before {
  content: "";
  width: 0;
  height: 100%;
  border-radius: 30em;
  position: absolute;
  top: 0;
  left: 0;
  background-image: linear-gradient(to right, #0fd850 0%, #f9f047 100%);
  display: block;
  z-index: -1;
  transition: width var(--download-time, 3s) linear;
}

/* Button states */
.download-wrapper.cm-sdb .progress-btn.in-progress {
  background: #fff;
  color: #222;
}

.download-wrapper.cm-sdb .progress-btn.in-progress::before {
  width: 100%;
}

.download-wrapper.cm-sdb .progress-btn.downloaded:disabled {
  color: #ffffff;
  cursor: not-allowed;
}

.download-wrapper.cm-sdb .progress-btn:hover {
  transform: translateY(-1px);
}

/* Text spans - default visibility */
.download-wrapper.cm-sdb .progress-btn .text-progress,
.download-wrapper.cm-sdb .progress-btn .text-complete,
.download-wrapper.cm-sdb .progress-btn .text-claim {
  display: none;
}

/* State: in-progress */
.download-wrapper.cm-sdb .progress-btn.in-progress .text-start { display: none; }
.download-wrapper.cm-sdb .progress-btn.in-progress .text-progress { display: inline; }

/* State: after progress finished (waiting for tab switch) */
.download-wrapper.cm-sdb .progress-btn.downloaded .text-progress { display: none; }
.download-wrapper.cm-sdb .progress-btn.downloaded .text-complete { display: inline; }

/* State: returned to tab (claim) */
.download-wrapper.cm-sdb .progress-btn.returned .text-complete { display: none; }
.download-wrapper.cm-sdb .progress-btn.returned .text-claim { display: inline; }

/* Helper/message box
   — Must stay on ONE line across all devices (no wrap). */
.download-wrapper.cm-sdb .helper-note {
  display: block;
  font: 13px/1 Roboto, system-ui, -apple-system, Segoe UI, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: #333;
  margin-top: 10px;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity .5s ease, max-height .5s ease, margin-top .5s ease;
  position: relative;
  z-index: 10;

  /* One-line guarantee */
  white-space: nowrap;        /* never wrap */
  overflow: hidden;           /* clip overflow */
  text-overflow: ellipsis;    /* show ellipsis if needed */
}

/* When shown, still enforce single line */
.download-wrapper.cm-sdb .helper-note.show {
  opacity: 1;
  max-height: 3em;
  /* no animation that would change layout height beyond one line */
  animation: cm-sdb-shake-message .7s ease-in-out .5s 1;
}

/* Shake effect (subtle) */
@keyframes cm-sdb-shake-message {
  0%,100% { transform: translateX(0); }
  10%,30%,50%,70%,90% { transform: translateX(-6px); }
  20%,40%,60%,80% { transform: translateX(6px); }
}

/* Ads wrapper (global snippet output) */
.download-wrapper.cm-sdb .ads-section {
  margin-top: 14px;
  display: flex;
  justify-content: center;
}

/* In case user’s snippet lacks responsive handling, we provide simple slots.
   You can safely remove these if your ad code manages responsiveness itself. */
.download-wrapper.cm-sdb .ads-section .desktopx,
.download-wrapper.cm-sdb .ads-section .mobilex {
  display: none;
}

@media (min-width: 769px) {
  .download-wrapper.cm-sdb .ads-section .desktopx { display: block; }
}

@media (max-width: 768px) {
  .download-wrapper.cm-sdb .ads-section .mobilex { display: block; }
}

/* Mobile polish */
@media (max-width: 480px) {
  .download-wrapper.cm-sdb .progress-btn {
    height: 56px;
    font-size: 16px;
  }

  /* Keep helper note to one line even on the narrowest phones */
  .download-wrapper.cm-sdb .helper-note {
    font-size: 14px;
    line-height: 1;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .download-wrapper.cm-sdb .progress-btn::before { transition: none; }
  .download-wrapper.cm-sdb .helper-note.show { animation: none; }
}