/* CarteLoop - Visual CSS */
.clp-wrapper { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; --clp-accent: #1d9bf0; }

.clp-header { background: none; border-bottom: 1px solid #eee; }
.clp-search-input { border: 1px solid #ddd; border-radius: 3px; }
.clp-search-clear { border-radius: 999px; border: 1px solid #ddd; background: #fff; }

.clp-tabs { background: rgba(255, 255, 255, 0.95); }
.clp-tab { border-radius: 999px; border: 1px solid transparent; background: #f0f0f0; color: #555; font-size: .9rem; font-weight: 500; transition: all 0.2s ease; }
.clp-tab:hover { background: #e4e4e4; color: #111; }
.clp-tab.active, .clp-tab:focus { background: #222; color: #fff; border-color: #222; }

.clp-card { background: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0px 0px 5px rgba(0,0,0,.1); transition: all .2s; }
.clp-card:hover { box-shadow: 5px 5px 10px rgba(0,0,0,.1); }

.clp-body { background: #FFF; color: #333; }
.clp-title { font-weight: 700; color: #444; text-shadow: none; letter-spacing: 1px; font-size: 1.2rem; }
.clp-excerpt { color: #666; background: none; border-radius: .5rem; font-size: 1rem; }
.clp-meta { color: #fff; }
.clp-price { font-weight: 600; background: none; border-radius: 3px; border: 1px solid #ddd; color: #444; }
.clp-chip { font-size: .75rem; background: #E1E6DA; border: 1px solid rgba(255,255,255,.25); border-radius: 25px; color: #333; }
.clp-teaser { background: var(--clp-accent); color: #fff; font-size: .75rem; border-radius: .5rem; }
.clp-load-more { border-radius: .6rem; border: 1px solid #ddd; background: #fff; }

/* Modal */
.clp-modal-backdrop { background: rgba(0,0,0,.5); }
.clp-modal-dialog { background: #fff; border-radius: 3px; }
@media(max-width: 900px) { .clp-modal-dialog { border-radius: 0; } }
.clp-modal-close, .clp-modal-prev, .clp-modal-next, .clp-modal-back { border-radius: 999px; border: 1px solid #ddd; background: #fff; transition: all 0.2s; }
.clp-modal-close svg { fill: currentColor; }
.clp-modal-back { font-weight: 500; font-size: 0.9rem; }
.clp-modal-media { background: #000; }
.clp-modal-content .clp-title { font-size: 1.25rem; }
.clp-modal-content .clp-rec a { text-decoration: none; color: var(--clp-accent); margin-right: .6rem; }

/* Mini Item Template (Related) */
.clp-card-mini { text-decoration: none; color: inherit; border: 1px solid #eee; border-radius: 6px; background: #fff; transition: transform .2s, box-shadow .2s; }
.clp-card-mini:hover { transform: translateY(-3px); box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.clp-mini-img-wrap { background: #fafafa; }
.clp-mini-title { font-size: 0.9rem; font-weight: 600; line-height: 1.2; margin: 0; }

/* Allergens Inline & Tooltips */
.clp-allergens-inline { font-weight: 400; color: #666; font-size: 0.8em; letter-spacing: 0.5px; }
[data-clp-tooltip]::after { background: rgba(0,0,0,0.9); color: #fff; border-radius: 4px; font-size: 13px; font-weight: 400; font-family: sans-serif; }
[data-clp-tooltip]::before { border-bottom-color: rgba(0,0,0,0.9); }

/* Custom Template Card Overrides */
.clp-card-custom { background: transparent; border: none; border-radius: 0; box-shadow: none; }
.clp-card-custom:hover { box-shadow: none; }


/* Category Headings */
.clp-category-heading {
    grid-column: 1 / -1;
    width: 100%;
    margin: 2rem 0 1rem;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--clp-text);
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 0.5rem;
}

/* macOS / iOS Style Scrollbars */
.clp-wrapper ::-webkit-scrollbar,
.clp-modal-dialog::-webkit-scrollbar,
.clp-modal-dialog ::-webkit-scrollbar,
#clpto-checkout::-webkit-scrollbar,
#clpto-checkout ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
.clp-wrapper ::-webkit-scrollbar-track,
.clp-modal-dialog::-webkit-scrollbar-track,
.clp-modal-dialog ::-webkit-scrollbar-track,
#clpto-checkout::-webkit-scrollbar-track,
#clpto-checkout ::-webkit-scrollbar-track {
    background: transparent;
}
.clp-wrapper ::-webkit-scrollbar-thumb,
.clp-modal-dialog::-webkit-scrollbar-thumb,
.clp-modal-dialog ::-webkit-scrollbar-thumb,
#clpto-checkout::-webkit-scrollbar-thumb,
#clpto-checkout ::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 10px;
}
.clp-wrapper ::-webkit-scrollbar-thumb:hover,
.clp-modal-dialog::-webkit-scrollbar-thumb:hover,
.clp-modal-dialog ::-webkit-scrollbar-thumb:hover,
#clpto-checkout::-webkit-scrollbar-thumb:hover,
#clpto-checkout ::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.4);
}