/* ==========================================================================
   MAADANOL — Lubricant Finder & Competitor Cross-Reference (page-specific)
   Loaded ONLY on /finder/, /en/finder/, /ar/finder/ (see
   maadanol_enqueue_assets in functions.php). Reuses shared tokens from
   style.css, which is enqueued as this stylesheet's dependency.
   ========================================================================== */

.lf-hero-tabs{ display:flex; gap: 14px; flex-wrap: wrap; }

.lf-panel{
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 40px; box-shadow: var(--shadow-sm);
}
@media (max-width: 640px){ .lf-panel{ padding: 24px; } }

/* ---------- Lubricant Finder form ---------- */
.lf-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 26px; }
.lf-field{ display:flex; flex-direction: column; gap: 7px; }
.lf-field label{ font-size: 12.5px; font-weight: 700; color: var(--primary); }
.lf-field input, .lf-field select{
  padding: 12px 14px; border-radius: var(--radius-sm); border: 1.5px solid var(--line);
  font-size: 13.5px; font-family: inherit; background: var(--bg); transition: border-color .2s;
}
.lf-field input:focus, .lf-field select:focus{ outline:none; border-color: var(--accent); background: var(--white); }
@media (max-width: 900px){ .lf-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .lf-grid{ grid-template-columns: 1fr; } }

.lf-submit{ display:block; width: fit-content; margin: 0 auto; }

/* ---------- Competitor cross-reference search ---------- */
.lf-cross-search{ position: relative; margin-bottom: 16px; }
.lf-cross-search svg{ position:absolute; inset-inline-start: 16px; top:50%; transform: translateY(-50%); color: var(--gray-light); pointer-events:none; }
.lf-cross-search input{
  width:100%; padding: 15px 18px 15px 46px; border-radius: 999px; border: 1.5px solid var(--line);
  font-size: 14.5px; font-family: inherit; background: var(--bg);
}
html[dir="rtl"] .lf-cross-search input{ padding: 15px 46px 15px 18px; }
.lf-cross-search input:focus{ outline:none; border-color: var(--accent); background: var(--white); }

.lf-brand-chips{ display:flex; gap: 8px; flex-wrap: wrap; margin-bottom: 30px; }
.lf-brand-chip{
  padding: 8px 16px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--white);
  font-size: 12.5px; font-weight: 600; color: var(--gray); transition: all .2s;
}
.lf-brand-chip:hover{ border-color: var(--primary); color: var(--primary); }
.lf-brand-chip.is-active{ background: var(--primary); border-color: var(--primary); color: #fff; }

/* ---------- Results ---------- */
.lf-results{ margin-top: 10px; animation: lfFadeIn .35s var(--ease); }
@keyframes lfFadeIn{ from{ opacity:0; transform: translateY(10px); } to{ opacity:1; transform: translateY(0); } }

.lf-empty{
  text-align:center; padding: 40px 20px; color: var(--gray); font-size: 14px;
  background: var(--bg); border-radius: var(--radius-md); border: 1px dashed var(--line);
}

.lf-result-card{
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
}
.lf-result-card__head{
  background: var(--primary); color:#fff; padding: 20px 26px; display:flex; align-items:center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.lf-result-card__head h3{ color:#fff; font-size: 19px; margin: 0; }
.lf-result-card__badge{ background: var(--secondary-text); color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; padding: 5px 12px; border-radius: 999px; text-transform: uppercase; }
.lf-result-card__body{ padding: 26px; }
.lf-result-card__note{ font-size: 13.5px; color: var(--gray); margin: 0 0 18px; padding: 12px 16px; background: var(--bg); border-inline-start: 3px solid var(--secondary); border-radius: var(--radius-sm); }

.lf-spec-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px; }
.lf-spec{ background: var(--bg); border-radius: var(--radius-sm); padding: 14px 16px; }
.lf-spec span{ display:block; font-size: 11px; color: var(--gray-light); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.lf-spec strong{ font-size: 14px; color: var(--primary); }
@media (max-width: 760px){ .lf-spec-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px){ .lf-spec-grid{ grid-template-columns: 1fr; } }

.lf-links-row{ display:flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.lf-links-row a{
  display:inline-flex; align-items:center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--accent-text);
  background: rgba(30,136,229,0.08); padding: 8px 14px; border-radius: 999px; transition: background .2s;
}
.lf-links-row a:hover{ background: rgba(30,136,229,0.16); }

.lf-alt-list{ display:flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.lf-alt-list h4{ font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--gray); margin: 4px 0 10px; }
.lf-alt-item{
  display:flex; align-items:center; justify-content: space-between; padding: 12px 16px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); font-size: 13.5px;
}
.lf-alt-item a{ font-weight: 700; color: var(--primary); }

.lf-cta-row{ display:flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; padding-top: 20px; border-top: 1px dashed var(--line); }