/* Skeleton & Shimmer CSS */
.skeleton {
    background-color: #e0e0e0;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
}

.skeleton::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: translateX(-100%);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

.skeleton-text {
    height: 1em;
    margin-bottom: 0.5em;
    width: 100%;
}

.skeleton-rect {
    width: 100%;
    height: 100%;
}

.skeleton-btn {
    height: 100%;
    width: 100%;
    border-radius: 8px;
}

/* HTMX Indicator Overlays */
.htmx-indicator-overlay {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.htmx-request .htmx-indicator-overlay,
.htmx-request.htmx-indicator-overlay {
    display: flex;
}

/* Helper for hiding content during load if using swap */
.htmx-request.hide-on-load {
    display: none !important;
}

/* Aldelo-style Global CSS */
:root {
    --aldelo-bg: linear-gradient(135deg, #ffffff 0%, #e0f2f1 100%);
    --aldelo-btn-gray: linear-gradient(to bottom, #f5f5f5 0%, #e0e0e0 100%);
    --aldelo-btn-gray-hover: linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%);
    --aldelo-btn-green: linear-gradient(to bottom, #a5d6a7 0%, #66bb6a 100%);
    --aldelo-btn-green-hover: linear-gradient(to bottom, #c8e6c9 0%, #81c784 100%);
    --aldelo-btn-green-dark: linear-gradient(to bottom, #2e7d32 0%, #1b5e20 100%);
    --aldelo-btn-green-dark-hover: linear-gradient(to bottom, #388e3c 0%, #2e7d32 100%);
    --aldelo-btn-red: linear-gradient(to bottom, #ef9a9a 0%, #d32f2f 100%);
    --aldelo-btn-red-hover: linear-gradient(to bottom, #ffcdd2 0%, #e57373 100%);
    --aldelo-btn-yellow: linear-gradient(to bottom, #fff59d 0%, #fbc02d 100%);
    --aldelo-btn-yellow-hover: linear-gradient(to bottom, #fff9c4 0%, #fdd835 100%);
    --aldelo-btn-blue: linear-gradient(to bottom, #90caf9 0%, #1976d2 100%);
    --aldelo-btn-blue-hover: linear-gradient(to bottom, #bbdefb 0%, #42a5f5 100%);
    --aldelo-btn-purple: linear-gradient(to bottom, #ce93d8 0%, #8e24aa 100%);
    --aldelo-btn-purple-hover: linear-gradient(to bottom, #e1bee7 0%, #ba68c8 100%);
    --aldelo-btn-black: linear-gradient(to bottom, #424242 0%, #212121 100%);
    --aldelo-btn-black-hover: linear-gradient(to bottom, #616161 0%, #424242 100%);
    --aldelo-header-blue: linear-gradient(to bottom, #90caf9 0%, #42a5f5 100%);
    /* New Gradients for Bestsellers */
    --aldelo-btn-orange: linear-gradient(to bottom, #ffcc80 0%, #f57c00 100%);
    --aldelo-btn-orange-hover: linear-gradient(to bottom, #ffe0b2 0%, #fb8c00 100%);
    --aldelo-btn-cyan: linear-gradient(to bottom, #80deea 0%, #00acc1 100%);
    --aldelo-btn-cyan-hover: linear-gradient(to bottom, #b2ebf2 0%, #00bcd4 100%);
    --aldelo-btn-pink: linear-gradient(to bottom, #f48fb1 0%, #d81b60 100%);
    --aldelo-btn-pink-hover: linear-gradient(to bottom, #f8bbd0 0%, #e91e63 100%);
}

.aldelo-btn {
    border: 1px solid #999;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    cursor: pointer;
    font-weight: bold;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.1s;
    user-select: none;
    color: #333;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    text-decoration: none !important;
    line-height: 1.1;
}

.aldelo-btn:active {
    transform: translateY(2px);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

.active-menu-group {
    border: 2px solid #000 !important;
    font-weight: 900 !important;
}

.btn-gray { background: var(--aldelo-btn-gray); }
.btn-gray:hover { background: var(--aldelo-btn-gray-hover); }

.btn-green { background: var(--aldelo-btn-green); color: white; text-shadow: 0 1px 0 rgba(0,0,0,0.3); }
.btn-green:hover { background: var(--aldelo-btn-green-hover); }

.btn-green-dark { background: var(--aldelo-btn-green-dark); color: white; text-shadow: 0 1px 0 rgba(0,0,0,0.5); border-color: #1b5e20; }
.btn-green-dark:hover { background: var(--aldelo-btn-green-dark-hover); border-color: #2e7d32; }

.btn-red { background: var(--aldelo-btn-red); color: white; text-shadow: 0 1px 0 rgba(0,0,0,0.3); }
.btn-red:hover { background: var(--aldelo-btn-red-hover); }

.btn-yellow { background: var(--aldelo-btn-yellow); }
.btn-yellow:hover { background: var(--aldelo-btn-yellow-hover); }

.btn-blue { background: var(--aldelo-btn-blue); color: white; text-shadow: 0 1px 0 rgba(0,0,0,0.3); }
.btn-blue:hover { background: var(--aldelo-btn-blue-hover); }

.btn-purple { background: var(--aldelo-btn-purple); color: white; text-shadow: 0 1px 0 rgba(0,0,0,0.3); }
.btn-purple:hover { background: var(--aldelo-btn-purple-hover); }

.btn-black { background: var(--aldelo-btn-black); color: white; text-shadow: 0 1px 0 rgba(0,0,0,0.5); border-color: #000; }
.btn-black:hover { background: var(--aldelo-btn-black-hover); }

/* Light Mode Override for btn-black */
[data-bs-theme="light"] .btn-black {
    background: linear-gradient(145deg, #ffffff, #f0f0f0);
    color: #333 !important; /* Force override of inline styles if present */
    text-shadow: none;
    border-color: #ccc;
}
[data-bs-theme="light"] .btn-black:hover {
    background: linear-gradient(145deg, #f8f8f8, #e0e0e0);
    border-color: #bbb;
    color: #000 !important;
}
[data-bs-theme="light"] .btn-black i {
    color: inherit !important; /* Ensure icons follow text color */
}

.dropdown-submenu { position: relative; }
.dropdown-submenu .dropdown-menu { top: 0; left: 100%; margin-top: -1px; }

/* Scrollbar styling for order summary */
.order-summary-items {
    overflow-y: auto;
    max-height: none;
}

/* Show scrollbar only when there are more than 3 items */
.order-summary-scrollable {
    max-height: 200px;
    overflow-y: auto;
}

/* Custom scrollbar styling */
.order-summary-scrollable::-webkit-scrollbar {
    width: 6px;
}

.order-summary-scrollable::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.order-summary-scrollable::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.order-summary-scrollable::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Compact footer styling for order summary */
.order-summary-footer table.table-sm {
    margin-bottom: 0.3rem;
}

.order-summary-footer .table-sm > tbody > tr > td,
.order-summary-footer .table-sm > tbody > tr > th {
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
    line-height: 1.1;
}

.order-summary-footer .input-group-text {
    padding: 0.05rem 0.25rem;
    width: 30px;
}

.order-summary-footer .btn-sm {
    padding: 0.05rem 0.25rem;
}

.order-summary-footer .input-group {
    width: auto;
}

.order-summary-footer .small {
    line-height: 1.1;
}

.order-summary-footer .h6 {
    line-height: 1.1;
}

/* Badge positioning for action buttons with wrapper divs */
.position-relative.d-inline-block .badge {
    position: absolute;
    top: -5px;
    right: -5px;
    z-index: 100;
}

/* Bestseller button styling */
.btn-bestseller {
    background-color: #ffd700 !important; /* Goud */
    color: #000 !important;
    border-color: #e0c200 !important;
}
.btn-bestseller:hover {
    background-color: #ffca2c !important;
    border-color: #ffc720 !important;
}

/* Red bestseller button styling */
.btn-bestseller-red {
    background-color: #dc3545 !important; /* Rood */
    color: #fff !important;
    border-color: #b02a37 !important;
}
.btn-bestseller-red:hover {
    background-color: #bb2d3b !important;
    border-color: #b02a37 !important;
}

/* Category Bestseller Colors - Using Gradients */
/* Gold/Yellow */
.btn-bestseller-color-1 { background: var(--aldelo-btn-yellow) !important; color: #333 !important; text-shadow: 0 1px 0 rgba(255,255,255,0.5); border-color: #fbc02d !important; }
.btn-bestseller-color-1:hover { background: var(--aldelo-btn-yellow-hover) !important; border-color: #fdd835 !important; }

/* Red */
.btn-bestseller-color-2 { background: var(--aldelo-btn-red) !important; color: white !important; text-shadow: 0 1px 0 rgba(0,0,0,0.3); border-color: #d32f2f !important; }
.btn-bestseller-color-2:hover { background: var(--aldelo-btn-red-hover) !important; border-color: #e57373 !important; }

/* Orange */
.btn-bestseller-color-3 { background: var(--aldelo-btn-orange) !important; color: #333 !important; text-shadow: 0 1px 0 rgba(255,255,255,0.5); border-color: #f57c00 !important; }
.btn-bestseller-color-3:hover { background: var(--aldelo-btn-orange-hover) !important; border-color: #fb8c00 !important; }

/* Green */
.btn-bestseller-color-4 { background: var(--aldelo-btn-green) !important; color: white !important; text-shadow: 0 1px 0 rgba(0,0,0,0.3); border-color: #388e3c !important; }
.btn-bestseller-color-4:hover { background: var(--aldelo-btn-green-hover) !important; border-color: #66bb6a !important; }

/* Cyan */
.btn-bestseller-color-5 { background: var(--aldelo-btn-cyan) !important; color: #333 !important; text-shadow: 0 1px 0 rgba(255,255,255,0.5); border-color: #00acc1 !important; }
.btn-bestseller-color-5:hover { background: var(--aldelo-btn-cyan-hover) !important; border-color: #00bcd4 !important; }

/* Indigo/Purple */
.btn-bestseller-color-6 { background: var(--aldelo-btn-purple) !important; color: white !important; text-shadow: 0 1px 0 rgba(0,0,0,0.3); border-color: #7b1fa2 !important; }
.btn-bestseller-color-6:hover { background: var(--aldelo-btn-purple-hover) !important; border-color: #8e24aa !important; }

/* Pink */
.btn-bestseller-color-7 { background: var(--aldelo-btn-pink) !important; color: white !important; text-shadow: 0 1px 0 rgba(255,255,255,0.3); border-color: #c2185b !important; }
.btn-bestseller-color-7:hover { background: var(--aldelo-btn-pink-hover) !important; border-color: #d81b60 !important; }

/* Blue */
.btn-bestseller-color-8 { background: var(--aldelo-btn-blue) !important; color: white !important; text-shadow: 0 1px 0 rgba(0,0,0,0.3); border-color: #1565c0 !important; }
.btn-bestseller-color-8:hover { background: var(--aldelo-btn-blue-hover) !important; border-color: #1e88e5 !important; }

/* Ticker Tape CSS */
.ticker-wrap {
    width: 100%;
    overflow: hidden;
    background-color: #212529; /* Dark background */
    padding-left: 100%;
    box-sizing: content-box;
    height: 40px;
    line-height: 40px;
}

.ticker {
    display: inline-block;
    white-space: nowrap;
    padding-right: 100%;
    box-sizing: content-box;
    animation: ticker 30s linear infinite;
}

.ticker:hover {
    animation-play-state: paused;
}

.ticker__item {
    display: inline-block;
    padding: 0 2rem;
    font-size: 1rem;
    color: white;
    font-weight: 500;
}

.ticker__item i {
    margin-right: 0.5rem;
    color: #ffc107; /* Warning yellow for icons */
}

@keyframes ticker {
    0% {
        transform: translate3d(0, 0, 0);
        visibility: visible;
    }
    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

/* Fix voor ongewenste horizontale scrollbar */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}