/* -------------------------
   Filters
-------------------------- */
.smh-filter {
    display: flex;
    gap: .5rem;
    margin: 15px 5px 20px;
}
.smh-filter input[type="text"] {
    padding: .5rem .75rem;
    border: 1px solid #ddd;
    border-radius: .5rem;
}
.smh-filter button {
    padding: 7px 20px;
    border: 0;
    background: var(--e-global-color-secondary);
    color: var(--e-global-color-34dd401);
    border-radius: 75px;
    cursor: pointer;
    transition: all .3s ease-in-out;
}

/* -------------------------
   Grid & Cards
-------------------------- */
.smh-grid {
  display: grid;
  gap: 1rem;
}

.smh-cols-1 { grid-template-columns: 1fr; }

.smh-card {
    border-radius: 1rem;
    overflow: hidden;
    background: #fff;
    padding: 1rem;
}
.smh-card-link {
    color: inherit;
    text-decoration: none;
    display: block;
}
.smh-card-body {
    margin-top: .75rem;
}
.smh-card-title {
    margin: 0 0 .4rem;
    font-size: 1rem;
    line-height: 1.3;
}
.smh-meta {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
}

.smh-tag {
    font-size: .8rem;
    background: var(--e-global-color-785ca2a);
    border-radius: .5rem;
    padding: .15rem .5rem;
    color: var(--eb-global-secondary-color);
    unicode-bidi: isolate;
	font-weight: bold;
}

.smh-tag .smh-range { unicode-bidi: isolate; direction: ltr; } 

/* -------------------------
   Categories
-------------------------- */
.smh-category-grid {
    display: grid;
    gap: 1rem;
}
.smh-category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid #eee;
    border-radius: 1rem;
    padding: 1rem;
    background: #fff;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.smh-category-icon { font-size: 2rem; }
.smh-category-label {
    margin-top: .5rem;
    text-align: center;
    font-weight: 600;
}

/* -------------------------
   Pagination
-------------------------- */
.smh-pagination ul {
  list-style: none;
  display: flex;
  gap: .5rem;
  padding: 0;
}
.smh-pagination a,
.smh-pagination span {
    display: inline-block;
    padding: .4rem .7rem;
    border: 1px solid #ddd;
    border-radius: .5rem;
}

/* -------------------------
   Loading state
-------------------------- */
.smh-ajax-list.smh-loading,
.smh-tab-panel.smh-loading {
    opacity: .6;
    pointer-events: none;
    transition: opacity .2s;
}

/* -------------------------
   Tabs
-------------------------- */
.smh-tabs { display: block; }
.smh-tabs-bar {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
    padding: .5rem 0;
    border-bottom: 1px solid #eee;
    display: flex;
    gap: .75rem;
    align-items: center;
    flex-wrap: wrap;
}
.smh-tabs-search {
    flex: 1 1 220px;
    padding: .5rem .75rem;
    border: 1px solid #ddd;
    border-radius: .5rem;
}
.smh-tabs-buttons {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}
.smh-tab-btn {
    padding: 7px 20px;
    background: var(--e-global-color-785ca2a);
    cursor: pointer;
    color: var(--e-global-color-primary);
    text-transform: capitalize;
    border: 0;
    border-radius: 75px;
    cursor: pointer;
    transition: all .3s ease-in-out;
    font-weight: 600;
}
.smh-tab-btn.is-active {
    background: var(--e-global-color-accent);
    color: var(--e-global-color-34dd401);
}

.smh-tab-btn:hover {
    background-color: var(--e-global-color-secondary);
}

.smh-tabs-panels { margin-top: 1rem; }
.smh-tab-panel { display: none; }
.smh-tab-panel.is-active { display: block; }

/* -------------------------
   Usage list
-------------------------- */
.smh-usage-index {
  display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin: .5rem 0 1rem;
}
.smh-usage-index a {
    padding: .35rem .6rem;
    border: 1px solid #ddd;
    border-radius: .6rem;
    text-decoration: none;
    color: inherit;
}
.smh-usage-title {
    margin: 1.5rem 0 .75rem;
    font-size: 1.25rem;
    text-transform: capitalize;
}