/* ==========================================================================
   Kedvencek — ⭐ Mentés gomb, toast, gyűjtemény-lap/popover.
   Loaded on every front-end page (szekely-membership/includes/
   collections.php, szekely_collections_enqueue_assets()) — the save
   button can appear on any of the three card systems (category/author
   archive .sd-card, Cikkfolyam .sd-cf-card, homepage .random-posts-list).
   Fibonacci spacing/sizing, 144–987ms motion, prefers-reduced-motion.
   ========================================================================== */

/* Anchor for the absolutely positioned save button on every card system —
   additive (a no-op where the card is already position:relative). */
.sd-card,
.sd-cf-card,
.random-posts-list > li {
    position: relative;
}

.sd-card__save {
    position: absolute;
    top: var(--sd-13);
    right: var(--sd-13);
    z-index: 2;
}

/* Always paired with .sd-card__save on an image card (archive-cards.php,
   cikkfolyam.php) — tucked into the card's own media corner, closer in
   than the bare .sd-card__save position above. Text-only cards don't use
   .sd-card__save at all any more: the star joins the emoji-rating row
   instead (.sd-save-btn--inline below), so it never has to share a
   corner with the category pill or author avatar that sit there
   (docs/KEDVENCEK.md, csiszoló kör). */
.sd-card__save--media {
    top: var(--sd-8);
    right: var(--sd-8);
}

.sd-card__media,
.sd-cf-image,
.post-featured-image {
    position: relative;
}

.sd-save-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--sd-34);
    height: var(--sd-34);
    padding: 0;
    border: 1px solid var(--sd-glass-border);
    border-radius: 50%;
    background: var(--sd-glass-strong);
    -webkit-backdrop-filter: blur(var(--sd-13)) saturate(1.618);
    backdrop-filter: blur(var(--sd-13)) saturate(1.618);
    /* Centered, not the page-wide --sd-shadow (offset downward only) — on
       a small glass circle over a photo, an offset shadow reads as a dark
       half-moon instead of a soft drop shadow. */
    box-shadow: 0 0 var(--sd-8) rgba(1, 58, 99, 0.21);
    color: var(--color-two, #013A63);
    cursor: pointer;
    transition: transform var(--sd-hover) var(--sd-ease), box-shadow var(--sd-hover) var(--sd-ease);
}

.sd-save-btn:hover,
.sd-save-btn:focus-visible {
    transform: scale(1.08);
    box-shadow: 0 0 var(--sd-13) rgba(1, 58, 99, 0.34);
}

.sd-save-btn:focus-visible {
    outline: 2px solid var(--color-four, #0285BA);
    outline-offset: 2px;
}

/* Two stacked icons, cross-faded by .is-saved — lets the filled star
   "pop" in with a scale/opacity transition instead of a JS class swap
   re-rendering the glyph (no animatable transition on an icon-font
   content change otherwise). Two classes: the icon set's own .fa-regular /
   .fa-solid (display: inline-block, loaded later) must not win, or the
   star sits in the top of the circle instead of its centre. */
.sd-save-btn .sd-save-btn__icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--sd-16);
    transition: opacity var(--sd-hover) var(--sd-ease), transform var(--sd-hover) var(--sd-ease);
}

.sd-save-btn__icon--outline {
    opacity: 1;
    transform: scale(1);
}

.sd-save-btn__icon--solid {
    opacity: 0;
    transform: scale(0.55);
    color: var(--color-four, #0285BA);
}

.sd-save-btn.is-saved .sd-save-btn__icon--outline {
    opacity: 0;
    transform: scale(0.55);
}

.sd-save-btn.is-saved .sd-save-btn__icon--solid {
    opacity: 1;
    transform: scale(1);
}

/* The "pop" moment itself (spec: 233ms) — a brief overshoot on the whole
   button when a save just happened, layered on top of the icon
   cross-fade above. */
@keyframes sd-save-pop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.34); }
    100% { transform: scale(1); }
}

.sd-save-btn--pop {
    animation: sd-save-pop var(--sd-hover) var(--sd-ease);
}

@media (prefers-reduced-motion: reduce) {
    .sd-save-btn,
    .sd-save-btn__icon {
        transition: none;
    }
    .sd-save-btn--pop {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   Inline variant — text-only cards and the single-post action row: the
   star joins the emoji-rating icon row as its last icon (wrapped in the
   same .emoji-container emoji-rating.css already sizes/spaces/hovers its
   siblings with), rather than floating in a corner where it would cover
   the author avatar or category pill. No glass circle, no shadow — the
   two stacked star icons just shrink to match the row's own icon size.
   -------------------------------------------------------------------------- */

.sd-save-btn--inline {
    width: var(--sd-13);
    height: var(--sd-13);
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
    color: var(--color-one, #fff);
}

/* Matches the rest of the row's icons (emoji-rating.css's own
   body.single-post override for .emoji i, .copy-icon i, etc.). */
body.single-post .sd-save-btn--inline {
    color: #013a63;
}

.sd-save-btn--inline .sd-save-btn__icon {
    font-size: var(--sd-13);
}

.sd-save-btn--inline:hover,
.sd-save-btn--inline:focus-visible {
    transform: none;
    box-shadow: none;
}

/* A korábbi .sd-save-toast (egyedi akciógombos "Elmentve" / "Visszavonás"
   toast) megszűnt — a Kedvencek összes toastja az egységes window.
   szekelyToast()-ra épül (szekely-design-toast.css), ami ugyanazt az
   akciógomb-réteget most már minden toast-híváshoz kínálja, nem csak
   ennek a pluginnak. Lásd: csiszoló kör, EGYSÉGES TOAST. */

/* --------------------------------------------------------------------------
   Gyűjtemény-lap/popover (#sd-save-sheet) — mobil bottom sheet / asztali
   popover, ugyanaz a minta, mint a fejléc "Több" panelje (#sd-more-panel,
   google-meet-style-menus.php / szekely-design.js), külön példányban, mert
   tartalma posztonként változik.
   -------------------------------------------------------------------------- */

#sd-save-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(1, 20, 34, 0.21);
    -webkit-backdrop-filter: blur(var(--sd-5));
    backdrop-filter: blur(var(--sd-5));
    opacity: 0;
    transition: opacity var(--sd-hover) var(--sd-ease);
}

#sd-save-backdrop[hidden] {
    display: none;
}

#sd-save-backdrop.sd-is-open {
    opacity: 1;
}

