/* Compact Calculator Override Styles */

.calculator-section {
  padding: 40px 0 !important;
}

/* Hide decorative accent elements - they overlap cards */
.calculator-section .accent-rect {
  display: none !important;
}

.section-heading {
  font-size: 52px !important;  /* Increased for better visibility */
  margin-bottom: 16px !important;  /* Reduced margin */
  font-weight: 700 !important;
}

.section-description {
  font-size: 20px !important;  /* Increased for better readability */
  margin-bottom: 18px !important;  /* Reduced for compactness */
}

.calculator-card {
  padding: 12px !important;  /* Further reduced for compactness */
  max-width: 1000px !important;  /* SMALLER - Reduced from 1200px */
  margin: 0 auto;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;  /* Further reduced for compactness */
  align-items: start !important;
}

.calculator-inputs {
  display: flex;
  flex-direction: column;
  gap: 10px;  /* Further reduced for compactness */
}

.calculator-input-group {
  margin-bottom: 0 !important;
}

.input-label {
  font-size: 10px !important;  /* Further reduced for compactness */
  margin-bottom: 3px !important;  /* Further reduced for compactness */
  font-weight: 600;
  display: inline-block;
}

/* Slider Header - Label and Value on Same Line */
.slider-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 6px !important;  /* Reduced for compactness */
}

.impressions-slider {
  width: 100% !important;
  height: 6px !important;
  border-radius: 20px !important;
  background: #DDE3EB !important;
  position: relative;
}

.impressions-slider::-webkit-slider-thumb {
  width: 20px !important;
  height: 20px !important;
  background: #204E35 !important;
  border: 4px solid #ffffff !important;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2) !important;
}

.impressions-slider::-moz-range-thumb {
  width: 20px !important;
  height: 20px !important;
  background: #204E35 !important;
  border: 4px solid #ffffff !important;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2) !important;
}

.impressions-display {
  font-size: 14px !important;  /* SMALLER - Reduced from 18px */
  font-weight: 600 !important;
  padding: 0 !important;
  min-width: auto !important;
  border: none !important;
  background: transparent !important;
  text-align: right !important;
  color: var(--color-text-primary) !important;
}

.impressions-display:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

.creative-type-buttons {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 5px !important;  /* Further reduced for compactness */
}

.creative-btn {
  font-size: 10px !important;  /* Further reduced for compactness */
  padding: 6px 5px !important;  /* Further reduced for compactness */
}

/* Video Duration Slider - Matches Impressions Slider Design */
.video-duration-group {
  display: none;
  margin-bottom: 0 !important;
}

.video-duration-group.visible {
  display: block;
  margin-bottom: 24px !important;
}

.duration-display,
.size-display {
  font-size: 14px !important;  /* SMALLER - Reduced from 18px */
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
}

.size-display-editable {
  border: none !important;
  background: transparent !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: right !important;
  cursor: text !important;
  width: auto !important;
  min-width: 80px !important;
}

.size-display-editable:focus {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

.size-display-container {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.unit-toggle {
  display: flex;
  gap: 4px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 6px;
  padding: 2px;
}

.unit-btn {
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border: none;
  border-radius: 4px;
  background: transparent;
  color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: none !important;
  animation: none !important;
  outline: none !important;
}

.unit-btn:focus {
  outline: none !important;
  box-shadow: none !important;
}

.unit-btn:hover {
  background: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.7);
}

.unit-btn.active {
  background: #204E35;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.unit-btn.active:hover {
  background: #1a3d2a;
}

.video-duration-slider,
.creative-size-slider {
  width: 100% !important;
  height: 6px !important;
  border-radius: 20px !important;
  background: #DDE3EB !important;
  position: relative;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.video-duration-slider::-webkit-slider-thumb,
.creative-size-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px !important;
  height: 20px !important;
  background: #204E35 !important;
  border: 4px solid #ffffff !important;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2) !important;
  border-radius: 50%;
  cursor: pointer;
}

.video-duration-slider::-moz-range-thumb,
.creative-size-slider::-moz-range-thumb {
  width: 20px !important;
  height: 20px !important;
  background: #204E35 !important;
  border: 4px solid #ffffff !important;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2) !important;
  border-radius: 50%;
  cursor: pointer;
}

.video-duration-slider::-webkit-slider-thumb:hover,
.creative-size-slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 0 8px rgba(32, 78, 53, 0.4) !important;
}

.weight-input {
  font-size: 18px !important;
  padding: 10px 12px !important;
}

.unit-label {
  font-size: 14px !important;
  padding: 0 12px !important;
}

.country-select {
  font-size: 16px !important;
  padding: 10px 12px !important;
}

.calculator-actions {
  margin-top: 14px !important;  /* Reduced for compactness */
  margin-bottom: 12px !important;  /* Reduced for compactness */
  gap: 10px !important;  /* Reduced for compactness */
}

.btn-reset {
  font-size: 11px !important;  /* Reduced for compactness */
  padding: 8px 14px !important;  /* Reduced for compactness */
}

.btn-calculate {
  font-size: 11px !important;  /* Reduced for compactness */
  padding: 8px 16px !important;  /* Reduced for compactness */
}

