/**
 * PMember Member Area — UI Design System
 *
 * Central design tokens + reusable components used by the member area
 * (sidebar, topbar, dashboard, access product, product, transaction).
 *
 * Loaded after style.min.css so it can safely refine the Tailwind base.
 */

:root {
    /* surface & text */
    --pm-bg: #f4f6fc;
    --pm-surface: #ffffff;
    --pm-surface-2: #f8faff;
    --pm-border: #e6eaf4;
    --pm-border-strong: #d6dcec;
    --pm-text: #0f172a;
    --pm-text-soft: #475569;
    --pm-muted: #7b87a0;

    /* brand */
    --pm-primary: #4f46e5;
    --pm-primary-dark: #4338ca;
    --pm-primary-deep: #312e81;
    --pm-primary-light: #6366f1;
    --pm-primary-soft: #eef1ff;
    --pm-primary-soft-2: #e0e5ff;
    --pm-accent: #0ea5e9;
    --pm-gradient: linear-gradient(135deg, #4338ca 0%, #5b53e8 45%, #0ea5e9 100%);
    --pm-gradient-soft: linear-gradient(135deg, #eef1ff 0%, #e6f4ff 100%);

    /* status */
    --pm-success: #059669;
    --pm-success-soft: #e7f8f1;
    --pm-danger: #dc2626;
    --pm-danger-soft: #fdecec;
    --pm-warning: #d97706;
    --pm-warning-soft: #fff5e6;
    --pm-info: #0284c7;
    --pm-info-soft: #e6f4fd;
    --pm-neutral: #64748b;
    --pm-neutral-soft: #eef1f6;

    /* elevation */
    --pm-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --pm-shadow: 0 2px 10px rgba(15, 23, 42, .06);
    --pm-shadow-lg: 0 18px 38px -14px rgba(49, 46, 129, .28);
    --pm-ring: 0 0 0 3px rgba(99, 102, 241, .16);

    --pm-radius: 16px;
    --pm-radius-sm: 12px;
    --pm-radius-xs: 10px;
}

html.pmember-dark {
    --pm-bg: #0f172a;
    --pm-surface: #1e293b;
    --pm-surface-2: #243047;
    --pm-border: #334155;
    --pm-border-strong: #415068;
    --pm-text: #e2e8f0;
    --pm-text-soft: #cbd5e1;
    --pm-muted: #94a3b8;

    --pm-primary: #818cf8;
    --pm-primary-dark: #6366f1;
    --pm-primary-deep: #c7d2fe;
    --pm-primary-light: #a5b4fc;
    --pm-primary-soft: rgba(99, 102, 241, .16);
    --pm-primary-soft-2: rgba(99, 102, 241, .26);
    --pm-accent: #38bdf8;
    --pm-gradient: linear-gradient(135deg, #3730a3 0%, #4f46e5 45%, #0284c7 100%);
    --pm-gradient-soft: linear-gradient(135deg, rgba(99, 102, 241, .18) 0%, rgba(14, 165, 233, .16) 100%);

    --pm-success: #34d399;
    --pm-success-soft: rgba(16, 185, 129, .16);
    --pm-danger: #f87171;
    --pm-danger-soft: rgba(239, 68, 68, .16);
    --pm-warning: #fbbf24;
    --pm-warning-soft: rgba(245, 158, 11, .16);
    --pm-info: #38bdf8;
    --pm-info-soft: rgba(56, 189, 248, .16);
    --pm-neutral: #94a3b8;
    --pm-neutral-soft: rgba(148, 163, 184, .16);

    --pm-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --pm-shadow: 0 2px 10px rgba(0, 0, 0, .35);
    --pm-shadow-lg: 0 18px 38px -14px rgba(0, 0, 0, .6);
    --pm-ring: 0 0 0 3px rgba(129, 140, 248, .22);
}

/* ---------------------------------------------------------------
   Page shell
   --------------------------------------------------------------- */
.pm-page-head {
    margin-bottom: 22px;
}

/* on desktop the topbar already shows the page title, so hide only the
   in-page title and keep the subtitle visible */
@media (min-width: 1024px) {
    .pm-page-title {
        display: none;
    }

    .pm-page-sub {
        margin-top: 0;
    }
}

.pm-page-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--pm-text);
    letter-spacing: -.01em;
}

.pm-page-sub {
    font-size: 13.5px;
    color: var(--pm-muted);
    margin-top: 4px;
}

/* ---------------------------------------------------------------
   Card
   --------------------------------------------------------------- */
.pm-card {
    position: relative;
    background-color: var(--pm-surface);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius);
    box-shadow: var(--pm-shadow-sm);
    transition: transform .28s cubic-bezier(.22, .68, .36, 1),
                box-shadow .28s ease,
                border-color .28s ease;
    will-change: transform;
}

