salla-offer, salla-products-slider, salla-product-options, salla-filters, salla-verify, salla-notifications, salla-order-summary, salla-reviews, salla-wallet, salla-conditional-offer, salla-orders, salla-advertisement, salla-app-install-alert, salla-apps-icons, salla-contacts, salla-installment, salla-loyalty-prize-item, salla-metadata, salla-payments, salla-social, salla-notification-item, salla-tooltip, salla-gifting, salla-loyalty, salla-comments, salla-product-size-guide, salla-rating-modal, salla-offer-modal, salla-scopes, salla-localization-modal, salla-user-profile, salla-bottom-alert, salla-quick-order, salla-user-settings, salla-search, salla-login-modal, salla-menu, salla-social-share, salla-breadcrumb, salla-infinite-scroll, salla-maintenance-alert, salla-quantity-input, salla-user-menu, salla-map, salla-reviews-summary, salla-comment-form, salla-color-picker, salla-products-list, salla-product-card, salla-comment-item, salla-tab-content, salla-tab-header, salla-tabs, salla-add-product-button, salla-count-down, salla-datetime-picker, salla-product-availability, salla-file-upload, salla-list-tile, salla-quick-buy, salla-progress-bar, salla-rating-stars, salla-tel-input, salla-placeholder, salla-skeleton, .salla-slider, .salla-modal, salla-loading, salla-button, salla-filters-widget, salla-booking-field, salla-conditional-fields, salla-price-range {
    visibility: hidden
}

.hydrated {
    visibility: inherit
}

.loading-overlay {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    -moz-backdrop-filter: blur(20px);
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 99999;
    left: 0;
    top: 0;
    background-color: rgb(255 255 255 / 0.5%);
}

    .loading-overlay .spinner {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
    }

@-webkit-keyframes bounce {
    0%, 100% {
        -webkit-transform: scale(0.7);
    }

    50% {
        -webkit-transform: scale(1.2);
    }
}

@keyframes bounce {
    0%, 100% {
        transform: scale(0.7);
        -webkit-transform: scale(0.7);
    }

    50% {
        transform: scale(1.2);
        -webkit-transform: scale(1.2);
    }
}

.loading-overlay {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    -moz-backdrop-filter: blur(20px);
    background-color: rgb(255 255 255 / 0.5%);
}

.picker_wrapper.no_alpha .picker_alpha {
    display: none
}

.picker_wrapper.no_editor .picker_editor {
    position: absolute;
    z-index: -1;
    opacity: 0
}

.picker_wrapper.no_cancel .picker_cancel {
    display: none
}

.layout_default.picker_wrapper {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: stretch;
    font-size: 10px;
    width: 25em;
    padding: .5em
}

    .layout_default.picker_wrapper input, .layout_default.picker_wrapper button {
        font-size: 1rem
    }

    .layout_default.picker_wrapper > * {
        margin: .5em
    }

    .layout_default.picker_wrapper::before {
        content: "";
        display: block;
        width: 100%;
        height: 0;
        order: 1
    }

.layout_default .picker_slider, .layout_default .picker_selector {
    padding: 1em
}

.layout_default .picker_hue {
    width: 100%
}

.layout_default .picker_sl {
    flex: 1 1 auto
}

    .layout_default .picker_sl::before {
        content: "";
        display: block;
        padding-bottom: 100%
    }

.layout_default .picker_editor {
    order: 1;
    width: 6.5rem
}

    .layout_default .picker_editor input {
        width: 100%;
        height: 100%
    }

.layout_default .picker_sample {
    order: 1;
    flex: 1 1 auto
}

.layout_default .picker_done, .layout_default .picker_cancel {
    order: 1
}

