:root {
  --primary-color: #1f5f88;
  --secondary-color: #2f86bf;
  --accent-color: #c24b5a;
  --light-color: #f7f8fa;
  --dark-color: #232933;
  --success-color: #23a05f;
  --error-color: #dc4a57;
  --warning-color: #f3bf43;
  --info-color: #4f6fca;
}

* {
  font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif;
}

body {
  background-color: #fdfefe;
  color: var(--dark-color);
}

/* Remove top header so pages start at timeline */
header {
  display: none !important;
}

.calculator-page {
  /* background-color: #ececed !important; */
}
.question-section,
.capital-input-section,
.result-section,
.area-features-container,
.activities-toggle-section,
.benefits-container,
.step1-input-grid {
  border-radius: 10px;
  border-left: 4px solid rgba(2, 29, 60, 0.25);
  background: #f8f9fa;
  padding: 20px;
  margin-top: 20px;
  padding: 25px;
  /* background: linear-gradient(135deg, #f8f9fa, #e8f4fc); */
  background-color: #fff;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.activities-toggle-section {
  padding: 14px !important;
  margin-top: 12px !important;
}

.calculator-container {
  background-color: #ffffff !important;
  border: 1px solid #e3e4e8;
  box-shadow: 0 4px 18px rgba(86, 104, 128, 0.14) !important;
  border-radius: 18px !important;
}

.timeline-container {
  background-color: #f4f4f6 !important;
}

.timeline-step .step-circle {
  border: 2px solid #bcc1c9;
  background-color: #e8eaee;
  color: #7f8794;
}

.timeline-step.active .step-circle,
.timeline-step.completed .step-circle {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: #fff !important;
}

.timeline-step.active .step-label,
.timeline-step.completed .step-label {
  color: var(--accent-color) !important;
}

/* Normalize timeline connectors across all calculator steps */
.timeline-step:not(:last-child):after {
  content: none !important;
}

.timeline-step + .timeline-step::before {
  content: "" !important;
  position: absolute !important;
  top: 25px !important;
  inset-inline-end: 100% !important;
  width: 30px !important;
  height: 2px !important;
  background-color: #c6c9cf !important;
}

.timeline,
.timeline-wrapper {
  overflow: hidden !important;
}

.timeline-step:first-child::before {
  content: none !important;
}

@media (max-width: 768px) {
  .timeline-step + .timeline-step::before {
    display: none !important;
  }
}

header {
  background: linear-gradient(135deg, #1f232b, #3a404b) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.feature-title,
.benefit-title,
.special-benefit-title,
.benefits-title,
.fixed-activities-title,
.area-features-title,
.elegant-incentives-title,
.notice-header h3,
.section-title h3 {
  color: var(--dark-color) !important;
}

/* Top page titles only (main title in each step) */
.calculator-container > h2:first-of-type,
.calculator-container > .incentives-hero h2 {
  position: relative !important;
  text-align: start !important;
  font-size: clamp(26px, 2.7vw, 34px) !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
  color: #222933 !important;
  margin-bottom: 18px !important;
  padding-bottom: 12px !important;
}

.calculator-container > h2:first-of-type::after,
.calculator-container > .incentives-hero h2::after {
  content: "" !important;
  position: absolute !important;
  inset-inline-start: 0 !important;
  bottom: 0 !important;
  width: 110px !important;
  height: 4px !important;
  border-radius: 999px !important;
  background: var(--accent-color) !important;
}

.incentives-hero {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 0 16px !important;
  text-align: start !important;
  border-radius: 0 !important;
}

.incentives-hero p {
  color: #6b7380 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  margin-top: 8px !important;
}

.btn,
#continue-to-company-btn,
#skip-to-company-btn,
#go-to-incentives-btn {
  background: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: #fff !important;
}

.btn:hover,
#continue-to-company-btn:hover,
#skip-to-company-btn:hover,
#go-to-incentives-btn:hover {
  background: #a6404c !important;
}

.home-btn,
.view-location-btn,
.activities-toggle-btn,
.print-btn,
.add-btn {
  background: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: #fff !important;
}

.home-btn:hover,
.view-location-btn:hover,
.activities-toggle-btn:hover,
.print-btn:hover,
.add-btn:hover {
  background: #184a69 !important;
}

.back-btn,
.remove-btn {
  background: #eef0f3 !important;
  border: 1px solid #cfd5dd !important;
  color: #727b89 !important;
}

