/*First form hide back button*/
#sts-pta-screener .gform_wrapper .gform_previous_button {
  display: none !important;
}

/*Hide page title/subtitle past first question*/
.screener-past-page-one #page-screener-header {
    display: none;
}
.screener-past-page-one #page-screener-wrapper {
    padding-top: 30px;
}

/*FLEZ Screen*/
#sts-pta-screener .flez-icon {
    width: 110px;
    height: auto;
    margin: 0 0 30px;
}
#sts-pta-screener .flez-content h2 {
    margin-top: 0;
}

/* =============================================================================
   gf-decorators.css
   Styles for Gravity Forms field icons and tooltips injected by
   GFFieldDecorators (gf-field-decorators.php).
   ============================================================================= */
/*Icons*/
#sts-pta-screener .question-icon,
.gf-field-icon {
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    height: 146px;
    width: 178px;
    margin-bottom: 30px;
}
#sts-pta-screener .icon-zip {
    height: 146px;
    width: 178px;
    background-image: url("../img/icon-zip.svg");
}
#sts-pta-screener .icon-results {
    height: 146px;
    width: 178px;
    background-image: url("../img/icon-results.svg");
}
@media (min-width: 768px) {
    #sts-pta-screener .icon-zip {
        height: 164px;
        width: 200px;
    }
    #sts-pta-screener .icon-results {
        height: 164px;
        width: 200px;
    }
}


/* -----------------------------------------------------------------------------
   2. Field icons
   Icons sit to the left of the field label+input block.

   Strategy: each icon class (e.g. .icon-zip) uses a background-image.
   Swap in an icon font (Dashicons, Font Awesome, etc.) instead if preferred —
   just add `font-family` and `content` rules to each modifier class below.
   ----------------------------------------------------------------------------- */



/* -- Individual icon variants ---------------------------------------------- */

.icon-zip {
    background-image: url('../img/icon-zip.svg');
}

.icon-owner {
    background-image: url('../img/icon-owner.svg');
}

.icon-household {
    background-image: url('../img/icon-household.svg');
}

.icon-income {
    background-image: url('../img/icon-income.svg');
}

.icon-date {
    background-image: url('../img/icon-date.svg');
}

.icon-disability {
    background-image: url('../img/icon-disability.svg');
}

.icon-blindness {
    background-image: url('../img/icon-blindness.svg');
}

.icon-dependent {
    background-image: url('../img/icon-dependent.svg');
}

.icon-duration {
    background-image: url('../img/icon-duration.svg');
}

.icon-employment {
    background-image: url('../img/icon-employment.svg');
}

.icon-home-value {
    background-image: url('../img/icon-home-value.svg');
}

.icon-homestead {
    background-image: url('../img/icon-homestead.svg');
}

.icon-marital {
    background-image: url('../img/icon-marital.svg');
}

.icon-occupance {
    background-image: url('../img/icon-occupance.svg');
}

.icon-refund {
    background-image: url('../img/icon-refund.svg');
}

.icon-renter {
    background-image: url('../img/icon-renter.svg');
}

.icon-results {
    background-image: url('../img/icon-results.svg');
}

.icon-state-benefits {
    background-image: url('../img/icon-state-benefits.svg');
}

.icon-taxes-paid {
    background-image: url('../img/icon-taxes-paid.svg');
}

.icon-veteran {
    background-image: url('../img/icon-veteran.svg');
}

