/* WP Survey Pro integration for the Peoria Parks Survey Theme. */
.ppd-wsp-page .wsp-page-outer,
.ppd-wsp-page .wspm,
.ppd-wsp-page .wsp-survey-wrap,
.ppd-wsp-page .wsp-listing-wrap,
.ppd-wsp-page .wsp-complete-wrap,
.ppd-wsp-page .wsp-closed-wrap {
    font-family: var(--ppdst-font);
    color: var(--ppdst-text);
}

.ppd-wsp-page .wsp-page-outer {
    position: relative;
    isolation: isolate;
    min-height: calc(100vh - 76px);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding: clamp(18px, 4vw, 56px);
    background: linear-gradient(180deg, color-mix(in srgb, var(--ppdst-background) 94%, white), var(--ppdst-background));
}

.ppd-wsp-page .wsp-survey-wrap,
.ppd-wsp-page .wsp-listing-wrap,
.ppd-wsp-page .wsp-complete-wrap,
.ppd-wsp-page .wsp-closed-wrap {
    width: min(calc(100% - 32px), var(--ppdst-max-width));
    max-width: var(--ppdst-max-width);
    margin: 0 auto;
}

.ppd-wsp-page .wsp-survey-wrap { display: grid; gap: clamp(16px, 3vw, 28px); }

.ppd-wsp-page .wsp-survey-header,
.ppd-wsp-page .wsp-question-block,
.ppd-wsp-page .wsp-listing-card,
.ppd-wsp-page .wsp-complete-card,
.ppd-wsp-page .wsp-closed-card,
.ppd-wsp-page .wspm__panel,
.ppd-wsp-page .wspm__survey-card,
.ppd-wsp-page .wspm__chart-card,
.ppd-wsp-page .wspm__stat-card {
    border-color: var(--ppdst-border) !important;
    border-radius: var(--ppdst-radius) !important;
    background: color-mix(in srgb, var(--ppdst-surface) 96%, white) !important;
    box-shadow: var(--ppdst-shadow) !important;
}

.ppd-wsp-page .wsp-survey-header {
    position: relative;
    overflow: hidden;
    padding: clamp(26px, 5vw, 54px) !important;
    border-top: 4px solid var(--ppdst-secondary) !important;
}
.ppd-wsp-page .wsp-survey-header::after,
.ppd-wsp-page .wsp-complete-card::after,
.ppd-wsp-page .wsp-closed-card::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 4px;
    border-radius: 0;
    background: var(--ppdst-accent);
    pointer-events: none;
}
.ppd-wsp-page .wsp-survey-title,
.ppd-wsp-page .wsp-complete-heading,
.ppd-wsp-page .wsp-closed-heading,
.ppd-wsp-page .wspm__view-header h1 {
    color: var(--ppdst-text) !important;
    letter-spacing: -.015em;
}
.ppd-wsp-page .wsp-survey-title {
    font-size: clamp(1.9rem, 4vw, 3.25rem) !important;
    line-height: .95 !important;
}
.ppd-wsp-page .wsp-survey-description,
.ppd-wsp-page .wsp-complete-message,
.ppd-wsp-page .wsp-closed-message {
    font-size: clamp(1rem, 1.8vw, 1.2rem) !important;
    color: var(--ppdst-muted) !important;
}
.ppd-wsp-page .wsp-question-block { padding: clamp(20px, 4vw, 34px) !important; }
.ppd-wsp-page .wsp-question-block:focus-within {
    border-color: var(--ppdst-primary) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--ppdst-primary) 16%, transparent), var(--ppdst-shadow) !important;
}
.ppd-wsp-page .wsp-progress-bar {
    background: color-mix(in srgb, var(--ppdst-border) 72%, white) !important;
    height: 12px;
    border-radius: 4px;
}
.ppd-wsp-page .wsp-progress-fill {
    background: linear-gradient(90deg, var(--ppdst-secondary), var(--ppdst-primary)) !important;
    border-radius: 4px;
}
.ppd-wsp-page .wsp-btn,
.ppd-wsp-page .wspm__btn,
.ppd-wsp-page .wsp-front-admin-builder .button-primary,
.ppd-wsp-page .wsp-front-admin-builder button.button-primary {
    border-radius: var(--ppdst-radius) !important;
    min-height: 44px;
    background: var(--ppdst-primary) !important;
    color: #fff !important;
    border: 0 !important;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--ppdst-primary) 24%, transparent) !important;
}
.ppd-wsp-page .wsp-btn:hover,
.ppd-wsp-page .wspm__btn:hover,
.ppd-wsp-page .wsp-front-admin-builder .button-primary:hover,
.ppd-wsp-page .wsp-front-admin-builder button.button-primary:hover {
    background: var(--ppdst-primary-hover) !important;
    
}
.ppd-wsp-page .wsp-btn-ghost,
.ppd-wsp-page .wsp-btn-prev,
.ppd-wsp-page .wspm__btn--ghost,
.ppd-wsp-page .wsp-front-admin-builder .button:not(.button-primary) {
    background: var(--ppdst-surface) !important;
    color: var(--ppdst-text) !important;
    border: 1px solid var(--ppdst-border) !important;
    box-shadow: none !important;
}
.ppd-wsp-page input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.ppd-wsp-page select,
.ppd-wsp-page textarea,
.ppd-wsp-page .wsp-text-input,
.ppd-wsp-page .wsp-textarea,
.ppd-wsp-page .wsp-select {
    border-radius: var(--ppdst-radius) !important;
    border-color: var(--ppdst-border) !important;
    background: #fff !important;
}
.ppd-wsp-page .wsp-option-label,
.ppd-wsp-page .wsp-likert-option,
.ppd-wsp-page .wsp-file-zone { border-radius: var(--ppdst-radius) !important; }
.ppd-wsp-page .wsp-option-label:hover,
.ppd-wsp-page .wsp-likert-option:hover,
.ppd-wsp-page .wsp-file-zone:hover { background: color-mix(in srgb, var(--ppdst-secondary) 10%, white) !important; }

