/* =========================================
   HADATECH PSU CALCULATOR - MAIN STYLES
   Version: 4.5.1 (Full Layout Fixes)
   ========================================= */

/* --- 1. Global Styles --- */
.ht-psu-calculator-v2 {
    font-family: Yekan Bakh, sans-serif;
    direction: rtl;
    max-width: 1100px;
    margin: 20px auto;
    background: #f9faff;
    border-radius: 12px;
    border: 1px solid #e0e6f2;
    padding: 25px;
    box-shadow: 0 8px 25px rgba(13, 79, 159, 0.08);
}

.ht-psu-calculator-v2 * {
    box-sizing: border-box; /* جلوگیری از مشکلات سایز در قالب‌های جدید */
}

/* --- 2. Form Elements --- */
.ht-row {
    margin-bottom: 5px;
}

.ht-row label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: #333;
    font-size: 0.85em;
    text-align: right;
}

.ht-row select,
.ht-row input[type="number"] {
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #c7d8ff;
    box-sizing: border-box;
    font-size: 0.95rem;
    background: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* آیکون فلش سفارشی */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%230d4f9f' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 0.5rem center;
    padding-left: 2rem;
    text-align: center;
    text-align-last: center;
}

.ht-row input[type="number"] {
     background-image: none;
     padding-left: 10px;
}

.ht-row select:disabled {
    background-color: #f1f1f1;
    cursor: not-allowed;
}

/* --- 3. Box Layout --- */
.ht-box {
    border: 1px solid #d9e2f5;
    border-radius: 10px;
    padding: 20px;
    position: relative;
    margin-bottom: 15px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(13, 79, 159, 0.04);
}

.ht-box-title {
    position: absolute;
    top: -12px;
    right: 20px;
    background: #f9faff;
    padding: 0 10px;
    margin: 0;
    font-size: 0.95rem;
    color: #0d4f9f;
    font-weight: 700;
}

.ht-box-content {
    display: grid;
    gap: 15px;
}

/* --- 4. Main Grid System --- */
.ht-main-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr); 
    gap: 15px;
}

/* تنظیمات ستون‌های داخلی باکس‌ها */
.ht-grid-cols-1 { grid-template-columns: 1fr; }
.ht-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.ht-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.ht-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* --- 5. Grid Placement (چیدمان باکس‌ها) --- */
#ht-box-motherboard { grid-column: 1 / 4; }
#ht-box-cpu { grid-column: 4 / 11; }
#ht-box-gpu { grid-column: 1 / -1; }
#ht-box-ram { grid-column: 1 / 6; }
#ht-box-cooler { grid-column: 6 / 11; }
#ht-box-storage { grid-column: 1 / -1; } 
#ht-box-ports { grid-column: 1 / 6; }
#ht-box-peripherals { grid-column: 6 / 11; }
#ht-box-settings { grid-column: 1 / 5; }
#ht-box-result { grid-column: 5 / 11; }

/* --- 6. Special Styling for Settings Box (اصلاحیه جدید) --- */
#ht-box-settings {
    display: flex;
    flex-direction: column;
}

#ht-box-settings .ht-box-content {
    /* تبدیل به تک ستون و وسط‌چین کردن محتوا */
    grid-template-columns: 1fr !important;
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    gap: 25px; /* فاصله بیشتر بین فیلدها */
    padding: 10px 5px;
}

#ht-box-settings select {
    border-color: #a4c2f4;
    background-color: #fcfdff;
    height: 45px;
    font-weight: 500;
}

#ht-box-settings select:hover {
    border-color: #0d4f9f;
}

/* --- 7. Result Box & Load Bar Styling (اصلاحیه جدید) --- */
.ht-result-box {
    background: #e9f2ff;
    border-color: #cfe0ff;
    display: flex;
    flex-direction: column; /* چیدمان عمودی */
    gap: 20px;
    padding: 20px;
}

/* بخش اعداد بالا */
.ht-result-numbers {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 15px;
    width: 100%;
}

.ht-result-item {
    text-align: center;
    background: #fff;
    border: 1px solid #c7d8ff;
    border-radius: 8px;
    padding: 15px 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(13, 79, 159, 0.05);
}

.ht-result-item label {
    font-weight: 700;
    color: #444;
    font-size: 0.9rem;
    margin-bottom: 8px;
    display: block;
}

.ht-result-item .value {
    font-size: 1.8rem;
    font-weight: 800;
    color: #555;
    line-height: 1.2;
    direction: ltr;
}

.ht-result-item .value.recommended {
    color: #007bff;
    font-size: 2.2rem;
}

