/* ==========================================================================
   1. Reset & Isolation (جلوگیری از تداخل با قالب وردپرس)
   ========================================================================== */
   .pf-library-container *, 
   .pf-single-wrapper *, 
   .pf-modal-overlay * {
       box-sizing: border-box !important;
   }
   
   .pf-library-container, 
   .pf-single-wrapper {
       max-width: 1200px;
       margin: 0 auto;
       font-family: inherit;
       line-height: 1.6;
       color: #334155;
   }
   
   .pf-library-container h3, 
   .pf-single-wrapper h1, 
   .pf-single-wrapper h2 {
       line-height: 1.5;
       margin-top: 0;
   }
   
   /* ==========================================================================
      2. Search Bar & Filters (نوار جستجو و فیلترها)
      ========================================================================== */
   .pf-filters-section {
       text-align: center;
       margin-bottom: 40px;
   }
   
   .pf-search-bar {
       position: relative;
       margin-bottom: 30px;
       max-width: 600px;
       margin-left: auto;
       margin-right: auto;
   }
   
   .pf-search-bar input {
       width: 100%;
       padding: 16px 50px 16px 20px;
       border: 2px solid #e2e8f0;
       border-radius: 50px;
       font-size: 16px;
       outline: none;
       transition: all 0.3s ease;
       box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
       background: #fff;
       color: #0f172a;
   }
   
   .pf-search-bar input:focus {
       border-color: #3b82f6;
       box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
   }
   
   .pf-search-icon {
       position: absolute;
       right: 20px;
       top: 50%;
       transform: translateY(-50%);
       color: #94a3b8;
       display: flex;
       pointer-events: none;
   }
   
   .pf-spinner {
       position: absolute;
       left: 20px;
       top: 50%;
       transform: translateY(-50%);
       border: 3px solid #f1f5f9;
       border-top: 3px solid #3b82f6;
       border-radius: 50%;
       width: 22px;
       height: 22px;
       animation: pf-spin 1s linear infinite;
   }
   @keyframes pf-spin { 0% { transform: translateY(-50%) rotate(0deg); } 100% { transform: translateY(-50%) rotate(360deg); } }
   
   .pf-style-filters {
       display: flex;
       flex-wrap: wrap;
       gap: 10px;
       justify-content: center;
   }
   
   .pf-style-btn {
       background: #f1f5f9;
       border: 1px solid transparent;
       padding: 8px 18px;
       border-radius: 20px;
       font-size: 13px;
       font-weight: 500;
       color: #475569;
       cursor: pointer;
       transition: all 0.2s ease;
   }
   
   .pf-style-btn:hover, 
   .pf-style-btn.active {
       background: #3b82f6;
       color: #fff;
       border-color: #2563eb;
       box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
   }
   
/* ==========================================================================
   3. Collection Cards & Dynamic Preview (نسخه ۶ تایی پریمیوم)
   ========================================================================== */
   .pf-collections-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); /* کارت‌ها کمی عریض‌تر شدند */
    gap: 35px;
}

.pf-collection-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
}

.pf-collection-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 48px -12px rgba(15, 23, 42, 0.15);
    border-color: #cbd5e1;
}

.pf-collection-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* گرید هوشمند ۳ در ۲ (۶ آیکون) */
.pf-preview-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    grid-template-rows: repeat(2, 1fr);
    gap: 12px; /* فضای تنفس بیشتر بین آیکون‌ها */
    background: #f8fafc; 
    padding: 24px; /* پدینگ داخلی بیشتر */
    border-bottom: 1px solid #f1f5f9; 
    aspect-ratio: 16/10; /* تناسب ابعاد سینمایی‌تر */
    align-content: center;
}

.pf-preview-item { 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 14px; 
    background: #ffffff;
    border-radius: 14px; /* گوشه‌های نرم‌تر */
    position: relative;
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    aspect-ratio: 1/1;
    transition: transform 0.3s ease;
}

.pf-collection-card:hover .pf-preview-item {
    transform: scale(1.04); /* زوم بسیار ملایم تمام آیکون‌ها در زمان هاور روی کارت */
}

.pf-preview-item svg { 
    width: 100%; 
    height: 100%; 
    max-width: 44px; /* آیکون‌ها بسیار درشت‌تر شدند (قبلا 32 بود) */
    max-height: 44px; 
    fill: #475569; 
    transition: fill 0.2s ease;
}

