/*
 * Iframe demos (/gfembed/): Gravity Forms' Orbital theme, light by default (after the website concepts'
 * demos) or dark for forms with the gw-theme-dark CSS class (see GWDemos::get_iframe_demo_theme()).
 *
 * Colors for fields and buttons come from GF's Form Styles (GWDemos::get_iframe_demo_styles()), which GF turns
 * into its theme variables. This file adds the demo frame and covers perk UIs that don't use those variables.
 */

/* ---------------------------------------------------------------------------------------------------------
 * Shared
 * ------------------------------------------------------------------------------------------------------- */

.gw-iframe-demo body {
    margin: 0;
    font-family: "DM Sans", Arial, sans-serif;
    font-size: 15px;
}

.gw-iframe-demo .gform-theme {
    --gf-font-family-base: "DM Sans", Arial, sans-serif;
    --gf-field-pg-prog-bar-bg-color-blue: var(--gf-color-primary);

    /* GF's pre-Orbital name, still used by some perks (e.g. GP Limit Dates' inline calendar); GF 3 no longer sets it. */
    --gform-theme-color-primary: var(--gf-color-primary);
}

/* GF's foundation CSS hard-codes its default blue for marked (selected/today) dates. */
.gw-iframe-demo .gform-theme--foundation .gform-datepicker-calendar td.dayMarked span {
    background-color: var(--gf-color-primary);
    color: var(--gf-color-primary-contrast);
}

/*
 * A compact date picker. The iframe is narrower than GF's small-viewport breakpoint, so GF switches to its
 * touch-sized calendar (332px wide, 40px rows), whose popup hangs past short demos. Use one compact size for both.
 */
.gw-iframe-demo .gform-theme {
    --gf-ctrl-date-picker-width: 236px;
    --gf-ctrl-date-picker-width-viewport-sm: 236px;
    --gf-ctrl-date-picker-padding-x: 10px;
    --gf-ctrl-date-picker-padding-x-viewport-sm: 10px;
    --gf-ctrl-date-picker-padding-y: 12px 10px;
    --gf-ctrl-date-picker-padding-y-viewport-sm: 12px;
    --gf-ctrl-date-picker-cell-height: 26px;
    --gf-ctrl-date-picker-cell-height-viewport-sm: 26px;
    --gf-ctrl-date-picker-cell-content-width: 24px;
    --gf-ctrl-date-picker-cell-content-width-viewport-sm: 24px;
    --gf-ctrl-date-picker-cell-padding-y: 1px;
    --gf-ctrl-date-picker-cell-padding-y-viewport-sm: 1px;
    --gf-ctrl-date-picker-cell-font-size: 13px;
    --gf-ctrl-date-picker-head-cell-font-size: 11px;
    --gf-ctrl-date-picker-helptext-font-size: 11px;
}

.gw-iframe-demo .gform-theme .gform-datepicker-calendar select {
    block-size: 30px;
    min-block-size: 0;
    padding-block: 0;
    font-size: 13px;
}

/* "Press F1 for help": keep it for screen readers, but take it off the calendar. */
.gw-iframe-demo .gform-datepicker-calendar .monthMessage {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* A floating calendar needs an edge on a white card. */
.gw-theme-light .gform-theme .ginput_container_date > .gform-datepicker-calendar {
    border: 1px solid #DCE4E7;
    box-shadow: 0 0.75rem 2rem rgba(7, 28, 38, 0.14);
}

/* Form titles are internal names (e.g. "GPPA 1"); the description, when shown, is the demo's intro. */
.gw-iframe-demo .gform_title {
    display: none;
}

.gw-iframe-demo .gform_heading {
    margin-block-end: 1.75rem;
}

/* A description with its own <p> tags renders as sibling paragraphs, so style the heading, not just the description. */
.gw-iframe-demo .gform_heading {
    font-size: 15px;
    line-height: 1.55;
}

.gw-iframe-demo .gform_heading p {
    margin: 0;
}

/* Demo header (templates/gravity-forms-iframe.php): "Try the demo" and the form description, across the top of the card. */
.gw-demo-header {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    border-bottom: 1px solid;
}

.gw-demo-header__icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.5rem;
}

.gw-demo-header__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}

.gw-demo-header__description {
    margin-block-start: 0.125rem;
    font-size: 14px;
    line-height: 1.5;
}

.gw-demo-header__description p {
    margin: 0;
}

