:root {
    --primary-color: #3350AC;
    --secondary-color: #FFCD06;
    --light-color: #E6E7E8;
    --dark-color: #212529;
    --bs-primary-border: #3350AC;
}

.rtl-icon {
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    filter: FlipH;
    -ms-filter: "FlipH";
}


.btn-outline-warning
 {
    --bs-btn-color: #FFCD06;
    --bs-btn-border-color: #FFCD06;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #FFCD06;
    --bs-btn-hover-border-color: #FFCD06;
    --bs-btn-focus-shadow-rgb: 255, 193, 7;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #FFCD06;
    --bs-btn-active-border-color: #FFCD06;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #FFCD06;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #FFCD06;
    --bs-gradient: none;
}
.border-secondary{
    border-color: #FFCD06 !important; 
}
.warning-check:checked + label {
    border-color: #FFCD06 !important; 
    background-color: #FFCD06 !important;
}
.margin-customize{
    margin-left: 7rem;
    margin-right: 7rem;
}
.margin-customize2{
    margin-right: 5.5rem;
}
.margin-customize2-en {
    margin-left: 5.5rem;
}
.p-customize{
    padding-left: 2.3rem;
}
.p-customize-en{
    padding-right: 2.3rem;
}

@media (max-width: 1200px) {
.fs-custom {
    font-size: 0.60rem !important;
}
.card-size{
    min-width: 9rem !important;
    max-height: 10rem !important;
}
.offer-customize{
    margin-left: -1rem !important;
    width: 28% !important;
}
.ms-sm-3 {
    margin-right: 2rem !important;
}
.category-size{
    max-width: 9rem !important;
}
.profile-size{
    max-width: 7rem !important;
}
.height-customs{
    height: 46vh !important;
}
.height-image{
    height: 24vh !important;
}
.me-sm-5 {
    margin-left: 2rem !important;
}
.fs-customize-6{
    font-size: 0.75rem !important;
}
.fs-customize-5{
    font-size: 0.95rem !important;
}
.card-store-size{
    min-width: 9rem !important;
}
.border-custom{
    border-left: none !important;
}
.w-store{
    width: 60% !important;
}
.bottom-customs{
    bottom: -34px !important;
}
.w-user{
    width: 100% !important;
}
.margin-customize {
    margin-left: 3rem !important;
    margin-right: 3rem !important;
}

.margin-customize2-en {
    margin-left: 4rem;
}
.p-customize-en {
    padding-right: 4.3rem;
}

}
@media (min-width: 1080px){
    .bg-login {
        background-image: url('../images/login-image-full.png');
        background-repeat: no-repeat;
        background-size: contain;
        background-position: bottom;
        background-position-y: 50px;
        background-position-x: 100px;
    }
    
    .bg-login-rtl {
        background-image: url('../images/login-image-full-rtl.png');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: bottom;
        background-position-y: 50px;
        background-position-x: 200px;
    }

    .bg-register {
        background-image: url('../images/login-image.png');
        background-repeat: no-repeat;
        background-size: 50%;
        background-position: left;
    }

    .bg-register-rtl {
        background-image: url('../images/login-image.png');
        background-repeat: no-repeat;
        background-size: 50%;
        background-position: right;
        background-position-x: right 15px;
    }
}

@media (max-width: 1079px){
    .bg-login {
        background-color: #FFE682;
        margin: 25px;
        border-radius: 25px;
        padding: 0px !important;
    }
    
    .bg-login-rtl {
        background-color: #FFE682;
        margin: 25px;
        border-radius: 25px;
        padding: 0px !important;
    }

    .bg-register {
        background-color: #FFE682;
    }

    .bg-register-rtl {
        background-color: #FFE682;
    }
}



.text-shadow {
    text-shadow: 1px 1px var(--bs-gray);
}

.text-gray {
    color: var(--bs-gray);
}

@font-face {
    font-family: "Cairo";
    src: url("../fonts/Cairo-VariableFont_slnt\,wght.ttf");
    }

body {
    font-family: 'Cairo';
    color: var(--primary-color);
}
.border-primary {
    border-color: var(--bs-primary-border) !important;
}
.border-input {
    border-color:  #C0C0C0 !important;
}
.text-input{
    color: #6E6E6E !important;
}
.text-input::placeholder {
    color: #6E6E6E !important;
}
.bg-primary{
    background-color: var(--primary-color)!important;
}

.bg-secondary{
    background-color: var(--secondary-color)!important;
}

.bg-secondary-2{
    background-color: #FFE682;
}

/* .bg-light {
    background-color: var(--light-color) !important;
} */

