/* loan-style.css - generated by Loan Matches Widget plugin */
/* DO NOT edit this file manually; update colors from WP admin settings (Settings → Loan Settings) */

.loan-widget * { box-sizing: border-box; font-family: "Poppins", sans-serif; }

.loan-widget .lw-container {
  max-width: 100%;
  margin: auto;
  background: #ffffff;
  padding: 10px !important;
  border-radius: 0px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.05);
  color: #333333;
}

.loan-widget h1 {
  text-align: center;
  color: #333333;
  margin: 0;
}

.loan-widget .lw-subtext { text-align:center; color: #777777; margin-top:8px; }

.loan-widget .lw-form-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap:20px; margin-top:25px; }

.loan-widget label {
  font-weight:600; font-size:14px; display:block; margin-bottom:5px; color: #222222;
}

/* inputs */
.loan-widget select,
.loan-widget input[type="number"],
.loan-widget button,
.loan-widget input.lmw-text {
  width:100%; padding:10px; border-radius:8px; border:1px solid #cccccc; font-size:15px;
  background: #ffffff; color: #222222;
}

/* range track and filled */
input[type="range"] {
  width:100% !important; height:9px !important; border-radius:5px !important; outline:none !important; -webkit-appearance:none !important; appearance:none !important;
  background: linear-gradient( to right, #8EC73F 0%, #8EC73F var(--range-progress), #dddddd var(--range-progress), #dddddd 100% ) !important;
}

/* thumb */
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:none; width:22px; height:22px; border-radius:50%; background: #8EC73F; border:2px solid #fff; cursor:pointer;
}
input[type="range"]::-moz-range-thumb {
  width:22px; height:22px; border-radius:50%; background: #8EC73F; border:2px solid #fff; cursor:pointer;
}

/* buttons */
.loan-widget button {
  background: #8EC73F; color: #ffffff; border:none; cursor:pointer; transition:0.3s;
}
.loan-widget button:hover { background: #76b036; }

/* center */
.loan-widget .lw-center { text-align:center; margin-top:25px; }

/* results */
.loan-widget .lw-results { margin-top:40px; }

/* grid results */
.lw-grid-results { display:grid; grid-template-columns: repeat(2,1fr); gap:20px; margin-top:20px; }
@media (max-width:700px){ .lw-grid-results { grid-template-columns: 1fr; } }

/* cards */
.loan-card {
  background: #f9fdf6; border:1px solid #d8e8c9; border-radius:12px; padding:15px 20px; display:flex; flex-direction:column; align-items:center; gap:10px;
  box-shadow:0 2px 6px rgba(0,0,0,0.04); transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.loan-card:hover { transform:translateY(-3px); box-shadow:0 5px 12px rgba(0,0,0,0.08); }
.loan-info { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }

.loan-logo { width:65px !important; height:65px !important; border-radius:10px; object-fit:cover; background:#fff; border:1px solid #eee; padding:3px; }

.rate { font-weight:600; color: #1b3d13; }

/* notices */
.notice {
  background: #eaf9ea; border:1px solid #c6e3c6; padding:15px; border-radius:8px; margin-bottom:20px; color: #2d6a2d; text-align:center; font-weight:500; line-height:1.6;
}
.notice.bad {
  background: #fff3f3; border-color: #f0caca; color: #a33a3a;
}
.lw-tip { display:block; margin-top:4px; color: #777777; font-size:12px; }

/* modal */
.compare-modal { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.5); justify-content:center; align-items:center; z-index:1000; }
.compare-content { background: #ffffff; border-radius:12px; padding:20px; max-width:800px; width:90%; position:relative; animation: fadeIn 0.3s ease; }
.close-btn {
  position:absolute; top:10px; right:15px; width:35px; height:35px; font-size:20px; line-height:35px; text-align:center; cursor:pointer; color: #fff;
  background: #8EC73F; border:1px solid #8EC73F; border-radius:50% !important; transition:0.3s;
}
.close-btn:hover { opacity:0.95; }

/* Force 2-column grid everywhere */
.lw-grid-results {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 15px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Make sure cards don’t stretch full width or break the grid */
.lw-grid-results .loan-card {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Just in case your theme adds mobile overrides */
@media all {
  .lw-grid-results {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

.lw-grid-results .loan-card button {
  border-radius: 50px !important;
}

.lw-center #lw-btn {
  border-radius: 50px !important;
}

#calculator .btn {
  border-radius: 50px !important;
}

/* compare table */
.compare-table { width:100%; border-collapse:collapse; margin-top:10px; }
.compare-table th, .compare-table td { border:1px solid #dddddd; padding:10px; font-size:14px; }
.compare-table th { background: #f3f7ef; }

/* small utilities */
.compare-content tbody { border:1px solid #e1e1e1; }
.compare-content tr:nth-child(even) { background-color: #f8f8f8; }
.compare-content tr:nth-child(odd) { background-color: #ffffff; }

@keyframes fadeIn { from { opacity:0; transform:scale(0.9);} to { opacity:1; transform:scale(1);} }