.picker_wrapper {
    box-sizing: border-box;
    background: #f2f2f2;
    box-shadow: 0 0 0 1px silver;
    cursor: default;
    font-family: sans-serif;
    color: #444;
    pointer-events: auto
}

    .picker_wrapper:focus {
        outline: none
    }

    .picker_wrapper button, .picker_wrapper input {
        box-sizing: border-box;
        border: none;
        box-shadow: 0 0 0 1px silver;
        outline: none
    }

        .picker_wrapper button:focus, .picker_wrapper button:active, .picker_wrapper input:focus, .picker_wrapper input:active {
            box-shadow: 0 0 2px 1px #1e90ff
        }

    .picker_wrapper button {
        padding: .4em .6em;
        cursor: pointer;
        background-color: #f5f5f5;
        background-image: linear-gradient(0deg, gainsboro, transparent)
    }

        .picker_wrapper button:active {
            background-image: linear-gradient(0deg, transparent, gainsboro)
        }

        .picker_wrapper button:hover {
            background-color: #fff
        }

.picker_selector {
    position: absolute;
    z-index: 1;
    display: block;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border: 2px solid #fff;
    border-radius: 100%;
    box-shadow: 0 0 3px 1px #67b9ff;
    background: currentColor;
    cursor: pointer
}

.picker_slider .picker_selector {
    border-radius: 2px
}

.picker_hue {
    position: relative;
    background-image: linear-gradient(90deg, red, yellow, lime, cyan, blue, magenta, red);
    box-shadow: 0 0 0 1px silver
}

.picker_sl {
    position: relative;
    box-shadow: 0 0 0 1px silver;
    background-image: linear-gradient(180deg, white, rgba(255, 255, 255, 0) 50%),linear-gradient(0deg, black, rgba(0, 0, 0, 0) 50%),linear-gradient(90deg, #808080, rgba(128, 128, 128, 0))
}

.picker_alpha, .picker_sample {
    position: relative;
    background: linear-gradient(45deg, lightgrey 25%, transparent 25%, transparent 75%, lightgrey 75%) 0 0/2em 2em,linear-gradient(45deg, lightgrey 25%, white 25%, white 75%, lightgrey 75%) 1em 1em/2em 2em;
    box-shadow: 0 0 0 1px silver
}

    .picker_alpha .picker_selector, .picker_sample .picker_selector {
        background: none
    }

.picker_editor input {
    font-family: monospace;
    padding: .2em .4em
}

.picker_sample::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    background: currentColor
}

.picker_arrow {
    position: absolute;
    z-index: -1
}

.picker_wrapper.popup {
    position: absolute;
    z-index: 2;
    margin: 1.5em
}

    .picker_wrapper.popup, .picker_wrapper.popup .picker_arrow::before, .picker_wrapper.popup .picker_arrow::after {
        background: #f2f2f2;
        box-shadow: 0 0 10px 1px rgba(0,0,0,.4)
    }

        .picker_wrapper.popup .picker_arrow {
            width: 3em;
            height: 3em;
            margin: 0
        }

            .picker_wrapper.popup .picker_arrow::before, .picker_wrapper.popup .picker_arrow::after {
                content: "";
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                z-index: -99
            }

            .picker_wrapper.popup .picker_arrow::before {
                width: 100%;
                height: 100%;
                -webkit-transform: skew(45deg);
                transform: skew(45deg);
                -webkit-transform-origin: 0 100%;
                transform-origin: 0 100%
            }

            .picker_wrapper.popup .picker_arrow::after {
                width: 150%;
                height: 150%;
                box-shadow: none
            }

.popup.popup_top {
    bottom: 100%;
    left: 0
}

    .popup.popup_top .picker_arrow {
        bottom: 0;
        left: 0;
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg)
    }

.popup.popup_bottom {
    top: 100%;
    left: 0
}

    .popup.popup_bottom .picker_arrow {
        top: 0;
        left: 0;
        -webkit-transform: rotate(90deg) scale(1, -1);
        transform: rotate(90deg) scale(1, -1)
    }

.popup.popup_left {
    top: 0;
    right: 100%
}

    .popup.popup_left .picker_arrow {
        top: 0;
        right: 0;
        -webkit-transform: scale(-1, 1);
        transform: scale(-1, 1)
    }

.popup.popup_right {
    top: 0;
    left: 100%
}

    .popup.popup_right .picker_arrow {
        top: 0;
        left: 0
    }



.blockLogo {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 15px;
}

#modalContent .login-container {
    padding-top: 0;
}

