/* CarteLoop - Functional CSS */
.clp-wrapper *, .clp-wrapper *::before, .clp-wrapper *::after, .clp-modal *, .clp-modal *::before, .clp-modal *::after { box-sizing: border-box; }

.clp-header { display: flex; gap: .5rem; align-items: center; margin-bottom: .5rem; position: sticky; top: 0; padding: 0; z-index: 5; }
.clp-search { position: relative; flex: 1; }
.clp-search-input { width: 100%; padding: 1rem .8rem; }
.clp-search-clear { position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; cursor: pointer; line-height: 1; visibility: hidden; display: flex; align-items: center; justify-content: center; padding: 0; background: transparent; border: none; }

.clp-tabs { display: flex; gap: .75rem; overflow-x: auto; overflow-y: hidden; padding: 0.5rem 1rem; position: sticky; top: 0; z-index: 99; scrollbar-width: none; -ms-overflow-style: none; white-space: nowrap; }
.clp-tabs::-webkit-scrollbar { display: none; }
.clp-tab { padding: .5rem 1.25rem; cursor: pointer; white-space: nowrap; box-sizing: border-box; flex-shrink: 0; }

.clp-items { display: flex; flex-wrap: wrap; gap: var(--clp-gap, .5rem); }
.clp-loop-wrapper { display: flex; flex-wrap: wrap; gap: var(--clp-gap, .5rem); width: 100%; }
.clp-category-heading { width: 100%; }
.clp-wrapper:not([data-layout="list"]) .clp-card { width: calc( (100% - ((var(--clp-cols, 4) - 1) * var(--clp-gap, .5rem))) / var(--clp-cols, 4) ); }

/* Responsive fallbacks if --clp-cols is not defined by Elementor */
@media (max-width: 1024px) { .clp-wrapper:not(.elementor-element *) { --clp-cols: 2; } }
@media (max-width: 640px) { .clp-wrapper:not(.elementor-element *) { --clp-cols: 1; } }

.clp-card { overflow: hidden; position: relative; display: flex; flex-direction: column; cursor: pointer; }
.clp-media { position: relative; width: 100%; aspect-ratio: 4/3; overflow: hidden; }
.clp-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.clp-body { position: relative; padding: .75rem .8rem 1rem; display: flex; flex-direction: column; flex-grow: 1; }
.clp-title { margin: 0 0 .25rem; }
.clp-excerpt { padding: 0; display: inline-block; }
.clp-meta { display: flex; flex-wrap: wrap; gap: .35rem .5rem; align-items: center; margin-top: auto; }
.clp-price { margin-left: auto; padding: .1rem .4rem; }
.clp-chip { padding: 5px; margin-right: 5px; }
.clp-teaser { position: absolute; top: .6rem; left: .6rem; padding: .15rem .5rem; z-index: 1; }
.clp-load-more { display: block; margin: 1rem auto; padding: .6rem 1rem; cursor: pointer; }

/* Modal */
.clp-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 0; }
.clp-modal[hidden] { display: none!important; }
.clp-modal-backdrop { position: fixed; inset: 0; }
.clp-modal-dialog { position: relative; width: 100%; max-width: var(--clp-modal-width, 980px); padding: var(--clp-modal-padding, 0); margin: 0 auto; height: auto; max-height: var(--clp-modal-height, 100vh); overflow-y: auto; display: block; -webkit-overflow-scrolling: touch; }
.clp-modal-is-custom .clp-modal-dialog { display: block; }

.clp-modal-media { 
    width: 100%; 
    height: 45vh !important; 
    max-height: none;
    position: sticky;
    top: 0; 
    z-index: 0; 
    display: grid; place-items: center; overflow: hidden;
}

