/*
 * Plugin Name: Medad Circular Cards
 * File: style.css
 */

.circular-slider {
    position: relative;
    width: 500px;
    height: 500px;
    margin: 50px auto;
}

.card {
    position: absolute;
    width: 160px;
    height: 100px;
    background: #fff; /* لون خلفية البطاقة */
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: top 0.5s ease-in-out, left 0.5s ease-in-out;
}

.circular-slider .card:hover {
    transform: scale(1.2);
    z-index: 100;
}

.card-inner {
    transform: none !important;
    transform-origin: center center;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    direction: rtl;
    text-align: center;
}

/* التحكم في عنوان البطاقة */
.card-inner h3 {
    font-family: 'Cairo', sans-serif; /* نوع الخط */
    font-size: 16px;                 /* حجم الخط */
    color: #444;                     /* لون الخط */
    margin: 0 0 5px 0;
    line-height: 1.2;
}

/* التحكم في وصف البطاقة */
.card-inner p {
    font-family: 'Tajawal', sans-serif; /* نوع الخط */
    font-size: 12px;                  /* حجم الخط */
    color: #777;                      /* لون الخط */
    margin: 0;
    line-height: 1.5;
}

.circle-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    z-index: 200;
}
.circle-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.card.status-active {
    background-color: #e0f7e9;
    border-left: 5px solid #2ecc71;
}
.card.status-inactive {
    background-color: #f9eaea;
    border-left: 5px solid #e74c3c;
    opacity: 0.6;
}
.card.status-soon {
    background-color: #fff8e1;
    border-left: 5px solid #f1c40f;
}
.card.status-highlight {
    background-color: #e8f0fe;
    border-left: 5px solid #2980b9;
    box-shadow: 0 0 10px rgba(41,128,185,0.4);
}