/* ==========================================================================
   MASTER PORTAL LAYOUT CUSTOM CSS (Optimized BS5 Engine)
   Scoped to: .app.app-custom#html[data-bs-theme]
   ========================================================================== */   

/* --- 1. Global Utilities & Resets --- */
.app.app-custom#html[data-bs-theme] .accordion-collapse:not(.show) { display: none !important; }
.app.app-custom#html[data-bs-theme] .accordion-button:focus { box-shadow: none !important; }
.app.app-custom#html[data-bs-theme] :focus, 
.app.app-custom#html[data-bs-theme] :focus-visible { outline: none; }
.app.app-custom#html[data-bs-theme] ul:not(.select2-results__options):not(.select2-selection__rendered), 
.app.app-custom#html[data-bs-theme] ol { padding-left: 1rem !important; }
.app.app-custom#html[data-bs-theme] td { white-space: normal !important; }

/* Text & Link Utilities */
.app.app-custom#html[data-bs-theme] .text-accent { color: var(--app-accent) !important; }
.app.app-custom#html[data-bs-theme] .text-primary { color: var(--app-text-primary) !important; }
.app.app-custom#html[data-bs-theme] .text-muted { color: var(--app-text-muted) !important; }
.app.app-custom#html[data-bs-theme] .tracking-wider { letter-spacing: 2px !important; }
.app.app-custom#html[data-bs-theme] .tracking-wide { letter-spacing: 0.5px !important; }
.app.app-custom#html[data-bs-theme] .auth-link-accent { color: var(--app-accent) !important; font-size: 0.95rem; transition: opacity 0.3s; cursor: pointer; text-decoration: none; font-weight: 600; }
.app.app-custom#html[data-bs-theme] .auth-link-accent:hover { opacity: 0.8; }
.app.app-custom#html[data-bs-theme] .auth-link-muted { color: rgba(var(--app-text-primary-rgb), 0.7) !important; transition: color 0.3s; font-weight: 500; cursor: pointer; font-size: 0.95rem; text-decoration: none; }
.app.app-custom#html[data-bs-theme] .auth-link-muted:hover { color: var(--app-text-primary); }


/* --- 2. Master Glass Panels & Cards --- */
.app.app-custom#html[data-bs-theme] .glass-panel { 
    background: var(--glass-surface-gradient), var(--glass-sheen-gradient), var(--app-glass-bg); 
    background: var(--glass-surface-gradient), var(--glass-sheen-gradient) !important;
    backdrop-filter: var(--glass-blur, blur(10px)); 
    -webkit-backdrop-filter: var(--glass-blur, blur(10px)); 
    border: 1px solid var(--glass-border-color); 
    border-top: 1px solid rgba(255, 255, 255, 0.4); 
    border-left: 1px solid rgba(255, 255, 255, 0.2); 
    border-radius: var(--app-radius, 28px); 
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3), 0 0 40px rgba(var(--app-accent-rgb), 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3); 
    position: relative; z-index: 10; width: calc(100% - 20px); margin: 10px; padding: 40px; 
    background: var(--app-global-spotlight), var(--glass-sheen-gradient), var(--app-global-bg) !important;
    border: var(--app-border);
    border-radius: var(--app-radius-sm);
    box-shadow: var(--app-shadow-elevation);
    backdrop-filter: var(--app-blur-strength);
}
.app.app-custom#html[data-bs-theme] .glass-panel-sm { max-width: 420px; }
.app.app-custom#html[data-bs-theme] .glass-panel-md { max-width: 650px; }
.app.app-custom#html[data-bs-theme] .glass-panel-lg { max-width: 950px; }

.app.app-custom#html[data-bs-theme] .glass-summary-panel,
.app.app-custom#html[data-bs-theme] .vendor-card { 
    background: rgba(var(--app-text-primary-rgb), 0.03); 
    border: 1px solid var(--glass-border-color); 
    border-radius: 16px; padding: 1.5rem; color: var(--app-text-primary);
}
.app.app-custom#html[data-bs-theme] .vendor-card-header { font-weight: 700; border-bottom: 1px solid var(--glass-border-color); padding-bottom: 0.75rem; margin-bottom: 1.25rem; display: flex; align-items: center; }
.app.app-custom#html[data-bs-theme] .vendor-card-header i { color: var(--app-accent); margin-right: 0.75rem; }
.app.app-custom#html[data-bs-theme] .glass-border-bottom { border-bottom: 1px solid var(--glass-border-color) !important; }
.app.app-custom#html[data-bs-theme] .glass-border-top { border-top: 1px solid var(--glass-border-color) !important; }


/* --- 3. Master Form Controls (Inputs, Selects, Textareas) --- */
.app.app-custom#html[data-bs-theme] .app-label { display: block; font-weight: 600; margin-bottom: 8px; color: var(--app-text-primary); font-size: 0.95rem; }
.app.app-custom#html[data-bs-theme] .app-label-wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; margin-bottom: 8px; }
.app.app-custom#html[data-bs-theme] .app-label-wrap .app-label { margin-bottom: 0; }
.app.app-custom#html[data-bs-theme] .form-control,
.app.app-custom#html[data-bs-theme] .form-select { 
    background-color: var(--form-control-bg, rgba(var(--app-text-primary-rgb), 0.04)) !important; 
    border: 1px solid rgba(var(--app-text-primary-rgb), 0.1) !important; 
    color: var(--app-text-primary) !important; 
    border-radius: 12px; font-weight: var(--app-font-weight-medium); 
    padding: 14px 20px !important; transition: var(--app-transition) !important; 
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.02) !important; width: 100%; display: block;
}
.app.app-custom#html[data-bs-theme] .form-control:focus,
.app.app-custom#html[data-bs-theme] .form-select:focus { 
    background-color: rgba(var(--app-text-primary-rgb), 0.08) !important; 
    border-color: var(--app-accent) !important; 
    box-shadow: 0 0 0 4px rgba(var(--app-accent-rgb), 0.15), inset 0 2px 5px rgba(0,0,0,0.02) !important; transform: translateY(-1px); 
}
.app.app-custom#html[data-bs-theme] .form-control::placeholder { color: rgba(var(--app-text-primary-rgb), 0.5) !important; } 
.app.app-custom#html[data-bs-theme] .has-icon .form-control { padding-left: 50px !important; }
.app.app-custom#html[data-bs-theme] .input-icon,
.app.app-custom#html[data-bs-theme] .form-icon-left { position: absolute; left: 20px; top: 27px; transform: translateY(-50%); color: rgba(var(--app-text-primary-rgb), 0.4); font-size: 1.1rem; z-index: 5; pointer-events: none; }
.app.app-custom#html[data-bs-theme] .has-icon .form-control { padding-left: 50px !important; }

/* Phone Inputs */
.app.app-custom#html[data-bs-theme] .phone-prefix { position: absolute; top: 27px; transform: translateY(-50%); left: 42px; width: 25px; border: none; background: transparent; text-align: center; font-weight: 500; color: var(--app-text-primary); z-index: 5; outline: none; pointer-events: none; }
.app.app-custom#html[data-bs-theme] .has-icon .form-control.input-phone-padded { padding-left: 75px !important; }

/* Input Group Addons */
.app.app-custom#html[data-bs-theme] .app-input-group { display: flex; align-items: stretch; background-color: var(--form-control-bg) !important; border-radius: 12px; overflow: hidden; transition: var(--app-transition); border: 1px solid rgba(var(--app-text-primary-rgb), 0.1); }
.app.app-custom#html[data-bs-theme] .app-input-group:focus-within { border-color: var(--app-accent); box-shadow: 0 0 0 4px rgba(var(--app-accent-rgb), 0.15); }
.app.app-custom#html[data-bs-theme] .app-input-group-addon { display: flex; align-items: center; justify-content: center; padding: 0 16px; font-weight: bold; background: rgba(var(--app-text-primary-rgb), 0.05); color: var(--app-text-primary); border-right: 1px solid var(--glass-border-color); gap: 0.5rem;}
.app.app-custom#html[data-bs-theme] .app-input-group .form-control { border: none !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; }

/* Autofill Fix */
.app.app-custom#html[data-bs-theme] .form-control:-webkit-autofill { -webkit-text-fill-color: var(--app-text-primary) !important; transition: background-color 5000s ease-in-out 0s !important; background-color: transparent !important; }

