:root{
    --safe-top: env(safe-area-inset-top);
    --safe-bottom: env(safe-area-inset-bottom);

    --primary: #0dcaf0;
    --border: #e9ecef;
    --bg: #ffffff;
    --text: #212529;
}

/* RESET */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    min-height:100%;
    background:var(--bg);
    color:var(--text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif;

    overflow-x:hidden;
}

/* APP */
#app{
    min-height:100vh;
}

.app-layout{
    min-height:100vh;
}

.content{
    padding:
        calc(var(--safe-top) + 16px)
        16px
        calc(88px + var(--safe-bottom))
        16px;
}

.page-slug-landing .content{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:100vh;
    padding-bottom:calc(16px + var(--safe-bottom));
}

/* CARD */
.card-soft{
    background:#fff;
    border-radius:16px;
    border:1px solid var(--border);
    padding:16px;
    margin-bottom:16px;
}

/* TITLE */
.section-title{
    font-size:18px;
    font-weight:600;
    margin-bottom:12px;
}

/* HORIZONTAL SCROLL */
.scroll-x{
    display:flex;
    flex-wrap:nowrap;
    gap:12px;
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:4px;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    touch-action:pan-x;
    scrollbar-width:none;
    scroll-behavior:smooth;
}

.scroll-x::-webkit-scrollbar{
    display:none;
}

/* BOTTOM NAV */
.bottom-nav{
    position:fixed;
    left:0;
    right:0;
    bottom:0;

    height:72px;

    padding-bottom:var(--safe-bottom);

    background:#fff;

    border-top:1px solid var(--border);

    z-index:999;

    display:flex;
}

.bottom-nav a{
    position:relative;
    flex:1;
    gap:4px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-decoration:none;
    color:#6c757d;
    font-size:11px;
    transition:color 0.2s ease;
}

.bottom-nav-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    line-height:1;
}

.bottom-nav-label{
    line-height:1;
}

.bottom-nav a.active{
    color:var(--primary);
    font-weight:600;
}

.bottom-nav a.active::before{
    content:'';
    position:absolute;
    top:0;
    left:20%;
    right:20%;
    height:3px;
    background:var(--primary);
    border-radius:0 0 3px 3px;
}

.bottom-nav a.active .bottom-nav-icon{
    transform:scale(1.05);
}

/* LOADING */
#app-loading{
    position:fixed;
    inset:0;

    background:#fff;

    z-index:99999;

    display:flex;
    justify-content:center;
    align-items:center;
}

.spinner{
    width:42px;
    height:42px;

    border:4px solid #eee;
    border-top-color:var(--primary);

    border-radius:50%;

    animation:spin 1s linear infinite;
}

@keyframes spin{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

/* FORM */
.form-control{
    border-radius:12px;
}

/* BUTTON */
.btn-primary{
    border-radius:12px;
}

/* VIDEO CARD */
.video-card{
    border-radius:5px;
    overflow:hidden;
    background:#fff;
    border:1px solid var(--border);
}

.video-card img{
    width:100%;
    display:block;
}

/* COURSE CARD */
.course-card{
    border-radius:16px;
    overflow:hidden;
    background:#fff;
    border:1px solid var(--border);
}

/* PRODUCT CARD */
.product-card{
    border-radius:16px;
    overflow:hidden;
    background:#fff;
    border:1px solid var(--border);
}