/* ================================================
   BADGE SYSTEM STYLES
   ================================================ */

/* Basic Badge Container */
.lc-plugin-wrapper .lc-badges {
display: flex;
gap: 0.5rem;
margin-bottom: 1rem;
}

/* Basic Badge Styles */
.lc-plugin-wrapper .lc-badge {
display: inline-block;
background: var(--lc-primary);
color: #fff;
border-radius: 999px;
font-size: 0.85rem;
padding: 0.25em 0.9em;
font-weight: 500;
}

/* Difficulty Badge Variants */
.lc-plugin-wrapper .lc-badge.lc-badge-difficulty {
background: var(--lc-secondary);
}

.lc-plugin-wrapper .lc-badge.lc-badge-beginner {
background: var(--lc-accent);
}

.lc-plugin-wrapper .lc-badge.lc-badge-intermediate {
background: var(--lc-secondary);
}

.lc-plugin-wrapper .lc-badge.lc-badge-advanced {
background: #e74c3c;
}

/* Topic Filters Container */
.lc-plugin-wrapper .lc-topic-filters {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.5rem;
}

/* ================================================
   SPLIT BADGE STYLES (Filter Badges)
   ================================================ */

/* Normal Badge - generic styling */
.lc-badge-split {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.375rem 0.75rem;
background-color: #f3f4f6;
color: #374151;
border-radius: 0.375rem;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 500;
border: 1px solid #e5e7eb;
width: max-content;
}

.lc-badge-split:hover {
background-color: #e5e7eb;
border-color: #d1d5db;
}

/* Remove button inside normal badge */
.lc-badge-split .lc-badge-remove {
color: #374151;
transition-property: color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
cursor: pointer;
width: 0.75rem;
height: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1em;
}

.lc-badge-split .lc-badge-remove:hover {
color: #dc2626;
}

/* Essential Badge - special variant */
.lc-badge-split.lc-essential-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.375rem 0.75rem;
background-color: #b1b1b1;
color: var(--lc-background);
border-radius: 0.375rem;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 500;
/* border: 1px solid black; */
}

.lc-plugin-wrapper .lc-essential-badge .lc-badge-remove {
color: black;
}

/* Generic Remove Button */
.lc-badge-remove {
color: #2563eb;
transition-property: color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
cursor: pointer;
width: 0.75rem;
height: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
}

.lc-badge-remove:hover {
color: #1e40af;
}

.lc-plugin-wrapper .lc-badge-remove:hover {
color: #b91c1c;
}

/* ================================================
   CARD BADGE (Essential Resource Badge on Cards)
   ================================================ */

/* Ensure the main container has relative positioning for absolute badge positioning */
.lc-plugin-wrapper .lc-listing-container {
position: relative;
background: white;
border: 1px solid #e5e7eb;
border-radius: 0.5rem;
overflow: hidden;
transition: all 0.2s ease;
cursor: pointer;
height: 100%;
display: flex;
flex-direction: column;
padding:0;
}

/* Essential Resource Card Badge - positioned relative to the card container */
.lc-plugin-wrapper .lc-card-badge {
position: absolute;
top: 8px;
right: 8px;
margin: 0;
margin-top: 0;
margin-block-start: 0;
background-color: #8B278C;
color: var(--lc-background);
padding: 4px 8px;
border-radius: var(--lc-radius);
font-size: 12px;
line-height: 16px;
font-weight: 500;
font-family: inherit;
z-index: 10;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
transition: background-color 0.2s ease;
}

/* Hover effect for the badge when card is hovered */
/*
.lc-plugin-wrapper .lc-listing-container:hover .lc-card-badge {
background-color: #047857;
} */

/* Responsive adjustments */
@media (max-width: 600px) {
.lc-plugin-wrapper .lc-card-badge {
  font-size: 11px;
  padding: 3px 6px;
  top: 6px;
  right: 6px;
}
}

/* ================================================
   ACTIVE FILTERS & BADGE LAYOUT
   ================================================ */

.lc-plugin-wrapper .jet-active-filter__val {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}

.lc-plugin-wrapper .dashicons.dashicons-trash {
font-size: 16px;
}

