/**
 * Frontend styles for the Pride Carousel block.
 */

/* Common styles for both layouts */
.pride-carousel-block {
    position: relative;
    width: 100%;
    max-width: 100vw;
    margin: 0 auto;
    overflow: hidden;
    /* Default padding/margin - will be overridden by inline styles when set */
    padding: 0 0;
    margin: 10px 0;
    border: none;
    overflow-x: hidden !important;
    -ms-overflow-style: none;
    scrollbar-width: none;
    
    /* Default CSS Variable values */
    --title-font-size: 24px;
    --title-color: rgb(255, 255, 255);
    --title-font-weight: 500;
    --title-line-height: 1;
    --description-font-size: 14.4px;
    --description-color: rgba(255, 255, 255, 0.6);
    --description-font-weight: 400;
    --description-line-height: 1;
    --style2-title-color: #000000;
    --style2-description-color: #3c4949;
    --hashtag-description-font-size: 14.4px;
    --hashtag-description-color: rgb(133, 139, 139);
    --hashtag-description-font-weight: 400;
    --hashtag-description-line-height: 15.84px;
    --btn1-text-color: #000000;
    --btn1-bg-color: #ffbc00;
    --btn1-border-color: #ffbc00;
    --btn1-border-width: 1px;
    --btn1-border-radius: 50px;
    --btn1-hover-text-color: #000000;
    --btn1-hover-bg-color: #ffbc00;
    --btn1-hover-border-color: #ffbc00;
    --space-between: 24px; 
    --icon-size: 20px;
    --icon-color: rgba(0, 0, 0, 0.5);
    --icon-space-between: 8px;
    --icon-vertical-alignment: center;
    --product-style-button-font-size: 17px;
    --product-style-button-font-weight: 400;
    --product-style-button-spacing: 12px;
    --style2-button-spacing: 12px;
    --slide-background-color: transparent;
    --global-palette-btn-bg: #ffbc00;
    --product-style-description-padding-style: "";
}

.pride-carousel-block .swiper-container {
    width: 100%;
    height: auto;
    /*padding: 0 24px;*/
    overflow: visible !important;
}

.pride-carousel-block .swiper-slide {
    cursor: grab;
    transition: all 0.5s ease;
    overflow: hidden;
    height: auto;
    display: flex;
    background-color: var(--slide-background-color);
}

.pride-carousel-block .swiper-slide:active {
    cursor: grabbing;
}

/* Make sure buttons and links inside slides don't inherit the grab cursor */
.pride-carousel-block .swiper-slide a,
.pride-carousel-block .swiper-slide button {
    cursor: pointer;
}

/* Old navigation - keep for existing styles */
.pride-carousel-block .carousel-navigation {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 12px;
    pointer-events: none;
    z-index: 20;
    opacity: 0; /* Hide arrows by default */
    transition: opacity 0.3s ease;
}

.pride-carousel-block .flickity-carousel:hover + .carousel-navigation,
.pride-carousel-block .flickity-carousel + .carousel-navigation:hover {
    opacity: 1; /* Show arrows on hover */
}

/* New navigation below slider - Simple horizontal line */
.pride-carousel-block .carousel-navigation-bottom {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px; /* Will be dynamically updated to match dots width */
    margin-top: 20px;
    margin-right: 20px;
    pointer-events: auto;
    position: relative;
}

/* Flickity Page Dots - Clean simple style */
.pride-carousel-block .flickity-page-dots {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -50px;
    width: auto;
    padding: 10px 15px;
    margin: 0;
    text-align: center;
    line-height: 1;
    background: #EDEDED;
    border-radius: 30px;
    box-shadow: none;
    display: inline-flex;
    display: none;
    align-items: center;
    gap: 8px;
}

.pride-carousel-block .flickity-page-dots .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin: 0;
    background: #d1d5db;
    border-radius: 50%;
    opacity: 1;
    cursor: pointer;
    transition: all 0.3s ease;
}

.pride-carousel-block .flickity-page-dots .dot.is-selected {
    background: #374151;
    transform: scale(1.3);
}

.pride-carousel-block .flickity-page-dots .dot:hover {
    background: #6b7280;
}

