/* ═══════════════════════════════════════════════════════════════
   POS · GLASS, TILES, ANIMATIONS & TOUCH STYLES
   Shared across all POS entry pages: Touch, Mobile, Quick, Mart
   Moved from site.css §11 — edit here, not in site.css
═══════════════════════════════════════════════════════════════ */

/* ── Glass Morphism Header/Card ───────────────────────────────── */
[data-bs-theme="light"] .pos-glass {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, 0.55);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07), 0 1px 4px rgba(0, 0, 0, 0.04);
}

[data-bs-theme="dark"] .pos-glass {
    background: rgba(15, 22, 40, 0.78);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.09);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
}

/* ── Product Tile (Touch POS / Mobile POS) ────────────────────── */
.pos-product-tile {
    border-radius: 14px;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.15s ease,
                border-color 0.15s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    /* background image support via CSS var */
    background-image: var(--pos-bg-img, none);
    background-size: cover;
    background-position: center;
}

.pos-product-tile:hover:not(:active) {
    transform: translateY(-4px) scale(1.025);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pos-product-tile:active,
.pos-product-tile.pos-pressed {
    transform: scale(0.88) !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1) !important;
    transition: transform 0.08s ease !important;
}

/* Cinematic dark overlay when tile has a background image */
.pos-product-tile.pos-has-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.18) 0%,
        rgba(0, 0, 0, 0.06) 38%,
        rgba(0, 0, 0, 0.72) 100%
    );
    border-radius: inherit;
    z-index: 0;
    pointer-events: none;
}

/* Frosted glass content caption strip at the bottom of image tiles */
.pos-tile-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.45rem 0.55rem 0.6rem;
    background: rgba(0, 0, 0, 0.50);
    backdrop-filter: blur(10px) saturate(1.2);
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    border-radius: 0 0 14px 14px;
    z-index: 1;
    color: #fff;
}

/* Tile icon layer (appears above the overlay) */
.pos-tile-icon {
    position: relative;
    z-index: 1;
}

/* ── Quick POS Large Tiles ─────────────────────────────────────── */
.pos-quick-product {
    border-radius: 16px;
    cursor: pointer;
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    overflow: hidden;
    background-image: var(--pos-bg-img, none);
    background-size: cover;
    background-position: center;
}

.pos-quick-product:hover:not(:active) {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.24);
}

.pos-quick-product:active,
.pos-quick-product.pos-pressed {
    transform: scale(0.86) !important;
    transition: transform 0.08s ease !important;
}

.pos-quick-product.pos-has-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.20) 0%,
        rgba(0, 0, 0, 0.68) 100%
    );
    border-radius: inherit;
    z-index: 0;
    pointer-events: none;
}

/* ── Keyframe Animations ──────────────────────────────────────── */
@keyframes pos-pop {
    0%   { transform: scale(1); }
    30%  { transform: scale(0.80); }
    65%  { transform: scale(1.20); }
    85%  { transform: scale(0.96); }
    100% { transform: scale(1); }
}

@keyframes pos-slide-in-right {
    from { opacity: 0; transform: translateX(18px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes pos-slide-in-bottom {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes pos-slide-in-top {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes pos-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes pos-checkout-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.45); }
    50%      { box-shadow: 0 0 0 10px rgba(25, 135, 84, 0); }
}

@keyframes pos-cart-sheet-in {
    from { transform: translateY(100%); opacity: 0.5; }
    to   { transform: translateY(0);    opacity: 1; }
}

@keyframes pos-new-invoice {
    0%   { opacity: 1; }
    40%  { opacity: 0.4; transform: scale(0.98); }
    100% { opacity: 1; transform: scale(1); }
}

/* ── Animation Classes ────────────────────────────────────────── */
.pos-badge-pop {
    animation: pos-pop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.pos-item-enter {
    animation: pos-slide-in-right 0.22s ease both;
}

.pos-item-enter-bottom {
    animation: pos-slide-in-bottom 0.20s ease both;
}

.pos-checkout-ready {
    animation: pos-checkout-pulse 2.2s ease infinite;
}

.pos-cart-sheet {
    animation: pos-cart-sheet-in 0.32s cubic-bezier(0.32, 0.72, 0, 1) both;
}

.pos-new-invoice-flash {
    animation: pos-new-invoice 0.45s ease both;
}

/* ── Tag / Category Pills ─────────────────────────────────────── */
.pos-tag-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.5rem;
    border-radius: 12px;
    font-size: 0.7rem;
    cursor: pointer;
    transition: background 0.15s, transform 0.12s, color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    border: 1px solid transparent;
    background: transparent;
    -webkit-tap-highlight-color: transparent;
    background-image: var(--pos-bg-img, none);
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.pos-tag-pill:active { transform: scale(0.88); }

.pos-tag-pill.active {
    background-color: var(--bs-primary);
    color: #fff !important;
    border-color: var(--bs-primary);
    box-shadow: 0 2px 10px rgba(var(--bs-primary-rgb), 0.45);
}

[data-bs-theme="light"] .pos-tag-pill:not(.active):not(.pos-has-image) {
    background-color: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--bs-body-color);
}

[data-bs-theme="dark"] .pos-tag-pill:not(.active):not(.pos-has-image) {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--bs-body-color);
}

/* Cinematic overlay for tag pills with background images */
.pos-tag-pill.pos-has-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    border-radius: inherit;
    pointer-events: none;
}

.pos-tag-pill.pos-has-image > * {
    position: relative;
    z-index: 1;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}

.pos-tag-pill.pos-has-image:hover:not(.active) {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
    transform: scale(1.06);
}

.pos-cat-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, transform 0.12s, box-shadow 0.12s;
    white-space: nowrap;
    border: 1px solid transparent;
    -webkit-tap-highlight-color: transparent;
}

.pos-cat-pill:active { transform: scale(0.91); }

/* ── Scrollable Row (hide scrollbar) ─────────────────────────── */
.pos-scroll-x {
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
}

.pos-scroll-x::-webkit-scrollbar { display: none; }

/* ── Tag Sidebar (Touch POS) ─────────────────────────────────── */
.pos-tag-sidebar {
    width: 76px;
    min-width: 76px;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    flex-shrink: 0;
}

.pos-tag-sidebar::-webkit-scrollbar { display: none; }

/* ── Mobile Cart Bottom Bar ───────────────────────────────────── */
.pos-cart-bar {
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.14);
    transition: max-height 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    z-index: 50;
}

/* ── Mart POS Search Input ────────────────────────────────────── */
.pos-mart-search {
    font-size: 1rem;
    padding: 0.55rem 0.85rem;
    border-radius: 10px;
    border: 2px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    width: 100%;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}

.pos-mart-search:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), 0.18);
}

/* ── Quick POS Product Grid ───────────────────────────────────── */
.pos-quick-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.65rem;
}

@media (min-width: 480px) {
    .pos-quick-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 768px) {
    .pos-quick-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ── Cart Empty State ─────────────────────────────────────────── */
.pos-cart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    opacity: 0.45;
    gap: 0.5rem;
    padding: 2rem;
}

/* ── Mart Product Row ─────────────────────────────────────────── */
.pos-mart-product-row {
    cursor: pointer;
    transition: background 0.12s;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}

.pos-mart-product-row:hover {
    background: rgba(var(--bs-primary-rgb), 0.06);
}

.pos-mart-product-row:active {
    background: rgba(var(--bs-primary-rgb), 0.14);
}