/* Fallback / generic icon shown when no specific class matches */
/*.gf-field-icon:not([class*='icon-']) {
    background-image: url('../img/icon-default.svg');
}
*/
/*Tooltip*/
/*#sts-pta-screener #sts-screener-form .tooltip:after {
    content: "";
    margin-left: 0.5rem;
    display: inline-block;
    height: 20px;
    width: 20px;
    background-image: url("../img/info.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
#sts-pta-screener #sts-screener-form .tooltip-wrap {
    position: relative;
    display: inline-block;
}
#sts-pta-screener #sts-screener-form .tooltip-wrap:hover .tooltip-content,
#sts-pta-screener #sts-screener-form .tooltip-wrap:active .tooltip-content {
    display: inline;
}
#sts-pta-screener #sts-screener-form .tooltip-content {
    position: absolute;
    top: 5px;
    left: 100%;
    min-width: 200px;
    margin-bottom: 0.5rem;
    display: none;
    border-radius: 0.125rem;
    --tw-bg-opacity: 1;
    background-color: rgb(249 248 246 / var(--tw-bg-opacity));
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    font-size: .875rem;
    outline-width: 1px;
}*/

/* -----------------------------------------------------------------------------
   3. Tooltip trigger button
   The (?) button rendered after the field.
   ----------------------------------------------------------------------------- */

#sts-pta-screener .question-label-wrap {
    display: block;
    width: 100%;
}
#sts-pta-screener .gf-tooltip-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

#sts-pta-screener .gf-tooltip-trigger {
    /* Reset browser button styles */
    appearance: none;
    -webkit-appearance: none;
    border: none;
    padding: 0;
    background: none;
    cursor: pointer;
    line-height: 24px;
    display: inline-block;
    height: 24px;
    width: 24px;
    box-shadow: none;
    background: url("../img/info.svg") no-repeat center !important;
    background-size: contain !important;
    background-position: center;

    transition: background-color 0.15s ease;
}

#sts-pta-screener .gf-tooltip-trigger:hover,
#sts-pta-screener .gf-tooltip-trigger:focus-visible {
/*    background-color: #374151;
    outline: 2px solid #374151;
    outline-offset: 2px;*/
}

#sts-pta-screener .gf-tooltip-trigger[aria-expanded="true"] {
    /*background-color: #1d4ed8;*/
}


/* -----------------------------------------------------------------------------
   4. Tooltip bubble
   Hidden by default; shown when the trigger has aria-expanded="true"
   (toggled by the JS below) or when the wrapper is hovered.
   ----------------------------------------------------------------------------- */

#sts-pta-screener .gf-tooltip-bubble {
    /* Layout */
    position: absolute;
    bottom: calc(100% + 0.5rem); /* appear above the trigger */
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 18rem; /* ~288px — prevents very long tooltips going off-screen */
    z-index: 100;

    /* Visual */
    background-color: #1f2937;
    color: #f9fafb;
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem; /* 13px */
    line-height: 1.5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);

    /* Arrow */
    --arrow-size: 0.4rem;

    /* Hidden state */
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

/* Downward-pointing arrow caret */
#sts-pta-screener .gf-tooltip-bubble::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: var(--arrow-size) solid transparent;
    border-top-color: #1f2937;
}

/* Visible state — toggled by JS (aria-expanded) and hover */
#sts-pta-screener .gf-tooltip-trigger[aria-expanded="true"] + .gf-tooltip-bubble,
#sts-pta-screener .gf-tooltip-wrap:hover .gf-tooltip-bubble {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Flip tooltip below the trigger when there isn't room above (opt-in class) */
#sts-pta-screener .gf-tooltip-wrap--below .gf-tooltip-bubble {
    bottom: auto;
    top: calc(100% + 0.5rem);
}
#sts-pta-screener .gf-tooltip-wrap--below .gf-tooltip-bubble::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: #1f2937;
}


/* -----------------------------------------------------------------------------
   5. Links inside tooltip bubbles
   ----------------------------------------------------------------------------- */

#sts-pta-screener .gf-tooltip-bubble a {
    color: #93c5fd;
    text-decoration: underline;
}
#sts-pta-screener .gf-tooltip-bubble a:hover {
    color: #bfdbfe;
}


/* -----------------------------------------------------------------------------
   6. Reduced-motion preference
   ----------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    #sts-pta-screener .gf-tooltip-bubble,
    #sts-pta-screener .gf-tooltip-trigger {
        transition: none;
    }
}