/* Keyword Shuffle widget — vertical 3-step wizard.
   Palette + double-class specificity tricks mirror keyword-counter.css.
   This file is self-contained: it does NOT rely on keyword-counter.css or on
   Tailwind utility classes being present on the page. */

.keyword-box.keyword-box {
  /* Double-class keeps the beige background winning over the Elementor kit. */
  margin: 0 !important;
  padding: 0 !important;
  background: #edede5 !important;
  border-radius: 20px !important;
}

/* === Intro (sits above the wizard, inside the beige header zone) ======= */
.keyword-shuffle__intro {
  padding: 32px 40px;
  border-bottom: 1px solid #e0dfd6;
}
.keyword-box .keyword-shuffle__subtitle {
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
  color: #1a1a1a;
}
.keyword-box .keyword-shuffle__lead {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: #4e4a4c;
}

/* === Wizard steps ====================================================== */
.keyword-shuffle__step {
  padding: 32px 40px;
}
.keyword-shuffle__step + .keyword-shuffle__step {
  border-top: 1px solid #e0dfd6;
}
.keyword-shuffle__step--results,
.keyword-shuffle__step--actions {
  background: #ffffff;
}

/* Scoped under .keyword-box to out-specify Elementor's kit rule
   (.elementor-kit-NNNN h2 = 0,1,1), which otherwise forces 64px Lora. */
.keyword-box .keyword-shuffle__prompt {
  display: flex;
  align-items: center;
  margin: 0 0 20px;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 600;
  color: #1a1a1a;
}

.keyword-shuffle__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  margin-right: 12px;
  border-radius: 50%;
  background: #c82c46;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

/* === Step 1: inputs ==================================================== */
.keyword-shuffle__inputs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
.keyword-shuffle__input {
  flex: 1 1 160px;
  min-width: 140px;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  line-height: 20px;
  color: #4e4a4c;
  background: #fff;
}
.keyword-shuffle__input:focus {
  outline: none;
  border-color: #c82c46;
}

/* === Step 2: result lists ============================================= */
.keyword-shuffle__lists {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  border-radius: 10px;
}
.keyword-shuffle__list {
  flex: 1 1 200px;
  min-width: 180px;
}
.keyword-shuffle__list-title {
  margin: 0 0 8px;
  padding: 8px 12px;
  background: #edede5;
  border-radius: 6px;
  font-weight: 700;
  font-size: 14px;
  color: #1a1a1a;
}
.keyword-shuffle__list ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.keyword-shuffle__kw {
  padding: 6px 12px;
  font-size: 14px;
  color: #4e4a4c;
  border-radius: 4px;
  word-break: break-word;
}
.keyword-shuffle__kw:nth-child(even) {
  background: #f9fafc;
}

/* === Step 3: actions ================================================== */
#keyword-shuffle-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* === Buttons (self-contained copy of the brand button) ================ */
.btn-rv {
  display: inline-block;
  background: #c82c46;
  color: #fff;
  border: none;
  padding: 8px 24px;
  border-radius: 99px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s;
}
.btn-rv:hover {
  background: #93323e;
  color: #fff;
}
/* Theme link styles reset <a>'s font-weight/line-height; the ID scope wins the
   cascade so the Copy-all <button> and Export-to-CSV <a> render identically. */
#keyword-shuffle-actions .btn-rv {
  font-weight: bold;
  line-height: 1.2;
}

/* === "Results updated" flash — soft brand-tinted wash that fades out.
   Gated behind prefers-reduced-motion; JS adds .is-updated only on real change. */
@media (prefers-reduced-motion: no-preference) {
  .keyword-shuffle__lists.is-updated {
    animation: ks-results-flash 0.5s ease-out;
  }
  @keyframes ks-results-flash {
    from { background-color: rgba(0, 84, 76, 0.14); }
    to   { background-color: transparent; }
  }
}

/* === Responsive ======================================================= */
@media (max-width: 625px) {
  .keyword-shuffle__step,
  .keyword-shuffle__intro {
    padding: 16px;
  }
  .keyword-shuffle__inputs {
    flex-direction: column;
  }
  .keyword-shuffle__input {
    flex-basis: auto;
    width: 100%;
  }
  #keyword-shuffle-actions {
    flex-direction: column;
    align-items: stretch;
  }
  #keyword-shuffle-actions .btn-rv {
    text-align: center;
    padding: 16px;
  }
}

@media screen and (max-width: 993px) {
  .keyword-box {
    border-radius: 0 !important;
  }
}