/* ============================================================
   Lebanon Wallet — App Styles (SellHub-inspired)
   ============================================================ */

:root {
    --gold:         #f5c518;
    --gold-dim:     #d4a017;
    --gold-dark:    #a07810;
    --gold-glow:    rgba(245, 197, 24, 0.15);
    --gold-border:  rgba(245, 197, 24, 0.25);
    --bg:           #181A20;
    --bg-secondary: #1E2026;
    --bg-card:      #2B3139;
    --bg-card-hover:#363C46;
    --bg-muted:     #363C46;
    --border:        rgba(255, 255, 255, 0.07);
    --border-hover:  rgba(245, 197, 24, 0.30);
    --border-active: rgba(245, 197, 24, 0.55);
    --text:       #ffffff;
    --text-muted: rgba(255, 255, 255, 0.45);
    --text-dim:   rgba(255, 255, 255, 0.25);
    --text-gold:  #f5c518;
    --radius-sm: 8px;
    --radius:    12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { background-color: var(--bg); font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; color: var(--text); }

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: #181A20; }
::-webkit-scrollbar-thumb { background: #2B3139; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

.text-gold-gradient {
    background: linear-gradient(135deg, #f5c518 0%, #d4a017 55%, #a07810 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

/* ─── Navigation ─────────────────────────────────────────────── */
.nav-link { font-size:.875rem; font-weight:500; color:rgba(255,255,255,.50); padding:.5rem .875rem; border-radius:var(--radius-sm); transition:color .2s; text-decoration:none; position:relative; }
.nav-link:hover { color:rgba(255,255,255,.9); }
.nav-link.active { color:#fff; font-weight:600; }
.nav-link.active::after { content:''; position:absolute; bottom:3px; left:.875rem; right:.875rem; height:2px; background:var(--gold); border-radius:2px; }

.nav-btn-ghost { display:inline-flex; align-items:center; gap:.4rem; font-size:.8125rem; font-weight:500; color:rgba(255,255,255,.65); border:1px solid rgba(255,255,255,.14); padding:.45rem .875rem; border-radius:var(--radius-sm); transition:all .2s; text-decoration:none; white-space:nowrap; }
.nav-btn-ghost:hover { color:white; border-color:rgba(255,255,255,.30); background:rgba(255,255,255,.04); }

.nav-btn-gold { display:inline-flex; align-items:center; gap:.375rem; font-size:.8125rem; font-weight:700; color:#000; background:var(--gold); padding:.45rem 1.125rem; border-radius:var(--radius-sm); transition:all .2s; text-decoration:none; white-space:nowrap; letter-spacing:.01em; }
.nav-btn-gold:hover { background:#ffd028; box-shadow:0 0 20px rgba(245,197,24,.28); }

/* ─── Hero ─────────────────────────────────────────────────── */
.hero-bg { background: var(--bg); }
.hero-grid { background-image: radial-gradient(circle, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 30px 30px; }

.hero-location-badge { display:inline-flex; align-items:center; gap:.5rem; font-size:.6875rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.38); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); padding:.375rem .875rem; border-radius:9999px; }

/* ─── Hero Scrolling Cards ─────────────────────────────────── */
.hero-cards-area { display:flex; gap:12px; overflow:hidden; height:520px; position:relative; -webkit-mask-image:linear-gradient(to bottom, transparent 0%, black 16%, black 84%, transparent 100%); mask-image:linear-gradient(to bottom, transparent 0%, black 16%, black 84%, transparent 100%); }
.hero-cards-col { display:flex; flex-direction:column; gap:10px; flex:1; }
.hero-cards-col-1 { animation: heroScrollUp   24s linear infinite; }
.hero-cards-col-2 { animation: heroScrollDown 20s linear infinite; }
.hero-cards-col-1:hover, .hero-cards-col-2:hover { animation-play-state: paused; }

@keyframes heroScrollUp   { from { transform:translateY(0);    } to { transform:translateY(-50%); } }
@keyframes heroScrollDown { from { transform:translateY(-50%); } to { transform:translateY(0);    } }

.hero-preview-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; cursor:pointer; transition:border-color .25s; flex-shrink:0; }
.hero-preview-card:hover { border-color:var(--border-hover); }
.hero-preview-visual { height:110px; display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden; }
.hero-preview-body { padding:12px 14px 14px; }
.hero-preview-badge { display:inline-block; font-size:9px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.28); background:rgba(255,255,255,.05); padding:3px 8px; border-radius:9999px; margin-bottom:7px; }
.hero-preview-title { font-size:13px; font-weight:700; color:white; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:3px; line-height:1.3; }
.hero-preview-desc { font-size:11px; color:rgba(255,255,255,.33); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ─── Section Labels ──────────────────────────────────────── */
.section-label { display:inline-flex; align-items:center; gap:.5rem; font-size:.6875rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.33); background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); padding:.35rem .875rem; border-radius:9999px; margin-bottom:1.25rem; }
.section-badge { display:inline-flex; align-items:center; gap:.5rem; background:rgba(245,197,24,.07); border:1px solid rgba(245,197,24,.18); color:var(--gold); font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.13em; padding:.35rem .875rem; border-radius:9999px; margin-bottom:1.25rem; }

/* ─── SellHub Cards ─────────────────────────────────────── */
.sh-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:border-color .25s,transform .25s,box-shadow .25s; display:flex; flex-direction:column; text-decoration:none; }
.sh-card:hover { border-color:var(--border-hover); transform:translateY(-3px); box-shadow:0 20px 50px rgba(0,0,0,.65); }
.sh-card-body { padding:1.375rem; display:flex; flex-direction:column; flex:1; }
.sh-card-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:1rem; }
.sh-card-icon { width:2.75rem; height:2.75rem; border-radius:10px; overflow:hidden; display:flex; align-items:center; justify-content:center; flex-shrink:0; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); font-size:1.375rem; }
.sh-badge { font-size:9px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:rgba(255,255,255,.28); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.07); padding:3px 9px; border-radius:9999px; white-space:nowrap; margin-top:.25rem; }
.sh-card-title { font-size:1rem; font-weight:700; color:white; margin-bottom:.5rem; transition:color .2s; line-height:1.35; }
.sh-card:hover .sh-card-title { color:var(--gold); }
.sh-card-desc { font-size:.8125rem; color:rgba(255,255,255,.38); line-height:1.65; flex:1; }
.sh-card-footer { margin-top:1.125rem; padding-top:.875rem; border-top:1px solid rgba(255,255,255,.05); display:flex; align-items:center; justify-content:space-between; }
.sh-card-action { font-size:.8125rem; font-weight:600; color:var(--gold); display:flex; align-items:center; gap:.25rem; transition:gap .2s; }
.sh-card:hover .sh-card-action { gap:.5rem; }

