.elementor-3371 .elementor-element.elementor-element-8d6ccf6{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--overflow:hidden;--overlay-opacity:0.11;}.elementor-3371 .elementor-element.elementor-element-8d6ccf6:not(.elementor-motion-effects-element-type-background), .elementor-3371 .elementor-element.elementor-element-8d6ccf6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://kpop-showdown.de/wp-content/uploads/2025/10/Bar-Gradient-dark-reverse.jpg");background-position:center center;background-size:cover;}.elementor-3371 .elementor-element.elementor-element-8d6ccf6::before, .elementor-3371 .elementor-element.elementor-element-8d6ccf6 > .elementor-background-video-container::before, .elementor-3371 .elementor-element.elementor-element-8d6ccf6 > .e-con-inner > .elementor-background-video-container::before, .elementor-3371 .elementor-element.elementor-element-8d6ccf6 > .elementor-background-slideshow::before, .elementor-3371 .elementor-element.elementor-element-8d6ccf6 > .e-con-inner > .elementor-background-slideshow::before, .elementor-3371 .elementor-element.elementor-element-8d6ccf6 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-image:url("https://kpop-showdown.de/wp-content/uploads/2025/11/roman-budnikov-l_sk2UtCgog-unsplash-scaled.jpg");--background-overlay:'';}.elementor-3371 .elementor-element.elementor-element-91669d6{width:var( --container-widget-width, 90% );max-width:90%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 27px) 0px;padding:0px 0px 0px 0px;--container-widget-width:90%;--container-widget-flex-grow:0;}@media(max-width:767px){.elementor-3371 .elementor-element.elementor-element-91669d6{width:auto;max-width:auto;padding:0px 0px 0px 0px;}.elementor-3371 .elementor-element.elementor-element-2e25e01{width:100%;max-width:100%;padding:0px 0px 0px 0px;}.elementor-3371 .elementor-element.elementor-element-2e25e01.elementor-element{--align-self:center;}}@media(min-width:768px){.elementor-3371 .elementor-element.elementor-element-8d6ccf6{--content-width:1021px;}}@media(min-width:1025px){.elementor-3371 .elementor-element.elementor-element-8d6ccf6:not(.elementor-motion-effects-element-type-background), .elementor-3371 .elementor-element.elementor-element-8d6ccf6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}}/* Start custom CSS for shortcode, class: .elementor-element-91669d6 *//* ===============================
   K-POP SHOWDOWN – FINAL CLEAN AJAX VERSION
   =============================== */

/* ---- Root / Search ---- */
.kpop-events-root { width: 100%; }

/* ---- Search Form ---- */
.event-search-form {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
  width: 100%;
  max-width: 700px;
  margin-inline: auto;
}

.event-search-form input[type="text"] {
  flex: 1 1 280px;
  min-width: 180px;
  max-width: 400px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 15px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.event-search-form input::placeholder {
  color: rgba(255, 255, 255, .6);
}

/* ---- GEO Button (with label) ---- */
.event-search-form .geo-btn {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  height: 42px;
  border-radius: 999px;
  font-size: 20px;
  cursor: pointer;
  flex-shrink: 0;

  /* Liquid glass with 30% white overlay */
  background: rgba(255, 255, 255, 0.30);
  border: 1px solid rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow:
    inset 0 1px 3px rgba(255, 255, 255, 0.2),
    0 0 10px rgba(0, 0, 0, 0.18);
  color: #fff;
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
  isolation: isolate;
}

.event-search-form .geo-btn:hover {
  background: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px) scale(1.05);
  box-shadow:
    inset 0 1px 5px rgba(255, 255, 255, 0.25),
    0 0 12px rgba(255, 255, 255, 0.12);
}

.event-search-form .geo-btn.is-active {
  background: #fff;
  color: #000;
  box-shadow:
    inset 0 1px 6px rgba(255, 255, 255, 0.3),
    0 0 14px rgba(0, 0, 0, 0.25);
  transform: scale(1.04);
}

/* ---- Label beside the icon ---- */
.geo-label {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  opacity: 0.9;
}

/* Hide label on mobile */
@media (max-width: 768px) {
  .geo-label { display: none; }
}

/* ---- List ---- */
.events-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

/* Flex ordering: nearest first, then the rest, then pagination */
.events-list { display: flex; flex-direction: column; }
.events-list > .event-card           { order: 1; }   /* default */
.events-list > .event-card.geo-top   { order: 0; }   /* top 5 */
.events-list > .event-pagination     { order: 2; }   /* always last */

/* ---- Card ---- */
.event-card {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-radius: 20px;
  padding: 16px 18px;
  color: #fff;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .25);
  transition: transform 0.35s ease, opacity 0.35s ease;
}

.event-card-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.event-info {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 auto;
  min-width: 0;
}

