/* ================================================================
   LITTLE NEST PLAY — BAG PAGE CSS
   New file | 2026-08-07 | [MARIO] v1.0
   Built from scratch — no CSS existed for .lnp-bag-* / .lnp-compare-*
   classes anywhere in the codebase (confirmed: not in lnp-catalogue.css,
   not in lnp-home.css, not in the zip). Reuses the existing --cat-*
   palette from lnp-catalogue.css (always loaded, see main.blade.php link
   list) rather than redeclaring variables — same purple/gold/dark V2
   theme as every other page. Also reuses .lnp-toy-card / .lnp-toy-badge /
   .lnp-toy-card-img / .lnp-toy-age / .lnp-toy-name / .lnp-text-link
   as-is from lnp-catalogue.css for the "Kids Also Liked" grid — not
   redefined here, avoids duplicate/conflicting rules.
   Depends on: --cat-* vars (lnp-catalogue.css must load on this page —
   confirmed it already does, unconditionally, for every route).
   ================================================================ */

.lnp-bag-page {
    background: var(--cat-bg);
    min-height: 100vh;
}

/* Replaces inline style="padding-top:100px;padding-bottom:60px" on .container —
   same bug pattern already found + fixed on the product page. Using the same
   dev-confirmed 25px value for consistency across pages. */
.lnp-bag-container { padding-top: 25px; padding-bottom: 60px; }

/* ── Title ─────────────────────────────────────────────────── */
.lnp-bag-title {
    font-family: 'Fredoka', sans-serif;
    font-size: clamp(1.75rem, 3.5vw, 2.4rem);
    font-weight: 700; color: var(--cat-dark);
    margin-bottom: 1.5rem;
}

/* ── Impact bar (Total Savings / New Skills / Toys Selected) ─ */
.lnp-bag-impact {
    display: flex; align-items: center;
    background: var(--cat-white);
    border: 1.5px solid var(--cat-border);
    border-radius: 16px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: var(--cat-shadow);
}
.lnp-impact-item {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; text-align: center; gap: .15rem;
}
.lnp-impact-value {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.4rem; font-weight: 700; color: var(--cat-purple);
    line-height: 1.2;
}
.lnp-impact-label {
    font-family: 'Manrope', sans-serif;
    font-size: .72rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .5px;
    color: var(--cat-muted);
}
.lnp-impact-divider { width: 1px; height: 34px; background: var(--cat-border); flex-shrink: 0; }

/* ── Protection note ───────────────────────────────────────── */
.lnp-bag-protection {
    display: flex; align-items: center; gap: .6rem;
    background: var(--cat-green-lt);
    border: 1px solid rgba(74,158,92,.25);
    border-radius: 12px;
    padding: .75rem 1.1rem;
    margin-bottom: 1.5rem;
    font-family: 'Manrope', sans-serif;
    font-size: .85rem; color: #2D6A3F;
}
.lnp-bag-protection i { font-size: .95rem; flex-shrink: 0; }

/* ── Empty state ───────────────────────────────────────────── */
.lnp-bag-empty {
    text-align: center;
    background: var(--cat-white);
    border: 1.5px solid var(--cat-border);
    border-radius: 20px;
    padding: 3.5rem 1.5rem;
}
.lnp-bag-empty-icon { font-size: 3.5rem; margin-bottom: 1rem; }
.lnp-bag-empty h4 {
    font-family: 'Fredoka', sans-serif; font-weight: 700;
    color: var(--cat-dark); margin-bottom: .5rem;
}
.lnp-bag-empty p {
    font-family: 'Manrope', sans-serif; font-size: .9rem;
    color: var(--cat-muted); max-width: 360px; margin: 0 auto;
}

/* ── Bag item card ─────────────────────────────────────────── */
.lnp-bag-item {
    display: flex; align-items: flex-start; gap: 1rem;
    background: var(--cat-white);
    border: 1.5px solid var(--cat-border);
    border-radius: 16px;
    padding: 1rem;
    margin-bottom: .85rem;
    transition: box-shadow .2s, border-color .2s;
}
.lnp-bag-item:hover { box-shadow: var(--cat-shadow); border-color: rgba(124,92,191,.25); }

