/* =====================================================
   animations.css — RU Bus Tracker
   সব নতুন এনিমেশন এখানে, আলাদা ফাইলে রাখা হয়েছে
   যাতে main.css / components.css টাচ না করে যোগ করা যায়
   ===================================================== */

/* ---------- ১. রিপোর্ট/ভোট সাবমিট — কনফেটি + পালস বার্স্ট ---------- */
@keyframes rb-btn-pulse {
    0%   { transform: scale(1); }
    40%  { transform: scale(0.92); }
    70%  { transform: scale(1.06); }
    100% { transform: scale(1); }
}
.rb-burst-pulse {
    animation: rb-btn-pulse 0.45s cubic-bezier(.34,1.56,.64,1);
}

.rb-confetti-layer {
    position: fixed;
    left: 0; top: 0;
    width: 0; height: 0;
    pointer-events: none;
    z-index: 9999;
}
.rb-confetti-piece {
    position: fixed;
    width: 7px; height: 7px;
    border-radius: 2px;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.95;
    animation: rb-confetti-fall 700ms cubic-bezier(.25,.46,.45,.94) forwards;
}
@keyframes rb-confetti-fall {
    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--rb-x, 30px), var(--rb-y, 90px)) rotate(var(--rb-r, 200deg)) scale(0.4);
        opacity: 0;
    }
}

/* ছোট চেকমার্ক পপ (বাটনের ভিতরে/পাশে) */
@keyframes rb-check-pop {
    0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
    60%  { transform: scale(1.25) rotate(6deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.rb-check-pop {
    animation: rb-check-pop 0.4s cubic-bezier(.34,1.56,.64,1);
}

/* ---------- ২. স্কেলিটন শিমার (বাস কার্ড লোডিং) ---------- */
.skeleton-card {
    position: relative;
    overflow: hidden;
    background: #eef1ee;
    border-radius: 1rem;
    padding: 16px;
    margin-bottom: 14px;
}
.skeleton-header,
.skeleton-line {
    position: relative;
    overflow: hidden;
    background: #e2e6e2;
    border-radius: 8px;
}
.skeleton-header {
    height: 22px;
    width: 55%;
    margin-bottom: 12px;
}
.skeleton-line {
    height: 12px;
    margin-bottom: 8px;
}
.skeleton-line.medium { width: 75%; }
.skeleton-line.short  { width: 40%; }

.skeleton-card::after,
.skeleton-header::after,
.skeleton-line::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.75) 50%,
        rgba(255,255,255,0) 100%
    );
    animation: rb-shimmer 1.35s ease-in-out infinite;
}
@keyframes rb-shimmer {
    100% { transform: translateX(100%); }
}

/* ---------- ৩. নেক্সট ট্রিপ / লাইভ ক্লক — Number Ticker (প্রতি অঙ্ক আলাদাভাবে রোল করে) ---------- */
#nextTripInfo, #liveClock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
#nextTripTextInner {
    gap: 4px;
}
.rb-clock-ampm {
    margin-left: 3px;
    letter-spacing: 0.3px;
}
.rb-ticker-digit {
    display: inline-block;
    position: relative;
    overflow: hidden;
    height: 1.15em;
    line-height: 1.15em;
    vertical-align: bottom;
}
.rb-ticker-roll {
    animation: rb-ticker-roll 0.42s cubic-bezier(.34,1.56,.64,1);
}
@keyframes rb-ticker-roll {
    0%   { transform: translateY(-70%); opacity: 0; }
    55%  { transform: translateY(10%);  opacity: 1; }
    100% { transform: translateY(0);    opacity: 1; }
}

