.yalla-footer {
    padding: 20px 0;
    background: #f6f6f6;
    color: #fff
}

.yalla-footer-shell {
    position: relative;
    overflow: hidden;
    border-radius: 18px;

    box-shadow: 0 18px 50px rgba(0, 0, 0, .15)
}

.yalla-footer-grid {
    display: grid;
    grid-template-columns: 1.15fr .8fr .9fr 1.15fr;
    gap: 45px;
    padding: 48px 40px 28px;
    direction: ltr
}

.yalla-footer-grid>section {
    direction: rtl
}

.yalla-footer-logo img {
    width: 155px;
    height: 58px;
    object-fit: contain;
    object-position: right
}

.yalla-footer-brand p,
.yalla-footer-news p {
    margin: 20px 0;
    color: #aaa;
    line-height: 1.9;
    font-size: 13px
}

.yalla-contact-list {
    padding: 0;
    margin: 0;
    list-style: none;
    display: grid;
    gap: 12px
}

.yalla-contact-list li {
    display: flex;
    align-items: center;
    gap: 11px;
    color: #eee;
    font-size: 13px
}

.yalla-contact-list i,
.yalla-footer-column>a i {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border: 1px solid #343438;
    border-radius: 7px;
    color: #fc5700
}

.yalla-footer-social {
    display: flex;
    gap: 10px;
    margin-top: 22px;
    direction: ltr
}

.yalla-footer-social a {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #242426;
    color: #fff
}

.yalla-footer h3 {
    position: relative;
    margin: 10px 0 27px;
    color: #fff;
    font-size: 18px
}

.yalla-footer h3:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -11px;
    width: 36px;
    height: 2px;
    background: #fc5700
}

.yalla-footer-column {
    display: flex;
    flex-direction: column
}

.yalla-footer-column>a,
.yalla-footer-column #footer-pages-list {
    display: flex;
    flex-direction: column
}

.yalla-footer-column>a,
.yalla-footer-column #footer-pages-list>a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px dotted #29292c;
    color: #c6c6c8;
    font-size: 13px
}

.yalla-footer-column>a:hover,
.yalla-footer-column #footer-pages-list>a:hover {
    color: #fff
}

.yalla-subscribe {
    height: 48px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 12px;
    background: #242426;
    color: #999
}

.yalla-footer .yalla-subscribe input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff !important;
    font-size: 12px
}

.yalla-footer .yalla-subscribe input::placeholder {
    color: #999 !important;
    opacity: 1
}

.yalla-footer .yalla-subscribe input:-webkit-autofill,
.yalla-footer .yalla-subscribe input:-webkit-autofill:hover,
.yalla-footer .yalla-subscribe input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 1000px #242426 inset;
    transition: background-color 9999s ease-in-out 0s;
}

.yalla-subscribe-btn {
    height: 48px;
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fc5700, #fc5700);
    color: #fff;
    font-weight: 700;
    font-size: 13px
}

.yalla-footer-news {
    position: relative
}

.yalla-footer-burger {
    position: absolute;
    left: -20px;
    bottom: -38px;
    width: 190px;
    max-height: 140px;
    object-fit: contain;
    opacity: .9;
    pointer-events: none
}

.yalla-footer-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 1px solid #29292c;
    border-bottom: 1px solid #29292c;
    padding: 18px 40px
}

.yalla-footer-features>div {
    min-height: 55px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-left: 1px solid #29292c
}

.yalla-footer-features>div:last-child {
    border: 0
}

.yalla-footer-features i {
    color: #fc5700;
    font-size: 27px
}

.yalla-footer-features span {
    display: flex;
    flex-direction: column;
    color: #999;
    font-size: 10px
}

.yalla-footer-features strong {
    color: #fff;
    font-size: 13px
}

.yalla-footer-features .yalla-payment {
    flex-direction: column;
    gap: 6px
}

.yalla-payment img {
    max-width: 230px;
    max-height: 32px;
    object-fit: contain
}

.yalla-footer-copy {
    text-align: center;
    padding: 15px;
    color: #999;
    font-size: 12px
}

.yalla-footer-copy i {
    color: #fc5700;
    margin-right: 5px
}

.yalla-center-modal .modal-content {
    position: relative;
    padding: 28px;
    border: 0;
    border-radius: 20px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, .25);
    background: #fff
}

.yalla-center-modal .yalla-modal-close {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 35px;
    height: 35px;
    border: 0;
    border-radius: 9px;
    background: #fff0ef;
    color: #ef3540
}

.yalla-center-modal .yalla-modal-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 13px;
    display: grid;
    place-items: center;
    border-radius: 17px;
    background: linear-gradient(135deg, #ffebe8, #fff7f5);
    color: #ef3540;
    font-size: 24px
}

.yalla-center-modal h4 {
    text-align: center;
    margin: 0;
    color: #202023;
    font-size: 20px
}

.yalla-modal-subtitle {
    text-align: center;
    margin: 7px 0 20px;
    color: #8a8a8e;
    font-size: 12px
}