.lnp-bag-item-img {
    width: 96px; height: 96px; flex-shrink: 0;
    border-radius: 12px; overflow: hidden;
    background: var(--cat-purple-bg);
}
.lnp-bag-item-img img { width: 100%; height: 100%; object-fit: contain; padding: .5rem; }

.lnp-bag-item-info { flex: 1; min-width: 0; }
.lnp-bag-item-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .4rem; }
.lnp-bag-tag {
    font-family: 'Manrope', sans-serif; font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .4px;
    background: var(--cat-green-lt); color: #2D6A3F;
    border-radius: 20px; padding: .18rem .6rem;
}
.lnp-bag-tag-cat { background: var(--cat-purple-bg); color: var(--cat-purple); }

.lnp-bag-item-name {
    font-family: 'Fredoka', sans-serif; font-weight: 600;
    font-size: 1rem; color: var(--cat-dark);
    line-height: 1.3; margin-bottom: .25rem;
}
.lnp-bag-item-desc {
    font-family: 'Manrope', sans-serif; font-size: .8rem;
    color: var(--cat-muted); line-height: 1.5;
    margin-bottom: .5rem;
}

.lnp-bag-skills { display: flex; flex-wrap: wrap; gap: .3rem; }
.lnp-bag-skill-chip {
    font-family: 'Manrope', sans-serif; font-size: .7rem; font-weight: 600;
    background: var(--cat-purple-bg); color: var(--cat-purple);
    border: 1px solid rgba(124,92,191,.15);
    border-radius: 20px; padding: .18rem .65rem;
}
.lnp-skill-more { background: transparent; border-style: dashed; color: var(--cat-muted); }

