/**
 * Widget zamowienia - arkusz ZBUDOWANY Z MAKIETY, nie pisany od nowa.
 *
 * ZRODLA (w tej kolejnosci):
 *  1. zmienne motywu z molique 1.7.26 - te same, na ktorych stoi makieta;
 *  2. reguly molique uzywane przez makiete (`.input`, `.form-floating`,
 *     `.selection-tile`, siatki, typografia);
 *  3. `planer-theme.css` i `planer-zamowienie.css` z makiety - caly wyglad
 *     kreatora zamowienia.
 *
 * WSZYSTKO ZAWEZONE DO `.briko-order-widget`. To rozwiazuje problem, przez
 * ktory widget nie mogl po prostu zaladowac molique: framework jest pisany
 * w `@layer`, a regula motywu klienta stojaca POZA warstwami bije kazda
 * z nich. Tutaj warstw nie ma, a przedrostek podnosi specyficznosc na tyle,
 * ze motyw strony nie przemaluje widgetu - i jednoczesnie nic z tego arkusza
 * nie wychodzi poza widget.
 *
 * ZMIENNE SIEDZA NA `.briko-order-widget`, nie na `:root`: paleta widgetu ma
 * byc jego wlasna, niezalezna od tego, co ustawil motyw strony.
 *
 * PLIK JEST GENEROWANY (`scratchpad/build-widget-css.py`) - poprawki wnos
 * w makiecie albo w generatorze, nie tutaj.
 */

.briko-order-widget {
    /* Declares the color scheme for the browser. Without it, system colors
       (CanvasText etc.) are ALWAYS light-scheme - e.g. the native <dialog>
       gets color: CanvasText (black) from the UA, and in dark mode headings
       (color: inherit) turn black on a dark card. This declaration also
       fixes native scrollbars and form controls. */
    color-scheme: light;
    /* Fonts with a system fallback. Both body and headings use FontHeading
       (Poppins) - the v2 design refresh (see the "Molique Design System
       Modernization" artifact). One typeface across the whole system -
       FontBody was removed from _fonts.scss along with Inter. */
    --font-family-base: 'FontHeading', system-ui, -apple-system, sans-serif;
    --font-family-heading: 'FontHeading', system-ui, -apple-system, sans-serif;
    /* "Slate Violet" PALETTE (2026-07) - primary stays in the indigo family
       (close to the previous v2), but success/danger/warning/info were
       swapped for DARKER, more saturated shades of the same color type.
       Reason: the previous ones (light/pastel) only worked as a background
       with dark text on top - as plain text on --bg-body/--bg-surface they
       gave only 2.2-4.2:1 (below the WCAG 4.5:1 threshold), hence the whole
       separate "-text" system below. The new colors are chosen to PASS
       4.5:1 in BOTH directions at once: as text on a light background AND
       as a background with white text on top - one color, one role, zero
       second set to maintain. Verified by computing the contrast ratio
       (WCAG 2.1 formula), not by eye - see --semantic-fg below, the other
       side of this same change (text ON a colored background, buttons/badges). */
    --primary: #4F46E5;
    --primary-hover: #463ECA;
    --light: #F9F9F9;
    --dark: #14162B;
    --secondary: #71717A;
    --secondary-hover: #63636B;
    --success: #0E793C;
    --success-hover: #0C6A35;
    --danger: #E11D48;
    --danger-hover: #C61A3F;
    --warning: #B45309;
    --warning-hover: #9E4908;
    --info: #006FEE;
    --info-hover: #0062D1;
    /* "-text" variants - IDENTICAL to the base in this palette (see the
       comment above: the new success/warning/danger/info already pass
       4.5:1 as plain text, so a separately darkened version is no longer
       needed). The variable names stay - dozens of places in the code
       (.text-success, .bg-warning-subtle, .stat-tile-icon-danger, etc.)
       already use them, so aliasing to the base is a zero-risk change that
       doesn't touch those files. In dark mode this alias already existed
       (see below) - now both themes work the same way for the same reason. */
    --success-text: var(--success);
    --warning-text: var(--warning);
    --danger-text: var(--danger);
    --info-text: var(--info);
    /* Background and text colors */
    --bg-body: #F5F6FC; /* Cool neutral behind panels */
    --bg-surface: #FFFFFF; /* Pure white for cards and main containers */
    --text-main: var(--dark);
    --text-muted: var(--secondary);
    --border-color: #E7E8F2;
    /* ADMIN SIDEBAR VARIABLES.
       NOTE: the sidebar is ALWAYS dark (--sidebar-bg doesn't change in
       dark mode), so its light accents must be literal - do NOT use
       var(--light) / var(--light-rgb) here, since dark mode inverts those
       variables (light → dark) and the text and highlights disappear on
       the sidebar's dark background. sidebar-bg is now semi-transparent
       (rgba, the v2 "glass" look - see the artifact), hence it depends on
       --sidebar-rgb below instead of a literal hex value. */
    --sidebar-bg: rgba(var(--sidebar-rgb), 0.92);
    --sidebar-submenu-bg: #52677D;
    --sidebar-text: #A9ADCB;
    --sidebar-text-active: #FFFFFF;
    /* Brand accent on the sidebar (e.g. .sidebar-sm .admin-nav-link.is-active)
       - the SAME pitfall as above: var(--primary) in LIGHT mode is #5145E5,
       too dark on the sidebar's dark background (2.3:1). The literal DARK
       mode value of --primary (#8B84FF, the lighter variant meant for dark
       backgrounds) - doesn't invert, because the sidebar itself doesn't invert. */
    --sidebar-active-accent: #8B84FF;
    /* Light sidebar accents (hover, separators, scrollbar, logo badge) -
       theme-independent, unlike --light-rgb */
    --sidebar-highlight-rgb: 249, 249, 249;
    /* Sidebar sizes */
    --sidebar-width-lg: 280px;
    --sidebar-width-md: 100px;
    --sidebar-width-sm: 72px;
    /* RGB colors for transparency (must match the HEX colors above!) */
    --primary-rgb: 79, 70, 229; /* #4F46E5 */
    --secondary-rgb: 113, 113, 122; /* #71717A */
    --success-rgb: 14, 121, 60; /* #0E793C */
    --danger-rgb: 225, 29, 72; /* #E11D48 */
    --warning-rgb: 180, 83, 9; /* #B45309 */
    --info-rgb: 0, 111, 238; /* #006FEE */
    --dark-rgb: 20, 22, 43; /* #14162B */
    --light-rgb: 249, 249, 249; /* #F9F9F9 */
    --body-rgb: 245, 246, 252; /* #F5F6FC */
    --bg-surface-rgb: 255, 255, 255; /* #FFFFFF - --bg-surface's channels, used by .bg-glass */
    --sidebar-rgb: 20, 22, 43; /* = --dark-rgb - the v2 "glass" sidebar over the page background */
    --btn-text-light: #FFFFFF;
    /* NOTE: NOT var(--dark) - --dark inverts in dark mode (becomes
       near-white), which gave white-on-white for .btn-warning/.badge-warning
       in the dark theme (1.58:1 contrast). In BOTH themes success/danger/
       warning/info are fairly saturated/light (each theme has ITS OWN shade
       chosen for itself - see --semantic-fg below), so they need
       PERMANENTLY dark text regardless of which theme is active - hence a
       literal, not a theme variable. */
    --btn-text-dark: #14162B;
    /* Text ON a solid success/danger/warning/info background (.btn-*,
       .badge-*, .bg-success buttons/badges etc.) - UNLIKE --btn-text-dark
       above, this token IS mode-aware: in light mode these colors are dark
       and saturated (need light text), in dark mode they're light/neon on a
       dark background (need dark text) - the exact opposite logic to
       --primary/--secondary/--dark (those always use --btn-text-light,
       since they're "dark" in both themes by definition). Without this
       token, the success/danger/warning/info color flip in this palette
       would leave dark text on a dark background. */
    --semantic-fg: var(--btn-text-light);
    --card-bg-subtle: rgba(var(--dark-rgb), 0.035);
    /* CODE BLOCKS. Dark in BOTH themes (that's how code looks everywhere),
       but the value CANNOT be hardcoded: in dark mode --bg-surface is
       exactly #1E293B, so the code block would blend into the page
       background as one rectangle. In the dark theme we go darker than the
       surface background. */
    --code-bg: #1E293B;
    --code-text: #E2E8F0;
    --code-border: rgba(255, 255, 255, 0.12);
    /* Spacing (1 unit = 8px) */
    --spacing-unit: 8px;
    /* Grid */
    --grid-gap: calc(var(--spacing-unit) * 3);
    /* Other */
    --border-radius: 14px;
    --border-radius-lg: 28px;
    --transition-speed: 0.22s; /* Base */
    --transition-speed-fast: 0.15s;
    --transition-speed-slow: 0.3s;
    --transition-speed-slower: 0.4s;
    --transition-speed-chart: 0.8s; /* Charts - a longer "growth" animation */
    /* Base: 14px on mobile, grows up to a max of 15px on desktop.
       Ideal for dense SaaS/CRM interfaces. */
    --text-base-size: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
    /* Heading scale (Major Third - 1.25)
       Recalculated from the new, smaller base to keep the proportions */
    /* H1: Main page titles */
    --h1-size: clamp(2rem, 2vw + 1rem, 2.5rem);
    /* H2: Section titles */
    --h2-size: clamp(1.6rem, 1.5vw + 0.8rem, 2rem);
    /* H3: Large card/widget titles */
    --h3-size: clamp(1.28rem, 1vw + 0.8rem, 1.6rem);
    /* H4: Standard card titles */
    --h4-size: clamp(1.02rem, 0.8vw + 0.7rem, 1.28rem);
    /* H5: Emphasized text, labels */
    --h5-size: clamp(0.9rem, 0.5vw + 0.7rem, 1.02rem);
    /* H6: Same as base text, but bold */
    --h6-size: var(--text-base-size);
    /* Scale for small text (e.g. footers, metadata, tags) */
    --text-sm: 0.8125rem; /* 13px */
    --text-xs: 0.75rem; /* 12px */
    /* =========================================
       B2B TARGET SIZE (WCAG 2.2 AAA)
       ========================================= */
    --target-size-min: 44px;
    --hamburger-size: var(--target-size-min);
    --hamburger-bar-width: 24px;
    --hamburger-bar-height: 2px;
    /* Container and component sizes */
    --container-max-width: 1200px;
    --post-thumb-size: 60px;
    /* Height of the global navbar (44px logo + 2x16px vertical padding).
       Used when an admin layout sits below the navbar - the sidebar starts
       exactly under the bar and fills the rest of the window. */
    --navbar-h: 76px;
    /* Shadows and glows - v2: layered, tinted with --dark-rgb instead of
       pure black (consistent with the whole palette's cooler neutral) */
    --shadow-sm: 0 1px 2px rgba(var(--dark-rgb), 0.05), 0 4px 10px -2px rgba(var(--dark-rgb), 0.05);
    --shadow-md: 0 2px 4px rgba(var(--dark-rgb), 0.04), 0 14px 30px -8px rgba(var(--dark-rgb), 0.12);
    --shadow-lg: 0 40px 80px -32px rgba(var(--dark-rgb), 0.28), 0 12px 24px -8px rgba(var(--dark-rgb), 0.08);
    /* Full-screen overlays (lightbox, offcanvas, popover) - always black,
       regardless of theme (like the shadows above). Every component keeps
       ITS OWN, individually chosen transparency (rgba(var(--backdrop-rgb), X))
       - this token gives a shared COLOR SOURCE for a future change (e.g. a
       slight tint instead of pure black), not a shared transparency. */
    --backdrop-rgb: 0, 0, 0;
    --focus-ring-width: 3px;
    --focus-ring-color: rgba(var(--primary-rgb), 0.25);
    --focus-ring-radius: var(--border-radius);
    /* Layout */
    --scroll-padding: 80px;
    /* Z-INDEX (layer architecture) */
    --z-index-dropdown: 1000;
    --z-index-sticky: 1020;
    --z-index-fixed: 1030;
    --z-index-modal-backdrop: 1040;
    --z-index-modal: 1050;
    --z-index-popover: 1060;
    --z-index-toast: 1070;
    --z-index-tooltip: 1080;
    --z-index-skip-link: 9999;
    /* FONT WEIGHTS */
    --fw-light: 300;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-black: 900;
}


/* --------------------------------------------- molique: uzyte reguly */

.briko-order-widget button:not(.carousel-dot):not(.onboarding-dot):not(.tour-dot):not(.btn-icon), .briko-order-widget input:not([type=checkbox]):not([type=radio]):not([type=color]), .briko-order-widget select, .briko-order-widget textarea {
      min-height: 36px;
      padding-top: calc(var(--spacing-unit) * 0.5);
      padding-bottom: calc(var(--spacing-unit) * 0.5);
    }
.briko-order-widget .grid-cols-1 {
      display: grid;
      grid-template-columns: repeat(1, 1fr);
    }
.briko-order-widget .grid-cols-2 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
    }
.briko-order-widget .grid-cols-3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
    }
.briko-order-widget .grid-cols-4 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
    }
.briko-order-widget .grid-cols-5 {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
    }
.briko-order-widget .grid-cols-6 {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
    }
.briko-order-widget .grid-cols-7 {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
    }
.briko-order-widget .grid-cols-8 {
      display: grid;
      grid-template-columns: repeat(8, 1fr);
    }
.briko-order-widget .grid-cols-9 {
      display: grid;
      grid-template-columns: repeat(9, 1fr);
    }
.briko-order-widget .grid-cols-10 {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
    }
.briko-order-widget .grid-cols-11 {
      display: grid;
      grid-template-columns: repeat(11, 1fr);
    }
.briko-order-widget .grid-cols-12 {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
    }
.briko-order-widget .col-span-1 {
      grid-column-end: span 1;
      min-width: 0;
    }
.briko-order-widget .col-span-2 {
      grid-column-end: span 2;
      min-width: 0;
    }
.briko-order-widget .col-span-3 {
      grid-column-end: span 3;
      min-width: 0;
    }
.briko-order-widget .col-span-4 {
      grid-column-end: span 4;
      min-width: 0;
    }
.briko-order-widget .col-span-5 {
      grid-column-end: span 5;
      min-width: 0;
    }
.briko-order-widget .col-span-6 {
      grid-column-end: span 6;
      min-width: 0;
    }
.briko-order-widget .col-span-7 {
      grid-column-end: span 7;
      min-width: 0;
    }
.briko-order-widget .col-span-8 {
      grid-column-end: span 8;
      min-width: 0;
    }
.briko-order-widget .col-span-9 {
      grid-column-end: span 9;
      min-width: 0;
    }
.briko-order-widget .col-span-10 {
      grid-column-end: span 10;
      min-width: 0;
    }
.briko-order-widget .col-span-11 {
      grid-column-end: span 11;
      min-width: 0;
    }
.briko-order-widget .col-span-12 {
      grid-column-end: span 12;
      min-width: 0;
    }
.briko-order-widget .w-100 {
    width: 100%;
  }
.briko-order-widget .d-none {
    display: none;
  }
.briko-order-widget .d-block {
    display: block;
  }
.briko-order-widget .d-flex {
    display: flex;
  }
.briko-order-widget .flex-column {
    flex-direction: column;
  }
.briko-order-widget .flex-wrap {
    flex-wrap: wrap;
  }
.briko-order-widget .justify-content-start {
    justify-content: flex-start;
  }
.briko-order-widget .justify-content-end {
    justify-content: flex-end;
  }
.briko-order-widget .justify-content-center {
    justify-content: center;
  }
.briko-order-widget .justify-content-between {
    justify-content: space-between;
  }
.briko-order-widget .align-items-start {
    align-items: flex-start;
  }
.briko-order-widget .align-items-end {
    align-items: flex-end;
  }
.briko-order-widget .align-items-center {
    align-items: center;
  }
.briko-order-widget .align-items-stretch {
    align-items: stretch;
  }
.briko-order-widget .gap-0 {
    gap: 0;
  }
.briko-order-widget .gap-1 {
    gap: calc(var(--spacing-unit) * 1);
  }
