/* =========================================================
   COMPONENT — FAVORITES SUMMARY BANNER (CART SHORTCUT)
   ========================================================= */

/**
 * Floating banner displaying summary of selected items (favorites/cart).
 * Positioned in the bottom-right corner on desktop.
 * Hidden by default and typically shown via JavaScript.
 */
.favorites-summary {
    position: fixed;
    right: 20px;
    bottom: 10px;
    z-index: 998;

    width: auto;
    padding: 10px 20px;

    background-color: orange;
    border-radius: 8px;

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

    transition: all 0.3s ease-in-out;
}

/**
 * Visible state of the favorites banner.
 * Enables rendering when items are selected.
 */
.favorites-summary.visible {
    display: block;
}


/* =========================================================
   COMPONENT — FAVORITES BUTTON
   ========================================================= */

/**
 * Action button inside the favorites banner.
 * Acts as a shortcut to open cart or favorites view.
 */
.favorites {
    color: white;
    font-size: 16px;

    border: none;
    background-color: orange;

    cursor: pointer;
}


/* =========================================================
   RESPONSIVE — MOBILE LAYOUT
   ========================================================= */

/**
 * Adjusts banner to a full-width bottom bar on mobile devices.
 * Accounts for safe areas (e.g., iPhone notch / home indicator).
 */
@media (max-width: 768px) {
    .favorites-summary {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;

        width: 100%;
        border-radius: 0;

        padding: calc(15px + env(safe-area-inset-bottom)) 0 15px 0;
        box-sizing: border-box;

        z-index: 999;
    }

    /**
     * Expands button to full width for easier touch interaction.
     */
    .favorites {
        width: 100%;
        font-size: 18px;
        padding: 15px 0;
    }

    /**
     * Adds extra bottom spacing to footer to prevent overlap
     * with the fixed favorites banner on mobile.
     */
    footer {
        padding-bottom: calc(10px + 60px + env(safe-area-inset-bottom));
    }
}