.lnp-bag-item-right {
    flex-shrink: 0; display: flex; flex-direction: column;
    align-items: flex-end; gap: .6rem; text-align: right;
}
.lnp-bag-item-price { display: flex; flex-direction: column; align-items: flex-end; }
.lnp-bag-price-free {
    font-family: 'Fredoka', sans-serif; font-size: .85rem; font-weight: 700;
    color: var(--cat-green); white-space: nowrap;
}
.lnp-bag-price-retail {
    font-family: 'Manrope', sans-serif; font-size: .72rem;
    color: #9CA3AF; text-decoration: line-through;
}
.lnp-bag-remove-btn {
    width: 34px; height: 34px; border-radius: 50%;
    border: 1.5px solid var(--cat-border);
    background: var(--cat-white); color: var(--cat-muted);
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; cursor: pointer; transition: all .2s;
}
.lnp-bag-remove-btn:hover { background: #FEE2E2; border-color: #FCA5A5; color: #B91C1C; }
.lnp-bag-remove-btn:disabled { opacity: .5; cursor: not-allowed; }

.lnp-bag-browse-more { margin-top: .5rem; }

/* ── Sidebar ───────────────────────────────────────────────── */
.lnp-bag-sidebar {
    background: var(--cat-white);
    border: 1.5px solid var(--cat-border);
    border-radius: 20px;
    padding: 1.75rem;
    box-shadow: var(--cat-shadow);
    position: sticky; top: 100px;
}
.lnp-bag-sidebar-header h5 {
    font-family: 'Fredoka', sans-serif; font-weight: 700;
    font-size: 1.1rem; color: var(--cat-dark); margin-bottom: .35rem;
}
.lnp-bag-sidebar-header p {
    font-family: 'Manrope', sans-serif; font-size: .85rem;
    color: var(--cat-muted); margin-bottom: 1.25rem;
}

.lnp-bag-subscribed { text-align: center; }
.lnp-bag-subscribed-icon {
    width: 56px; height: 56px; margin: 0 auto .85rem;
    border-radius: 50%;
    background: var(--cat-green-lt); color: var(--cat-green);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
}
.lnp-bag-subscribed h5 {
    font-family: 'Fredoka', sans-serif; font-weight: 700;
    font-size: 1.15rem; color: var(--cat-dark); margin-bottom: .5rem;
}
.lnp-bag-subscribed p {
    font-family: 'Manrope', sans-serif; font-size: .85rem;
    color: var(--cat-muted); line-height: 1.6; margin-bottom: 1.25rem;
}

/* ── Plan comparison table ────────────────────────────────── */
.lnp-plan-compare { margin-top: .5rem; }
.lnp-compare-table { margin-bottom: 1.25rem; }

.lnp-compare-header { display: flex; margin-bottom: .25rem; }
.lnp-compare-feat-col { flex: 1.2; }
.lnp-compare-plan-col {
    flex: 1; text-align: center; padding: .5rem .25rem;
    display: flex; flex-direction: column; align-items: center; gap: .2rem;
}
.lnp-compare-plan-col.featured {
    background: var(--cat-purple-bg);
    border-radius: 12px 12px 0 0;
}
.lnp-compare-plan-name {
    font-family: 'Fredoka', sans-serif; font-weight: 600;
    font-size: .8rem; color: var(--cat-dark);
}
.lnp-compare-popular {
    font-family: 'Manrope', sans-serif; font-size: .6rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .4px;
    background: var(--cat-gold); color: #fff;
    border-radius: 20px; padding: .12rem .5rem;
}

.lnp-compare-row {
    display: flex; align-items: center;
    border-bottom: 1px solid #F3F4F6;
}
.lnp-compare-row:last-child { border-bottom: none; }
.lnp-compare-feat {
    flex: 1.2; font-family: 'Manrope', sans-serif; font-size: .78rem;
    color: var(--cat-muted); padding: .55rem 0;
}
.lnp-compare-cell {
    flex: 1; text-align: center;
    font-family: 'Manrope', sans-serif; font-size: .8rem; font-weight: 600;
    color: var(--cat-dark); padding: .55rem .25rem;
}
.lnp-compare-cell.featured { background: rgba(124,92,191,.06); }

.lnp-bag-subscribe-btn { margin-top: .5rem; }

.lnp-bag-login-note {
    font-family: 'Manrope', sans-serif; font-size: .8rem;
    color: var(--cat-muted); text-align: center;
    margin: .85rem 0 0;
}
.lnp-link { color: var(--cat-purple); font-weight: 600; text-decoration: none; }
.lnp-link:hover { color: var(--cat-purple-lt); }

/* ── Kids Also Liked ───────────────────────────────────────── */
.lnp-bag-also-liked { padding-top: 1rem; border-top: 1px solid var(--cat-border); }
/* [MARIO] note: .lnp-section-title is ALSO used unstyled on the product page's
   related-toys heading (same gap found there). Defining it here since this page
   needs it now — but it's a generic reusable heading class, not bag-specific.
   Worth moving to a shared file (lnp-pages.css?) later so it's not duplicated. */
.lnp-section-title {
    font-family: 'Fredoka', sans-serif;
    font-size: 1.4rem; font-weight: 700;
    color: var(--cat-dark); margin: 0;
}

.lnp-toy-card-img { position: relative; }
.lnp-bag-quick-add {
    position: absolute; bottom: .6rem; right: .6rem; z-index: 2;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--cat-purple); color: #fff; border: none;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; cursor: pointer; transition: all .2s;
    box-shadow: 0 2px 10px rgba(124,92,191,.4);
}
.lnp-bag-quick-add:hover { background: var(--cat-purple-lt); transform: scale(1.08); }
.lnp-bag-quick-add:disabled { opacity: .6; cursor: not-allowed; }

.lnp-toy-name-link { color: inherit; text-decoration: none; }
.lnp-toy-name-link:hover { color: var(--cat-purple); }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 991px) {
    .lnp-bag-sidebar { position: static; margin-top: 1.5rem; }
}

@media (max-width: 767px) {
    .lnp-bag-container { padding-top: 20px; padding-bottom: 40px; }
    .lnp-bag-impact { padding: .9rem .75rem; }
    .lnp-impact-value { font-size: 1.15rem; }
    .lnp-impact-label { font-size: .62rem; }

    .lnp-bag-item { flex-wrap: wrap; }
    .lnp-bag-item-img { width: 72px; height: 72px; }
    .lnp-bag-item-right {
        flex-direction: row; align-items: center; justify-content: space-between;
        width: 100%; margin-top: .5rem; padding-top: .5rem;
        border-top: 1px solid #F3F4F6;
    }
    .lnp-bag-item-price { align-items: flex-start; }

    .lnp-compare-feat { font-size: .7rem; }
    .lnp-compare-plan-name { font-size: .72rem; }
    .lnp-compare-cell { font-size: .72rem; }
}