/* E-Seal certificate popover + floating action */

:root {
    --kg3-fab-size: 3.5rem;
    --kg3-fab-gap: 0.75rem;
    --kg3-fab-inset: 1.5rem;
    --kg3-float-stack-offset: calc(
        var(--kg3-fab-inset) + (var(--kg3-fab-size) + var(--kg3-fab-gap)) * 2
    );
}

.kg3-eseal__fab {
    flex-shrink: 0;
    align-self: flex-end;
    display: block;
    height: var(--kg3-fab-size);
    width: var(--kg3-fab-size);
    min-width: var(--kg3-fab-size);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    line-height: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.kg3-eseal__fab:focus-visible {
    outline: none;
}

.kg3-eseal__fab:focus-visible .kg3-eseal__fab-img {
    outline: 2px solid #ed1d24;
    outline-offset: 3px;
    border-radius: 0.25rem;
}

.kg3-eseal__fab-img {
    display: block;
    width: var(--kg3-fab-size);
    height: var(--kg3-fab-size);
    object-fit: contain;
    object-position: center;
    pointer-events: none;
    filter: drop-shadow(0 3px 8px rgb(15 23 42 / 0.12));
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.kg3-eseal__fab:hover .kg3-eseal__fab-img {
    transform: scale(1.04);
}

.kg3-eseal__fab:active .kg3-eseal__fab-img {
    transform: scale(0.98);
}

.kg3-eseal-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: max(1.25rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
        max(1.25rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
    pointer-events: none;
    visibility: hidden;
}

.kg3-eseal-modal.is-open {
    pointer-events: auto;
    visibility: visible;
}

.kg3-eseal-modal__backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    padding: 0;
    background: rgb(15 23 42 / 0);
    backdrop-filter: blur(0);
    cursor: pointer;
    transition:
        background 0.28s ease,
        backdrop-filter 0.28s ease;
}

.kg3-eseal-modal.is-open .kg3-eseal-modal__backdrop {
    background: rgb(15 23 42 / 0.52);
    backdrop-filter: blur(6px);
}

.kg3-eseal-modal__stage {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.625rem;
    width: min(100%, calc(36rem + 3.25rem));
    max-height: min(92vh, 44rem);
    opacity: 0;
    transform: translateY(12px) scale(0.97);
    transition:
        opacity 0.28s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.kg3-eseal-modal.is-open .kg3-eseal-modal__stage {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.kg3-eseal-modal__close {
    grid-column: 2;
    grid-row: 1;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-top: 0.125rem;
    border: 0;
    border-radius: 9999px;
    background: rgb(255 255 255 / 0.96);
    color: #0f172a;
    box-shadow: 0 4px 16px rgb(15 23 42 / 0.18);
    cursor: pointer;
    transition:
        background 0.15s ease,
        color 0.15s ease,
        transform 0.15s ease;
}

.kg3-eseal-modal__close:hover {
    background: #fff;
    color: #ed1d24;
    transform: scale(1.05);
}

.kg3-eseal-modal__close:focus-visible {
    outline: 2px solid #ed1d24;
    outline-offset: 2px;
}

.kg3-eseal-modal__close i {
    font-size: 1.125rem;
}

.kg3-eseal-modal__dialog {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    max-height: min(92vh, 40rem);
    overflow: auto;
    border-radius: 0.625rem;
    background: #fff;
    box-shadow:
        0 28px 56px rgb(15 23 42 / 0.22),
        0 8px 24px rgb(15 23 42 / 0.12);
    -webkit-overflow-scrolling: touch;
}

.kg3-eseal-modal__image {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: top;
}

body.kg3-eseal-open {
    overflow: hidden;
}

@media (max-width: 380px) {
    :root {
        --kg3-fab-inset: 1rem;
    }

    .kg3-eseal-modal__stage {
        width: min(100%, calc(100vw - 2rem));
        gap: 0.5rem;
    }

    .kg3-eseal-modal__close {
        width: 2.25rem;
        height: 2.25rem;
    }

    .kg3-eseal-modal__dialog {
        border-radius: 0.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .kg3-eseal__fab:hover .kg3-eseal__fab-img,
    .kg3-eseal__fab:active .kg3-eseal__fab-img,
    .kg3-eseal-modal__close:hover {
        transform: none;
    }

    .kg3-eseal-modal__backdrop,
    .kg3-eseal-modal__stage {
        transition: none;
    }
}