/* Elementor Favorites - Clean Typography + Alignment
   --------------------------------------------------
   - Button uses native Elementor button structure/classes
   - Alignment handled by prefix_class on widget wrapper
*/

/* ========== FAVORITE BUTTON ========== */

/* Wrapper - default inline-block */
.ef-favorite-button-container {
    display: inline-block;
}

/* Alignment Controls 
   prefix_class adds: elementor-align-{value} / elementor-align-tablet-{value} / elementor-align-mobile-{value}
*/

/* Left align - default */
.elementor-widget-ef_favorite_button.elementor-align-left {
    text-align: left;
}

.elementor-widget-ef_favorite_button.elementor-align-left .ef-favorite-button-container {
    display: inline-block;
}

/* Center align */
.elementor-widget-ef_favorite_button.elementor-align-center {
    text-align: center;
}

.elementor-widget-ef_favorite_button.elementor-align-center .ef-favorite-button-container {
    display: inline-block;
}

/* Right align */
.elementor-widget-ef_favorite_button.elementor-align-right {
    text-align: right;
}

.elementor-widget-ef_favorite_button.elementor-align-right .ef-favorite-button-container {
    display: inline-block;
}

/* Justify (Full Width Stretch) */
.elementor-widget-ef_favorite_button.elementor-align-justify .ef-favorite-button-container {
    display: block !important;
    width: 100% !important;
}

.elementor-widget-ef_favorite_button.elementor-align-justify .ef-favorite-button-container,
.ef-favorite-button {
    touch-action: manipulation;
    -webkit-user-drag: none;
}

.ef-favorite-button {
    width: 100% !important;
    justify-content: center;
}

/* Tablet Alignment */
@media (max-width: 1024px) {
    .elementor-widget-ef_favorite_button.elementor-align-tablet-left {
        text-align: left;
    }
    
    .elementor-widget-ef_favorite_button.elementor-align-tablet-center {
        text-align: center;
    }
    
    .elementor-widget-ef_favorite_button.elementor-align-tablet-right {
        text-align: right;
    }
    
    .elementor-widget-ef_favorite_button.elementor-align-tablet-justify .ef-favorite-button-container {
        display: block !important;
        width: 100% !important;
    }
    
    .elementor-widget-ef_favorite_button.elementor-align-tablet-justify .ef-favorite-button {
        width: 100% !important;
    }
}

/* Mobile Alignment */
@media (max-width: 767px) {
    .elementor-widget-ef_favorite_button.elementor-align-mobile-left {
        text-align: left;
    }
    
    .elementor-widget-ef_favorite_button.elementor-align-mobile-center {
        text-align: center;
    }
    
    .elementor-widget-ef_favorite_button.elementor-align-mobile-right {
        text-align: right;
    }
    
    .elementor-widget-ef_favorite_button.elementor-align-mobile-justify .ef-favorite-button-container {
        display: block !important;
        width: 100% !important;
    }
    
    .elementor-widget-ef_favorite_button.elementor-align-mobile-justify .ef-favorite-button {
        width: 100% !important;
    }
}

/* Button – shares look/behavior with native .elementor-button */
.ef-favorite-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    text-decoration: none;
    font-size: inherit;
    line-height: inherit;
    -webkit-tap-highlight-color: transparent;
    /* Only transition properties that actually animate on hover/state change.
       Layout properties (padding/margin/width) are intentionally excluded to
       avoid animated layout shifts. */
    transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* All children inherit font-size / line-height from the button */
.ef-favorite-button,
.ef-favorite-button .ef-favorite-icon,
.ef-favorite-button .ef-favorite-label,
.ef-favorite-button i,
.ef-favorite-button svg {
    font-size: inherit;
    line-height: inherit;
}

/* Hover & Focus */
.ef-favorite-button:hover,
.ef-favorite-button:focus {
    text-decoration: none;
    outline: none;
}

.ef-favorite-button:focus:not(:focus-visible) {
    outline: none;
}

.ef-favorite-button:focus-visible {
    outline: 2px solid #007acc;
    outline-offset: 2px;
}

/* Custom Elementor SVG uploads often contain hard-coded presentation
   attributes on child shapes. Let widget color controls reach those shapes
   while preserving deliberately unfilled/strokeless parts. */
.ef-favorite-button svg [fill]:not([fill="none"]) {
    fill: inherit;
}

.ef-favorite-button svg [stroke]:not([stroke="none"]) {
    stroke: currentColor;
}

/* Loading / busy state while an AJAX request is in flight.
   The button stays interactive-looking but signals progress; it is never
   permanently disabled. */
.ef-favorite-button[aria-busy="true"],
.ef-favorite-button.ef-is-loading {
    cursor: progress;
    opacity: 0.7;
}

/* Visually-hidden accessible text (keeps icon-only controls named). */
.ef-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Icon + label wrapper – gap controlled by icon_spacing */
.ef-favorite-inner {
    display: inline-flex;
    align-items: center;
    gap: inherit;
}

/* Icon wrapper */
.ef-favorite-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 1em;
    height: 1em;
}

/* Two icons (fav / unfav) stacked */
.ef-favorite-button .ef-favorite-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* SVG icon */
.ef-favorite-button .ef-favorite-icon svg {
    width: 1em;
    height: 1em;
    display: block;
    fill: currentColor;
    transform: none;
}

/* <i> icon */
.ef-favorite-button .ef-favorite-icon i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
}