#sd-save-sheet {
    position: fixed;
    z-index: 100001;
    box-sizing: border-box;
    border: 1px solid var(--sd-glass-border);
    background: var(--sd-glass-strong);
    -webkit-backdrop-filter: blur(var(--sd-21)) saturate(1.618);
    backdrop-filter: blur(var(--sd-21)) saturate(1.618);
    box-shadow: var(--sd-shadow-raised);
}

#sd-save-sheet[hidden] {
    display: none;
}

#sd-save-sheet:not(.sd-save-sheet--popover) {
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 80vh;
    overflow-y: auto;
    padding: var(--sd-13) var(--sd-21) calc(var(--sd-21) + max(var(--sd-8), env(safe-area-inset-bottom)));
    border-radius: var(--sd-21) var(--sd-21) 0 0;
    transform: translateY(100%);
    transition: transform var(--sd-hover-slow) var(--sd-ease);
}

#sd-save-sheet:not(.sd-save-sheet--popover).sd-is-open {
    transform: translateY(0);
}

#sd-save-sheet.sd-is-dragging {
    transition: none;
}

#sd-save-sheet.sd-save-sheet--popover {
    top: var(--sd-save-sheet-top, var(--sd-89));
    right: var(--sd-save-sheet-right, var(--sd-21));
    width: var(--sd-377);
    max-height: calc(100vh - var(--sd-save-sheet-top, var(--sd-89)) - var(--sd-21));
    overflow-y: auto;
    padding: var(--sd-21);
    border-radius: var(--sd-21);
    transform-origin: top right;
    opacity: 0;
    transform: translateY(calc(var(--sd-8) * -1)) scale(0.95);
    transition: transform var(--sd-hover-slow) var(--sd-ease), opacity var(--sd-hover-slow) var(--sd-ease);
    visibility: hidden;
}

#sd-save-sheet.sd-save-sheet--popover.sd-is-open {
    opacity: 1;
    transform: none;
    visibility: visible;
}

.sd-save-sheet__handle {
    display: none;
}

#sd-save-sheet:not(.sd-save-sheet--popover) .sd-save-sheet__handle {
    display: block;
    width: var(--sd-34);
    height: var(--sd-5);
    margin: 0 auto var(--sd-13);
    border-radius: var(--sd-5);
    background: var(--sd-glass-border);
}

.sd-save-sheet__title {
    margin: 0 0 var(--sd-13);
    color: var(--color-two, #013A63);
    font-size: var(--sd-16);
}

.sd-save-sheet__list {
    display: flex;
    flex-direction: column;
    gap: var(--sd-3);
    margin: 0 0 var(--sd-13);
    padding: 0;
    list-style: none;
    max-height: calc(var(--sd-144) * 2);
    overflow-y: auto;
}

.sd-save-sheet__label {
    display: flex;
    align-items: center;
    gap: var(--sd-13);
    box-sizing: border-box;
    width: 100%;
    min-height: var(--sd-55);
    padding: var(--sd-8) var(--sd-13);
    border-radius: var(--sd-13);
    background: var(--sd-glass);
    box-shadow: inset 0 0 0 1px var(--sd-glass-border);
    cursor: pointer;
    transition: background var(--sd-hover) var(--sd-ease);
}

.sd-save-sheet__label:hover {
    background: var(--sd-tint);
}

.sd-save-sheet__checkbox {
    flex: none;
    width: var(--sd-21);
    height: var(--sd-21);
    accent-color: var(--color-four, #0285BA);
}

.sd-save-sheet__emoji {
    flex: none;
    font-size: var(--sd-21);
}

.sd-save-sheet__name {
    flex: 1 1 auto;
    color: var(--color-two, #013A63);
    font-weight: 600;
}

.sd-save-sheet__count {
    flex: none;
    color: var(--sd-text-muted, #555);
    font-size: var(--sd-13);
}

.sd-save-sheet__new {
    display: flex;
    gap: var(--sd-8);
}

.sd-save-sheet__new-emoji,
.sd-save-sheet__new-name {
    box-sizing: border-box;
    height: var(--sd-34);
    border: 1px solid var(--sd-glass-border);
    border-radius: var(--sd-13);
    background: var(--sd-glass);
    color: var(--color-two, #013A63);
    font-size: var(--sd-16);
}

.sd-save-sheet__new-emoji {
    flex: none;
    width: var(--sd-34);
    text-align: center;
    padding: 0;
}

.sd-save-sheet__new-name {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 var(--sd-13);
}

.sd-save-sheet__new-add {
    flex: none;
    width: var(--sd-34);
    height: var(--sd-34);
    border: 0;
    border-radius: 50%;
    background: var(--color-four, #0285BA);
    color: var(--color-one, #fff);
    cursor: pointer;
    transition: transform var(--sd-hover) var(--sd-ease);
}

.sd-save-sheet__new-add:hover {
    transform: scale(1.08);
}

@media (prefers-reduced-motion: reduce) {
    #sd-save-backdrop,
    #sd-save-sheet,
    .sd-save-sheet__label,
    .sd-save-sheet__new-add {
        transition: none;
    }
}