.slider-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    transition: opacity 0.3s ease-in-out;
}

.spinner {
    border: 4px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top: 4px solid #fff;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.filter-trigger svg:last-child {
  /* The arrow */
  transition: transform 0.3s ease-in-out;
}

.filter-trigger[aria-expanded="true"] svg:last-child {
  transform: rotate(180deg);
}

/* Custom scrollbar for dropdown menus (optional, webkit browsers) */
.filter-menu::-webkit-scrollbar {
  width: 6px;
}

.filter-menu::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.filter-menu::-webkit-scrollbar-thumb {
  background: #a8a8a8;
  border-radius: 10px;
}

.filter-menu::-webkit-scrollbar-thumb:hover {
  background: #888;
}
/* Custom CSS for overlay effect */
.slide-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  /* Semi-transparent black overlay */
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none;
  /* Allow clicks through the overlay */
}

.slide-overlay.active {
  opacity: 1;
}

.bra-anim {
  position: relative;
  background: url("../images/girl-h.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top; /* Adjusted position */
  height: 460px; /* Keep original height */
  width: 290px; /* Keep original width */
  margin: 0 auto; /* Center if needed within its column */
}

/* Removed .bra-girl as it wasn't used in HTML */

.bra {
  position: absolute;
  right: 46px; /* Keep original position */
  top: 122px; /* Keep original position */
  width: 85px; /* Keep original position */
  /* z-index: -1; Removed as it might hide behind bg unexpectedly */
}

/* Revised Swing Animation */
@keyframes swing {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(10deg);
  } /* Swing one way */
  100% {
    transform: rotate(0deg);
  } /* Return to center (use alternate below) */
  /* More complex swing:
     0%, 100% { transform: rotate(0deg); }
     25% { transform: rotate(10deg); }
     75% { transform: rotate(-8deg); } */
}

.swing-animation {
  transform-origin: top center;
  animation-name: swing;
  animation-duration: 4s; /* Adjusted duration */
  animation-timing-function: ease-in-out; /* Smoother timing */
  animation-iteration-count: infinite;
  animation-direction: alternate; /* Makes it swing back and forth */
}

/* Ensure pagination bullets use brand colors */
.swiper-pagination-bullet {
    background-color: #fbc66d !important;
    /* brand-gold-medium */
    opacity: 0.5;
}

.swiper-pagination-bullet-active {
    background-color: #fce690 !important;
    /* brand-gold-light */
    opacity: 1;
}

/* Heart Icon Styling */
.heart-icon svg {
    stroke: white;
    /* Default outline color */
    fill: none;
    /* Outline only by default */
    transition: fill 0.2s ease, stroke 0.2s ease;
}

.heart-icon.active svg {
    fill: #DC2626;
    /* Tailwind red-600 */
    stroke: #DC2626;
    /* Tailwind red-600 */
}

.heart-icon:not(.active):hover svg {
    stroke: #F87171;
    /* Lighter red on hover when not active */
}

/* Notification Styling */
.notification {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    display: none;
    z-index: 1000;
    font-size: 0.875rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* ** Ribbon Style ** */
.item-ribbon-bottom {
    /* Tailwind classes applied directly: bg-brand-gold-light relative shadow-lg rounded-b-sm */
    /* Custom properties */
    box-shadow: 0 -6px 10px rgba(0, 0, 0, 0.3);
    /* Adjusted shadow for bottom ribbon */
}

.item-ribbon-bottom::before,
.item-ribbon-bottom::after {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    top: -5px;
    /* Position triangles above the ribbon */
    border-bottom: 5px solid #a05d03;
    /* Darker shade of gold/brown for triangle - ADJUST AS NEEDED */
}

.item-ribbon-bottom::before {
    left: 0;
    border-left: 5px solid transparent;
    /* Creates left triangle */
}

.item-ribbon-bottom::after {
    right: 0;
    border-right: 5px solid transparent;
    /* Creates right triangle */
}

/* Availability Status Styling */
.profile-tag-section {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    color: white;
    z-index: 10;
    backdrop-filter: blur(2px);
}

.profile-tag-text {
    flex-grow: 1;
    color: #fce690;
    /* brand-gold-light */
}

.availability-dot-container {
    position: relative;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #22c55e;
    /* green-500 */
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
    cursor: pointer;
    margin-left: 8px;
}

.availability-dot-container.availability-dot-green {
    background-color: #22c55e;
    /* green-500 */
}

.status-dot-red-container {
    position: relative;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #ef4444;
    /* red-500 */
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
    cursor: pointer;
    margin-left: 8px;
}

/* Tooltip styles */
.tooltip {
    position: absolute;
    bottom: 24px;
    left: -26px;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 10px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 20;
}

.group:hover .tooltip {
    opacity: 1;
    visibility: visible;
}

.tooltip-arrow {
    position: absolute;
    top: 100%;
    left: 75px;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
}

/* Holiday Status Section (for unavailable profiles) */
.holiday-status-section {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    z-index: 10;
    color: white;
}

.holiday-status-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(185, 28, 28, 0.8) 0%, rgba(185, 28, 28, 0.6) 50%, rgba(185, 28, 28, 0) 100%);
    z-index: -1;
}

