/* Keyword Suggest Tool — bespoke component internals only.
   Layout/color/typography come from THEME Tailwind classes in the widget markup
   (bg-capuccino, border-capuccino-dark, text-jet-black, font-sans/serif,
   btn-primary, btn-tertiary, rounded-3xl, shadow-lg). Keep this file free of
   @apply: Tailwind does not process plugin CSS, only plugin *.php markup. */

/* ===== Aligned with the Keyword Shuffle tool =====
   Beige (#edede5) header zone holds the intro + search form; results render on
   a white panel below, separated by #e0dfd6 dividers. Mirrors keyword-shuffle.css.
   These rules out-specify the Tailwind bg-white/bg-capuccino classes in the markup. */
.keyword-suggest-widget {
  background: #edede5;
  border-radius: 20px;
  overflow: hidden;
}

/* Intro — beige, divider below (mirrors .keyword-shuffle__intro) */
.keyword-suggest-widget .kw-intro {
  margin: 0;
  padding: 32px 40px;
  border-bottom: 1px solid #e0dfd6;
}
.keyword-suggest-widget .kw-intro__lead {
  margin: 0;
  max-width: none;
  font-size: 15px;
  line-height: 1.6;
  color: #4e4a4c;
}

/* Search form stays in the beige header zone; results render on white. */
.keyword-suggest-widget .kw-search-card {
  background: transparent;
  padding: 32px 40px;
  border-bottom: 1px solid #e0dfd6;
}
.keyword-suggest-widget .kw-results-card {
  background: #ffffff;
  padding: 32px 40px;
  margin: 0;
}
/* Search form layout */
.keyword-suggest-widget .input-group-key-sugg-tool {
  display: grid;
  grid-template-columns: 2fr repeat(3, minmax(150px, 1fr)) auto;
  gap: 14px;
  align-items: center;
}
@media (max-width: 900px) {
  .keyword-suggest-widget .input-group-key-sugg-tool {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .keyword-suggest-widget .input-group-key-sugg-tool {
    grid-template-columns: 1fr;
  }
}

/* Field sizing (border/background come from theme classes in markup) */
.keyword-suggest-widget .kw-field {
  width: 100%;
  height: 52px;
  padding: 0 14px;
  border: 1px solid #ddd; /* match keyword-shuffle inputs */
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  color: #4e4a4c;
  transition: border-color 0.2s ease;
}
.keyword-suggest-widget .kw-field:focus {
  outline: none;
  border-color: #c82c46; /* brand */
}
.keyword-suggest-widget .input-group-key-sugg-tool .btn-primary {
  white-space: nowrap;
}

/* Progress strip */
.keyword-suggest-widget .kw-progress {
  margin-bottom: 1rem;
}
.keyword-suggest-widget .kw-progress__label {
  margin: 0 0 0.4rem;
  font-size: 0.9rem;
  color: #646b5a;
}
.keyword-suggest-widget .progress-bar {
  width: 100%;
  height: 22px;
  background: #f4f0e7;
  border-radius: 6px;
  overflow: hidden;
}
.keyword-suggest-widget .progress-bar__inner {
  height: 100%;
  width: 0%;
  background: #c82c46; /* brand */
  color: #fff;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: width 0.2s ease;
}

/* Results toolbar: filter + count + actions */
.keyword-suggest-widget .kw-results-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.keyword-suggest-widget .kw-filter-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 280px;
}
.keyword-suggest-widget .kw-filter {
  flex: 1 1 auto;
  height: 44px;
  padding: 0 14px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  color: #4e4a4c;
}
.keyword-suggest-widget .kw-filter:focus {
  outline: none;
  border-color: #c82c46;
}
.keyword-suggest-widget .kw-count {
  white-space: nowrap;
  font-size: 0.875rem;
}

/* Compact the theme's btn-tertiary for a toolbar context */
.keyword-suggest-widget .kw-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.keyword-suggest-widget .kw-actions .btn-tertiary {
  /* inline-flex + center makes <button> and <a> align their text identically
     (the theme's display:block leaves an anchor's text baseline misaligned vs a button). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0.5rem 1rem;
  font-size: 0.72rem;
}
.keyword-suggest-widget .kw-actions.is-disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* The single, de-duplicated result list */
.keyword-suggest-widget .kw-placeholder {
  margin: 0;
  padding: 2.5rem 1rem;
  text-align: center;
  color: #646b5a;
  font-size: 1rem;
  line-height: 1.5;
}
.keyword-suggest-widget .kw-empty {
  padding: 1rem 0.25rem;
  color: #646b5a;
}
.keyword-suggest-widget .kw-flat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 4px;
  max-height: 60vh;
  overflow-y: auto;
}
.keyword-suggest-widget .listing-k-suggest-t {
  list-style: none;
  margin: 0;
}
.keyword-suggest-widget .listing-k-suggest-t label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.keyword-suggest-widget .listing-k-suggest-t label:hover {
  background: #f7f3ea; /* soft capuccino */
}
.keyword-suggest-widget .listing-k-suggest-t input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #c82c46; /* brand */
  cursor: pointer;
  flex: 0 0 auto;
}
/* Selected row: brand-tinted background with DARK readable text
   (fixes the prior white-text-on-light-green bug). */
.keyword-suggest-widget .listing-k-suggest-t label:has(input:checked) {
  background: #fdecec;
  border-color: #c82c46;
  color: #0a0a0a;
}
.keyword-suggest-widget .kw-text {
  line-height: 1.3;
  word-break: break-word;
}

.keyword-suggest-widget .is-hidden {
  display: none !important;
}

/* Responsive — mirror the shuffle tool: tighter zone padding, flush corners. */
@media (max-width: 625px) {
  .keyword-suggest-widget .kw-intro,
  .keyword-suggest-widget .kw-search-card,
  .keyword-suggest-widget .kw-results-card {
    padding: 16px;
  }
}
@media (max-width: 993px) {
  .keyword-suggest-widget {
    border-radius: 0;
  }
}