/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

.font-montserrat {
  font-family: 'Montserrat', sans-serif;
}

.preview_mode {
  position: fixed;
  inset: 0;
  border: 3px solid red;
  pointer-events: none;
  z-index: 9999;
  box-sizing: border-box;
}

.preview_mode_label {
  position: absolute;
  bottom: -2px;
  right: 0;
  background-color: red;
  color: white;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: bold;
  border-top-left-radius: 4px;
  pointer-events: none;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

#modal, #popover {
  opacity: 1;
  transition: opacity 0.2s ease-out;
}

#modal.fade-out,
#popover.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* COMPANY COLORS */

/* ANYTIMEFITNESS */
.bg-anytimefitness-dark {
  background-color: #1D232A;
}

.bg-anytimefitness-primary {
  background-color: #450099;
}

.bg-anytimefitness-secondary {
  background-color: #6F38D6;
}

.border-anytimefitness-light {
  border-color: rgba(255, 255, 255, 0.1);
}

.hover-anytimefitness-light {
  &:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }
}

.text-anytimefitness-light {
  color: #FFFFFF;
}

.btn-anytimefitness {
  background-color: #f97316;
  transition: background-color 0.2s ease;

  &:hover {
    background-color: #EA580C;
  }
}

/* UBX */
.bg-ubx-dark {
  background-color: #FFFFFF;
}

.bg-ubx-primary {
  background-color: #FFFFFF;
}

.bg-ubx-secondary {
  background-color: #000000;
}

.border-ubx-light {
  border-color: rgba(0, 0, 0, 0.1);
}

.hover-ubx-light {
  &:hover {
    background-color: rgba(0, 0, 0, 0.1);
  }
}

.text-ubx-light {
  color: #000000;
}

.btn-ubx {
  background-color: #18BD5B;
  transition: background-color 0.2s ease;

  &:hover {
    background-color: #14994A;
  }
}