/* Base styles */
.ras-dc16ebb9-wrapper {
    position: relative;
    width: 100%;
    font-family: inherit;
}

.ras-dc16ebb9-search-bar {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.ras-dc16ebb9-input {
    width: 100%;
    padding: 12px 20px;
    border: 1px solid #ddd;
    font-size: 15px;
    outline: none;
    transition: all 0.3s ease;
}

.ras-dc16ebb9-input:focus {
    border-color: #111111;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
}

.ras-dc16ebb9-loader {
    display: none;
    position: absolute;
    right: 15px;
    width: 18px;
    height: 18px;
    border: 2px solid #ddd;
    border-top: 2px solid #111111;
    border-radius: 50%;
    animation: spin-dc16ebb9 0.8s linear infinite;
}

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

/* AJAX Results Dropdown */
.ras-dc16ebb9-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 999;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    max-height: 420px;
    overflow-y: auto;
    display: none;
    border: 1px solid #eaeaea;
}

.ras-dc16ebb9-results.has-results {
    display: block;
}

/* Custom Scrollbar for results */
.ras-dc16ebb9-results::-webkit-scrollbar {
    width: 6px;
}
.ras-dc16ebb9-results::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 8px;
}
.ras-dc16ebb9-results::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 8px;
}

.ras-dc16ebb9-item {
    display: flex;
    align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid #f5f5f5;
    text-decoration: none;
    transition: all 0.2s ease;
    color: inherit;
}

.ras-dc16ebb9-item:last-child {
    border-bottom: none;
}

.ras-dc16ebb9-item:hover,
.ras-dc16ebb9-item.is-selected {
    background-color: #f9f9f9;
    outline: none;
}

.ras-dc16ebb9-item-thumb {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 6px;
    margin-right: 15px;
    background-color: #fafafa;
    border: 1px solid #f0f0f0;
    flex-shrink: 0;
}

.ras-dc16ebb9-item-content {
    flex: 1;
    min-width: 0; /* allows ellipsis to trigger on child if needed */
}

.ras-dc16ebb9-item-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #222222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ras-dc16ebb9-item-price {
    font-size: 13px;
    color: #e63946;
    font-weight: 700;
}

/* Sale/Regular price formatting matches standard WooCommerce nested styles nicely */
.ras-dc16ebb9-item-price del {
    color: #999;
    font-weight: 400;
    margin-right: 6px;
    font-size: 11px;
}

.ras-dc16ebb9-no-results {
    padding: 20px;
    text-align: center;
    color: #666;
    font-size: 14px;
}

/* Visibility classes for Desktop vs Mobile */
.ras-dc16ebb9-trigger {
    display: none; /* Hidden on desktop */
}

.ras-dc16ebb9-modal-header {
    display: none;
}

/* Mobile Overrides (Max Width 767px) */
@media (max-width: 767px) {
    /* Hide the standard inline container */
    .ras-dc16ebb9-container {
        display: none !important;
    }

    /* Force the mobile trigger button to show */
    .ras-dc16ebb9-trigger {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 10px;
        color: #111111;
        outline: none;
        transition: opacity 0.2s ease;
    }

    .ras-dc16ebb9-trigger:hover {
        opacity: 0.8;
    }

    .ras-dc16ebb9-trigger svg {
        width: 22px;
        height: 22px;
        fill: currentColor;
    }

    /* Full screen responsive popup search */
    .ras-dc16ebb9-wrapper.is-open .ras-dc16ebb9-container {
        display: block !important;
        position: fixed;
        top: var(--wp-admin--admin-bar--height, 0px);
        left: 0;
        right: 0;
        bottom: 0;
        background: #ffffff;
        z-index: 100001;
        padding: 20px;
        overflow-y: auto;
        animation: slideInUp-dc16ebb9 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }

    body.admin-bar .ras-dc16ebb9-wrapper.is-open .ras-dc16ebb9-container {
        top: var(--wp-admin--admin-bar--height, 32px);
    }

    .ras-dc16ebb9-wrapper.is-open .ras-dc16ebb9-overlay {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        backdrop-filter: blur(5px);
        z-index: 100000;
    }

    /* Modal header styles */
    .ras-dc16ebb9-modal-header {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid #f0f0f0;
    }

    .ras-dc16ebb9-modal-title {
        font-weight: 700;
        font-size: 20px;
        color: #111111;
    }

    .ras-dc16ebb9-close-btn {
        background: none;
        border: none;
        font-size: 32px;
        line-height: 1;
        cursor: pointer;
        color: #666;
        padding: 5px;
    }

    /* Popup results full width placement */
    .ras-dc16ebb9-results {
        position: static;
        box-shadow: none;
        border: none;
        max-height: calc(100vh - 180px);
        margin-top: 15px;
    }
}

@keyframes slideInUp-dc16ebb9 {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}