/* accent bar that reveals on hover */
.pm-card--interactive::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18px;
    bottom: 18px;
    width: 3px;
    border-radius: 0 4px 4px 0;
    background: var(--pm-gradient);
    opacity: 0;
    transform: scaleY(.3);
    transform-origin: center;
    transition: opacity .28s ease, transform .28s ease;
}

.pm-card--interactive:hover {
    transform: translateY(-4px);
    box-shadow: var(--pm-shadow-lg);
    border-color: var(--pm-primary-light);
}

.pm-card--interactive:hover::before {
    opacity: 1;
    transform: scaleY(1);
}

/* image inside a card: gentle zoom when the pointer approaches the card */
.pm-thumb {
    overflow: hidden;
    border-radius: var(--pm-radius-sm);
    background-color: var(--pm-surface-2);
    position: relative;
}

.pm-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s cubic-bezier(.22, .68, .36, 1), filter .5s ease;
}

.pm-card--interactive:hover .pm-thumb img,
.pm-thumb:hover img {
    transform: scale(1.08);
    filter: saturate(1.08);
}

/* soft glow behind the thumbnail on hover */
.pm-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(99, 102, 241, 0);
    transition: box-shadow .3s ease;
    pointer-events: none;
}

.pm-card--interactive:hover .pm-thumb::after {
    box-shadow: inset 0 0 0 2px rgba(99, 102, 241, .35);
}

/* ---------------------------------------------------------------
   Buttons
   --------------------------------------------------------------- */
.pm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: var(--pm-radius-xs);
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.2;
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .18s ease, box-shadow .22s ease, background-color .22s ease, color .22s ease, border-color .22s ease;
}

.pm-btn:hover {
    transform: translateY(-1px);
}

/* our stylesheet loads after Tailwind, so .pm-btn's display would otherwise beat
   .hidden — this keeps Alpine's :class="'hidden'" toggles working */
.pm-btn.hidden,
.pm-badge.hidden,
.pm-chip.hidden {
    display: none !important;
}

.pm-btn:active {
    transform: translateY(0);
}

.pm-btn svg {
    width: 15px;
    height: 15px;
    flex: none;
}

.pm-btn-primary {
    background: var(--pm-gradient);
    color: #ffffff;
}

.pm-btn-primary:hover {
    color: #ffffff;
    filter: brightness(1.06);
}

.pm-btn-outline {
    background-color: transparent;
    border-color: var(--pm-primary);
    color: var(--pm-primary);
}

.pm-btn-outline:hover {
    background-color: var(--pm-primary-soft);
    color: var(--pm-primary-dark);
}

.pm-btn-soft {
    background-color: var(--pm-primary-soft);
    border-color: transparent;
    color: var(--pm-primary-dark);
}

.pm-btn-soft:hover {
    background-color: var(--pm-primary-soft-2);
}

.pm-btn-muted {
    background-color: var(--pm-neutral-soft);
    color: var(--pm-text-soft);
    border-color: transparent;
}

.pm-btn-muted:hover {
    background-color: var(--pm-border);
}

.pm-btn-block {
    width: 100%;
}

/* ---------------------------------------------------------------
   Badges / chips
   --------------------------------------------------------------- */
.pm-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 9999px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .01em;
    background-color: var(--pm-neutral-soft);
    color: var(--pm-neutral);
    white-space: nowrap;
}

.pm-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background-color: currentColor;
    flex: none;
}

.pm-badge--success { background-color: var(--pm-success-soft); color: var(--pm-success); }
.pm-badge--danger  { background-color: var(--pm-danger-soft);  color: var(--pm-danger); }
.pm-badge--warning { background-color: var(--pm-warning-soft); color: var(--pm-warning); }
.pm-badge--info    { background-color: var(--pm-info-soft);    color: var(--pm-info); }
.pm-badge--primary { background-color: var(--pm-primary-soft); color: var(--pm-primary-dark); }