.holiday-status-text {
    flex-grow: 1;
    color: white;
}

/* Positioning for the red dot in holiday status */
.holiday-status-section .status-dot-red-container {
    position: relative;
    /* Keep relative for tooltip positioning */
    flex-shrink: 0;
    margin-left: 8px;
}

/* Swiper pagination for recommended slider */
.swiper-pagination-recommended {
    position: absolute; /* Ensure it's absolutely positioned */
    width: 100%; /* Ensure it takes full width of its parent */
    text-align: center; /* Center the bullets horizontally */
    left: 50% !important; /* Position from the left */
    transform: translateX(-50%) !important; /* Adjust for true centering */
}

/* Heart Icon Styling */
.heart-icon-rec svg {
    stroke: #fce690;
    /* Default outline color */
    fill: none;
    /* Outline only by default */
    transition: fill 0.2s ease, stroke 0.2s ease;
}

.heart-icon-rec.active svg {
    fill: #DC2626;
    /* Tailwind red-600 */
    stroke: #DC2626;
    /* Tailwind red-600 */
}

.heart-icon-rec:not(.active):hover svg {
    stroke: #F87171;
    /* Lighter red on hover when not active */
}

/* Ribbon Style */
.item-ribbon-bottom {
    box-shadow: 0 -6px 10px rgba(0, 0, 0, 0.3);
}

.item-ribbon-bottom::before,
.item-ribbon-bottom::after {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    top: -5px;
    border-bottom: 5px solid #600002;
    /* Darker shade of red-dark */
}

.item-ribbon-bottom::before {
    left: 0;
    border-left: 5px solid transparent;
}

.item-ribbon-bottom::after {
    right: 0;
    border-right: 5px solid transparent;
}

/* Swiper Navigation Button Overrides */
/* These apply to all .swiper-container elements unless overridden by more specific selectors */
.swiper-container .swiper-button-next::after,
.swiper-container .swiper-button-prev::after,
.swiper-container-recommended .swiper-button-next::after,
.swiper-container-recommended .swiper-button-prev::after,
.swiper-container-duo .swiper-button-next::after, /* Added for Duo slider */
.swiper-container-duo .swiper-button-prev::after, /* Added for Duo slider */
.swiper-container-trio .swiper-button-next::after, /* Added for Trio slider */
.swiper-container-trio .swiper-button-prev::after { /* Added for Trio slider */
    content: '';
    /* Remove default Swiper arrow icons */
    display: none;
}

/* General Swiper Navigation Button Styling */
.swiper-container .swiper-button-next,
.swiper-container .swiper-button-prev,
.swiper-container-recommended .swiper-button-next,
.swiper-container-recommended .swiper-button-prev,
.swiper-container-duo .swiper-button-next, /* Added for Duo slider */
.swiper-container-duo .swiper-button-prev, /* Added for Duo slider */
.swiper-container-trio .swiper-button-next, /* Added for Trio slider */
.swiper-container-trio .swiper-button-prev { /* Added for Trio slider */
    width: auto;
    height: auto;
    margin-top: 0;
    transform: translateY(-50%);
}

/* Custom Profile Card Styles */
.profile-card-new {
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: 0.125rem;
    /* rounded-sm */
    /* Updated shadow for recommended slider */
    box-shadow: 0 14px 19px 0 rgba(121, 0, 3, 0.5);
    height: 100%;
    /* Ensure cards take full height in swiper-slide */
    overflow: hidden;
    /* Important for overlay */
}

.card-top-section {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0.75rem;
    /* px-3 pt-3 pb-2 */
    background-color: #7b0000;
    /* bg-isa-red-dark */
    color: #fce690;
    /* text-isa-primary */
    font-weight: bold;
    position: relative;
    /* Needed for z-index of overlay */
    z-index: 20;
    /* Keep above image and overlay */
}

.profile-name {
    flex: 1;
    margin-right: 0.5rem;
}

.profile-price {
    flex-shrink: 0;
    text-align: right;
    cursor: pointer;
    /* Indicate it's clickable/hoverable */
}

/* Price Table Overlay Container - positioned relative to .image-section */
.image-section .price-table-overlay-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 30;
}

.price-table-overlay {
    position: absolute;
    inset: 0;
    padding: 0.5rem 1rem;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(2px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fbc66d;
    font-size: 0.625rem;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    pointer-events: auto;
}

/* New class to make the price overlay visible */
.price-table-overlay.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.image-section {
    display: block;
    position: relative;
    width: 100%;
    overflow: hidden;
}

.image-section img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.primary-image {
    opacity: 1;
}

.secondary-image {
    opacity: 0;
}

/* Only show secondary image on hover over the image-section itself */
.image-section:hover .primary-image {
    opacity: 0;
}

.image-section:hover .secondary-image {
    opacity: 1;
}

.review-section-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 100%);
    color: white;
    display: flex;
    justify-content: end;
    align-items: center;
    z-index: 10;
    font-weight: bold;
}

