:root {
    /* The brand identity — the default values (overridden by the theme applied as the page is drawn).
       The chosen theme's values are injected into a <style> inside the <head>, so they take precedence over these defaults. */
    --pm-primary: #ff6a00;      /* the primary colour — buttons, links and prices */
    --pm-primary-rgb: 255, 106, 0;
    --pm-accent: #ff8a33;       /* the secondary accent */
    --pm-accent-rgb: 255, 138, 51;
    --pm-price: #ff6a00;        /* the colour prices are shown in */
    --pm-dark: #1a1a1d;         /* the dark chrome — the top bar, the footer and the admin panel */
    --pm-bg: #1a1a1d;           /* the page background */
    --pm-surface: #2e2e33;      /* cards, panels and fields */
    --pm-surface-2: #26262b;    /* recessed surfaces (thumbnails, table headers) */
    --pm-ink: #111114;          /* the darkest shade */
    --pm-line: #3a3a40;         /* hairline borders */
    --pm-text: #e6e6e6;         /* primary text */
    --pm-heading: #ffffff;      /* headings */
    --pm-steel: #9a9aa2;        /* secondary/muted text */

    /* The height of the bottom navigation bar (excluding the safe area) — a single source of truth
       used to clear room at the bottom of the page and for the floating buttons on mobile. */
    --pm-bottom-nav-h: 68px;
}

/* The Bootstrap colour bridge: it follows the --pm-* variables whatever the theme (light or dark).
   The html[data-bs-theme] selector outranks the Bootstrap rules for both modes at once. */
html[data-bs-theme] {
    --bs-body-bg: var(--pm-bg);
    --bs-body-color: var(--pm-text);
    --bs-emphasis-color: var(--pm-heading);
    --bs-secondary-bg: var(--pm-surface);
    --bs-tertiary-bg: var(--pm-surface-2);
    --bs-border-color: var(--pm-line);
    --bs-primary: var(--pm-primary);
    --bs-primary-rgb: var(--pm-primary-rgb);
    --bs-link-color: var(--pm-accent);
    --bs-link-color-rgb: var(--pm-accent-rgb);
    --bs-link-hover-color: var(--pm-primary);
    --bs-warning: var(--pm-accent);
    --bs-warning-rgb: var(--pm-accent-rgb);
}

