/* Admin Styling */
.isphani-admin { max-width: 900px; }
.isphani-settings { background: #f8f9fb; padding: 20px; border-radius: 8px; border: 1px solid #ddd; margin-bottom: 20px; }
.grid { display: grid; grid-template-columns: 100px 120px; gap: 10px; margin-bottom: 15px; }
.slide-card { display: flex; gap: 15px; background: #fff; border: 1px solid #e2e2e2; padding: 12px; border-radius: 8px; margin-bottom: 12px; align-items: flex-start; }
.slide-card img.preview { width: 100px; height: 100px; object-fit: cover; border-radius: 6px; }
.slide-card .fields { display: flex; flex-direction: column; gap: 5px; flex-grow: 1; }
.slide-card .fields input { margin-bottom: 5px; }

/* Front-end Fixes */
.isphani-slider { position: relative; width: 100%; overflow: hidden; }
.swiper-slide { opacity: 1 !important; visibility: visible !important;  }
.isphani-slider.has-padding { padding: 40px 0px; }

.isphani-type-normal .slide-inner {
    margin-bottom: -10px;
}

/* --- Framed Arch Layout (Desktop Default) --- */

.isphani-framed .swiper-slide {
    background: #fff !important;
    border-radius: 200px 200px 20px 20px;
    border: 12px solid #ffffff;
    box-shadow: 0 15px 45px rgba(0,0,0,0.1);
    overflow: hidden;
    height: 550px; /* Fixed height for the Arch look */
    position: relative;
}

.isphani-framed .slide-inner {
    height: 100%;
    width: 100%;
    position: relative;
    display: block;
}

.isphani-framed picture, 
.isphani-framed img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Prevents image stretching */
    display: block !important;
}

/* --- Brand Overlay & Titles --- */

.slide-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 60px 15px 20px;
    background: linear-gradient(transparent, rgba(0,0,0,0.85));
    color: #fff;
    text-align: center;
    z-index: 10;
    pointer-events: none; /* Allows user to click the image link through the text */
}

.slide-overlay h3 { 
    margin: 0; 
    font-size: 24px; 
    text-transform: uppercase; 
    letter-spacing: 2px;
    font-family: serif; 
}

/* Navigation Arrows */
.swiper-button-next, .swiper-button-prev { 
    color: #000 !important; background: #fff !important; 
    width: 45px; height: 45px; border-radius: 50% !important; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); z-index: 100;
}

/* Fix for disabled buttons click-through */
.isphani-slider .swiper-button-next.swiper-button-disabled, 
.isphani-slider .swiper-button-prev.swiper-button-disabled {
    pointer-events: all !important;
    cursor: not-allowed !important;
    opacity: 0.3 !important;
}

.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
    content: 'prev';
    font-size: 20px;
}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
    content: 'next';
    font-size: 20px;
}

/* assets/slider.css */




/* mobile fix for narrow images in framed sliders */
@media (max-width: 768px) {
    /* 1. Ensure the link and inner container fill the whole slide width */
    .isphani-slider.isphani-framed .swiper-slide a,
    .isphani-slider.isphani-framed .slide-inner {
        width: 100% !important;
        display: block !important;
        height: 100%;
    }

    /* 2. Force the picture and image to fill the frame */
    .isphani-slider.isphani-framed picture,
    .isphani-slider.isphani-framed img {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        /* This is the magic line that fixes the empty space */
        object-fit: cover !important; 
        object-position: center center;
    }
    
    /* 3. Optional: Reduce the arch radius slightly so it looks better on small screens */
    .isphani-slider.isphani-framed .swiper-slide {
        border-radius: 120px 120px 20px 20px !important;
        border-width: 8px !important; /* Thinner border for mobile */
    }
}


/* Ensure overlay is always visible and on top */
.isphani-slider .slide-inner {
    position: relative;
    overflow: hidden;
}

.slide-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 40px 15px 20px;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: #fff;
    text-align: center;
    z-index: 10; /* Ensures it stays above the picture/img */
    pointer-events: none; /* Allows clicks to pass through to the slide link */
}

/* Specific mobile adjustment for titles */
@media (max-width: 768px) {
    .slide-overlay h3 {
        font-size: 18px !important;
        letter-spacing: 1px !important;
    }
}

/* --- NORMAL SLIDER TYPE --- */
.isphani-type-normal { height: auto !important; }
.isphani-type-normal .swiper-slide { height: auto !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; }
.isphani-type-normal img { width: 100% !important; height: auto !important; object-fit: contain !important; }


/* Navigation Arrows */
.swiper-button-next, .swiper-button-prev { color: #000 !important; background: #fff !important; width: 45px; height: 45px; border-radius: 50% !important; box-shadow: 0 4px 10px rgba(0,0,0,0.1); z-index: 100; }
.isphani-slider .swiper-button-next.swiper-button-disabled, .isphani-slider .swiper-button-prev.swiper-button-disabled { pointer-events: all !important; cursor: not-allowed !important; opacity: 0.3 !important; }
.swiper-button-next:after, .swiper-button-prev:after { font-size: 20px; }

/* Mobile Adjustments */
@media (max-width: 768px) {
    .isphani-type-framed .swiper-slide { height: 450px !important; border-radius: 120px 120px 20px 20px !important; }
    .isphani-type-shop .swiper-slide { height: 400px !important; }
    .slide-overlay h3 { font-size: 18px !important; }
}