/* Validation Overrides */
.app.app-custom#html[data-bs-theme] label.error,
.app.app-custom#html[data-bs-theme] .error-msg{ display: none; color: #f43f5e !important; font-size: 0.85rem !important; font-weight: 600 !important; margin-top: 6px !important;  display: flex !important; align-items: center; gap: 0.5rem; width: 100%; }
.app.app-custom#html[data-bs-theme] .error-msg p { margin: 0 !important; line-height: 1.3; }
.app.app-custom#html[data-bs-theme] .error-msg i { font-size: 1.1rem; }
.app.app-custom#html[data-bs-theme] .invalid-feedback.field-error { display: none; color: #f43f5e !important; font-size: 0.85rem !important; font-weight: 600 !important; margin-top: 6px !important; width: 100%; }
.app.app-custom#html[data-bs-theme] .is-invalid ~ .invalid-feedback.field-error, 
.app.app-custom#html[data-bs-theme] .error ~ .invalid-feedback.field-error,
.app.app-custom#html[data-bs-theme] .position-relative:has(.is-invalid) ~ .invalid-feedback.field-error,
.app.app-custom#html[data-bs-theme] .position-relative:has(.error) ~ .invalid-feedback.field-error { display: block !important; }
.app.app-custom#html[data-bs-theme] .form-control.is-invalid, 
.app.app-custom#html[data-bs-theme] .form-control.error { border-color: #f43f5e !important; background: rgba(244, 63, 94, 0.05) !important; }

/* --- 4. Master Select2 Engine --- */
.app.app-custom#html[data-bs-theme] .select2-container { width: 100% !important; display: block; }
.app.app-custom#html[data-bs-theme] .select2-selection { min-height: 52px !important; background-color: var(--form-control-bg, rgba(var(--app-text-primary-rgb), 0.04)) !important; border: 1px solid rgba(var(--app-text-primary-rgb), 0.1) !important; border-radius: 12px !important; display: flex; align-items: center; transition: var(--app-transition); }
.app.app-custom#html[data-bs-theme] .select2-container--focus .select2-selection { border-color: var(--app-accent) !important; box-shadow: 0 0 0 4px rgba(var(--app-accent-rgb), 0.15) !important; }
.app.app-custom#html[data-bs-theme] .select2-selection--single .select2-selection__rendered { color: var(--app-text-primary) !important; padding-left: 20px !important; }
.app.app-custom#html[data-bs-theme] .select2-selection__rendered { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 5px 20px;}
.app.app-custom#html[data-bs-theme] .has-icon .select2-selection__rendered { padding-left: 50px !important; }
.app.app-custom#html[data-bs-theme] .select2-selection__arrow { height: 50px !important; right: 10px !important; }
.app.app-custom#html[data-bs-theme] .select2-selection--multiple { height: auto !important; align-items: center; padding: 4px 0px; /* align-items: flex-start; padding: 4px 8px;  */}
.app.app-custom#html[data-bs-theme] .select2-selection--multiple .select2-selection__choice { background-color: rgba(var(--app-accent-rgb), 0.1) !important; border: 1px solid rgba(var(--app-accent-rgb), 0.2) !important; border-radius: 8px !important; color: var(--app-text-primary) !important; padding: 4px 10px !important; margin: 0px !important; display: flex; align-items: center; }
.app.app-custom#html[data-bs-theme] .select2-selection--multiple .select2-selection__choice__remove { color: var(--app-text-primary) !important; margin-right: 8px !important; border-right: 1px solid rgba(var(--app-text-primary-rgb), 0.2) !important; padding-right: 6px !important; }
.app.app-custom#html[data-bs-theme] .select2-search__field { color: var(--app-text-primary) !important; background: transparent !important; width: auto !important;}
.app.app-custom#html[data-bs-theme] .select2-dropdown { background-color: var(--app-glass-bg) !important; backdrop-filter: var(--app-blur-strength); border: 1px solid var(--glass-border-color) !important; border-radius: 12px; overflow: hidden; }
.app.app-custom#html[data-bs-theme] .select2-results__option { color: var(--app-text-primary) !important; padding: 10px 16px; border-bottom: 1px solid rgba(var(--app-text-primary-rgb), 0.05); }
.app.app-custom#html[data-bs-theme] .select2-results__option--highlighted[aria-selected],
.app.app-custom#html[data-bs-theme] .select2-results__option[aria-selected=true] { background-color: rgba(var(--app-accent-rgb), 0.2) !important; }
.app.app-custom#html[data-bs-theme] .is-invalid + .select2-container .select2-selection { border-color: #f43f5e !important; }

/* --- Select2 options flex setup --- */
.app.app-custom#html[data-bs-theme] .select2-selection__rendered { display: flex; flex-wrap: wrap; align-items: center; list-style: none; padding: 5px 20px; margin: 0; position: relative; }
.app.app-custom#html[data-bs-theme] .select2-selection__choice { margin: 2px 5px 2px 0; padding: 2px 8px; background-color: rgba(var(--app-text-primary-rgb), 0.1); border: 1px solid rgba(var(--app-text-primary-rgb), 0.2); border-radius: 4px; display: flex; align-items: center; color: var(--app-text-primary); }
.app.app-custom#html[data-bs-theme] .select2-search--inline { flex: 1; display: flex; min-width: 50px; }
.app.app-custom#html[data-bs-theme] .select2-search__field { width: 100% !important; margin: 0 !important; background: transparent; border: none; outline: none; color: var(--app-text-primary); text-overflow: ellipsis; white-space: nowrap; overflow: hidden !important;}
.app.app-custom#html[data-bs-theme] .select2-selection__clear { order: 99; margin-left: auto; cursor: pointer; padding: 0 8px; color: #f43f5e; font-weight: bold; }

/* --- Select2 options flex setup - top right aligned clear btn - when the clear button IS present --- */
.app.app-custom#html[data-bs-theme] .select2-selection__rendered:has(.select2-selection__clear) { padding-right: 50px;}
.app.app-custom#html[data-bs-theme] .select2-selection__clear {position: absolute; top: 0; right: 0;}
.app.app-custom#html[data-bs-theme] .select2-selection__rendered:has(.select2-selection__clear) .select2-search--inline { max-width: calc(100% - 30px); }

/* --- Master Native Select Engine --- */
.app.app-custom#html[data-bs-theme] .form-select { min-height: 52px !important; background-color: var(--form-control-bg, rgba(var(--app-text-primary-rgb), 0.04)) !important; border: 1px solid rgba(var(--app-text-primary-rgb), 0.1) !important; border-radius: 12px !important; color: var(--app-text-primary) !important; padding: 14px 20px !important; transition: var(--app-transition); box-shadow: inset 0 2px 5px rgba(0,0,0,0.02) !important; }
.app.app-custom#html[data-bs-theme] .form-select:focus { border-color: var(--app-accent) !important; background-color: rgba(var(--app-text-primary-rgb), 0.08) !important; box-shadow: 0 0 0 4px rgba(var(--app-accent-rgb), 0.15), inset 0 2px 5px rgba(0,0,0,0.02) !important; transform: translateY(-1px); }
.app.app-custom#html[data-bs-theme] .has-icon .form-select { padding-left: 50px !important; }
.app.app-custom#html[data-bs-theme] .form-select option { background-color: var(--bs-body-bg) !important; color: var(--app-text-primary) !important; padding: 10px 16px; }
.app.app-custom#html[data-bs-theme] .form-select.is-invalid, .app.app-custom#html[data-bs-theme] .form-select.error { border-color: #f43f5e !important; background-color: rgba(244, 63, 94, 0.05) !important; }

