/**
 * Frontend styles for the Mortgage Calculator block
 * Matching the original React component design
 */
/* Root variables matching the original design */
.wp-block-create-block-mortgage-calculator-block {
  --mortgage-calc-primary: #363430;
  --mortgage-calc-secondary: #bfb088;
  --mortgage-calc-background: #f2efe7;
  --mortgage-calc-foreground: #363430;
  --mortgage-calc-muted: #e5dfcf;
  --mortgage-calc-muted-foreground: #595959;
  --mortgage-calc-border: #737373;
  --mortgage-calc-input: transparent;
  --mortgage-calc-input-background: #ffffff;
  --mortgage-calc-destructive: #ff6b6b;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Reset and base styles */
  /* Main widget container */
  /* Flex container for cards */
  /* Card base styles */
  /* Results card - dark theme */
  /* Input card - light theme */
  /* Card header */
  /* Card title */
  /* Card content */
  /* Results content spacing */
  /* Monthly payment highlight */
  /* Grid layout for details */
  /* Progress bar section */
  /* Input section styles */
  /* Icon styles */
  /* Loading state */
  /* Responsive adjustments */
}
.wp-block-create-block-mortgage-calculator-block * {
  box-sizing: border-box;
}
.wp-block-create-block-mortgage-calculator-block .mortgage-calculator-widget {
  width: 100%;
  max-width: 32rem; /* max-w-2xl */
  margin: 0 auto;
  padding: 1.5rem; /* p-6 */
}
.wp-block-create-block-mortgage-calculator-block .mortgage-calculator-widget > div {
  display: flex;
  flex-direction: column;
  gap: 1.5rem; /* gap-6 */
}
.wp-block-create-block-mortgage-calculator-block .mortgage-calculator-card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  border-radius: 5px;
  border: 1px solid transparent;
}
.wp-block-create-block-mortgage-calculator-block .results-card {
  background-color: #363430;
  color: white;
  border: none;
}
.wp-block-create-block-mortgage-calculator-block .inputs-card {
  background-color: white;
  border-color: rgba(115, 115, 115, 0.2);
}
.wp-block-create-block-mortgage-calculator-block .card-header {
  display: grid;
  grid-template-rows: auto auto;
  align-items: start;
  gap: 0.375rem;
  padding: 1.5rem 1.5rem 0 1.5rem;
  padding-bottom: 1.25rem; /* pb-[20px] */
}
.wp-block-create-block-mortgage-calculator-block .card-title {
  line-height: 1;
  color: white;
  font-size: 1.125rem; /* text-[18px] */
  font-weight: 500;
  line-height: 1.42;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.wp-block-create-block-mortgage-calculator-block .inputs-card .card-title {
  color: #363430;
}
.wp-block-create-block-mortgage-calculator-block .card-content {
  padding: 0 1.5rem 1.5rem 1.5rem;
}
.wp-block-create-block-mortgage-calculator-block .results-content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem; /* space-y-[20px] */
}
.wp-block-create-block-mortgage-calculator-block .monthly-payment-highlight {
  padding: 1rem;
  background-color: #bfb088;
  border-radius: 5px;
}
.wp-block-create-block-mortgage-calculator-block .monthly-payment-highlight .label {
  font-size: 0.75rem; /* text-[12px] */
  color: #363430;
  margin-bottom: 0.25rem;
  font-weight: 500;
}
.wp-block-create-block-mortgage-calculator-block .monthly-payment-highlight .amount {
  font-size: 1.75rem; /* text-[28px] */
  font-weight: 600;
  color: #363430;
  line-height: 1.2;
  margin: 0;
}
.wp-block-create-block-mortgage-calculator-block .details-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
.wp-block-create-block-mortgage-calculator-block .detail-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.wp-block-create-block-mortgage-calculator-block .detail-label {
  font-size: 0.75rem; /* text-[12px] */
  color: #e5dfcf;
}
.wp-block-create-block-mortgage-calculator-block .detail-value {
  font-weight: 500;
  color: white;
  font-size: 0.875rem; /* text-[14px] */
  margin: 0;
}
.wp-block-create-block-mortgage-calculator-block .detail-value.destructive {
  color: #ff6b6b;
}
.wp-block-create-block-mortgage-calculator-block .progress-section {
  padding-top: 0.75rem;
  border-top: 1px solid #595959;
}
.wp-block-create-block-mortgage-calculator-block .progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #e5dfcf;
  margin-bottom: 0.5rem;
}
.wp-block-create-block-mortgage-calculator-block .progress-bar-container {
  width: 100%;
  background-color: #595959;
  border-radius: 9999px;
  height: 0.625rem; /* h-2.5 */
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.wp-block-create-block-mortgage-calculator-block .progress-bar {
  height: 100%;
  background-color: #bfb088;
  border-radius: 9999px;
  transition: all 0.5s ease;
}
.wp-block-create-block-mortgage-calculator-block .progress-percentages {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: #e5dfcf;
}
.wp-block-create-block-mortgage-calculator-block .inputs-content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem; /* space-y-[20px] */
}
.wp-block-create-block-mortgage-calculator-block .input-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.wp-block-create-block-mortgage-calculator-block .input-label {
  color: #363430;
  font-size: 0.875rem; /* text-[14px] */
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.wp-block-create-block-mortgage-calculator-block .input-field {
  display: flex;
  height: 2.5rem;
  width: 100%;
  border-radius: 5px;
  border: 1px solid rgba(115, 115, 115, 0.3);
  background-color: white;
  padding: 0.625rem 0.9375rem; /* px-[15px] py-2.5 */
  font-size: 0.875rem; /* text-[14px] */
  color: #363430;
  transition: all 0.15s ease;
}
.wp-block-create-block-mortgage-calculator-block .input-field:focus {
  outline: none;
  border-color: #bfb088;
  box-shadow: 0 0 0 2px rgba(191, 176, 136, 0.2);
}
.wp-block-create-block-mortgage-calculator-block .input-helper {
  font-size: 0.75rem; /* text-[12px] */
  color: #595959;
  line-height: 1.42;
}
.wp-block-create-block-mortgage-calculator-block .icon {
  width: 1rem;
  height: 1rem;
  color: #bfb088;
}
.wp-block-create-block-mortgage-calculator-block .icon-lg {
  width: 1.25rem;
  height: 1.25rem;
}
.wp-block-create-block-mortgage-calculator-block .calculator-loading {
  text-align: center;
  padding: 2.5rem;
  color: #666;
}
@media (max-width: 768px) {
  .wp-block-create-block-mortgage-calculator-block .mortgage-calculator-widget {
    padding: 1rem;
  }
  .wp-block-create-block-mortgage-calculator-block .details-grid {
    gap: 0.5rem;
  }
  .wp-block-create-block-mortgage-calculator-block .monthly-payment-highlight .amount {
    font-size: 1.5rem;
  }
}

/*# sourceMappingURL=style-index.css.map */