.pm-chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 11px;
    border-radius: var(--pm-radius-xs);
    border: 1px solid var(--pm-border);
    background-color: var(--pm-surface-2);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--pm-text-soft);
    transition: border-color .2s ease, color .2s ease;
}

.pm-chip:hover {
    border-color: var(--pm-primary-light);
    color: var(--pm-primary);
}

/* ---------------------------------------------------------------
   Meta blocks (label + value)
   --------------------------------------------------------------- */
.pm-meta-label {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--pm-muted);
    margin-bottom: 4px;
}

.pm-meta-value {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pm-text);
}

.pm-meta-sep {
    border-right: 1px solid var(--pm-border);
}

.pm-copy-btn {
    display: inline-flex;
    color: var(--pm-muted);
    cursor: pointer;
    transition: color .2s ease, transform .2s ease;
}

.pm-copy-btn:hover {
    color: var(--pm-primary);
    transform: scale(1.12);
}

/* ---------------------------------------------------------------
   Search bar
   --------------------------------------------------------------- */
.pm-search {
    display: flex;
    align-items: stretch;
    background-color: var(--pm-surface);
    border: 1px solid var(--pm-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--pm-shadow-sm);
    transition: border-color .22s ease, box-shadow .22s ease;
}

.pm-search:focus-within {
    border-color: var(--pm-primary-light);
    box-shadow: var(--pm-ring);
}

.pm-search__icon {
    flex: none;
    display: flex;
    align-items: center;
    padding-left: 16px;
    color: var(--pm-muted);
}

.pm-search__icon svg {
    width: 18px;
    height: 18px;
}

.pm-search input[type="text"],
.pm-search input:not([type]) {
    flex: auto;
    min-width: 0;
    border: 0;
    outline: none;
    box-shadow: none;
    background-color: transparent;
    color: var(--pm-text);
    font-size: 14.5px;
    padding: 13px 14px;
}

.pm-search input::placeholder {
    color: var(--pm-muted);
    opacity: .75;
}

.pm-search select {
    flex: none;
    border: 0;
    outline: none;
    box-shadow: none;
    background-color: transparent;
    color: var(--pm-text-soft);
    font-size: 13.5px;
    font-weight: 600;
    padding: 0 14px;
    cursor: pointer;
}

.pm-search__divider {
    width: 1px;
    align-self: center;
    height: 22px;
    background-color: var(--pm-border);
    flex: none;
}

.pm-search__submit {
    flex: none;
    border: 0;
    cursor: pointer;
    padding: 0 24px;
    font-size: 13.5px;
    font-weight: 700;
    color: #ffffff;
    background: var(--pm-gradient);
    transition: filter .22s ease;
}

.pm-search__submit:hover {
    filter: brightness(1.08);
}

.pm-search__submit--icon {
    padding: 0 18px;
}

/* ---------------------------------------------------------------
   Stat cards
   --------------------------------------------------------------- */
.pm-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

@media (max-width: 640px) {
    .pm-stat-grid {
        grid-template-columns: 1fr;
    }
}

.pm-stat {
    background-color: var(--pm-surface);
    border: 1px solid var(--pm-border);
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: var(--pm-shadow-sm);
    transition: transform .28s cubic-bezier(.22, .68, .36, 1), box-shadow .28s ease, border-color .28s ease;
}

.pm-stat:hover {
    transform: translateY(-3px);
    box-shadow: var(--pm-shadow-lg);
    border-color: var(--pm-primary-light);
}

.pm-stat__label {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--pm-muted);
}

.pm-stat__value {
    font-size: 26px;
    font-weight: 800;
    color: var(--pm-text);
    margin-top: 4px;
    line-height: 1.15;
}

.pm-stat__value--danger  { color: var(--pm-danger); }
.pm-stat__value--success { color: var(--pm-success); }
.pm-stat__value--primary { color: var(--pm-primary); }

/* ---------------------------------------------------------------
   Filter pills
   --------------------------------------------------------------- */
.pm-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.pm-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: 9999px;
    border: 1px solid var(--pm-border);
    background-color: var(--pm-surface);
    color: var(--pm-text-soft);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: var(--pm-shadow-sm);
    transition: transform .2s ease, box-shadow .22s ease, border-color .22s ease, color .22s ease, background-color .22s ease;
}

