/**
 * Property Field Rules — Frontend Styles (v2.1.0)
 *
 * Professional styles for zero-jitter layout, smooth step transitions,
 * mobile/iOS Safari touch focus resilience, and Bootstrap Selectpicker stability.
 * v2.1.1: [FIX-2] pre-paint FOUC classes, [FIX-3] mobile touch reactivation,
 * [FIX-4] class-only visibility (engine writes no inline display styles).
 *
 * @package PropertyFieldRules
 * @author By AlphaTechLogix
 * @version 2.1.0
 */

/* [W2.2-FIX-2] Pre-paint FOUC prevention: fields the server marked as rule-disabled
   are hidden before first paint (class rendered by PHP, no JS involved). */
.pfr-rule-pending {
    display: none !important;
}

/* Server-side class is placed on the inner .form-group; hide the surrounding
   column wrapper too (same target the JS engine toggles) so suffixes like "EUR"
   never flash. :has() is supported by all evergreen browsers since 2023. */
[class*="col-"]:has(> .form-group.pfr-rule-pending),
[class*="col-"]:has(> .pfr-rule-pending) {
    display: none !important;
}

/* [FIX-4] Class-only visibility contract: the JS engine no longer writes inline
   display styles; it toggles these classes. No .show()/.hide() anywhere. */
.pfr-field-hidden {
    display: none !important;
}

/* [FIX-4] Edit-form step wizard + bottom nav visibility (replaces .show()/.hide()).
   .active is the theme's own step marker; this class only mirrors hidden state.
   The active-step rule must be !important because the theme ships critical CSS
   ("#submit_property_form .form-step:not(:first-of-type) { display: none; }") that
   the engine's former inline .show() styles used to override. */
.form-step.pfr-step-hidden {
    display: none !important;
}

.form-step.active {
    display: block !important;
}

.pfr-nav-hidden {
    display: none !important;
}

/* [FIX-4] pfr-field-visible removed: showing is the absence of the hidden class,
   so the browser default display (block/flex) is preserved instead of forced to block. */

/* Ensure smooth section visibility without layout shifts */
.block-content-wrap {
    transition: opacity 0.12s ease-in-out;
}

/* [v2.1.4][BUG-1+2] Mobile & iOS Safari/WebKit touch focus & interaction stability.
   CRITICAL: the previous selector group contained ".form-step:visible" — :visible is a
   jQuery pseudo-class, NOT valid CSS. One invalid selector invalidates the ENTIRE
   comma-group, so browsers dropped the whole block and the belt-and-braces re-enable
   rule never applied (verified in CSSOM on staging 2026-10-22).
   Replaced with: ":not(.pfr-step-hidden)" (engine's class contract) and
   ":not([style*="display: none"])" for the theme's inline hide() writes.
   Also sets -webkit-touch-callout: default so iOS long-press selection works. */
.form-step.active input,
.form-step.active textarea,
.form-step.active select,
.form-step.active .bootstrap-select,
.form-step:not(.pfr-step-hidden):not([style*="display: none"]) input,
.form-step:not(.pfr-step-hidden):not([style*="display: none"]) textarea,
.form-step:not(.pfr-step-hidden):not([style*="display: none"]) select,
.form-step:not(.pfr-step-hidden):not([style*="display: none"]) .bootstrap-select {
    pointer-events: auto !important;
    -webkit-user-select: text !important;
    user-select: text !important;
    -webkit-touch-callout: default;
    touch-action: manipulation;
}

/* [v2.1.4][BUG-1+2] Belt-and-braces: never leave a visible, allowed input dead on touch devices.
   Also never let a rule-hidden wrapper become interactable. */
.form-step.active .pfr-rule-pending input,
.form-step.active .pfr-rule-pending select,
.form-step.active .pfr-rule-pending textarea,
.form-step.active .pfr-field-hidden input,
.form-step.active .pfr-field-hidden select,
.form-step.active .pfr-field-hidden textarea {
    pointer-events: none !important;
    touch-action: none;
}

.bootstrap-select.form-control {
    width: 100% !important;
    min-height: 42px;
}

.bootstrap-select > .dropdown-toggle {
    width: 100% !important;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bootstrap-select .dropdown-menu {
    max-width: 100% !important;
}

/* Dropdown option hide helper */
select option.pfr-opt-hidden {
    display: none !important;
}