/* ================================================================
   pwa-styles.css  —  All Connect Data PWA UI Styles
   Serves all pwa-body.php components.

   COLORS: every value here is a var() pointing at colors.css.
   Load order: colors.css → brand-overrides.css → pwa-styles.css
   (pwa-head.php already links colors.css directly, so this file
   works even if included standalone).
   Place at:  /assets/css/pwa-styles.css
   ================================================================ */

/* ── Design tokens (match brand-overrides.css) ───────────────────── */
:root {
    --pwa-primary:      var(--accent);
    --pwa-primary-dark: var(--accent-dark);
    --pwa-primary-light:var(--accent-light);
    --pwa-primary-bg:   var(--accent-bg);
    --pwa-dark:         var(--hero-dark);
    --pwa-dark-mid:     var(--panel-dark-to);
    --pwa-radius:       16px;
    --pwa-radius-sm:    10px;
    --pwa-shadow:       0 8px 40px var(--black-a28);
    --pwa-font:         'Plus Jakarta Sans', 'DM Sans', system-ui, sans-serif;
}

/* ================================================================
   1. SPLASH SCREEN
   ================================================================ */
#pwa-splash {
    display:         none;      /* shown by inline JS in standalone */
    position:        fixed;
    inset:           0;
    z-index:         999999;
    background:      linear-gradient(160deg, var(--pwa-dark) 0%, var(--navy-975) 100%);
    align-items:     center;
    justify-content: center;
    flex-direction:  column;
}

.pwa-splash-inner {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             0;
    padding:         2rem 1rem;
    animation:       pwa-splash-in .45s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes pwa-splash-in {
    from { opacity: 0; transform: scale(.82) translateY(20px); }
    to   { opacity: 1; transform: scale(1)  translateY(0); }
}

/* Three-ring pulse */
.pwa-splash-ring-wrap {
    position:  relative;
    width:     80px;
    height:    80px;
    display:   flex;
    align-items:     center;
    justify-content: center;
    margin-bottom:   1.75rem;
}

.pwa-splash-ring {
    position:      absolute;
    border-radius: 50%;
    border:        2px solid var(--pwa-primary-light);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    animation: pwa-ring-pulse 3s ease-in-out infinite;
    opacity: .35;
}
.pwa-splash-ring-1 { width: 108px; height: 108px; animation-delay: 0s; }
.pwa-splash-ring-2 { width: 134px; height: 134px; animation-delay: .8s; }
.pwa-splash-ring-3 { width: 162px; height: 162px; animation-delay: 1.6s; }

@keyframes pwa-ring-pulse {
    0%,100% { opacity:.35; transform: translate(-50%,-50%) scale(1); }
    50%      { opacity:.10; transform: translate(-50%,-50%) scale(1.08); }
}

/* Logo circle */
.pwa-splash-logo-circle {
    position:        relative;
    z-index:         2;
    width:           80px;
    height:          80px;
    border-radius:   50%;
    background:      linear-gradient(135deg, var(--pwa-primary), var(--pwa-primary-dark));
    display:         flex;
    align-items:     center;
    justify-content: center;
    box-shadow:      0 6px 28px var(--accent-a45);
}
.pwa-splash-logo-img {
    width:        52px;
    height:       52px;
    object-fit:   contain;
    border-radius:8px;
}
.pwa-splash-logo-fallback {
    display:         none;
    align-items:     center;
    justify-content: center;
    color:           var(--color-white);
    font-size:       1.6rem;
}

/* Text */
.pwa-splash-name {
    font-family:  var(--pwa-font);
    font-size:    1.45rem;
    font-weight:  800;
    color:        var(--color-white);
    margin-bottom:.35rem;
    letter-spacing:-.02em;
    text-align:   center;
}
.pwa-splash-tag {
    font-size:  .85rem;
    color:      var(--white-a45);
    margin-bottom: 2.25rem;
    text-align: center;
    letter-spacing:.04em;
}

/* Loading bar */
.pwa-splash-bar-track {
    width:         160px;
    height:        4px;
    background:    var(--white-a12);
    border-radius: 99px;
    overflow:      hidden;
}
.pwa-splash-bar-fill {
    height:        100%;
    border-radius: 99px;
    background:    linear-gradient(90deg, var(--pwa-primary) 0%, var(--pwa-primary-light) 100%);
    animation:     pwa-bar-fill 1s ease forwards;
}
@keyframes pwa-bar-fill {
    from { width: 0%; }
    to   { width: 92%; }
}

/* ================================================================
   2. OFFLINE BAR
   ================================================================ */
#pwa-offline-bar {
    display:         none;      /* JS syncs with navigator.onLine   */
    position:        fixed;
    top:             0;
    left:            0;
    right:           0;
    z-index:         99998;
    padding:         .6rem 1rem;
    background:      linear-gradient(90deg, var(--slate-700), var(--hero-dark));
    border-bottom:   2px solid var(--white-a08);
    animation:       pwa-slide-down .25s ease;
}

