/* ==========================================================================
   model-favorites.css
   favor button + filter bar styles.
   All values use CSS custom properties so you can override in your theme.
   ========================================================================== */

:root {
    --mf-favor-size:        1rem;
    --mf-favor-color:      #000;
    --mf-favor-active:     #ff0000;
    --mf-favor-bg:         rgba(255, 255, 255, 0);
    --mf-favor-bg-hover:   #fff;
    --mf-favor-radius:     50%;
    --mf-favor-shadow:     0 2px 8px rgba(0,0,0,0);

    --mf-btn-bg:           rgba(245, 245, 245, 0);
    --mf-btn-bg-active:    rgba(255, 0, 0, 0);
    --mf-btn-color:        #333;
    --mf-btn-color-active: #000;
    --mf-btn-radius:       999px;
    --mf-btn-gap:          8px;
    --mf-transition:       0.2s ease;
}

/* ── CARD WRAPPER: ensure position context for absolute favor ── */
.model-card {
    position: relative;
}

/* ── favor BUTTON ─────────────────────────────────────────────── */
.mf-favor {
    position:         absolute;
    /* bottom:           var(--mf-favor-size); */
    bottom:          calc( var(--mf-favor-size) * 0.25); 
    /* right:            calc( var(--mf-favor-size)/2); */
    right:           0;
    z-index:          10;

    display:          flex;
    align-items:      center;
    justify-content:  center;

    width:            var(--mf-favor-size);
    height:           var(--mf-favor-size);
    padding:          0;

    background:       var(--mf-favor-bg) !important;
    border:           none;
    border-radius:    var(--mf-favor-radius);
    /* box-shadow:       var(--mf-favor-shadow); */
    cursor:           pointer;
    transition:       background var(--mf-transition),
                      transform var(--mf-transition),
                      box-shadow var(--mf-transition);
   margin: 0 !important;
}

.mf-favor--single{
   position: initial;
}

.mf-favor svg {
    width:      var(--mf-favor-size);
    height:      var(--mf-favor-size);
    color:      var(--mf-favor-color);
    transition: color var(--mf-transition), fill var(--mf-transition);
    flex-shrink: 0;
}

.mf-favor:hover {
    background:  var(--mf-favor-bg-hover);
    /* box-shadow:  0 4px 14px rgba(0,0,0,.22); */
    @media only screen and (min-width: 660px) {

    transform:   scale(1);}
}

.mf-favor:focus-visible {
    outline:        3px solid var(--mf-favor-active);
    outline-offset: 2px;
}

/* Active / favorited state */
.mf-favor.is-favorite svg {
    color: var(--mf-favor-active);
    fill:  var(--mf-favor-active);
}

/* Pop animation on toggle */
@keyframes mf-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1); }
    70%  { transform: scale(1); }
    100% { transform: scale(1); }
}

.mf-favor.mf-pop {
   @media only screen and (min-width: 660px) {

    animation: mf-pop 0.35s cubic-bezier(.36,.07,.19,.97) both;
 }
}

/* ── FILTER TOGGLE (single favor icon) ───────────────────────── */
.mf-filter-toggle {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;

    width:            var(--mf-favor-size);
    height:          auto;
   
      padding: 0;
      margin: 0 0.5rem 0 1rem;


    background:      var(--mf-btn-bg) !important;
    border:          none;
    border-radius:   var(--mf-favor-radius);
    cursor:          pointer;
    transition:      background var(--mf-transition),
                     /* border-color var(--mf-transition), */
                     transform var(--mf-transition);
}

.mf-filter-toggle svg {
    width:        var(--mf-favor-size);
    height:       var(--mf-favor-size);
    color:       var(--mf-favor-color);
    fill:        none;
    transition:  color var(--mf-transition), fill var(--mf-transition);
    flex-shrink: 0;
    /* margin-top: calc(var(--mf-favor-size)/2); */
    
    
    position: absolute;
     bottom: calc( var(--global--spacing-unit) / 3 );
}

.mf-filter-toggle:hover {
    border-color: var(--mf-favor-active);
    transform:    scale(1);
}

.mf-filter-toggle:focus-visible {
    outline:        3px solid var(--mf-favor-active);
    outline-offset: 2px;
}

/* Active state — favorites-only mode on */
.mf-filter-toggle.is-active {
    background:   var(--mf-btn-bg-active);
    border-color: var(--mf-btn-bg-active);
}

.mf-filter-toggle.is-active svg {
    color: var(--mf-favor-color);
    fill:  var(--mf-favor-color);
}

/* ── FILTER BAR (legacy, kept for back-compat) ────────────────── */
.mf-filter-bar {
    display:         flex;
    flex-wrap:       wrap;
    gap:             var(--mf-btn-gap);
    align-items:     center;
    margin-bottom:   24px;
}

.mf-filter-btn {
    display:          inline-flex;
    align-items:      center;
    gap:              6px;
    padding:          8px 18px;
    font-size:        0.875rem;
    font-weight:      600;
    line-height:      1;
    white-space:      nowrap;

    color:            var(--mf-btn-color);
    background:       var(--mf-btn-bg);
    border:           2px solid transparent;
    border-radius:    var(--mf-btn-radius);
    cursor:           pointer;
    transition:       background var(--mf-transition),
                      color var(--mf-transition),
                      border-color var(--mf-transition),
                      transform var(--mf-transition);
}

.mf-filter-btn:hover {
    border-color: var(--mf-btn-bg-active);
    @media only screen and (min-width: 660px) {
      transform:    translateY(-1px);
   }
}

.mf-filter-btn:focus-visible {
    outline:        3px solid var(--mf-btn-bg-active);
    outline-offset: 2px;
}

.mf-filter-btn.active {
    background: var(--mf-btn-bg-active);
    color:      var(--mf-btn-color-active);
}

.mf-filter-btn svg {
    flex-shrink: 0;
}

/* Count badge */
.mf-count {
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    min-width:      var(--mf-favor-size);
    height:        var(--mf-favor-size);
    padding:       0 5px;
    font-size:     0.75rem;
    font-weight:   700;
    border-radius: 999px;
    background:    rgba(255,255,255,0.25);
    color:         inherit;
    line-height:   1;
    transition:    background var(--mf-transition);
}

.mf-filter-btn:not(.active) .mf-count {
    background: rgba(0,0,0,0.08);
    color:      #555;
}

/* ── EMPTY STATE ─────────────────────────────────────────────── */
.mf-empty-msg {
    width:       100%;
    padding:      0;
    text-align:  center;
    color:       #888;
    font-style:  italic;
    font-size:   0.95rem;
}

/* ── HIDDEN CARDS (filter) ───────────────────────────────────── */
.model-card[hidden] {
    display: none !important;
}