.calculator-results {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 8px !important;  /* Reduced for compactness */
  margin-top: 14px !important;  /* Reduced for compactness */
  opacity: 1 !important;
  align-items: stretch !important;
}

/* Removed animation - not needed */

/* Minimal Card Styling - Clean, subtle design matching website theme */
.result-card {
  position: relative !important;
  background: rgba(255, 255, 255, 0.85) !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  overflow: visible !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px 16px !important;
  align-items: start !important;
  min-height: 70px !important;
}

/* Remove top accent bar for minimal design */
.result-card::before {
  display: none !important;
}

/* Green theme - Subtle, minimal */
.wizora-result {
  background: rgba(232, 245, 233, 0.4) !important;  /* MINIMAL: Light green with transparency */
  border-color: rgba(76, 175, 80, 0.2) !important;  /* SUBTLE: Transparent green border */
}

/* Yellow theme - Subtle, minimal */
.saved-result {
  background: rgba(255, 249, 230, 0.4) !important;  /* MINIMAL: Light yellow with transparency */
  border-color: rgba(255, 193, 7, 0.2) !important;  /* SUBTLE: Transparent yellow border */
}

/* Red theme - Subtle, minimal */
.traditional-result {
  background: rgba(255, 235, 238, 0.4) !important;  /* MINIMAL: Light red with transparency */
  border-color: rgba(244, 67, 54, 0.2) !important;  /* SUBTLE: Transparent red border */
}

.result-card h4 {
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, 0.5) !important;
  margin-bottom: 2px !important;
  text-align: left !important;
  grid-column: 1 / 2 !important;
  grid-row: 1 / 2 !important;
  line-height: 1.3 !important;
}

.result-value {
  font-size: 24px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  color: #1a1a1a !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  grid-column: 1 / 2 !important;
  grid-row: 2 / 3 !important;
}

.result-value.highlight {
  font-size: 26px !important;
  color: #004D4D !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

/* Note text - positioned UNDER the numbers */
.result-note {
  font-size: 9px !important;
  line-height: 1.4 !important;
  color: rgba(0, 0, 0, 0.6) !important;
  margin: 0 !important;
  text-align: left !important;
  grid-column: 1 / 2 !important;
  grid-row: 3 / 4 !important;
  padding-top: 4px !important;
}

.result-note a {
  color: var(--color-v2-sky-blue) !important;
  text-decoration: underline !important;
}

.result-note a:hover {
  color: var(--color-v6-teal) !important;
}

/* Comparison text - PROMINENT, positioned on the right */
.result-comparison {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #004D4D !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: none !important;
  font-style: italic !important;
  line-height: 1.3 !important;
  text-align: left !important;
  grid-column: 2 / 3 !important;
  grid-row: 1 / 4 !important;
  display: flex !important;
  align-items: center !important;
}

/* Saved emissions comparison - same size as traditional */
.saved-result .result-comparison {
  font-size: 20px !important;
  color: #004D4D !important;
}

/* Traditional emissions comparison - same size, red color */
.traditional-result .result-comparison {
  font-size: 20px !important;
  color: #c62828 !important;
}

.calculator-footnote {
  font-size: 9px !important;  /* Reduced for compactness */
  margin-top: 14px !important;  /* Reduced for compactness */
  grid-column: 1 / -1 !important;
}

/* Tablet */
@media (max-width: 1023px) {
  .calculator-card {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 24px !important;
  }
}

/* Mobile Adjustments */
@media (max-width: 767px) {
  .calculator-section {
    padding: 20px 0 !important;  /* Reduced from 30px */
  }

  .section-heading {
    font-size: 40px !important;  /* Increased for mobile visibility */
  }

  .calculator-card {
    padding: 16px !important;  /* Reduced from 20px */
    grid-template-columns: 1fr !important;
    gap: 16px !important;  /* Reduced from 24px */
  }

  .creative-type-buttons {
    grid-template-columns: 1fr !important; /* Stack vertically on mobile */
  }

  .creative-btn {
    padding: 12px 16px !important; /* Larger touch targets */
  }

  .duration-display,
  .size-display {
    font-size: 16px !important;
  }

  .size-display-container {
    flex-wrap: wrap !important;
  }

  .unit-toggle {
    order: -1; /* Move toggle above display on mobile */
    margin-bottom: 4px;
  }

  .unit-btn {
    font-size: 10px !important;
    padding: 3px 8px !important;
  }

  .impressions-display {
    font-size: 18px !important;
  }

  .result-value {
    font-size: 24px !important;
  }

  .result-value.highlight {
    font-size: 28px !important;
  }

  .calculator-results {
    grid-template-columns: 1fr !important;  /* Keep single column on mobile */
    gap: 10px !important;
  }

  /* On mobile, stack card content vertically */
  .result-card {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 12px !important;
    min-height: auto !important;
  }

  .result-card h4,
  .result-value,
  .result-note,
  .result-comparison {
    grid-column: 1 / 2 !important;
    grid-row: auto !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .result-note {
    margin-top: 4px !important;
    padding-top: 0 !important;
  }

  .result-comparison {
    margin-top: 8px !important;
    font-size: 18px !important;
  }

  .saved-result .result-comparison,
  .traditional-result .result-comparison {
    font-size: 18px !important;
  }
}