/**
 * VerifiedPractitioner - Practitioner Dashboard Styles
 * Warm-professional aesthetic - Calendly/Notion quality.
 * Font: Figtree
 */

/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
button, a { -webkit-tap-highlight-color: transparent; }

/* Override any external theme/plugin button styles (LoginPress, etc.) */
/* .vp-ui-btn is exempted alongside .vp-btn: it is the shared dialog button
   from vp-ui.css, which wp-admin loads too. Without the exemption this reset
   wins on specificity (0,2,2 against 0,1,0) and strips the background off
   every button in a shared confirmation dialog, but only on the dashboard -
   the kind of break that shows up in a browser and never in a unit test. */
body.vp-dashboard button:not(.vp-btn):not(.vp-ui-btn),
body.vp-dashboard .vp-nav button:not(.vp-ui-btn),
body.vp-dashboard .vp-container button:not(.vp-btn):not(.vp-ui-btn) {
    background-color: transparent;
    border-color: currentColor;
    color: inherit;
}
body.vp-dashboard .vp-tabs__tab {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
/* Hover state on inactive Reviews tabs - matches the green hover on the
   Settings page tabs (.vp-settings-tab:hover:not(.active)) so the two
   tab strips behave the same way. Excluded from .active so the white
   folder-tab styling isn't replaced when the cursor passes over it. */
body.vp-dashboard .vp-tabs__tab:hover:not(.active) {
    background: var(--vp-green-light) !important;
    color: var(--vp-text) !important;
}
/* Active tab uses the classic "folder tab" pattern: white background,
   2px border on top/left/right, and a 2px white bottom border that
   covers the strip's underline at this tab's position. Padding is
   reduced by 2px on each side to compensate for the new borders, so
   the active tab keeps the same visual size as the inactive ones and
   doesn't shift the layout when you switch tabs. */
body.vp-dashboard .vp-tabs__tab.active {
    background: var(--vp-white) !important;
    color: var(--vp-green) !important;
    border-top: 2px solid var(--vp-border) !important;
    border-left: 2px solid var(--vp-border) !important;
    border-right: 2px solid var(--vp-border) !important;
    border-bottom: 2px solid var(--vp-white) !important;
    border-radius: 6px 6px 0 0 !important;
    padding: 8px 16px !important;
    position: relative;
    z-index: 1;
}

/* Tab counter circles */
.vp-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    margin-left: 4px;
}
.vp-tab-count--green { background: #ECFDF5; color: #059669; }
.vp-tab-count--red { background: #FEF2F2; color: #DC2626; }
.vp-tab-count--grey { background: #F3F4F6; color: #9CA3AF; }

body.vp-dashboard {
    margin: 0;
    padding: 0;
    background: var(--vp-page-bg);
    font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--vp-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ── Design Tokens ────────────────────────────────────────── */
:root {
    --vp-green: #1F5560;
    --vp-green-hover: #2A7A8A;
    --vp-green-light: #E8F5EF;
    --vp-green-pale: #f0faf5;
    --vp-navy: #1B4A53;
    --vp-accent: #3198AD;
    --vp-amber: #F59E0B;
    --vp-amber-light: #FEF3C7;
    --vp-red: #EF4444;
    --vp-red-light: #FEE2E2;
    --vp-blue: #3B82F6;
    --vp-blue-light: #EFF6FF;
    --vp-orange: #F97316;
    --vp-orange-light: #FFF7ED;
    --vp-text: #1A1D26;
    --vp-text-secondary: #5F6775;
    --vp-border: #E2E5EB;
    --vp-bg-light: #F5F6F8;
    --vp-page-bg: #F7F8FA;
    --vp-white: #ffffff;
    --vp-radius: 12px;
    --vp-radius-sm: 8px;
    --vp-radius-lg: 16px;
    --vp-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.06);
    --vp-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06), 0 4px 16px rgba(0, 0, 0, 0.04);
    --vp-shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.08), 0 8px 32px rgba(0, 0, 0, 0.04);
    --vp-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.1), 0 16px 48px rgba(0, 0, 0, 0.06);
    --vp-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --vp-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Type scale ───────────────────────────────────────────
       There was no scale here before, so every new panel picked its own
       sizes inline and drifted small. Use these instead of a literal px.

       HARD FLOOR: anything a person READS - body copy, help text, panel
       prose, labels on their own line, list items, buttons - is
       --vp-fs-base (16px) or larger. Never 12/13/14px for those; small
       text reads as amateur and is hard to read.

       --vp-fs-meta is ONLY for genuinely secondary chrome: timestamps,
       badges, chips, character counters, uppercase eyebrow labels. If
       you are reaching for it for a sentence, you want --vp-fs-base. */
    --vp-fs-h1: 26px;   /* page title */
    --vp-fs-h2: 18px;   /* card / section title */
    --vp-fs-lead: 17px; /* intro paragraph under a page title */
    --vp-fs-base: 16px; /* body copy, help text - the floor */
    --vp-fs-meta: 14px; /* timestamps, chips, eyebrows. Not prose. */
}

/* ── Typography ───────────────────────────────────────────── */
/* Force Figtree everywhere in the dashboard - defeat active theme (e.g. Twenty Twenty-Four) serif headings loaded via wp_head(). */
body.vp-dashboard,
body.vp-dashboard h1,
body.vp-dashboard h2,
body.vp-dashboard h3,
body.vp-dashboard h4,
body.vp-dashboard h5,
body.vp-dashboard h6,
body.vp-dashboard p,
body.vp-dashboard span,
body.vp-dashboard a,
body.vp-dashboard li,
body.vp-dashboard label,
body.vp-dashboard input,
body.vp-dashboard select,
body.vp-dashboard textarea,
body.vp-dashboard button,
body.vp-dashboard strong,
body.vp-dashboard em,
body.vp-dashboard div {
    font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}
h1, h2, h3 {
    color: var(--vp-navy);
    line-height: 1.2;
}

/* ── Navigation ───────────────────────────────────────────── */
.vp-nav {
    background: var(--vp-white);
    border-bottom: 1px solid var(--vp-border);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.95);
}

.vp-nav__inner {
    max-width: 1290px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    height: 120px;
    gap: 32px;
}

.vp-nav__logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.vp-nav__logo img,
.vp-nav__logo svg {
    display: block;
    width: 36px;
    height: auto;
}

.vp-nav__brand {
    display: none; /* Hidden on desktop - logo alone; shown at mobile breakpoint */
    font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--vp-navy);
    letter-spacing: -0.01em;
    line-height: 1;
}

.vp-nav__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 4px;
}

.vp-nav__links a,
.vp-nav__links .vp-nav__dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--vp-radius-sm);
    font-size: 16px;
    font-weight: 500;
    color: var(--vp-text);
    text-decoration: none;
    transition: all var(--vp-transition);
    /* Lock height + line-height explicitly so anchors and the
       Public Profile dropdown button (which would otherwise inherit
       slightly different defaults from <a> vs <button>) end up at
       identical box dimensions. Was visibly drifting on Chrome - both
       elements now produce 40px tall flex items with text on the
       same baseline. */
    height: 40px;
    line-height: 1.5;
    box-sizing: border-box;
    vertical-align: middle;
}

.vp-nav__links a:hover,
.vp-nav__links .vp-nav__dropdown-toggle:hover {
    background: var(--vp-green-pale);
    color: var(--vp-green);
}

.vp-nav__links a.active {
    background: var(--vp-green-light);
    color: var(--vp-green);
    font-weight: 600;
}

.vp-nav__user {
    margin-left: auto;
    display: flex;
    align-items: center;
}

/* Profile dropdown toggle - photo + name + chevron. Reuses the
   .vp-nav__dropdown-toggle button reset plus layout for the avatar row. */
.vp-nav__user-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    padding: 4px 10px 4px 4px !important;
    border-radius: 999px !important;
    transition: background 0.15s !important;
    color: var(--vp-text) !important;
}
.vp-nav__user-toggle:hover {
    background: var(--vp-green-light) !important;
}
.vp-nav__dropdown.open > .vp-nav__user-toggle {
    background: var(--vp-green-pale) !important;
}

.vp-nav__avatar {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid var(--vp-border);
    display: block;
}

.vp-nav__avatar--initial {
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 15px;
    border: none;
}

.vp-nav__name {
    font-size: 14px;
    font-weight: 500;
    color: var(--vp-text);
}

.vp-nav__dropdown-divider {
    list-style: none;
    height: 1px;
    background: var(--vp-border);
    margin: 6px 0;
}