.briko-order-widget .gap-2 {
    gap: calc(var(--spacing-unit) * 2);
  }
.briko-order-widget .gap-3 {
    gap: calc(var(--spacing-unit) * 3);
  }
.briko-order-widget .gap-4 {
    gap: calc(var(--spacing-unit) * 4);
  }
.briko-order-widget .gap-5 {
    gap: calc(var(--spacing-unit) * 6);
  }
.briko-order-widget .position-relative {
    position: relative !important;
  }
.briko-order-widget .position-absolute {
    position: absolute !important;
  }
.briko-order-widget .position-fixed {
    position: fixed !important;
  }
.briko-order-widget .position-sticky {
    position: sticky !important;
    top: 0;
    z-index: var(--z-index-sticky);
  }
.briko-order-widget .text-center {
    text-align: center;
  }
.briko-order-widget .text-start {
    text-align: left;
  }
.briko-order-widget .text-end {
    text-align: right;
  }
.briko-order-widget .fw-bold {
    font-weight: var(--fw-bold);
  }
.briko-order-widget .fw-normal {
    font-weight: var(--fw-normal);
  }
.briko-order-widget .fw-light {
    font-weight: var(--fw-light);
  }
.briko-order-widget .btn, .briko-order-widget .btn-primary, .briko-order-widget .btn-outline-primary, .briko-order-widget .btn-secondary, .briko-order-widget .btn-outline-secondary, .briko-order-widget .btn-success, .briko-order-widget .btn-outline-success, .briko-order-widget .btn-danger, .briko-order-widget .btn-outline-danger, .briko-order-widget .btn-warning, .briko-order-widget .btn-outline-warning, .briko-order-widget .btn-info, .briko-order-widget .btn-outline-info, .briko-order-widget .btn-light, .briko-order-widget .btn-outline-light, .briko-order-widget .btn-dark, .briko-order-widget .btn-outline-dark {
      --btn-border-width: 1px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: calc(var(--spacing-unit) * 1);
      font-family: inherit;
      font-weight: var(--fw-medium);
      text-align: center;
      text-decoration: none;
      vertical-align: middle;
      cursor: pointer;
      padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 2);
      border-radius: var(--border-radius);
      border: var(--btn-border-width) solid transparent;
      transition: background-color var(--transition-speed), border-color var(--transition-speed), color var(--transition-speed);
      
    }
.briko-order-widget .btn:focus-visible, .briko-order-widget .btn-primary:focus-visible, .briko-order-widget .btn-outline-primary:focus-visible, .briko-order-widget .btn-secondary:focus-visible, .briko-order-widget .btn-outline-secondary:focus-visible, .briko-order-widget .btn-success:focus-visible, .briko-order-widget .btn-outline-success:focus-visible, .briko-order-widget .btn-danger:focus-visible, .briko-order-widget .btn-outline-danger:focus-visible, .briko-order-widget .btn-warning:focus-visible, .briko-order-widget .btn-outline-warning:focus-visible, .briko-order-widget .btn-info:focus-visible, .briko-order-widget .btn-outline-info:focus-visible, .briko-order-widget .btn-light:focus-visible, .briko-order-widget .btn-outline-light:focus-visible, .briko-order-widget .btn-dark:focus-visible, .briko-order-widget .btn-outline-dark:focus-visible {
      outline: var(--focus-ring-width) solid var(--focus-ring-color);
      outline-offset: 2px;
    }
.briko-order-widget .btn-primary {
      background-color: var(--primary);
      border-color: var(--primary);
      
      color: var(--btn-text-light, #fff);
    }
.briko-order-widget .btn-primary:hover, .briko-order-widget .btn-primary:focus-visible {
      
      background-color: var(--primary-hover, color-mix(in srgb, var(--primary) 85%, black));
      border-color: var(--primary-hover, color-mix(in srgb, var(--primary) 85%, black));
    }
.briko-order-widget .btn-outline-primary {
      background-color: transparent;
      border-color: var(--primary);
      
      color: var(--primary);
      
    }
.briko-order-widget .btn-outline-primary:hover, .briko-order-widget .btn-outline-primary:focus-visible {
      background-color: var(--primary);
      color: var(--btn-text-light, #fff);
    }
.briko-order-widget .btn-outline-primary {
      
    }
.briko-order-widget .btn-outline-primary.btn-outline-soft {
      
      border-color: rgba(var(--primary-rgb), 0.3);
    }
.briko-order-widget .btn-outline-primary.btn-outline-soft:hover, .briko-order-widget .btn-outline-primary.btn-outline-soft:focus-visible {
      
      background-color: rgba(var(--primary-rgb), 0.1);
      
      border-color: rgba(var(--primary-rgb), 0.5);
      color: var(--primary);
    }
.briko-order-widget .btn-secondary {
      background-color: var(--secondary);
      border-color: var(--secondary);
      
      color: var(--btn-text-light, #fff);
    }
.briko-order-widget .btn-secondary:hover, .briko-order-widget .btn-secondary:focus-visible {
      
      background-color: var(--secondary-hover, color-mix(in srgb, var(--secondary) 85%, black));
      border-color: var(--secondary-hover, color-mix(in srgb, var(--secondary) 85%, black));
    }
.briko-order-widget .btn-outline-secondary {
      background-color: transparent;
      border-color: var(--secondary);
      
      color: var(--secondary);
      
    }
.briko-order-widget .btn-outline-secondary:hover, .briko-order-widget .btn-outline-secondary:focus-visible {
      background-color: var(--secondary);
      color: var(--btn-text-light, #fff);
    }
.briko-order-widget .btn-outline-secondary {
      
    }
.briko-order-widget .btn-outline-secondary.btn-outline-soft {
      
      border-color: rgba(var(--secondary-rgb), 0.3);
    }
.briko-order-widget .btn-outline-secondary.btn-outline-soft:hover, .briko-order-widget .btn-outline-secondary.btn-outline-soft:focus-visible {
      
      background-color: rgba(var(--secondary-rgb), 0.1);
      
      border-color: rgba(var(--secondary-rgb), 0.5);
      color: var(--secondary);
    }
.briko-order-widget .btn-success {
      background-color: var(--success);
      border-color: var(--success);
      
      color: var(--semantic-fg);
    }
.briko-order-widget .btn-success:hover, .briko-order-widget .btn-success:focus-visible {
      
      background-color: var(--success-hover, color-mix(in srgb, var(--success) 85%, black));
      border-color: var(--success-hover, color-mix(in srgb, var(--success) 85%, black));
    }
.briko-order-widget .btn-outline-success {
      background-color: transparent;
      border-color: var(--success);
      
      color: var(--success-text);
      
    }
.briko-order-widget .btn-outline-success:hover, .briko-order-widget .btn-outline-success:focus-visible {
      background-color: var(--success);
      color: var(--semantic-fg);
    }
.briko-order-widget .btn-outline-success {
      
    }
.briko-order-widget .btn-outline-success.btn-outline-soft {
      
      border-color: rgba(var(--success-rgb), 0.3);
    }
.briko-order-widget .btn-outline-success.btn-outline-soft:hover, .briko-order-widget .btn-outline-success.btn-outline-soft:focus-visible {
      
      background-color: rgba(var(--success-rgb), 0.1);
      
      border-color: rgba(var(--success-rgb), 0.5);
      color: var(--success);
    }
.briko-order-widget .btn-danger {
      background-color: var(--danger);
      border-color: var(--danger);
      
      color: var(--semantic-fg);
    }
.briko-order-widget .btn-danger:hover, .briko-order-widget .btn-danger:focus-visible {
      
      background-color: var(--danger-hover, color-mix(in srgb, var(--danger) 85%, black));
      border-color: var(--danger-hover, color-mix(in srgb, var(--danger) 85%, black));
    }
.briko-order-widget .btn-outline-danger {
      background-color: transparent;
      border-color: var(--danger);
      
      color: var(--danger-text);
      
    }
.briko-order-widget .btn-outline-danger:hover, .briko-order-widget .btn-outline-danger:focus-visible {
      background-color: var(--danger);
      color: var(--semantic-fg);
    }
.briko-order-widget .btn-outline-danger {
      
    }
.briko-order-widget .btn-outline-danger.btn-outline-soft {
      
      border-color: rgba(var(--danger-rgb), 0.3);
    }
.briko-order-widget .btn-outline-danger.btn-outline-soft:hover, .briko-order-widget .btn-outline-danger.btn-outline-soft:focus-visible {
      
      background-color: rgba(var(--danger-rgb), 0.1);
      
      border-color: rgba(var(--danger-rgb), 0.5);
      color: var(--danger);
    }
.briko-order-widget .btn-warning {
      background-color: var(--warning);
      border-color: var(--warning);
      
      color: var(--semantic-fg);
    }
.briko-order-widget .btn-warning:hover, .briko-order-widget .btn-warning:focus-visible {
      
      background-color: var(--warning-hover, color-mix(in srgb, var(--warning) 85%, black));
      border-color: var(--warning-hover, color-mix(in srgb, var(--warning) 85%, black));
    }
.briko-order-widget .btn-outline-warning {
      background-color: transparent;
      border-color: var(--warning);
      
      color: var(--warning-text);
      
    }
.briko-order-widget .btn-outline-warning:hover, .briko-order-widget .btn-outline-warning:focus-visible {
      background-color: var(--warning);
      color: var(--semantic-fg);
    }
.briko-order-widget .btn-outline-warning {
      
    }
.briko-order-widget .btn-outline-warning.btn-outline-soft {
      
      border-color: rgba(var(--warning-rgb), 0.3);
    }
.briko-order-widget .btn-outline-warning.btn-outline-soft:hover, .briko-order-widget .btn-outline-warning.btn-outline-soft:focus-visible {
      
      background-color: rgba(var(--warning-rgb), 0.1);
      
      border-color: rgba(var(--warning-rgb), 0.5);
      color: var(--warning);
    }
.briko-order-widget .btn-info {
      background-color: var(--info);
      border-color: var(--info);
      
      color: var(--semantic-fg);
    }
.briko-order-widget .btn-info:hover, .briko-order-widget .btn-info:focus-visible {
      
      background-color: var(--info-hover, color-mix(in srgb, var(--info) 85%, black));
      border-color: var(--info-hover, color-mix(in srgb, var(--info) 85%, black));
    }
.briko-order-widget .btn-outline-info {
      background-color: transparent;
      border-color: var(--info);
      
      color: var(--info-text);
      
    }
.briko-order-widget .btn-outline-info:hover, .briko-order-widget .btn-outline-info:focus-visible {
      background-color: var(--info);
      color: var(--semantic-fg);
    }
.briko-order-widget .btn-outline-info {
      
    }
.briko-order-widget .btn-outline-info.btn-outline-soft {
      
      border-color: rgba(var(--info-rgb), 0.3);
    }
.briko-order-widget .btn-outline-info.btn-outline-soft:hover, .briko-order-widget .btn-outline-info.btn-outline-soft:focus-visible {
      
      background-color: rgba(var(--info-rgb), 0.1);
      
      border-color: rgba(var(--info-rgb), 0.5);
      color: var(--info);
    }
.briko-order-widget .btn-light {
      background-color: var(--light);
      border-color: var(--light);
      
      color: var(--text-main);
    }
.briko-order-widget .btn-light:hover, .briko-order-widget .btn-light:focus-visible {
      
      background-color: var(--light-hover, color-mix(in srgb, var(--light) 85%, black));
      border-color: var(--light-hover, color-mix(in srgb, var(--light) 85%, black));
    }
.briko-order-widget .btn-outline-light {
      background-color: transparent;
      border-color: var(--light);
      
      color: var(--light);
      
    }
.briko-order-widget .btn-outline-light:hover, .briko-order-widget .btn-outline-light:focus-visible {
      background-color: var(--light);
      color: var(--text-main);
    }
.briko-order-widget .btn-outline-light {
      
    }
.briko-order-widget .btn-outline-light.btn-outline-soft {
      
      border-color: rgba(var(--light-rgb), 0.3);
    }
.briko-order-widget .btn-outline-light.btn-outline-soft:hover, .briko-order-widget .btn-outline-light.btn-outline-soft:focus-visible {
      
      background-color: rgba(var(--light-rgb), 0.1);
      
      border-color: rgba(var(--light-rgb), 0.5);
      color: var(--light);
    }
.briko-order-widget .btn-dark {
      background-color: var(--dark);
      border-color: var(--dark);
      
      color: var(--btn-text-light, #fff);
    }
.briko-order-widget .btn-dark:hover, .briko-order-widget .btn-dark:focus-visible {
      
      background-color: var(--dark-hover, color-mix(in srgb, var(--dark) 85%, black));
      border-color: var(--dark-hover, color-mix(in srgb, var(--dark) 85%, black));
    }
.briko-order-widget .btn-outline-dark {
      background-color: transparent;
      border-color: var(--dark);
      
      color: var(--dark);
      
    }
.briko-order-widget .btn-outline-dark:hover, .briko-order-widget .btn-outline-dark:focus-visible {
      background-color: var(--dark);
      color: var(--btn-text-light, #fff);
    }
.briko-order-widget .btn-outline-dark {
      
    }
.briko-order-widget .btn-outline-dark.btn-outline-soft {
      
      border-color: rgba(var(--dark-rgb), 0.3);
    }
.briko-order-widget .btn-outline-dark.btn-outline-soft:hover, .briko-order-widget .btn-outline-dark.btn-outline-soft:focus-visible {
      
      background-color: rgba(var(--dark-rgb), 0.1);
      
      border-color: rgba(var(--dark-rgb), 0.5);
      color: var(--dark);
    }
.briko-order-widget .btn-xs {
      padding: calc(var(--spacing-unit) * 0.25) calc(var(--spacing-unit) * 0.75);
      font-size: 0.75rem;
      border-radius: calc(var(--border-radius) * 0.6);
    }
.briko-order-widget .btn-sm {
      padding: calc(var(--spacing-unit) * 0.5) calc(var(--spacing-unit) * 1.5);
      font-size: 0.875rem;
      border-radius: calc(var(--border-radius) * 0.8);
    }
.briko-order-widget .btn-md {
      padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 2);
      font-size: 1rem;
      border-radius: var(--border-radius);
    }
.briko-order-widget .btn-lg {
      padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3);
      font-size: 1.125rem;
      border-radius: calc(var(--border-radius) * 1.2);
      font-weight: var(--fw-bold);
    }
.briko-order-widget .btn-xl {
      padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);
      font-size: 1.25rem;
      border-radius: calc(var(--border-radius) * 1.5);
      font-weight: var(--fw-bold);
    }
.briko-order-widget .btn-group {
      display: inline-flex;
      align-items: stretch;
    }
.briko-order-widget .btn-group .btn, .briko-order-widget .btn-group .btn-primary, .briko-order-widget .btn-group .btn-outline-primary, .briko-order-widget .btn-group .btn-secondary, .briko-order-widget .btn-group .btn-outline-secondary, .briko-order-widget .btn-group .btn-success, .briko-order-widget .btn-group .btn-outline-success, .briko-order-widget .btn-group .btn-danger, .briko-order-widget .btn-group .btn-outline-danger, .briko-order-widget .btn-group .btn-warning, .briko-order-widget .btn-group .btn-outline-warning, .briko-order-widget .btn-group .btn-info, .briko-order-widget .btn-group .btn-outline-info, .briko-order-widget .btn-group .btn-light, .briko-order-widget .btn-group .btn-outline-light, .briko-order-widget .btn-group .btn-dark, .briko-order-widget .btn-group .btn-outline-dark {
      position: relative;
      flex: 1 1 auto;
    }
.briko-order-widget .btn-group .btn:not(:first-child), .briko-order-widget .btn-group .btn-primary:not(:first-child), .briko-order-widget .btn-group .btn-outline-primary:not(:first-child), .briko-order-widget .btn-group .btn-secondary:not(:first-child), .briko-order-widget .btn-group .btn-outline-secondary:not(:first-child), .briko-order-widget .btn-group .btn-success:not(:first-child), .briko-order-widget .btn-group .btn-outline-success:not(:first-child), .briko-order-widget .btn-group .btn-danger:not(:first-child), .briko-order-widget .btn-group .btn-outline-danger:not(:first-child), .briko-order-widget .btn-group .btn-warning:not(:first-child), .briko-order-widget .btn-group .btn-outline-warning:not(:first-child), .briko-order-widget .btn-group .btn-info:not(:first-child), .briko-order-widget .btn-group .btn-outline-info:not(:first-child), .briko-order-widget .btn-group .btn-light:not(:first-child), .briko-order-widget .btn-group .btn-outline-light:not(:first-child), .briko-order-widget .btn-group .btn-dark:not(:first-child), .briko-order-widget .btn-group .btn-outline-dark:not(:first-child) {
      margin-left: calc(var(--btn-border-width) * -1);
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
.briko-order-widget .btn-group .btn:not(:last-child), .briko-order-widget .btn-group .btn-primary:not(:last-child), .briko-order-widget .btn-group .btn-outline-primary:not(:last-child), .briko-order-widget .btn-group .btn-secondary:not(:last-child), .briko-order-widget .btn-group .btn-outline-secondary:not(:last-child), .briko-order-widget .btn-group .btn-success:not(:last-child), .briko-order-widget .btn-group .btn-outline-success:not(:last-child), .briko-order-widget .btn-group .btn-danger:not(:last-child), .briko-order-widget .btn-group .btn-outline-danger:not(:last-child), .briko-order-widget .btn-group .btn-warning:not(:last-child), .briko-order-widget .btn-group .btn-outline-warning:not(:last-child), .briko-order-widget .btn-group .btn-info:not(:last-child), .briko-order-widget .btn-group .btn-outline-info:not(:last-child), .briko-order-widget .btn-group .btn-light:not(:last-child), .briko-order-widget .btn-group .btn-outline-light:not(:last-child), .briko-order-widget .btn-group .btn-dark:not(:last-child), .briko-order-widget .btn-group .btn-outline-dark:not(:last-child) {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
.briko-order-widget .btn-group .btn:hover, .briko-order-widget .btn-group .btn:focus, .briko-order-widget .btn-group .btn:active, .briko-order-widget .btn-group .btn.is-active, .briko-order-widget .btn-group .btn-primary:hover, .briko-order-widget .btn-group .btn-primary:focus, .briko-order-widget .btn-group .btn-primary:active, .briko-order-widget .btn-group .btn-primary.is-active, .briko-order-widget .btn-group .btn-outline-primary:hover, .briko-order-widget .btn-group .btn-outline-primary:focus, .briko-order-widget .btn-group .btn-outline-primary:active, .briko-order-widget .btn-group .btn-outline-primary.is-active, .briko-order-widget .btn-group .btn-secondary:hover, .briko-order-widget .btn-group .btn-secondary:focus, .briko-order-widget .btn-group .btn-secondary:active, .briko-order-widget .btn-group .btn-secondary.is-active, .briko-order-widget .btn-group .btn-outline-secondary:hover, .briko-order-widget .btn-group .btn-outline-secondary:focus, .briko-order-widget .btn-group .btn-outline-secondary:active, .briko-order-widget .btn-group .btn-outline-secondary.is-active, .briko-order-widget .btn-group .btn-success:hover, .briko-order-widget .btn-group .btn-success:focus, .briko-order-widget .btn-group .btn-success:active, .briko-order-widget .btn-group .btn-success.is-active, .briko-order-widget .btn-group .btn-outline-success:hover, .briko-order-widget .btn-group .btn-outline-success:focus, .briko-order-widget .btn-group .btn-outline-success:active, .briko-order-widget .btn-group .btn-outline-success.is-active, .briko-order-widget .btn-group .btn-danger:hover, .briko-order-widget .btn-group .btn-danger:focus, .briko-order-widget .btn-group .btn-danger:active, .briko-order-widget .btn-group .btn-danger.is-active, .briko-order-widget .btn-group .btn-outline-danger:hover, .briko-order-widget .btn-group .btn-outline-danger:focus, .briko-order-widget .btn-group .btn-outline-danger:active, .briko-order-widget .btn-group .btn-outline-danger.is-active, .briko-order-widget .btn-group .btn-warning:hover, .briko-order-widget .btn-group .btn-warning:focus, .briko-order-widget .btn-group .btn-warning:active, .briko-order-widget .btn-group .btn-warning.is-active, .briko-order-widget .btn-group .btn-outline-warning:hover, .briko-order-widget .btn-group .btn-outline-warning:focus, .briko-order-widget .btn-group .btn-outline-warning:active, .briko-order-widget .btn-group .btn-outline-warning.is-active, .briko-order-widget .btn-group .btn-info:hover, .briko-order-widget .btn-group .btn-info:focus, .briko-order-widget .btn-group .btn-info:active, .briko-order-widget .btn-group .btn-info.is-active, .briko-order-widget .btn-group .btn-outline-info:hover, .briko-order-widget .btn-group .btn-outline-info:focus, .briko-order-widget .btn-group .btn-outline-info:active, .briko-order-widget .btn-group .btn-outline-info.is-active, .briko-order-widget .btn-group .btn-light:hover, .briko-order-widget .btn-group .btn-light:focus, .briko-order-widget .btn-group .btn-light:active, .briko-order-widget .btn-group .btn-light.is-active, .briko-order-widget .btn-group .btn-outline-light:hover, .briko-order-widget .btn-group .btn-outline-light:focus, .briko-order-widget .btn-group .btn-outline-light:active, .briko-order-widget .btn-group .btn-outline-light.is-active, .briko-order-widget .btn-group .btn-dark:hover, .briko-order-widget .btn-group .btn-dark:focus, .briko-order-widget .btn-group .btn-dark:active, .briko-order-widget .btn-group .btn-dark.is-active, .briko-order-widget .btn-group .btn-outline-dark:hover, .briko-order-widget .btn-group .btn-outline-dark:focus, .briko-order-widget .btn-group .btn-outline-dark:active, .briko-order-widget .btn-group .btn-outline-dark.is-active {
      z-index: 1;
    }
.briko-order-widget .btn-action {
      appearance: none;
      background: transparent;
      border: none;
      color: var(--text-muted);
      font-family: inherit;
      font-weight: var(--fw-medium);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: calc(var(--spacing-unit) * 1);
      padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 1.5);
      min-height: 32px !important;
      border-radius: var(--border-radius);
      cursor: pointer;
      transition: all var(--transition-speed) ease;
    }
.briko-order-widget .btn-action i, .briko-order-widget .btn-action svg {
      font-size: 1.1em;
      flex-shrink: 0;
    }
.briko-order-widget .btn-action:hover, .briko-order-widget .btn-action:focus-visible {
      color: var(--text-main);
      background-color: var(--card-bg-subtle, rgba(0, 0, 0, 0.05));
    }
.briko-order-widget .btn-action.text-danger {
      color: var(--danger);
    }
.briko-order-widget .btn-action.text-danger:hover, .briko-order-widget .btn-action.text-danger:focus-visible {
      background-color: rgba(var(--danger-rgb), 0.1);
    }
.briko-order-widget .btn-action.text-primary {
      color: var(--primary);
    }
.briko-order-widget .btn-action.text-primary:hover, .briko-order-widget .btn-action.text-primary:focus-visible {
      background-color: rgba(var(--primary-rgb), 0.1);
    }
.briko-order-widget .btn-action:focus-visible {
      outline: var(--focus-ring-width) solid var(--focus-ring-color);
      outline-offset: 2px;
    }
.briko-order-widget .btn-action-group {
      display: flex;
      align-items: center;
      gap: calc(var(--spacing-unit) * 0.5);
    }
.briko-order-widget .btn-action-group.with-dividers {
      gap: 0;
    }
.briko-order-widget .btn-action-group.with-dividers .btn-action {
      position: relative;
      border-radius: 0;
    }
.briko-order-widget .btn-action-group.with-dividers .btn-action::after {
      content: "";
      position: absolute;
      right: 0;
      top: 20%;
      bottom: 20%;
      width: 1px;
      background-color: var(--border-color);
      pointer-events: none;
    }
.briko-order-widget .btn-action-group.with-dividers .btn-action:last-child::after {
      display: none;
    }
.briko-order-widget .btn-action-group.with-dividers .btn-action:first-child {
      border-top-left-radius: var(--border-radius);
      border-bottom-left-radius: var(--border-radius);
    }
.briko-order-widget .btn-action-group.with-dividers .btn-action:last-child {
      border-top-right-radius: var(--border-radius);
      border-bottom-right-radius: var(--border-radius);
    }
.briko-order-widget .btn-glow {
      position: relative;
      isolation: isolate;
      box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.2);
      transition: transform 0.3s ease;
    }
.briko-order-widget .btn-glow::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      box-shadow: 0 8px 25px -5px var(--primary);
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
      z-index: -1;
    }
.briko-order-widget .btn-glow:hover {
      transform: translateY(-2px);
    }
.briko-order-widget .btn-glow:hover::after {
      opacity: 1;
    }
.briko-order-widget .btn-glass {
      background: rgba(255, 255, 255, 0.1) !important;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2) !important;
      color: #fff !important;
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
      transition: background 0.3s ease, border-color 0.3s ease;
    }
.briko-order-widget .btn-glass:hover {
      background: rgba(255, 255, 255, 0.2) !important;
      border-color: rgba(255, 255, 255, 0.4) !important;
    }
.briko-order-widget .btn-3d {
      
      --btn-3d-shadow: var(--primary-hover);
      position: relative;
      isolation: isolate;
      transform: translateY(0);
      transition: transform 0.1s ease;
    }
.briko-order-widget .btn-3d::before {
      content: "";
      position: absolute;
      top: 6px;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      background: var(--btn-3d-shadow);
      z-index: -1;
    }
.briko-order-widget .btn-3d:hover {
      transform: translateY(2px);
    }
.briko-order-widget .btn-3d:active {
      transform: translateY(6px);
    }
.briko-order-widget .btn-shine {
      position: relative;
      overflow: hidden;
    }
.briko-order-widget .btn-shine::after {
      content: "";
      position: absolute;
      top: 0;
      left: -100%;
      width: 50%;
      height: 100%;
      background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
      transform: skewX(-25deg);
      transition: none;
    }
.briko-order-widget .btn-shine:hover::after {
      animation: btnShineAnim 0.7s ease forwards;
    }
.briko-order-widget .btn-gradient {
      position: relative;
      isolation: isolate;
      overflow: hidden;
      color: #fff !important;
      border: none !important;
      transition: transform 0.3s ease;
    }
.briko-order-widget .btn-gradient::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      z-index: -2;
      width: 200%;
      height: 100%;
      background: linear-gradient(135deg, var(--primary), var(--info), var(--success), var(--primary));
      background-size: 50% 100%;
      background-repeat: repeat-x;
    }
