/* ==========================================================================
   CarTrier Tools & Calculators Stylesheet
   Styles for tools index, calculators, advisor, FAQ, speed table, finder tabs
   ========================================================================== */

/* ==========================================================================
   1. Tools Index Page (.tools-page)
   ========================================================================== */
.tools-page {
  padding: 3rem 0;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.tool-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background-color: var(--bg-white);
  border-radius: var(--radius-2xl);
  padding: 32px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
  text-decoration: none;
  color: inherit;
}

.tool-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.tool-card h3 {
  font-size: 1.25rem;
  color: var(--text-primary);
  margin: 0;
}

.tool-card p {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* Tool Card Icons */
.tool-card-icon {
  width: 64px;
  height: 64px;
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tool-card-icon svg {
  width: 28px;
  height: 28px;
}

.tool-card-icon.purple {
  background-color: #EDE9FE;
  color: #7C3AED;
}

.tool-card-icon.blue {
  background-color: #DBEAFE;
  color: #0284C7;
}

.tool-card-icon.green {
  background-color: #D1FAE5;
  color: #059669;
}

.tool-card-icon.red {
  background-color: #FEE2E2;
  color: #DC2626;
}

.tool-card-icon.gray {
  background-color: #F1F5F9;
  color: #475569;
}

/* ==========================================================================
   2. Calculator Pages (.calculator-page)
   ========================================================================== */
.calculator-page {
  padding: 3rem 0;
}

.calculator-page h1 {
  margin-bottom: 0.5rem;
}

.calculator-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  margin-bottom: 2rem;
}

/* Calculator Card */
.calc-card {
  background-color: var(--bg-white);
  border-radius: var(--radius-xl);
  padding: 32px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}

.calc-card h3 {
  font-size: 1.25rem;
  margin-bottom: 1.25rem;
  color: var(--text-primary);
}

/* Calculator Inputs */
.calc-inputs {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.calc-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.calc-field label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.calc-field select,
.calc-field input[type="number"],
.calc-field input[type="text"] {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
  -webkit-appearance: none;
}

.calc-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='%23475569'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25rem;
  padding-right: 2.5rem;
}

.calc-field select:focus,
.calc-field input[type="number"]:focus,
.calc-field input[type="text"]:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.15);
}

/* Range input (braking calculator) */
.calc-field input[type="range"] {
  width: 100%;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--border);
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  margin-top: 0.25rem;
}

.calc-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--accent);
  border: 2px solid #fff;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: transform var(--transition);
}

.calc-field input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.calc-field input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--accent);
  border: 2px solid #fff;
  box-shadow: var(--shadow-md);
  cursor: pointer;
}

/* Calculator Results */
.calc-results {
  background-color: var(--bg-white);
  border-radius: var(--radius-xl);
  padding: 32px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  position: sticky;
  top: 24px;
}

.calc-results h2 {
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
}

.results-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.result-card {
  background-color: var(--bg-light);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  text-align: center;
}

.result-card .result-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

.result-card .result-value {
  font-family: 'Poppins', sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.result-card .result-unit {
  font-size: 0.8125rem;
  color: var(--text-muted);
  font-weight: 400;
}

.result-card .result-change {
  font-size: 0.8125rem;
  font-weight: 600;
  margin-top: 0.25rem;
}

.result-card .result-change.positive {
  color: var(--success);
}

.result-card .result-change.negative {
  color: var(--danger);
}

.result-card .result-change.neutral {
  color: var(--text-muted);
}

/* Visual Comparison */
.visual-comparison {
  background-color: var(--bg-white);
  border-radius: var(--radius-xl);
  padding: 32px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  margin-top: 2rem;
  text-align: center;
}

.visual-comparison h2 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
}

.tire-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  padding: 2rem 0;
}

.tire-visual canvas {
  max-width: 100%;
  height: auto;
}

.tire-shape {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.tire-shape .tire-ellipse {
  border: 4px solid var(--primary);
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tire-shape .tire-ellipse .tire-rim {
  border: 2px dashed var(--border-dark);
  border-radius: 50%;
}

.tire-shape .tire-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-primary);
}

