/* MAIN APP WRAPPER */

#app{
    font-family: Arial, sans-serif;
    max-width:1400px;
    margin:auto;
    padding:20px;
}
/* Floating Scan Button */

/* Floating Scan Button */

/* Floating Scan Button */

/* Floating Scan Button */

.agp-scan-float{
    position: fixed;
    bottom: 25px;
    right: 25px;
    background: #0073aa;
    color: #fff;
    font-size: 18px;
    padding: 14px 20px;
    border-radius: 50px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    cursor: pointer;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
}

/* Hover */

.agp-scan-float:hover{
    background:#005f8a;
}

/* Mobile adjust */

@media(max-width:600px){
    .agp-scan-float{
        bottom:20px;
        right:20px;
        font-size:16px;
        padding:12px 16px;
    }
}



/* Mobile adjust */


/* Hover */



/* Mobile adjust */



.agp-scan-float span{
    line-height:1;
}

/* HEADER */

.agp-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.agp-header button{
    background:#0073aa;
    color:#fff;
    border:none;
    padding:10px 16px;
    border-radius:6px;
    cursor:pointer;
    font-size:14px;
}

.agp-header button:hover{
    background:#005f8a;
}


/* GRID LAYOUT */

/* GRID LAYOUT */

.agp-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    width:100%;
}

/* TABLET */

@media (min-width:768px){
    .agp-grid{
        grid-template-columns:repeat(3,1fr);
    }
}

/* DESKTOP */

@media (min-width:1200px){
    .agp-grid{
        grid-template-columns:repeat(4,1fr);
    }
}


/* CARD DESIGN */




.agp-card{
    background:#ffffff;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 4px 14px rgba(0,0,0,0.12);
    cursor:pointer;
    transition:all .25s ease;
}



.agp-card:hover{
    transform:translateY(-5px);
    box-shadow:0 8px 22px rgba(0,0,0,0.18);
}


/* IMAGE */

.agp-card img{
    width:100%;
    height:170px;
    object-fit:cover;
    display:block;
}


/* TITLE */

.agp-card h3{
    font-size:15px;
    padding:12px;
    text-align:center;
    line-height:1.4;
}


/* GUIDE VIEW PAGE */

.agp-view{
    max-width:700px;
    margin:auto;
}

.agp-view img{
    width:100%;
    border-radius:12px;
    margin-bottom:15px;
}

.agp-view h2{
    margin-bottom:10px;
}

.agp-view audio{
    width:100%;
    margin:15px 0;
}


/* BACK BUTTON */

.agp-view button{
    margin-bottom:15px;
    padding:8px 14px;
    border:none;
    background:#0073aa;
    color:#fff;
    border-radius:6px;
    cursor:pointer;
}

.agp-view button:hover{
    background:#005f8a;
}