/* ####################################################
    :: Template Name: Essence - Fashion Ecommerce Template
    :: Author: Colorlib
    :: Author URL: https://colorlib.com
    :: Description: Essence is smart & elegant fashion e-commerce Template. It's suitable for all e-commerce business platform.
    :: Version: 1.0.0
    :: Created: April 27, 2018
    :: Last Updated: May 2, 2018
    #################################################### */

/* ---------------------------------------
    ##### - PLACE YOUR CUSTOM CSS HERE - #####
    --------------------------------------- */

.header_area .classy-navbar {
    height: 85px;
    padding: 5px 0 5px 0%;
}

.cat-icon {
    width: 120px; /* ضعف الحجم السابق */
    height: auto; /* يحافظ على نسبة العرض للطول */
    object-fit: contain;
    /* border-radius: 12px; زوايا ناعمة ومناسبة لشكل مستطيل */
    /* background-color: #fff; */
    padding: 10px;
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
    transition: transform 0.3s ease;
}

.cat-icon:hover {
    transform: scale(1.05);
}

.catagory-content a.form-for-a {
    display: block;
    /* margin-top: 15px; */
    font-weight: normal;
    font-size: 18px;
    color: #333;
    text-decoration: none;
}

.catagory-content a.form-for-a:hover {
    color: black;
}

.classy-nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: 0 15px;
}

.nav-brand {
    flex-shrink: 0;
    margin-inline-end: 15px;
}

.classy-menu {
    flex-grow: 1;
    flex-shrink: 1;
    overflow: visible !important;
    min-width: 0;
  width: auto;
}

.classynav > ul {
    display: flex;
    flex-wrap: wrap; /* ← بدل nowrap */
    gap: 15px;
    white-space: normal;
    justify-content: center;
    padding: 0;
    margin: 0;
}

.classynav > ul > li {
    flex-shrink: 0;
    list-style: none;
     max-width: 100%;
}

.header-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    margin-inline-start: 15px;
}

.header-meta .user-login-info img,
.header-meta .cart-area img {
    width: 24px;
    height: 24px;
}

.cart-area span {
    font-size: 12px;
    /*background: #000;*/
    color: #fff;
    border-radius: 50%;
    padding: 2px 6px;
    margin-inline-start: 4px;
    position: relative;
    top: -8px;
}

/* في حال الحاجة لتصغير اللوغو قليلاً عند الشاشات الصغيرة
    @media (max-width: 992px) {
        .nav-brand img {
            height: 70px;
        }

        .classynav > ul {
            gap: 10px;
        }
    } */

/* لعرض القائمة في الموبايل */
@media only screen and (max-width: 767px) {
    .classynav ul {
        display: block;
        flex-direction: column;
        padding: 0;
    }

    .classynav ul li {
        display: block;
        width: 100%;
    }

    .classynav ul li a {
        display: block;
        padding: 10px 20px;
        color: #333;
    }
}

.user-dropdown-menu form {
    margin: 0;
}

.dropdown-wrapper .arrow {
    font-size: 12px;
    margin-right: 5px;
}

.user-dropdown-menu .username {
    display: block;
    font-weight: bold;
    margin-bottom: 10px;
    color: #333;
}

.dropdown-logout {
    background: transparent;
    color: #fff; /* لون نص معتمد */
    border: 1px solid #212529;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    font-size: 14px;
    transition: all 0.3s ease-in-out;
}

/* .dropdown-logout:hover {
        background-color: #fff;
        color: #fff;
    } */

.user-login-info {
    position: relative;
    cursor: pointer;
}

.label-h2 {
    color: #3a1a91;
    margin-top: 0;
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    font-weight: normal;
}

.user-login-info-wrapper {
    position: relative;
}

.user-login-info-wrapper a {
    text-decoration: none;
    color: inherit;
}

.username-text {
    white-space: nowrap; /* مهم جداً لمنع انقسام الاسم إلى أكثر من سطر */
    font-weight: 500;
    font-size: 15px;
    color: #333;
}
.user-name-box {
    font-weight: 600;
    color: #007bff;
    padding: 5px 10px;
    border-radius: 6px;
    background-color: #f0f0f0;
    display: inline-block;
}

.user-login-info .user-toggle {
    display: flex;
    align-items: center;
    gap: 2px; /* يمكنك التعديل عليه حسب الحاجة */
}

.user-login-info .user-icon {
    width: 24px;
    height: 24px;
}

.user-login-info .username {
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

/* حجم الخط لكل placeholder */
input::placeholder,
textarea::placeholder {
    font-size: 12px;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    font-size: 12px;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
    font-size: 12px;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
    font-size: 12px;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    font-size: 12px;
}

/* حجم خط القيم داخل الحقول */
input,
textarea,
select {
    font-size: 12px;
}
.form-control {
    font-size: 15px !important;
}