.pf-empty-preview {
    grid-column: 1 / -1;
    text-align: center;
    color: #94a3b8;
    font-size: 14px;
    font-weight: 500;
    align-self: center;
}

/* افکت روی آیکون ششم برای نمایش باقیمانده */
.pf-has-more::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.85); /* تیره‌تر برای کنتراست عالی با عدد سفید */
    border-radius: 14px;
    backdrop-filter: blur(4px);
}

.pf-more-overlay {
    position: absolute;
    z-index: 2;
    color: #ffffff;
    font-size: 20px; /* عدد باقیمانده درشت‌تر */
    font-weight: 800;
    letter-spacing: -1px;
}

.pf-collection-info {
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
}

.pf-collection-title {
    margin: 0;
    font-size: 18px; /* عنوان کالکشن درشت‌تر */
    font-weight: 800;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 15px;
}

.pf-collection-style {
    font-size: 12px;
    font-weight: 700;
    background: #f1f5f9;
    color: #3b82f6;
    padding: 6px 14px;
    border-radius: 8px;
    flex-shrink: 0;
}   
   /* ==========================================================================
      4. Single Collection Page (صفحه تکی کالکشن)
      ========================================================================== */
   .pf-single-wrapper {
       margin: 40px auto;
       padding: 0 20px;
   }
   
   .pf-collection-header {
       background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
       border: 1px solid #e2e8f0;
       border-radius: 24px;
       padding: 50px 30px;
       margin-bottom: 40px;
       text-align: center;
       box-shadow: inset 0 2px 4px rgba(255,255,255,0.5);
   }
   
   .pf-style-badge {
       background: #e0f2fe;
       color: #0284c7;
       padding: 8px 20px;
       border-radius: 50px;
       font-size: 13px;
       font-weight: 700;
       display: inline-block;
       margin-bottom: 20px;
   }
   
   .pf-collection-main-title {
       font-size: 36px;
       color: #0f172a;
       margin: 0 0 20px 0;
       font-weight: 900;
   }
   
   .pf-collection-description {
       color: #475569;
       font-size: 16px;
       max-width: 800px;
       margin: 0 auto 30px auto;
   }
   
   .pf-collection-meta {
       display: inline-flex;
       align-items: center;
       background: #ffffff;
       padding: 10px 24px;
       border-radius: 50px;
       border: 1px solid #cbd5e1;
       color: #475569;
       font-size: 14px;
       font-weight: 500;
       box-shadow: 0 4px 6px rgba(0,0,0,0.02);
   }
   
   .pf-collection-meta strong {
       color: #0f172a;
       margin-right: 5px;
   }
   