/* Navigation Arrow Buttons Styling - In line with dots */
.pride-carousel-block .carousel-navigation-bottom .flickity-prev-button,
.pride-carousel-block .carousel-navigation-bottom .flickity-next-button {
    width: 32px;
    height: 32px;
    background: #EDEDED;
    /* border: 1px solid #d1d5db; */
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: none;
    pointer-events: auto;
    position: static;
}

/* Remove positioning - use flexbox gap for spacing */
.pride-carousel-block .carousel-navigation-bottom .flickity-prev-button {
    margin: 0;
}

.pride-carousel-block .carousel-navigation-bottom .flickity-next-button {
    margin: 0;
}

.pride-carousel-block .carousel-navigation-bottom .flickity-prev-button:hover,
.pride-carousel-block .carousel-navigation-bottom .flickity-next-button:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.pride-carousel-block .carousel-navigation-bottom .flickity-prev-button svg,
.pride-carousel-block .carousel-navigation-bottom .flickity-next-button svg {
    width: 14px;
    height: 14px;
    color: #6b7280;
}

/* Make navigation buttons still visible and clickable */
.pride-carousel-block .flickity-prev-button,
.pride-carousel-block .flickity-next-button {
    width: 48px;
    height: 48px;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid #ffffff;
    border-radius: 50%;
    pointer-events: auto;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
}

.pride-carousel-block .flickity-prev-button:hover,
.pride-carousel-block .flickity-next-button:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

.pride-carousel-block .flickity-prev-button::after,
.pride-carousel-block .flickity-next-button::after {
    font-size: 18px;
    color: #ffffff;
}

.pride-carousel-block .carousel-navigation button svg {
    color: #FFFFFF;
}

.pride-carousel-block .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    font-weight: 500;
    transition: all 0.3s ease;
    text-decoration: none;
    position: relative;
    z-index: 2;
    font-family: inherit;
}

/* Style 1 (Default) Layout */
.pride-carousel-block.style-1 .swiper-container {
    height: 320px;
}

.pride-carousel-block.style-1 .swiper-slide {
    border-radius: 10px;
    cursor: pointer;
}

.pride-carousel-block.style-1 .slide-content {
    position: relative;
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
    max-width: 100%;
    display: block;
    text-decoration: none;
    color: inherit;
}

.pride-carousel-block.style-1 .slide-content img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
/*    position: absolute;
    top: 0;
    left: 0;*/
}

.pride-carousel-block.style-1 .gradient-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
    transition: opacity 0.3s ease;
    border-radius: 10px;
}

.pride-carousel-block.style-1 .slide-content:hover .gradient-overlay {
    opacity: 0.8;
}

.pride-carousel-block.style-1 .slide-text {
/*    position: relative;
    height: calc(100% - 2rem);
    max-height: 320px;*/
    padding: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #ffffff;
    z-index: 2;
    position: absolute;
    bottom: 0;
}

.pride-carousel-block.style-1 .slide-text-title {
    margin-bottom: 10px;
}

.pride-carousel-block.style-1 .slide-text-desc {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: var(--description-font-size);
    font-weight: var(--description-font-weight);
    line-height: var(--description-line-height);
    color: var(--description-color);
    font-family: inherit;
}

/* Hide button in Style 1 */
.pride-carousel-block.style-1 .slide-buttons {
    display: none;
}

/* Apply typography variables for Style 1 */
.pride-carousel-block.style-1 h2 {
    font-size: var(--title-font-size);
    font-weight: var(--title-font-weight);
    line-height: var(--title-line-height);
    color: var(--title-color);
    margin-bottom: 10px;
    font-family: inherit;
}

.pride-carousel-block.style-1 .slide-text-desc p {
    font-size: var(--description-font-size);
    font-weight: var(--description-font-weight);
    line-height: var(--description-line-height);
    color: var(--description-color);
    max-width: 32rem;
    margin-bottom: 0 !important;
    font-family: inherit;
}

/* Style 2 Layout - Free image dimensions */
.pride-carousel-block.style-2 .swiper-slide {
    border-radius: 0;
    overflow: visible;
}

.pride-carousel-block.style-2 .slide-style-2 {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--slide-background-color);
    overflow: hidden;
    height: 100%;
}

/* Image container with free dimensions */
.pride-carousel-block.style-2 .slide-image {
    width: 100%;
    overflow: hidden;
    margin-bottom: 0;
}