/* بخش نوار پایین (Load Bar) */
.ht-load-container {
    width: 100%;
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #c7d8ff;
    box-shadow: 0 2px 5px rgba(13, 79, 159, 0.05);
}

.ht-load-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 0.95rem;
    font-weight: 700;
    color: #333;
}

.ht-progress-track {
    width: 100%;
    height: 14px;
    background-color: #e9ecef;
    border-radius: 7px;
    overflow: hidden;
    position: relative;
}

.ht-progress-bar {
    height: 100%;
    width: 0%;
    background-color: #28a745;
    border-radius: 7px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
}

.ht-load-status-text {
    margin-top: 10px;
    font-size: 0.9rem;
    color: #555;
    text-align: center;
    font-weight: 500;
    min-height: 24px; /* جلوگیری از پرش ارتفاع */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* رنگ‌بندی نوار */
.ht-bar-optimal { background-color: #28a745 !important; box-shadow: 0 0 10px rgba(40, 167, 69, 0.4); }
.ht-bar-good { background-color: #17a2b8 !important; box-shadow: 0 0 10px rgba(23, 162, 184, 0.4); }
.ht-bar-warning { background-color: #ffc107 !important; box-shadow: 0 0 10px rgba(255, 193, 7, 0.4); }
.ht-bar-danger { background-color: #dc3545 !important; box-shadow: 0 0 10px rgba(220, 53, 69, 0.4); }

/* --- 8. Product Suggestions --- */
.ht-product-container {
    margin-top: 20px;
    padding: 15px;
    background: #fff;
    border: 1px solid #e0e6f2;
    border-radius: 12px;
    box-shadow: 0 8px 25px rgba(13, 79, 159, 0.08);
}
.ht-product-section-title {
    text-align: center;
    color: #0d4f9f;
    font-size: 1.2rem;
    margin: 0 0 15px 0;
    border-bottom: 2px solid #e9f2ff;
    padding-bottom: 10px;
}
.ht-products-list-multiple {
    display: flex;
    flex-wrap: wrap; 
    gap: 15px; 
    justify-content: center; 
    margin-top: 15px;
}
.ht-product-item-multiple {
    flex: 0 0 180px; 
    max-width: 180px;
    text-align: center;
}
.ht-product-item-multiple a {
    padding: 10px;
    border: 1px solid #c7d8ff;
    border-radius: 8px;
    height: 100%; 
    box-sizing: border-box;
    display: flex; 
    flex-direction: column;
    justify-content: space-between; 
    text-decoration: none;
    color: #333;
    transition: box-shadow 0.3s ease;
}
.ht-product-item-multiple a:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.ht-product-image-small {
    width: 100%;
    height: auto;
    max-width: 120px; 
    margin: 0 auto 8px auto;
    object-fit: contain;
}
.ht-product-title-small {
    font-size: 0.9rem; 
    font-weight: 600;
    margin: 0 0 5px 0;
    line-height: 1.3;
}
.ht-product-price-small {
    font-size: 1rem;
    font-weight: 700;
    color: #0d4f9f;
}
.ht-product-price-small del {
    margin-left: 8px;
    color: #999;
    font-size: 0.9em;
}

/* --- 9. Responsive Design --- */
@media (max-width: 900px) {
    .ht-main-grid {
        grid-template-columns: 1fr;
    }
    #ht-box-cpu, #ht-box-motherboard, #ht-box-gpu, #ht-box-ram,
    #ht-box-cooler, #ht-box-storage, #ht-box-ports, #ht-box-peripherals,
    #ht-box-settings, #ht-box-result {
        grid-column: 1 / -1;
    }
    .ht-grid-cols-2, .ht-grid-cols-3, .ht-grid-cols-4 {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}

@media (max-width: 600px) {
    .ht-result-numbers {
        flex-direction: column;
    }
    .ht-products-list-multiple {
        flex-direction: column;
        align-items: center;
    }
    .ht-product-item-multiple {
        flex: 0 0 90%;
        max-width: 90%;
    }
}

@media (max-width: 480px) {
    .ht-grid-cols-2, .ht-grid-cols-3, .ht-grid-cols-4 {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   FIX FOR WORDPRESS 6.9 & Auto-Injection
   ========================================= */
/* 1. Hide auto-injected tags that break CSS Grid */
.ht-main-grid > br,
.ht-main-grid > p {
    display: none !important;
    content: none !important;
}

/* 2. Ensure boxes don't overflow grid cells */
.ht-main-grid > .ht-box {
    min-width: 0; 
}