/* ============================================
   CovertItAll Alignment Fix — v2.0.1
   Normalizes visual consistency across all
   converter page patterns without changing HTML.
   ============================================ */

/* -----------------------------------------------
   1. INPUT SIZING — Make Pattern 4 inputs match
      Pattern 1 (large-input) sizing
   ----------------------------------------------- */

/* Pattern 4 inputs: match large-input look */
.converter-box input[type="number"],
.converter-box input[type="text"],
.calculator-grid input[type="number"],
.calculator-grid input[type="text"],
.grid-two input[type="number"],
.grid-two input[type="text"],
.form-grid input[type="number"],
.form-grid input[type="text"],
.inline-grid input[type="number"],
.inline-grid input[type="text"] {
  padding: 15px 18px;
  font-size: 1.75rem;
  font-weight: 700;
  border-radius: 10px;
  transition: border-color .2s, box-shadow .2s;
}

/* Consistent focus ring across all inputs */
.converter-box input:focus,
.calculator-grid input:focus,
.grid-two input:focus,
.form-grid input:focus,
.inline-grid input:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .18);
}

/* Consistent select styling */
.converter-box select,
.calculator-grid select,
.grid-two select,
.form-grid select,
.inline-grid select {
  padding: 12px 14px;
  font-size: .95rem;
  border-radius: 10px;
}

/* -----------------------------------------------
   2. RESULT AREA — Unified result styling
      for .result-line, #resultText, .inline-explanation
   ----------------------------------------------- */

/* Base result styling for ALL patterns */
.result-line,
.inline-explanation,
#resultText,
#inline-explanation,
#result,
[id$="-result"],
[id$="Result"] {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--accent-color);
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(56, 189, 248, .06);
  border: 1px solid rgba(56, 189, 248, .12);
  margin-top: 16px;
  line-height: 1.4;
  min-height: 44px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

html[data-theme="light"] .result-line,
html[data-theme="light"] .inline-explanation,
html[data-theme="light"] #resultText,
html[data-theme="light"] #inline-explanation,
html[data-theme="light"] #result,
html[data-theme="light"] [id$="-result"],
html[data-theme="light"] [id$="Result"] {
  background: rgba(2, 132, 199, .06);
  border-color: rgba(2, 132, 199, .12);
}

/* Result line in converter-shell: keep below inputs, not above */
.converter-shell .result-line {
  order: unset;
  margin-top: 16px;
  margin-bottom: 0;
}

/* Meta line (formula) styling */
.meta-line {
  margin-top: 8px;
  padding: 8px 16px;
  font-size: .85rem;
  color: var(--text-muted);
  border-radius: 8px;
  background: none;
  border: none;
}

/* -----------------------------------------------
   3. GRID ALIGNMENT — Consistent grid gaps
      and column sizing across patterns
   ----------------------------------------------- */

/* Standard 3-column converter grid */
.converter-grid,
.converter-box,
.calculator-grid:not(.single),
.grid-two:not(.single) {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: start;
}

/* Ensure input groups take equal space */
.converter-grid > .input-group,
.converter-box > div:not(.swap):not(.swap-btn) {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* -----------------------------------------------
   4. SWAP BUTTON — Consistent across patterns
   ----------------------------------------------- */

.swap-btn,
.converter-box .swap,
.converter-shell .swap,
.calculator-grid .swap,
.grid-two .swap {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--text-color);
  cursor: pointer;
  font-size: 1.25rem;
  align-self: center;
  justify-self: center;
  margin-top: 24px;
  transition: all .15s ease;
  -webkit-tap-highlight-color: transparent;
  padding: 0;
  min-width: 44px;
}

.swap-btn:hover,
.converter-box .swap:hover,
.converter-shell .swap:hover {
  background: var(--hover-color);
  border-color: var(--accent-color);
  transform: scale(1.08);
}

/* -----------------------------------------------
   5. QUICK VALUE BUTTONS — Consistent spacing
   ----------------------------------------------- */