.ppd-wsp-page .wspm {
    width: min(calc(100vw - clamp(24px, 5vw, 72px)), var(--ppdst-max-width));
    min-height: min(980px, calc(100vh - 120px));
    margin: 0 auto;
    border: 0 !important;
    border-radius: var(--ppdst-radius) !important;
    box-shadow: 0 14px 36px rgba(15, 52, 67, .14) !important;
    overflow: hidden;
}
.ppd-wsp-page .wspm__sidebar {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--ppdst-sidebar) 94%, black), var(--ppdst-sidebar)),
        var(--ppdst-sidebar) !important;
    color: var(--ppdst-sidebar-text) !important;
}
.ppd-wsp-page .wspm__logo-text,
.ppd-wsp-page .wspm__nav-item:hover,
.ppd-wsp-page .wspm__nav-item.active { color: #fff !important; }
.ppd-wsp-page .wspm__nav-item {
    color: color-mix(in srgb, var(--ppdst-sidebar-text) 82%, transparent) !important;
    border-left-width: 5px;
}
.ppd-wsp-page .wspm__nav-item.active {
    background: color-mix(in srgb, var(--ppdst-secondary) 24%, transparent) !important;
    border-left-color: var(--ppdst-secondary) !important;
}
.ppd-wsp-page .wspm__main {
    background: linear-gradient(180deg, color-mix(in srgb, var(--ppdst-background) 86%, white), var(--ppdst-background)) !important;
    padding: clamp(18px, 3vw, 36px) !important;
}
.ppd-wsp-page .wspm__stat-active { border-top-color: var(--ppdst-secondary) !important; }
.ppd-wsp-page .wspm__table th { background: color-mix(in srgb, var(--ppdst-background) 84%, white) !important; }
.ppd-wsp-page .wspm__drawer { z-index: 999999; }
.ppd-wsp-page .wspm__drawer-panel {
    width: min(560px, 96vw);
    border-radius: var(--ppdst-radius) 0 0 var(--ppdst-radius);
}

@media (max-width: 900px) {
    .ppd-wsp-page .wspm {
        width: 100%;
        min-height: calc(100vh - 84px);
        border-radius: 0 !important;
    }
    .ppd-wsp-page .wspm__drawer-panel {
        width: 100vw;
        border-radius: 0;
    }
}