.pride-carousel-block.style-2 .slide-image img {
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.pride-carousel-block.style-2 .slide-content-wrapper {
    padding: 20px 4px;
    background-color: var(--slide-background-color);
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
}

/* Apply typography variables for Style 2 */
.pride-carousel-block.style-2 .slide-title {
    font-size: var(--title-font-size);
    font-weight: var(--title-font-weight);
    line-height: var(--title-line-height);
    color: var(--style2-title-color);
    margin-bottom: 0;
    font-family: inherit;
}

.pride-carousel-block.style-2 .slide-description {
    /*font-size: 17px;
    font-weight: 400;
    line-height: 20.4px;*/
    color: var(--style2-description-color);
    font-size: var(--description-font-size);
    font-weight: var(--description-font-weight);
    line-height: var(--description-line-height);
    margin-bottom: 0;
    font-family: inherit;
}

.pride-carousel-block.style-2 .slide-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: var(--style2-button-spacing);
}

/* Updated style 2 button styling as per requirements */
.pride-carousel-block.style-2 .button-one {
    color: var(--btn1-text-color);
    background-color: var(--btn1-bg-color);
    border: var(--btn1-border-width) solid var(--btn1-border-color);
    border-radius: var(--btn1-border-radius);
    font-family: inherit;
    font-size: 14.4px;
    font-weight: 400;
    line-height: 23.04px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.4em 1em;
    transition: all 0.3s ease;
}

.pride-carousel-block.style-2 .button-one:hover {
    background-color: var(--btn1-hover-bg-color);
    color: var(--btn1-hover-text-color);
    border-color: var(--btn1-hover-border-color);
    box-shadow: 0px 15px 25px -7px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.pride-carousel-block.style-2 .button-one .button-icon {
    display: inline-flex;
    align-items: center;
    top: -1px;
    position: relative;
}

.pride-carousel-block.style-2 .button-one .button-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

/* Make sure all slides in a row have the same height */
.pride-carousel-block.style-2 .swiper-slide {
    height: auto;
}

.pride-carousel-block.style-2 .swiper-slide-active,
.pride-carousel-block.style-2 .swiper-slide-next {
    height: auto;
}

/* Doctor Style 1 Layout - Similar to Product Style with text button and icon */
.pride-carousel-block.doctor-style-1 .swiper-slide {
    overflow: visible;
}

.pride-carousel-block.doctor-style-1 .slide-doctor-style-1 {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--slide-background-color);
    overflow: hidden;
    height: 100%;
}

/* Image container with free dimensions */
.pride-carousel-block.doctor-style-1 .slide-image {
    width: 100%;
    overflow: hidden;
    margin-bottom: 0;
}

