/* ============================================================
   City Living Cost — Stylesheet
   Managed by CLC Calculator plugin (v1.3)
   Remove this from Elementor → Additional CSS once plugin is active.
   ============================================================ */

/* Fix scroll offset when sticky header covers the form */
html {
  scroll-padding-top: 80px;
}

#costForm {
  scroll-margin-top: 80px;
}

/** Custom CSS for Calculator Form **/
form#costForm {
	background: #F2F4F5;
	width: 100%;
	padding: 30px;
	border-radius: 20px;
}

form#costForm .inner-form {
	width: 100%;
	display: flex;
  flex-wrap: wrap;
}

form#costForm .form-group {
	padding-right: calc(15px / 2);
	padding-left: calc(15px / 2);
	margin-bottom: 10px;
	align-items: center;
	flex-wrap: wrap;
	width: 50%;
}

form#costForm .button-wrapper {
	width: 100%;
	align-items: flex-end;
	padding-right: calc(15px / 2);
	padding-left: calc(15px / 2);
}

form#costForm button {
	border: none;
	font-size: 15px;
	font-weight: 700;
	padding: 12px 20px;
	margin-top: 10px;
	width: 100%;
	align-items: flex-end;
}

form#costForm .lifestyle-options {
	width: 100%;
	padding-right: calc(15px / 2);
	padding-left: calc(15px / 2);
	margin: 5px auto;
}

form#costForm .lifestyle-options .options {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	padding: 15px 0px;
}

form#costForm .lifestyle-options .options .form-group {
	width: 100%;
	align-content: center;
	align-items: center;
}

form#costForm summary {
	padding: 10px 20px;
	border-radius: 20px;
	background: #c8e9f1;
	color: #3c4f76;
	font-weight: 600;
	font-size: initial;
	transition: .3s ease all;
}

form#costForm summary:hover {
	cursor: pointer;
	background: #bedce3;
}

/* Form - Housing Mode Group */
.housing-mode-group {
  width: 100%;
}

.housing-mode-radios {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-bottom: 10px;
}

.mortgage-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.mortgage-field {
  margin-bottom: 0;
  position: relative;
}

.mortgage-field input {
  width: 100%;
  padding: 8px 30px 8px 8px;
  border-radius: 6px;
}

.mortgage-field small {
  color: #555;
}

/* Form - Range and Select inputs */
#householdSize {
  width: 100%;
}

#housingType,
#transportType {
  width: 100%;
  padding: 8px;
  border-radius: 6px;
}

/* Results Section */
#results {
	display: none !important;
	padding: 30px;
	background: #FFF;
	border: 1px solid #3c4f76;
	border-radius: 20px;
	margin-top: 30px;
}

#results.show {
	display: block !important;
}

#results .inner-results {
	display: flex;
	flex-direction: row;
	gap: 20px;
}

#results .results-column-1 {
	flex: 3;
}

#results .results-column-2 {
	flex: 2;
}

#results h3 {
	color: #3C4F76;
}

/* Results - Compare Icon */
.compare-city-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: 8px;
  color: #fff !important;
  background: #a8d828;
  border-radius: 50%;
  text-decoration: none;
  font-size: 12px;
  transition: all 0.3s;
  position: relative;
  cursor: pointer;
  vertical-align: middle;
}

.compare-city-icon:hover {
  background: #3c4f76;
  color: #fff;
}

.compare-city-icon:hover::after {
  content: attr(title);
  position: absolute;
  bottom: -35px;
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 10;
  font-family: inherit;
}

.compare-city-icon:hover::before {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #333;
  z-index: 10;
}

/* Results - Affordability */
.affordability #affPercent {
  font-weight: bold;
  color: #000;
}

.affordability #comfortSpan {
  font-weight: bold;
  color: #000;
}

/* Results - Customize Prompt */
.customize-prompt {
  font-size: 0.9em;
  color: #666;
  margin-top: 5px;
}

.customize-prompt a {
  text-decoration: underline;
}

.customize-prompt a:hover {
  text-decoration: none;
}

/* Results - Breakdown List */
#results ul.breakdown {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