.briko-order-widget .btn-gradient::after {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      border-radius: inherit;
      box-shadow: 0 10px 20px rgba(var(--primary-rgb), 0.3);
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
    }
.briko-order-widget .btn-gradient:hover {
      transform: translateY(-2px);
    }
.briko-order-widget .btn-gradient:hover::before {
      animation: btnGradientFlow 3s linear infinite;
    }
.briko-order-widget .btn-gradient:hover::after {
      opacity: 1;
    }
.briko-order-widget .btn-stacked {
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 5px !important;
      padding: calc(var(--spacing-unit) * 1);
      min-height: 56px !important;
      line-height: 1 !important;
    }
.briko-order-widget .btn-stacked i, .briko-order-widget .btn-stacked svg {
      font-size: 1.2rem;
      width: 1em !important;
      height: 1em !important;
      flex-shrink: 0;
      margin: 0 !important;
      display: block;
    }
.briko-order-widget .btn-stacked span, .briko-order-widget .btn-stacked .btn-text {
      font-size: 0.65rem;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      line-height: 1 !important;
      text-align: center;
      padding: 0 !important;
      white-space: normal;
      word-break: break-word;
      width: 100%;
    }
.briko-order-widget .btn-icon {
      --btn-icon-size: 36px;
      width: var(--btn-icon-size);
      height: var(--btn-icon-size);
      min-height: var(--btn-icon-size);
      padding: 0;
      gap: 0;
      flex-shrink: 0;
    }
.briko-order-widget .btn-icon i, .briko-order-widget .btn-icon svg {
      font-size: 1.1em;
      flex-shrink: 0;
    }
.briko-order-widget .btn-icon-sm {
      --btn-icon-size: 28px;
    }
.briko-order-widget .btn-icon-lg {
      --btn-icon-size: 48px;
    }
.briko-order-widget .btn-hover-spring .btn:not([class*=hover-]), .briko-order-widget .btn-hover-lift .btn:not([class*=hover-]), .briko-order-widget .btn-hover-glow .btn:not([class*=hover-]) {
      transition: background-color var(--transition-speed), border-color var(--transition-speed), color var(--transition-speed), transform var(--transition-speed) cubic-bezier(0.25, 1, 0.5, 1), box-shadow var(--transition-speed);
      will-change: transform;
    }
.briko-order-widget .btn-hover-spring .btn:not([class*=hover-]):hover {
      transform: scale(1.05);
    }
.briko-order-widget .btn-hover-lift .btn:not([class*=hover-]):hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }
.briko-order-widget .btn-hover-glow .btn:not([class*=hover-]):hover {
      box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.25);
    }
.briko-order-widget .input {
      --input-border-width: 1px;
      --input-padding-y: calc(var(--spacing-unit) * 1.25);
      display: block;
      width: 100%;
      padding: var(--input-padding-y) calc(var(--spacing-unit) * 2);
      font-family: var(--font-family-base);
      font-weight: var(--fw-medium);
      line-height: 1.5;
      color: var(--text-main);
      background-color: var(--bg-surface);
      background-clip: padding-box;
      border: var(--input-border-width) solid var(--border-color);
      border-radius: var(--border-radius);
      transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
      
      
    }
.briko-order-widget .input.input-sm {
      --input-padding-y: calc(var(--spacing-unit) * 0.75);
      padding: var(--input-padding-y) calc(var(--spacing-unit) * 1.5);
      font-size: 0.8125rem; 
      border-radius: calc(var(--border-radius) * 0.8);
      
      min-height: 32px !important;
    }
.briko-order-widget .input {
      
    }
.briko-order-widget .input.input-lg {
      --input-padding-y: calc(var(--spacing-unit) * 1.5);
      padding: var(--input-padding-y) calc(var(--spacing-unit) * 2.5);
      font-size: 1.125rem; 
      border-radius: calc(var(--border-radius) * 1.2);
      min-height: 56px !important;
    }
.briko-order-widget .input:focus {
      border-color: var(--primary);
      outline: 0;
      box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
    }
.briko-order-widget .input::placeholder {
      color: var(--text-muted);
      opacity: 0.6;
    }
.briko-order-widget .input:disabled, .briko-order-widget .input[readonly] {
      background-color: var(--bg-body);
      opacity: 0.7;
      cursor: not-allowed;
    }
.briko-order-widget select.input {
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right calc(var(--spacing-unit) * 1.5) center;
      background-size: 16px 12px;
      padding-right: calc(var(--spacing-unit) * 4);
      cursor: pointer;
      
    }
.briko-order-widget select.input.input-sm {
      padding-right: calc(var(--spacing-unit) * 3);
    }
.briko-order-widget select.input.input-lg {
      padding-right: calc(var(--spacing-unit) * 5);
    }
.briko-order-widget .input:user-valid {
      border-color: var(--success);
    }
.briko-order-widget .input:user-valid:focus {
      box-shadow: 0 0 0 var(--focus-ring-width) rgba(var(--success-rgb), 0.15);
    }
.briko-order-widget .input:user-invalid {
      border-color: var(--danger);
    }
.briko-order-widget .input:user-invalid:focus {
      box-shadow: 0 0 0 var(--focus-ring-width) rgba(var(--danger-rgb), 0.15);
    }
.briko-order-widget .input:user-invalid ~ .feedback-invalid {
      display: block;
      animation: fadeIn var(--transition-speed) ease;
    }
