/* Custom styles for your project */

.calcularte-shop-component {
    font-size: 16px;
}

/* Infinite Scroll status elements */
#cshop-drawer .page-load-status {
    
    text-align: center;
}

#cshop-drawer .infinite-scroll-request {
    display: block;
}

#cshop-drawer .infinite-scroll-error,
#cshop-drawer .infinite-scroll-last {
    display: block;
}

.sticky-wrapper {
    position: sticky;
    top: -24px;
    z-index: 10;
    margin: 0 -3px;
}
/* calcularte-shop/css/custom-collapse.css */

.cshop-collapse-header {
    display: flex;
    justify-content: start;
    align-items: center;
    cursor: pointer;
}

.cshop-collapse-button {
    margin-left: auto;
    background: none;
    border: none;
    padding: 0.5rem;
    transition: transform 0.3s ease;
}

.cshop-collapse-button[aria-expanded="true"] {
    transform: rotate(-90deg);
}

.cshop-collapse-content {

    transition: max-height 0.3s ease, opacity 0.6s ease;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
}

.cshop-collapse-content.expanded {
    max-height: 10000px;
    /* Adjust as needed */
    opacity: 1;
    overflow: visible;
}

.tour-message-box {
    @apply absolute bg-base-100 p-6 rounded-lg shadow-xl z-[1101] pointer-events-auto max-w-md w-full;
    opacity: 0; /* Start hidden for animation */
}


.tour-message-box::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 12px solid transparent;
}

.tour-message-box.top::before {
    border-top-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
    top: 100%;
    left: var(--stem-left, 50%);
    transform: translateX(-50%);
}

.tour-message-box.bottom::before {
    border-bottom-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
    bottom: 100%;
    left: var(--stem-left, 50%);
    transform: translateX(-50%);
}

.tour-message-box.right::before {
    border-right-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
    right: 100%;
    top: var(--stem-top, 50%);
    transform: translateY(-50%);
}

.tour-message-box.left::before {
    border-left-color: var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));
    left: 100%;
    top: var(--stem-top, 50%);
    transform: translateY(-50%);
}

/* Fade animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.tour-message-box.fade-in {
    animation: fadeIn 0.3s ease-in forwards;
}

.tour-message-box.fade-out {
    animation: fadeOut 0.3s ease-out forwards;
}

/* Ensure the overlay has rounded corners visually (mask is handled in JS) */
.fixed.inset-0.z-\[1100\] {
    overflow: hidden;
}

div.tour-cloned-target,
input.tour-cloned-target {
    /*background: transparent; *//* Ensure no background interference */
    margin: 0; /* Reset margins to match original positioning */
    /*padding: inherit; /* Inherit padding from original */
}

button.tour-cloned-target {    
    margin: 0; /* Reset margins to match original positioning */
    /*padding: inherit; /* Inherit padding from original */
    transition: background-color 0.2s ease, transform 0.3s ease;
}

/* Add non-interactive styling */
.tour-cloned-target[style*="pointer-events: none"] {
    cursor: not-allowed; /* Visual feedback */
}

button[data-tour="add-link"].tour-cloned-target {
    padding: 0.25rem 0.5rem; /* Match btn-sm padding: py-1 px-2 */
    display: flex; /* Ensure flexbox for centering */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    border: 2px solid var(--fallback-btn, var(--btn-border-color, #e5e7eb)); /* Match btn border */
    border-radius: 0.375rem; /* Match btn rounded-md */
    background: var(--fallback-n, var(--n, #ffffff)); /* Match btn background */
}