.lc-plugin-wrapper .jet-smart-filters-active .jet-active-filter {
padding-right: 0px;
}

.lc-plugin-wrapper .lc-listing-results-count {
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 500;
color: #4b5563;
width: fit-content;
flex-shrink: 0;
width: 100%;
margin-bottom: 6px;
text-align: right;
}

.lc-plugin-wrapper .lc-filters-group,
.lc-plugin-wrapper .lc-filters-group > .wp-block-group__inner-container {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center !important;
margin:0;
padding: 0;
width: 100%;
}

.lc-plugin-wrapper .lc-filters-groups,
.lc-plugin-wrapper .lc-filters-groups > .wp-block-group__inner-container {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
gap: 12px;
min-height: 34px;
flex-direction: row;
padding: 0px;
width: 100%;
margin: 0;
}

.wp-block-group.lc-filters-groups {
padding-bottom: 12px;
}

.lc-plugin-wrapper .lc-filters-groups-mobile {
justify-content: space-between;
align-items: flex-start;
flex-wrap: nowrap;
gap: 12px;
padding: 0em !important;
padding-top: 12px !important;
padding-bottom: 12px !important;
}

.lc-plugin-wrapper span#active-filters-display {
margin-right: 12px;
}

@media (min-width: 1025px) {
.lc-plugin-wrapper .lc-filters-groups > .wp-block-group__inner-container > .lc-filters-group {
width: auto;
}

.lc-plugin-wrapper .lc-filters-groups > .wp-block-group__inner-container > .lc-filters-group:first-child {
flex: 1 1 auto;
min-width: 0;
}

.lc-plugin-wrapper .lc-filters-groups > .wp-block-group__inner-container > .lc-filters-group:last-child {
flex: 0 0 auto;
margin-left: auto;
}

.lc-plugin-wrapper .lc-filters-groups > .wp-block-group__inner-container > .lc-filters-group:last-child > .wp-block-group__inner-container {
justify-content: flex-end;
width: auto;
}
}

/* Remove the full width from badges container so it starts on the same line */
.lc-plugin-wrapper .jet-smart-filters-active.jet-active-filters.jet-filter {
width: auto;
order: 2;
flex-shrink: 1;
margin-right: 12px;
}

/* Keep the active filters text at the top */
.lc-plugin-wrapper .lc-clear-all-filters-text {
order: 1;
flex-shrink: 0;
}

/* Clear button comes after badges */
.lc-plugin-wrapper .jet-smart-filters-remove-filters-wrapper {
order: 3;
flex-shrink: 0;
/*align-self: flex-start;*/
}

/* Keep the results count in its own group, top right */
.lc-plugin-wrapper .lc-listing-results-count {
flex-shrink: 0;
align-self: flex-start;
text-align: right;
}

/* Ensure the badges list wraps properly */
.lc-plugin-wrapper .jet-active-filters__list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: flex-start;
flex-direction: row;
}

body.lc-route-hub-layout .lc-plugin-wrapper .lc-filters-groups > .lc-filters-group:first-child {
flex: 1 1 auto;
min-width: 0;
width: auto;
align-items: center !important;
}

body.lc-route-hub-layout .lc-plugin-wrapper .lc-filters-groups > .lc-filters-group:last-child {
flex: 0 0 auto;
width: auto;
margin-left: auto;
justify-content: flex-end;
align-self: center;
align-items: center !important;
}

body.lc-route-hub-layout .lc-plugin-wrapper .lc-filters-groups > .lc-filters-group:last-child .lc-listing-results-count {
width: auto;
margin-bottom: 0;
white-space: nowrap;
}

body.lc-route-hub-layout .lc-plugin-wrapper .lc-filters-groups {
align-items: center;
}
@media (max-width: 1024px) {
.lc-plugin-wrapper .lc-filters-group > .wp-block-group__inner-container {
align-items: flex-start !important;
}
}

@media (min-width: 1025px) {
body.lc-public-route .lc-plugin-wrapper .lc-filters-groups {
min-height: 55px;
}

body.lc-public-route .lc-plugin-wrapper span#active-filters-display {
display: none;
}
}