/* The Bootstrap buttons are built on the theme variables; the hover shades are derived through color-mix */
.btn-primary {
    --bs-btn-bg: var(--pm-primary); --bs-btn-border-color: var(--pm-primary); --bs-btn-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--pm-primary) 88%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--pm-primary) 88%, #000); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--pm-primary) 78%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--pm-primary) 78%, #000); --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: var(--pm-primary); --bs-btn-disabled-border-color: var(--pm-primary); --bs-btn-disabled-color: #fff;
}
.btn-outline-primary {
    --bs-btn-color: var(--pm-accent); --bs-btn-border-color: var(--pm-primary);
    --bs-btn-hover-bg: var(--pm-primary); --bs-btn-hover-border-color: var(--pm-primary); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--pm-primary); --bs-btn-active-border-color: var(--pm-primary); --bs-btn-active-color: #fff;
}
/* The fixed grey in btn-outline-secondary washes out on dark backgrounds — make it follow the theme colours */
.btn-outline-secondary {
    --bs-btn-color: var(--pm-text); --bs-btn-border-color: var(--pm-line);
    --bs-btn-hover-bg: var(--pm-surface-2); --bs-btn-hover-border-color: var(--pm-steel); --bs-btn-hover-color: var(--pm-heading);
    --bs-btn-active-bg: var(--pm-surface-2); --bs-btn-active-border-color: var(--pm-steel); --bs-btn-active-color: var(--pm-heading);
    --bs-btn-disabled-color: var(--pm-steel); --bs-btn-disabled-border-color: var(--pm-line);
}
.btn-warning {
    --bs-btn-bg: var(--pm-accent); --bs-btn-border-color: var(--pm-accent); --bs-btn-color: #1a1a1d;
    --bs-btn-hover-bg: color-mix(in srgb, var(--pm-accent) 88%, #fff); --bs-btn-hover-border-color: color-mix(in srgb, var(--pm-accent) 88%, #fff); --bs-btn-hover-color: #1a1a1d;
    --bs-btn-active-bg: color-mix(in srgb, var(--pm-accent) 82%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--pm-accent) 82%, #000); --bs-btn-active-color: #1a1a1d;
}

html, body {
    font-family: 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
    background-color: var(--pm-bg);
    color: var(--pm-text);
}

h1, h2, h3, h4, h5, h6 { color: var(--pm-heading); }

a {
    color: var(--pm-primary);
    text-decoration: none;
}
a:hover { text-decoration: underline; }

h1:focus { outline: none; }

/* ---------- General touches ---------- */
.btn { border-radius: .55rem; }
.card { border-radius: .75rem; border-color: var(--pm-line); background-color: var(--pm-surface); }
.pm-navbar .navbar-brand { letter-spacing: .5px; }
.form-control, .form-select { border-radius: .5rem; }
.pagination .page-link { color: var(--pm-text); border-radius: .4rem; margin: 0 .1rem; }
.pagination .page-item.active .page-link { background: var(--pm-primary); border-color: var(--pm-primary); color: #fff; }
/* Mobile refinements */
@media (max-width: 576px) {
    .container { padding-inline: .75rem; }
    .product-thumb { height: 150px; }
    .display-6 { font-size: 1.6rem; }
}

/* ---------- The navigation bar ---------- */
.pm-navbar {
    background: var(--pm-dark);
    border-bottom: 1px solid var(--pm-line);
}
.pm-navbar .navbar-brand { font-weight: 700; color: #fff; }
.pm-navbar .nav-link { color: #c7c7cf !important; }
.pm-navbar .nav-link:hover, .pm-navbar .nav-link.active { color: #fff !important; }

/* "Install app" in the mobile menu: a button (not a link) because it opens a dialog rather than a page,
   so it is dressed like the rest of the menu links, with the button background and borders removed. */
.pm-navbar .pm-nav-install {
    display: flex;
    align-items: center;
    gap: .45rem;
    width: 100%;
    background: none;
    border: 0;
    text-align: inherit;
    padding-inline-start: 0;
}
.pm-navbar .pm-nav-install svg { flex: none; }

/* The menu toggle button: the bar is always dark in both modes, so a white icon and light borders are
   pinned instead of bg-light (which turns dark grey in dark mode and vanishes). */
.pm-navbar .pm-navbar-toggler {
    border-color: rgba(255, 255, 255, .35);
    background-color: rgba(255, 255, 255, .08);
}
.pm-navbar .pm-navbar-toggler:focus { box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .2); }
.pm-navbar .pm-navbar-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ---------- The logo mark/wordmark ---------- */
/* The height is imposed here rather than in the logo file: the logo is now uploaded from the settings, and
   an SVG file with no width/height (which is common) computes to no dimensions and disappears, while a large
   raster image stretches the header. It is the same size the default logo carried, so the look is unchanged. */
.pm-logo-mark {
    display: inline-block;
    vertical-align: middle;
    height: 30px;
    width: auto;
    max-width: 190px;
    object-fit: contain;
}
.pm-wordmark {
    font-family: 'Tajawal', 'Segoe UI', Tahoma, sans-serif;
    font-weight: 700; letter-spacing: 1.5px; line-height: 1; text-transform: uppercase;
}
.pm-wordmark-accent { color: var(--pm-primary); }

/* The light/dark mode toggle button: show the icon of the mode it will switch to */
.pm-theme-toggle { line-height: 1; }
html[data-bs-theme="dark"] .pm-theme-toggle .pm-icon-dark { display: none; }
html[data-bs-theme="light"] .pm-theme-toggle .pm-icon-light { display: none; }

/* The colour swatch dots in the theme manager */
.pm-theme-dot { display: inline-block; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--pm-line); flex: none; }
.pm-theme-swatches { display: flex; gap: 6px; align-items: center; }
.pm-theme-swatch { width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--pm-line); flex: none; }

/* The brand logo preview in the settings: half light and half dark side by side, because a white logo
   disappears on the light half and a black one on the dark half, and the store offers both modes.
   The chequerboard on the light half reveals the transparent parts. */
.pm-brand-preview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 88px;
    border: 1px solid var(--pm-line);
    border-radius: .6rem;
    overflow: hidden;
}

.pm-brand-preview > div {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .45rem;
    min-width: 0;
}

.pm-brand-preview .pm-brand-light {
    background-color: #f2f2f4;
    background-image: linear-gradient(45deg, #d9d9de 25%, transparent 25%, transparent 75%, #d9d9de 75%),
                      linear-gradient(45deg, #d9d9de 25%, transparent 25%, transparent 75%, #d9d9de 75%);
    background-size: 16px 16px;
    background-position: 0 0, 8px 8px;
}

.pm-brand-preview .pm-brand-dark { background-color: #26262b; }

.pm-brand-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }

.pm-cart-badge {
    background: var(--pm-accent);
    color: #1a1a1d;
    font-size: .7rem;
}

/* A footer link: the footer is dark in every theme, so the text is a semi-transparent white that sharpens on hover */
.pm-footer-link {
    color: rgba(255,255,255,.78);
    text-decoration: none;
    font-weight: 600;
}
.pm-footer-link:hover,
.pm-footer-link:focus-visible { color: #fff; text-decoration: underline; }

/* ---------- The bottom navigation bar (mobile only) ---------- */
.pm-bottom-nav {
    position: fixed;
    bottom: 0;
    inset-inline: 0;
    z-index: 1080;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    gap: .1rem;
    min-height: calc(var(--pm-bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    padding: .3rem .3rem calc(.25rem + env(safe-area-inset-bottom, 0px));
    background: var(--pm-dark); /* the fallback for browsers with no backdrop-filter; the frosted glass is in the @supports below */
    border-top: 1px solid color-mix(in srgb, var(--pm-line) 75%, transparent);
    border-radius: 1.1rem 1.1rem 0 0;
    box-shadow: 0 -.5rem 1.5rem rgba(0,0,0,.45);
    /* The bar is dark in every theme, so the primary colour is lightened a little to stay legible on it,
       and white is used for the text instead of --pm-heading (which goes dark in the light themes). */
    --pm-bottom-on: color-mix(in srgb, var(--pm-primary) 72%, #fff);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .pm-bottom-nav {
        background: color-mix(in srgb, var(--pm-dark) 85%, transparent);
        -webkit-backdrop-filter: blur(16px) saturate(150%);
        backdrop-filter: blur(16px) saturate(150%);
    }
}
.pm-bottom-item,
.pm-bottom-cart {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    padding: .3rem .1rem;
    border-radius: .85rem;
    color: rgba(255,255,255,.66);
    text-decoration: none;
    font-size: .68rem;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
    transition: color .18s ease, transform .18s ease;
}
.pm-bottom-item:hover,
.pm-bottom-item:focus-visible { text-decoration: none; color: #fff; }
.pm-bottom-item:active { transform: scale(.94); }

/* The icon sits inside a round container that shades when active */
.pm-bottom-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 28px;
    border-radius: .7rem;
    transition: background-color .18s ease, color .18s ease;
}
.pm-bottom-icon svg { width: 21px; height: 21px; }
.pm-bottom-label {
    max-width: 100%;
    font-weight: 600;
    letter-spacing: .2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The active item: the primary colour + a halo behind the icon + a thin indicator on the bar's edge */
.pm-bottom-item.active { color: var(--pm-bottom-on); }
.pm-bottom-item.active .pm-bottom-icon { background: rgba(var(--pm-primary-rgb), .18); }
.pm-bottom-item.active::before {
    content: "";
    position: absolute;
    top: -.3rem;
    inset-inline: 32%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--pm-bottom-on);
    box-shadow: 0 0 .5rem rgba(var(--pm-primary-rgb), .85);
}

/* The prominent cart button in the middle (floating above the bar, as in the reference image) */
.pm-bottom-cart { color: #fff; margin-top: -20px; gap: .28rem; }
.pm-bottom-cart:hover,
.pm-bottom-cart:focus-visible { text-decoration: none; color: #fff; }
.pm-bottom-cart.active { color: var(--pm-bottom-on); }
.pm-bottom-cart-circle {
    position: relative;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    /* A gradient from a lighter shade to the primary colour — it keeps the same hue in every theme */
    background: linear-gradient(145deg, color-mix(in srgb, var(--pm-primary) 72%, #fff), var(--pm-primary));
    /* A ring in the bar's colour separates the button from the edge and gives the sense of floating */
    border: 3px solid var(--pm-dark);
    box-shadow: 0 .35rem .9rem rgba(var(--pm-primary-rgb), .45), inset 0 1px 0 rgba(255,255,255,.28);
    transition: transform .18s ease, box-shadow .18s ease;
}
.pm-bottom-cart-circle svg { width: 24px; height: 24px; }
.pm-bottom-cart:active .pm-bottom-cart-circle {
    transform: scale(.93);
    box-shadow: 0 .2rem .6rem rgba(var(--pm-primary-rgb), .4), inset 0 1px 0 rgba(255,255,255,.28);
}
/* The count badge on an ordinary item in the bar (My orders): a little smaller than the cart badge, because
   the icon here is 36x28 rather than a 52px circle, and with a border in the bar's colour to set it apart from the icon. */
.pm-bottom-badge {
    min-width: 17px;
    height: 17px;
    padding: 0 .22rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .58rem;
    line-height: 1;
    border: 2px solid var(--pm-dark);
}

/* The cart item count badge on the round button */
.pm-bottom-cart-circle .pm-cart-badge {
    min-width: 19px;
    height: 19px;
    padding: 0 .25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .62rem;
    line-height: 1;
    border: 2px solid var(--pm-dark);
}

@media (prefers-reduced-motion: reduce) {
    .pm-bottom-item,
    .pm-bottom-cart-circle { transition: none; }
    .pm-bottom-item:active,
    .pm-bottom-cart:active .pm-bottom-cart-circle { transform: none; }
}

/* ---------- The product card ---------- */
.product-card {
    border: 1px solid var(--pm-line);
    border-radius: .75rem;
    background: var(--pm-surface);
    overflow: hidden;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
    height: 100%;
}
.product-card:hover { box-shadow: 0 .5rem 1.25rem rgba(0,0,0,.5); border-color: var(--pm-primary); transform: translateY(-2px); }
.product-thumb {
    width: 100%; height: 190px; object-fit: cover; background: var(--pm-surface-2);
    display: flex; align-items: center; justify-content: center; color: var(--pm-steel);
}
.price-now { color: var(--pm-price); font-weight: 700; font-size: 1.15rem; }
.price-old { color: var(--pm-steel); text-decoration: line-through; font-size: .9rem; }
/* The card title (product/offer/bundle/category): it follows the heading colour per theme instead of a fixed text-dark */
.pm-card-title { color: var(--pm-heading); text-decoration: none; }
a.pm-card-title:hover { color: var(--pm-primary); }
.discount-badge {
    background: var(--pm-accent); color: #1a1a1d; border-radius: .5rem;
    padding: .1rem .5rem; font-size: .8rem; font-weight: 700;
}

/* ---------- A featured product ---------- */
.product-featured { border-color: var(--pm-primary); box-shadow: 0 0 0 2px var(--pm-primary) inset; }
.product-featured:hover { box-shadow: 0 0 0 2px var(--pm-primary) inset, 0 .5rem 1.25rem rgba(0,0,0,.5); }
.featured-badge {
    position: absolute; top: 10px; inset-inline-end: 10px;
    background: var(--pm-primary); color: #fff;
    font-size: .75rem; font-weight: 700; padding: .15rem .55rem; border-radius: .4rem;
    box-shadow: 0 .1rem .35rem rgba(0,0,0,.4);
}

/* ---------- An unavailable product ---------- */
.product-unavailable .product-thumb,
.product-unavailable .price-now,
.product-unavailable .price-old { filter: grayscale(1); opacity: .6; }
.unavailable-ribbon {
    position: absolute; top: 10px; inset-inline-start: 10px;
    background: #55555c; color: #fff; font-size: .75rem; font-weight: 600;
    padding: .15rem .5rem; border-radius: .4rem;
}

/* ---------- Product ratings ---------- */
/* The star is an SVG drawing rather than a character, so it follows the theme colour and keeps its size on
   every device. The filled stars take the accent colour and the empty ones the border colour. */
.pm-stars { display: inline-flex; align-items: center; gap: .1rem; line-height: 1; }
.pm-stars svg { width: 1.15rem; height: 1.15rem; color: var(--pm-accent); }
.pm-stars-sm svg { width: .9rem; height: .9rem; }
.pm-stars-lg svg { width: 1.6rem; height: 1.6rem; }

/* The display star: a clipped filled layer over an empty star, so fractions show (an average of 4.3). */
.pm-star { position: relative; display: inline-flex; color: var(--pm-line); }
.pm-star-fill {
    position: absolute; inset-block: 0; inset-inline-start: 0;
    overflow: hidden; display: inline-flex; color: var(--pm-accent);
}
/* The clip starts from the star's own edge, not the page's, so it flips with the writing direction. */
.pm-stars .pm-star-fill svg { display: block; }

/* The star picker: empty stars that grow a little on hover, and fill with the accent colour when picked. */
.pm-star-btn {
    background: none; border: 0; padding: 0 .05rem; line-height: 1; cursor: pointer;
    color: var(--pm-line); transition: transform .12s ease, color .12s ease;
}
.pm-star-btn:hover { transform: scale(1.12); }
.pm-star-btn:focus-visible { outline: 2px solid var(--pm-primary); outline-offset: 2px; border-radius: .25rem; }
/* The fill comes from CSS rather than a fill attribute in the drawing: that way the hover preview switches with no trip to the server. */
.pm-star-btn.is-on { color: var(--pm-accent); }
.pm-star-btn.is-on svg { fill: currentColor; }

/* The hover preview: the star under the pointer and everything before it fills, and everything after empties.
   "~" works in DOM order rather than display order, so the preview holds in both directions (RTL and LTR).
   It is confined to pointer devices: on touch, :hover sticks after the tap. */
@media (hover: hover) {
    /* While hovering the group: empty everything first (even the picked one) then fill up to the pointer. */
    .pm-stars-pick:hover .pm-star-btn { color: var(--pm-line); }
    .pm-stars-pick:hover .pm-star-btn svg { fill: none; }
    .pm-stars-pick:hover .pm-star-btn:hover,
    .pm-stars-pick .pm-star-btn:has(~ .pm-star-btn:hover) { color: var(--pm-accent); }
    .pm-stars-pick:hover .pm-star-btn:hover svg,
    .pm-stars-pick .pm-star-btn:has(~ .pm-star-btn:hover) svg { fill: currentColor; }
}

/* The large average next to the stars. */
.pm-rating-avg { font-size: 2.4rem; font-weight: 700; color: var(--pm-heading); line-height: 1; }

/* The star breakdown bars: a fixed width at both ends so the bars line up vertically. */
.pm-rating-bar { height: .5rem; background: var(--pm-surface-2); }
.pm-rating-bar .progress-bar { background: var(--pm-accent); }
.pm-rating-bar-label { width: 2.2rem; }
.pm-rating-bar-count { width: 1.8rem; text-align: end; }

/* Customer reviews: the first one needs no rule above it (the heading separates it). */
.pm-review:first-of-type { border-top: 0 !important; }

/* ---------- Favourites ---------- */
/* The heart button: transparent until it is switched on, then it fills with the accent colour. It is used
   floating over the card image (pm-fav-float) or as a button with text on the product page (pm-fav-inline). */
.pm-fav-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    background: none; border: none; padding: 0; line-height: 1;
    color: var(--pm-steel); cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .15s ease, transform .15s ease, background-color .15s ease;
}
.pm-fav-btn svg { width: 22px; height: 22px; }
.pm-fav-btn:hover { color: var(--pm-accent); }
.pm-fav-btn:active { transform: scale(.9); }
.pm-fav-btn.is-on { color: var(--pm-accent); }

/* The heart floating over the card image — an opaque disc, so it shows on any image */
.pm-fav-float {
    position: absolute; top: .5rem; inset-inline-start: .5rem;
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(0,0,0,.42); color: #fff;
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    box-shadow: 0 .1rem .35rem rgba(0,0,0,.35);
}
.pm-fav-float svg { width: 19px; height: 19px; }
.pm-fav-float:hover { background: rgba(0,0,0,.55); color: var(--pm-accent); }

/* The favourites button with text on the product page */
.pm-fav-inline {
    border: 1px solid var(--pm-line); border-radius: .5rem;
    padding: .45rem .9rem; font-weight: 600; color: var(--pm-text);
}
.pm-fav-inline:hover { border-color: var(--pm-accent); color: var(--pm-accent); }
.pm-fav-inline.is-on { border-color: var(--pm-accent); color: var(--pm-accent); }

/* An icon in the top navigation bar (mobile): favourites and contact — outside the collapsed menu
   so they stay visible without opening it. */
.pm-nav-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: .6rem; color: #fff; text-decoration: none;
}
.pm-nav-icon svg { width: 22px; height: 22px; }
.pm-nav-icon:hover { color: var(--pm-accent); }
/* The badge on the icon's start edge — the side away from the menu button in both directions */
.pm-fav-nav-badge {
    position: absolute; top: 0; inset-inline-start: 0;
    min-width: 18px; padding: .1rem .3rem; line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
    .pm-fav-btn { transition: none; }
    .pm-fav-btn:active { transform: none; }
}

/* ---------- A category ---------- */
.category-grid {
    display: flex; flex-wrap: wrap; gap: 1.5rem 1.75rem;
}
.category-tile {
    display: block; text-align: center; text-decoration: none; width: 6.5rem;
}
.category-tile:hover { text-decoration: none; }
.category-tile:hover .category-icon {
    box-shadow: 0 .4rem 1rem rgba(0,0,0,.45);
    border-color: var(--pm-primary);
    transform: scale(1.07)
}
.category-icon {
    width: 72px; height: 72px; object-fit: cover; border-radius: 50%;
    background: var(--pm-surface-2); border: 1px solid var(--pm-line); margin-inline: auto;
    transition: box-shadow .15s ease, border-color .15s ease;
}

/* ---------- The main slider ---------- */
.hero-carousel { border-radius: 1rem; overflow: hidden; box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.5); }
.hero-slide {
    min-height: 340px; color: #fff; display: flex; align-items: center;
}
/* Enough side padding that the text does not run into the navigation buttons (the arrows) */
.hero-slide-body { padding: 2.5rem 4.5rem; max-width: 640px; }
.hero-slide-body h2 { font-size: clamp(1.6rem, 4vw, 2.6rem); color: #fff; }
/* Shrink the navigation buttons' area and set them off on a semi-transparent circle */
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next { width: 3.5rem; }
.hero-carousel .carousel-control-prev-icon,
.hero-carousel .carousel-control-next-icon {
    background-color: rgba(0,0,0,.45); border-radius: 50%; padding: 1rem;
    background-size: 50%;
}
@media (max-width: 576px) {
    .hero-slide { min-height: 240px; }
    .hero-slide-body { padding: 1.5rem 3rem; }
    .hero-carousel .carousel-control-prev,
    .hero-carousel .carousel-control-next { width: 2.5rem; }
}

/* ---------- The offers banner ---------- */
.offer-banner {
    border-radius: 1rem; color: #fff; padding: 2.5rem 2rem; min-height: 220px;
    display: flex; flex-direction: column; justify-content: center;
    background: linear-gradient(120deg, var(--pm-ink), var(--pm-primary));
    background-size: cover; background-position: center;
}

/* ---------- The admin panel ---------- */
.admin-sidebar { background: var(--pm-dark); min-height: 100vh; border-inline-end: 1px solid var(--pm-line); }
/* Pin the sidebar on medium screens and up, with its own scrolling where needed */
@media (min-width: 768px) {
    .admin-sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        overflow-y: auto;
    }
}
.admin-sidebar .nav-link { color: #c7c7cf; border-radius: .4rem; padding-top: .35rem; padding-bottom: .35rem; }
.admin-sidebar .nav-link:hover, .admin-sidebar .nav-link.active { background: rgba(255,255,255,.10); color: #fff; }
/* Tighten the spacing to avoid scrolling in the sidebar */
.admin-sidebar { padding-top: .85rem !important; padding-bottom: .85rem !important; }
.admin-sidebar hr { margin-top: .6rem; margin-bottom: .6rem; }

/* The exchange rate card in the sidebar */
.admin-rate {
    background: rgba(255,255,255,.06);
    border: 1px solid var(--pm-line);
    border-radius: .5rem;
    padding: .45rem .6rem;
    transition: background .15s ease;
}
.admin-rate:hover { background: rgba(255,255,255,.10); }
.admin-rate-label { color: #c7c7cf; font-size: .82rem; }
.admin-rate-value { color: #fff; font-weight: 700; font-size: .9rem; }
.admin-rate-updated { color: rgba(255,255,255,.5); font-size: .72rem; margin-top: .15rem; }

/* Isolate the dates/times (LTR content) from the Arabic RTL interface direction so their parts are not
   reordered (which would show, say, "PM 04:13 2026-07-09"), while keeping them on one line. */
.pm-ltr { direction: ltr; unicode-bidi: isolate; white-space: nowrap; }

/* ---------- The Bootstrap tables — they follow the theme colours ---------- */
/* They replace the fixed bg-white/table-light so they render correctly in the dark and light modes.
   pm-admin-table is an older alias the admin panel tables use. */
.table.pm-table,
.table.pm-admin-table {
    --bs-table-color: var(--pm-text);
    --bs-table-bg: var(--pm-surface);
    --bs-table-border-color: var(--pm-line);
    --bs-table-striped-color: var(--pm-text);
    --bs-table-hover-color: var(--pm-text);
    border-color: var(--pm-line);
}
/* The header and footer stripes on a recessed surface instead of the fixed table-light */
/* The admin panel tables are matched on thead itself rather than on pm-thead. */
.table.pm-table > thead.pm-thead,
.table.pm-table > tfoot.pm-tfoot,
.table.pm-admin-table > thead {
    --bs-table-color: var(--pm-heading);
    --bs-table-bg: var(--pm-surface-2);
}

/* ---------- A virtualized list (Virtualize) ---------- */
/* Horizontal scrolling only for the wide table; the vertical scrolling is left to the main page scroll (a single scrollbar). */
.admin-table {
    overflow-x: auto;
    background: var(--pm-surface);
    border: 1px solid var(--pm-line);
    border-radius: .75rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.3);
}
/* The header and the rows share the same minimum width, so they stay aligned while scrolling horizontally. */
.admin-table-head {
    position: sticky; top: 0; z-index: 2;
    background: var(--pm-surface-2); min-width: 1000px;
    border-bottom: 1px solid var(--pm-line);
    color: var(--pm-steel); font-weight: 600;
    font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
}
.admin-row { min-width: 1000px; border-bottom: 1px solid var(--pm-line); transition: background .12s ease; }
.admin-row:last-child { border-bottom: 0; }
.admin-row:hover { background: color-mix(in srgb, var(--pm-primary) 8%, transparent); }
.admin-row-hidden { background: color-mix(in srgb, var(--pm-steel) 10%, transparent); opacity: .78; }
.admin-row-hidden:hover { opacity: 1; }

/* A product thumbnail inside the table */
.admin-thumb {
    width: 48px; height: 48px;
    object-fit: cover; border-radius: .5rem;
    border: 1px solid var(--pm-line);
}
.admin-thumb-empty {
    display: flex; align-items: center; justify-content: center;
    border-style: dashed; border-color: var(--pm-line);
    background: var(--pm-surface-2); color: var(--pm-steel); font-size: 1.1rem;
}
.admin-name { font-weight: 600; color: var(--pm-text); line-height: 1.25; }
.admin-cat-chip {
    display: inline-block; max-width: 100%;
    background: var(--pm-line); color: var(--pm-text);
    border-radius: 1rem; padding: .15rem .6rem;
    font-size: .78rem; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.admin-price { font-weight: 600; color: var(--pm-text); }
.admin-price-off { font-weight: 600; color: #34c759; }

/* The soft (dark) status badges */
.admin-badge-avail   { background: rgba(52,199,89,.16); color: #4cd964; }
.admin-badge-unavail { background: color-mix(in srgb, var(--pm-steel) 16%, transparent); color: var(--pm-steel); }
.admin-badge-featured{ background: color-mix(in srgb, var(--pm-primary) 16%, transparent); color: var(--pm-accent); }
.admin-badge-hidden  { background: color-mix(in srgb, var(--pm-steel) 12%, transparent); color: var(--pm-steel); }

.admin-empty-icon { font-size: 2.25rem; opacity: .7; }

/* ---------- The admin panel form sections (the add/edit dialog) ---------- */
.pm-form-section {
    padding: 1rem 1.1rem;
    border: 1px solid var(--pm-line);
    border-radius: .65rem;
    background: var(--pm-surface);
}
.pm-form-section + .pm-form-section { margin-top: 1rem; }
.pm-form-section-title {
    font-weight: 700; font-size: .92rem; color: var(--pm-text);
    margin-bottom: .9rem; padding-bottom: .55rem;
    border-bottom: 1px solid var(--pm-line);
    display: flex; align-items: center; gap: .4rem;
}
.pm-form-section .form-switch { padding-top: .1rem; }
.pm-form-section .form-check-label { cursor: pointer; }

/* ---------- Switching the main image on the details pages ---------- */
/* Global (not scoped) because the image is drawn by the shared ImageViewer component. */
.pm-main-img { will-change: transform, opacity; }
.pm-main-img.pm-slide-next { animation: pm-img-slide-next .3s ease-out; }
.pm-main-img.pm-slide-prev { animation: pm-img-slide-prev .3s ease-out; }
/* In a right-to-left layout "next" moves towards the left, so it enters from the left. */
@keyframes pm-img-slide-next {
    from { opacity: 0; transform: translateX(-24px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes pm-img-slide-prev {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ---------- The upload preview and setting the crop position ---------- */
/* The frame shows exactly the part the customer will see, and the admin drags the image inside it to pick that. */
.pm-focal {
    position: relative; flex: none;
    border: 1px solid var(--pm-line); border-radius: .5rem;
    background: var(--pm-surface-2); overflow: hidden;
    cursor: grab;
    touch-action: none;           /* dragging moves the image, it does not scroll the page */
    user-select: none;
}
.pm-focal.is-dragging { cursor: grabbing; }
/* An image with the frame's own ratio is not cropped, so there is nothing to move. */
.pm-focal.is-fixed { cursor: default; }

.pm-focal-img {
    display: block; width: 100%; height: 100%; object-fit: cover;
    -webkit-user-drag: none; user-select: none; pointer-events: none;
}

/* A faint rule-of-thirds grid while dragging, to help line the shot up. */
.pm-focal.is-dragging::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(to right, transparent calc(33.33% - 1px), rgba(255,255,255,.45) calc(33.33% - 1px),
            rgba(255,255,255,.45) 33.33%, transparent 33.33%, transparent calc(66.66% - 1px),
            rgba(255,255,255,.45) calc(66.66% - 1px), rgba(255,255,255,.45) 66.66%, transparent 66.66%),
        linear-gradient(to bottom, transparent calc(33.33% - 1px), rgba(255,255,255,.45) calc(33.33% - 1px),
            rgba(255,255,255,.45) 33.33%, transparent 33.33%, transparent calc(66.66% - 1px),
            rgba(255,255,255,.45) calc(66.66% - 1px), rgba(255,255,255,.45) 66.66%, transparent 66.66%);
    box-shadow: inset 0 0 0 2px var(--pm-primary);
}

/* A hint icon for dragging, which disappears while it happens. */
.pm-focal-grip {
    position: absolute; inset-block-end: .25rem; inset-inline-end: .25rem;
    width: 1.35rem; height: 1.35rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .75rem; line-height: 1; color: #fff;
    background: rgba(0,0,0,.45); pointer-events: none;
    transition: opacity .15s ease;
}
.pm-focal.is-dragging .pm-focal-grip,
.pm-focal.is-fixed .pm-focal-grip { opacity: 0; }

.pm-focal-empty {
    display: flex; align-items: center; justify-content: center;
    border-style: dashed; color: var(--pm-steel); cursor: default;
}

/* ---------- The product filter bar (a single line) ---------- */
.pm-filter-bar .input-group-text {
    background: var(--pm-surface-2); color: var(--pm-steel);
    font-size: .82rem; font-weight: 600;
    border-color: var(--pm-line);
}
.pm-filter-bar .form-select, .pm-filter-bar .form-control { border-color: var(--pm-line); }

/* ---------- The clickable product name/image + the details dialog ---------- */
.admin-thumb-clickable { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.admin-thumb-clickable:hover { transform: scale(1.06); box-shadow: 0 .2rem .5rem rgba(0,0,0,.5); }
.admin-name-link {
    border: 0; background: none; padding: 0; text-align: inherit;
    color: var(--pm-text); font-weight: 600; cursor: pointer;
}
.admin-name-link:hover { color: var(--pm-primary); text-decoration: underline; }

.pm-view-main-img {
    width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
    border-radius: .6rem; border: 1px solid var(--pm-line);
}
.pm-view-img-empty {
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem; background: var(--pm-surface-2); color: var(--pm-steel); border-style: dashed;
}
.pm-view-thumb {
    width: 56px; height: 56px; object-fit: cover;
    border-radius: .45rem; border: 1px solid var(--pm-line);
}
.pm-view-dl dt { color: var(--pm-steel); font-weight: 600; }
.pm-view-dl dd { color: var(--pm-text); margin-bottom: .5rem; }
.pm-view-desc { white-space: pre-wrap; }
/* The barcode stays on a white background so it remains scannable */
.pm-view-barcode {
    padding: .85rem; border: 1px solid var(--pm-line); border-radius: .6rem;
    background: #fff; text-align: center;
}
.pm-view-barcode-img { max-width: 100%; height: auto; }
.pm-view-code { font-size: 1rem; letter-spacing: .12em; color: #1a1a1d; }

/* ---------- The settings page tabs ---------- */
.pm-settings-tabs {
    gap: .35rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--pm-line);
}
.pm-settings-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: -1px;
    padding: .55rem 1.05rem;
    font-weight: 600;
    color: var(--pm-steel);
    background: transparent;
    border: 1px solid transparent;
    border-radius: .55rem .55rem 0 0;
    transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.pm-settings-tabs .nav-link:hover {
    color: var(--pm-heading);
    background: var(--pm-surface-2);
}
.pm-settings-tabs .nav-link.active {
    color: var(--pm-primary);
    background: var(--pm-surface);
    border-color: var(--pm-line);
    border-bottom-color: var(--pm-surface);
}
@media (max-width: 575.98px) {
    /* On small screens show the icons only, to avoid wrapping. */
    .pm-settings-tabs .nav-link { padding: .5rem .7rem; }
    .pm-settings-tabs .nav-link span { display: none; }
}

/* ---------- A separate save button per settings tab ---------- */
.pm-settings-actions {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--pm-line);
}
.pm-settings-actions .btn { min-width: 200px; }

/* ---------- The floating WhatsApp button ---------- */
.pm-wa-fab {
    position: fixed; bottom: 88px; inset-inline-start: 20px; z-index: 1085;
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    background: #25d366; color: #fff; border-radius: 50%;
    box-shadow: 0 .35rem .9rem rgba(37,211,102,.45);
    transition: transform .15s ease, box-shadow .15s ease;
}
.pm-wa-fab:hover {
    color: #fff; text-decoration: none; transform: scale(1.07);
    box-shadow: 0 .5rem 1.1rem rgba(37,211,102,.55);
}

/* ---------- The chat widget ---------- */
.pm-chat-fab {
    position: fixed; bottom: 20px; inset-inline-start: 20px; z-index: 1085;
    width: 56px; height: 56px; line-height: 1;
    display: flex; align-items: center; justify-content: center; padding: 0;
}
.pm-chat-header-icon { vertical-align: -3px; margin-inline-end: .35rem; }
/* Flashing the chat icon to catch the visitor's eye */
.pm-chat-flash { animation: pmFlash 0.6s ease-in-out 5; }
@keyframes pmFlash {
    0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255,106,0,.7); }
    50%  { transform: scale(1.15); box-shadow: 0 0 0 12px rgba(255,106,0,0); }
    100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255,106,0,0); }
}
.pm-chat-panel {
    position: fixed; bottom: 88px; inset-inline-start: 20px; z-index: 1085;
    width: 330px; max-width: calc(100vw - 40px); height: 440px; max-height: 70vh;
    background: var(--pm-surface); border: 1px solid var(--pm-line);
    border-radius: .75rem; display: flex; flex-direction: column; overflow: hidden;
}
.pm-chat-header {
    background: var(--pm-dark); color: #fff; padding: .6rem .9rem;
    display: flex; justify-content: space-between; align-items: center; font-weight: 600;
}
.pm-chat-body { flex: 1; overflow-y: auto; padding: .75rem; background: var(--pm-surface-2); }
/* The message box grows with the text and then scrolls, and the send button stays aligned to its bottom */
.pm-chat-input { display: flex; gap: .4rem; padding: .5rem; border-top: 1px solid var(--pm-line); align-items: flex-end; }
.pm-chat-input .btn { flex: none; align-self: flex-end; }
/* The message editor: its height comes from its content (with no calculation in JS), and the line breaks and spacing stay as typed */
.pm-chat-editor {
    flex: 1 1 auto; min-width: 0; cursor: text;
    white-space: pre-wrap; overflow-wrap: anywhere; text-align: start;
    min-height: 38px; max-height: 140px; height: auto; overflow-y: auto; line-height: 1.4;
}
/* Hint text standing in for a placeholder (unavailable on contenteditable elements) */
.pm-chat-editor:empty::before { content: attr(data-placeholder); color: var(--pm-steel); pointer-events: none; }
.pm-chat-editor[contenteditable="false"] { background: var(--pm-surface-2); cursor: default; }
/* A link while it is being typed looks the same as it will in the sent message */
.pm-chat-editor .pm-msg-link { color: var(--pm-primary); }
.pm-msg { margin-bottom: .5rem; display: flex; flex-direction: column; }
.pm-msg.from-me { align-items: flex-start; }
.pm-msg.from-admin { align-items: flex-end; }
/* pre-wrap: the message lines as their author typed them — anywhere: a long link wraps instead of overflowing the bubble */
.pm-msg-bubble { padding: .4rem .7rem; border-radius: .75rem; max-width: 80%; font-size: .9rem; white-space: pre-wrap; overflow-wrap: anywhere; }
/* A link inside a message: its direction is isolated so it reads correctly amid Arabic text */
.pm-msg-link { text-decoration: underline; unicode-bidi: isolate; }
.pm-msg.from-me .pm-msg-link { color: #fff; }
.pm-msg.from-me .pm-msg-bubble { background: var(--pm-primary); color: #fff; border-bottom-inline-start-radius: .15rem; }
.pm-msg.from-admin .pm-msg-bubble { background: var(--pm-line); color: var(--pm-text); border-bottom-inline-end-radius: .15rem; }
.pm-msg-time { font-size: .65rem; color: var(--pm-steel); margin-top: .1rem; }
/* The message status icons (check / double check) */
.msg-ticks { font-size: .8rem; letter-spacing: -3px; margin-inline-start: .25rem; }
.msg-ticks.read { color: #4aa3ff; }      /* blue: read */
.msg-ticks.delivered { color: var(--pm-steel); } /* grey: delivered */
.msg-ticks.sent { color: var(--pm-steel); letter-spacing: normal; } /* grey: a single check */
/* The counter badge on the floating chat button (the button is fixed = the reference for absolute positioning) */
.pm-chat-fab .pm-fab-badge {
    position: absolute; top: -8px; inset-inline-end: -14px;
    padding: 0; min-width: 18px; height: 18px;
    display: flex; align-items: center; justify-content: center;
    font-size: .62rem; line-height: 1; border: 2px solid var(--pm-dark);
}
/* The admin conversation box, its height set by the window (with no page scrolling) */
.admin-chat-body { flex: none !important; height: calc(100vh - 280px); min-height: 240px; }

/* ---------- The price range slider (two handles) ---------- */
.pm-price-range { position: relative; height: 36px; }
.pm-range-track,
.pm-range-fill {
    position: absolute; top: 50%; transform: translateY(-50%);
    height: 5px; border-radius: 5px;
}
.pm-range-track { inset-inline: 0; background: var(--pm-line); }
.pm-range-fill { background: var(--pm-primary); }
/* The two handles overlap across the full width; the track does not catch clicks, only the thumb does. */
.pm-price-range input[type=range] {
    position: absolute; top: 0; left: 0; width: 100%; height: 36px; margin: 0;
    background: none; pointer-events: none; -webkit-appearance: none; appearance: none;
}
.pm-price-range input[type=range]::-webkit-slider-runnable-track { background: none; border: none; }
.pm-price-range input[type=range]::-moz-range-track { background: none; border: none; }
.pm-price-range input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; pointer-events: auto;
    width: 20px; height: 20px; border-radius: 50%; background: #fff;
    border: 3px solid var(--pm-primary); cursor: pointer; margin-top: -8px;
    box-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.pm-price-range input[type=range]::-moz-range-thumb {
    pointer-events: auto; width: 20px; height: 20px; border-radius: 50%; background: #fff;
    border: 3px solid var(--pm-primary); cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,.5);
}

/* ---------- The filters ---------- */
.pm-filters-toggle { font-weight: 600; }
/* A sticky sidebar for the filters on desktop */
@media (min-width: 992px) {
    .pm-filters-panel { position: sticky; top: 1rem; }
}
/* Larger touch targets and clearer fields on mobile and tablet (where the filters are a pop-out panel) */
@media (max-width: 991.98px) {
    .pm-filters .form-select,
    .pm-filters .form-control { min-height: 44px; }
    .pm-filters .form-check { padding-block: .35rem; }
    .pm-filters .form-check-input { width: 1.15em; height: 1.15em; }
}

/* ---------- Forms / validation ---------- */
.valid.modified:not([type=checkbox]) { outline: 1px solid #34c759; }
.invalid { outline: 1px solid #ff5a5a; }
.validation-message { color: #ff6b6b; font-size: .85rem; }

/* Clear room at the bottom of the page and around the chat button so the bottom bar does not cover them on mobile.
   It comes at the end of the file so it overrides the base .pm-chat-fab/.pm-chat-panel rules. */
@media (max-width: 991.98px) {
    /* The spacing follows the bar height + the safe area, so it needs no change when its design does */
    .pm-footer { margin-bottom: calc(var(--pm-bottom-nav-h) + env(safe-area-inset-bottom, 0px)); }
    .pm-chat-fab { bottom: calc(var(--pm-bottom-nav-h) + 16px + env(safe-area-inset-bottom, 0px)); }
    .pm-chat-panel,
    .pm-wa-fab { bottom: calc(var(--pm-bottom-nav-h) + 84px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- The SweetAlert2 dialogs in the theme colours ----------
   Applied to the centred dialogs only (:not(.swal2-toast)) so the top success bar keeps its default look.
   The dialog is appended to the body, so it inherits the --pm-* variables. */
.swal2-popup:not(.swal2-toast) {
    background: var(--pm-surface);
    color: var(--pm-text);
    border: 1px solid var(--pm-line);
    border-radius: .75rem;
}
.swal2-popup:not(.swal2-toast) .swal2-title { color: var(--pm-heading); }
.swal2-popup:not(.swal2-toast) .swal2-html-container { color: var(--pm-text); }
.swal2-popup:not(.swal2-toast) .swal2-confirm.swal2-styled {
    background: var(--pm-primary);
    color: #fff;
    box-shadow: none;
}
.swal2-popup:not(.swal2-toast) .swal2-confirm.swal2-styled:hover {
    background: color-mix(in srgb, var(--pm-primary) 88%, #000);
}
.swal2-popup:not(.swal2-toast) .swal2-confirm.swal2-styled:focus {
    box-shadow: 0 0 0 3px rgba(var(--pm-primary-rgb), .4);
}

/* ============================================================
   The full-size image viewer — global styles shared by both components:
   the interactive ImageViewer (in the public UI) and StaticImageViewer on
   the static admin panel pages. They used to live in ImageViewer.razor.css
   alone, and were moved here so they are not duplicated and left to drift apart.
   ============================================================ */

/* ---------- The trigger ---------- */
.pm-zoomable {
    cursor: zoom-in;
}

.pm-zoomable:focus-visible {
    outline: 2px solid var(--pm-primary);
    outline-offset: 2px;
}

/* ---------- The full-size layer ---------- */
.pm-lightbox {
    position: fixed;
    inset: 0;
    /* Above the Bootstrap modals (1055) and above the waiting indicator (3000) */
    z-index: 10600;
    display: flex;
    flex-direction: column;
    background: rgba(8, 10, 14, .93);
    backdrop-filter: blur(3px);
    animation: pm-lightbox-in .18s ease;
    overscroll-behavior: contain;
}

/* The toolbar in the outer top corner (right in LTR and left in RTL) */
.pm-lightbox-toolbar {
    position: absolute;
    top: calc(.75rem + env(safe-area-inset-top, 0px));
    inset-inline-end: .75rem;
    z-index: 1;
    display: flex;
    gap: .5rem;
}

.pm-lightbox-btn {
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    font-size: 1.2rem;
    line-height: 1;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 50%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s ease, transform .15s ease, border-color .15s ease;
}

.pm-lightbox-btn:hover,
.pm-lightbox-btn:focus-visible {
    background: rgba(255, 255, 255, .3);
    border-color: rgba(255, 255, 255, .5);
    transform: scale(1.07);
    outline: none;
}

.pm-lightbox-btn-close {
    font-size: 1.35rem;
    font-weight: 700;
}

/* ---------- The image area ---------- */
.pm-lightbox-stage {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    /* Images larger than the screen scroll rather than being cut off */
    overflow: auto;
    touch-action: pinch-zoom;
    -webkit-overflow-scrolling: touch;
}

.pm-lightbox-img {
    /* The default state: fit the whole screen */
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: .35rem;
    cursor: zoom-in;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .55);
}

/* Original size: the image at its real dimensions with the frame scrolling around it.
   margin:auto keeps it centred as long as it is smaller than the frame. */
.pm-lightbox.is-zoomed .pm-lightbox-stage {
    align-items: flex-start;
    justify-content: flex-start;
    touch-action: auto;
}

.pm-lightbox.is-zoomed .pm-lightbox-img {
    max-width: none;
    max-height: none;
    margin: auto;
    cursor: zoom-out;
}

@media (max-width: 576px) {
    .pm-lightbox-stage {
        padding: .35rem;
    }
}

@keyframes pm-lightbox-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ============================================================
   The product autocomplete — global styles shared by both components:
   the interactive ProductSelect and StaticProductSelect on the static pages.
   They used to live in ProductSelect.razor.css alone, and were moved here so they are not duplicated.
   ============================================================ */
.product-autocomplete {
    position: relative;
}

.pa-input-wrap {
    position: relative;
}

/* The clear-selection button inside the box (it respects the right-to-left direction) */
.pa-clear {
    position: absolute;
    inset-inline-end: .5rem;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--pm-steel);
    font-size: .85rem;
    line-height: 1;
    cursor: pointer;
    padding: .15rem .3rem;
}

.pa-clear:hover {
    color: #ff6b6b;
}

.product-autocomplete .form-control {
    padding-inline-end: 1.8rem;
}

/* The results list: it appears below the box and floats over the other fields */
.pa-menu {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 2px);
    z-index: 1085;
    background: var(--pm-surface);
    border: 1px solid var(--pm-line);
    border-radius: .5rem;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .5);
    max-height: 260px;
    overflow-y: auto;
    padding: .25rem;
}

.pa-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    width: 100%;
    text-align: start;
    border: 0;
    background: transparent;
    border-radius: .375rem;
    padding: .45rem .6rem;
    cursor: pointer;
}

.pa-item:hover,
.pa-item.active {
    background: rgba(255, 106, 0, .14);
}

.pa-item.disabled {
    color: var(--pm-steel);
    cursor: not-allowed;
}

.pa-name {
    font-weight: 500;
}

.pa-taken {
    font-size: .75rem;
    color: #ff8a33;
    margin-inline-start: .35rem;
}

.pa-meta {
    display: flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.pa-code {
    font-family: monospace;
    font-size: .75rem;
    color: var(--pm-text);
    background: var(--pm-surface-2);
    border-radius: .3rem;
    padding: .05rem .35rem;
}

.pa-price {
    font-size: .8rem;
    color: #34c759;
    font-weight: 600;
}

.pa-empty,
.pa-more {
    padding: .5rem .6rem;
    font-size: .8rem;
    color: var(--pm-steel);
}

.pa-more {
    text-align: center;
    border-top: 1px solid var(--pm-line);
}