.pm-pill:hover {
    transform: translateY(-2px);
    border-color: var(--pm-primary-light);
    color: var(--pm-primary);
}

.pm-pill.is-active {
    background: var(--pm-gradient);
    border-color: transparent;
    color: #ffffff;
    font-weight: 700;
}

.pm-pill.is-active:hover {
    color: #ffffff;
}

.pm-pill__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9999px;
    background-color: var(--pm-neutral-soft);
    color: var(--pm-text-soft);
    font-size: 11px;
    font-weight: 700;
}

.pm-pill.is-active .pm-pill__count {
    background-color: rgba(255, 255, 255, .25);
    color: #ffffff;
}

/* ---------------------------------------------------------------
   Empty state
   --------------------------------------------------------------- */
.pm-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 64px 20px;
    background-color: var(--pm-surface);
    border: 1px dashed var(--pm-border-strong);
    border-radius: var(--pm-radius);
}

.pm-empty__icon {
    width: 64px;
    height: 64px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--pm-gradient-soft);
    color: var(--pm-primary);
    margin-bottom: 18px;
}

.pm-empty__icon svg {
    width: 30px;
    height: 30px;
}

.pm-empty__title {
    font-size: 17px;
    font-weight: 800;
    color: var(--pm-text);
    margin-bottom: 6px;
}

.pm-empty__desc {
    font-size: 13.5px;
    color: var(--pm-muted);
    max-width: 420px;
    margin-bottom: 20px;
    line-height: 1.6;
}

/* ---------------------------------------------------------------
   Pagination
   --------------------------------------------------------------- */
.pm-pager {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 22px 0 4px 0;
}

.pm-pager a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--pm-radius-xs);
    border: 1px solid var(--pm-border);
    background-color: var(--pm-surface);
    color: var(--pm-text-soft);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all .22s ease;
}

.pm-pager a svg {
    width: 15px;
    height: 15px;
    fill: currentColor;
}

.pm-pager a.is-enabled:hover {
    background: var(--pm-gradient);
    border-color: transparent;
    color: #ffffff;
    transform: translateY(-2px);
}

.pm-pager a.is-disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* ---------------------------------------------------------------
   Small helpers
   --------------------------------------------------------------- */
.pm-title-link {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--pm-text);
    text-decoration: none;
    transition: color .2s ease;
}

.pm-card--interactive:hover .pm-title-link {
    color: var(--pm-primary);
}

.pm-text-muted { color: var(--pm-muted); }
.pm-text-soft { color: var(--pm-text-soft); }
.pm-text-strong { color: var(--pm-text); }

.pm-price {
    font-size: 17px;
    font-weight: 800;
    color: var(--pm-primary);
    letter-spacing: -.01em;
}

.pm-divider {
    height: 1px;
    background-color: var(--pm-border);
}

@media (prefers-reduced-motion: reduce) {
    .pm-card,
    .pm-card--interactive::before,
    .pm-thumb img,
    .pm-btn,
    .pm-pill,
    .pm-stat {
        transition: none !important;
    }

    .pm-card--interactive:hover,
    .pm-stat:hover,
    .pm-pill:hover,
    .pm-btn:hover {
        transform: none !important;
    }
}


/* ---------------------------------------------------------------
   Desktop sidebar show / hide
   The sidebar is shown by default; the topbar toggle collapses it and
   lets the content area expand into the freed space.
   --------------------------------------------------------------- */
@media (min-width: 1024px) {
    .pmember-sidebar.is-collapsed {
        width: 0 !important;
        border-right-color: transparent;
    }

    .pmember-main {
        transition: margin-left .2s ease-in-out;
    }

    .pmember-main.is-collapsed {
        margin-left: 0 !important;
    }

    .pmember-topbar-title {
        transition: left .2s ease-in-out;
    }

    .pmember-topbar-title.is-collapsed {
        left: 96px;
    }
}

/* ---------------------------------------------------------------
   Sidebar toggle (desktop only)
   A panel glyph: the left rail is filled while the sidebar is open and
   empties out once it is hidden. Sits in the sidebar's bottom-right corner.
   --------------------------------------------------------------- */
