/* Guided onboarding tour chrome (see web/js/tour.js).
   Requires tokens from aquacrews-tokens.css to be loaded first. */

/* ---- Click-catcher: full-viewport, invisible, captures "click outside the spotlight" to pause the tour.
   Has a rectangular hole (clip-path) cut out over the current anchor so the real element underneath stays
   clickable. ---- */
.ac-tour-catcher {
    position: fixed;
    inset: 0;
    z-index: 2400;
    background: transparent;
    cursor: default;
}

/* ---- Spotlight ring: a small box sized to the anchor. Its own box is pointer-events:none - the huge spread
   box-shadow is purely visual (dims the page + "cuts" the hole) and never intercepts clicks. ---- */
.ac-tour-ring {
    position: fixed;
    z-index: 2401;
    border-radius: 9px;
    pointer-events: none;
    animation: acTourPulse 2.2s ease-in-out infinite;
}
@keyframes acTourPulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(13, 110, 253, .9), 0 0 0 9999px rgba(16, 24, 40, .55); }
    50%      { box-shadow: 0 0 0 7px rgba(13, 110, 253, .4), 0 0 0 9999px rgba(16, 24, 40, .55); }
}

/* ---- Popover chrome ---- */
.popover.ac-tour-popover {
    max-width: 350px;
    width: 350px;
    z-index: 2402;
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius-card);
    box-shadow: 0 14px 36px rgba(16, 24, 40, .3);
    font-family: var(--ac-font-sans);
    pointer-events: auto;
}
.ac-tour-popover .popover-header.ac-tour-popover-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 15px;
    background: var(--ac-surface-alt);
    border-bottom: 1px solid var(--ac-hairline);
    border-radius: calc(var(--ac-radius-card) - 1px) calc(var(--ac-radius-card) - 1px) 0 0;
    margin: 0;
    font-size: 14px;
}
.ac-tour-step-pill {
    flex: none;
    white-space: nowrap;
    font-size: 10px;
    font-weight: var(--ac-fw-bold);
    letter-spacing: .05em;
    color: var(--ac-primary-strong);
    background: var(--ac-primary-tint);
    border: 1px solid var(--ac-primary-border);
    border-radius: var(--ac-radius-sm);
    padding: 4px 6px;
}
.ac-tour-title {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: var(--ac-fw-semibold);
    color: var(--ac-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ac-tour-close {
    flex: none;
    background: none;
    border: none;
    font-size: 18px;
    line-height: 1;
    color: var(--ac-text-subtle);
    cursor: pointer;
    padding: 0;
}
.ac-tour-close:hover { color: var(--ac-text-secondary); }

.ac-tour-popover .popover-body.ac-tour-popover-body {
    padding: 0;
}
.ac-tour-body {
    padding: 13px 15px;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ac-text-secondary);
}
.ac-tour-note {
    margin: 0 15px 12px;
    padding: 7px 9px;
    border-radius: var(--ac-radius-pill);
    background: var(--ac-status-waitlist-bg);
    color: var(--ac-status-waitlist-fg);
    font-size: 12px;
}
.ac-tour-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 15px;
    border-top: 1px solid var(--ac-hairline);
}
.ac-tour-skip {
    font-size: 12px;
    color: var(--ac-text-muted);
    text-decoration: underline;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
.ac-tour-nav-cluster { display: flex; gap: 8px; flex: none; }
.ac-tour-btn-back {
    background: #fff;
    border: 1px solid var(--ac-border-input);
    color: var(--ac-text-secondary);
    font-size: 13px;
    font-weight: var(--ac-fw-semibold);
    border-radius: var(--ac-radius-btn);
    padding: 8px 13px;
    cursor: pointer;
}
.ac-tour-btn-back:disabled { color: var(--ac-text-subtle); cursor: default; }
.ac-tour-btn-next {
    background: var(--ac-primary);
    border: none;
    color: #fff;
    font-size: 13px;
    font-weight: var(--ac-fw-semibold);
    border-radius: var(--ac-radius-btn);
    padding: 8px 14px;
    white-space: nowrap;
    cursor: pointer;
}
.ac-tour-btn-next:hover { background: var(--ac-primary-hover); }

/* ---- Resume banner ---- */
.ac-tour-resume-banner {
    position: sticky;
    top: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--ac-primary-tint);
    border-bottom: 1px solid var(--ac-primary-tint-hover);
    border-bottom-color: #cfe2ff;
    color: var(--ac-primary-strong);
    font-size: 13px;
    padding: 10px 18px;
}
.ac-tour-resume-progress { color: #6c9bd8; font-weight: var(--ac-fw-medium); margin-left: 8px; }
.ac-tour-resume-actions { display: flex; align-items: center; gap: 14px; flex: none; }
.ac-tour-resume-notnow {
    background: none; border: none; padding: 0; cursor: pointer;
    font-size: 12px; color: var(--ac-text-muted);
}
.ac-tour-resume-go {
    background: var(--ac-primary); color: #fff; border: none; cursor: pointer;
    font-size: 12px; font-weight: var(--ac-fw-semibold);
    border-radius: var(--ac-radius-pill); padding: 6px 12px;
}

/* ---- Offer card (dashboard, after a tour completes) ---- */
.ac-tour-offer-card {
    background: #fff;
    border: 1px solid var(--ac-primary-border);
    border-radius: var(--ac-radius-card);
    padding: 14px 18px;
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}
.ac-tour-offer-title { font-weight: var(--ac-fw-semibold); font-size: 14px; color: var(--ac-text); }
.ac-tour-offer-body { font-size: 12px; color: var(--ac-text-muted); margin-top: 3px; }
.ac-tour-offer-actions { display: flex; align-items: center; gap: 14px; flex: none; }
.ac-tour-offer-cta {
    background: var(--ac-primary); color: #fff; border: none; cursor: pointer;
    font-size: 13px; font-weight: var(--ac-fw-semibold);
    border-radius: var(--ac-radius-btn); padding: 8px 14px; white-space: nowrap;
}
.ac-tour-offer-dismiss {
    background: none; border: none; padding: 0; cursor: pointer;
    font-size: 12px; color: var(--ac-text-muted);
}

/* ---- Help -> Take a tour picker panel ---- */
.ac-tour-picker {
    position: fixed;
    z-index: 2405;
    width: 330px;
    background: #fff;
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius-card);
    box-shadow: 0 12px 32px rgba(16, 24, 40, .22);
    overflow: hidden;
}
.ac-tour-picker-row {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-bottom: 1px solid var(--ac-hairline-soft);
    padding: 12px 16px;
    cursor: pointer;
}
.ac-tour-picker-row:last-child { border-bottom: none; }
.ac-tour-picker-row:hover { background: var(--ac-surface-alt); }
.ac-tour-picker-name { font-size: 14px; font-weight: var(--ac-fw-semibold); color: var(--ac-primary-strong); }
.ac-tour-picker-meta { font-size: 12px; color: var(--ac-text-muted); margin-top: 2px; }
.ac-tour-picker-row.disabled { cursor: not-allowed; }
.ac-tour-picker-row.disabled:hover { background: none; }
.ac-tour-picker-row.disabled .ac-tour-picker-name { color: var(--ac-text-muted); }
.ac-tour-picker-note { font-size: 12px; font-style: italic; color: var(--ac-text-subtle); margin-top: 2px; }

