/* ============================================================================
   NarneTech.Shop — installable app (PWA) UI
   ----------------------------------------------------------------------------
   Shared by every surface: the storefront (tenant colours), the Client/Platform
   panels and the Partner portal (NarneTech colours). The brand colour is read
   from whichever custom property the surface already defines, so no surface
   needs its own copy of these rules.
   ========================================================================== */

:root {
    /* --nt-primary is set per tenant by the storefront layout; --nt-accent is the admin brand. */
    --nt-pwa-brand: var(--nt-primary, var(--nt-accent, #4154f1));
    --nt-pwa-radius: .85rem;
    --nt-pwa-shadow: 0 .5rem 2rem rgba(1, 41, 112, .18);
}

/* ---- install invitation banner (bottom sheet) ------------------------------------------- */
.nt-pwa-banner {
    position: fixed;
    left: 50%;
    bottom: 0;
    z-index: 1085; /* under Bootstrap modals (1055+ backdrop) but above floating widgets */
    width: min(30rem, calc(100% - 1.5rem));
    transform: translate(-50%, 140%);
    margin-bottom: .75rem;
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem 1rem;
    background: #fff;
    border: 1px solid rgba(1, 41, 112, .08);
    border-radius: var(--nt-pwa-radius);
    box-shadow: var(--nt-pwa-shadow);
    opacity: 0;
    visibility: hidden;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .25s ease, visibility .25s;
}

.nt-pwa-banner.is-open {
    transform: translate(-50%, 0);
    opacity: 1;
    visibility: visible;
}

.nt-pwa-banner-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: .6rem;
    object-fit: contain;
    background: #fff;
    border: 1px solid rgba(1, 41, 112, .08);
}

.nt-pwa-banner-body { flex: 1 1 auto; min-width: 0; }

.nt-pwa-banner-title {
    display: block;
    font-weight: 600;
    font-size: .92rem;
    line-height: 1.25;
    color: #012970;
    /* Long shop names must not push the buttons off a 360px screen. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nt-pwa-banner-text {
    display: block;
    font-size: .78rem;
    color: #6c757d;
    line-height: 1.3;
}

.nt-pwa-banner-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.nt-pwa-btn {
    border: 0;
    border-radius: .5rem;
    padding: .48rem 1rem;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.2;
    color: #fff;
    background: var(--nt-pwa-brand);
    cursor: pointer;
    white-space: nowrap;
}

.nt-pwa-btn:active { filter: brightness(.92); }

.nt-pwa-btn-ghost {
    border: 0;
    background: transparent;
    color: #9aa2b1;
    font-size: 1.15rem;
    line-height: 1;
    padding: .35rem .5rem;
    cursor: pointer;
}

.nt-pwa-btn-ghost:hover { color: #6c757d; }

/* ---- "Add to Home Screen" walkthrough ---------------------------------------------------- */
.nt-pwa-modal {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

.nt-pwa-modal.is-open { display: flex; }

.nt-pwa-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(1, 41, 112, .45);
}

.nt-pwa-modal-card {
    position: relative;
    width: min(24rem, 100%);
    background: #fff;
    border-radius: var(--nt-pwa-radius);
    box-shadow: var(--nt-pwa-shadow);
    padding: 1.75rem 1.5rem 1.35rem;
    text-align: center;
}

.nt-pwa-modal-icon {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border-radius: .75rem;
    margin-bottom: .85rem;
}

.nt-pwa-modal-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #012970;
    margin: 0 0 .4rem;
}

.nt-pwa-modal-card p {
    font-size: .87rem;
    color: #6c757d;
    margin: 0 0 1.1rem;
    line-height: 1.5;
}

.nt-pwa-modal-card ol {
    text-align: left;
    margin: 0 0 1.25rem;
    padding-left: 1.15rem;
    font-size: .87rem;
    color: #2c3345;
    line-height: 1.75;
}

.nt-pwa-ico {
    display: inline-flex;
    vertical-align: -.2em;
    color: var(--nt-pwa-brand);
}

.nt-pwa-modal-close {
    width: 100%;
    border: 0;
    border-radius: .5rem;
    padding: .6rem 1rem;
    font-weight: 600;
    font-size: .9rem;
    color: #fff;
    background: var(--nt-pwa-brand);
    cursor: pointer;
}

/* ---- "new version available" bar ---------------------------------------------------------- */
.nt-pwa-update {
    position: fixed;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    z-index: 1095;
    display: flex;
    align-items: center;
    gap: .75rem;
    max-width: calc(100% - 1.5rem);
    padding: .6rem .75rem .6rem 1rem;
    border-radius: 2rem;
    background: #012970;
    color: #fff;
    font-size: .85rem;
    box-shadow: var(--nt-pwa-shadow);
}

.nt-pwa-update-btn {
    border: 0;
    border-radius: 1.5rem;
    padding: .3rem .9rem;
    font-size: .8rem;
    font-weight: 600;
    color: #012970;
    background: #fff;
    cursor: pointer;
}

/* ---- inline install button used in panel headers / storefront footer ---------------------- */
.nt-pwa-inline {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

/* An installed app hides the "install" affordances; this marks the app as already installed. */
.nt-pwa-installed-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .78rem;
    font-weight: 600;
    color: #198754;
}

@media (max-width: 380px) {
    .nt-pwa-banner { gap: .6rem; padding: .7rem .75rem; }
    .nt-pwa-banner-icon { width: 38px; height: 38px; }
    .nt-pwa-btn { padding: .45rem .75rem; font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
    .nt-pwa-banner { transition: none; }
}