/* ========================================
   BUTTON SYSTEM — v2 (LOCKED v1)
======================================== */

/* =========================
   1. BASE
========================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;

  border-radius: 3px;
  border: 1px solid transparent;

  padding: 10px 16px;
  cursor: pointer;

  text-decoration: none;
  white-space: nowrap;

  transition: all 0.2s ease;
}


/* =========================
   2. VARIANTS
========================= */

/* PRIMARY (main action) */
.btn-primary {
  background-color: #111;
  color: #fff;
}

.btn-primary:hover {
  background-color: #222;
}


/* OUTLINE (secondary action) */
.btn-outline {
  background: transparent;
  border-color: #ccc;
  color: #111;
}

.btn-outline:hover {
  background-color: #f5f5f5;
}


/* GHOST (minimal / inline actions) */
.btn-ghost {
  background: transparent;
  color: #666;
}

.btn-ghost:hover {
  color: #111;
}





/* DANGER (destructive actions) */
.btn-danger {
  background-color: #470802;
  color: #fff;
}

.btn-danger:hover {
  background-color: #a93226;
}


/* =========================
   3. SIZES
========================= */

.btn-sm {
  padding: 6px 10px;
  font-size: 13px;
}

.btn-md {
  padding: 10px 16px;
  font-size: 14px;
}

.btn-lg {
  padding: 14px 20px;
  font-size: 15px;
}


/* =========================
   4. MODIFIERS
========================= */

/* full width */
.btn-wide {
  width: 100%;
}

/* force block layout */
.btn-block {
  display: flex;
  width: 100%;
}

/* centered button (optional helper) */
.btn-center {
  margin-left: auto;
  margin-right: auto;
}


/* =========================
   5. STATES
========================= */

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn:focus {
  outline: none;
}


/* =========================
   6. OPTIONAL ENHANCEMENTS
========================= */

/* subtle premium feel */
.btn-primary {
  letter-spacing: 0.3px;
}

/* smoother hover */
.btn:hover {
  transform: translateY(-1px);
}

/* active press */
.btn:active {
  transform: translateY(0);
}

.btn-editorial {
  text-transform: uppercase;
  letter-spacing: 1px;
  border-color: #111;   /* optional */
}

/* LINK-LIKE BUTTON (for JS actions) */
button.link {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* --- Like Button (Interactions) --- */

/* Контейнерът за иконата и брояча */
.btn-like {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

/* Сърцето (иконата) */
.btn-like .like-icon {
    font-size: 1.3rem; /* Малко по-голямо от текста */
    color: var(--color-text-muted, #777); /* Сиво по подразбиране */
    transition: transform 0.2s ease, color 0.2s ease;
}

/* Броячът до него */
.btn-like .like-count {
    font-size: 1.15rem; /* Като stat-value */
    font-weight: 500;
    color: var(--color-text-primary, #111);
}

/* Hover ефект: Сърцето се оцветява и се повдига леко */
.btn-like:hover .like-icon {
    color: var(--btn-danger-hover, #a93226);
    transform: scale(1.1);
}

/* Активно състояние (Когато е харесано) */
.btn-like.liked .like-icon {
    color: var(--color-heart-active, #7a1f2a); /* Бордо */
}
@media (max-width: 600px) {
    .form-actions,
    .actions-row,
    .workspace-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        width: 100% !important;
        align-items: stretch !important;
    }

    /* НОВО: Казваме на формите вътре в тези редове също да заемат 100% */
    .actions-row form,
    .form-actions form {
        width: 100% !important;
        display: block !important;
    }

    /* Правим бутоните и линковете да заемат целия екран */
    .form-actions .btn,
    .form-actions .link,
    .actions-row .btn,
    .actions-row .link,
    .workspace-actions .btn,
    .workspace-actions .link,
    .actions-row form .btn { /* Добавихме и бутона вътре във формата */
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        text-align: center;
        justify-content: center;
        display: flex !important;
    }
}