/*!
 * TR Install Prompt v1.2.1 — Stylesheet
 * Clean rewrite: all class names match what PHP + JS actually emit.
 * ─────────────────────────────────────────────────────────────────
 */

/* ═══════════════════════════════════════════════════════════════
 * Banner — floating box at the bottom (or top) of the viewport
 * ═══════════════════════════════════════════════════════════════ */
.tr-install-banner {
    position: fixed !important;
    left: 12px !important;
    right: 12px !important;
    max-width: 520px !important;
    margin: 0 auto !important;
    z-index: 9999 !important;
    background: #13131a !important;
    color: #fff !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 32px rgba(0, 0, 0, .45) !important;
    overflow: hidden !important;
    transition: transform .35s cubic-bezier(.2, .9, .3, 1.15), opacity .2s !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif !important;
}
.tr-install-banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--tr-install-theme, #e8000e), transparent);
    box-shadow: 0 0 10px var(--tr-install-theme, #e8000e);
    pointer-events: none;
}

.tr-install-banner.tr-install-pos-bottom { bottom: 14px !important; top: auto !important; }
.tr-install-banner.tr-install-pos-top    { top: 14px !important; bottom: auto !important; }

.tr-install-banner.tr-install-hidden {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(100%) !important;
}
.tr-install-banner.tr-install-pos-top.tr-install-hidden {
    transform: translateY(-100%) !important;
}

/* ═══════════════════════════════════════════════════════════════
 * Banner inner layout
 * ═══════════════════════════════════════════════════════════════ */
.tr-install-banner__inner {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 14px 48px 14px 16px !important;
    position: relative !important;
}

.tr-install-banner__icon {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #20202a !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.tr-install-banner__icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.tr-install-banner__text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
.tr-install-banner__title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 0 2px !important;
    line-height: 1.3 !important;
}
.tr-install-banner__msg {
    font-size: 12px !important;
    color: #b5b5c2 !important;
    line-height: 1.45 !important;
    margin: 0 !important;
}
.tr-install-banner__msg strong {
    color: #fff !important;
    font-weight: 700 !important;
}

.tr-install-banner__actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 4px !important;
    flex: 0 0 auto !important;
}

.tr-install-banner__install {
    background: var(--tr-install-theme, #e8000e) !important;
    color: #fff !important;
    border: 0 !important;
    padding: 9px 16px !important;
    border-radius: 999px !important;
    font-family: inherit !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .3px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: transform .1s, filter .15s !important;
    box-shadow: 0 4px 12px rgba(232, 0, 14, .35) !important;
}
.tr-install-banner__install:hover {
    filter: brightness(1.08) !important;
    transform: translateY(-1px) !important;
}
.tr-install-banner__install:active { transform: translateY(1px) !important; }

.tr-install-banner__dismiss {
    background: transparent !important;
    color: #9898a4 !important;
    border: 0 !important;
    padding: 4px 12px !important;
    font-family: inherit !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    border-radius: 999px !important;
    transition: color .15s !important;
}
.tr-install-banner__dismiss:hover { color: #fff !important; }

.tr-install-banner__close {
    position: absolute !important;
    top: 8px !important;
    right: 10px !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #7a7a85 !important;
    font-size: 22px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    border-radius: 50% !important;
    transition: background .15s, color .15s !important;
}
.tr-install-banner__close:hover {
    background: rgba(255, 255, 255, .08) !important;
    color: #fff !important;
}

/* Mobile banner tweaks */
@media (max-width: 480px) {
    .tr-install-banner { left: 8px !important; right: 8px !important; }
    .tr-install-banner.tr-install-pos-bottom { bottom: 8px !important; }
    .tr-install-banner.tr-install-pos-top    { top: 8px !important; }
    .tr-install-banner__inner { padding: 12px 44px 12px 12px !important; gap: 10px !important; }
    .tr-install-banner__icon { flex-basis: 40px !important; width: 40px !important; height: 40px !important; }
    .tr-install-banner__title { font-size: 13px !important; }
    .tr-install-banner__msg { font-size: 11px !important; }
    .tr-install-banner__install { padding: 7px 12px !important; font-size: 11px !important; }
    .tr-install-banner__dismiss { padding: 4px 8px !important; font-size: 10px !important; }
}

/* ═══════════════════════════════════════════════════════════════
 * Overlay — full-screen modal used for bookmark (desktop) and
 *           install instructions (iOS / fallback mobile)
 * ═══════════════════════════════════════════════════════════════ */
.tr-install-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 2147483647 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
    animation: tr-install-fade-in .18s ease-out !important;
}
.tr-install-overlay__scrim {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(13, 13, 18, .78) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer !important;
}
.tr-install-overlay__box {
    position: relative !important;
    background: #fff !important;
    color: #14141b !important;
    max-width: 440px !important;
    width: 100% !important;
    max-height: 85vh !important;
    overflow: auto !important;
    border-radius: 16px !important;
    padding: 28px 26px 24px !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .45) !important;
    font: 14px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif !important;
}
.tr-install-overlay__close {
    position: absolute !important;
    top: 10px !important;
    right: 12px !important;
    width: 34px !important;
    height: 34px !important;
    border: 0 !important;
    background: transparent !important;
    color: #888894 !important;
    font-size: 24px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    border-radius: 50% !important;
    transition: background .15s, color .15s !important;
    padding: 0 !important;
}
.tr-install-overlay__close:hover {
    background: #f2f2f5 !important;
    color: #14141b !important;
}
.tr-install-overlay__title {
    margin: 0 40px 12px 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--tr-install-theme, #e8000e) !important;
}