.gw-demo-header__text {
    flex: 1 1 auto;
    min-width: 0;
}

.gw-demo-header__refresh {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid;
    border-radius: 0.375rem;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* Demos are narrow, so "medium" controls (half the field by default) are too cramped. */
.gw-iframe-demo .gform-theme--foundation .gfield :is(input, select, .ginput_password).medium {
    inline-size: 100%;
}

/*
 * Demo classes. Add them in a form's or field's "CSS Class Name" setting; don't style a demo by form or
 * field ID or put <style> in an HTML field.
 *
 *   Form   gw-theme-dark           dark panel (light is the default)
 *          gw-hide-submit-button   hide the Submit button (demos that don't submit)
 *          gw-hide-save-button     hide GF's "Save and Continue Later" button (its email form would mail anyone)
 *          gw-demo-refresh         add a Refresh button to the demo header (demos about reloading, e.g. auto-save)
 *          gw-hide-footer          hide the whole form footer
 *   Field  gw-instruction          caption explaining the field above it
 *          gw-callout              boxed note; add gw-callout--success, --warning or --danger for status messages
 *          gw-pairs                lines of "Label <span>value</span>"; values align right
 */

.gw-iframe-demo .gw-pairs span {
    float: inline-end;
    margin-inline-start: 1rem;
    opacity: 0.65;
}

.gw-iframe-demo .gw-hide-submit-button .gform_button,
.gw-iframe-demo .gw-hide-save-button .gform_save_link {
    display: none !important;
}

/* Without its button the footer is empty; drop its margin so the report link's is the only gap. The second
   selector covers GF's button conditional logic, which hides the button inline. */
.gw-iframe-demo .gw-hide-submit-button .gform_footer,
.gw-iframe-demo .gform_footer:has(> .gform_button[style*="display: none"]) {
    margin-block-start: 0;
}

.gw-iframe-demo .gw-hide-footer .gform-footer {
    display: none !important;
}

.gw-iframe-demo .gw-instruction {
    margin-block-start: -0.75rem;
    padding-inline-start: 0.875rem;
    border-inline-start: 2px solid;
    font-size: 14px;
    line-height: 1.5;
}

.gw-iframe-demo .gw-instruction strong {
    font-weight: 600;
}

.gw-iframe-demo .gw-callout {
    padding: 1rem 1.25rem;
    border: 1px solid;
    border-radius: var(--gf-radius, 4px);
    font-size: 14px;
    line-height: 1.5;
}

/* Tabs between related demos (GWDemos::generate_demo_nav_markup()). */
.gw-iframe-demo #demo-nav {
    margin-block-end: 1.75rem;
}

.gw-iframe-demo .demo-nav-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.25rem;
    border: 1px solid;
    border-radius: 0.625rem;
}

.gw-iframe-demo .demo-nav-items a {
    box-sizing: border-box;
    flex: 1 1 auto;
    padding: 0.5rem 0.75rem;
    border-radius: 0.4rem;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
}

.gw-iframe-demo .demo-nav-items a.current {
    font-weight: 700;
}

/* Four or more tabs don't fit on one line; lay them out two by two rather than leaving one alone. */
.gw-iframe-demo .demo-nav-items:has(> a:nth-child(4)) a {
    flex-basis: calc(50% - 0.125rem);
}

/* A tabbed demo's description, under the tabs: tabbed demos have no header. */
.gw-iframe-demo .gw-demo-intro {
    margin: -0.75rem 0 1.5rem;
    font-size: 14px;
    line-height: 1.5;
}

.gw-iframe-demo .gw-demo-intro p {
    margin: 0;
}

/* Page steps. GP Multi-page Navigation links the steps you can jump to; give those a hover state and mark the
   current step, so it's clear which steps go somewhere. */
.gw-iframe-demo .gpmpn-step-linked > a {
    isolation: isolate;
    outline: none;
    text-decoration: none;
}

/* The pill is a pseudo-element so the link's box doesn't change: GF positions the completed check against it. */
.gw-iframe-demo .gpmpn-step-linked > a::before {
    content: "";
    position: absolute;
    inset: -4px -12px -4px -4px;
    z-index: -1;
    border-radius: 999px;
    transition: background-color 0.15s ease;
}

.gw-iframe-demo .gpmpn-step-linked > a:is(:hover, :focus-visible)::before {
    background-color: rgba(var(--gf-color-primary-rgb), 0.1);
}