/* কপি আইকন <-> চেকমার্ক টগল — যেকোনো বাটনে বসানো যাবে (শুধু .rb-copy-icon-swap ক্লাস যোগ করলেই হবে) */
.rb-copy-icon-swap .fa-check { display: none; }
.rb-copy-icon-swap .fa-copy { display: inline-block; }
.rb-copy-icon-swap.copied .fa-copy { display: none; }
.rb-copy-icon-swap.copied .fa-check { display: inline-block; color: #10b981; }
.rb-copy-icon-swap.rb-copy-pop {
    animation: rb-check-pop 0.4s cubic-bezier(.34,1.56,.64,1);
}

/* ছোট কপি আইকন বাটন — ক্লক ও নেক্সট-ট্রিপের পাশে (হেডারের গাঢ় ব্যাকগ্রাউন্ডের জন্য) */
.rb-copy-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px; height: 20px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.85);
    font-size: 10px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease;
}
.rb-copy-btn:active {
    transform: scale(0.88);
}
.rb-copy-btn .fa-check { color: #34d399; }
.rb-copy-btn.copied {
    background: rgba(52,211,153,0.2);
}

/* ---------- ৪. টাইমলাইন প্রগ্রেস — স্টপেজের মধ্যে লাইন + নীল ফিল ---------- */
.stop-row {
    position: relative;
}
.stop-marker {
    position: absolute;
    left: 9px;
    top: 16px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #cbd5e1;           /* ডিফল্ট — এখনো পৌঁছায়নি */
    border: 2px solid #ffffff;
    box-shadow: 0 0 0 1px #cbd5e1, 0 1px 3px rgba(0,0,0,0.15);
    z-index: 2;
    transition: background-color 0.45s ease, box-shadow 0.45s ease,
                transform 0.35s cubic-bezier(.34,1.56,.64,1);
}
.stop-marker.start {
    background: #0f4c3a;
    box-shadow: 0 0 0 1px #0f4c3a, 0 1px 3px rgba(0,0,0,0.15);
}
.stop-marker.end {
    background: #ef4444;
    box-shadow: 0 0 0 1px #ef4444, 0 1px 3px rgba(0,0,0,0.15);
}
.stop-marker.filled,
.stop-marker.current {
    background: #10b981;           /* সবুজ — পার হয়ে গেছে / বর্তমান অবস্থান */
    box-shadow: 0 0 0 1px #10b981, 0 1px 3px rgba(0,0,0,0.2);
}
.stop-marker.current {
    animation: rb-marker-pulse 1.4s ease-in-out infinite;
    transform: scale(1.15);
}
@keyframes rb-marker-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.45), 0 0 0 1px #10b981; }
    50%      { box-shadow: 0 0 0 6px rgba(16,185,129,0), 0 0 0 1px #10b981; }
}

.timeline-line {
    position: absolute;
    left: 15px;
    top: 32px;
    bottom: -8px;
    width: 2px;
    background: #e2e8f0;           /* ডিফল্ট — এখনো পৌঁছায়নি */
    border-radius: 2px;
    overflow: hidden;
    transition: background-color 0.5s ease;
}
.timeline-line.upcoming {
    background: #e2e8f0;
}
.timeline-line.filled {
    background: #10b981;           /* সবুজ — এই অংশ পার হয়ে গেছে */
}
.timeline-line.filled::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #10b981;
    animation: rb-line-fill 0.6s ease forwards;
    transform-origin: top center;
}
@keyframes rb-line-fill {
    0%   { transform: scaleY(0); }
    100% { transform: scaleY(1); }
}

/* ---------- ৫. অনলাইন/অফলাইন ব্যাজ — pulse/glow ---------- */
.rb-connectivity-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px; height: 26px;
    border-radius: 999px;
    font-size: 11px;
    transition: background-color 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}
