/* استایل کارت ها */
 .card {
     border-radius: 10px;
     overflow: hidden;
     box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
     margin-bottom: 10px;
 }

 .card-header-a {
     background: #f8f8f8;
     border-bottom: none;
     padding: 18px;
     cursor: pointer;
 }

 .card-header {
     position: relative;
 }

 .accordion-arrow {
     position: absolute;
     left: 0;
     /* انتهای سمت چپ */
     top: 0;
     transform: translateY(-50%) rotate(0deg);
 }

 .accordion-button[aria-expanded="true"] .accordion-arrow {
     transform: translateY(-50%) rotate(90deg);
 }

 .card-body {
     background: #ffffff;
     padding: 4px;
 }

 /* دکمه داخل هدر (برای جهت فلش) */
 .accordion-button {
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
     text-align: right;
     padding: 0;
     background: transparent;
     border: none;
     outline: none;
 }

 .accordion-title {
     font-weight: 700;
     font-size: 0.9rem;
 }

 /* آیکون فلش (svg) */
 .accordion-arrow {
     width: 18px;
     height: 18px;
     transition: transform 0.25s ease;
     flex: 0 0 28px;
     margin-left: 10px;
 }

 /* وقتی collapse بسته است کلاس collapsed روی دکمه فعال است.
       ما حالت باز را هنگامی که aria-expanded="true" ست شده نشان می‌دهیم */
 .accordion-button[aria-expanded="true"] .accordion-arrow {
     transform: rotate(-90deg);
     /* جهت چرخش هنگام باز شدن */
 }

 .accordion-button[aria-expanded="false"] .accordion-arrow {
     transform: rotate(0deg);
     /* جهت پیش‌فرض هنگام بسته بودن */
 }

 /* استایل لیست رادیوها */
 .option-item {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 12px 10px;
     border-radius: 10px;
     background: #fff;
     margin-bottom: 10px;
     box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
 }

 /* قرارگیری رادیو در سمت چپ یا راست بسته به نیاز؛ با RTL، label سمت راست قرار می‌گیرد */
 .option-label {
     font-weight: 600;
 }

 /*-----------------*/

 .purchase-card {
     margin-bottom: 20px;
 }

 .purchase-radio {
     width: 100%;
     cursor: pointer;
 }

 .radio-input {
     display: none;
 }

 .card-content {
     border: 1px solid #eee;
     border-radius: 12px;
     padding: 16px;
     position: relative;
     background: #fff;
     transition: all .25s;
 }

 .radio-input:checked+.card-content {
     border-color: #2e395e;
   /*  box-shadow: 0 0 0 3px rgba(29, 43, 89, .2);*/
   background: #f8f8f8;
 }

 .badge-main {
     background: #0d226a;
     color: #fff;
     padding: 4px 12px;
     border-radius: 12px;
     font-size: 12px;
     display: inline-block;
     margin-bottom: 12px;
 }

 .seller-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .seller-title {
     font-weight: 600;
     font-size: 14px;
 }

 .seller-warranty {
     font-size: 12px;
     color: #555;
     display: flex;
     align-items: center;
     gap: 4;
   
 }

 .icon-shield {
     width: 18px;
     opacity: .7;
 }

 .price-decoration {
     display: flex;
     justify-content: space-between;
     align-items: start;
 }

 .price-box {
     margin: 0px 0;
 }

 .final-price {
     font-size: 13px;
     font-weight: bold;
     text-wrap-mode: nowrap;
 }

 .old-price {
     font-size: 13px;
     color: #999;
     text-decoration: line-through;
 }

 .add-btn {
     background: #0d226a !important;
     border-radius: 8px;
     padding: 10px;
 }

 /* رادیو واقعی مخفی می‌شود اما انتخاب‌پذیر است */
.radio-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* ردیف عنوان + دایره */
.seller-title-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* دایره رادیو */
.custom-radio-circle {
    width: 18px;
    height: 18px;
    border: 2px solid #777;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .25s;
}

/* دایره داخل آن که با انتخاب پر می‌شود */
.custom-radio-circle::after {
    content: "";
    width: 10px;
    height: 10px;
    background: transparent;
    border-radius: 50%;
    transition: .25s;
}

/* حالت فعال کارت */
.radio-input:checked ~ .card-content {
    border-color: #2e395e;
    background: #f8f8f8;
}

/* حالت فعال دایره */
.radio-input:checked ~ .card-content .custom-radio-circle {
    border-color: #2e395e;
}

.radio-input:checked ~ .card-content .custom-radio-circle::after {
    background: #2e395e;
}