.briko-order-widget .input-group {
      display: flex;
      align-items: stretch;
      width: 100%;
      border-radius: var(--border-radius);
      transition: box-shadow var(--transition-speed);
      
    }
.briko-order-widget .input-group:focus-within {
      box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
    }
.briko-order-widget .input-group:focus-within > .input, .briko-order-widget .input-group:focus-within > .btn, .briko-order-widget .input-group:focus-within > .input-group-text {
      border-color: var(--primary) !important;
    }
.briko-order-widget .input-group {
      
    }
.briko-order-widget .input-group > .input, .briko-order-widget .input-group > .btn, .briko-order-widget .input-group > .input-group-text {
      position: relative;
      margin-bottom: 0;
      
      border-radius: 0 !important;
      
    }
.briko-order-widget .input-group > .input:focus, .briko-order-widget .input-group > .input:user-valid, .briko-order-widget .input-group > .input:user-invalid, .briko-order-widget .input-group > .btn:focus, .briko-order-widget .input-group > .btn:user-valid, .briko-order-widget .input-group > .btn:user-invalid, .briko-order-widget .input-group > .input-group-text:focus, .briko-order-widget .input-group > .input-group-text:user-valid, .briko-order-widget .input-group > .input-group-text:user-invalid {
      box-shadow: none !important;
      border-color: var(--border-color) !important;
      z-index: 3;
    }
.briko-order-widget .input-group {
      
    }
.briko-order-widget .input-group > .input + .input, .briko-order-widget .input-group > .input + .btn, .briko-order-widget .input-group > .input + .input-group-text, .briko-order-widget .input-group > .btn + .input, .briko-order-widget .input-group > .btn + .btn, .briko-order-widget .input-group > .btn + .input-group-text, .briko-order-widget .input-group > .input-group-text + .input, .briko-order-widget .input-group > .input-group-text + .btn, .briko-order-widget .input-group > .input-group-text + .input-group-text {
      margin-left: -1px;
    }
.briko-order-widget .input-group {
      
    }
.briko-order-widget .input-group > :first-child {
      border-top-left-radius: var(--border-radius) !important;
      border-bottom-left-radius: var(--border-radius) !important;
    }
.briko-order-widget .input-group > :last-child {
      border-top-right-radius: var(--border-radius) !important;
      border-bottom-right-radius: var(--border-radius) !important;
    }
.briko-order-widget .input-group {
      
    }
.briko-order-widget .input-group > .input {
      flex: 1 1 auto;
      width: 1%;
      min-width: 0;
    }
.briko-order-widget .input-group > .btn {
      z-index: 2;
      border: 1px solid var(--border-color);
    }
.briko-order-widget .input-group > .btn:hover {
      z-index: 3;
      background-color: var(--card-bg-subtle);
    }
.briko-order-widget .input-group-text {
      --input-border-width: 1px;
      display: flex;
      align-items: center;
      padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 1.5);
      font-weight: var(--fw-medium);
      color: var(--text-muted);
      text-align: center;
      white-space: nowrap;
      background-color: var(--card-bg-subtle);
      border: var(--input-border-width) solid var(--border-color);
      min-height: var(--target-size-min);
      transition: border-color var(--transition-speed);
    }
.briko-order-widget .form-floating {
      position: relative;
      margin-bottom: calc(var(--spacing-unit) * 2);
    }
.briko-order-widget .form-floating label {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      padding: 1rem 0.75rem;
      pointer-events: none;
      transform-origin: 0 0;
      transition: opacity var(--transition-speed), transform var(--transition-speed);
      color: var(--text-muted);
    }
.briko-order-widget .form-floating .input:focus ~ label, .briko-order-widget .form-floating .input:not(:placeholder-shown) ~ label {
      opacity: 0.8;
      transform: scale(0.85) translateY(-0.75rem) translateX(0.15rem);
    }
.briko-order-widget .form-floating .input {
      padding-top: 1.625rem;
      padding-bottom: 0.625rem;
    }
.briko-order-widget .card-body > .form-floating {
      margin-bottom: 0;
    }
.briko-order-widget .form-check {
      display: flex;
      align-items: center;
      margin-bottom: calc(var(--spacing-unit) * 1);
    }
.briko-order-widget .form-check-input {
      appearance: none;
      width: 1.25rem;
      height: 1.25rem;
      margin: 0;
      margin-right: calc(var(--spacing-unit) * 1.5);
      flex-shrink: 0;
      background-color: var(--bg-body);
      border: 2px solid var(--border-color);
      border-radius: calc(var(--border-radius) / 2);
      cursor: pointer;
      transition: background var(--transition-speed), border-color var(--transition-speed);
      position: relative;
    }
.briko-order-widget .form-check-input[type=radio] {
      border-radius: 50%;
    }
.briko-order-widget .form-check-input:checked {
      background-color: var(--primary);
      border-color: var(--primary);
    }
.briko-order-widget .form-check-input[type=checkbox]:checked {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
      background-size: 70%;
      background-position: center;
      background-repeat: no-repeat;
    }
.briko-order-widget .form-check-input[type=radio]:checked {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3ccircle cx='10' cy='10' r='5' fill='%23fff'/%3e%3c/svg%3e");
      background-size: 100%;
      background-position: center;
      background-repeat: no-repeat;
    }
.briko-order-widget .form-check-label {
      cursor: pointer;
      color: var(--text-main);
      user-select: none;
      margin: 0;
      line-height: 1.25rem;
    }
.briko-order-widget .input-range {
      appearance: none;
      width: 100%;
      height: 8px;
      background: var(--border-color);
      border-radius: 50rem; 
      outline: none;
      cursor: pointer;
      overflow: hidden;
    }
.briko-order-widget .input-range::-webkit-slider-thumb {
      appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #fff;
      border: 2px solid var(--primary);
      box-shadow: -10010px 0 0 10000px var(--primary), 0 2px 5px rgba(0, 0, 0, 0.15);
      transition: transform var(--transition-speed);
    }
.briko-order-widget .input-range::-webkit-slider-thumb:hover {
      transform: scale(1.15);
    }
.briko-order-widget .input-range::-moz-range-progress {
      background: var(--primary);
      height: 8px;
      border-radius: 50rem;
    }
.briko-order-widget .input-range::-moz-range-thumb {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: #fff;
      border: 2px solid var(--primary);
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
      transition: transform var(--transition-speed);
    }
.briko-order-widget .input-range::-moz-range-thumb:hover {
      transform: scale(1.15);
    }
.briko-order-widget input[type=number].input {
      -moz-appearance: textfield;
      appearance: textfield;
    }
.briko-order-widget input[type=number].input::-webkit-outer-spin-button, .briko-order-widget input[type=number].input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
.briko-order-widget input[type=date].input, .briko-order-widget input[type=time].input, .briko-order-widget input[type=datetime-local].input {
      appearance: none;
      position: relative;
      cursor: pointer;
    }
.briko-order-widget input[type=date].input::-webkit-calendar-picker-indicator, .briko-order-widget input[type=time].input::-webkit-calendar-picker-indicator, .briko-order-widget input[type=datetime-local].input::-webkit-calendar-picker-indicator {
      background-color: transparent;
      padding: 4px;
      cursor: pointer;
      opacity: 0.6;
      transition: opacity var(--transition-speed), background-color var(--transition-speed);
      border-radius: 4px;
    }
.briko-order-widget input[type=date].input::-webkit-calendar-picker-indicator:hover, .briko-order-widget input[type=time].input::-webkit-calendar-picker-indicator:hover, .briko-order-widget input[type=datetime-local].input::-webkit-calendar-picker-indicator:hover {
      opacity: 1;
      background-color: var(--card-bg-subtle);
    }
.briko-order-widget .input-color {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      width: var(--target-size-min);
      height: var(--target-size-min);
      padding: 0;
      background-color: transparent;
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius);
      cursor: pointer;
      transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
    }
.briko-order-widget .input-color::-webkit-color-swatch-wrapper {
      padding: 4px;
    }
.briko-order-widget .input-color::-webkit-color-swatch {
      border: none;
      border-radius: calc(var(--border-radius) - 4px);
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    }
.briko-order-widget .input-color::-moz-color-swatch {
      border: none;
      border-radius: calc(var(--border-radius) - 4px);
      box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    }
.briko-order-widget .input-color:focus-visible {
      outline: 0;
      border-color: var(--primary);
      box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
    }
.briko-order-widget .select-search {
      position: relative;
      width: 100%;
      
    }
.briko-order-widget .select-search:has(.select-search-menu:popover-open) .select-search-trigger {
      border-color: var(--primary);
      box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
    }
.briko-order-widget .select-search:has(.select-search-menu:popover-open) .select-search-trigger::after {
      transform: rotate(180deg);
    }
.briko-order-widget .select-search-trigger {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      text-align: left;
      
      font: inherit;
      cursor: pointer;
      user-select: none;
      background-color: var(--bg-surface);
    }
.briko-order-widget .select-search-trigger::after {
      content: "▼";
      font-size: 0.7rem;
      color: var(--text-muted);
      transition: transform var(--transition-speed);
    }
.briko-order-widget .select-search-menu {
      
      position: fixed;
      position-anchor: auto;
      
      inset: auto;
      top: anchor(bottom);
      left: anchor(left);
      width: anchor-size(width);
      margin: 4px 0 0 0;
      max-height: 300px;
      padding: calc(var(--spacing-unit) * 1);
      color: var(--text-main);
      background-color: var(--bg-surface);
      border: 1px solid var(--border-color);
      border-radius: var(--border-radius);
      box-shadow: var(--shadow-md);
      
      z-index: var(--z-index-dropdown);
    }
.briko-order-widget .select-search-menu:popover-open {
      display: flex;
      flex-direction: column;
      animation: fadeInDown 0.2s ease;
    }
.briko-order-widget .select-search-menu {
      
    }
.briko-order-widget .select-search-input {
      margin-bottom: calc(var(--spacing-unit) * 1);
      min-height: 36px !important;
      padding: 0.5rem 0.75rem;
    }
.briko-order-widget .select-search-list {
      overflow-y: auto;
      flex: 1;
    }
.briko-order-widget .select-search-list::-webkit-scrollbar {
      width: 6px;
    }
.briko-order-widget .select-search-list::-webkit-scrollbar-track {
      background: transparent;
    }
.briko-order-widget .select-search-list::-webkit-scrollbar-thumb {
      background: var(--border-color);
      border-radius: 10px;
    }
.briko-order-widget .select-search-option {
      cursor: pointer;
      padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 1.5);
      border-radius: calc(var(--border-radius) / 2);
      transition: background-color var(--transition-speed);
    }
.briko-order-widget .select-search-option:hover {
      background-color: var(--card-bg-subtle);
    }
.briko-order-widget .select-search-option.is-hidden {
      display: none !important;
    }
.briko-order-widget .select-search-option.is-selected {
      background-color: rgba(var(--primary-rgb), 0.1);
      color: var(--primary);
      font-weight: var(--fw-bold);
    }
.briko-order-widget .custom-select-pills .badge {
      padding: 4px 10px;
      font-size: 0.75rem;
      border-radius: 50px;
      font-weight: var(--fw-medium);
    }
.briko-order-widget .custom-select-search .input {
      padding-left: calc(var(--spacing-unit) * 4.5);
    }
.briko-order-widget .custom-select-search .input:user-valid, .briko-order-widget .custom-select-search .input:user-invalid {
      border-color: var(--border-color) !important;
    }
.briko-order-widget .custom-select-search .input:focus {
      border-color: var(--primary) !important;
      box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring-color) !important;
    }
.briko-order-widget .navbar-sticky.is-hidden {
    transform: translateY(-100%);
  }
.briko-order-widget .card {
    display: flex;
    flex-direction: column;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden; 
    transition: box-shadow var(--transition-speed), transform var(--transition-speed);
  }
.briko-order-widget .card-header {
    padding: calc(var(--spacing-unit) * 2);
    background-color: var(--card-bg-subtle);
    border-bottom: 1px solid var(--border-color);
    font-weight: var(--fw-bold);
    border-top-left-radius: calc(var(--border-radius) - 1px);
    border-top-right-radius: calc(var(--border-radius) - 1px);
  }
.briko-order-widget .card-body {
    flex: 1 1 auto; 
    padding: calc(var(--spacing-unit) * 2);
    display: flex;
    flex-direction: column;
    gap: calc(var(--spacing-unit) * 2);
  }
.briko-order-widget .card-footer {
    padding: calc(var(--spacing-unit) * 2);
    background-color: var(--card-bg-subtle);
    border-top: 1px solid var(--border-color);
    margin-top: auto;
    border-bottom-left-radius: calc(var(--border-radius) - 1px);
    border-bottom-right-radius: calc(var(--border-radius) - 1px);
  }
.briko-order-widget .modal-dialog {
      border: none;
      padding: 0;
      background: transparent;
      
      color: var(--text-main);
      overflow: visible;
      max-width: 600px;
      width: 90%;
      margin: auto;
      
      max-height: calc(100vh - 2rem);
      max-height: calc(100dvh - 2rem); 
      
      display: flex;
      flex-direction: column;
    }
.briko-order-widget .modal-dialog:not([open]) {
      display: none !important;
      pointer-events: none !important;
    }
.briko-order-widget .modal-dialog::backdrop {
      
      background-color: rgba(30, 41, 59, 0.6);
      backdrop-filter: blur(4px);
    }
.briko-order-widget .modal-dialog {
      transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease, display var(--transition-speed) ease allow-discrete, overlay var(--transition-speed) ease allow-discrete;
      opacity: 0;
      transform: translateY(-20px);
    }
.briko-order-widget .modal-dialog[open] {
      opacity: 1;
      transform: translateY(0);
    }
.briko-order-widget .modal-dialog .card {
      margin: 0;
      box-shadow: var(--shadow-lg);
      
      max-height: 100%;
      display: flex;
      flex-direction: column;
    }
.briko-order-widget .modal-dialog .card-body {
      overflow-y: auto;
      overscroll-behavior: contain; 
      
      scrollbar-width: thin;
    }
.briko-order-widget .modal-dialog .card-body::-webkit-scrollbar {
      width: 6px;
    }
.briko-order-widget .modal-dialog .card-body::-webkit-scrollbar-track {
      background: transparent;
    }
.briko-order-widget .modal-dialog .card-body::-webkit-scrollbar-thumb {
      background: var(--border-color);
      border-radius: 10px;
    }
.briko-order-widget .modal-sm {
      max-width: 360px;
    }
.briko-order-widget .modal-confirm .card-body {
      text-align: center;
      padding: calc(var(--spacing-unit) * 4) calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 2);
    }
.briko-order-widget .modal-confirm-icon {
      font-size: 3.5rem;
      line-height: 1;
      margin-bottom: calc(var(--spacing-unit) * 2);
      
      display: inline-block;
    }
.briko-order-widget .modal-confirm .card-footer {
      display: flex;
      gap: calc(var(--spacing-unit) * 2);
      background-color: transparent; 
      border-top: none;
      padding: 0 calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 3);
    }
.briko-order-widget .modal-confirm .card-footer .btn {
      flex: 1; 
    }
.briko-order-widget .modal-context {
      max-width: 400px;
      margin-right: calc(var(--spacing-unit) * 2);
      margin-left: auto;
      transform: translateX(20px);
    }
.briko-order-widget .modal-context[open] {
      transform: translateX(0);
    }
.briko-order-widget .modal-context .card {
      border-radius: var(--border-radius);
    }
.briko-order-widget .modal-context .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3);
      background-color: var(--bg-surface);
      border-bottom: 1px solid var(--border-color);
      border-top-left-radius: calc(var(--border-radius) - 1px);
      border-top-right-radius: calc(var(--border-radius) - 1px);
    }
.briko-order-widget .modal-context .card-header h3 {
      margin: 0;
      font-size: 1.125rem;
    }
.briko-order-widget .modal-close-btn {
      background: transparent;
      border: none;
      color: var(--text-muted);
      font-size: 1.5rem;
      line-height: 1;
      padding: 0;
      cursor: pointer;
      transition: color var(--transition-speed);
      width: var(--target-size-min);
      height: var(--target-size-min);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: -12px;
    }
