/* ============================================================
   EvvyTools — Tree Watering Calculator
   /assets/css/tools/tree-watering-calculator.css
   ============================================================ */

.evvy-twc-smalltext {
  font-size: 1rem !important;
  line-height: 1.35;
}
@media (min-width: 576px) {
  .evvy-twc-smalltext {
    font-size: 1.125rem !important;
  }
}

/* ============ Rain banner ============ */
.evvy-twc-rain-banner {
  margin-top: 1rem;
  padding: 0.875rem 1rem;
  background: color-mix(in srgb, #0ea5e9 14%, var(--cluster-surface, #EEF3F8));
  border: 1px solid color-mix(in srgb, #0ea5e9 45%, transparent);
  border-left: 3px solid #0ea5e9;
  border-radius: var(--evvy-radius-lg, 12px);
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.9375rem;
  color: #0c4a6e;
}
[data-bs-theme="dark"] .evvy-twc-rain-banner {
  background: color-mix(in srgb, #0ea5e9 24%, #1a1a1a);
  color: #bae6fd;
}
.evvy-twc-rain-banner i {
  font-size: 1.25rem;
  color: #0ea5e9;
}

/* ============ Water meter ============ */
.evvy-twc-meter {
  margin-top: 1.25rem;
  padding: 1rem 1.125rem;
  border-radius: var(--evvy-radius-lg, 12px);
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--evvy-border-color, #DEE2E6);
}
[data-bs-theme="dark"] .evvy-twc-meter {
  background: var(--evvy-gray-100, #1E1E1E);
}

.evvy-twc-meter-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--evvy-text-secondary, #6C757D);
  margin-bottom: 0.5rem;
}
.evvy-twc-meter-header span:last-child {
  color: var(--cluster-dark, #1D3354);
  font-size: 0.9375rem;
  letter-spacing: 0;
  text-transform: none;
}
[data-bs-theme="dark"] .evvy-twc-meter-header span:last-child {
  color: color-mix(in srgb, var(--cluster-dark, #1D3354) 50%, white);
}

.evvy-twc-meter-bar {
  height: 14px;
  background: var(--evvy-gray-50, #F8F9FA);
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid var(--evvy-border-color, #DEE2E6);
}
[data-bs-theme="dark"] .evvy-twc-meter-bar {
  background: color-mix(in srgb, #000 30%, var(--evvy-gray-100, #1E1E1E));
  border-color: var(--evvy-border-color, #3A3A3A);
}
.evvy-twc-meter-fill {
  height: 100%;
  background: linear-gradient(90deg, #60a5fa 0%, #0ea5e9 50%, #0369a1 100%);
  border-radius: 6px;
  width: 0%;
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.evvy-twc-meter-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  color: var(--evvy-text-secondary, #6C757D);
}

/* ============ Advisory / guidance box ============ */
.evvy-twc-advisory {
  margin-top: 1rem;
  padding: 1rem 1.125rem;
  background: var(--cluster-surface, #EEF3F8);
  border: 1px solid color-mix(in srgb, var(--cluster-dark, #1D3354) 15%, transparent);
  border-left: 3px solid var(--cluster-dark, #1D3354);
  border-radius: var(--evvy-radius-lg, 12px);
  display: flex;
  gap: 0.875rem;
  align-items: flex-start;
  line-height: 1.55;
}
[data-bs-theme="dark"] .evvy-twc-advisory {
  background: color-mix(in srgb, var(--cluster-dark-bg, #1D3354) 35%, #1a1a1a);
  color: var(--evvy-text-primary, #EAEAEA);
}
.evvy-twc-advisory-icon {
  flex-shrink: 0;
  color: var(--cluster-dark, #1D3354);
  font-size: 1.25rem;
  line-height: 1.4;
}
[data-bs-theme="dark"] .evvy-twc-advisory-icon {
  color: color-mix(in srgb, var(--cluster-dark, #1D3354) 50%, white);
}
.evvy-twc-advisory-text {
  flex: 1;
  font-size: 0.9375rem;
  color: inherit;
}

/* ============ Premium: 12-month year plan ============ */
.evvy-twc-pro {
  margin-top: 1.5rem;
  padding: 1.25rem;
  border-radius: var(--evvy-radius-lg, 12px);
  background: var(--bs-body-bg, #fff);
  border: 1px solid var(--evvy-border-color, #DEE2E6);
}
[data-bs-theme="dark"] .evvy-twc-pro {
  background: var(--evvy-gray-100, #1E1E1E);
}

.evvy-twc-pro-header {
  margin-bottom: 1rem;
}
.evvy-twc-pro-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--evvy-subscriber-color, #D4AF37);
  margin-bottom: 0.25rem;
}
.evvy-twc-pro-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--evvy-text-primary, #1a1a2e);
}
[data-bs-theme="dark"] .evvy-twc-pro-title {
  color: var(--evvy-text-primary, #EAEAEA);
}

.evvy-twc-year {
  display: grid;
  gap: 0.4rem;
}
.evvy-twc-year-row {
  display: grid;
  grid-template-columns: 2.25rem 1fr 3.5rem;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.8125rem;
}
.evvy-twc-year-month {
  font-weight: 700;
  color: var(--evvy-text-secondary, #6C757D);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.75rem;
}
.evvy-twc-year-bar {
  height: 10px;
  background: var(--evvy-gray-50, #F8F9FA);
  border-radius: 5px;
  border: 1px solid var(--evvy-border-color, #DEE2E6);
  overflow: hidden;
  position: relative;
}
[data-bs-theme="dark"] .evvy-twc-year-bar {
  background: color-mix(in srgb, #000 30%, var(--evvy-gray-100, #1E1E1E));
  border-color: var(--evvy-border-color, #3A3A3A);
}
.evvy-twc-year-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  background: linear-gradient(90deg, #60a5fa 0%, #0ea5e9 100%);
  border-radius: 4px;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.evvy-twc-year-val {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--evvy-text-primary, #1a1a2e);
  font-weight: 600;
}
[data-bs-theme="dark"] .evvy-twc-year-val {
  color: var(--evvy-text-primary, #EAEAEA);
}

.evvy-twc-annual {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--evvy-border-color, #DEE2E6);
}
[data-bs-theme="dark"] .evvy-twc-annual {
  border-top-color: var(--evvy-border-color, #3A3A3A);
}
.evvy-twc-annual-row {
  display: flex;
  justify-content: space-between;
  padding: 0.375rem 0;
  font-size: 0.9375rem;
}
.evvy-twc-annual-row:last-child {
  font-weight: 700;
  color: var(--cluster-dark, #1D3354);
}
[data-bs-theme="dark"] .evvy-twc-annual-row:last-child {
  color: color-mix(in srgb, var(--cluster-dark, #1D3354) 50%, white);
}

/* ============ Mobile ============ */
@media (max-width: 575.98px) {
  .evvy-results-row {
    grid-template-columns: 1fr !important;
  }
  .evvy-twc-advisory {
    padding: 0.875rem;
  }
  .evvy-twc-year-row {
    grid-template-columns: 2rem 1fr 3rem;
    font-size: 0.75rem;
  }
}