/* TravelKon Country Filter
   Scoped to .tkcf-* so nothing here can leak into Astra or Elementor.

   Palette and radii follow the mega-menu panel, which is the site's existing
   answer for "pick from a long list of countries". Its tokens are scoped to
   .tkmm-panel rather than :root, so they are restated here with the same values
   and inherited when that stylesheet is present. */

.tkcf{
  --tkcf-orange:var(--tkmm-orange,#FFA016);
  --tkcf-orange-deep:var(--tkmm-orange-deep,#F26522);
  /*
   * Brand orange fails AA as text, and the usual derived #BA4F18 only passes on
   * white and cream: it drops to 3.9:1 on the deeper cream this component uses
   * for locked chips and chosen rows. This shade clears 4.5:1 on every surface
   * here (5.9 white, 5.3 cream, 4.6 cream-deep, 5.2 on the count badge) and
   * carries white text at 5.9:1 when it is used as a fill. One token, no
   * per-surface exceptions to get wrong later.
   */
  --tkcf-orange-text:#A8460F;
  --tkcf-orange-text-strong:#8F3D0E;
  --tkcf-ink:var(--tkmm-ink,#282827);
  --tkcf-ink-60:var(--tkmm-ink-60,#63625f);
  --tkcf-cream:var(--tkmm-cream,#FFF0D0);
  --tkcf-cream-deep:var(--tkmm-cream-deep,#FFE0A3);
  --tkcf-cream-line:var(--tkmm-cream-line,#F2C47C);
  --tkcf-line:var(--tkmm-line,#E8E1D8);
  --tkcf-white:var(--tkmm-white,#FFFEFC);

  margin:0 0 22px;
  color:var(--tkcf-ink);
  font-size:16px;
  line-height:1.5;
  text-align:left;
}
.tkcf *,.tkcf *::before,.tkcf *::after{box-sizing:border-box}

/* ---------- bar ----------
   One row on desktop, two on narrow screens. The whole point of the component
   is that the archive header stops being a stack of separate controls. */
.tkcf-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 18px;
  padding:0 0 14px;
  border-bottom:1px solid var(--tkcf-line);
}

.tkcf-chips{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  min-width:0;
  flex:1 1 auto;
}

.tkcf-meta{
  display:flex;
  align-items:center;
  gap:14px;
  margin-left:auto;
  flex:0 0 auto;
}

/* ---------- chips ---------- */
.tkcf-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:36px;
  padding:5px 13px;
  border-radius:999px;
  border:1px solid var(--tkcf-cream-line);
  background:var(--tkcf-cream);
  color:var(--tkcf-ink);
  font-size:15px;
  font-weight:500;
  line-height:1.3;
  text-decoration:none;
  white-space:nowrap;
}

/* The archive's own country. It states where you are rather than offering to
   remove itself, so it carries no control and no pointer affordance. */
.tkcf-chip.is-locked{
  background:var(--tkcf-cream-deep);
  border-color:var(--tkcf-cream-line);
  font-weight:600;
}

.tkcf-chip.is-removable{transition:background .15s ease,border-color .15s ease}
.tkcf-chip.is-removable:hover,
.tkcf-chip.is-removable:focus-visible{
  background:var(--tkcf-cream-deep);
  border-color:var(--tkcf-orange);
  color:var(--tkcf-ink);
}
.tkcf-chip:focus-visible,
.tkcf-add:focus-visible,
.tkcf-option:focus-visible,
.tkcf-reset:focus-visible,
.tkcf-apply:focus-visible,
.tkcf-panel-close:focus-visible,
.tkcf-search-input:focus-visible{
  outline:2px solid var(--tkcf-orange-deep);
  outline-offset:2px;
}

.tkcf-chip-x{
  width:15px;height:15px;
  margin:0 -3px 0 1px;
  color:var(--tkcf-ink-60);
  flex:none;
}
.tkcf-chip.is-removable:hover .tkcf-chip-x{color:var(--tkcf-orange-text)}

/* Emoji flags, matching the mega menu. A fixed box keeps names aligned when a
   country has no flag to show. */
.tkcf-flag{
  width:20px;
  flex:none;
  font-size:16px;
  line-height:1;
  text-align:center;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}

/* ---------- add trigger ---------- */
.tkcf-picker{position:relative;display:inline-block}
.tkcf-picker>summary{list-style:none;cursor:pointer}
.tkcf-picker>summary::-webkit-details-marker{display:none}
.tkcf-picker>summary::marker{content:""}

.tkcf-add{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:36px;
  padding:5px 14px;
  border-radius:999px;
  border:1px dashed var(--tkcf-cream-line);
  background:transparent;
  color:var(--tkcf-orange-text);
  font-size:15px;
  font-weight:600;
  white-space:nowrap;
  transition:background .15s ease,border-color .15s ease;
}
.tkcf-add:hover{background:var(--tkcf-cream);border-color:var(--tkcf-orange)}
.tkcf-picker[open]>.tkcf-add{
  background:var(--tkcf-cream);
  border-style:solid;
  border-color:var(--tkcf-orange);
}
.tkcf-icon{flex:none}

/* WooLentor prints its own "Showing all N results" from inside its archive
   template, so PHP cannot unhook it and the toolbar would state the same
   number twice. Hidden in CSS as well as script because WP Rocket delays this
   plugin's JavaScript until first interaction, and a duplicate count that
   disappears a moment later reads as a glitch. */
body:has(.tkcf) .woocommerce-result-count{display:none}

/* ---------- count and sort ---------- */
.tkcf-count{
  margin:0;
  font-size:15px;
  color:var(--tkcf-ink-60);
  font-variant-numeric:tabular-nums;
  transition:opacity .18s ease;
}
.tkcf-count.is-busy{opacity:.45}
.tkcf-count strong{color:var(--tkcf-ink);font-weight:600}

.tkcf-reset{
  font-size:14px;
  color:var(--tkcf-ink-60);
  text-decoration:underline;
  text-underline-offset:3px;
}
.tkcf-reset:hover{color:var(--tkcf-orange-text)}

/* The archive's own sort control is replaced, not restyled. Relocating it into
   this bar stripped the box and arrow the theme gave it from its old position,
   and those theme rules outrank anything scoped here. */
body:has(.tkcf) .woocommerce-ordering{display:none}

/* ---------- sort ---------- */
.tkcf-sort{position:relative;flex:0 0 auto;isolation:isolate}
.woocommerce-multi-currency.tkcf-currency-with-sort,
.wmc-currency.tkcf-currency-with-sort,
.wmc-currency-wrapper.tkcf-currency-with-sort{
  position:relative;
  z-index:100001;
  display:inline-flex !important;
  width:max-content !important;
  max-width:100%;
  align-items:center;
  flex-wrap:nowrap;
  gap:10px;
  overflow:visible !important;
}
.tkcf-sort--currency-adjacent{display:inline-block;margin:0;vertical-align:middle}
.tkcf-sort>summary{list-style:none;cursor:pointer}
.tkcf-sort>summary::-webkit-details-marker{display:none}
.tkcf-sort>summary::marker{content:""}

.tkcf-sort-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:38px;
  min-height:38px;
  padding:0 12px;
  border-radius:5px;
  border:1px solid #d9d9d9;
  background:#fff !important;
  color:#4a4a4a;
  font-size:15px;
  font-weight:400;
  white-space:nowrap;
  transition:border-color .15s ease,background .15s ease;
}
.tkcf-sort-btn:hover{border-color:#bdbdbd;background:#fff}
.tkcf-sort[open]>.tkcf-sort-btn{border-color:#bdbdbd;background:#fff}
.tkcf-sort-btn:focus-visible{outline:2px solid #F26522;outline-offset:2px}
.tkcf-chevron{width:14px;height:14px;color:#63625f;transition:transform .15s ease}
.tkcf-sort[open] .tkcf-chevron{transform:rotate(180deg)}

.tkcf-sort-list{
  position:absolute;
  top:calc(100% + 6px);
  bottom:auto;
  right:0;
  z-index:100002;
  min-width:270px;
  max-width:calc(100vw - 32px);
  margin:0;padding:6px;
  list-style:none;
  background:#fff !important;
  border:1px solid #d9d9d9;
  border-radius:8px;
  box-shadow:0 8px 24px rgba(40,40,39,.16);
}
.tkcf-sort:not([open])>.tkcf-sort-list{display:none}
.tkcf-sort[open]>.tkcf-sort-list{display:block}
.tkcf-sort-list li{margin:0}

.tkcf-sort-option{
  display:block;
  min-height:38px;
  padding:8px 12px;
  border-radius:4px;
  color:#3f3f3f;
  font-size:15px;
  line-height:22px;
  text-decoration:none;
  white-space:nowrap;
}
.tkcf-sort-option:hover{background:#f5f5f5;color:#282827}
.tkcf-sort-option:focus-visible{outline:2px solid #F26522;outline-offset:-2px}
.tkcf-sort-option.is-active{background:#ff9850;color:#fff;font-weight:600}
.tkcf-sort-option.is-active::before{content:'✓';display:inline-block;width:20px;margin-right:2px;color:#fff}

/* Restyled because moving it is what broke it: the theme dresses this select
   through rules tied to its original parent, so relocating it left transparent
   text with no box and, since appearance is already none, no arrow either.
   The declarations are forced because those theme rules are more specific than
   anything scoped to this component, and a half-applied restyle is worse than
   either state on its own. */
.tkcf .tkcf-sort form.woocommerce-ordering select,
.tkcf .tkcf-sort form.woocommerce-ordering select.orderby{
  -webkit-appearance:none !important;
  appearance:none !important;
  box-sizing:border-box !important;
  height:36px !important;
  min-height:36px !important;
  width:auto !important;
  max-width:210px !important;
  margin:0 !important;
  padding:0 34px 0 14px !important;
  border:1px solid var(--tkcf-line) !important;
  border-radius:999px !important;
  background-color:var(--tkcf-white) !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6.5l4 4 4-4' fill='none' stroke='%2363625f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 11px center !important;
  background-size:14px 14px !important;
  color:var(--tkcf-ink) !important;
  font-size:15px !important;
  line-height:34px !important;
  box-shadow:none !important;
  cursor:pointer;
}
.tkcf .tkcf-sort form.woocommerce-ordering select:hover{
  border-color:var(--tkcf-cream-line) !important;
  background-color:var(--tkcf-cream) !important;
}
.tkcf .tkcf-sort form.woocommerce-ordering select:focus-visible{
  outline:2px solid var(--tkcf-orange-deep);
  outline-offset:2px;
}

/* ---------- panel ---------- */
.tkcf-panel{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  z-index:9999;
  width:min(390px,calc(100vw - 32px));
  padding:16px;
  background:var(--tkcf-white);
  border:1px solid var(--tkcf-cream-line);
  border-radius:18px;
  box-shadow:0 10px 28px rgba(40,40,39,.12);
}

.tkcf-panel-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.tkcf-panel-title{margin:0;font-size:16px;font-weight:600;flex:1 1 auto}

/* Width and padding are forced for the same reason as the search input: the
   theme gives every button a minimum width, which stretched this to 80px. */
.tkcf .tkcf-panel-close{
  display:none;
  align-items:center;justify-content:center;
  width:34px !important;
  min-width:34px !important;
  height:34px !important;
  min-height:34px !important;
  padding:0 !important;
  flex:none;
  border:0 !important;
  border-radius:999px !important;
  background:var(--tkcf-cream) !important;
  color:var(--tkcf-ink-60) !important;
  box-shadow:none !important;
  cursor:pointer;
}

.tkcf-panel-note{
  margin:0 0 12px;
  font-size:13.5px;
  line-height:1.45;
  color:var(--tkcf-ink-60);
}

.tkcf-search{position:relative;margin-bottom:10px}
.tkcf-search-icon{
  position:absolute;
  left:13px;top:50%;
  transform:translateY(-50%);
  width:17px;height:17px;
  color:var(--tkcf-ink-60);
  pointer-events:none;
}
/* Themes style bare inputs and buttons globally and more specifically than
   anything scoped here, so the few properties that decide this control's shape
   are forced. Measured against the live theme: without them the padding
   collapses to 11px and the magnifier sits on top of the placeholder. */
.tkcf .tkcf-search-input{
  width:100% !important;
  height:44px !important;
  min-height:44px !important;
  padding:0 14px 0 38px !important;
  border:1.5px solid var(--tkcf-orange) !important;
  border-radius:10px !important;
  background:var(--tkcf-white) !important;
  color:var(--tkcf-ink) !important;
  font-size:15px !important;
  line-height:normal !important;
  box-shadow:none !important;
  -webkit-appearance:none;
  appearance:none;
}
.tkcf-search-input::placeholder{color:var(--tkcf-ink-60);opacity:1}
.tkcf-search-input::-webkit-search-cancel-button{-webkit-appearance:none}

.tkcf-options{
  list-style:none;
  margin:0;padding:0;
  max-height:min(46vh,340px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.tkcf-options li{margin:0}
.tkcf-options li+li{border-top:1px solid var(--tkcf-line)}

.tkcf-option{
  display:grid;
  grid-template-columns:20px 1fr auto;
  align-items:center;
  gap:0 11px;
  min-height:44px;
  padding:9px 8px;
  border-radius:10px;
  color:var(--tkcf-ink);
  font-size:15px;
  text-decoration:none;
}
.tkcf-option:hover{background:var(--tkcf-cream);color:var(--tkcf-ink)}
.tkcf-option-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Chosen but not yet applied, which only happens in the sheet. Touch has no
   hover, so a background tint alone would be ambiguous: the tick is what makes
   the row unmistakably chosen. */
.tkcf-option-check{display:none;width:18px;color:var(--tkcf-orange-text)}
.tkcf-option.is-active{background:var(--tkcf-cream-deep)}
.tkcf-option.is-active .tkcf-option-name{font-weight:600}

/* How many plans survive if this destination is added. It is the answer to
   "can I add this without losing everything", so it sits with the choice. */
.tkcf-option-count{
  font-size:12.5px;
  font-weight:600;
  color:var(--tkcf-orange-text);
  background:rgba(246,155,30,.18);
  border-radius:999px;
  padding:3px 9px;
  flex:none;
  font-variant-numeric:tabular-nums;
}

.tkcf-empty-search{
  margin:14px 4px 4px;
  font-size:14px;
  color:var(--tkcf-ink-60);
}

.tkcf-panel-foot:empty{display:none}
/* The site's primary button is white on orange, but white on the brand orange
   is 2:1. Same form, same hue, at a contrast the main call to action on a phone
   in daylight actually needs. */
.tkcf-apply{
  display:none;
  width:100%;
  min-height:48px;
  margin-top:12px;
  border:0;border-radius:999px;
  background:var(--tkcf-orange-text);
  color:#fff;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
}
.tkcf-apply:hover{background:var(--tkcf-orange-text-strong)}

/* ---------- grid feedback ----------
   Cards the new selection cannot keep fade out as soon as the choice is made,
   before the server has answered, so the click feels resolved immediately. */
.tkcf-card-out{
  opacity:.25;
  filter:saturate(.35);
  transition:opacity .18s ease,filter .18s ease;
}

/* ---------- narrow screens ----------
   The picker becomes a bottom sheet: a long list is easier to work through from
   the thumb end of the screen, and it stops the popover from being clipped by
   the archive's own overflow. */
@media (max-width:781px){
  .tkcf-bar{gap:10px 12px;padding-bottom:12px}
  .tkcf-chips{width:100%}

  /* The sentence gets the line to itself rather than being squeezed into a
     third of it beside two controls, where "5 plans cover both destinations"
     wrapped to three lines. Clear and the sort pill share the line below. */
  .tkcf-meta{width:100%;margin-left:0;flex-wrap:wrap;gap:8px 14px}
  .tkcf-count{flex:1 1 100%}
  .tkcf-sort{margin-left:auto}
  .woocommerce-multi-currency.tkcf-currency-with-sort,
  .wmc-currency.tkcf-currency-with-sort,
  .wmc-currency-wrapper.tkcf-currency-with-sort{
    width:100% !important;
    flex-wrap:nowrap;
    justify-content:space-between;
    gap:8px;
  }
  .tkcf-sort-list{max-height:60vh;overflow-y:auto;overscroll-behavior:contain}

  .tkcf-picker{position:static}

  .tkcf-panel{
    position:fixed;
    inset:auto 0 0 0;
    top:auto;
    /* Currency and sort deliberately sit above the product grid so their
       menus are never hidden by cards. The destination picker is a modal
       sheet, so it must sit above those persistent controls as well. */
    z-index:2147483000;
    width:100%;
    max-height:86vh;
    display:flex;
    flex-direction:column;
    padding:18px 16px calc(16px + env(safe-area-inset-bottom));
    border-radius:20px 20px 0 0;
    border-width:1px 0 0;
    box-shadow:0 -8px 30px rgba(40,40,39,.18);
    animation:tkcf-sheet .22s cubic-bezier(.16,1,.3,1);
  }

  /* Dimmed backdrop, drawn behind the sheet by the sheet itself so the
     disclosure keeps owning the open state. */
  .tkcf-panel::before{
    content:"";
    position:fixed;
    inset:0;
    background:rgba(40,40,39,.34);
    z-index:-1;
  }

  /* Keep the currency/sort row behind the modal backdrop while the picker is
     open. This is also a fallback for themes that create a separate stacking
     context around the archive header. */
  body:has(.tkcf-picker[open]) .woocommerce-multi-currency.tkcf-currency-with-sort,
  body:has(.tkcf-picker[open]) .wmc-currency.tkcf-currency-with-sort,
  body:has(.tkcf-picker[open]) .wmc-currency-wrapper.tkcf-currency-with-sort{
    z-index:auto;
  }

  .tkcf .tkcf-panel-close{display:inline-flex !important}
  .tkcf-panel-title{font-size:17px}
  /* The sheet keeps the height it had when opened. Searching may leave one
     row, but that must not collapse the sheet into the controls behind it. */
  .tkcf-panel[data-tkcf-height-locked]{
    height:var(--tkcf-panel-height);
    min-height:var(--tkcf-panel-height);
  }
  .tkcf-options{max-height:none;min-height:0;flex:1 1 auto;overflow-y:auto}

  /* The tick column is reserved on every row rather than added to the chosen
     one, so choosing a destination cannot shift the list under the thumb. */
  .tkcf-option{padding:11px 8px;grid-template-columns:20px 1fr auto 18px}
  .tkcf-option-check{display:block;visibility:hidden}
  .tkcf-option.is-active .tkcf-option-check{visibility:visible}
}

@keyframes tkcf-sheet{
  from{transform:translateY(14px);opacity:.4}
  to{transform:translateY(0);opacity:1}
}

@media (prefers-reduced-motion:reduce){
  .tkcf-panel{animation:none}
  .tkcf-chip,.tkcf-add,.tkcf-count,.tkcf-card-out{transition:none}
}