/* ---- Available-meets empty-state sample card (views/site/_allMeets.php) ---- */
.ac-tour-sample-card { border: 1px dashed var(--ac-primary-border) !important; }
.ac-tour-sample-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: var(--ac-fw-bold);
    color: var(--ac-status-waitlist-fg);
    background: var(--ac-status-waitlist-bg);
    border-radius: var(--ac-radius-sm);
    padding: 4px 6px;
    margin-left: 6px;
    vertical-align: middle;
}
.ac-tour-sample-inert { pointer-events: none; }

/* ---- Meet Planner tour sandbox (client-side-only fixture, injected by tour.js) ---- */
.ac-tour-sandbox-banner {
    position: sticky;
    top: 0;
    z-index: 1040;
    background: var(--ac-status-waitlist-bg);
    border-bottom: 1px solid #ffe69c;
    color: var(--ac-status-waitlist-fg);
    font-size: 13px;
    padding: 10px 16px;
}
.ac-tour-sandbox-banner strong { font-weight: var(--ac-fw-semibold); }
.ac-tour-sandbox {
    background: var(--ac-surface);
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius-card);
    padding: 18px;
    margin: 14px auto;
    max-width: 820px;
    font-family: var(--ac-font-sans);
}
.ac-tour-sandbox-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.ac-tour-sandbox-toggle-row { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: var(--ac-fw-semibold); color: var(--ac-text); }
.ac-tour-sandbox-btn {
    background: #fff; border: 1px solid var(--ac-border-input); color: var(--ac-text-secondary);
    font-size: 13px; font-weight: var(--ac-fw-semibold); border-radius: var(--ac-radius-btn); padding: 8px 13px; cursor: pointer;
}
.ac-tour-sandbox-btn.ac-tour-sandbox-btn-primary { background: var(--ac-primary); border-color: var(--ac-primary); color: #fff; }
.ac-tour-sandbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.ac-tour-sandbox-cell {
    display: flex; align-items: center; gap: 8px;
    border-radius: var(--ac-radius-md); padding: 8px 10px; font-size: 12px; cursor: pointer;
    border: 1px solid var(--ac-border); background: #fff;
}
.ac-tour-sandbox-cell.filled { background: #f6fbf8; border-color: #badbcc; }
.ac-tour-sandbox-cell.selected { outline: 2px solid var(--ac-primary); outline-offset: -1px; }
.ac-tour-sandbox-disc {
    flex: none; width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: var(--ac-fw-bold);
    background: #d1e7dd; color: #0f5132;
}
.ac-tour-sandbox-cell:not(.filled) .ac-tour-sandbox-disc { background: #f1f3f5; color: var(--ac-text-subtle); }
.ac-tour-sandbox-cell-label { color: var(--ac-text-label); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; display: block; }
.ac-tour-sandbox-cell-name { color: var(--ac-text); font-size: 13px; font-weight: var(--ac-fw-medium); }
.ac-tour-sandbox-cell:not(.filled) .ac-tour-sandbox-cell-name { color: var(--ac-text-subtle); }
.ac-tour-sandbox-available { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--ac-text-secondary); }
.ac-tour-sandbox-available-chip { border: 1px solid var(--ac-border); border-radius: var(--ac-radius-chip); padding: 4px 10px; }