.briko-order-widget .modal-close-btn:hover {
      color: var(--danger);
    }
.briko-order-widget .modal-dialog .card-header .btn-action:focus-visible, .briko-order-widget .modal-dialog .card-header .modal-close-btn:focus-visible {
      outline: none;
      box-shadow: inset 0 0 0 2px var(--focus-ring-color);
      background-color: var(--card-bg-subtle);
    }
.briko-order-widget .modal-context .card-body {
      padding: calc(var(--spacing-unit) * 3);
      display: flex;
      flex-direction: column;
      gap: calc(var(--spacing-unit) * 2);
    }
.briko-order-widget .modal-divider {
      border: none;
      border-top: 1px solid var(--border-color);
      margin: calc(var(--spacing-unit) * 1) 0;
      width: 100%;
    }
.briko-order-widget .modal-action-list {
      display: flex;
      flex-direction: column;
      gap: calc(var(--spacing-unit) * 0.5);
      margin: 0;
      padding: 0;
      list-style: none;
    }
.briko-order-widget .modal-action-btn {
      display: flex;
      align-items: center;
      gap: calc(var(--spacing-unit) * 1.5);
      width: 100%;
      padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
      background: transparent;
      border: none;
      border-radius: calc(var(--border-radius) / 2);
      color: var(--text-main);
      font-weight: var(--fw-medium);
      text-align: left;
      cursor: pointer;
      transition: background-color var(--transition-speed), color var(--transition-speed);
      min-height: var(--target-size-min) !important;
    }
.briko-order-widget .modal-action-btn:hover {
      background-color: var(--card-bg-subtle);
      color: var(--primary);
    }
.briko-order-widget .modal-action-btn.text-danger:hover {
      background-color: rgba(var(--danger-rgb), 0.1);
      color: var(--danger);
    }
.briko-order-widget .popover-context .popover-action-btn.text-danger:hover {
      background-color: rgba(var(--danger-rgb), 0.1);
      color: var(--danger);
    }
.briko-order-widget .grid-expand {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
.briko-order-widget .grid-expand > .grid-expand-inner {
    overflow: hidden;
  }
.briko-order-widget .grid-expand.is-open, .briko-order-widget details[open] .grid-expand, .briko-order-widget .form-switch:has(.form-switch-input:checked) + .grid-expand {
    grid-template-rows: 1fr;
  }
.briko-order-widget .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25em 0.65em;
    font-size: 0.75em;
    font-weight: var(--fw-bold);
    line-height: 1;
    border-radius: 50rem; 
    color: var(--btn-text-light);
  }
.briko-order-widget .badge-primary {
    background-color: var(--primary);
  }
.briko-order-widget .badge-secondary {
    background-color: var(--secondary);
  }
.briko-order-widget .badge-success {
    background-color: var(--success);
    color: var(--semantic-fg);
  }
.briko-order-widget .badge-danger {
    background-color: var(--danger);
    color: var(--semantic-fg);
  }
.briko-order-widget .badge-warning {
    background-color: var(--warning);
    color: var(--semantic-fg);
  }
.briko-order-widget .badge-info {
    background-color: var(--info);
    color: var(--semantic-fg);
  }
.briko-order-widget .badge-dark {
    background-color: var(--dark);
  }
.briko-order-widget .filter-item.is-hidden {
    display: none !important;
  }
.briko-order-widget .btn-copy {
      position: absolute;
      top: 12px;
      right: 12px;
      background-color: rgba(255, 255, 255, 0.1);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, 0.2);
      padding: 4px 12px;
      border-radius: calc(var(--border-radius) / 2);
      font-size: 0.75rem;
      cursor: pointer;
      transition: all 0.2s ease;
      backdrop-filter: blur(4px);
    }
.briko-order-widget .btn-copy:hover {
      background-color: rgba(255, 255, 255, 0.2);
    }
.briko-order-widget .btn-copy.is-copied {
      background-color: var(--success);
      border-color: var(--success);
    }
.briko-order-widget .p-0 {
      padding: 0 !important;
    }
.briko-order-widget .pt-0 {
      padding-top: 0 !important;
    }
.briko-order-widget .pb-0 {
      padding-bottom: 0 !important;
    }
.briko-order-widget .pl-0 {
      padding-left: 0 !important;
    }
.briko-order-widget .pr-0 {
      padding-right: 0 !important;
    }
.briko-order-widget .px-0 {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }
.briko-order-widget .py-0 {
      padding-top: 0 !important;
      padding-bottom: 0 !important;
    }
.briko-order-widget .m-0 {
      margin: 0 !important;
    }
.briko-order-widget .mt-0 {
      margin-top: 0 !important;
    }
.briko-order-widget .mb-0 {
      margin-bottom: 0 !important;
    }
.briko-order-widget .ml-0 {
      margin-left: 0 !important;
    }
.briko-order-widget .mr-0 {
      margin-right: 0 !important;
    }
.briko-order-widget .pt-1 {
      padding-top: var(--spacing-unit) !important;
    }
.briko-order-widget .pb-1 {
      padding-bottom: var(--spacing-unit) !important;
    }
.briko-order-widget .pl-1 {
      padding-left: var(--spacing-unit) !important;
    }
.briko-order-widget .pr-1 {
      padding-right: var(--spacing-unit) !important;
    }
.briko-order-widget .px-1 {
      padding-left: var(--spacing-unit) !important;
      padding-right: var(--spacing-unit) !important;
    }
.briko-order-widget .py-1 {
      padding-top: var(--spacing-unit) !important;
      padding-bottom: var(--spacing-unit) !important;
    }
.briko-order-widget .mt-1 {
      margin-top: var(--spacing-unit) !important;
    }
.briko-order-widget .mb-1 {
      margin-bottom: var(--spacing-unit) !important;
    }
.briko-order-widget .ml-1 {
      margin-left: var(--spacing-unit) !important;
    }
.briko-order-widget .mr-1 {
      margin-right: var(--spacing-unit) !important;
    }
.briko-order-widget .pt-2 {
      padding-top: calc(var(--spacing-unit) * 2) !important;
    }
.briko-order-widget .pb-2 {
      padding-bottom: calc(var(--spacing-unit) * 2) !important;
    }
.briko-order-widget .pl-2 {
      padding-left: calc(var(--spacing-unit) * 2) !important;
    }
.briko-order-widget .pr-2 {
      padding-right: calc(var(--spacing-unit) * 2) !important;
    }
.briko-order-widget .px-2 {
      padding-left: calc(var(--spacing-unit) * 2) !important;
      padding-right: calc(var(--spacing-unit) * 2) !important;
    }
.briko-order-widget .py-2 {
      padding-top: calc(var(--spacing-unit) * 2) !important;
      padding-bottom: calc(var(--spacing-unit) * 2) !important;
    }
.briko-order-widget .mt-2 {
      margin-top: calc(var(--spacing-unit) * 2) !important;
    }
.briko-order-widget .mb-2 {
      margin-bottom: calc(var(--spacing-unit) * 2) !important;
    }
.briko-order-widget .ml-2 {
      margin-left: calc(var(--spacing-unit) * 2) !important;
    }
.briko-order-widget .mr-2 {
      margin-right: calc(var(--spacing-unit) * 2) !important;
    }
.briko-order-widget .pt-3 {
      padding-top: calc(var(--spacing-unit) * 3) !important;
    }
.briko-order-widget .pb-3 {
      padding-bottom: calc(var(--spacing-unit) * 3) !important;
    }
.briko-order-widget .pl-3 {
      padding-left: calc(var(--spacing-unit) * 3) !important;
    }
.briko-order-widget .pr-3 {
      padding-right: calc(var(--spacing-unit) * 3) !important;
    }
.briko-order-widget .px-3 {
      padding-left: calc(var(--spacing-unit) * 3) !important;
      padding-right: calc(var(--spacing-unit) * 3) !important;
    }
.briko-order-widget .py-3 {
      padding-top: calc(var(--spacing-unit) * 3) !important;
      padding-bottom: calc(var(--spacing-unit) * 3) !important;
    }
.briko-order-widget .mt-3 {
      margin-top: calc(var(--spacing-unit) * 3) !important;
    }
.briko-order-widget .mb-3 {
      margin-bottom: calc(var(--spacing-unit) * 3) !important;
    }
.briko-order-widget .ml-3 {
      margin-left: calc(var(--spacing-unit) * 3) !important;
    }
.briko-order-widget .mr-3 {
      margin-right: calc(var(--spacing-unit) * 3) !important;
    }
.briko-order-widget .pt-4 {
      padding-top: calc(var(--spacing-unit) * 4) !important;
    }
.briko-order-widget .pb-4 {
      padding-bottom: calc(var(--spacing-unit) * 4) !important;
    }
.briko-order-widget .pl-4 {
      padding-left: calc(var(--spacing-unit) * 4) !important;
    }
.briko-order-widget .pr-4 {
      padding-right: calc(var(--spacing-unit) * 4) !important;
    }
.briko-order-widget .px-4 {
      padding-left: calc(var(--spacing-unit) * 4) !important;
      padding-right: calc(var(--spacing-unit) * 4) !important;
    }
.briko-order-widget .py-4 {
      padding-top: calc(var(--spacing-unit) * 4) !important;
      padding-bottom: calc(var(--spacing-unit) * 4) !important;
    }
.briko-order-widget .mt-4 {
      margin-top: calc(var(--spacing-unit) * 4) !important;
    }
.briko-order-widget .mb-4 {
      margin-bottom: calc(var(--spacing-unit) * 4) !important;
    }
.briko-order-widget .ml-4 {
      margin-left: calc(var(--spacing-unit) * 4) !important;
    }
.briko-order-widget .mr-4 {
      margin-right: calc(var(--spacing-unit) * 4) !important;
    }
.briko-order-widget .pt-5 {
      padding-top: calc(var(--spacing-unit) * 6) !important;
    }
.briko-order-widget .pb-5 {
      padding-bottom: calc(var(--spacing-unit) * 6) !important;
    }
.briko-order-widget .pl-5 {
      padding-left: calc(var(--spacing-unit) * 6) !important;
    }
.briko-order-widget .pr-5 {
      padding-right: calc(var(--spacing-unit) * 6) !important;
    }
.briko-order-widget .px-5 {
      padding-left: calc(var(--spacing-unit) * 6) !important;
      padding-right: calc(var(--spacing-unit) * 6) !important;
    }
.briko-order-widget .py-5 {
      padding-top: calc(var(--spacing-unit) * 6) !important;
      padding-bottom: calc(var(--spacing-unit) * 6) !important;
    }
.briko-order-widget .mt-5 {
      margin-top: calc(var(--spacing-unit) * 6) !important;
    }
.briko-order-widget .mb-5 {
      margin-bottom: calc(var(--spacing-unit) * 6) !important;
    }
.briko-order-widget .ml-5 {
      margin-left: calc(var(--spacing-unit) * 6) !important;
    }
.briko-order-widget .mr-5 {
      margin-right: calc(var(--spacing-unit) * 6) !important;
    }
.briko-order-widget .mt-auto {
      margin-top: auto !important;
    }
.briko-order-widget .mb-auto {
      margin-bottom: auto !important;
    }
.briko-order-widget .ml-auto {
      margin-left: auto !important;
    }
.briko-order-widget .mr-auto {
      margin-right: auto !important;
    }
.briko-order-widget .text-xs {
    font-size: clamp(0.625rem, 0.6rem + 0.08vw, 0.6875rem) !important;
  }
.briko-order-widget .text-sm {
    font-size: clamp(0.6875rem, 0.66rem + 0.08vw, 0.75rem) !important;
  }
.briko-order-widget .text-base {
    font-size: var(--text-base-size) !important;
  }
.briko-order-widget .text-1 {
    font-size: var(--text-xs) !important;
  }
.briko-order-widget .text-2 {
    font-size: var(--text-sm) !important;
  }
.briko-order-widget .text-3 {
    font-size: var(--text-base-size) !important;
  }
.briko-order-widget .text-4 {
    font-size: var(--h5-size) !important;
  }
.briko-order-widget .text-5 {
    font-size: var(--h4-size) !important;
  }
.briko-order-widget .text-6 {
    font-size: var(--h3-size) !important;
  }
.briko-order-widget .text-7 {
    font-size: var(--h2-size) !important;
  }
.briko-order-widget .text-8 {
    font-size: var(--h1-size) !important;
  }
.briko-order-widget .text-9 {
    font-size: clamp(2.25rem, 5vw + 1rem, 4.5rem) !important;
  }
.briko-order-widget .text-10 {
    font-size: clamp(2.5rem, 6vw + 1rem, 5.5rem) !important;
  }
.briko-order-widget .text-11 {
    font-size: clamp(2.75rem, 7vw + 1rem, 6.5rem) !important;
  }
.briko-order-widget .text-12 {
    font-size: clamp(3.5rem, 10vw + 1rem, 9rem) !important;
  }
.briko-order-widget .text-center {
    text-align: center !important;
  }
.briko-order-widget .text-start {
    text-align: left !important;
  }
.briko-order-widget .text-end {
    text-align: right !important;
  }
.briko-order-widget .text-justify {
    text-align: justify !important;
  }
.briko-order-widget .text-uppercase {
    text-transform: uppercase !important;
  }
.briko-order-widget .text-lowercase {
    text-transform: lowercase !important;
  }
.briko-order-widget .text-capitalize {
    text-transform: capitalize !important;
  }
.briko-order-widget .fw-light {
    font-weight: var(--fw-light) !important;
  }
.briko-order-widget .fw-normal {
    font-weight: var(--fw-normal) !important;
  }
.briko-order-widget .fw-medium {
    font-weight: var(--fw-medium) !important;
  }
.briko-order-widget .fw-semibold {
    font-weight: var(--fw-semibold) !important;
  }
.briko-order-widget .fw-bold {
    font-weight: var(--fw-bold) !important;
  }
.briko-order-widget .fw-black {
    font-weight: var(--fw-black) !important;
  }
.briko-order-widget .text-decoration-none {
    text-decoration: none !important;
  }
.briko-order-widget .text-decoration-underline {
    text-decoration: underline !important;
  }
.briko-order-widget .text-decoration-line-through {
    text-decoration: line-through !important;
  }
.briko-order-widget .text-main {
      color: var(--text-main) !important;
    }
.briko-order-widget .text-muted {
      color: var(--text-muted) !important;
    }
.briko-order-widget .text-white {
      color: #ffffff !important;
    }
.briko-order-widget .text-primary {
      color: var(--primary) !important;
    }
.briko-order-widget .text-secondary {
      color: var(--secondary) !important;
    }
.briko-order-widget .text-success {
      color: var(--success-text) !important;
    }
.briko-order-widget .text-danger {
      color: var(--danger-text) !important;
    }
.briko-order-widget .text-warning {
      color: var(--warning-text) !important;
    }
.briko-order-widget .text-info {
      color: var(--info-text) !important;
    }
.briko-order-widget .text-dark {
      color: var(--dark) !important;
    }
.briko-order-widget .text-light {
      color: var(--light) !important;
    }
.briko-order-widget .text-hover-primary {
      transition: color var(--transition-speed) ease;
    }
.briko-order-widget .text-hover-primary:hover {
      color: var(--primary) !important;
    }
.briko-order-widget .border-hover-primary {
      transition: border-color var(--transition-speed) ease;
    }
.briko-order-widget .border-hover-primary:hover {
      border-color: var(--primary) !important;
    }
.briko-order-widget .text-hover-secondary {
      transition: color var(--transition-speed) ease;
    }
.briko-order-widget .text-hover-secondary:hover {
      color: var(--secondary) !important;
    }
.briko-order-widget .border-hover-secondary {
      transition: border-color var(--transition-speed) ease;
    }
.briko-order-widget .border-hover-secondary:hover {
      border-color: var(--secondary) !important;
    }
.briko-order-widget .text-hover-success {
      transition: color var(--transition-speed) ease;
    }
.briko-order-widget .text-hover-success:hover {
      color: var(--success) !important;
    }
.briko-order-widget .border-hover-success {
      transition: border-color var(--transition-speed) ease;
    }