.clp-modal-content { 
    position: relative; 
    z-index: 2; 
    background: #fff; 
    padding: 20px; 
    margin-top: -20px; 
    border-radius: 20px 20px 0 0; 
    overflow: visible; 
    transform: translateZ(1px); /* Fix iOS Safari sticky stacking bug */
}
.clp-modal-content .clp-details { display: flex; flex-wrap: wrap; gap: .35rem .5rem; margin: .5rem 0 1rem; }
.clp-modal-content .clp-section { margin: .75rem 0; }

.clp-modal-close, .clp-modal-prev, .clp-modal-next, .clp-modal-back { position: absolute; top: .5rem; width: 36px; height: 36px; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; }
/* On desktop, keep buttons contained within the dialog max-width if possible, but fixed is screen-relative. 
Let's make them position: absolute inside the dialog?
If we use absolute, they scroll away. User wants them fixed? 
User complained "Auch der back button scheint mit zu scrollen." So they want it fixed. 
If it's fixed, it's relative to the screen. 
*/
.clp-modal-close { right: 1rem; }
.clp-modal-next { right: 4rem; }
.clp-modal-prev { right: 7rem; }
.clp-modal-back { left: 1rem; width: auto; padding: 0 1rem; }

.clp-modal-carousel { position: relative; width: 100%; height: 100%; }
.clp-modal-carousel img { width: 100%; height: 100%; object-fit: cover; display: block; }

