/* ==========================================================================
   se-keys.com — Product comparison table (Office / Windows / antivirus)
   Rewritten 2026-09-08.

   Replaces the old float/`col-lg-3` layout, which broke as soon as a
   comparison had more than 3 plans: the 4th column wrapped onto a second
   row with no feature labels beside it (measured 2319px tall on
   /ms-office-comparison/). This file rebuilds the same markup as a single
   CSS grid whose rows are shared by every column via `subgrid`, so cells
   line up by content instead of by hand-tuned pixel heights.

   Markup is unchanged — it is still emitted by
   function-files/function-shortcode.php and re-emitted by the two AJAX
   handlers in function-files/function-ajax.php, so all three render paths
   are styled by these rules.

   Loaded after assets/css/style.css and style-new.css (see
   sekeys_enqueue_styles() in functions.php); `!important` appears only
   where the legacy rules it overrides are themselves `!important`.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Neutralise the legacy highlight.

   style.css marks the "best value" plan positionally
   (`.spacification-plan:nth-child(3)` + an `::after` carrying the Hebrew
   label). That is a coincidence of column order — it moved the moment the
   empty "לא נמצאו נתונים" column stopped being rendered. The winner is now
   chosen in PHP by actual discount and flagged with `.is-recommended`.
   -------------------------------------------------------------------------- */

.pricing-plan .spacification-plan:nth-child(3) {
  width: auto !important;
  max-width: none !important;
  border: 0;
  box-shadow: none;
}

.pricing-plan .spacification-plan:nth-child(3)::after {
  content: none;
  display: none;
}

.pricing-plan {
  --sk-green: #64ac57;
  --sk-green-dark: #4f8f44;
  --sk-green-soft: #eff7ee;
  --sk-ink: #1f1f1f;
  --sk-muted: #6b7280;
  --sk-line: #e6eae5;
  --sk-stripe: #f5f7f4;
  --sk-radius: 16px;
  --sk-row-pad: 14px;
  --sk-label-col: 210px;

  position: relative;
  padding-top: 0 !important;
  color: var(--sk-ink);
}

/* --------------------------------------------------------------------------
   1. Header strip: "תוכנית תמחור" + the version selector
   -------------------------------------------------------------------------- */

.pricing-plan .pricong-top {
  margin-bottom: 18px;
}

.pricing-plan .pricong-top .row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 20px;
  margin: 0;
}

.pricing-plan .pricong-top .row > .col-lg-6 {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
  padding: 0;
}

.pricing-plan .pricong-top h2 {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.25;
  height: auto;
  margin: 0;
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
}

.pricing-plan .compair-filter {
  display: flex !important;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  min-width: 0;
}

.pricing-plan .compair-filter h2 {
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 600;
  color: var(--sk-muted);
  white-space: nowrap;
}

/* Grow into whatever the label leaves, and drop to its own full-width line
   rather than clipping when there is not enough room — at 320px the label plus
   a legible "Windows 10 - ווינדוס 10" do not fit side by side. */
.pricing-plan .compair-filter select.form-select {
  flex: 1 1 200px;
  min-width: 0;
}

/* One styled control for both selects (version picker + per-plan variant). */
.pricing-plan select.form-select {
  -webkit-appearance: none;
  appearance: none;
  max-width: 100% !important;
  width: auto;
  min-width: 0;
  float: none !important;
  margin: 0;
  height: 42px;
  padding: 0 14px;
  padding-inline-end: 34px;
  border: 1px solid var(--sk-line);
  border-radius: 10px;
  background-color: #fff;
  /* caret, drawn inline so it needs no extra request */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 12px center;
  box-shadow: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--sk-ink);
  line-height: 40px;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.pricing-plan select.form-select:hover {
  border-color: #c9d6c6;
}

.pricing-plan select.form-select:focus-visible {
  outline: none;
  border-color: var(--sk-green);
  box-shadow: 0 0 0 3px rgba(100, 172, 87, .18);
}

.pricing-plan .pricong-top select.form-select {
  text-align: right;
  width: auto;
  max-width: 260px !important;
  margin-top: 0;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   2. The grid.

   `.com-main .row` owns the row tracks; every column is a subgrid that
   spans all of them, so a tall label ("ניתן להעברה בין מחשבים") pushes its
   whole row down in every column at once. 20 tracks is headroom — the
   longest config today (Windows) needs 12, and unused `auto` tracks
   collapse to zero height.
   -------------------------------------------------------------------------- */

.pricing-plan .com-main {
  border: 0 !important;
  border-radius: var(--sk-radius);
  box-shadow: none;
  margin: 0;
  padding-top: 16px; /* room for the "הכי משתלם" pill to sit above the card */
  overflow: visible;
  text-align: center;
}

.pricing-plan .com-main .row {
  position: relative;
  display: grid;
  grid-template-columns: var(--sk-label-col);
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  grid-template-rows: repeat(20, auto);
  width: auto !important;
  max-width: 100%;
  margin: 0;
  justify-content: initial;
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-radius);
  background: #fff;
  box-shadow: 0 6px 24px rgba(31, 41, 55, .06);
}

