/* Custom Mobile Teacher Card Carousel Styles */
@media (max-width: 768px) {
    /* Hide desktop teacher slider on mobile */
    .teachers .teacher-slider {
        display: none !important;
    }
    
    /* Show mobile teacher cards container on mobile */
    .teacher-cards-container.mobile-only {
        display: block !important;
    }
    
    .teacher-cards-container {
        position: relative;
        width: 100%;
        height: 650px; /* Increased to match taller cards */
        margin: 0 auto;
        overflow: visible; /* Changed to visible to prevent cutting off elements */
        padding: 40px 0;
        padding-bottom: 80px; /* More bottom padding for pagination */
        border: none; /* Ensure no border */
        touch-action: pan-y !important; /* Allow vertical scrolling */
    }
    
    .teacher-cards-container * {
        touch-action: pan-y !important;
    }
    
    /* Swiper Container Styling */
    .myTeacherSwiper {
        width: 100%;
        height: 100%;
        padding: 50px 0;
        border: none; /* Remove any border */
        outline: none; /* Remove any outline */
        touch-action: pan-y !important; /* Allow vertical scrolling */
    }

    .myTeacherSwiper .swiper-slide {
        width: 280px;
        height: 480px;
        transition: all 0.5s;
        opacity: 0.5;
        transform: scale(0.85) translateZ(-50px);
        /* Prevent text from being visible through cards */
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        /* Improve rendering on mobile devices */
        -webkit-perspective: 1000;
        perspective: 1000;
        border-radius: 24px;
    }
    
    .myTeacherSwiper .swiper-slide-active {
        opacity: 1;
        transform: scale(1) translateZ(0);
        z-index: 2; /* Increased z-index */
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    }
    
    .myTeacherSwiper .swiper-slide-prev, 
    .myTeacherSwiper .swiper-slide-next {
        opacity: 0.8; /* Increased from 0.7 for better visibility */
        transform: scale(0.9) translateZ(-30px);
        z-index: 1;
    }
    
    /* Ensure non-active slides stack properly behind */
    .myTeacherSwiper .swiper-slide:not(.swiper-slide-active):not(.swiper-slide-prev):not(.swiper-slide-next) {
        opacity: 0.4;
        z-index: 0;
    }
    
    /* Hide text on inactive cards completely */
    .myTeacherSwiper .swiper-slide:not(.swiper-slide-active) .teacher-info-section {
        opacity: 0;
    }
    
    /* Only show the header portion of inactive cards */
    .myTeacherSwiper .swiper-slide:not(.swiper-slide-active) .teacher-card-header {
        opacity: 1;
    }
    
    /* Teacher Card Styling */
    .teacher-card-container {
        width: 100%;
        height: 100%;
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        width: 280px;
        height: 600px; /* Significantly increased height for multi-row tags */
        display: flex;
        flex-direction: column;
        background: white;
        margin: 0 auto;
    }
    
    .teacher-card-header {
        position: relative;
        background-color: #f0f0ff;
        padding: 30px 20px;
        border-radius: 20px 20px 0 0;
        height: 230px;
        /* Ensure solid background */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
    
    /* Status Badge */
    .teacher-status {
        position: absolute;
        top: 10px;
        right: 10px;
        background-color: #4cd964;
        color: white;
        font-size: 12px;
        font-weight: 500;
        padding: 6px 12px;
        border-radius: 20px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        z-index: 2;
    }
    
    .status-orange {
        background-color: #ff9500 !important;
    }
    
    /* Avatar/Photo Container */
    .teacher-avatar-container {
        position: relative;
        width: 160px;
        height: 160px;
        margin: 20px auto;
        overflow: visible;
        cursor: pointer;
        z-index: 2;
    }
    
    /* Avatar Image - circular */
    .teacher-avatar {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 1;
        transition: all 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
        border-radius: 50%;
        border: 4px solid white;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
        background-color: white;
    }
    
    /* Real Photo (initially hidden) - square with rounded corners */
    .teacher-photo {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: all 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
        border-radius: 16px;
        border: 4px solid white;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
        background-color: white;
        transform: scale(0.95);
    }
    
    /* Class to show photo instead of avatar */
    .show-photo .teacher-avatar {
        opacity: 0;
        transform: scale(0.95);
    }
    
    .show-photo .teacher-photo {
        opacity: 1;
        transform: scale(1);
    }
    
    /* Teacher Info Section */
    .teacher-info-section {
        flex: 1;
        padding: 20px;
        padding-bottom: 40px; /* Increased padding at bottom */
        text-align: center;
    }
    
    .teacher-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px;
    }
    
    .teacher-name {
        font-size: 1.5rem;
        margin-bottom: 0;
        color: #333;
    }
    
    .teacher-rating,
    .teacher-title,
    .teacher-location,
    .teacher-languages {
        font-size: 0.9rem;
        color: #666;
        margin: 2px 0;
    }
    
    /* Tags Container */
    .teacher-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        justify-content: center;
        margin-top: 15px;
        margin-bottom: 10px; /* Additional margin at bottom */
    }
    
    /* Tags Styling */
    .teacher-tags .tag {
        padding: 4px 12px;
        border-radius: 30px;
        font-size: 0.8rem;
        color: white;
        background-color: #666;
    }
    
    .tag-green {
        background-color: #4cd964 !important;
    }
    
    .tag-blue {
        background-color: #007aff !important;
    }
    
    .tag-purple {
        background-color: #5856d6 !important;
    }
    
    .tag-pink {
        background-color: #ff2d55 !important;
    }
    
    .tag-orange {
        background-color: #ff9500 !important;
    }
    
    /* Swiper Pagination */
    .teacher-cards-container .swiper-pagination {
        position: absolute;
        bottom: -10px;
        width: 100%;
        text-align: center;
        margin-bottom: 20px;
        left: 0;
        right: 0;
        z-index: 50;
    }
    
    .teacher-cards-container .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        background-color: #ccc;
        margin: 0 5px;
    }
    
    .teacher-cards-container .swiper-pagination-bullet-active {
        background-color: #4cd964;
    }

    /* Navigation buttons */
    .teacher-cards-container .swiper-button-prev,
    .teacher-cards-container .swiper-button-next {
        color: #4cd964;
        --swiper-navigation-size: 30px;
    }
}

/* Hide mobile teacher cards on desktop */
.teacher-cards-container.mobile-only {
    display: none;
}