/*!
 * BunnyBand Theme — Responsive overrides v1.1
 */

/* Mobile drawer overlay + scroll lock (works at any breakpoint) */
.bb-mobile-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:190;opacity:0;transition:opacity .25s ease;pointer-events:none}
.bb-mobile-overlay[data-open="true"]{opacity:1;pointer-events:auto}
.bb-no-scroll{overflow:hidden!important;touch-action:none}
.bb-mobile-sub-toggle{background:transparent;border:1px solid var(--bb-border);width:32px;height:32px;border-radius:50%;color:var(--bb-text);cursor:pointer;font-size:18px;line-height:1;margin-left:8px;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
.bb-mobile-menu .menu-item-has-children > a{display:inline-block;width:calc(100% - 44px)}
.bb-mobile-menu .sub-menu,.bb-mobile-menu .children{display:none;list-style:none;padding:6px 0 6px 16px;margin:6px 0 12px;border-left:2px solid var(--bb-border)}
.bb-mobile-menu .menu-item-has-children.is-open > .sub-menu,
.bb-mobile-menu .page_item_has_children.is-open > .children{display:block}
.bb-mobile-cta{margin-top:24px;padding-top:24px;border-top:1px solid var(--bb-border)}
.bb-mobile-cta .bb-btn{width:100%;justify-content:center}

/* Burger hamburger */
.bb-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;width:18px;height:14px}
.bb-burger span{display:block;height:2px;background:currentColor;border-radius:2px}