/* ---- Date Box ---- */
.event-dateblock {
  text-align: center;
  background: rgba(255, 255, 255, .06);
  border-radius: 12px;
  padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .12);
  flex-shrink: 0;
}
.event-date {
  font-size: 24px;
  font-weight: 700;
  color: #E278FF;
  line-height: 1;
}
.event-time {
  font-size: 12px;
  color: rgba(255, 255, 255, .85);
  margin-top: 3px;
  letter-spacing: .3px;
}

/* ---- Title Card ---- */
.event-details {
  flex: 1 1 auto;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  min-width: 0;
}
.event-details a {
  display: block;
  background: rgba(255, 255, 255, .2);
  border-radius: 14px;
  padding: 10px 42px 10px 16px;
  color: #fff;
  text-decoration: none;
  transition: background .25s ease;
  width: 100%;
}
.event-details a:hover { background: rgba(255, 255, 255, .3); }
.event-title { margin: 0; line-height: 1.2; }
.event-city { display: block; font-size: 20px; font-weight: 800; }
.event-venue { display: block; margin-top: 2px; font-size: 15px; font-weight: 600; opacity: .9; }

/* ---- Arrow ---- */
.mobile-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: rgba(255, 255, 255, .85);
  pointer-events: none;
  transition: transform .25s ease;
}
.event-details a:hover .mobile-arrow {
  transform: translateY(-50%) translateX(3px);
}

/* ---- Address Hidden ---- */
.event-address { display: none !important; }