.gw-iframe-demo .gpmpn-step-linked > a:focus-visible::before {
    box-shadow: 0 0 0 2px var(--gf-color-primary);
}

.gw-iframe-demo .gpmpn-step-linked > a:is(:hover, :focus-visible) .gf_step_label {
    color: var(--gf-color-primary);
}

.gw-iframe-demo .gf_step_active {
    --gf-field-pg-steps-number-bg-color-active: transparent;
    --gf-field-pg-steps-number-border-color-active: var(--gf-color-primary);
    --gf-field-pg-steps-number-color-active: var(--gf-color-primary);
}

.gw-iframe-demo .gf_step_active .gf_step_label {
    color: var(--gf-ctrl-label-color-primary);
}

/* The top margin matches GF's footer margin, which it collapses with when the submit button is hidden. */
.gw-iframe-demo p.report-issue {
    margin: 1.5rem 0 0;
    text-align: center;
}

.gw-iframe-demo p.report-issue a {
    font-size: 12px;
}

/* GP Nested Forms: entries table (GWDemos adds gpnf-disable-responsive-table) and the Tingle modal. */
.gw-iframe-demo .gpnf-nested-entries {
    width: 100%;
    border: 1px solid;
    border-radius: 0.5rem;
    border-spacing: 0;
    overflow: hidden;
}

.gw-iframe-demo .gpnf-nested-entries th {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: start;
    text-transform: uppercase;
}

.gw-iframe-demo .gpnf-nested-entries td {
    padding: 0.75rem;
    border-bottom: 1px solid;
    vertical-align: middle;
}

.gw-iframe-demo .gpnf-nested-entries tbody tr:last-child td {
    border-bottom: 0;
}

.gw-iframe-demo .gpnf-nested-entries .gpnf-no-entries td {
    padding-block: 1.25rem;
    font-size: 14px;
    text-align: center;
}

/* Tingle modals (Nested Forms, Advanced Save & Continue). GPNF makes its modal full width under 712px, which
 * the iframe always is; inset them instead. */
.gw-iframe-demo .tingle-modal .tingle-modal-box {
    width: calc(100% - 2rem);
    margin: 1rem auto;
    border: 1px solid;
    border-radius: 0.75rem;
    box-shadow: 0 1.5rem 4rem rgba(7, 28, 38, 0.35);
    overflow: hidden;
}

/* The perks' Tingle CSS sets overflow-y: scroll, which draws an empty scrollbar track wherever scrollbars show. */
.gw-iframe-demo .tingle-modal .tingle-modal-box__content {
    overflow-y: auto;
}

.gw-iframe-demo .gpnf-modal .gpnf-modal-header {
    border-bottom: 1px solid;
    background: transparent !important;
}

.gw-iframe-demo .tingle-modal .tingle-modal-box__footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    border-top: 1px solid;
}

.gw-iframe-demo .tingle-modal .tingle-modal-box__footer .tingle-btn {
    width: auto;
    margin: 0;
    padding: 0.625rem 1.25rem;
    border: 1px solid;
    border-radius: var(--gf-radius, 4px);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
}

/* Tingle's close control: a plain × over the backdrop rather than its full-width mobile title bar. */
.gw-iframe-demo .tingle-modal__close {
    top: 0.5rem;
    right: 0.5rem;
    left: auto;
    width: auto;
    height: auto;
    padding: 0.25rem;
    background: transparent;
    color: #fff;
}

.gw-iframe-demo .tingle-modal__closeLabel {
    display: none;
}

/* The modal fills the narrow iframe, which trips GPNF's mobile footer; use the regular Cancel button. */
.gw-iframe-demo .gpnf-modal .gpnf-btn-cancel {
    display: inline-block !important;
}

.gw-iframe-demo .gpnf-modal .gpnf-btn-cancel-mobile {
    display: none !important;
}

/*
 * GP Terms of Service prints its terms box size inline, but Orbital's reset overrides it (same specificity,
 * loaded later), so the full terms show and "scroll to agree" stops working. Restore it here.
 *
 * No padding: the perk's "scrolled to the end" check leaves out padding and allows only 20px, so 12px top and bottom
 * kept the checkbox disabled. Its inner .gptos_the_terms has its own 1rem margin.
 */
