/* =============================================
   UC Ghor - Blue Theme (Trogon Style)
   ============================================= */
:root {
    --primary:   #00aaff;
    --primary-dk:#0077cc;
    --primary-lt:#e0f4ff;
    --accent:    #00c853;
    --bg:        #f0f6ff;
    --white:     #ffffff;
    --dark:      #0a1628;
    --gray:      #6c757d;
    --border:    #d0e8ff;
    --danger:    #e53935;
    --warning:   #ff6f00;
    --text:      #1a202c;
    --shadow:    0 2px 12px rgba(0,150,255,0.10);
    --radius:    12px;
    --radius-sm: 8px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
    font-family:'Hind Siliguri','Segoe UI',sans-serif;
    background:var(--bg);
    color:var(--text);
    padding-bottom:80px;
    min-height:100vh;
}
a { text-decoration:none; color:inherit; }
img { max-width:100%; }

/* ══ NAVBAR ══ */
.navbar {
    background:linear-gradient(135deg,#003d7a 0%,#0066cc 60%,#0099ff 100%);
    position:sticky; top:0; z-index:100;
    box-shadow:0 3px 15px rgba(0,100,200,0.35);
}
.nav-container {
    display:flex; justify-content:space-between; align-items:center;
    padding:10px 14px; max-width:600px; margin:0 auto;
}
.logo { display:flex; align-items:center; gap:8px; }
.logo-icon-wrap {
    width:38px; height:38px; border-radius:8px;
    background:rgba(255,255,255,0.15);
    display:flex; align-items:center; justify-content:center;
    border:1.5px solid rgba(255,255,255,0.3);
}
.logo-icon-wrap img { width:28px; height:28px; object-fit:contain; }
.logo-icon-wrap i { color:#fff; font-size:18px; }
.logo-text { line-height:1.15; }
.logo-text .top { font-size:13px; font-weight:800; color:#7fddff; letter-spacing:1px; }
.logo-text .bottom { font-size:10px; font-weight:600; color:rgba(255,255,255,0.75); letter-spacing:1.5px; }
.nav-right { display:flex; align-items:center; gap:8px; }
.wallet-pill {
    background:rgba(255,255,255,0.15);
    border:1.5px solid rgba(255,255,255,0.3);
    color:#fff; padding:6px 13px;
    border-radius:20px; font-size:13px; font-weight:700;
    display:flex; align-items:center; gap:6px;
}
.wallet-pill i { font-size:13px; }
.avatar-circle {
    width:34px; height:34px; border-radius:50%;
    background:rgba(255,255,255,0.2);
    border:2px solid rgba(255,255,255,0.4);
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-weight:700; font-size:15px;
    overflow:hidden;
}
.avatar-circle img { width:100%; height:100%; object-fit:cover; }
.btn-login {
    background:#fff; color:var(--primary-dk);
    padding:7px 18px; border-radius:20px;
    font-weight:700; font-size:13px;
}

/* ══ NOTICE BANNER ══ */
.notice-banner {
    background:linear-gradient(90deg,#005bb5,#0080ff);
    color:#fff; max-width:600px; margin:0 auto;
    padding:10px 14px;
    display:flex; align-items:flex-start; gap:10px;
    position:relative;
}
.notice-banner .notice-icon {
    background:rgba(255,255,255,0.2);
    border-radius:50%; width:28px; height:28px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; font-size:13px;
}
.notice-banner .notice-text { font-size:12px; line-height:1.6; flex:1; }
.notice-banner .notice-title { font-weight:700; font-size:13px; margin-bottom:2px; }
.notice-close {
    background:none; border:none; color:rgba(255,255,255,0.7);
    font-size:16px; cursor:pointer; padding:0 4px; flex-shrink:0;
}

/* ══ HERO SLIDER ══ */
.hero-slider { max-width:600px; margin:0 auto; position:relative; overflow:hidden; }
.hero-track { display:flex; transition:transform 0.4s ease; }
.hero-slide {
    min-width:100%;
    background:linear-gradient(135deg,#0057a8 0%,#0099ff 60%,#00c6ff 100%);
    padding:20px 20px 20px 24px;
    display:flex; align-items:center; justify-content:space-between;
    min-height:160px; position:relative; overflow:hidden;
}
.hero-slide::before {
    content:''; position:absolute; inset:0;
    background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Ccircle cx='30' cy='30' r='30'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.hero-content { position:relative; z-index:1; }
.hero-content h2 { font-size:28px; font-weight:900; color:#fff; line-height:1.15; text-shadow:0 2px 8px rgba(0,0,0,0.2); }
.hero-content p { font-size:12px; color:rgba(255,255,255,0.8); margin-top:6px; }
.hero-cta {
    display:inline-block; margin-top:12px;
    background:#fff; color:var(--primary-dk);
    padding:8px 20px; border-radius:20px;
    font-weight:700; font-size:13px;
    box-shadow:0 4px 12px rgba(0,0,0,0.15);
}
.hero-img { width:120px; flex-shrink:0; position:relative; z-index:1; }
.hero-img img { width:100%; filter:drop-shadow(0 4px 12px rgba(0,0,0,0.3)); }
.hero-dots { display:flex; justify-content:center; gap:6px; padding:8px 0; background:var(--bg); }
.hero-dot { width:8px; height:8px; border-radius:50%; background:#b0d0f0; border:none; cursor:pointer; padding:0; transition:all 0.2s; }
.hero-dot.active { background:var(--primary); width:20px; border-radius:4px; }

/* ══ QUICK BUTTONS ══ */
.quick-btns {
    max-width:600px; margin:0 auto;
    display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
    padding:12px 12px 4px;
}
.quick-btn {
    background:#fff; border-radius:10px; padding:10px 6px;
    display:flex; flex-direction:column; align-items:center; gap:4px;
    box-shadow:var(--shadow); border:1.5px solid var(--border);
    cursor:pointer; transition:transform 0.2s;
}
.quick-btn:hover { transform:translateY(-2px); }
.quick-btn i { font-size:20px; }
.quick-btn .qb-label { font-size:10px; color:var(--gray); font-weight:600; }
.quick-btn .qb-title { font-size:12px; font-weight:700; color:var(--text); }

/* ══ SECTION TITLE ══ */
.section-title {
    text-align:center; font-size:18px; font-weight:900;
    letter-spacing:1px; padding:16px 12px 10px;
    max-width:600px; margin:0 auto;
    font-family:'Poppins','Segoe UI',sans-serif;
}
.section-title.blue { color:var(--primary-dk); }

/* ══ PRODUCT GRID ══ */
.product-grid {
    display:grid; grid-template-columns:repeat(3,1fr);
    gap:10px; padding:0 12px 4px;
    max-width:600px; margin:0 auto;
}
.product-card {
    background:#fff; border-radius:10px; overflow:hidden;
    box-shadow:var(--shadow); cursor:pointer;
    transition:transform 0.2s; border:1.5px solid var(--border);
}
.product-card:hover { transform:translateY(-3px); box-shadow:0 6px 20px rgba(0,150,255,0.18); }
.product-card-img {
    width:100%; aspect-ratio:1; object-fit:cover;
    background:linear-gradient(135deg,#0057a8,#0099ff);
    display:flex; align-items:center; justify-content:center;
    font-size:26px; color:rgba(255,255,255,0.9);
    position:relative; overflow:hidden;
}
.product-card-img img { width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.product-card-img .img-placeholder { position:relative; z-index:1; }
.product-card-label {
    padding:6px 6px 8px; font-size:10px; font-weight:700;
    color:var(--text); text-align:center; line-height:1.3;
}

/* ══ ACTION BUTTONS ROW ══ */
.action-row {
    max-width:600px; margin:12px auto 0;
    padding:0 12px;
    display:grid; grid-template-columns:1fr 1fr; gap:10px;
}
.action-card {
    background:#fff; border:1.5px solid var(--border);
    border-radius:10px; padding:12px;
    display:flex; align-items:center; gap:10px;
    box-shadow:var(--shadow); cursor:pointer;
}
.action-card .ac-icon { font-size:22px; }
.action-card .ac-sub { color:var(--primary); font-size:12px; font-weight:700; }
.action-card .ac-desc { font-size:10px; color:var(--gray); }

/* ══ WARNING BOX ══ */
.warning-box {
    max-width:600px; margin:14px auto;
    padding:0 12px;
}
.warning-inner {
    background:linear-gradient(135deg,#0d1b2a,#1a2a3a);
    border-radius:var(--radius); padding:14px;
    color:#fff; text-align:center;
    border:1px solid rgba(0,150,255,0.2);
}
.warning-inner .w-title { color:var(--danger); font-size:15px; font-weight:800; margin-bottom:6px; }
.warning-inner .w-red { color:#ff6b6b; font-weight:700; }
.warning-inner .w-footer {
    background:var(--danger); border-radius:5px;
    padding:6px 10px; margin-top:8px; font-size:11px; font-weight:600;
}

/* ══ FOOTER ══ */
.site-footer {
    max-width:600px; margin:16px auto 0;
    padding:16px; background:#fff;
    text-align:center; border-top:2px solid var(--border);
}
.footer-social { display:flex; justify-content:center; gap:10px; margin-bottom:12px; }
.footer-social a {
    width:36px; height:36px; border-radius:50%;
    background:var(--bg); display:flex; align-items:center; justify-content:center;
    font-size:15px; color:var(--text); transition:all 0.2s; border:1px solid var(--border);
}
.footer-social a:hover { background:var(--primary); color:#fff; border-color:var(--primary); }
.footer-credit { font-size:11px; color:var(--gray); }
.footer-credit span { color:var(--primary); font-weight:600; }

/* ══ BOTTOM NAV ══ */
.bottom-nav {
    position:fixed; bottom:0; left:0; right:0;
    background:#fff; border-top:1.5px solid var(--border);
    display:flex; justify-content:space-around;
    padding:7px 0 10px; z-index:99;
    box-shadow:0 -3px 14px rgba(0,100,200,0.10);
}
.bottom-nav-item {
    display:flex; flex-direction:column; align-items:center; gap:2px;
    color:var(--gray); font-size:10px; font-weight:600; min-width:50px;
}
.bottom-nav-item i { font-size:20px; }
.bottom-nav-item.active { color:var(--primary); }

/* ══ HELP WIDGET ══ */
.help-widget { position:fixed; bottom:82px; right:14px; z-index:98; display:flex; flex-direction:column; align-items:flex-end; gap:7px; }
.help-text { background:var(--danger); color:#fff; padding:7px 13px; border-radius:18px; font-size:12px; font-weight:700; white-space:nowrap; }
.call-btn {
    width:44px; height:44px; background:var(--danger); color:#fff;
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:18px; box-shadow:0 4px 14px rgba(229,57,53,0.4);
    animation:pulse 2s infinite;
}
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(229,57,53,.4)} 70%{box-shadow:0 0 0 10px rgba(229,57,53,0)} 100%{box-shadow:0 0 0 0 rgba(229,57,53,0)} }

/* ══ FLASH ══ */
.flash-message {
    max-width:600px; margin:8px auto;
    padding:11px 14px; border-radius:8px;
    display:flex; align-items:center; gap:8px; font-size:13px; position:relative;
}
.flash-success { background:#e8f5e9; color:#2e7d32; border-left:4px solid var(--accent); }
.flash-error   { background:#ffebee; color:#c62828; border-left:4px solid var(--danger); }
.flash-close   { position:absolute; right:10px; background:none; border:none; font-size:17px; cursor:pointer; opacity:.6; }

/* ══ AUTH PAGES ══ */
.auth-page { min-height:100vh; background:var(--bg); }
.auth-card {
    max-width:500px; margin:20px auto;
    background:#fff; border-radius:var(--radius);
    padding:26px 22px; box-shadow:var(--shadow);
    border:1.5px solid var(--border);
}
.auth-card h2 { font-size:24px; font-weight:800; margin-bottom:18px; }
.google-btn {
    width:100%; border:1.5px solid var(--border); background:#fff;
    border-radius:8px; padding:11px; font-size:14px;
    display:flex; align-items:center; justify-content:center; gap:10px;
    cursor:pointer; font-weight:600; transition:border-color 0.2s; color:var(--text);
}
.google-btn:hover { border-color:#4285F4; }
.divider { text-align:center; margin:14px 0; color:var(--gray); font-size:12px; position:relative; }
.divider::before,.divider::after { content:''; position:absolute; top:50%; width:38%; height:1px; background:var(--border); }
.divider::before { left:0; } .divider::after { right:0; }
.form-group { margin-bottom:14px; }
.form-group label { display:block; font-weight:700; font-size:13px; margin-bottom:5px; }
.form-control {
    width:100%; padding:11px 13px; border:1.5px solid var(--border);
    border-radius:8px; font-size:14px; font-family:inherit; background:#fff; color:var(--text); transition:border-color 0.2s;
}
.form-control:focus { outline:none; border-color:var(--primary); }
.btn-primary {
    width:100%; background:linear-gradient(135deg,#0066cc,#0099ff);
    color:#fff; border:none; padding:13px; border-radius:8px;
    font-size:15px; font-weight:700; cursor:pointer; transition:opacity 0.2s; font-family:inherit;
}
.btn-primary:hover { opacity:.9; }
.auth-link { text-align:center; margin-top:14px; font-size:13px; color:var(--gray); }
.auth-link a { color:var(--primary); font-weight:700; }

/* ══ CONTACT PAGE ══ */
.contact-card { max-width:500px; margin:16px auto; background:#fff; border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); border:1.5px solid var(--border); }
.contact-item {
    display:flex; align-items:center; gap:12px; padding:13px 14px;
    border:1px solid var(--border); border-radius:8px; margin-bottom:10px;
    cursor:pointer; transition:all 0.2s; font-size:13px; color:var(--text);
}
.contact-item:hover { border-color:var(--primary); background:var(--primary-lt); }

/* ══ PROFILE ══ */
.profile-header {
    background:linear-gradient(135deg,#003d7a,#0066cc,#0099ff);
    padding:28px 20px 20px; text-align:center; color:#fff; max-width:600px; margin:0 auto;
}
.profile-avatar { width:88px; height:88px; border-radius:50%; object-fit:cover; border:3px solid rgba(255,255,255,0.5); margin-bottom:10px; }
.profile-name { font-size:20px; font-weight:800; color:#7fddff; margin-bottom:3px; }
.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; max-width:600px; margin:14px auto; padding:0 12px; }
.stat-card { background:#fff; border-radius:10px; padding:14px; text-align:center; border:1.5px solid var(--border); box-shadow:var(--shadow); }
.stat-card .stat-value { font-size:20px; font-weight:800; color:var(--primary); }
.stat-card .stat-label { font-size:12px; color:var(--gray); font-weight:600; }
.account-info-card { max-width:600px; margin:0 auto 14px; padding:0 12px; }
.account-info-card .card-inner { background:#fff; border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); border:1.5px solid var(--border); }
.balance-display { background:linear-gradient(135deg,#0066cc,#0099ff); color:#fff; border-radius:8px; padding:13px; text-align:center; font-size:22px; font-weight:800; margin-bottom:10px; }
.logout-btn { display:block; max-width:600px; margin:10px auto; padding:0 12px; }
.logout-btn a { display:block; width:100%; background:var(--danger); color:#fff; text-align:center; padding:13px; border-radius:8px; font-weight:700; font-size:14px; }

/* ══ TOPUP PAGE ══ */
.topup-page { max-width:600px; margin:0 auto; padding:14px 12px; }
.topup-section { background:#fff; border-radius:var(--radius); padding:16px; margin-bottom:12px; box-shadow:var(--shadow); border:1.5px solid var(--border); }
.topup-section-header { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.step-circle { width:28px; height:28px; background:linear-gradient(135deg,#0066cc,#0099ff); color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; flex-shrink:0; }
.recharge-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.recharge-option { border:1.5px solid var(--border); border-radius:8px; padding:13px 10px; cursor:pointer; transition:all 0.2s; display:flex; align-items:center; gap:8px; font-size:13px; }
.recharge-option.selected { border-color:var(--primary); background:var(--primary-lt); }
.recharge-option .price { color:var(--warning); font-weight:800; }
.check-id-btn { width:100%; background:linear-gradient(135deg,#0066cc,#0099ff); color:#fff; border:none; padding:12px; border-radius:8px; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; margin-top:10px; }
.payment-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.payment-option { border:1.5px solid var(--border); border-radius:8px; padding:14px 10px; cursor:pointer; text-align:center; position:relative; transition:border-color 0.2s; }
.payment-option.selected { border-color:var(--primary); background:var(--primary-lt); }
.payment-option.selected::before { content:'✓'; position:absolute; top:5px; left:7px; background:var(--primary); color:#fff; border-radius:50%; width:16px; height:16px; font-size:10px; display:flex; align-items:center; justify-content:center; }
.buy-btn { width:100%; background:linear-gradient(135deg,#0066cc,#0099ff); color:#fff; border:none; padding:15px; border-radius:8px; font-size:17px; font-weight:800; cursor:pointer; font-family:inherit; margin-top:12px; letter-spacing:.5px; }

/* ══ ORDERS ══ */
.orders-page { max-width:600px; margin:0 auto; padding:14px 12px; }
.order-card { background:#fff; border-radius:10px; padding:13px; margin-bottom:10px; box-shadow:var(--shadow); display:flex; justify-content:space-between; align-items:center; border:1.5px solid var(--border); }
.badge { display:inline-block; padding:3px 10px; border-radius:12px; font-size:11px; font-weight:700; }
.badge-pending    { background:#fff3e0; color:#e65100; }
.badge-completed  { background:#e8f5e9; color:#2e7d32; }
.badge-processing { background:#e0f4ff; color:#0066cc; }
.badge-failed     { background:#ffebee; color:#c62828; }
.empty-state { text-align:center; padding:50px 20px; color:var(--gray); }
.empty-state i { font-size:44px; margin-bottom:12px; opacity:.3; display:block; }

/* ══ ADD MONEY ══ */
.add-money-page { max-width:600px; margin:0 auto; padding:14px 12px; }
.add-money-card { background:#fff; border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); margin-bottom:14px; border:1.5px solid var(--border); }
.video-tutorial { background:#fff; border-radius:var(--radius); padding:14px; box-shadow:var(--shadow); border:1.5px solid var(--border); }
.yt-embed { width:100%; aspect-ratio:16/9; border:none; border-radius:8px; }

/* ══ TUTORIAL ══ */
.tutorial-page { max-width:600px; margin:0 auto; padding:14px 12px; }
.tutorial-card { background:#fff; border-radius:var(--radius); padding:14px; box-shadow:var(--shadow); margin-bottom:12px; border:1.5px solid var(--border); }

/* ══ FORM LABEL ══ */
.form-label { display:block; font-size:13px; font-weight:700; margin-bottom:5px; }
.toggle-password { position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:#888; }

@media(min-width:600px){ body{max-width:600px;margin:0 auto;} .bottom-nav{max-width:600px;left:50%;transform:translateX(-50%);} }