/* RentoNova custom styles (Tailwind CDN handles most utilities) */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* Range slider */
.range-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 9999px;
  background: #E2E8F0;
  outline: none;
}
.range-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 26px; height: 26px;
  border-radius: 9999px;
  background: #0891B2;
  border: 4px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  cursor: pointer;
  transition: transform .15s;
}
.range-slider::-webkit-slider-thumb:hover { transform: scale(1.1); }
.range-slider::-moz-range-thumb {
  width: 26px; height: 26px;
  border-radius: 9999px;
  background: #0891B2;
  border: 4px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  cursor: pointer;
}

/* Tick marks under slider — positioned to match real values on the scale */
.tick-marks { position: relative; height: 16px; margin-top: 8px; }
.tick-marks span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 11px;
  color: #94A3B8;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Keep the first/last labels from overflowing the track edges */
.tick-marks span:first-child { transform: translateX(0); }
.tick-marks span:last-child { transform: translateX(-100%); }

/* FAQ accordion */
.faq-item { border-bottom: 1px solid #E2E8F0; }
.faq-question {
  width: 100%;
  text-align: left;
  padding: 1.25rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: #1B2972;
  cursor: pointer;
  font-size: 1.05rem;
}
.faq-icon { transition: transform .2s; flex-shrink: 0; margin-left: 1rem; color: #0891B2; }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
  color: #475569;
  line-height: 1.6;
}
.faq-item.open .faq-answer { max-height: 600px; padding-bottom: 1.25rem; }

/* Hero gradient */
.hero-gradient {
  background:
    radial-gradient(ellipse 60% 50% at 20% 0%, rgba(8,145,178,0.12), transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 0%, rgba(27,41,114,0.10), transparent 60%),
    #ffffff;
}

/* Card hover */
.card-hover { transition: transform .2s ease, box-shadow .2s ease; }
.card-hover:hover { transform: translateY(-3px); box-shadow: 0 12px 32px -12px rgba(27,41,114,.18); }

/* Buttons */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: #0891B2; color: #fff; font-weight: 600;
  padding: .75rem 1.5rem; border-radius: .5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
  transition: all .15s;
}
.btn-primary:hover { background: #0e7490; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(8,145,178,.3); }

.btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  border: 2px solid #1B2972; color: #1B2972; font-weight: 600;
  padding: calc(.75rem - 2px) calc(1.5rem - 2px); border-radius: .5rem;
  transition: all .15s;
  background: #fff;
}
.btn-outline:hover { background: #1B2972; color: #fff; }

/* Step circle */
.step-num {
  width: 44px; height: 44px; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; background: #0891B2;
  font-size: 1.1rem;
}

/* Animations */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in-up { animation: fadeInUp .6s ease-out both; }

/* Billing toggle */
.billing-toggle { display: inline-flex; background: #F1F5F9; border-radius: 9999px; padding: 4px; }
.billing-toggle button {
  padding: .5rem 1.25rem;
  border-radius: 9999px;
  font-size: .875rem;
  font-weight: 600;
  color: #64748B;
  transition: all .15s;
}
.billing-toggle button.active { background: #1B2972; color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.15); }

/* Save badge */
.save-badge {
  display: inline-block;
  background: #DCFCE7;
  color: #166534;
  font-size: .7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 9999px;
  margin-left: .25rem;
}

/* Tabular nums for prices */
.tabular { font-variant-numeric: tabular-nums; }