.gw-iframe-demo .gform-theme .gptos_terms_container {
    height: 11.25em;
    overflow-y: auto;
    margin-block-end: 0.75rem;
    padding: 0;
    border: 1px solid var(--gf-ctrl-border-color);
    border-radius: var(--gf-radius);
    background-color: var(--gf-color-in-ctrl);
    font-size: 14px;
    line-height: 1.55;
}

.gw-iframe-demo .gform-theme .gptos_the_terms > :first-child {
    margin-block-start: 0;
}

/* HTML fields that only carry a <style> render empty but still take a grid gap. (The style still applies.) */
.gw-iframe-demo .gfield--type-html:has(> style):not(:has(> :not(style))) {
    display: none;
}

/* GF's '"*" indicates required fields' legend is noise in a demo. */
.gw-iframe-demo .gform_required_legend {
    display: none;
}

/* GP Word Count's counters read as help text. */
.gw-iframe-demo .gp-word-count-label {
    display: block;
    margin-block-start: 0.375rem;
    font-size: 13px;
}

.gw-iframe-demo .wp-editor-container .gp-word-count-label {
    margin: 0;
    padding: 0.375rem 0.625rem;
}

.gw-theme-light .gp-word-count-label {
    color: #5F6F76;
}

.gw-theme-dark .gp-word-count-label {
    color: rgba(255, 255, 255, 0.6);
}

/*
 * GP Limit Dates' inline calendars are always on screen and have room, so they get a roomier size than the
 * compact popup, and a frame.
 */
.gw-iframe-demo .gform-theme .gpld-inline-datepicker {
    --gf-ctrl-date-picker-width: 320px;
    --gf-ctrl-date-picker-width-viewport-sm: 320px;
    --gf-ctrl-date-picker-cell-height: 34px;
    --gf-ctrl-date-picker-cell-height-viewport-sm: 34px;
    --gf-ctrl-date-picker-cell-content-width: 30px;
    --gf-ctrl-date-picker-cell-content-width-viewport-sm: 30px;
    --gf-ctrl-date-picker-cell-font-size: 14px;
}

.gw-theme-light .gpld-inline-datepicker .gform-datepicker-calendar {
    border: 1px solid #DCE4E7;
    border-radius: 0.5rem;
}

.gw-theme-dark .gpld-inline-datepicker .gform-datepicker-calendar {
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.5rem;
}

/*
 * GP Advanced Save & Continue: the drafts list and "resuming your draft" notice that GWDemos puts above form 131.
 * The perk leaves their look to the theme, and the container opts out of Orbital (gform-theme__disable), so these
 * rules are all the styling it gets. Drafts are chips (the current one tinted), with "Start new draft" beside
 * the heading.
 */
.gw-iframe-demo .gpasc-custom-container {
    display: grid;
    gap: 0.75rem;
    margin-block-end: 1.75rem;
    font-size: 14px;
    line-height: 1.4;
}

/* No drafts and no notice. */
.gw-iframe-demo .gpasc-custom-container:not(:has(*)) {
    display: none;
}

.gw-iframe-demo .gpasc-drafts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem 0.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid;
    border-radius: 0.5rem;
}

