/**
 * Modal Bouncer — backdrop, dialog, accessibility, reduced-motion
 *
 * @package     J2Commerce
 * @subpackage  plg_j2commerce_app_modalbouncer
 * @copyright   (C)2024-2026 J2Commerce, LLC <https://www.j2commerce.com>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

/* ============================================================
   Backdrop — fixed full-screen overlay that blocks interaction
   ============================================================ */
.j2c-modalbouncer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 10050; /* above most CMS chrome */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.65);
    overflow-y: auto;
    padding: 1rem;

    /* Entrance animation */
    animation: j2c-mb-fade-in 0.18s ease-out both;
}

/* ============================================================
   Dialog container
   ============================================================ */
.j2c-modalbouncer-backdrop .j2c-modalbouncer-dialog {
    width: 100%;
    max-width: 480px;
    margin: auto;
    /* Neutralize Bootstrap .modal-dialog / .modal-dialog-centered geometry,
       which assumes a .modal ancestor we intentionally do not use. */
    min-height: 0;
    pointer-events: auto;
    animation: j2c-mb-scale-in 0.18s ease-out both;
}

/* Self-contained card — do NOT rely on the host template shipping
   Bootstrap's .modal-content component CSS (many storefront templates
   only style .btn-* / form-control, leaving .modal-content transparent).
   These namespaced rules guarantee a styled card in BS5, UIkit, or any
   template. Scoped under the backdrop so nothing else is affected. */
.j2c-modalbouncer-backdrop .j2c-modalbouncer-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #fff;
    color: #212529;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

.j2c-modalbouncer-backdrop .modal-header {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

.j2c-modalbouncer-backdrop .modal-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.4;
}

.j2c-modalbouncer-backdrop .modal-body {
    padding: 1.25rem;
}

.j2c-modalbouncer-backdrop .modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.875rem 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

/* Submit button fallback styling (only applies if the host template
   does not already style .btn / .btn-primary). */
.j2c-modalbouncer-backdrop .j2c-modalbouncer-submit {
    cursor: pointer;
}

/* ============================================================
   Field group spacing
   ============================================================ */
.j2c-modalbouncer-fields .j2c-mb-field-group {
    margin-bottom: 1rem;
}

.j2c-modalbouncer-fields .j2c-mb-field-group:last-child {
    margin-bottom: 0;
}

.j2c-mb-label {
    display: block;
    margin-bottom: 0.35rem;
    font-weight: 500;
}

/* Self-contained input styling so date/text/select render as a proper
   control even when the host template lacks .form-control rules. */
.j2c-modalbouncer-fields input:not([type="checkbox"]):not([type="radio"]),
.j2c-modalbouncer-fields select {
    display: block;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    box-sizing: border-box;
}

/* Checkbox rows use Bootstrap's .form-check markup; provide a fallback
   layout for templates that do not ship .form-check CSS. */
.j2c-modalbouncer-fields .form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.j2c-modalbouncer-fields .form-check-input {
    width: 1.1rem;
    height: 1.1rem;
    margin-top: 0.2rem;
    flex: 0 0 auto;
}

.j2c-modalbouncer-fields .form-check-label {
    margin-bottom: 0;
    font-weight: 400;
}

/* ============================================================
   Framework-independent fallbacks for the utility/component
   classes the JS toggles, scoped to the backdrop so they never
   leak. Guarantees hide/show + alert styling on templates that
   ship neither full Bootstrap nor UIkit CSS.
   ============================================================ */
.j2c-modalbouncer-backdrop .d-none,
.j2c-modalbouncer-backdrop .uk-hidden,
.j2c-modalbouncer-backdrop .visually-hidden {
    /* visually-hidden keeps a11y behavior via the rule below */
}

.j2c-modalbouncer-backdrop .d-none,
.j2c-modalbouncer-backdrop .uk-hidden {
    display: none !important;
}

.j2c-modalbouncer-backdrop .alert-danger {
    padding: 0.625rem 0.875rem;
    color: #842029;
    background-color: #f8d7da;
    border: 1px solid #f5c2c7;
    border-radius: 0.375rem;
}

.j2c-modalbouncer-fields .invalid-feedback {
    color: #dc3545;
    font-size: 0.875em;
    margin-top: 0.25rem;
}

/* ============================================================
   Error region — hidden by default, shown via JS
   ============================================================ */
.j2c-modalbouncer-error {
    min-height: 1.5em;
}

/* ============================================================
   Animations
   ============================================================ */
@keyframes j2c-mb-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes j2c-mb-scale-in {
    from { transform: scale(0.94); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

/* ============================================================
   prefers-reduced-motion — disable animations for users who
   prefer reduced motion (accessibility)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .j2c-modalbouncer-backdrop,
    .j2c-modalbouncer-dialog {
        animation: none;
    }
}

/* ============================================================
   UIkit 3 overrides — position + z-index corrections when
   UIkit's own modal CSS might interfere
   ============================================================ */
.j2c-modalbouncer-backdrop .uk-modal-dialog {
    max-width: 480px;
    width: 100%;
    border-radius: 0.375rem;
    padding: 2rem;
    background: #fff;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
}

/* focus-visible ring — use currentColor so it works on both BS5 and UIkit themes */
.j2c-modalbouncer-backdrop :focus-visible {
    outline: 3px solid currentColor;
    outline-offset: 2px;
}

/* Debug reset button — only injected when the plugin's Debug param is on */
.j2c-mb-debug-reset {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 100000;
    opacity: 0.85;
}
.j2c-mb-debug-reset:hover {
    opacity: 1;
}

/* Yes/No confirmation field */
.j2c-mb-yesno-group {
    max-width: 320px;
    margin: 0 auto;
}

.j2c-mb-yesno-btn {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.6rem 1rem;
    border: 2px solid currentColor;
    background-color: transparent;
}

.j2c-mb-yesno-btn.active {
    background-color: var(--bs-primary, #0d6efd);
    border-color: var(--bs-primary, #0d6efd);
    color: #fff;
}

.j2c-mb-yesno-disclaimer {
    margin-top: 0.75rem;
}