/*!
 * hcg-modal - Vanilla JavaScript popup modal
 * HTML Code Generator (https://www.html-code-generator.com/javascript/modal-popup-library)
 * License: MIT
 */

.hcg-modal {
    /* - Theming hooks: override these to restyle without editing the file. */
    --hcg-modal-overlay: rgba(0, 0, 0, 0.5);
    --hcg-modal-bg: #ffffff;
    --hcg-modal-color: #1f2328;
    --hcg-modal-radius: 10px;
    --hcg-modal-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    --hcg-modal-border: #e1e4e8;
    --hcg-modal-z: 9999;
    --hcg-modal-duration: 200ms;
    --hcg-modal-pad: 16px 20px;

    --hcg-modal-primary: #2563eb;
    --hcg-modal-primary-text: #ffffff;
    --hcg-modal-secondary: #f3f4f6;
    --hcg-modal-secondary-text: #1f2328;
    --hcg-modal-danger: #dc2626;
    --hcg-modal-danger-text: #ffffff;

    --hcg-modal-width: 480px;

    position: fixed;
    inset: 0;
    z-index: var(--hcg-modal-z);
    display: flex;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    background: var(--hcg-modal-overlay);
    opacity: 0;
    transition: opacity var(--hcg-modal-duration) ease;
    overflow-y: auto;
}

.hcg-modal *,
.hcg-modal *::before,
.hcg-modal *::after {
    box-sizing: border-box;
}

.hcg-modal.hcg-modal--visible {
    opacity: 1;
}

/* - Positions. */
.hcg-modal--pos-center { align-items: center; }
.hcg-modal--pos-top { align-items: flex-start; }
.hcg-modal--pos-bottom { align-items: flex-end; }

/* - Dialog box. */
.hcg-modal-dialog {
    position: relative;
    width: 100%;
    max-width: var(--hcg-modal-width);
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    background: var(--hcg-modal-bg);
    color: var(--hcg-modal-color);
    border-radius: var(--hcg-modal-radius);
    box-shadow: var(--hcg-modal-shadow);
    outline: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.5;
}

/* - Custom box mode (box option): the dialog holds the user's element directly,
   with no header/body/footer wrappers. Clip it to the dialog's rounded corners. */
.hcg-modal-dialog--box {
    overflow: hidden;
}

/* - Sizes. */
.hcg-modal--small { --hcg-modal-width: 360px; }
.hcg-modal--medium { --hcg-modal-width: 480px; }
.hcg-modal--large { --hcg-modal-width: 760px; }

.hcg-modal--fullscreen {
    padding: 0;
}
.hcg-modal--fullscreen .hcg-modal-dialog {
    max-width: none;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
}

/* - Scroll behavior.
   scrollBody true (default): dialog is capped to the viewport, header and footer
   stay pinned, and only the body scrolls (see .hcg-modal-body rule below).
   scrollBody false: the dialog grows to its full content height and the whole
   dialog scrolls inside the overlay (.hcg-modal--scroll-all). Top-aligned so the
   top is always reachable even when the content is taller than the viewport. */
.hcg-modal--scroll-all {
    align-items: flex-start;
}
.hcg-modal--scroll-all .hcg-modal-dialog {
    max-height: none;
}
.hcg-modal--scroll-all .hcg-modal-body {
    overflow: visible;
}

/* - Header. */
.hcg-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: var(--hcg-modal-pad);
    border-bottom: 1px solid var(--hcg-modal-border);
}

.hcg-modal-title {
    flex: 1 1 auto;
    margin: 0;
    font-size: 17px;
    font-weight: 600;
}

.hcg-modal-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #57606a;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.hcg-modal-close:hover {
    background: var(--hcg-modal-secondary);
    color: var(--hcg-modal-color);
}

/* - Body. */
.hcg-modal-body {
    flex: 1 1 auto;
    padding: var(--hcg-modal-pad);
    overflow-y: auto;
    word-wrap: break-word;
}

/* - Footer. */
.hcg-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: var(--hcg-modal-pad);
    border-top: 1px solid var(--hcg-modal-border);
}

.hcg-modal-btn {
    appearance: none;
    border: 1px solid transparent;
    border-radius: 7px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s ease, background 0.15s ease;
}
.hcg-modal-btn:hover { filter: brightness(0.95); }
.hcg-modal-btn:active { filter: brightness(0.9); }

.hcg-modal-btn--primary {
    background: var(--hcg-modal-primary);
    color: var(--hcg-modal-primary-text);
}
.hcg-modal-btn--secondary {
    background: var(--hcg-modal-secondary);
    color: var(--hcg-modal-secondary-text);
    border-color: var(--hcg-modal-border);
}
.hcg-modal-btn--danger {
    background: var(--hcg-modal-danger);
    color: var(--hcg-modal-danger-text);
}