.briko-order-widget .border-hover-success:hover {
      border-color: var(--success) !important;
    }
.briko-order-widget .text-hover-danger {
      transition: color var(--transition-speed) ease;
    }
.briko-order-widget .text-hover-danger:hover {
      color: var(--danger) !important;
    }
.briko-order-widget .border-hover-danger {
      transition: border-color var(--transition-speed) ease;
    }
.briko-order-widget .border-hover-danger:hover {
      border-color: var(--danger) !important;
    }
.briko-order-widget .text-hover-warning {
      transition: color var(--transition-speed) ease;
    }
.briko-order-widget .text-hover-warning:hover {
      color: var(--warning) !important;
    }
.briko-order-widget .border-hover-warning {
      transition: border-color var(--transition-speed) ease;
    }
.briko-order-widget .border-hover-warning:hover {
      border-color: var(--warning) !important;
    }
.briko-order-widget .text-hover-info {
      transition: color var(--transition-speed) ease;
    }
.briko-order-widget .text-hover-info:hover {
      color: var(--info) !important;
    }
.briko-order-widget .border-hover-info {
      transition: border-color var(--transition-speed) ease;
    }
.briko-order-widget .border-hover-info:hover {
      border-color: var(--info) !important;
    }
.briko-order-widget .text-hover-light {
      transition: color var(--transition-speed) ease;
    }
.briko-order-widget .text-hover-light:hover {
      color: var(--light) !important;
    }
.briko-order-widget .border-hover-light {
      transition: border-color var(--transition-speed) ease;
    }
.briko-order-widget .border-hover-light:hover {
      border-color: var(--light) !important;
    }
.briko-order-widget .text-hover-dark {
      transition: color var(--transition-speed) ease;
    }
.briko-order-widget .text-hover-dark:hover {
      color: var(--dark) !important;
    }
.briko-order-widget .border-hover-dark {
      transition: border-color var(--transition-speed) ease;
    }
.briko-order-widget .border-hover-dark:hover {
      border-color: var(--dark) !important;
    }
.briko-order-widget .text-hover-surface {
      transition: color var(--transition-speed) ease;
    }
.briko-order-widget .text-hover-surface:hover {
      color: var(--bg-surface) !important;
    }
.briko-order-widget .border-hover-surface {
      transition: border-color var(--transition-speed) ease;
    }
.briko-order-widget .border-hover-surface:hover {
      border-color: var(--bg-surface) !important;
    }
.briko-order-widget .text-hover-body {
      transition: color var(--transition-speed) ease;
    }
.briko-order-widget .text-hover-body:hover {
      color: var(--bg-body) !important;
    }
.briko-order-widget .border-hover-body {
      transition: border-color var(--transition-speed) ease;
    }
.briko-order-widget .border-hover-body:hover {
      border-color: var(--bg-body) !important;
    }
.briko-order-widget .text-clip-bg {
      background-image: var(--clip-img);
      background-size: cover;
      background-position: center;
      background-attachment: fixed;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
      display: inline-block;
    }
.briko-order-widget .border {
      border: 1px solid var(--border-color) !important;
    }
.briko-order-widget .border-0 {
      border: 0 !important;
    }
.briko-order-widget .border-top {
      border-top: 1px solid var(--border-color) !important;
    }
.briko-order-widget .border-top-0 {
      border-top: 0 !important;
    }
.briko-order-widget .border-bottom {
      border-bottom: 1px solid var(--border-color) !important;
    }
.briko-order-widget .border-bottom-0 {
      border-bottom: 0 !important;
    }
.briko-order-widget .border-start, .briko-order-widget .border-left {
      border-left: 1px solid var(--border-color) !important;
    }
.briko-order-widget .border-start-0, .briko-order-widget .border-left-0 {
      border-left: 0 !important;
    }
.briko-order-widget .border-end, .briko-order-widget .border-right {
      border-right: 1px solid var(--border-color) !important;
    }
.briko-order-widget .border-end-0, .briko-order-widget .border-right-0 {
      border-right: 0 !important;
    }
.briko-order-widget .rounded-0, .briko-order-widget .border-radius-0 {
      border-radius: 0 !important;
    }
.briko-order-widget .rounded-1, .briko-order-widget .border-radius-1 {
      border-radius: 4px !important;
    }
.briko-order-widget .rounded-2, .briko-order-widget .border-radius-2 {
      border-radius: var(--border-radius) !important;
    }
.briko-order-widget .rounded-3, .briko-order-widget .border-radius-3 {
      border-radius: var(--border-radius-lg, 16px) !important;
    }
.briko-order-widget .rounded-4, .briko-order-widget .border-radius-4 {
      border-radius: 24px !important;
    }
.briko-order-widget .rounded-5, .briko-order-widget .border-radius-5 {
      border-radius: 32px !important;
    }
.briko-order-widget .rounded-circle {
      border-radius: 50% !important;
    }
.briko-order-widget .rounded-pill {
      border-radius: 50rem !important;
    }
.briko-order-widget .rounded-top {
      border-top-left-radius: var(--border-radius) !important;
      border-top-right-radius: var(--border-radius) !important;
    }
.briko-order-widget .rounded-bottom {
      border-bottom-left-radius: var(--border-radius) !important;
      border-bottom-right-radius: var(--border-radius) !important;
    }
.briko-order-widget .rounded-top-0 {
      border-top-left-radius: 0 !important;
      border-top-right-radius: 0 !important;
    }
.briko-order-widget .rounded-bottom-0 {
      border-bottom-left-radius: 0 !important;
      border-bottom-right-radius: 0 !important;
    }
.briko-order-widget .text-highlight {
      background-image: linear-gradient(transparent 60%, rgba(var(--primary-rgb), 0.3) 60%);
      background-size: 0% 100%;
      background-repeat: no-repeat;
      transition: background-size 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    }
.briko-order-widget .text-highlight:hover, .briko-order-widget .text-highlight.is-active {
      background-size: 100% 100%;
    }
.briko-order-widget .text-gradient-animated {
      --gradient-color-1: var(--primary);
      --gradient-color-2: var(--info);
      --gradient-color-3: var(--success);
      background: linear-gradient(to right, var(--gradient-color-1), var(--gradient-color-2), var(--gradient-color-3), var(--gradient-color-1));
      background-size: 300% auto;
      color: transparent;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: textGradientFlow 4s linear infinite;
    }
.briko-order-widget .input:user-invalid {
      animation: shakeAnim 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    }
.briko-order-widget .d-none {
      display: none !important;
    }
.briko-order-widget .d-block {
      display: block !important;
    }
.briko-order-widget .d-flex {
      display: flex !important;
    }
.briko-order-widget .text-knockout-light {
      background-color: #fff;
      color: #000; 
      mix-blend-mode: screen; 
    }
.briko-order-widget .text-knockout-dark {
      background-color: #000;
      color: #fff; 
      mix-blend-mode: multiply; 
    }

@media (pointer: coarse) {
    .briko-order-widget button:not(.carousel-dot):not(.onboarding-dot):not(.tour-dot):not(.btn-icon), .briko-order-widget input:not([type=checkbox]):not([type=radio]):not([type=color]), .briko-order-widget select, .briko-order-widget textarea, .briko-order-widget .form-switch-label, .briko-order-widget .form-pill {
        min-height: var(--target-size-min, 44px) !important;
      }
}
@media (monochrome), (update: slow) {
    .briko-order-widget .card, .briko-order-widget .btn, .briko-order-widget .shadow, .briko-order-widget .dropdown-menu {
      box-shadow: none !important;
      border: 2px solid #000000 !important;
    }
}
@media (min-width: 768px) {
    .briko-order-widget .grid-md-cols-1 {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
      }
    .briko-order-widget .grid-md-cols-2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
      }
    .briko-order-widget .grid-md-cols-3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
      }
    .briko-order-widget .grid-md-cols-4 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
      }
    .briko-order-widget .grid-md-cols-5 {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
      }
    .briko-order-widget .grid-md-cols-6 {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
      }
    .briko-order-widget .grid-md-cols-7 {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
      }
    .briko-order-widget .grid-md-cols-8 {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
      }
    .briko-order-widget .grid-md-cols-9 {
        display: grid;
        grid-template-columns: repeat(9, 1fr);
      }
    .briko-order-widget .grid-md-cols-10 {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
      }
    .briko-order-widget .grid-md-cols-11 {
        display: grid;
        grid-template-columns: repeat(11, 1fr);
      }
    .briko-order-widget .grid-md-cols-12 {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
      }
}
@media (min-width: 992px) {
    .briko-order-widget .grid-lg-cols-1 {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
      }
    .briko-order-widget .grid-lg-cols-2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
      }
    .briko-order-widget .grid-lg-cols-3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
      }
    .briko-order-widget .grid-lg-cols-4 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
      }
    .briko-order-widget .grid-lg-cols-5 {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
      }
    .briko-order-widget .grid-lg-cols-6 {
        display: grid;
        grid-template-columns: repeat(6, 1fr);
      }
    .briko-order-widget .grid-lg-cols-7 {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
      }
    .briko-order-widget .grid-lg-cols-8 {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
      }
    .briko-order-widget .grid-lg-cols-9 {
        display: grid;
        grid-template-columns: repeat(9, 1fr);
      }
    .briko-order-widget .grid-lg-cols-10 {
        display: grid;
        grid-template-columns: repeat(10, 1fr);
      }
    .briko-order-widget .grid-lg-cols-11 {
        display: grid;
        grid-template-columns: repeat(11, 1fr);
      }
    .briko-order-widget .grid-lg-cols-12 {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
      }
}
@media (min-width: 768px) {
    .briko-order-widget .col-md-span-1 {
        grid-column-end: span 1;
        min-width: 0;
      }
    .briko-order-widget .col-md-span-2 {
        grid-column-end: span 2;
        min-width: 0;
      }
    .briko-order-widget .col-md-span-3 {
        grid-column-end: span 3;
        min-width: 0;
      }
    .briko-order-widget .col-md-span-4 {
        grid-column-end: span 4;
        min-width: 0;
      }
    .briko-order-widget .col-md-span-5 {
        grid-column-end: span 5;
        min-width: 0;
      }
    .briko-order-widget .col-md-span-6 {
        grid-column-end: span 6;
        min-width: 0;
      }
    .briko-order-widget .col-md-span-7 {
        grid-column-end: span 7;
        min-width: 0;
      }
    .briko-order-widget .col-md-span-8 {
        grid-column-end: span 8;
        min-width: 0;
      }
    .briko-order-widget .col-md-span-9 {
        grid-column-end: span 9;
        min-width: 0;
      }
    .briko-order-widget .col-md-span-10 {
        grid-column-end: span 10;
        min-width: 0;
      }
    .briko-order-widget .col-md-span-11 {
        grid-column-end: span 11;
        min-width: 0;
      }
    .briko-order-widget .col-md-span-12 {
        grid-column-end: span 12;
        min-width: 0;
      }
}
@media (min-width: 992px) {
    .briko-order-widget .col-lg-span-1 {
        grid-column-end: span 1;
        min-width: 0;
      }
    .briko-order-widget .col-lg-span-2 {
        grid-column-end: span 2;
        min-width: 0;
      }
    .briko-order-widget .col-lg-span-3 {
        grid-column-end: span 3;
        min-width: 0;
      }
    .briko-order-widget .col-lg-span-4 {
        grid-column-end: span 4;
        min-width: 0;
      }
    .briko-order-widget .col-lg-span-5 {
        grid-column-end: span 5;
        min-width: 0;
      }
    .briko-order-widget .col-lg-span-6 {
        grid-column-end: span 6;
        min-width: 0;
      }
    .briko-order-widget .col-lg-span-7 {
        grid-column-end: span 7;
        min-width: 0;
      }
    .briko-order-widget .col-lg-span-8 {
        grid-column-end: span 8;
        min-width: 0;
      }
    .briko-order-widget .col-lg-span-9 {
        grid-column-end: span 9;
        min-width: 0;
      }
    .briko-order-widget .col-lg-span-10 {
        grid-column-end: span 10;
        min-width: 0;
      }
    .briko-order-widget .col-lg-span-11 {
        grid-column-end: span 11;
        min-width: 0;
      }
    .briko-order-widget .col-lg-span-12 {
        grid-column-end: span 12;
        min-width: 0;
      }
}
@media (min-width: 768px) {
    .briko-order-widget .gap-md-0 {
      gap: 0;
    }
    .briko-order-widget .gap-md-1 {
      gap: calc(var(--spacing-unit) * 1);
    }
    .briko-order-widget .gap-md-2 {
      gap: calc(var(--spacing-unit) * 2);
    }
    .briko-order-widget .gap-md-3 {
      gap: calc(var(--spacing-unit) * 3);
    }
    .briko-order-widget .gap-md-4 {
      gap: calc(var(--spacing-unit) * 4);
    }
    .briko-order-widget .gap-md-5 {
      gap: calc(var(--spacing-unit) * 6);
    }
}
@media (pointer: coarse) {
    .briko-order-widget .btn-icon {
        --btn-icon-size: var(--target-size-min, 44px) !important;
      }
}
@media (prefers-reduced-motion: reduce) {
    .briko-order-widget .btn-hover-spring .btn:not([class*=hover-]):hover, .briko-order-widget .btn-hover-lift .btn:not([class*=hover-]):hover {
        transform: none;
      }
}
@media (max-width: 767px) {
    .briko-order-widget .modal-context {
        max-width: 100%;
        margin: auto 0 0 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        transform: translateY(100%);
        
        max-height: 90vh;
        max-height: 90dvh;
      }
    .briko-order-widget .modal-context[open] {
        transform: translateY(0);
      }
    .briko-order-widget .modal-context .card {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }
}
@media (max-width: 768px) {
    .briko-order-widget .popover-context .popover-action-btn, .briko-order-widget .popover-context .btn-action {
        width: 100%;
        justify-content: flex-start;
        padding: calc(var(--spacing-unit) * 2);
        font-size: 1rem;
        min-height: 48px !important;
      }
    .briko-order-widget .popover-context .popover-action-btn i, .briko-order-widget .popover-context .popover-action-btn svg, .briko-order-widget .popover-context .btn-action i, .briko-order-widget .popover-context .btn-action svg {
        font-size: 1.25rem;
        margin-right: calc(var(--spacing-unit) * 1);
      }
}
@media (min-width: 768px) {
    .briko-order-widget .pt-md-0 {
        padding-top: 0 !important;
      }
    .briko-order-widget .pb-md-0 {
        padding-bottom: 0 !important;
      }
    .briko-order-widget .pl-md-0 {
        padding-left: 0 !important;
      }
    .briko-order-widget .pr-md-0 {
        padding-right: 0 !important;
      }
    .briko-order-widget .px-md-0 {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
    .briko-order-widget .py-md-0 {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
      }
    .briko-order-widget .mt-md-0 {
        margin-top: 0 !important;
      }
    .briko-order-widget .mb-md-0 {
        margin-bottom: 0 !important;
      }
    .briko-order-widget .ml-md-0 {
        margin-left: 0 !important;
      }
    .briko-order-widget .mr-md-0 {
        margin-right: 0 !important;
      }
    .briko-order-widget .pt-md-1 {
        padding-top: var(--spacing-unit) !important;
      }
    .briko-order-widget .pb-md-1 {
        padding-bottom: var(--spacing-unit) !important;
      }
    .briko-order-widget .pl-md-1 {
        padding-left: var(--spacing-unit) !important;
      }
    .briko-order-widget .pr-md-1 {
        padding-right: var(--spacing-unit) !important;
      }
    .briko-order-widget .px-md-1 {
        padding-left: var(--spacing-unit) !important;
        padding-right: var(--spacing-unit) !important;
      }
    .briko-order-widget .py-md-1 {
        padding-top: var(--spacing-unit) !important;
        padding-bottom: var(--spacing-unit) !important;
      }
    .briko-order-widget .mt-md-1 {
        margin-top: var(--spacing-unit) !important;
      }
    .briko-order-widget .mb-md-1 {
        margin-bottom: var(--spacing-unit) !important;
      }
    .briko-order-widget .ml-md-1 {
        margin-left: var(--spacing-unit) !important;
      }
    .briko-order-widget .mr-md-1 {
        margin-right: var(--spacing-unit) !important;
      }
    .briko-order-widget .pt-md-2 {
        padding-top: calc(var(--spacing-unit) * 2) !important;
      }
    .briko-order-widget .pb-md-2 {
        padding-bottom: calc(var(--spacing-unit) * 2) !important;
      }
    .briko-order-widget .pl-md-2 {
        padding-left: calc(var(--spacing-unit) * 2) !important;
      }
    .briko-order-widget .pr-md-2 {
        padding-right: calc(var(--spacing-unit) * 2) !important;
      }
    .briko-order-widget .px-md-2 {
        padding-left: calc(var(--spacing-unit) * 2) !important;
        padding-right: calc(var(--spacing-unit) * 2) !important;
      }
    .briko-order-widget .py-md-2 {
        padding-top: calc(var(--spacing-unit) * 2) !important;
        padding-bottom: calc(var(--spacing-unit) * 2) !important;
      }
    .briko-order-widget .mt-md-2 {
        margin-top: calc(var(--spacing-unit) * 2) !important;
      }
    .briko-order-widget .mb-md-2 {
        margin-bottom: calc(var(--spacing-unit) * 2) !important;
      }
    .briko-order-widget .ml-md-2 {
        margin-left: calc(var(--spacing-unit) * 2) !important;
      }
    .briko-order-widget .mr-md-2 {
        margin-right: calc(var(--spacing-unit) * 2) !important;
      }
    .briko-order-widget .pt-md-3 {
        padding-top: calc(var(--spacing-unit) * 3) !important;
      }
    .briko-order-widget .pb-md-3 {
        padding-bottom: calc(var(--spacing-unit) * 3) !important;
      }
    .briko-order-widget .pl-md-3 {
        padding-left: calc(var(--spacing-unit) * 3) !important;
      }
    .briko-order-widget .pr-md-3 {
        padding-right: calc(var(--spacing-unit) * 3) !important;
      }
    .briko-order-widget .px-md-3 {
        padding-left: calc(var(--spacing-unit) * 3) !important;
        padding-right: calc(var(--spacing-unit) * 3) !important;
      }
    .briko-order-widget .py-md-3 {
        padding-top: calc(var(--spacing-unit) * 3) !important;
        padding-bottom: calc(var(--spacing-unit) * 3) !important;
      }
    .briko-order-widget .mt-md-3 {
        margin-top: calc(var(--spacing-unit) * 3) !important;
      }
    .briko-order-widget .mb-md-3 {
        margin-bottom: calc(var(--spacing-unit) * 3) !important;
      }
    .briko-order-widget .ml-md-3 {
        margin-left: calc(var(--spacing-unit) * 3) !important;
      }
    .briko-order-widget .mr-md-3 {
        margin-right: calc(var(--spacing-unit) * 3) !important;
      }
    .briko-order-widget .pt-md-4 {
        padding-top: calc(var(--spacing-unit) * 4) !important;
      }
    .briko-order-widget .pb-md-4 {
        padding-bottom: calc(var(--spacing-unit) * 4) !important;
      }
    .briko-order-widget .pl-md-4 {
        padding-left: calc(var(--spacing-unit) * 4) !important;
      }
    .briko-order-widget .pr-md-4 {
        padding-right: calc(var(--spacing-unit) * 4) !important;
      }
    .briko-order-widget .px-md-4 {
        padding-left: calc(var(--spacing-unit) * 4) !important;
        padding-right: calc(var(--spacing-unit) * 4) !important;
      }
    .briko-order-widget .py-md-4 {
        padding-top: calc(var(--spacing-unit) * 4) !important;
        padding-bottom: calc(var(--spacing-unit) * 4) !important;
      }
    .briko-order-widget .mt-md-4 {
        margin-top: calc(var(--spacing-unit) * 4) !important;
      }
    .briko-order-widget .mb-md-4 {
        margin-bottom: calc(var(--spacing-unit) * 4) !important;
      }
    .briko-order-widget .ml-md-4 {
        margin-left: calc(var(--spacing-unit) * 4) !important;
      }
    .briko-order-widget .mr-md-4 {
        margin-right: calc(var(--spacing-unit) * 4) !important;
      }
    .briko-order-widget .pt-md-5 {
        padding-top: calc(var(--spacing-unit) * 6) !important;
      }
    .briko-order-widget .pb-md-5 {
        padding-bottom: calc(var(--spacing-unit) * 6) !important;
      }
    .briko-order-widget .pl-md-5 {
        padding-left: calc(var(--spacing-unit) * 6) !important;
      }
    .briko-order-widget .pr-md-5 {
        padding-right: calc(var(--spacing-unit) * 6) !important;
      }
    .briko-order-widget .px-md-5 {
        padding-left: calc(var(--spacing-unit) * 6) !important;
        padding-right: calc(var(--spacing-unit) * 6) !important;
      }
    .briko-order-widget .py-md-5 {
        padding-top: calc(var(--spacing-unit) * 6) !important;
        padding-bottom: calc(var(--spacing-unit) * 6) !important;
      }
    .briko-order-widget .mt-md-5 {
        margin-top: calc(var(--spacing-unit) * 6) !important;
      }
    .briko-order-widget .mb-md-5 {
        margin-bottom: calc(var(--spacing-unit) * 6) !important;
      }
    .briko-order-widget .ml-md-5 {
        margin-left: calc(var(--spacing-unit) * 6) !important;
      }
    .briko-order-widget .mr-md-5 {
        margin-right: calc(var(--spacing-unit) * 6) !important;
      }
    .briko-order-widget .mt-md-auto {
        margin-top: auto !important;
      }
    .briko-order-widget .mb-md-auto {
        margin-bottom: auto !important;
      }
    .briko-order-widget .ml-md-auto {
        margin-left: auto !important;
      }
    .briko-order-widget .mr-md-auto {
        margin-right: auto !important;
      }
}
@media (min-width: 768px) {
    .briko-order-widget .text-md-center {
      text-align: center !important;
    }
    .briko-order-widget .text-md-start {
      text-align: left !important;
    }
    .briko-order-widget .text-md-end {
      text-align: right !important;
    }
}

/* ------------------------------------------ molique shop: kafelki */

.briko-order-widget .selection-tile {
    display: block;
    position: relative;
    cursor: pointer;
    margin: 0;
    
  }
.briko-order-widget .selection-tile input[type=radio], .briko-order-widget .selection-tile input[type=checkbox] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    z-index: -1;
    
  }
