/*
 * Video Call — one stylesheet for both sides of the visit.
 *
 * It has to survive two very different hosts: wp-admin (no Bootstrap) and the
 * kennel's public page (Bootstrap 5). So everything here is self-contained,
 * prefixed .ppv, and inherits only the accent colour the kennel picked.
 */

/*
 * THE palette, on every surface this stylesheet touches.
 *
 * These used to live on .ppv alone, which meant the booking page and the
 * meetings list got no --ppv-line and drew `border: 1px solid` with nothing
 * after it — so the form fields were white boxes on a white card, invisible.
 * Any new top-level block belongs in this list.
 */
.ppv,
.ppv-public,
.ppv-wrap,
.ppv-invite {
    --ppv-accent: #0d6efd;
    --ppv-ink: #1d2327;
    --ppv-muted: #646970;
    --ppv-line: #dcdcde;
    --ppv-ok: #00844a;
    --ppv-bad: #b32d2e;
    --ppv-field: #fcfcfd;
    --ppv-fieldline: #c9ccd1;
}

.ppv {
    max-width: 900px;
    margin: 16px 0 32px;
    color: var(--ppv-ink);
    font-size: 14px;
    line-height: 1.5;
}

.ppv * { box-sizing: border-box; }

.ppv-card {
    background: #fff;
    border: 1px solid var(--ppv-line);
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.ppv-h {
    margin: 0 0 4px;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
}

.ppv-sub { margin: 0 0 16px; color: var(--ppv-muted); }

/* ── the check ────────────────────────────────────────────────────────── */

.ppv-checkgrid {
    display: grid;
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.ppv-preview {
    position: relative;
    aspect-ratio: 4 / 3;
    background: #111;
    border-radius: 8px;
    overflow: hidden;
}

.ppv-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1); /* a mirror, the way people expect to see themselves */
    display: block;
}

.ppv-preview-empty {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #8c8f94;
}

.ppv-preview-empty .bi { font-size: 28px; }
.ppv-preview.is-live .ppv-preview-empty { display: none; }

.ppv-checks { list-style: none; margin: 0; padding: 0; }

.ppv-checks li {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 8px;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px solid #f0f0f1;
    color: var(--ppv-muted);
}

.ppv-checks li:last-child { border-bottom: 0; }
.ppv-checks li .bi { color: #c3c4c7; font-size: 15px; }
.ppv-checks li.is-ok { color: var(--ppv-ink); }
.ppv-checks li.is-ok .bi { color: var(--ppv-ok); }
.ppv-checks li.is-bad { color: var(--ppv-bad); }
.ppv-checks li.is-bad .bi { color: var(--ppv-bad); }
.ppv-checks li > .ppv-level,
.ppv-checks li > .ppv-link { grid-column: 2; justify-self: start; text-align: left; }

.ppv-level {
    height: 6px;
    width: 140px;
    margin-top: 5px;
    background: #f0f0f1;
    border-radius: 3px;
    overflow: hidden;
}

.ppv-level span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--ppv-ok);
    transition: width .08s linear;
}

.ppv-link {
    background: none;
    border: 0;
    padding: 0;
    margin-top: 4px;
    color: var(--ppv-accent);
    text-decoration: underline;
    cursor: pointer;
    font-size: 13px;
}

.ppv-pickers {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #f0f0f1;
}

.ppv-pickers label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: var(--ppv-muted);
    min-width: 200px;
    flex: 1;
}

.ppv-pickers select {
    max-width: 100%;
    padding: 5px 6px;
    border: 1px solid var(--ppv-line);
    border-radius: 5px;
    background: #fff;
    color: var(--ppv-ink);
    font-size: 13px;
}

.ppv-note {
    margin: 14px 0 0;
    padding: 10px 12px;
    border-left: 3px solid var(--ppv-bad);
    background: #fcf0f1;
    color: #8a2424;
    border-radius: 0 6px 6px 0;
}

/* ── buttons ──────────────────────────────────────────────────────────── */

.ppv-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.ppv-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border: 1px solid var(--ppv-line);
    border-radius: 7px;
    background: #fff;
    color: var(--ppv-ink);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
}

