/* Modals */
.payment-modal,.phone-input-modal,.pdf-instructions,.ios-install-modal,.ajiracenter-success-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(15,23,42,0.95);backdrop-filter:blur(20px);z-index:10000;align-items:center;justify-content:center}
.payment-modal-content,.phone-input-content,.pdf-instructions-content,.ios-install-content,.ajiracenter-success-content{background:linear-gradient(135deg,rgba(30,41,59,0.98) 0%,rgba(51,65,85,0.98) 100%);border:2px solid var(--accent-color);border-radius:20px;padding:30px;width:90%;max-width:400px;text-align:center;animation:modalSlideUp 0.4s cubic-bezier(0.34,1.56,0.64,1)}
@keyframes modalSlideUp{from{opacity:0;transform:translateY(30px) scale(0.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.payment-modal h2,.pdf-instructions h2,.ios-install-content h2{color:var(--accent-color);margin-bottom:10px;font-size:24px}
.payment-price{font-size:48px;font-weight:800;color:#10b981;margin:20px 0}
.payment-price span{font-size:18px;color:var(--text-secondary)}
.payment-description{color:var(--text-secondary);margin-bottom:25px}
.payment-methods{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}
.payment-btn{padding:16px 24px;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px}
.payment-btn-mpesa{background:linear-gradient(135deg,#e21b1b 0%,#c41616 100%);color:white}
.payment-btn-tigopesa{background:linear-gradient(135deg,#0066b3 0%,#004d86 100%);color:white}
.payment-btn-airtelmoney{background:linear-gradient(135deg,#ff0000 0%,#cc0000 100%);color:white}
.payment-btn-halopesa{background:linear-gradient(135deg,#ff6600 0%,#cc5200 100%);color:white}
.payment-btn:hover{transform:translateY(-2px)}
.payment-cancel{background:transparent;color:var(--text-secondary);border:1px solid var(--border-color);padding:12px 24px;border-radius:10px;cursor:pointer;font-size:14px;width:100%;margin-top:10px}
.payment-status{padding:15px;border-radius:10px;margin-top:15px;display:none}
.payment-status.pending{background:rgba(251,191,36,0.2);border:1px solid #fbbf24;color:#fbbf24;display:block}
.payment-status.success{background:rgba(16,185,129,0.2);border:1px solid #10b981;color:#10b981;display:block}
.payment-status.error{background:rgba(239,68,68,0.2);border:1px solid #ef4444;color:#ef4444;display:block}
.phone-input-content h3{color:var(--accent-color);margin-bottom:20px}
.phone-submit-btn{background:linear-gradient(135deg,#10b981 0%,#059669 100%);color:white;padding:14px 28px;border:none;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;width:100%}
.pdf-instructions-steps{text-align:left;margin:25px 0;color:var(--text-primary)}
.pdf-instructions-step{display:flex;align-items:flex-start;margin-bottom:15px;padding:10px;background:rgba(255,255,255,0.1);border-radius:8px}
.step-number{background:var(--accent-color);color:white;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:bold;margin-right:12px;flex-shrink:0}
.pdf-instructions-close,.ios-install-close{background:linear-gradient(135deg,#10b981 0%,#059669 100%);color:white;border:none;border-radius:10px;padding:12px 24px;font-size:16px;font-weight:600;cursor:pointer;width:100%;margin-top:20px}
/* Install Pill — mobile-only floating PWA install prompt */
.install-pill{display:none;position:fixed;bottom:16px;left:16px;z-index:9998;animation:floatPill 3.5s ease-in-out infinite}
@keyframes floatPill{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.install-pill-btn{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,var(--header-bg-1) 0%,var(--header-bg-2) 100%);color:white;padding:11px 16px 11px 12px;border-radius:14px;border:1px solid rgba(255,255,255,0.18);font-weight:600;font-size:13px;cursor:pointer;box-shadow:0 8px 24px rgba(3,105,161,0.45),0 0 0 1px rgba(0,0,0,0.05);transition:transform .2s ease, box-shadow .2s ease}
.install-pill-btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(3,105,161,0.55)}
.install-pill-icon{font-size:18px;line-height:1;background:rgba(255,255,255,0.15);width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.install-pill-text{display:flex;flex-direction:column;line-height:1.2;text-align:left}
.install-pill-title{font-weight:700;font-size:12.5px}
.install-pill-subtitle{font-size:10px;opacity:0.85;margin-top:1px}
.install-pill-close{position:absolute;top:-6px;right:-6px;width:20px;height:20px;background:rgba(15,23,42,0.95);color:white;border:1px solid rgba(255,255,255,0.18);border-radius:50%;font-size:11px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
/* Hide install pill entirely on desktop — Chrome/Edge already have native
   address-bar install button, Safari has File→Add to Dock. The pill is
   just visual noise on big screens. */
@media (min-width:1024px){
    .install-pill{display:none !important;}
}
.ios-install-content p{color:var(--text-secondary);margin-bottom:20px}
.ios-install-steps{text-align:left;margin:20px 0}
.ios-install-step{display:flex;align-items:center;gap:15px;padding:14px 16px;background:linear-gradient(135deg,rgba(56,189,248,0.1) 0%,rgba(16,185,129,0.05) 100%);border:1px solid rgba(56,189,248,0.2);border-radius:12px;margin-bottom:12px;color:var(--text-primary);transition:all 0.3s}
.ios-install-step:hover{border-color:rgba(56,189,248,0.4);transform:translateX(5px)}
.ios-step-icon{font-size:24px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:rgba(56,189,248,0.15);border-radius:10px}
/* AjiraCenter */
.ajiracenter-banner{background:linear-gradient(135deg,#f59e0b 0%,#d97706 50%,#b45309 100%);border-radius:16px;padding:20px 25px;margin-bottom:25px;display:flex;align-items:center;justify-content:space-between;gap:15px;box-shadow:0 10px 40px rgba(245,158,11,0.3);cursor:pointer;text-decoration:none}
.ajiracenter-banner:hover{transform:translateY(-3px)}
.ajiracenter-banner-content{flex:1}
.ajiracenter-banner-title{color:white;font-size:18px;font-weight:800;margin-bottom:5px;display:flex;align-items:center;gap:10px}
.ajiracenter-banner-subtitle{color:rgba(255,255,255,0.9);font-size:13px}
.ajiracenter-banner-btn{background:white;color:#b45309;padding:12px 24px;border-radius:10px;font-weight:700;font-size:14px;white-space:nowrap;display:flex;align-items:center;gap:8px}
.ajiracenter-floating-badge{position:fixed;bottom:16px;right:16px;z-index:9998;animation:floatBadge 3.5s ease-in-out infinite}
@keyframes floatBadge{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.ajiracenter-floating-link{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#25d366 0%,#128c7e 100%);color:white;text-decoration:none;padding:11px 16px 11px 12px;border-radius:14px;font-weight:700;font-size:13px;box-shadow:0 8px 24px rgba(37,211,102,0.4)}
.ajiracenter-floating-link:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(37,211,102,0.5)}
.floating-badge-icon{font-size:18px;line-height:1;background:rgba(255,255,255,0.18);width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;animation:pulse 2.5s ease infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.floating-badge-text{display:flex;flex-direction:column;line-height:1.2}
.floating-badge-title{font-weight:800;font-size:12.5px}
.floating-badge-subtitle{font-size:10px;opacity:0.9;margin-top:1px}
/* Hide floating AjiraCenter badge on desktop — there's already an
   AjiraCenter button in the action grid. Floating badge is mobile-only. */
@media (min-width:1024px){
    .ajiracenter-floating-badge{display:none !important;}
}
.success-celebration{font-size:80px;margin-bottom:20px;animation:bounce 1s ease infinite}
@keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-15px)}}
.success-title{color:#10b981;font-size:28px;font-weight:800;margin-bottom:10px}
.success-subtitle{color:var(--text-secondary);font-size:16px;margin-bottom:30px}
.success-divider{height:2px;background:linear-gradient(90deg,transparent,#f59e0b,transparent);margin:25px 0}
.ajiracenter-promo-section{background:linear-gradient(135deg,rgba(245,158,11,0.15) 0%,rgba(217,119,6,0.1) 100%);border:2px solid rgba(245,158,11,0.3);border-radius:16px;padding:25px;margin-bottom:20px}
.ajiracenter-promo-title{color:#fbbf24;font-size:20px;font-weight:700;margin-bottom:8px;display:flex;align-items:center;justify-content:center;gap:10px}
.ajiracenter-promo-subtitle{color:var(--text-secondary);font-size:14px;margin-bottom:20px}
.ajiracenter-main-btn{display:block;background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);color:white;padding:18px 30px;border-radius:14px;font-size:18px;font-weight:700;text-decoration:none;box-shadow:0 8px 30px rgba(245,158,11,0.4)}
.ajiracenter-main-btn:hover{transform:translateY(-4px)}
.ajiracenter-stats{display:flex;justify-content:center;gap:30px;margin-top:15px}
.ajiracenter-stat{text-align:center}
.ajiracenter-stat-value{color:#fbbf24;font-size:22px;font-weight:800}
.ajiracenter-stat-label{color:var(--text-secondary);font-size:11px;text-transform:uppercase}
.success-later-btn{background:transparent;color:var(--text-secondary);border:1px solid var(--border-color);padding:12px 24px;border-radius:10px;cursor:pointer;font-size:14px;width:100%;margin-top:15px}