/* SoundCreation Elasticsearch Autocomplete CSS */
/* Unified and reusable styles for autocomplete components */
/* Use prefixes like 'sc-' for SoundCreation, 'list-prod-' for product lists, 'card-brand-cat-' for brand/category cards */

/* Color palette variables for reusability */
:root {
    --sc-primary: #ea2a8d; /* Pink for prices */
    --sc-text-dark: #333; /* Main text */
    --sc-text-medium: #666; /* Secondary text */
    --sc-text-light: #999; /* Light text, subtitles */
    --sc-border: #e9ecef; /* Borders */
    --sc-bg-light: #f0f0f0; /* Light backgrounds */
    --sc-bg-white: #fff; /* White backgrounds */
    --sc-shadow: rgba(0, 0, 0, 0.2); /* Shadows */
    --sc-overlay-bg: rgba(0, 0, 0, 0.5); /* Overlay */
    --sc-success: #28a745; /* Stock success (from FA icons, approx) */
    --sc-warning: #ffc107; /* Stock warning */
    --sc-danger: #dc3545; /* Stock danger */
    --sc-font-base: 16px;
    --sc-font-small: 14px;
    --sc-font-xsmall: 13px;
    --sc-font-xxsmall: 12px;
    --sc-spacing-base: 20px;
    --sc-spacing-small: 10px;
    --sc-spacing-xsmall: 5px;
    --sc-border-radius: 12px;
    --sc-border-radius-small: 8px;
    --sc-border-radius-input: 20px;
    --sc-transition: 0.3s ease;
}

/* Overlay for desktop modal */
.sc-autocomplete-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--sc-overlay-bg);
    z-index: 99998;
    display: none;
    opacity: 0;
    transition: opacity var(--sc-transition);
}

/* Dropdown container (shared for desktop/mobile) */
.sc-autocomplete-dropdown {
    background: var(--sc-bg-white);
    border-radius: 0 0 var(--sc-border-radius) var(--sc-border-radius);
    box-shadow: 0 16px 40px var(--sc-shadow);
    z-index: 99999;
    display: none;
    overflow: hidden;
    flex-direction: column;
    transition: opacity var(--sc-transition), transform var(--sc-transition);
}

/* Desktop-specific dropdown styles */
.sc-autocomplete-dropdown.desktop-modal {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    width: 100vw;
    padding: 0 calc((100vw - min(850px, 90vw)) / 2);
    opacity: 0;
}

/* Mobile-specific dropdown styles */
.sc-autocomplete-dropdown.mobile-modal {
    position: fixed;
    top: 0;
    left: -100%;
    right: 0;
    bottom: 0;
    transition: left var(--sc-transition);
    width: 100%;
    overflow-y: auto;
}

/* Unified header */
.sc-autocomplete-header {
    display: flex;
    align-items: center;
    padding: 15px var(--sc-spacing-base);
    background: var(--sc-bg-white);
    flex-shrink: 0;
    border-bottom: 1px solid var(--sc-border); /* Mobile only, but can be overridden */
}

/* Input container in header */
.sc-autocomplete-input-container {
    position: relative;
    flex: 1;
}

/* Search input */
.sc-autocomplete-input {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: var(--sc-border-radius-input) !important;
    box-sizing: border-box;
    padding: 18px 85px 18px 40px;
    font-size: var(--sc-font-base);
    outline: none;
    z-index: 1;
    position: relative;
}

/* .sc-autocomplete-input:focus {
    border: 1px solid #ddd;
} */

/* Clear button */
.sc-autocomplete-clear-btn {
    position: absolute;
    right: 55px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: var(--sc-font-base);
    font-weight: bold;
    color: var(--sc-text-dark);
    cursor: pointer;
    padding: 4px;
    z-index: 1;
    display: none; /* Shown via JS when input has value */
}

/* Search button in header */
.sc-autocomplete-search-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: var(--sc-text-dark);
    border: none;
    border-radius: 16px;
    height: calc(100% - 14px);
    aspect-ratio: 1;
    color: var(--sc-bg-white);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* Back button in header */