.pricing-plan .com-main .row > .col-lg-3 {
  display: grid;
  grid-row: 1 / -1;
  grid-template-rows: subgrid;
  grid-template-columns: minmax(0, 1fr);
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  border: 0 !important;
  position: relative;
}

/* These two wrappers exist only to group cells in the PHP output; drop them
   out of the box tree so their children become rows of the subgrid. */
.pricing-plan .spacification-name,
.pricing-plan .changing-data-filter {
  display: contents;
}

/* --------------------------------------------------------------------------
   3. Cells
   -------------------------------------------------------------------------- */

.pricing-plan .com-main .bp,
.pricing-plan .spacification-con.bp,
.pricing-plan .spacification-plan-2.bp,
.pricing-plan .spacification-plan-9.bp,
.pricing-plan .spacification-plan-1.bp,
.pricing-plan .emp-sec.bp {
  height: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  padding: var(--sk-row-pad) 14px;
  border: 0;
  border-top: 1px solid var(--sk-line);
  font-size: 15px;
  line-height: 1.45;
}

/* Row 1 (plan name) and row 2 (product + variant) carry no top rule — they
   read as the column's header block. */
.pricing-plan .emp-sec.bp,
.pricing-plan .spacification-plan-1.bp,
.pricing-plan .spa-con-img.bp,
.pricing-plan .spacification-plan-2.bp {
  border-top: 0;
}

/* Feature-name column */
.pricing-plan .spacification-sec {
  background: #fff;
  border-inline-end: 1px solid var(--sk-line) !important;
  /* first grid column, so in RTL it is the right-hand edge of the card */
  border-start-start-radius: var(--sk-radius);
  border-end-start-radius: var(--sk-radius);
}

.pricing-plan .spacification-name h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #374151;
  line-height: 1.4;
}

.pricing-plan .spacification-sec .spacification-con.bp {
  align-items: flex-start;
  text-align: start;
  padding-inline: 18px;
}

.pricing-plan .spacification-con.bp.spa-con-img {
  display: flex;
  gap: 8px;
  height: auto;
  padding-block: 10px 18px;
  align-items: center;
  justify-content: center;
}

.pricing-plan .spacification-name img {
  margin: 0;
  max-height: 34px;
  width: auto;
}

.pricing-plan .spacification-con.bp.spa-con-img h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--sk-muted);
}

/* Zebra striping. Feature i is child (i+2) of `.spacification-name` and
   child i of `.changing-data-filter`, so the two share parity. */
.pricing-plan .spacification-name > .spacification-con:nth-child(even):not(.spa-con-img):not(:last-child),
.pricing-plan .changing-data-filter > div:nth-child(even) {
  background: var(--sk-stripe);
}

.pricing-plan .spacification-plan {
  text-align: center;
  background: #fff;
}

.pricing-plan .spacification-plan:last-child {
  border-start-end-radius: var(--sk-radius);
  border-end-end-radius: var(--sk-radius);
}

/* Plan title */
.pricing-plan .spacification-plan-1.bp {
  padding-top: 26px;
  padding-bottom: 6px;
}

.pricing-plan .spacification-plan h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.3;
  height: auto;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Product name + variant select */
.pricing-plan .spacification-plan-2.bp {
  gap: 10px;
  padding-top: 6px;
  padding-bottom: 20px;
}

.pricing-plan .spacification-plan-2 a {
  text-decoration: none;
}

