/* ===================================================================
   Download Tracker Pro — Frontend Styles
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@500;700&family=Syne:wght@600;700&display=swap');

/* ── CSS tokens ─────────────────────────────────────────── */
:root {
  --dtp-radius      : 10px;
  --dtp-font-mono   : 'JetBrains Mono', 'Fira Mono', monospace;
  --dtp-font-sans   : 'Syne', system-ui, sans-serif;
  --dtp-shadow-sm   : 0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.08);
  --dtp-shadow-lg   : 0 10px 30px rgba(0,0,0,.15), 0 4px 10px rgba(0,0,0,.10);
  --dtp-transition  : 180ms cubic-bezier(.4,0,.2,1);
}

/* ── Wrapper ────────────────────────────────────────────── */
.dtp-wrapper {
  display        : inline-flex;
  flex-direction : column;
  align-items    : center;
  gap            : 6px;
}

/* ── Group grid ─────────────────────────────────────────── */
.dtp-group {
  display               : grid;
  gap                   : 1rem;
  grid-template-columns : repeat(4, auto);
  justify-content       : start;
  align-items           : start;
}
.dtp-cols-1 { grid-template-columns: repeat(1, auto); }
.dtp-cols-2 { grid-template-columns: repeat(2, auto); }
.dtp-cols-3 { grid-template-columns: repeat(3, auto); }
.dtp-cols-4 { grid-template-columns: repeat(4, auto); }
.dtp-cols-5 { grid-template-columns: repeat(5, auto); }
.dtp-cols-6 { grid-template-columns: repeat(6, auto); }

@media (max-width: 640px) {
  .dtp-group { grid-template-columns: repeat(2, 1fr) !important; }
  .dtp-wrapper { width: 100%; }
}

/* ── Base button ─────────────────────────────────────────── */
.dtp-btn {
  --c              : var(--dtp-color, #2563eb);
  --c-light        : color-mix(in srgb, var(--c) 14%, white);
  --c-dark         : color-mix(in srgb, var(--c) 80%, black);

  position         : relative;
  display          : inline-flex;
  align-items      : center;
  gap              : .45rem;
  padding          : .55rem 1.1rem .55rem .85rem;
  border-radius    : var(--dtp-radius);
  font-family      : var(--dtp-font-mono);
  font-size        : .82rem;
  font-weight      : 700;
  letter-spacing   : .03em;
  cursor           : pointer;
  user-select      : none;
  border           : 2px solid transparent;
  outline          : none;
  transition       : transform var(--dtp-transition),
                     box-shadow var(--dtp-transition),
                     background var(--dtp-transition),
                     color var(--dtp-transition),
                     border-color var(--dtp-transition);
  white-space      : nowrap;
  overflow         : hidden;
}

/* shimmer layer */
.dtp-btn::after {
  content    : '';
  position   : absolute;
  inset      : 0;
  background : linear-gradient(105deg, transparent 40%, rgba(255,255,255,.25) 50%, transparent 60%);
  transform  : translateX(-120%);
  transition : transform .55s ease;
  pointer-events: none;
  border-radius: inherit;
}
.dtp-btn:hover::after { transform: translateX(120%); }

/* ── SOLID variant ──────────────────────────────────────── */
.dtp-btn--solid {
  background   : var(--c);
  color        : #fff;
  border-color : var(--c);
  box-shadow   : 0 4px 14px color-mix(in srgb, var(--c) 40%, transparent),
                 var(--dtp-shadow-sm);
}
.dtp-btn--solid:hover:not(:disabled) {
  background   : var(--c-dark);
  border-color : var(--c-dark);
  transform    : translateY(-2px);
  box-shadow   : 0 8px 24px color-mix(in srgb, var(--c) 45%, transparent),
                 var(--dtp-shadow-lg);
}
.dtp-btn--solid:active:not(:disabled) {
  transform  : translateY(0);
  box-shadow : var(--dtp-shadow-sm);
}

/* ── OUTLINE variant ────────────────────────────────────── */
.dtp-btn--outline {
  background   : transparent;
  color        : var(--c);
  border-color : var(--c);
  box-shadow   : inset 0 0 0 0 var(--c);
}
.dtp-btn--outline:hover:not(:disabled) {
  background  : var(--c-light);
  transform   : translateY(-2px);
  box-shadow  : 0 6px 20px color-mix(in srgb, var(--c) 25%, transparent);
}
.dtp-btn--outline:active:not(:disabled) { transform: translateY(0); }

/* ── GHOST variant ──────────────────────────────────────── */
.dtp-btn--ghost {
  background   : var(--c-light);
  color        : var(--c);
  border-color : transparent;
}
.dtp-btn--ghost:hover:not(:disabled) {
  background  : color-mix(in srgb, var(--c) 22%, white);
  transform   : translateY(-2px);
  box-shadow  : 0 4px 14px color-mix(in srgb, var(--c) 20%, transparent);
}

/* ── Disabled state ─────────────────────────────────────── */
.dtp-btn:disabled {
  opacity        : .45;
  cursor         : not-allowed;
  filter         : grayscale(.5);
}

/* ── Icon ───────────────────────────────────────────────── */
.dtp-btn__icon {
  display      : flex;
  align-items  : center;
  transition   : transform var(--dtp-transition);
}
.dtp-btn:hover:not(:disabled) .dtp-btn__icon {
  animation: dtp-bounce .4s ease;
}
@keyframes dtp-bounce {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(4px); }
  70%  { transform: translateY(-2px); }
  100% { transform: translateY(0); }
}

/* ── Label ──────────────────────────────────────────────── */
.dtp-btn__label { position: relative; }

/* ── Download count ─────────────────────────────────────── */
.dtp-count {
  font-family  : var(--dtp-font-sans);
  font-size    : .7rem;
  font-weight  : 600;
  color        : #6b7280;
  letter-spacing: .02em;
  transition   : color .2s;
}
.dtp-count__num {
  font-family  : var(--dtp-font-mono);
  font-weight  : 700;
  color        : #374151;
}

/* ── Flash animation on click ───────────────────────────── */
.dtp-btn--flash {
  animation: dtp-flash .35s ease forwards;
}
@keyframes dtp-flash {
  0%   { filter: brightness(1); }
  40%  { filter: brightness(1.35); }
  100% { filter: brightness(1); }
}

/* ── Error ──────────────────────────────────────────────── */
.dtp-error {
  color       : #dc2626;
  font-size   : .85rem;
  font-family : var(--dtp-font-mono);
}