.sc-autocomplete-back-btn {
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    height: 30px;
    aspect-ratio: 1;
    color: var(--sc-text-dark);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

/* Content area */
.sc-autocomplete-content {
    display: flex;
    min-height: 250px;
    overflow: hidden;
}

/* Mobile content styles */
.sc-autocomplete-content.mobile {
    flex: 1;
    padding: 0 var(--sc-spacing-base);
    overflow-y: auto;
}

/* Left column (desktop) */
.sc-autocomplete-left-column {
    flex: 1;
    border-right: 1px solid var(--sc-border);
    overflow-y: auto;
    min-height: 250px;
    padding: 0 var(--sc-spacing-base);
}

/* Right column (desktop) */
.sc-autocomplete-right-column {
    flex: 1.2;
    overflow-y: auto;
    background: var(--sc-bg-white);
    min-height: 250px;
    max-height: 500px;
    padding: 0 var(--sc-spacing-base);
}

/* Search button at bottom */
.sc-autocomplete-search-button {
    background: var(--sc-text-dark);
    color: var(--sc-bg-white);
    border: none;
    padding: 18px var(--sc-spacing-base);
    font-size: var(--sc-font-base);
    font-weight: 500;
    cursor: pointer;
    border-radius: var(--sc-border-radius);
    margin: 15px var(--sc-spacing-base) var(--sc-spacing-base) var(--sc-spacing-base);
    display: none;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

/* Loading indicator */
.sc-autocomplete-loading {
    padding: 40px var(--sc-spacing-base);
    text-align: center;
    color: var(--sc-text-medium);
    font-size: var(--sc-font-small);
    display: none;
}

/* No results message */
.sc-autocomplete-no-results {
    padding: 40px var(--sc-spacing-base);
    text-align: center;
    color: var(--sc-text-medium);
    font-size: var(--sc-font-small);
}

/* Welcome screen */
.sc-autocomplete-welcome {
    padding: 40px var(--sc-spacing-base);
    text-align: center;
    color: var(--sc-text-medium);
    font-size: var(--sc-font-small);
}

/* Section header (e.g., 'Sugestii de căutare', 'Produse') */
.sc-autocomplete-section-header {
    padding: var(--sc-spacing-xsmall) 0 var(--sc-spacing-small) 0;
    font-size: var(--sc-font-xsmall);
    color: var(--sc-text-light);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-weight: 600;
}

/* Result item base (reusable for lists) */
.list-prod-item {
    padding: 8px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--sc-bg-light);
}

/* Product-specific styles (extend list-prod-item) */
.list-prod-item.product {

}

/* Suggestion-specific styles */
.list-prod-item.suggestion .list-prod-icon {
    width: 24px;
    height: 24px;
    margin-right: 15px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sc-text-medium);
}

.list-prod-item.suggestion .list-prod-title {
    color: var(--sc-text-dark);
    font-weight: 400;
    font-size: 15px;
}

.list-prod-item.product .list-prod-title {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    display: -webkit-box;
}

/* Grid container for categories/brands/articles */
.card-brand-cat-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sc-spacing-small);
}

/* Card item base (for brands, categories, articles) */
.card-brand-cat-item {
    cursor: pointer;
    display: flex;
    position: relative;
    gap: var(--sc-spacing-small);
    align-items: center;
    padding: var(--sc-border-radius-small);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-border-radius);
}

/* Article-specific card styles */
.card-brand-cat-item.article {
    background-color: #f7f2f4;
    font-weight: 500;
}

/* Card icon/image */
.card-brand-cat-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: var(--sc-border-radius-small);
    border: 1px solid var(--sc-border);
    background: var(--sc-bg-white);
}

/* Fallback icon container */
.card-brand-cat-fallback {
    width: 40px;
    height: 40px;
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sc-bg-light);
    border-radius: var(--sc-border-radius-small);
}

/* Card title */
.card-brand-cat-title {
    font-weight: 500;
    color: var(--sc-text-dark);
    font-size: var(--sc-font-small);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* Card subtitle */
.card-brand-cat-subtitle {
    font-size: var(--sc-font-xxsmall);
    color: var(--sc-text-light);
    margin-top: 2px;
}

/* Highlight for matched query */
.sc-highlight {
    font-weight: bold;
}

/* Stock indicators (using icons or text) */
.list-prod-stock {
    white-space: nowrap;
}

.list-prod-stock.in-stock {
    color: var(--sc-success);
}

.list-prod-stock.limited {
    color: var(--sc-warning);
}

.list-prod-stock.on-order {
    color: var(--sc-danger);
}

/* Price styles */
.list-prod-price {
    font-weight: 600;
    color: var(--sc-primary);
    font-size: var(--sc-font-base);
    text-align: right;
    white-space: nowrap;
}

.list-prod-old-price {
    text-decoration: line-through;
    color: var(--sc-text-light);
    font-size: var(--sc-font-xsmall);
    text-align: right;
    white-space: nowrap;
    margin-bottom: 2px;
}

/* Currency small */
.list-prod-currency {
    font-size: 11px; /* Or var(--sc-font-xxsmall) */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .sc-autocomplete-header {
        border-bottom: 1px solid var(--sc-border);
    }

    .sc-autocomplete-content {
        display: block; /* Stack for mobile */
    }

    .card-brand-cat-grid {
        grid-template-columns: 1fr; /* Single column for articles, but categories/brands are repeat(2) - adjust if needed */
    }
}

/* Selection highlight */
.list-prod-item.selected,
.card-brand-cat-item.selected {
    background-color: #f0f8ff;
}

.thumb-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.big-list .card-brand-cat-icon {
    height: 80px;
    width: 80px;
}

.gradient-border {
  --borderWidth: 1px;
  --borderRadius: 10px;
  position: relative;
}

.gradient-border:after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--borderWidth));
  left: calc(-1 * var(--borderWidth));
  height: calc(100% + var(--borderWidth) * 2);
  width: calc(100% + var(--borderWidth) * 2);
  background: linear-gradient(60deg, #ea2a8d, #e01b5d, #bc1b50, #92153f);
  border-radius: calc(2 * var(--borderRadius));
  z-index: 0;
  animation: animatedgradient 3s ease alternate infinite;
  background-size: 300% 300%;
  transition: opacity 0.3s ease;
}

.gradient-border:not(:has(.sc-autocomplete-input:focus)):after {
    opacity: 0;
}


@keyframes animatedgradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}