/* --- استایل‌های شما --- */

        /* استایل دکمه سرچ هدر */
        .search-header-container {
            display: none; /* پیش‌فرض مخفی */
            position: absolute;
            left: 45px; /* موقعیت فعلی */
            top: 32px; /* تنظیم ارتفاع */
            z-index: 10;
            cursor: pointer;
        }

        .search-header-container i {
            color: #666;
            font-weight: 400 !important; /* تاکید بر وزن فونت */
            font-size: 18px;
        }

        /* نمایش دکمه فقط در موبایل */
        @media (max-width: 768px) {
            .search-header-container {
                display: block; /* نمایش در موبایل */
            }
        }

        /* استایل‌های فرم جستجو */
        .search-overlay {
            display: none; /* پیش‌فرض مخفی */
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.95);
            z-index: 9999;
            justify-content: center;
            align-items: flex-start;
            padding-top: 13px;
            box-sizing: border-box;
        }

        .search-overlay.active {
            display: flex; /* نمایش در صورت فعال بودن */
        }

    .search-container {
    width: 100%;
    max-width: 100%;
    background-color: #fff;
    position: relative;
    padding: 1px 52px 0px 5px;
    box-sizing: border-box;
    border-bottom: solid 0px #eee;
        }

    .close-search {
    position: absolute;
    top: 6px;
    right: 7px;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    z-index: 1001;
    border: solid 1px #dddddd91;
    background: #ebeef3a8;
    padding: 9px 13px;
    border-radius: 10px;
        }
        .close-search i { /* استایل خود آیکن بستن */
             color: #656565;
             font-weight: 100;
        }

        .search-form {
            display: flex;
            align-items: center;
            background-color: #ffffff;
            padding: 5px 5px;
            border-radius: 50px;
            width: 100%;
            margin: 0 auto;
            position: relative; /* برای موقعیت‌دهی آیکون‌ها */
            z-index: 1000;
            border: solid 0px #ddd;
        }

        .search-input {
            flex-grow: 1;
            padding: 9px 15px 11px 40px; /* فضای داخلی ورودی */
            border: none;
            font-size: 12px;
            outline: none;
            background: #ebeef3a8;
            border-radius: 10px;
            direction: rtl;
            font-weight: 600;
            border: solid 1px #dddddd91;
            color:#666;
        }

        /* آیکون جستجوی اصلی در فرم */
        .search-button-icon {
       position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 18px;
      color: #656565;
      cursor: pointer;
      font-weight: 400;
      z-index: 1001;
           
        }

        /* --- آیکون جستجوی گوگل --- */
        .google-search-icon {
    position: absolute;
    left: 64px;
    top: 49%;
    transform: translateY(-50%);
    font-size: 20px;
   background-image: linear-gradient(177deg, #EA4335 24%, #FBBD07 32% 39%, #62af77 42%, #4285F4 77%);
    background-clip: text; /* اطمینان از اینکه گرادیانت فقط روی متن اعمال می‌شود */
    -webkit-background-clip: text; /* برای سازگاری با مرورگرهای وب‌کیت */
    -webkit-text-fill-color: transparent; /* برای شفاف کردن رنگ متن اصلی و نمایش گرادیانت */
    cursor: pointer;
    font-weight: 400;
    z-index: 1001;
    transition: color 0.3s ease; /* این transition ممکن است با گرادیانت نیاز به تنظیم داشته باشد یا حذف شود */
            
        }
        .google-search-icon:hover {
            color: #333; /* رنگ هنگام هاور */
        }

        /* --- جلوگیری از افکت هایلایت موبایل --- */
        .search-header-container,
        .search-header-container i,
        .close-search,
        .search-button-icon,
        .google-search-icon {
            -webkit-tap-highlight-color: transparent !important;
        }

        /* --- استایل‌های اضافی برای اطمینان از نمایش --- */
        body {
            margin: 0; /* حذف مارجین پیش‌فرض بادی */
            padding: 0;
            
        }
        header { /* نمونه هدر */
            background-color: #f8f8f8;
            padding: 10px 20px;
            border-bottom: 1px solid #eee;
            position: relative; /* برای موقعیت‌دهی عناصر داخلش */
        }
        .main-content {
            padding: 20px;
            min-height: 100vh; /* برای اطمینان از وجود صفحه */
        }
        .jodakon{
         position: absolute;
        left: 44px;
        top: 49%;
        transform: translateY(-50%);
        font-size: 30px;
         color: #cdcdcd;    
        }