@keyframes pwa-slide-down {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}

.pwa-offline-inner {
    display:         flex;
    align-items:     center;
    gap:             .75rem;
    max-width:       600px;
    margin:          0 auto;
}

.pwa-offline-icon {
    width:           34px;
    height:          34px;
    border-radius:   50%;
    background:      var(--danger-a18);
    border:          1.5px solid var(--danger-a40);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--danger-light);
    font-size:       .85rem;
    flex-shrink:     0;
}

.pwa-offline-text {
    display:         flex;
    flex-direction:  column;
    gap:             .05rem;
}
.pwa-offline-text strong {
    font-family:     var(--pwa-font);
    font-size:       .8125rem;
    font-weight:     700;
    color:           var(--color-white);
}
.pwa-offline-text span {
    font-size:  .72rem;
    color:      var(--white-a50);
}

/* ================================================================
   3. UPDATE BANNER
   ================================================================ */
#pwa-update-banner {
    display:         none;      /* JS shows when SW update ready    */
    position:        fixed;
    bottom:          0;
    left:            0;
    right:           0;
    z-index:         99997;
    padding:         .75rem 1rem;
    background:      linear-gradient(135deg, var(--pwa-dark), var(--navy-950));
    border-top:      2px solid var(--accent-a30);
    box-shadow:      0 -4px 24px var(--black-a25);
    animation:       pwa-slide-up .3s ease;
}
@keyframes pwa-slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

.pwa-update-inner {
    display:         flex;
    align-items:     center;
    gap:             .85rem;
    max-width:       600px;
    margin:          0 auto;
}
.pwa-update-icon {
    width:           36px;
    height:          36px;
    border-radius:   50%;
    background:      var(--accent-a20);
    border:          1.5px solid var(--accent-a40);
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--pwa-primary-light);
    font-size:       .9rem;
    flex-shrink:     0;
    animation:       pwa-rocket-bob 1.4s ease-in-out infinite;
}
@keyframes pwa-rocket-bob {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-4px); }
}
.pwa-update-text {
    flex:            1;
    min-width:       0;
    display:         flex;
    flex-direction:  column;
    gap:             .05rem;
}
.pwa-update-text strong {
    font-family:     var(--pwa-font);
    font-size:       .8125rem;
    font-weight:     700;
    color:           var(--color-white);
}
.pwa-update-text span {
    font-size:  .72rem;
    color:      var(--white-a50);
    white-space:nowrap;
    overflow:   hidden;
    text-overflow: ellipsis;
}

/* ================================================================
   4. SHARED BUTTON STYLES
   ================================================================ */
.pwa-btn {
    border:        none;
    cursor:        pointer;
    border-radius: var(--pwa-radius-sm);
    font-family:   var(--pwa-font);
    font-weight:   700;
    font-size:     .8125rem;
    transition:    all .18s;
    display:       inline-flex;
    align-items:   center;
    justify-content:center;
    white-space:   nowrap;
}

.pwa-btn-primary {
    background:  var(--pwa-primary);
    color:       var(--color-white);
    padding:     .75rem 1.4rem;
    box-shadow:  0 4px 16px var(--accent-a38);
}
.pwa-btn-primary:hover { background: var(--pwa-primary-dark); transform: translateY(-1px); box-shadow: 0 6px 20px var(--accent-a48); }
.pwa-btn-primary:active { transform: scale(.97); }

.pwa-btn-ghost {
    background:  transparent;
    color:       var(--white-a55);
    padding:     .75rem 1rem;
}
.pwa-btn-ghost:hover { color: var(--white-a85); }

.pwa-btn-update {
    background:  var(--pwa-primary);
    color:       var(--color-white);
    padding:     .5rem 1.1rem;
    border-radius: 99px;
    font-size:   .78rem;
    flex-shrink: 0;
    box-shadow:  0 3px 12px var(--accent-a35);
}
.pwa-btn-update:hover { background: var(--pwa-primary-dark); }

/* ================================================================
   5. INSTALL BANNER (Android / Desktop)
   ================================================================ */
