/**
 * Profile cards – overrides using semantic profile-* classes
 * Use this file to style profile listings (home, search, brides, etc.)
 * without editing the main theme CSS. Original product-* classes remain for layout.
 */

/* -------------------------------------------------------------------------
   Profile list & card containers
   ------------------------------------------------------------------------- */
.profiles-list .profile-layout .profile-item-container {
    /* Add profile-specific overrides here, e.g. border, shadow */
}

.profiles-list .profile-thumb {
    /* Profile card image/thumb area */
}

.profile-image-container {
    /* Profile photo container – e.g. border-radius, aspect-ratio */
}

/* -------------------------------------------------------------------------
   Profile labels (e.g. "New")
   ------------------------------------------------------------------------- */
.label-profile.label-sale {
    /* "New" badge – theme uses .label-sale; override colour if needed */
    /* background-color: #198754; */
}

/* -------------------------------------------------------------------------
   Profile meta: Ref. ID, location
   ------------------------------------------------------------------------- */
.profile-ref a {
    /* Ref. ID link style */
    color: #888;
}

.profile-ref a:hover {
    color: #f93355;
}

.profile-location,
.profile-location .price-new {
    /* Location text (e.g. "Bangalore, India") */
    color: #666;
}

/* -------------------------------------------------------------------------
   Buttons: Send Interest & View Profile
   ------------------------------------------------------------------------- */
.btn-send-interest,
.addToCart.btn-send-interest {
    /* Send Interest button – uses theme red by default */
}

.btn-send-interest:hover,
.addToCart.btn-send-interest:hover {
    background-color: #f93355;
    border-color: #f93355;
    color: #fff;
}

.btn-view-profile,
.addToCart.btn-view-profile {
    /* View Profile button */
}

.btn-view-profile:hover,
.addToCart.btn-view-profile:hover {
    background-color: #f93355;
    border-color: #f93355;
    color: #fff;
}

/* -------------------------------------------------------------------------
   Optional: data-profile-id (for JS or future use)
   ------------------------------------------------------------------------- */
[data-profile-id] {
    /* Hook for profile ID, e.g. [data-profile-id="228"] */
}

/* -------------------------------------------------------------------------
   Recent Profiles (home) – same layout as index - sample.php
   Horizontal row, 205x205 images (reference uses Fu_21a-205x205.jpg)
   High specificity to override theme red.css
   ------------------------------------------------------------------------- */
/* Hide prev/next arrows only in Recent Profiles section */
.layout-4.common-home #content .deal-layout4 .so-extraslider .owl2-controls .owl2-nav .owl2-prev,
.layout-4.common-home #content .deal-layout4 .so-extraslider .owl2-controls .owl2-nav .owl2-next {
    display: none !important;
}

.layout-4.common-home #content .deal-layout4 #recent-profiles-dynamic {
    display: flex !important;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: flex-start;
}

.layout-4.common-home #content .deal-layout4 #recent-profiles-dynamic .item.product-layout {
    width: calc(25% - 12px) !important;
    min-width: 0;
    display: block;
    flex: 0 0 auto;
}

.layout-4.common-home #content .deal-layout4 #recent-profiles-dynamic .product-item-container .left-block,
.layout-4.common-home #content .deal-layout4 #recent-profiles-dynamic .product-image-container,
.layout-4.common-home #content .deal-layout4 #recent-profiles-dynamic .product-image-container .image {
    height: 205px !important;
    max-height: 205px !important;
    overflow: hidden;
    display: block;
}

.layout-4.common-home #content .deal-layout4 #recent-profiles-dynamic .product-image-container .image a {
    display: block;
    height: 100%;
}

.layout-4.common-home #content .deal-layout4 #recent-profiles-dynamic .product-item-container .left-block img,
.layout-4.common-home #content .deal-layout4 #recent-profiles-dynamic .recent-profile-img {
    width: 100% !important;
    height: 205px !important;
    max-height: 205px !important;
    object-fit: cover !important;
    display: block !important;
}

/* Prevent image blink on hover: disable theme overlay (a:before) and smooth transitions */
.layout-4.common-home #content .deal-layout4 #recent-profiles-dynamic .product-image-container a:before {
    display: none !important;
}

/* If a profile DOES NOT have a second image (it lacks .second_img class),
   ensure the main image stays visible on hover and doesn't fade out. */
.layout-4.common-home #content .image:not(.second_img) .recent-profile-img,
.layout-4.common-home #content .product-item-container:hover .image:not(.second_img) .recent-profile-img {
    opacity: 1 !important;
}

.layout-4.common-home
    #content
    .deal-layout4
    #recent-profiles-dynamic
    .product-item-container
    .left-block
    .product-image-container
    a,
.layout-4.common-home #content .deal-layout4 #recent-profiles-dynamic .product-item-container .left-block img {
    transition: none !important;
}

@media (max-width: 1199px) {
    .layout-4.common-home #content .deal-layout4 #recent-profiles-dynamic .item.product-layout {
        width: calc(33.333% - 10px) !important;
    }
}

@media (max-width: 767px) {
    .layout-4.common-home #content .deal-layout4 #recent-profiles-dynamic .item.product-layout {
        width: calc(50% - 8px) !important;
    }
}

@media (max-width: 480px) {
    .layout-4.common-home #content .deal-layout4 #recent-profiles-dynamic .item.product-layout {
        width: 100% !important;
    }
}

/* -------------------------------------------------------------------------
   Brides & Grooms – more room below title (prevent hover border/button overlapping title)
   ------------------------------------------------------------------------- */
