/*
Theme Name: GeneratePress Child - BGMI Lite APK
Theme URI: https://bgmiliteapk.com/
Description: Single-page APK-download-style landing theme for bgmiliteapk.com. Built on GeneratePress (free).
Author: bgmiliteapk.com
Template: generatepress
Version: 1.0.5
Text Domain: gp-child-bgmiliteapk
*/

/* =========================================================
   COLOR VARIABLES — BGMI's own orange/red brand tone
   ========================================================= */
:root{
    --bg-dark: #14110f;
    --bg-dark-2: #1e1a17;
    --bg-orange: #ff5722;
    --bg-orange-light: #ff8a5c;
    --bg-text: #232323;
    --bg-muted: #6b7280;
    --bg-bg: #f7f6f4;
    --bg-white: #ffffff;
    --bg-radius: 14px;
    --bg-shadow: 0 4px 18px rgba(20,17,15,0.08);
}

*,
*::before,
*::after{ box-sizing: border-box; }

html, body{
    max-width: 100%;
    overflow-x: hidden;
}
body{
    color: var(--bg-text);
    background: var(--bg-bg);
    overflow-wrap: break-word;
    word-wrap: break-word;
}
h1, h2, h3, p, td, a, span, li{
    overflow-wrap: break-word;
    word-wrap: break-word;
}
a{ color: var(--bg-dark); }
a:hover{ color: var(--bg-orange); }

/* =========================================================
   HEADER
   ========================================================= */
.site-header,
#masthead{
    background: var(--bg-white);
    border-bottom: 1px solid #ece9e3;
}
.site-title a{
    color: var(--bg-dark) !important;
    font-weight: 800;
}
.main-navigation,
.main-navigation .inside-navigation{
    background: transparent;
}
.main-navigation a{
    color: var(--bg-dark) !important;
    background: transparent;
    font-weight: 700;
    font-size: 14.5px;
    padding: 8px 4px !important;
    border-radius: 0;
}
.main-navigation a:hover{
    color: var(--bg-orange) !important;
    background: transparent;
}

/* Mobile: when the hamburger menu opens, the dropdown needs its
   own solid background, otherwise it renders see-through and
   looks broken over the page content underneath it. */
@media (max-width: 768px){
    .main-navigation .inside-navigation,
    .main-navigation.toggled .inside-navigation{
        background: var(--bg-white) !important;
        box-shadow: var(--bg-shadow);
        border-radius: 0 0 10px 10px;
    }
    .main-navigation a{
        display: block;
        width: 100%;
        padding: 14px 20px !important;
        border-bottom: 1px solid #f0eee9;
    }
    .main-navigation li:last-child a{
        border-bottom: none;
    }
}

/* =========================================================
   PAGE WRAPPER
   ========================================================= */
.bg-page{
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px 60px;
    min-width: 0;
    width: 100%;
}
/* Hard safety net: no direct section of the page can ever be
   wider than the page itself, no matter what content is inside
   it. This does not affect the intentional inner scroll of the
   screenshots gallery, since that lives one level deeper. */
.bg-page > *{
    max-width: 100%;
}

/* =========================================================
   HERO
   ========================================================= */
.bg-hero{
    text-align: center;
    padding: 44px 20px 36px;
}
.bg-hero .bg-icon{
    width: 110px;
    height: 110px;
    border-radius: 26px;
    box-shadow: var(--bg-shadow);
    margin: 0 auto 18px;
    display: block;
    object-fit: cover;
}
.bg-hero h1{
    font-size: 28px;
    font-weight: 800;
    color: var(--bg-dark);
    margin: 0 0 8px;
    line-height: 1.3;
}
.bg-hero .bg-tagline{
    color: var(--bg-muted);
    font-size: 15px;
    max-width: 520px;
    margin: 0 auto 20px;
}
.bg-hero .bg-stars{
    color: var(--bg-orange);
    font-size: 15px;
    margin-bottom: 22px;
}
.bg-hero .bg-stars span{
    color: var(--bg-muted);
    font-size: 13px;
    margin-left: 6px;
}
.bg-status-pill{
    display: inline-block;
    background: rgba(255,87,34,.12);
    color: var(--bg-orange);
    font-weight: 700;
    font-size: 12.5px;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 20px;
}