.vp-nav__menu-logout,
.vp-nav__menu-logout svg { color: var(--vp-text-secondary) !important; }
.vp-nav__menu-logout:hover,
.vp-nav__menu-logout:hover svg { color: var(--vp-red) !important; background: var(--vp-red-light, #FEF2F2) !important; }

/* Mobile-only items inside the hamburger dropdown - hidden on desktop */
.vp-nav__item--mobile-only { display: none; }

/* ── Help Dropdown ── */
.vp-nav__dropdown {
    position: relative;
}

button.vp-nav__dropdown-toggle,
button.vp-nav__dropdown-toggle:hover,
button.vp-nav__dropdown-toggle:focus,
button.vp-nav__dropdown-toggle:active,
button.vp-nav__dropdown-toggle:visited {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    cursor: pointer;
    /* Match the surrounding nav anchors so the baseline of "Public Profile"
       sits level with Dashboard / Clients / etc. Buttons default to a
       smaller user-agent font-size; without these the text floats above
       its neighbours. Line-height is intentionally LEFT to inherit
       (~1.5 from the body) so the button's content box height matches
       the anchors - pinning it to 1 would make the button 8px shorter
       and re-introduce the baseline drift. */
    font-size: 16px;
    font-weight: 500;
    font-family: 'Figtree', sans-serif;
    margin: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

button.vp-wysiwyg__btn,
button.vp-wysiwyg__btn:active {
    outline: none !important;
    box-shadow: none !important;
}

.vp-nav__chevron {
    transition: transform 0.2s;
}

.vp-nav__dropdown.open .vp-nav__chevron {
    transform: rotate(180deg);
}

.vp-nav__dropdown.open > .vp-nav__dropdown-toggle {
    background: var(--vp-green-pale) !important;
    color: var(--vp-green) !important;
}

.vp-nav__dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 180px;
    background: var(--vp-white);
    border: 1px solid var(--vp-border);
    border-radius: var(--vp-radius);
    box-shadow: var(--vp-shadow-md);
    padding: 6px 0;
    margin-top: 0;
    list-style: none;
    z-index: 100;
}

/* Inline dropdowns that sit INSIDE the main nav links list (e.g. the
   "Public Profile ▾" menu for Profile+/Clinic owners) anchor to the
   LEFT edge of their toggle so the menu opens rightward into empty
   space. The avatar dropdown on the right side keeps the default
   right-aligned positioning above. */
.vp-nav__links .vp-nav__dropdown--inline .vp-nav__dropdown-menu {
    right: auto;
    left: 0;
}

/* Active-state styling for a dropdown toggle when the current page is
   one of its children (e.g. /dashboard/staff/ or /dashboard/gallery/
   highlights the "Public Profile ▾" toggle). Mirrors the .active style
   on regular nav links so the toggle reads as the current section. */
.vp-nav__links .vp-nav__dropdown-toggle.active {
    background: var(--vp-green-light);
    color: var(--vp-green);
    font-weight: 600;
}

.vp-nav__dropdown.open .vp-nav__dropdown-menu {
    display: block;
}

.vp-nav__dropdown-menu li a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--vp-text);
    text-decoration: none;
    transition: background 0.15s;
    white-space: nowrap;
}

.vp-nav__dropdown-menu li a:hover {
    background: var(--vp-green-light);
    color: var(--vp-green);
}

.vp-nav__dropdown-menu li a svg {
    flex-shrink: 0;
    color: var(--vp-text-secondary);
}

.vp-nav__dropdown-menu li a:hover svg {
    color: var(--vp-green);
}

.vp-nav__hamburger {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    flex-direction: column;
    gap: 5px;
}

.vp-nav__hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--vp-text);
    border-radius: 2px;
    transition: all var(--vp-transition);
}

/* ── Main Content ─────────────────────────────────────────── */
.vp-main {
    flex: 1;
    padding-bottom: 100px;
}

.vp-container {
    max-width: 1290px;
    margin: 0 auto;
    padding: 32px 24px;
}

/* The Request page reads better a little narrower than the full dashboard width. */
body.vp-page-request .vp-container {
    max-width: 1000px;
}

.vp-page-header {
    margin-bottom: 24px;
    text-align: center;
}

.vp-page-title {
    font-size: 26px;
    font-weight: 700;
    margin: 0;
}

/* ── Stat Cards ───────────────────────────────────────────── */
.vp-stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-bottom: 32px;
}

.vp-stat-card {
    background: var(--vp-white);
    border-radius: var(--vp-radius);
    padding: 22px;
    box-shadow: var(--vp-shadow);
    border: 1px solid var(--vp-border);
    transition: box-shadow var(--vp-transition), transform var(--vp-transition);
    position: relative;
    overflow: hidden;
    text-align: center;
}

.vp-stat-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--vp-green);
    opacity: 0;
    transition: opacity var(--vp-transition);
}

.vp-stat-card:hover {
    box-shadow: var(--vp-shadow-md);
    transform: translateY(-2px);
}

.vp-stat-card:hover::after {
    opacity: 1;
}

.vp-stat-card--highlight {
    border-color: var(--vp-amber);
}

/* Stat card variant: clickable link wrapper. Removes default <a>
   underline and inherits text colour so the card looks identical
   to the non-link version, but the whole card is hoverable / clickable. */
.vp-stat-card--link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.vp-stat-card--link:hover { text-decoration: none; }
.vp-stat-card--link:focus-visible {
    outline: 2px solid var(--vp-green);
    outline-offset: 2px;
}

/* Solid red+white badge for high-urgency nav cues (pending reviews waiting
   on the practitioner). Distinct from vp-badge--red which is a soft tint. */
.vp-badge--alert {
    background: #DC2626;
    color: #ffffff;
    font-weight: 700;
}

.vp-stat-card__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--vp-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 12px;
}

.vp-stat-card__icon svg { width: 22px; height: 22px; }

.vp-stat-card__icon--green { background: var(--vp-green-light); color: var(--vp-green); }
.vp-stat-card__icon--amber { background: var(--vp-amber-light); color: var(--vp-amber); }
.vp-stat-card__icon--orange { background: var(--vp-orange-light); color: var(--vp-orange); }
.vp-stat-card__icon--blue { background: var(--vp-blue-light); color: var(--vp-blue); }

.vp-stat-card__value {
    font-size: 28px;
    font-weight: 700;
    color: var(--vp-navy);
    line-height: 1;
    margin-bottom: 4px;
}

.vp-stat-card__stars {
    font-size: 16px;
    vertical-align: middle;
}

.vp-stat-card__label {
    font-size: 14px;
    font-weight: 500;
    color: var(--vp-text-secondary);
}

.vp-stat-card__sub {
    font-size: 13px;
    color: var(--vp-text-secondary);
    margin-top: 6px;
}

.vp-stat-card__icon--teal { background: #FFE8E8; color: #1F5560; }

/* ── Your Reach Section ──────────────────────────────────── */
.vp-reach-section {
    background: linear-gradient(135deg, #F0FDF4 0%, #E6F7F2 100%);
    border: 1px solid #C6F0DF;
    border-radius: var(--vp-radius);
    padding: 24px 28px;
    margin-bottom: 32px;
}

.vp-reach-section__header {
    margin-bottom: 16px;
}

.vp-reach-section__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--vp-navy);
    margin: 0 0 4px;
}

.vp-reach-section__subtitle {
    font-size: 14px;
    color: var(--vp-text-secondary);
    margin: 0;
}

.vp-reach-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.vp-stat-card--reach {
    background: var(--vp-white);
}

/* ── Stars ────────────────────────────────────────────────── */
.vp-star { width: 16px; height: 16px; display: inline-block; vertical-align: middle; color: #E5E7EB; }
.vp-star svg { width: 16px; height: 16px; display: block; }
.vp-star--filled { color: var(--vp-amber); }

/* ── Cards ────────────────────────────────────────────────── */
.vp-card {
    background: var(--vp-white);
    border-radius: var(--vp-radius);
    padding: 28px;
    box-shadow: var(--vp-shadow);
    border: 1px solid var(--vp-border);
    transition: box-shadow var(--vp-transition);
}

.vp-card--mt { margin-top: 24px; }
.vp-card + .vp-card { margin-top: 24px; }

/* Settings form spacing */
.vp-form .vp-card + .vp-card { margin-top: 24px; }
.vp-form > .vp-btn { margin-top: 24px; }
.vp-form > .vp-alert { margin-top: 16px; }

.vp-card__title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--vp-border);
}

.vp-card__description {
    font-size: 18px;
    color: var(--vp-text-secondary);
    margin: -12px 0 16px;
}

/* Collapsible card variant - uses native <details>/<summary> so the
   accordion works without JS. Summary is the clickable header; default
   state is collapsed. Chevron rotates open ↔ closed. Used on the
   Widgets settings tab to reduce visual load (each section starts
   collapsed; practitioner opens just the one they need). */
