/* oferuje.to Branding - Custom Colors for Duo Template */

:root {
  --color-highlight: #04b3b2;
  --color-highlight-dark: #038f8e;
  --color-highlight-light: #05d4d3;
}

/* Override Duo color classes */
.color-highlight { color: #04b3b2 !important; }
.bg-highlight { background-color: #04b3b2 !important; }
.gradient-highlight { 
  background: linear-gradient(135deg, #04b3b2 0%, #05d4d3 100%) !important; 
}
.border-highlight { border-color: #04b3b2 !important; }

/* Buttons */
.btn.gradient-highlight,
.btn-highlight {
  background: #04b3b2;
  border-color: #04b3b2;
  color: white;
}

.btn.gradient-highlight:hover,
.btn-highlight:hover {
  background: #038f8e;
  border-color: #038f8e;
}

.btn.btn-full {
  width: 100%;
}

/* Links */
a.color-highlight:hover {
  color: #038f8e !important;
}

/* Footer bar active state */
.footer-bar a.active-nav {
  color: #04b3b2 !important;
}

/* Albert Sans Font */
body, 
.page-content,
.card,
.btn,
input,
textarea,
select {
  font-family: 'Albert Sans', sans-serif !important;
}

/* Badge styles */
.badge-new {
  background: #04b3b2;
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

.badge-viewed {
  background: #e5e7eb;
  color: #6b7280;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}

/* Sticky CTA */
.sticky-cta {
  position: fixed;
  bottom: 60px; /* Above footer-bar (60px height) */
  left: 0;
  right: 0;
  background: white;
  padding: 16px;
  box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1);
  z-index: 999;
}

/* Card hover effect */
.card-clickable {
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.card-clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* Loading states */
.spinner-border.color-highlight {
  border-color: #04b3b2;
  border-right-color: transparent;
}

/* Empty state */
.empty-state {
  text-align: center;
  padding: 20px;
  color: #6b7280;
}

.empty-state i {
  font-size: 64px;
  color: #d1d5db;
  margin-bottom: 16px;
}