/* MaamVerse — universe page polish (v128). Loaded after style.css. */

/* ---------- line icons ---------- */
.mvp-ico { width: 1em; height: 1em; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }

/* ---------- memory cards: medallion artwork instead of emoji ---------- */
body .memory-card .memory-image.empty-memory {
    --h: 268;
    position: relative;
    gap: 16px;
    background:
        radial-gradient(120% 85% at 50% 0%, hsla(var(--h), 85%, 62%, .30), transparent 62%),
        radial-gradient(90% 70% at 50% 110%, hsla(calc(var(--h) + 40), 85%, 55%, .22), transparent 60%),
        linear-gradient(165deg, #181b36, #0b0c1c);
}
body .memory-card .memory-image.empty-memory::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
    background-image: radial-gradient(rgba(255, 255, 255, .22) 1px, transparent 1.3px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 0, transparent 72%);
            mask-image: radial-gradient(circle at 50% 45%, #000 0, transparent 72%);
}
body .memory-card .memory-image.empty-memory > * { position: relative; z-index: 1; }
body .memory-card .empty-memory span.mvp-art {
    width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; font-size: 40px; filter: none;
    color: hsl(var(--h), 95%, 86%);
    background: linear-gradient(145deg, hsla(var(--h), 85%, 72%, .24), hsla(var(--h), 85%, 40%, .10));
    border: 1px solid hsla(var(--h), 95%, 82%, .38);
    box-shadow: 0 0 40px hsla(var(--h), 95%, 62%, .34), inset 0 0 24px hsla(var(--h), 95%, 82%, .12);
    transition: transform .45s ease, box-shadow .45s ease;
}
body .memory-card .empty-memory span.mvp-art .mvp-ico { width: 44px; height: 44px; stroke-width: 1.45; filter: drop-shadow(0 0 8px hsla(var(--h), 95%, 78%, .75)); }
body .memory-card:hover .empty-memory span.mvp-art { transform: translateY(-3px) scale(1.06); box-shadow: 0 0 58px hsla(var(--h), 95%, 64%, .5), inset 0 0 24px hsla(var(--h), 95%, 82%, .16); }
body .memory-card .empty-memory p { color: hsl(var(--h), 40%, 84%); letter-spacing: 2px; font-size: 12.5px; text-transform: uppercase; }

/* ---------- "Read Memory" = a real button ---------- */
body .memory-info .read-more-btn {
    display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; font-size: 13.5px; letter-spacing: .02em;
    padding: 11px 20px; color: #fff;
    background: linear-gradient(135deg, rgba(120, 92, 255, .55), rgba(70, 130, 255, .45));
    border: 1px solid rgba(160, 140, 255, .55);
    box-shadow: 0 6px 22px rgba(80, 60, 220, .25);
    transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}
body .memory-info .read-more-btn:hover { transform: translateY(-2px); background: linear-gradient(135deg, rgba(135, 108, 255, .8), rgba(80, 145, 255, .7)); box-shadow: 0 10px 30px rgba(90, 70, 240, .4); }
body .memory-info .read-more-btn:focus-visible { outline: 2px solid #c8bdff; outline-offset: 3px; }

/* ---------- social cards ---------- */
body .social-icon { color: #bfb3ff; transition: color .3s ease, background .3s ease, box-shadow .3s ease, transform .3s ease; }
body .social-icon .mvp-ico { width: 32px; height: 32px; }
body .social-card:hover .social-icon { transform: scale(1.08); }
body .social-card[data-net="facebook"]:hover .social-icon  { color: #7db4ff; background: rgba(80, 140, 255, .2);  box-shadow: 0 0 28px rgba(80, 140, 255, .35); }
body .social-card[data-net="instagram"]:hover .social-icon { color: #ff9ccd; background: rgba(255, 110, 180, .18); box-shadow: 0 0 28px rgba(255, 110, 180, .32); }
body .social-card[data-net="youtube"]:hover .social-icon   { color: #ff8a8a; background: rgba(255, 90, 90, .18);   box-shadow: 0 0 28px rgba(255, 90, 90, .32); }
body .social-card[data-net="tiktok"]:hover .social-icon    { color: #7ff3e6; background: rgba(60, 230, 215, .16);  box-shadow: 0 0 28px rgba(60, 230, 215, .3); }

/* ---------- other icons ---------- */
body .gallery-intro-icon { color: #c9bdff; }
body .gallery-intro-icon .mvp-ico { width: 34px; height: 34px; margin: auto; }
body .premium-detail-icon { color: #c9bdff; }
body .premium-detail-icon .mvp-ico { width: 26px; height: 26px; margin: auto; }
body .contact-buttons a.mvp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
body .contact-buttons a.mvp-btn .mvp-ico { width: 20px; height: 20px; flex: none; }

/* ---------- identity: the profile card follows you instead of leaving an empty gap ---------- */
@media (min-width: 981px) {
    body .premium-identity-shell { align-items: start; }
    body .premium-profile-card { position: sticky; top: 104px; }
}

/* ---------- phone ---------- */
.mvp-swipe { display: none; }
.mvp-dots { display: none; }
@media (max-width: 700px) {
    /* navigation: big, thumb-friendly pills; the logo row folds away once you scroll */
    body .navbar { padding: 10px 12px; gap: 10px; }
    body .navbar nav { width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
    body .navbar nav a {
        min-height: 42px; display: flex; align-items: center; justify-content: center; padding: 0 2px; border-radius: 999px;
        font-size: 11.5px; font-weight: 600; letter-spacing: 0; color: #d4d1ee; text-align: center;
        background: rgba(255, 255, 255, .045); border: 1px solid rgba(150, 130, 255, .2);
    }
    body .navbar nav a.active { color: #fff; background: rgba(125, 100, 255, .3); border-color: rgba(170, 150, 255, .65); }
    body .navbar.navbar-scrolled .nav-logo { display: none !important; }

    /* memories: one swipeable row, the next card peeks in */
    body #gallery .gallery-grid {
        display: flex; grid-template-columns: none; gap: 14px; overflow-x: auto; overflow-y: hidden;
        scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none;
        margin: 0 -18px; padding: 12px 18px 18px; scroll-padding: 0 18px;
    }
    body #gallery .gallery-grid::-webkit-scrollbar { display: none; }
    body #gallery .gallery-grid .memory-card { flex: 0 0 78%; max-width: 330px; scroll-snap-align: start; }
    body #gallery .gallery-grid .memory-card:hover { transform: none; }
    body .memory-card .memory-image { height: 168px; }
    body .memory-card .empty-memory span.mvp-art { width: 74px; height: 74px; }
    body .memory-card .empty-memory span.mvp-art .mvp-ico { width: 36px; height: 36px; }
    body .memory-info { padding: 20px; }
    body .memory-info p { min-height: 0; }
    .mvp-swipe { transition: opacity .4s ease; }
    .mvp-dots { display: flex; justify-content: center; gap: 0; margin: 0 0 8px; }
    .mvp-dots button { width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; -webkit-tap-highlight-color: transparent; }
    .mvp-dots button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 99px; background: rgba(160, 140, 255, .38); transition: width .25s ease, margin .25s ease, background .25s ease; }
    .mvp-dots button[aria-current="true"]::before { width: 22px; margin-left: -11px; background: #b8a8ff; }
    .mvp-swipe { display: block; text-align: center; margin: -4px 0 6px; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: #8f86c9; }

    /* personal details: two columns, the name takes the full width */
    body .premium-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    body .premium-facts > div:first-child { grid-column: 1 / -1; }
    body .premium-facts > div, body .premium-facts > button { padding: 12px; }
    body .premium-detail-card { padding: 20px; gap: 14px; }
    body .social-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    body .social-card { padding: 24px 12px; }
    body .social-card h3 { font-size: 18px; margin-top: 16px; }
    body .social-icon { width: 60px; height: 60px; }
    body .social-icon .mvp-ico { width: 28px; height: 28px; }
}
@media (prefers-reduced-motion: reduce) {
    body .memory-card .empty-memory span.mvp-art, body .social-icon, body .memory-info .read-more-btn { transition: none; }
}

@media (max-width: 700px) {
    body .premium-facts > .special-day-box { grid-column: 1 / -1; }
}

/* ---------- V157: photo covers on memory cards ---------- */
body .memory-card .memory-image.has-cover { overflow: hidden; }
body .memory-card .memory-image.has-cover::before { display: none; }
body .memory-card .memory-image.has-cover::after {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(180deg, rgba(5, 8, 22, .38) 0%, rgba(5, 8, 22, 0) 34%, rgba(5, 8, 22, 0) 58%, rgba(5, 8, 22, .55) 100%);
}
body .memory-card .memory-image > .mvp-cover {
    position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0;
    object-fit: cover; object-position: var(--mvp-x, 50%) var(--mvp-y, 26%); border-radius: 0; transition: transform .8s ease;
}
body .memory-card:hover .memory-image > .mvp-cover { transform: scale(1.045); }
body .memory-card .memory-image.has-cover > p { display: none; }
body .memory-card .has-cover span.mvp-art {
    position: absolute; top: 14px; left: 14px; z-index: 2; width: 42px; height: 42px; font-size: 20px;
    background: rgba(8, 10, 28, .52); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid hsla(var(--h), 95%, 82%, .5); box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
}
body .memory-card .has-cover span.mvp-art .mvp-ico { width: 21px; height: 21px; filter: none; }
body .memory-card:hover .has-cover span.mvp-art { transform: none; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
@media (prefers-reduced-motion: reduce) { body .memory-card .memory-image > .mvp-cover { transition: none; } body .memory-card:hover .memory-image > .mvp-cover { transform: none; } }

/* ---------- V176: desktop Memory cards = the same swipe row as on the phone (+ arrows, drag, dots, cards arrive from the side) ---------- */
.mvp-rail { position: relative; }
.mvp-arrow { display: none; }
@media (min-width: 701px) {
    body #gallery .gallery-grid {
        display: flex; grid-template-columns: none; gap: 22px; overflow-x: auto; overflow-y: hidden;
        scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain;
        padding: 18px 6px 24px; scroll-padding: 0 6px; margin: 0; cursor: grab;
    }
    body #gallery .gallery-grid::-webkit-scrollbar { display: none; }
    body #gallery .gallery-grid.is-drag { cursor: grabbing; scroll-snap-type: none; user-select: none; }
    body #gallery .gallery-grid .memory-card { flex: 0 0 clamp(300px, 28%, 380px); scroll-snap-align: start; }
    body #gallery .gallery-grid .memory-card:hover { transform: translateY(-6px); }
    .mvp-dots { display: flex; justify-content: center; gap: 0; margin: 0 0 8px; }
    .mvp-dots button { width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
    .mvp-dots button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 99px; background: rgba(160, 140, 255, .38); transition: width .25s ease, margin .25s ease, background .25s ease; }
    .mvp-dots button[aria-current="true"]::before { width: 22px; margin-left: -11px; background: #b8a8ff; }
    .mvp-arrow {
        display: flex; align-items: center; justify-content: center; position: absolute; top: 42%; z-index: 5; width: 48px; height: 48px; margin-top: -24px; padding: 0;
        border-radius: 50%; border: 1px solid rgba(170, 150, 255, .5); background: rgba(14, 14, 36, .78); color: #fff; font-size: 24px; line-height: 1; cursor: pointer;
        -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); transition: opacity .25s ease, transform .25s ease, background .25s ease;
    }
    .mvp-arrow:hover { background: rgba(90, 70, 220, .85); transform: scale(1.06); }
    .mvp-arrow:focus-visible { outline: 2px solid #c8bdff; outline-offset: 3px; }
    .mvp-arrow-l { left: -22px; } .mvp-arrow-r { right: -22px; }
    .mvp-arrow[disabled] { opacity: 0; pointer-events: none; }
    html[data-theme="light"] .mvp-arrow { background: rgba(255, 255, 255, .92); color: #3b2fa8; border-color: rgba(78, 60, 210, .45); box-shadow: 0 8px 22px rgba(60, 50, 140, .22); }
    html[data-theme="light"] .mvp-arrow:hover { background: #fff; }
}
@media (max-width: 1100px) and (min-width: 701px) { .mvp-arrow-l { left: -8px; } .mvp-arrow-r { right: -8px; } }
/* cards wait invisible until they fly in from the right, one after another (only when JS + motion are allowed) */
.mvp-pre .memory-card { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .mvp-pre .memory-card { opacity: 1; } .mvp-arrow { transition: none; } }

/* ---------- social buttons (V250): any number can be shown/hidden from Wish Admin -> Website -> Universe ---------- */
.contact-social-grid .social-card[hidden] { display: none !important; }
.contact-social-grid:not(:has(.social-card:not([hidden]))) { display: none; }
.contact-social-grid .social-card { order: 3; }
.contact-social-grid .social-card.mv-fb-page { order: 1; }
.contact-social-grid .social-card.mv-fb-me { order: 2; }
/* a half-empty last row stays centred, whatever is shown or hidden */
html body .contact-social-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
html body .contact-social-grid .social-card { flex: 1 1 200px; max-width: calc(25% - 15px); min-width: 0; }
@media (min-width: 621px) and (max-width: 1000px) { html body .contact-social-grid .social-card { flex: 0 1 calc(50% - 10px); max-width: none; } }
/* V269 phone: the social buttons are one swipeable row (like the memories); the next card peeks in, dots + a hint show below */
@media (max-width: 620px) {
    html body .contact-social-grid {
        flex-wrap: nowrap; justify-content: flex-start; justify-content: safe center; gap: 12px; overflow-x: auto; overflow-y: hidden;
        scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain;
        margin: 0 -18px; padding: 12px 18px 16px; scroll-padding: 0 18px;
    }
    html body .contact-social-grid::-webkit-scrollbar { display: none; }
    html body .contact-social-grid .social-card { flex: 0 0 64%; max-width: 250px; min-height: 200px; scroll-snap-align: start; }
    html body .contact-social-grid .social-card:hover { transform: none; }
    .mvp-sdots[hidden], .mvp-shint[hidden] { display: none; }
    .mvp-shint { display: block; text-align: center; margin: -4px 0 6px; font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: #8f86c9; transition: opacity .4s ease; }
}
@media (min-width: 621px) { .mvp-sdots, .mvp-shint { display: none !important; } }