.quick-values {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.quick-btn {
  padding: 6px 12px;
  min-height: 36px;
  min-width: 44px;
  font-size: .875rem;
  font-weight: 600;
  border-radius: 999px;
  background: var(--input-bg);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  cursor: pointer;
  transition: all .15s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* -----------------------------------------------
   6. ACTIONS ROW — Consistent button spacing
   ----------------------------------------------- */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

/* -----------------------------------------------
   7. LABELS — Consistent label styling
   ----------------------------------------------- */

.input-group label,
.converter-box label,
.calculator-grid label,
.grid-two label,
.form-grid label,
.inline-grid label {
  margin-bottom: 8px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--text-muted);
  line-height: 1.2;
}

/* -----------------------------------------------
   8. CONVERTER CARD CONTAINER — Consistent
      padding, radius, margins
   ----------------------------------------------- */

.converter-card,
.section.tool {
  padding: 20px;
  border-radius: 14px;
  margin-bottom: 20px;
}

/* Ensure section.tool inside wrap gets card treatment */
.main-content .section.tool {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 10px 15px -3px rgba(0,0,0,.12);
}

/* -----------------------------------------------
   9. STAT CARDS — Unified result chips/stats
   ----------------------------------------------- */

.stat-grid,
.result-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.stat-card,
.result-chip {
  flex: 1 1 0;
  min-width: 80px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(56, 189, 248, .06);
  border: 1px solid var(--border-color);
}

.stat-card .muted,
.result-chip .k {
  display: block;
  font-size: .72rem;
  color: var(--text-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.stat-card strong,
.result-chip .v {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-color);
}

/* -----------------------------------------------
   10. CALLOUT / NOTICE — Consistent helper boxes
   ----------------------------------------------- */

.callout,
.notice,
.helper-text,
.note-box {
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: rgba(15, 23, 42, .4);
  color: var(--text-muted);
  font-size: .92rem;
  line-height: 1.45;
}

html[data-theme="light"] .callout,
html[data-theme="light"] .notice,
html[data-theme="light"] .helper-text,
html[data-theme="light"] .note-box {
  background: rgba(226, 232, 240, .5);
}

/* -----------------------------------------------
   11. CONTENT SECTIONS — Consistent spacing below
       the converter tool
   ----------------------------------------------- */

.section.content,
.section.faq {
  margin-top: 0;
  margin-bottom: 20px;
}

.section.content h2,
.section.faq h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 10px;
  line-height: 1.2;
}

.section.content p,
.section.faq p {
  color: var(--text-muted);
  font-size: .97rem;
  line-height: 1.5;
  margin: 0 0 10px;
}

/* -----------------------------------------------
   12. TABLE CONSISTENCY
   ----------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 12px 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
}

th {
  background: var(--sidebar-bg);
  padding: 10px 14px;
  text-align: left;
  font-weight: 700;
  font-size: .9rem;
  color: var(--accent-color);
}

td {
  padding: 10px 14px;
  border-top: 1px solid var(--border-color);
  font-size: .92rem;
}

/* -----------------------------------------------
   13. MOBILE — Consistent stacking
   ----------------------------------------------- */

@media (max-width: 900px) {
  .converter-grid,
  .converter-box,
  .calculator-grid,
  .grid-two,
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  /* Swap rotates on mobile for all patterns */
  .swap-btn,
  .converter-box .swap,
  .converter-shell .swap,
  .calculator-grid .swap {
    transform: rotate(90deg);
    margin: 4px auto;
    align-self: center;
    justify-self: center;
  }
}

@media (max-width: 768px) {
  /* Consistent card padding on mobile */
  .converter-card,
  .section.tool,
  .main-content .section.tool {
    padding: 16px;
  }

  /* Input sizing on mobile */
  .large-input,
  .converter-box input[type="number"],
  .converter-box input[type="text"],
  .calculator-grid input[type="number"],
  .grid-two input[type="number"],
  .form-grid input[type="number"] {
    font-size: 1.35rem;
    padding: 13px 14px;
  }

  /* Result on mobile */
  .result-line,
  .inline-explanation,
  #resultText,
  #inline-explanation,
  #result,
  [id$="-result"],
  [id$="Result"] {
    font-size: .95rem;
    padding: 10px 14px;
  }

  /* Quick buttons mobile */
  .quick-values {
    gap: 6px;
  }

  .quick-btn {
    padding: 5px 10px;
    min-height: 36px;
    font-size: .82rem;
  }

  /* Stat cards stack better */
  .stat-grid,
  .result-hero {
    gap: 8px;
  }

  .stat-card,
  .result-chip {
    flex-basis: calc(50% - 4px);
    min-width: 0;
  }
}

/* -----------------------------------------------
   14. FORM-GRID SPECIAL — Two-column calculators
   ----------------------------------------------- */

.form-grid,
.inline-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
}

.form-grid.single,
.inline-grid.single {
  grid-template-columns: 1fr;
}

@media (max-width: 768px) {
  .form-grid,
  .inline-grid {
    grid-template-columns: 1fr;
  }
}

/* -----------------------------------------------
   15. SELECTOR-GRID — Consistent select layouts
   ----------------------------------------------- */

.selector-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.selector-grid label {
  display: block;
  font-size: .85rem;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.selector-grid select,
.selector-grid input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--input-bg);
  color: var(--text-color);
  font: inherit;
  font-size: .95rem;
}

/* -----------------------------------------------
   16. HIDE SPINNERS UNIVERSALLY
   ----------------------------------------------- */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

/* -----------------------------------------------
   17. FAQ SECTIONS — Consistent details/summary
   ----------------------------------------------- */

.section.faq details {
  margin-bottom: 10px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid var(--border-color);
  background: var(--card-bg);
}

.section.faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: .97rem;
  color: var(--text-color);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.section.faq summary::-webkit-details-marker {
  display: none;
}

.section.faq summary::before {
  content: '›';
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent-color);
  transition: transform .2s;
  flex-shrink: 0;
}

.section.faq details[open] summary::before {
  transform: rotate(90deg);
}

.section.faq details p {
  margin-top: 8px;
}