/* Add custom CSS styles below */ 
/* Add custom CSS styles below */ 
/* صندوق المحتوى المطور */
.popup-content {
    background: #fff;
    margin: 10% auto;
    padding: 1.5rem;
    border-radius: 20px;
    width: 100%;
    max-width: 340px; /* أصغر وأكثر تناسقاً */
    box-shadow: 0 15px 35px -5px rgba(0,0,0,0.1);
    position: relative;
    text-align: center;
    font-family: sans-serif;
}

.popup-image {
    width: 40%;
    height: 100px;
    object-fit: contain;
    margin-bottom: 1rem;
}

.close-btn {
    position: absolute;
    top: 12px;
    left: 15px;
    font-size: 20px;
    cursor: pointer;
    color: #ccc;
    transition: 0.3s;
}

.close-btn:hover { color: #666; }

/* دمج استايلات الصناديق لتقليل الكود */
.w-box {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px;
    margin: 6px 0;
    border-radius: 10px;
    font-size: 12px;
    border: 1px solid;
}

.w-start { background: #f0fdf4; color: #166534; border-color: #dcfce7; }
.w-end { background: #fef2f2; color: #991b1b; border-color: #fee2e2; font-weight: bold; }
.w-remain { background: #eff6ff; color: #1e40af; border-color: #dbeafe; font-weight: 800; justify-content: center; }

.trigger-warranty {
    cursor: pointer;
    background: #00919B;
    color: #fff;
    border: none;
    padding: 7px 20px; /* تقليل الارتفاع وزيادة العرض الجانبي */
    border-radius: 20px; /* حواف دائرية بالكامل لشكل أكثر جمالاً */
    font-size: 12px;
    font-weight: 600;
    margin-top: 12px;
    transition: 0.3s;
    display: inline-block; /* ليصبح حجمه على قدر النص فقط */
}

.trigger-warranty:hover { 
    background: #063a5d;
    transform: translateY(-1px); /* تأثير بسيط عند التمرير */
}
}

.trigger-warranty:hover { opacity: 0.9; }