/* Label */
.ef-favorite-button .ef-favorite-label {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* Icon visibility states */
.ef-favorite-button .ef-icon-fav {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.ef-favorite-button .ef-icon-unfav {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.ef-favorite-button.is-favorited .ef-icon-fav {
    opacity: 1;
    visibility: visible;
}

.ef-favorite-button.is-favorited .ef-icon-unfav {
    opacity: 0;
    visibility: hidden;
}

/* Small normalizations */
.ef-favorite-icon-wrap svg,
.ef-favorite-icon-wrap i {
    vertical-align: middle;
    display: inline-block;
}

/* ========== FAVORITES LINK ========== */


.elementor-widget-ef_favorites_link,
.elementor-widget-ef_favorites_link > .elementor-widget-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0 !important;
    vertical-align: middle;
}

.ef-favorites-link-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0 !important;
}

.ef-favorites-link-widget {
    position: relative;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    line-height: 0 !important;
    text-decoration: none;
    vertical-align: middle;
}

.ef-favorites-link-widget:hover {
    text-decoration: none;
}

.ef-favorites-link-widget .ef-favorites-icon {
    position: relative;
    display: grid !important;
    place-items: center;
    width: var(--ef-favorites-icon-size, 24px) !important;
    height: var(--ef-favorites-icon-size, 24px) !important;
    min-width: var(--ef-favorites-icon-size, 24px) !important;
    min-height: var(--ef-favorites-icon-size, 24px) !important;
    flex: 0 0 var(--ef-favorites-icon-size, 24px) !important;
    color: var(--ef-favorites-icon-color, #141009) !important;
    line-height: 0 !important;
    vertical-align: middle;
    overflow: visible;
}

.ef-favorites-link-widget:hover .ef-favorites-icon {
    color: var(--ef-favorites-icon-hover-color, var(--ef-favorites-icon-color, #141009)) !important;
}

.ef-favorites-link-widget .ef-favorites-icon > svg,
.ef-favorites-link-widget .ef-favorites-icon > img,
.ef-favorites-link-widget .ef-favorites-icon > i {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    vertical-align: middle !important;
    transform: none !important;
    object-fit: contain;
    object-position: center;
}

.ef-favorites-link-widget .ef-favorites-icon > svg {
    color: currentColor !important;
    fill: currentColor !important;
    overflow: visible;
}

.ef-favorites-link-widget .ef-favorites-icon > svg path,
.ef-favorites-link-widget .ef-favorites-icon > svg use,
.ef-favorites-link-widget .ef-favorites-icon > svg polygon,
.ef-favorites-link-widget .ef-favorites-icon > svg circle {
    fill: currentColor !important;
}

.ef-favorites-link-widget .ef-favorites-counter-wrap {
    display: inline-flex;
}

.ef-favorites-link-wrapper.ef-indicator-plain .ef-favorites-counter-wrap {
    position: static;
    margin-left: .5em;
}

.ef-favorites-link-wrapper.ef-indicator-plain .ef-favorites-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border-radius: 0;
    line-height: 1;
}

.ef-favorites-link-wrapper.ef-indicator-bubble .ef-favorites-counter-wrap {
    position: absolute;
    top: -7px;
    right: -9px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    line-height: 0;
    pointer-events: none;
}

.ef-favorites-link-wrapper.ef-indicator-bubble .ef-favorites-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: var(--ef-favorites-counter-min-size, 18px) !important;
    min-height: var(--ef-favorites-counter-min-size, 18px) !important;
    padding: var(--ef-favorites-counter-padding, 2px 6px) !important;
    border-radius: var(--ef-favorites-counter-radius, 999px) !important;
    background-color: var(--ef-favorites-counter-bg, #e53935);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1 !important;
    text-align: center;
    white-space: nowrap;
}

/* ========== TOAST MESSAGE ========== */

.ef-favorites-toast {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    padding: 12px 18px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.ef-favorites-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========== RESPONSIVE ========== */

@media (max-width: 767px) {
    .ef-favorites-toast {
        right: 10px;
        bottom: 10px;
        font-size: 13px;
        padding: 10px 14px;
    }
}
/* ========== FAVORITES LOOP LIVE STATE ========== */

.ef-favorites-loop > .ef-favorites-empty,
[data-ef-favorites-loop="1"] > .ef-favorites-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 240px;
    padding: 48px 24px;
    text-align: center;
}

.ef-favorites-empty strong {
    display: block;
    margin: 0 0 10px;
    color: #141009;
    font-size: 24px;
    line-height: 1.25;
    font-weight: 600;
}

.ef-favorites-empty span {
    display: block;
    max-width: 520px;
    color: #493B36;
    font-size: 16px;
    line-height: 1.6;
}

@media (max-width: 767px) {
    .ef-favorites-loop > .ef-favorites-empty,
    [data-ef-favorites-loop="1"] > .ef-favorites-empty {
        min-height: 180px;
        padding: 36px 20px;
    }

    .ef-favorites-empty strong {
        font-size: 21px;
    }
}


/* Hide Elementor's generic no-results message only for Favorites loops.
   The plugin renders its own branded empty state instead. */
.ef-favorites-loop .e-loop-nothing-found-message,
.ef-favorites-loop .elementor-posts-nothing-found,
.ef-favorites-loop .elementor-loop-container + .elementor-message,
[data-ef-favorites-loop="1"] .e-loop-nothing-found-message,
[data-ef-favorites-loop="1"] .elementor-posts-nothing-found,
[data-ef-favorites-loop="1"] .elementor-loop-container + .elementor-message {
    display: none !important;
}