/* Bookmark modal layout */
.tr-install-overlay--bookmark .tr-install-overlay__box {
    text-align: center;
    padding-top: 32px !important;
}
.tr-bookmark__icon {
    color: var(--tr-install-theme, #e8000e);
    margin-bottom: 6px;
    line-height: 0;
}
.tr-bookmark__title {
    margin: 0 0 6px !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #14141b !important;
}
.tr-bookmark__lead {
    margin: 0 0 18px !important;
    color: #5c5c6a !important;
    font-size: 13px !important;
}
.tr-bookmark__kbd-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    margin: 0 0 14px;
    padding: 16px 10px;
    background: linear-gradient(180deg, #fafafc 0%, #f3f3f7 100%);
    border-radius: 10px;
    border: 1px solid #e5e5ec;
}
.tr-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    padding: 8px 14px;
    background: #fff;
    border: 1px solid #cfcfd8;
    border-bottom-width: 3px;
    border-radius: 7px;
    color: #14141b;
    font: 700 15px/1 -apple-system, "SF Pro Text", "Segoe UI", sans-serif;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .05);
}
.tr-bookmark__plus {
    font-size: 18px;
    font-weight: 600;
    color: #888894;
}
.tr-bookmark__hint {
    margin: 0 0 16px !important;
    color: #2a2a36 !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
}
.tr-bookmark__hint strong { color: #14141b !important; }
.tr-bookmark__divider {
    position: relative;
    text-align: center;
    color: #aaa;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 4px 0 14px;
}
.tr-bookmark__divider::before,
.tr-bookmark__divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 34%;
    height: 1px;
    background: #e5e5ec;
}
.tr-bookmark__divider::before { left: 0; }
.tr-bookmark__divider::after  { right: 0; }
.tr-bookmark__divider span { background: #fff; padding: 0 8px; position: relative; }
.tr-bookmark__copy {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 18px !important;
    background: var(--tr-install-theme, #e8000e) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 8px !important;
    font: 600 13px/1 inherit !important;
    cursor: pointer !important;
    transition: transform .1s, filter .15s !important;
}
.tr-bookmark__copy:hover  { filter: brightness(1.08) !important; }
.tr-bookmark__copy:active { transform: translateY(1px) !important; }
.tr-bookmark__toast {
    margin: 10px 0 0;
    padding: 0;
    font-size: 12px;
    color: transparent;
    max-height: 0;
    overflow: hidden;
    transition: max-height .2s, padding .2s, color .2s;
    border-radius: 4px;
}
.tr-bookmark__toast.is-visible {
    max-height: 40px;
    padding: 6px 8px;
    color: #1d6f2a;
    background: #e6f6e9;
}
.tr-bookmark__toast--error.is-visible {
    color: #b92216;
    background: #fdf1f2;
}
.tr-bookmark__url {
    margin: 10px 0 0 !important;
    padding: 8px 10px !important;
    font: 12px/1.4 "SF Mono", Menlo, Consolas, monospace !important;
    color: #6b6b77 !important;
    background: #f7f7fb !important;
    border-radius: 6px !important;
    word-break: break-all !important;
    user-select: all !important;
}

/* iOS / fallback install step lists */
.tr-install-guide__steps {
    list-style: none !important;
    counter-reset: tr-step !important;
    padding: 0 !important;
    margin: 0 0 14px !important;
}
.tr-install-guide__steps > li {
    counter-increment: tr-step !important;
    position: relative !important;
    padding: 10px 12px 10px 42px !important;
    margin: 0 0 8px !important;
    background: #f7f7fb !important;
    border-radius: 8px !important;
    color: #2a2a36 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    list-style: none !important;
}
.tr-install-guide__steps > li::before {
    content: counter(tr-step);
    position: absolute;
    left: 10px;
    top: 10px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--tr-install-theme, #e8000e);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tr-install-guide__steps > li strong { color: #14141b !important; }
.tr-install-guide__note {
    margin: 10px 0 0 !important;
    padding: 10px 12px !important;
    background: #fff9e6 !important;
    border-left: 3px solid #f5c518 !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    color: #5c4a00 !important;
}

@keyframes tr-install-fade-in {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1); }
}

/* Dark color scheme inside the overlay */
@media (prefers-color-scheme: dark) {
    .tr-install-overlay__box { background: #1a1a22 !important; color: #e8e8f0 !important; }
    .tr-install-overlay__close         { color: #888896 !important; }
    .tr-install-overlay__close:hover   { background: #2a2a36 !important; color: #fff !important; }
    .tr-bookmark__title                { color: #fff !important; }
    .tr-bookmark__lead                 { color: #9999a6 !important; }
    .tr-bookmark__hint                 { color: #d0d0d8 !important; }
    .tr-bookmark__hint strong          { color: #fff !important; }
    .tr-bookmark__kbd-row              { background: linear-gradient(180deg, #24242d 0%, #1e1e26 100%); border-color: #2c2c37; }
    .tr-kbd                            { background: #2c2c37; border-color: #44444f; color: #fff; text-shadow: none; }
    .tr-bookmark__plus                 { color: #666672; }
    .tr-bookmark__divider::before,
    .tr-bookmark__divider::after       { background: #2c2c37; }
    .tr-bookmark__divider span         { background: #1a1a22; }
    .tr-bookmark__url                  { background: #24242d !important; color: #aaaab6 !important; }
    .tr-install-guide__steps > li      { background: #24242d !important; color: #d0d0d8 !important; }
    .tr-install-guide__steps > li strong { color: #fff !important; }
    .tr-install-guide__note            { background: rgba(245, 197, 24, .12) !important; color: #f5d478 !important; }
    .tr-bookmark__toast.is-visible     { background: rgba(70, 180, 80, .15); color: #7cd18a; }
    .tr-bookmark__toast--error.is-visible { background: rgba(220, 50, 50, .15); color: #ff8b88; }
}