/* --- 5. Checkboxes, Radios & Pills --- */
.app.app-custom#html[data-bs-theme] input[type="checkbox"].custom-check, 
.app.app-custom#html[data-bs-theme] input[type="checkbox"].customCheckbox, 
.app.app-custom#html[data-bs-theme] input[type="radio"].custom-radio { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; min-width: 20px; background: rgba(var(--app-text-primary-rgb), 0.05); border: 2px solid rgba(var(--app-text-primary-rgb), 0.2); border-radius: 6px; outline: none; cursor: pointer; position: relative; transition: all 0.3s; display: inline-block; vertical-align: middle; margin: 0; box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); }
.app.app-custom#html[data-bs-theme] input[type="radio"].custom-radio { border-radius: 50%; }
.app.app-custom#html[data-bs-theme] input[type="checkbox"].custom-check:hover, 
.app.app-custom#html[data-bs-theme] input[type="checkbox"].customCheckbox:hover,
.app.app-custom#html[data-bs-theme] input[type="radio"].custom-radio:hover { border-color: var(--app-accent); background: rgba(var(--app-accent-rgb), 0.05); }
.app.app-custom#html[data-bs-theme] input[type="checkbox"].custom-check:checked, 
.app.app-custom#html[data-bs-theme] input[type="checkbox"].customCheckbox:checked,
.app.app-custom#html[data-bs-theme] input[type="radio"].custom-radio:checked { background: linear-gradient(135deg, var(--app-accent), var(--app-accent-secondary, var(--app-accent))); border-color: transparent; box-shadow: 0 4px 10px rgba(var(--app-accent-rgb), 0.3); }
.app.app-custom#html[data-bs-theme] input[type="checkbox"].custom-check:checked::after,
.app.app-custom#html[data-bs-theme] input[type="checkbox"].customCheckbox:checked::after { content: ''; position: absolute; top: 3px; left: 7px; width: 5px; height: 10px; border: solid #ffffff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.app.app-custom#html[data-bs-theme] input[type="radio"].custom-radio:checked::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: #ffffff; }
.app.app-custom#html[data-bs-theme] .auth-checkbox-label { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; cursor: pointer; user-select: none; color: rgba(var(--app-text-primary-rgb), 0.8); font-size: 0.95rem; }
.app.app-custom#html[data-bs-theme] .auth-checkbox-label .error_label { flex: 0 0 100%; margin-top: 5px; order: 3; }
.app.app-custom#html[data-bs-theme] .auth-checkbox-label input[type="checkbox"] { order: 0; }
.app.app-custom#html[data-bs-theme] .auth-checkbox-label label:not(.error_label):not(.vendor_document_instructions_id):not(.terms_conditions):not(.digital_sign) { order: 2; margin-left: 10px !important; }

.app.app-custom#html[data-bs-theme] button.premium-select-pill { display: inline-flex; align-items: center; background: rgba(var(--app-text-primary-rgb), 0.05); border: 1px solid rgba(var(--app-text-primary-rgb), 0.15); /* padding: 6px 14px; */ border-radius: 50px; font-size: 0.8rem; font-weight: 600; color: var(--app-text-primary); cursor: pointer; transition: var(--app-transition); }
.app.app-custom#html[data-bs-theme] button.premium-select-pill:hover:not(:disabled) { background: rgba(var(--app-accent-rgb), 0.15); border-color: rgba(var(--app-accent-rgb), 0.4); color: var(--app-accent); }


/* --- 6. Master Button Engine --- */
.app.app-custom#html[data-bs-theme] .btn { border-radius: var(--app-radius-sm, 12px); font-weight: 600; padding: 14px 24px; letter-spacing: 0.3px; transition: var(--app-transition); display: inline-flex; align-items: center; justify-content: center; }
.app.app-custom#html[data-bs-theme] .btn-primary { background: linear-gradient(135deg, var(--app-accent), var(--app-accent-secondary)) !important; border: none !important; color: #ffffff !important; box-shadow: 0 4px 15px rgba(var(--app-accent-rgb), 0.3) !important; }
.app.app-custom#html[data-bs-theme] .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(var(--app-accent-rgb), 0.5) !important; filter: brightness(1.1); }
.app.app-custom#html[data-bs-theme] .btn-primary:disabled { opacity: 0.6; transform: none; }

/* Frosted Glass Semantic Buttons */
.app.app-custom#html[data-bs-theme] .btn-success { background: rgba(16, 185, 129, 0.15) !important; border: 1px solid rgba(16, 185, 129, 0.3) !important; color: #10b981 !important; }
.app.app-custom#html[data-bs-theme] .btn-danger { background: rgba(244, 63, 94, 0.15) !important; border: 1px solid rgba(244, 63, 94, 0.3) !important; color: #f43f5e !important; }
.app.app-custom#html[data-bs-theme] .btn-info { background: rgba(6, 182, 212, 0.15) !important; border: 1px solid rgba(6, 182, 212, 0.3) !important; color: #06b6d4 !important; }
.app.app-custom#html[data-bs-theme] .btn-secondary { background: rgba(var(--app-text-primary-rgb), 0.05) !important; border: 1px solid rgba(var(--app-text-primary-rgb), 0.15) !important; color: var(--app-text-primary) !important; }
.app.app-custom#html[data-bs-theme] .btn-success:hover, .app.app-custom#html[data-bs-theme] .btn-danger:hover, .app.app-custom#html[data-bs-theme] .btn-info:hover { color: #ffffff !important; transform: translateY(-1px); }
.app.app-custom#html[data-bs-theme] .btn-success:hover { background: rgba(16, 185, 129, 0.8) !important; }
.app.app-custom#html[data-bs-theme] .btn-danger:hover { background: rgba(244, 63, 94, 0.8) !important; }
.app.app-custom#html[data-bs-theme] .btn-info:hover { background: rgba(6, 182, 212, 0.8) !important; }
.app.app-custom#html[data-bs-theme] .btn-secondary:hover { background: rgba(var(--app-text-primary-rgb), 0.1) !important; }

/* Frosted Glass Semantic Buttons */
.app.app-custom#html[data-bs-theme] .previous_section, .app.app-custom#html[data-bs-theme] .next_section, .app.app-custom#html[data-bs-theme] .btn-accept-project, .app.app-custom#html[data-bs-theme] .addCoverageRow, .app.app-custom#html[data-bs-theme] .addCoverageRow, .app.app-custom#html[data-bs-theme] .submit_registration {padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);}

/* --- 7. Components (Alerts, Badges, Modals, Progress) --- */
.app.app-custom#html[data-bs-theme] .vendor-alert { border-radius: 12px; padding: 1rem 1.25rem; display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1.5rem; color: var(--app-text-primary); }
.app.app-custom#html[data-bs-theme] .vendor-alert-success { background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.3); }
.app.app-custom#html[data-bs-theme] .vendor-alert-warning { background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.3); }
.app.app-custom#html[data-bs-theme] .vendor-alert-danger { background: rgba(244, 63, 94, 0.1); border: 1px solid rgba(244, 63, 94, 0.3); }
.app.app-custom#html[data-bs-theme] .vendor-alert i { font-size: 1.25rem; margin-top: 2px; }

.app.app-custom#html[data-bs-theme] .vendor-badge-success { background: rgba(16, 185, 129, 0.15); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); padding: 6px 16px; border-radius: 50px; font-size: 0.85rem; font-weight: 600; display: inline-flex; align-items: center; }
.app.app-custom#html[data-bs-theme] .vendor-badge-danger { background: rgba(244, 63, 94, 0.15); color: #f43f5e; border: 1px solid rgba(244, 63, 94, 0.3); padding: 6px 16px; border-radius: 50px; font-size: 0.85rem; font-weight: 600; display: inline-flex; align-items: center; }

.app.app-custom#html[data-bs-theme] .status-icon-lg { font-size: 4.5rem; margin-bottom: 1rem; display: inline-block; }
.app.app-custom#html[data-bs-theme] .status-icon-success { color: var(--bs-success); filter: drop-shadow(0 0 15px rgba(var(--bs-success-rgb), 0.4)); }
.app.app-custom#html[data-bs-theme] .status-icon-danger { color: var(--bs-danger); filter: drop-shadow(0 0 15px rgba(var(--bs-danger-rgb), 0.4)); }
.app.app-custom#html[data-bs-theme] .status-icon-warning { color: var(--bs-warning); filter: drop-shadow(0 0 15px rgba(var(--bs-warning-rgb), 0.4)); }

.app.app-custom#html[data-bs-theme] .auth-logo { max-height: 80px; filter: drop-shadow(0 10px 20px rgba(0,0,0,0.25)); margin-bottom: 20px; }
.app.app-custom#html[data-bs-theme] .auth-title { color: var(--app-text-primary); letter-spacing: -0.5px; }

/* Payment Gateway Toggles (Stripe vs Auth.net) */
.app.app-custom#html[data-bs-theme] .payment-method-card { border: 1px solid var(--glass-border-color); border-radius: var(--app-radius-sm, 12px); background: rgba(var(--app-text-primary-rgb), 0.02); backdrop-filter: var(--app-blur-strength); margin-bottom: 1.25rem; transition: var(--app-transition); overflow: hidden; }
.app.app-custom#html[data-bs-theme] .payment-method-card.active { border-color: var(--app-accent); background: rgba(var(--app-accent-rgb), 0.03); box-shadow: 0 8px 25px rgba(var(--app-accent-rgb), 0.1); transform: translateY(-2px); }
.app.app-custom#html[data-bs-theme] .payment-method-header { padding: 1.25rem 1.5rem; display: flex; align-items: center; cursor: pointer; margin: 0; transition: var(--app-transition); }
.app.app-custom#html[data-bs-theme] .payment-method-card.active .payment-method-header { background: rgba(var(--app-accent-rgb), 0.05); }
.app.app-custom#html[data-bs-theme] .payment-method-body { display: none; padding: 1.5rem; border-top: 1px dashed var(--glass-border-color); background: transparent; }

