*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Vazirmatn,sans-serif;
}

body{
    background:#f4f4f4;
    direction:rtl;
}

.compare-section{
    width:90%;
    max-width:1200px;
    margin:30px auto;
    background:#fff;
    padding:20px;
    border-radius:12px;
    box-shadow:0 0 10px rgba(0,0,0,.08);
}

.compare-box{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:20px;
}

.compare-box button{
    padding:10px 15px;
    border:none;
    background:#ED1B24;
    color:#fff;
    border-radius:8px;
    cursor:pointer;
    font-weight:700;
    transition:.2s;
}

.compare-box button:hover{
    transform:translateY(-2px);
}

/* POPUP */
.popup{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.6);
    display:flex;
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.popup.hidden{
    display:none;
}

.popup-content{
    width:90%;
    max-width:700px;
    background:#fff;
    border-radius:12px;
    padding:20px;
}

.car-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
    gap:10px;
    margin-top:15px;
}

.car-card{
    border:1px solid #eee;
    border-radius:10px;
    padding:10px;
    text-align:center;
    cursor:pointer;
    transition:.2s;
    background:#fff;
}

.car-card:hover{
    border-color:#ED1B24;
    transform:translateY(-4px);
}

.car-card img{
    width:100%;
    height:80px;
    object-fit:contain;
}

/* result table */
#comparison-result table{
    width:100%;
    margin-top:20px;
    border-collapse:collapse;
}

#comparison-result th,
#comparison-result td{
    border:1px solid #ddd;
    padding:10px;
    text-align:center;
}

#comparison-result img{
    width:150px;
}




#comparison-result table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 12px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,.06);
}

/* سلول‌ها */
#comparison-result th,
#comparison-result td {
    padding: 10px 12px;
    text-align: center;
    font-size: 14px;
    border: 1px solid #eee;
}

/* هدر جدول */
#comparison-result th {
    background: #ED1B24;
    color: #fff;
    font-weight: 700;
}

/* ستون اول (اسم ویژگی‌ها) */
#comparison-result td:first-child {
    font-weight: 700;
    background: #f7f7f7;
    width: 220px;
}

/* ردیف‌های زوج */
#comparison-result tr:nth-child(even) td {
    background: #fafafa;
}

/* hover روی ردیف */
#comparison-result tr:hover td {
    background: #f1f1f1;
    transition: 0.2s ease;
}

/* عکس ماشین داخل جدول */
#comparison-result img {
    width: 140px;
    height: 95px;
    object-fit: cover;
    border-radius: 10px;
}

/* جداکننده بین بخش‌ها */
#comparison-result table + button {
    margin-top: 18px;
}

/* بهتر/بدتر (اگر بعداً استفاده کردی) */
.better {
    color: #16a34a;
    font-weight: 700;
}

.worse {
    color: #dc2626;
    font-weight: 700;
}


.accordion-btn {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;

    background: #fff;
    color: #222;
    border: 1px solid #eee;
    margin-top: 10px;
    padding: 14px 40px 14px 18px; /* 👈 فاصله برای فلش سمت راست */
    border-radius: 10px;

    font-weight: 700;
    cursor: pointer;
    transition: .3s;

    direction: rtl;
    position: relative;
}

/* متن */
.accordion-btn {
    text-align: right;
}

/* فلش سمت راست + فاصله درست */
.accordion-btn::after {
    content: "∨";
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    transition: 0.3s;
    color: #444;
}

/* وقتی باز شد */
.accordion-btn.active::after {
    content: ">";
}

/* hover */
.accordion-btn:hover {
    background: #f8f8f8;
}

/* 🔥 مهم: بسته */
.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

/* باز */
.accordion-content.active {
    max-height: 2000px;
}




.popup {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;

    /* ✨ انیمیشن بک‌گراند */
    animation: fadeBg .25s ease;
}

/* محتوای پاپ‌آپ */
.popup-content {
    width: 90%;
    max-width: 750px;
    background: #fff;
    border-radius: 16px;
    padding: 20px;

    /* ✨ انیمیشن ورود */
    transform: translateY(20px) scale(.95);
    opacity: 0;
    animation: popupIn .3s ease forwards;

    box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

/* انیمیشن‌ها */
@keyframes popupIn {
    to {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes fadeBg {
    from { background: rgba(0,0,0,0); }
    to { background: rgba(0,0,0,.6); }
}

/* GRID کارت‌ها حرفه‌ای‌تر */
.car-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 15px;
}

/* کارت ماشین */
.car-card {
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    transition: .25s ease;
    background: #fff;
}

/* hover بهتر */
.car-card:hover {
    transform: translateY(-6px) scale(1.03);
    border-color: #ED1B24;
    box-shadow: 0 10px 25px rgba(237,27,36,.15);
}

/* عکس بهتر */
.car-card img {
    width: 100%;
    height: 90px;
    object-fit: contain;
    transition: .3s;
}

.car-card:hover img {
    transform: scale(1.05);
}



.popup.hide .popup-content {
    animation: popupOut .25s ease forwards;
}

@keyframes popupOut {
    to {
        transform: translateY(20px) scale(.95);
        opacity: 0;
    }
}




.vazirmatn-uniquifier {
  font-family: "Vazirmatn", sans-serif;
  font-optical-sizing: auto;
  font-weight: weight;
  font-style: normal;
}





.compare-box{
    justify-content:center;
}

#btnCar1{
    width:70px;
    height:70px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    font-size:0;
}



#comparison-result{
    display:none;
}

#comparison-result.show{
    display:block;
}


.compare-section{
    width:auto;
    max-width:none;
    margin:40px auto;
    background:transparent;
    padding:0;
    box-shadow:none;
    text-align:center;
}

#comparison-result{
    display:none;
}

#comparison-result.show{
    display:block;
    margin-top:25px;
}

#btnCar1{
    width:75px;
    height:75px;
    border-radius:50%;
    border:none;
    background:#ED1B24;
    cursor:pointer;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:auto;

    transition:.25s;
}

#btnCar1:hover{
    transform:scale(1.08);
}




/* عکس ماشین داخل جدول + کارت‌ها یکدست */
#comparison-result img,
.car-card img {
    width: 170px;
    height: 110px;
    object-fit: contain;
    border-radius: 10px;
    transition: .3s;
}

/* hover کارت (اختیاری ولی بهتر) */
.car-card:hover img {
    transform: scale(1.05);
}


/* باکس ثابت برای همه عکس‌ها */
.car-card img,
#comparison-result img {
    width: 100%;
    max-width: 180px;
    height: 120px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
    border-radius: 10px;
}



.car-card,
#comparison-result td {
    min-width: 180px;
}