.vp-card--collapsible { padding: 0; }
.vp-card--collapsible > summary {
    list-style: none;
    cursor: pointer;
    padding: 20px 28px;
    margin: 0;
    border-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 18px;
    font-weight: 700;
    color: var(--vp-text);
    border-radius: var(--vp-radius);
    transition: background 0.15s;
}
/* Title + helper description stacked inside the summary so the
   description stays visible when the section is collapsed. Helps
   practitioners pick which section to open without expanding everything. */
.vp-card__summary-title {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: var(--vp-text);
    line-height: 1.3;
}
.vp-card__summary-desc {
    display: block;
    margin-top: 4px;
    font-size: 16px;
    font-weight: 400;
    color: var(--vp-text-secondary);
    line-height: 1.4;
}
.vp-card--collapsible > summary::-webkit-details-marker,
.vp-card--collapsible > summary::marker { display: none; content: ''; }
.vp-card--collapsible > summary:hover { background: var(--vp-green-pale, #F0F7F6); }
.vp-card--collapsible > summary::after {
    content: '';
    width: 10px;
    height: 10px;
    border-right: 2.5px solid currentColor;
    border-bottom: 2.5px solid currentColor;
    transform: rotate(45deg) translateY(-3px);
    transition: transform 0.2s;
    flex-shrink: 0;
    opacity: 0.6;
}
.vp-card--collapsible[open] > summary {
    border-bottom: 2px solid var(--vp-border);
    border-radius: var(--vp-radius) var(--vp-radius) 0 0;
}
.vp-card--collapsible[open] > summary::after {
    transform: rotate(-135deg) translateY(2px);
}
.vp-card--collapsible > .vp-card__body {
    padding: 24px 28px 28px;
}

/* Sub-card inside a collapsible - used for the 3 variants inside the
   "Carousel Widgets" group (Compact / Transparent / Transparent on Dark)
   so they stay visually distinct without spawning 3 outer accordion bars. */
.vp-subcard {
    padding: 20px 0;
    border-top: 1px solid var(--vp-border);
}
.vp-subcard:first-child { padding-top: 4px; border-top: 0; }
.vp-subcard:last-child { padding-bottom: 0; }
.vp-subcard__title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--vp-text);
}
.vp-subcard__description {
    font-size: 15px;
    color: var(--vp-text-secondary);
    margin: 0 0 14px;
}

/* ── Sections ─────────────────────────────────────────────── */
.vp-section { margin-top: 32px; }

.vp-section__title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--vp-border);
}

/* ── Quick Action ─────────────────────────────────────────── */
.vp-quick-action {
    margin-bottom: 32px;
    text-align: center;
}

/* ── Home 2-Column Grid ──────────────────────────────────── */
.vp-home-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 28px;
    align-items: start;
}

.vp-home-sidebar .vp-card {
    margin-bottom: 20px;
}

.vp-home-sidebar .vp-card__title {
    font-size: 17px;
    margin-bottom: 16px;
}

.vp-home-sidebar .vp-form__group {
    margin-bottom: 14px;
}

.vp-home-sidebar .vp-btn--full {
    width: 100%;
}

.vp-home-sidebar .vp-request-item {
    padding: 12px 0;
    border-bottom: 1px solid #E8ECF1;
    font-size: 14px;
}

.vp-home-sidebar .vp-request-item:last-child {
    border-bottom: none;
}

.vp-home-sidebar .vp-request-item__name {
    font-weight: 600;
    color: #1B4A53;
}

.vp-home-sidebar .vp-request-item__meta {
    color: #6B7280;
    font-size: 13px;
    margin-top: 2px;
}

.vp-home-sidebar .vp-request-item__status {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.vp-home-sidebar .vp-request-item__status--sent { background: #EFF6FF; color: #2563EB; }
.vp-home-sidebar .vp-request-item__status--completed { background: #ECFDF5; color: #059669; }
.vp-home-sidebar .vp-request-item__status--expired { background: #FEF2F2; color: #DC2626; }
.vp-home-sidebar .vp-request-item__status--cancelled { background: #F3F4F6; color: #6B7280; }

/* ── WYSIWYG Editor ──────────────────────────────────────── */
.vp-wysiwyg {
    border: 2px solid #E8ECF1;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.2s;
}

.vp-wysiwyg:focus-within {
    border-color: #1F5560;
}

.vp-wysiwyg__toolbar {
    display: flex;
    gap: 2px;
    padding: 8px 10px;
    background: #F8FAFB;
    border-bottom: 1px solid #E8ECF1;
}

.vp-wysiwyg__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #D1D5DB;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    color: #374151;
    font-size: 15px;
    font-weight: 700;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 0;
    line-height: 1;
}

.vp-wysiwyg__btn:hover {
    background: #F3F4F6;
    border-color: #9CA3AF;
}

.vp-wysiwyg__btn:focus {
    outline: none !important;
    border-color: #1F5560 !important;
    box-shadow: 0 0 0 2px rgba(11, 110, 79, 0.15) !important;
}

.vp-wysiwyg__btn--active {
    background: #1F5560;
    color: #fff;
}

.vp-wysiwyg__btn svg {
    width: 16px;
    height: 16px;
}

.vp-wysiwyg__content {
    min-height: 120px;
    padding: 14px 16px;
    font-family: 'Figtree', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #1B4A53;
    outline: none;
}

.vp-wysiwyg__content a {
    color: #1F5560;
    text-decoration: underline;
}

.vp-wysiwyg__content p {
    margin: 0 0 8px;
}

/* ── Buttons ──────────────────────────────────────────────── */
.vp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Figtree', sans-serif;
    font-size: 15px;
    font-weight: 600;
    padding: 11px 24px;
    border-radius: var(--vp-radius-sm);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--vp-transition);
    line-height: 1.4;
    letter-spacing: -0.01em;
}

.vp-btn--primary {
    background: var(--vp-green) !important;
    color: var(--vp-white) !important;
    border: none !important;
}

.vp-btn--primary:hover,
.vp-btn--primary:focus {
    background: var(--vp-green-hover) !important;
    color: var(--vp-white) !important;
    box-shadow: var(--vp-shadow-hover);
    transform: translateY(-1px);
}

.vp-btn--primary:active {
    transform: translateY(0);
    box-shadow: var(--vp-shadow);
}

.vp-btn--secondary {
    background: var(--vp-white) !important;
    color: var(--vp-green) !important;
    border: 1.5px solid var(--vp-green) !important;
}

.vp-btn--secondary:hover,
.vp-btn--secondary:focus {
    background: var(--vp-green-pale) !important;
    color: var(--vp-green-hover) !important;
    border-color: var(--vp-green-hover) !important;
    box-shadow: var(--vp-shadow-hover);
    transform: translateY(-1px);
}

.vp-btn--secondary:active {
    transform: translateY(0);
    box-shadow: var(--vp-shadow);
}

.vp-btn--danger {
    background: #DC2626 !important;
    color: #fff !important;
    border: 1.5px solid #DC2626 !important;
}

.vp-btn--danger:hover,
.vp-btn--danger:focus {
    background: #B91C1C !important;
    border-color: #B91C1C !important;
    color: #fff !important;
    box-shadow: var(--vp-shadow-hover);
    transform: translateY(-1px);
}

.vp-btn--danger:active {
    background: #991B1B !important;
    transform: translateY(0);
    box-shadow: var(--vp-shadow);
}

.vp-btn--danger:disabled {
    background: #FCA5A5 !important;
    border-color: #FCA5A5 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* Small icon-only delete button used in Clients table rows */
.vp-clients-delete-btn {
    background: transparent;
    border: 1px solid #E5E7EB;
    color: #9CA3AF;
    border-radius: 6px;
    padding: 6px 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}
.vp-clients-delete-btn:hover {
    color: #DC2626;
    border-color: #FCA5A5;
    background: #FEF2F2;
}
.vp-clients-delete-btn svg { flex-shrink: 0; }

.vp-btn--sm { padding: 6px 14px; font-size: 13px; }
.vp-btn--lg { padding: 14px 32px; font-size: 16px; }
.vp-btn--full { width: 100%; }

.vp-btn--google {
    background: var(--vp-white);
    color: var(--vp-text);
    border: 1px solid var(--vp-border);
    padding: 12px 24px;
}

.vp-btn--google:hover {
    box-shadow: var(--vp-shadow-hover);
}

/* ── Forms ────────────────────────────────────────────────── */
.vp-form__group {
    margin-bottom: 20px;
}

.vp-form__label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--vp-text);
    margin-bottom: 6px;
}

/* Inline "(optional)" hint inside a form label - used on first/last name
   inputs and on the Google review URL field. Lighter weight + colour so
   it reads as secondary information without competing with the label. */
.vp-form__optional {
    font-weight: 400;
    color: var(--vp-text-secondary);
    font-size: 13px;
    margin-left: 4px;
}

.vp-form__input,
.vp-form__select,
.vp-form__textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #666;
    border-radius: var(--vp-radius-sm);
    font-family: 'Figtree', sans-serif;
    font-size: 15px;
    color: var(--vp-text);
    background: var(--vp-white);
    transition: border-color var(--vp-transition), box-shadow var(--vp-transition);
}

