/* ------------------- پایه ------------------- */
body {
    background: url('/static/img/gold-bg.jpg') center/cover fixed;
    margin: 0;
    direction: rtl;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #fff;
}
body::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(8px);
    z-index: -1;
}

.product-wrapper {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* ------------------- استایل عمومی کارت‌ها ------------------- */
.glass-card {
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 215, 0, 0.3);
    padding: 25px;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.4s ease;
}
.glass-card:hover {
    border-color: rgba(255, 215, 0, 0.7);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.15);
}

/* ------------------- گالری ------------------- */
.gallery-card {
    display: flex;
    flex-direction: column;
}
.main-image-wrapper {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    height: 400px;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.6);
    background-color: rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}
.main-image-wrapper img {
    width: 100%; height: 100%; object-fit: contain; cursor: zoom-in;
    transition: opacity 0.3s ease;
}
.thumbs {
    margin-top: 15px; display: flex; gap: 12px; overflow-x: auto;
    padding-bottom: 5px;
}
.thumbs img {
    width: 80px; height: 80px; object-fit: cover; opacity: 0.5;
    border-radius: 12px; border: 2px solid transparent; cursor: pointer;
    transition: all 0.3s ease;
}
.thumbs img.active { opacity: 1; border-color: gold; box-shadow: 0 0 10px rgba(255,215,0,0.4); }
.thumbs img:hover { opacity: 0.9; transform: scale(1.05); }

/* ------------------- اطلاعات و پارامترها ------------------- */
.info-card {
    display: flex;
    flex-direction: column;
}
.info-card h1 {
    color: #fff;
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 26px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
    border-bottom: 1px solid rgba(255,215,0,0.2);
    padding-bottom: 15px;
}

.params-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.param-box {
    display: flex; align-items: center; gap: 12px;
    background: rgba(0, 0, 0, 0.25);
    padding: 14px 20px;
    border-radius: 15px;
    color: #fff; font-size: 17px;
    border: 1px solid rgba(255, 215, 0, 0.15);
    transition: all 0.3s ease;
}
.param-box:hover {
    background: rgba(255, 215, 0, 0.1);
    border-color: rgba(255, 215, 0, 0.5);
    transform: translateX(5px);
}

.highlight-price {
    background: rgba(255, 215, 0, 0.15);
    border: 1px solid rgba(255, 215, 0, 0.5);
    margin-top: 5px;
}
.highlight-price .text { color: gold; font-weight: bold; font-size: 22px;}
.highlight-price:hover { background: rgba(255, 215, 0, 0.25); }

/* ------------------- توضیحات ------------------- */
.desc-header {
    color: gold; margin-top: 0; margin-bottom: 15px;
    font-weight: bold; font-size: 20px;
    display: flex; align-items: center; gap: 10px;
}
.description-text {
    color: #eee; line-height: 1.8; font-size: 16px;
    text-align: justify; margin: 0;
    max-height: 250px; overflow-y: auto; padding-left: 10px;
}
/* اسکرول‌بار اختصاصی */
.description-text::-webkit-scrollbar { width: 6px; }
.description-text::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: 10px; }
.description-text::-webkit-scrollbar-thumb { background: rgba(255,215,0,0.5); border-radius: 10px; }
.description-text::-webkit-scrollbar-thumb:hover { background: gold; }

/* =====================================================
   مانیتور و تبلت‌های بزرگ (DESKTOP)
   ===================================================== */
@media (min-width: 769px) {
    .product-wrapper {
        display: grid;
        grid-template-columns: 55% 45%; /* ستون گالری کمی بزرگتر */
        grid-template-rows: min-content auto; /* جلوگیری از ایجاد فضای خالی اضافه */
        gap: 20px;
        align-items: start; /* چسبیدن کارت‌ها به بالا */
    }

    .gallery-card {
        grid-column: 1;
        grid-row: 1 / span 2; /* گالری کل ارتفاع ستون چپ را می‌گیرد */
    }

    .info-card {
        grid-column: 2;
        grid-row: 1;
    }

    .desc-card {
        grid-column: 2;
        grid-row: 2;
    }
}

/* =====================================================
   موبایل (MOBILE)
   ===================================================== */
@media (max-width: 768px) {
    body, html { overflow-x: hidden; }

    .product-wrapper {
        padding: 10px;
        margin-top: 10px;
        gap: 12px;
    }

    .glass-card {
        padding: 15px;
        border-radius: 15px;
    }

    .main-image-wrapper { height: 280px !important; border-radius: 12px; }
    .thumbs img { width: 65px; height: 65px; }

    .info-card h1 {
        font-size: 20px;
        line-height: 1.4;
        margin-bottom: 15px;
        padding-bottom: 10px;
    }

    /* شبکه شدن پارامترها در موبایل */
    .params-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .highlight-price {
        grid-column: 1 / span 2;
        justify-content: center;
        text-align: center;
    }

    .param-box {
        padding: 10px 12px;
        font-size: 14px;
        gap: 8px;
    }

    .highlight-price .text { font-size: 18px; }

    .desc-header { font-size: 17px; margin-bottom: 10px; }

    .description-text {
        font-size: 14px;
        line-height: 1.7;
        max-height: 180px;
    }
}