.pride-carousel-block.doctor-style-1 .slide-image img {
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.pride-carousel-block.doctor-style-1 .slide-content-wrapper {
    padding: 20px 4px;
    background-color: var(--slide-background-color);
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
}

/* Typography for Doctor Style 1 - Using GeneralSans font family */
.pride-carousel-block.doctor-style-1 .slide-title {
    font-family: GeneralSans, sans-serif;
    font-size: var(--title-font-size);
    font-weight: var(--title-font-weight);
    line-height: var(--title-line-height);
    color: var(--style2-title-color);
    margin-bottom: 0;
}

.pride-carousel-block.doctor-style-1 .slide-hashtag-description {
    font-family: GeneralSans, sans-serif;
    margin-bottom: 0;
    font-size: var(--hashtag-description-font-size);
    font-weight: var(--hashtag-description-font-weight);
    line-height: var(--hashtag-description-line-height);
    color: var(--hashtag-description-color);
}

.pride-carousel-block.doctor-style-1 .slide-buttons {
    display: flex;
    margin-top: var(--product-style-button-spacing); /* Use same spacing as product style */
}

/* Doctor Style 1 button styling - specific styles different from Product Style */
.pride-carousel-block.doctor-style-1 .button-with-icon {
    display: inline-flex;
    align-items: center; 
    align-items: var(--icon-vertical-alignment); 
    font-size: 14.4px;  /* Fixed font size */
    font-weight: 500;   /* Fixed font weight */
    line-height: 21.6px; /* Fixed line height */
    padding: 0;
    color: rgb(0, 0, 0); /* Fixed color */
    background-color: transparent;
    border: none;
    text-decoration: none; /* No underline */
    transition: color 0.3s ease;
    gap: var(--icon-space-between); 
    font-family: GeneralSans, sans-serif; /* Keep GeneralSans for doctor style */
}

.pride-carousel-block.doctor-style-1 .button-with-icon:hover {
    color: var(--global-palette-btn-bg);
    box-shadow: none;
}

.pride-carousel-block.doctor-style-1 .button-with-icon .button-text {
    flex: 1;
    color: rgb(0, 0, 0); /* Fixed color, not using CSS variable */
    font-family: GeneralSans, sans-serif;
}

/* Icon styling for doctor style 1 - same as product style */
.pride-carousel-block.doctor-style-1 .button-icon {
    color: var(--icon-color);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pride-carousel-block.doctor-style-1 .button-icon svg {
    width: var(--icon-size);
    height: var(--icon-size);
    stroke: var(--icon-color);
}

/* Doctor Style 2 Layout - Similar to Style 2 with background button and two descriptions */
.pride-carousel-block.doctor-style-2 .swiper-slide {
    overflow: visible;
}

.pride-carousel-block.doctor-style-2 .slide-doctor-style-2 {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--slide-background-color);
    overflow: hidden;
    height: 100%;
}

/* Image container with free dimensions */
.pride-carousel-block.doctor-style-2 .slide-image {
    width: 100%;
    overflow: hidden;
    margin-bottom: 0;
}

.pride-carousel-block.doctor-style-2 .slide-image img {
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.pride-carousel-block.doctor-style-2 .slide-content-wrapper {
    padding: 20px 4px;
    background-color: var(--slide-background-color);
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
}

/* Typography for Doctor Style 2 - Using GeneralSans font family */
.pride-carousel-block.doctor-style-2 .slide-title {
    font-family: GeneralSans, sans-serif;
    font-size: var(--title-font-size);
    font-weight: var(--title-font-weight);
    line-height: var(--title-line-height);
    color: var(--style2-title-color);
    margin-bottom: 0;
}

.pride-carousel-block.doctor-style-2 .slide-hashtag-description {
    font-family: GeneralSans, sans-serif;
    font-size: var(--hashtag-description-font-size);
    font-weight: var(--hashtag-description-font-weight);
    line-height: var(--hashtag-description-line-height);
    color: var(--hashtag-description-color);
    margin-bottom: 0;
}

.pride-carousel-block.doctor-style-2 .slide-description {
    font-family: GeneralSans, sans-serif;
    /*font-size: 17px;
    font-weight: 400;
    line-height: 20.4px;
    color: rgb(60, 73, 73);*/
    font-size: var(--description-font-size);
    font-weight: var(--description-font-weight);
    line-height: var(--description-line-height);
    color: var(--style2-description-color);
    margin-bottom: 0;
}

.pride-carousel-block.doctor-style-2 .slide-buttons {
    display: flex;
    margin-top: var(--style3-button-spacing);
}

/* Doctor Style 2 button - with background and border like Style 2 */
.pride-carousel-block.doctor-style-2 .button-one {
    font-family: GeneralSans, sans-serif;
    font-size: 14.4px;
    font-weight: 400;
    line-height: 23.04px;
    color: var(--btn1-text-color);
    background-color: var(--btn1-bg-color);
    border: var(--btn1-border-width) solid var(--btn1-border-color);
    border-radius: var(--btn1-border-radius);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.4em 1em;
    transition: all 0.3s ease;
    text-decoration: none;
}

.pride-carousel-block.doctor-style-2 .button-one:hover {
    background-color: var(--btn1-hover-bg-color);
    color: var(--btn1-hover-text-color);
    border-color: var(--btn1-hover-border-color);
    box-shadow: 0px 15px 25px -7px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.pride-carousel-block.doctor-style-2 .button-one .button-icon {
    display: inline-flex;
    align-items: center;
    top: -1px;
    position: relative;
}

.pride-carousel-block.doctor-style-2 .button-one .button-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

/* Doctor Style 3 Layout - Simple card layout with optional designation and doctor name */
.pride-carousel-block.doctor-style-3 .swiper-slide {
    overflow: visible;
}

.pride-carousel-block.doctor-style-3 .slide-doctor-style-3 {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--slide-background-color);
    /* overflow: hidden; */
    padding: 10px;
    height: 100%;
    text-align: center;
}

/* Fixed height image container with centered content */
.pride-carousel-block.doctor-style-3 .slide-image {
    width: 100%;
    height: 300px; /* Fixed height for all images */
    overflow: hidden;
    margin-bottom: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 5px solid #FBFBFB;
    box-shadow: 4px 4px 15px 0 rgba(0, 0, 0, 0.25);
}

.pride-carousel-block.doctor-style-3 .slide-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover to maintain aspect ratio */
    object-position: center; /* Center the image content */
    display: block;
    border: 2px solid #e0e0e0; /* Add border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
    transition: box-shadow 0.3s ease; /* Smooth transition */
}

.pride-carousel-block.doctor-style-3 .slide-image img:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.35); /* Enhanced shadow on hover */
}