/* Custom Premium Radios for Payment Headers */
.app.app-custom#html[data-bs-theme] .payment-method-header input[type="radio"] { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; min-width: 22px; background: rgba(var(--app-text-primary-rgb), 0.05); border: 2px solid rgba(var(--app-text-primary-rgb), 0.2); border-radius: 50%; outline: none; cursor: pointer; position: relative; transition: all 0.3s; margin-right: 15px; box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); }
.app.app-custom#html[data-bs-theme] .payment-method-header:hover input[type="radio"] { border-color: var(--app-accent); background: rgba(var(--app-accent-rgb), 0.05); }
.app.app-custom#html[data-bs-theme] .payment-method-header input[type="radio"]:checked { background: linear-gradient(135deg, var(--app-accent), var(--app-accent-secondary, var(--app-accent))); border-color: transparent; box-shadow: 0 4px 10px rgba(var(--app-accent-rgb), 0.3); }
.app.app-custom#html[data-bs-theme] .payment-method-header input[type="radio"]:checked::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: #ffffff; }

/* Nested Payment Pills Tabs (Credit Card vs Bank) */
.app.app-custom#html[data-bs-theme] .pill-toggle-wrapper { background: rgba(var(--app-text-primary-rgb), 0.03); border: 1px solid var(--glass-border-color); border-radius: 50px; padding: 6px; display: inline-flex; margin-bottom: 1.5rem; }
.app.app-custom#html[data-bs-theme] .pill-toggle-wrapper label { padding: 8px 20px; border-radius: 50px; cursor: pointer; color: var(--app-text-muted); font-weight: 600; font-size: 0.9rem; transition: var(--app-transition); margin: 0; }
.app.app-custom#html[data-bs-theme] .pill-toggle-wrapper label:hover { color: var(--app-text-primary); background: rgba(var(--app-text-primary-rgb), 0.05); }
.app.app-custom#html[data-bs-theme] .authorize_payment_method_type:checked + label, .app.app-custom#html[data-bs-theme] .stripe_payment_method:checked + label { background: linear-gradient(135deg, var(--app-accent), var(--app-accent-secondary)); color: #ffffff !important; box-shadow: 0 4px 15px rgba(var(--app-accent-rgb), 0.3); }
.app.app-custom#html[data-bs-theme] .payment_type_section { display: none; }

/* Vendor Specific Tools */
.app.app-custom#html[data-bs-theme] .vendor-scroll-box { background: rgba(var(--app-text-primary-rgb), 0.03); border: 1px solid var(--glass-border-color); border-radius: 12px; max-height: 250px; overflow-y: auto; color: var(--app-text-primary); padding: 1rem; }
.app.app-custom#html[data-bs-theme] .vendor-signature-box { background: rgba(var(--bs-body-bg-rgb), 0.5); border: 1px dashed var(--glass-border-color); border-radius: 12px; padding: 10px; text-align: center; overflow: hidden; }
.app.app-custom#html[data-bs-theme] .vendor-loader-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(var(--bs-body-bg-rgb), 0.7); backdrop-filter: blur(10px); z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; }

/* Role Cards */
.app.app-custom#html[data-bs-theme] .role-card-label { background: rgba(var(--app-text-primary-rgb), 0.03); border: 1px solid rgba(var(--app-text-primary-rgb), 0.1); border-radius: 16px; padding: 12px; cursor: pointer; transition: var(--app-transition); display: flex; align-items: center; gap: 15px; }
.app.app-custom#html[data-bs-theme] .role_type_checkbox:checked + .role-card-label { background: rgba(var(--app-accent-rgb), 0.1); border-color: var(--app-accent); box-shadow: 0 8px 20px rgba(var(--app-accent-rgb), 0.15); transform: translateY(-2px); }
.app.app-custom#html[data-bs-theme] .role-title { color: var(--app-text-primary); transition: color 0.3s; }
.app.app-custom#html[data-bs-theme] .role_type_checkbox:checked + .role-card-label .role-title { color: var(--app-accent) !important; font-weight: 600; }

/* Progress Track */
.app.app-custom#html[data-bs-theme] .vendor-progress-wrapper { position: relative; margin-bottom: 3rem; padding-top: 0.5rem; }
.app.app-custom#html[data-bs-theme] .vendor-progress-track { position: absolute; top: 33px; left: 10%; width: 83%; height: 4px; background: rgba(var(--app-text-primary-rgb), 0.1); border-radius: 10px; z-index: 1; }
.app.app-custom#html[data-bs-theme] .vendor-progress-fill { background: linear-gradient(135deg, var(--app-accent), var(--app-accent-secondary)); transition: width 0.4s ease; border-radius: 10px; height: 100%; }

