/* ─── PWA Install Banners (Church Central style) ─────────── */

.pwa-hidden {
    display: none !important;
}

#pwa-banner:not(.pwa-hidden),
#ios-banner:not(.pwa-hidden) {
    display: block;
}

#pwa-banner {
    position: fixed;
    bottom: 16px;
    left: 16px;
    right: 16px;
    z-index: 2147483000;
    opacity: 1;
    visibility: visible;
}

@media (min-width: 640px) {
    #pwa-banner {
        left: auto;
        right: 16px;
        max-width: 360px;
    }
}

.pwa-inner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
    color: #ffffff;
    border-radius: 18px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 4px 6px rgba(79, 70, 229, 0.2),
        0 10px 30px rgba(79, 70, 229, 0.35),
        0 0 0 1px rgba(79, 70, 229, 0.1);
}

.pwa-icon {
    padding: 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pwa-icon svg {
    width: 22px;
    height: 22px;
    stroke: #fff;
}

.pwa-content {
    flex: 1;
    min-width: 0;
}

.pwa-content h3 {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
    margin: 0;
}

.pwa-content p {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    margin: 3px 0 0;
    line-height: 1.4;
}

.pwa-install-status {
    font-size: 11px;
    margin-top: 6px !important;
    color: rgba(255, 255, 255, 0.95) !important;
    line-height: 1.45;
}

.pwa-install-status.pwa-hidden {
    display: none !important;
}

.pwa-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.btn-install {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #ffffff;
    color: #4f46e5;
    border: none;
    border-radius: 8px;
    padding: 0 14px;
    height: 32px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
    white-space: nowrap;
    -webkit-appearance: none;
    appearance: none;
}

.btn-install svg {
    width: 14px;
    height: 14px;
    stroke: #4f46e5;
    flex-shrink: 0;
}

.btn-install:hover { opacity: 0.9; }
.btn-install:active { transform: scale(0.97); }

.btn-notnow {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    padding: 0 10px;
    height: 32px;
    border-radius: 8px;
    transition: background 0.2s, color 0.2s;
    -webkit-appearance: none;
    appearance: none;
}

.btn-notnow:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.btn-close {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    padding: 4px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
    margin-top: -2px;
    -webkit-appearance: none;
    appearance: none;
}

.btn-close svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

.btn-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
}

/* iOS instruction banner */
#ios-banner {
    position: fixed;
    bottom: 16px;
    left: 16px;
    right: 16px;
    z-index: 2147483000;
    opacity: 1;
    visibility: visible;
}

@media (min-width: 640px) {
    #ios-banner {
        left: auto;
        right: 16px;
        max-width: 360px;
    }
}

#ios-banner:not(.pwa-hidden)::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #4338ca;
}

.ios-inner {
    background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
    color: #fff;
    border-radius: 18px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 4px 6px rgba(79, 70, 229, 0.2),
        0 10px 30px rgba(79, 70, 229, 0.35);
}

.ios-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ios-header-text {
    flex: 1;
    min-width: 0;
}

.ios-inner h3 {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    margin: 0;
    line-height: 1.3;
}

.ios-inner p {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    margin: 4px 0 0;
    line-height: 1.5;
}

.ios-steps {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ios-step {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.4;
}

.ios-step-num {
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
}

.ios-close {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    padding: 4px;
    border-radius: 8px;
    display: flex;
    flex-shrink: 0;
    margin-top: -2px;
    -webkit-appearance: none;
    appearance: none;
}

.ios-close svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

.ios-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

@keyframes pwaFadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Offline / network status banner ─────────────────────── */

.daniel-network-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2147482000;
    background: linear-gradient(135deg, #b45309 0%, #92400e 100%);
    color: #fff;
    box-shadow: 0 4px 16px rgba(146, 64, 14, 0.35);
}

.daniel-network-banner__inner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 16px;
    font-family: 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.daniel-network-banner__icon {
    flex-shrink: 0;
    display: flex;
    margin-top: 2px;
}

.daniel-network-banner__text {
    font-size: 13px;
    line-height: 1.55;
    font-weight: 500;
}

body.daniel-offline [data-requires-network]:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}