.back-btn:hover,
.remove-btn:hover {
  background: #e2e6eb !important;
}

.footer-actions {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
  gap: 12px 16px !important;
  align-items: center !important;
  margin-top: 30px !important;
}

.footer-actions .home-btn {
  justify-self: start !important;
  margin: 0 !important;
}

.footer-actions .back-btn {
  justify-self: end !important;
  margin: 0 !important;
}

.footer-actions .footer-next,
.footer-actions .print-btn {
  grid-column: 1 / -1 !important;
  justify-self: center !important;
  min-width: 300px !important;
  margin: 0 !important;
}

@media (max-width: 768px) {
  .footer-actions {
    grid-template-columns: 1fr !important;
  }

  .footer-actions .home-btn,
  .footer-actions .back-btn,
  .footer-actions .footer-next,
  .footer-actions .print-btn {
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}

.warning-box,
.exclusion-notice,
.special-projects-section,
.incentives-limit-section,
.elegant-incentives-container,
.special-benefits-container,
.fixed-activities-section,
.least-developed-category,
.requirements-box,
.notice-content,
.strategic-investment-form,
.selected-count {
  background: #f3f3f5 !important;
  border-color: #d9dde3 !important;
  box-shadow: none !important;
}

.incentive-feature-card,
.map-node,
.feature-card,
.special-benefit-item,
.special-project-option,
.tree-node,
.benefit-card,
.incentives-table,
.cell-box,
.cost-card,
.card,
.company-type-card,
.strategic-benefit-card,
.question-section,

.flow-section {
  background: #ffffff !important;
  border-color: #d9dde3 !important;
  box-shadow: 0 2px 10px rgba(86, 104, 128, 0.16) !important;
  border-radius: 12px !important;
}

.special-benefits-container,
.fixed-activities-section,
.least-developed-category {
  background: #f3f3f5 !important;
}

.feature-card,
.special-benefit-item,
.incentive-feature-card,
.map-node,
.benefit-card {
  margin-top: 10px !important;
  margin-bottom: 10px !important;
}

.feature-card {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.feature-icon {
  margin: 0 !important;
  margin-inline-end: 14px !important;
  flex-shrink: 0 !important;
}

.feature-content {
  flex: 1 !important;
}

.result-section {
  padding: 16px !important;
  margin: 18px 0!important;
}

.calculator-container .form-group {
  margin-bottom: 16px !important;
}

.calculator-container .form-group label {
  margin-bottom: 8px !important;
  color: #334055 !important;
  font-weight: 700 !important;
  font-size: 16px !important;
}

.calculator-container .form-group select,
.calculator-container .form-group input,
.calculator-container .form-group textarea {
  height: 48px !important;
  border: 1px solid #cfd5df !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  color: #253044 !important;
  box-shadow: none !important;
}

.calculator-container .form-group textarea {
  min-height: 110px !important;
  height: auto !important;
}

.calculator-container .form-group select:focus,
.calculator-container .form-group input:focus,
.calculator-container .form-group textarea:focus {
  border-color: #9bb8d6 !important;
  box-shadow: 0 0 0 3px rgba(47, 134, 191, 0.12) !important;
  outline: none !important;
}

/* Activities with fixed benefits: tighten spacing */
.fixed-activities-section {
  padding: 14px !important;
  margin-top: 12px !important;
}

.fixed-activities-section .benefits-subtitle,
.fixed-activities-section p {
  margin-bottom: 10px !important;
}

.fixed-activities-section .benefits-map {
  margin-top: 10px !important;
  gap: 10px !important;
}

.fixed-activities-section .map-node {
  padding: 12px !important;
}

.view-location-btn,
.home-btn,
.back-btn,
.btn {
  box-shadow: none !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
}

.btn,
.home-btn,
.back-btn,
.view-location-btn,
.activities-toggle-btn,
.print-btn,
.add-btn {
  padding-top: 11px !important;
  padding-bottom: 11px !important;
}

/* Improve CTA button typography without changing layout/colors */
#go-to-incentives-btn,
.home-btn,
.view-location-btn {
  font-weight: 700 !important;
  font-size: 15.5px !important;
  letter-spacing: 0.1px !important;
  line-height: 1.25 !important;
}

html[lang="ar"] #go-to-incentives-btn,
html[lang="ar"] .home-btn,
html[lang="ar"] .view-location-btn {
  font-family: "Tajawal", "Segoe UI", Tahoma, Arial, sans-serif !important;
}

html[lang="en"] #go-to-incentives-btn,
html[lang="en"] .home-btn,
html[lang="en"] .view-location-btn {
  font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
  font-weight: 600 !important;
}

.incentives-table th {
  background: #eceff3 !important;
  color: #3f4957 !important;
}

.incentives-table tr:nth-child(even) {
  background: #fafbfc !important;
}

.incentives-table tr:hover {
  background: #f3f6fb !important;
}

.incentive-badge,
.duration-badge,
.bonus-badge,
.fixed-activity-badge,
.special-badge,
.benefit-duration,
.limit-badge {
  background: #edf3ff !important;
  color: #4f6fca !important;
  border: 1px solid #c9d8ff !important;
  box-shadow: none !important;
}

.special-project-option.selected,
.map-node.is-highlight,
.included-activity {
  border-color: var(--success-color) !important;
}

.excluded-activity {
  border-color: var(--error-color) !important;
}

/* Developmental Areas: included/excluded activities spacing + icon alignment */

.activities-toggle-btn {
  margin-bottom: 8px !important;
  padding: 11px 14px !important;
  border-radius: 10px !important;
}

.activities-content {
  margin-top: 10px !important;
  padding: 12px !important;
  border-radius: 10px !important;
}

.activities-grid {
  gap: 12px !important;
}

.included-activities,
.excluded-activities {
  padding: 12px !important;
  border-radius: 10px !important;
}

.activities-section-title {
  margin-bottom: 10px !important;
  gap: 8px !important;
  line-height: 1.35 !important;
}

.included-activity,
.excluded-activity {
  padding: 10px 12px !important;
  margin: 6px 0 !important;
  border-radius: 8px !important;
}

.activity-status {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
}

.status-icon {
  margin: 0 !important;
  margin-inline-end: 2px !important;
  font-size: 14px !important;
  width: 16px !important;
  text-align: center !important;
  flex-shrink: 0 !important;
}

.activity-status span {
  line-height: 1.4 !important;
}

.flow-section-title,
.section-title {
  color: #2e3745 !important;
}

/* Step 2 incentives result blocks: keep same structure, softer visual tone */
.incentive-selection-hint {
  background: #eef4ef !important;
  border: 1px solid #d5e3d8 !important;
  box-shadow: none !important;
}

.incentive-summary-box {
  background: #edf3f8 !important;
  border: 1px solid #d6e0ea !important;
  box-shadow: none !important;
}

.incentive-summary-box h4 {
  color: #2f5f7f !important;
}

/* Step 2 layout balance */
#additional-incentives-page .flow-section {
  margin-top: 20px !important;
  padding-top: 16px !important;
  border-top: 1px solid #e7ebf0 !important;
}

#additional-incentives-page .flow-section-title {
  margin-bottom: 12px !important;
  font-size: 1.1rem !important;
}

