/* ═══════════════════════════════════════════════
   ASTRAMETRIC — BOTTOM-UP PROTOTYPE — POLISH PASS
   Loaded after styles.css to elevate visual fidelity.
   ═══════════════════════════════════════════════ */

/* ─── Premium device frames ─── */

/* iPhone-style frame with dynamic-island feel + side buttons */
.phone-frame, .wa-frame, .ussd-frame {
    background: linear-gradient(135deg, #1f2236 0%, #0f1424 100%);
    border-radius: 42px;
    padding: 14px;
    box-shadow:
        0 0 0 2px rgba(255,255,255,0.05) inset,
        0 1px 0 rgba(255,255,255,0.08) inset,
        0 30px 80px -20px rgba(0,0,0,0.45),
        0 12px 32px -8px rgba(0,0,0,0.25);
    position: relative;
    width: 326px;
}
/* Side buttons */
.phone-frame::before,
.wa-frame::before,
.ussd-frame::before {
    content: '';
    position: absolute;
    left: -3px;
    top: 110px;
    width: 3px;
    height: 30px;
    background: linear-gradient(90deg, #0f1424, #1f2236);
    border-radius: 2px 0 0 2px;
}
.phone-frame::after,
.wa-frame::after,
.ussd-frame::after {
    content: '';
    position: absolute;
    left: -3px;
    top: 160px;
    width: 3px;
    height: 50px;
    background: linear-gradient(90deg, #0f1424, #1f2236);
    border-radius: 2px 0 0 2px;
    box-shadow: 0 70px 0 0 #1f2236;
}
/* Right power button */
.phone-frame .power-btn,
.wa-frame .power-btn,
.ussd-frame .power-btn {
    position: absolute;
    right: -3px;
    top: 140px;
    width: 3px;
    height: 60px;
    background: linear-gradient(270deg, #0f1424, #1f2236);
    border-radius: 0 2px 2px 0;
}

/* Screen with subtle inner shadow + screen highlight */
.phone-screen, .wa-screen, .ussd-screen {
    border-radius: 30px;
    height: 620px;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.04) inset,
        0 8px 32px -8px rgba(0,0,0,0.15) inset;
    position: relative;
    overflow: hidden;
}

/* Dynamic island look */
.phone-notch {
    width: 105px;
    height: 26px;
    background: #0a0d18;
    border-radius: 0 0 18px 18px;
    top: 12px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}

/* Tablet frame upgrade */
.tablet-frame {
    background: linear-gradient(135deg, #1f2236 0%, #0f1424 100%);
    border-radius: 28px;
    padding: 18px;
    box-shadow:
        0 0 0 2px rgba(255,255,255,0.05) inset,
        0 30px 80px -20px rgba(0,0,0,0.4);
    width: 620px;
    position: relative;
}
.tablet-frame::after {
    content: '';
    position: absolute;
    right: -3px;
    top: 80px;
    width: 3px;
    height: 70px;
    background: linear-gradient(270deg, #0f1424, #1f2236);
    border-radius: 0 2px 2px 0;
}
.tablet-screen {
    border-radius: 14px;
    height: 460px;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset;
}

/* ─── Live status bar ─── */
.status-bar {
    background: transparent;
    height: 42px;
    padding: 14px 22px 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 600;
    color: #1a1a2e;
    position: relative;
    z-index: 2;
}
.status-bar.dark { color: #fff; }
.status-bar-time { font-feature-settings: "tnum"; }
.status-bar-icons { display: flex; gap: 6px; align-items: center; font-size: 13px; }
.status-bar-icons i { line-height: 1; }
.status-bar-batt {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin-left: 4px;
}
.status-bar-batt-pct { font-size: 10.5px; font-weight: 600; }
.status-bar-batt-icon {
    width: 22px;
    height: 11px;
    border: 1.2px solid currentColor;
    border-radius: 3px;
    position: relative;
    padding: 1px;
    display: inline-flex;
}
.status-bar-batt-icon::after {
    content: '';
    position: absolute;
    right: -3px;
    top: 3px;
    width: 1.5px;
    height: 5px;
    background: currentColor;
    border-radius: 0 2px 2px 0;
}
.status-bar-batt-fill {
    background: currentColor;
    border-radius: 1px;
    height: 100%;
    flex: 1;
    max-width: 100%;
}

/* Mobile-specific status bar variants for white/dark headers */
.android-statusbar { display: none; } /* replaced by .status-bar */

/* ─── Refined cards & shadows ─── */
.balance-card {
    background:
        radial-gradient(140% 100% at 0% 0%, rgba(255,255,255,0.18), transparent 50%),
        linear-gradient(135deg, var(--primary) 0%, var(--accent-purple) 100%);
    box-shadow:
        0 12px 24px -8px rgba(0,82,204,0.45),
        0 4px 10px -2px rgba(108,92,231,0.3);
    position: relative;
    overflow: hidden;
}
.balance-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(80% 60% at 90% 100%, rgba(255,255,255,0.12), transparent 60%);
    pointer-events: none;
}

/* App headers sit nicely under the status bar */
.android-header,
.pos-header {
    padding-top: 12px;
}

/* List items with hover lift */
.list-item {
    transition: all 0.18s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 1px 2px rgba(0,0,0,0.02);
}
.list-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    border-color: var(--primary);
}

.action-tile {
    transition: all 0.15s cubic-bezier(.4,0,.2,1);
}
.action-tile:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 14px rgba(0,0,0,0.08);
}
.action-tile:active { transform: translateY(0) scale(0.98); }

/* ─── Pulsing live dots ─── */
.live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--accent);
    border-radius: 50%;
    margin-right: 5px;
    box-shadow: 0 0 0 0 rgba(0,184,148,0.6);
    animation: livePulse 1.6s infinite;
}
.live-dot.danger { background: var(--accent-red); box-shadow: 0 0 0 0 rgba(238,90,36,0.6); animation-name: livePulseRed; }
@keyframes livePulse {
    0% { box-shadow: 0 0 0 0 rgba(0,184,148,0.55); }
    70% { box-shadow: 0 0 0 10px rgba(0,184,148,0); }
    100% { box-shadow: 0 0 0 0 rgba(0,184,148,0); }
}
@keyframes livePulseRed {
    0% { box-shadow: 0 0 0 0 rgba(238,90,36,0.55); }
    70% { box-shadow: 0 0 0 10px rgba(238,90,36,0); }
    100% { box-shadow: 0 0 0 0 rgba(238,90,36,0); }
}

/* Notification badge ping */
.icon-badge, .nav-badge, .bia-badge {
    animation: badgePing 2.4s ease-in-out infinite;
}
@keyframes badgePing {
    0%, 100% { transform: scale(1); }
    20% { transform: scale(1.15); }
    40% { transform: scale(1); }
}

/* ─── Page entrance ─── */
.surface-card {
    animation: surfaceIn 0.5s cubic-bezier(.16,.84,.44,1) backwards;
}
.surface-card:nth-child(1) { animation-delay: 0.05s; }
.surface-card:nth-child(2) { animation-delay: 0.15s; }
.surface-card:nth-child(3) { animation-delay: 0.25s; }
.surface-card:nth-child(4) { animation-delay: 0.35s; }
@keyframes surfaceIn {
    from { opacity: 0; transform: translateY(20px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.pyramid-tier {
    animation: tierIn 0.45s cubic-bezier(.16,.84,.44,1) backwards;
}
.pyramid-tier:nth-child(1) { animation-delay: 0.06s; }
.pyramid-tier:nth-child(2) { animation-delay: 0.12s; }
.pyramid-tier:nth-child(3) { animation-delay: 0.18s; }
.pyramid-tier:nth-child(4) { animation-delay: 0.24s; }
.pyramid-tier:nth-child(5) { animation-delay: 0.30s; }
.pyramid-tier:nth-child(6) { animation-delay: 0.36s; }
@keyframes tierIn {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}

/* WhatsApp message slide-in */
.wa-msg {
    animation: waMsgIn 0.35s cubic-bezier(.16,.84,.44,1) backwards;
}
@keyframes waMsgIn {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Cart item add anim */
.cart-item {
    animation: cartIn 0.3s cubic-bezier(.16,.84,.44,1);
}
@keyframes cartIn {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ─── Button press feedback ─── */
.btn, .btn-primary, .btn-success, .btn-outline,
.pos-checkout-btn, .mpesa-btn, .pin-num,
.cart-qty-btn, .pos-product, .action-tile {
    position: relative;
    overflow: hidden;
    transition: transform 0.12s cubic-bezier(.4,0,.2,1), box-shadow 0.18s, background 0.18s;
}
.btn:active, .btn-primary:active, .btn-success:active,
.pos-checkout-btn:active, .mpesa-btn:active,
.cart-qty-btn:active { transform: scale(0.96); }

/* Ripple */
.ripple-target {
    position: relative;
    overflow: hidden;
}
.ripple-fx {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    transform: scale(0);
    animation: ripple 0.6s ease-out;
    pointer-events: none;
}
@keyframes ripple {
    to { transform: scale(4); opacity: 0; }
}

/* PIN num press */
.pin-num {
    transition: all 0.1s ease;
}
.pin-num:active {
    background: rgba(255,255,255,0.25) !important;
    transform: scale(0.92);
}
.pin-dot.filled {
    animation: pinDotPop 0.25s cubic-bezier(.16,.84,.44,1);
}
@keyframes pinDotPop {
    0% { transform: scale(0.5); }
    60% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

/* ─── Refined launcher ─── */
.launcher-title {
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
.pyramid-tier {
    box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 4px 12px -4px rgba(0,0,0,0.04);
}
.pyramid-tier::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,255,255,0.4), transparent 30%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.25s;
}
.pyramid-tier:hover::after { opacity: 1; }

/* ─── Modals — refined ─── */
.proto-modal-overlay {
    background: rgba(15, 20, 36, 0.6);
}
.mpesa-modal {
    box-shadow:
        0 32px 96px -24px rgba(0,0,0,0.55),
        0 12px 32px -8px rgba(0,0,0,0.25);
}

/* ─── Toast — refined ─── */
.proto-toast {
    background: rgba(26, 26, 46, 0.96);
    backdrop-filter: blur(12px);
    box-shadow: 0 14px 38px rgba(0,0,0,0.28);
}

/* ─── eTIMS receipt — paper texture ─── */
.etims-receipt {
    background:
        repeating-linear-gradient(0deg, rgba(0,0,0,0.012) 0px, rgba(0,0,0,0.012) 1px, transparent 1px, transparent 4px),
        linear-gradient(180deg, #fffaf2, #fff);
    box-shadow:
        0 1px 0 rgba(0,0,0,0.06),
        0 4px 12px -2px rgba(0,0,0,0.08);
}

/* ─── Driver tablet polish ─── */
.driver-stop.next {
    box-shadow: 0 4px 14px rgba(0,82,204,0.18), 0 0 0 2px rgba(0,82,204,0.12);
    animation: nextStopPulse 2.4s ease-in-out infinite;
}
@keyframes nextStopPulse {
    0%, 100% { box-shadow: 0 4px 14px rgba(0,82,204,0.18), 0 0 0 2px rgba(0,82,204,0.12); }
    50% { box-shadow: 0 4px 14px rgba(0,82,204,0.25), 0 0 0 4px rgba(0,82,204,0.06); }
}

/* ─── Sidebar item active accent ─── */
.bia-side-item.active {
    box-shadow: inset 4px 0 0 var(--accent);
    background: linear-gradient(90deg, rgba(0,184,148,0.18), transparent 40%);
}

/* ─── Stats card — entrance + hover ─── */
.stat-card {
    transition: all 0.2s cubic-bezier(.16,.84,.44,1);
    animation: statIn 0.5s cubic-bezier(.16,.84,.44,1) backwards;
}
.stat-card:nth-child(1) { animation-delay: 0.1s; }
.stat-card:nth-child(2) { animation-delay: 0.15s; }
.stat-card:nth-child(3) { animation-delay: 0.2s; }
.stat-card:nth-child(4) { animation-delay: 0.25s; }
@keyframes statIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px -8px rgba(0,0,0,0.1);
    border-color: var(--primary);
}

/* ─── Animated number ─── */
.tabular { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* Cart item highlighted on increment */
.cart-item.flash {
    animation: cartFlash 0.6s ease-out;
}
@keyframes cartFlash {
    0% { background: rgba(0,184,148,0.18); }
    100% { background: #fff; }
}

/* Section title underline */
.android-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--border), transparent);
    margin-left: 12px;
    align-self: center;
}
.android-section-title { display: flex; align-items: center; }

/* ─── Skeleton shimmer (used during loads) ─── */
.skeleton {
    background: linear-gradient(90deg, #f0f0f0 0%, #f8f8f8 50%, #f0f0f0 100%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 6px;
}
@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ─── Narrative walkthrough banner ─── */
.story-banner {
    max-width: 1100px;
    margin: 0 auto 28px;
    background:
        radial-gradient(60% 60% at 100% 0%, rgba(108,92,231,0.10), transparent 60%),
        radial-gradient(60% 60% at 0% 100%, rgba(0,184,148,0.10), transparent 60%),
        linear-gradient(135deg, #fff, #fafbff);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 24px 28px;
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 20px;
    align-items: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 8px 24px -8px rgba(0,0,0,0.06);
}
.story-avatar {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    color: #fff;
    font-weight: 800;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px -4px rgba(0,0,0,0.18);
}
.story-info h2 {
    font-size: 18px;
    font-weight: 800;
    color: var(--secondary);
    margin-bottom: 4px;
    letter-spacing: -0.2px;
}
.story-info p {
    font-size: 13.5px;
    color: var(--text-mid);
    line-height: 1.5;
}
.story-meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 11.5px;
    color: var(--text-mid);
    text-align: right;
}
.story-meta strong {
    color: var(--secondary);
    font-weight: 700;
    font-size: 13px;
}

/* Live time pill */
.live-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(0,184,148,0.12);
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* ─── Login/PIN screen polish ─── */
.pin-pad {
    background:
        radial-gradient(80% 60% at 50% 0%, rgba(108,92,231,0.18), transparent 60%),
        linear-gradient(180deg, var(--secondary) 0%, var(--secondary-2) 100%);
}

/* ─── Premium typography on all values ─── */
.balance-card-value, .pos-total-val, .stat-val, .tier-price, .driver-stat-val {
    font-feature-settings: "tnum";
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.5px;
}

/* ─── Smooth scroll on touch ─── */
html { scroll-behavior: smooth; }
.surfaces-row.scroll {
    scroll-padding: 12px;
}

/* ─── Dynamic island animation (subtle) ─── */
.phone-notch {
    transition: width 0.3s cubic-bezier(.4,0,.2,1);
}

/* ─── Connection lines between surfaces (decorative on desktop) ─── */
.surfaces-row.linked {
    position: relative;
}
.surfaces-row.linked::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 5%;
    right: 5%;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--primary) 0 6px, transparent 6px 12px);
    opacity: 0.18;
    z-index: -1;
    pointer-events: none;
}
@media (max-width: 1023px) { .surfaces-row.linked::before { display: none; } }

/* ─── Reduce motion for users who request it ─── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ─── Touch / mobile clickability — applies to every interactive element ─── */
button,
a,
[role="button"],
.btn, .btn-primary, .btn-success, .btn-outline, .btn-warning, .btn-danger,
.nav-item, .pos-product, .list-item, .action-tile, .bia-side-item,
.android-tab, .staff-chip, .driver-stop, .pyramid-tier, .alert-card,
.surface-pill, .badge, .icon-btn, .stat-card, .activity-item,
.approval-item, .pipeline-card, .notif-item, .cart-item, .pin-num,
.cart-qty-btn, .pos-checkout-btn, .mpesa-btn, .wa-msg-btn,
.demo-acct, .lm-demo, .module-list span, .menu-toggle, .proto-back,
.faq-item summary, .pricing-card a, .testimonial,
.bia-mobile-toggle, .bia-side-close, .grad-tl-step, .grad-card {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
}

/* Visible :active feedback on touch */
button:active,
.btn:active,
[role="button"]:active,
.list-item:active,
.action-tile:active,
.bia-side-item:active,
.android-tab:active,
.staff-chip:active,
.pyramid-tier:active,
.pos-product:active,
.cart-item:active,
.cart-qty-btn:active,
.pin-num:active,
.icon-btn:active {
    opacity: 0.85;
}