#results ul.breakdown li {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 0;
  border-bottom: 1px solid #e0e0e0;
}

#results ul.breakdown li:last-child {
  border-bottom: none;
}

#results ul.breakdown .breakdown-icon {
  width: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  font-size: 18px;
}

#results ul.breakdown .breakdown-icon i {
  color: #a8d828;
}

#results ul.breakdown .breakdown-text {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#results ul.breakdown .breakdown-text strong {
  color: #333;
  font-weight: 700;
}

#results ul.breakdown .breakdown-text > span {
  color: #333;
  font-weight: 600;
  margin-left: 15px;
  text-align: right;
}

#results ul.breakdown .breakdown-value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
}

#results ul.breakdown .price-line {
  color: #333;
  font-weight: 600;
}

/* Results - Mortgage Note */
.mortgage-note {
  display: none;
  font-size: 0.75em;
  color: #666;
  font-weight: normal;
  margin-top: 2px;
  line-height: 1.3;
}

/* Results - Total Monthly Costs */
.total-monthly-costs {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-top: 2px solid #3c4f76;
  margin-top: 10px;
}

.total-monthly-costs .breakdown-icon.coins-icon {
  width: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.total-monthly-costs .breakdown-icon.coins-icon i {
  color: #FCC017;
}

.total-monthly-costs .total-label {
  flex: 1;
  font-weight: 700;
  color: #333;
}

.total-monthly-costs .total-value {
  font-weight: 600;
  color: #333;
  margin-left: auto;
}

/* Results - Disclaimer */
.results-disclaimer {
  margin-top: 30px;
  padding: 12px;
  background-color: #fff3cd;
  border-radius: 4px;
  border: 1px solid #ffc107;
}

.results-disclaimer p {
  margin: 0;
  font-size: 0.85em;
  color: #856404;
  line-height: 1.5;
}

#results span#householdText {
	font-weight: bold;
}

#affordability,
#comfortLevel {
  transition: color 0.4s ease;
}

#mortgageOptions div {
  position: relative;
}

#mortgageOptions span {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: #555;
  pointer-events: none;
}

#mortgageOptions input {
  padding-right: 40px;
}

#interestRate, #downPayment {
  padding: 8px;
  border-radius: 6px;
}

input#interestRate[disabled],
input#downPayment[disabled] {
  background-color: #e0e0e0;
  cursor: not-allowed;
}

#cityPhoto {
  width: 100%;
  margin-bottom: 20px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  display: block;
}

#cityImage {
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

/* Compare Cities Form */
#compareForm {
  background: #F2F4F5;
  width: 100%;
  padding: 30px;
  border-radius: 20px;
  margin-bottom: 30px;
}

#compareForm .compare-row-1,
#compareForm .compare-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 15px;
}

#compareForm .city-input-group,
#compareForm .income-group {
  display: flex;
  flex-direction: column;
}

#compareForm .city-input-group label,
#compareForm .income-group label {
  font-weight: 600;
  color: #3c4f76;
  margin-bottom: 8px;
  font-size: 14px;
}

#compareForm .city-input-group input,
#compareForm .income-group input {
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 15px;
  transition: border-color 0.3s;
}

#compareForm .city-input-group input:focus,
#compareForm .income-group input:focus {
  outline: none;
  border-color: #3c4f76;
}

#compareForm button {
  border: none;
  font-size: 15px;
  font-weight: 700;
  padding: 12px 30px;
  width: 100%;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

#compareForm button:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Comparison Results */
#comparisonResults {
  display: none;
  padding: 30px;
  background: #FFF;
  border: 1px solid #3c4f76;
  border-radius: 20px;
  margin-top: 30px;
}

#comparisonResults.show {
  display: block;
}

#comparisonResults h3 {
  color: #3C4F76;
  margin-bottom: 25px;
  font-size: 24px;
}

.comparison-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}

/* Dynamically set columns based on city count */
.comparison-grid.cities-2 {
  grid-template-columns: repeat(2, 1fr);
}

.city-card {
  background: #f8f9fa;
  border-radius: 12px;
  padding: 20px;
  border: 2px solid transparent;
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
}