.review-stars {
    display: flex;
    color: #fce690;
    flex-direction: column;
    align-items: center;
}

.review-count-text {
    color: #fbc66d;
}

.profile-tag-section {
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    z-index: 10;
    color: white;
}

.profile-tag-text {
    flex-grow: 1;
    font-weight: bold;
    color: #fce690;
}

.availability-dot-container {
    position: relative;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #22c55e;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
    cursor: pointer;
    margin-left: 8px;
}

.availability-dot-container.availability-dot-green {
    background-color: #22c55e;
}

.status-dot-red-container {
    position: relative;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #ef4444;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5);
    cursor: pointer;
    margin-left: 8px;
}

/* Tooltip styles */
.tooltip {
    position: absolute;
    bottom: 24px;
    left: -26px;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 10px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 20;
}

.group:hover .tooltip {
    opacity: 1;
    visibility: visible;
}

.tooltip-arrow {
    position: absolute;
    top: 100%;
    left: 75px;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
}

/* Holiday Status Section (for unavailable profiles) */
.holiday-status-section {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    z-index: 10;
    color: white;
}

.holiday-status-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(185, 28, 28, 0.8) 0%, rgba(185, 28, 28, 0.6) 50%, rgba(185, 28, 28, 0) 100%);
    z-index: -1;
}

.holiday-status-text {
    flex-grow: 1;
    color: white;
}

/* Positioning for the red dot in holiday status */
.holiday-status-section .status-dot-red-container {
    position: relative;
    flex-shrink: 0;
    margin-left: 8px;
}

/* DUO SLIDER SPECIFIC STYLES - Ensure these are correctly applied */

/* Centering DUO Slider Pagination */
.swiper-pagination-duo {
    position: absolute; 
    width: 100%; 
    left: 0; 
    /* text-align: center; is applied via Tailwind in home.php */
}

/* DUO Main Heart Icon Styling */
.duo-main-heart-icon svg {
    stroke: white; 
    fill: none; 
    transition: fill 0.2s ease-in-out, stroke 0.2s ease-in-out;
}

.duo-main-heart-icon.active svg {
    fill: #DC2626; 
    stroke: #DC2626; 
}

.duo-main-heart-icon:not(.active):hover svg {
    stroke: #F87171; 
    fill: rgba(248, 113, 113, 0.1); 
}

/* Centering TRIO Slider Pagination */
.swiper-pagination-trio {
    position: absolute; 
    /* text-align: center; is applied via Tailwind class in home.php */
    left: 0; /* Make it span from the left edge */
    right: 0; /* Make it span to the right edge */
    /* The `!bottom-0 pt-4` classes in home.php handle vertical positioning and padding. */
    /* Swiper bullets are typically inline-block, so text-align:center on this container will center them. */
}

/* Ensure bullet styles are consistent if not already covered globally */
.swiper-pagination-trio .swiper-pagination-bullet {
    background-color: #fbc66d !important; /* brand-gold-medium */
    opacity: 0.5 !important;
}

.swiper-pagination-trio .swiper-pagination-bullet-active {
    background-color: #fce690 !important; /* brand-gold-light */
    opacity: 1 !important;
}

/* General Swiper Pagination Bullet Styling (ensure these are not overridden or missing) */
/* These styles are duplicated from earlier in the file to ensure they are considered.
   It's better to have them defined once, but for safety, they are re-listed here.
   If they are already defined and working, these specific re-definitions might not be strictly necessary.
*/
.swiper-pagination-bullet {
    background-color: #fbc66d !important; /* brand-gold-medium */
    opacity: 0.5 !important; /* Ensure opacity is applied */
}

.swiper-pagination-bullet-active {
    background-color: #fce690 !important; /* brand-gold-light */
    opacity: 1 !important; /* Ensure full opacity for active bullet */
}
.swiper-pagination-foreign-escorts,
.swiper-pagination-housewife-escorts,
.swiper-pagination-vip-escorts {
    position: absolute; /* Ensures proper positioning relative to the slider container. */
    width: 100%;      /* Makes the pagination container span the full width. */
    text-align: center; /* Centers the inline-block pagination bullets within the container. */
    left: 0;          /* Aligns the full-width container to the left edge of its positioning context. */
    /* The !bottom-0 class from Tailwind in your HTML handles the bottom positioning. */
    /* The pt-4 class from Tailwind in your HTML handles padding-top. */
    /* z-index: 10; is usually part of Swiper's default for .swiper-pagination, so it should be fine. */
}