.tire-shape .tire-size-text {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* Original tire color */
.tire-shape.original .tire-ellipse {
  border-color: var(--accent);
}

/* New tire color */
.tire-shape.new .tire-ellipse {
  border-color: var(--info);
}

/* Braking Visual */
.braking-visual {
  position: relative;
  width: 100%;
  padding: 2rem 0;
  margin-bottom: 1.5rem;
}

.braking-bar {
  height: 32px;
  border-radius: var(--radius-lg);
  position: relative;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  padding: 0 1rem;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  transition: width 600ms ease-out;
}

.braking-bar.reaction {
  background: linear-gradient(90deg, #F59E0B, #D97706);
}

.braking-bar.braking {
  background: linear-gradient(90deg, var(--accent), var(--accent-dark));
}

.braking-bar.total {
  background: linear-gradient(90deg, var(--primary), var(--primary-dark));
}

.braking-legend {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  margin-top: 1rem;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.braking-legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.braking-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ==========================================================================
   3. Advisor Page (.advisor-page)
   ========================================================================== */
.advisor-page {
  padding: 3rem 0;
}

.advisor-page h1 {
  margin-bottom: 0.5rem;
}

.advisor-wizard {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2rem;
}

/* Steps */
.advisor-step {
  display: none;
}

.advisor-step.active {
  display: block;
}

.advisor-step h2 {
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

/* Step Options */
.advisor-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.advisor-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--bg-white);
  padding: 24px;
  border-radius: var(--radius-xl);
  border: 2px solid var(--border);
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

.advisor-option:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.advisor-option.selected {
  border-color: var(--accent);
  background-color: #FFF1F2;
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.15);
}

.advisor-option-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  line-height: 1;
}

.advisor-option-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}

.advisor-option-desc {
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Advisor Results */
.advisor-results {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 1.5rem;
}

.advisor-results .tire-card {
  background-color: var(--bg-white);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform var(--transition-slow), box-shadow var(--transition-slow);
}

.advisor-results .tire-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

/* Step Progress (optional enhancement) */
.advisor-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2rem;
}

.advisor-progress-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--border);
  transition: background-color var(--transition);
}

.advisor-progress-dot.active {
  background-color: var(--accent);
}

.advisor-progress-dot.completed {
  background-color: var(--success);
}

.advisor-progress-line {
  width: 40px;
  height: 2px;
  background-color: var(--border);
}

/* ==========================================================================
   4. FAQ Section (.faq-section)
   ========================================================================== */
.faq-section {
  margin-top: 3rem;
  padding-top: 2rem;
}

.faq-section h2 {
  font-size: 1.75rem;
  margin-bottom: 1.5rem;
}

.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 0;
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.25rem 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
  text-align: left;
  line-height: 1.5;
  gap: 1rem;
  transition: color var(--transition);
}

.faq-question:hover {
  color: var(--accent);
}

.faq-question svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform var(--transition-slow);
}

.faq-question.open svg {
  transform: rotate(180deg);
}

.faq-answer {
  display: none;
  padding: 0 0 1.25rem 0;
}

.faq-answer.visible {
  display: block;
}

.faq-answer p {
  font-size: 0.9375rem;
  color: var(--text-secondary);
  line-height: 1.75;
  margin: 0;
}

/* ==========================================================================
   5. Speed Table Section (.speed-table-section)
   ========================================================================== */
.speed-table-section {
  margin-top: 2.5rem;
}

.speed-table-section h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.speed-table-section > p {
  font-size: 0.9375rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}

.data-table {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-size: 0.9375rem;
}

.data-table thead {
  background-color: var(--primary-dark);
  color: #fff;
}

.data-table thead th {
  padding: 0.875rem 1.25rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: left;
  white-space: nowrap;
}

.data-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background-color var(--transition);
}

.data-table tbody tr:nth-child(even) {
  background-color: var(--bg-light);
}

.data-table tbody tr:hover {
  background-color: #EDE9FE;
}

.data-table tbody td {
  padding: 0.75rem 1.25rem;
  color: var(--text-secondary);
}

.data-table tbody tr:last-child {
  border-bottom: none;
}