.city-card.winner {
  border-color: #27AE60;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.1);
}

.city-card h4 {
  color: #3c4f76;
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: 700;
}

.city-card .cost-item {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #e0e0e0;
  gap: 5px;
}

.city-card .cost-item:last-of-type {
  border-bottom: none;
}

.city-card .cost-item.total-row {
  border-top: 2px solid #3c4f76;
  border-bottom: none;
  margin-top: 5px;
  padding-top: 12px;
}

.city-card .cost-icon {
  width: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  font-size: 18px;
}

.city-card .cost-icon i {
  color: #a8d828;
}

.city-card .cost-item.total-row .cost-icon i {
  color: #FCC017;
}

.city-card .cost-label {
  color: #333;
  font-size: 14px;
  font-weight: 700;
  flex: 1;
}

.city-card .cost-value {
  color: #333;
  font-weight: 600;
  font-size: 15px;
  margin-left: auto;
}

.city-card .affordability {
  margin-top: 15px;
  padding: 12px;
  background: white;
  border-radius: 8px;
  text-align: center;
}

.city-card .affordability-percent {
  font-size: 24px;
  font-weight: 700;
  display: block;
  margin-bottom: 5px;
}

.city-card .affordability-label {
  font-size: 12px;
  color: #666;
}

.city-card .winner-badge {
  background: #27AE60;
  color: white;
  font-size: 12px;
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 600;
  text-align: center;
  margin-top: 15px;
  order: 998;
}

.city-card .view-details-link {
  order: 999;
  margin-top: 15px;
  display: block;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  padding: 0px;
  color: #a8d828;
  font-weight: 600;
}

.city-card .view-details-link:hover {
  text-decoration: underline;
}

.city-card.placeholder-card {
  background: #f8f9fa;
  border: 2px dashed #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400px;
}

.city-card.placeholder-card:hover {
  border-color: #3c4f76;
  background: #ffffff;
}

.placeholder-content {
  text-align: center;
  padding: 20px;
}

.add-city-btn {
  border: none;
  font-size: 15px;
  font-weight: 700;
  padding: 12px 30px;
  width: 100%;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.add-city-btn:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

/* Mobile Responsive */
@media screen and (max-width: 992px) {
  .comparison-grid {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 767px) {
	form#costForm {
		padding: 15px;
	}

	form#costForm .form-group {
		width: 100%;
	}

	#results .inner-results {
		flex-direction: column;
	}

	#results .results-column-1,
	#results .results-column-2 {
		width: 100%;
		flex: auto;
	}

	form#costForm .lifestyle-options .options {
		width: 100%;
		display: grid;
		grid-template-columns: 1fr;
		gap: 10px;
		padding: 15px 0px;
	}

  #compareForm {
    padding: 15px;
  }

  #compareForm .compare-row-1,
  #compareForm .compare-row-2 {
    grid-template-columns: 1fr;
  }

  #comparisonResults {
    padding: 15px;
  }
}

/** Menu Anchors Spacing Fix **/
.elementor-menu-anchor {
	display: block;
	position: relative;
	top: -100px;
}

@media screen and (max-width: 767px) {
	.elementor-menu-anchor {
		top: -120px;
	}
}

/* Form Acceptance CSS */
.elementor-field-option:has(label[for="form-field-form_acceptance"]) {
    display: flex;
    align-items: flex-start;
    gap: 10px;
		width: 100% !important;
}

.elementor-field-option:has(label[for="form-field-form_acceptance"]) input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 3px;
}

label[for="form-field-form_acceptance"] {
	font-size: 12px !important;
    line-height: 12px !important;
    display: none;
}

.elementor-field-group-form_acceptance_popup .elementor-field-subgroup,
.elementor-field-group-form_acceptance .elementor-field-subgroup {
	display: block;
	margin-bottom: 20px;
}

.elementor-field-group-form_acceptance_popup .elementor-field-subgroup label,
.elementor-field-group-form_acceptance .elementor-field-subgroup label {
	font-size: 12px !important;
	line-height: 12px !important;
	display: inline-block !important;
	font-weight: normal !important;
}