/* 
 * Global CSS - Custom Components
 * 
 * This file contains base components specific to the OGVIO website.
 * Component-specific overrides are kept in their respective component files.
 * Bootstrap utility classes are used for spacing, typography, display, etc.
 * 
 * Components:
 * - Button components: .btn--waitlist, .btn--waitlist-dark, .btn--contact, .btn-waitlist-mobile
 * - Badge components: .item--soon
 * 
 * This file is imported before the main style.css to allow for overrides.
 */

a {
  text-decoration: none;
  color: inherit;
}

.btn--waitlist {
  background-color: #ccf080;
  border: 2px solid #000;
  color: #000;
  font-weight: 500;
  padding: 8px 20px;
  border-radius: 40px;
  text-decoration: none;
  transition: filter 0.3s ease;
}

.btn--waitlist:hover {
  filter: brightness(1.1);
  transition: filter 0.3s ease;
}

/* Waitlist Button - Dark Theme */
.btn--waitlist-dark {
  background-color: #000;
  color: #ccf080;
  font-weight: 500;
  padding: 8px 20px;
  border-radius: 40px;
  text-decoration: none;
  transition: filter 0.3s ease;
}

.btn--waitlist-dark:hover {
  filter: brightness(1.3);
}

/* Contact Button */
.btn--contact {
  background: #292929;
  color: #fff;
  font-weight: 500;
  padding: 8px 20px;
  border: 2px solid #292929;
  border-radius: 40px;
  text-decoration: none;
  display: inline-block;
  transition: all 0.3s ease;
}

.btn--contact:hover {
  background: #fff;
  color: #292929;
}

/* Mobile Waitlist Button */
.btn-waitlist-mobile {
  color: #000;
  background-color: #ccf080;
  font-weight: 500;
  padding: 8px 20px;
  border: 2px solid #000;
  border-radius: 40px;
}

/* ============================================
   BADGE COMPONENTS
   ============================================ */

/* Item Soon Indicator */
.item--soon::after {
  text-transform: lowercase;
  content: attr(data-soon-text);
  position: absolute;
  top: 12px;
  color: #617500;
  font-weight: 500;
  right: -6px;
  font-size: 12px;
  white-space: nowrap;
}