/* ==========================================================================
   Calculator & AI Report styles
   Styles both the theme's tool page layout AND the plugin's shortcode
   output ([uai_paddy_calculator]), which uses .uai-box / .uai-grid /
   .uai-btn / .uai-card / .uai-result / .uai-report class names.
   We do not touch the plugin's JS/PHP logic — presentation only.
   ========================================================================== */

.uai-tool-layout {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}
@media (min-width: 960px) {
  .uai-tool-layout { grid-template-columns: 1.3fr 0.7fr; align-items: start; }
}

/* Plugin shortcode container */
.uai-box {
  background: var(--uai-white);
  border: 1px solid var(--uai-border);
  border-radius: var(--uai-radius);
  box-shadow: var(--uai-shadow);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.uai-box h2 { color: var(--uai-green-dark); margin-bottom: 0.4rem; }

/* Plugin's inline .uai-grid used for calculator input fields */
.uai-box .uai-grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.uai-box .uai-grid label {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
  font-weight: 600;
  font-size: 0.92rem;
}
.uai-box .uai-grid input[type="number"] {
  min-height: 44px;
  padding: 0.7em 0.9em;
  border: 1px solid var(--uai-border);
  border-radius: var(--uai-radius-sm);
  font-size: 1rem;
  font-weight: 400;
  width: 100%;
}
.uai-box .uai-grid input[type="number"]:focus {
  border-color: var(--uai-green);
}

/* Plugin's calculate/generate buttons (.uai-btn) */
.uai-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  background: var(--uai-green);
  color: #fff;
  border: none;
  border-radius: var(--uai-radius-sm);
  padding: 0.85em 1.6em;
  font-size: 1rem;
  font-weight: 700;
  min-height: 48px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.uai-btn:hover { background: var(--uai-green-dark); }
.uai-btn:focus-visible { outline: 3px solid var(--uai-green-dark); outline-offset: 2px; }

/* Plugin result / AI report containers (#uai-result, #uai-ai use .uai-card) */
.uai-box .uai-card {
  margin-top: 1.25rem;
  background: var(--uai-cream);
  border-color: var(--uai-border);
}

/* AI report content — professional report look, not a chat bubble */
.uai-report {
  background: var(--uai-white);
  border: 1px solid var(--uai-border);
  border-radius: var(--uai-radius);
  padding: 1.5rem;
  margin-top: 0.5rem;
}
.uai-report h2, .uai-report h3 {
  color: var(--uai-green-dark);
  border-bottom: 1px solid var(--uai-border);
  padding-bottom: 0.4rem;
  margin-top: 1.5rem;
}
.uai-report h2:first-child, .uai-report h3:first-child { margin-top: 0; }
.uai-report ul { padding-left: 1.25rem; }

.uai-muted { color: var(--uai-muted); font-size: 0.88rem; }

/* Stat blocks for AI report summary (theme-side wrapper, used around plugin output where applicable) */
.uai-report-stats {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  margin-bottom: 1.5rem;
}

/* Related tools / FAQ / methodology sections on the tool detail page */
.uai-tool-section { margin-top: 2.5rem; }
.uai-tool-section h2 { margin-bottom: 1rem; }
.uai-faq-item {
  border-bottom: 1px solid var(--uai-border);
  padding: 1rem 0;
}
.uai-faq-item h3 { margin-bottom: 0.4rem; font-size: 1.02rem; }
.uai-faq-item p { color: var(--uai-muted); margin: 0; }

/* Sidebar within tool layout: related tools + disclaimer */
.uai-tool-sidebar .uai-card { margin-bottom: 1rem; }

/* Mobile: keep calculator inputs comfortable and full width */
@media (max-width: 600px) {
  .uai-box .uai-grid { grid-template-columns: 1fr; }
  .uai-btn { width: 100%; }
}