.gw-iframe-demo .gpasc-drafts h4 {
    flex: 1 1 auto;
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.gw-iframe-demo .gpasc-draft-links {
    display: flex;
    flex: 1 1 100%;
    flex-wrap: wrap;
    gap: 0.5rem;
    order: 1;
    margin: 0;
    padding: 0;
    list-style: none;
}

.gw-iframe-demo .gpasc-draft-link-content {
    align-items: center;
    gap: 0.125rem;
    padding: 0.25rem 0.25rem 0.25rem 0.75rem;
    border: 1px solid;
    border-radius: 999px;
}

.gw-iframe-demo .gpasc-current-draft .gpasc-draft-link-content {
    padding-inline-end: 0.75rem;
    font-weight: 600;
}

.gw-iframe-demo .gpasc-current-draft .gpasc-delete-draft-button {
    display: none;
}

.gw-iframe-demo .gpasc-draft-link a {
    text-decoration: none;
}

.gw-iframe-demo .gpasc-delete-draft-button {
    display: inline-grid;
    place-items: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    padding: 0;
    border-radius: 50%;
    color: inherit;
    opacity: 0.55;
}

.gw-iframe-demo .gpasc-delete-draft-button:hover {
    opacity: 1;
}

.gw-iframe-demo .gpasc-delete-draft-button .dashicons {
    inline-size: 16px;
    block-size: 16px;
    margin: 0;
    font-size: 16px;
}

.gw-iframe-demo .gpasc-new-draft-button {
    padding: 0.375rem 0.75rem;
    border: 1px solid var(--gf-ctrl-btn-border-color-secondary);
    border-radius: var(--gf-ctrl-btn-radius);
    background: var(--gf-ctrl-btn-bg-color-secondary);
    color: var(--gf-ctrl-btn-color-secondary);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.gw-iframe-demo .gpasc-new-draft-button:hover {
    background: var(--gf-ctrl-btn-bg-color-hover-secondary);
}

.gw-iframe-demo .gpasc-auto-load-notice {
    padding: 0.625rem 1rem;
    border: 1px solid;
    border-radius: 0.5rem;
}

.gw-iframe-demo .gpasc-auto-load-notice p {
    margin: 0;
}

.gw-theme-light .gpasc-drafts,
.gw-theme-light .gpasc-draft-link-content {
    border-color: #DCE4E7;
}

.gw-theme-light .gpasc-drafts h4 {
    color: #5F6F76;
}

.gw-theme-light .gpasc-draft-link:not(.gpasc-current-draft) .gpasc-draft-link-content:hover {
    background: #F6F8F9;
}

.gw-theme-light .gpasc-current-draft .gpasc-draft-link-content,
.gw-theme-light .gpasc-auto-load-notice {
    border-color: #BFE3D1;
    background: #E9F6F0;
    color: #00754A;
}

.gw-theme-light .gpasc-delete-draft-button:hover {
    background: #FDEDEB;
    color: #B42318;
}

.gw-theme-dark .gpasc-drafts,
.gw-theme-dark .gpasc-draft-link-content {
    border-color: rgba(255, 255, 255, 0.12);
}

.gw-theme-dark .gpasc-drafts h4 {
    color: #A3B6BE;
}

.gw-theme-dark .gpasc-draft-link:not(.gpasc-current-draft) .gpasc-draft-link-content:hover {
    background: rgba(255, 255, 255, 0.06);
}

.gw-theme-dark .gpasc-current-draft .gpasc-draft-link-content,
.gw-theme-dark .gpasc-auto-load-notice {
    border-color: rgba(0, 224, 135, 0.35);
    background: rgba(0, 224, 135, 0.1);
    color: #00E087;
}

.gw-theme-dark .gpasc-delete-draft-button:hover {
    background: rgba(255, 107, 94, 0.15);
    color: #FF8A80;
}

/* ---------------------------------------------------------------------------------------------------------
 * Light (default): a white card, after the website concepts' demos
 * ------------------------------------------------------------------------------------------------------- */

/*
 * The card is .gw-demo rather than body: a body background would spread to the whole iframe (html has none),
 * hiding the rounded corners. No color-scheme either; one that differs from the docs page makes the iframe opaque.
 */
.gw-theme-light {
    color: #071C26;
}

.gw-theme-light .gw-demo {
    padding: 2rem;
    border-radius: 0.75rem;
    background: #fff;
}

.gw-theme-light :is(.gw-demo, .tingle-modal) a {
    color: #008F59;
    text-underline-offset: 2px;
}

.gw-theme-light :is(.gw-demo, .tingle-modal) a:hover {
    color: #00754A;
}

.gw-theme-light .gform_heading {
    color: #4A5A61;
}

.gw-theme-light .gw-demo-header {
    margin: -2rem -2rem 1.75rem;
    padding: 1rem 1.5rem;
    border-color: #DCE4E7;
    border-radius: 0.75rem 0.75rem 0 0;
    background: #F6F8F9;
}

.gw-theme-light .gw-demo-header__icon {
    background: #E1F3EA;
    color: #008F59;
}

.gw-theme-light .gw-demo-header__title {
    color: #071C26;
}

.gw-theme-light .gw-demo-header__description {
    color: #5F6F76;
}

.gw-theme-light .gw-demo-intro {
    color: #5F6F76;
}

.gw-theme-light .gw-demo-header__refresh {
    border-color: #BDCCD0;
    background: #fff;
    color: #071C26;
}

.gw-theme-light .gw-demo-header__refresh:hover {
    border-color: #008F59;
    color: #008F59;
}

.gw-theme-light .gw-instruction {
    border-color: rgba(0, 143, 89, 0.45);
    color: #4A5A61;
}

.gw-theme-light .gw-instruction strong {
    color: #071C26;
}

.gw-theme-light .gw-callout {
    border-color: #DCE4E7;
    background-color: #F6F8F9;
    color: #263339;
}

.gw-theme-light .gw-callout--success {
    border-color: #BFE3D1;
    background-color: #E9F6F0;
    color: #00754A;
}

.gw-theme-light .gw-callout--warning {
    border-color: #F1DDA6;
    background-color: #FFF6E0;
    color: #7A5300;
}

.gw-theme-light .gw-callout--danger {
    border-color: #F5C6C0;
    background-color: #FDEDEB;
    color: #B42318;
}

.gw-theme-light .demo-nav-items {
    border-color: #DCE4E7;
    background: #E9EEF0;
}

.gw-theme-light .demo-nav-items a {
    color: #4A5A61;
}

.gw-theme-light .demo-nav-items a:hover {
    color: #071C26;
}

.gw-theme-light .demo-nav-items a.current {
    background: #fff;
    box-shadow: 0 1px 2px rgba(7, 28, 38, 0.12);
    color: #071C26;
}

.gw-theme-light p.report-issue a {
    color: #8A989E;
}

.gw-theme-light .gpnf-nested-entries {
    border-color: #DCE4E7;
}

.gw-theme-light .gpnf-nested-entries th {
    border-color: #DCE4E7;
    background: #F6F8F9;
    color: #5F6F76;
}

.gw-theme-light .gpnf-nested-entries td {
    border-color: #EEF2F3;
}

.gw-theme-light .gpnf-nested-entries .gpnf-no-entries td {
    color: #5F6F76;
}

.gw-theme-light .tingle-modal .tingle-modal-box {
    border-color: #DCE4E7;
    background: #fff;
}

.gw-theme-light .gpnf-modal .gpnf-modal-header {
    border-color: #DCE4E7;
    color: #071C26 !important;
}

.gw-theme-light .tingle-modal .tingle-modal-box__footer {
    border-color: #DCE4E7;
    background: #F6F8F9;
}

.gw-theme-light .tingle-modal .tingle-modal-box__footer .tingle-btn {
    border-color: #BDCCD0;
    background: #fff;
    color: #071C26;
}

/* Modals sit outside the form wrapper, where GF's color variables fall back to its default blue. */
.gw-theme-light .tingle-modal .tingle-modal-box__footer .tingle-btn.tingle-btn--primary {
    border-color: #008F59;
    background: #008F59;
    color: #fff;
}

/* ---------------------------------------------------------------------------------------------------------
 * Dark (gw-theme-dark): navy panel with a green glow, for demos like GP Sliders
 * ------------------------------------------------------------------------------------------------------- */

.gw-theme-dark {
    background: #061C26;
    color: #fff;
    color-scheme: dark;
}

.gw-theme-dark body {
    padding: 3rem !important;
    border-radius: 1rem;
    box-shadow: 0 0 20rem 0 inset rgb( 0, 224, 135, 0.15 );
}

/* Theme variables Form Styles doesn't cover, tuned for the dark panel. */
.gw-theme-dark .gform-theme {
    --gf-color-danger: #FF8A7A;
    --gf-color-danger-rgb: 255, 138, 122;
    --gf-ctrl-date-picker-cell-content-color-disabled: rgba(255, 255, 255, 0.25);
}

.gw-theme-dark .gform_heading {
    color: rgba(255, 255, 255, 0.75);
}

.gw-theme-dark .gw-demo-header {
    margin: -3rem -3rem 2rem;
    padding: 1.25rem 3rem;
    border-color: rgba(255, 255, 255, 0.08);
    border-radius: 1rem 1rem 0 0;
    background: rgba(255, 255, 255, 0.04);
}

.gw-theme-dark .gw-demo-header__icon {
    background: rgba(0, 224, 135, 0.12);
    color: #00E087;
}

.gw-theme-dark .gw-demo-header__title {
    color: #fff;
}

.gw-theme-dark .gw-demo-header__description {
    color: rgba(255, 255, 255, 0.7);
}

.gw-theme-dark .gw-demo-intro {
    color: #A3B6BE;
}

.gw-theme-dark .gw-demo-header__refresh {
    border-color: rgba(255, 255, 255, 0.2);
    background: transparent;
    color: #fff;
}

.gw-theme-dark .gw-demo-header__refresh:hover {
    border-color: #00E087;
    color: #00E087;
}

.gw-theme-dark :is(.gw-demo, .tingle-modal) a {
    color: #00E087;
    text-underline-offset: 2px;
}

.gw-theme-dark :is(.gw-demo, .tingle-modal) a:hover {
    color: #5CFFBE;
}

.gw-theme-dark .gw-instruction {
    border-color: rgb( 0, 224, 135, 0.5 );
    color: rgba(255, 255, 255, 0.65);
}

.gw-theme-dark .gw-instruction strong {
    color: #fff;
}

.gw-theme-dark .gw-callout {
    border-color: rgba(255, 255, 255, 0.12);
    background-color: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.8);
}

.gw-theme-dark .gw-callout--success {
    border-color: rgba(0, 224, 135, 0.35);
    background-color: rgba(0, 224, 135, 0.1);
    color: #00E087;
}

.gw-theme-dark .gw-callout--warning {
    border-color: rgba(240, 196, 110, 0.35);
    background-color: rgba(240, 196, 110, 0.1);
    color: #F0C46E;
}

.gw-theme-dark .gw-callout--danger {
    border-color: rgba(255, 138, 122, 0.35);
    background-color: rgba(255, 138, 122, 0.1);
    color: #FF8A7A;
}

.gw-theme-dark .demo-nav-items {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
}

.gw-theme-dark .demo-nav-items a {
    color: rgba(255, 255, 255, 0.7);
}

.gw-theme-dark .demo-nav-items a:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.gw-theme-dark .demo-nav-items a.current {
    background: #00E087;
    color: #061C26;
}

.gw-theme-dark p.report-issue a {
    color: rgb( 0, 224, 135, 0.5 );
}

.gw-theme-dark .gpnf-nested-entries {
    border-color: rgba(255, 255, 255, 0.12);
}

.gw-theme-dark .gpnf-nested-entries th {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.55);
}