.pricing-plan .spacification-plan p.product-name {
  max-width: 100%;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  height: auto;
  min-height: 2.9em;
  color: var(--sk-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .15s ease;
}

.pricing-plan .spacification-plan-2 a:hover p.product-name {
  color: var(--sk-green-dark);
}

.pricing-plan select.varient_change {
  max-width: 100% !important;
  width: 100%;
  height: 40px;
  line-height: 38px;
  font-size: 12.5px;
  font-weight: 500;
  /* Product titles are long and mix Hebrew with Latin. Centred (the cell's
     default) the text overflowed both ends and was sliced mid-word; an
     ellipsis landed mid-string because of the bidi run order. Anchoring to the
     start edge keeps the Hebrew — the part that identifies the variant — and
     lets the Latin tail run off. The full text is still shown when the list
     opens, and in full above the control. */
  text-align: start;
  text-overflow: clip;
  white-space: nowrap;
  overflow: hidden;
  color: #4b5563;
}

.pricing-plan select.varient_change option {
  color: var(--sk-ink);
}

/* A single-option dropdown is not a choice — hide it, but keep the row
   height stable across columns via the subgrid. */
@supports selector(:has(*)) {
  .pricing-plan select.varient_change:not(:has(option + option)) {
    display: none;
  }
}

/* Feature values */
.pricing-plan .spacification-plan-4.bp {
  font-size: 15px;
  font-weight: 500;
  color: #333;
}

.pricing-plan .spacification-plan-4 span {
  display: block;
}

.pricing-plan .spacification-plan-4 img {
  width: 20px;
  height: 20px;
  max-width: none !important;
  display: block;
  margin: 0 auto;
}

/* Inline "included" tick — see sekeys_comparison_check_icon(). */
.pricing-plan .sk-yes {
  display: block;
  line-height: 0;
  color: var(--sk-green);
}

.pricing-plan .sk-yes svg {
  display: block;
  width: 22px;
  height: 22px;
  margin: 0 auto;
}

/* An absent value reads like a real one when it is set in the same ink as the
   rest of the column; mute it so a glance down a column picks out what a plan
   actually includes. */
.pricing-plan .spacification-plan-4 span.sk-empty {
  color: #b6bcc2;
  font-weight: 400;
  font-size: 17px;
  line-height: 1;
}

.pricing-plan .spacification-plan-3.bp .compatability-items {
  background: none;
  max-width: 100%;
  margin: 0;
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.pricing-plan .spacification-plan-3 img {
  height: 22px;
  width: auto;
}

/* --------------------------------------------------------------------------
   4. Price + call to action
   -------------------------------------------------------------------------- */

.pricing-plan .spacification-plan-9.bp {
  display: flex;
  gap: 12px;
  padding-top: 22px;
  padding-bottom: 26px;
  margin-top: auto;
}

.pricing-plan h3.varient_price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 0;
  font-size: 30px;
  font-weight: 800;
  color: var(--sk-green);
  line-height: 1.1;
}

.pricing-plan h3.varient_price del {
  order: -1;
  font-size: 14px;
  font-weight: 500;
  color: #9ca3af;
  text-decoration: line-through;
}

/* Variable products (the antivirus tables) price as
   `<span class="from">החל מ</span><span class="amount">…</span>`. The column
   flex puts the prefix on its own line, so size it as a caption instead of
   letting it inherit the 30px price. */
.pricing-plan h3.varient_price .from {
  order: -1;
  font-size: 13px;
  font-weight: 500;
  color: var(--sk-muted);
  line-height: 1.5;
}

.pricing-plan h3.varient_price del span {
  font-size: inherit;
  padding: 0;
  color: inherit;
}

.pricing-plan h3.varient_price ins {
  font-size: 32px;
  font-weight: 800;
  color: var(--sk-green);
  text-decoration: none !important;
  background: none;
}

.pricing-plan h3.varient_price ins span,
.pricing-plan h3.varient_price > span.woocommerce-Price-amount {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  padding: 0;
}

.pricing-plan h3.varient_price .woocommerce-Price-currencySymbol {
  font-size: .72em;
  font-weight: 700;
  padding: 0 2px;
}

.pricing-plan .sekeys-save-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--sk-green-soft);
  color: var(--sk-green-dark);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
}