.pride-carousel-block.doctor-style-3 .slide-content-wrapper {
    padding: 0 8px;
    background-color: var(--slide-background-color);
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 4px;
    text-align: left;
}

/* Typography for Doctor Style 3 - Simple clean layout */
.pride-carousel-block.doctor-style-3 .slide-designation {
    font-family: inherit;
    font-size: var(--description-font-size);
    font-weight: var(--description-font-weight);
    line-height: var(--description-line-height);
    color: var(--style2-description-color);
    margin-bottom: 0.5rem;
    text-align: left;
}

.pride-carousel-block.doctor-style-3 .slide-doctor-name {
    font-family: inherit;
    font-size: var(--title-font-size);
    font-weight: var(--title-font-weight);
    line-height: var(--title-line-height);
    color: var(--style2-title-color);
    margin-top: 0;
    margin-bottom: 0;
    text-align: left;
}

/* Responsive adjustments for Doctor Style 3 */
@media (max-width: 768px) {
    .pride-carousel-block.doctor-style-3 .slide-image {
        height: 240px; /* Slightly smaller on mobile */
        margin-bottom: 0.9rem;
    }
    
    .pride-carousel-block.doctor-style-3 .slide-content-wrapper {
        padding: 0 4px;
        gap: 2px;
    }
}

/* ==========================================================================
   Doctor Style 4 Layout
   ========================================================================== */

.pride-carousel-block.doctor-style-4 .carousel-cell {
    overflow: visible;
}

.pride-carousel-block.doctor-style-4 .swiper-slide {
    overflow: visible;
}

.pride-carousel-block.doctor-style-4 .slide-doctor-style-4 {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--slide-background-color);
    text-align: left;
}

/* Category Section Cell - Dynamic width based on content */
.pride-carousel-block.doctor-style-4 .category-section-cell {
    width: auto;
    display: flex;
    flex-direction: column;
    background: transparent;
    border: none;
    padding: 0;
    flex-shrink: 0;
}

.pride-carousel-block.doctor-style-4 .category-section {
    width: auto;
    display: flex;
    flex-direction: column;
}

/* Category Header Section */
.pride-carousel-block.doctor-style-4 .category-header-section {
    width: auto;
    margin-bottom: 20px;
    text-align: left;
    white-space: nowrap;
}

.pride-carousel-block.doctor-style-4 .category-header-section .slide-category-header {
    font-family: inherit;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    color: #000;
    margin: 0 0 8px 0;
    padding: 0 0 8px 0;
    border-bottom: 2px solid #000;
    text-align: left;
    width: auto;
    display: block;
    white-space: nowrap;
}

/* Doctors Grid within Category */
.pride-carousel-block.doctor-style-4 .category-doctors-grid {
    display: flex;
    gap: 16px;
    flex-wrap: nowrap;
    padding-bottom: 10px;
    width: auto;
}

.pride-carousel-block.doctor-style-4 .doctor-card {
    flex: 0 0 auto;
    width: 225px;
    background: transparent;
}

.pride-carousel-block.doctor-style-4 .doctor-card .slide-doctor-style-4 {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--slide-background-color);
    text-align: left;
}

/* Remove old category header styles - no longer needed */

/* Image Styling - Portrait dimensions for doctor cards */
.pride-carousel-block.doctor-style-4 .doctor-card .slide-image {
    width: 100%;
    height: 280px;
    overflow: hidden;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: none;
    transition: all 0.3s ease;
}

