/* ===================================================================
   File: buttons.css
   Description: Canonical button system for Local Leader
   =================================================================== */

/* -------------------------
   Design tokens
   ------------------------- */
:root {
  --ll-btn-radius: 6px;

  --ll-btn-font-size: 16px;
  --ll-btn-font-weight: 600;
  --ll-btn-line-height: 1.2;

  --ll-btn-height-sm: 36px;
  --ll-btn-height-md: 44px;
  --ll-btn-height-lg: 50px;

  --ll-btn-pad-x-sm: 12px;
  --ll-btn-pad-x-md: 18px;
  --ll-btn-pad-x-lg: 22px;

  --ll-color-primary: #0073aa;
  --ll-color-primary-hover: #005d8c;
  --ll-color-primary-active: #004f77;

  --ll-color-danger: #d90000;
  --ll-color-danger-hover: #b00000;
  --ll-color-danger-active: #8d0000;

  --ll-color-premium: #c69214;
  --ll-color-premium-hover: #a9780f;
  --ll-color-premium-active: #8d640c;

  --ll-color-text: #1f2937;
  --ll-color-text-soft: #6b7280;
  --ll-color-border: #cbd5e1;
  --ll-color-surface: #ffffff;
  --ll-color-surface-muted: #f8fafc;
  --ll-color-disabled-bg: #e5e7eb;
  --ll-color-disabled-text: #9ca3af;

  --ll-btn-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  --ll-btn-shadow-hover: 0 2px 6px rgba(0, 0, 0, 0.10);
  --ll-btn-focus-ring: 0 0 0 3px rgba(0, 115, 170, 0.20);
}

/* -------------------------
   Base button
   Use .ll-btn everywhere
   ------------------------- */
.ll-btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;

  min-height: var(--ll-btn-height-md);
  padding: 0 var(--ll-btn-pad-x-md);

  border: 1px solid transparent;
  border-radius: var(--ll-btn-radius);
  background: var(--ll-color-primary);
  color: #ffffff;
  box-shadow: var(--ll-btn-shadow);

  font: inherit;
  font-size: var(--ll-btn-font-size);
  font-weight: var(--ll-btn-font-weight);
  line-height: var(--ll-btn-line-height);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;

  cursor: pointer;
  user-select: none;
  box-sizing: border-box;

  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    box-shadow 0.15s ease,
    transform 0.05s ease;
}

.ll-btn:hover {
  background: var(--ll-color-primary-hover);
  border-color: var(--ll-color-primary-hover);
  box-shadow: var(--ll-btn-shadow-hover);
  color: #ffffff;
  text-decoration: none;
}

.ll-btn:active {
  background: var(--ll-color-primary-active);
  border-color: var(--ll-color-primary-active);
  transform: translateY(1px);
  box-shadow: none;
}

.ll-btn:focus-visible {
  outline: none;
  box-shadow: var(--ll-btn-shadow), var(--ll-btn-focus-ring);
}

/* -------------------------
   Variants
   ------------------------- */
.ll-btn--secondary {
  background: var(--ll-color-surface);
  color: var(--ll-color-primary);
  border-color: var(--ll-color-primary);
}

.ll-btn--secondary:hover {
  background: var(--ll-color-primary);
  color: #ffffff;
  border-color: var(--ll-color-primary);
}

.ll-btn--secondary:active {
  background: var(--ll-color-primary-active);
  border-color: var(--ll-color-primary-active);
  color: #ffffff;
}

.ll-btn--neutral {
  background: var(--ll-color-surface-muted);
  color: var(--ll-color-text);
  border-color: var(--ll-color-border);
}

.ll-btn--neutral:hover {
  background: #eef2f7;
  color: var(--ll-color-text);
  border-color: #b8c4d3;
}

.ll-btn--neutral:active {
  background: #e2e8f0;
  border-color: #aebccd;
  color: var(--ll-color-text);
}

.ll-btn--danger {
  background: var(--ll-color-danger);
  color: #ffffff;
  border-color: var(--ll-color-danger);
}

.ll-btn--danger:hover {
  background: var(--ll-color-danger-hover);
  border-color: var(--ll-color-danger-hover);
  color: #ffffff;
}

.ll-btn--danger:active {
  background: var(--ll-color-danger-active);
  border-color: var(--ll-color-danger-active);
  color: #ffffff;
}

.ll-btn--premium {
  background: var(--ll-color-premium);
  color: #ffffff;
  border-color: var(--ll-color-premium);
}

.ll-btn--premium:hover {
  background: var(--ll-color-premium-hover);
  border-color: var(--ll-color-premium-hover);
  color: #ffffff;
}

.ll-btn--premium:active {
  background: var(--ll-color-premium-active);
  border-color: var(--ll-color-premium-active);
  color: #ffffff;
}

/* -------------------------
   Sizes
   ------------------------- */
.ll-btn--sm {
  min-height: var(--ll-btn-height-sm);
  padding: 0 var(--ll-btn-pad-x-sm);
  font-size: 14px;
  border-radius: 5px;
}

.ll-btn--lg {
  min-height: var(--ll-btn-height-lg);
  padding: 0 var(--ll-btn-pad-x-lg);
  font-size: 17px;
  border-radius: 7px;
}

/* -------------------------
   Layout utilities
   ------------------------- */
.ll-btn--block {
  display: flex;
  width: 100%;
}

.ll-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* -------------------------
   Disabled state
   ------------------------- */
.ll-btn:disabled,
.ll-btn[aria-disabled="true"] {
  background: var(--ll-color-disabled-bg);
  color: var(--ll-color-disabled-text);
  border-color: var(--ll-color-disabled-bg);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}




/* -------------------------
   Giveaway CTA
   ------------------------- */
.ll-giveaway-cta-row {
  margin-top: 14px;
  display: flex;
  justify-content: center;
}

.ll-giveaway-entry-ui {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
}

.ll-giveaway-entry-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-height: 3.5rem;
  text-align: center;
}

.ll-giveaway-entry-message__date {
  font-size: 1.6rem;
  font-weight: 600;
  color: red;
  line-height: 1.65;
}

.ll-giveaway-entry-message__next {
  font-size: 1.6rem;
  font-weight: 600;
  color: red;
  line-height: 1.65;
}

.ll-giveaway-entry-action {
  display: flex;
  justify-content: center;
  width: 100%;
}

.ll-giveaway-entry-action[hidden] {
  display: none !important;
}

.ll-giveaway-enter-btn {
  min-width: 320px;
  position: relative;
  gap: 0.55rem;
}

.ll-giveaway-enter-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1em;
  min-width: 1.1em;
  line-height: 1;
  font-size: 1em;
}

.ll-giveaway-enter-btn__text {
  display: inline-block;
  line-height: 1.2;
}

.ll-giveaway-enter-btn.is-entered {
  background: #ecfdf5;
  color: #166534;
  border-color: #86efac;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.ll-giveaway-enter-btn.is-entered:hover,
.ll-giveaway-enter-btn.is-entered:active {
  background: #ecfdf5;
  color: #166534;
  border-color: #86efac;
  transform: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.ll-giveaway-enter-btn.is-entered .ll-giveaway-enter-btn__icon {
  color: #16a34a;
  font-weight: 700;
}

.ll-giveaway-enter-btn--animate {
  animation: llGiveawayEnteredPop 0.55s ease;
}

@keyframes llGiveawayEnteredPop {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.06);
  }
  100% {
    transform: scale(1);
  }
}

.ll-author-action-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
}