#pwa-install-banner {
    display:         none;      /* JS shows when prompt ready       */
    position:        fixed;
    inset:           0;
    z-index:         99996;
    background:      var(--overlay-backdrop);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    align-items:     flex-end;
    justify-content: center;
    padding:         1rem;
    animation:       pwa-backdrop-in .22s ease;
}
@keyframes pwa-backdrop-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.pwa-install-card {
    width:           100%;
    max-width:       480px;
    background:      linear-gradient(160deg, var(--panel-dark-from) 0%, var(--panel-dark-to) 100%);
    border:          1px solid var(--white-a10);
    border-radius:   var(--pwa-radius);
    padding:         1.5rem;
    position:        relative;
    box-shadow:      var(--pwa-shadow);
    animation:       pwa-card-up .3s cubic-bezier(.34,1.56,.64,1);
    overflow:        hidden;
}
/* Subtle gradient orb behind card */
.pwa-install-card::before {
    content:    '';
    position:   absolute;
    width:      260px; height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--accent-a18) 0%, transparent 70%);
    top: -80px; right: -60px;
    pointer-events: none;
}

@keyframes pwa-card-up {
    from { opacity: 0; transform: translateY(40px) scale(.96); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.pwa-install-dismiss {
    position:        absolute;
    top:             .75rem;
    right:           .75rem;
    background:      var(--white-a08);
    border:          none;
    color:           var(--white-a50);
    width:           28px; height: 28px;
    border-radius:   50%;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       .85rem;
    transition:      all .15s;
    z-index:         1;
}
.pwa-install-dismiss:hover { background: var(--white-a18); color: var(--color-white); }

/* App identity row */
.pwa-install-identity {
    display:     flex;
    align-items: center;
    gap:         .85rem;
    margin-bottom: 1rem;
}

.pwa-install-icon-wrap {
    position:  relative;
    flex-shrink:0;
}
.pwa-install-icon-img {
    width:        58px; height: 58px;
    border-radius:14px;
    object-fit:   contain;
    background:   var(--white-a08);
    border:       1.5px solid var(--white-a12);
}
.pwa-install-icon-fallback {
    display:         none;
    width:           58px; height: 58px;
    border-radius:   14px;
    background:      linear-gradient(135deg, var(--pwa-primary), var(--pwa-primary-dark));
    align-items:     center;
    justify-content: center;
    color:           var(--color-white);
    font-size:       1.5rem;
}
.pwa-verified-badge {
    position:        absolute;
    bottom:          -4px; right: -4px;
    width:           20px; height: 20px;
    border-radius:   50%;
    background:      var(--pwa-primary);
    border:          2px solid var(--pwa-dark);
    color:           var(--color-white);
    font-size:       .65rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.pwa-install-app-info {
    display:       flex;
    flex-direction:column;
    gap:           .18rem;
    min-width:     0;
}
.pwa-install-app-name {
    font-family:   var(--pwa-font);
    font-size:     1rem;
    font-weight:   800;
    color:         var(--color-white);
    display:       block;
}
.pwa-install-app-meta {
    font-size:  .72rem;
    color:      var(--white-a45);
    display:    block;
}
.pwa-install-stars {
    display:     flex;
    align-items: center;
    gap:         .15rem;
    color:       var(--warning);
    font-size:   .68rem;
}
.pwa-install-stars em {
    font-style:  normal;
    color:       var(--white-a55);
    margin-left: .2rem;
    font-size:   .72rem;
}

/* Description */
.pwa-install-desc {
    font-size:     .82rem;
    color:         var(--white-a55);
    line-height:   1.6;
    margin-bottom: 1rem;
}

/* Feature chips */
.pwa-install-chips {
    display:       flex;
    flex-wrap:     wrap;
    gap:           .4rem;
    margin-bottom: 1.25rem;
}
.pwa-chip {
    display:       inline-flex;
    align-items:   center;
    gap:           .3rem;
    padding:       .3rem .7rem;
    border-radius: 99px;
    background:    var(--white-a07);
    border:        1px solid var(--white-a12);
    color:         var(--white-a70);
    font-size:     .72rem;
    font-weight:   600;
}
.pwa-chip i { color: var(--pwa-primary-light); font-size: .65rem; }

/* CTA buttons */
.pwa-install-actions {
    display:        flex;
    flex-direction: column;
    gap:            .5rem;
}

/* ================================================================
   6. iOS INSTALL GUIDE
   ================================================================ */
#pwa-ios-banner {
    display:         none;      /* JS shows on iOS non-standalone   */
    position:        fixed;
    bottom:          0;
    left:            0;
    right:           0;
    z-index:         99995;
    padding:         0 .75rem .75rem;
    animation:       pwa-slide-up .3s ease;
}

.pwa-ios-card {
    background:    linear-gradient(160deg, var(--panel-dark-from), var(--panel-dark-to));
    border:        1px solid var(--white-a12);
    border-radius: var(--pwa-radius);
    padding:       1.1rem 1.1rem .85rem;
    box-shadow:    var(--pwa-shadow);
    position:      relative;
    overflow:      visible;
}

/* Header */
.pwa-ios-header {
    display:     flex;
    align-items: center;
    gap:         .75rem;
    margin-bottom: .75rem;
}

.pwa-ios-icon-wrap { position: relative; flex-shrink: 0; }
.pwa-ios-icon-img {
    width:        46px; height: 46px;
    border-radius:11px;
    object-fit:   contain;
    background:   var(--white-a06);
    border:       1px solid var(--white-a10);
}
.pwa-ios-icon-fallback {
    display:         none;
    width:           46px; height: 46px;
    border-radius:   11px;
    background:      linear-gradient(135deg, var(--pwa-primary), var(--pwa-primary-dark));
    align-items:     center;
    justify-content: center;
    color:           var(--color-white);
    font-size:       1.2rem;
}

.pwa-ios-title {
    flex: 1; min-width: 0;
    display:       flex;
    flex-direction:column;
    gap:           .1rem;
}
.pwa-ios-title strong {
    font-family: var(--pwa-font);
    font-size:   .9rem;
    font-weight: 700;
    color:       var(--color-white);
    display:     block;
    white-space: nowrap;
    overflow:    hidden;
    text-overflow: ellipsis;
}
.pwa-ios-title small {
    font-size: .72rem;
    color:     var(--white-a40);
    display:   block;
}

.pwa-ios-close {
    background:  var(--white-a08);
    border:      none;
    color:       var(--white-a50);
    width:       28px; height: 28px;
    border-radius:50%;
    cursor:      pointer;
    display:     flex;
    align-items: center;
    justify-content: center;
    font-size:   .85rem;
    flex-shrink: 0;
    transition:  all .15s;
}
.pwa-ios-close:hover { background: var(--white-a16); color: var(--color-white); }

/* Divider */
.pwa-ios-rule {
    height:          1px;
    background:      var(--white-a08);
    margin:          0 0 .75rem;
}

/* Steps */
.pwa-ios-steps {
    display:       flex;
    flex-direction:column;
    gap:           .55rem;
}
.pwa-ios-step {
    display:     flex;
    align-items: flex-start;
    gap:         .65rem;
}
.pwa-ios-step-num {
    flex-shrink: 0;
    width:       22px; height: 22px;
    border-radius:50%;
    background:  var(--pwa-primary);
    color:       var(--color-white);
    font-family: var(--pwa-font);
    font-size:   .72rem;
    font-weight: 700;
    display:     flex;
    align-items: center;
    justify-content: center;
    margin-top:  .05rem;
}
.pwa-ios-step p {
    font-size:   .8125rem;
    color:       var(--white-a65);
    line-height: 1.5;
    margin:      0;
}
.pwa-ios-step p strong { color: var(--color-white); }

/* Safari "Share" chip */
.pwa-ios-chip {
    display:       inline-flex;
    align-items:   center;
    gap:           .25rem;
    background:    var(--accent-a20);
    border:        1px solid var(--accent-a35);
    border-radius: 6px;
    padding:       .12rem .45rem;
    color:         var(--pwa-primary-light);
    font-size:     .78rem;
    font-weight:   600;
}
.pwa-ios-chip i { font-size: .65rem; }

/* Bottom caret pointing to Share button */
.pwa-ios-arrow-caret {
    position:    absolute;
    bottom:      -14px;
    left:        50%;
    transform:   translateX(-50%);
    color:       var(--white-a12);
    font-size:   1.5rem;
    line-height: 1;
}

/* ================================================================
   7. RESPONSIVE TWEAKS
   ================================================================ */
@media (min-width: 480px) {
    .pwa-install-actions {
        flex-direction: row;
        align-items:    center;
    }
    .pwa-btn-primary { flex: 1; }
}

@media (max-width: 340px) {
    .pwa-install-card { padding: 1.1rem; }
    .pwa-install-chips { display: none; } /* save space on tiny phones */
}