/* - Accessible focus rings: only shown for keyboard users. */
.hcg-modal-btn:focus-visible,
.hcg-modal-close:focus-visible {
    outline: 2px solid var(--hcg-modal-primary);
    outline-offset: 2px;
}

/* - Optional glassmorphism theme: opt in with className: 'hcg-modal--glass'. */
.hcg-modal--glass {
    --hcg-modal-overlay: rgba(0, 0, 0, 0.25);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.hcg-modal--glass .hcg-modal-dialog {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
.hcg-modal--glass .hcg-modal-header,
.hcg-modal--glass .hcg-modal-footer {
    border-color: rgba(0, 0, 0, 0.08);
}

/* - Auto-close timer progress bar (timer + timerProgressBar options). */
.hcg-modal-timer-bar {
    height: 4px;
    width: 100%;
    background: var(--hcg-modal-primary);
    border-bottom-left-radius: var(--hcg-modal-radius);
    border-bottom-right-radius: var(--hcg-modal-radius);
}

/* - Scroll lock while any modal is open. We lock the root element only. The root is
   the viewport's scroll container, so this stops wheel and touch scrolling, while
   leaving <body> as a normal (non-BFC) block. Locking <body> too would turn it into a
   block formatting context, which stops its first child's top margin from collapsing
   and visibly nudges the whole page down by that margin when a modal opens. The body
   still gets the class below for the scrollbar-width padding compensation. */
html.hcg-modal-open {
    overflow: hidden;
}

/* - Scrollbar-shift compensation. Removing the scrollbar (overflow: hidden) widens
   the viewport, which would shift the page and the centered modal to the right.
   --hcg-modal-sbw is set by the JS to the scrollbar width; reserving that width on the
   root keeps the body's available width unchanged, so the page (including centered and
   max-width layouts) does not move. We pad the root, not the body, so we never clobber
   any padding the host page already set on <body>. The variable is 0 when there is no
   scrollbar (or on overlay scrollbars, e.g. macOS / mobile), so this is a no-op then.

   The overlay is padded too so the dialog stays centered when its own scrollbar is
   gone - but ONLY in the default mode. In scroll-all mode the overlay itself scrolls
   and already shows a scrollbar, so adding the compensation there would push the
   dialog off-centre and produce a second (doubled) scrollbar. */
html.hcg-modal-open {
    padding-right: var(--hcg-modal-sbw, 0px);
}
/* - Compensate the overlay only in the default scroll mode, and never for fullscreen
   (which must stay edge-to-edge) or scroll-all (whose overlay has its own scrollbar). */
html.hcg-modal-open .hcg-modal:not(.hcg-modal--scroll-all):not(.hcg-modal--fullscreen) {
    padding-right: calc(20px + var(--hcg-modal-sbw, 0px));
}

/* - Animations: start states, cleared when --visible is added.
   The transform curve has a gentle overshoot (the 1.56 control point) so the
   dialog springs in; opacity stays on a plain ease to avoid a flicker. */
.hcg-modal-dialog {
    transition: transform var(--hcg-modal-duration) cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity var(--hcg-modal-duration) ease;
}

.hcg-modal--anim-fade .hcg-modal-dialog {
    opacity: 0;
}
.hcg-modal--anim-slide .hcg-modal-dialog {
    transform: translateY(32px);
    opacity: 0;
}
/* - Bottom-sheet style: slide up from the very bottom edge.
   The :not(.hcg-modal--visible) guard is required: these position-specific selectors
   are more specific than the .hcg-modal--visible reset below, so without it the start
   transform would win even when open and the dialog would never settle into place
   (pushing it off-screen and forcing an overlay scrollbar). */
.hcg-modal--pos-bottom.hcg-modal--anim-slide:not(.hcg-modal--visible) .hcg-modal-dialog {
    transform: translateY(100%);
}
.hcg-modal--pos-top.hcg-modal--anim-slide:not(.hcg-modal--visible) .hcg-modal-dialog {
    transform: translateY(-24px);
}

/* - Pop: a zoom-burst. Starts much smaller with a blur and barely any vertical
   travel, so it reads as a scale-up pop, clearly distinct from the vertical slide. */
.hcg-modal--anim-pop .hcg-modal-dialog {
    transform: scale(0.6);
    opacity: 0;
    filter: blur(8px);
}
.hcg-modal--visible.hcg-modal--anim-pop .hcg-modal-dialog {
    transform: none;
    opacity: 1;
    filter: blur(0);
}

.hcg-modal--visible .hcg-modal-dialog {
    transform: none;
    opacity: 1;
}

/* - Respect reduced motion: no transitions, instant show/hide. */
@media (prefers-reduced-motion: reduce) {
    .hcg-modal,
    .hcg-modal-dialog {
        transition: none !important;
    }
    .hcg-modal--anim-fade .hcg-modal-dialog,
    .hcg-modal--anim-slide .hcg-modal-dialog,
    .hcg-modal--anim-pop .hcg-modal-dialog {
        transform: none;
        opacity: 1;
        filter: none;
    }
}