/* Detail Rows */
.app.app-custom#html[data-bs-theme] .vendor-detail-row { display: flex; flex-direction: column; padding-bottom: 0.5rem; border-bottom: 1px solid rgba(var(--app-text-primary-rgb), 0.05); color: var(--app-text-primary); font-size: 0.95rem; }
@media (min-width: 576px) { .app.app-custom#html[data-bs-theme] .vendor-detail-row { flex-direction: row; } }
.app.app-custom#html[data-bs-theme] .vendor-detail-label { flex: 0 0 40%; color: var(--app-text-muted); font-weight: 600; margin-bottom: 0.25rem; }
@media (min-width: 576px) { .app.app-custom#html[data-bs-theme] .vendor-detail-label { margin-bottom: 0; } }
.app.app-custom#html[data-bs-theme] .vendor-detail-value { flex-grow: 1; }

/* Scope of Work Rows */
.app.app-custom#html[data-bs-theme] .vendor-sow-row { display: flex; flex-direction: column; border-color: var(--glass-border-color) !important; }
@media (min-width: 768px) { .app.app-custom#html[data-bs-theme] .vendor-sow-row { flex-direction: row; } }
.app.app-custom#html[data-bs-theme] .vendor-sow-row:nth-child(even) { background: rgba(var(--app-text-primary-rgb), 0.02); }
.app.app-custom#html[data-bs-theme] .vendor-sow-col-title { flex: 0 0 30%; font-weight: bold; padding: 1rem; color: var(--app-text-primary); }
.app.app-custom#html[data-bs-theme] .vendor-sow-col-desc { flex: 1; padding: 1rem; color: var(--app-text-muted); }

/* --- 8. Floating FAB Menu --- */
.app.app-custom#html[data-bs-theme] .fab-menu { top: auto; bottom: 70px; left: auto; right: auto; opacity: 0; pointer-events: none; transform: translateY(15px); transition: var(--app-transition); padding: 0 !important;}
.app.app-custom#html[data-bs-theme] .fab.active .fab-menu { opacity: 1; pointer-events: auto; transform: translateY(0); }
.app.app-custom#html[data-bs-theme] .fab-menu .btn-dark:hover, .app.app-custom#html[data-bs-theme] .fab-menu .btn-info:hover, .app.app-custom#html[data-bs-theme] .fab-menu .btn-danger:hover, .app.app-custom#html[data-bs-theme] .fab-menu .btn-success:hover { color: #ffffff !important; }
.app.app-custom#html[data-bs-theme] .fab-menu .btn-light:hover { color: var(--app-text-primary) !important; }
.app.app-custom#html[data-bs-theme] .fabItem{border: 0 !important;}
.app.app-custom#html[data-bs-theme] .fabItem i { color: inherit !important; }

/* --- 9. PWA app install banner --- */
.app.app-custom#html[data-bs-theme] .install_app_sec, #installBtn { display: none; position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 1050; width: 90%; max-width: 420px; background: var(--app-glass-bg) !important; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255, 255, 255, 0.15); border-top: 1px solid rgba(255, 255, 255, 0.3); border-radius: 16px; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2); padding: 12px 16px; text-align: center; animation: slideDownFade 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.app.app-custom#html[data-bs-theme] .install_app_sec p, .app.app-custom#html[data-bs-theme] .install_app_sec span { color: var(--app-text-primary); margin: 0; font-size: 0.95rem; font-weight: 500; }
.app.app-custom#html[data-bs-theme] .install_app_sec button, .app.app-custom#html[data-bs-theme] .install_app_sec .btn { background: linear-gradient(135deg, var(--app-accent), var(--app-accent-secondary)) !important; color: #fff !important; border: none; border-radius: 12px; padding: 6px 12px; font-weight: 600; font-size: 0.8rem; box-shadow: 0 4px 10px rgba(var(--app-accent-rgb), 0.3); transition: all 0.3s ease; }
.app.app-custom#html[data-bs-theme] .install_app_sec button:hover, .app.app-custom#html[data-bs-theme] .install_app_sec .btn:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(var(--app-accent-rgb), 0.5); }
.app.app-custom#html[data-bs-theme] .install_app_sec .close-install { color: var(--app-text-muted) !important; font-size: 1.2rem; cursor: pointer; background: none !important; border: none; padding: 0 0 0 10px; transition: color 0.3s; box-shadow: none !important; }
.app.app-custom#html[data-bs-theme] .install_app_sec .close-install:hover { color: var(--app-text-primary) !important; }
@keyframes slideDownFade { 0% { transform: translate(-50%, -20px); opacity: 0; } 100% { transform: translate(-50%, 0); opacity: 1; } }

/* --- 10. Vendor recruitment addons --- */
.new_vend_ad_sec{max-width:1100px;border:1px solid var(--glass-border-color);overflow:hidden;transition:all .5s ease;}
.stat-card{transition:transform .4s cubic-bezier(.175,.885,.32,1.275);}
.stat-divider-cell:hover .stat-card{transform:translateY(-12px);}
.stat-icon-wrap img{filter:brightness(0) invert(1);width:65px;height:auto;transition:all .4s ease;opacity:.8;}
.stat-divider-cell:hover .stat-icon-wrap img{opacity:1;filter:brightness(0) invert(1) drop-shadow(0 0 8px var(--text-accent));transform:scale(1.1);}
.stat-divider-cell{border-right:1px solid rgba(255,255,255,0.1);border-bottom:1px solid rgba(255,255,255,0.1);transition:background .3s ease;}
.stat-divider-cell:hover{background:rgba(255,255,255,0.03);}
.stat-divider-cell:nth-child(4n),.stat-divider-cell:last-child{border-right:none;}
.growth-engine-card{border:1px solid rgba(255,255,255,0.05);}
.step-circle{width:60px;height:60px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.05);border-radius:50%;border:1px solid rgba(255,255,255,0.1);transition:all .3s cubic-bezier(.4,0,.2,1);}
.workflow-node:hover .step-circle{background:rgba(255,255,255,0.15);border-color:var(--text-accent);box-shadow:0 0 15px rgba(var(--accent-rgb),.3);transform:rotate(8deg);}
.step-circle img{filter:brightness(0) invert(1);width:30px;height:auto;}
.partnership-banner{transition:all .3s ease;}
.partnership-banner:hover{background:rgba(255,255,255,.08)!important;transform:translateX(5px);}
.banner-icon-animate img{transition:transform .6s ease;}
.partnership-banner:hover .banner-icon-animate img{transform:scale(1.2) rotate(-10deg);}
.btn-engine-primary{background:linear-gradient(135deg,#6366f1 0%,#a855f7 100%);border:none;color:#fff!important;box-shadow:0 8px 32px rgba(168,85,247,.3);transition:all .3s ease;}
.btn-engine-primary:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 15px 45px rgba(168,85,247,.5);}
.tracking-widest{letter-spacing:4px;}
@media(max-width:991px){
    .stat-divider-cell:nth-child(2n){border-right:none;}
    .workflow-node{width:30%;}
    .step-arrow{display:none;}
}
@media(max-width:575px){.stat-divider-cell{border-right:none;}}

/* --- 11. Realist8Pro Promo Banner Styles --- */
.realist-promo-card { background: var(--app-global-spotlight), var(--glass-sheen-gradient), var(--app-global-bg); border-radius: var(--app-radius); border: 1px solid rgba(var(--app-accent-rgb), 0.3); box-shadow: var(--app-shadow-elevation); position: relative; overflow: hidden; }
.max-w-700 { max-width: 700px; }
.promo-bg-overlay { 
    position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.8;
    background: 
        var(--app-global-spotlight),
        url('data:image/svg+xml,%3Csvg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"%3E%3Ccircle cx="2" cy="2" r="1.2" fill="white" fill-opacity="0.15"/%3E%3C/svg%3E'); 
}
.promo-glass-badge { background: rgba(var(--app-text-primary-rgb), 0.1); border: 1px solid var(--glass-border-color); backdrop-filter: var(--glass-blur); }
.promo-feature-list li { margin-bottom: 15px; display: flex; align-items: center; color: var(--app-text-primary); font-size: 0.95rem; }
.border-glass { border: 1px solid var(--glass-border-color); background: var(--app-glass-bg); }
.btn-glow { background: var(--app-accent); color: #fff !important; box-shadow: 0 0 20px rgba(var(--app-accent-rgb), 0.4); transition: var(--app-transition); border: 0; }
.btn-glow:hover { transform: translateY(-3px); box-shadow: 0 0 35px rgba(var(--app-accent-rgb), 0.6); opacity: 0.9; }
.promo-floating-img { animation: floatImg 5s ease-in-out infinite; max-height: 220px; width: auto; object-fit: contain; }
@keyframes floatImg { 0%,100% {transform: translateY(0);} 50% {transform: translateY(-10px);} }

/* --- 10. Vendor Work Order Layout Additions --- 
.app.app-custom#html[data-bs-theme] .object-fit-cover { object-fit: cover; }
.app.app-custom#html[data-bs-theme] .backdrop-blur { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.app.app-custom#html[data-bs-theme] .hover-lift { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.app.app-custom#html[data-bs-theme] .hover-lift:hover { transform: translateY(-3px); }
.app.app-custom#html[data-bs-theme] .hover-accent:hover { color: var(--app-accent) !important; }
.app.app-custom#html[data-bs-theme] .hover-bg-light:hover { background-color: rgba(var(--app-text-primary-rgb), 0.02); }

.app.app-custom#html[data-bs-theme] #payment_mode + .select2-container .select2-selection--multiple {
    min-height: 52px !important;
    padding: 8px 12px 8px 45px !important;
    border: none !important;
    background: transparent !important;
}
.app.app-custom#html[data-bs-theme] #payment_mode + .select2-container {
    background-color: var(--form-control-bg, rgba(var(--app-text-primary-rgb), 0.04)) !important; 
    border: 1px solid rgba(var(--app-text-primary-rgb), 0.1) !important; 
    border-radius: 12px;
}
*/

/* --- 12. Responsive Adjustments --- */
@media (max-width: 767.98px) {
  .app.app-custom#html[data-bs-theme] .glass-panel { padding: 30px 20px; border-radius: 20px; }
  .app.app-custom#html[data-bs-theme] .has-icon .form-control { padding-left: 45px !important; }
}





/* ==========================================================================
   FANCY BODY & PUBLIC LAYOUTS (Optimized to AppLayout.css Variables)
   ========================================================================== */

/* 1. Global Container & Typography */
/* .app.app-custom#html[data-bs-theme] .fancy-body {
    background-color: var(--bs-body-bg);
    background-image: var(--app-global-spotlight), var(--app-global-bg);
    background-attachment: fixed;
    background-size: cover;
    color: var(--app-text-primary);
    min-height: 100vh;
} */
.app.app-custom#html[data-bs-theme] .fancy-container { position: relative; z-index: 1; }
.app.app-custom#html[data-bs-theme] .fancy-body div { line-height: var(--app-line-height); }
.app.app-custom#html[data-bs-theme] .fancy-body .border-bottom { border-bottom: 1px solid var(--glass-border-color) !important; }

/* 2. Header & Nav Overrides */
.app.app-custom#html[data-bs-theme] .fancy-body .layout_header .navbar-nav .nav-link, 
.app.app-custom#html[data-bs-theme] .fancy-body .navbar .nav-item .nav-link.dropdown-toggle.show + .dropdown-menu.show .nav-item .nav-link { 
    color: var(--app-text-muted) !important; 
    background-color: transparent !important; 
}   
.app.app-custom#html[data-bs-theme] .fancy-body .layout_header .navbar-nav .nav-link:hover, 
.app.app-custom#html[data-bs-theme] .fancy-body .navbar .nav-item .nav-link.dropdown-toggle.show + .dropdown-menu.show .nav-item .nav-link:hover { 
    color: var(--app-text-primary) !important; 
    background-color: var(--app-bg-hover) !important; 
} 
.app.app-custom#html[data-bs-theme] .fancy-body .layout_header .dropdown-menu { 
    background-color: var(--app-glass-bg) !important; 
    backdrop-filter: var(--app-blur-strength);
    border: 1px solid var(--glass-border-color) !important; 
} 
.app.app-custom#html[data-bs-theme] .fancy-body .fabVertical { display: none !important; }
.app.app-custom#html[data-bs-theme] .fancy-body .position-sticky { background-color: transparent; }

/* 3. Form Containers (Registration & Alerts) */
.app.app-custom#html[data-bs-theme] .fancy-body .registration-form,
.app.app-custom#html[data-bs-theme] .fancy-body .registration-form .alert, 
.app.app-custom#html[data-bs-theme] .fancy-body .registration-form .callout,
.app.app-custom#html[data-bs-theme] .fancy-body .info-banner,
.app.app-custom#html[data-bs-theme] .fancy-body .extra-card {
    flex: 1;
    border-radius: var(--app-radius);
    padding: var(--app-spacing-lg);
    border: 1px solid var(--glass-border-color);
    background: var(--app-global-spotlight), var(--glass-sheen-gradient), var(--app-global-bg);
    backdrop-filter: var(--app-blur-strength);
    box-shadow: var(--app-shadow-sm);
    color: var(--app-text-primary);
}
.app.app-custom#html[data-bs-theme] .fancy-body .registration-form .form-title { color: var(--app-text-primary) !important; font-weight: var(--app-font-weight-bold) !important; margin-bottom: 20px !important; }
.app.app-custom#html[data-bs-theme] .fancy-body .registration-form .card-header { background-color: var(--app-bg-subpanel); border-bottom: 1px solid var(--glass-border-color); color: var(--app-text-primary) !important; font-weight: var(--app-font-weight-bold) !important; }
.app.app-custom#html[data-bs-theme] .fancy-body .registration-form .btn-close { filter: invert(1) grayscale(1) brightness(2); }