/* ─── Legacy .card ─────────────────────────────────────── */
.card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); transition:all .25s; }
.card:hover { border-color:var(--border-hover); box-shadow:0 16px 48px rgba(0,0,0,.6); transform:translateY(-2px); }
.card-glow { box-shadow:0 0 30px rgba(245,197,24,.08); }

/* ─── Buttons ─────────────────────────────────────────── */
.btn-gold { background:var(--gold); color:#000; font-weight:700; border-radius:var(--radius-sm); padding:.75rem 1.5rem; transition:all .2s; border:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:.5rem; text-decoration:none; font-size:.875rem; letter-spacing:.01em; }
.btn-gold:hover { background:#ffd028; box-shadow:0 4px 24px rgba(245,197,24,.30); transform:translateY(-1px); }
.btn-gold:active { transform:translateY(0); }

.btn-outline-gold { background:transparent; color:white; font-weight:600; border-radius:var(--radius-sm); padding:.75rem 1.5rem; transition:all .2s; border:1px solid rgba(255,255,255,.18); cursor:pointer; display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; font-size:.875rem; }
.btn-outline-gold:hover { border-color:rgba(255,255,255,.38); background:rgba(255,255,255,.04); }

/* ─── Service icon ─────────────────────────────────────── */
.service-icon-wrap { width:3rem; height:3rem; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; font-size:1.375rem; transition:all .25s; }

/* ─── Game Cards ─────────────────────────────────────── */
.game-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:all .25s; cursor:pointer; }
.game-card:hover { border-color:var(--border-hover); box-shadow:0 16px 48px rgba(0,0,0,.6); transform:translateY(-3px); }
.game-card.selected { border-color:var(--gold); box-shadow:0 0 0 1px var(--gold),0 8px 32px rgba(245,197,24,.12); }

/* ─── Package Cards ─────────────────────────────────────── */
.package-card { background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:var(--radius); padding:1rem; cursor:pointer; transition:all .2s; text-align:center; }
.package-card:hover { border-color:var(--border-hover); background:rgba(245,197,24,.04); }
.package-card.selected { border-color:var(--gold); background:rgba(245,197,24,.07); box-shadow:0 0 0 1px var(--gold); }
.package-card.popular-badge::before { content:'Popular'; display:block; background:var(--gold); color:#000; font-size:.625rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; padding:.2rem .6rem; border-radius:9999px; margin-bottom:.5rem; width:fit-content; margin-left:auto; margin-right:auto; }

/* ─── Rate Cards ─────────────────────────────────────── */
.rate-card { background:rgba(255,255,255,.025); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem; transition:all .25s; }
.rate-card:hover { border-color:var(--border-hover); background:rgba(255,255,255,.035); }

/* ─── Forms ─────────────────────────────────────────── */
.form-input { width:100%; background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:var(--radius-sm); padding:.75rem 1rem; color:white; font-size:.875rem; transition:all .2s; outline:none; }
.form-input:focus { border-color:var(--gold); background:rgba(245,197,24,.03); box-shadow:0 0 0 3px rgba(245,197,24,.08); }
.form-input::placeholder { color:rgba(255,255,255,.22); }
.form-label { display:block; font-size:.8125rem; font-weight:500; color:rgba(255,255,255,.55); margin-bottom:.5rem; }
.form-select { appearance:none; background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23f5c518' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position:right .75rem center; background-repeat:no-repeat; background-size:1.25em; padding-right:2.5rem; }

/* ─── Admin ─────────────────────────────────────────── */
.admin-sidebar { width:260px; background:#1E2026; border-right:1px solid rgba(255,255,255,.06); min-height:100vh; position:fixed; top:0; left:0; z-index:40; transition:transform .3s; }
.admin-nav-link { display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem; border-radius:var(--radius-sm); color:rgba(255,255,255,.5); font-size:.875rem; font-weight:500; transition:all .2s; margin-bottom:.125rem; text-decoration:none; }
.admin-nav-link:hover { color:white; background:rgba(255,255,255,.05); }
.admin-nav-link.active { color:var(--gold); background:rgba(245,197,24,.08); border:1px solid rgba(245,197,24,.14); }

/* ─── Badges ─────────────────────────────────────────── */
.badge-pending    { background:rgba(234,179,8,.10);  color:#eab308; border:1px solid rgba(234,179,8,.20); }
.badge-processing { background:rgba(59,130,246,.10); color:#60a5fa; border:1px solid rgba(59,130,246,.20); }
.badge-completed  { background:rgba(34,197,94,.10);  color:#4ade80; border:1px solid rgba(34,197,94,.20); }
.badge-rejected   { background:rgba(239,68,68,.10);  color:#f87171; border:1px solid rgba(239,68,68,.20); }
.badge { display:inline-flex; align-items:center; padding:.25rem .625rem; border-radius:9999px; font-size:.75rem; font-weight:600; }

/* ─── Animations ─────────────────────────────────────── */
@keyframes fadeInUp { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes pulse-gold { 0%,100% { box-shadow:0 0 0 0 rgba(245,197,24,.3); } 50% { box-shadow:0 0 0 8px rgba(245,197,24,0); } }
@keyframes shimmer { 0% { background-position:-200% center; } 100% { background-position:200% center; } }

.animate-fade-in-up { animation:fadeInUp .55s ease both; }
.animate-fade-in { animation:fadeIn .45s ease both; }
.animate-delay-100 { animation-delay:.10s; }
.animate-delay-200 { animation-delay:.20s; }
.animate-delay-300 { animation-delay:.30s; }
.animate-delay-400 { animation-delay:.40s; }

.skeleton { background:linear-gradient(90deg,rgba(255,255,255,.03) 25%,rgba(255,255,255,.06) 50%,rgba(255,255,255,.03) 75%); background-size:200% auto; animation:shimmer 1.5s linear infinite; border-radius:var(--radius-sm); }

.divider-gold { height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent); }

/* ─── Toasts ─────────────────────────────────────────── */
#toast-container { position:fixed; bottom:5rem; right:1.5rem; z-index:9999; display:flex; flex-direction:column; gap:.75rem; }
.toast { min-width:280px; max-width:380px; padding:.875rem 1.125rem; border-radius:var(--radius); font-size:.875rem; font-weight:500; backdrop-filter:blur(12px); animation:fadeInUp .3s ease both; display:flex; align-items:flex-start; gap:.75rem; cursor:pointer; }
.toast-success { background:rgba(34,197,94,.10); border:1px solid rgba(34,197,94,.25); color:#4ade80; }
.toast-error   { background:rgba(239,68,68,.10); border:1px solid rgba(239,68,68,.25); color:#f87171; }
.toast-info    { background:rgba(245,197,24,.08); border:1px solid rgba(245,197,24,.25); color:var(--gold); }

/* ─── Tables ─────────────────────────────────────────── */
.table-wrapper { overflow-x:auto; border-radius:var(--radius); border:1px solid rgba(255,255,255,.06); }
.data-table { width:100%; border-collapse:collapse; font-size:.875rem; }
.data-table th { background:rgba(255,255,255,.02); color:rgba(255,255,255,.38); font-weight:600; font-size:.6875rem; text-transform:uppercase; letter-spacing:.09em; padding:.75rem 1rem; text-align:left; border-bottom:1px solid rgba(255,255,255,.06); white-space:nowrap; }
.data-table td { padding:.875rem 1rem; border-bottom:1px solid rgba(255,255,255,.04); color:rgba(255,255,255,.72); }
.data-table tr:last-child td { border-bottom:none; }
.data-table tbody tr:hover td { background:rgba(255,255,255,.015); }

/* ─── Mobile ─────────────────────────────────────────── */
@media (max-width:640px) {
    .hero-cta-group { flex-direction:column; width:100%; }
    .hero-cta-group a, .hero-cta-group button { width:100%; justify-content:center; }
    .hero-cards-area { height:360px; }
}
@media print { nav,footer,#toast-container,.fixed { display:none !important; } body { background:white; color:black; } }