.pride-carousel-block.doctor-style-4 .doctor-card .slide-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border: none;
    transition: transform 0.3s ease;
}

.pride-carousel-block.doctor-style-4 .doctor-card .slide-image:hover {
    box-shadow: none;
    transform: none;
}

.pride-carousel-block.doctor-style-4 .doctor-card .slide-image img:hover {
    transform: scale(1.02);
}

/* Content Wrapper for doctor cards */
.pride-carousel-block.doctor-style-4 .doctor-card .slide-content-wrapper {
    padding: 0 8px;
    background-color: var(--slide-background-color);
    display: flex;
    flex-direction: column;
    flex: 1;
    text-align: left;
    gap: 6px;
}

/* Doctor Name for doctor cards */
.pride-carousel-block.doctor-style-4 .doctor-card .slide-doctor-name {
    font-family: inherit;
    font-size: var(--title-font-size);
    font-weight: var(--title-font-weight);
    line-height: var(--title-line-height);
    color: var(--style2-title-color);
    margin: 0;
    text-align: left;
}

.pride-carousel-block.doctor-style-4 .doctor-card .doctor-name-link {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

.pride-carousel-block.doctor-style-4 .doctor-card .doctor-name-link:hover {
    color: #007cba;
}

.pride-carousel-block.doctor-style-4 .doctor-card .doctor-name-link:hover .slide-doctor-name {
    color: #007cba;
}

/* Specialty for doctor cards */
.pride-carousel-block.doctor-style-4 .doctor-card .slide-specialty {
    font-family: inherit;
    font-size: var(--description-font-size);
    font-weight: var(--description-font-weight);
    line-height: var(--description-line-height);
    color: #666666;
    margin: 0;
    text-align: left;
}

/* Mobile Styles for doctor cards */
@media (max-width: 768px) {
    .pride-carousel-block.doctor-style-4 .doctor-card .slide-image {
        height: 240px;
        margin-bottom: 12px;
    }
    
    .pride-carousel-block.doctor-style-4 .category-header-section .slide-category-header {
        font-size: 16px;
        padding-bottom: 6px;
    }
    
    .pride-carousel-block.doctor-style-4 .doctor-card .slide-content-wrapper {
        padding: 0 4px;
        gap: 4px;
    }
    
    .pride-carousel-block.doctor-style-4 .doctor-card {
        width: 180px;
    }
    
    .pride-carousel-block.doctor-style-4 .category-doctors-grid {
        gap: 12px;
    }
}

/* Image Carousel Layout - Only images with border radius */
.pride-carousel-block.image-carousel .swiper-slide {
    overflow: visible;
}

.pride-carousel-block.image-carousel .slide-image-carousel {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--slide-background-color);
    overflow: hidden;
    height: 100%;
}

/* Image container with customizable border radius */
.pride-carousel-block.image-carousel .slide-image {
    width: 100%;
    overflow: hidden;
    margin-bottom: 0;
}

