/* ==========================================================================
   PWA Install UI — FreelanceTrainings
   Matches the demo-content design language:
   - white cards, gray-200 borders, rounded-2xl, shadow-lg
   - blue button gradient  (90deg,  #3bb8e8 → #1b6085)
   - blue banner gradient  (135deg, #0a4e7b → #2a72c4)
   - heading blue #126792, muted slate #64748b, Inter font
   All classes are "pwa-" prefixed to avoid Bootstrap/Tailwind collisions.
   ========================================================================== */

/* ---------- Floating install banner ---------- */
.pwa-install-banner {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 1039; /* below mobile menu (1050) & its overlay (1045) */
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 20px 45px -12px rgba(2, 32, 58, 0.28), 0 4px 12px rgba(2, 32, 58, 0.10);
    padding: 18px 18px 16px;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    overflow: hidden;

    /* hidden by default — slides up when .pwa-visible is added.
       SCROLL-PERF FIX: visibility:hidden removes it from the render tree
       (opacity:0 alone kept costing paint/composite work every frame).
       The 0s visibility transition is delayed so the close animation plays. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(24px) scale(0.98);
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.35s;
}

.pwa-install-banner.pwa-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}

/* thin brand-gradient accent along the top edge of the card */
.pwa-install-banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #0a4e7b 0%, #135d92 40%, #205f97 70%, #2a72c4 100%);
}

@media (min-width: 640px) {
    .pwa-install-banner {
        left: auto;
        right: 24px;
        bottom: 24px;
        width: 392px;
    }
}

.pwa-banner-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

/* App icon thumb — brand banner gradient with the white logo inside */
.pwa-banner-thumb {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: linear-gradient(135deg, #0a4e7b 0%, #135d92 40%, #205f97 70%, #2a72c4 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 14px rgba(10, 78, 123, 0.35);
}

.pwa-banner-thumb img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

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

.pwa-banner-title {
    color: #126792;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    margin: 2px 0 4px;
}

.pwa-banner-desc {
    color: #64748b;
    font-size: 12.5px;
    line-height: 1.55;
    margin: 0;
}

/* close (✕) */
.pwa-banner-close {
    flex: 0 0 auto;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #94a3b8;
    padding: 4px;
    margin: -4px -4px 0 0;
    border-radius: 8px;
    line-height: 0;
    transition: color 0.2s ease, background 0.2s ease;
}

.pwa-banner-close:hover {
    color: #126792;
    background: #f1f5f9;
}

.pwa-banner-close svg {
    width: 17px;
    height: 17px;
}

.pwa-banner-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}

/* primary gradient CTA — same recipe as demo-content download button */
.pwa-btn-install {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1 1 auto;
    background: linear-gradient(90deg, #3bb8e8, #1b6085);
    color: #ffffff;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    padding: 11px 20px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(27, 96, 133, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.pwa-btn-install:hover {
    opacity: 0.94;
    transform: translateY(-1px);
    box-shadow: 0 7px 16px rgba(27, 96, 133, 0.42);
}

.pwa-btn-install svg {
    width: 16px;
    height: 16px;
}

.pwa-btn-later {
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
    padding: 11px 14px;
    border-radius: 10px;
    transition: color 0.2s ease, background 0.2s ease;
}

.pwa-btn-later:hover {
    color: #126792;
    background: #f1f5f9;
}

/* ---------- iOS "how to install" modal ---------- */
.pwa-ios-overlay {
    position: fixed;
    inset: 0;
    z-index: 1070;
    background: rgba(15, 23, 42, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;

    /* SCROLL-PERF FIX (the big one): this element carries a full-viewport
       backdrop-filter. At opacity:0 it stayed in the render tree, forcing the
       GPU to re-blur the whole backdrop on every scroll frame on EVERY page.
       visibility:hidden removes it from rendering completely when closed. */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.pwa-ios-overlay.pwa-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.3s ease, visibility 0s;
}

.pwa-ios-card {
    background: #ffffff;
    border-radius: 16px;
    max-width: 380px;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 25px 60px -12px rgba(2, 32, 58, 0.45);
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;

    transform: translateY(18px) scale(0.97);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.pwa-ios-overlay.pwa-visible .pwa-ios-card {
    transform: translateY(0) scale(1);
}

/* gradient header, frosted badge — straight from the demo-content banner style */
.pwa-ios-header {
    background: linear-gradient(135deg, #0a4e7b 0%, #135d92 40%, #205f97 70%, #2a72c4 100%);
    padding: 26px 24px 22px;
    text-align: center;
    position: relative;
}

.pwa-ios-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.30);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    padding: 4px 12px;
    border-radius: 999px;
    margin-bottom: 12px;
}

.pwa-ios-badge svg {
    width: 12px;
    height: 12px;
}

.pwa-ios-header img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    display: block;
    margin: 0 auto 10px;
}

.pwa-ios-header h3 {
    color: #ffffff;
    font-size: 17px;
    font-weight: 700;
    margin: 0;
}

.pwa-ios-header p {
    color: #cfe8ff;
    font-size: 12.5px;
    margin: 6px 0 0;
}

.pwa-ios-close {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 999px;
    cursor: pointer;
    color: #ffffff;
    padding: 5px;
    line-height: 0;
    transition: background 0.2s ease;
}

.pwa-ios-close:hover {
    background: rgba(255, 255, 255, 0.28);
}

.pwa-ios-close svg {
    width: 14px;
    height: 14px;
}

.pwa-ios-steps {
    padding: 22px 24px 24px;
}

.pwa-ios-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 10px 0;
}