@keyframes clpFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes clpFadeDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes clpFadeUpCenter { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes clpFadeDownCenter { from { opacity: 0; transform: translate(-50%, -10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* List Layout Styles */
.clp-wrapper[data-layout="list"] .clp-items { display: flex; flex-direction: column; gap: var(--clp-gap, 12px); }
.clp-card-list { display: flex; flex-direction: column; padding: 16px; position: relative; overflow: hidden; }
.clp-card-list .clp-list-content { flex-grow: 1; }
.clp-card-list .clp-title-wrapper { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.clp-card-list .clp-allergens-inline { display: flex; gap: 4px; }
.clp-card-list .clp-chip-sm { padding: 2px 6px; }

/* Mini Item Template (Related) */
.clp-related-items { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.clp-card-mini { display: flex; flex-direction: column; overflow: hidden; }
.clp-mini-img-wrap { width: 100%; overflow: hidden; }
.clp-mini-img { width: 100%; height: 100%; object-fit: cover; }
.clp-mini-info { padding: .75rem; text-align: center; }

/* Allergens Inline & Tooltips */
.clp-allergens-inline span { display: inline-block; }
[data-clp-tooltip] { position: relative; cursor: help; outline: none; }
[data-clp-tooltip]::after { content: attr(data-clp-tooltip); position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-5px); padding: 5px 9px; white-space: nowrap; opacity: 0; visibility: hidden; transition: all 0.25s ease; z-index: 100; pointer-events: none; }
[data-clp-tooltip]::before { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(-5px); border: 5px solid transparent; opacity: 0; visibility: hidden; transition: all 0.25s ease; z-index: 100; pointer-events: none; }
[data-clp-tooltip]:hover::after, [data-clp-tooltip]:hover::before, [data-clp-tooltip]:focus::after, [data-clp-tooltip]:focus::before { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }

/* Category Headings & Animations */
.clp-anim-item { opacity: 0; transform: translateY(15px); transition: opacity 0.4s ease, transform 0.4s ease; }
.clp-anim-item.clp-in-view { opacity: 1; transform: translateY(0); }

/* Custom Template Card Overrides */
.clp-card-custom { display: block; min-height: auto; grid-template-rows: none; }

/* Compact 1-column layout adjustments */
.clp-wrapper[data-cols="1"] .clp-items { grid-auto-rows: auto; }
.clp-wrapper[data-cols="1"] .clp-card[class*="clp-tile-"] { grid-row: auto !important; grid-column: auto !important; }
.clp-wrapper[data-cols="1"] .clp-media img { height: 100%; aspect-ratio: auto; }

/* CarteLoop List Layout */
.clp-card-list, .clp-wrapper[data-layout="list"] .clp-card { min-height: auto; grid-template-rows: auto; display: flex; flex-direction: row; align-items: flex-start; gap: 1rem; padding: 1.25rem 0; }
.clp-card-list .clp-media, .clp-wrapper[data-layout="list"] .clp-card .clp-media { width: 110px; height: 110px; flex-shrink: 0; }
.clp-card-list .clp-body, .clp-wrapper[data-layout="list"] .clp-card .clp-body { position: relative; padding: 0; display: flex; flex-direction: row; justify-content: space-between; align-items: stretch; flex: 1; }
.clp-card-list .clp-list-content, .clp-wrapper[data-layout="list"] .clp-card .clp-list-content { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; padding-right: 1rem; }
.clp-card-list .clp-list-actions, .clp-wrapper[data-layout="list"] .clp-card .clp-list-actions { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; min-width: max-content; }
.clp-card-list .clp-price, .clp-wrapper[data-layout="list"] .clp-card .clp-price { padding: 0; }

.clp-global-fav-toggle svg, .clp-global-share-favs svg { width: 1em; height: 1em; fill: currentColor; display: inline-block; vertical-align: middle; }
.clp-global-fav-toggle i, .clp-global-share-favs i { display: inline-block; vertical-align: middle; }
.clp-card[data-cat-first] { scroll-margin-top: 100px; }

/* Sticky Container Magic Class for Free Users */
.clp-sticky-container {
	position: sticky !important;
	top: var(--clp-scroll-offset, 0px) !important;
	z-index: 99 !important;
}

/* Image Positions */
.clp-card-grid.clp-img-pos-left { display: flex; flex-direction: row; align-items: stretch; text-align: left; min-height: auto; padding: 15px; }
.clp-card-grid.clp-img-pos-left .clp-media { width: 120px; height: 120px; flex-shrink: 0; margin-right: 15px; border-radius: 8px; overflow: hidden; }
.clp-card-grid.clp-img-pos-left .clp-body { flex: 1; padding: 0; display: flex; flex-direction: column; justify-content: space-between; }

.clp-card-grid.clp-img-pos-right { display: flex; flex-direction: row-reverse; align-items: stretch; text-align: right; min-height: auto; padding: 15px; }
.clp-card-grid.clp-img-pos-right .clp-media { width: 120px; height: 120px; flex-shrink: 0; margin-left: 15px; border-radius: 8px; overflow: hidden; }
.clp-card-grid.clp-img-pos-right .clp-body { flex: 1; padding: 0; display: flex; flex-direction: column; justify-content: space-between; }
.clp-card-grid.clp-img-pos-right .clp-meta { flex-direction: row-reverse; justify-content: flex-end; }
.clp-card-grid.clp-img-pos-right .clp-chips { justify-content: flex-end; }
.clp-card-grid.clp-img-pos-right .clp-price { margin-left: auto; margin-right: 0; }

/* Modal No Image */
.clp-modal-dialog.clp-no-image .clp-modal-content { margin-top: 0; border-radius: 20px; }

/* Filter Mechanism */
.clp-nav-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	position: relative;
	flex-wrap: nowrap;
}
.clp-nav-wrapper .clp-tabs {
	flex: 1;
	min-width: 0;
}

.clp-filter-btn i {
	font-size: 16px;
}
.clp-filter-btn svg {
	width: 16px;
	height: 16px;
	fill: currentColor;
	display: inline-block;
}

/* Filtered out category tabs */
.clp-tab.clp-tab-hidden {
	opacity: 0.3;
	pointer-events: none;
	cursor: default;
}

/* Forcefully strip focus outlines from Elementor tabs to prevent stuck "active" look */
.clp-tab:focus {
	outline: none !important;
	box-shadow: none !important;
}

.clp-modal-header { position: sticky; top: 0; z-index: 20; width: 100%; height: 0; overflow: visible; pointer-events: none; }
.clp-modal-header button { pointer-events: auto; }

.clp-search-clear svg { max-width: 100%; max-height: 100%; display: block; }

.clp-search-clear-icon { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }