{
  "version": 3,
  "sources": [],
  "sections": [
    {"offset": {"line": 1, "column": 0}, "map": {"version":3,"sources":["turbopack:///[project]/src/styles/CompareQualitySection.css"],"sourcesContent":["/* Compare Quality Section - 1:1 Match Reconstruction */\r\n.compare-quality-section {\r\n  padding: 50px 20px;\r\n  background-color: #000000;\r\n  text-align: center;\r\n  font-family: var(--font-body);\r\n}\r\n\r\n.compare-title {\r\n  color: #ffffff;\r\n  font-size: 42px;\r\n  font-weight: 700;\r\n  max-width: 1400px;\r\n  margin: 0 auto 30px auto;\r\n  line-height: 1.3;\r\n  font-family: var(--font-heading);\r\n  text-align: center;\r\n}\r\n\r\n.compare-title .text-primary,\r\n.compare-title-sub {\r\n  color: #54b248;\r\n}\r\n\r\n.compare-subtitle {\r\n  color: #ffffff;\r\n  max-width: 1000px;\r\n  margin: 0px auto 35px;\r\n  font-size: 18px;\r\n  font-weight: 500;\r\n  line-height: 1.6;\r\n}\r\n\r\n/* Outer Container (Pale Green Card) */\r\n.calculator-card {\r\n  max-width: 1000px;\r\n  /* Reduced from 1400px as requested */\r\n  margin: 0 auto;\r\n  background-color: #eaf6e5;\r\n  border-radius: 40px;\r\n  padding: 30px;\r\n  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);\r\n}\r\n\r\n/* TOP FORM AREA (Black Card) */\r\n.calc-form-card {\r\n  background-color: #0d0d0d;\r\n  border-radius: 25px;\r\n  padding: 30px 40px;\r\n  margin-bottom: 25px;\r\n  /* Increased from 20px */\r\n}\r\n\r\n.calc-header-text {\r\n  font-size: 28px;\r\n  font-weight: 700;\r\n  color: #54b248;\r\n  text-align: left;\r\n  margin-bottom: 15px;\r\n  padding-left: 5px;\r\n}\r\n\r\n.calc-form {\r\n  display: flex;\r\n  gap: 15px;\r\n  align-items: center;\r\n}\r\n\r\n/* Input Styles in Form */\r\n.custom-dropdown-container {\r\n  flex: 1;\r\n  position: relative;\r\n  z-index: 50;\r\n  /* Ensuring it's above other inputs */\r\n}\r\n\r\n.custom-dropdown-trigger {\r\n  background: #ffffff;\r\n  border: 1.5px solid #54b248;\r\n  padding: 12px 20px;\r\n  border-radius: 50px;\r\n  color: #aaaaaa;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  cursor: pointer;\r\n  font-weight: 600;\r\n  font-size: 15px;\r\n  height: 44px;\r\n  /* Reduced to match submit button feel */\r\n  box-sizing: border-box;\r\n}\r\n\r\n.custom-dropdown-trigger>span,\r\n.custom-dropdown-trigger>svg {\r\n  pointer-events: none;\r\n}\r\n\r\n.custom-dropdown-trigger.has-value {\r\n  color: #000000;\r\n}\r\n\r\n.dropdown-chevron {\r\n  color: #54b248;\r\n  transition: transform 0.3s;\r\n}\r\n\r\n.dropdown-chevron.rotate {\r\n  transform: rotate(180deg);\r\n}\r\n\r\n.calc-input-wrapper {\r\n  flex: 1;\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n}\r\n\r\n.input-chevron {\r\n  position: absolute;\r\n  right: 20px;\r\n  color: #54b248;\r\n  pointer-events: none;\r\n}\r\n\r\n.calc-input {\r\n  width: 100%;\r\n  background: #ffffff;\r\n  border: 1.5px solid #54b248;\r\n  color: #000000;\r\n  padding: 0 25px;\r\n  /* Added left padding for better look */\r\n  font-size: 16px;\r\n  font-weight: 600;\r\n  border-radius: 50px;\r\n  outline: none;\r\n  height: 44px;\r\n  /* Reduced to match submit button feel */\r\n  text-align: left;\r\n  /* Aligned left as requested */\r\n  box-sizing: border-box;\r\n}\r\n\r\n.input-chevron {\r\n  position: absolute;\r\n  right: 15px;\r\n  color: #54b248;\r\n  pointer-events: none;\r\n}\r\n\r\n/* Hide number arrows */\r\n.calc-input::-webkit-inner-spin-button,\r\n.calc-input::-webkit-outer-spin-button {\r\n  -webkit-appearance: none;\r\n  appearance: none;\r\n  margin: 0;\r\n}\r\n\r\n.calc-input {\r\n  -moz-appearance: textfield;\r\n  appearance: none;\r\n}\r\n\r\n.calc-input::placeholder {\r\n  color: #aaaaaa;\r\n}\r\n\r\n/* Green Submit Button */\r\n.calc-submit {\r\n  flex: none;\r\n  min-width: 150px;\r\n  background-color: #54b248;\r\n  color: #ffffff;\r\n  border: none;\r\n  padding: 0 30px;\r\n  border-radius: 50px;\r\n  font-weight: 700;\r\n  font-size: 22px;\r\n  cursor: pointer;\r\n  height: 44px;\r\n  /* Set consistent height */\r\n  box-sizing: border-box;\r\n  transition: all 0.2s;\r\n}\r\n\r\n.calc-submit:hover {\r\n  background-color: #46a13b;\r\n  transform: translateY(-1px);\r\n}\r\n\r\n/* COMPARISON CARDS AREA */\r\n.comparison-grid {\r\n  display: flex;\r\n  gap: 20px;\r\n  margin-bottom: 20px;\r\n}\r\n\r\n.comp-box {\r\n  flex: 1;\r\n  background-color: #000000;\r\n  border-radius: 25px;\r\n  padding: 20px;\r\n  position: relative;\r\n  overflow: hidden;\r\n}\r\n\r\n/* CSS Based Wrapping Corner Ribbon */\r\n.comp-box.featured {\r\n  position: relative;\r\n  overflow: hidden;\r\n  /* Crucial for wrapping ribbon */\r\n}\r\n\r\n.css-ribbon {\r\n  position: absolute;\r\n  top: 5px;\r\n  right: -50px;\r\n  width: 160px;\r\n  height: 44px;\r\n  background-color: #54b248;\r\n  transform: rotate(45deg);\r\n  display: flex;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  align-items: center;\r\n  z-index: 100;\r\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\r\n  pointer-events: none;\r\n}\r\n\r\n.css-ribbon span {\r\n  color: #ffffff;\r\n  font-size: 12px;\r\n  font-weight: 700;\r\n  text-transform: uppercase;\r\n  line-height: 1.1;\r\n  letter-spacing: 0.5px;\r\n}\r\n\r\n.comp-box-title {\r\n  font-size: 28px;\r\n  /* Increased from 24px */\r\n  font-weight: 700;\r\n  margin: 15px 0 25px 5px;\r\n  /* Added left margin */\r\n  color: #54b248;\r\n  text-align: left;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: flex-start;\r\n  gap: 12px;\r\n}\r\n\r\n/* Inner Table (White Box) */\r\n.comp-table {\r\n  background-color: #ffffff;\r\n  border-radius: 20px;\r\n  padding: 25px;\r\n}\r\n\r\n.comp-row-header {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  padding-bottom: 20px;\r\n  margin-bottom: 5px;\r\n}\r\n\r\n.roi-matrix-header {\r\n  font-size: 24px;\r\n  font-weight: 700;\r\n  color: #54b248;\r\n}\r\n\r\n.comp-row {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  padding: 14px 0;\r\n}\r\n\r\n.comp-label {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 10px;\r\n  font-size: 20px;\r\n  font-weight: 700;\r\n  color: #000000;\r\n}\r\n\r\n.comp-value {\r\n  font-size: 16px;\r\n  font-weight: 700;\r\n  color: #000000;\r\n  text-align: right;\r\n}\r\n\r\n/* Best Choice Badge (Image based for 100% match) */\r\n.best-choice-badge {\r\n  position: absolute;\r\n  top: 0;\r\n  right: 0;\r\n  width: 130px;\r\n  /* Adjust based on image clarity */\r\n  height: auto;\r\n  z-index: 10;\r\n  user-select: none;\r\n  pointer-events: none;\r\n}\r\n\r\n/* Efficiency Banner (Bottom) */\r\n.efficiency-banner {\r\n  background-color: #54b248;\r\n  color: #ffffff;\r\n  border-radius: 20px;\r\n  padding: 15px;\r\n  font-size: 32px;\r\n  /* Adjusted to look like image */\r\n  font-weight: 700;\r\n  margin-top: 15px;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n}\r\n\r\n/* Dropdown Menu Overrides */\r\n.custom-dropdown-menu {\r\n  background: white;\r\n  border: 1px solid #ddd;\r\n  border-radius: 12px;\r\n  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);\r\n  margin-top: 5px;\r\n  position: absolute;\r\n  top: 100%;\r\n  left: 0;\r\n  width: 100%;\r\n  z-index: 1000;\r\n  overflow: hidden;\r\n  display: flex;\r\n  flex-direction: column;\r\n  /* Smooth Open Animation */\r\n  animation: dropdownFadeIn 0.3s ease-out;\r\n  transform-origin: top;\r\n}\r\n\r\n@keyframes dropdownFadeIn {\r\n  from {\r\n    opacity: 0;\r\n    transform: translateY(-8px) scaleY(0.95);\r\n  }\r\n\r\n  to {\r\n    opacity: 1;\r\n    transform: translateY(0) scaleY(1);\r\n  }\r\n}\r\n\r\n.custom-dropdown-option {\r\n  color: #000;\r\n  padding: 14px 20px;\r\n  font-size: 14px;\r\n  font-weight: 600;\r\n  text-align: left;\r\n  /* Aligned left as requested */\r\n  border-bottom: 1px solid #eee;\r\n  cursor: pointer;\r\n  transition: all 0.2s;\r\n}\r\n\r\n.custom-dropdown-option:last-child {\r\n  border-bottom: none;\r\n}\r\n\r\n.custom-dropdown-option:hover {\r\n  background: #eaf6e5;\r\n  color: #54b248;\r\n}\r\n\r\n/* Responsive Adjustments for All Devices */\r\n@media (max-width: 900px) {\r\n  .calc-form {\r\n    flex-direction: column;\r\n    align-items: stretch;\r\n  }\r\n\r\n  .calc-submit {\r\n    padding: 15px;\r\n    height: auto;\r\n  }\r\n\r\n  .comparison-grid {\r\n    flex-direction: column;\r\n    gap: 15px;\r\n  }\r\n\r\n  .efficiency-banner {\r\n    font-size: 24px;\r\n    padding: 15px;\r\n  }\r\n\r\n  .compare-title {\r\n    margin-bottom: 20px;\r\n  }\r\n\r\n  /* Reduce spacing on tablet */\r\n  .compare-subtitle {\r\n    margin-bottom: 50px;\r\n  }\r\n\r\n  .calculator-card {\r\n    padding: 15px;\r\n    border-radius: 20px;\r\n  }\r\n\r\n  .best-choice-badge {\r\n    width: 90px;\r\n    /* Scale down on tablets */\r\n  }\r\n\r\n  .comp-box-title {\r\n    font-size: 20px;\r\n  }\r\n}\r\n\r\n@media (max-width: 480px) {\r\n  .efficiency-banner {\r\n    font-size: 18px;\r\n    padding: 12px;\r\n  }\r\n\r\n  .best-choice-badge {\r\n    width: 70px;\r\n    /* Scale down even more on phones */\r\n  }\r\n\r\n  .roi-matrix-header,\r\n  .comp-label,\r\n  .comp-value {\r\n    font-size: 14px;\r\n  }\r\n\r\n  .comp-table {\r\n    padding: 15px;\r\n  }\r\n\r\n  .comp-label {\r\n    gap: 8px;\r\n  }\r\n\r\n  .compare-subtitle {\r\n    margin-bottom: 35px;\r\n    font-size: 14px;\r\n    padding: 0 10px;\r\n  }\r\n}"],"names":[],"mappings":"AACA;;;;;;;AAOA;;;;;;;;;;;AAWA;;;;AAKA;;;;;;;;;AAUA;;;;;;;;;AAWA;;;;;;;AAQA;;;;;;;;;AASA;;;;;;AAOA;;;;;;AAOA;;;;;;;;;;;;;;;;AAiBA;;;;AAKA;;;;AAIA;;;;;AAKA;;;;AAIA;;;;;;;AAcA;;;;;;;;;;;;;;;AAkBA;;;;;;;AAQA;;;;;AAAA;;;;;AAOA;;;;;AAKA;;;;AAKA;;;;;;;;;;;;;;;;AAiBA;;;;;AAMA;;;;;;AAMA;;;;;;;;;AAUA;;;;;AAMA;;;;;;;;;;;;;;;;;AAiBA;;;;;;;;;AASA;;;;;;;;;;;;AAeA;;;;;;AAMA;;;;;;;AAOA;;;;;;AAMA;;;;;;;AAOA;;;;;;;;;AASA;;;;;;;AAQA;;;;;;;;;;;;AAaA;;;;;;;;;;;;;AAeA;;;;;;;;;;;;;;;;;;AAmBA;;;;;;;;;;;;AAYA;;;;;;;;;;;AAYA;;;;AAIA;;;;;AAMA;EACE;;;;;EAKA;;;;;EAKA;;;;;EAKA;;;;;EAKA;;;;EAKA;;;;EAIA;;;;;EAKA;;;;EAKA;;;;;AAKF;EACE;;;;;EAKA;;;;EAKA;;;;EAMA;;;;EAIA;;;;EAIA"}}]
}