/* =========================================================
   BOTÕES ORIGINAIS DO RODAPÉ
   Mantidos no mesmo formato de antes
========================================================= */

.buttons_app {
    display: flex;
    align-items: center;
    gap: 10px;
}

.buttons_app img {
    display: block;
    height: 45px;
    width: auto;
}


/* =========================================================
   BARRA FIXA
========================================================= */

#rancholiAppBar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99990;

    display: flex;
    justify-content: center;

    padding: 12px 20px;

    background: #ffffff;
    border-top: 3px solid #198754;

    box-shadow: 0 -5px 22px rgba(0, 0, 0, 0.16);

    font-family: Arial, sans-serif;
}

#rancholiAppBar .app-bar-content {
    width: 100%;
    max-width: 1100px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;
}

#rancholiAppBar .app-bar-text {
    display: flex;
    flex-direction: column;
}

#rancholiAppBar .app-bar-text strong {
    font-size: 16px;
    line-height: 1.2;
    color: #1f2a24;
}

#rancholiAppBar .app-bar-text span {
    margin-top: 4px;

    font-size: 12px;
    color: #6f7872;
}

#rancholiAppBar .app-bar-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    min-height: 44px;

    padding: 0 19px;

    border: 0;
    border-radius: 11px;

    background: #198754;
    color: #ffffff;

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

    text-decoration: none;
    cursor: pointer;

    white-space: nowrap;

    box-shadow: 0 5px 14px rgba(25, 135, 84, 0.28);

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}

#rancholiAppBar .app-bar-button:hover {
    background: #157347;
    transform: translateY(-1px);

    box-shadow: 0 7px 18px rgba(25, 135, 84, 0.34);
}

#rancholiAppBar .app-bar-platform-icons {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

#rancholiAppBar .app-platform-icon,
#rancholiAppModal .app-platform-icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    flex: 0 0 auto;
}

#rancholiAppBar .app-platform-apple {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    line-height: 1;
    font-weight: 700;
}

#rancholiAppBar .app-bar-close {
    position: absolute;

    top: -12px;
    right: 10px;

    width: 27px;
    height: 27px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #333333;
    color: #ffffff;

    font-size: 20px;
    line-height: 27px;

    cursor: pointer;

    box-shadow: 0 3px 9px rgba(0,0,0,.18);
}


/* =========================================================
   MODAL
   Visual simples, inspirado em interfaces mobile,
   mas claramente identificado como Rancholi
========================================================= */

#rancholiAppModalOverlay {
    position: fixed;
    inset: 0;
    z-index: 99999;

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

    padding: 18px;

    background: rgba(0, 0, 0, 0.48);

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

#rancholiAppModal {
    position: relative;

    width: 100%;
    max-width: 390px;

    padding: 24px 22px 20px;

    background: #ffffff;
    border-radius: 20px;

    text-align: left;

    box-shadow: 0 18px 55px rgba(0, 0, 0, 0.28);
}

#rancholiAppModal .app-modal-close {
    position: absolute;

    top: 10px;
    right: 10px;

    width: 32px;
    height: 32px;

    border: 0;
    border-radius: 50%;

    background: #f1f3f2;
    color: #555;

    font-size: 21px;
    line-height: 32px;

    cursor: pointer;
}

#rancholiAppModal .app-modal-header {
    display: flex;
    align-items: center;

    gap: 13px;

    padding-right: 34px;
    margin-bottom: 16px;
}

#rancholiAppModal .app-modal-icon {
    width: 52px;
    height: 52px;

    flex: 0 0 52px;

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

    border-radius: 13px;

    background: #198754;
    color: #ffffff;

    box-shadow: 0 5px 14px rgba(25,135,84,.20);
}

#rancholiAppModal .app-modal-icon .app-platform-icon {
    width: 25px;
    height: 25px;
}

#rancholiAppModal .app-modal-icon .app-platform-apple {
    font-size: 27px;
    line-height: 1;
}

#rancholiAppModal .app-modal-icon.dual .app-platform-icon {
    width: 19px;
    height: 19px;
}

#rancholiAppModal .app-modal-icon.dual .app-platform-apple {
    font-size: 21px;
}

#rancholiAppModal .app-modal-icon .app-store-logo {
    width: 31px;
    height: 31px;
    display: block;
}

#rancholiAppModal .app-modal-icon.dual .app-store-logo {
    width: 25px;
    height: 25px;
}

#rancholiAppModal .app-modal-icon.store-logo-box {
    background: #ffffff;
    border: 1px solid #e6e9e7;
    box-shadow: 0 5px 14px rgba(0,0,0,.10);
}

#rancholiAppModal .app-modal-icon.dual {
    gap: 3px;
}

#rancholiAppModal .app-modal-title-wrap {
    min-width: 0;
}

#rancholiAppModal h2 {
    margin: 0;

    color: #1f2321;

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

#rancholiAppModal .app-modal-platform {
    margin-top: 4px;

    color: #7b827e;

    font-size: 12px;
}

#rancholiAppModal .app-modal-text {
    margin: 0 0 18px;

    color: #555e59;

    font-size: 14px;
    line-height: 1.5;
}

#rancholiAppModal .modal-app-buttons {
    display: flex;
    gap: 9px;
    flex-wrap: wrap;
}

#rancholiAppModal .modal-app-button {
    flex: 1 1 150px;

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

    gap: 8px;

    min-height: 46px;

    padding: 0 16px;

    border-radius: 11px;

    background: #198754;
    color: #ffffff;

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

    text-decoration: none;

    transition:
        transform .16s ease,
        opacity .16s ease;
}

#rancholiAppModal .modal-app-button:hover {
    opacity: .92;
    transform: translateY(-1px);
}

#rancholiAppModal .modal-app-button.ios {
    background: #111111;
}

#rancholiAppModal .app-modal-later {
    width: 100%;

    margin-top: 10px;
    padding: 10px 8px 2px;

    border: 0;
    background: transparent;

    color: #7a817d;

    font-size: 13px;

    cursor: pointer;
}

#rancholiAppModal .app-platform-apple {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    line-height: 1;
    font-weight: 700;
}


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

@media (max-width: 600px) {

    #rancholiAppBar {
        padding: 10px 12px;
    }

    #rancholiAppBar .app-bar-content {
        gap: 10px;
    }

    #rancholiAppBar .app-bar-text strong {
        font-size: 13px;
    }

    #rancholiAppBar .app-bar-text span {
        display: none;
    }

    #rancholiAppBar .app-bar-button {
        min-height: 40px;
        padding: 0 14px;

        font-size: 13px;
    }

    #rancholiAppBar .app-platform-icon {
        width: 17px;
        height: 17px;
    }

    #rancholiAppModal {
        max-width: 350px;
        padding: 22px 19px 18px;
    }

    #rancholiAppModal h2 {
        font-size: 18px;
    }
}