/* ============================================================
 * COMPONENTS — Buttons, Cards, Chips, Tool preview, Badges
 * יחולו על רכיבים שקיימים היום באתר + רכיבים עתידיים
 * ============================================================ */

/* ============ CTAs ============ */

.msl-btn,
.msl-toolkit-design .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--msl-s-2);
  padding: 14px 28px !important;
  font-family: var(--msl-font-heading) !important;
  font-size: var(--msl-fs-body) !important;
  font-weight: 700 !important;
  border-radius: var(--msl-r-md) !important;
  border: none !important;
  cursor: pointer;
  text-decoration: none !important;
  transition: transform var(--msl-t-fast), box-shadow var(--msl-t-fast), background-color var(--msl-t-fast);
  line-height: 1 !important;
}

/* Primary — Navy */
.msl-btn-primary,
.msl-toolkit-design .elementor-button-primary,
.msl-toolkit-design .elementor-button[type="submit"] {
  background: var(--msl-navy) !important;
  color: var(--msl-white) !important;
  box-shadow: var(--msl-shadow-cta);
}
.msl-btn-primary:hover,
.msl-toolkit-design .elementor-button-primary:hover,
.msl-toolkit-design .elementor-button[type="submit"]:hover {
  background: var(--msl-navy-2) !important;
  transform: translateY(-1px);
  color: var(--msl-white) !important;
}

/* Amber — ה-CTA החזק ביותר */
.msl-btn-amber {
  background: var(--msl-amber) !important;
  color: var(--msl-navy) !important;
  box-shadow: var(--msl-shadow-cta-amber);
  font-weight: 800 !important;
  border-radius: var(--msl-r-pill) !important;
}
.msl-btn-amber:hover {
  background: var(--msl-amber-2) !important;
  transform: translateY(-1px);
}

/* Ghost — outline, Navy */
.msl-btn-ghost {
  background: transparent !important;
  color: var(--msl-navy) !important;
  border: 1.5px solid var(--msl-navy) !important;
}
.msl-btn-ghost:hover {
  background: var(--msl-navy) !important;
  color: var(--msl-white) !important;
}

/* ============ Chips (live / free / category) ============ */
.msl-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--msl-s-2);
  padding: 6px 14px;
  border-radius: var(--msl-r-pill);
  font-size: var(--msl-fs-caption);
  font-weight: 700;
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}
.msl-chip__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--msl-green);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25);
}
.msl-chip--amber {
  background: rgba(245, 158, 11, 0.12);
  color: #B45309;
}
.msl-chip--navy {
  background: rgba(11, 30, 63, 0.08);
  color: var(--msl-navy);
}

/* ============ Badge ============ */
.msl-badge {
  display: inline-block;
  background: var(--msl-amber);
  color: var(--msl-navy);
  font-size: var(--msl-fs-badge);
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--msl-r-sm);
}
.msl-badge--navy {
  background: var(--msl-navy);
  color: var(--msl-amber);
}
.msl-badge--red {
  background: var(--msl-red);
  color: var(--msl-white);
}

/* ============ Generic Card ============ */
.msl-card {
  background: var(--msl-white);
  border-radius: var(--msl-r-lg);
  padding: var(--msl-s-6);
  border: 1px solid var(--msl-line);
  box-shadow: var(--msl-shadow-card);
  transition: transform var(--msl-t-med), box-shadow var(--msl-t-med);
  position: relative;
  overflow: hidden;
}
.msl-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--msl-shadow-card-hover);
}
.msl-card__corner {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--msl-amber);
  color: var(--msl-navy);
  font-size: var(--msl-fs-badge);
  font-weight: 800;
  letter-spacing: 0.1em;
  padding: 3px 10px;
  border-radius: 0 0 0 var(--msl-r-sm);
}

/* ============ Tool preview card ============ */
.msl-tool-card {
  background: var(--msl-white);
  border-radius: var(--msl-r-lg);
  padding: var(--msl-s-6);
  box-shadow: 0 30px 60px rgba(11, 30, 63, 0.12);
  border: 1px solid var(--msl-line);
  position: relative;
}
.msl-tool-card::before {
  content: "";
  position: absolute;
  top: -2px; right: -2px; left: -2px;
  height: 4px;
  background: linear-gradient(90deg, var(--msl-amber), var(--msl-amber-2));
  border-radius: var(--msl-r-lg) var(--msl-r-lg) 0 0;
}
.msl-tool-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--msl-s-5);
}
.msl-tool-card__icon {
  width: 56px; height: 56px;
  border-radius: var(--msl-r-md);
  background: linear-gradient(135deg, var(--msl-navy), var(--msl-navy-2));
  display: grid;
  place-items: center;
  color: var(--msl-amber);
  font-size: 26px;
}
.msl-drop {
  background: #F8FAFC;
  border: 2px dashed var(--msl-line);
  border-radius: var(--msl-r-md);
  padding: var(--msl-s-6);
  text-align: center;
  margin-bottom: var(--msl-s-4);
  transition: border-color var(--msl-t-fast), background var(--msl-t-fast);
}
.msl-drop:hover {
  border-color: var(--msl-amber);
  background: #FEF9EF;
}
.msl-drop__icon { font-size: 28px; margin-bottom: 4px; display: block; }
.msl-drop__label { font-size: var(--msl-fs-small); font-weight: 600; color: var(--msl-ink); }
.msl-drop__sub { font-size: var(--msl-fs-caption); color: var(--msl-muted); margin-top: 4px; }

/* ============ Stats block ============ */
.msl-stats {
  display: flex;
  gap: var(--msl-s-8);
  padding-top: var(--msl-s-6);
  border-top: 1px solid rgba(11, 30, 63, 0.1);
}
.msl-stat__n {
  font-family: var(--msl-font-heading);
  font-size: 30px;
  font-weight: 800;
  color: var(--msl-navy);
  letter-spacing: -0.02em;
}
.msl-stat__l {
  font-size: var(--msl-fs-caption);
  color: var(--msl-muted);
  margin-top: 2px;
}

/* ============ Hero highlight (underline Amber) ============ */
.msl-toolkit-design h1 em,
.msl-hl {
  font-style: normal;
  color: var(--msl-amber);
  position: relative;
  display: inline-block;
}
.msl-toolkit-design h1 em::after,
.msl-hl::after {
  content: "";
  position: absolute;
  right: -2px; left: -2px;
  bottom: 4px;
  height: 12px;
  background: var(--msl-amber-soft);
  z-index: -1;
  border-radius: 4px;
}

/* ============ Search input ============ */
.msl-search,
.msl-toolkit-design input[type="search"] {
  background: var(--msl-white);
  border: 1px solid var(--msl-line);
  padding: 10px 16px 10px 40px;
  border-radius: var(--msl-r-pill);
  font-size: var(--msl-fs-small);
  font-family: var(--msl-font-body);
  color: var(--msl-ink);
  min-width: 220px;
  transition: border-color var(--msl-t-fast), box-shadow var(--msl-t-fast);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748B' viewBox='0 0 16 16'><path d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/></svg>");
  background-repeat: no-repeat;
  background-position: left 14px center;
}
.msl-search:focus,
.msl-toolkit-design input[type="search"]:focus {
  border-color: var(--msl-amber);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
  outline: none;
}