/* 1. Container Flex Grid */
.tmcp-ul-wrap.tm-extra-product-options-radio {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    padding: 20px 0 !important;
    justify-content: center; /* Desktop par cards ko center karne ke liye */
}

/* 2. Card Design with Center Alignment & Padding */
.tmcp-ul-wrap .tmcp-field-wrap {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px;
    
    /* Padding aur Alignment */
    padding: 40px 25px !important; /* Zyada padding for a premium look */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Sab elements ko horizontally center karega */
    text-align: center !important;  /* Text ko center karega */
    
    background: #ffffff;
    cursor: pointer;
    position: relative;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-sizing: border-box;
}

/* 3. Top Selling Badge (Center Top) */
.top-selling-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%); /* Badge ko card ke exact center mein laane ke liye */
    background: #ed8936;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 15px;
    border-radius: 20px;
    white-space: nowrap;
    box-shadow: 0 4px 6px rgba(237, 137, 54, 0.2);
}

/* 4. Label (Title) */
.tc-label-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a202c;
    margin: 10px 0;
    display: block;
}

/* 5. Pricing Area (Centered) */
.card-pricing {
    display: flex;
    align-items: baseline;
    justify-content: center; /* Prices ko aapas mein center karne ke liye */
    gap: 10px;
    margin-top: 5px;
}

.reg-price {
    text-decoration: line-through;
    color: #a0aec0;
    font-size: 1rem;
}

.sale-price {
    color: #2d3748;
    font-size: 1.6rem;
    font-weight: 800;
}

/* 6. Save Badge (Centered Under Price) */
.discount-badge {
    display: inline-block;
    background: #48bb78;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 8px;
    margin-top: 15px;
}

/* 7. Hover & Active States */
.tmcp-ul-wrap .tmcp-field-wrap:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.tmcp-ul-wrap .tmcp-field-wrap.tc-active {
    border-color: #4c51bf !important;
    background-color: #f8faff !important;
    border-width: 2.5px;
    box-shadow: 0 10px 25px rgba(76, 81, 191, 0.15) !important;
}

/* Checkmark logic ko center se hata kar bottom right ya skip kar sakte hain */
.tc-active::after {
    content: '✓';
    position: absolute;
    bottom: 10px;
    right: 15px;
    color: #4c51bf;
    font-weight: bold;
}

/* Responsive Logic (Desktop: 3, Tablet: 2) */
@media (min-width: 992px) { .tmcp-ul-wrap .tmcp-field-wrap { flex: 0 0 calc(33.33% - 14px) !important; max-width: calc(33.33% - 14px) !important; } }
@media (min-width: 768px) and (max-width: 991px) { .tmcp-ul-wrap .tmcp-field-wrap { flex: 0 0 calc(50% - 10px) !important; max-width: calc(50% - 10px) !important; } }

/* Hide default radio input */
.tmcp-ul-wrap .tc-input-wrap { display: none !important; }