/**
 * ============================================================================
 * Portal Cloud 9 - Dashboard Styles
 * ============================================================================
 * 
 * Version: 8.3.6
 * Author: Brian Agoi (Gradyzer)
 * Company: Gradyzer
 * License: GPL-2.0+
 * ============================================================================
 */

/**
 * ============================================================================
 * Portal Cloud 9 - Dashboard Core Styles
 * ============================================================================
 * Version: 8.3.5
 * Author: Brian Agoi (Gradyzer)
 * Company: Gradyzer
 * ============================================================================
 */

/* ── CSS custom properties ───────────────────────────────────────── */
:root {
    --p9-primary:var(--p9-accent-1, #008CFF);
    --p9-primary-dark:#0066CC;
    --p9-primary-h:#0077E6;
    --p9-danger:#dc2626;
    --p9-danger-h:#b91c1c;
    --p9-success:#059669;
    --p9-success-h:#047857;
    --p9-warning:#d97706;
    --p9-warning-h:#b45309;
    --p9-bg-light:#f1f5f9;
    --p9-panel-light:rgba(255,255,255,.80);
    --p9-border-light:rgba(0,0,0,.08);
    --p9-text-light:#334155;
    --p9-muted-light:#64748b;
    --p9-bg-dark:#4a4a4a;
    --p9-panel-dark:rgba(60,60,60,.92);
    --p9-border-dark:#708090;
    --p9-text-dark:#ffffff;
    --p9-muted-dark:#cbd5e1;
    --p9-radius:16px;
    --p9-shadow:0 8px 32px rgba(0,0,0,.15);
    --p9-gradient:linear-gradient(135deg, var(--p9-primary) 0%, #000000 100%);
    --p9-gradient-hover:linear-gradient(135deg, #0077E6 0%, #1a1a1a 100%)}

body {
    --p9-bg:var(--p9-bg-light);
    --p9-panel:var(--p9-panel-light);
    --p9-border:var(--p9-border-light);
    --p9-text:var(--p9-text-light);
    --p9-muted:var(--p9-muted-light)}

/* ── Dark mode variable overrides ───────────────────────────────── */
body.portalcloud9-dark {
    --p9-bg:var(--p9-bg-dark);
    --p9-panel:var(--p9-panel-dark);
    --p9-border:var(--p9-border-dark);
    --p9-text:var(--p9-text-dark);
    --p9-muted:var(--p9-muted-dark);}

.portalcloud9-dashboard-wrapper * {
    box-sizing:border-box}

/* ============================================================
   THEME ISOLATION — safe scoped reset
   Only resets box-sizing and font-family.
   Does NOT touch padding, background, border, color, or margin
   on generic elements — those are set per-component below.
   ============================================================ */
.portalcloud9-dashboard-wrapper,
.portalcloud9-dashboard-wrapper * {
    box-sizing: border-box !important;
}

.portalcloud9-dashboard-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Prevent theme from adding underlines to portal links */
.portalcloud9-dashboard-wrapper a {
    text-decoration: none;
}

/* ── END THEME ISOLATION ── */


.portalcloud9-dashboard-wrapper {
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    line-height:1.6;
    background:var(--p9-bg);
    color:var(--p9-text);
    transition:background .3s,color .3s}

/* ── Shared button components ───────────────────────────────────── */
.p9-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px 20px;
    border:none;
    border-radius:8px;
    cursor:pointer;
    font-size:14px;
    font-weight:500;
    text-decoration:none;
    transition:all .3s ease;
    line-height:1.4;
    position:relative;
    overflow:hidden}

.p9-btn:disabled {
    opacity:.5;
    cursor:not-allowed}

.p9-btn-primary {
    background:var(--p9-gradient);
    color:#fff;
    box-shadow:0 4px 15px rgb(0 140 255 / .35)}

.p9-btn-primary:hover {
    background:var(--p9-gradient-hover);
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgb(0 140 255 / .4)}

.p9-btn-secondary {
    background:var(--p9-grey-500);
    color:#fff}

.p9-btn-secondary:hover {
    background:var(--p9-grey-700)}

.p9-btn-success {
    background:var(--p9-success);
    color:#fff}

.p9-btn-success:hover {
    background:var(--p9-success-h)}

.p9-btn-danger {
    background:var(--p9-danger);
    color:#fff}

.p9-btn-danger:hover {
    background:var(--p9-danger-h)}

.p9-btn-outline {
    background:#fff0;
    border: none;
    color:var(--p9-text)}

.p9-btn-outline:hover {
    background:var(--p9-panel);
    border-color:var(--p9-primary)}

/* ── Shared glassmorphic card component ──────────────────────────── */
.p9-card {
    background:var(--p9-panel);
    border:none;
    border-radius:var(--p9-radius);
    padding:24px;
    box-shadow:0 0 0 1.5px var(--p9-ring-15,rgba(30,144,255,.15)), 0 4px 20px var(--p9-ring-12,rgba(30,144,255,.12)), 0 2px 8px rgba(0,0,0,.06);
    transition:all .3s ease;
    position:relative;
    overflow:hidden;
    color:var(--p9-text)}


.p9-card:hover {
    transform:translateY(-4px);
    box-shadow:0 8px 28px rgba(0,0,0,.13)}


/* ── Shared form field groups ───────────────────────────────────── */
.p9-form-group {
    margin-bottom:20px}

.p9-form-group label {
    display:block;
    margin-bottom:6px;
    font-weight:600;
    font-size:14px;
    color:var(--p9-text)}

.p9-form-group input,.p9-form-group select,.p9-form-group textarea {
    width:100%;
    padding:12px 16px;
    border: none;
    border-radius:8px;
    font-size:14px;
    background:var(--p9-panel);
    color:var(--p9-text);
    transition:all .3s ease;
    font-family:inherit}

.p9-form-group input:focus,.p9-form-group select:focus,.p9-form-group textarea:focus {
    outline:none;
    border-color:var(--p9-primary);
    box-shadow:0 0 0 3px rgb(0 140 255 / .15)}

.p9-form-group small {
    display:block;
    margin-top:4px;
    color:var(--p9-muted);
    font-size:12px}

/* ── Alert and status message boxes ─────────────────────────────── */
.p9-error,.p9-success,.p9-warning,.p9-info {
    padding:12px 16px;
    border-radius:8px;
    margin-bottom:20px;
    font-size:14px;
    box-shadow:0 0 0 1.5px var(--p9-ring-15,rgba(30,144,255,.15)), 0 4px 20px var(--p9-ring-12,rgba(30,144,255,.12)), 0 2px 8px rgba(0,0,0,.06); background:var(--p9-panel)}

.p9-error {
    background:#fef2f2;
    border-color:#ef4444;
    color:#991b1b}

.p9-success {
    background:#f0fdf4;
    border-color:#22c55e;
    color:#166534}

.p9-warning {
    background:#fffbeb;
    border-color:#f59e0b;
    color:#92400e}

.p9-info {
    background:#eff6ff;
    border-color:var(--p9-primary);
    color:#1e40af}

/* ── Shared modal component ─────────────────────────────────────── */
.p9-modal {
    position:fixed;
    inset:0;
    background:rgb(0 0 0 / .5);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:10000;
    padding:20px;
    backdrop-filter:blur(4px)}

.p9-modal-content {
    background:var(--p9-panel);
    border-radius:16px;
    max-width:600px;
    width:100%;
    max-height:80vh;
    overflow-y:auto;
    box-shadow:0 20px 40px rgb(0 0 0 / .2);
    position:relative;
    color:var(--p9-text)}

.p9-modal-header {
    padding:20px 24px;
    background:var(--p9-gradient);
    color:#fff;
    border-radius:16px 16px 0 0;
    display:flex;
    align-items:center;
    justify-content:space-between}

.p9-modal-header h3 {
    margin:0;
    font-size:18px;
    font-weight:600}

.p9-modal-close {
    background:rgb(255 255 255 / .2);
    border:none;
    font-size:24px;
    cursor:pointer;
    color:#fff;
    width:32px;
    height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    transition:background .3s ease}

.p9-modal-close:hover {
    background:rgb(255 255 255 / .3)}

.p9-modal-body {
    padding:24px}

.p9-modal-footer {
    padding:20px 24px;
    border-top:1px solid var(--p9-border);
    display:flex;
    gap:12px;
    justify-content:flex-end}

/* ── Toast notification component ───────────────────────────────── */
.p9-notification-toast {
    position:fixed;
    top:20px;
    right:-400px;
    background:var(--p9-panel);
    border: none;
    padding:16px 20px;
    border-radius:12px;
    box-shadow:0 8px 28px rgba(0,0,0,.13);
    display:flex;
    align-items:center;
    gap:12px;
    z-index:10001;
    transition:right .3s ease;
    max-width:400px;
    box-shadow:0 0 0 1.5px var(--p9-ring-15,rgba(30,144,255,.15)), 0 4px 20px var(--p9-ring-12,rgba(30,144,255,.12)), 0 2px 8px rgba(0,0,0,.06); background:var(--p9-panel)}

.p9-notification-toast.show {
    right:20px}

.p9-notification-toast.p9-success {
    border-color:var(--p9-success)}

.p9-notification-toast.p9-error {
    border-color:var(--p9-danger)}

.p9-notification-close {
    background:none;
    border:none;
    font-size:20px;
    cursor:pointer;
    color:var(--p9-muted);
    margin-left:auto;
    padding:4px;
    border-radius:4px;
    transition:background .3s ease}

.p9-notification-close:hover {
    background:var(--p9-panel)}

/* ── Accessibility utilities ────────────────────────────────────── */
.p9-screen-reader-text {
    position:absolute!important;
    clip:rect(1px,1px,1px,1px);
    width:1px;
    height:1px;
    overflow:hidden}

/* ── Utility spacing and alignment helpers ───────────────────────── */
.p9-text-center {
    text-align:center}

.p9-text-right {
    text-align:right}

.p9-mt-1 {
    margin-top:8px}

.p9-mt-2 {
    margin-top:16px}

.p9-mt-3 {
    margin-top:24px}

.p9-mb-1 {
    margin-bottom:8px}

.p9-mb-2 {
    margin-bottom:16px}

.p9-mb-3 {
    margin-bottom:24px}

/* ── Responsive: tablet and mobile ──────────────────────────────── */
@media (max-width:768px) {
    .p9-card {
    padding:16px}

.p9-btn {
    padding:8px 16px;
    font-size:13px}

.p9-modal-content {
    margin:10px;
    max-height:calc(100vh - 20px)}

}

/* ── Loading spinner ────────────────────────────────────────────── */
.p9-loading-spinner {
    display:inline-block;
    width:20px;
    height:20px;
    border:3px solid rgb(0 140 255 / .3);
    border-top-color:var(--p9-primary);
    border-radius:50%;
    animation:p9-spin .8s linear infinite;
    margin-right:8px}

/* ── Keyframe animations ────────────────────────────────────────── */
@keyframes p9-spin {
    to {
    transform:rotate(360deg)}

}


/* ============================================
   DASHBOARD TEMPLATE STYLES
   ============================================ */
/* Remove every scrap of margin/padding the theme may have added — fullscreen inbox only */
body.p9-inbox-fullscreen {
    margin:  0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    height: 100% !important;
    width:  100% !important;
}
body.p9-inbox-fullscreen .portalcloud9-dashboard-wrapper {
    height: 100vh !important;
    width:  100% !important;
    margin:  0 !important;
    padding: 0 !important;
}

/* ============================================
   TAB NOTICE STYLES
   ============================================ */
.portalcloud9-tab-notice {
    position: fixed;
    top: 1.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    width: max-content;
    max-width: min(520px, calc(100vw - 2rem));
    animation: p9NoticeIn .35s cubic-bezier(.4,0,.2,1) both;
}
.portalcloud9-tab-notice__inner {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .875rem 1.25rem;
    border-radius: 999px;
    /* Red→black background, white→black gradient border */
    background: linear-gradient(135deg, #ff0000, #1a0000) padding-box,
                linear-gradient(135deg, #ffffff, #000000) border-box;
    border: 2px solid transparent;
    box-shadow: 0 8px 32px rgba(0,0,0,.45);
    color: #ffffff;
    font-size: .9375rem;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.4;
}
.portalcloud9-tab-notice__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    opacity: .9;
}
.portalcloud9-tab-notice__msg {
    flex: 1;
}
.portalcloud9-tab-notice__close {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: .25rem;
    cursor: pointer;
    color: rgba(255,255,255,.7);
    display: flex;
    align-items: center;
    transition: color .2s ease;
    line-height: 1;
}
.portalcloud9-tab-notice__close:hover {
    color: #ffffff;
}
@keyframes p9NoticeIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-12px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes p9NoticeOut {
    from { opacity: 1; transform: translateX(-50%) translateY(0); }
    to   { opacity: 0; transform: translateX(-50%) translateY(-12px); }
}

/* ============================================
   OVERVIEW TAB STYLES
   ============================================ */
/* =====================================================
   Portal Cloud 9 – Overview (shared + admin)
   ===================================================== */
:root {
    --p9-grad-start:  var(--p9-grad-start, #1E90FF);
    --p9-grad-end:    #000000;
    --p9-gradient:    linear-gradient(135deg, var(--p9-grad-start, #1E90FF) 0%, #000000 100%);
    --p9-gradient-h:  linear-gradient(135deg, #0077E6 0%, #1a1a1a 100%);
    --p9-radius:      16px;
    --p9-shadow:      0 8px 32px rgba(0,0,0,.14);
    --p9-bg-light:    #f0f4fa;
    --p9-panel-light: rgba(255,255,255,.85);
    --p9-border-light:rgba(0,0,0,.07);
    --p9-text-light:  var(--p9-panel-dark, rgba(74,74,74,.95));
    --p9-muted-light: #64748b;
    --p9-bg-dark:#4a4a4a;
    --p9-panel-dark:rgba(60,60,60,.92);
    --p9-border-dark:#708090;
    --p9-text-dark:#ffffff;
    --p9-muted-dark:#cbd5e1;
}
body { --p9-bg:var(--p9-bg-light); --p9-panel:var(--p9-panel-light); --p9-border:var(--p9-border-light); --p9-text:var(--p9-text-light); --p9-muted:var(--p9-muted-light); }
body.portalcloud9-dark { --p9-bg:var(--p9-bg-dark); --p9-panel:var(--p9-panel-dark); --p9-border:var(--p9-border-dark); --p9-text:var(--p9-text-dark); --p9-muted:var(--p9-muted-dark); }

/* ---- Shared card ---- */
.p9-glass-card {
    background: var(--p9-panel);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: none;
    border-radius: var(--p9-radius);
    box-shadow: var(--p9-shadow);
    padding: clamp(1.2rem, 3vw, 1.8rem);
    overflow: hidden;
    max-width: 100%;
    box-sizing: border-box;
    transition: transform .22s, box-shadow .22s;
}
.p9-glass-card:hover { transform: translateY(-3px); box-shadow: 0 14px 42px rgba(0,0,0,.18); }
.p9-glass-header {
    margin: calc(-1 * clamp(1.2rem,3vw,1.8rem)) calc(-1 * clamp(1.2rem,3vw,1.8rem)) 1.2rem;
    padding: .9rem clamp(1.2rem,3vw,1.8rem);
    background: var(--p9-gradient);
    color: #fff;
    border-radius: var(--p9-radius) var(--p9-radius) 0 0;
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: .55rem;
    letter-spacing: .01em;
}
.p9-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.5rem; }
.p9-flex-sb { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; }
.p9-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    padding: .6rem 1.1rem; border: none; border-radius: 8px; font-size: .88rem;
    font-weight: 600; cursor: pointer; transition: all .22s ease; text-decoration: none;
}
.p9-btn-primary { background: var(--p9-gradient); color: #fff; box-shadow: 0 4px 16px rgba(30,144,255,.3); }
.p9-btn-primary:hover { background: var(--p9-gradient-h); transform: translateY(-2px); box-shadow: 0 6px 22px rgba(30,144,255,.45); }
.p9-recent-order-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: .6rem .9rem; background: var(--p9-panel); border: none;
    border-radius: 9px; text-decoration: none; color: var(--p9-text); transition: all .18s;
    font-size: .9rem;
}
.p9-recent-order-row:hover { border-color: var(--p9-grad-start); background: rgba(30,144,255,.05); transform: translateX(3px); }
.p9-recent-order-row strong { color: var(--p9-grad-start); }

/* ---- Spark ---- */
.p9-spark-line.p9-enhanced { display:flex; align-items:flex-end; justify-content:space-between; gap:6px; height:130px; padding:0 2px; }
.p9-spark-bar-wrapper { flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0; }
.p9-spark-bar.p9-enhanced {
    width:100%; background: var(--p9-gradient); border-radius:5px 5px 0 0;
    transition: all .25s ease; cursor: pointer; box-shadow:0 2px 8px rgba(30,144,255,.18);
    position:relative;
}
.p9-spark-bar.p9-enhanced:hover { transform:translateY(-4px); box-shadow:0 6px 18px rgba(30,144,255,.4); }
.p9-spark-tooltip {
    position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%) scale(0);
    background:rgba(10,15,30,.96); color:#fff; padding:7px 11px; border-radius:8px;
    font-size:.75rem; white-space:nowrap; pointer-events:none; opacity:0; transition:all .2s;
    z-index:10; box-shadow:0 4px 12px rgba(0,0,0,.3);
}
.p9-spark-tooltip::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:rgba(10,15,30,.96); }
.p9-spark-tooltip strong { display:block; font-size:.88rem; color:#60a5fa; margin-bottom:1px; }
.p9-spark-bar.p9-enhanced:hover .p9-spark-tooltip { transform:translateX(-50%) scale(1); opacity:1; }
.p9-spark-label { font-size:.65rem; color:var(--p9-muted); font-weight:600; text-align:center; }

/* ---- Overview wrapper ---- */
.p9-overview-wrap { display:flex; flex-direction:column; gap:1.5rem; }

/* ==========================================================
   ADMIN OVERVIEW — redesigned sections
   ========================================================== */

/* Hero banner */
.p9-admin-hero {
    position: relative;
    border-radius: var(--p9-radius);
    overflow: hidden;
    background: linear-gradient(135deg, #000000 0%, #05070a 35%, var(--p9-gradient-start, var(--p9-grad-start, #1E90FF)) 100%);
    padding: 2rem clamp(1.4rem, 4vw, 2.4rem);
    box-shadow: 0 8px 40px rgba(0,0,0,.35);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* Animated grid overlay */
.p9-admin-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(30,144,255,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30,144,255,.07) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

/* Glowing orb */
.p9-admin-hero::after {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 280px; height: 280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(30,144,255,.25) 0%, transparent 70%);
    pointer-events: none;
}

.p9-hero-left { position: relative; z-index: 1; }

.p9-hero-greeting {
    font-size: clamp(1.5rem, 4vw, 2.1rem);
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 .4rem;
    line-height: 1.2;
    letter-spacing: -.02em;
}

.p9-hero-greeting span {
    background: linear-gradient(90deg, var(--p9-grad-start, #1E90FF), #ffffff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
body.portalcloud9-dark .p9-hero-greeting span {
    background: linear-gradient(90deg, var(--p9-grad-start, #1E90FF), #ffffff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.p9-hero-sub {
    color: rgba(255,255,255,.55);
    font-size: .92rem;
    margin: 0;
}

.p9-hero-right {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .5rem;
}

.p9-hero-clock {
    font-size: 2.1rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.p9-hero-date {
    font-size: .82rem;
    color: rgba(255,255,255,.5);
    font-weight: 500;
    text-align: right;
}

.p9-hero-actions {
    display: flex;
    gap: .65rem;
    flex-wrap: wrap;
    margin-top: .8rem;
}

/* ---- Visitor analytics strip (redesigned) ---- */
.p9-va-strip {
    background: var(--p9-panel);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: none !important;
    outline: none !important;
    box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.05) !important;
    border-radius: var(--p9-radius);
    overflow: hidden;
    position: relative;
}

/* Soft theme-coloured glow in the corner, purely decorative,
   no border or accent line anywhere on the card */
.p9-va-strip::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, var(--p9-grad-start, #1E90FF) 0%, transparent 70%);
    opacity: .12;
    pointer-events: none;
    border-radius: 50%;
}

.p9-va-strip-header {
    position: relative;
    z-index: 1;
    padding: 1rem 1.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.p9-va-strip-title {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 700;
    font-size: .95rem;
    color: var(--p9-text);
}

.p9-va-strip-title-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--p9-grad-start, #1E90FF) 0%, #000 100%);
    flex-shrink: 0;
}

.p9-va-strip-title-icon svg { flex-shrink: 0; stroke: #fff; }

.p9-va-full-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .82rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    padding: 6px 14px;
    border: none;
    border-radius: 20px;
    background: linear-gradient(135deg, var(--p9-grad-start, #1E90FF) 0%, #000 100%);
    transition: all .2s;
    white-space: nowrap;
}

.p9-va-full-link:hover {
    filter: brightness(1.1);
    transform: translateX(2px);
}

/* ---- Live visitor showcase ---- */
.p9-va-strip-grid {
    position: relative;
    z-index: 1;
    display: flex;
    padding: 0 1.4rem 1.4rem;
}

.p9-va-metric.is-online {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: .6rem 0 0;
}

/* Animated pulse ring around the count, no side borders */
.p9-va-online-ring {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(34,197,94,.1);
}

.portalcloud9-dark .p9-va-online-ring {
    background: rgba(34,197,94,.15);
}

.p9-va-online-ring::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(34,197,94,.35);
    animation: p9ov-ring-pulse 2.4s ease-out infinite;
}

@keyframes p9ov-ring-pulse {
    0%   { transform: scale(.85); opacity: .9; }
    70%  { transform: scale(1.35); opacity: 0; }
    100% { transform: scale(1.35); opacity: 0; }
}

.p9-va-metric-val {
    font-size: 1.9rem;
    font-weight: 800;
    color: #22c55e;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    position: relative;
    z-index: 1;
}

.p9-va-metric-body {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.p9-va-metric-label {
    font-size: .72rem;
    font-weight: 700;
    color: var(--p9-muted);
    text-transform: uppercase;
    letter-spacing: .07em;
}

.p9-online-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: rgba(34,197,94,.1);
    border: none;
    border-radius: 20px;
    font-size: .72rem;
    font-weight: 700;
    color: #16a34a;
    width: fit-content;
}
.portalcloud9-dark .p9-online-pill { color: #4ade80; background: rgba(34,197,94,.15); }

.p9-online-dot-sm {
    width: 7px; height: 7px;
    background: #22c55e;
    border-radius: 50%;
    animation: p9ov-pulse 2s infinite;
    flex-shrink: 0;
}
@keyframes p9ov-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .5; transform: scale(1.4); }
}

.p9-va-online-ts {
    font-size: .7rem;
    color: var(--p9-muted);
}

/* ---- Store performance row ---- */
/* ── Performance section wrapper ── */
.p9-perf-section { margin-bottom: 1.4rem; }

/* ── Stat tiles grid (regular small cards) ── */
.p9-stat-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .9rem;
    margin-bottom: .9rem;
}

.p9-stat-tile {
    background: var(--p9-panel);
    border: none;
    border-radius: 14px;
    padding: .95rem 1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
    transition: transform .18s, box-shadow .18s;
    min-width: 0;
    overflow: hidden;
}
.p9-stat-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,.1); }

.p9-stat-tile-icon {
    width: 40px; height: 40px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
}

.p9-stat-tile-body { min-width: 0; flex: 1; overflow: hidden; }

.p9-stat-tile-val {
    font-size: clamp(.9rem, 2.2vw, 1.55rem);
    font-weight: 800;
    color: var(--p9-text);
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.p9-stat-tile-lbl {
    font-size: .73rem;
    color: var(--p9-muted);
    font-weight: 600;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.p9-stat-tile-sub {
    font-size: .68rem;
    color: var(--p9-muted);
    margin-top: 2px;
    opacity: .75;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Keep old classes for any existing use */
.p9-store-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap:.9rem; }
.p9-store-card {
    background: var(--p9-panel); border: none;
    border-radius: 14px; padding: 1rem; display: flex; align-items: center;
    gap: .9rem; box-shadow: 0 2px 10px rgba(0,0,0,.06); min-width: 0; overflow: hidden;
}
.p9-store-icon { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.p9-store-card > div:last-child { min-width: 0; flex: 1; overflow: hidden; }
.p9-store-info-val { font-size: clamp(.85rem,2.5vw,1.6rem); font-weight: 800; color: var(--p9-text); line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p9-store-info-lbl { font-size: .75rem; color: var(--p9-muted); font-weight: 500; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p9-store-info-sub { font-size: .68rem; color: var(--p9-muted); margin-top: 2px; opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Featured cards (Net Profit + Best Seller) ── */
.p9-featured-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .9rem;
}

.p9-featured-card {
    background: var(--p9-panel);
    border: none;
    border-radius: 16px;
    padding: 1.1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    box-shadow: 0 4px 18px rgba(0,0,0,.07);
    transition: transform .18s, box-shadow .18s;
    min-width: 0;
    overflow: hidden;
}
.p9-featured-card:hover { transform: translateY(-2px); box-shadow: 0 8px 28px rgba(0,0,0,.11); }

.p9-featured-card-left {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-shrink: 0;
}

.p9-featured-icon {
    width: 46px; height: 46px; border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; flex-shrink: 0;
}

.p9-featured-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.p9-featured-lbl {
    font-size: .73rem;
    font-weight: 700;
    color: var(--p9-muted);
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
}

.p9-featured-badge {
    display: inline-block;
    font-size: .65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 2px 8px;
    border-radius: 99px;
    white-space: nowrap;
}

.p9-featured-card-right {
    text-align: right;
    min-width: 0;
    flex-shrink: 1;
}

.p9-featured-val {
    font-size: clamp(1.2rem, 3.5vw, 1.85rem);
    font-weight: 900;
    color: var(--p9-text);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.p9-featured-minus { font-size: .75em; opacity: .8; }

.p9-featured-sub {
    font-size: .73rem;
    font-weight: 500;
    color: var(--p9-muted);
    margin-top: 3px;
    display: block;
    white-space: nowrap;
}

/* Best seller product name wraps so the full name shows */
.p9-bestseller-right { text-align: right; }
.p9-bestseller-val {
    font-size: clamp(.88rem, 2vw, 1.15rem);
    font-weight: 800;
    color: var(--p9-text);
    line-height: 1.35;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    max-width: 200px;
    display: block;
}
.p9-bestseller-link {
    font-size: .72rem;
    font-weight: 600;
    color: #ca8a04;
    text-decoration: none;
    display: inline-block;
    margin-top: 4px;
    opacity: .85;
    transition: opacity .15s;
}
.p9-bestseller-link:hover { opacity: 1; text-decoration: underline; }
body.portalcloud9-dark .p9-bestseller-link { color: #fbbf24; }

/* Section label */
.p9-section-label {
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--p9-muted);
    margin: 0 0 .75rem;
}

/* Entrance animation */
.p9-overview-wrap > * {
    animation: p9ov-in .4s ease both;
}
.p9-overview-wrap > *:nth-child(1) { animation-delay: 0s; }
.p9-overview-wrap > *:nth-child(2) { animation-delay: .06s; }
.p9-overview-wrap > *:nth-child(3) { animation-delay: .12s; }
.p9-overview-wrap > *:nth-child(4) { animation-delay: .18s; }
.p9-overview-wrap > *:nth-child(5) { animation-delay: .24s; }
.p9-overview-wrap > *:nth-child(6) { animation-delay: .30s; }
@keyframes p9ov-in {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .p9-stat-tiles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .p9-grid-2 { grid-template-columns: 1fr; }
    .p9-store-grid { grid-template-columns: 1fr 1fr; }
    .p9-va-strip-grid { padding: 0; }
    .p9-admin-hero { flex-direction: column; align-items: flex-start; }
    .p9-hero-right { align-items: flex-start; }
    .p9-hero-clock { font-size: 1.6rem; }

    /* Stat tiles: 2 per row on mobile */
    .p9-stat-tiles { grid-template-columns: 1fr 1fr; gap: .65rem; }
    .p9-stat-tile { padding: .8rem .75rem; gap: .6rem; }
    .p9-stat-tile-icon { width: 34px; height: 34px; font-size: 15px; border-radius: 9px; }
    .p9-stat-tile-val { font-size: 1.15rem; }
    .p9-stat-tile-lbl { font-size: .68rem; }

    /* Featured cards: stack vertically on mobile */
    .p9-featured-cards { grid-template-columns: 1fr; gap: .65rem; }
    .p9-featured-card { padding: 1rem 1.1rem; }
    .p9-featured-icon { width: 40px; height: 40px; font-size: 19px; border-radius: 11px; }
    .p9-featured-val { font-size: 1.55rem; }
    .p9-bestseller-val { max-width: 100%; font-size: 1rem; }
    .p9-featured-card-right { max-width: 55%; }
}

@media (max-width: 380px) {
    .p9-stat-tiles { gap: .5rem; }
    .p9-stat-tile { padding: .7rem .6rem; gap: .5rem; }
    .p9-stat-tile-icon { width: 30px; height: 30px; font-size: 13px; }
    .p9-featured-lbl { font-size: .65rem; }
}

/* ============================================
   GLASS SHIMMER ANIMATION
   ============================================ */
        @media (prefers-color-scheme: light) {
            @keyframes glassShimmer {
                0% {
                    background-position: -200% 0;
                    opacity: 0;
                }

                50% {
                    opacity: 1;
                }

                100% {
                    background-position: 200% 0;
                    opacity: 0;
                }
            }

            .portalcloud9-glass-card::after,
            .p9-glass-card::after,
            .portalcloud9-sidebar-desktop::after,
            .portalcloud9-topbar-desktop::after,
            .portalcloud9-mobile-sidebar-header::after,
            #p9-upload-trigger::after,
            .p9-card::after,
            .p9-topbar::after,
            .p9-select-bar::after,
            .p9-pagination::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 200%;
                height: 100%;
                background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.18) 50%, transparent 60%);
                animation: glassShimmer 6s linear infinite;
                pointer-events: none;
                z-index: 1;
            }

            .portalcloud9-glass-card:hover::after,
            .p9-glass-card:hover::after {
                animation-duration: 1.2s;
            }
        }
        
        <?php if (portalcloud9_is_trial_mode()): ?>
        /* Free mode notification banner styles */
        .pc9-trial-banner {
            background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
            color: #78350f;
            padding: 12px 20px;
            text-align: center;
            font-weight: 600;
            border-bottom: 2px solid #f59e0b;
            position: sticky;
            top: 0;
            z-index: 10000;
        }
        
        .pc9-trial-banner a {
            color: #78350f;
            text-decoration: underline;
            font-weight: 700;
        }
        
        .pc9-trial-banner a:hover {
            color: #451a03;
        }
        <?php endif; ?>

/* ── Theme toggle lock ────────────────────────────────────────── */
.p9-theme-btn-locked {
    opacity: 0.35 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

/* ── Pro lock badge on theme toggle ──────────────────────────────── */
.portalcloud9-theme-toggle-wrap {
    position: relative;
    display: inline-flex;
}

.p9-theme-wrap-locked button {
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: none;
}

.p9-theme-lock-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:var(--p9-panel, rgba(255,255,255,0.92));
    border-radius: 50%;
    width: 14px;
    height: 14px;
    pointer-events: none;
    z-index: 2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

/* Profit + bestseller styles moved to .p9-featured-card */

/* ── License-gated locked card overlay ── */
.p9-locked-card {
    background: var(--p9-panel) !important;
    border: 1px dashed var(--p9-border) !important;
    /* Let height be driven by content — no overflow hidden, no absolute children */
}

/* Overlay is NOT absolutely positioned — it flows as normal content
   inside the flex card, so it always gets the full height it needs */
.p9-lock-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: .75rem .5rem;
}

.p9-lock-inner {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    width: 100%;
}

.p9-lock-icon {
    font-size: 20px;
    line-height: 1;
    opacity: .65;
}

.p9-lock-title {
    font-size: .77rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--p9-muted);
    margin-top: 1px;
}

.p9-lock-desc {
    font-size: .71rem;
    color: var(--p9-muted);
    line-height: 1.45;
    opacity: .8;
    max-width: 200px;
}

.p9-lock-btn {
    display: inline-block;
    margin-top: 6px;
    padding: 6px 18px;
    border-radius: 99px;
    background: linear-gradient(135deg, var(--p9-grad-start, #1e90ff) 0%, var(--p9-accent-hover, #0369a1) 100%);
    color: #fff !important;
    font-size: .72rem;
    font-weight: 700;
    text-decoration: none !important;
    letter-spacing: .03em;
    box-shadow: 0 3px 10px rgba(30,144,255,.3);
    transition: box-shadow .15s, transform .15s;
    white-space: nowrap;
    flex-shrink: 0;
}
.p9-lock-btn:hover {
    box-shadow: 0 5px 16px rgba(30,144,255,.45);
    transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════
   UNIVERSAL DELETE / RESET — Red → Maroon gradient, white text
   Applies in light mode and dark mode alike
═══════════════════════════════════════════════════════════ */
:root {
    --p9-delete-gradient: linear-gradient(135deg, #dc2626 0%, #7f1d1d 100%);
    --p9-delete-hover:    linear-gradient(135deg, #b91c1c 0%, #450a0a 100%);
    --p9-delete-shadow:   rgba(220,38,38,.30);
    --p9-delete-shadow-h: rgba(185,28,28,.45);
}

/* All delete / reset / danger buttons — catch every naming convention */
.p9-btn-delete,
.p9-btn-danger,
.p9-btn-reset,
button.danger,
[class*='btn'][class*='delete'],
[class*='btn'][class*='danger'],
[class*='btn'][class*='reset'],
.p9-bulk-actions button.danger,
#p9-delete-account,
#p9-reset-preferences,
#p9-reset-privacy {
    background: var(--p9-delete-gradient) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 3px 10px var(--p9-delete-shadow) !important;
}

.p9-btn-delete:hover,
.p9-btn-danger:hover,
.p9-btn-reset:hover,
button.danger:hover,
[class*='btn'][class*='delete']:hover,
[class*='btn'][class*='danger']:hover,
[class*='btn'][class*='reset']:hover,
.p9-bulk-actions button.danger:hover,
#p9-delete-account:hover,
#p9-reset-preferences:hover,
#p9-reset-privacy:hover {
    background: var(--p9-delete-hover) !important;
    color: #ffffff !important;
    box-shadow: 0 5px 16px var(--p9-delete-shadow-h) !important;
    transform: translateY(-1px);
}

/* Dark mode — same gradient, still white text */
body.portalcloud9-dark .p9-btn-delete,
body.portalcloud9-dark .p9-btn-danger,
body.portalcloud9-dark .p9-btn-reset,
body.portalcloud9-dark button.danger,
body.portalcloud9-dark .p9-bulk-actions button.danger {
    background: var(--p9-delete-gradient) !important;
    color: #ffffff !important;
}

/* ══════════════════════════════════════════════════════════════════
   DARK MODE — BACKGROUND SYSTEM
   body gets a direct fallback. All child elements use CSS variables
   --p9-bg and --p9-panel which are set by the wp_head runtime injection
   to the user's chosen Dark Mode Background colour.
   This avoids !important conflicts between static CSS and runtime CSS.
══════════════════════════════════════════════════════════════════ */

/* Only body gets a hardcoded fallback — everything else inherits via variables */
body.portalcloud9-dark {
    background: #4a4a4a;
    min-height: 100vh;
}

/* ── Dark mode gradient background ─────────────────────────────────────
   Overridden at runtime by the PHP theme injection which sets
   body.portalcloud9-dark { background: ... } with the real accent color.
   This rule is the CSS-only fallback when JS hasn't run yet.
   The actual gradient is: accent (top-left, ~30%) → black (bottom-right, 70%)
   ─────────────────────────────────────────────────────────────────────── */
body.portalcloud9-dark {
    background: linear-gradient(135deg, var(--p9-accent-1, #008CFF) 0%, #000000 30%) !important;
    background-attachment: fixed !important;
    min-height: 100vh;
}

/* Portal wrapper is transparent so the gradient canvas shows through */
body.portalcloud9-dark .portalcloud9-dashboard-wrapper {
    background: transparent !important;
    min-height: 100vh;
}

/* Sidebar — frosted glass over the gradient */
body.portalcloud9-dark .portalcloud9-sidebar-desktop {
    background: rgba(0, 0, 0, 0.45) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-right-color: rgba(255,255,255,.07) !important;
}

/* Topbar — frosted glass */
body.portalcloud9-dark .portalcloud9-topbar-desktop,
body.portalcloud9-dark .portalcloud9-mobile-topbar {
    background: rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom-color: rgba(255,255,255,.07) !important;
}

/* Main content area — very subtle translucent layer */
body.portalcloud9-dark .portalcloud9-main-content-desktop,
body.portalcloud9-dark .portalcloud9-content {
    background: transparent !important;
}

/* Glass cards — semi-transparent dark surface */
body.portalcloud9-dark .p9-glass-card,
body.portalcloud9-dark .p9-card,
body.portalcloud9-dark [class*="p9-glass"] {
    background: rgba(0, 0, 0, 0.38) !important;
    border-color: rgba(255,255,255,.09) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Card headers use the gradient — echoes the canvas background colors */
body.portalcloud9-dark .p9-admin-hero,
body.portalcloud9-dark .p9-glass-card > .p9-card-header,
body.portalcloud9-dark .p9-glass-card > [class*="header"]:first-child,
body.portalcloud9-dark .p9-section-header,
body.portalcloud9-dark .pc9-settings-card-header {
    background: linear-gradient(135deg, var(--p9-accent-1, #008CFF) 0%, #000000 30%) !important;
    color: #fff !important;
}

/* Buttons that use the gradient — accent at top-left, black at bottom-right */
body.portalcloud9-dark .p9-btn-primary,
body.portalcloud9-dark .p9-btn-accent,
body.portalcloud9-dark button[class*='p9-btn']:not(.p9-btn-delete):not(.p9-btn-danger):not(.p9-btn-reset) {
    background: linear-gradient(135deg, var(--p9-accent-1, #008CFF) 0%, #000000 30%) !important;
    color: #fff !important;
}

/* Active nav items — gradient echo */
body.portalcloud9-dark .portalcloud9-nav-item.active .portalcloud9-nav-link {
    background: linear-gradient(135deg, var(--p9-accent-1, #008CFF) 0%, rgba(0,0,0,.6) 100%) !important;
}



/* Revenue Goal Widget — v20.9.3 */
.p9-goal-card{background:var(--p9-panel,rgba(255,255,255,.8));border:1px solid var(--p9-border,rgba(0,0,0,.08));border-radius:16px;padding:1.25rem 1.4rem;margin-top:1rem}
.p9-goal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.p9-goal-title{display:flex;align-items:center;gap:7px;font-size:.88rem;font-weight:700;color:var(--p9-text,#1e293b)}
.p9-goal-edit-btn{font-size:.72rem;font-weight:600;color:var(--p9-grad-start,#1e90ff);background:none;border:1px solid rgba(30,144,255,.25);border-radius:20px;padding:3px 10px;cursor:pointer}
.p9-goal-amounts{display:flex;align-items:baseline;gap:6px;margin-bottom:8px}
.p9-goal-revenue-val{font-size:1.7rem;font-weight:800;color:var(--p9-text,#1e293b)}
.p9-goal-target-val{font-size:.9rem;color:var(--p9-muted,#64748b);font-weight:600}
.p9-goal-bar-track{width:100%;height:10px;background:var(--p9-border,rgba(0,0,0,.07));border-radius:5px;overflow:hidden;margin-bottom:6px}
.p9-goal-bar-fill{height:100%;border-radius:5px;transition:width .7s cubic-bezier(.4,0,.2,1)}
.p9-goal-pct-label{font-size:.78rem;font-weight:700}
.p9-goal-month{font-size:.72rem;color:var(--p9-muted,#64748b);margin-top:2px}
.p9-goal-unset{font-size:.82rem;color:var(--p9-muted,#94a3b8);font-style:italic}
.p9-goal-edit-row{display:none;margin-top:.9rem;padding-top:.9rem;border-top:1px solid var(--p9-border,rgba(0,0,0,.07));gap:8px;align-items:center;flex-wrap:wrap}
.p9-goal-input{flex:1;min-width:120px;padding:7px 12px;border:1.5px solid var(--p9-border);border-radius:10px;font-size:13px;color:var(--p9-text);background:var(--p9-bg,#f8fafc)}
.p9-goal-input:focus{border-color:var(--p9-grad-start,#1e90ff);outline:none}
.p9-goal-save-btn{padding:7px 18px;border:none;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;background:linear-gradient(135deg,var(--p9-grad-start,#1e90ff),#000);color:#fff}
.p9-goal-cancel-btn{padding:7px 14px;border:1px solid var(--p9-border);border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;background:transparent;color:var(--p9-muted,#64748b)}
body.portalcloud9-dark .p9-goal-card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08)}
body.portalcloud9-dark .p9-goal-revenue-val,body.portalcloud9-dark .p9-goal-title{color:#e2e8f0}
body.portalcloud9-dark .p9-goal-bar-track{background:rgba(255,255,255,.08)}
body.portalcloud9-dark .p9-goal-input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);color:#e2e8f0}

/* ── Dark mode global text / border overrides (auto-generated) ── */
body.portalcloud9-dark p,
body.portalcloud9-dark h1,
body.portalcloud9-dark h2,
body.portalcloud9-dark h3,
body.portalcloud9-dark h4,
body.portalcloud9-dark h5,
body.portalcloud9-dark h6,
body.portalcloud9-dark span:not([class*="badge"]):not([class*="pill"]):not([class*="status"]):not([class*="dot"]):not([class*="tag"]),
body.portalcloud9-dark label,
body.portalcloud9-dark td,
body.portalcloud9-dark th,
body.portalcloud9-dark li,
body.portalcloud9-dark a:not([class*="btn"]):not([class*="button"]):not([class*="pill"]) {
    color: #ffffff !important;
}
body.portalcloud9-dark .p9-muted,
body.portalcloud9-dark [class*="-muted"],
body.portalcloud9-dark [class*="-hint"],
body.portalcloud9-dark [class*="-sub"],
body.portalcloud9-dark [class*="-meta"],
body.portalcloud9-dark [class*="-description"],
body.portalcloud9-dark [class*="-caption"] {
    color: #cbd5e1 !important;
}
body.portalcloud9-dark [class*="p9-"] {
    border-color: #708090;
}
body.portalcloud9-dark input,
body.portalcloud9-dark textarea,
body.portalcloud9-dark select {
    border-color: #708090 !important;
    color: #ffffff !important;
    background-color: rgba(60,60,60,.92) !important;
}
body.portalcloud9-dark input::placeholder,
body.portalcloud9-dark textarea::placeholder {
    color: #94a3b8 !important;
}


/* ============================================================
   PORTAL CLOUD 9 PRO — BORDERLESS CARDS + ELEVATION SHADOWS
   All sections: Overview, Visitor Analytics, Orders,
   Shipments, Templates, Phone Contacts, Inbox, Rewards.
   ── Cards: border removed, shadow added
   ── Outline buttons: solid → gradient border
   ── Both light and dark mode fully covered
   ============================================================ */

/* ── Shadow tokens ────────────────────────────────────────── */
:root {
    --p9c-shadow:       0 2px 12px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.04);
    --p9c-shadow-hover: 0 8px 28px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.05);
}
body.portalcloud9-dark {
    --p9c-shadow:       0 2px 16px rgba(0,0,0,.45), 0 1px 4px rgba(0,0,0,.25);
    --p9c-shadow-hover: 0 8px 32px rgba(0,0,0,.65), 0 2px 8px rgba(0,0,0,.35);
    /* Gradient border — used on outline buttons */
    --p9c-grad-border: linear-gradient(135deg,
        var(--p9-grad-start, #1e90ff) 0%,
        var(--p9-grad-end, #000000) 100%);
}

/* ══════════════════════════════════════════════════════════
   OVERVIEW
   ══════════════════════════════════════════════════════════ */
.p9-card,
.p9-glass-card,
.p9-store-card,
.p9-stat-tile,
.p9-featured-card,
.p9-goal-card,
.p9-recent-order-row,
.p9-kpi-card {
    border: none !important;
    box-shadow: var(--p9c-shadow) !important;
    transition: box-shadow .25s ease, transform .25s ease !important;
}
.p9-glass-card:hover,
.p9-store-card:hover,
.p9-featured-card:hover,
.p9-stat-tile:hover,
.p9-kpi-card:hover { box-shadow: var(--p9c-shadow-hover) !important; }

/* ══════════════════════════════════════════════════════════
   VISITOR ANALYTICS
   ══════════════════════════════════════════════════════════ */
.p9-va-card,
.p9-va-chart-section,
.p9-va-range-section,
.p9-va-peaks-section,
.p9-va-peak-card,
.p9-va-result-stat,
.p9-va-session-card,
.p9-va-traffic-sources-section,
.p9-va-devices-section,
#p9-va-utm-section,
.p9-va-modal-inner,
.p9-va-license-banner,
.p9-va-insights-grid > div {
    border: none !important;
    box-shadow: var(--p9c-shadow) !important;
}
.p9-va-card:hover,
.p9-va-peak-card:hover { box-shadow: var(--p9c-shadow-hover) !important; }

/* ══════════════════════════════════════════════════════════
   ORDERS
   ══════════════════════════════════════════════════════════ */
.p9-order-card,
.p9-admin-order-card,
.p9-orders-stats,
.p9-stat-card,
.p9-orders-modal-inner,
.p9-orders-detail-panel,
.p9-orders-stats-wrap {
    border: none !important;
    box-shadow: var(--p9c-shadow) !important;
}
.p9-order-card:hover,
.p9-admin-order-card:hover,
.p9-stat-card:hover { box-shadow: var(--p9c-shadow-hover) !important; }

/* ══════════════════════════════════════════════════════════
   SHIPMENTS
   ══════════════════════════════════════════════════════════ */
.p9-ship-card,
.p9-ship-stat,
.p9-ship-overdue-alert,
.p9-ship-form-panel,
.p9-shipment-modal-inner {
    border: none !important;
    box-shadow: var(--p9c-shadow) !important;
}
.p9-ship-card:hover { box-shadow: var(--p9c-shadow-hover) !important; }

/* ══════════════════════════════════════════════════════════
   TEMPLATES
   ══════════════════════════════════════════════════════════ */
.p9-tpl-card,
.p9-tpl-add-card,
.p9-tpl-custom-form,
.p9-tpl-preview-modal-inner {
    border: none !important;
    box-shadow: var(--p9c-shadow) !important;
}
.p9-tpl-card:hover,
.p9-tpl-add-card:hover { box-shadow: var(--p9c-shadow-hover) !important; }

/* ══════════════════════════════════════════════════════════
   PHONE CONTACTS
   ══════════════════════════════════════════════════════════ */
.pc9-seller-phone-box,
.pc9-stat-card,
.pc9-top-list-card,
.pc9-contacts-filters,
.pc9-history-table-wrap,
.pc9-contact-card {
    border: none !important;
    box-shadow: var(--p9c-shadow) !important;
}
.pc9-stat-card:hover { box-shadow: var(--p9c-shadow-hover) !important; }

/* ══════════════════════════════════════════════════════════
   INBOX
   ══════════════════════════════════════════════════════════ */
.p9-inbox-wrapper,
.p9-empty-glass-card,
.p9-conv-list-panel,
.p9-thread-panel,
.p9-action-btn {
    border: none !important;
    box-shadow: var(--p9c-shadow) !important;
}

/* ══════════════════════════════════════════════════════════
   REWARDS — all card variants
   ══════════════════════════════════════════════════════════ */
.p9-rewards-stat-card,
.p9-rewards-panel,
.p9-rewards-balance-hero,
.p9-rewards-chart-wrap,
.p9-rewards-log-item,
.p9-rewards-user-row,
.p9-rewards-modal,
.p9-rewards-toast,
.p9rw-card,
.p9rw-wallet,
.p9rw-ms-card,
.p9rw-admin-hero,
.p9rw-form-card,
.p9rw-locked-card,
.p9rw-earn-card,
.p9rw-ucard,
.p9rw-acard,
.p9rw-lb-row,
.p9rw-wd-card,
.p9rw-log-row,
.p9rw-analytics-card,
.p9rw-settings-group,
.p9rw-sf-card,
.p9rw-modal,
.p9rw-modal-preview {
    border: none !important;
    box-shadow: var(--p9c-shadow) !important;
}
.p9rw-ucard:hover,
.p9rw-acard:hover { box-shadow: var(--p9c-shadow-hover) !important; }

/* ══════════════════════════════════════════════════════════
   DARK MODE — GRADIENT BORDERS ON OUTLINE BUTTONS
   Outline buttons pick up the theme gradient as their border
   using the double-background technique (no extra markup).
   ══════════════════════════════════════════════════════════ */
body.portalcloud9-dark .p9-va-btn-outline,
body.portalcloud9-dark .p9-va-full-link,
body.portalcloud9-dark .p9-ship-btn-outline,
body.portalcloud9-dark .p9-tpl-btn-outline,
body.portalcloud9-dark .p9rw-rwds-btn.ghost,
body.portalcloud9-dark .p9rw-tog-btn,
body.portalcloud9-dark .p9-orders-export-btn,
body.portalcloud9-dark .p9-order-btn-ghost,
body.portalcloud9-dark .p9-my-order-btn.ghost,
body.portalcloud9-dark .p9-rtab-btn,
body.portalcloud9-dark .pc9-page-btn,
body.portalcloud9-dark .p9rw-filter-btn,
body.portalcloud9-dark .p9-ship-filter-btn,
body.portalcloud9-dark .p9rw-tablink {
    border: 1.5px solid transparent !important;
    background-image:
        linear-gradient(var(--p9-panel-dark, rgba(60,60,60,.92)), var(--p9-panel-dark, rgba(60,60,60,.92))),
        var(--p9c-grad-border) !important;
    background-origin: border-box !important;
    background-clip: padding-box, border-box !important;
}

/* ══════════════════════════════════════════════════════════
   ACCOUNT — fully rounded inputs
   ══════════════════════════════════════════════════════════ */
.p9-input,
.p9-input[type="text"],
.p9-input[type="email"],
.p9-input[type="tel"],
.p9-input[type="password"],
.p9-input[type="number"] {
    border-radius: 50px !important;
}
.p9-textarea { border-radius: 16px !important; }

/* ── Dark mode: customer orders, cart, favourites, account ── */
body.portalcloud9-dark .p9-my-order-card,
body.portalcloud9-dark .p9-order-detail-card {
    border: none !important;
    box-shadow: 0 2px 16px rgba(0,0,0,.45) !important;
}
body.portalcloud9-dark .p9-cart-header,
body.portalcloud9-dark .p9-cart-item,
body.portalcloud9-dark .p9-cart-summary,
body.portalcloud9-dark .p9-empty-cart {
    border: none !important;
    box-shadow: 0 2px 16px rgba(0,0,0,.45) !important;
}
body.portalcloud9-dark .p9-favourite-card,
body.portalcloud9-dark .p9-favourites-header,
body.portalcloud9-dark .p9-empty-favourites {
    border: none !important;
    box-shadow: 0 2px 16px rgba(0,0,0,.45) !important;
}
body.portalcloud9-dark .p9-section,
body.portalcloud9-dark .p9-preference-item,
body.portalcloud9-dark .p9-privacy-card,
body.portalcloud9-dark .p9-info-box {
    border: none !important;
    box-shadow: 0 2px 16px rgba(0,0,0,.45) !important;
}

/* ── Products section dark mode cards ── */
body.portalcloud9-dark .p9-product-card,
body.portalcloud9-dark .p9-modal-content {
    border: none !important;
    box-shadow: 0 2px 16px rgba(0,0,0,.45) !important;
}

/* ── Global Notification Modal ───────────────────────────────────────────────
   Used by PortalCloud9Dashboard.showNotification() across all sections.
   ──────────────────────────────────────────────────────────────────────────── */
.p9-notification-modal .p9-modal-content {
    max-width: 420px;
    border-radius: 20px !important;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,.18), 0 4px 16px rgba(0,0,0,.08) !important;
    border: none !important;
}
.p9-notification-modal .p9-modal-header {
    padding: 16px 20px 14px;
    border-radius: 0;
}
.p9-notification-modal .p9-modal-header h3 {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.p9-notification-modal .p9-modal-body {
    padding: 24px 28px 28px;
}
.p9-notif-success .p9-modal-header h3 { color: #059669; }
.p9-notif-error   .p9-modal-header h3 { color: #dc2626; }
.p9-notif-warning .p9-modal-header h3 { color: #d97706; }
.p9-notif-info    .p9-modal-header h3 { color: #2563eb; }

/* Dark mode */
body.portalcloud9-dark .p9-notification-modal .p9-modal-content {
    background: rgba(30,30,40,.97);
    box-shadow: 0 20px 60px rgba(0,0,0,.55), 0 4px 16px rgba(0,0,0,.3) !important;
}
body.portalcloud9-dark .p9-notif-msg {
    color: #e2e8f0 !important;
}

/* ── License-locked nav items (Shipments, Templates when unlicensed) ───── */
.portcld9-nav-locked { opacity: 1; }
.portcld9-nav-link-locked {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 10px;
    cursor: not-allowed;
    color: var(--p9-muted, #94a3b8);
    text-decoration: none;
    user-select: none;
    position: relative;
    transition: background .15s;
}
.portcld9-nav-link-locked:hover {
    background: rgba(0,0,0,.04);
}
body.portalcloud9-dark .portcld9-nav-link-locked:hover {
    background: rgba(255,255,255,.04);
}
.portcld9-nav-lock-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: rgba(239,68,68,.1);
    border: 1px solid rgba(239,68,68,.2);
    color: #ef4444;
    margin-left: auto;
    flex-shrink: 0;
}
body.portalcloud9-dark .portcld9-nav-lock-badge {
    background: rgba(239,68,68,.15);
    border-color: rgba(239,68,68,.3);
}

/* ================================================================
   GLOBAL CARD GLOW — replaces all border: 1px solid throughout
   Applied to every major card wrapper so sections are consistent.
   ================================================================ */
.p9-card,
.p9-glass-card,
.p9-va-card-panel,
.p9-store-card,
.p9-overview-card,
.p9-stat-tile,
.p9-glass-card-sm,
.p9ov-card,
.p9-order-card,
.p9-product-card,
.p9-shipment-card,
.p9-rewards-card,
.p9-phone-card,
.p9-account-card,
.p9-fav-card,
.p9-cart-card,
.portcld9-wa-panel,
.portcld9-wa-chart-wrap,
.p9-va-card-panel,
.p9-glass-card > *,
.p9-va-traffic-sources-section,
.p9-va-device-section,
.p9-va-section {
    border: none !important;
    box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 2px 16px rgba(0,0,0,.07), 0 1px 4px rgba(0,0,0,.04);
}

/* Hover glow — accent tinted */
.p9-card:hover,
.p9-glass-card:hover,
.p9-store-card:hover,
.p9-overview-card:hover,
.p9-order-card:hover,
.p9-product-card:hover,
.p9-shipment-card:hover {
    box-shadow: 0 0 0 1.5px var(--p9-ring-15, rgba(30,144,255,.15)),
                0 6px 24px var(--p9-ring-10, rgba(30,144,255,.1)),
                0 2px 8px rgba(0,0,0,.08) !important;
}

/* Dark mode — deeper shadow */
body.portalcloud9-dark .p9-card,
body.portalcloud9-dark .p9-glass-card,
body.portalcloud9-dark .p9-va-card-panel,
body.portalcloud9-dark .p9-store-card,
body.portalcloud9-dark .p9-overview-card,
body.portalcloud9-dark .p9-stat-tile,
body.portalcloud9-dark .p9-order-card,
body.portalcloud9-dark .p9-product-card,
body.portalcloud9-dark .p9-shipment-card,
body.portalcloud9-dark .p9-rewards-card,
body.portalcloud9-dark .portcld9-wa-panel,
body.portalcloud9-dark .portcld9-wa-chart-wrap {
    border: none !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 4px 24px rgba(0,0,0,.25), 0 1px 6px rgba(0,0,0,.2);
}

body.portalcloud9-dark .p9-card:hover,
body.portalcloud9-dark .p9-glass-card:hover,
body.portalcloud9-dark .p9-order-card:hover,
body.portalcloud9-dark .p9-product-card:hover {
    box-shadow: 0 0 0 1.5px var(--p9-ring-20, rgba(30,144,255,.2)),
                0 8px 32px rgba(0,0,0,.4),
                0 2px 8px rgba(0,0,0,.25) !important;
}

/* ================================================================
   OVERVIEW REDESIGN — visitor strip 4-col layout, grouped Sales /
   Orders / Store health cards, and the upgraded Recent Orders rows.
   Built with the plugin's theme tokens (var(--p9-text)/(--p9-panel)/
   (--p9-muted)/(--p9-border)) plus explicit dark overrides where a
   genuinely different value is needed, matching the pattern already
   used in Visitor Analytics and Security Audit.
   ================================================================ */

/* ---- Visitor strip: 4 columns ---- */
.p9-va-strip-grid-4 {
    display: grid;
    grid-template-columns: 1.15fr 1fr 1fr 1.3fr;
    gap: 1.1rem;
    align-items: center;
    padding: 0 1.4rem 1.4rem;
}
.p9-va-strip-grid-4 .p9-va-metric.is-online { width: auto; padding: 0; }
.p9-va-col {
    border-left: 1px solid var(--p9-border, rgba(0,0,0,.08));
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.p9-va-col-val {
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--p9-text, #0f172a);
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}
.p9-va-col-lbl {
    font-size: .72rem;
    color: var(--p9-muted, #94a3b8);
    margin-top: 2px;
}
.p9-va-col-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: .72rem;
    font-weight: 700;
    margin-top: 3px;
}
.p9-va-trend-up   { color: #0F9D6B; }
.p9-va-trend-down { color: #DC2626; }
.p9-va-trend-flat { color: var(--p9-muted, #94a3b8); }

.p9-va-spark {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 30px;
}
.p9-va-spark-bar {
    flex: 1;
    min-width: 3px;
    background: rgba(30,144,255,.28);
    border-radius: 2px 2px 0 0;
}
.p9-va-spark-bar.is-today { background: var(--p9-gradient-start, var(--p9-grad-start, #1E90FF)); }
.portalcloud9-dark .p9-va-spark-bar { background: rgba(30,144,255,.35); }
.portalcloud9-dark .p9-va-col { border-left-color: rgba(255,255,255,.10); }

@media (max-width: 780px) {
    .p9-va-strip-grid-4 { grid-template-columns: 1fr 1fr; row-gap: 1.2rem; }
    .p9-va-col-spark { grid-column: span 2; border-left: none; padding-left: 0; }
}

/* ---- Section labels ---- */
.p9-section-label {
    font-size: .78rem;
    font-weight: 700;
    color: var(--p9-text, #0f172a);
    text-transform: none;
    margin: 1.6rem 0 .7rem;
}
.p9-section-label:first-child { margin-top: 0; }

/* ---- Card grids ---- */
.p9-cardgrid { display: grid; gap: .7rem; }
.p9-cardgrid-3 { grid-template-columns: repeat(3, 1fr); }
.p9-cardgrid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .p9-cardgrid-3, .p9-cardgrid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .p9-cardgrid-3, .p9-cardgrid-4 { grid-template-columns: 1fr; } }

/* ---- Sales cards (bigger, feature 3 metrics) ---- */
.p9-mcard {
    background: var(--p9-panel, #fff);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.05);
    display: flex;
    align-items: flex-start;
    gap: .8rem;
}
.p9-mcard-icon {
    width: 38px; height: 38px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.p9-mcard-body { min-width: 0; }
.p9-mcard-val {
    font-size: 1.25rem; font-weight: 800; color: var(--p9-text, #0f172a);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.p9-mcard-val-sm { font-size: 1rem; max-width: 170px; }
.p9-mcard-lbl { font-size: .74rem; color: var(--p9-muted, #94a3b8); margin-top: 2px; }
.p9-mcard-trend {
    display: inline-flex; align-items: center; gap: 3px;
    font-size: .72rem; font-weight: 700; margin-top: 3px;
}
.p9-mcard-link { font-size: .72rem; font-weight: 700; color: #7C5CDB; margin-top: 3px; display: inline-block; text-decoration: none; }
.p9-mcard-lock {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
    color: var(--p9-muted, #94a3b8); font-size: .78rem; width: 100%;
}
.p9-mcard-lock span { font-weight: 600; color: var(--p9-text, #0f172a); }
.p9-mcard-lock a { color: var(--p9-gradient-start, var(--p9-grad-start, #1E90FF)); font-weight: 700; text-decoration: none; }
.p9-mcard-locked { opacity: .85; }

/* ---- Small clickable cards (Orders / Store health) ---- */
.p9-scard {
    background: var(--p9-panel, #fff);
    border-radius: 14px;
    padding: .85rem 1rem;
    box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.05);
    display: flex;
    align-items: center;
    gap: .7rem;
    text-decoration: none;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}
.p9-scard:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(15,23,42,.06), 0 8px 22px rgba(15,23,42,.10);
}
.p9-scard-wide { grid-column: span 1; }
.p9-scard-icon {
    width: 32px; height: 32px; border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.p9-scard-val { font-size: 1.05rem; font-weight: 800; color: var(--p9-text, #0f172a); line-height: 1.2; }
.p9-scard-val-sm { font-size: .82rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.p9-scard-lbl { font-size: .7rem; color: var(--p9-muted, #94a3b8); margin-top: 1px; }

/* ---- Recent Orders rows ---- */
.p9-order-rows { display: flex; flex-direction: column; gap: .4rem; }
.p9-order-row {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .6rem .6rem;
    border-radius: 10px;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s ease;
}
.p9-order-row:hover { background: var(--p9-ring-05, rgba(0,0,0,.03)); }
.portalcloud9-dark .p9-order-row:hover { background: rgba(255,255,255,.05); }
.p9-order-row-icon {
    width: 30px; height: 30px; border-radius: 9px;
    background: rgba(30,144,255,.12); color: #1E90FF;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.p9-order-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.p9-order-row-title {
    font-size: .84rem; font-weight: 600; color: var(--p9-text, #0f172a);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.p9-order-row-sub { font-size: .75rem; color: var(--p9-muted, #94a3b8); }
.p9-order-row-status {
    font-size: .68rem; font-weight: 700; padding: 3px 10px; border-radius: 999px;
    white-space: nowrap; flex-shrink: 0;
}
.p9-order-row-chev { color: var(--p9-border, #cbd5e1); flex-shrink: 0; }

/* ---- Hero pill buttons — small, right-aligned under the clock ---- */
.p9-hero-actions {
    display: flex !important;
    gap: 6px !important;
    margin-top: 8px !important;
}
.p9-hero-pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 6px 13px !important;
    border-radius: 999px !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    background: rgba(255,255,255,.14) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background .15s ease !important;
}
.p9-hero-pill:hover { background: rgba(255,255,255,.24) !important; color: #fff !important; }
.p9-hero-pill svg { flex-shrink: 0 !important; }

@media (max-width: 780px) {
    .p9-hero-right { align-items: flex-start; }
    .p9-hero-actions { justify-content: flex-start; flex-wrap: wrap; }
}