.rb-connectivity-badge.is-online {
    background: rgba(16,185,129,0.18);
    color: #34d399;
}
.rb-connectivity-badge.is-offline {
    background: rgba(248,113,113,0.18);
    color: #f87171;
}
.rb-connectivity-badge.rb-status-flash {
    animation: rb-glow-pulse 1.1s ease;
}
@keyframes rb-glow-pulse {
    0%   { box-shadow: 0 0 0 0 currentColor; }
    35%  { box-shadow: 0 0 0 7px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

/* ---------- ৬. ফিডব্যাক sync হওয়ার মুহূর্তে ফ্লিপ/চেকমার্ক ---------- */
.rb-fb-sync-pop {
    animation: rb-fb-flip 0.55s cubic-bezier(.34,1.56,.64,1);
}
@keyframes rb-fb-flip {
    0%   { transform: rotateY(90deg) scale(0.7); opacity: 0; }
    60%  { transform: rotateY(0deg)  scale(1.08); opacity: 1; }
    100% { transform: rotateY(0deg)  scale(1);    opacity: 1; }
}

/* ---------- ৭. বাস কার্ড expand/collapse — smooth height ---------- */
.expand-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.42s cubic-bezier(.4,0,.2,1),
                opacity 0.3s ease,
                padding-top 0.3s ease, padding-bottom 0.3s ease;
}
.expand-content.open {
    max-height: 3000px;
    opacity: 1;
}
.expand-btn i.fa-chevron-down {
    transition: transform 0.35s ease;
}
.expand-btn.active i.fa-chevron-down {
    transform: rotate(180deg);
}

/* ---------- ৮. সার্চ/ফিল্টার রেজাল্ট — fade + stagger ---------- */
@keyframes rb-card-fade-up {
    0%   { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}
.fade-in {
    animation: rb-card-fade-up 0.42s cubic-bezier(.4,0,.2,1) both;
}

/* ---------- ৯. ম্যাপ মার্কার — drop-in বাউন্স ---------- */
.rb-marker-drop {
    animation: rb-marker-bounce-in 0.55s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes rb-marker-bounce-in {
    0%   { transform: translateY(-26px) scale(0.4); opacity: 0; }
    60%  { transform: translateY(3px)   scale(1.08); opacity: 1; }
    100% { transform: translateY(0)     scale(1);    opacity: 1; }
}

/* ---------- ১১. টোস্ট নোটিফিকেশন (পুরনো ফুল-স্ক্রিন পপআপের বদলে) ---------- */
.rb-toast-container {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 80;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 92vw;
    max-width: 360px;
    pointer-events: none;
}
.rb-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15), 0 2px 6px rgba(0,0,0,0.08);
    padding: 12px 12px;
    opacity: 0;
    transform: translateY(-14px) scale(0.97);
    transition: opacity 0.28s ease, transform 0.28s cubic-bezier(.34,1.56,.64,1);
}
.rb-toast.show {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.rb-toast.hide {
    opacity: 0;
    transform: translateY(-10px) scale(0.97);
}
.rb-toast-icon {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.rb-toast-body {
    flex: 1;
    min-width: 0;
}
.rb-toast-title {
    font-size: 13px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
}
.rb-toast-message {
    font-size: 11.5px;
    color: #64748b;
    line-height: 1.4;
    margin-top: 2px;
}
.rb-toast-close {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    border-radius: 999px;
    transition: background-color 0.2s ease;
}
.rb-toast-close:hover {
    background: #f1f5f9;
}
/* ---------- ১২. সার্চ সাজেশন — visibility/opacity নিশ্চিত করা ---------- */
#searchSuggestions {
    opacity: 1 !important;
    background: #ffffff !important;
    z-index: 45 !important;
}
#searchSuggestions.hidden {
    display: none !important;
}
.search-suggestion-item {
    opacity: 1 !important;
    background: #ffffff;
}
.search-suggestion-item:hover,
.search-suggestion-item.active {
    background: #f0fdf4 !important;
}
.search-suggestion-item p,
.search-suggestion-item span {
    opacity: 1 !important;
}
.search-suggestion-item .text-slate-700 {
    color: #1e293b !important;
}
.search-highlight {
    background: #fde68a;
    color: #78350f;
    border-radius: 3px;
    padding: 0 2px;
    font-weight: 700;
}
/* ---------- ১৩. ডার্ক মোড / লাইট মোড টগল ---------- */
/* রেফারেন্স স্ক্রিনশট থেকে স্যাম্পল করা আসল রঙ — filter:invert() হ্যাক বাদ দিয়ে
   এখন সরাসরি Tailwind ইউটিলিটি ক্লাসগুলো ওভাররাইড করা হচ্ছে html.rb-dark স্কোপে */
html.rb-dark {
    background: #070d10;
    color-scheme: dark;
}
html.rb-dark body {
    background: #070d10 !important;
}

.rb-theme-toggle {
    /* display এখানে সেট করা হচ্ছে না — Tailwind-এর hidden/sm:inline-flex ক্লাস
       (যেগুলো HTML-এ বসানো) দিয়েই দৃশ্যমানতা নিয়ন্ত্রিত হবে, নাহলে এই কাস্টম CSS
       (Tailwind CDN script-এর পরে লোড হয়) hidden-কে override করে ফেলত */
    align-items: center;
    justify-content: center;
    width: 30px; height: 30px;
    border-radius: 999px;
    background: rgba(255,255,255,0.12);
    color: #fde68a;
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.25s ease, transform 0.25s ease;
    border: none;
}
.rb-theme-toggle:active {
    transform: scale(0.9);
}
.rb-theme-toggle .fa-sun { display: inline-block; }
.rb-theme-toggle .fa-moon { display: none; }
html.rb-dark .rb-theme-toggle .fa-sun { display: none; }
html.rb-dark .rb-theme-toggle .fa-moon { display: inline-block; }

/* ===== বেস সারফেস — পেজ bg, কার্ড bg, বর্ডার ===== */
html.rb-dark .bg-ruCream,
html.rb-dark .bg-white,
html.rb-dark .bg-slate-50,
html.rb-dark .bg-slate-50\/30,
html.rb-dark .bg-slate-50\/50,
html.rb-dark .bg-slate-50\/80 {
    background-color: #0b1716 !important;
}
html.rb-dark .bg-slate-100 {
    background-color: #101f1c !important;
}
html.rb-dark .bg-slate-200 {
    background-color: #16241f !important;
}

/* বর্ডার */
html.rb-dark .border-slate-50 { border-color: rgba(255,255,255,0.05) !important; }
html.rb-dark .border-slate-100 { border-color: #142520 !important; }
html.rb-dark .border-slate-200 { border-color: #1c2f27 !important; }
html.rb-dark .border-slate-300 { border-color: #26382f !important; }

/* টেক্সট স্কেল (হালকা bg-এর জন্য বানানো ধূসর স্কেলকে ডার্ক bg-এর উপযোগী করা) */
html.rb-dark .text-slate-800 { color: #f1f5f4 !important; }
html.rb-dark .text-slate-700 { color: #dce7e2 !important; }
html.rb-dark .text-slate-600 { color: #b9c9c2 !important; }
html.rb-dark .text-slate-500 { color: #96a89f !important; }
html.rb-dark .text-slate-400 { color: #76897f !important; }
html.rb-dark .text-slate-300 { color: #5c6f65 !important; }

/* ===== ব্র্যান্ড রঙ (ruGreen/ruGold/crowdBlue) ===== */
html.rb-dark .text-ruGreen { color: #34d399 !important; }
html.rb-dark .text-ruGreen\/60 { color: rgba(52,211,153,0.6) !important; }
html.rb-dark .border-ruGreen { border-color: #1a6b4f !important; }
html.rb-dark .border-ruGreen\/20 { border-color: rgba(26,107,79,0.35) !important; }
html.rb-dark .border-ruGreen\/30 { border-color: rgba(26,107,79,0.45) !important; }
html.rb-dark .border-ruGreen\/50 { border-color: rgba(26,107,79,0.6) !important; }
html.rb-dark .bg-ruGreen\/10 { background-color: rgba(26,107,79,0.18) !important; }
html.rb-dark .bg-ruGreen\/5 { background-color: rgba(26,107,79,0.1) !important; }
html.rb-dark .text-ruGold { color: #f0c14b !important; }
html.rb-dark .text-crowdBlue { color: #5b9bf5 !important; }
html.rb-dark .bg-crowdBlue\/10 { background-color: rgba(59,130,246,0.16) !important; }
html.rb-dark .border-crowdBlue\/30 { border-color: rgba(59,130,246,0.4) !important; }

/* ===== রঙিন ব্যাজ/পিল bg — হালকা টিন্ট থেকে ডার্ক ট্রান্সলুসেন্ট টিন্টে ===== */
html.rb-dark .bg-emerald-50 { background-color: rgba(16,185,129,0.12) !important; }
html.rb-dark .bg-emerald-100 { background-color: rgba(16,185,129,0.16) !important; }
html.rb-dark .bg-blue-50 { background-color: rgba(59,130,246,0.12) !important; }
html.rb-dark .bg-blue-100 { background-color: rgba(59,130,246,0.16) !important; }
html.rb-dark .bg-red-50 { background-color: rgba(239,68,68,0.12) !important; }
html.rb-dark .bg-red-100 { background-color: rgba(239,68,68,0.16) !important; }
html.rb-dark .bg-amber-50 { background-color: rgba(245,158,11,0.12) !important; }
html.rb-dark .bg-amber-100 { background-color: rgba(245,158,11,0.16) !important; }
html.rb-dark .bg-pink-50 { background-color: rgba(236,72,153,0.12) !important; }
html.rb-dark .bg-teal-100 { background-color: rgba(20,184,166,0.16) !important; }

/* রঙিন বর্ডার (ব্যাজের চারপাশে) */
html.rb-dark .border-emerald-100 { border-color: rgba(16,185,129,0.25) !important; }
html.rb-dark .border-emerald-200 { border-color: rgba(16,185,129,0.35) !important; }
html.rb-dark .border-emerald-300 { border-color: rgba(16,185,129,0.45) !important; }
html.rb-dark .border-blue-100 { border-color: rgba(59,130,246,0.25) !important; }
html.rb-dark .border-blue-200 { border-color: rgba(59,130,246,0.35) !important; }
html.rb-dark .border-blue-300 { border-color: rgba(59,130,246,0.45) !important; }
html.rb-dark .border-blue-400 { border-color: rgba(59,130,246,0.55) !important; }
html.rb-dark .border-red-100 { border-color: rgba(239,68,68,0.25) !important; }
html.rb-dark .border-red-200 { border-color: rgba(239,68,68,0.35) !important; }
html.rb-dark .border-amber-100 { border-color: rgba(245,158,11,0.25) !important; }
html.rb-dark .border-amber-200 { border-color: rgba(245,158,11,0.35) !important; }
html.rb-dark .border-amber-400 { border-color: rgba(245,158,11,0.5) !important; }
html.rb-dark .border-amber-400\/30 { border-color: rgba(245,158,11,0.3) !important; }
html.rb-dark .border-pink-200 { border-color: rgba(236,72,153,0.35) !important; }
html.rb-dark .border-pink-300 { border-color: rgba(236,72,153,0.45) !important; }
html.rb-dark .border-pink-400 { border-color: rgba(236,72,153,0.55) !important; }
html.rb-dark .border-teal-400 { border-color: rgba(20,184,166,0.55) !important; }

/* রঙিন টেক্সট — ডার্ক bg-এ কনট্রাস্টের জন্য একটু উজ্জ্বল করা */
html.rb-dark .text-emerald-200 { color: #a7f3d0 !important; }
html.rb-dark .text-emerald-200\/80 { color: rgba(167,243,208,0.8) !important; }
html.rb-dark .text-emerald-400 { color: #4ade80 !important; }
html.rb-dark .text-emerald-500 { color: #34d399 !important; }
html.rb-dark .text-emerald-600 { color: #4ade80 !important; }
html.rb-dark .text-emerald-700 { color: #6ee7b7 !important; }
html.rb-dark .text-blue-200 { color: #bfdbfe !important; }
html.rb-dark .text-blue-300 { color: #93c5fd !important; }
html.rb-dark .text-blue-400 { color: #7cb2f9 !important; }
html.rb-dark .text-blue-500 { color: #60a5fa !important; }
html.rb-dark .text-blue-600 { color: #7cb2f9 !important; }
html.rb-dark .text-red-100 { color: #fecaca !important; }
html.rb-dark .text-red-400 { color: #f87171 !important; }
html.rb-dark .text-red-500 { color: #f87171 !important; }
html.rb-dark .text-red-600 { color: #fca5a5 !important; }
html.rb-dark .text-red-800 { color: #fecaca !important; }
html.rb-dark .text-amber-400 { color: #fbbf24 !important; }
html.rb-dark .text-amber-500 { color: #fbbf24 !important; }
html.rb-dark .text-amber-600 { color: #fcd34d !important; }
html.rb-dark .text-amber-700 { color: #fcd34d !important; }
html.rb-dark .text-amber-800 { color: #fde68a !important; }
html.rb-dark .text-teal-600 { color: #5eead4 !important; }
html.rb-dark .text-teal-700 { color: #99f6e4 !important; }

/* ===== হেডার/toast-এর গাঢ় সারফেসে সাদা/স্বচ্ছ ওভারলে — উভয় মোডেই মানানসই, পরিবর্তনের দরকার নেই ===== */

/* toast (এই কার্ডটা সাদা bg-তে ফিক্সড থাকে — ডার্ক মোডেও কার্ডটা ডার্ক-সারফেস হওয়া উচিত) */
html.rb-dark .rb-toast {
    background: #0f1e1c;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
}
html.rb-dark .rb-toast-title { color: #f1f5f4; }
html.rb-dark .rb-toast-message { color: #96a89f; }
html.rb-dark .rb-toast-close:hover { background: #16241f; }
html.rb-dark .rb-ptr-indicator { background: #0f1e1c; }

/* স্কেলিটন শিমার ডার্ক মোডে */
html.rb-dark .skeleton-card { background: #0d1a17; }
html.rb-dark .skeleton-header,
html.rb-dark .skeleton-line { background: #16241f; }

/* সার্চ সাজেশন ডার্ক মোডে */
html.rb-dark #searchSuggestions { background: #0b1716 !important; }
html.rb-dark .search-suggestion-item { background: #0b1716; }
html.rb-dark .search-suggestion-item:hover,
html.rb-dark .search-suggestion-item.active { background: #101f1c !important; }

/* ===== গ্রেডিয়েন্ট এলিমেন্ট — হেডার সহ ===== */
html.rb-dark header.bg-gradient-to-br.from-ruGreen {
    background: linear-gradient(to bottom right, #071312, #0a1f1b) !important;
}
html.rb-dark .from-white.to-transparent,
html.rb-dark .from-white.via-white\/80.to-transparent {
    --tw-gradient-from: #0b1716 !important;
    --tw-gradient-via: rgba(11,23,22,0.8) !important;
}
html.rb-dark .from-amber-50.to-orange-50,
html.rb-dark .from-amber-50.to-amber-50 {
    --tw-gradient-from: rgba(245,158,11,0.1) !important;
    --tw-gradient-to: rgba(249,115,22,0.1) !important;
    background-color: transparent !important;
}
html.rb-dark .from-violet-200.to-transparent {
    --tw-gradient-from: rgba(196,181,253,0.15) !important;
}
/* বাস কার্ডের উপরের গ্রেডিয়েন্ট হেডার (from-emerald-100/blue-100/pink-100 to-white) */
html.rb-dark .from-emerald-100.to-white {
    --tw-gradient-from: rgba(16,185,129,0.14) !important;
    --tw-gradient-to: rgba(11,23,22,0) !important;
    background-color: #0b1716 !important;
}
html.rb-dark .from-blue-100.to-white {
    --tw-gradient-from: rgba(59,130,246,0.14) !important;
    --tw-gradient-to: rgba(11,23,22,0) !important;
    background-color: #0b1716 !important;
}
html.rb-dark .from-pink-100.to-white {
    --tw-gradient-from: rgba(236,72,153,0.14) !important;
    --tw-gradient-to: rgba(11,23,22,0) !important;
    background-color: #0b1716 !important;
}
/* কার্ডের ভিতরের "elevated" সাদা সারফেস (রুট-ইনফো রো, অ্যাম্বুলেন্স পেজের লাইভ ক্লক পিল) */
html.rb-dark .bg-white\/80 {
    background-color: #101f1c !important;
}

.rb-ptr-indicator {
    position: fixed;
    top: 0; left: 50%;
    width: 42px; height: 42px;
    margin-left: -21px;
    transform: translateY(-60px);
    background: #ffffff;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 60;
    transition: transform 0.25s ease;
    will-change: transform;
}
.rb-ptr-indicator i {
    color: #0f4c3a;
    font-size: 16px;
    transition: transform 0.1s linear;
}
.rb-ptr-indicator.rb-ptr-spin i {
    animation: rb-ptr-spin 0.7s linear infinite;
}
@keyframes rb-ptr-spin {
    100% { transform: rotate(360deg); }
}

/* ---------- ১৪. স্ক্রল-এ ফিডব্যাক কার্ড রিভিল ---------- */
.rb-scroll-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.5s cubic-bezier(.4,0,.2,1), transform 0.5s cubic-bezier(.4,0,.2,1);
}
.rb-scroll-reveal.rb-scroll-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- ১৫. সংখ্যা কাউন্ট-আপ (রিপোর্ট/রুট/লাইক/সাজেশন কাউন্ট) ---------- */
#resultsCount, #totalReportsBadge, #suggestionCount, #feedbackCountBadge, .rb-like-count {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}