.vp-form__input:focus,
.vp-form__select:focus,
.vp-form__textarea:focus {
    outline: none;
    border-color: var(--vp-green);
    box-shadow: 0 0 0 3px rgba(11, 110, 79, 0.15);
}

.vp-form__input--sm { padding: 7px 12px; font-size: 14px; }
.vp-form__input--short { max-width: 120px; }

.vp-form__textarea { resize: vertical; min-height: 100px; }
.vp-form__textarea--code {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 13px;
    background: var(--vp-bg-light);
    resize: none;
}

.vp-form__select--sm { padding: 7px 12px; font-size: 14px; }

.vp-form__help {
    font-size: 16px;
    color: var(--vp-text-secondary);
    margin: 6px 0 0;
}

.vp-form__char-count {
    font-size: 12px;
    color: var(--vp-text-secondary);
    text-align: right;
    margin-top: 4px;
}

.vp-form__error {
    font-size: 13px;
    color: var(--vp-red);
    margin-top: 4px;
}

.vp-form__colour-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vp-form__colour-picker {
    width: 44px;
    height: 44px;
    padding: 2px;
    border: 1px solid var(--vp-border);
    border-radius: var(--vp-radius-sm);
    cursor: pointer;
}

.vp-form__checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
}

.vp-form__checkbox {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    flex-shrink: 0;
    accent-color: var(--vp-green);
}

.vp-form__checkbox-text {
    font-size: 16px;
    color: #119cb9;
    line-height: 1.5;
    font-weight: 600;
}

/* ── Badges ───────────────────────────────────────────────── */
.vp-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.vp-badge--green { background: var(--vp-green-light); color: var(--vp-green); }
.vp-badge--amber { background: var(--vp-amber-light); color: #92400E; }
.vp-badge--red { background: var(--vp-red-light); color: #991B1B; }

/* ── Alerts ───────────────────────────────────────────────── */
.vp-alert {
    padding: 14px 18px;
    border-radius: var(--vp-radius-sm);
    margin-bottom: 20px;
    font-size: 14px;
}

.vp-alert--success { background: var(--vp-green-light); color: #065F46; border: 1px solid #A7F3D0; font-size: 18px; font-weight: 600; }
.vp-alert--error { background: var(--vp-red-light); color: #991B1B; border: 1px solid #FECACA; }
.vp-alert--warning { background: #FFF8E1; color: #78350F; border: 1px solid #FDE68A; }
.vp-alert--amber { background: var(--vp-amber-light); color: #92400E; border: 1px solid #FDE68A; }

.vp-alert__actions {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

/* ── Tabs ─────────────────────────────────────────────────── */
.vp-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--vp-border);
    padding-bottom: 0;
}

.vp-tabs__tab {
    background: none;
    border: none;
    padding: 10px 18px;
    font-family: 'Figtree', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--vp-text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all var(--vp-transition);
}

.vp-tabs__tab:hover {
    color: var(--vp-text);
}

.vp-tabs__tab.active {
    color: var(--vp-green);
    border-bottom-color: var(--vp-green);
    font-weight: 600;
}

.vp-tabs__tab--warning {
    color: var(--vp-red);
}

/* ── Toolbar ──────────────────────────────────────────────── */
.vp-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.vp-toolbar__search { flex: 1; max-width: 320px; }
.vp-toolbar__sort { flex-shrink: 0; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── Review card avatar (dashboard) ───────────────────────── */
.vp-review-card__header { display: flex; align-items: flex-start; gap: 12px; }
.vp-review-card__header-main { flex: 1; min-width: 0; }
.vp-review-card__avatar {
    width: 50px; height: 50px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 18px; color: #fff;
    flex-shrink: 0; overflow: hidden;
}
.vp-review-card__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Recent Requests (compact list) ───────────────────────── */
.vp-recent-list { display: flex; flex-direction: column; }
.vp-recent-item { padding: 12px 0; }
.vp-recent-item--border { border-top: 1px solid #E8ECF1; }

/* ── Reviews List ─────────────────────────────────────────── */
.vp-reviews-list { display: flex; flex-direction: column; gap: 12px; }

.vp-review-card {
    background: var(--vp-white);
    border-radius: var(--vp-radius);
    padding: 24px;
    border: 1px solid var(--vp-border);
    box-shadow: var(--vp-shadow);
    transition: box-shadow var(--vp-transition), transform var(--vp-transition), border-color 0.6s ease, background-color 0.6s ease;
}

.vp-review-card:hover {
    box-shadow: var(--vp-shadow-md);
}

/* Flash highlight when deep-linked from the Clients tab */
.vp-review-card--highlight {
    border-color: #1F5560 !important;
    background-color: #F0F7F8 !important;
    box-shadow: 0 0 0 3px rgba(31,85,96,0.2), var(--vp-shadow-md) !important;
}

.vp-review-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.vp-review-card__stars {
    font-size: 18px;
    letter-spacing: 2px;
}

.vp-review-card__meta {
    font-size: 13px;
    color: var(--vp-text-secondary);
}

.vp-review-card__name {
    font-weight: 600;
    color: var(--vp-text);
}

.vp-review-card__text {
    font-size: 17px;
    color: var(--vp-text);
    line-height: 1.6;
    margin: 10px 0;
}

.vp-review-card__reply {
    background: var(--vp-green-pale);
    border-left: 3px solid var(--vp-green);
    padding: 12px 16px;
    border-radius: 0 var(--vp-radius-sm) var(--vp-radius-sm) 0;
    margin-top: 12px;
    font-size: 14px;
}

.vp-review-card__actions {
    display: flex;
    gap: 8px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.vp-review-card__flagged {
    background: var(--vp-red-light);
    border: 1px solid #FECACA;
    border-radius: var(--vp-radius-sm);
    padding: 10px 14px;
    margin-bottom: 12px;
    font-size: 13px;
    color: #991B1B;
}

/* ── Embed Block ──────────────────────────────────────────── */
.vp-embed-block { margin-bottom: 20px; }
.vp-embed-block:last-child { margin-bottom: 0; }

.vp-embed-block__label {
    font-family: 'Figtree', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--vp-text);
    margin: 0 0 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.vp-embed-block__url {
    font-size: 13px;
    color: var(--vp-text-secondary);
    margin: 0 0 8px;
}

.vp-embed-block__code-wrap {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.vp-embed-block__code-wrap .vp-form__textarea--code {
    flex: 1;
}

/* ── Plan Info ────────────────────────────────────────────── */
.vp-plan-info {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.vp-plan-info__actions {
    margin-left: auto;
    display: inline-flex;
    gap: 8px;
    align-items: center;
}

.vp-btn--cancel-plan {
    background: #9CA3AF;
    color: #ffffff;
    border: 1px solid #9CA3AF;
    padding: .3rem 1rem;
    font-size: 14px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.vp-btn--cancel-plan:hover {
    background: #6B7280;
    border-color: #6B7280;
}

.vp-btn--cancel-plan:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Widgets tab - strong separation between each widget variant and between
   multiple site instances within a variant. Each site block sits in its
   own soft-grey inset panel so the preview + code + copy button read as
   a single unit, clearly bounded from the next one. */
#tab-widgets .vp-card + .vp-card {
    margin-top: 28px;
}

/* Force widget/badge card headings to be readable: 18px, pure black,
   title-case (override any inherited text-transform:uppercase rule from
   parent theme CSS). */
#tab-widgets .vp-card__title,
.vp-settings-tab-content .vp-card__title {
    font-size: 18px !important;
    color: #000000 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Badge variant headings inside the Verification Badge card (Standard
   Badge / Compact Badge / Just Stars Pill / Image JPG). */
.vp-variant-title {
    font-size: 18px;
    font-weight: 700;
    color: #000000;
    text-transform: none;
    letter-spacing: normal;
    margin: 0 0 12px;
    font-family: inherit;
}

#tab-widgets .vp-embed-block {
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 18px;
}

#tab-widgets .vp-embed-block:last-child {
    margin-bottom: 0;
}

#tab-widgets .vp-embed-block__label {
    margin-top: 0;
}

/* Badge tab variants - same boxed treatment so Standard / Compact / Pill / JPG
   each read as a self-contained card rather than one long flowing list. */
.vp-settings-tab-content .vp-form__group--boxed,
#tab-widgets > .vp-card .vp-form__group {
    /* No forced box here - the badge section already uses inner preview
       panels. We only need the outer card separation (handled above)
       plus a horizontal divider before each variant after the first. */
}

.vp-embed-preview {
    margin: 0 0 14px;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    background: #ffffff;
    overflow: hidden;
}

.vp-embed-preview__label {
    font-size: 12px;
    font-weight: 700;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 8px 14px;
    background: #F9FAFB;
    border-bottom: 1px solid #E5E7EB;
}

.vp-embed-preview__frame {
    display: block;
    width: 100%;
    border: 0;
    background: #ffffff;
}

.vp-inactive-panel {
    text-align: center;
    padding: 40px 28px;
    background: #FFF8E8;
    border: 1px solid #F1D77B;
    border-radius: 12px;
    margin-bottom: 24px;
}

.vp-inactive-panel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #F8E2A0;
    color: #8A6A0A;
    margin: 0 auto 16px;
}

.vp-inactive-panel__title {
    font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: #1B4A53;
    margin: 0 0 8px;
}

.vp-inactive-panel__text {
    font-size: 16px;
    color: #3C4750;
    margin: 0 auto 20px;
    max-width: 520px;
    line-height: 1.55;
}

.vp-inactive-panel__error {
    color: #B42318;
    font-size: 14px;
    margin: 12px 0 0;
}

.vp-plan-info__price {
    font-size: 16px;
    color: var(--vp-text);
    margin: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.vp-plan-info__price strong {
    font-size: 20px;
    font-weight: 700;
    color: var(--vp-brand, #1F5560);
}

.vp-plan-info__price span {
    font-size: 14px;
    color: var(--vp-text-secondary);
}

.vp-plan-info__expiry {
    font-size: 14px;
    color: var(--vp-text-secondary);
    margin: 0;
}

/* ── Modal ────────────────────────────────────────────────── */
.vp-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; animation: vpFadeIn 0.2s ease; }
.vp-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 17, 23, 0.4); backdrop-filter: blur(4px); }

.vp-modal__content {
    position: relative;
    background: var(--vp-white);
    border-radius: var(--vp-radius-lg);
    width: 90%;
    max-width: 500px;
    box-shadow: var(--vp-shadow-lg);
    animation: vpSlideUp 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    /* A tall modal (the self-import form is the worst case) previously grew
       past the viewport. Because .vp-modal centres it inside a fixed,
       non-scrolling box, the overflow spilled off the TOP as well as the
       bottom and neither end could be reached - the header, the platform
       dropdown and the submit button were all simply unreachable. Cap the
       height and let the body scroll instead, so header and footer stay put.
       dvh second so mobile browsers use the real visible height. */
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
}
.vp-modal__header,
.vp-modal__footer { flex: 0 0 auto; }

@keyframes vpFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes vpSlideUp {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.vp-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--vp-border);
}

.vp-modal__header h3 { margin: 0; font-size: 18px; }

.vp-modal__close {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--vp-text-secondary);
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}

.vp-modal__body { padding: 20px 24px; flex: 1 1 auto; overflow-y: auto; min-height: 0; -webkit-overflow-scrolling: touch; }
.vp-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 24px;
    border-top: 1px solid var(--vp-border);
}

/* ── Loading ──────────────────────────────────────────────── */
.vp-loading {
    text-align: center;
    padding: 40px;
    color: var(--vp-text-secondary);
    font-size: 14px;
}

/* ── Data Table (GDPR export) ─────────────────────────────── */
.vp-data-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.vp-data-table th,
.vp-data-table td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid var(--vp-border);
    font-size: 14px;
}