/* 4. Form Controls & Inputs */
.app.app-custom#html[data-bs-theme] .fancy-body .registration-form .form-label, 
.app.app-custom#html[data-bs-theme] .fancy-body .registration-form label,
.app.app-custom#html[data-bs-theme] .fancy-body .registration-form .form-check-label { color: var(--app-text-muted); }
.app.app-custom#html[data-bs-theme] .fancy-body .form-control::placeholder { color: rgba(var(--app-text-primary-rgb), 0.5) !important; } 

.app.app-custom#html[data-bs-theme] .fancy-body .registration-form .form-control,
.app.app-custom#html[data-bs-theme] .fancy-body .select2-search input,
.app.app-custom#html[data-bs-theme] .fancy-body .form-select {
    background-color: var(--app-bg-subpanel) !important; 
    border: 1px solid var(--glass-border-color) !important; 
    color: var(--app-text-primary) !important;
    border-radius: var(--app-radius-sm);
}
.app.app-custom#html[data-bs-theme] .fancy-body .registration-form .form-control:focus {
    background-color: var(--app-bg-hover); 
    border: 1px solid rgba(var(--app-accent-rgb), 0.5); 
    box-shadow: 0 0 0 0.25rem rgba(var(--app-accent-rgb), 0.25);
}

.app.app-custom#html[data-bs-theme] .fancy-body .registration-form .input-group-text {
    color: var(--app-text-primary) !important; 
    background-color: var(--app-bg-subpanel) !important; 
    border: 1px solid var(--glass-border-color); 
}
.app.app-custom#html[data-bs-theme] .fancy-body .registration-form .input-group-text svg { fill: var(--app-text-primary) !important; }
.app.app-custom#html[data-bs-theme] .fancy-body .registration-form .input-group-text:hover { background-color: var(--app-bg-hover) !important; border-color: rgba(var(--app-accent-rgb), 0.5); }
.app.app-custom#html[data-bs-theme] .fancy-body .registration-form .form-check-input:checked { background-color: var(--app-accent); border-color: var(--app-accent); box-shadow: 0 0 0 0.25rem rgba(var(--app-accent-rgb), 0.25); }
.app.app-custom#html[data-bs-theme] .fancy-body .registration-form .form-select option { background-color: var(--bs-body-bg) !important; color: var(--app-text-primary) !important; padding: 10px; }

/* Autofill Fix */
.app.app-custom#html[data-bs-theme] .fancy-body .registration-form .form-control:-webkit-autofill,
.app.app-custom#html[data-bs-theme] .fancy-body .registration-form .form-control:-webkit-autofill:hover, 
.app.app-custom#html[data-bs-theme] .fancy-body .registration-form .form-control:-webkit-autofill:focus, 
.app.app-custom#html[data-bs-theme] .fancy-body .registration-form .form-control:-webkit-autofill:active {
    -webkit-transition: background-color 9999s ease-in-out 0s !important;
    transition: background-color 9999s ease-in-out 0s !important;
    -webkit-text-fill-color: var(--app-text-primary) !important;
    caret-color: var(--app-text-primary);
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    box-shadow: 0 0 0 1000px transparent inset !important;
}

/* 5. Select2 Specifics */
.app.app-custom#html[data-bs-theme] .fancy-body .select2-container--default .select2-selection--single, 
.app.app-custom#html[data-bs-theme] .fancy-body .select2-container--default .select2-selection--multiple { background-color: var(--app-bg-subpanel) !important; border: 1px solid var(--glass-border-color) !important; color: var(--app-text-primary) !important; }
.app.app-custom#html[data-bs-theme] .fancy-body .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--app-text-muted) !important; }
.app.app-custom#html[data-bs-theme] .fancy-body .select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--app-text-muted) transparent transparent transparent !important; }
.app.app-custom#html[data-bs-theme] .fancy-body .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent var(--app-text-muted) transparent !important; }
.app.app-custom#html[data-bs-theme] .fancy-body .select2-dropdown { background-color: var(--app-glass-bg) !important; backdrop-filter: var(--app-blur-strength); border-color: var(--glass-border-color) !important; }
.app.app-custom#html[data-bs-theme] .fancy-body .select2-container--default .select2-results__option { color: var(--app-text-primary) !important; }
.app.app-custom#html[data-bs-theme] .fancy-body .select2-container--default .select2-results__option:not(:last-child) { border-bottom: 1px solid var(--glass-border-color) !important; }
.app.app-custom#html[data-bs-theme] .fancy-body .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: rgba(var(--app-accent-rgb), 0.3) !important; color: var(--app-text-primary) !important; }
.app.app-custom#html[data-bs-theme] .fancy-body .select2-container--default .select2-results__option[aria-selected=true] { background-color: rgba(var(--app-accent-rgb), 0.2) !important; color: var(--app-text-primary) !important; }
.app.app-custom#html[data-bs-theme] .fancy-body .select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: rgba(var(--app-accent-rgb), 0.2) !important; color: var(--app-text-primary) !important; border: 1px solid var(--glass-border-color) !important; } 

/* 6. Primary & Main Buttons */
.app.app-custom#html[data-bs-theme] .fancy-body .btn-main,
.app.app-custom#html[data-bs-theme] .fancy-body .registration-form .btn-primary {
    background: linear-gradient(90deg, var(--app-accent), var(--app-accent-secondary)); 
    border: none; 
    box-shadow: 0 8px 30px rgba(var(--app-accent-rgb), 0.22); 
    color: var(--app-text-primary);
    border-radius: var(--app-radius-sm);
    padding: 12px 16px;
    font-weight: var(--app-font-weight-bold);
    display: block;
    width: 100%;
    transition: var(--app-transition);
    text-decoration: none;
}
.app.app-custom#html[data-bs-theme] .fancy-body .btn-main:hover,
.app.app-custom#html[data-bs-theme] .fancy-body .registration-form .btn-primary:hover {
    background: linear-gradient(90deg, var(--app-accent-secondary), var(--app-accent)); 
    box-shadow: 0 12px 40px rgba(var(--app-accent-rgb), 0.32); 
}
.app.app-custom#html[data-bs-theme] .fancy-body .btn-ghost { background: var(--app-bg-subpanel); color: var(--app-text-muted); border-radius: var(--app-radius-sm); border: 1px solid var(--glass-border-color); padding: 10px 14px; width: 100%; transition: var(--app-transition-fast); }
.app.app-custom#html[data-bs-theme] .fancy-body .btn-ghost:hover { background: var(--app-bg-hover); color: var(--app-text-primary); }