.briko-order-widget .selection-tile input[type=radio]:checked + .tile-content, .briko-order-widget .selection-tile input[type=checkbox]:checked + .tile-content {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 1px var(--primary);
    background-color: rgba(var(--primary-rgb), 0.03) !important;
  }
.briko-order-widget .selection-tile input[type=radio], .briko-order-widget .selection-tile input[type=checkbox] {
    
  }
.briko-order-widget .selection-tile input[type=radio]:focus-visible + .tile-content, .briko-order-widget .selection-tile input[type=checkbox]:focus-visible + .tile-content {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: 2px;
  }
.briko-order-widget .selection-tile .tile-content {
    transition: all var(--transition-speed);
    height: 100%;
  }
.briko-order-widget .selection-tile-animated input[type=radio]:checked + .tile-content, .briko-order-widget .selection-tile-animated input[type=checkbox]:checked + .tile-content {
    
    border-color: var(--border-color) !important;
    box-shadow: none;
  }

/* ------------------------------------------------ makieta: motyw */

.briko-order-widget {
  
  --primary: #0B87D6;
  --primary-hover: #0A6FB0;
  --primary-rgb: 11, 135, 214;

  
  --bg-dark-fixed: #101A2B;
  --text-on-dark-fixed: #F8FAFC;

  --dark: #14213D;
  --dark-rgb: 20, 33, 61;

  
  --success: #22C55E;          
  --success-hover: #16A34A;
  --success-rgb: 34, 197, 94;

  --info: #0EA5E9;             
  --info-hover: #0284C7;
  --info-rgb: 14, 165, 233;

  --warning: #F59E0B;          
  --warning-hover: #D97706;
  --warning-rgb: 245, 158, 11;

  --danger: #EF4444;           
  --danger-hover: #DC2626;
  --danger-rgb: 239, 68, 68;

  --secondary: #94A3B8;        
  --secondary-hover: #64748B;
  --secondary-rgb: 148, 163, 184;

  
  --bg-body: #EFF1F4;
  --bg-surface: #FFFFFF;
  --body-rgb: 239, 241, 244;
  --border-color: #E6E9EF;
  --text-main: #14213D;
  --text-muted: #8A94A6;

  --sidebar-bg: #101A2B;
  --sidebar-rgb: 16, 26, 43;
  --sidebar-text: #8A94A6;
  --sidebar-text-active: #FFFFFF;

  
  --border-radius: 12px;
  --border-radius-lg: 20px;
  --transition-speed: 0.2s;

  --shadow-sm: 0 1px 2px rgba(16, 26, 43, 0.04);
  --shadow-md: 0 4px 16px rgba(16, 26, 43, 0.06);
  --shadow-lg: 0 12px 32px rgba(16, 26, 43, 0.08);

  
  --font-family-base: 'Manrope', system-ui, -apple-system, sans-serif;
  --font-family-heading: 'Manrope', system-ui, -apple-system, sans-serif;
}
.briko-order-widget [data-theme='dark'] {
  --bg-body: #0B1220;
  --bg-surface: #151E2E;
  --bg-surface-rgb: 21, 30, 46;
  --body-rgb: 11, 18, 32;
  --border-color: #263248;
  --text-main: #F1F5F9;
  --text-muted: #8A94A6;

  --primary: #38BDF8;
  --primary-hover: #7DD3FC;
  --primary-rgb: 56, 189, 248;

  --success: #34D399;
  --success-hover: #6EE7B7;
  --success-rgb: 52, 211, 153;
  --info: #38BDF8;
  --info-hover: #7DD3FC;
  --info-rgb: 56, 189, 248;
  --warning: #FBBF24;
  --warning-hover: #FCD34D;
  --warning-rgb: 251, 191, 36;
  --danger: #F87171;
  --danger-hover: #FCA5A5;
  --danger-rgb: 248, 113, 113;

  --light: #151E2E;
  --light-rgb: 21, 30, 46;
  --dark: #F1F5F9;
  --dark-rgb: 241, 245, 249;

  --sidebar-bg: #0B1220;
  --sidebar-rgb: 11, 18, 32;

  --card-bg-subtle: rgba(241, 245, 249, 0.03);
}

/* -------------------------------------------- makieta: kreator */

.briko-order-widget {
  --container-max-width: 1400px;
}
.briko-order-widget [hidden] {
    display: none !important;
  }
.briko-order-widget .order-steps {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--spacing-unit) * 2);
}
.briko-order-widget .order-step {
  display: flex;
  align-items: center;
  max-width: 220px;
}
.briko-order-widget .order-step-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 72px;
  height: 72px;
  padding-left: 12px;
  border-radius: 50%;
  background-color: rgba(var(--dark-rgb), 0.06);
  color: var(--primary);
  font-size: 1.75rem;
}
.briko-order-widget .order-step-svg {
  width: auto;
  height: 34px;
  max-width: 34px;
}
.briko-order-widget .order-step-text {
  margin-left: -18px;
}
.briko-order-widget .tile-capacity, .briko-order-widget .tile-payment {
  display: grid;
  place-items: center;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  text-align: center;
}
.briko-order-widget .tile-capacity {
  min-height: var(--target-size-min, 44px);
  padding: 0 calc(var(--spacing-unit) * 1.25);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.briko-order-widget .capacity-custom {
  flex: 1 1 96px;
  min-width: 96px;
}
.briko-order-widget .tile-payment {
  min-height: 84px;
  padding: calc(var(--spacing-unit) * 2);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}
.briko-order-widget .selection-tile input:checked + .tile-payment, .briko-order-widget .selection-tile input:checked + .tile-capacity {
  color: var(--primary);
}
.briko-order-widget .slot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--spacing-unit) * 0.5);
}
.briko-order-widget .slot-day {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 5px;
  background-color: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow-sm);
}
.briko-order-widget .slot-day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--spacing-unit) * 0.5);
  padding: calc(var(--spacing-unit) * 0.5) calc(var(--spacing-unit) * 0.75);
}
.briko-order-widget .slot-day-name {
  font-size: 0.6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.briko-order-widget .slot-day-date {
  font-size: 1.0625rem;
  font-weight: var(--fw-bold);
  color: var(--text-main);
}
.briko-order-widget .slot-day.is-unavailable .slot-day-name, .briko-order-widget .slot-day.is-unavailable .slot-day-date {
  opacity: 0.45;
}
.briko-order-widget .slot-pick {
  display: flex;
  align-items: center;
  justify-content: space-between;
  
  flex-wrap: wrap;
  gap: 0 4px;
  padding: 6px 7px;
  background-color: rgba(var(--dark-rgb), 0.03);
  border: 1px solid transparent;
  border-radius: calc(var(--border-radius) - 6px);
  transition: background-color var(--transition-speed), color var(--transition-speed);
}
.briko-order-widget .slot-name, .briko-order-widget .slot-hours {
  font-size: 0.625rem;
  white-space: nowrap;
}
.briko-order-widget .slot-name {
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.briko-order-widget .slot-hours {
  color: var(--text-muted);
}
.briko-order-widget .selection-tile:hover input:not(:disabled) + .slot-pick {
  background-color: rgba(var(--primary-rgb), 0.06);
}
.briko-order-widget .selection-tile input:checked + .slot-pick .slot-name, .briko-order-widget .selection-tile input:checked + .slot-pick .slot-hours {
  color: var(--primary);
}
.briko-order-widget .selection-tile input:checked + .slot-pick {
  background-color: var(--bg-surface);
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}
.briko-order-widget .selection-tile:has(input:disabled) {
  cursor: not-allowed;
}
.briko-order-widget .selection-tile input:disabled + .slot-pick {
  opacity: 0.4;
}
.briko-order-widget .is-locked > *:not(.step-hint) {
  opacity: 0.45;
  transition: opacity var(--transition-speed);
}
.briko-order-widget .is-locked {
  cursor: not-allowed;
}
.briko-order-widget .is-locked .input:disabled, .briko-order-widget .is-locked .selection-tile input:disabled + .slot-pick {
  opacity: 1;
}
.briko-order-widget .step-hint {
  display: none;
  margin-bottom: calc(var(--spacing-unit) * 2);
  color: var(--text-muted);
}
.briko-order-widget .is-locked > .step-hint {
  display: block;
}
.briko-order-widget .select-search-option.is-out-of-range {
  display: none;
}
.briko-order-widget .range-note {
  color: var(--warning-hover);
}
.briko-order-widget .grid-expand > .grid-expand-inner {
  visibility: hidden;
  transition: visibility 0.4s;
}
.briko-order-widget .form-check:has(.form-check-input:checked) + .grid-expand {
  grid-template-rows: 1fr;
}
.briko-order-widget .form-check:has(.form-check-input:checked) + .grid-expand > .grid-expand-inner {
  visibility: visible;
}
.briko-order-widget .order-aside {
  position: sticky;
  top: calc(var(--spacing-unit) * 3);
}
.briko-order-widget .summary-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(var(--spacing-unit) * 2);
  padding: calc(var(--spacing-unit) * 1.5) 0;
  border-bottom: 1px solid var(--border-color);
}
.briko-order-widget .summary-label {
  color: var(--text-muted);
  white-space: nowrap;
}
.briko-order-widget .summary-value {
  font-weight: var(--fw-semibold);
  text-align: right;
}
.briko-order-widget .summary-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--spacing-unit) * 2);
  padding-top: calc(var(--spacing-unit) * 2.5);
}
.briko-order-widget .summary-total-label {
  font-size: 0.8125rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.briko-order-widget .summary-price {
  font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--text-main);
  white-space: nowrap;
}
.briko-order-widget .btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.briko-order-widget .btn-svg {
  width: auto;
  height: 22px;
}
.briko-order-widget .order-phone {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing-unit) * 2);
}
.briko-order-widget .order-phone-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: var(--bg-surface);
  box-shadow: var(--shadow-md);
  color: var(--text-main);
}
.briko-order-widget .order-phone-svg {
  width: auto;
  height: 30px;
}
.briko-order-widget .order-phone-number {
  display: block;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  color: var(--primary);
  text-decoration: none;
}
.briko-order-widget .order-phone-number:hover {
  color: var(--primary-hover);
}
.briko-order-widget .sms-code {
  font-size: 1.75rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.4em;
  text-indent: 0.4em;
  text-align: center;
}
.briko-order-widget .sms-error {
  color: var(--danger);
}
.briko-order-widget .sms-note {
  color: var(--text-muted);
}
.briko-order-widget .sms-code.is-rejected {
  border-color: var(--danger);
  animation: smsReject 0.4s ease;
}
.briko-order-widget @keyframes smsReject {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-6px);
  }
  40% {
    transform: translateX(6px);
  }
  60% {
    transform: translateX(-4px);
  }
  80% {
    transform: translateX(4px);
  }
}
.briko-order-widget .sms-done-icon {
  display: grid;
  place-items: center;
  width: 88px;
  height: 88px;
  margin: 0 auto;
  border-radius: 50%;
  background-color: rgba(var(--success-rgb), 0.12);
  color: var(--success);
}
.briko-order-widget .sms-done-svg {
  width: auto;
  height: 40px;
}
.briko-order-widget .sms-done-recap .summary-row:last-child {
  border-bottom: 0;
}
.briko-order-widget .is-submitted {
  opacity: 0.6;
}