#additional-incentives-page .warning-box {
  padding: 18px !important;
  margin: 14px 0 !important;
  border-width: 1px !important;
}

#additional-incentives-page .warning-box p {
  margin-bottom: 8px !important;
  line-height: 1.45 !important;
  font-size: 1.02rem !important;
}

#additional-incentives-page .incentive-grid {
  gap: 18px !important;
  margin: 20px 0 !important;
}

#additional-incentives-page .incentive-feature-card {
  padding: 22px 20px !important;
  min-height: 0 !important;
}

#additional-incentives-page .feature-title {
  font-size: 1.1rem !important;
  margin-bottom: 10px !important;
}

#additional-incentives-page .feature-description {
  margin-bottom: 14px !important;
  line-height: 1.5 !important;
}

#additional-incentives-page .criteria-checkbox {
  margin-top: 12px !important;
}

#additional-incentives-page .currency-converter {
  gap: 12px !important;
}

.notice-modal .notice-content {
  border-radius: 18px !important;
  box-shadow: 0 18px 50px rgba(41, 48, 61, 0.22) !important;
}

@media (max-width: 768px) {
  .calculator-container {
    padding: 22px !important;
    border-radius: 14px !important;
  }

  .calculator-container > h2:first-of-type,
  .calculator-container > .incentives-hero h2 {
    font-size: clamp(23px, 5.4vw, 30px) !important;
  }
}