/* 7. Input Tabs (Payment/Selection Boxes) */
.app.app-custom#html[data-bs-theme] .fancy-body .registration-form .input-tabs-list [id*="payment"]+label.box, 
.app.app-custom#html[data-bs-theme] .fancy-body .registration-form .input-tabs-list [class*="payment"]+label.box {
    border-radius: var(--app-radius-sm);
    padding: 10px 18px;
    font-weight: var(--app-font-weight-bold);
    border: 1px solid var(--glass-border-color);
    background: var(--app-glass-bg);
    color: var(--app-text-primary) !important;
    transition: var(--app-transition);
}
.app.app-custom#html[data-bs-theme] .fancy-body .registration-form .input-tabs-list [id*="payment"]:checked+label.box, 
.app.app-custom#html[data-bs-theme] .fancy-body .registration-form .input-tabs-list [class*="payment"]:checked+label.box,
.app.app-custom#html[data-bs-theme] .fancy-body .registration-form .input-tabs-list [id*="payment"]:checked+label.box:hover, 
.app.app-custom#html[data-bs-theme] .fancy-body .registration-form .input-tabs-list [class*="payment"]:checked+label.box:hover {    
    background: linear-gradient(90deg, var(--app-accent), var(--app-accent-secondary));
    box-shadow: 0 8px 30px rgba(var(--app-accent-rgb), 0.22);
    color: #fff !important;
    border-color: transparent;
}

/* 8. Animations & Effects */
.app.app-custom#html[data-bs-theme] .fancy-body .scroll-reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s ease-out, transform .6s ease-out; will-change: opacity, transform; }
.app.app-custom#html[data-bs-theme] .fancy-body .scroll-reveal.visible { opacity: 1; transform: translateY(0); }
.app.app-custom#html[data-bs-theme] .fancy-body .spotlight { position: fixed; pointer-events: none; width: 520px; height: 520px; transform: translate(-50%,-50%); background: radial-gradient(circle, rgba(var(--app-accent-rgb), 0.3) 0%, rgba(var(--app-text-primary-rgb), 0.02) 40%, transparent 60%); filter: blur(36px); border-radius: 50%; z-index: 1; mix-blend-mode: screen; transition: opacity .18s ease; }
.app.app-custom#html[data-bs-theme] .fancy-body .top-rays { position: fixed; top: -260px; left: 50%; transform: translateX(-50%); width: 1400px; height: 1400px; pointer-events: none; z-index: 0; mix-blend-mode: screen; opacity: .45; filter: blur(15px); }
.app.app-custom#html[data-bs-theme] .fancy-body .top-rays::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(var(--app-accent-rgb), .28) 0deg, rgba(var(--app-accent-secondary-rgb), .12) 8deg, rgba(var(--app-text-primary-rgb), 0.02) 16deg, transparent 20deg); animation: spinRays 40s linear infinite; opacity: .85; }
@keyframes spinRays { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* 9. Pricing Hero & Plan Cards */
.app.app-custom#html[data-bs-theme] .fancy-body .pricing-hero { position: relative; z-index: 2; padding: 64px 24px 24px; }
.app.app-custom#html[data-bs-theme] .fancy-body .pricing-hero h1 { font-size: 56px; font-weight: 600; margin-bottom: 8px; }
.app.app-custom#html[data-bs-theme] .fancy-body .pricing-hero p.lead { color: var(--app-text-muted); margin-bottom: 18px; }
.app.app-custom#html[data-bs-theme] .fancy-body .billing-toggle, .app.app-custom#html[data-bs-theme] .fancy-body .host-toggle { display: inline-flex; align-items: center; background: var(--app-bg-subpanel); border-radius: 999px; padding: 6px; border: 1px solid var(--glass-border-color); gap: 6px; }
.app.app-custom#html[data-bs-theme] .fancy-body .billing-toggle .btn, .app.app-custom#html[data-bs-theme] .fancy-body .host-toggle .pill { padding: 8px 18px !important; border-radius: 999px; color: var(--app-text-muted); font-weight: var(--app-font-weight-bold); border: 0; background: transparent; transition: var(--app-transition-fast); font-size: var(--app-font-size-sm); cursor: pointer; }
.app.app-custom#html[data-bs-theme] .fancy-body .billing-toggle .btn.active, .app.app-custom#html[data-bs-theme] .fancy-body .host-toggle .pill.active { background: linear-gradient(90deg, var(--app-accent), var(--app-accent-secondary)); color: #fff; box-shadow: 0 8px 30px rgba(var(--app-accent-rgb), 0.22); }
.app.app-custom#html[data-bs-theme] .fancy-body .plans-row { margin-top: 34px; z-index: 2; position: relative; 
    --minmax: 320px; --gt-auto-fill: auto-fill; --gt-auto-fit: auto-fit; display: grid !important; grid-template-columns: repeat(var(--gt-auto-fill), minmax(var(--minmax), 1fr)); grid-gap: 1rem 1rem;}
.app.app-custom#html[data-bs-theme] .fancy-body .plan-item{ display: flex; flex-direction: row; align-items: stretch; grid-gap: 0.25rem; flex: 1; margin: 0 !important; padding: 1rem !important; grid-gap: 1rem; border-radius: 0px; list-style-type: none; width: auto; max-width: 100%; overflow-x: hidden; overflow-y: hidden;}

.app.app-custom#html[data-bs-theme] .fancy-body .plan-card { background: var(--glass-surface-gradient), var(--app-glass-bg); background: var(--glass-surface-gradient), rgba(var(--app-text-primary-rgb),0.04);     backdrop-filter: var(--app-blur-strength); border: 1px solid var(--glass-border-color); border-radius: var(--app-radius); padding: var(--app-spacing-lg); transition: transform 0.28s cubic-bezier(0.2, 0.9, 0.3, 1), box-shadow 0.28s, border-color 0.28s; overflow: visible; position: relative; min-height: 520px; height: 100%; flex: 1;}
.app.app-custom#html[data-bs-theme] .fancy-body .plan-card:hover { transform: translateY(-8px); border-color: rgba(var(--app-accent-rgb), 0.35); box-shadow: var(--app-shadow-sm); }
.app.app-custom#html[data-bs-theme] .fancy-body .plan-title { font-size: 20px; font-weight: var(--app-font-weight-bold); margin-bottom: 8px; }
.app.app-custom#html[data-bs-theme] .fancy-body .plan-sub { color: var(--app-text-muted); font-size: var(--app-font-size-sm); margin-bottom: 12px; }
.app.app-custom#html[data-bs-theme] .fancy-body .price { font-weight: var(--app-font-weight-bold); font-size: 36px; margin: 6px 0; }
.app.app-custom#html[data-bs-theme] .fancy-body .price-small { color: var(--app-text-muted); font-size: var(--app-font-size-sm); }
.app.app-custom#html[data-bs-theme] .fancy-body .plan-list { margin-top: 14px; color: var(--app-text-muted); font-size: var(--app-font-size-sm); line-height: 1.9; }
.app.app-custom#html[data-bs-theme] .fancy-body .plan-list li { display: flex; gap: 10px; align-items: flex-start; }
.app.app-custom#html[data-bs-theme] .fancy-body .plan-list li .dot { width: 18px; height: 18px; border-radius: 50%; background: var(--app-bg-subpanel); display: inline-flex; align-items: center; justify-content: center; color: var(--bs-success); font-weight: var(--app-font-weight-bold); font-size: 0.6rem; }

/* 10. Secondary Page Elements (Compare Table & Extra Cards) */
.app.app-custom#html[data-bs-theme] .fancy-body .banner-text { font-weight: var(--app-font-weight-bold); font-size: 20px; }
.app.app-custom#html[data-bs-theme] .fancy-body .banner-sub { color: var(--app-text-muted); margin-top: 6px; }
.app.app-custom#html[data-bs-theme] .fancy-body .extra-section { margin-top: 36px; display: flex; gap: 18px; align-items: center; }
.app.app-custom#html[data-bs-theme] .fancy-body .extra-left { flex: 1; }
.app.app-custom#html[data-bs-theme] .fancy-body .extra-cards { display: flex; gap: 18px; flex: 2; }
.app.app-custom#html[data-bs-theme] .fancy-body .included-section { margin-top: 80px; }
.app.app-custom#html[data-bs-theme] .fancy-body .included-title { font-size: 32px; font-weight: var(--app-font-weight-bold); margin-bottom: 24px; }
.app.app-custom#html[data-bs-theme] .fancy-body .compare-wrap { margin-top: 36px; }
.app.app-custom#html[data-bs-theme] .fancy-body .compare-card { background-color: var(--app-glass-bg); background: var(--glass-surface-gradient), rgba(var(--app-text-primary-rgb),0.04); backdrop-filter: var(--app-blur-strength); border: 1px solid var(--glass-border-color); border-radius: var(--app-radius); padding: var(--app-spacing-md); }
.app.app-custom#html[data-bs-theme] .fancy-body .included-table table { color: var(--app-text-muted); table-layout: fixed; }
.app.app-custom#html[data-bs-theme] .fancy-body .included-table thead th { color: var(--app-text-primary); font-weight: var(--app-font-weight-bold); font-size: 1rem; padding: 14px; border-bottom: 1px solid var(--glass-border-color); background-color: transparent; }
.app.app-custom#html[data-bs-theme] .fancy-body .included-table td { padding: 14px; border-bottom: 1px solid rgba(var(--app-text-primary-rgb), 0.05); color: var(--app-text-muted); background-color: transparent; }
.app.app-custom#html[data-bs-theme] .fancy-body .included-table tbody tr td:first-child { color: var(--app-text-primary); }
.app.app-custom#html[data-bs-theme] .fancy-body .included-table tbody tr:last-child td { border-bottom: none; }
.app.app-custom#html[data-bs-theme] .fancy-body .included-tick { width: 18px; height: 18px; border-radius: 50%; background: var(--bs-success); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(var(--bs-success-rgb), 0.14); color: #fff; font-size: .8rem; }
.app.app-custom#html[data-bs-theme] .fancy-body .included-tick::after { content: '✓'; line-height: 1; }
.app.app-custom#html[data-bs-theme] .fancy-body .included-cross { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .5rem; color: var(--app-text-muted); background: var(--app-bg-subpanel); border: 1px solid var(--glass-border-color); }
.app.app-custom#html[data-bs-theme] .fancy-body .included-cross::after { content: "✕"; transform: scale(1.1); }

