*{margin:0;padding:0;box-sizing:border-box}
:root{
  --primary:#6c63ff;--primary-dark:#574fd6;--secondary:#ff6584;
  --bg:#f5f7ff;--card:#fff;--border:#e8eaf6;
  --text:#1a1a2e;--muted:#6b7280;--green:#10b981;--red:#ef4444;
  --yellow:#f59e0b;--radius:16px;--shadow:0 4px 24px rgba(108,99,255,.10);
}
body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--text);min-height:100vh}
a{text-decoration:none;color:inherit}
button{cursor:pointer;font-family:inherit}

/* NAV */
.top-nav{background:var(--card);border-bottom:1px solid var(--border);padding:0 1.5rem;height:60px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:0 2px 12px rgba(0,0,0,.06)}
.nav-logo{font-weight:800;font-size:1.2rem;color:var(--primary);display:flex;align-items:center;gap:.4rem}
.nav-logo span{color:var(--secondary)}
.nav-right{display:flex;align-items:center;gap:.75rem}
.nav-user{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--muted)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--primary);color:#fff;font-size:.78rem;font-weight:700;display:flex;align-items:center;justify-content:center}

/* BUTTONS */
.btn{padding:.55rem 1.25rem;border-radius:10px;font-size:.88rem;font-weight:600;border:none;transition:all .2s;display:inline-flex;align-items:center;gap:.4rem}
.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark)}
.btn-outline{background:transparent;border:1.5px solid var(--primary);color:var(--primary)}.btn-outline:hover{background:var(--primary);color:#fff}
.btn-lg{padding:.75rem 2rem;font-size:1rem;border-radius:12px}
.btn-full{width:100%;justify-content:center}
.btn-green{background:var(--green);color:#fff}.btn-green:hover{background:#059669}

/* HERO */
.hero{background:linear-gradient(135deg,#6c63ff 0%,#a78bfa 100%);color:#fff;padding:3rem 1.5rem;text-align:center}
.hero h1{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:800;margin-bottom:.6rem}
.hero p{font-size:1rem;opacity:.9;margin-bottom:1.5rem}
.search-bar{max-width:480px;margin:0 auto;display:flex;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.15)}
.search-bar input{flex:1;border:none;padding:.75rem 1rem;font-size:.95rem;outline:none;color:var(--text)}
.search-bar button{background:var(--secondary);color:#fff;border:none;padding:.75rem 1.25rem;font-size:.9rem;font-weight:600}

/* CATEGORY GRID */
.section{padding:2rem 1.5rem;max-width:1100px;margin:0 auto}
.section-title{font-size:1.15rem;font-weight:700;margin-bottom:1.25rem;color:var(--text)}
.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:1rem}
.cat-card{background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius);padding:1.2rem .75rem;text-align:center;cursor:pointer;transition:all .2s;box-shadow:var(--shadow)}
.cat-card:hover{border-color:var(--primary);transform:translateY(-3px);box-shadow:0 8px 28px rgba(108,99,255,.18)}
.cat-icon{font-size:2rem;margin-bottom:.5rem}
.cat-name{font-size:.8rem;font-weight:600;color:var(--text)}
.cat-sub{font-size:.7rem;color:var(--muted);margin-top:.15rem}

/* INNER PAGE */
.page-wrap{max-width:480px;margin:0 auto;padding:1.5rem}
.back-btn{display:inline-flex;align-items:center;gap:.4rem;font-size:.88rem;color:var(--primary);font-weight:600;margin-bottom:1.25rem;background:none;border:none}
.page-title{font-size:1.2rem;font-weight:700;margin-bottom:1.25rem}
.provider-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:1.5rem}
.provider-card{background:var(--card);border:2px solid var(--border);border-radius:12px;padding:.85rem .5rem;text-align:center;cursor:pointer;transition:all .2s}
.provider-card:hover,.provider-card.selected{border-color:var(--primary);background:#f0efff}
.provider-icon{font-size:1.6rem;margin-bottom:.3rem}
.provider-name{font-size:.75rem;font-weight:600;color:var(--text)}

/* FORM */
.form-card{background:var(--card);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow);margin-bottom:1rem}
.form-group{margin-bottom:1rem}
.form-group label{display:block;font-size:.8rem;font-weight:600;color:var(--muted);margin-bottom:.4rem}
.form-input{width:100%;border:1.5px solid var(--border);border-radius:10px;padding:.65rem 1rem;font-size:.92rem;font-family:inherit;transition:border-color .2s;background:var(--bg);color:var(--text)}
.form-input:focus{outline:none;border-color:var(--primary);background:#fff}
.form-select{width:100%;border:1.5px solid var(--border);border-radius:10px;padding:.65rem 1rem;font-size:.92rem;font-family:inherit;background:var(--bg);color:var(--text)}
.form-select:focus{outline:none;border-color:var(--primary)}
.plan-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}
.plan-card{border:2px solid var(--border);border-radius:10px;padding:.75rem;cursor:pointer;transition:all .2s;text-align:center}
.plan-card:hover,.plan-card.selected{border-color:var(--primary);background:#f0efff}
.plan-amount{font-size:1.1rem;font-weight:700;color:var(--primary)}
.plan-desc{font-size:.72rem;color:var(--muted);margin-top:.2rem}

/* SUMMARY BOX */
.summary-box{background:linear-gradient(135deg,#f0efff,#fff);border:1.5px solid var(--primary);border-radius:var(--radius);padding:1.25rem;margin-bottom:1rem}
.summary-row{display:flex;justify-content:space-between;font-size:.88rem;padding:.3rem 0;border-bottom:1px solid var(--border)}
.summary-row:last-child{border:none;font-weight:700;font-size:.95rem;color:var(--primary)}

/* QR */
.qr-wrap{text-align:center;padding:2rem 1rem}
.qr-box{background:#fff;border:2px solid var(--border);border-radius:16px;padding:1.5rem;display:inline-block;margin-bottom:1.25rem;box-shadow:var(--shadow)}
.qr-box img,.qr-box canvas{width:180px;height:180px;display:block}
.qr-amount{font-size:1.6rem;font-weight:800;color:var(--primary);margin-bottom:.25rem}
.qr-note{font-size:.82rem;color:var(--muted)}
.upi-id{background:var(--bg);border:1.5px dashed var(--primary);border-radius:10px;padding:.65rem 1rem;font-size:.88rem;font-weight:600;color:var(--primary);text-align:center;margin:.75rem 0;cursor:copy}

/* STATUS */
.status-wrap{text-align:center;padding:3rem 1rem}
.status-icon{font-size:4rem;margin-bottom:1rem}
.status-title{font-size:1.4rem;font-weight:700;margin-bottom:.5rem}
.status-msg{color:var(--muted);font-size:.9rem;margin-bottom:1.5rem}
.pulse{animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* BANNER */
.banner-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem;margin-bottom:2rem}
.banner-card{border-radius:var(--radius);padding:1.25rem 1.5rem;color:#fff;display:flex;align-items:center;gap:1rem;cursor:pointer;transition:transform .2s}
.banner-card:hover{transform:translateY(-2px)}
.banner-icon{font-size:2.5rem;flex-shrink:0}
.banner-text h3{font-size:1rem;font-weight:700;margin-bottom:.2rem}
.banner-text p{font-size:.8rem;opacity:.85}
.b-purple{background:linear-gradient(135deg,#6c63ff,#a78bfa)}
.b-pink{background:linear-gradient(135deg,#ff6584,#fca5a5)}
.b-blue{background:linear-gradient(135deg,#3b82f6,#93c5fd)}
.b-green{background:linear-gradient(135deg,#10b981,#6ee7b7)}
.b-orange{background:linear-gradient(135deg,#f59e0b,#fde68a);color:#1a1a2e}

/* BOOKING */
.flight-card,.hotel-card{background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius);padding:1.25rem;margin-bottom:1rem;cursor:pointer;transition:all .2s;box-shadow:var(--shadow)}
.flight-card:hover,.hotel-card:hover{border-color:var(--primary);transform:translateY(-2px)}
.flight-row{display:flex;align-items:center;justify-content:space-between}
.flight-time{font-size:1.2rem;font-weight:700}
.flight-city{font-size:.75rem;color:var(--muted)}
.flight-mid{text-align:center;flex:1;padding:0 .75rem}
.flight-duration{font-size:.75rem;color:var(--muted)}
.flight-line{height:2px;background:var(--border);margin:.2rem 0;position:relative}
.flight-line::after{content:"✈";position:absolute;top:-8px;left:50%;transform:translateX(-50%);font-size:.8rem}
.flight-price{font-size:1.1rem;font-weight:700;color:var(--primary)}
.hotel-img{width:100%;height:140px;object-fit:cover;border-radius:10px;background:linear-gradient(135deg,#e0e7ff,#c7d2fe);display:flex;align-items:center;justify-content:center;font-size:3rem;margin-bottom:.75rem}
.hotel-name{font-weight:700;margin-bottom:.25rem}
.hotel-meta{font-size:.8rem;color:var(--muted);margin-bottom:.4rem}
.hotel-price{font-size:1rem;font-weight:700;color:var(--primary)}
.stars{color:#f59e0b;font-size:.85rem}

/* BOTTOM NAV (mobile) */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--border);display:flex;padding:.5rem 0;z-index:100}
.bnav-item{flex:1;display:flex;flex-direction:column;align-items:center;font-size:.65rem;color:var(--muted);gap:.15rem;cursor:pointer;transition:color .2s}
.bnav-item.active,.bnav-item:hover{color:var(--primary)}
.bnav-icon{font-size:1.2rem}

/* CHIP */
.chip{display:inline-block;background:#f0efff;color:var(--primary);border-radius:20px;padding:.2rem .7rem;font-size:.75rem;font-weight:600;margin:.2rem}

/* OFFERS */
.offer-scroll{display:flex;gap:.75rem;overflow-x:auto;padding-bottom:.5rem;margin-bottom:1.5rem}
.offer-scroll::-webkit-scrollbar{display:none}
.offer-card{min-width:180px;background:linear-gradient(135deg,#6c63ff,#a78bfa);color:#fff;border-radius:12px;padding:1rem;flex-shrink:0}
.offer-card h4{font-size:.85rem;margin-bottom:.2rem}
.offer-card p{font-size:.72rem;opacity:.85}
.offer-badge{background:rgba(255,255,255,.25);border-radius:8px;padding:.15rem .55rem;font-size:.7rem;font-weight:700;display:inline-block;margin-top:.4rem}

body{padding-bottom:70px}
@media(min-width:768px){.bottom-nav{display:none}body{padding-bottom:0}}

/* ── Payment Overlay ──────────────────────────────────────────────── */
.pay-overlay {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(245,247,255,.97);
  display: none; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 2rem; text-align: center;
}
.pay-overlay-card {
  background: #fff; border-radius: 24px;
  padding: 2.5rem 2rem; max-width: 380px; width: 100%;
  box-shadow: 0 8px 48px rgba(108,99,255,.18);
}
.loader-ring {
  width: 72px; height: 72px; border-radius: 50%;
  border: 6px solid #e8eaf6;
  border-top-color: var(--primary);
  animation: spin 1s linear infinite;
  margin: 0 auto 1.25rem;
}
@keyframes spin { to { transform: rotate(360deg); } }
.overlay-title { font-size: 1.1rem; font-weight: 700; margin-bottom: .4rem; }
.overlay-sub   { font-size: .85rem; color: var(--muted); margin-bottom: 1rem; }
.overlay-ref   { font-size: .75rem; background: #f0efff; color: var(--primary); border-radius: 8px; padding: .3rem .75rem; display: inline-block; margin-bottom: 1.25rem; }
.overlay-tip   { font-size: .75rem; color: var(--muted); margin-top: 1rem; }

.success-icon { font-size: 4rem; margin-bottom: 1rem; animation: popIn .4s ease; }
.failed-icon  { font-size: 4rem; margin-bottom: 1rem; }
@keyframes popIn { 0% { transform: scale(0); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }
.success-msg  { font-size: .92rem; color: var(--text); line-height: 1.6; margin-bottom: 1.25rem; }

/* Round category row */
.round-cat-row{display:flex;gap:1.1rem;overflow-x:auto;padding:.5rem .25rem 1rem;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.round-cat-row::-webkit-scrollbar{display:none}
.round-cat{display:flex;flex-direction:column;align-items:center;gap:.45rem;cursor:pointer;flex-shrink:0;width:64px}
.round-cat-icon{width:58px;height:58px;border-radius:50%;background:#fff;border:1.5px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:1.55rem;box-shadow:0 2px 10px rgba(108,99,255,.10);transition:all .2s}
.round-cat:hover .round-cat-icon{border-color:var(--primary);background:#f0efff;transform:translateY(-3px);box-shadow:0 6px 18px rgba(108,99,255,.18)}
.round-cat-name{font-size:.68rem;font-weight:600;color:var(--text);text-align:center;line-height:1.2;white-space:nowrap}

/* Payment proof upload */
.upload-proof-box{border:2px dashed var(--border);border-radius:12px;padding:1rem;text-align:center;margin-top:.75rem;cursor:pointer;transition:border-color .2s}
.upload-proof-box:hover{border-color:var(--primary)}
.upload-proof-label{display:flex;flex-direction:column;align-items:center;gap:.3rem;cursor:pointer;font-size:.85rem;font-weight:600;color:var(--primary)}
.upload-proof-label span:first-child{font-size:1.6rem}