/* =========================================================
   SINGLE APP PAGE
   POST IMAGE + CLAIM BONUS
========================================================= */


/* =========================================================
   MAIN SINGLE APP WRAPPER
========================================================= */

.single-app-page {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* =========================================================
   POST IMAGE
========================================================= */

.single-post-image-link {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    text-decoration: none;
    line-height: 0;
    cursor: pointer;
    overflow: hidden;
}


.single-post-image {
    display: block;

    width: 100%;
    max-width: 100%;
    height: auto;

    margin: 0;
    padding: 0;

    border: 0;

    object-fit: cover;

    line-height: 0;
}


.single-claim-bonus-btn {
    width: calc(100% - 10px) !important;
    margin: 8px 5px !important;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    padding: 10px 12px;

    box-sizing: border-box;

    background: #29a9d6;
    color: #fff;

    border: 2px solid #000;
    border-radius: 4px;

    text-decoration: none;

    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;

    box-shadow: none;
}

.single-claim-bonus-btn:hover {

    background: #29a9d6;

    color: #fff;

    text-decoration: none;

}

/* =========================================================
   REMOVE UNWANTED SPACING
========================================================= */

.single-app-page p:empty {

    display: none;

}


.single-app-page > *:first-child {

    margin-top: 0 !important;

}


.single-app-page img {

    max-width: 100%;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .single-app-page {

        width: 100%;

        margin: 0;

        padding: 0;

    }


    .single-post-image-link {

        width: 100%;

        margin: 0;

        padding: 0;

    }


    .single-post-image {

        width: 100%;

        height: auto;

        margin: 0;

        padding: 0;

    }


    .single-claim-bonus-btn {

        width: calc(100% - 4px);

        margin: 7px 2px 7px;

        padding: 9px 8px;

        font-size: 14px;

        border-radius: 4px;

        gap: 7px;

    }


    .single-claim-bonus-btn i {

        font-size: 14px;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 768px) and (max-width: 991px) {

    .single-app-page {

        width: 100%;

        margin: 0;

        padding: 0;

    }


    .single-post-image {

        width: 100%;

        height: auto;

    }


    .single-claim-bonus-btn {

        width: calc(100% - 10px);

        margin: 10px 5px;

        padding: 11px 14px;

        font-size: 16px;

    }

}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 992px) {

    .single-app-page {

        width: 100%;

        max-width: 100%;

        margin: 0 auto;

        padding: 0;

    }


    .single-post-image-link {

        width: 100%;

    }


    .single-post-image {

        width: 100%;

        height: auto;

        display: block;

    }


    .single-claim-bonus-btn {

        width: calc(100% - 20px);

        margin: 10px 10px;

        padding: 12px 16px;

        font-size: 17px;

    }

}

/* =========================================================
   TRENDING RUMMY APPS HEADING
========================================================= */

.single-trending-heading {

    width: calc(100% - 15px);

    margin: 10px auto 5px;

    padding: 8px 10px;

    box-sizing: border-box;

    background: #d71920;

    color: #fff;

    border: 2px solid #000;

    border-radius: 6px;

    text-align: center;

    font-size: 17px;

    font-weight: 700;

    line-height: 1.2;
}

/* Android Robot Icons */

.single-trending-heading i {

    font-size: 18px;

    margin: 0 5px;

    vertical-align: middle;

    color: #fff;
}


/*==================================================
    SINGLE APP - TRENDING APPS
    SAME CSS AS HOME PAGE APPS
==================================================*/


/*==================================================
    APPS LIST
==================================================*/

.single-recent-apps{
    width:100%;
    margin:0;
    padding:0;
}


/*==================================================
    APP ROW
==================================================*/

.single-recent-app-row{
    display:flex;
    align-items:center;
    gap:10px;

    padding:10px 12px;

    border-bottom:1px solid #ececec;

    background:#fff;

    box-sizing:border-box;
}

.single-recent-app-row:last-child{
    border-bottom:none;
}


/*==================================================
    RANK
==================================================*/

.single-recent-rank{
    width:20px;
    min-width:20px;

    text-align:center;

    font-size:18px;
    font-weight:700;

    color:#8b8b8b;
}


/*==================================================
    APP ICON
==================================================*/

.single-recent-icon{
    position:relative;

    width:56px;
    min-width:56px;

    height:56px;

    margin:0;
}

.single-recent-icon img{
    width:56px;
    height:56px;

    border-radius:12px;

    object-fit:cover;

    display:block;
}


/*==================================================
    NEW RIBBON
==================================================*/

.single-recent-new-ribbon{
    position:absolute;

    top:-6px;
    left:-6px;

    z-index:10;

    padding:2px 6px;

    background:darkorange;

    color:#fff;

    border-radius:8px;

    font-size:8px;
    font-weight:700;

    line-height:1;

    box-shadow:0 2px 5px rgba(0,0,0,.25);

    pointer-events:none;
}


/*==================================================
    APP INFO
==================================================*/

.single-recent-info{
    flex:1;

    min-width:0;
}


.single-recent-title{
    font-size:16px;

    font-weight:700;

    color:#222;

    line-height:1.3;

    margin-bottom:2px;
}


.single-recent-meta{
    font-size:13px;

    color:#555;

    margin-bottom:0;
}


.single-recent-meta i{
    font-size:12px;
}


.single-recent-withdraw{
    font-size:14px;

    font-weight:700;

    color:#0b7b39;

    line-height:1.3;
}


/*==================================================
    DOWNLOAD BUTTON
==================================================*/

.single-recent-download{

    width:102px;
    height:32px;

    flex-shrink:0;

    display:flex;

    align-items:center;
    justify-content:center;

    gap:6px;

    text-decoration:none;

    color:#fff;

    font-size:14px;

    font-weight:700;

    border-radius:5px;

    background:linear-gradient(180deg,#ed1c24);

    box-shadow:0 8px 16px rgba(255,0,60,.20);

    box-sizing:border-box;
}


.single-recent-download i{
    font-size:14px;
}


.single-recent-download:hover{
    color:#fff;

    text-decoration:none;

    background:linear-gradient(180deg,#ed1c24);
}


/*==================================================
    MOBILE
==================================================*/

@media (max-width:768px){

    .single-recent-apps{
        width:100%;
        margin:0;
        padding:0;
    }


    .single-recent-app-row{

        padding:8px;

        gap:8px;
    }


    .single-recent-rank{

        width:18px;
        min-width:18px;

        font-size:16px;
    }


    .single-recent-icon{

        width:52px;
        min-width:52px;

        height:52px;
    }


    .single-recent-icon img{

        width:52px;
        height:52px;

        border-radius:10px;
    }


    .single-recent-title{

        font-size:13px;

        margin-bottom:0;
    }


    .single-recent-meta{

        font-size:11px;

        margin-bottom:0;
    }


    .single-recent-withdraw{

        font-size:12px;
    }


    .single-recent-download{

        width:110px;
        height:30px;

        font-size:13px;

        border-radius:5px;

        gap:4px;
    }


    .single-recent-download i{

        font-size:12px;
    }

}


/*==================================================
    TABLET
==================================================*/

@media (min-width:769px) and (max-width:992px){

    .single-recent-apps{

        max-width:760px;

        margin:auto;
    }


    .single-recent-app-row{

        padding:10px 12px;
    }


    .single-recent-icon img{

        width:54px;
        height:54px;
    }


    .single-recent-download{

        width:100px;
        height:32px;
    }

}

/* =========================================================
   SINGLE APP FAQ
========================================================= */

.single-faq-section {
    width: 100%;
    margin: 10px 0 0;
    padding: 0;
    box-sizing: border-box;
}


/* =========================================================
   FAQ HEADING
========================================================= */

.single-faq-heading {
    width: calc(100% - 16px);

    margin: 10px auto 8px;

    padding: 8px 10px;

    box-sizing: border-box;

    background: #d71920;
    color: #fff;

    border: 2px solid #000;
    border-radius: 6px;

    text-align: center;

    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
}


/* =========================================================
   FAQ LIST
========================================================= */

.single-faq-list {
    width: calc(100% - 16px);

    margin: 0 auto;

    border: 1px solid #ddd;
    border-radius: 8px;

    overflow: hidden;

    background: #fff;
}


/* =========================================================
   FAQ ITEM
========================================================= */

.single-faq-item {
    background: #fff;

    border-bottom: 1px solid #ddd;
}

.single-faq-item:last-child {
    border-bottom: none;
}


/* =========================================================
   QUESTION
========================================================= */

.single-faq-question {
    width: 100%;

    min-height: 58px;

    padding: 12px 14px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    box-sizing: border-box;

    border: none;
    outline: none;

    background: #fff;

    color: #111;

    text-align: left;

    font-family: inherit;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition: background .25s ease;
}


.single-faq-question:hover {
    background: #fafafa;
}


/* =========================================================
   ARROW
========================================================= */

.single-faq-arrow {

    width: 34px;
    height: 34px;

    min-width: 34px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #f1f3f4;

    color: #159447;

    transition: background .3s ease;
}


.single-faq-arrow i {

    font-size: 12px;

    transition: transform .4s ease;
}


/* =========================================================
   ANSWER
   IMPORTANT: NO display:none
========================================================= */

.single-faq-answer {

    max-height: 0;

    overflow: hidden;

    opacity: 0;

    padding: 0 14px;

    box-sizing: border-box;

    color: #555;

    font-size: 14px;

    line-height: 1.55;

    background: #fff;

    transition:
        max-height .45s ease,
        opacity .3s ease,
        padding-top .35s ease,
        padding-bottom .35s ease;
}


/* =========================================================
   OPEN
========================================================= */

.single-faq-item.open .single-faq-answer {

    opacity: 1;

    padding-top: 0;

    padding-bottom: 14px;
}


.single-faq-item.open .single-faq-arrow {

    background: #eaf8ef;
}


.single-faq-item.open .single-faq-arrow i {

    transform: rotate(180deg);
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .single-faq-heading {

        width: calc(100% - 10px);

        margin: 8px auto 7px;

        padding: 8px 6px;

        font-size: 16px;
    }


    .single-faq-list {

        width: calc(100% - 10px);

        border-radius: 7px;
    }


    .single-faq-question {

        min-height: 56px;

        padding: 11px 12px;

        font-size: 14px;
    }


    .single-faq-arrow {

        width: 32px;
        height: 32px;

        min-width: 32px;
    }


    .single-faq-answer {

        padding: 0 12px;

        font-size: 13px;

        line-height: 1.5;
    }


    .single-faq-item.open .single-faq-answer {

        padding-top: 0;

        padding-bottom: 13px;
    }

}