/* 11. FAQ Accordions */
.app.app-custom#html[data-bs-theme] .fancy-body .faq-title { font-size: 32px; font-weight: var(--app-font-weight-bold); margin-bottom: 24px; }
.app.app-custom#html[data-bs-theme] .fancy-body .faq .faq-sidebar { background: var(--app-bg-active); border: 1px solid var(--glass-border-color); border-radius: 999px; padding: 8px 12px; color: var(--app-text-primary); font-weight: var(--app-font-weight-medium); display: inline-flex; align-items: center; margin-bottom: 20px; font-size: var(--app-font-size-sm); }
.app.app-custom#html[data-bs-theme] .fancy-body .faq .faq-sidebar svg { margin-right: 8px; }
.app.app-custom#html[data-bs-theme] .fancy-body .faq .accordion-item { background: var(--glass-surface-gradient), rgba(var(--app-text-primary-rgb),0.04); /* background: transparent; border: 1px solid transparent; border-bottom: 1px solid var(--glass-border-color); margin-bottom: 1px; border-radius: 0; */ overflow: hidden; }
.app.app-custom#html[data-bs-theme] .fancy-body .faq .accordion-header { border-bottom: 1px solid transparent; /* padding: 10px 0; */ }
.app.app-custom#html[data-bs-theme] .fancy-body .faq .accordion-button { color: var(--app-text-primary); background: transparent; font-weight: var(--app-font-weight-bold); /* padding: 14px 0; */ font-size: 1.1rem; position: relative; padding-right: 2.6rem; overflow: visible; box-shadow: none; }
.app.app-custom#html[data-bs-theme] .fancy-body .faq .accordion-button::before, .app.app-custom#html[data-bs-theme] .fancy-body .faq .accordion-button::after { position: absolute; right: .8rem; top: 50%; transform: translateY(-50%); width: 1.6rem; height: 1.6rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; line-height: 1; pointer-events: none; transition: var(--app-transition-fast); will-change: opacity, transform; background-image: unset; border: unset; }
.app.app-custom#html[data-bs-theme] .fancy-body .faq .accordion-button::before { content: "+"; color: var(--app-text-muted); opacity: 1; transform: translateY(-50%) rotate(0deg) scale(1); }
.app.app-custom#html[data-bs-theme] .fancy-body .faq .accordion-button::after { content: "×"; color: var(--app-text-primary); opacity: 0; transform: translateY(-45%) rotate(20deg) scale(.9); }
.app.app-custom#html[data-bs-theme] .fancy-body .faq .accordion-button.collapsed::before { opacity: 1; transform: translateY(-50%) rotate(0deg) scale(1); }
.app.app-custom#html[data-bs-theme] .fancy-body .faq .accordion-button.collapsed::after { opacity: 0; transform: translateY(-45%) rotate(20deg) scale(.9); }
.app.app-custom#html[data-bs-theme] .fancy-body .faq .accordion-button:not(.collapsed)::before { opacity: 0; transform: translateY(-55%) rotate(-45deg) scale(.85); }
.app.app-custom#html[data-bs-theme] .fancy-body .faq .accordion-button:not(.collapsed)::after { opacity: 1; transform: translateY(-50%) rotate(0deg) scale(1); }
.app.app-custom#html[data-bs-theme] .fancy-body .faq .accordion-body { color: var(--app-text-muted); /* padding: 0 0 20px 0; */ font-size: var(--app-font-size-base); }
.app.app-custom#html[data-bs-theme] .fancy-body .faq .accordion-body p { margin-bottom: 12px; }
.app.app-custom#html[data-bs-theme] .fancy-body .faq .accordion-button{color: var(--app-text-primary); background: transparent; transition: var(--app-transition);}
.app.app-custom#html[data-bs-theme] .fancy-body .faq .accordion-body{transition: var(--app-transition);}

/* 12. Fancy Tabs (Media Viewers) */
.app.app-custom#html[data-bs-theme] .fancy-body .fancy-tabs { margin: 40px auto; max-width: 1280px; font-family: inherit; background: var(--app-glass-bg); backdrop-filter: var(--app-blur-strength); border: 1px solid var(--glass-border-color); border-radius: var(--app-radius); box-shadow: var(--app-shadow-sm); padding: .5rem; }
.app.app-custom#html[data-bs-theme] .fancy-body .fancy-tabs-wrapper { background: var(--bs-body-secondary-bg); border-radius: calc(var(--app-radius) - 4px); padding: 0.5rem; }
.app.app-custom#html[data-bs-theme] .fancy-body .fancy-tabs-nav { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.app.app-custom#html[data-bs-theme] .fancy-body .fancy-tab-btn { background: var(--app-bg-subpanel); border: 1px solid var(--glass-border-color); border-radius: var(--app-radius-sm); box-shadow: inset 0 0 4px rgba(var(--app-text-primary-rgb), 0.1); justify-content: flex-start; padding: 16px; cursor: pointer; transition: var(--app-transition-fast); }
.app.app-custom#html[data-bs-theme] .fancy-body .fancy-tab-btn:hover { border-color: rgba(var(--app-accent-rgb), 0.3); background: var(--app-bg-hover); }
.app.app-custom#html[data-bs-theme] .fancy-body .fancy-tab-btn.active { backdrop-filter: var(--app-blur-strength); background: var(--glass-surface-gradient), rgba(var(--app-accent-rgb), 0.15); border: 1px solid rgba(var(--app-accent-rgb), 0.3); }
.app.app-custom#html[data-bs-theme] .fancy-body .fancy-tab-panel { display: none; overflow: hidden; min-height: 350px; max-height: 350px; position: relative; border-radius: var(--app-radius-sm); margin-top: 1rem; opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease; }
.app.app-custom#html[data-bs-theme] .fancy-body .fancy-tab-panel.active { display: block; opacity: 1; transform: translateY(0); }
.app.app-custom#html[data-bs-theme] .fancy-body .fancy-tab-panel img, .app.app-custom#html[data-bs-theme] .fancy-body .fancy-tab-panel video { width: 100%; height: 100%; max-height: 350px; object-fit: cover; border-radius: var(--app-radius-sm); display: block; box-shadow: var(--app-shadow-sm); }
.app.app-custom#html[data-bs-theme] .fancy-body .fancy-tab-panel video { background: #000; }

/* 13. Mobile Responsiveness */
@media (max-width:992px) { 
    .app.app-custom#html[data-bs-theme] .fancy-body .plan-card { min-height: auto; }
    .app.app-custom#html[data-bs-theme] .fancy-body .pricing-hero h1 { font-size: 40px; }
    .app.app-custom#html[data-bs-theme] .fancy-body .extra-section { flex-direction: column; gap: 12px; align-items: flex-start; }
    .app.app-custom#html[data-bs-theme] .fancy-body .extra-cards { flex-direction: column; width: 100%; }
    .app.app-custom#html[data-bs-theme] .fancy-body .extra-left { width: 100%; }
    .app.app-custom#html[data-bs-theme] .fancy-body .info-banner { flex-direction: column; align-items: flex-start; gap: 16px; }
    .app.app-custom#html[data-bs-theme] .fancy-body .info-banner .btn-main { width: 100%; }
    .app.app-custom#html[data-bs-theme] .fancy-body .included-table table { table-layout: auto; }
    .app.app-custom#html[data-bs-theme] .fancy-body .faq-title { font-size: 28px; }
}