.bg-download-btn{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-orange);
    color: var(--bg-white) !important;
    font-weight: 800;
    font-size: 17px;
    padding: 16px 38px;
    border-radius: 50px;
    text-decoration: none !important;
    box-shadow: 0 8px 22px rgba(255,87,34,.35);
    transition: transform .15s ease, box-shadow .15s ease;
}
.bg-download-btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255,87,34,.45);
    color: var(--bg-white) !important;
}
.bg-download-sub{
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--bg-muted);
}

/* Quick info badges under the hero */
.bg-badges{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 26px;
}
.bg-badge{
    background: var(--bg-white);
    border: 1px solid #eceae4;
    border-radius: 10px;
    padding: 10px 16px;
    text-align: left;
    min-width: 110px;
}
.bg-badge .bg-badge-label{
    display: block;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--bg-muted);
}
.bg-badge .bg-badge-value{
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--bg-dark);
    margin-top: 2px;
}

/* =========================================================
   SCREENSHOTS
   ========================================================= */
.bg-section{
    margin-top: 46px;
}
.bg-section h2{
    font-size: 21px;
    font-weight: 800;
    color: var(--bg-dark);
    margin: 0 0 18px;
    padding-left: 12px;
    border-left: 4px solid var(--bg-orange);
}
.bg-screens{
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
}
.bg-screens img{
    width: 220px;
    height: 390px;
    object-fit: cover;
    border-radius: var(--bg-radius);
    box-shadow: var(--bg-shadow);
    flex: 0 0 auto;
    scroll-snap-align: start;
}
.bg-screens::-webkit-scrollbar{ height: 5px; }
.bg-screens::-webkit-scrollbar-thumb{ background: var(--bg-orange); border-radius: 4px; }
.bg-screens::-webkit-scrollbar-track{ background: #e9e7e2; border-radius: 4px; }
.bg-swipe-hint{
    display: none;
    font-size: 12px;
    color: var(--bg-muted);
    margin: 4px 0 0;
}
@media (max-width: 700px){
    .bg-swipe-hint{ display: block; }
}
@media (max-width: 600px){
    .bg-screens img{ width: 180px; height: 320px; }
}

/* =========================================================
   INFO TABLE
   ========================================================= */
.bg-info-table{
    width: 100%;
    background: var(--bg-white);
    border-radius: var(--bg-radius);
    box-shadow: var(--bg-shadow);
    overflow: hidden;
    border-collapse: collapse;
}
.bg-info-table tr{
    border-bottom: 1px solid #f0eee9;
}
.bg-info-table tr:last-child{
    border-bottom: none;
}
.bg-info-table td{
    padding: 13px 18px;
    font-size: 14px;
}
.bg-info-table td:first-child{
    color: var(--bg-muted);
    font-weight: 600;
    width: 42%;
}
.bg-info-table td:last-child{
    color: var(--bg-dark);
    font-weight: 700;
}
@media (max-width: 600px){
    .bg-info-table,
    .bg-info-table tbody,
    .bg-info-table tr,
    .bg-info-table td{
        display: block;
        width: 100% !important;
    }
    .bg-info-table tr{
        padding: 12px 18px;
    }
    .bg-info-table td{
        padding: 0;
    }
    .bg-info-table td:first-child{
        font-size: 11.5px;
        text-transform: uppercase;
        letter-spacing: .3px;
        margin-bottom: 3px;
    }
    .bg-info-table td:last-child{
        font-size: 15px;
    }
}

/* =========================================================
   FEATURES
   ========================================================= */
.bg-features{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}
.bg-feature{
    background: var(--bg-white);
    border-radius: var(--bg-radius);
    box-shadow: var(--bg-shadow);
    padding: 18px;
}
.bg-feature .bg-feature-icon{
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255,87,34,.12);
    color: var(--bg-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 10px;
}
.bg-feature h3{
    font-size: 15px;
    font-weight: 700;
    color: var(--bg-dark);
    margin: 0 0 6px;
}
.bg-feature p{
    font-size: 13px;
    color: var(--bg-muted);
    margin: 0;
    line-height: 1.5;
}

/* =========================================================
   ABOUT / DESCRIPTION
   ========================================================= */
.bg-about{
    background: var(--bg-white);
    border-radius: var(--bg-radius);
    box-shadow: var(--bg-shadow);
    padding: 24px;
    font-size: 15px;
    line-height: 1.8;
    color: var(--bg-text);
}
.bg-about p{ margin: 0 0 14px; }
.bg-about p:last-child{ margin-bottom: 0; }
.bg-about a{
    color: var(--bg-orange) !important;
    font-weight: 700;
}

.bg-steps{
    background: var(--bg-white);
    border-radius: var(--bg-radius);
    box-shadow: var(--bg-shadow);
    padding: 20px 20px 20px 42px;
    margin: 14px 0 0;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--bg-text);
}
.bg-steps li{
    margin-bottom: 8px;
}
.bg-steps li:last-child{
    margin-bottom: 0;
}
.bg-note{
    font-size: 12.5px;
    color: var(--bg-muted);
    margin-top: 12px;
    padding: 0 4px;
}
.bg-note a{
    color: var(--bg-orange) !important;
    font-weight: 700;
}

