/* =========================================================
   1. הגדרות כלליות
========================================================= */
.mdhm-plugin-wrapper {
    font-family: arial, helvetica, sans-serif;
    width: 100%;
    direction: rtl;
}

.mdhm-mobile-view { display: none; }

@media (max-width: 767px) {
    .mdhm-desktop-view { display: none !important; }
    .mdhm-mobile-view { display: block; }
}

/* =========================================================
   2. תצוגת מחשב (סליידר)
========================================================= */
.mdhm-desktop-view {
    position: relative;
    padding: 0; /* הורדנו את הפדינג כדי שהסליידר יתפרס על כל ה-1140px */
}

/* מוודא שהכרטיסיות לא נחתכות מלמטה */
.mdhm-desktop-view .swiper {
    padding-bottom: 25px; 
    overflow: hidden; 
}

.mdhm-desktop-card {
    background: rgb(255, 255, 255);
    border-radius: 35px 35px 0 0;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    transition: all 0.3s ease;
    /* הסרנו padding-bottom כי הוא עובר למטה */
}

/* מעטפת התמונה - גובה מדויק ופינות עגולות */
.mdhm-card-image {
    position: relative;
    width: 100%;
    height: 196px; /* התמונה כעת גבוהה כמו במקור */
    border-radius: 35px; /* כל 4 הפינות עגולות כמו במקור! */
    margin-bottom: 0; 
}

.mdhm-card-image .bg-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 35px; /* כל 4 הפינות עגולות */
    border: 1px solid rgb(189, 189, 189); /* המסגרת העדינה שהייתה בסליידר הישן */
    transition: opacity 0.3s ease;
}

/* עיגול האייקון */
.mdhm-card-icon-circle {
    position: absolute;
    bottom: -45px; 
    left: 50%;
    transform: translateX(-50%);
    width: 90px;  
    height: 90px; 
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none; /* הורדתי הצללה כדי שייראה שטוח כמו במקור */
    z-index: 2;
}

.mdhm-card-icon-circle img {
    position: absolute;
    width: 100%; 
    height: 100%;
    object-fit: contain;
    border-radius: 50%;
    transition: opacity 0.3s ease;
}

.mdhm-card-icon-circle .md-icon-h { opacity: 0; }
.mdhm-desktop-card:hover .md-icon-n { opacity: 0 !important; }
.mdhm-desktop-card:hover .md-icon-h { opacity: 1 !important; }

/* אזור הכותרת */
.mdhm-card-content {
    padding-top: 60px; /* מפנה מקום לעיגול הלבן */
    padding-bottom: 25px;
}

.mdhm-card-content h3 {
    margin: 0; 
    color: rgb(83, 83, 69);
    font-size: 24px; 
    font-family: "Secular One", sans-serif;
    font-weight: 400;
    text-align: center;
    transition: color 0.3s ease;
}

/* הובר במחשב */
.mdhm-desktop-card:hover h3 { color: #864B5D !important; }
.mdhm-desktop-card:hover .bg-cover { opacity: 0.35 !important; }

/* =========================================
   חיצי הסליידר במחשב (מחוץ לגבולות התמונות)
========================================= */
.mdhm-desktop-view .mdhm-next,
.mdhm-desktop-view .mdhm-prev {
    position: absolute;
    background-color: rgba(237, 237, 237, 0.9); 
    color: #888888; 
    border-radius: 50%;
    width: 40px; 
    height: 40px;
    top: 40%;
    margin-top: -20px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* מיקום שלילי שדוחף את החיצים מחוץ לרוחב ה-1140px */
.mdhm-desktop-view .mdhm-next { right: -50px; }
.mdhm-desktop-view .mdhm-prev { left: -50px; }

.mdhm-desktop-view .mdhm-next::after,
.mdhm-desktop-view .mdhm-prev::after {
    font-size: 16px;
    font-weight: bold;
}
/* =========================================================
   3. תצוגת מובייל (גריד כפתורים)
========================================================= */
.mdhm-mobile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    padding: 10px;
}

/* הכפתור עצמו (הגלולה) - מידות והצללה מדויקות מהמקור */
.mdhm-mobile-btn {
    border-radius: 15px; /* הרדיוס המקורי */
    padding: 0px 0px 0px 3px; /* מדויק לפי תמונה 46 */
    height: 50px; /* קיבוע גובה מדויק למקור */
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5) !important; /* ההצללה המקורית המדויקת! */
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: all 0.1s linear;
    overflow: hidden;
    background-color: rgb(255, 255, 255); /* צבע רקע בסיס - ללא שינוי */
}

/* מעטפת האייקון - גודל 50 וצמוד לימין */
.mdhm-btn-icon {
    position: relative;
    width: 50px; 
    height: 50px; 
    margin-left: 0; /* ביטול המרווח, האייקון יושב צמוד לימין כמו במקור */
    flex-shrink: 0;
}

.mdhm-btn-icon img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: opacity 0.1s linear;
}

/* מסתיר את אייקון ההובר במצב רגיל */
.mdhm-btn-icon .md-icon-h { opacity: 0; }

/* טקסט הכפתור */
.mdhm-mobile-btn h4 {
    margin: 0;
    font-size: 16px; 
    font-family: Assistant, sans-serif;
    font-weight: 600;
    flex-grow: 1; 
    text-align: right; /* ממרכז את הטקסט בשטח שנשאר ליד האייקון */
    transition: color 0.1s linear;
    color: rgb(83, 83, 69); /* צבע טקסט בסיס - ללא שינוי */
}

/* =========================================================
   אנימציות הובר (Hover / Active) למובייל
========================================================= */
.mdhm-mobile-btn:hover,
.mdhm-mobile-btn:active {
    background-color: #535345 !important;
}

.mdhm-mobile-btn:hover h4,
.mdhm-mobile-btn:active h4 {
    color: #ffffff !important;
}

/* קטגוריות ורודות במובייל (לפי URL) */
.mdhm-mobile-btn[href*="isha"]:hover,
.mdhm-mobile-btn[href*="woman"]:hover,
.mdhm-mobile-btn[href*="isha"]:active {
    background-color: #864B5D !important;
}

/* מעבר לאייקונים */
.mdhm-mobile-btn:hover .md-icon-n,
.mdhm-mobile-btn:active .md-icon-n {
    opacity: 0 !important;
}

.mdhm-mobile-btn:hover .md-icon-h,
.mdhm-mobile-btn:active .md-icon-h {
    opacity: 1 !important;
}