/* ---- Buttons ---- */
.event-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 0 0 auto;
  width: auto;
}
.event-btn,
.no-tickets,
.event-alarm {
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  color: #fff !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  font-size: 14px;
  padding: 0 16px;
  transition: transform .25s ease, background .25s ease;
}
.event-btn {
  background: linear-gradient(90deg, #E278FF, #A855F7);
  font-weight: 700;
}
.event-btn:hover { transform: scale(1.05); }
.no-tickets,
.event-alarm {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
}
.no-tickets:hover,
.event-alarm:hover {
  background: rgba(255, 255, 255, .12);
  transform: scale(1.03);
}

/* ---- Pagination ---- */
.event-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}
.event-pagination a,
.event-pagination span {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  background: rgba(255, 255, 255, .08);
  padding: 8px 14px;
  border-radius: 999px;
  transition: all .25s ease;
}
.event-pagination a:hover { background: #E278FF; color: #fff; }
.event-pagination .current { background: #E278FF; }

/* ---- Distance label (small + subtle) ---- */
.event-city .distance-label {
  margin-left: 4px;
  font-size: 11px !important;
  line-height: 1;
  font-weight: 500;
  opacity: .7;
  white-space: nowrap;
}

/* ===============================
   DESKTOP (unchanged, perfect)
   =============================== */
@media (min-width: 769px) {
  .event-card { padding: 12px 18px; }
  .event-card-inner { align-items: center; }
  .event-info { flex: 1; align-items: center; gap: 18px; }
  .event-dateblock { align-self: center; }
  .event-details a {
    min-height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .event-actions { width: auto; justify-content: flex-end; gap: 10px; }
  .event-actions .no-tickets,
  .event-actions .event-alarm,
  .event-actions .event-btn {
    flex: 0 0 auto;
    width: auto;
    padding: 10px 22px;
    height: auto;
  }
}

/* ===============================
   MOBILE (swapped + reduced gaps)
   =============================== */
@media (max-width: 768px) {
  .event-card { padding: 12px 12px; }
  .event-card-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  /* swap order and reduce gap between date and title */
  .event-info {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
  }

  .event-dateblock {
    height: 56px;
    padding: 0 10px;
    border-radius: 10px;
    min-width: 58px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .event-details a {
    min-height: 56px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 36px 10px 12px;
    border-radius: 12px;
  }

  .event-city { font-size: 18px; }
  .event-venue { font-size: 14px; }

  /* Reduce gap to buttons */
  .event-actions { margin-top: 8px; gap: 6px; width: 100%; }

  /* Two-button layout (no ticket link) */
  .event-actions.no-ticket { justify-content: space-between; }
  .event-actions.no-ticket .no-tickets,
  .event-actions.no-ticket .event-alarm {
    flex: 1 1 50%;
    height: 42px;
    font-size: 13.5px;
    padding: 0 10px;
  }
  .event-actions.no-ticket .event-alarm { padding: 0 8px; }

  /* Single ticket link => full width again */
  .event-actions.has-ticket {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .event-actions.has-ticket .event-btn {
    width: 100%;
    height: 46px;
    font-size: 14.5px;
  }

  /* Search form layout on mobile */
  .event-search-form {
    flex-direction: row;
    justify-content: center;
    gap: 8px;
    padding: 0 10px;
  }

  .event-search-form input[type="text"] {
    flex: 1 1 100%;
    max-width: none;
  }

  .event-search-form .geo-btn {
    padding: 0;
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
}

/* ===============================
   FINAL – GEO BUTTON (MOBILE FIX: HUG CONTENT)
   =============================== */

/* ---- Search Form ---- */
.event-search-form {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  margin-bottom: 22px;
  width: 100%;
  max-width: 700px;
  margin-inline: auto;
}

/* Input styling */
.event-search-form input[type="text"] {
  flex: 1 1 auto;
  min-width: 180px;
  max-width: 420px;
  font-size: 15px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.08);
  color: #fff;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.event-search-form input::placeholder { color: rgba(255,255,255,.6); }

/* ---- GEO BUTTON ---- */
.geo-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  background: rgba(255,255,255,0.3);
  border: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow:
    inset 0 1px 3px rgba(255,255,255,0.2),
    0 0 10px rgba(0,0,0,0.18);
  color: #fff;
  transition:
    transform .25s ease,
    background .25s ease,
    box-shadow .25s ease,
    color .25s ease;
  white-space: nowrap;
  width: auto;                    /* ensure button hugs text */
  min-width: unset;
}

.geo-btn:hover {
  background: rgba(255,255,255,0.4);
  transform: translateY(-1px) scale(1.05);
}

.geo-btn.is-active {
  background: #fff;
  color: #000;
}

.geo-btn.is-active .geo-label { color: #000; }

/* Label beside icon */
.geo-label {
  display: inline-block !important;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  opacity: 0.9;
  white-space: nowrap;
  transition: opacity 0.3s ease, color 0.25s ease;
}

.geo-btn:hover .geo-label { opacity: 1; }

/* ---- Mobile layout ---- */
@media (max-width: 768px) {
  .event-search-form {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 0 10px;
  }

  .event-search-form input[type="text"] {
    width: 100%;
    max-width: none;
  }

  /* Hug content & left align */
  .geo-btn {
    align-self: flex-start;
    height: auto !important;      /* override fixed 42px height */
    width: auto !important;       /* override fixed width */
    min-width: unset !important;
    padding: 8px 16px !important; /* content padding */
    font-size: 16px;
    border-radius: 999px;
  }

  .geo-label {
    font-size: 14px;
  }
}

/* ===============================
   FIX – Prevent Widget Collapse During Reorder or AJAX Updates
   =============================== */

/* Root container always grows with content */
#kpopEventsMount {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: stretch;
  justify-content: flex-start;
  transition: min-height 0.3s ease;
  min-height: 350px;              /* keeps area open even when empty */
  overflow: visible !important;   /* ensure pagination stays visible */
}

/* Inner list inherits natural height */
#kpopEventsMount .events-list {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  min-height: auto !important;    /* allow dynamic resizing */
}

/* Safety for smooth resizing on small screens */
@media (max-width: 768px) {
  #kpopEventsMount { min-height: 280px; }
}

/* ===============================
   MOBILE GEO BUTTON LEFT ALIGN FIX
   =============================== */
@media (max-width: 768px) {
  .event-search-form {
    flex-direction: column;
    align-items: flex-start;   /* left-align everything */
    justify-content: flex-start;
    gap: 6px;                  /* tighter spacing */
    margin-bottom: 14px;       /* reduced gap before first card */
    padding: 0 0px;
  }

  .event-search-form input[type="text"] {
    width: 100%;
    max-width: none;
  }

  /* Left-aligned pill under the input */
  .event-search-form .geo-btn {
    align-self: flex-start;
    padding: 8px 16px;
    height: auto;
    font-size: 16px;
    border-radius: 999px;
    margin-top: 4px;
    margin-bottom: -11px;
  }
}

/* ===============================
   MOBILE: stop horizontal shrink on AJAX
   =============================== */
@media (max-width: 768px) {
  /* Root spans full width and provides consistent gutters */
  .kpop-events-root {
    width: 100% !important;
    max-width: none !important;
    padding-inline: 12px;   /* same gutters for form + results */
    box-sizing: border-box;
  }

  /* Form must NOT cap width on mobile */
  .event-search-form {
    width: 100% !important;
    max-width: none !important;   /* overrides earlier 700px */
    margin-inline: 0 !important;
    padding: 0;                    /* gutters now on root */
    align-items: flex-start;       /* you wanted left-aligned button */
    gap: 6px;
    margin-bottom: 14px;           /* tighter gap to first card */
  }

  .event-search-form input[type="text"] {
    width: 100% !important;
    max-width: none !important;
  }

  /* Results container must match the form width + gutters */
  #kpopEventsMount {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0;                    /* gutters live on root */
    box-sizing: border-box;
  }

  .events-list {
    width: 100% !important;
    max-width: none !important;
    margin: 0;
    padding: 0;
  }

  /* Cards should fill the container exactly (no side margins) */
  .events-list .event-card {
    margin: 0;                    /* remove previous 0 10px */
    width: 100%;
  }

  /* Geo button left under the input, hugging content */
  .event-search-form .geo-btn {
    align-self: flex-start;
    padding: 8px 16px;
    height: auto;
    font-size: 16px;
    border-radius: 999px;
  }
}/* End custom CSS */