.wsl-tool{
  --wsl-primary:#0e5445;
  --wsl-primary-dark:#083f34;
  --wsl-border:#e4e8e6;
  --wsl-text:#1f2b28;
  --wsl-muted:#6b7773;
  --wsl-bg:#f7f9f8;
  box-sizing:border-box;
  width:100%;
  max-width:1080px;
  margin:24px auto;
  padding:0;
  color:var(--wsl-text);
  font-family:inherit;
  font-size:1em;
  line-height:1.7;
}
.wsl-tool *{box-sizing:border-box}
.wsl-tool button,.wsl-tool input,.wsl-tool select{font:inherit}
.wsl-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:20px;
  border:1px solid var(--wsl-border);
  border-radius:16px;
  background:#fff;
}
.wsl-title{
  margin:0 0 4px;
  font-size:1.2em;
  font-weight:700;
  line-height:1.55;
}
.wsl-hero p,.wsl-results-head p{
  margin:0;
  color:var(--wsl-muted);
  font-size:1em;
  line-height:1.7;
}
.wsl-primary,.wsl-secondary{
  min-height:44px;
  border-radius:10px;
  padding:9px 16px;
  border:1px solid transparent;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  white-space:nowrap;
  text-decoration:none;
  font-size:1em;
  font-weight:600;
  line-height:1.4;
  transition:background .18s ease,transform .18s ease,box-shadow .18s ease;
}
.wsl-primary{background:var(--wsl-primary);color:#fff}
.wsl-primary:hover{background:var(--wsl-primary-dark);transform:translateY(-1px)}
.wsl-primary:focus-visible,.wsl-secondary:focus-visible,.wsl-tool input:focus-visible,.wsl-tool select:focus-visible{outline:3px solid rgba(14,84,69,.18);outline-offset:2px}
.wsl-primary:disabled{opacity:.55;cursor:not-allowed;transform:none}
.wsl-secondary{background:#fff;color:var(--wsl-text);border-color:var(--wsl-border)}
.wsl-app{margin-top:14px}
.wsl-stepper{
  display:flex;
  list-style:none;
  padding:0;
  margin:0 0 12px;
  gap:8px;
}
.wsl-stepper li{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:8px 10px;
  border:1px solid var(--wsl-border);
  border-radius:10px;
  color:var(--wsl-muted);
  background:#fff;
  font-size:.95em;
}
.wsl-stepper li.is-active{color:var(--wsl-primary);border-color:#b8d0c8;background:#fbfdfc}
.wsl-stepper span{
  width:25px;height:25px;border-radius:50%;
  display:grid;place-items:center;
  background:#eef2f0;font-size:.9em;
}
.wsl-stepper li.is-active span{background:#e1eee9}
.wsl-panel,.wsl-results{
  padding:20px;
  border:1px solid var(--wsl-border);
  border-radius:16px;
  background:#fff;
}
.wsl-section-title{
  margin:0 0 16px;
  font-size:1.1em;
  font-weight:700;
  line-height:1.5;
}
.wsl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.wsl-tool label{display:block;font-weight:600;font-size:1em}
.wsl-tool small{font-weight:400;color:var(--wsl-muted)}
.wsl-tool select,.wsl-tool input{
  width:100%;
  margin-top:6px;
  border:1px solid #d2dad6;
  border-radius:9px;
  padding:10px 12px;
  background:#fff;
  min-height:44px;
  color:var(--wsl-text);
}
.wsl-tool select:focus,.wsl-tool input:focus{
  border-color:var(--wsl-primary);
  box-shadow:0 0 0 3px rgba(14,84,69,.10);
}
.wsl-actions{display:flex;justify-content:flex-start;gap:9px;margin-top:18px}
.wsl-money{position:relative}
.wsl-money input{padding-left:60px}
.wsl-money span{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--wsl-muted);font-size:.85em}
.wsl-help{color:var(--wsl-muted);margin:7px 0;font-size:.92em}
.wsl-results-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}
.wsl-results-head .wsl-section-title{margin-bottom:2px}
.wsl-status{min-height:22px;margin:7px 0;color:var(--wsl-muted);font-size:.92em}
.wsl-status.is-error{color:#a62b22}
.wsl-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.wsl-card{border:1px solid var(--wsl-border);border-radius:14px;overflow:hidden;background:#fff}
.wsl-card-media{aspect-ratio:16/9;background:#f1f4f2;overflow:hidden}
.wsl-card-media img{width:100%;height:100%;object-fit:cover;display:block}
.wsl-image-placeholder{height:100%;display:grid;place-items:center;color:var(--wsl-muted);font-size:.9em}
.wsl-card-body{padding:14px}
.wsl-card h4{margin:0 0 4px;font-size:1em;line-height:1.5}
.wsl-meta{color:var(--wsl-muted);font-size:.86em;margin-bottom:11px}
.wsl-finance{display:grid;gap:5px;font-size:.9em;line-height:1.65}
.wsl-fit{margin:11px 0}
.wsl-ok,.wsl-bad,.wsl-muted{display:inline-block;padding:5px 8px;border-radius:8px;font-size:.82em}
.wsl-ok{background:#edf8f3;color:#146b53}.wsl-bad{background:#fff2f0;color:#a62b22}.wsl-muted{background:#f1f4f2;color:#68736f}
.wsl-card-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.wsl-card-actions .wsl-primary{min-height:40px;padding:8px 13px}
.wsl-link{color:var(--wsl-primary);text-decoration:none;font-size:.85em}
.wsl-empty{padding:24px;text-align:center;border:1px dashed var(--wsl-border);border-radius:12px;color:var(--wsl-muted);font-size:.92em}
.wsl-skeleton{height:350px;border-radius:14px;background:linear-gradient(90deg,#f1f4f2,#e7ece9,#f1f4f2);background-size:200% 100%;animation:wsl-shimmer 1.3s infinite}

@keyframes wsl-shimmer{to{background-position:-200% 0}}

@media(max-width:700px){
  .wsl-tool{margin:18px auto}
  .wsl-hero{display:block;padding:16px}
  .wsl-title{font-size:1.1em}
  .wsl-hero .wsl-primary{width:100%;margin-top:13px}
  .wsl-grid,.wsl-cards{grid-template-columns:1fr}
  .wsl-stepper{gap:5px}
  .wsl-stepper li{padding:7px 4px;font-size:.86em}
  .wsl-stepper span{width:23px;height:23px}
  .wsl-panel,.wsl-results{padding:15px}
  .wsl-results-head{align-items:stretch;flex-direction:column}
  .wsl-results-head .wsl-secondary{width:100%}
  .wsl-actions{flex-direction:column}
  .wsl-actions>*{width:100%}
  .wsl-final-cta{align-items:stretch;flex-direction:column}
  .wsl-final-cta .wsl-primary{width:100%}
}
@media(max-width:380px){
  .wsl-stepper b{display:none}
  .wsl-stepper li{padding:6px}
}

/* v1.2 compact result cards */

.wsl-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.wsl-card {
    border: 1px solid #d8dfdc;
    border-radius: 16px;
    background: #fff;
    overflow: hidden;
    padding: 12px;
    transition: .18s ease;
}

.wsl-card:hover {
    border-color: #b8cbc4;
    box-shadow: 0 7px 22px rgba(14, 84, 69, .07);
    transform: translateY(-1px);
}

.wsl-card-main {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 13px;
    align-items: start;
}

.wsl-card-media {
    width: 112px;
    aspect-ratio: 1 / 1.18;
    border-radius: 10px;
    background: #f1f4f2;
    overflow: hidden;
}

.wsl-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wsl-image-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 8px;
    color: var(--wsl-muted);
    font-size: .82em;
    background: #f1f4f2;
}

.wsl-card-body {
    min-width: 0;
    padding: 0;
}

.wsl-card-title-row {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.wsl-card h4 {
    margin: 0;
    font-size: 1em;
    line-height: 1.55;
    font-weight: 700;
}

.wsl-year-chip {
    padding: 2px 7px;
    border-radius: 6px;
    background: #f0f5f3;
    color: #53645f;
    font-size: .78em;
}

.wsl-card-facts {
    display: grid;
    gap: 4px;
}

.wsl-card-facts > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: .84em;
    padding-bottom: 4px;
    border-bottom: 1px dashed #edf0ef;
}

.wsl-card-facts > div:last-child {
    border-bottom: 0;
}

.wsl-card-facts span {
    color: var(--wsl-muted);
    white-space: nowrap;
}

.wsl-card-facts strong {
    color: var(--wsl-text);
    font-weight: 600;
    text-align: left;
    overflow-wrap: anywhere;
}

.wsl-card-facts .wsl-price-row strong {
    font-weight: 800;
}

.wsl-shortfall {
    margin-top: 8px;
    padding: 7px 9px;
    border-radius: 8px;
    background: #f8faf9;
    color: #5e6b67;
    font-size: .82em;
}

.wsl-shortfall strong {
    color: var(--wsl-text);
}

.wsl-fit {
    margin-top: 8px;
}

.wsl-ok,
.wsl-bad {
    display: inline-block;
    padding: 5px 8px;
    border-radius: 7px;
    font-size: .8em;
}

.wsl-ok {
    background: #edf8f3;
    color: #146b53;
}

.wsl-bad {
    background: #fff2f0;
    color: #a62b22;
}


/* =========================
   Actions
   ========================= */

.wsl-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #edf0ef;
}


/* =========================
   Loan CTA Button
   حالت عادی
   ========================= */

.wsl-tool .wsl-card-actions a.wsl-loan-cta,
.wsl-tool .wsl-card-actions a.wsl-loan-cta:link,
.wsl-tool .wsl-card-actions a.wsl-loan-cta:visited {
    min-height: 40px;
    padding: 8px 13px;

    background-color: #0e5445 !important;
    color: #5fed2f !important;

    border: none;
    border-radius: 10px;

    text-decoration: none !important;
    font-weight: 600;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    transition:
        background-color .18s ease,
        color .18s ease,
        transform .18s ease;
}


/* =========================
   Loan CTA Button
   Hover
   ========================= */

.wsl-tool .wsl-card-actions a.wsl-loan-cta:hover {
    background-color: #0e5445 !important;
    color: #ffffff !important;

    text-decoration: none !important;
    transform: translateY(-1px);
}


/* Focus / Click */

.wsl-tool .wsl-card-actions a.wsl-loan-cta:focus,
.wsl-tool .wsl-card-actions a.wsl-loan-cta:focus-visible,
.wsl-tool .wsl-card-actions a.wsl-loan-cta:active {
    background-color: #0e5445 !important;
    color: #ffffff !important;

    text-decoration: none !important;
}


/* لینک مشاهده آگهی */

.wsl-card-actions .wsl-link {
    color: #0e5445;
    text-decoration: none;
    font-size: .84em;
}

.wsl-card-actions .wsl-link:hover {
    color: #0e5445;
    text-decoration: underline;
}


/* =========================
   Tablet / Mobile
   ========================= */

@media (max-width: 700px) {

    .wsl-cards {
        grid-template-columns: 1fr;
    }

    .wsl-card {
        padding: 11px;
    }

    .wsl-card-main {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 11px;
    }

    .wsl-card-media {
        width: 96px;
    }
}


/* =========================
   Small Mobile
   ========================= */

@media (max-width: 420px) {

    .wsl-card-main {
        grid-template-columns: 84px minmax(0, 1fr);
        gap: 9px;
    }

    .wsl-card-media {
        width: 84px;
    }

    .wsl-card h4 {
        font-size: .94em;
    }

    .wsl-card-facts > div {
        font-size: .78em;
        gap: 6px;
    }

    .wsl-card-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .wsl-tool .wsl-card-actions a.wsl-loan-cta {
        width: 100%;
    }

    .wsl-card-actions .wsl-link {
        text-align: center;
        padding: 4px;
    }
}


/* ========================================
   FINAL FIX - LOAN CTA HOVER
   این بخش حتماً آخر فایل CSS باشد
   ======================================== */

/* حالت عادی */
.wsl-tool a.wsl-loan-cta,
.wsl-tool a.wsl-loan-cta:link,
.wsl-tool a.wsl-loan-cta:visited {
    background: #0e5445 !important;
    background-color: #0e5445 !important;

    color: #5fed2f !important;
    -webkit-text-fill-color: #5fed2f !important;

    text-decoration: none !important;
}


/* HOVER */
.wsl-tool a.wsl-loan-cta:hover,
.wsl-tool a.wsl-loan-cta:hover *,
.wsl-tool a.wsl-loan-cta:hover span,
.wsl-tool a.wsl-loan-cta:hover strong {
    background-color: #0e5445 !important;

    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;

    text-decoration: none !important;
}


/* کلیک و فوکوس */
.wsl-tool a.wsl-loan-cta:focus,
.wsl-tool a.wsl-loan-cta:focus *,
.wsl-tool a.wsl-loan-cta:active,
.wsl-tool a.wsl-loan-cta:active * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}


/* اگر قالب با pseudo-element روی لینک استایل می‌گذارد */
.wsl-tool a.wsl-loan-cta:hover::before,
.wsl-tool a.wsl-loan-cta:hover::after {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}