/* Basic structure - adapt selectors */
.myd-lookbook-widget {
    position: relative; /* Needed for absolute positioning of icon */
    display: inline-block;
    line-height: 0; /* Prevents extra space below image */
}

.myd-lookbook-icon-wrapper {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10;
    cursor: pointer;
}

/* The new white circle background */
.myd-lookbook-icon-circle {
    width: 35px;
    height: 35px;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); 
    position: relative;
}

/* The SVG Icon itself */
.myd-lookbook-icon {
    display: block;
}

.modal-popup.myd-lookbook-instance-modal .product-item-info .actions-secondary .action.towishlist::before {
    -webkit-mask-position-x: 60%;
    -webkit-mask-position-y: 60%;
    mask-position: 60% 60%;
}

.modal-popup.myd-lookbook-instance-modal .product-items .product-item-details .price-box {
	margin-top: 4px;
}

.modal-popup.myd-lookbook-instance-modal .product-items .product-item-details .price-box .price-container .price {
	font-size: 1rem;
}

.modals-wrapper > .modals-overlay {
    background-color: rgba(0, 0, 0, 0.35);
}

.myd-lookbook-widget.tooltip-reveal-trigger .myd-lookbook-tooltip {
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%) translateX(0); /* Use the same transform as the hover state */
	transition: opacity 0.3s ease-out, visibility 0s linear, transform 0.3s ease-out; /* Fade/slide in */
}

.modal-popup.myd-lookbook-instance-modal .product-item-details .product-item-name a.product-item-link {
    overflow: hidden; /* Hide the text that overflows the container */
    display: -webkit-box; /* Required for line-clamp to work */
    -webkit-line-clamp: 2; /* Limit the text to 2 lines */
    -webkit-box-orient: vertical; /* Required for line-clamp */
    /* Optional: Set a min-height to reserve space for 2 lines, preventing layout jumps */
    /* Adjust based on your line-height, e.g., 1.4em * 2 = 2.8em */
    min-height: 2.8em;
}

/* The expanding/fading pulse effect using a pseudo-element */
.myd-lookbook-icon-circle::after {
    content: '';
    position: absolute;
    /* Make pseudo element slightly larger than parent by border width */
    /* inset: -2px; */ /* Alternative simpler positioning below */
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 1px solid rgba(255, 255, 255, 0.8); /* Adjust color/thickness */
    border-radius: 50%;
    box-sizing: border-box; /* Include border in element's dimensions */
    /* Apply the animation */
    animation: expand-fade 1.6s infinite ease-out; /* Adjust duration/timing */
    pointer-events: none; /* Make sure it doesn't block clicks on the icon */
}

/* The keyframes for the expand/fade animation */
@keyframes expand-fade {
  0% {
    transform: scale(1); /* Start AT the size of the circle */
    opacity: 0.8; /* Start mostly opaque (adjust 0 to 1) */
  }
  100% {
    transform: scale(1.7); /* Expand to 2x the size (adjust as needed) */
    opacity: 0; /* Fade out completely */
  }
}

/* --- Remove Default Focus Outline from Lookbook Modal Close Button --- */

.modal-popup.myd-lookbook-instance-modal .modal-header button.action-close:focus,
.modal-popup.myd-lookbook-instance-modal .modal-header button.action-close:focus-visible {
    outline: none;
}

.modal-popup.modal-slide.myd-lookbook-instance-modal {
	padding: 1.75rem 0.75rem;
}

/* --- Lookbook Modal Slide-Up Animation --- */

/* Target our specific lookbook modal instance */
.modal-popup.myd-lookbook-instance-modal {
    /* Initial State (Hidden) */
    opacity: 0;
    /* Start position: 50px below its final position. Increase for longer slide */
    /* Alternatively use '100vh' to start from bottom of viewport */
    transform: translateY(100vh);
    /* Add visibility control */
    visibility: hidden;

    /* Define the smooth transition for transform and opacity */
    /* Adjust duration (0.4s) and timing function (ease-out) as needed */
    transition: transform 0.4s ease-out, opacity 0.4s ease-out, visibility 0s linear 0.4s;
    /* Delay hiding visibility until transition ends */
}

/* State when the modal is shown (Breeze adds/removes _show class) */
.modal-popup.myd-lookbook-instance-modal._show {
    /* Final State (Visible) */
    opacity: 1;
    transform: translateY(0); /* Move to final position */
    visibility: visible;
    transition-delay: 0s; /* Ensure visibility becomes active immediately on show */
}

/* --- End Slide-Up Animation --- */

/* --- Styles for Modal Content (Keep Existing) --- */

.modal-popup.myd-lookbook-instance-modal {
        --modal-max-width: 1000px;
}

@media (min-width: 1024px) {
    .modal-popup.myd-lookbook-instance-modal {
		--listing-grid-columns: 4;
    }
	.modal-popup.myd-lookbook-instance-modal .products-grid .product-items .product-item-photo picture {
		width: 100%;
	}
}
@media (min-width: 768px and max-width: 1023px) {
    .modal-popup.myd-lookbook-instance-modal {
		--listing-grid-columns: 3;
    }
}

@media (max-width: 767px) {
    .modal-popup.myd-lookbook-instance-modal .modal-header {
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
		text-transform: uppercase;
		text-align: center;
    }
	.modal-popup.myd-lookbook-instance-modal .modal-header h1 {
        font-size: 1rem;
    }
	.modal-popup.myd-lookbook-instance-modal .modal-header button.action-close {
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
    }
}

/* --- Tooltip Styles --- */

.myd-lookbook-tooltip {
    position: absolute;
    /* Position it to the left of the icon wrapper */
    right: 100%;  /* Place right edge at the left edge of the wrapper */
    top: 50%;     /* Vertically center relative to wrapper */
    transform: translateY(-50%) translateX(5px); /* Adjust vertical center & start slightly shifted right */
    margin-right: 15px; /* Space between tooltip arrow and icon circle (adjust) */

    /* Appearance */
    background-color: rgba(255, 255, 255, 0.95); /* Slightly transparent white */
    color: #333; /* Dark text */
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 12px; /* Adjust font size */
    line-height: 1.4;
    white-space: nowrap; /* Prevent text wrapping */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);

    /* Initial Hidden State & Transition */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.1s ease-in-out, transform 0.1s ease-in-out, visibility 0.1s linear 0.1s;
}

/* Arrow using pseudo-element */
.myd-lookbook-tooltip::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%; /* Attach arrow to the right side of the tooltip box */
    margin-top: -6px; /* Adjusts vertical position (half of border height) */
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.95); /* Left border is white */
}

/* Show tooltip when the main widget container is hovered */
.myd-lookbook-widget:hover .myd-lookbook-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0); /* Slide in */
    transition-delay: 0.1s;
}