.vp-data-table th {
    font-weight: 600;
    color: var(--vp-text-secondary);
    width: 140px;
}

/* ── Mobile Bottom Tabs ───────────────────────────────────── */
.vp-mobile-tabs {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--vp-border);
    padding: 8px 0;
    padding-bottom: env(safe-area-inset-bottom, 8px);
    z-index: 100;
    justify-content: space-around;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.04);
}

.vp-mobile-tabs__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 12px;
    min-width: 64px;
    min-height: 44px;
    text-decoration: none;
    color: var(--vp-text-secondary);
    font-size: 11px;
    font-weight: 500;
    position: relative;
    transition: color var(--vp-transition);
}

.vp-mobile-tabs__item.active {
    color: var(--vp-green);
}

.vp-mobile-tabs__item svg {
    width: 20px;
    height: 20px;
}

.vp-mobile-tabs__badge {
    position: absolute;
    top: 2px;
    right: 8px;
    background: var(--vp-red);
    color: var(--vp-white);
    font-size: 10px;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
    .vp-stats-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Mobile-only logout item inside hamburger dropdown - hidden on desktop */
.vp-nav__mobile-logout { display: none; }

/* Mobile-only home page elements - hidden on desktop (5 stat cards show instead) */
.vp-pending-alert,
.vp-mobile-stat-strip,
.vp-empty-helper { display: none; }

/* "View all" links under Recent Requests / Recent Reviews lists */
.vp-view-all-link {
    display: block;
    margin-top: 12px;
    padding: 10px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--vp-green);
    text-decoration: none;
    border-top: 1px solid var(--vp-border);
}
.vp-view-all-link:hover { color: var(--vp-green-dark, #0F3E47); }

@media (max-width: 768px) {
    .vp-nav__links,
    .vp-nav__user { display: none; }
    .vp-nav__brand { display: inline-block; }
    .vp-nav__hamburger { display: flex; margin-left: auto; }
    .vp-nav__links.open {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        background: var(--vp-white);
        border-bottom: 1px solid var(--vp-border);
        padding: 12px;
        box-shadow: var(--vp-shadow);
    }
    .vp-nav__mobile-logout { display: block; border-top: 1px solid var(--vp-border); margin-top: 8px; padding-top: 12px; }
    .vp-nav__mobile-logout a { display: flex; align-items: center; gap: 8px; color: var(--vp-text-secondary); }
    /* Settings / Quick Guide / Get Help live inside the hamburger on mobile
       (they're in the user dropdown on desktop). */
    .vp-nav__item--mobile-only { display: block; }

    /* Touch targets: ensure all hamburger menu items are ≥44px tall */
    .vp-nav__links.open a,
    .vp-nav__links.open .vp-nav__dropdown-toggle {
        min-height: 44px;
        padding: 12px 16px;
    }

    /* Hide Request Review hamburger item on mobile - redundant with the form at top of home */
    .vp-nav__links .vp-nav__item--hide-mobile { display: none; }

    .vp-mobile-tabs { display: none !important; }
    .vp-main { padding-bottom: 32px; }
    .vp-container { padding: 20px 16px; }
    .vp-page-title { font-size: 22px; }
    .vp-stat-card { padding: 16px; }
    .vp-stat-card__value { font-size: 24px; }
    .vp-toolbar { flex-direction: column; align-items: stretch; }
    .vp-toolbar__search { max-width: none; }
    .vp-review-card__actions { flex-direction: column; }
    .vp-review-card__actions .vp-btn { width: 100%; }

    /* Home page: strip to essentials, reorder Request -> Recent Requests -> Recent Reviews */
    .vp-page-header--home { display: none; }
    .vp-stats-grid { display: none; }
    .vp-home-grid { display: flex; flex-direction: column; gap: 16px; align-items: stretch; }
    .vp-home-sidebar,
    .vp-home-main { width: 100%; }
    .vp-home-sidebar { order: 1; }
    .vp-home-main { order: 2; }

    /* Urgent pending-review alert */
    .vp-pending-alert {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 16px;
        margin-bottom: 16px;
        background: #FFF8E1;
        border: 1px solid #FDE68A;
        border-radius: var(--vp-radius);
        color: #78350F;
        font-weight: 600;
        font-size: 15px;
        text-decoration: none;
        transition: background var(--vp-transition);
    }
    .vp-pending-alert:hover,
    .vp-pending-alert:active { background: #FFF3C4; }
    .vp-pending-alert > svg { flex-shrink: 0; color: #D97706; }
    .vp-pending-alert > span { flex: 1; line-height: 1.3; }
    .vp-pending-alert__arrow { color: #78350F; flex-shrink: 0; }

    /* Compact stats strip */
    .vp-mobile-stat-strip {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 14px;
        margin-bottom: 16px;
        background: var(--vp-white);
        border: 1px solid var(--vp-border);
        border-radius: var(--vp-radius);
        font-size: 15px;
        color: var(--vp-text);
        text-decoration: none;
    }
    .vp-mobile-stat-strip__star { color: var(--vp-amber); margin-right: 2px; font-size: 16px; }
    .vp-mobile-stat-strip__sep { color: #CBD5E1; }
    .vp-mobile-stat-strip__item { font-weight: 600; }
    .vp-mobile-stat-strip__item--pending { color: #D97706; }

    /* Empty-state helper for brand-new practitioners */
    .vp-empty-helper {
        display: flex;
        gap: 12px;
        padding: 16px;
        margin-bottom: 16px;
        background: #F0FDF4;
        border: 1px solid #C6F0DF;
        border-radius: var(--vp-radius);
    }
    .vp-empty-helper__icon { font-size: 28px; flex-shrink: 0; line-height: 1; }
    .vp-empty-helper__body strong { display: block; margin-bottom: 4px; color: var(--vp-navy); font-size: 15px; }
    .vp-empty-helper__body p { margin: 0; font-size: 14px; color: var(--vp-text-secondary); line-height: 1.4; }
}

@media (max-width: 480px) {
    .vp-stats-grid { grid-template-columns: 1fr; }
    .vp-reach-grid { grid-template-columns: 1fr; }
}

/* ── Profile Photo ───────────────────────────────────────── */
.vp-profile-photo {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.vp-profile-photo__preview {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--vp-green-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 2px solid var(--vp-border);
}

.vp-profile-photo__preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.vp-profile-photo__initials {
    font-size: 28px;
    font-weight: 700;
    color: var(--vp-green);
}

.vp-profile-photo__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding-top: 4px;
}

.vp-profile-photo__actions .vp-btn {
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    height: 34px;
    box-sizing: border-box;
    border-radius: var(--vp-radius-sm) !important;
}

.vp-profile-photo__actions .vp-form__help {
    width: 100%;
    margin-top: 4px;
}

/* ── Help Toggle & Panel ─────────────────────────────────── */
.vp-help-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    font-size: 13px;
    font-weight: 500;
    color: var(--vp-green);
    cursor: pointer;
    padding: 0;
    margin-left: 8px;
}

.vp-help-toggle:hover { text-decoration: underline; }

.vp-help-panel {
    background: var(--vp-bg-light);
    border: 1px solid var(--vp-border);
    border-radius: var(--vp-radius-sm);
    padding: 16px 20px;
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.6;
}

/* Collapsible variant: <details class="vp-help-panel"> with a <summary> header.
   Closed by default; click the summary to reveal the instructions. */
details.vp-help-panel > summary {
    font-family: 'Figtree', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--vp-text);
    cursor: pointer;
    list-style: none;
}
details.vp-help-panel > summary::-webkit-details-marker { display: none; }
details.vp-help-panel > summary::after {
    content: ' \25B6';
    font-size: 0.7em;
    font-weight: 400;
    color: var(--vp-text-secondary);
}
details.vp-help-panel[open] > summary::after { content: ' \25BC'; }

.vp-help-panel h4 {
    font-family: 'Figtree', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 10px;
    color: var(--vp-text);
}

/* Sub-headings inside the help panel - used to separate Option 1 /
   Option 2 / Important sections in the Google review URL guide. */
.vp-help-panel h5 {
    font-family: 'Figtree', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    margin: 18px 0 8px;
    color: var(--vp-text);
}
.vp-help-panel h5:first-of-type { margin-top: 4px; }

.vp-help-panel ol {
    margin: 0 0 12px;
    padding-left: 20px;
    font-size: 1rem;
}

.vp-help-panel li {
    margin-bottom: 4px;
    font-size: 1rem;
}

/* Inline code blocks inside the help panel (used for the
   writereview?placeid= template). Wraps on small viewports
   so the long URL doesn't blow out the panel width. */
.vp-help-panel code {
    display: inline-block;
    background: #fff;
    border: 1px solid var(--vp-border);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 14px;
    word-break: break-all;
    max-width: 100%;
    margin-top: 4px;
}

.vp-help-panel__tip {
    font-size: 16px;
    color: var(--vp-text-secondary);
    margin: 0 0 4px;
}

.vp-help-panel__tip a { color: var(--vp-green); }

.vp-help-panel__note {
    font-size: 13px;
    color: var(--vp-text-secondary);
    margin: 8px 0 0;
    font-style: italic;
}

/* ── Email Preview ───────────────────────────────────────── */
.vp-email-preview {
    background: var(--vp-bg-light);
    border: 1px solid var(--vp-border);
    border-radius: var(--vp-radius-sm);
    overflow: hidden;
    margin-top: 16px;
}

.vp-email-preview__label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--vp-text-secondary);
    padding: 10px 16px;
    border-bottom: 1px solid var(--vp-border);
    background: var(--vp-white);
}

.vp-email-preview__body {
    padding: 20px;
    font-size: 14px;
    color: var(--vp-text);
    line-height: 1.6;
}

.vp-email-preview__body p { margin: 0 0 12px; }

.vp-email-preview__greeting { font-weight: 500; }

.vp-email-preview__message {
    color: var(--vp-text-secondary);
}

.vp-email-preview__btn {
    display: inline-block;
    background: var(--vp-green);
    color: var(--vp-white) !important;
    padding: 10px 24px;
    border-radius: var(--vp-radius-sm);
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    margin: 8px 0 16px;
}

.vp-email-preview__footer {
    font-size: 12px;
    color: #9CA3AF;
}

/* ── Dashboard Footer ────────────────────────────────────── */
.vp-footer {
    margin-top: 48px;
    padding: 32px 24px;
    border-top: 1px solid var(--vp-border);
    text-align: center;
    font-size: 13px;
    color: var(--vp-text-secondary);
    line-height: 1.6;
}

.vp-footer__copy {
    margin: 0 0 4px;
}

.vp-footer__company {
    margin: 0;
    font-size: 12px;
    color: #9CA3AF;
}

@media (max-width: 768px) {
    .vp-footer { margin-top: 32px; padding: 24px 16px; }
}

/* ── Design Uplift Additions ─────────────────────────────── */

/* Subtle page load animation */
.vp-container { animation: vpContainerIn 0.3s ease; }
@keyframes vpContainerIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Better focus ring */
.vp-btn:focus-visible,
.vp-form__input:focus-visible,
.vp-form__textarea:focus-visible,
.vp-form__select:focus-visible,
.vp-tabs__tab:focus-visible {
    outline: 2px solid var(--vp-green);
    outline-offset: 2px;
}

/* Refined stat card icon backgrounds */
.vp-stat-card__icon {
    border-radius: var(--vp-radius);
    transition: transform var(--vp-transition);
}

.vp-stat-card:hover .vp-stat-card__icon {
    transform: scale(1.05);
}

/* Active tab refinement */
.vp-tabs__tab.active {
    border-bottom-width: 2.5px;
}

/* Review card reply refinement */
.vp-review-card__reply {
    font-size: 16px;
    line-height: 1.6;
}

/* Success alert animation */
.vp-alert--success {
    animation: vpAlertIn 0.3s ease;
}

@keyframes vpAlertIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Empty state styling */
.vp-empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--vp-text-secondary);
}

.vp-empty-state__icon {
    font-size: 40px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.vp-empty-state__title {
    font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--vp-navy);
    margin: 0 0 8px;
}

.vp-empty-state__text {
    font-size: 16px;
    margin: 0 0 20px;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

/* Skeleton loading shimmer */
.vp-skeleton {
    background: linear-gradient(90deg, var(--vp-bg-light) 25%, #ebeef2 50%, var(--vp-bg-light) 75%);
    background-size: 200% 100%;
    animation: vpShimmer 1.5s ease-in-out infinite;
    border-radius: var(--vp-radius-sm);
}

@keyframes vpShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Smooth scrollbar for webkit */
.vp-dashboard ::-webkit-scrollbar { width: 6px; }
.vp-dashboard ::-webkit-scrollbar-track { background: transparent; }
.vp-dashboard ::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }
.vp-dashboard ::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* Page title refinement */
.vp-page-title {
    letter-spacing: -0.02em;
}

/* Quick action CTA refinement */
.vp-quick-action .vp-btn--lg {
    padding: 16px 36px;
    font-size: 17px;
    border-radius: var(--vp-radius);
    box-shadow: 0 2px 8px rgba(11, 110, 79, 0.2);
}

.vp-quick-action .vp-btn--lg:hover {
    box-shadow: 0 4px 16px rgba(11, 110, 79, 0.3);
}

/* Nav logo refinement */
.vp-nav__logo img,
.vp-nav__logo svg {
    transition: transform var(--vp-transition);
}

.vp-nav__logo:hover img,
.vp-nav__logo:hover svg {
    transform: scale(1.03);
}

/* Section title refinement */
.vp-section__title {
    letter-spacing: -0.01em;
}

/* Form input polish */
.vp-form__input::placeholder,
.vp-form__textarea::placeholder {
    color: #a0a7b3;
}

/* Badge polish */
.vp-badge {
    font-size: 12px;
    letter-spacing: 0.01em;
}

/* ── Load More + Reviews Count ─────────────────────────────── */
.vp-reviews-count {
    text-align: center;
    padding: 16px 0 8px;
    font-size: 14px;
    color: #6B7280;
}

.vp-load-more-btn {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 8px auto 16px;
    padding: 12px 24px;
    background: var(--vp-white);
    color: var(--vp-green);
    border: 2px solid var(--vp-green);
    border-radius: 8px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.vp-load-more-btn:hover {
    background: var(--vp-green);
    color: var(--vp-white);
}

/* ── Clients Table ─────────────────────────────────────────── */
.vp-clients-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.vp-clients-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.vp-clients-table th {
    text-align: left;
    padding: 12px 16px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6B7280;
    border-bottom: 2px solid #E5E7EB;
    white-space: nowrap;
}

.vp-clients-table td {
    padding: 14px 16px;
    /* #F3F4F6 was near-invisible against the white rows - practitioners
       couldn't see where one client ended and the next began. */
    border-bottom: 1px solid #DDE3EA;
    vertical-align: middle;
}

.vp-clients-table tbody tr:hover {
    background: #F9FAFB;
}

.vp-clients-name {
    font-weight: 600;
    color: var(--vp-text);
    white-space: nowrap;
}

.vp-clients-email {
    color: #6B7280;
    font-size: 14px;
}

.vp-clients-review-link {
    color: var(--vp-green);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
}

.vp-clients-review-link:hover {
    text-decoration: underline;
}

/* Badge colour variants for clients */
.vp-badge--blue {
    background: #DBEAFE;
    color: #1D4ED8;
}

.vp-badge--amber {
    background: #FEF3C7;
    color: #D97706;
}

.vp-badge--green {
    background: #D1FAE5;
    color: #059669;
}

.vp-badge--grey {
    background: #F3F4F6;
    color: #6B7280;
}

@media (max-width: 768px) {
    .vp-clients-table {
        font-size: 14px;
    }
    .vp-clients-table th,
    .vp-clients-table td {
        padding: 10px 12px;
    }
}

/* ── Mobile responsiveness for tables with many columns ───────────
   On phone widths the Clients table (Name / Email / Source / Status /
   Sent by / Date / Review / delete) and the Audit Log table (When / By
   / Action / Details) blow past the viewport. The wrapper already
   allows horizontal scroll, but that's a poor UX for primary content.
   Hide secondary columns at <640px so the most important ones stay
   visible without sideways scroll. Email + Source + Sent by are
   secondary on Clients (Status + Date matter most for quick scan).
   Toolbar wraps to multiple lines.
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .vp-toolbar,
    .vp-audit-toolbar {
        flex-wrap: wrap;
    }
    .vp-toolbar > *,
    .vp-audit-toolbar > * {
        flex: 1 1 auto;
        min-width: 0;
    }
    /* Clients table - keep Name / Status / Date / Review / actions.
       Hide Email (col 2), Source (col 3), and Sent by (class-targeted -
       conditionally rendered for clinic accounts only). nth-child can't
       be used for Sent by because its column position differs between
       clinic (col 5) and non-clinic (absent), and would otherwise hide
       Date by mistake on non-clinic. */
    .vp-clients-table thead th:nth-child(2),
    .vp-clients-table tbody td:nth-child(2),
    .vp-clients-table thead th:nth-child(3),
    .vp-clients-table tbody td:nth-child(3),
    .vp-clients-table .vp-col-sentby {
        display: none;
    }

    /* Audit log - hide By column (col 2) on phone; user_name is in
       Details anyway, and the role is encoded in the action label. */
    .vp-audit-table thead th:nth-child(2),
    .vp-audit-table tbody td:nth-child(2) {
        display: none;
    }
    .vp-clients-table th,
    .vp-clients-table td {
        padding: 10px 8px;
        font-size: 13px;
    }
}

/* Two-line Recent Requests widget items on home - line 2 should
   wrap cleanly on phone instead of overflowing. */
@media (max-width: 480px) {
    .vp-recent-item > div:nth-child(2) {
        white-space: normal;
        line-height: 1.5;
    }
}

/* ── Practice Gallery (clinic-tier dashboard tab) ── */
.vp-gallery-toolbar { display: flex; align-items: center; gap: 16px; margin: 16px 0 12px; }
.vp-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.vp-gallery-empty { grid-column: 1 / -1; text-align: center; padding: 40px 20px; color: #888; background: #f7f7f7; border-radius: 8px; }
.vp-gallery-tile { position: relative; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; cursor: grab; transition: box-shadow 0.15s, transform 0.1s; }
.vp-gallery-tile:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.vp-gallery-tile.is-dragging { opacity: 0.5; cursor: grabbing; }
.vp-gallery-tile.is-dragover { outline: 2px solid #1F5560; outline-offset: -2px; }
.vp-gallery-tile img { display: block; width: 100%; height: 140px; object-fit: cover; pointer-events: none; }
.vp-gallery-tile__delete { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff; font-size: 18px; line-height: 22px; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; }
.vp-gallery-tile__delete:hover { background: #dc2626; }
.vp-gallery-tile__caption { display: block; width: 100%; border: 0; border-top: 1px solid #f0f0f0; padding: 8px 10px; font-size: 13px; color: #444; background: #fafafa; }
.vp-gallery-tile__caption:focus { outline: none; background: #fff; border-top-color: #1F5560; }

/* Dashboard home "Show your reviews on your website" callout -
   appears for any owner who hasn't embedded the widget yet (widget
   impressions == 0). Self-dismisses on first live embed; no persistent
   UI cost. Card-style with caramel accent + chevron CTA. */
.vp-widgets-callout {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    margin: 16px 0 24px;
    background: #FFFBF3;
    border: 1px solid #E8D6BC;
    border-left: 4px solid #C49A6C;
    border-radius: var(--vp-radius);
    text-decoration: none;
    color: var(--vp-text);
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.vp-widgets-callout:hover {
    background: #FFF6E5;
    border-color: #C49A6C;
    transform: translateY(-1px);
}
.vp-widgets-callout__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #F7F0E7;
    color: #1F5560;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vp-widgets-callout__body {
    flex: 1;
    min-width: 0;
}
.vp-widgets-callout__body strong {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #1F5560;
    margin-bottom: 4px;
}
.vp-widgets-callout__body p {
    margin: 0;
    font-size: 14px;
    color: #4B5563;
    line-height: 1.45;
}
.vp-widgets-callout__cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    background: #1F5560;
    color: #FFFFFF;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}
.vp-widgets-callout:hover .vp-widgets-callout__cta { background: #2A7A8A; }
@media (max-width: 640px) {
    .vp-widgets-callout { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; }
    .vp-widgets-callout__cta { align-self: stretch; justify-content: center; }
}

/* Plan-tier pill in nav header - visible badge so users always know which
   plan they're on. Hidden on narrow screens to keep the mobile header tidy;
   the dropdown's "Plan & Billing" link is the mobile entry point.

   Two visual modes:
     --calm   passive tier label, small and quiet (default for active/trial)
     --alert  loud action-needed pill (expired/cancelled), amber/red */
.vp-nav__plan-pill {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    margin-right: 12px;
    text-decoration: none;
}

/* Calm mode - small, quiet tier label (v1.10.16). Now uniformly black
   across all tiers and stacked above the practitioner's name inside the
   avatar dropdown toggle. The previous per-tier colours moved to the
   plan-page upgrade cards where tier-distinction actually matters. */
.vp-nav__plan-pill--calm {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    background: #000000;
    color: #FFFFFF;
    border: none;
    line-height: 1.4;
}

/* Stacked layout inside the avatar dropdown toggle - pill sits above
   the name. Used when pill is rendered inside .vp-nav__user-stack. */
.vp-nav__user-stack {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    line-height: 1.1;
}
.vp-nav__plan-pill--stacked {
    align-self: flex-start;
    margin: 0;
}

/* Muted variant - for Standard tier where the pill is just confirming
   "you're on the baseline plan" rather than highlighting a paid tier. */
.vp-nav__plan-pill--muted {
    background: #6B7280 !important;
    color: #FFFFFF !important;
}

/* Alert mode - loud, can't-miss-it pill for expired/cancelled plans. */
.vp-nav__plan-pill--alert {
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    background: #FEF3C7;
    color: #92400E;
    border: 1px solid #FCD34D;
    box-shadow: 0 1px 2px rgba(146, 64, 14, 0.15);
}
.vp-nav__plan-pill--alert:hover {
    background: #FDE68A;
    color: #78350F;
}
.vp-nav__plan-pill--alert .vp-nav__plan-pill__sep { opacity: 0.5; }

/* Legacy --upgrade modifier - retained so any cached pages from before
   the v1.10.9 redesign don't completely lose styling during the rollover. */
.vp-nav__plan-pill--upgrade:hover { filter: brightness(0.97); }

@media (max-width: 900px) {
    .vp-nav__plan-pill { display: none !important; }
}

/* Per-Therapist Public Profiles - accordion rows on the Staff page.
   Bold 5px border so each therapist visually separates from the next
   even at a glance through a long list (some clinics have 20+ staff).
   Header is the entire row's clickable region; body collapses by default. */
.vp-staff-profile-row {
    border: 5px solid #E5E7EB;
    border-radius: 12px;
    background: #fff;
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color 0.15s;
}
.vp-staff-profile-row[data-collapsed="0"] {
    border-color: #a9c5b8;
}
.vp-sp-header:hover {
    background: #F9FAFB !important;
}
/* Focus ring shown only for keyboard navigation (not mouse clicks). The
   :focus-visible pseudo-class is well-supported in modern browsers and
   strips the outline on click - fixes the "double border" appearance
   the dark teal focus ring caused alongside the sage row border. */
.vp-sp-header:focus { outline: none; }
.vp-sp-header:focus-visible {
    outline: 2px solid #a9c5b8;
    outline-offset: -2px;
}
.vp-sp-status {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

/* ── "Add reviews from elsewhere" page (/dashboard/add-reviews/) ──────
   A centred single column, because a form this long is easier to read as
   one narrow measure than stretched across a wide dashboard. The page
   header stays centred to match every other dashboard page
   (.vp-page-header sets text-align:center); the back link is pulled back
   to the left edge of the column so it reads as navigation rather than
   as part of the title block.

   Everything here uses the type scale. This page previously carried its
   sizes as inline styles copied over from the modal it replaced, which
   is how it ended up at 12-13px. */
.vp-import-page { max-width: 860px; margin-left: auto; margin-right: auto; }

.vp-import-page__back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: var(--vp-fs-base);
    font-weight: 600;
    color: var(--vp-green);
    text-decoration: none;
    margin-bottom: 18px;
}
.vp-import-page__back:hover { color: var(--vp-green-hover); text-decoration: underline; }

/* Back link sits left even though .vp-page-header centres its contents. */
.vp-import-page .vp-import-page__backrow { text-align: left; }

.vp-import-page .vp-page-title {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-size: var(--vp-fs-h1);
}

.vp-import-page__lead {
    margin: 10px auto 0;
    max-width: 68ch;
    font-size: var(--vp-fs-lead);
    line-height: 1.55;
    color: var(--vp-text-secondary);
}

.vp-import-page .vp-card__title { font-size: var(--vp-fs-h2); }

/* The anchor block - the honesty check. Deliberately the loudest thing
   on the page after the title, because entering the wrong two numbers
   here is the single most common reason a batch gets held. */
.vp-import-anchor {
    background: #E8EEEF;
    border: 1px solid #D5E0E1;
    border-radius: var(--vp-radius-sm);
    padding: 18px 18px 4px;
}
.vp-import-anchor__eyebrow {
    margin: 0 0 8px;
    font-size: var(--vp-fs-base);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--vp-green);
}
.vp-import-anchor__warning {
    margin: 0 0 16px;
    padding: 13px 15px;
    border-left: 3px solid #C49A6C;
    background: #FBF5EB;
    border-radius: 0 var(--vp-radius-sm) var(--vp-radius-sm) 0;
    font-size: var(--vp-fs-base);
    line-height: 1.55;
    color: #4A3B28;
}
.vp-import-anchor__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* Attestation row. Full-size text - it is a declaration the practitioner
   is making, so it must not look like small print. */
.vp-import-ack {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #FBFDFC;
    border: 1px solid #DDE6E8;
    border-radius: var(--vp-radius-sm);
    padding: 16px;
    cursor: pointer;
    font-size: var(--vp-fs-base);
    line-height: 1.55;
    color: var(--vp-text);
}
.vp-import-ack input { margin-top: 3px; flex: 0 0 auto; width: 19px; height: 19px; }

.vp-import-page__counter {
    text-align: right;
    font-size: var(--vp-fs-base);
    color: var(--vp-text-secondary);
    margin: 14px 0 0;
}

.vp-import-page__footnote {
    margin-top: 22px;
    font-size: var(--vp-fs-base);
    color: var(--vp-text-secondary);
}

.vp-import-page__google-note {
    margin-top: 12px;
    padding: 14px 16px;
    background: #F3F8F9;
    border-left: 3px solid #4285F4;
    border-radius: 0 var(--vp-radius-sm) var(--vp-radius-sm) 0;
    font-size: var(--vp-fs-base);
    line-height: 1.55;
}

.vp-import-page__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

/* One review being entered. The row's own controls used to carry inline
   sizes from the JS that builds them; they live here now. */
.vp-si-row {
    border: 1px solid #DDE6E8;
    border-radius: var(--vp-radius);
    padding: 18px 18px 8px;
    margin-bottom: 14px;
    background: #FCFDFD;
}
.vp-si-row__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 13px;
}
.vp-si-rownum {
    font-size: var(--vp-fs-base);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #A8823F;
}
.vp-si-remove {
    border: none;
    background: none;
    color: var(--vp-text-secondary);
    cursor: pointer;
    font-size: var(--vp-fs-base);
    font-weight: 600;
    padding: 2px 4px;
}
.vp-si-remove:hover { color: var(--vp-red); text-decoration: underline; }
.vp-si-row__namerating {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: end;
    margin-bottom: 14px;
}
.vp-si-stars { display: flex; gap: 4px; }
.vp-si-star { cursor: pointer; font-size: 28px; line-height: 1; color: #D8C4AB; }
.vp-si-star:hover { color: #C49A6C; }

@media (max-width: 640px) {
    .vp-import-anchor__grid,
    .vp-si-row__namerating { grid-template-columns: 1fr; }
    .vp-si-row__namerating { align-items: start; }
}

/* ── Fair-moderation checklist (report dialog) ───────────────────────
   Rendered inside the "Report a privacy or policy issue" modal by
   reportReviewIssue() in dashboard.js. The same three questions appear on
   the admin flagged-reviews screen (.vp-policy-checklist in admin.css) -
   VP_Review::moderation_checklist() is the shared source. All text on the
   type scale; the branch this came from predated it and shipped 13-15px. */
.vp-moderation-checklist {
    margin: 16px 0;
    padding: 16px 18px;
    background: #F2F7F8;
    border: 1px solid #C9DCDD;
    border-left: 4px solid var(--vp-green);
    border-radius: var(--vp-radius-sm);
    color: #26383C;
    font-size: var(--vp-fs-base);
}
.vp-moderation-checklist__title {
    display: block;
    margin-bottom: 8px;
    color: #163F48;
    font-size: var(--vp-fs-base);
    font-weight: 700;
}
.vp-moderation-checklist ol { margin: 0 0 10px; padding-left: 22px; }
.vp-moderation-checklist li { margin: 0 0 7px; padding-left: 3px; line-height: 1.5; }
.vp-moderation-checklist p {
    margin: 8px 0 0;
    color: var(--vp-text-secondary);
    font-size: var(--vp-fs-base);
    line-height: 1.5;
}
.vp-moderation-checklist .vp-moderation-checklist__note {
    padding-top: 9px;
    border-top: 1px solid #D7E4E5;
    color: #314B51;
    font-weight: 600;
}

/* Privately-received review held until its author confirms. Sits where the
   Approve button would be, so it reads as the reason there is nothing to
   press rather than as a missing control. --vp-fs-base because it is a
   sentence, not chrome. */
.vp-awaiting-confirm {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1px dashed #C49A6C;
    border-radius: 8px;
    background: #F7F0E7;
    color: #6B5636;
    font-size: var(--vp-fs-base);
    line-height: 1.35;
}

/* Modal body prose. Both were inline font-size:14px, below the 16px floor,
   in a modal that only became reachable on 2026-08-06. */
.vp-modal__intro,
.vp-modal__note {
    font-size: var(--vp-fs-base);
    line-height: 1.5;
}

/* An authorship-confirmation request that lapsed unanswered. Distinct from
   the still-waiting state so the practitioner is not told a dead request is
   outstanding forever. */
.vp-awaiting-confirm--expired {
    border-style: solid;
    border-color: #C7CDD1;
    background: #F1F3F4;
    color: #55606A;
}

/* Managed-import footnote under the Reviews page actions. Was inline 12px,
   well under the floor, on a line practitioners are meant to read and act on. */
.vp-managed-import-note {
    font-size: var(--vp-fs-base);
}