.top-image-bg{
    background-image: url(../images/top-background.jpg);
    background-color: #ffffff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.nav-link {
    --bs-nav-link-color: #ffffff;
    display: block;
    padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
    font-size: var(--bs-nav-link-font-size);
    font-weight: var(--bs-nav-link-font-weight);
    color: var(--bs-nav-link-color);
    text-decoration: none;
    background: 0 0;
    border: 0;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.text-primary {
    color: var(--primary-color)!important;
}

.text-secondary {
    color: var(--secondary-color)!important;
}

.top-image {
    position: relative;
    top: 40px;
}

.fs-custom {
    font-size: 0.75rem; 
}



.fs-custom-2 {
    font-size: 0.95rem; 
}
.bg-custom {
    background: #DEE4F8 !important;
}
.bg-custom-card {
    background: #EAEAEA !important;
}
.bordercolor-custom {
    border-color: #707070  !important;
}
.mt-n1{
    margin-top: -0.5em;
    width: 111%;
}
.bordercolor-custom-2 {
    border-color: #ffc107  !important;
}
.bg-button{
    background: #BABABA!important;
}
.btn-outline-primary{
    --bs-btn-color: var(--primary-color) !important;
    --bs-btn-border-color: var(--primary-color) !important;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primary-color) !important;
    --bs-btn-hover-border-color: var(--primary-color) !important;
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--primary-color) !important;
    --bs-btn-active-border-color: var(--primary-color) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--primary-color) !important;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--primary-color) !important;
    --bs-gradient: none;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--primary-color);
    --bs-btn-border-color: var(--primary-color);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--primary-color);
    --bs-btn-hover-border-color: var(--primary-color);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--primary-color);
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd;
}

input.form-control.me-2 {
    margin-right: -0.5rem !important;
    background: white;
    color: #000;
}
.select-languge-ar {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center!important;
    background-size: 1rem auto!important;
}
.select-languge-en {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat !important;
    background-position: left 0.75rem center!important;
    background-size: 1rem auto!important;
}


.flip-box {
    background-color: transparent;
    perspective: 1000px;
  }
  
  .flip-box-inner {
    position: relative;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
  }
  
  .flip-box:hover .flip-box-inner {
    transform: rotateY(180deg);
  }
  
  .flip-box-front, .flip-box-back {
    position: absolute;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
  }
  
  .flip-box-front {
    color: black;
  }
  
  .flip-box-back {
    transform: rotateY(180deg);
    width: 100%;
    background: #EAEAEA !important;
    border: 1px solid #70707070;
  }

.hover-overlay {
    background-color: rgba(238, 236, 236, 0.8); 
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}
.card-hover:hover .hover-overlay {
    opacity: 1;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link{
    background: var(--secondary-color);
    color: var(--primary-color) !important;
}
.circle {
    width: 50px;
    height: 50px;
    border: 2px solid var(--primary-color); 
    border-radius: 50%;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}

.circle.active {
    background-color: var(--primary-color); 
    color: white;
}

.circle.checked {
    background-color: green; 
    border: 2px solid green;
}

.check-icon {
    color: white;
    font-size: 20px; 
}

.top-progress {
    top: 42% !important;
}

.star {
    color: rgb(209, 206, 206);
    cursor: pointer;
}

.star.selected {
    color: gold;
}
.show-checkmark {
    display: block !important;
}
.chat-messages {
 
    max-height: 500px;
    overflow-y: auto;
    overflow-x: hidden;
}
/* .chat-messages {
    display: flex;
    flex-direction: column;

} */
.chat-message-left {
    margin-right: auto
}
.chat-message-right {
    flex-direction: row-reverse;
    margin-left: auto
}
.chat-bubble ,.chat-bubble-left{
    position: relative;
    border-radius: 15px;
    min-width: 100px;
    max-width: 200px;
}

.chat-bubble::before {
    content: "";
    position: absolute;
    top: 58%;
    right: -39px;
    border-top: 20px solid transparent;
    border-left: 56px solid var(--secondary-color);
    border-bottom: 1px solid transparent;
}
.chat-bubble-left::before {
    content: "";
    position: absolute;
    top: 58%;
    left: -39px;
    border-top: 20px solid transparent;
    border-right: 56px solid #E2E3E5;
    border-bottom: 1px solid transparent;
}
.btn-check:checked + label i {
    display: inline !important;
}
.gradient-shadow {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    background: linear-gradient(to top, rgb(21 21 21 / 89%) 14%, rgb(0 0 0 / 71%) 42%, transparent 100%);
    pointer-events: none;

}
.bg-category{
    background-color: #D8D8D8 !important;
}
.dropdown-toggle-no-arrow::after {
    display: none !important;
}
.custom-shadow{
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}
.dropdown-toggle-custom::after{
    margin-left: 0.255em !important;
    margin-right: 0.255em !important;
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: middle;
    content: "";
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 1rem 1rem;
    border:0rem !important;
}
.card-size{
    min-width: 13rem;
    max-height: 13rem;
}
.height-image{
    height: 47vh;
}
.card-store-size{
    min-width: 14rem;
}
.border-custom{
    border-left: 1px solid black;
}
.bg-dropdown{
    background-color: #005aff !important;
}
.dropdown-item:focus, .dropdown-item:hover{
    background-color: #005aff !important;
}
.scrollContainer::-webkit-scrollbar {
    height: 6px; 
}

.scrollContainer::-webkit-scrollbar-thumb {
    background-color: white; 
    border-radius: 3px;
}

.scrollContainer::-webkit-scrollbar-thumb:hover {
    background-color: white;
}

.scrollContainer::-webkit-scrollbar-track {
    background: transparent;
}