.pricing-plan .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.pricing-plan a.add-to-cart {
  width: 100%;
  max-width: 200px;
  margin: 0;
  height: 46px;
  line-height: 44px;
  border-radius: 10px;
  border: 1px solid var(--sk-green);
  background-color: var(--sk-green);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.pricing-plan a.add-to-cart:hover,
.pricing-plan a.add-to-cart:focus-visible {
  background-color: var(--sk-green-dark);
  border-color: var(--sk-green-dark);
  color: #fff;
  box-shadow: 0 6px 16px rgba(100, 172, 87, .32);
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   5. The recommended plan
   -------------------------------------------------------------------------- */

.pricing-plan .spacification-plan.is-recommended {
  background: linear-gradient(180deg, var(--sk-green-soft) 0%, #fff 190px);
  border-radius: var(--sk-radius);
  z-index: 1;
}

/* Ring drawn as an absolutely-positioned overlay rather than a border: a real
   border would grow this column's box and break the shared subgrid rows, and
   an inset shadow gets painted over by the cells' own backgrounds. Being
   out of flow, it takes no row track. */
.pricing-plan .spacification-plan.is-recommended::after {
  content: '';
  position: absolute;
  inset: 0;
  /* the legacy `:nth-child(3)::after` sized itself 8% x 40px on a green
     ground; reset the whole box, not just the text */
  width: auto;
  height: auto;
  background: none;
  border: 2px solid var(--sk-green);
  border-radius: var(--sk-radius);
  box-shadow: none;
  font-size: 0;
  line-height: 0;
  pointer-events: none;
  z-index: 2;
}

.pricing-plan .spacification-plan.is-recommended::before {
  content: attr(data-badge);
  position: absolute;
  top: -13px;
  inset-inline-start: 50%;
  transform: translateX(50%);
  padding: 4px 16px;
  border-radius: 999px;
  background: var(--sk-green);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(100, 172, 87, .35);
  z-index: 2;
}

.pricing-plan .spacification-plan.is-recommended .spacification-plan-4.bp,
.pricing-plan .spacification-plan.is-recommended .spacification-plan-9.bp {
  border-top-color: rgba(100, 172, 87, .22);
}

/* The stripe would fight the highlight gradient. */
.pricing-plan .spacification-plan.is-recommended .changing-data-filter > div:nth-child(even) {
  background: rgba(100, 172, 87, .07);
}

/* --------------------------------------------------------------------------
   6. Narrow screens — stack each plan as its own card.

   Side-by-side would need the feature column pinned while the plans scroll,
   and `position: sticky` cannot do that here: a grid item's containing block
   is its own grid area, so it has nowhere to slide. Rather than fight it,
   below 900px the feature column is dropped and every value cell shows its
   own label, which PHP puts in `data-label` on each cell.
   -------------------------------------------------------------------------- */

@media (max-width: 899px) {
  .pricing-plan {
    --sk-row-pad: 12px;
  }

  .pricing-plan .com-main {
    padding-top: 14px;
  }

  .pricing-plan .com-main .row {
    display: block;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
  }

  .pricing-plan .com-main .row > .col-lg-3 {
    display: block;
    grid-row: auto;
    grid-template-rows: none;
  }

  /* The feature column only exists to label the rows; the cards carry their
     own labels, so it would just repeat itself. */
  .pricing-plan .com-main .row > .spacification-sec {
    display: none;
  }

  .pricing-plan .changing-data-filter {
    display: block;
  }

  .pricing-plan .spacification-plan {
    margin-bottom: 20px;
    border: 1px solid var(--sk-line);
    border-radius: var(--sk-radius);
    background: #fff;
    box-shadow: 0 4px 16px rgba(31, 41, 55, .06);
    overflow: hidden;
  }

  .pricing-plan .spacification-plan:last-child {
    margin-bottom: 0;
    border-radius: var(--sk-radius);
  }

  .pricing-plan .spacification-plan.is-recommended {
    margin-top: 24px;
    border-color: var(--sk-green);
    overflow: visible;
  }

  .pricing-plan .spacification-plan.is-recommended::after {
    border-width: 2px;
  }

  /* label on the start edge, value on the end edge */
  .pricing-plan .spacification-plan-4.bp,
  .pricing-plan .spacification-plan-3.bp {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    text-align: start;
    padding-inline: 18px;
  }

  .pricing-plan .spacification-plan-4[data-label]::before,
  .pricing-plan .spacification-plan-3[data-label]::before {
    content: attr(data-label);
    flex: 1 1 auto;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--sk-muted);
    text-align: start;
    line-height: 1.35;
  }

  .pricing-plan .spacification-plan-4 span {
    flex: 0 0 auto;
    text-align: end;
  }

  .pricing-plan .spacification-plan-4 img,
  .pricing-plan .spacification-plan-4 .sk-yes svg {
    margin: 0;
  }

  .pricing-plan .spacification-plan-3.bp .compatability-items {
    flex: 0 0 auto;
    justify-content: flex-end;
  }

  .pricing-plan .spacification-plan-2.bp {
    padding-bottom: 18px;
  }

  .pricing-plan .spacification-plan p.product-name {
    min-height: 0;
  }

  .pricing-plan select.varient_change {
    max-width: 340px !important;
  }

  .pricing-plan .spacification-plan-9.bp {
    background: var(--sk-stripe);
    padding-top: 20px;
    padding-bottom: 22px;
  }

  .pricing-plan .spacification-plan.is-recommended .spacification-plan-9.bp {
    background: rgba(100, 172, 87, .07);
  }

  .pricing-plan a.add-to-cart {
    max-width: 340px;
  }

  .pricing-plan .pricong-top h2 {
    font-size: 22px;
  }
}

/* 210px of feature column is a large share of a 900px table; hand some of it
   back to the plans before the layout has room to breathe. */
@media (min-width: 900px) and (max-width: 1100px) {
  .pricing-plan {
    --sk-label-col: 178px;
    --sk-row-pad: 13px;
  }
}

/* On a tablet a full-width card throws the label and its value to opposite
   ends of a 700px row. Cap it so the pair still reads as a pair. Three plans
   need roughly 900px to sit side by side, which is why the grid does not come
   back before then. */
@media (min-width: 600px) and (max-width: 899px) {
  /* `!important` because the grid block above clears max-width with one, to
     beat the fixed column widths in style.css. */
  .pricing-plan .com-main .row > .spacification-plan {
    max-width: 560px !important;
    margin-inline: auto;
  }
}

@media (max-width: 767px) {
  .pricing-plan .pricong-top .row {
    flex-direction: column;
    align-items: stretch;
  }

  .pricing-plan .pricong-top .row > .col-lg-6 {
    width: 100%;
  }

  .pricing-plan .compair-filter {
    justify-content: space-between;
    /* the picker drops to its own full-width line rather than clipping when
       the label and a long category name cannot share one */
    flex-wrap: wrap;
  }

  .pricing-plan .compair-filter h2 {
    font-size: 14px;
  }

  .pricing-plan .pricong-top select.form-select {
    /* fill the row rather than a fixed share of it — category names run from
       "Windows 11" to "Windows 10 - ווינדוס 10" */
    max-width: none !important;
    margin-top: 0;
  }

  .pricing-plan .pricong-top h2 {
    font-size: 20px;
  }

  .pricing-plan .spacification-plan h2 {
    font-size: 19px;
  }

  .pricing-plan .spacification-plan-4.bp,
  .pricing-plan .spacification-name h4 {
    font-size: 14px;
  }

  .pricing-plan h3.varient_price,
  .pricing-plan h3.varient_price ins {
    font-size: 28px;
  }

  .pricing-plan a.add-to-cart {
    max-width: 100%;
    height: 46px;
    line-height: 44px;
    font-size: 16px;
  }
}

/* --------------------------------------------------------------------------
   7. Fallback for engines without row `subgrid` (pre-2023 Chrome/Safari):
      go back to fixed row heights so columns still line up. Everything else
      above — the grid, the card, the colours — still applies.
   -------------------------------------------------------------------------- */

@supports not (grid-template-rows: subgrid) {
  .pricing-plan .com-main .row {
    grid-template-rows: none;
  }

  .pricing-plan .com-main .row > .col-lg-3 {
    grid-row: auto;
    grid-template-rows: none;
    align-content: start;
  }

  .pricing-plan .spacification-name,
  .pricing-plan .changing-data-filter {
    display: block;
  }

  .pricing-plan .com-main .bp {
    height: 74px;
    justify-content: center;
  }

  .pricing-plan .emp-sec.bp,
  .pricing-plan .spacification-plan-1.bp {
    height: 92px;
  }

  .pricing-plan .spacification-con.bp.spa-con-img,
  .pricing-plan .spacification-plan-2.bp {
    height: 140px;
  }

  .pricing-plan .spacification-plan-9.bp {
    height: 170px;
  }
}

/* Loading spinner shown by script.js while a select fires its AJAX call. */
.pricing-plan .loader {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  top: 0;
  width: 100%;
  background: rgba(255, 255, 255, .72);
  border-radius: var(--sk-radius);
  z-index: 5;
}

/* ==========================================================================
   "השוואת גרסאות" trigger on comparable category archives.
   Printed by sekeys_comparison_archive_cta(); opens the matching Elementor
   popup, which renders the same table as the standalone comparison pages.
   ========================================================================== */

.sekeys-compare-cta {
  display: flex;
  justify-content: flex-start;
  margin: 4px 0 18px;
}

.sekeys-compare-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 20px;
  border: 1.5px solid #64ac57;
  border-radius: 10px;
  background: #fff;
  color: #4f8f44;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.sekeys-compare-btn:hover,
.sekeys-compare-btn:focus-visible {
  background: #64ac57;
  color: #fff;
  box-shadow: 0 4px 14px rgba(100, 172, 87, .28);
}

.sekeys-compare-btn__icon {
  display: inline-flex;
  line-height: 0;
}

.sekeys-compare-btn__icon svg {
  display: block;
}

@media (max-width: 767px) {
  .sekeys-compare-cta {
    margin: 2px 0 14px;
  }

  .sekeys-compare-btn {
    width: 100%;
    justify-content: center;
    font-size: 15px;
  }
}