/* =========================================================
   FAQ (native <details>/<summary>, no JS needed)
   ========================================================= */
.bg-faq-item{
    background: var(--bg-white);
    border-radius: var(--bg-radius);
    box-shadow: var(--bg-shadow);
    margin-bottom: 12px;
    overflow: hidden;
}
.bg-faq-item summary{
    padding: 16px 20px;
    font-weight: 700;
    color: var(--bg-dark);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.bg-faq-item summary::-webkit-details-marker{ display: none; }
.bg-faq-item summary::after{
    content: "+";
    font-size: 20px;
    color: var(--bg-orange);
    font-weight: 400;
}
.bg-faq-item[open] summary::after{
    content: "–";
}
.bg-faq-item .bg-faq-body{
    padding: 0 20px 18px;
    color: var(--bg-muted);
    font-size: 14px;
    line-height: 1.6;
}

/* Bottom CTA repeat */
.bg-cta-bottom{
    text-align: center;
    margin-top: 46px;
    padding: 36px 20px;
    background: var(--bg-dark);
    border-radius: var(--bg-radius);
}
.bg-cta-bottom h2{
    color: var(--bg-white);
    border: none;
    padding: 0;
    font-size: 20px;
    margin: 0 0 16px;
}

/* =========================================================
   DISCLAIMER
   ========================================================= */
.bg-disclaimer{
    margin-top: 40px;
    font-size: 12px;
    color: var(--bg-muted);
    line-height: 1.6;
    text-align: center;
    padding: 0 10px;
}

/* =========================================================
   FOOTER
   ========================================================= */
#footer,
.site-footer,
.footer-widgets{
    background: var(--bg-dark);
    color: #cfd2d8;
}
.site-info{
    background: var(--bg-dark-2) !important;
    color: #cfd2d8 !important;
    text-align: center;
    padding: 16px 20px !important;
    font-size: 13px;
}
.site-info a{
    color: var(--bg-orange-light) !important;
}
.site-info a:hover{
    color: var(--bg-white) !important;
}

/* The footer "About / Contact / Privacy Policy..." menu is a
   classic Nav Menu widget living inside .site-info -> .footer-bar.
   Reset the generic .widget "card" styling that would otherwise
   leak onto it, and style the actual menu links. */
.site-info .widget{
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}
.site-info .footer-bar{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.site-info .footer-bar ul{
    display: flex;
    flex-wrap: wrap;
    gap: 6px 20px;
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (max-width: 768px){
    .site-info .footer-bar{
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }
    .site-info .footer-bar ul{
        justify-content: center;
    }
}
.site-info .footer-bar li{
    list-style: none;
    margin: 0;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
}
.site-info .footer-bar li::before,
.site-info .footer-bar li::after,
.site-info .footer-bar a::before,
.site-info .footer-bar a::after{
    display: none !important;
    content: none !important;
    border: none !important;
    background: none !important;
}
.site-info .footer-bar a,
.site-info .footer-bar a:link,
.site-info .footer-bar a:visited{
    color: #cfd2d8 !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    outline: none !important;
    font-weight: 600;
    font-size: 13.5px;
}
.site-info .footer-bar a:hover{
    color: var(--bg-orange-light) !important;
    text-decoration: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 600px){
    .bg-features{ grid-template-columns: 1fr; }
    .bg-hero h1{ font-size: 21px; }
    .bg-download-btn{ width: 100%; justify-content: center; }
    .bg-badges{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    .bg-badge{
        min-width: 0;
        width: 100%;
    }
}