.layout-4.common-home #content .extra-layout4 .head-title {
    /* margin-bottom: 50px !important; */
}

/* -------------------------------------------------------------------------
   Brides section – prevent title overlap (theme uses margin: -60px 0 on .so-extraslider)
   ------------------------------------------------------------------------- */
#so_extra_slider_brides,
#so_extra_slider_grooms {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
}

/* -------------------------------------------------------------------------
   Brides & Grooms – left/right arrows: center of profiles area, 50px margin from sides
   ------------------------------------------------------------------------- */
#so_extra_slider_brides .owl2-controls .owl2-nav .owl2-next,
#so_extra_slider_grooms .owl2-controls .owl2-nav .owl2-next {
    right: -60px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-top: 0 !important;
}

#so_extra_slider_brides .owl2-controls .owl2-nav .owl2-prev,
#so_extra_slider_grooms .owl2-controls .owl2-nav .owl2-prev {
    left: -60px !important;
    right: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-top: 0 !important;
}

/* Brides & Grooms arrows: red by default, black on hover */
#so_extra_slider_brides .owl2-controls .owl2-nav .owl2-prev,
#so_extra_slider_brides .owl2-controls .owl2-nav .owl2-next,
#so_extra_slider_grooms .owl2-controls .owl2-nav .owl2-prev,
#so_extra_slider_grooms .owl2-controls .owl2-nav .owl2-next {
    background-color: #ff0000 !important;
    border-color: #ff0000 !important;
    color: #fff !important;
}
#so_extra_slider_brides .owl2-controls .owl2-nav .owl2-prev:hover,
#so_extra_slider_brides .owl2-controls .owl2-nav .owl2-next:hover,
#so_extra_slider_grooms .owl2-controls .owl2-nav .owl2-prev:hover,
#so_extra_slider_grooms .owl2-controls .owl2-nav .owl2-next:hover {
    background-color: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
}

/* -------------------------------------------------------------------------
   Search by Profession – owl2-prev/owl2-next: red by default, black on hover
   ------------------------------------------------------------------------- */
#so_categories_7986469111772285079 .owl2-controls .owl2-nav .owl2-prev,
#so_categories_7986469111772285079 .owl2-controls .owl2-nav .owl2-next {
    background-color: #ff0000 !important;
    border-color: #ff0000 !important;
    color: #fff !important;
    opacity: 1 !important;
}
#so_categories_7986469111772285079 .owl2-controls .owl2-nav .owl2-prev:hover,
#so_categories_7986469111772285079 .owl2-controls .owl2-nav .owl2-next:hover {
    background-color: #000 !important;
    border-color: #000 !important;
    color: #fff !important;
    opacity: 1 !important;
}

/* -------------------------------------------------------------------------
   Brides & Grooms section – same horizontal layout (5 items per row handled by Owl)
   ------------------------------------------------------------------------- */
#so_extra_slider_brides_inner,
#so_extra_slider_grooms_inner {
    overflow: hidden;
    position: relative;
}

/* Brides – image visibility height */
#so_extra_slider_brides_inner .product-item-container .left-block,
#so_extra_slider_brides_inner .product-image-container {
    height: 250px !important;
    max-height: 250px !important;
    overflow: hidden !important;
    display: block;
}

#so_extra_slider_brides_inner .product-image-container a {
    display: block !important;
    height: 100% !important;
}

#so_extra_slider_brides_inner .product-item-container .left-block img,
#so_extra_slider_brides_inner .product-image-container img {
    width: 100% !important;
    height: 250px !important;
    max-height: 250px !important;
    object-fit: cover !important;
    display: block !important;
}

#so_extra_slider_brides_inner .product-image-container a:before {
    display: none !important;
}

#so_extra_slider_brides_inner .product-item-container .left-block img {
    transition: none !important;
}

/* -------------------------------------------------------------------------
   Grooms section – same container size, image size and design as Brides
   ------------------------------------------------------------------------- */
#so_extra_slider_grooms_inner .product-item-container .left-block,
#so_extra_slider_grooms_inner .product-image-container {
    height: 250px !important;
    max-height: 250px !important;
    overflow: hidden !important;
    display: block;
}

#so_extra_slider_grooms_inner .product-image-container a {
    display: block !important;
    height: 100% !important;
}

#so_extra_slider_grooms_inner .product-item-container .left-block img,
#so_extra_slider_grooms_inner .product-image-container img {
    width: 100% !important;
    height: 250px !important;
    max-height: 250px !important;
    object-fit: cover !important;
    display: block !important;
}

#so_extra_slider_grooms_inner .product-image-container a:before {
    display: none !important;
}

#so_extra_slider_grooms_inner .product-item-container .left-block img {
    transition: none !important;
}

/* -------------------------------------------------------------------------
   Similar Profiles (detailedpage.php) – same style as Home Brides/Grooms
   ------------------------------------------------------------------------- */
#similar-profiles .product-item-container .left-block,
#similar-profiles .product-image-container {
    height: 250px !important;
    max-height: 250px !important;
    overflow: hidden !important;
    display: block;
}

#similar-profiles .product-image-container a {
    display: block !important;
    height: 100% !important;
}

#similar-profiles .product-item-container .left-block img,
#similar-profiles .product-image-container img,
#similar-profiles .recent-profile-img {
    width: 100% !important;
    height: 250px !important;
    max-height: 250px !important;
    object-fit: cover !important;
    display: block !important;
}

#similar-profiles .product-image-container a:before {
    display: none !important;
}

#similar-profiles .product-item-container .left-block img {
    transition: none !important;
}