/*
 * Calculadoras style base (scoped)
 * Source of truth adapted from hipotek-home-link/src/index.css + calculator components.
 */

.hipotuca-calculadoras {
  --background: 240 8% 96%;
  --foreground: 228 51.02% 9.61%;
  --primary: 340 78% 55%;
  --muted: 240 6% 93%;
  --muted-foreground: 240 8% 48%;
  --border: 240 8% 88%;
  --radius: 0.75rem;
}

.hipotuca-calculadoras,
.hipotuca-calculadoras * {
  box-sizing: border-box;
}

.hipotuca-calculadoras {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}

/* Keep card borders visible and consistent with Vite */
.hipotuca-calculadoras .border {
  border-style: solid !important;
  border-width: 1px !important;
}

.hipotuca-calculadoras .border-border {
  border-color: hsl(var(--border)) !important;
}

/* Force proper border for informative/result cards where WP/plugin CSS tends to remove it */
.hipotuca-calculadoras .bg-muted\/40.border,
.hipotuca-calculadoras .bg-background.border,
.hipotuca-calculadoras .bg-muted\/30.border {
  border-color: hsl(var(--border)) !important;
}

/* Form controls: neutralize external themes/plugins and match Vite */
.hipotuca-calculadoras input[type="text"],
.hipotuca-calculadoras input[type="number"],
.hipotuca-calculadoras input[type="email"],
.hipotuca-calculadoras input[type="tel"],
.hipotuca-calculadoras select,
.hipotuca-calculadoras textarea {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 0.75rem !important;
  padding: 0.625rem 0.75rem !important;
  background: hsl(var(--background)) !important;
  color: hsl(var(--foreground)) !important;
  font-family: Manrope, sans-serif !important;
  font-size: var(--type-body-size) !important;
  line-height: var(--type-body-line-height) !important;
  font-weight: var(--type-body-weight) !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  background-image: none !important;
  text-shadow: none !important;
  outline: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* Prevent inherited form widths from making calculator fields uneven. */
.hipotuca-calculadoras .grid > *,
.hipotuca-calculadoras .flex > * {
  min-width: 0;
}

/* Native number steppers reserve horizontal space and leave these fields at 95%. */
.hipotuca-calculadoras input[type="number"]::-webkit-outer-spin-button,
.hipotuca-calculadoras input[type="number"]::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.hipotuca-calculadoras input[type="number"] {
  -moz-appearance: textfield !important;
}

.hipotuca-calculadoras input::placeholder,
.hipotuca-calculadoras textarea::placeholder {
  color: #8b95a5 !important;
  opacity: 1 !important;
}

.hipotuca-calculadoras label {
  display: block !important;
  margin-bottom: 0.375rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.025em !important;
  font-family: Manrope, sans-serif !important;
  font-size: var(--type-small-size) !important;
  line-height: var(--type-small-line-height) !important;
  font-weight: var(--type-small-weight) !important;
  color: hsl(var(--foreground)) !important;
}

.hipotuca-calculadoras input:focus,
.hipotuca-calculadoras select:focus,
.hipotuca-calculadoras textarea:focus {
  border-color: hsl(var(--primary)) !important;
  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2) !important;
}

/* Typography parity for helper texts */
.hipotuca-calculadoras .text-muted-foreground {
  color: hsl(var(--muted-foreground)) !important;
}

.hipotuca-calculadoras .text-foreground {
  color: hsl(var(--foreground)) !important;
}

@media (max-width: 767px) {
  .hipotuca-calculadoras .calculator-tabs-bar {
    position: static !important;
  }
}

@media (max-width: 768px){
  .hipotuca-calculadoras h1{
    font-size: 2rem !important;
  }
}