.pmember-sidebar-arrow {
    display: none;
}

@media (min-width: 1024px) {
    .pmember-sidebar-arrow {
        position: fixed;
        bottom: 22px;
        left: 156px;
        z-index: 60;
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 13px;
        cursor: pointer;
        color: var(--pm-text-soft);
        background-color: var(--pm-surface);
        border: 1px solid var(--pm-border);
        box-shadow: var(--pm-shadow);
        transition: left .2s ease-in-out, background-color .22s ease, color .22s ease,
                    border-color .22s ease, transform .22s ease, box-shadow .22s ease;
    }

    .pmember-sidebar-arrow:hover {
        background: var(--pm-gradient);
        border-color: transparent;
        color: #ffffff;
        transform: translateY(-2px);
        box-shadow: var(--pm-shadow-lg);
    }

    /* sidebar hidden -> park the control at the screen edge so it stays reachable */
    .pmember-sidebar-arrow.is-collapsed {
        left: 14px;
    }

    .pmember-sidebar-arrow svg {
        width: 19px;
        height: 19px;
    }

    /* open: the rail reads as a filled sidebar. collapsed: it thins out and
       slides to the panel edge, so the glyph itself shows the state. */
    .pmember-sidebar-arrow__rail {
        stroke-width: 5;
        transform-origin: center;
        transition: stroke-width .25s ease, transform .25s ease, opacity .25s ease;
    }

    .pmember-sidebar-arrow.is-collapsed .pmember-sidebar-arrow__rail {
        stroke-width: 1.7;
        opacity: .55;
        transform: translateX(-3px);
    }
}

/* ===============================================================
   Prose
   ---------------------------------------------------------------
   Shared styling for content coming out of the WordPress post
   editor (headings, links, images, code, quotes, bullets and
   numbering). Used by the single file page and the single
   salespage, which used to carry their own identical copy of these
   rules. New selector, so it can not collide with anything above.
   =============================================================== */
.pm-prose {
    color: var(--pm-text-soft);
    font-size: 14px;
    line-height: 1.75;
}

.pm-prose h1,
.pm-prose h2,
.pm-prose h3,
.pm-prose h4 {
    color: var(--pm-text);
    font-weight: 800;
    margin: 22px 0 10px 0;
    line-height: 1.35;
}

.pm-prose h1 { font-size: 20px; }
.pm-prose h2 { font-size: 18px; }
.pm-prose h3 { font-size: 16px; }
.pm-prose p { margin-bottom: 12px; }

.pm-prose a {
    color: var(--pm-primary);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--pm-primary-soft-2);
}

.pm-prose a:hover {
    border-bottom-color: var(--pm-primary);
}

.pm-prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--pm-radius-sm);
    box-shadow: var(--pm-shadow-sm);
}

.pm-prose code {
    background-color: var(--pm-surface-2);
    border: 1px solid var(--pm-border);
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 12.5px;
    color: var(--pm-primary-dark);
}

.pm-prose pre {
    background-color: var(--pm-surface-2);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-sm);
    padding: 14px 16px;
    overflow-x: auto;
    margin-bottom: 14px;
}

.pm-prose blockquote {
    border-left: 3px solid var(--pm-primary);
    background: var(--pm-gradient-soft);
    border-radius: 0 12px 12px 0;
    padding: 12px 16px;
    margin: 14px 0;
}

/* replace the default disc / decimal markers with a soft brand dot */
.pm-prose ul,
.pm-prose ol {
    list-style: none;
    padding-left: 0;
    margin: 12px 0;
}

.pm-prose ul li,
.pm-prose ol li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 9px;
}

.pm-prose ul li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 9px;
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: var(--pm-gradient);
    box-shadow: 0 0 0 3px var(--pm-primary-soft);
}

.pm-prose ol {
    counter-reset: pm-ol;
}

.pm-prose ol li {
    counter-increment: pm-ol;
}

.pm-prose ol li::before {
    content: counter(pm-ol);
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    border-radius: 7px;
    background: var(--pm-primary-soft);
    color: var(--pm-primary-dark);
    font-size: 11px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* nested lists keep the same rhythm, one step in */
.pm-prose ul ul,
.pm-prose ul ol,
.pm-prose ol ul,
.pm-prose ol ol {
    margin: 8px 0 0 14px;
}