.yalla-language-options {
    display: grid;
    gap: 10px
}

.yalla-confirm-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

.yalla-confirm-btn {
    height: 46px;
    border: 0;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .15s;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.yalla-confirm-btn:hover {
    opacity: .88
}

.yalla-confirm-btn--ghost {
    background: #f2f2f4;
    color: #333
}

.yalla-confirm-btn--danger {
    background: linear-gradient(135deg, #fc5700, #fc5700);
    color: #fff
}

.yalla-language-options .lang-option {
    width: 100%;
    padding: 11px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #ececef;
    border-radius: 12px;
    background: #fff;
    color: #222;
    text-align: right
}

.yalla-language-options .lang-option:hover {
    border-color: #ef3540;
    background: #fff8f7
}

.yalla-language-options span {
    display: flex;
    flex-direction: column
}

.yalla-language-options small {
    color: #999
}

.yalla-language-options b {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    background: #fff0ef;
    color: #ef3540
}

.yalla-auth-modal .modal-dialog {
    max-width: 460px
}

.yalla-auth-modal .modal-content {
    padding: 0;
    overflow: hidden
}

.yalla-auth-modal .modal-header {
    padding: 22px 24px;
    background: linear-gradient(135deg, #fff8f7, #fff);
    border-color: #f2e7e6 !important
}

.yalla-auth-modal .modal-title {
    font-size: 20px;
    font-weight: 800;
    color: #222
}

.yalla-auth-modal .modal-header>a {
    border-radius: 9px !important;
    background: #fff0ef !important;
    color: #ef3540 !important
}

.yalla-auth-modal .modal-body {
    padding: 22px 24px 26px
}

.yalla-auth-modal .nav-tabs {
    padding: 4px;
    border: 0;
    border-radius: 12px;
    background: #f5f5f6
}

.yalla-auth-modal .nav-item {
    width: 50%
}

.yalla-auth-modal .nav-link {
    width: 100%;
    border: 0 !important;
    border-radius: 9px;
    color: #777;
    font-weight: 700
}

.yalla-auth-modal .nav-link.active {
    background: #fff;
    color: #ef3540;
    box-shadow: 0 3px 12px rgba(0, 0, 0, .07)
}

.yalla-auth-modal .form-control {
    height: 48px;
    border: 1px solid #e9e9eb;
    border-radius: 11px;
    padding: 0 14px;
    text-align: right
}

.yalla-auth-modal .form-control:focus {
    border-color: #ef3540;
    box-shadow: 0 0 0 3px rgba(239, 53, 64, .1)
}

.yalla-auth-modal .yalla-password-field {
    position: relative
}

.yalla-auth-modal .yalla-password-field .form-control {
    padding-left: 44px
}

.yalla-auth-modal .yalla-password-toggle {
    position: absolute;
    top: 50%;
    left: 6px;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    color: #999;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer
}

.yalla-auth-modal .yalla-password-toggle:hover {
    color: #ef3540;
    background: #fff2f3
}

.yalla-auth-modal .theme-btn {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    width: 100%;
    border-radius: 11px !important;
    background: linear-gradient(135deg, #fc5700, #fc5700)
}

@media(max-width:1100px) {
    .yalla-footer-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .yalla-footer-features {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px
    }

    .yalla-footer-features>div {
        border: 0
    }
}

@media(max-width:650px) {
    .yalla-footer {
        padding: 10px
    }

    .yalla-footer-grid {
        grid-template-columns: 1fr;
        padding: 32px 22px;
        gap: 25px
    }

    .yalla-footer-features {
        grid-template-columns: 1fr;
        padding: 20px
    }

    .yalla-footer-burger {
        display: none
    }

    .yalla-footer-grid>section {
        text-align: right
    }

    .yalla-center-modal .modal-dialog {
        margin: 14px
    }

    .yalla-center-modal .modal-content {
        padding: 22px
    }
}

/* Full-width footer and final color normalization */
.yalla-footer {
    width: 100%;
    padding: 0;
    background: #0e0e0f
}


.yalla-footer-shell {
    width: 100%;
    border-radius: 0;
    box-shadow: none
}

.yalla-footer a,
.yalla-contact-list a,
.yalla-contact-list span {
    color: #e9e9ea !important
}

.yalla-contact-list li {
    color: #e9e9ea !important
}

.yalla-footer-brand p,
.yalla-footer-news p {
    color: #aaa !important
}

.yalla-footer-news {
    overflow: hidden
}

.yalla-auth-modal .modal-header {
    position: relative;
    align-items: flex-start
}

.yalla-auth-modal .modal-header p {
    margin: 5px 0 0;
    color: #8a8a8e;
    font-size: 12px
}

.yalla-auth-modal .yalla-modal-close {
    position: static;
    flex: none
}

.yalla-auth-modal label {
    margin: 4px 2px 0;
    color: #343438;
    font-size: 12px;
    font-weight: 700
}

.yalla-auth-modal .form-control {
    color: #202023;
    background: #fff
}

.yalla-auth-modal .form-control::placeholder {
    color: #aaa
}