.pwa-ios-step + .pwa-ios-step {
    border-top: 1px solid #f1f5f9;
}

.pwa-ios-step-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #eaf5fb;
    color: #126792;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pwa-ios-step-icon svg {
    width: 18px;
    height: 18px;
}

.pwa-ios-step-text {
    flex: 1;
}

.pwa-ios-step-text strong {
    display: block;
    color: #126792;
    font-size: 13.5px;
    font-weight: 600;
    margin-bottom: 2px;
}

.pwa-ios-step-text span {
    color: #64748b;
    font-size: 12.5px;
    line-height: 1.5;
}

.pwa-ios-done {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 16px;
    background: linear-gradient(90deg, #3bb8e8, #1b6085);
    color: #ffffff;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    padding: 12px 20px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(27, 96, 133, 0.35);
    transition: opacity 0.15s ease;
}

.pwa-ios-done:hover {
    opacity: 0.94;
}

/* ---------- "App installed" toast ---------- */
.pwa-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    z-index: 1080;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: linear-gradient(90deg, #3bb8e8, #1b6085);
    color: #ffffff;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    padding: 12px 22px;
    border-radius: 999px;
    box-shadow: 0 10px 28px rgba(27, 96, 133, 0.45);
    white-space: nowrap;

    /* SCROLL-PERF FIX: same visibility pattern as banner/overlay */
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 16px);
    pointer-events: none;
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.35s;
}

.pwa-toast.pwa-visible {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}

.pwa-toast svg {
    width: 16px;
    height: 16px;
}

/* ==========================================================================
   Permanent install triggers — sticky header button + slide-menu row.
   Hidden by default; JS adds `pwa-installable` to <body> only when the
   browser can actually install (or on iOS), and removes it once installed.
   ========================================================================== */
.pwa-install-trigger {
    display: none;
}

/* ---------- header button: round gradient icon + "Install" caption ---------- */
/* Same compact design for guests and logged-in users — a text pill was
   crowding the Sign Up button, and the invoice pill owns the text-CTA slot. */
/* The header trigger stays IN FLOW at all times and toggles visibility, not
   display: `beforeinstallprompt` fires well after first paint on every full
   page load, and a display-toggled button reflowed the whole right side of
   the header when it popped in (zap/bell jumped ~56px left). Reserving the
   40px slot keeps the header pixel-identical before and after the event.
   base.html pre-claims the same 40px slot before this sheet loads. */
.pwa-header-btn {
    /* Only the 40px circle occupies layout space, so it lines up dead-center
       with the 40px profile avatar; the caption hangs below out-of-flow. */
    display: inline-flex;
    visibility: hidden;
    position: relative;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

body.pwa-installable .pwa-header-btn {
    visibility: visible;
}

.pwa-header-icon {
    width: 40px;  /* identical to the w-10 h-10 profile pic */
    height: 40px;
    border-radius: 999px;
    background: linear-gradient(135deg, #3bb8e8, #1b6085);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(27, 96, 133, 0.30);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.pwa-header-btn:hover .pwa-header-icon {
    opacity: 0.94;
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(27, 96, 133, 0.40);
}

.pwa-header-icon svg {
    width: 18px;
    height: 18px;
}

.pwa-header-caption {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 3px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.2px;
    line-height: 1;
    color: #126792;
    white-space: nowrap;
}

/* ---------- slide-menu row ---------- */
/* wrapper (adds the border-t strip) must hide together with the button,
   otherwise an empty bordered gap shows when the app can't be installed */
.pwa-menu-install-wrap {
    display: none;
}

body.pwa-installable .pwa-menu-install-wrap {
    display: block;
}

body.pwa-installable .pwa-menu-item {
    display: flex;
    /* undo the base.html static pre-hide (.pwa-install-trigger visibility) */
    visibility: visible;
}

.pwa-menu-item {
    align-items: center;
    gap: 12px;
    width: 100%;
    background: linear-gradient(90deg, #3bb8e8, #1b6085);
    color: #ffffff;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    padding: 12px 16px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(27, 96, 133, 0.30);
    transition: opacity 0.15s ease;
}

.pwa-menu-item:hover {
    opacity: 0.94;
}

/* frosted icon chip — demo-content badge style */
.pwa-menu-item-icon {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.30);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pwa-menu-item-icon svg {
    width: 16px;
    height: 16px;
}