.pride-carousel-block.image-carousel .slide-image img {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* Product Style Layout - Single button with icon and free image dimensions */
.pride-carousel-block.product-style .swiper-slide {
    overflow: visible;
}

.pride-carousel-block.product-style .slide-product-style {
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: var(--slide-background-color);
    overflow: hidden;
    height: 100%;
}

/* Image container with free dimensions */
.pride-carousel-block.product-style .slide-image {
    width: 100%;
    overflow: hidden;
    margin-bottom: 0;
}

.pride-carousel-block.product-style .slide-image img {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.pride-carousel-block.product-style .slide-content-wrapper {
    padding: 20px 4px;
    background-color: var(--slide-background-color);
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 10px;
}

/* Typography for Product Style */
.pride-carousel-block.product-style .slide-title {
    color: var(--style2-title-color);
    font-size: var(--title-font-size);
    font-weight: var(--title-font-weight);
    line-height: var(--title-line-height);
    margin-bottom: 0;
    font-family: inherit;
}

.pride-carousel-block.product-style .slide-description {
    /*font-size: 17px;
    font-weight: 400;
    line-height: 20.4px;*/
    color: var(--style2-description-color);
    font-size: var(--description-font-size);
    font-weight: var(--description-font-weight);
    line-height: var(--description-line-height);
    margin-bottom: 0;
    font-family: inherit;
}

.pride-carousel-block.product-style .slide-buttons {
    display: flex;
    margin-top: var(--product-style-button-spacing); /* Customizable spacing between description and button */
}

/* Button with icon - Product Style specific */
.pride-carousel-block.product-style .button-with-icon {
    display: inline-flex;
    align-items: center; /* This ensures vertical centering */
    align-items: var(--icon-vertical-alignment); 
    font-size: var(--product-style-button-font-size);
    font-weight: var(--product-style-button-font-weight);
    line-height: 20.4px;
    padding: 0;
    color: var(--btn1-text-color);
    background-color: transparent;
    border: none;
    text-decoration: underline;
    text-decoration-color: rgba(0,0,0,0.5);
    transition: color 0.3s ease;
    gap: var(--icon-space-between); /* Added gap as per requirements */
    font-family: inherit;
}

.pride-carousel-block.product-style .button-with-icon:hover {
    color: var(--global-palette-btn-bg);
    font-family: inherit;
    box-shadow: none;
}

.pride-carousel-block.product-style .button-with-icon .button-text {
    flex: 1;
    color: rgba(0, 0, 0, 0.5);
    font-family: inherit;
}

/* Icon styling for different types - Updated with SVG */
.pride-carousel-block.product-style .button-icon {
    color: var(--icon-color);
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pride-carousel-block.product-style .button-icon svg {
    width: var(--icon-size);
    height: var(--icon-size);
    stroke: currentColor;
}

/* For better accessibility, add screen reader text */
.pride-carousel-block.product-style .screen-reader-text,
.pride-carousel-block.doctor-style-1 .screen-reader-text,
.pride-carousel-block.doctor-style-2 .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Responsive styles */
@media (max-width: 768px) {
    /*.pride-carousel-block {
         Default padding/margin - will be overridden by inline styles when set 
        padding: 10px 15px;
    }*/
    .pride-carousel-block.style-1 .swiper-container {
        height: 185px;
    }

    .pride-carousel-block.style-1 h2 {
        font-size: calc(var(--title-font-size) * 0.85);
    }

    .pride-carousel-block.style-1 p {
        font-size: calc(var(--description-font-size) * 0.9);
    }

    .pride-carousel-block.style-1 .slide-text {
        height: calc(100% - 1.8rem);
        padding: 0.9rem;
    }
    
    .pride-carousel-block.style-2 .slide-title {
        font-size: calc(28px * 0.85);
    }
    
    .pride-carousel-block.style-2 .slide-description {
        font-size: calc(17px * 0.9);
    }
    
    .pride-carousel-block.doctor-style-1 .slide-title {
        font-size: calc(28px * 0.85);
    }
    
    .pride-carousel-block.doctor-style-1 .slide-description {
        font-size: calc(17px * 0.9);
    }
    
    .pride-carousel-block.doctor-style-2 .slide-title {
        font-size: calc(28px * 0.85);
    }
    
    .pride-carousel-block.doctor-style-2 .slide-hashtag-description {
        font-size: calc(var(--hashtag-description-font-size) * 0.9);
    }
    
    .pride-carousel-block.doctor-style-2 .slide-description {
        font-size: calc(17px * 0.9);
    }
    
    .pride-carousel-block.product-style .slide-title {
        font-size: calc(28px * 0.85);
    }
    
    .pride-carousel-block.product-style .slide-description {
        font-size: calc(17px * 0.9);
    }
    
    .pride-carousel-block.style-2 .button-one .button-icon,
    .pride-carousel-block.doctor-style-2 .button-one .button-icon {
        top: -1px;
    }

    .pride-carousel-block.style-2 .slide-content-wrapper, 
    .pride-carousel-block.product-style .slide-content-wrapper {
        padding: 15px 4px !important;
    }
}

/* Swiper specific styles */
.swiper {
  width: 100%;
  height: 100%;
  overflow: visible !important;
}

.swiper-wrapper {
  overflow: visible !important;
  transition-timing-function: linear !important;
  align-items: stretch;
}

.swiper-slide-active,
.swiper-slide-next {
  opacity: 1;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.pride-carousel-block::-webkit-scrollbar {
  display: none;
}