/* Tablet */
@media (max-width:1023px){
    .bb-container{padding-left:18px;padding-right:18px}
    .bb-section{padding:64px 0}
    .bb-hero-inner{gap:36px}
    .bb-hero{padding:56px 0 64px}
    .bb-app-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .bb-blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .bb-methods-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .bb-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .bb-how-grid{grid-template-columns:1fr}
    .bb-footer-cols{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* Phones */
@media (max-width:639px){
    .bb-container{padding-left:16px;padding-right:16px;max-width:100%}
    .bb-section{padding:44px 0}
    .bb-section-header{margin-bottom:24px}
    .bb-section-title{font-size:1.65rem;line-height:1.18}
    .bb-section-sub{font-size:.98rem}

    /* Header */
    .bb-header-inner{padding:10px 0;gap:8px}
    .bb-header-cta{display:none!important}
    .bb-search-toggle{display:none!important}
    .bb-logo-text{font-size:1.05rem}
    .bb-logo-mark{font-size:1.4rem}
    .bb-primary-nav{display:none!important}

    /* Topbar */
    .bb-topbar{font-size:.74rem;padding:6px 0}
    .bb-topbar-inner{flex-direction:column;gap:4px;text-align:center}
    .bb-topbar-meta{display:none}

    /* Hero */
    .bb-hero{padding:32px 0 44px;min-height:auto}
    .bb-hero-inner{grid-template-columns:1fr!important;gap:28px;text-align:left}
    .bb-hero-title{font-size:2rem!important;line-height:1.15}
    .bb-hero-sub{font-size:1rem}
    .bb-hero-actions{flex-direction:column;align-items:stretch;gap:10px}
    .bb-hero-actions .bb-btn{width:100%;justify-content:center}
    .bb-hero-badge{justify-content:center;text-align:center}
    .bb-hero-mock{transform:none!important}
    .bb-hero-mock-card{transform:none!important;width:100%;max-width:340px;margin:0 auto}
    .bb-hero-visual img{max-width:100%;height:auto;border-radius:18px}

    /* Stats */
    .bb-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
    .bb-stat{padding:16px 12px}
    .bb-stat-value{font-size:1.6rem}
    .bb-stat-label{font-size:.78rem}

    /* How / Methods / Apps / Blog */
    .bb-how-grid,.bb-methods-grid,.bb-app-grid,.bb-blog-grid{grid-template-columns:1fr!important;gap:16px}
    .bb-how-step{padding:22px}
    .bb-method-card,.bb-blog-card,.bb-app-card{padding:18px}

    /* Single App */
    .bb-app-single-wrap{padding:18px 0}
    .bb-app-hero{grid-template-columns:1fr;text-align:center;gap:18px;padding:18px}
    .bb-app-icon{margin:0 auto;width:96px;height:96px}
    .bb-app-actions{justify-content:center;flex-direction:column;gap:10px}
    .bb-app-actions .bb-btn{width:100%}
    .bb-app-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0}
    .bb-app-stat{padding:12px 10px}
    .bb-app-stat span{font-size:.7rem}
    .bb-app-stat strong{font-size:.95rem}
    .bb-app-cover img{border-radius:14px}
    .bb-app-body{padding:0 4px}
    .bb-app-body h2,.bb-app-body h3{font-size:1.25rem;margin-top:24px}
    .bb-related-links{columns:1}
    .bb-related-apps .bb-app-grid{grid-template-columns:1fr}

    /* Blog list / single */
    .bb-blog-list .bb-blog-card{flex-direction:column}
    .bb-blog-list .bb-card-thumb{width:100%}
    .bb-single-thumb img{border-radius:14px}
    .bb-single-content h2{font-size:1.45rem;margin-top:28px}
    .bb-single-content h3{font-size:1.15rem;margin-top:22px}

    /* Final CTA */
    .bb-final-cta-inner{flex-direction:column;text-align:center;gap:18px}
    .bb-final-cta-actions{flex-direction:column;width:100%}
    .bb-final-cta-actions .bb-btn{width:100%;justify-content:center}

    /* Footer */
    .bb-footer-cols{grid-template-columns:1fr!important;gap:24px}
    .bb-footer-bottom{flex-direction:column;text-align:center;gap:10px}
    .bb-footer-payments{justify-content:center;flex-wrap:wrap}

    /* 404 */
    .bb-404-links{grid-template-columns:1fr}

    /* Buttons sizing */
    .bb-btn-lg{font-size:.98rem;padding:14px 18px}
    .bb-btn{min-height:44px}

    /* Mobile drawer fills more screen on phones */
    .bb-mobile-drawer{padding:72px 20px 24px;width:100%}
}

/* Very small phones */
@media (max-width:380px){
    .bb-hero-title{font-size:1.7rem!important}
    .bb-section-title{font-size:1.4rem}
    .bb-stats-grid{grid-template-columns:1fr}
    .bb-app-stats{grid-template-columns:1fr}
}

/* Tablet hero stack */
@media (min-width:640px) and (max-width:1023px){
    .bb-hero-inner{grid-template-columns:1fr;text-align:center}
    .bb-hero-actions{justify-content:center}
    .bb-hero-badge{justify-content:center}
    .bb-hero-mock{margin:0 auto}
}

/* Print */
@media print{
    .bb-header,.bb-footer,.bb-mobile-drawer,.bb-mobile-overlay,.bb-search-panel,.bb-topbar,.bb-final-cta,.bb-hero-actions,.bb-share,.bb-post-nav,.bb-pagination,.bb-floating-cta{display:none!important}
    body{color:#000;background:#fff}
    a{color:#000;text-decoration:underline}
    .bb-container{max-width:100%}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important;scroll-behavior:auto!important}
}

/* Animations - fade-in on scroll */
.bb-section,.bb-app-card,.bb-blog-card,.bb-method-card,.bb-how-step,.bb-testimonial{opacity:1}
@media (prefers-reduced-motion:no-preference){
    .bb-section,.bb-app-card,.bb-blog-card,.bb-method-card,.bb-how-step,.bb-testimonial{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease;will-change:opacity,transform}
    .bb-section.is-visible,.bb-app-card.is-visible,.bb-blog-card.is-visible,.bb-method-card.is-visible,.bb-how-step.is-visible,.bb-testimonial.is-visible{opacity:1;transform:none}
    /* Ensure hero is always visible (above fold) */
    .bb-hero,.bb-section.bb-hero{opacity:1!important;transform:none!important}
}

/* Floating download CTA on single-app pages */
.bb-floating-cta{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:120;background:var(--bb-primary);color:#fff;padding:12px 20px;border-radius:999px;box-shadow:0 16px 40px -10px rgba(124,58,237,.55);text-decoration:none;font-weight:600;font-size:.95rem;display:none;align-items:center;gap:8px;max-width:calc(100% - 32px)}
.bb-floating-cta:hover{background:var(--bb-primary-dark);color:#fff}
@media (max-width:768px){.bb-floating-cta{display:inline-flex}}

/* RTL support (Urdu) */
[dir="rtl"] .bb-card-meta,
[dir="rtl"] .bb-app-card-meta,
[dir="rtl"] .bb-topbar-inner,
[dir="rtl"] .bb-final-cta-inner{direction:rtl}
[dir="rtl"] .bb-card-link svg,
[dir="rtl"] .bb-section-cta svg,
[dir="rtl"] .bb-btn svg{transform:scaleX(-1)}
[dir="rtl"] .bb-mobile-drawer{transform:translateX(-100%)}
[dir="rtl"] .bb-mobile-drawer[data-open="true"]{transform:translateX(0)}