@media (min-width: 576px) {
    .briko-order-widget .slot-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (min-width: 768px) {
    .briko-order-widget .slot-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1320px) {
    .briko-order-widget .slot-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
@media (prefers-reduced-motion: reduce) {
    .briko-order-widget .sms-code.is-rejected {
    animation: none;
  }
}

/* ------------------------------------------- dopiski Briko */

/**
 * RESET PUDELKA - bez niego widget rozjezdza sie na CUDZEJ stronie.
 *
 * Molique ma globalne `*, *::before, *::after { box-sizing: border-box }`,
 * ale ta regula NIE MA KLASY, wiec filtr `wanted()` w generatorze wyrzuca ja
 * razem z cala reszta resetu. Dopoki widget ogladalismy tam, gdzie molique
 * i tak sie laduje (panel, lokalny WordPress), wszystko wygladalo dobrze - bo
 * box-sizing bral sie z tamtego arkusza.
 *
 * Na stronie bez molique pola rosly z 60 px do 98 px: przy `content-box`
 * deklarowana wysokosc dotyczy samej TRESCI, wiec padding etykiety plywajacej
 * (26 px u gory) dokladal sie na wierzchu. Zmierzone w Chrome, nie wyczytane
 * z arkusza.
 *
 * Ta sama regula jest w `build-widget-css.py`, wiec przezyje przebudowe.
 */
.briko-order-widget,
.briko-order-widget *,
.briko-order-widget *::before,
.briko-order-widget *::after {
    box-sizing: border-box;
}

/**
 * POLE PULAPKA - niewidoczne dla czlowieka, widoczne dla skryptu rozsylajacego
 * formularze. `display: none` odpada: czesc botow pomija ukryte pola.
 */
.briko-order-widget .briko-order-trap {
    height: 0;
    left: -9999px;
    overflow: hidden;
    position: absolute;
    width: 0;
}

/**
 * PASEK KONTA KLIENTA nad formularzem: zdanie, przycisk i dopisek w jednym
 * rzedzie, ktory na waskim ekranie zawija sie na kilka linii zamiast wypychac
 * przycisk poza karte. `align-items: center` wyrownuje tekst do przycisku,
 * ktory jest od niego wyzszy.
 */
.briko-order-widget .briko-order-account {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: calc(var(--spacing-unit) * 1.5);
}

/**
 * PODPIS AUTORA pod formularzem. Kreska u gory oddziela go od tresci, ale
 * subtelnie - to stopka, a nie kolejna sekcja kreatora.
 *
 * WPISANE TAKZE RECZNIE, nie tylko do `build-widget-css.py`: arkusz w repo
 * jest starszy niz kopia molique w rdzeniu, wiec pelna przebudowa wciagnelaby
 * przy okazji zmiany, o ktore nikt nie prosil (nowe zmienne motywu, inne
 * wciecia w polowie pliku). Generator ma te sama regule u siebie, wiec
 * nastepna swiadoma przebudowa jej nie zgubi.
 */
.briko-order-widget .widget-credit {
    border-top: 1px solid var(--border-color);
}

.briko-order-widget .widget-credit a {
    color: inherit;
    text-decoration: underline;
}

/**
 * KOMUNIKAT O BLEDZIE JAKO TOAST, nie pasek w tresci.
 *
 * Pasek stal nad formularzem, a przycisk „Zamawiam" jest na jego koncu - przy
 * dluzszym kreatorze, a zwlaszcza na telefonie, klient klikal i nie widzial
 * NICZEGO. Zgloszone 24.09 slowami „trzeba do niego recznie przewinac".
 *
 * `position: fixed` wzgledem okna, nie kontenera: widget stoi na CUDZEJ
 * stronie, ktorej ukladu nie znamy, a `sticky` wewnatrz przypadkowego rodzica
 * z `overflow` albo `transform` zachowuje sie nieprzewidywalnie.
 *
 * `z-index` wysoki, ale bez przesady - ma przykryc tresc strony firmowej,
 * a nie konkurowac z modalem widgetu, ktory i tak siedzi w warstwie
 * wierzchniej (`dialog`).
 */
/**
 * ZWIJANIE TERMINOW NA TELEFONIE - o widocznosci rozstrzyga arkusz, nie skrypt.
 *
 * Skrypt tylko ZNACZY nadmiarowe dni klasa `.slot-day-extra` i dokłada
 * przycisk. Dzieki temu obrot telefonu albo zmiana szerokosci okna odslania je
 * same, bez przerysowywania kalendarza - a rozstrzygniecie „ile sie miesci"
 * zostaje tam, gdzie i tak stoi liczba kolumn siatki.
 */
.briko-order-widget .slot-day-extra {
    display: none;
}

.briko-order-widget .slots-expanded .slot-day-extra {
    display: flex;
}

/**
 * Przycisk zajmuje CALY rzad siatki - inaczej stanalby w jednej z dwoch kolumn
 * obok ostatniego kafelka dnia i czytalby sie jak kolejny termin do wyboru.
 */
.briko-order-widget .slot-more {
    background: var(--bg-surface);
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius);
    color: var(--primary);
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    grid-column: 1 / -1;
    min-height: 44px;
    padding: calc(var(--spacing-unit) * 1.5);
    width: 100%;
}

.briko-order-widget .slot-more:hover {
    border-color: var(--primary);
}

/**
 * OD SZEROKOSCI TABLETU WIDAC WSZYSTKO. Siatka ma tam cztery, a wyzej szesc
 * kolumn, wiec kilkanascie terminow to dwa-trzy rzedy - nie ma czego chowac,
 * a ukryte dni kazalyby klikac po nic.
 */
@media (min-width: 768px) {
    .briko-order-widget .slot-day-extra {
        display: flex;
    }

    .briko-order-widget .slot-more {
        display: none;
    }
}

/**
 * ODSTEP MIEDZY TERMINAMI A PODSUMOWANIEM NA TELEFONIE.
 *
 * Kolumny ukladaja sie wtedy jedna pod druga, a `.order-aside` nie ma zadnego
 * wlasnego marginesu - karta podsumowania przylegala do ostatniego rzedu
 * kafelkow i czytala sie jak ich dalszy ciag. Na szerokim ekranie kolumny stoja
 * obok siebie i margines byl by tam pustym miejscem u gory.
 */
@media (max-width: 991px) {
    .briko-order-widget .order-aside {
        margin-top: calc(var(--spacing-unit) * 4);
    }
}

.briko-order-widget .briko-order-alert {
    background: var(--danger);
    border-radius: var(--border-radius);
    bottom: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    color: #fff;
    font-size: 0.9375rem;
    left: 50%;
    line-height: 1.45;
    margin: 0;
    max-width: min(520px, calc(100vw - 2rem));
    padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 2);
    position: fixed;
    top: 1rem;
    transform: translateX(-50%);
    width: max-content;
    z-index: 2147483000;
}

/**
 * NA TELEFONIE TOAST WCHODZI OD DOLU - tam jest kciuk i tam jest przycisk,
 * ktory klient wlasnie nacisnal. Gora ekranu na telefonie bywa zaslonieta
 * paskiem adresu, ktory chowa sie i wraca przy przewijaniu.
 */
@media (max-width: 767px) {
    .briko-order-widget .briko-order-alert {
        bottom: 1rem;
        left: 1rem;
        max-width: none;
        right: 1rem;
        top: auto;
        transform: none;
        width: auto;
    }
}

/** Pole wlasnej wielkosci bierze reszte wiersza po kafelkach - jak w makiecie. */
.briko-order-widget .capacity-custom {
    flex: 1 1 96px;
    min-width: 96px;
}

/**
 * MODAL ODCHUDZONY Z WSZYSTKIEGO, CO WEBKIT LICZY INACZEJ NIZ BLINK.
 *
 * Objaw u klienta (iPhone, zgloszony 25.08 i PONOWNIE 26.08 na juz wgranej
 * poprawce): przy potwierdzaniu kodem SMS widac samo przyciemnienie, okna
 * nie ma wcale. Zamowienie konczy sie w tym miejscu.
 *
 * Poprzednia poprawka dolozyla brakujace reguly `.modal-dialog` do arkusza
 * i to bylo potrzebne - ale nie wystarczylo. Zostaly DWIE rzeczy, ktorych
 * z Windowsa nie da sie rozstrzygnac, a kazda z osobna tlumaczy dokladnie ten
 * objaw:
 *
 *  1. `.card { max-height: 100% }` w rodzicu, ktory ma `max-height`, ale nie
 *     ma `height`. Procent liczony wzgledem wysokosci nieokreslonej to teren,
 *     na ktorym silniki nigdy sie nie zgadzaly.
 *  2. `opacity: 0` na `.modal-dialog` z przejsciem `display`/`overlay`
 *     `allow-discrete`. `::backdrop` NIE dziedziczy krycia okna - wiec
 *     przyciemnienie widac zawsze, a samo okno tylko wtedy, gdy `[open]`
 *     zdazy podniesc krycie do jedynki.
 *
 * Zamiast zgadywac, ktora to byla, USUWAMY OBIE. Zadna z nich nie jest tu
 * potrzebna: wysokosc liczymy tym samym wyrazeniem co okno (bez procentow),
 * a wjazd oknem to ozdoba, ktora na cudzej stronie kosztowala zamowienia.
 * `min-height: 0` to standardowy warunek przewijania wewnatrz kolumny flex -
 * bez niego element nie umie zmalec ponizej swojej tresci.
 *
 * W PANELU zostawiamy molique bez zmian - tam modale dzialaja i nikt nie
 * zamawia z iPhone'a. Poprawka nalezy do repozytorium molique i jest tam
 * zgloszona; tutaj lata sie WYGENEROWANY arkusz widgetu, nie framework.
 */
.briko-order-widget .modal-dialog {
    opacity: 1;
    transform: none;
    transition: none;
}

.briko-order-widget .modal-dialog .card {
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
    min-height: 0;
}

.briko-order-widget .modal-dialog .card-body {
    flex: 1 1 auto;
    min-height: 0;
}

/**
 * SIATKA BEZPIECZENSTWA. Skrypt sprawdza PO otwarciu, czy okno naprawde cos
 * narysowalo - i jesli nie, wlacza ten uklad: zwykly blok, bez flexa, bez
 * procentow, bez `top layer`. Brzydszy i zawsze widoczny.
 *
 * Istnieje, bo diagnoza CSS-a na cudzym urzadzeniu to petla po jednej
 * odpowiedzi na tydzien, a klient przez ten czas nie moze zamowic. Kod ma
 * sprawdzic rzeczywistosc na miejscu, a nie ufac naszym zalozeniom o silniku.
 */
.briko-order-widget .modal-dialog.is-fallback {
    background: var(--bg-surface);
    border-radius: var(--border-radius);
    bottom: 1rem;
    display: block;
    left: 1rem;
    margin: 0;
    max-height: none;
    max-width: none;
    overflow: auto;
    position: fixed;
    right: 1rem;
    top: 1rem;
    width: auto;
    z-index: 1050;
}

.briko-order-widget .modal-dialog.is-fallback .card {
    display: block;
    max-height: none;
}

.briko-order-widget .modal-dialog.is-fallback .card-body {
    overflow: visible;
}

/**
 * TYPOGRAFIA NA SAMYM KONTENERZE. Molique i makieta ustawiaja krój, rozmiar
 * i kolor tekstu na `body`, a generator bierze tylko reguly z klasami - wiec
 * ta jedna wypadala i widget dziedziczyl typografie po stronie, na ktorej
 * stoi. Na stronie z motywem prawie nie bylo tego widac; na stronie bez
 * wlasnych stylow (paczka dla serwisu w czystym PHP) formularz wychodzil
 * szeryfowa czcionka domyslna przegladarki.
 *
 * `line-height` tez jest tu celowo: kafelki terminow maja stala wysokosc
 * liczona z wierszy tekstu, wiec strona z rozstrzelona interlinia rozpychala
 * kalendarz.
 *
 * KROJU NIE DOWOZIMY W PACZCE. Pierwszy z listy (`Manrope`) zadziala, jesli
 * strona i tak go laduje; jesli nie - schodzimy na krój systemowy, ktory
 * wyglada porzadnie wszedzie. Sciaganie pliku fontu z cudzego CDN-u na cudza
 * strone to zaleznosc, ktorej nie kontrolujemy, i osobny temat zgody na
 * przetwarzanie danych.
 */
.briko-order-widget {
    color: var(--text-main);
    font-family: var(--font-family-base);
    font-size: var(--text-base-size);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/**
 * WYSOKOSC POL Z MAKIETY (zmierzona: 60 px, padding 26/10).
 *
 * Molique trzyma to w warstwach: regula elementowa siedzi w `base`,
 * a `.form-floating .input` w `components`, ktora jest WAZNIEJSZA. Generator
 * warstwy rozpakowuje i razem z nimi znika ta hierarchia.
 *
 * DLACZEGO `!important`, a nie mocniejszy selektor: regula z `base` brzmi
 * `input:not([type=checkbox]):not([type=radio]):not([type=color])`, a kazde
 * `:not([atrybut])` liczy sie do specyficznosci jak klasa - w sumie 0,4,1
 * przeciwko 0,3,0 mojego selektora. Scigac sie z tym selektorem znaczyloby
 * pisac coraz brzydsze lancuchy; `!important` w arkuszu ZAWEZONYM do widgetu
 * niczego cudzego nie przemaluje.
 */
.briko-order-widget .form-floating > .input {
    min-height: 60px !important;
    padding-bottom: 0.625rem !important;
    padding-top: 1.625rem !important;
}

.briko-order-widget select.input,
.briko-order-widget .select-search-trigger {
    min-height: 44px;
}

.briko-order-widget textarea.input {
    min-height: 60px !important;
}

/**
 * CZTERY KROKI W JEDNYM RZEDZIE na desktopie. Flex z zawijaniem lamal je
 * 3 + 1, bo czwarty opis jest najdluzszy - siatka o rownych kolumnach trzyma
 * rzad niezaleznie od dlugosci tekstu.
 */
@media (min-width: 992px) {
    .briko-order-widget .order-steps {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .briko-order-widget .order-step {
        max-width: none;
    }
}

/**
 * PIEC KOLUMN TERMINOW na desktopie (ustalenie z 2026-08-21). Przy 25 dniach
 * daje to rowne piec rzedow po piec dni - kalendarz konczy sie pelnym
 * wierszem, bez sierocego kafelka na koncu.
 */
@media (min-width: 1200px) {
    .briko-order-widget .slot-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}