/*
 * 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.
 */

/* Purple Range Slider Styling */
.slider-purple {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.slider-purple::-webkit-slider-track {
  background: #e9d5ff;
  height: 8px;
  border-radius: 4px;
}

.slider-purple::-moz-range-track {
  background: #e9d5ff;
  height: 8px;
  border-radius: 4px;
}

.slider-purple::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background: #9333ea;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 4px rgba(147, 51, 234, 0.3);
  transition: all 0.2s ease;
}

.slider-purple::-moz-range-thumb {
  background: #9333ea;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 4px rgba(147, 51, 234, 0.3);
  transition: all 0.2s ease;
}

.slider-purple:hover::-webkit-slider-thumb {
  background: #7c3aed;
  transform: scale(1.1);
}

.slider-purple:hover::-moz-range-thumb {
  background: #7c3aed;
  transform: scale(1.1);
}

.slider-purple:focus {
  outline: none;
}

.slider-purple:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.3);
}

.slider-purple:focus::-moz-range-thumb {
  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.3);
}

#dados-pessoais-title {
  margin-bottom: 2rem;
}

/* --- Brand fonts for the confirmation pages + "Futura Musa" pop-ups ------ *
 * Antonio and Arimo are loaded from Google Fonts in the layout <head> (full
 * latin-ext coverage — Portuguese diacritics render correctly). "Now" is
 * commercial / not on Google Fonts, so it stays a local @font-face; it's
 * only used on button labels ("OK", "ATUALIZAR dieta"), which have no       *
 * accented characters.                                                      */
@font-face {
  font-family: "Now";
  src: url("/assets/Now-Regular-f38515ab.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Now";
  src: url("/assets/Now-Bold-c4edd1dd.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

/* Modal typography: title (before the divider) is Antonio, body text
   (after the divider) is Arimo. */
.font-antonio {
  font-family: "Antonio", Impact, sans-serif;
}

.font-arimo {
  font-family: "Arimo", Arial, sans-serif;
}

/* Blue -> purple -> pink brand gradient applied to text (e.g. the first
   word of a modal title: "Pagamento" confirmado!, "INSCRIÇÃO" confirmada). */
.text-gradient-brand {
  background: linear-gradient(90deg, #4F6BFF 0%, #A855F7 50%, #EC4899 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- "Futura Musa" pop-up / screen card ---------------------------------- *
 * Design refs: novo comportamento Musa Fitness/10.png, 11.png, 12.png       */
.fm-screen {
  min-height: calc(100vh - 72px);
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
}

.fm-card {
  width: 100%;
  max-width: 360px;
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 18px;
  padding: 30px 26px 26px;
  text-align: center;
  box-shadow: 0 12px 40px rgba(17, 24, 39, 0.10);
}

.fm-title {
  font-family: "Antonio", Impact, sans-serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1;
  color: #111827;
  margin: 0;
}

/* Lighter first word in a two-weight title, e.g. "Inscrição ATIVA". */
.fm-title__soft {
  font-weight: 400;
}

.fm-underline {
  height: 3px;
  border-radius: 9999px;
  background: linear-gradient(90deg, #4F6BFF 0%, #EC4899 100%);
  margin: 10px 0 22px;
}

.fm-body {
  font-family: "Arimo", Arial, sans-serif;
  font-size: 1.15rem;
  line-height: 1.55;
  color: #1f2937;
  margin: 0;
}

.fm-body + .fm-body {
  margin-top: 14px;
}

.fm-body strong {
  font-weight: 700;
}

.fm-body--justify {
  text-align: justify;
}

.fm-num {
  color: #EC4899;
  font-weight: 700;
}

.fm-highlight {
  color: #EC4899;
  font-weight: 700;
}

.fm-emoji {
  font-size: 2.3rem;
  line-height: 1;
  margin: 18px 0;
}

.fm-note {
  display: block;
  margin-top: 18px;
  font-family: "Arimo", Arial, sans-serif;
  font-weight: 700;
  text-decoration: underline;
  color: #111827;
  font-size: 1.05rem;
}

.fm-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
}

.fm-btn {
  display: inline-block;
  font-family: "Now", "Antonio", sans-serif;
  font-weight: 700;
  color: #ffffff;
  border: 2px solid #000000;
  border-radius: 12px;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fm-btn__soft {
  font-weight: 400;
}

.fm-btn--primary {
  background: linear-gradient(135deg, #EC4899 0%, #DB2777 100%);
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  padding: 12px 30px;
  box-shadow: 0 4px 15px rgba(236, 72, 153, 0.35);
}

.fm-btn--ok {
  padding: 11px 46px;
  letter-spacing: 0.08em;
}

.fm-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(236, 72, 153, 0.45);
}

.fm-btn--secondary {
  background: linear-gradient(135deg, #9CA3AF 0%, #6B7280 100%);
  font-size: 0.95rem;
  padding: 9px 24px;
  box-shadow: 0 3px 10px rgba(107, 114, 128, 0.35);
}

.fm-btn--secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 14px rgba(107, 114, 128, 0.45);
}

@media (max-width: 640px) {
  .fm-title { font-size: 2rem; }
  .fm-body { font-size: 1.05rem; }
}