#modalContent .page-container {
    padding-top: 40px;
    padding-bottom: 40px;
    position: static;
    z-index: 1;
}

    #modalContent .page-container .login-form {
        width: 320px;
        margin: 0 auto 20px;
    }

@media (max-width: 480px) {
    #modalContent .page-container .login-form {
        width: 100%;
    }
}

#modalContent .panel {
    margin-bottom: 20px;
    border: 1px solid #ddd;
    background-color: #fff;
    color: #333;
    border-radius: 3px;
}

#modalContent .panel-body {
    position: relative;
    padding: 15px 20px;
}

#modalContent .panel-title {
    position: relative;
    font-size: 13px;
    margin-bottom: 15px;
}

#modalContent h5.panel-title,
#modalContent .login-title {
    font-size: 1.3em !important;
    margin-top: 0;
    margin-bottom: 10px;
}

#modalContent .icon-object {
    display: inline-block;
    width: 64px;
    height: 64px;
    line-height: 64px;
    border-radius: 50%;
    text-align: center;
    font-size: 26px;
    margin: 0 auto 10px;
}

#modalContent .border-yellow-dark {
    border: 2px solid #fcd34c;
}

#modalContent .text-yellow-dark {
    color: #fcd34c;
}

#modalContent .login-options {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

#modalContent .login-option {
    background: transparent;
    border-radius: 5px !important;
    margin: 0 10px;
    height: 100px;
    width: 120px;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    #modalContent .login-option i {
        display: block;
        font-size: 25px !important;
        margin-bottom: 7px;
    }

    #modalContent .login-option span {
        font-size: 13px;
    }

    #modalContent .login-option:hover {
        background-color: #f9f9f9;
    }

#modalContent #btn_back {
    margin: 10px 0;
}

#modalContent .alert {
    padding: 10px 15px;
    margin-bottom: 15px;
    border-radius: 3px;
    border: 1px solid transparent;
    font-size: 13px;
}

#modalContent .alert-warning {
    background-color: #fcf8e3;
    border-color: #faebcc;
    color: #8a6d3b;
}

#modalContent .alert-success {
    background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #3c763d;
}

#modalContent .alert .close {
    float: left;
    font-size: 16px;
    opacity: .6;
}

#modalContent .form-group {
    margin-bottom: 15px;
}

#modalContent label {
    font-size: 13px;
    margin-bottom: 5px;
    display: block;
}

#modalContent .input-group {
    position: relative;
    display: table;
    border-collapse: separate;
    width: 100%;
}

    #modalContent .input-group .form-control {
        display: table-cell;
        width: 100%;
    }

#modalContent .input-group-addon {
    display: table-cell;
    width: 1%;
    white-space: nowrap;
    vertical-align: middle;
    padding: 6px 10px;
    border: 1px solid #ccc;
    border-right: 0;
    background-color: #f5f5f5;
}

    #modalContent .input-group-addon.shrinked {
        width: auto;
    }

#modalContent .btn {
    border-radius: 3px;
    font-size: 13px;
}

#modalContent .btn-primary {
    width: 100%;
}

#modalContent .mb-10 {
    margin-bottom: 10px;
}

#modalContent .align-center,
#modalContent .text-center {
    text-align: center;
}

#modalContent .text-muted {
    color: #999;
}

#modalContent #resend-section {
    margin-top: 10px;
}

#modalContent progress {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
}

#modalContent .modal-mobile-number.country-code,
#modalContent .intl-tel-input-pro {
    width: 100%;
}

#modalContent .fc-ltr {
    direction: ltr;
    text-align: left;
}

#AlRaed_Login, #salla-modal {
    display: none;
}

/* لودينج داخل المودال */
#modalContent .modal-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 10px;
    text-align: center;
    font-size: 14px;
    color: #666;
}

#modalContent .modal-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #ddd;
    border-top-color: #00a099; /* لون قريب من ألوانك */
    border-radius: 50%;
    animation: modal-spin 0.8s linear infinite;
    margin-bottom: 10px;
}

@keyframes modal-spin {
    to {
        transform: rotate(360deg);
    }
}