/* /assets/css/components/_buttons.css */

.cta {
    display: inline-block;
    background-color: var(--color-primary-accent);
    color: var(--color-white);
    padding: var(--spacing-m) var(--spacing-l);
    border-radius: 50px;
    font-weight: 700;
    margin-top: var(--spacing-m);
    transition: background-color var(--transition-fast), transform var(--transition-fast);
    box-shadow: var(--shadow-light);
}

.cta:hover,
.cta:focus {
    background-color: var(--color-primary-accent-dark);
    transform: translateY(-3px);
    color: var(--color-white);
}

.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--color-border);
  width: 44px;
  height: 44px;
  font-size: 1.5rem;
  border-radius: 50%;
  cursor: pointer;
  transition: all var(--transition-fast);
  z-index: 10;
  user-select: none;
  color: var(--color-text);
  box-shadow: var(--shadow-light);
}

.nav-btn:hover:not(:disabled) {
  background: var(--color-white);
  transform: translateY(-50%) scale(1.05);
}

.nav-btn.prev {
  left: var(--spacing-m);
}

.nav-btn.next {
  right: var(--spacing-m);
}

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

.contact-form .cta-button {
    width: 100%;
    border: none;
    cursor: pointer;
}

.back-to-blog {
    display: inline-block;
    margin-top: var(--spacing-xl);
    font-weight: 600;
}

/* === GUMB ZA NA VRH (DODANO) === */
.back-to-top-btn {
    position: fixed;
    bottom: var(--spacing-l);
    right: var(--spacing-l);
    width: 50px;
    height: 50px;
    background-color: var(--color-primary-accent);
    color: var(--color-white);
    border: none;
    border-radius: 50%;
    box-shadow: var(--shadow-medium);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    line-height: 1;
    z-index: 1000;
    text-decoration: none;

    /* Stanje za animacijo */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.back-to-top-btn:hover {
    background-color: var(--color-primary-accent-dark);
    color: var(--color-white);
}

.back-to-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}