.ppv-btn:hover { background: #f6f7f7; }
.ppv-btn:disabled { opacity: .5; cursor: not-allowed; }

.ppv-btn-main,
.ppv-btn-go {
    background: var(--ppv-accent);
    border-color: var(--ppv-accent);
    color: #fff;
}

.ppv-btn-main:hover,
.ppv-btn-go:hover { filter: brightness(.92); background: var(--ppv-accent); }
.ppv-btn-main:disabled:hover,
.ppv-btn-go:disabled:hover { filter: none; }

.ppv-btn-end {
    background: var(--ppv-bad);
    border-color: var(--ppv-bad);
    color: #fff;
}

.ppv-btn-end:hover { filter: brightness(.92); background: var(--ppv-bad); }

.ppv-btn-icon span { font-weight: 400; }
.ppv-btn-icon.is-off { background: #fcf0f1; border-color: #f0c8c9; color: var(--ppv-bad); }

/* ── the call ─────────────────────────────────────────────────────────── */

.ppv-stage { padding: 14px; }

.ppv-videos {
    position: relative;
    max-height: 55vh;
    background: #111;
    border-radius: 8px;
    overflow: hidden;
}

/* Tall enough to see a puppy, short enough that Mute and Close stay on
   screen on a laptop — a control you have to scroll to find is no control. */
.ppv-remote { aspect-ratio: 16 / 9; max-height: 55vh; }

.ppv-remote video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ppv-self {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 22%;
    min-width: 110px;
    max-width: 200px;
    aspect-ratio: 4 / 3;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, .85);
    background: #000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}

.ppv-self video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1);
    display: block;
}

.ppv-waiting {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    text-align: center;
    color: #e6e6e6;
    background: #111;
}