/* ==========================================================================
   5. Icons Grid (شبکه نمایش آیکون‌ها) - نسخه درشت‌تر و پریمیوم
   ========================================================================== */
   .pf-public-grid,
   .pf-single-icons-grid {
       display: grid;
       grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); /* کارت‌های بزرگتر و عریض‌تر */
       gap: 25px; /* فضای تنفس بیشتر بین کارت‌ها */
   }
   
   .pf-icon-item {
       background: #ffffff;
       border: 1px solid #e2e8f0;
       border-radius: 20px; /* گوشه‌های کاملا گرد و مدرن */
       padding: 35px 20px; /* فاصله داخلی بیشتر برای نمایش لوکس‌تر */
       display: flex;
       flex-direction: column;
       align-items: center;
       position: relative;
       overflow: hidden;
       /* انیمیشن فنری و فوق‌العاده نرم */
       transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
       box-shadow: 0 4px 6px rgba(0,0,0,0.02);
   }
   
   .pf-icon-item:hover {
       transform: translateY(-8px);
       box-shadow: 0 20px 40px -8px rgba(59, 130, 246, 0.12); /* سایه آبی ملایم و زنده */
       border-color: #bfdbfe;
   }
   
   .pf-icon-svg-wrapper {
       width: 86px; /* آیکون‌های بسیار درشت‌تر */
       height: 86px;
       margin-bottom: 20px;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: transform 0.3s ease;
   }
   
   .pf-icon-item:hover .pf-icon-svg-wrapper {
       transform: scale(1.12); /* زوم ملایم و شیک آیکون در زمان هاور */
   }
   
   .pf-icon-svg-wrapper svg {
       max-width: 100%;
       max-height: 100%;
       transition: fill 0.2s, stroke 0.2s;
   }
   
   .pf-icon-name {
       font-size: 14px; /* فونت نام آیکون درشت‌تر و خواناتر */
       font-weight: 600;
       color: #334155;
       text-align: center;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       width: 100%;
       margin: 0;
       letter-spacing: -0.3px;
   }
   
   .pf-icon-overlay {
       position: absolute;
       top: 0; left: 0; right: 0; bottom: 0;
       background: rgba(255, 255, 255, 0.82);
       display: flex;
       align-items: center;
       justify-content: center;
       opacity: 0;
       transition: opacity 0.3s ease;
       backdrop-filter: blur(6px); /* افکت گلس‌مورفیسم قوی‌تر */
   }
   
   .pf-icon-item:hover .pf-icon-overlay {
       opacity: 1;
   }
   
   .pf-action-btn {
       background: #0f172a; /* رنگ تیره و لوکس برای دکمه */
       color: white;
       border: none;
       padding: 12px 22px;
       border-radius: 50px; /* دکمه کپسولی شکل */
       font-size: 13px;
       cursor: pointer;
       font-weight: 700;
       transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
       display: flex;
       align-items: center;
       gap: 8px;
       box-shadow: 0 10px 20px rgba(15, 23, 42, 0.2);
   }
   
   .pf-action-btn:hover { 
       background: #3b82f6; 
       transform: scale(1.05) translateY(-2px);
       box-shadow: 0 15px 25px rgba(59, 130, 246, 0.3);
   }
   
   /* استایل آپدیت شده دکمه افزودن به سبد (+) روی کارت آیکون */
   .pf-add-to-collection {
       position: absolute;
       top: 15px; 
       right: 15px;
       background: #ffffff;
       border: 1px solid #e2e8f0;
       color: #64748b;
       width: 36px; 
       height: 36px;
       border-radius: 50%; /* دکمه کاملا گرد */
       display: flex; 
       align-items: center; 
       justify-content: center;
       cursor: pointer; 
       opacity: 0; 
       transition: all 0.3s ease;
       z-index: 5; 
       font-size: 18px; 
       font-weight: 400;
       box-shadow: 0 4px 6px rgba(0,0,0,0.05);
   }
   
   .pf-icon-item:hover .pf-add-to-collection { 
       opacity: 1; 
   }
   
   .pf-add-to-collection:hover {
       background: #f1f5f9;
       color: #0f172a;
       transform: scale(1.1);
   }
   
   .pf-add-to-collection.in-cart {
       background: #10b981; 
       color: #fff; 
       border-color: #10b981; 
       opacity: 1;
       box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
   }   
   /* ==========================================================================
      6. Editor Modal (پنجره ویرایشگر و دانلود)
      ========================================================================== */
   .pf-modal-overlay {
       position: fixed; 
       top: 0; left: 0; right: 0; bottom: 0;
       background: rgba(15, 23, 42, 0.7); 
       backdrop-filter: blur(8px);
       z-index: 999999; 
       display: none; 
       align-items: center; 
       justify-content: center;
       opacity: 0; 
       transition: opacity 0.3s ease;
   }
   
   .pf-modal-overlay.pf-show { 
       display: flex; 
       opacity: 1; 
   }
   
   .pf-modal-box {
       background: #fff; 
       width: 90%; 
       max-width: 850px; 
       border-radius: 24px;
       box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
       position: relative; 
       overflow: hidden; 
       transform: scale(0.95); 
       transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }
   
   .pf-modal-overlay.pf-show .pf-modal-box { 
       transform: scale(1); 
   }
   
   .pf-modal-close {
       position: absolute; 
       top: 20px; 
       right: 20px; 
       background: #f1f5f9; 
       border: none;
       width: 44px; 
       height: 44px; 
       border-radius: 50%; 
       display: flex; 
       align-items: center; 
       justify-content: center;
       cursor: pointer; 
       color: #64748b; 
       transition: all 0.2s; 
       z-index: 10;
   }
   
   .pf-modal-close:hover { 
       background: #fee2e2; 
       color: #ef4444; 
   }
   
   .pf-modal-layout { 
       display: flex; 
       flex-direction: row; 
       min-height: 450px; 
   }
   
   .pf-modal-preview-area {
       flex: 1; 
       background: #f8fafc; 
       display: flex; 
       align-items: center; 
       justify-content: center;
       border-left: 1px solid #e2e8f0; 
       padding: 40px;
       background-image: radial-gradient(#cbd5e1 1px, transparent 1px); 
       background-size: 24px 24px;
   }
   
   .pf-preview-canvas {
       background: #fff;
       padding: 40px;
       border-radius: 16px;
       box-shadow: 0 10px 25px rgba(0,0,0,0.05);
   }
   
   .pf-preview-canvas svg { 
       transition: all 0.2s; 
       width: 128px; 
       height: 128px; 
       display: block;
   }
   
   .pf-modal-sidebar { 
       width: 340px; 
       padding: 40px 30px; 
       display: flex; 
       flex-direction: column; 
       background: #ffffff;
   }
   
   .pf-modal-icon-title { 
       font-size: 22px; 
       font-weight: 800; 
       color: #0f172a; 
       margin: 0 0 30px 0; 
       border-bottom: 2px solid #f1f5f9; 
       padding-bottom: 15px;
       word-break: break-all;
   }
   
   .pf-control-group { 
       margin-bottom: 25px; 
   }
   
   .pf-control-group label { 
       display: block; 
       font-size: 13px; 
       font-weight: 700; 
       color: #475569; 
       margin-bottom: 10px; 
   }
   
   .pf-control-group input[type="number"] { 
       width: 100%; 
       padding: 14px 15px; 
       border: 2px solid #e2e8f0; 
       border-radius: 12px; 
       font-size: 16px; 
       outline: none; 
       background: #f8fafc;
       transition: border-color 0.2s;
   }
   
   .pf-control-group input[type="number"]:focus { 
       border-color: #3b82f6; 
       background: #fff;
   }
   
   .pf-color-wrapper { 
       display: flex; 
       align-items: center; 
       gap: 15px; 
       background: #f8fafc; 
       padding: 12px; 
       border-radius: 12px; 
       border: 2px solid #e2e8f0; 
   }
   
   .pf-color-wrapper input[type="color"] { 
       width: 40px; 
       height: 40px; 
       border: none; 
       border-radius: 8px; 
       cursor: pointer; 
       background: transparent; 
       padding: 0; 
   }
   
   .pf-color-wrapper input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
   .pf-color-wrapper input[type="color"]::-webkit-color-swatch { border: none; border-radius: 8px; }
   
   .pf-color-hex { 
       font-family: monospace; 
       font-size: 16px; 
       color: #475569; 
       font-weight: bold; 
       text-transform: uppercase; 
   }
   
   .pf-btn-download {
       width: 100%; 
       background: #10b981; 
       color: white; 
       border: none; 
       padding: 16px;
       border-radius: 14px; 
       font-size: 16px; 
       font-weight: 800; 
       cursor: pointer; 
       display: flex; 
       align-items: center; 
       justify-content: center; 
       gap: 10px; 
       transition: background 0.2s, transform 0.2s; 
       margin-top: auto;
       box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
   }
   
   .pf-btn-download:hover { 
       background: #059669; 
       transform: translateY(-2px);
       box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
   }
   
   .pf-download-hint { 
       text-align: center; 
       font-size: 12px; 
       color: #94a3b8; 
       margin-top: 15px; 
       font-weight: 500;
   }
   
   /* حالت مهمان (لاگین نشده) */
   .pf-login-prompt { 
       text-align: center; 
       margin-top: 30px; 
   }
   
   .pf-login-prompt h4 { 
       font-size: 20px; 
       color: #0f172a; 
       margin: 20px 0 10px 0; 
       font-weight: 800;
   }
   
   .pf-login-prompt p { 
       font-size: 14px; 
       color: #64748b; 
       line-height: 1.6; 
       margin-bottom: 30px; 
   }
   
   .pf-btn-login { 
       display: inline-flex;
       align-items: center;
       justify-content: center;
       background: #3b82f6; 
       color: #fff !important; 
       text-decoration: none; 
       padding: 14px 28px; 
       border-radius: 50px; 
       font-weight: 700; 
       transition: background 0.2s, transform 0.2s; 
       box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
   }
   
   .pf-btn-login:hover { 
       background: #2563eb; 
       transform: translateY(-2px);
   }
   
   /* ریسپانسیو (موبایل و تبلت) */
   @media (max-width: 768px) {
       .pf-modal-layout { flex-direction: column; }
       .pf-modal-sidebar { width: 100%; border-top: 1px solid #e2e8f0; }
       .pf-modal-preview-area { padding: 40px 20px; min-height: 250px; }
       .pf-collection-header { padding: 30px 20px; }
       .pf-collection-main-title { font-size: 28px; }
       .pf-preview-grid { grid-template-columns: repeat(3, 1fr); }
   }
   .pf-btn-reset-color {
    background: transparent;
    border: none;
    color: #ef4444;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
    padding: 0;
    text-decoration: underline;
    display: flex;
    align-items: center;
}
.pf-btn-reset-color:hover {
    color: #b91c1c;
}
/* ==========================================================================
   7. Dynamic Colors Grid (پالت چندرنگ)
   ========================================================================== */
   .pf-dynamic-colors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    gap: 10px;
    background: #f8fafc;
    padding: 15px;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    max-height: 150px;
    overflow-y: auto;
}
.pf-color-picker-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.pf-color-picker-item input[type="color"] {
    width: 32px; height: 32px;
    border: none; border-radius: 8px;
    cursor: pointer; padding: 0;
    background: transparent;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.pf-color-picker-item input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.pf-color-picker-item input[type="color"]::-webkit-color-swatch { border: none; border-radius: 8px; }

/* ==========================================================================
   8. Download Buttons Grid (دکمه‌های PNG و SVG)
   ========================================================================== */
.pf-download-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: auto;
}
.pf-btn-png { background: #3b82f6 !important; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important; }
.pf-btn-png:hover { background: #2563eb !important; }

/* ==========================================================================
   9. User Collection / Cart Widget (ویجت سبد کالکشن)
   ========================================================================== */
.pf-cart-widget {
    position: fixed;
    bottom: 20px;
    left: 20px;
    width: 300px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    z-index: 9999;
    overflow: hidden;
    font-family: inherit;
    border: 1px solid #e2e8f0;
    transition: transform 0.3s ease;
}
.pf-cart-header {
    background: #0f172a;
    color: #fff;
    padding: 15px 20px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.pf-cart-badge {
    background: #ef4444;
    color: #fff;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 12px;
}
.pf-cart-body { padding: 15px; background: #f8fafc; }
.pf-cart-items-list {
    max-height: 200px;
    overflow-y: auto;
    margin-bottom: 15px;
}
.pf-cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 8px;
    font-size: 12px;
}
.pf-cart-remove { color: #ef4444; cursor: pointer; font-weight: bold; border:none; background:transparent;}
.pf-btn-zip {
    width: 100%; padding: 12px;
    background: #8b5cf6; color: #fff;
    border: none; border-radius: 8px;
    font-weight: 700; cursor: pointer;
}
.pf-btn-zip:hover { background: #7c3aed; }

/* دکمه افزودن به سبد روی کارت‌های آیکون */
.pf-add-to-collection {
    position: absolute;
    top: 10px; right: 10px;
    background: rgba(255,255,255,0.9);
    border: 1px solid #e2e8f0;
    color: #475569;
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; opacity: 0; transition: all 0.2s;
    z-index: 5; font-size: 16px; font-weight: bold;
}
.pf-icon-item:hover .pf-add-to-collection { opacity: 1; }
.pf-add-to-collection.in-cart {
    background: #10b981; color: #fff; border-color: #10b981; opacity: 1;
}

/* ==========================================================================
   10. PixIcon Landing Page (لندینگ پیج اختصاصی)
   ========================================================================== */
   .pf-pixicon-landing {
    font-family: inherit;
    background-color: #f8fafc;
    min-height: 100vh;
}

.pf-hero-section {
    position: relative;
    padding: 100px 20px 80px;
    background: #0f172a;
    color: #fff;
    text-align: center;
    overflow: hidden;
    border-bottom: 1px solid #1e293b;
}

.pf-hero-content {
    position: relative;
    z-index: 10;
    max-width: 900px;
    margin: 0 auto;
}

.pf-hero-badge {
    display: inline-block;
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 25px;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.pf-hero-title {
    font-size: 48px;
    font-weight: 900;
    margin: 0 0 25px 0;
    color: #f8fafc;
    letter-spacing: -1px;
}

.pf-hero-subtitle {
    font-size: 18px;
    color: #94a3b8;
    line-height: 1.8;
    margin-bottom: 50px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.pf-hero-subtitle strong { color: #fff; }

.pf-advanced-search-wrapper {
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(12px);
    padding: 30px;
    border-radius: 24px;
    border: 1px solid #334155;
    box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
}

.pf-search-tabs {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

.pf-search-tab {
    background: transparent;
    color: #94a3b8;
    border: none;
    font-size: 15px;
    font-weight: 700;
    padding: 10px 20px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.3s;
}

.pf-search-tab.active {
    color: #fff;
    border-bottom-color: #3b82f6;
}

.pf-search-box-inner { position: relative; margin-bottom: 25px; }

.pf-hero-search-input {
    width: 100%;
    padding: 20px 25px;
    border-radius: 16px;
    border: 2px solid #334155;
    background: #0f172a;
    color: #fff;
    font-size: 18px;
    outline: none;
    transition: all 0.3s;
}

.pf-hero-search-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

.pf-hero-search-input::placeholder { color: #64748b; }

.pf-hero-filters .pf-style-btn {
    background: #1e293b;
    color: #cbd5e1;
    border-color: #334155;
}

.pf-hero-filters .pf-style-btn:hover,
.pf-hero-filters .pf-style-btn.active {
    background: #3b82f6;
    color: #fff;
    border-color: #3b82f6;
}

/* افکت‌های پس‌زمینه */
.pf-hero-bg-shapes {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    overflow: hidden; z-index: 1; pointer-events: none;
}

.pf-shape {
    position: absolute;
    filter: blur(100px);
    opacity: 0.5;
    border-radius: 50%;
}

.pf-shape-1 {
    top: -100px; right: -100px;
    width: 400px; height: 400px;
    background: #3b82f6;
}

.pf-shape-2 {
    bottom: -150px; left: -50px;
    width: 500px; height: 500px;
    background: #8b5cf6;
}

.pf-results-section {
    max-width: 1300px;
    margin: 0 auto;
    padding: 60px 20px;
}

.pf-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 20px;
}

.pf-results-header h2 {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
}

.pf-results-meta {
    font-size: 14px;
    color: #64748b;
    font-weight: 600;
    background: #fff;
    padding: 8px 16px;
    border-radius: 50px;
    border: 1px solid #e2e8f0;
}

@media (max-width: 768px) {
    .pf-hero-title { font-size: 32px; }
    .pf-search-tabs { flex-direction: column; gap: 5px; }
    .pf-hero-search-input { font-size: 15px; }
}
/* استایل تیترهای جستجوی یکپارچه در لندینگ پیج */
.pf-unified-section {
    margin-bottom: 60px;
}
.pf-unified-title {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 2px solid #e2e8f0;
    display: inline-block;
}
.pf-btn-dev {
    background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1;
    border-radius: 8px; padding: 8px; font-size: 11px; font-weight: bold; cursor: pointer;
    transition: all 0.2s;
}
.pf-btn-dev:hover { background: #0f172a; color: #fff; border-color: #0f172a; }
/* ==========================================================================
   11. Style Guide Dictionary (راهنمای استایل‌ها)
   ========================================================================== */
   .pf-style-guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 20px;
}

.pf-style-guide-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 25px 15px;
    text-align: center;
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.pf-sg-icon {
    width: 48px;
    height: 48px;
    background: #f8fafc;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    color: #64748b;
    transition: all 0.3s ease;
}

.pf-sg-title {
    color: #0f172a;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

.pf-style-guide-card:hover {
    transform: translateY(-8px);
    border-color: #3b82f6;
    box-shadow: 0 15px 30px -10px rgba(59, 130, 246, 0.25);
}

.pf-style-guide-card:hover .pf-sg-icon {
    background: #eff6ff;
    color: #2563eb;
    transform: scale(1.1) rotate(5deg);
}

.pf-style-guide-card:hover .pf-sg-title {
    color: #2563eb;
}

/* افکت هاور برای دکمه لود مور */
#pf-load-more-btn:hover {
    background: #2563eb !important;
    transform: translateY(-3px);
}
/* ==========================================================================
   12. Breadcrumbs (مسیر راهنما برای سئو)
   ========================================================================== */
   .pf-breadcrumb {
    background: #ffffff;
    padding: 15px 25px;
    border-radius: 16px;
    font-size: 13px;
    color: #64748b;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
    overflow-x: auto;
    white-space: nowrap;
}

.pf-breadcrumb a {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 700;
    transition: color 0.2s;
}

.pf-breadcrumb a:hover {
    color: #2563eb;
}

.pf-breadcrumb .pf-separator {
    color: #cbd5e1;
    font-size: 12px;
}

.pf-breadcrumb .pf-current {
    color: #0f172a;
    font-weight: 800;
}