/* Highlight differences in table */
.data-table .diff-positive {
  color: var(--success);
  font-weight: 600;
}

.data-table .diff-negative {
  color: var(--danger);
  font-weight: 600;
}

.data-table .diff-neutral {
  color: var(--text-muted);
}

/* ==========================================================================
   6. Finder Tabs (Homepage)
   ========================================================================== */
.finder-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 1.5rem;
}

.finder-tab {
  padding: 0.75rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
  white-space: nowrap;
}

.finder-tab:hover {
  color: var(--accent);
  border-bottom-color: var(--accent-light);
}

.finder-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.finder-panel {
  display: none;
}

.finder-panel.active {
  display: block;
}

.size-finder-form {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.size-finder-form .finder-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.size-finder-form .finder-field label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.size-finder-form .finder-field select,
.size-finder-form .finder-field input {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
  -webkit-appearance: none;
}

.size-finder-form .finder-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='%23475569'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25rem;
  padding-right: 2.5rem;
}

.size-finder-form .finder-field select:focus,
.size-finder-form .finder-field input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.15);
}

/* Vehicle finder form (alternate tab) */
.vehicle-finder-form {
  display: grid;
  grid-template-columns: repeat(3, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.vehicle-finder-form .finder-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.vehicle-finder-form .finder-field label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.vehicle-finder-form .finder-field select {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--text-primary);
  background-color: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='%23475569'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1.25rem;
  padding-right: 2.5rem;
}

.vehicle-finder-form .finder-field select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(225, 29, 72, 0.15);
}

/* ==========================================================================
   7. Responsive - 1024px (Tablet Landscape)
   ========================================================================== */
@media (max-width: 1024px) {
  .tools-page {
    padding: 2.5rem 0;
  }

  .calculator-page {
    padding: 2.5rem 0;
  }

  .calculator-grid {
    gap: 24px;
  }

  .calc-card {
    padding: 24px;
  }

  .calc-results {
    padding: 24px;
    position: static;
  }

  .visual-comparison {
    padding: 24px;
  }

  .tool-card {
    padding: 24px;
  }

  .advisor-page {
    padding: 2.5rem 0;
  }

  .advisor-results {
    grid-template-columns: repeat(2, 1fr);
  }

  .size-finder-form {
    grid-template-columns: repeat(2, 1fr);
  }

  .size-finder-form .btn {
    grid-column: 1 / -1;
  }

  .vehicle-finder-form {
    grid-template-columns: repeat(2, 1fr);
  }

  .vehicle-finder-form .btn {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   8. Responsive - 768px (Tablet Portrait)
   ========================================================================== */
@media (max-width: 768px) {
  .tools-page {
    padding: 2rem 0;
  }

  .tools-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .tool-card {
    padding: 20px;
  }

  .tool-card-icon {
    width: 52px;
    height: 52px;
  }

  .tool-card-icon svg {
    width: 24px;
    height: 24px;
  }

  .calculator-page {
    padding: 2rem 0;
  }

  .calculator-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .calc-card {
    padding: 20px;
  }

  .calc-results {
    padding: 20px;
    position: static;
  }

  .results-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .visual-comparison {
    padding: 20px;
    margin-top: 1.5rem;
  }

  .tire-visual {
    flex-direction: column;
    gap: 2rem;
  }

  .advisor-page {
    padding: 2rem 0;
  }

  .advisor-wizard {
    margin-top: 1.5rem;
  }

  .advisor-options {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .advisor-option {
    padding: 20px;
    flex-direction: row;
    text-align: left;
    gap: 1rem;
  }

  .advisor-option-icon {
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
    flex-shrink: 0;
  }

  .advisor-results {
    grid-template-columns: 1fr;
  }

  .faq-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
  }

  .faq-question {
    font-size: 0.9375rem;
    padding: 1rem 0;
  }

  .speed-table-section {
    margin-top: 2rem;
    overflow-x: auto;
  }

  .data-table {
    min-width: 500px;
  }

  .finder-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .finder-tab {
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
  }

  .size-finder-form {
    grid-template-columns: 1fr;
  }

  .vehicle-finder-form {
    grid-template-columns: 1fr;
  }

  .braking-legend {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
}