.ppv-waiting p { margin: 0; }
.ppv-waiting-sub { font-size: 13px; color: #a7aaad; }
.ppv-waiting code { color: #fff; background: rgba(255, 255, 255, .12); padding: 2px 6px; border-radius: 4px; }
.ppv-videos.is-connected .ppv-waiting { display: none; }

.ppv-spinner {
    width: 26px;
    height: 26px;
    border: 3px solid rgba(255, 255, 255, .25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: ppv-spin 1s linear infinite;
}

@keyframes ppv-spin { to { transform: rotate(360deg); } }

.ppv-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.ppv-state { color: var(--ppv-muted); font-size: 13px; margin-left: auto; }
.ppv-fallback { margin: 10px 0 0; color: var(--ppv-muted); font-size: 13px; }
.ppv-fallback a { color: var(--ppv-accent); }

/* ── after ────────────────────────────────────────────────────────────── */

.ppv-done { text-align: center; padding: 34px 20px; }
.ppv-done .bi { font-size: 34px; color: var(--ppv-ok); }
.ppv-done .ppv-btn { margin-top: 10px; }

/* ── the kennel's screen ──────────────────────────────────────────────── */

/* The theme's dashboard CSS hides every .wrap h1 in wp-admin; this one is
   the screen's real heading, so it says so out loud. */
.ppv-wrap .ppv-title {
    display: flex !important;
    align-items: center;
    gap: 8px;
    font-size: 23px;
    font-weight: 400;
    margin: 0 0 6px;
    padding: 9px 0 4px;
}
.ppv-wrap .ppv-lede { max-width: 720px; color: #646970; font-size: 14px; }

.ppv-linkbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    max-width: 900px;
    margin: 14px 0 8px;
}

.ppv-linkbar label { font-weight: 600; }

.ppv-linkbar input {
    flex: 1;
    min-width: 240px;
    padding: 6px 10px;
    border: 1px solid #dcdcde;
    border-radius: 6px;
    background: #f6f7f7;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
}

.ppv-hint {
    max-width: 900px;
    color: #646970;
    font-size: 13px;
    margin: 0 0 6px;
}

.ppv-tech {
    max-width: 900px;
    margin-top: 8px;
    padding: 10px 14px;
    border: 1px solid #dcdcde;
    border-radius: 8px;
    background: #f6f7f7;
    color: #646970;
    font-size: 13px;
}

.ppv-tech summary { cursor: pointer; font-weight: 600; color: #1d2327; }
.ppv-tech code { word-break: break-all; }

/* ── the customer's page ──────────────────────────────────────────────── */

.ppv-public { max-width: 900px; margin: 0 auto; }
.ppv-public .ppv { margin-top: 0; }

.ppv-closed {
    text-align: center;
    padding: 40px 24px;
}

.ppv-closed .ppv-closed-icon {
    font-size: 40px;
    color: var(--ppv-accent, #0d6efd);
    line-height: 1;
}

.ppv-closed h2 { margin: 14px 0 8px; font-size: 22px; font-weight: 600; }
.ppv-closed p { margin: 0 auto 14px; max-width: 520px; color: #646970; }

.ppv-closed-ways {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 18px;
}

@media (max-width: 640px) {
    .ppv-checkgrid { grid-template-columns: 1fr; }
    .ppv-preview { max-width: 320px; }
    .ppv-remote { aspect-ratio: 3 / 4; }
    .ppv-self { width: 30%; }
    .ppv-btn { flex: 1 1 auto; justify-content: center; }
    .ppv-state { margin-left: 0; width: 100%; }
}

/* dark mode on the public side: the kennel's pages honour data-bs-theme */
[data-bs-theme="dark"] .ppv,
[data-bs-theme="dark"] .ppv-public,
[data-bs-theme="dark"] .ppv-invite {
    --ppv-ink: #e9ecef;
    --ppv-muted: #adb5bd;
    --ppv-line: #495057;
    --ppv-field: #2b3035;
    /* a light border round a dark box reads as a cut-out; keep it quiet */
    --ppv-fieldline: #5c636a;
}

[data-bs-theme="dark"] .ppv-card { background: #212529; }
[data-bs-theme="dark"] .ppv-btn { background: #2b3035; color: #e9ecef; }
[data-bs-theme="dark"] .ppv-btn:hover { background: #343a40; }
[data-bs-theme="dark"] .ppv-checks li { border-bottom-color: #343a40; }
[data-bs-theme="dark"] .ppv-note { background: #3a2224; color: #f3b6b8; }

/* ══ v2: scheduling, the meetings list, and the switch ═════════════════ */

/* ── the kennel's screen ──────────────────────────────────────────────── */

/* PHP stamps the kennel's own accent over the default above; these two keep
   a button from ever rendering white-on-white if it does not arrive. */
.ppv-btn-main,
.ppv-btn-go { background: var(--ppv-accent, #0d6efd); border-color: var(--ppv-accent, #0d6efd); }

.ppv-wrap .ppv-h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 600;
    color: #1d2327;
}

.ppv-panel {
    max-width: 900px;
    margin: 0 0 16px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid #dcdcde;
    border-radius: 10px;
}

.ppv-panel .ppv-sub { margin: 0 0 14px; font-size: 13px; }
.ppv-panel .ppv { margin: 0; max-width: none; }

/* the switch */
.ppv-switchbar {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 900px;
    margin: 14px 0 10px;
    padding: 14px 18px;
    border: 1px solid #dcdcde;
    border-left: 4px solid #c3c4c7;
    border-radius: 10px;
    background: #fff;
}

.ppv-switchbar.is-on { border-left-color: #00844a; }
.ppv-switchbar.is-off { background: #f6f7f7; }
.ppv-switch-words { display: flex; flex-direction: column; gap: 2px; }
.ppv-switch-words strong { font-size: 15px; color: #1d2327; }
.ppv-switch-words span { font-size: 13px; color: #646970; }
.ppv-switch-link { margin-left: auto; white-space: nowrap; }

.ppv-switch { position: relative; display: inline-flex; flex: 0 0 auto; }
.ppv-switch input { position: absolute; opacity: 0; width: 0; height: 0; }

.ppv-switch-track {
    display: block;
    width: 46px;
    height: 26px;
    border-radius: 13px;
    background: #c3c4c7;
    transition: background .15s ease;
    cursor: pointer;
}

.ppv-switch-dot {
    display: block;
    width: 20px;
    height: 20px;
    margin: 3px;
    border-radius: 50%;
    background: #fff;
    transition: transform .15s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

.ppv-switch input:checked + .ppv-switch-track { background: #00844a; }
.ppv-switch input:checked + .ppv-switch-track .ppv-switch-dot { transform: translateX(20px); }
.ppv-switch input:focus-visible + .ppv-switch-track { outline: 2px solid #2271b1; outline-offset: 2px; }

.ppv-off-note {
    max-width: 900px;
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: 8px;
    background: #f6f7f7;
    color: #646970;
    font-size: 13px;
}

/* the make-a-link form */
.ppv-form .ppv-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.ppv-form label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 200px;
    font-size: 12px;
    font-weight: 600;
    color: #1d2327;
}

.ppv-form .ppv-grow { flex: 2 1 320px; }
/* A field's caption is ONE line: the word, then its hint beside it. Without
   this the label text and the hint are two anonymous items in a flex column
   and stack, which reads as two labels for one box (owner, 2026-09-10:
   "Should be all one line"). */
.ppv-cap {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
}

.ppv-opt { font-weight: 400; color: #8c8f94; }

.ppv-form input,
.ppv-form select,
.ppv-form textarea {
    padding: 8px 10px;
    border: 1px solid var(--ppv-fieldline);
    border-radius: 6px;
    background: #fcfcfd;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .05);
    font-size: 14px;
    font-weight: 400;
    color: #1d2327;
}

.ppv-form select[multiple] { padding: 4px; }
.ppv-hint-inline { font-size: 12px; color: #646970; align-self: center; }

/* the meetings list */
.ppv-table { width: 100%; border-collapse: collapse; }

.ppv-table td {
    padding: 11px 8px;
    border-bottom: 1px solid #f0f0f1;
    vertical-align: top;
    font-size: 13px;
}

.ppv-tr.is-done { opacity: .6; }
.ppv-when { width: 190px; }
.ppv-when strong { display: block; color: #1d2327; }
.ppv-who strong { display: block; color: #1d2327; }
.ppv-dim { display: block; color: #646970; font-size: 12px; }
.ppv-acts { text-align: right; white-space: nowrap; }
.ppv-mini { padding: 5px 9px; font-size: 12px; gap: 5px; }
.ppv-quiet { color: #b32d2e; border-color: #f0c8c9; }
.ppv-empty { color: #646970; font-style: italic; margin: 6px 0; }

.ppv-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 3px 4px 0 0;
    padding: 1px 7px;
    border-radius: 10px;
    background: #eef6f1;
    color: #00844a;
    font-size: 11px;
}

.ppv-chip-done { background: #f0f0f1; color: #646970; }
.ppv-past { margin-top: 14px; }
.ppv-past summary { cursor: pointer; color: #646970; font-size: 13px; }

/* the little message that says what just happened */
.ppv-toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    z-index: 100050;
    transform: translate(-50%, 20px);
    padding: 11px 18px;
    border-radius: 8px;
    background: #1d2327;
    color: #fff;
    font-size: 14px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    max-width: 90vw;
}

.ppv-toast.is-up { opacity: 1; transform: translate(-50%, 0); }
.ppv-toast.is-bad { background: #b32d2e; }

/* ── the booking page ─────────────────────────────────────────────────── */

.ppv-book { padding: 26px; }
.ppv-step { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--ppv-line); }
.ppv-step:first-of-type { margin-top: 18px; }

.ppv-step-h {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: 600;
}

.ppv-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 50%;
    background: var(--ppv-accent);
    color: #fff;
    font-size: 14px;
}

.ppv-step-sub { margin: 0 0 14px 36px; color: var(--ppv-muted); font-size: 13px; }

/* the puppies */
.ppv-pups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}

.ppv-pup {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: 1px solid var(--ppv-line);
    border-radius: 9px;
    background: #fff;
}

.ppv-pup-pick { cursor: pointer; transition: border-color .12s ease, box-shadow .12s ease; }
.ppv-pup-pick:hover { border-color: var(--ppv-accent); }
.ppv-pup-pick input { position: absolute; opacity: 0; width: 0; height: 0; }

.ppv-pup.is-on {
    border-color: var(--ppv-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--ppv-accent) 22%, transparent);
}

.ppv-pup img {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    object-fit: cover;
    border-radius: 7px;
    background: #f0f0f1;
}

.ppv-pup-nopic {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: #f0f0f1;
    color: #8c8f94;
}

.ppv-pup-words { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ppv-pup-words strong { font-size: 14px; }
.ppv-pup-words span { font-size: 12px; color: var(--ppv-muted); }
.ppv-pup-words em { font-size: 11px; font-style: normal; color: var(--ppv-accent); }

.ppv-pup-tick {
    margin-left: auto;
    color: var(--ppv-accent);
    opacity: 0;
    transition: opacity .12s ease;
}

.ppv-pup.is-on .ppv-pup-tick { opacity: 1; }
.ppv-pups-read .ppv-pup { background: transparent; }

/* days and times */
.ppv-days {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 6px;
    margin-left: 36px;
}

.ppv-day {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-width: 92px;
    padding: 9px 12px;
    border: 1px solid var(--ppv-line);
    border-radius: 9px;
    background: #fff;
    color: var(--ppv-ink);
    cursor: pointer;
    font-size: 13px;
}

.ppv-day strong { font-size: 13px; }
.ppv-day span { font-size: 12px; color: var(--ppv-muted); }
.ppv-day.is-on { border-color: var(--ppv-accent); background: var(--ppv-accent); color: #fff; }
.ppv-day.is-on span { color: rgba(255, 255, 255, .85); }

.ppv-times {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 0 36px;
}

.ppv-time {
    padding: 8px 14px;
    border: 1px solid var(--ppv-line);
    border-radius: 7px;
    background: #fff;
    color: var(--ppv-ink);
    font-size: 14px;
    cursor: pointer;
}

.ppv-time:hover { border-color: var(--ppv-accent); }
.ppv-time.is-on { background: var(--ppv-accent); border-color: var(--ppv-accent); color: #fff; }

.ppv-loading { display: flex; align-items: center; gap: 8px; color: var(--ppv-muted); }
.ppv-spinner-dark { border-color: rgba(0, 0, 0, .15); border-top-color: var(--ppv-accent); width: 18px; height: 18px; }

/* who you are */
.ppv-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-left: 36px;
    /* only some labels carry a hint line, so align on the boxes, not the tops */
    align-items: end;
}

.ppv-fields label,
.ppv-full {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
}

.ppv-full { margin: 12px 0 0 36px; }

.ppv-fields input,
.ppv-full textarea {
    padding: 10px 12px;
    border: 1px solid var(--ppv-fieldline);
    border-radius: 7px;
    background: var(--ppv-field);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .05);
    font-size: 15px;
    font-weight: 400;
    color: var(--ppv-ink);
    font-family: inherit;
    width: 100%;
}

.ppv-fields input:focus,
.ppv-full textarea:focus,
.ppv-form input:focus,
.ppv-form select:focus,
.ppv-form textarea:focus {
    outline: none;
    border-color: var(--ppv-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ppv-accent) 18%, transparent);
    background: #fff;
}

.ppv-fields input::placeholder,
.ppv-full textarea::placeholder { color: #9096a0; }

.ppv-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ppv-btn-big { padding: 12px 22px; font-size: 15px; }
.ppv-book .ppv-actions { margin-left: 36px; }

/* the greeting on a customer's own call page */
.ppv-hello { padding: 20px 22px; }
.ppv-hello .ppv-sub { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; }

/* booked */
.ppv-booked { text-align: center; padding: 36px 24px; }
.ppv-booked .bi-check-circle { font-size: 38px; color: var(--ppv-ok); }
.ppv-booked .ppv-h { margin-top: 12px; }
.ppv-booked .ppv-btn { margin: 12px 0 8px; }
.ppv-booked .ppv-dim { color: var(--ppv-muted); font-size: 13px; }

/* the customer waiting for the kennel to open up */
.ppv-wait-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 16px 0 0;
    padding: 11px 14px;
    border-radius: 8px;
    background: #f6f7f7;
    color: var(--ppv-muted);
    font-size: 13px;
}

[data-bs-theme="dark"] .ppv-wait-note { background: #2b3035; }
[data-bs-theme="dark"] .ppv-pup { background: #212529; }
[data-bs-theme="dark"] .ppv-day,
[data-bs-theme="dark"] .ppv-time,
[data-bs-theme="dark"] .ppv-fields input,
[data-bs-theme="dark"] .ppv-full textarea { background: #2b3035; color: #e9ecef; }

@media (max-width: 640px) {
    .ppv-step-sub,
    .ppv-days,
    .ppv-times,
    .ppv-fields,
    .ppv-full,
    .ppv-book .ppv-actions { margin-left: 0; }
    .ppv-acts { text-align: left; white-space: normal; }
    .ppv-when { width: auto; }
    .ppv-table td { display: block; border-bottom: 0; padding: 4px 0; }
    .ppv-tr { display: block; border-bottom: 1px solid #f0f0f1; padding: 10px 0; }
}

/* ── the invitation on a puppy's own page ─────────────────────────────── */

.ppv-invite {
    --ppv-accent: #0d6efd;
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 960px;
    margin: 22px auto;
    padding: 16px 20px;
    border: 1px solid #dcdcde;
    border-left: 4px solid var(--ppv-accent);
    border-radius: 10px;
    background: #fff;
    color: #1d2327;
}

.ppv-invite-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--ppv-accent) 12%, #fff);
    color: var(--ppv-accent);
    font-size: 21px;
}

.ppv-invite-words { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ppv-invite-words strong { font-size: 16px; line-height: 1.3; }
.ppv-invite-words span { font-size: 13px; color: #646970; }
.ppv-invite .ppv-btn { margin-left: auto; flex: 0 0 auto; white-space: nowrap; }

[data-bs-theme="dark"] .ppv-invite { background: #212529; border-color: #495057; color: #e9ecef; }
[data-bs-theme="dark"] .ppv-invite-words span { color: #adb5bd; }

@media (max-width: 640px) {
    .ppv-invite { flex-wrap: wrap; }
    .ppv-invite .ppv-btn { margin-left: 0; width: 100%; justify-content: center; }
}

/* ── the Schedule a Video Call modal ──────────────────────────────────── */

.ppv-newbar {
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 900px;
    margin: 0 0 16px;
    flex-wrap: wrap;
}

/* The house modal shape (admin/quick-edit-modal.php), kept prefixed so this
   module stays self-contained. */
.ppv-modal {
    position: fixed;
    inset: 0;
    z-index: 100001;
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 5vh 18px 18px;
}

.ppv-modal[hidden] { display: none; }
/* hidden means hidden — children carry display:flex, which outranks the UA
   rule for the [hidden] attribute */
.ppv-modal [hidden] { display: none !important; }

.ppv-modal-box {
    background: #fff;
    border-radius: 10px;
    width: 720px;
    max-width: 96vw;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .3);
    overflow: hidden;
}

.ppv-modal-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    border-bottom: 1px solid #dcdcde;
    background: #f6f7f7;
}

.ppv-modal-head h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1d2327;
}

.ppv-modal-x {
    margin-left: auto;
    padding: 0 4px;
    border: 0;
    background: none;
    color: #646970;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.ppv-modal-x:hover { color: #1d2327; }

.ppv-modal-body {
    padding: 18px;
    overflow-y: auto;
}

.ppv-modal-body .ppv-sub { margin-top: 0; }

.ppv-modal-foot {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 13px 18px;
    border-top: 1px solid #dcdcde;
    background: #f6f7f7;
}

@media (max-width: 640px) {
    .ppv-modal { padding: 0; align-items: stretch; }
    .ppv-modal-box { width: 100%; max-width: none; max-height: 100vh; border-radius: 0; }
}