.gw-theme-dark .gpnf-nested-entries td {
    border-color: rgba(255, 255, 255, 0.08);
}

.gw-theme-dark .gpnf-nested-entries .gpnf-no-entries td {
    color: rgba(255, 255, 255, 0.6);
}

.gw-theme-dark .tingle-modal .tingle-modal-box {
    border-color: rgba(255, 255, 255, 0.12);
    background: #0B2530;
}

.gw-theme-dark .gpnf-modal .gpnf-modal-header {
    border-color: rgba(255, 255, 255, 0.08);
    color: #fff !important;
}

.gw-theme-dark .tingle-modal .tingle-modal-box__footer {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.gw-theme-dark .tingle-modal .tingle-modal-box__footer .tingle-btn {
    border-color: rgba(255, 255, 255, 0.25);
    background: transparent;
    color: #fff;
}

.gw-theme-dark .tingle-modal .tingle-modal-box__footer .tingle-btn.tingle-btn--primary {
    border-color: #00E087;
    background: #00E087;
    color: #061C26;
}

/* GP File Upload Pro: the drop area border is black at 15%, invisible on navy. */
.gw-theme-dark .gpfup__droparea {
    border-color: rgba(255, 255, 255, 0.25);
}

/* GP Advanced Select: Tom Select's Bootstrap theme hard-codes white controls and dark text. */
.gw-theme-dark .gform-theme .ts-control,
.gw-theme-dark .gform-theme .ts-dropdown,
.gw-theme-dark .gform-theme .full .ts-control {
    background-color: var(--gf-color-in-ctrl);
    color: var(--gf-color-in-ctrl-contrast);
}

.gw-theme-dark .gform-theme .ts-control input,
.gw-theme-dark .gform-theme .ts-dropdown .option {
    color: var(--gf-color-in-ctrl-contrast);
}

.gw-theme-dark .gform-theme .ts-control input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.gw-theme-dark .gform-theme .ts-dropdown .active {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}

/* GP Sliders */

.gw-theme-dark .gps-slider__track {
    background: rgba(255, 255, 255, 0.25);
}

.gw-theme-dark .gps-slider__tick::before {
    background: rgba(255, 255, 255, 0.25);
}

.gw-theme-dark .gps-slider__tick-label {
    color: rgba(255, 255, 255, 0.50);
}

.gw-theme-dark .gps-slider__handle {
    background: #00b36c;
}

.gw-theme-dark .gps-slider__tooltip {
    background: #fff;
    color: #061C26;
}

.gw-theme-dark .gps-slider__tooltip::after {
    border-top-color: #fff;
}