/* Entry point for your PostCSS build */
/* Document
 * ========================================================================== */
/**
 * 1. Add border box sizing in all browsers (opinionated).
 * 2. Backgrounds do not repeat by default (opinionated).
 */
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  background-repeat: no-repeat; /* 2 */
}
/**
 * 1. Add text decoration inheritance in all browsers (opinionated).
 * 2. Add vertical alignment inheritance in all browsers (opinionated).
 */
::before,
::after {
  text-decoration: inherit; /* 1 */
  vertical-align: inherit; /* 2 */
}
/**
 * 1. Use the default cursor in all browsers (opinionated).
 * 2. Change the line height in all browsers (opinionated).
 * 3. Breaks words to prevent overflow in all browsers (opinionated).
 * 4. Use a 4-space tab width in all browsers (opinionated).
 * 5. Remove the grey highlight on links in iOS (opinionated).
 * 6. Prevent adjustments of font size after orientation changes in iOS.
 */
:where(:root) {
  cursor: default; /* 1 */
  line-height: 1.5; /* 2 */
  overflow-wrap: break-word; /* 3 */
  -moz-tab-size: 4; /* 4 */
  -o-tab-size: 4;
     tab-size: 4; /* 4 */
  -webkit-tap-highlight-color: transparent; /* 5 */
  -webkit-text-size-adjust: 100%; /* 6 */
}
/* Sections
 * ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
:where(body) {
  margin: 0;
}
/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Edge, Firefox, and Safari.
 */
:where(h1) {
  font-size: 2em;
  margin: 0.67em 0;
}
/* Grouping content
 * ========================================================================== */
/**
 * Remove the margin on nested lists in Chrome, Edge, and Safari.
 */
:where(dl, ol, ul) :where(dl, ol, ul) {
  margin: 0;
}
/**
 * 1. Correct the inheritance of border color in Firefox.
 * 2. Add the correct box sizing in Firefox.
 */
:where(hr) {
  color: inherit; /* 1 */
  height: 0; /* 2 */
}
/**
 * Remove the list style on navigation lists in all browsers (opinionated).
 */
:where(nav) :where(ol, ul) {
  list-style-type: none;
  padding: 0;
}
/**
 * Prevent VoiceOver from ignoring list semantics in Safari (opinionated).
 */
:where(nav li)::before {
  content: "\200B";
  float: left;
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 * 3. Prevent overflow of the container in all browsers (opinionated).
 */
:where(pre) {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
  overflow: auto; /* 3 */
}
/* Text-level semantics
 * ========================================================================== */
/**
 * Add the correct text decoration in Safari.
 */
:where(abbr[title]) {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}
/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
:where(b, strong) {
  font-weight: bolder;
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
:where(code, kbd, samp) {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
/**
 * Add the correct font size in all browsers.
 */
:where(small) {
  font-size: 80%;
}
/* Embedded content
 * ========================================================================== */
/*
 * Change the alignment on media elements in all browsers (opinionated).
 */
:where(audio, canvas, iframe, img, svg, video) {
  vertical-align: middle;
}
/**
 * Remove the border on iframes in all browsers (opinionated).
 */
:where(iframe) {
  border-style: none;
}
/**
 * Change the fill color to match the text color in all browsers (opinionated).
 */
:where(svg:not([fill])) {
  fill: currentColor;
}
/* Tabular data
 * ========================================================================== */
/**
 * 1. Collapse border spacing in all browsers (opinionated).
 * 2. Correct table border color inheritance in all Chrome, Edge, and Safari.
 * 3. Remove text indentation from table contents in Chrome, Edge, and Safari.
 */
:where(table) {
  border-collapse: collapse; /* 1 */
  border-color: inherit; /* 2 */
  text-indent: 0; /* 3 */
}
/* Forms
 * ========================================================================== */
/**
 * Remove the margin on controls in Safari.
 */
:where(button, input, select) {
  margin: 0;
}
/**
 * Correct the inability to style buttons in iOS and Safari.
 */
:where(button, [type="button" i], [type="reset" i], [type="submit" i]) {
  -webkit-appearance: button;
}
/**
 * Change the inconsistent appearance in all browsers (opinionated).
 */
:where(fieldset) {
  border: 1px solid #a0a0a0;
}
/**
 * Add the correct vertical alignment in Chrome, Edge, and Firefox.
 */
:where(progress) {
  vertical-align: baseline;
}
/**
 * 1. Remove the margin in Firefox and Safari.
 * 3. Change the resize direction in all browsers (opinionated).
 */
:where(textarea) {
  margin: 0; /* 1 */
  resize: vertical; /* 3 */
}
/**
 * 1. Correct the odd appearance in Chrome, Edge, and Safari.
 * 2. Correct the outline style in Safari.
 */
:where([type="search" i]) {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}
/**
 * Correct the cursor style of increment and decrement buttons in Safari.
 */
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}
/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */
::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}
/**
 * Remove the inner padding in Chrome, Edge, and Safari on macOS.
 */
::-webkit-search-decoration {
  -webkit-appearance: none;
}
/**
 * 1. Correct the inability to style upload buttons in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}
/* Interactive
 * ========================================================================== */
/*
 * Add the correct styles in Safari.
 */
:where(dialog) {
  background-color: white;
  border: solid;
  color: black;
  height: -moz-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: fit-content;
}
:where(dialog:not([open])) {
  display: none;
}
/*
 * Add the correct display in Safari.
 */
:where(details > summary:first-of-type) {
  display: list-item;
}
/* Accessibility
 * ========================================================================== */
/**
 * Change the cursor on busy elements in all browsers (opinionated).
 */
:where([aria-busy="true" i]) {
  cursor: progress;
}
/*
 * Change the cursor on control elements in all browsers (opinionated).
 */
:where([aria-controls]) {
  cursor: pointer;
}
/*
 * Change the cursor on disabled, not-editable, or otherwise
 * inoperable elements in all browsers (opinionated).
 */
:where([aria-disabled="true" i], [disabled]) {
  cursor: not-allowed;
}
/*
 * Change the display on visually hidden accessible elements
 * in all browsers (opinionated).
 */
:where([aria-hidden="false" i][hidden]) {
  display: initial;
}
:where([aria-hidden="false" i][hidden]:not(:focus)) {
  clip: rect(0, 0, 0, 0);
  position: absolute;
}
/* Tom Select */
/**
 * tom-select.css (v2.5.1)
 * Copyright (c) contributors
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
 * file except in compliance with the License. You may obtain a copy of the License at:
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
 * ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 *
 */
.ts-control {
  border: 1px solid #d0d0d0;
  padding: 8px 8px;
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  box-shadow: none;
  border-radius: 3px;
  display: flex;
  flex-wrap: wrap;
}
.ts-wrapper.multi.has-items .ts-control {
  padding: calc(8px - 2px - 0px) 8px calc(8px - 2px - 3px - 0px);
}
.full .ts-control {
  background-color: #fff;
}
.disabled .ts-control, .disabled .ts-control * {
  cursor: default !important;
}
.focus .ts-control {
  box-shadow: none;
}
.ts-control > * {
  vertical-align: baseline;
  display: inline-block;
}
.ts-wrapper.multi .ts-control > div {
  cursor: pointer;
  margin: 0 3px 3px 0;
  padding: 2px 6px;
  background: #f2f2f2;
  color: #303030;
  border: 0px solid #d0d0d0;
  overflow: auto;
}
.ts-wrapper.multi .ts-control > div.active {
  background: #e8e8e8;
  color: #303030;
  border: 0px solid #cacaca;
}
.ts-wrapper.multi.disabled .ts-control > div, .ts-wrapper.multi.disabled .ts-control > div.active {
  color: rgb(124.5, 124.5, 124.5);
  background: white;
  border: 0px solid white;
}
.ts-control > input {
  flex: 1 1 auto;
  min-width: 7rem;
  display: inline-block !important;
  padding: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  max-width: 100% !important;
  margin: 0 !important;
  text-indent: 0 !important;
  border: 0 none !important;
  background: none !important;
  line-height: inherit !important;
  -webkit-user-select: auto !important;
     -moz-user-select: auto !important;
          user-select: auto !important;
  box-shadow: none !important;
}
.ts-control > input::-ms-clear {
  display: none;
}
.ts-control > input:focus {
  outline: none !important;
}
.has-items .ts-control > input {
  margin: 0px 4px !important;
}
.ts-control.rtl {
  text-align: right;
}
.ts-control.rtl.single .ts-control:after {
  left: 15px;
  right: auto;
}
.ts-control.rtl .ts-control > input {
  margin: 0px 4px 0px -2px !important;
}
.disabled .ts-control {
  opacity: 0.5;
  background-color: #fafafa;
}
.input-hidden .ts-control > input {
  opacity: 0;
  position: absolute;
  left: -10000px;
}
.ts-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 10;
  border: 1px solid #d0d0d0;
  background: #fff;
  margin: 0.25rem 0 0;
  border-top: 0 none;
  box-sizing: border-box;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 0 0 3px 3px;
}
.ts-dropdown [data-selectable] {
  cursor: pointer;
  overflow: hidden;
}
.ts-dropdown [data-selectable] .highlight {
  background: rgba(125, 168, 208, 0.2);
  border-radius: 1px;
}
.ts-dropdown .option,
.ts-dropdown .optgroup-header,
.ts-dropdown .no-results,
.ts-dropdown .create {
  padding: 5px 8px;
}
.ts-dropdown .option, .ts-dropdown [data-disabled], .ts-dropdown [data-disabled] [data-selectable].option {
  cursor: inherit;
  opacity: 0.5;
}
.ts-dropdown [data-selectable].option {
  opacity: 1;
  cursor: pointer;
}
.ts-dropdown .optgroup:first-child .optgroup-header {
  border-top: 0 none;
}
.ts-dropdown .optgroup-header {
  color: #303030;
  background: #fff;
  cursor: default;
}
.ts-dropdown .active {
  background-color: #f5fafd;
  color: #495c68;
}
.ts-dropdown .active.create {
  color: #495c68;
}
.ts-dropdown .create {
  color: rgba(48, 48, 48, 0.5);
}
.ts-dropdown .spinner {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: 5px 8px;
}
.ts-dropdown .spinner::after {
  content: " ";
  display: block;
  width: 24px;
  height: 24px;
  margin: 3px;
  border-radius: 50%;
  border: 5px solid #d0d0d0;
  border-color: #d0d0d0 transparent #d0d0d0 transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.ts-dropdown-content {
  overflow: hidden auto;
  max-height: 200px;
  scroll-behavior: smooth;
}
.ts-wrapper.plugin-drag_drop .ts-dragging {
  color: transparent !important;
}
.ts-wrapper.plugin-drag_drop .ts-dragging > * {
  visibility: hidden !important;
}
.plugin-checkbox_options:not(.rtl) .option input {
  margin-right: 0.5rem;
}
.plugin-checkbox_options.rtl .option input {
  margin-left: 0.5rem;
}
/* stylelint-disable function-name-case */
.plugin-clear_button {
  --ts-pr-clear-button: 1em;
}
.plugin-clear_button .clear-button {
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: calc(8px - 6px);
  margin-right: 0 !important;
  background: transparent !important;
  transition: opacity 0.5s;
  cursor: pointer;
}
.plugin-clear_button.form-select .clear-button, .plugin-clear_button.single .clear-button {
  right: max(var(--ts-pr-caret), 8px);
}
.plugin-clear_button.focus.has-items .clear-button, .plugin-clear_button:not(.disabled):hover.has-items .clear-button {
  opacity: 1;
}
.ts-wrapper .dropdown-header {
  position: relative;
  padding: 10px 8px;
  border-bottom: 1px solid #d0d0d0;
  background: color-mix(#fff, #d0d0d0, 85%);
  border-radius: 3px 3px 0 0;
}
.ts-wrapper .dropdown-header-close {
  position: absolute;
  right: 8px;
  top: 50%;
  color: #303030;
  opacity: 0.4;
  margin-top: -12px;
  line-height: 20px;
  font-size: 20px !important;
}
.ts-wrapper .dropdown-header-close:hover {
  color: black;
}
.plugin-dropdown_input.focus.dropdown-active .ts-control {
  box-shadow: none;
  border: 1px solid #d0d0d0;
}
.plugin-dropdown_input .dropdown-input {
  border: 1px solid #d0d0d0;
  border-width: 0 0 1px;
  display: block;
  padding: 8px 8px;
  box-shadow: none;
  width: 100%;
  background: transparent;
}
.plugin-dropdown_input .items-placeholder {
  border: 0 none !important;
  box-shadow: none !important;
  width: 100%;
}
.plugin-dropdown_input.has-items .items-placeholder, .plugin-dropdown_input.dropdown-active .items-placeholder {
  display: none !important;
}
.ts-wrapper.plugin-input_autogrow.has-items .ts-control > input {
  min-width: 0;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input {
  flex: none;
  min-width: 4px;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::-moz-placeholder {
  color: transparent;
}
.ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::placeholder {
  color: transparent;
}
.ts-dropdown.plugin-optgroup_columns .ts-dropdown-content {
  display: flex;
}
.ts-dropdown.plugin-optgroup_columns .optgroup {
  border-right: 1px solid #f2f2f2;
  border-top: 0 none;
  flex-grow: 1;
  flex-basis: 0;
  min-width: 0;
}
.ts-dropdown.plugin-optgroup_columns .optgroup:last-child {
  border-right: 0 none;
}
.ts-dropdown.plugin-optgroup_columns .optgroup::before {
  display: none;
}
.ts-dropdown.plugin-optgroup_columns .optgroup-header {
  border-top: 0 none;
}
.ts-wrapper.plugin-remove_button .item {
  display: inline-flex;
  align-items: center;
}
.ts-wrapper.plugin-remove_button .item .remove {
  color: inherit;
  text-decoration: none;
  vertical-align: middle;
  display: inline-block;
  padding: 0 6px;
  border-radius: 0 2px 2px 0;
  box-sizing: border-box;
}
.ts-wrapper.plugin-remove_button .item .remove:hover {
  background: rgba(0, 0, 0, 0.05);
}
.ts-wrapper.plugin-remove_button.disabled .item .remove:hover {
  background: none;
}
.ts-wrapper.plugin-remove_button .remove-single {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 23px;
}
.ts-wrapper.plugin-remove_button:not(.rtl) .item {
  padding-right: 0 !important;
}
.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
  border-left: 1px solid #d0d0d0;
  margin-left: 6px;
}
.ts-wrapper.plugin-remove_button:not(.rtl) .item.active .remove {
  border-left-color: #cacaca;
}
.ts-wrapper.plugin-remove_button:not(.rtl).disabled .item .remove {
  border-left-color: white;
}
.ts-wrapper.plugin-remove_button.rtl .item {
  padding-left: 0 !important;
}
.ts-wrapper.plugin-remove_button.rtl .item .remove {
  border-right: 1px solid #d0d0d0;
  margin-right: 6px;
}
.ts-wrapper.plugin-remove_button.rtl .item.active .remove {
  border-right-color: #cacaca;
}
.ts-wrapper.plugin-remove_button.rtl.disabled .item .remove {
  border-right-color: white;
}
:root {
  --ts-pr-clear-button: 0px;
  --ts-pr-caret: 0px;
  --ts-pr-min: .75rem;
}
.ts-wrapper.single .ts-control, .ts-wrapper.single .ts-control input {
  cursor: pointer;
}
.ts-control:not(.rtl) {
  padding-right: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret)) !important;
}
.ts-control.rtl {
  padding-left: max(var(--ts-pr-min), var(--ts-pr-clear-button) + var(--ts-pr-caret)) !important;
}
.ts-wrapper {
  position: relative;
}
.ts-dropdown,
.ts-control,
.ts-control input {
  color: #303030;
  font-family: inherit;
  font-size: 13px;
  line-height: 18px;
}
.ts-control,
.ts-wrapper.single.input-active .ts-control {
  background: #fff;
  cursor: text;
}
.ts-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}
/* Components */
.hidden {
  display:none;
}
.mobile-only {
  display: none;
}
.desktop-only {
  display: initial;
}
@media screen and (max-width: 640px) {
  .mobile-only {
    display: initial;
  }

  .desktop-only {
    display: none;
  }
}
.icon {
  fill: var(--primary-color);
  width: 24px;
  height: 24px;
}
.muted {
  background-color: var(--gray-color);
  color: var(--primary-color);
}
a {
  text-decoration: none;
}
.capitalize {
  text-transform: capitalize;
}
.uppercase {
  text-transform: uppercase;
}
.break-word {
  word-break: break-word;
  text-overflow: ellipsis;
}
[data-controller="upload"] {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16/9;
  /* max-width: 300px; */
  padding: var(--spacing-small) var(--spacing-xs);
  border-radius: var(--rounded-medium);
  background-color: var(--dashboard-bg);

  border: 1px dashed #c0c0c0;
  overflow: hidden;

  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  transition: var(--transition);
  cursor: pointer;
}
[data-controller="upload"]:hover ::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000010;
    z-index: 8;
  }
[data-controller="upload"] input[type="file"] {
    display: none;
  }
[data-controller="upload"] [data-upload-target="trigger"] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    z-index: 9;
    color: var(--gray-3);
    background: none;
    border: none;
  }
[data-controller="upload"] [data-upload-target="trigger"] svg {
      font-size: 3rem;
      color: var(--gray-1);
      z-index: 1;
      width: 2.5rem;
      height: 2.5rem;
    }
[data-controller="upload"] [data-upload-target="clear"] {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    cursor: pointer;
    border: none;
    border-radius: var(--rounded-medium);
    padding: var(--spacing-xs);
    margin: var(--spacing-xs);
    color: var(--gray-4);
    background-color: var(--secondary-color);
    box-shadow: var(--shadow-light);
    transition: var(--transition);
  }
[data-controller="upload"] [data-upload-target="clear"]:hover {
      background-color: var(--gray-1);
      color: var(--primary-color);
    }
[data-controller="upload"] img {
    position: relative;
    left: 0;
    width: 100%;
    aspect-ratio: 16/9;
    -o-object-fit: cover;
       object-fit: cover;
    z-index: 0;
  }
[data-controller="upload"].__preview:hover ::after {
      display: none;
    }
[data-controller="upload"].__preview{
    cursor: auto;
}
[data-controller="upload"].__preview [data-upload-target="trigger"] {
      display: none;
    }
[data-controller="upload"].__preview .clear {
      display: block;
    }
[data-controller="tabs"].tab-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-medium);
  }
[data-controller="tabs"].tab-container .tab-navigation {
      display: flex;
      flex-direction: row;
      gap: var(--spacing-small);
      border-bottom: 1px solid var(--muted-color);
    }
[data-controller="tabs"].tab-container .tab-navigation [data-tabs-target="tab"],
      [data-controller="tabs"].tab-container .tab-navigation button,
      [data-controller="tabs"].tab-container .tab-navigation a {
        background: none;
        border: none;
        padding: var(--spacing-xs) var(--spacing-small);
        font: var(--p);
        color: var(--muted-color);
        cursor: pointer;
        transition: var(--transition);
        text-decoration: none;
      }
[data-controller="tabs"].tab-container .tab-navigation [data-tabs-target="tab"].active,
        [data-controller="tabs"].tab-container .tab-navigation [data-tabs-target="tab"].active-tab,
        [data-controller="tabs"].tab-container .tab-navigation button.active,
        [data-controller="tabs"].tab-container .tab-navigation button.active-tab,
        [data-controller="tabs"].tab-container .tab-navigation a.active,
        [data-controller="tabs"].tab-container .tab-navigation a.active-tab {
          color: var(--accent-color);
          border-bottom: 2px solid var(--accent-color);
          font-weight: bold;
        }
[data-controller="tabs"].tab-container .tab-navigation [data-tabs-target="tab"]:hover, [data-controller="tabs"].tab-container .tab-navigation button:hover, [data-controller="tabs"].tab-container .tab-navigation a:hover {
          color: var(--accent-color);
        }
*,
*::before,
*::after {
  box-sizing: border-box;
}
:root {
  scroll-behavior: smooth;

  /* Website colors */
  --primary-color: #2f2f2f;
  --primary-color-darker: color-mix(
    in srgb,
    var(--primary-color) 85%,
    black 15%
  );
  --primary-color-darkest: color-mix(
    in srgb,
    var(--primary-color) 70%,
    black 30%
  );
  --primary-color-lighter: color-mix(
    in srgb,
    var(--primary-color) 85%,
    white 15%
  );
  --primary-color-lightest: color-mix(
    in srgb,
    var(--primary-color) 70%,
    white 30%
  );

  --secondary-color: #ffffff;
  --secondary-color-darker: color-mix(
    in srgb,
    var(--secondary-color) 85%,
    black 15%
  );
  --secondary-color-darkest: color-mix(
    in srgb,
    var(--secondary-color) 70%,
    black 30%
  );
  --secondary-color-lighter: color-mix(
    in srgb,
    var(--secondary-color) 85%,
    white 15%
  );
  --secondary-color-lightest: color-mix(
    in srgb,
    var(--secondary-color) 70%,
    white 30%
  );

  --tertiary-color: #b4e3c1;
  --tertiary-color-darker: color-mix(
    in srgb,
    var(--tertiary-color) 85%,
    black 15%
  );
  --tertiary-color-darkest: color-mix(
    in srgb,
    var(--tertiary-color) 70%,
    black 30%
  );
  --tertiary-color-lighter: color-mix(
    in srgb,
    var(--tertiary-color) 85%,
    white 15%
  );
  --tertiary-color-lightest: color-mix(
    in srgb,
    var(--tertiary-color) 70%,
    white 30%
  );

  --accent-color: #f5632f;
  --accent-color-darker: color-mix(in srgb, var(--accent-color) 85%, black 15%);
  --accent-color-darkest: color-mix(
    in srgb,
    var(--accent-color) 70%,
    black 30%
  );
  --accent-color-lighter: color-mix(
    in srgb,
    var(--accent-color) 85%,
    white 15%
  );
  --accent-color-lightest: color-mix(
    in srgb,
    var(--accent-color) 70%,
    white 30%
  );

  --border-color: #141414;
  --input-bg-color: #ffffff;

  --gray-color: #e5e7eb;
  --gray-color-darker: #d1d5db;
  --gray-color-darkest: #374151;

  --gray-1: hsl(0, 0%, 80%);
  --gray-2: hsl(0, 0%, 60%);
  --gray-3: hsl(0, 0%, 40%);
  --gray-4: hsl(0, 0%, 20%);

  --background-color: #ffffff;
  --dashboard-bg: #fdf9f3;
  --dashboard-highlight: #f7f3ee;
  --dashboard-bg-muted: #91887b;
  --dashboard-bg-dark: hsl(from var(--dashboard-bg) h s calc(l - 5));

  --accent-color-bg: #f5632f20;
  --success-color: #10b981;
  --success-color-bg: #ccffcc;
  --warning-color: #ffcc00;
  --warning-color-bg: #ffffcc;
  --confirmed-color: #f5632f;
  --confirmed-color-bg: #f5632f20;
  --info-color: #0000ff;
  --info-color-bg: #ccccff;
  --danger-color: #ef4444;
  --danger-color-bg: #ffcccc;
  --danger-color-dark: #d11d1d;

  --muted-color: #c0c0c0;
  --muted-bg: #f5f5f5;

  /* Media queries */
  --mobile: 640px;
  --tablet: 768px;
  --laptop: 1024px;
  --desktop: 1280px;

  /* Spacing */
  --spacing-xxs: 0.125rem;
  --spacing-xs: 0.25rem;
  --spacing-small: 0.5rem;
  --spacing-medium: 1rem;
  --spacing-large: 1.5rem;
  --spacing-xlarge: 3rem;

  /* Roundness */
  --rounded-small: 0.25rem;
  --rounded-medium: 0.5rem;
  --rounded-large: 1rem;
  --rounded-xlarge: 1.5rem;
  --rounded-full: 50%;

  /* Shadows */
  --shadow-light: 0 0 10px rgba(0, 0, 0, 0.1);
  --button-shadow: 0 0.2rem 0.1rem rgba(0, 0, 0, 0.15);

  /* Form fields */
  --border-input: 1px solid var(--primary-color);
  --border-input-focus: 2px solid var(--accent-color);
  --border-input-error: 2px solid var(--danger-color);

  /* Typography */
  --font-regular: "DM Sans Medium", sans-serif;
  --font-bold: "DM Sans Bold", sans-serif;
  --font-semibold: "DM Sans SemiBold", sans-serif;
  --font-medium: "DM Sans Medium", sans-serif;
  --font-light: "DM Sans Light", sans-serif;

  --heading: normal bold 2.5rem/3rem var(--font-bold);
  --sub-heading: normal bold 1.15rem/1.35rem var(--font-bold);
  --h1: normal bold 2.5rem/3rem var(--font-bold);
  --h2: normal bold 2rem/2.5rem var(--font-semibold);
  --h3: normal bold 1.75rem/2.25rem var(--font-semibold);
  --h4: normal 1.5rem/2rem var(--font-regular);
  --h5: normal 1.25rem/1.85rem var(--font-regular);
  --p: normal 1.125rem/1.75rem var(--font-regular);
  --compact: normal 1rem/1.5rem var(--font-regular);
  --small: normal 0.8rem/1rem var(--font-regular);
  --xsmall: normal 0.75rem/0.8rem var(--font-regular);

  --shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  --links: underline var(--color-primary) 2px;
  --links-hover: var(--color-tertiary);

  --transition: 75ms ease-in-out;

  /** Custom media query breakpoints **/
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  /* font-weight: 400; */
  font-display: swap;
  src: url(/assets/DMSans-Regular-e67a8bfd2cd4eca6c825ab0d32d771040bcea06fa7232e647fc1240253a4a150.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans Bold';
  font-style: normal;
  /* font-weight: 400; */
  font-display: swap;
  src: url(/assets/DMSans-Bold-a088ab90bd65f2b017637017e417e148219c92a7eff6e04b167d7d4072856307.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans SemiBold';
  font-style: normal;
  /* font-weight: 400; */
  font-display: swap;
  src: url(/assets/DMSans-SemiBold-e0a50be51b0ec7cacda89716fd358efd19753586e9754c4cef94de5d8eaa9612.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans Medium';
  font-style: normal;
  /* font-weight: 400; */
  font-display: swap;
  src: url(/assets/DMSans-Medium-b08496e4a30538cff37f21f9829c9759af2371f9f3519c562d1e875baee406f7.ttf) format('truetype');
}
@font-face {
  font-family: 'DM Sans Light';
  font-style: normal;
  /* font-weight: 400; */
  font-display: swap;
  src: url(/assets/DMSans-Light-65af29e60436d1928ce8b26b0f41294e109226d9a135e807e17de4289d075558.ttf) format('truetype');
}
/* Adjustments for tablets and smaller screens */
@media (max-width: 1024px) {
  :root {
    --heading: normal bold 2.25rem/2.75rem var(--font-bold);
    --h1: normal bold 2.25rem/2.75rem var(--font-bold);
    --h2: normal bold 1.875rem/2.375rem var(--font-semibold);
    --h3: normal bold 1.5rem/2rem var(--font-semibold);
    --h4: normal 1.375rem/1.875rem var(--font-regular);
    --p: normal 1.05rem/1.5rem var(--font-regular);
    --small: normal 0.875rem/1.25rem var(--font-regular);
    --tiny: normal 0.75rem/1rem var(--font-regular);
  }
}
/* Adjustments for mobile phones */
@media (max-width: 768px) {
  :root {
    --heading: normal bold 2rem/2.5rem var(--font-bold);
    --h1: normal bold 2rem/2.5rem var(--font-bold);
    --h2: normal bold 1.75rem/2.25rem var(--font-semibold);
    --h3: normal bold 1.375rem/1.75rem var(--font-semibold);
    --h4: normal 1.25rem/1.75rem var(--font-regular);
    --p: normal 1.05rem/1.375rem var(--font-regular);
    --small: normal 0.8125rem/1.125rem var(--font-regular);
    --tiny: normal 0.6875rem/1rem var(--font-regular);
  }
}
/* Adjustments for very small mobile phones */
@media (max-width: 480px) {
  :root {
    --heading: normal bold 1.75rem/2.25rem var(--font-bold);
    --h1: normal bold 1.75rem/2.25rem var(--font-bold);
    --h2: normal bold 1.5rem/2rem var(--font-semibold);
    --h3: normal bold 1.25rem/1.625rem var(--font-semibold);
    --h4: normal 1rem/1.5rem var(--font-regular);
    --p: normal 1.05rem/1.25rem var(--font-regular);
    --small: normal 0.75rem/1.125rem var(--font-regular);
    --tiny: normal 0.625rem/1rem var(--font-regular);
  }
}
.flatpickr-calendar {
  background: transparent;
  opacity: 0;
  display: none;
  text-align: center;
  visibility: hidden;
  padding: 0;
  animation: none;
  direction: ltr;
  border: 0;
  font-size: 14px;
  line-height: 24px;
  border-radius: 5px;
  position: absolute;
  width: 307.875px;
  box-sizing: border-box;
  touch-action: manipulation;
  background: #fff;
  box-shadow: 1px 0 0 #eee, -1px 0 0 #eee, 0 1px 0 #eee, 0 -1px 0 #eee, 0 3px 13px rgba(0,0,0,0.08);
}
.flatpickr-calendar.open,
.flatpickr-calendar.inline {
  opacity: 1;
  max-height: 640px;
  visibility: visible;
}
.flatpickr-calendar.open {
  display: inline-block;
  z-index: 99999;
}
.flatpickr-calendar.animate.open {
  animation: fpFadeInDown 300ms cubic-bezier(0.23, 1, 0.32, 1);
}
.flatpickr-calendar.inline {
  display: block;
  position: relative;
  top: 2px;
}
.flatpickr-calendar.static {
  position: absolute;
  top: calc(100% + 2px);
}
.flatpickr-calendar.static.open {
  z-index: 999;
  display: block;
}
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7) {
  box-shadow: none !important;
}
.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
  box-shadow: -2px 0 0 #e6e6e6, 5px 0 0 #e6e6e6;
}
.flatpickr-calendar .hasWeeks .dayContainer,
.flatpickr-calendar .hasTime .dayContainer {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}
.flatpickr-calendar .hasWeeks .dayContainer {
  border-left: 0;
}
.flatpickr-calendar.hasTime .flatpickr-time {
  height: 40px;
  border-top: 1px solid #eee;
}
.flatpickr-calendar.noCalendar.hasTime .flatpickr-time {
  height: auto;
}
.flatpickr-calendar:before,
.flatpickr-calendar:after {
  position: absolute;
  display: block;
  pointer-events: none;
  border: solid transparent;
  content: '';
  height: 0;
  width: 0;
  left: 22px;
}
.flatpickr-calendar.rightMost:before,
.flatpickr-calendar.arrowRight:before,
.flatpickr-calendar.rightMost:after,
.flatpickr-calendar.arrowRight:after {
  left: auto;
  right: 22px;
}
.flatpickr-calendar.arrowCenter:before,
.flatpickr-calendar.arrowCenter:after {
  left: 50%;
  right: 50%;
}
.flatpickr-calendar:before {
  border-width: 5px;
  margin: 0 -5px;
}
.flatpickr-calendar:after {
  border-width: 4px;
  margin: 0 -4px;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after {
  bottom: 100%;
}
.flatpickr-calendar.arrowTop:before {
  border-bottom-color: #eee;
}
.flatpickr-calendar.arrowTop:after {
  border-bottom-color: #fff;
}
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
  top: 100%;
}
.flatpickr-calendar.arrowBottom:before {
  border-top-color: #eee;
}
.flatpickr-calendar.arrowBottom:after {
  border-top-color: #fff;
}
.flatpickr-calendar:focus {
  outline: 0;
}
.flatpickr-wrapper {
  position: relative;
  display: inline-block;
}
.flatpickr-months {
  display: flex;
}
.flatpickr-months .flatpickr-month {
  background: transparent;
  color: #3c3f40;
  fill: #3c3f40;
  height: 34px;
  line-height: 1;
  text-align: center;
  position: relative;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  flex: 1 1;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  text-decoration: none;
  cursor: pointer;
  position: absolute;
  top: 0;
  height: 34px;
  padding: 10px;
  z-index: 3;
  color: #3c3f40;
  fill: #3c3f40;
}
.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,
.flatpickr-months .flatpickr-next-month.flatpickr-disabled {
  display: none;
}
.flatpickr-months .flatpickr-prev-month i,
.flatpickr-months .flatpickr-next-month i {
  position: relative;
}
.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month.flatpickr-prev-month {
/*
      /*rtl:begin:ignore*/
/*
      */
  left: 0;
/*
      /*rtl:end:ignore*/
/*
      */
}
/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,
.flatpickr-months .flatpickr-next-month.flatpickr-next-month {
/*
      /*rtl:begin:ignore*/
/*
      */
  right: 0;
/*
      /*rtl:end:ignore*/
/*
      */
}
/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  color: #f64747;
}
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: #f64747;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  width: 14px;
  height: 14px;
}
.flatpickr-months .flatpickr-prev-month svg path,
.flatpickr-months .flatpickr-next-month svg path {
  transition: fill 0.1s;
  fill: inherit;
}
.numInputWrapper {
  position: relative;
  height: auto;
}
.numInputWrapper input,
.numInputWrapper span {
  display: inline-block;
}
.numInputWrapper input {
  width: 100%;
}
.numInputWrapper input::-ms-clear {
  display: none;
}
.numInputWrapper input::-webkit-outer-spin-button,
.numInputWrapper input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.numInputWrapper span {
  position: absolute;
  right: 0;
  width: 14px;
  padding: 0 4px 0 2px;
  height: 50%;
  line-height: 50%;
  opacity: 0;
  cursor: pointer;
  border: 1px solid rgba(64,72,72,0.15);
  box-sizing: border-box;
}
.numInputWrapper span:hover {
  background: rgba(0,0,0,0.1);
}
.numInputWrapper span:active {
  background: rgba(0,0,0,0.2);
}
.numInputWrapper span:after {
  display: block;
  content: "";
  position: absolute;
}
.numInputWrapper span.arrowUp {
  top: 0;
  border-bottom: 0;
}
.numInputWrapper span.arrowUp:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 4px solid rgba(64,72,72,0.6);
  top: 26%;
}
.numInputWrapper span.arrowDown {
  top: 50%;
}
.numInputWrapper span.arrowDown:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid rgba(64,72,72,0.6);
  top: 40%;
}
.numInputWrapper span svg {
  width: inherit;
  height: auto;
}
.numInputWrapper span svg path {
  fill: rgba(60,63,64,0.5);
}
.numInputWrapper:hover {
  background: rgba(0,0,0,0.05);
}
.numInputWrapper:hover span {
  opacity: 1;
}
.flatpickr-current-month {
  font-size: 135%;
  line-height: inherit;
  font-weight: 300;
  color: inherit;
  position: absolute;
  width: 75%;
  left: 12.5%;
  padding: 7.48px 0 0 0;
  line-height: 1;
  height: 34px;
  display: inline-block;
  text-align: center;
  transform: translate3d(0px, 0px, 0px);
}
.flatpickr-current-month span.cur-month {
  font-family: inherit;
  font-weight: 700;
  color: inherit;
  display: inline-block;
  margin-left: 0.5ch;
  padding: 0;
}
.flatpickr-current-month span.cur-month:hover {
  background: rgba(0,0,0,0.05);
}
.flatpickr-current-month .numInputWrapper {
  width: 6ch;
  width: 7ch\0;
  display: inline-block;
}
.flatpickr-current-month .numInputWrapper span.arrowUp:after {
  border-bottom-color: #3c3f40;
}
.flatpickr-current-month .numInputWrapper span.arrowDown:after {
  border-top-color: #3c3f40;
}
.flatpickr-current-month input.cur-year {
  background: transparent;
  box-sizing: border-box;
  color: inherit;
  cursor: text;
  padding: 0 0 0 0.5ch;
  margin: 0;
  display: inline-block;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  line-height: inherit;
  height: auto;
  border: 0;
  border-radius: 0;
  vertical-align: initial;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}
.flatpickr-current-month input.cur-year:focus {
  outline: 0;
}
.flatpickr-current-month input.cur-year[disabled],
.flatpickr-current-month input.cur-year[disabled]:hover {
  font-size: 100%;
  color: rgba(60,63,64,0.5);
  background: transparent;
  pointer-events: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  appearance: menulist;
  background: transparent;
  border: none;
  border-radius: 0;
  box-sizing: border-box;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  font-weight: 300;
  height: auto;
  line-height: inherit;
  margin: -1px 0 0 0;
  outline: none;
  padding: 0 0 0 0.5ch;
  position: relative;
  vertical-align: initial;
  -webkit-box-sizing: border-box;
  -webkit-appearance: menulist;
  -moz-appearance: menulist;
  width: auto;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:focus,
.flatpickr-current-month .flatpickr-monthDropdown-months:active {
  outline: none;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: rgba(0,0,0,0.05);
}
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background-color: transparent;
  outline: none;
  padding: 0;
}
.flatpickr-weekdays {
  background: transparent;
  text-align: center;
  overflow: hidden;
  width: 100%;
  display: flex;
  align-items: center;
  height: 28px;
}
.flatpickr-weekdays .flatpickr-weekdaycontainer {
  display: flex;
  flex: 1 1;
}
span.flatpickr-weekday {
  cursor: default;
  font-size: 90%;
  background: transparent;
  color: rgba(0,0,0,0.54);
  line-height: 1;
  margin: 0;
  text-align: center;
  display: block;
  flex: 1 1;
  font-weight: bolder;
}
.dayContainer,
.flatpickr-weeks {
  padding: 1px 0 0 0;
}
.flatpickr-days {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  width: 307.875px;
}
.flatpickr-days:focus {
  outline: 0;
}
.dayContainer {
  padding: 0;
  outline: 0;
  text-align: left;
  width: 307.875px;
  min-width: 307.875px;
  max-width: 307.875px;
  box-sizing: border-box;
  display: inline-block;
  display: flex;
  flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  justify-content: space-around;
  transform: translate3d(0px, 0px, 0px);
  opacity: 1;
}
.dayContainer + .dayContainer {
  box-shadow: -1px 0 0 #eee;
}
.flatpickr-day {
  background: none;
  border: 1px solid transparent;
  border-radius: 150px;
  box-sizing: border-box;
  color: #404848;
  cursor: pointer;
  font-weight: 400;
  width: 14.2857143%;
  flex-basis: 14.2857143%;
  max-width: 39px;
  height: 39px;
  line-height: 39px;
  margin: 0;
  display: inline-block;
  position: relative;
  justify-content: center;
  text-align: center;
}
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange,
.flatpickr-day.today.inRange,
.flatpickr-day.prevMonthDay.today.inRange,
.flatpickr-day.nextMonthDay.today.inRange,
.flatpickr-day:hover,
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover,
.flatpickr-day:focus,
.flatpickr-day.prevMonthDay:focus,
.flatpickr-day.nextMonthDay:focus {
  cursor: pointer;
  outline: 0;
  background: #e9e9e9;
  border-color: #e9e9e9;
}
.flatpickr-day.today {
  border-color: #f64747;
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
  border-color: #f64747;
  background: #f64747;
  color: #fff;
}
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  background: #4f99ff;
  box-shadow: none;
  color: #fff;
  border-color: #4f99ff;
}
.flatpickr-day.selected.startRange,
.flatpickr-day.startRange.startRange,
.flatpickr-day.endRange.startRange {
  border-radius: 50px 0 0 50px;
}
.flatpickr-day.selected.endRange,
.flatpickr-day.startRange.endRange,
.flatpickr-day.endRange.endRange {
  border-radius: 0 50px 50px 0;
}
.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) {
  box-shadow: -10px 0 0 #4f99ff;
}
.flatpickr-day.selected.startRange.endRange,
.flatpickr-day.startRange.startRange.endRange,
.flatpickr-day.endRange.startRange.endRange {
  border-radius: 50px;
}
.flatpickr-day.inRange {
  border-radius: 0;
  box-shadow: -5px 0 0 #e9e9e9, 5px 0 0 #e9e9e9;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.notAllowed,
.flatpickr-day.notAllowed.prevMonthDay,
.flatpickr-day.notAllowed.nextMonthDay {
  color: rgba(64,72,72,0.3);
  background: transparent;
  border-color: #e9e9e9;
  cursor: default;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  cursor: not-allowed;
  color: rgba(64,72,72,0.1);
}
.flatpickr-day.week.selected {
  border-radius: 0;
  box-shadow: -5px 0 0 #4f99ff, 5px 0 0 #4f99ff;
}
.flatpickr-day.hidden {
  visibility: hidden;
}
.rangeMode .flatpickr-day {
  margin-top: 1px;
}
.flatpickr-weekwrapper {
  float: left;
}
.flatpickr-weekwrapper .flatpickr-weeks {
  padding: 0 12px;
  box-shadow: 1px 0 0 #eee;
}
.flatpickr-weekwrapper .flatpickr-weekday {
  float: none;
  width: 100%;
  line-height: 28px;
}
.flatpickr-weekwrapper span.flatpickr-day,
.flatpickr-weekwrapper span.flatpickr-day:hover {
  display: block;
  width: 100%;
  max-width: none;
  color: rgba(64,72,72,0.3);
  background: transparent;
  cursor: default;
  border: none;
}
.flatpickr-innerContainer {
  display: block;
  display: flex;
  box-sizing: border-box;
  overflow: hidden;
}
.flatpickr-rContainer {
  display: inline-block;
  padding: 0;
  box-sizing: border-box;
}
.flatpickr-time {
  text-align: center;
  outline: 0;
  display: block;
  height: 0;
  line-height: 40px;
  max-height: 40px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
}
.flatpickr-time:after {
  content: "";
  display: table;
  clear: both;
}
.flatpickr-time .numInputWrapper {
  flex: 1 1;
  width: 40%;
  height: 40px;
  float: left;
}
.flatpickr-time .numInputWrapper span.arrowUp:after {
  border-bottom-color: #404848;
}
.flatpickr-time .numInputWrapper span.arrowDown:after {
  border-top-color: #404848;
}
.flatpickr-time.hasSeconds .numInputWrapper {
  width: 26%;
}
.flatpickr-time.time24hr .numInputWrapper {
  width: 49%;
}
.flatpickr-time input {
  background: transparent;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  text-align: center;
  margin: 0;
  padding: 0;
  height: inherit;
  line-height: inherit;
  color: #404848;
  font-size: 14px;
  position: relative;
  box-sizing: border-box;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}
.flatpickr-time input.flatpickr-hour {
  font-weight: bold;
}
.flatpickr-time input.flatpickr-minute,
.flatpickr-time input.flatpickr-second {
  font-weight: 400;
}
.flatpickr-time input:focus {
  outline: 0;
  border: 0;
}
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  height: inherit;
  float: left;
  line-height: inherit;
  color: #404848;
  font-weight: bold;
  width: 2%;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  align-self: center;
}
.flatpickr-time .flatpickr-am-pm {
  outline: 0;
  width: 18%;
  cursor: pointer;
  text-align: center;
  font-weight: 400;
}
.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus {
  background: #f1f1f1;
}
.flatpickr-input[readonly] {
  cursor: pointer;
}
@keyframes fpFadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -20px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.flatpickr-calendar {
  width: 307.875px;
}
.dayContainer {
  padding: 0;
  border-right: 0;
}
span.flatpickr-day,
span.flatpickr-day.prevMonthDay,
span.flatpickr-day.nextMonthDay {
  border-radius: 0 !important;
  border: 1px solid #e9e9e9;
  max-width: none;
  border-right-color: transparent;
}
span.flatpickr-day:nth-child(n+8),
span.flatpickr-day.prevMonthDay:nth-child(n+8),
span.flatpickr-day.nextMonthDay:nth-child(n+8) {
  border-top-color: transparent;
}
span.flatpickr-day:nth-child(7n-6),
span.flatpickr-day.prevMonthDay:nth-child(7n-6),
span.flatpickr-day.nextMonthDay:nth-child(7n-6) {
  border-left: 0;
}
span.flatpickr-day:nth-child(n+36),
span.flatpickr-day.prevMonthDay:nth-child(n+36),
span.flatpickr-day.nextMonthDay:nth-child(n+36) {
  border-bottom: 0;
}
span.flatpickr-day:nth-child(-n+7),
span.flatpickr-day.prevMonthDay:nth-child(-n+7),
span.flatpickr-day.nextMonthDay:nth-child(-n+7) {
  margin-top: 0;
}
span.flatpickr-day.today:not(.selected),
span.flatpickr-day.prevMonthDay.today:not(.selected),
span.flatpickr-day.nextMonthDay.today:not(.selected) {
  border-color: #e9e9e9;
  border-right-color: transparent;
  border-top-color: transparent;
  border-bottom-color: #f64747;
}
span.flatpickr-day.today:not(.selected):hover,
span.flatpickr-day.prevMonthDay.today:not(.selected):hover,
span.flatpickr-day.nextMonthDay.today:not(.selected):hover {
  border: 1px solid #f64747;
}
span.flatpickr-day.startRange,
span.flatpickr-day.prevMonthDay.startRange,
span.flatpickr-day.nextMonthDay.startRange,
span.flatpickr-day.endRange,
span.flatpickr-day.prevMonthDay.endRange,
span.flatpickr-day.nextMonthDay.endRange {
  border-color: #4f99ff;
}
span.flatpickr-day.today,
span.flatpickr-day.prevMonthDay.today,
span.flatpickr-day.nextMonthDay.today,
span.flatpickr-day.selected,
span.flatpickr-day.prevMonthDay.selected,
span.flatpickr-day.nextMonthDay.selected {
  z-index: 2;
}
.rangeMode .flatpickr-day {
  margin-top: -1px;
}
.flatpickr-weekwrapper .flatpickr-weeks {
  box-shadow: none;
}
.flatpickr-weekwrapper span.flatpickr-day {
  border: 0;
  margin: -1px 0 0 -1px;
}
.hasWeeks .flatpickr-days {
  border-right: 0;
}
@media screen and (min-width:0\0) and (min-resolution: +72dpi) {
		span.flatpickr-day {
			display: block;
			flex: 1 0 auto;
		}
	}
/* Style the calendar container */
.flatpickr-calendar {
  background-color: #fafafa;
  color: #282828;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
/* Style the month navigation */
.flatpickr-months {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  background-color: #fafafa;
  border-bottom: 1px solid var(--border-color);
}
.flatpickr-prev-month,
.flatpickr-next-month {
  color: var(--accent-color);
  cursor: pointer;
}
.flatpickr-current-month {
  font-weight: bold;
}
/* Style the weekdays */
.flatpickr-weekdays {
  background-color: #fafafa;
  border-bottom: 1px solid var(--border-color);
}
.flatpickr-weekday {
  color: var(--secondary-color);
  padding: 10px;
}
/* Style the days */
.flatpickr-days {
  background-color: #fafafa;
}
.flatpickr-day {
  color: #282828;
  border-radius: 50%;
}
.flatpickr-day.nextMonthDay {
  color: #282828;
  cursor: pointer;
}
.flatpickr-day.disabled,
.flatpickr-day.nextMonthDay.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled {
  color: var(--muted-color);
  cursor: not-allowed;
}
.flatpickr-disabled.today {
  color: #848484;
  background-color: var(--muted-bg);
  cursor: not-allowed;
}
.flatpickr-day.today {
  color: var(--secondary-color);
}
.flatpickr-day.selected {
  background-color: var(--accent-color) !important;
  color: var(--secondary-color) !important;
  font-weight: bold;
}
@media (hover: hover) {
  .flatpickr-day.today:hover {
    color: var(--secondary-color);
  }

  .flatpickr-day:hover {
    background-color: var(--accent-color);
    color: var(--secondary-color);
  }
}
/* Style the time picker */
.flatpickr-time {
  background-color: var(--input-background-color);
  border: 1px solid var(--border-color);
  padding: 10px;
  border-radius: 4px;
}
.flatpickr-hour,
.flatpickr-minute,
.flatpickr-second,
.flatpickr-am-pm {
  color: var(--input-text-color);
}
/* Style the week numbers */
.flatpickr-weekwrapper {
  background-color: #282828;
  border-right: 1px solid var(--border-color);
}
.flatpickr-week {
  color: var(--secondary-color);
  padding: 10px;
}
.flatpickr-monthDropdown-months {
  text-transform: capitalize;
}
/* CSS File for Animations */
@keyframes floating {
  0% {
    transform: translateY(0);
    text-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
  }

  50% {
    transform: translateY(-5px);
    text-shadow: 5px 5px 2px rgba(0, 0, 0, 0.08);
  }

  100% {
    transform: translateY(0);
    text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.05);
  }
}
@keyframes slide-up-slowly {
  0% {
    transform: translateY(25%);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-in-scale {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  10% {
    opacity: 1;
    transform: scale(1.1);
  }
  90% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.9);
  }
}
/* Buttons animations */
@keyframes pulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* Pulse in animation for toast notifications */
@keyframes pulse-in {
  0% {
    transform: scale(0.9);
    opacity: 0;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframe pulse-out {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.5;
  }
  100% {
    transform: scale(0.9);
    opacity: 0;
  }
}
@keyframes slide-in {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-out {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}
/* User Avatar Dropdown Component
   Reusable avatar with dropdown menu
*/
.user-avatar-dropdown {
  position: relative;
  display: inline-block;
}
.user-avatar-trigger {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-small);
  background: transparent;
  border: none;
  border-radius: var(--radius-medium);
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.user-avatar-trigger:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
.user-avatar-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #f97316; /* Orange 500 */
  color: white;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  flex-shrink: 0;
}
.user-avatar-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-color, #1f2937);
  white-space: nowrap;
}
.user-avatar-chevron {
  color: var(--text-muted, #6b7280);
  transition: transform 0.2s ease;
}
.user-avatar-dropdown[data-dropdown-open-value="true"] .user-avatar-chevron {
  transform: rotate(180deg);
}
/* Dropdown Menu */
.user-avatar-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 160px;
  background: white;
  border: 1px solid var(--gray-5, #e5e7eb);
  border-radius: var(--radius-small, 6px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  overflow: hidden;
}
.user-avatar-menu.hidden {
  display: none;
}
.user-avatar-menu-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs, 8px);
  padding: var(--spacing-small, 12px) var(--spacing-medium, 16px);
  color: var(--text-color, #1f2937);
  text-decoration: none;
  font-size: 14px;
  transition: background-color 0.15s ease;
  background: none;
  border: none;
  width: 100%;
  cursor: pointer;
  text-align: left;
}
.user-avatar-menu-item:hover {
  background-color: var(--gray-1, #f9fafb);
  color: var(--text-color, #1f2937);
}
.user-avatar-menu-item svg {
  color: var(--text-muted, #6b7280);
  flex-shrink: 0;
}
/* Form wrapper from button_to */
.user-avatar-menu form {
  margin: 0;
}
/* Compact variant for smaller headers */
.user-avatar-dropdown.compact .user-avatar-circle {
  width: 28px;
  height: 28px;
  font-size: 12px;
}
.user-avatar-dropdown.compact .user-avatar-name {
  font-size: 13px;
}
/* Sidebar variant for admin sidepanel */
.user-avatar-dropdown.sidebar-variant {
  width: 100%;
}
.user-avatar-dropdown.sidebar-variant .user-avatar-trigger {
  width: 100%;
  padding: 8px 12px;
  gap: 10px;
  justify-content: flex-start;
  border-radius: 0;
}
.user-avatar-dropdown.sidebar-variant .user-avatar-trigger:hover {
  background-color: rgba(0, 0, 0, 0.08);
}
.user-avatar-dropdown.sidebar-variant .user-avatar-name {
  flex: 1 1;
  text-align: left;
  font-size: 14px;
  color: inherit;
}
.user-avatar-dropdown.sidebar-variant .user-avatar-chevron {
  margin-left: auto;
}
.user-avatar-dropdown.sidebar-variant .user-avatar-menu {
  left: 0;
  right: auto;
  bottom: calc(100% + 4px);
  top: auto;
}
/* Sidebar user item styling */
.sidebar-user-item {
  padding: 0 !important;
}
.sidebar-user-item .user-avatar-dropdown {
  display: block;
}
/* Locale Dropdown Component
   Dropdown-based language switcher
*/
.locale-dropdown {
  position: relative;
  display: inline-block;
}
.locale-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--radius-medium, 8px);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-color, #1f2937);
  transition: all 0.2s ease;
  backdrop-filter: blur(8px);
}
.locale-dropdown-trigger:hover {
  background: rgba(255, 255, 255, 1);
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.locale-dropdown-trigger svg:first-child {
  color: var(--text-muted, #6b7280);
}
.locale-dropdown-icon {
  flex-shrink: 0;
}
.locale-dropdown-current {
  font-weight: 600;
}
.locale-dropdown-chevron {
  color: var(--text-muted, #6b7280);
  transition: transform 0.2s ease;
}
.locale-dropdown[data-dropdown-open-value="true"] .locale-dropdown-chevron {
  transform: rotate(180deg);
}
/* Dropdown Menu */
.locale-dropdown-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 150px;
  background: white;
  border: 1px solid var(--gray-5, #e5e7eb);
  border-radius: var(--radius-small, 6px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  z-index: 1000;
  overflow: hidden;
}
.locale-dropdown.dropup .locale-dropdown-menu {
  top: auto;
  bottom: calc(100% + 6px);
}
.locale-dropdown-menu.hidden {
  display: none;
}
.hidden {
  display: none !important;
}
.locale-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: none;
  border: none;
  color: var(--text-color, #1f2937);
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.15s ease;
  text-align: left;
}
.locale-dropdown-item:hover {
  background-color: var(--gray-1, #f9fafb);
}
.locale-dropdown-item.active {
  background-color: color-mix(in srgb, var(--accent-color, #f97316) 10%, transparent);
}
.locale-flag {
  font-size: 16px;
  line-height: 1;
}
.locale-name {
  flex: 1 1;
}
.locale-check {
  color: var(--accent-color, #f97316);
  flex-shrink: 0;
}
/* Dark variant for use on dark backgrounds */
.locale-dropdown.dark .locale-dropdown-trigger {
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.2);
  color: white;
}
.locale-dropdown.dark .locale-dropdown-trigger:hover {
  background: rgba(0, 0, 0, 0.4);
  border-color: rgba(255, 255, 255, 0.3);
}
.locale-dropdown.dark .locale-dropdown-trigger svg {
  color: rgba(255, 255, 255, 0.8);
}
/* Compact variant */
.locale-dropdown.compact .locale-dropdown-trigger {
  padding: 6px 10px;
  font-size: 12px;
}
.locale-dropdown.compact .locale-dropdown-trigger svg:first-child {
  width: 16px;
  height: 16px;
}
/* Themes */
.button,
a.button,
input[type="submit"],
input[type="button"] {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-small);
  justify-content: center;
  width: -moz-fit-content;
  width: fit-content;
  padding: var(--spacing-small) var(--spacing-medium);
  color: var(--primary-color);
  border-radius: var(--rounded-medium);
  transition: var(--transition);
  cursor: pointer;
  text-transform: capitalize;
  text-decoration: none !important;
  overflow: hidden;
  border: none;
  white-space: nowrap;
  font: var(--p);
  box-shadow: var(--button-shadow);
}
/* Variant styles */
.button.link, a.button.link, input[type="submit"].link, input[type="button"].link {
    background-color: transparent;
    color: var(--primary-color);
    text-decoration: none;
    padding: 0;
    box-shadow: none;
  }
.button.primary, a.button.primary, input[type="submit"].primary, input[type="button"].primary {
    background-color: var(--primary-color);
    color: var(--secondary-color);
  }
.button.accent, a.button.accent, input[type="submit"].accent, input[type="button"].accent {
    background-color: var(--accent-color);
    color: var(--secondary-color);
  }
.button.secondary, a.button.secondary, input[type="submit"].secondary, input[type="button"].secondary {
    background-color: var(--secondary-color);
    color: var(--primary-color);
  }
.button.tertiary, a.button.tertiary, input[type="submit"].tertiary, input[type="button"].tertiary {
    background-color: var(--tertiary-color);
    color: var(--primary-color);
  }
.button.danger, a.button.danger, input[type="submit"].danger, input[type="button"].danger {
    background-color: var(--danger-color);
    color: var(--danger-color-bg);
  }
.button.danger svg, a.button.danger svg, input[type="submit"].danger svg, input[type="button"].danger svg {
      color: var(--secondary-color);
    }
.button.muted, a.button.muted, input[type="submit"].muted, input[type="button"].muted {
    background-color: var(--gray-color);
    color: var(--primary-color);
  }
.button.invert, a.button.invert, input[type="submit"].invert, input[type="button"].invert {
    background-color: var(--secondary-color);
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
  }
.button.outline, a.button.outline, input[type="submit"].outline, input[type="button"].outline {
    background-color: transparent;
  }
.button.outline.primary, a.button.outline.primary, input[type="submit"].outline.primary, input[type="button"].outline.primary {
      color: var(--primary-color);
      border: 2px solid var(--primary-color);
    }
.button.outline.accent, a.button.outline.accent, input[type="submit"].outline.accent, input[type="button"].outline.accent {
      color: var(--accent-color);
      border: 2px solid var(--accent-color);
    }
.button.outline.secondary, a.button.outline.secondary, input[type="submit"].outline.secondary, input[type="button"].outline.secondary {
      color: var(--secondary-color);
      border: 2px solid var(--secondary-color);
    }
.button.danger-outline, a.button.danger-outline, input[type="submit"].danger-outline, input[type="button"].danger-outline {
    background-color: transparent;
    color: var(--danger-color);
    border: 1px solid var(--danger-color);
    padding: 6px 8px;
  }
.button.danger-outline svg, a.button.danger-outline svg, input[type="submit"].danger-outline svg, input[type="button"].danger-outline svg {
      color: var(--danger-color);
    }
.button.danger-outline:hover, a.button.danger-outline:hover, input[type="submit"].danger-outline:hover, input[type="button"].danger-outline:hover {
      background-color: var(--danger-color);
      color: white;
    }
.button.danger-outline:hover svg, a.button.danger-outline:hover svg, input[type="submit"].danger-outline:hover svg, input[type="button"].danger-outline:hover svg {
        color: white;
      }
.button.xs, a.button.xs, input[type="submit"].xs, input[type="button"].xs {
    padding: var(--spacing-xxs) var(--spacing-xs);
    border-radius: var(--rounded-xs);
    font: var(--small);
    text-transform: capitalize;
  }
.button.small, a.button.small, input[type="submit"].small, input[type="button"].small {
    padding: var(--spacing-xs) var(--spacing-small);
    border-radius: var(--rounded-small);
    font: var(--small);
    text-transform: capitalize;
  }
.button.compact, a.button.compact, input[type="submit"].compact, input[type="button"].compact {
    padding: var(--spacing-xs) var(--spacing-medium);
    border-radius: var(--rounded-small);
    font: var(--compact);
    text-transform: capitalize;
  }
.button.large, a.button.large, input[type="submit"].large, input[type="button"].large {
    padding: var(--spacing-medium) var(--spacing-large);
    font: var(--h3);
    border-radius: var(--rounded-large);
  }
.button.disabled,
  .button:disabled,
  a.button.disabled,
  a.button:disabled,
  input[type="submit"].disabled,
  input[type="submit"]:disabled,
  input[type="button"].disabled,
  input[type="button"]:disabled {
    pointer-events: none;
    opacity: 0.5;
  }
/* Pseudo-classes and media queries */
@media (hover: hover) {
  .button:hover,
  a.button:hover,
  input[type="submit"]:hover,
  input[type="button"]:hover {
    /* background-color: var(--accent-color-darkest); */
    animation: background-color 0.2s ease;
  }
  .button.primary:hover {
    background-color: var(--primary-color-darkest);
  }
    .button.primary:hover svg {
      color: var(--secondary-color);
    }
  .button.accent:hover {
    background-color: var(--accent-color-darkest);
  }
    .button.accent:hover svg {
      color: var(--secondary-color);
    }
  .button.secondary:hover {
    background-color: var(--gray-color-darker);
    color: var(--primary-color);
  }
    .button.secondary:hover svg {
      color: var(--primary-color);
    }
  .button.tertiary:hover {
    background-color: var(--tertiary-color-dark);
    color: var(--primary-color);
  }
    .button.tertiary:hover svg {
      color: var(--primary-color);
    }
  .button.danger:hover {
    background-color: var(--danger-color-dark);
    color: var(--secondary-color);
  }
    .button.danger:hover svg {
      color: var(--secondary-color);
    }
  .button.muted:hover {
    background-color: var(--gray-color-darkest);
    color: var(--secondary-color);
  }
    .button.muted:hover svg {
      color: var(--secondary-color);
    }
  .button.invert:hover {
    background-color: var(--secondary-color);
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
  }
    .button.invert:hover svg {
      color: var(--primary-color);
    }
  .button:active {
    transform: scale(0.98);
    animation: all 75ms ease;
    background-color: var(--accent-color-darkest);
  }

  .button.link:hover {
    text-decoration: underline;
    color: var(--accent-color);
  }

  .button.outline.accent:hover {
    background-color: var(--accent-color);
    color: var(--secondary-color);
    border: 2px solid var(--accent-color);
  }
    .button.outline.accent:hover svg {
      color: var(--secondary-color);
    }
}
/* Accessibility: Focus outline */
.button:focus-visible,
a.button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--accent-color-lightest);
}
.manage__button {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  color: #000000;
  align-self: end;
  box-shadow: var(--shadow-light);
}
/* container class is used to wrap main content */
.dashboard {
  background-color: var(--dashboard-bg);
}
.container {
  max-width: var(--mobile);
  height: auto;
}
.container-max {
  max-width: 100%;
  height: auto;
}
body {
  height: 100%;
  width: 100%;

  margin: 0;
  padding: 0;

  font-family: var(--font-regular);
  color: var(--color-primary);
  background-color: var(--dashboard-bg);
}
.disabled {
  pointer-events: none;
  opacity: 0.5;
}
ul,
li,
p {
  margin: 0;
  padding: 0;
  width: inherit;
  font: var(--p);
}
ul,
li,
ol {
  list-style: none;
}
svg {
  width: 18px;
  height: 18px;
}
svg.medium {
  width: 22px;
  height: 22px;
}
a {
  color: var(--color-primary);
  text-decoration: underline;
  transition: var(--transition);
}
a:hover {
    color: var(--accent-color);
  }
a svg:hover {
  color: var(--dashboard-bg-dark);
}
hr {
  border: 1px solid var(--border-color);
  margin: var(--spacing-medium) 0;
}
hr.dashed {
    border: 1px dashed var(--border-color);
  }
/* Typography */
h1 {
  font: var(--h1);
  color: var(--primary-color);
}
h2 {
  font: var(--h2);
  color: var(--color-primary);
}
h3 {
  font: var(--h3);
  color: var(--color-primary);
}
.subtext {
  font: var(--subtext);
}
.text-accent {
    color: var(--accent-color);
  }
/* Blocks */
.stack {
  display: flex;
  flex-flow: column;
  width: 100%;
  align-items: start;
}
.row {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: var(--spacing-medium);
  width: 100%;
}
.align-end {
  align-items: end;
}
.pointer {
  cursor: pointer;
}
.no-wrap {
  white-space: nowrap;
}
.block {
  display: block;
  width: 100%;
}
/* Buttons */
.social-network__list {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 1rem;
  transition: var(--transition);
}
.social-network__list svg {
  fill: var(--primary-color);
  width: 32px;
  height: 32px;
}
.social-network__list > a {
  width: 32px;
}
@media (hover: hover) {
    .social-network__list a:hover {
      transform: scale(1.2);
      color: var(--accent-color);
    }
    .social-network__list svg:hover {
      fill: var(--accent-color);
    }
}
/* Dashboard */
@media screen and (min-width: 640px) {
  .dashboard__cards-container {
    grid-template: auto / repeat(auto-fit, 280px);
  }
}
.dashboard__container {
  max-width: var(--desktop);
  width: 100vw;
  min-height: 100vh;
  margin: 0 auto;
}
.dashboard__container > .header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  padding: var(--spacing-medium);
  flex-direction: column;
}
.dashboard__container > .header .row {
  justify-content: space-between;
}
.dashboard__container > .header .username {
  color: var(--accent-color);
}
.dashboard__container > .header .account__container {
  padding: var(--spacing-small) var(--spacing-medium);
  display: flex;
  flex-direction: column;
  border-radius: var(--rounded-medium);
  gap: var(--spacing-medium);
}
.dashboard__container > .header .account__container .account__menu {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-small);
  position: absolute;
  top: 70px;
}
.dashboard__container > .header .account__container .header-button {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}
.dashboard__container > .header .account__container .header-button a {
  text-decoration: none;
  color: var(--primary-color);
}
.dashboard__container > .header .account__container .header-button a:hover {
  text-decoration: underline;
}
/* Quick Start Page Styles */
.quick-start__container {
  max-width: var(--desktop);
  width: 100vw;
  min-height: 100vh;
  margin: 0 auto;
}
.quick-start__container > .header {
  display: flex;
  justify-content: space-between;
  align-items: start;
  padding: var(--spacing-medium);
  flex-direction: column;
}
.quick-start__container > .header .row {
  justify-content: space-between;
  width: 100%;
}
.quick-start__container > .header .account__container {
  padding: var(--spacing-small) var(--spacing-medium);
  display: flex;
  flex-direction: column;
  border-radius: var(--rounded-medium);
  gap: var(--spacing-medium);
}
.quick-start__container > .header .account__container .header-button {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
}
.quick-start__container > .header .account__container .header-button a {
  text-decoration: none;
  color: var(--primary-color);
}
.quick-start__container > .header .account__container .header-button a:hover {
  text-decoration: underline;
}
.quick-start__header {
  margin-top: var(--spacing-medium);
}
.quick-start__header h1 {
  font: var(--h1);
  color: var(--primary-color);
  margin-bottom: var(--spacing-small);
}
.quick-start__header p {
  font-size: var(--h3);
  color: var(--primary-color);
  font-weight: 400;
}
.quick-start__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: var(--spacing-medium);
  padding: var(--spacing-medium);
}
.quick-start__category {
  grid-column: 1 / -1;
  margin-top: var(--spacing-xlarge);
  margin-bottom: var(--spacing-medium);
}
.quick-start__category:first-child {
  margin-top: 0;
}
.quick-start__category h2 {
  font: var(--p);
  font-weight: bold;
  color: var(--gray-color-darkest);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
}
.quick-start__card {
  display: flex;
  align-items: center;
  gap: var(--spacing-medium);
  padding: var(--spacing-medium) var(--spacing-large);
  background: white;
  border: 1px solid var(--border-color);
  border-radius: var(--rounded-medium);
  text-decoration: none;
  transition: all 0.2s ease;
  cursor: pointer;
  color: var(--primary-color);
}
.quick-start__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: var(--accent-color);
}
.quick-start__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--accent-color);
  border-radius: var(--rounded-small);
  padding: var(--spacing-xs);
}
.quick-start__icon svg {
  width: 24px;
  height: 24px;
  color: white;
  stroke-width: 1.5;
}
.quick-start__content {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xxs);
}
.quick-start__content h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--primary-color);
  line-height: 1.5;
  margin: 0;
}
.quick-start__content p {
  font-size: 0.9375rem;
  color: var(--primary-color);
  opacity: 0.7;
  line-height: 1.5;
  margin: 0;
}
@media screen and (max-width: 768px) {
  .quick-start__cards {
    grid-template-columns: 1fr;
  }
}
.header.sticky {
  position: sticky;
  top: 0;
  z-index: 99;
}
.dashboard__manage {
  display: grid;
  grid-template-columns: 0 1fr;
  transition: var(--transition);
  overflow: hidden;
  overflow-y: auto;
}
.menu-item {
  display: flex;
  flex-direction: column;
}
/* gap: var(--spacing-xs); */
.menu-item.row {
    display: flex;
    flex-direction: row;
    align-items: center;
  }
.menu-item-cell {
    display: inline-flex;
    align-items: center;
  }
.menu-item-picture {
    border-radius: var(--rounded-small);
    margin-right: var(--spacing-small);
    -o-object-fit: cover;
       object-fit: cover;
  }
.menu-item-picture.xs {
      width: 60px;
      height: 60px;
    }
.menu-item-picture.thumb {
      width: 80px;
      height: 80px;
    }
.menu-item-picture.small {
      width: 150px;
      height: 150px;
    }
.menu-item-picture.medium {
      width: 300px;
      height: 300px;
    }
.menu-item-picture.large {
      width: 600px;
      height: 600px;
    }
@media screen and (min-width: 640px) {
  .dashboard__manage {
    grid-template: auto / 300px 1fr;
  }
}
.dashboard__manage.active {
  grid-template: auto / 250px minmax(var(--mobile), 1fr);
  overflow: hidden;
}
.dashboard__manage.active .main::before {
  content: "";
  position: absolute;
  top: 0;
  left: 300px;
  min-height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1;
  cursor: not-allowed;
  overflow: hidden;
}
.dashboard__manage .sidepanel {
  padding: var(--spacing-small) var(--spacing-medium);
  background-color: var(--dashboard-bg);
}
.dashboard__manage .sidepanel .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: var(--spacing-medium) 0;
}
.dashboard__manage .main {
  background-color: #ffffff;
  padding: 0 var(--spacing-medium);
  min-height: 100vh;
  overflow: hidden;
  overflow-y: auto;
}
.dashboard__manage .main > .header {
  position: sticky;
  top: 0;
  background: var(--secondary-color);
}
.dashboard__manage .logo {
  height: 60px;
  width: 60px;
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--rounded-full);
  background-color: var(--secondary-color);
}
.dashboard__manage .header {
  justify-content: space-between;
}
@media screen and (min-width: 640px) {
  .dashboard__manage .header {
    justify-content: left;
  }
}
.dashboard__manage .header svg {
  height: 28px;
  width: 28px;
}
.dashboard__manage .header .back-button {
  display: inline-block;
}
.dashboard__manage .header .back-button.active {
  display: none;
}
.dashboard__menu .menu-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
.dashboard__menu .menu-list .item {
  padding: var(--spacing-small) var(--spacing-medium);
}
.dashboard__menu .menu-list .divider__container {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-small);
  padding: var(--spacing-small) var(--spacing-xs);
  font: var(--subtext);
  color: var(--dashboard-bg-muted);
  text-transform: uppercase;
}
.dashboard__menu .menu-list .divider__container hr {
  width: 100%;
  border: 1px solid var(--dashboard-bg-muted);
}
.dashboard__menu .menu-list .item:hover,
.dashboard__menu .menu-list .item.active {
  background-color: var(--dashboard-bg-dark);
  border-radius: var(--rounded-medium);
}
.dashboard__menu .menu-list .item.active a {
  font-weight: bold;
}
.dashboard__menu .menu-list .item a {
  display: flex;
  align-items: center;
  flex-direction: row;
  font: var(--p);
  gap: var(--spacing-small);
  text-decoration: none;
}
.dashboard__menu .menu-list .item .sidebar-link-form {
  margin: 0;
}
.dashboard__menu .menu-list .item .sidebar-link {
  display: flex;
  align-items: center;
  flex-direction: row;
  font: var(--p);
  gap: var(--spacing-small);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
  width: 100%;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.dashboard__menu .menu-list .item.disabled {
  pointer-events: none;
  opacity: 0.5;
}
.dashboard__menu .menu-list svg {
  fill: var(--dashboard-bg);
  width: 24px;
  height: 24px;
}
.dashboard .header__actions {
  display: flex;
  gap: var(--spacing-medium);
  padding: var(--spacing-medium) 0;
  /* margin-bottom: var(--spacing-medium); */
  /* margin-top: var(--spacing-medium); */
  align-items: center;
}
/* Cards */
.dashboard__cards-container {
  display: grid;
  gap: var(--spacing-large);
  margin: var(--spacing-small) var(--spacing-medium);
}
.dashboard__container .card {
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  gap: var(--spacing-medium);
  border: 2px solid var(--primary-color);
  border-radius: var(--rounded-medium);
  padding: var(--spacing-medium);
  background-color: var(--secondary-color);
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
  cursor: pointer;
}
.dashboard__container .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: var(--accent-color);
}
.dashboard__container .card .header {
  display: flex;
  justify-content: space-between;
}
.dashboard__container .card .title {
  font: var(--h3);
  font-weight: bold;
  margin: var(--spacing-small);
  line-height: 1;
}
.dashboard__container .card .actions {
  display: flex;
  direction: row;
  gap: var(--spacing-xs);
  justify-content: end;
}
.dashboard__container .card .actions .button {
  pointer-events: none;
}
.dashboard__container .card .actions form {
  pointer-events: auto;
}
.dashboard__container .logo {
  width: 48px;
  height: 48px;
  border-radius: var(--rounded-small);
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
}
/* Dashboard Layout */
/* Alerts */
#flash_alert {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-small);
  padding: var(--spacing-small) var(--spacing-medium);
  color: var(--danger-color);
  background-color: var(--danger-color-bg);
  font: var(--p);
  border-radius: var(--rounded-small);
  border: 1px solid var(--danger-color);
  margin-bottom: var(--spacing-medium);
}
/* Forms */
form {
  display: flex;
  flex-flow: column;
  gap: var(--spacing-medium);
  max-width: var(--mobile);
}
form select,
  form input,
  form textarea {
    font: var(--p);
    transition: all 0.2s ease;

    border: 1px solid var(--border-color);
    border-radius: var(--rounded-small);

    background-color: var(--input-bg-color);
    padding: var(--spacing-small) var(--spacing-small);
  }
form label {
    cursor: pointer;
    font: var(--p);
  }
form label img {
      max-width: 100%;
      height: auto;
    }
form label[required]::after {
      content: " *";
      color: var(--danger-color);
    }
form input[type="file"] + label {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    cursor: pointer;
    background-color: red;
  }
form .optional {
    display: inline-flex;
    color: var(--primary-color-lightest);
  }
form .placeholder {
    display: flex;
    padding-top: var(--spacing-small);
    color: var(--primary-color-lightest);
  }
form .field,
  form .field_with_errors {
    display: flex;
    flex-flow: column;
    gap: var(--spacing-xs);
  }
form .field-check {
    display: flex;
    flex-flow: row;
    align-items: center;
    gap: var(--spacing-xs);
  }
form .field-group {
    display: flex;
    flex-flow: row;
    position: relative;

    border: 1px solid var(--border-color);
    border-radius: var(--rounded-small);
    padding: 0;
  }
form .field-group .flex-1 {
      flex: 1 1;
    }
form .field-group.error {
      border: var(--border-input-error);
    }
form .field-group.error input:focus {
        outline: var(--border-input-error);
      }
form .field-group input {
      display: inline-flex;
      border: none;
      border-radius: 0;
      height: initial;

      margin: 0 1px;

      /* &:active,
      &:focus,
      &:hover {
        background-color: transparent;
        border: none;
        outline:none;
      } */
    }
form :not(.col-2) > .field {
    margin-top: var(--spacing-small);
  }
form .col-2 {
    display: flex;
    flex-flow: column;
    gap: var(--spacing-medium);
  }
form .col-2 .field {
      flex: 1 1;
    }
@media screen and (min-width: 640px) {
form .col-2 {
      flex-flow: row
  }
    }
form .field_with_errors input,
  form .field_with_errors select,
  form .field_with_errors textarea {
    border: var(--border-input-error);
    color: var(--danger-color);
  }
form .field.inline {
    display: flex;
    flex-flow: row;
    gap: var(--spacing-small);
    align-items: baseline;
  }
form .form-actions {
    display: flex;
    gap: var(--spacing-small);
    align-items: center;
    margin-top: var(--spacing-medium);
  }
form input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--accent-color);
  }
form input[type="button"],
  form input[type="submit"],
  form input[type="checkbox"] {
    cursor: pointer;
  }
form input::-moz-placeholder {
    color: var(--gray-color-darkest);
  }
form input::placeholder {
    color: var(--gray-color-darkest);
  }
form input[type="submit"] {
    border-radius: var(--rounded-medium);
    background-color: var(--accent-color);
    color: var(--secondary-color);
    font: var(--p);
    cursor: pointer;
  }
form .actions {
    display: flex;
    flex: 1 1;
    flex-flow: row;
    gap: var(--spacing-medium);
    justify-content: start;
    padding: var(--spacing-large) 0;
    padding-right: 0;
  }
form .actions input[type="submit"] {
      flex: 1 1;
    }
@media screen and (min-width: 640px) {
form .actions {
      position: initial;
      background-color: transparent
  }

      form .actions input[type="submit"] {
        flex: initial;
      }
    }
form .error_explanation {
    color: var(--danger-color);
  }
form fieldset {
    display: flex;
    flex-flow: column;
    gap: var(--spacing-medium);
    border: none;
    padding: 0;
  }
form fieldset legend {
      font: var(--h3);
      font-weight: bold;
      text-transform: capitalize;
      color: var(--accent-color);
      margin-bottom: var(--spacing-medium);
      display: inline-block;
    }
form fieldset + fieldset {
      margin-top: var(--spacing-small);
    }
form .stacked-fields {
    display: flex;
    flex-flow: column wrap;
    gap: var(--spacing-large);
  }
form input[type="color"] {
    /* Remove default style */
    -webkit-appearance: none;
    -moz-appearance: none;
         appearance: none;
    border: none;
    outline: none;

    width: 45px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    background-color: transparent;
  }
form .sticky-footer {
    position: sticky;
    bottom: 0;
    background-color: var(--background-color);
    padding: var(--spacing-large) var(--spacing-medium);
    width: 100%;
  }
@media (hover: hover) {
    form input:not([type="button"]):not([type="submit"]):not([disabled]):hover,
    form input:not([type="button"]):not([type="submit"]):not([disabled]):focus,
    form select:not([disabled]):hover {
      background-color: var(--dashboard-bg);
    }
  }
@media (focus: focus) {
    form input:focus,
    form textarea:focus,
    form select:focus {
      outline: 2px solid var(--primary-color-darker);
    }
  }
@media screen and (min-width: 640px) {
    form input[type="submit"] {
      width: -moz-fit-content;
      width: fit-content;
    }
  }
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  padding-right: 2rem;
  background: #ffffff
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24"><path fill="var(--primary-color)" d="M7 10l5 5 5-5z"/></svg>')
    no-repeat right var(--spacing-small) center;
  background-size: 1.25rem;
}
select::after {
    content: "";
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    border-left: 0.3rem solid transparent;
    border-right: 0.3rem solid transparent;
    border-top: 0.3rem solid var(--primary-color);
  }
select.time-periods {
    background: var(--background-color)
      url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24"><path fill="var(--primary-color)" d="M7 10l5 5 5-5z"/></svg>')
      no-repeat right var(--spacing-small) center;
    background-size: 1rem;
  }
/* Nested forms */
form [data-controller="menu-items"] ul {
  display: flex;
  flex-flow: column;
  gap: var(--spacing-medium);

  background: yellow;
}
form [data-controller="menu-items"] .nested-fields {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-medium);
  padding: var(--spacing-small) var(--spacing-medium);
  border-radius: var(--rounded-medium);
  border: 2px solid var(--primary-color);
  background: var(--dashboard-bg);
  transition: var(--transition);
}
form [data-controller="menu-items"] .nested-fields.readonly {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-medium);
  padding: var(--spacing-small) var(--spacing-medium);
  border: 2px solid var(--primary-color);
  transition: var(--transition);
}
form [data-controller="menu-items"] .nested-fields .inline {
  align-self: end;
}
/* enter custom mode */
form select,
::picker(select) {
  -webkit-appearance: base-select;
     -moz-appearance: base-select;
          appearance: base-select;
}
/* style the button */
::select-fallback-button {
  background: var(--secondary-color);
  font-size: 1.2rem;
}
/* style the picker dropdown */
::picker(select) {
  border-radius: 1rem;
}
/* style the options */
option {
  padding: var(--spacing-small) var(--spacing-medium);
  font-size: 1.2rem;
}
/* style selected option in the dropdown */
option:checked {
  background: var(--accent-color);
}
/* style the option on hover or focus */
option:hover,
option:focus-visible {
  background-color: var(--accent-color);
}
/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
  transition: var(--transition);
  overflow: hidden;

  border-spacing: 0;
  font: var(--p);
}
table tr {
    border-bottom: 1px solid var(--primary-color);
  }
table tbody tr th,
  table tbody tr th:hover {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    background-color: var(--dashboard-bg);
  }
table th,
  table td {
    padding: var(--spacing-medium) var(--spacing-small);
    text-align: left;
    font: var(--p);
  }
table thead {
    color: var(--primary-color);
  }
table thead tr th {
        font-weight: bold;
        text-transform: capitalize;
      }
table .actions {
    display: flex;
    align-items: center;
    justify-items: center;
    justify-content: end;
    margin: 0 auto;
  }
table .full-cell {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
table .actions a:hover {
    text-decoration: underline;
    font-weight: bold;
  }
table .menu-item img {
      width: 60px;
      height: 60;
      border-radius: var(--rounded-small);
      aspect-ratio: 1/1;
      margin-right: var(--spacing-small);
    }
table .row-group {
    background-color: var(--dashboard-bg);
  }
table .row-group__container {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
    }
table .overflow-cell {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
table .wrap-cell {
    line-height: 1.4;
    height: 1.5em;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
  }
table .dtr-data .wrap-cell {
      height: auto;
      white-space: normal;
    }
table .dietary-cell {
    display: inline-flex;
    justify-content: end;
    flex-direction: row;
    gap: var(--spacing-medium);
    white-space: pre;
    word-break: break-word;
  }
table .dtr-data .dietary-cell {
    flex-wrap: wrap;
    word-break: normal;
  }
@media (hover: hover) {
    table tbody tr:hover {
      background-color: var(--dashboard-highlight);
    }
  }
/* Drawer */
.drawer.hidden {
  display: none;
}
.drawer {
  position: fixed;
  top: 0;
  left: 0;
  min-height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: var(--transition);
}
.drawer__container {
  position: absolute;
  min-height: 100vh;
  right: 0;
  max-width: 80%;

  background-color: var(--secondary-color);
  padding: var(--spacing-medium);
  transition: var(--transition);
}
/* Session */
.session__container {
  /* A grid with two column: one for an image, one for the form */
  display: grid;
  grid-template: "main" 1fr "footer" 77px / 1fr;
  margin: auto;
  height: 100vh;
  width: 100vw;
  min-height: 450px;
}
.session__container #flash_alert {
    margin-bottom: 0;
  }
.session__container .session__message {
    font: var(--h3);
  }
.session__container .session__subheading {
    font: var(--h4);
    color: var(--gray-color-darkest);
    margin-top: var(--spacing-small);
    margin-bottom: var(--spacing-medium);
  }
.session__container .session__content {
    font: var(--p);
    color: var(--gray-color-darkest);
    line-height: 1.6;
    margin-bottom: var(--spacing-large);
  }
.session__container .session__card {
    display: flex;
    flex-direction: column;
    background: var(--secondary-color);
    border-radius: var(--rounded-medium);
    box-shadow: var(--shadow-light);
  }
.session__container .session__card .session__card-content {
      display: flex;
      flex-direction: column;
      padding: var(--spacing-medium) var(--spacing-large);
    }
.session__container .session__form {
    margin: auto;
    grid-area: main;
    width: 100%;
    max-width: 466px;
    padding: var(--spacing-large);
  }
.session__container .session__form .fields {
      display: flex;
      flex-direction: column;
      background: var(--secondary-color);
      border-radius: var(--rounded-medium);
      box-shadow: var(--shadow-light);
    }
.session__container .session__form .fields form {
        padding: var(--spacing-medium) var(--spacing-large);
        margin-bottom: var(--spacing-medium);
      }
.session__container .session__form .fields form .field input.block {
          width: 100%;
        }
.session__container .devise__links {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    font: var(--p);
    padding: var(--spacing-medium) var(--spacing-large);
    border-top: 1px solid var(--gray-color);
  }
.session__container .session__image-container {
    display: none;
    grid-area: feature;
  }
.session__container .session__image-container img {
      width: 100%;
      height: auto;
      border-radius: var(--rounded-medium);
      -o-object-fit: cover;
         object-fit: cover;
    }
.session__container .session__footer {
    grid-area: footer;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-small);
    font: var(--small);
    color: var(--primary-color-lightest);
  }
@media screen and (min-width: 640px) {
.session__container {
    grid-template: "feature main" 1fr "feature footer" 77px / 1fr 1fr
}

    .session__container .session__image-container {
      display: flex;
      max-width: 100%;
      height: auto;
      border-radius: var(--rounded-medium);
      -o-object-fit: cover;
         object-fit: cover;
    }

    .session__container .session__form {
      margin: auto;
      gap: 0;
    }
  }
.auth__container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  width: 100vw;
}
/* Utilities */
.text-center {
  text-align: center;
}
.padding-small {
    padding: var(--spacing-small);
  }
.padding-medium {
    padding: var(--spacing-medium);
  }
.padding-large {
    padding: var(--spacing-large);
  }
.padding-xlarge {
    padding: var(--spacing-xlarge);
  }
.margin-small {
    margin: var(--spacing-small);
  }
.margin-medium {
    margin: var(--spacing-medium);
  }
.margin-large {
    margin: var(--spacing-large);
  }
.margin-xlarge {
    margin: var(--spacing-xlarge);
  }
.empty {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: var(--gray-color-darker);
  margin: var(--spacing-large) var(--spacing-medium);
  text-align: center;
}
/* Admin Reservations */
.admin__reservations {
  display: flex;
  flex-direction: column;
}
.admin__reservations .table-col-date {
      -moz-column-break-inside: avoid;
           break-inside: avoid;
      word-break: break-word;
    }
.admin__reservations .header__nav {
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: var(--spacing-xs);
    }
.admin__reservations .header__container {
      display: flex;
      flex: 1 1;
      flex-direction: column;
      align-items: start;
      gap: var(--spacing-small);
      width: 100%;
    }
.admin__reservations .header__container .fields {
        display: flex;
        flex-direction: row;
        gap: var(--spacing-medium);
        align-items: center;
        width: 100%;
        flex-wrap: wrap;
      }
.admin__reservations .header__container .fields input,
        .admin__reservations .header__container .fields select {
          flex: 1 1;
        }
@media screen and (max-width: 640px) {
.admin__reservations .header__container {
        flex-direction: column;
        align-items: start
    }
      }
.admin__reservations .header__container .label {
        font: var(--small);
        font-weight: bold;
        color: var(--primary-color);
      }
.admin__reservations .list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-medium);
    margin-top: var(--spacing-medium);
  }
.admin__reservations .list .item {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-medium);
      justify-content: space-between;
      background-color: var(--muted-bg);
      padding: var(--spacing-medium) var(--spacing-large);
      border-radius: var(--rounded-small);
    }
.admin__reservations .list .item strong {
        font: var(--sub-heading);
        margin-bottom: var(--spacing-small);
        text-transform: capitalize;
      }
.admin__reservations .list .item.completed {
        border-left: 8px solid var(--success-color);
      }
.admin__reservations .list .item.confirmed {
        border-left: 8px solid var(--info-color);
      }
.admin__reservations .list .item.pending {
        border-left: 8px solid var(--warning-color);
      }
.admin__reservations .list .item.cancelled {
        border-left: 8px solid var(--danger-color);
      }
.admin__reservations .list .details {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-small);
    }
/* Select all children except last one */
.admin__reservations .list .details .reservation > *:not(:last-child)::after {
            content: " / ";
          }
@media screen and (max-width: 640px) {
        .admin__reservations .list .details .reservation {
          display: flex;
          flex-direction: column;
          gap: var(--spacing-small);
        }

          .admin__reservations .list .details .reservation span {
            display: block;
          }
            .admin__reservations .list .details .reservation > *:not(:last-child)::after {
              content: "";
            }
      }
.admin__reservations .list .actions {
      display: flex;
      flex-direction: row;
      justify-content: end;
      gap: var(--spacing-medium);
    }
@media screen and (max-width: 640px) {
.admin__reservations .list .actions {
        flex-direction: column-reverse;
        justify-content: start
    }

        .admin__reservations .list .actions .button {
          width: 100%;
        }
      }
.admin__reservations .status {
    padding: var(--spacing-xs) var(--spacing-small);
    border-radius: var(--rounded-medium);
    /* border: 1px solid; */
    font: var(--small);
    min-width: 50px;
    text-align: center;
    -moz-column-break-inside: avoid;
         break-inside: avoid;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
  }
.admin__reservations .status.confirmed {
      color: var(--secondary-color);
      background-color: var(--confirmed-color);
    }
.admin__reservations .status.pending {
      color: var(--primary-color);
      background-color: var(--warning-color);
    }
.admin__reservations .status.cancelled {
      color: var(--secondary-color);
      background-color: var(--danger-color);
    }
.admin__reservations .status.no_show {
      color: var(--gray-color-darkest);
      background-color: var(--gray-color);
    }
.admin__reservations .status.completed {
      color: var(--primary-color);
      background-color: var(--success-color);
      opacity: 0.8;
    }
/* Status Dots for Reservations */
.admin__reservations .status-dot {
      display: inline-block;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin-right: 8px;
      aspect-ratio: 1 / 1;
      vertical-align: start;
    }
/* Larger dots on mobile for better visibility */
@media (max-width: 768px) {
.admin__reservations .status-dot {
        width: 10px;
        height: 10px;
        margin-right: 10px
    }
      }
.admin__reservations .status-dot.pending {
        background-color: var(--warning-color);
      }
.admin__reservations .status-dot.confirmed {
        background-color: var(--confirmed-color);
      }
.admin__reservations .status-dot.cancelled {
        background-color: var(--danger-color);
      }
.admin__reservations .status-dot.no_show {
        background-color: var(--gray-color);
      }
.admin__reservations .status-dot.completed {
        background-color: var(--success-color);
      }
/* Locales */
.locale-switcher {
  display: inline-flex;
  flex: 1 1;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  position: relative;
  gap: var(--spacing-small);
  height: 35px;

  font: var(--p);
  padding: var(--spacing-xs) var(--spacing-small);
  line-height: 1;
  overflow: hidden;
  border-radius: var(--rounded-medium);
  color: var(--primary-color);

  box-shadow: var(--shadow-light);
}
.locale-switcher a {
    text-decoration: none;
  }
.locale-switcher a.active {
      color: var(--accent-color);
      font-family: var(--font-bold);
    }
.locale-switcher .separator {
    position: relative;
    height: 1rem;
    width: 1px;
    background-color: var(--secondary-color);
    border: none;
  }
.locale-switcher .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--background-color);
    box-shadow: var(--shadow-light);
    opacity: 1;
    z-index: -1;
  }
/* Footer */
footer {
  position: sticky;
  bottom: 0;
  width: 100vw;
  padding: var(--spacing-medium) var(--spacing-large);
}
/* Studio */
/* .studio-container { */
/* } */
/* Flash */
.flash {
  position: fixed;
  top: var(--spacing-medium);
  right: var(--spacing-medium);
  margin-left: var(--spacing-medium);
  z-index: 999;

  display: flex;
  padding: var(--spacing-small);
  background-color: var(--secondary-color);

  border: 1px solid var(--primary-color);
  border-radius: var(--rounded-medium);

  color: var(--primary-color);
  font: var(--p);
  gap: var(--spacing-small);
  box-shadow: var(--shadow-light);
}
.flash.relative {
    position: relative;
    top: 0;
    right: 0;
    margin: 0;
  }
.flash--visible {
    opacity: 1;
    transition: slide-in 1s forwards;
  }
.flash--hidden {
    opacity: 0;
    transition: slide-out 1s forwards;
  }
.flash svg {
    width: 24px;
    height: 24px;
  }
.flash .close {
    cursor: pointer;
  }
.flash.success,
  .flash.notice {
    background-color: var(--success-color-bg);
    color: var(--success-color);
    border-color: var(--success-color);
  }
.flash.error,
  .flash.alert {
    background-color: var(--danger-color-bg);
    color: var(--danger-color);
    border-color: var(--danger-color);
  }
.flash.warning {
    background-color: var(--warning-color-bg);
    color: var(--warning-color);
    border-color: var(--warning-color);
  }
/* Customers */
.customer__container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-medium);
  padding: var(--spacing-medium) 0;
}
.customer__container .customer__details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-small);
  }
.customer__container .customer__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--spacing-medium);
  }
.customer__container .customer__stats--item {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-xs);
      text-align: center;
    }
.customer__container .customer__stats--item .label {
        font: var(--p);
        color: var(--primary-color-lightest);
      }
.customer__container .customer__stats--item .value {
        font: var(--h3);
        font-weight: bold;
        color: var(--primary-color);
      }
/* Availabilities */
.availabilities__container .availabilities__errors {
    color: var(--danger-color);
    font: var(--p);
    display: flex;
    flex: row 1;
    align-items: start;
    gap: var(--spacing-small);
    background-color: var(--danger-color-bg);
    border-radius: var(--rounded-medium);
    padding: var(--spacing-small);
    box-shadow: var(--button-shadow);
    border: 1px solid var(--danger-color);
  }
.empty-state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-medium);
  padding: var(--spacing-large);
  text-align: center;
  color: var(--gray-color-darkest);
  border: 2px dashed var(--muted-color);
  border-radius: var(--rounded-medium);
}
/* Terms and conditions */
.tc__container {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-medium);
  gap: var(--spacing-medium);
}
.tc-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem 1.25rem;
  padding: 0.75rem 1rem;
  border: 1px solid #e7e7e7;
  border-radius: 10px;
  background: #fffefb;
  margin-bottom: 1rem;
}
.tc-meta .badge {
    background: var(--accent-color);
    color: var(--secondary-color);
    font: (--bold);
    border-radius: var(--rounded-medium);
    padding: var(--spacing-xs) var(--spacing-small);
    font-size: var(--small);
  }
.tc-meta .meta-group__container {
    display: flex;
    flex-flow: column wrap;
  }
.tc-meta .meta-group__container .meta-group {
      display: flex;
      align-items: center;
      gap: var(--spacing-xs);
      color: var(--primary-color);
    }
.tc-meta .meta-group__container .meta-group .label {
        color: #64748b;
      }
.tc-actions {
  margin-left: auto;
  display: flex;
  gap: 1rem;
}
.tc-actions.right-aligned {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    justify-content: end;
  }
.tc-actions.centered {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    justify-content: center;
  }
.icon-link {
  color: #0f766e;
  text-decoration: none;
}
.icon-link:hover {
    text-decoration: underline;
  }
.prose.tc-content {
  max-width: 70ch;
  line-height: 1.6;
}
/* Branding */
.brand__container {
  display: inline-flex;
  flex-direction: row;
  gap: var(--spacing-small);
  padding: var(--spacing-medium) 0;
  justify-content: center;
  align-items: center;
  width: auto;
}
.brand__container .logo {
    height: 1.25rem;
    width: 1.25rem;
    aspect-ratio: 1/1;
  }
.brand__container .tapfeast {
    font: var(--h3);
    font-weight: bold;
    color: var(--primary-color);
    align-self: center;
  }
/* Admin Analytics Dashboard */
.admin__analytics {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-large);
  margin-bottom: var(--spacing-large);
}
.admin__analytics .header__container {
    display: flex;
    flex: 1 1;
    flex-direction: column;
    align-items: start;
    gap: var(--spacing-small);
    width: 100%;
    padding: var(--spacing-medium);
    border-radius: var(--rounded-medium);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  }
.admin__analytics .header__container .fields {
      display: flex;
      flex-direction: row;
      gap: var(--spacing-medium);
      align-items: center;
      width: 100%;
      flex-wrap: wrap;
    }
.admin__analytics .header__container .fields select {
        flex: 1 1;
        min-width: 200px;
      }
@media screen and (max-width: 640px) {
.admin__analytics .header__container {
      flex-direction: column;
      align-items: start
  }
    }
.admin__analytics .header__container .label {
      font: var(--small);
      font-weight: bold;
      color: var(--primary-color);
    }
.admin__analytics .analytics__section {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-medium);
  }
.admin__analytics .analytics__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--spacing-medium);
  }
@media screen and (max-width: 768px) {
.admin__analytics .analytics__row {
      grid-template-columns: 1fr
  }
    }
.admin__analytics .section__header {
    font: var(--h3);
    font-weight: bold;
    color: var(--primary-color);
    display: flex;
    align-items: baseline;
    gap: var(--spacing-small);
    margin-bottom: 0;
  }
.admin__analytics .section__container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-medium);
    background: var(--dashboard-bg-dark);
    padding: var(--spacing-medium) var(--spacing-medium);
    border-radius: var(--rounded-medium);
  }
.admin__analytics .section__icon {
    width: 1.3rem;
    height: 1.3rem;
    color: var(--primary-color);
  }
.admin__analytics .metrics__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-medium);
  }
.admin__analytics .metrics__grid--3col {
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
.admin__analytics .metric__card {
    background: white;
    padding: var(--spacing-medium);
    border-radius: var(--rounded-medium);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }
.admin__analytics .metric__icon {
    width: 2rem;
    height: 2rem;
  }
.admin__analytics .metric__icon--blue {
      color: var(--info-color);
    }
.admin__analytics .metric__icon--purple {
      color: #8b5cf6;
    }
.admin__analytics .metric__icon--green {
      color: var(--success-color);
    }
.admin__analytics .metric__icon--yellow {
      color: var(--warning-color);
    }
.admin__analytics .metric__icon--orange {
      color: var(--confirmed-color);
    }
.admin__analytics .metric__icon--red {
      color: var(--danger-color);
    }
.admin__analytics .metric__icon--gray {
      color: var(--gray-color-darkest);
    }
.admin__analytics .metric__value {
    font: var(--h1);
    font-weight: bold;
    color: var(--primary-color);
  }
.admin__analytics .metric__label {
    font: var(--small);
    color: var(--primary-color-lighter);
  }
.admin__analytics .chart__card {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;

    background: white;
    padding: var(--spacing-medium);
    border-radius: var(--rounded-medium);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  }
.admin__analytics .chart__card--full {
      grid-column: 1 / -1;
    }
.admin__analytics .chart__title {
    font: var(--small);
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
    color: var(--gray-color-darkest);
    letter-spacing: 0.05em;
  }
.admin__analytics .chart__container {
    flex: 1 1 auto;
    width: 100%;
    min-height: 300px;
    max-height: 100%;
  }
.admin__analytics .chart__container--large {
      height: 400px;
    }
.admin__analytics .list__card {
    background: white;
    padding: var(--spacing-medium);
    border-radius: var(--rounded-medium);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  }
.admin__analytics .list__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: var(--spacing-small);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
.admin__analytics .list__icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--primary-color);
  }
.admin__analytics .customer__list,
  .admin__analytics .reservation__list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 400px;
    overflow-y: auto;
  }
.admin__analytics .customer__item,
  .admin__analytics .reservation__item {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-small);
  }
.admin__analytics .customer__item:last-child, .admin__analytics .reservation__item:last-child {
      border-bottom: none;
    }
.admin__analytics .customer__info,
  .admin__analytics .reservation__info {
    flex: 1 1;
  }
.admin__analytics .customer__name,
  .admin__analytics .reservation__name {
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 0.25rem;
  }
.admin__analytics .customer__details,
  .admin__analytics .reservation__details {
    font-size: 0.875rem;
    color: var(--primary-color-lighter);
    margin-bottom: 0.25rem;
  }
.admin__analytics .customer__date {
    font-size: 0.75rem;
    color: var(--primary-color-lightest);
  }
.admin__analytics .reservation__status {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
  }
.admin__analytics .reservation__status--confirmed {
      background: var(--confirmed-color);
      color: var(--secondary-color);
    }
.admin__analytics .reservation__status--pending {
      background: var(--warning-color);
      color: var(--primary-color);
    }
.admin__analytics .reservation__status--cancelled {
      background: var(--danger-color);
      color: var(--secondary-color);
    }
.admin__analytics .reservation__status--completed {
      background: var(--success-color);
      color: var(--primary-color);
    }
.admin__analytics .reservation__status--no_show {
      background: var(--gray-color);
      color: var(--gray-color-darkest);
    }
.admin__analytics .reservation__link {
    color: var(--primary-color);
    text-decoration: underline;
    font-size: 0.875rem;
    white-space: nowrap;
  }
.admin__analytics .reservation__link:hover {
      color: var(--accent-color);
    }
.admin__analytics .menu__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-medium);
  }
.admin__analytics .menu__item {
    padding: var(--spacing-medium);
    border: 1px solid var(--border-color);
    border-radius: var(--rounded-medium);
    background: white;
    display: flex;
    align-items: center;
    gap: var(--spacing-small);
  }
.admin__analytics .menu__rank {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary-color);
    min-width: 3rem;
    text-align: center;
  }
.admin__analytics .menu__details {
    flex: 1 1;
  }
.admin__analytics .menu__name {
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 0.25rem;
  }
.admin__analytics .menu__category {
    font-size: 0.875rem;
    color: var(--primary-color-lighter);
    margin-bottom: 0.5rem;
  }
.admin__analytics .menu__clicks {
    font-size: 0.875rem;
    color: var(--success-color);
    display: flex;
    align-items: center;
    gap: 0.25rem;
  }
.admin__analytics .menu__icon {
    width: 1rem;
    height: 1rem;
  }
.admin__analytics .actions__row {
    display: flex;
    gap: var(--spacing-medium);
    flex-wrap: wrap;
  }
.admin__analytics .button__icon {
    width: 1.25rem;
    height: 1.25rem;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0.5rem;
  }
.admin__analytics .empty__state {
    color: var(--primary-color-lighter);
    text-align: center;
    padding: var(--spacing-large);
    font-style: italic;
  }
/* Hero KPI Section */
.admin__analytics .analytics__hero {
    color: white;
  }
.admin__analytics .hero__title {
    font: var(--p);
    color: var(--primary-color);
    margin: 0;
    padding: 0;
  }
.admin__analytics .hero__metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-medium);
  }
.admin__analytics .hero__card {
    background: white;
    padding: var(--spacing-medium);
    border-radius: var(--rounded-medium);
    /* border: 1px solid var(--border-color); */
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 0.5rem;
    box-shadow: var(--shadow-light);
    transition: transform 0.2s;
  }
.admin__analytics .hero__card:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }
.admin__analytics .hero__card.hero__card--clickable {
      cursor: pointer;
      text-decoration: none !important;
      color: inherit;
    }
.admin__analytics .hero__card.hero__card--clickable:hover {
        transform: translateY(-4px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
      }
.admin__analytics .hero__card.hero__card--clickable:active {
        transform: translateY(-2px);
      }
.admin__analytics .hero__card.hero__card--clickable .hero__sublabel {
        color: var(--primary-color);
        font-weight: 500;
      }
.admin__analytics .hero__icon {
    width: 2.5rem;
    height: 2.5rem;
    padding: var(--spacing-xs);
    background: var(--dashboard-bg-muted);
    border-radius: var(--rounded-medium);
  }
.admin__analytics .hero__icon--warning {
      background: var(--warning-color);
    }
.admin__analytics .hero__icon--success {
      background: var(--success-color);
    }
.admin__analytics .hero__icon--danger {
      background: var(--danger-color);
    }
.admin__analytics .hero__icon--accent {
      background: var(--confirmed-color);
    }
.admin__analytics .hero__value {
    font: var(--h1);
    color: var(--primary-color);
  }
.admin__analytics .hero__label {
    font: var(--small);
    font-weight: 600;
    color: var(--gray-color-darkest);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
.admin__analytics .hero__sublabel {
    font: var(--small);
    color: var(--gray-color-darkest);
  }
/* Performance Overview Section */
.admin__analytics .performance__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-medium);
  }
@media screen and (max-width: 1024px) {
.admin__analytics .performance__grid {
      grid-template-columns: 1fr
  }
    }
.admin__analytics .metrics__summary {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-medium);
  }
.admin__analytics .summary__card {
    background: white;
    padding: var(--spacing-medium);
    border-radius: var(--rounded-medium);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  }
.admin__analytics .summary__header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary-color-lighter);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
.admin__analytics .summary__icon {
    width: 1.5rem;
    height: 1.5rem;
  }
.admin__analytics .summary__icon--blue {
      color: var(--info-color);
    }
.admin__analytics .summary__icon--green {
      color: var(--success-color);
    }
.admin__analytics .summary__icon--purple {
      color: #8b5cf6;
    }
.admin__analytics .summary__value {
    font: var(--h1);
    color: var(--primary-color);
  }
.admin__analytics .summary__label {
    font-size: 0.875rem;
    color: var(--primary-color-lighter);
  }
/* Upcoming Reservations Table */
.admin__analytics .table__card {
    background: white;
    padding: var(--spacing-medium);
    border-radius: var(--rounded-medium);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  }
.admin__analytics .table__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: var(--spacing-medium);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
.admin__analytics .table__icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--primary-color);
  }
.admin__analytics .table__count {
    color: var(--primary-color-lighter);
    font-weight: normal;
  }
.admin__analytics .reservations__table {
    overflow-x: auto;
  }
.admin__analytics .reservations__table table {
      width: 100%;
      border-collapse: collapse;
    }
.admin__analytics .reservations__table th {
      text-align: left;
      padding: 0.75rem;
      background: var(--dashboard-bg);
      font-weight: 600;
      font-size: 0.875rem;
      color: var(--primary-color);
      border-bottom: 2px solid var(--border-color);
    }
.admin__analytics .reservations__table td {
      padding: 1rem 0.75rem;
      border-bottom: 1px solid var(--border-color);
      font-size: 0.875rem;
    }
.admin__analytics .reservations__table tbody tr:hover {
      background: var(--dashboard-highlight);
    }
.admin__analytics .table__customer .customer__name {
      font-weight: 600;
      color: var(--primary-color);
      margin-bottom: 0.25rem;
    }
.admin__analytics .table__customer .customer__contact {
      font-size: 0.75rem;
      color: var(--primary-color-lighter);
    }
.admin__analytics .table__datetime .datetime__date {
      font-weight: 600;
      color: var(--primary-color);
      margin-bottom: 0.25rem;
    }
.admin__analytics .table__datetime .datetime__time {
      font-size: 0.75rem;
      color: var(--primary-color-lighter);
    }
.admin__analytics .party__size {
    font-weight: 600;
    color: var(--primary-color);
  }
.admin__analytics .status__badge {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    text-transform: uppercase;
  }
.admin__analytics .status__badge--confirmed {
      background: var(--confirmed-color);
      color: var(--secondary-color);
    }
.admin__analytics .status__badge--pending {
      background: var(--warning-color);
      color: var(--primary-color);
    }
.admin__analytics .status__badge--cancelled {
      background: var(--danger-color);
      color: var(--secondary-color);
    }
.admin__analytics .status__badge--completed {
      background: var(--success-color);
      color: var(--primary-color);
    }
.admin__analytics .status__badge--no_show {
      background: var(--gray-color);
      color: var(--gray-color-darkest);
    }
.admin__analytics .table__actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }
.admin__analytics .action__button {
    padding: 0.375rem 0.75rem;
    border-radius: var(--rounded-medium);
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s;
  }
.admin__analytics .action__button--view {
      background: var(--primary-color);
      color: white;
    }
.admin__analytics .action__button--approve {
      background: var(--success-color);
      color: white;
    }
.admin__analytics .action__button--cancel {
      background: var(--danger-color);
      color: white;
    }
.admin__analytics .action__button:hover {
      opacity: 0.8;
      transform: translateY(-1px);
    }
/* Charts Row */
.admin__analytics .charts__row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--spacing-medium);
  }
@media screen and (max-width: 768px) {
.admin__analytics .charts__row {
      grid-template-columns: 1fr
  }
    }
/* Responsive adjustments for mobile */
@media screen and (max-width: 768px) {
    .admin__analytics .metrics__grid {
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .admin__analytics .analytics__row {
      grid-template-columns: 1fr;
    }

    .admin__analytics .chart__container {
      height: 250px;
    }
  }
@media screen and (max-width: 640px) {
    .admin__analytics .hero__metrics {
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .admin__analytics .hero__value {
      font-size: 2rem;
    }

    .admin__analytics .hero__title {
      font-size: 1.5rem;
    }

    .admin__analytics .reservations__table {
      font-size: 0.75rem;
    }

    .admin__analytics .table__actions {
      flex-direction: column;
    }

    .admin__analytics .action__button {
      width: 100%;
      text-align: center;
    }
  }
/* Share notification animations */
@keyframes slideIn {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(400px);
    opacity: 0;
  }
}
/* Share button inline feedback */
.dashboard__menu .item.copied-success {
  background-color: rgba(76, 175, 80, 0.1);
  transition: background-color 0.3s ease;
}
.dashboard__menu .item.copied-success a {
  color: #4caf50;
}
.dashboard__menu .item.copied-success svg {
  color: #4caf50;
  stroke: #4caf50;
}
.dashboard__menu .item [data-share-target="icon"] {
  display: inline-flex;
  transition: transform 0.2s ease;
}
.dashboard__menu .item.copied-success [data-share-target="icon"] {
  animation: iconPop 0.4s ease;
}
@keyframes iconPop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}
/* Tom select dropdown */
.ts-dropdown,
.ts-control,
.ts-control input {
  font: var(--p);
  transition: all 0.2s ease;
  border: 1px solid var(--border-color);
  border-radius: var(--rounded-small);
  background-color: var(--input-bg-color);
  padding: var(--spacing-small) var(--spacing-small);
}
/* ===== Pre-order Modal ===== */
/* Widget wrapper — contains trigger, summary bar, hidden inputs, and modal */
.preorder-widget {
  margin: var(--spacing-medium) 0;
}
/* ── Trigger button ───────────────────────────────────────────────── */
.preorder-trigger-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  width: 100%;
  padding: var(--spacing-medium) var(--spacing-medium);
  background: #fff;
  border: 1.5px dashed var(--border-color, #d1d5db);
  border-radius: var(--border-radius, 8px);
  color: var(--muted-color, #6b7280);
  font-size: var(--p);
  font-family: inherit;
  cursor: pointer;
  transition:
    border-color 0.15s,
    color 0.15s,
    background 0.15s;
}
.preorder-trigger-btn:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
  background: color-mix(in srgb, var(--accent-color) 5%, transparent);
}
.preorder-trigger-btn svg {
  flex-shrink: 0;
  opacity: 0.65;
}
/* ── Summary bar (shown after confirming items) ───────────────────── */
.preorder-summary-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-medium) var(--spacing-medium);
  background: color-mix(in srgb, var(--accent-color) 8%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--accent-color) 35%, transparent);
  border-radius: var(--border-radius, 8px);
  gap: var(--spacing-small);
}
.preorder-summary-text {
  font-size: var(--p);
  font-weight: 500;
  color: var(--text-color);
}
.preorder-edit-btn {
  flex-shrink: 0;
  padding: 4px 14px;
  background: var(--accent-color);
  color: #fff;
  border: none;
  border-radius: 20px;
  font-size: 0.8rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s;
}
.preorder-edit-btn:hover {
  opacity: 0.85;
}
/* ── Modal overlay ────────────────────────────────────────────────── */
.preorder-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-medium);
}
.preorder-overlay.hidden {
  display: none;
}
/* ── Modal container ──────────────────────────────────────────────── */
.preorder-modal {
  background: var(--background-color);
  border-radius: 16px;
  width: 100%;
  max-width: 540px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
/* ── Modal header ─────────────────────────────────────────────────── */
.preorder-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-medium) var(--spacing-medium) var(--spacing-small);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}
.preorder-modal-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--primary-color);
  margin: 0;
}
.preorder-close-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(0, 0, 0, 0.06);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: var(--primary-color);
  transition: background 0.15s;
}
.preorder-close-btn:hover {
  background: rgba(0, 0, 0, 0.1);
}
/* ── Search ───────────────────────────────────────────────────────── */
.preorder-search-wrap {
  position: relative;
  padding: var(--spacing-small) var(--spacing-medium);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}
.preorder-search-icon {
  position: absolute;
  left: calc(var(--spacing-medium) + 10px);
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.preorder-search-input {
  width: 100%;
  padding: 8px 12px 8px 36px;
  border: 0.09rem solid rgba(0, 0, 0, 0.1);
  border-radius: var(--rounded-small);
  font-family: inherit;
  color: var(--primary-color);
  outline: none;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.preorder-search-input::-moz-placeholder {
  color: rgba(0, 0, 0, 0.35);
}
.preorder-search-input::placeholder {
  color: rgba(0, 0, 0, 0.35);
}
.preorder-search-input:focus {
  border-color: var(--accent-color);
  /* background: rgba(0, 0, 0, 0.06); */
}
/* ── Items scrollable body ────────────────────────────────────────── */
.preorder-items-body {
  flex: 1 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}
/* Category header */
.preorder-category-header {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px var(--spacing-medium);
  background: var(--background-color);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-color);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
/* Item row */
.preorder-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--spacing-medium);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  gap: var(--spacing-small);
  transition: background 0.12s;
}
.preorder-item .menu-item-picture.thumb {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    -o-object-fit: cover;
       object-fit: cover;
    flex-shrink: 0;
  }
.preorder-item:last-child {
  border-bottom: none;
}
.preorder-item:hover {
  background: rgba(0, 0, 0, 0.03);
}
.preorder-item-info {
  flex: 1 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.preorder-item-name {
  font-size: 0.95rem;
  font-weight: bold;
  color: var(--primary-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.preorder-item-price {
  font-size: 0.85rem;
  /* color: rgba(0, 0, 0, 0.45); */
  opacity: 0.7;
}
/* Item actions area */
.preorder-item-actions {
  flex-shrink: 0;
}
/* Add button */
.preorder-add-btn {
  padding: 6px 18px;
  border: none;
  background: none;
  border-radius: 20px;
  color: var(--accent-color);
  font-family: inherit;
  font-weight: bold;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
  white-space: nowrap;
}
/* In-place stepper (replaces Add button) */
.preorder-stepper {
  font: var(--p);
  display: flex;
  align-items: center;
  gap: 0;
  border: 0.1rem solid var(--accent-color);
  background: var(--primary-color);
  border-radius: 20px;
  overflow: hidden;
}
.qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: var(--accent-color);
  font: var(--p);
  font-weight: bold;
  cursor: pointer;
  transition: background 0.12s;
  font-family: inherit;
}
.qty-btn svg {
    width: 16px;
    height: 16px;
    stroke-width: 0.2rem;
  }
.qty-btn:hover {
  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
}
.qty-display {
  min-width: 28px;
  text-align: center;
  font-weight: bold;
  color: var(--accent-color);
  padding: 0 2px;
}
/* No results */
.preorder-no-results {
  padding: var(--spacing-medium);
  text-align: center;
  color: rgba(0, 0, 0, 0.4);
  font-size: 0.9rem;
}
/* ── Sticky footer bar ────────────────────────────────────────────── */
.preorder-modal-footer {
  padding: var(--spacing-small) var(--spacing-medium);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
  background: var(--background-color);
}
.preorder-footer-empty {
  text-align: center;
  color: rgba(0, 0, 0, 0.4);
  font-size: 0.875rem;
  padding: var(--spacing-xs) 0;
}
.preorder-confirm-btn {
  display: block;
  width: 100%;
  padding: 13px var(--spacing-medium);
  background: var(--accent-color);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  transition:
    opacity 0.15s,
    transform 0.1s;
}
.preorder-confirm-btn:hover {
  opacity: 0.9;
}
.preorder-confirm-btn:active {
  transform: scale(0.99);
}
/* ── Mobile: bottom sheet ─────────────────────────────────────────── */
@media (max-width: 600px) {
  .preorder-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .preorder-modal {
    border-radius: 20px 20px 0 0;
    max-height: 88dvh;
    max-width: 100%;
  }
}
/* ===== End Pre-order Modal ===== */
.reservation-menu-edit-page {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-medium);
}
.reservation-menu-edit-page .actions {
    padding: var(--spacing-small);
  }
.reservation-menu-edit-page .help-section h3 {
      font: var(--h3);
      font-weight: bold;
      color: var(--primary-color);
      margin-bottom: var(--spacing-small);
      padding: 0;
    }
/* Data Tables */
:root {
  --dt-row-selected: 13, 110, 253;
  --dt-row-selected-text: 255, 255, 255;
  --dt-row-selected-link: 228, 228, 228;
  --dt-row-stripe: 0, 0, 0;
  --dt-row-hover: 0, 0, 0;
  --dt-column-ordering: 0, 0, 0;
  --dt-header-align-items: center;
  --dt-header-vertical-align: middle;
  --dt-html-background: white;
}
:root.dark {
  --dt-html-background: rgb(33, 37, 41);
}
table.dataTable tbody td.dt-control {
  text-align: center;
  cursor: pointer;
}
table.dataTable tbody td.dt-control:before {
  display: inline-block;
  box-sizing: border-box;
  content: "";
  border-top: 5px solid transparent;
  border-left: 10px solid rgba(0, 0, 0, 0.5);
  border-bottom: 5px solid transparent;
  border-right: 0px solid transparent;
}
table.dataTable tbody tr.dt-hasChild td.dt-control:before {
  border-top: 10px solid rgba(0, 0, 0, 0.5);
  border-left: 5px solid transparent;
  border-bottom: 0px solid transparent;
  border-right: 5px solid transparent;
}
table.dataTable tfoot:empty {
  display: none;
}
html.dark table.dataTable td.dt-control:before,
:root[data-bs-theme=dark] table.dataTable td.dt-control:before,
:root[data-theme=dark] table.dataTable td.dt-control:before {
  border-left-color: rgba(255, 255, 255, 0.5);
}
html.dark table.dataTable tr.dt-hasChild td.dt-control:before,
:root[data-bs-theme=dark] table.dataTable tr.dt-hasChild td.dt-control:before,
:root[data-theme=dark] table.dataTable tr.dt-hasChild td.dt-control:before {
  border-top-color: rgba(255, 255, 255, 0.5);
  border-left-color: transparent;
}
div.dt-scroll {
  width: 100%;
}
div.dt-scroll-body thead tr,
div.dt-scroll-body tfoot tr {
  height: 0;
}
div.dt-scroll-body thead tr th, div.dt-scroll-body thead tr td,
div.dt-scroll-body tfoot tr th,
div.dt-scroll-body tfoot tr td {
  height: 0 !important;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  border-top-width: 0px !important;
  border-bottom-width: 0px !important;
}
div.dt-scroll-body thead tr th div.dt-scroll-sizing, div.dt-scroll-body thead tr td div.dt-scroll-sizing,
div.dt-scroll-body tfoot tr th div.dt-scroll-sizing,
div.dt-scroll-body tfoot tr td div.dt-scroll-sizing {
  height: 0 !important;
  overflow: hidden !important;
}
table.dataTable thead > tr > th:active,
table.dataTable thead > tr > td:active {
  outline: none;
}
table.dataTable thead > tr > th.dt-orderable-asc .dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-asc .dt-column-order:before,
table.dataTable thead > tr > td.dt-orderable-asc .dt-column-order:before,
table.dataTable thead > tr > td.dt-ordering-asc .dt-column-order:before {
  position: absolute;
  display: block;
  bottom: 50%;
  content: "\25B2";
  content: "\25B2"/"";
}
table.dataTable thead > tr > th.dt-orderable-desc .dt-column-order:after, table.dataTable thead > tr > th.dt-ordering-desc .dt-column-order:after,
table.dataTable thead > tr > td.dt-orderable-desc .dt-column-order:after,
table.dataTable thead > tr > td.dt-ordering-desc .dt-column-order:after {
  position: absolute;
  display: block;
  top: 50%;
  content: "\25BC";
  content: "\25BC"/"";
}
table.dataTable thead > tr > th.dt-orderable-asc .dt-column-order, table.dataTable thead > tr > th.dt-orderable-desc .dt-column-order, table.dataTable thead > tr > th.dt-ordering-asc .dt-column-order, table.dataTable thead > tr > th.dt-ordering-desc .dt-column-order,
table.dataTable thead > tr > td.dt-orderable-asc .dt-column-order,
table.dataTable thead > tr > td.dt-orderable-desc .dt-column-order,
table.dataTable thead > tr > td.dt-ordering-asc .dt-column-order,
table.dataTable thead > tr > td.dt-ordering-desc .dt-column-order {
  position: relative;
  width: 12px;
  height: 20px;
}
table.dataTable thead > tr > th.dt-orderable-asc .dt-column-order:before, table.dataTable thead > tr > th.dt-orderable-asc .dt-column-order:after, table.dataTable thead > tr > th.dt-orderable-desc .dt-column-order:before, table.dataTable thead > tr > th.dt-orderable-desc .dt-column-order:after, table.dataTable thead > tr > th.dt-ordering-asc .dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-asc .dt-column-order:after, table.dataTable thead > tr > th.dt-ordering-desc .dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-desc .dt-column-order:after,
table.dataTable thead > tr > td.dt-orderable-asc .dt-column-order:before,
table.dataTable thead > tr > td.dt-orderable-asc .dt-column-order:after,
table.dataTable thead > tr > td.dt-orderable-desc .dt-column-order:before,
table.dataTable thead > tr > td.dt-orderable-desc .dt-column-order:after,
table.dataTable thead > tr > td.dt-ordering-asc .dt-column-order:before,
table.dataTable thead > tr > td.dt-ordering-asc .dt-column-order:after,
table.dataTable thead > tr > td.dt-ordering-desc .dt-column-order:before,
table.dataTable thead > tr > td.dt-ordering-desc .dt-column-order:after {
  left: 0;
  opacity: 0.125;
  line-height: 9px;
  font-size: 0.8em;
}
table.dataTable thead > tr > th.dt-orderable-asc, table.dataTable thead > tr > th.dt-orderable-desc,
table.dataTable thead > tr > td.dt-orderable-asc,
table.dataTable thead > tr > td.dt-orderable-desc {
  cursor: pointer;
}
table.dataTable thead > tr > th.dt-orderable-asc:hover, table.dataTable thead > tr > th.dt-orderable-desc:hover,
table.dataTable thead > tr > td.dt-orderable-asc:hover,
table.dataTable thead > tr > td.dt-orderable-desc:hover {
  outline: 2px solid rgba(0, 0, 0, 0.05);
  outline-offset: -2px;
}
table.dataTable thead > tr > th.dt-ordering-asc .dt-column-order:before, table.dataTable thead > tr > th.dt-ordering-desc .dt-column-order:after,
table.dataTable thead > tr > td.dt-ordering-asc .dt-column-order:before,
table.dataTable thead > tr > td.dt-ordering-desc .dt-column-order:after {
  opacity: 0.6;
}
table.dataTable thead > tr > th.dt-orderable-none:not(.dt-ordering-asc, .dt-ordering-desc) .dt-column-order:empty, table.dataTable thead > tr > th.sorting_desc_disabled .dt-column-order:after, table.dataTable thead > tr > th.sorting_asc_disabled .dt-column-order:before,
table.dataTable thead > tr > td.dt-orderable-none:not(.dt-ordering-asc, .dt-ordering-desc) .dt-column-order:empty,
table.dataTable thead > tr > td.sorting_desc_disabled .dt-column-order:after,
table.dataTable thead > tr > td.sorting_asc_disabled .dt-column-order:before {
  display: none;
}
table.dataTable thead > tr > th:active,
table.dataTable thead > tr > td:active {
  outline: none;
}
table.dataTable thead > tr > th div.dt-column-header,
table.dataTable thead > tr > th div.dt-column-footer,
table.dataTable thead > tr > td div.dt-column-header,
table.dataTable thead > tr > td div.dt-column-footer,
table.dataTable tfoot > tr > th div.dt-column-header,
table.dataTable tfoot > tr > th div.dt-column-footer,
table.dataTable tfoot > tr > td div.dt-column-header,
table.dataTable tfoot > tr > td div.dt-column-footer {
  display: flex;
  justify-content: space-between;
  align-items: var(--dt-header-align-items);
  gap: 4px;
}
table.dataTable thead > tr > th div.dt-column-header .dt-column-title,
table.dataTable thead > tr > th div.dt-column-footer .dt-column-title,
table.dataTable thead > tr > td div.dt-column-header .dt-column-title,
table.dataTable thead > tr > td div.dt-column-footer .dt-column-title,
table.dataTable tfoot > tr > th div.dt-column-header .dt-column-title,
table.dataTable tfoot > tr > th div.dt-column-footer .dt-column-title,
table.dataTable tfoot > tr > td div.dt-column-header .dt-column-title,
table.dataTable tfoot > tr > td div.dt-column-footer .dt-column-title {
  flex-grow: 1;
}
table.dataTable thead > tr > th div.dt-column-header .dt-column-title:empty,
table.dataTable thead > tr > th div.dt-column-footer .dt-column-title:empty,
table.dataTable thead > tr > td div.dt-column-header .dt-column-title:empty,
table.dataTable thead > tr > td div.dt-column-footer .dt-column-title:empty,
table.dataTable tfoot > tr > th div.dt-column-header .dt-column-title:empty,
table.dataTable tfoot > tr > th div.dt-column-footer .dt-column-title:empty,
table.dataTable tfoot > tr > td div.dt-column-header .dt-column-title:empty,
table.dataTable tfoot > tr > td div.dt-column-footer .dt-column-title:empty {
  display: none;
}
div.dt-scroll-body > table.dataTable > thead > tr > th,
div.dt-scroll-body > table.dataTable > thead > tr > td {
  overflow: hidden;
}
:root.dark table.dataTable thead > tr > th.dt-orderable-asc:hover, :root.dark table.dataTable thead > tr > th.dt-orderable-desc:hover,
:root.dark table.dataTable thead > tr > td.dt-orderable-asc:hover,
:root.dark table.dataTable thead > tr > td.dt-orderable-desc:hover,
:root[data-bs-theme=dark] table.dataTable thead > tr > th.dt-orderable-asc:hover,
:root[data-bs-theme=dark] table.dataTable thead > tr > th.dt-orderable-desc:hover,
:root[data-bs-theme=dark] table.dataTable thead > tr > td.dt-orderable-asc:hover,
:root[data-bs-theme=dark] table.dataTable thead > tr > td.dt-orderable-desc:hover {
  outline: 2px solid rgba(255, 255, 255, 0.05);
}
div.dt-processing {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  margin-left: -100px;
  margin-top: -22px;
  text-align: center;
  padding: 2px;
  z-index: 10;
}
div.dt-processing > div:last-child {
  position: relative;
  width: 80px;
  height: 15px;
  margin: 1em auto;
}
div.dt-processing > div:last-child > div {
  position: absolute;
  top: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: rgb(13, 110, 253);
  background: rgb(var(--dt-row-selected));
  animation-timing-function: cubic-bezier(0, 1, 1, 0);
}
div.dt-processing > div:last-child > div:nth-child(1) {
  left: 8px;
  animation: datatables-loader-1 0.6s infinite;
}
div.dt-processing > div:last-child > div:nth-child(2) {
  left: 8px;
  animation: datatables-loader-2 0.6s infinite;
}
div.dt-processing > div:last-child > div:nth-child(3) {
  left: 32px;
  animation: datatables-loader-2 0.6s infinite;
}
div.dt-processing > div:last-child > div:nth-child(4) {
  left: 56px;
  animation: datatables-loader-3 0.6s infinite;
}
@keyframes datatables-loader-1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes datatables-loader-3 {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@keyframes datatables-loader-2 {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(24px, 0);
  }
}
table.dataTable.nowrap th, table.dataTable.nowrap td {
  white-space: nowrap;
}
table.dataTable th,
table.dataTable td {
  box-sizing: border-box;
}
table.dataTable th.dt-type-numeric, table.dataTable th.dt-type-date,
table.dataTable td.dt-type-numeric,
table.dataTable td.dt-type-date {
  text-align: right;
}
table.dataTable th.dt-type-numeric div.dt-column-header,
table.dataTable th.dt-type-numeric div.dt-column-footer, table.dataTable th.dt-type-date div.dt-column-header,
table.dataTable th.dt-type-date div.dt-column-footer,
table.dataTable td.dt-type-numeric div.dt-column-header,
table.dataTable td.dt-type-numeric div.dt-column-footer,
table.dataTable td.dt-type-date div.dt-column-header,
table.dataTable td.dt-type-date div.dt-column-footer {
  flex-direction: row-reverse;
}
table.dataTable th.dt-left,
table.dataTable td.dt-left {
  text-align: left;
}
table.dataTable th.dt-left div.dt-column-header,
table.dataTable th.dt-left div.dt-column-footer,
table.dataTable td.dt-left div.dt-column-header,
table.dataTable td.dt-left div.dt-column-footer {
  flex-direction: row;
}
table.dataTable th.dt-center,
table.dataTable td.dt-center {
  text-align: center;
}
table.dataTable th.dt-right,
table.dataTable td.dt-right {
  text-align: right;
}
table.dataTable th.dt-right div.dt-column-header,
table.dataTable th.dt-right div.dt-column-footer,
table.dataTable td.dt-right div.dt-column-header,
table.dataTable td.dt-right div.dt-column-footer {
  flex-direction: row-reverse;
}
table.dataTable th.dt-justify,
table.dataTable td.dt-justify {
  text-align: justify;
}
table.dataTable th.dt-justify div.dt-column-header,
table.dataTable th.dt-justify div.dt-column-footer,
table.dataTable td.dt-justify div.dt-column-header,
table.dataTable td.dt-justify div.dt-column-footer {
  flex-direction: row;
}
table.dataTable th.dt-nowrap,
table.dataTable td.dt-nowrap {
  white-space: nowrap;
}
table.dataTable th.dt-empty,
table.dataTable td.dt-empty {
  text-align: center;
  vertical-align: top;
}
table.dataTable thead th,
table.dataTable thead td,
table.dataTable tfoot th,
table.dataTable tfoot td {
  text-align: left;
  vertical-align: var(--dt-header-vertical-align);
}
table.dataTable thead th.dt-head-left,
table.dataTable thead td.dt-head-left,
table.dataTable tfoot th.dt-head-left,
table.dataTable tfoot td.dt-head-left {
  text-align: left;
}
table.dataTable thead th.dt-head-left div.dt-column-header,
table.dataTable thead th.dt-head-left div.dt-column-footer,
table.dataTable thead td.dt-head-left div.dt-column-header,
table.dataTable thead td.dt-head-left div.dt-column-footer,
table.dataTable tfoot th.dt-head-left div.dt-column-header,
table.dataTable tfoot th.dt-head-left div.dt-column-footer,
table.dataTable tfoot td.dt-head-left div.dt-column-header,
table.dataTable tfoot td.dt-head-left div.dt-column-footer {
  flex-direction: row;
}
table.dataTable thead th.dt-head-center,
table.dataTable thead td.dt-head-center,
table.dataTable tfoot th.dt-head-center,
table.dataTable tfoot td.dt-head-center {
  text-align: center;
}
table.dataTable thead th.dt-head-right,
table.dataTable thead td.dt-head-right,
table.dataTable tfoot th.dt-head-right,
table.dataTable tfoot td.dt-head-right {
  text-align: right;
}
table.dataTable thead th.dt-head-right div.dt-column-header,
table.dataTable thead th.dt-head-right div.dt-column-footer,
table.dataTable thead td.dt-head-right div.dt-column-header,
table.dataTable thead td.dt-head-right div.dt-column-footer,
table.dataTable tfoot th.dt-head-right div.dt-column-header,
table.dataTable tfoot th.dt-head-right div.dt-column-footer,
table.dataTable tfoot td.dt-head-right div.dt-column-header,
table.dataTable tfoot td.dt-head-right div.dt-column-footer {
  flex-direction: row-reverse;
}
table.dataTable thead th.dt-head-justify,
table.dataTable thead td.dt-head-justify,
table.dataTable tfoot th.dt-head-justify,
table.dataTable tfoot td.dt-head-justify {
  text-align: justify;
}
table.dataTable thead th.dt-head-justify div.dt-column-header,
table.dataTable thead th.dt-head-justify div.dt-column-footer,
table.dataTable thead td.dt-head-justify div.dt-column-header,
table.dataTable thead td.dt-head-justify div.dt-column-footer,
table.dataTable tfoot th.dt-head-justify div.dt-column-header,
table.dataTable tfoot th.dt-head-justify div.dt-column-footer,
table.dataTable tfoot td.dt-head-justify div.dt-column-header,
table.dataTable tfoot td.dt-head-justify div.dt-column-footer {
  flex-direction: row;
}
table.dataTable thead th.dt-head-nowrap,
table.dataTable thead td.dt-head-nowrap,
table.dataTable tfoot th.dt-head-nowrap,
table.dataTable tfoot td.dt-head-nowrap {
  white-space: nowrap;
}
table.dataTable tbody th.dt-body-left,
table.dataTable tbody td.dt-body-left {
  text-align: left;
}
table.dataTable tbody th.dt-body-center,
table.dataTable tbody td.dt-body-center {
  text-align: center;
}
table.dataTable tbody th.dt-body-right,
table.dataTable tbody td.dt-body-right {
  text-align: right;
}
table.dataTable tbody th.dt-body-justify,
table.dataTable tbody td.dt-body-justify {
  text-align: justify;
}
table.dataTable tbody th.dt-body-nowrap,
table.dataTable tbody td.dt-body-nowrap {
  white-space: nowrap;
}
:root {
  --dt-row-hover-alpha: 0.035;
  --dt-row-stripe-alpha: 0.023;
  --dt-column-ordering-alpha: 0.019;
  --dt-row-selected-stripe-alpha: 0.923;
  --dt-row-selected-column-ordering-alpha: 0.919;
}
/*
 * Table styles
 */
table.dataTable {
  width: 100%;
  margin: 0 auto;
  border-spacing: 0;
  /*
   * Header and footer styles
   */
  /*
   * Body styles
   */
}
table.dataTable thead th,
table.dataTable tfoot th {
  font-weight: bold;
}
table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td {
  padding: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
table.dataTable > thead > tr > th:active,
table.dataTable > thead > tr > td:active {
  outline: none;
}
table.dataTable > tfoot > tr > th,
table.dataTable > tfoot > tr > td {
  border-top: 1px solid rgba(0, 0, 0, 0.3);
  padding: 10px 10px 6px 10px;
}
table.dataTable > tbody > tr {
  background-color: transparent;
}
table.dataTable > tbody > tr:first-child > * {
  border-top: none;
}
table.dataTable > tbody > tr:last-child > * {
  border-bottom: none;
}
table.dataTable > tbody > tr.selected > * {
  box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, 0.9);
  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 0.9);
  color: rgb(255, 255, 255);
  color: rgb(var(--dt-row-selected-text));
}
table.dataTable > tbody > tr.selected a {
  color: rgb(228, 228, 228);
  color: rgb(var(--dt-row-selected-link));
}
table.dataTable > tbody > tr > th,
table.dataTable > tbody > tr > td {
  padding: 8px 10px;
}
table.dataTable.row-border > tbody > tr > *, table.dataTable.display > tbody > tr > * {
  border-top: 1px solid rgba(0, 0, 0, 0.15);
}
table.dataTable.row-border > tbody > tr:first-child > *, table.dataTable.display > tbody > tr:first-child > * {
  border-top: none;
}
table.dataTable.row-border > tbody > tr.selected + tr.selected > td, table.dataTable.display > tbody > tr.selected + tr.selected > td {
  border-top-color: rgba(13, 110, 253, 0.65);
  border-top-color: rgba(var(--dt-row-selected), 0.65);
}
table.dataTable.cell-border > tbody > tr > * {
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  border-right: 1px solid rgba(0, 0, 0, 0.15);
}
table.dataTable.cell-border > tbody > tr > *:first-child {
  border-left: 1px solid rgba(0, 0, 0, 0.15);
}
table.dataTable.cell-border > tbody > tr:first-child > * {
  border-top: 1px solid rgba(0, 0, 0, 0.3);
}
table.dataTable.stripe > tbody > tr:nth-child(odd) > *, table.dataTable.display > tbody > tr:nth-child(odd) > * {
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.023);
  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-stripe), var(--dt-row-stripe-alpha));
}
table.dataTable.stripe > tbody > tr:nth-child(odd).selected > *, table.dataTable.display > tbody > tr:nth-child(odd).selected > * {
  box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, 0.923);
  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), var(--dt-row-selected-stripe-alpha));
}
table.dataTable.hover > tbody > tr:hover > *, table.dataTable.display > tbody > tr:hover > * {
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.035);
  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-hover), var(--dt-row-hover-alpha));
}
table.dataTable.hover > tbody > tr.selected:hover > *, table.dataTable.display > tbody > tr.selected:hover > * {
  box-shadow: inset 0 0 0 9999px #0d6efd !important;
  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 1) !important;
}
table.dataTable.order-column > tbody tr > .sorting_1,
table.dataTable.order-column > tbody tr > .sorting_2,
table.dataTable.order-column > tbody tr > .sorting_3, table.dataTable.display > tbody tr > .sorting_1,
table.dataTable.display > tbody tr > .sorting_2,
table.dataTable.display > tbody tr > .sorting_3 {
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.019);
  box-shadow: inset 0 0 0 9999px rgba(var(--dt-column-ordering), var(--dt-column-ordering-alpha));
}
table.dataTable.order-column > tbody tr.selected > .sorting_1,
table.dataTable.order-column > tbody tr.selected > .sorting_2,
table.dataTable.order-column > tbody tr.selected > .sorting_3, table.dataTable.display > tbody tr.selected > .sorting_1,
table.dataTable.display > tbody tr.selected > .sorting_2,
table.dataTable.display > tbody tr.selected > .sorting_3 {
  box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, 0.919);
  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), var(--dt-row-selected-column-ordering-alpha));
}
table.dataTable.display > tbody > tr:nth-child(odd) > .sorting_1, table.dataTable.order-column.stripe > tbody > tr:nth-child(odd) > .sorting_1 {
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.054);
  box-shadow: inset 0 0 0 9999px rgba(var(--dt-column-ordering), calc(var(--dt-row-stripe-alpha) + var(--dt-column-ordering-alpha)));
}
table.dataTable.display > tbody > tr:nth-child(odd) > .sorting_2, table.dataTable.order-column.stripe > tbody > tr:nth-child(odd) > .sorting_2 {
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.047);
  box-shadow: inset 0 0 0 9999px rgba(var(--dt-column-ordering), calc(var(--dt-row-stripe-alpha) + var(--dt-column-ordering-alpha) - 0.007));
}
table.dataTable.display > tbody > tr:nth-child(odd) > .sorting_3, table.dataTable.order-column.stripe > tbody > tr:nth-child(odd) > .sorting_3 {
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.039);
  box-shadow: inset 0 0 0 9999px rgba(var(--dt-column-ordering), calc(var(--dt-row-stripe-alpha) + var(--dt-column-ordering-alpha) - 0.015));
}
table.dataTable.display > tbody > tr:nth-child(odd).selected > .sorting_1, table.dataTable.order-column.stripe > tbody > tr:nth-child(odd).selected > .sorting_1 {
  box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, 0.954);
  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), calc(var(--dt-row-selected-stripe-alpha) + var(--dt-column-ordering-alpha)));
}
table.dataTable.display > tbody > tr:nth-child(odd).selected > .sorting_2, table.dataTable.order-column.stripe > tbody > tr:nth-child(odd).selected > .sorting_2 {
  box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, 0.947);
  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), calc(var(--dt-row-selected-stripe-alpha) + var(--dt-column-ordering-alpha) - 0.007));
}
table.dataTable.display > tbody > tr:nth-child(odd).selected > .sorting_3, table.dataTable.order-column.stripe > tbody > tr:nth-child(odd).selected > .sorting_3 {
  box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, 0.939);
  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), calc(var(--dt-row-selected-stripe-alpha) + var(--dt-column-ordering-alpha) - 0.015));
}
table.dataTable.display tbody tr:hover > .sorting_1, table.dataTable.order-column.hover tbody tr:hover > .sorting_1 {
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.082);
  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-hover), calc(var(--dt-row-stripe-alpha) + var(--dt-column-ordering-alpha) + var(--dt-row-hover-alpha)));
}
table.dataTable.display tbody tr:hover > .sorting_2, table.dataTable.order-column.hover tbody tr:hover > .sorting_2 {
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.074);
  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-hover), calc(var(--dt-row-stripe-alpha) + var(--dt-column-ordering-alpha) + var(--dt-row-hover-alpha) - 0.007));
}
table.dataTable.display tbody tr:hover > .sorting_3, table.dataTable.order-column.hover tbody tr:hover > .sorting_3 {
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.062);
  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-hover), calc(var(--dt-row-stripe-alpha) + var(--dt-column-ordering-alpha) + var(--dt-row-hover-alpha) - 0.015));
}
table.dataTable.display tbody tr:hover.selected > .sorting_1, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_1 {
  box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, 0.982);
  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), calc(var(--dt-row-selected-stripe-alpha) + var(--dt-column-ordering-alpha)));
}
table.dataTable.display tbody tr:hover.selected > .sorting_2, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_2 {
  box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, 0.974);
  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), calc(var(--dt-row-selected-stripe-alpha) + var(--dt-column-ordering-alpha) + var(--dt-row-hover-alpha) - 0.007));
}
table.dataTable.display tbody tr:hover.selected > .sorting_3, table.dataTable.order-column.hover tbody tr:hover.selected > .sorting_3 {
  box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, 0.962);
  box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), calc(var(--dt-row-selected-stripe-alpha) + var(--dt-column-ordering-alpha) + var(--dt-row-hover-alpha) - 0.015));
}
table.dataTable.compact thead th,
table.dataTable.compact thead td,
table.dataTable.compact tfoot th,
table.dataTable.compact tfoot td,
table.dataTable.compact tbody th,
table.dataTable.compact tbody td {
  padding: 4px;
}
div.dt-container div.dt-layout-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin: 0.75em 0;
}
div.dt-container div.dt-layout-row div.dt-layout-cell {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-start {
  justify-content: flex-start;
  margin-right: auto;
}
div.dt-container div.dt-layout-row div.dt-layout-cell.dt-layout-end {
  justify-content: flex-end;
  margin-left: auto;
}
div.dt-container div.dt-layout-row div.dt-layout-cell:empty {
  display: none;
}
@media screen and (max-width: 767px) {
  div.dt-container div.dt-layout-row:not(.dt-layout-table) {
    display: block;
  }
  div.dt-container div.dt-layout-row:not(.dt-layout-table) div.dt-layout-cell {
    display: block;
    text-align: center;
  }
  div.dt-container div.dt-layout-row:not(.dt-layout-table) div.dt-layout-cell > * {
    margin: 0.5em 0;
  }
  div.dt-container div.dt-layout-row:not(.dt-layout-table) div.dt-layout-cell.dt-layout-start {
    margin-right: 0;
  }
  div.dt-container div.dt-layout-row:not(.dt-layout-table) div.dt-layout-cell.dt-layout-end {
    margin-left: 0;
  }
}
div.dt-container div.dt-layout-start > *:not(:last-child) {
  margin-right: 1em;
}
div.dt-container div.dt-layout-end > *:not(:first-child) {
  margin-left: 1em;
}
div.dt-container div.dt-layout-full {
  width: 100%;
}
div.dt-container div.dt-layout-full > *:only-child {
  margin-left: auto;
  margin-right: auto;
}
div.dt-container div.dt-layout-table > div {
  display: block !important;
}
@media screen and (max-width: 767px) {
  div.dt-container div.dt-layout-start > *:not(:last-child) {
    margin-right: 0;
  }
  div.dt-container div.dt-layout-end > *:not(:first-child) {
    margin-left: 0;
  }
}
/*
 * Control feature layout
 */
div.dt-container {
  position: relative;
  clear: both;
}
div.dt-container .dt-search input {
  border: 1px solid #aaa;
  border-radius: 3px;
  padding: 5px;
  background-color: transparent;
  color: inherit;
  margin-left: 3px;
}
div.dt-container .dt-input {
  border: 1px solid #aaa;
  border-radius: 3px;
  padding: 5px;
  background-color: transparent;
  color: inherit;
}
div.dt-container select.dt-input {
  padding: 4px;
}
div.dt-container .dt-paging .dt-paging-button {
  box-sizing: border-box;
  display: inline-block;
  min-width: 1.5em;
  padding: 0.5em 1em;
  margin-left: 2px;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  color: inherit !important;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
}
div.dt-container .dt-paging .dt-paging-button.current, div.dt-container .dt-paging .dt-paging-button.current:hover {
  color: inherit !important;
  border: 1px solid rgba(0, 0, 0, 0.3);
  background-color: rgba(0, 0, 0, 0.05); /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* FF3.6+ */ /* IE10+ */ /* Opera 11.10+ */
  background: linear-gradient(to bottom, rgba(229.5, 229.5, 229.5, 0.05) 0%, rgba(0, 0, 0, 0.05) 100%); /* W3C */
}
div.dt-container .dt-paging .dt-paging-button.disabled, div.dt-container .dt-paging .dt-paging-button.disabled:hover, div.dt-container .dt-paging .dt-paging-button.disabled:active {
  cursor: default;
  color: rgba(0, 0, 0, 0.5) !important;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;
}
div.dt-container .dt-paging .dt-paging-button:hover {
  color: white !important;
  border: 1px solid #111;
  background-color: #111; /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* FF3.6+ */ /* IE10+ */ /* Opera 11.10+ */
  background: linear-gradient(to bottom, rgb(88.4, 88.4, 88.4) 0%, #111 100%); /* W3C */
}
div.dt-container .dt-paging .dt-paging-button:active {
  outline: none;
  background-color: rgb(11.9, 11.9, 11.9); /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* FF3.6+ */ /* IE10+ */ /* Opera 11.10+ */
  background: linear-gradient(to bottom, rgb(42.5, 42.5, 42.5) 0%, rgb(11.9, 11.9, 11.9) 100%); /* W3C */
  box-shadow: inset 0 0 3px #111;
}
div.dt-container .dt-paging .ellipsis {
  padding: 0 1em;
}
div.dt-container .dt-length,
div.dt-container .dt-search,
div.dt-container .dt-info,
div.dt-container .dt-processing,
div.dt-container .dt-paging {
  color: inherit;
}
div.dt-container .dataTables_scroll {
  clear: both;
}
div.dt-container .dataTables_scroll div.dt-scroll-body {
  -webkit-overflow-scrolling: touch;
}
div.dt-container .dataTables_scroll div.dt-scroll-body > table > thead > tr > th, div.dt-container .dataTables_scroll div.dt-scroll-body > table > thead > tr > td, div.dt-container .dataTables_scroll div.dt-scroll-body > table > tbody > tr > th, div.dt-container .dataTables_scroll div.dt-scroll-body > table > tbody > tr > td {
  vertical-align: middle;
}
div.dt-container .dataTables_scroll div.dt-scroll-body > table > thead > tr > th > div.dataTables_sizing,
div.dt-container .dataTables_scroll div.dt-scroll-body > table > thead > tr > td > div.dataTables_sizing, div.dt-container .dataTables_scroll div.dt-scroll-body > table > tbody > tr > th > div.dataTables_sizing,
div.dt-container .dataTables_scroll div.dt-scroll-body > table > tbody > tr > td > div.dataTables_sizing {
  height: 0;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
}
div.dt-container.dt-empty-footer tbody > tr:last-child > * {
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
div.dt-container.dt-empty-footer .dt-scroll-body {
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}
div.dt-container.dt-empty-footer .dt-scroll-body tbody > tr:last-child > * {
  border-bottom: none;
}
html.dark {
  --dt-row-hover: 255, 255, 255;
  --dt-row-stripe: 255, 255, 255;
  --dt-column-ordering: 255, 255, 255;
}
html.dark table.dataTable > thead > tr > th,
html.dark table.dataTable > thead > tr > td {
  border-bottom: 1px solid rgb(89, 91, 94);
}
html.dark table.dataTable > thead > tr > th:active,
html.dark table.dataTable > thead > tr > td:active {
  outline: none;
}
html.dark table.dataTable > tfoot > tr > th,
html.dark table.dataTable > tfoot > tr > td {
  border-top: 1px solid rgb(89, 91, 94);
}
html.dark table.dataTable.row-border > tbody > tr > *, html.dark table.dataTable.display > tbody > tr > * {
  border-top: 1px solid rgb(64, 67, 70);
}
html.dark table.dataTable.row-border > tbody > tr:first-child > *, html.dark table.dataTable.display > tbody > tr:first-child > * {
  border-top: none;
}
html.dark table.dataTable.row-border > tbody > tr.selected + tr.selected > td, html.dark table.dataTable.display > tbody > tr.selected + tr.selected > td {
  border-top-color: rgba(13, 110, 253, 0.65);
  border-top-color: rgba(var(--dt-row-selected), 0.65);
}
html.dark table.dataTable.cell-border > tbody > tr > th,
html.dark table.dataTable.cell-border > tbody > tr > td {
  border-top: 1px solid rgb(64, 67, 70);
  border-right: 1px solid rgb(64, 67, 70);
}
html.dark table.dataTable.cell-border > tbody > tr > th:first-child,
html.dark table.dataTable.cell-border > tbody > tr > td:first-child {
  border-left: 1px solid rgb(64, 67, 70);
}
html.dark .dt-container.dt-empty-footer table.dataTable {
  border-bottom: 1px solid rgb(89, 91, 94);
}
html.dark .dt-container .dt-search input,
html.dark .dt-container .dt-length select {
  border: 1px solid rgba(255, 255, 255, 0.2);
  background-color: var(--dt-html-background);
}
html.dark .dt-container .dt-paging .dt-paging-button.current, html.dark .dt-container .dt-paging .dt-paging-button.current:hover {
  border: 1px solid rgb(89, 91, 94);
  background: rgba(255, 255, 255, 0.15);
}
html.dark .dt-container .dt-paging .dt-paging-button.disabled, html.dark .dt-container .dt-paging .dt-paging-button.disabled:hover, html.dark .dt-container .dt-paging .dt-paging-button.disabled:active {
  color: #666 !important;
}
html.dark .dt-container .dt-paging .dt-paging-button:hover {
  border: 1px solid rgb(53, 53, 53);
  background: rgb(53, 53, 53);
}
html.dark .dt-container .dt-paging .dt-paging-button:active {
  background: rgb(58.1, 58.1, 58.1);
}
/*
 * Overrides for RTL support
 */
*[dir=rtl] table.dataTable thead th,
*[dir=rtl] table.dataTable thead td,
*[dir=rtl] table.dataTable tfoot th,
*[dir=rtl] table.dataTable tfoot td {
  text-align: right;
}
*[dir=rtl] table.dataTable th.dt-type-numeric, *[dir=rtl] table.dataTable th.dt-type-date,
*[dir=rtl] table.dataTable td.dt-type-numeric,
*[dir=rtl] table.dataTable td.dt-type-date {
  text-align: left;
}
*[dir=rtl] div.dt-container div.dt-layout-cell.dt-start {
  text-align: right;
}
*[dir=rtl] div.dt-container div.dt-layout-cell.dt-end {
  text-align: left;
}
*[dir=rtl] div.dt-container div.dt-search input {
  margin: 0 3px 0 0;
}
/* @import url("datatables.net-buttons-dt"); */
/* @import url('datatables.net-fixedcolumns-dt'); */
/* @import url('datatables.net-fixedheader-dt'); */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.child,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.child,
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty {
  cursor: default !important;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.child:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dataTables_empty:before {
  display: none !important;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control {
  cursor: pointer;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control:before {
  margin-right: 0.5em;
  display: inline-block;
  box-sizing: border-box;
  content: "";
  border-top: 5px solid transparent;
  border-left: 10px solid rgba(0, 0, 0, 0.5);
  border-bottom: 5px solid transparent;
  border-right: 0px solid transparent;
}
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control.arrow-right::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control.arrow-right::before {
  border-top: 5px solid transparent;
  border-left: 0px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 10px solid rgba(0, 0, 0, 0.5);
}
table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dtr-control:before,
table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > th.dtr-control:before {
  border-top: 10px solid rgba(0, 0, 0, 0.5);
  border-left: 5px solid transparent;
  border-bottom: 0px solid transparent;
  border-right: 5px solid transparent;
}
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed.compact > tbody > tr > th.dtr-control {
  padding-left: 0.333em;
}
table.dataTable.dtr-column > tbody > tr > td.dtr-control,
table.dataTable.dtr-column > tbody > tr > th.dtr-control,
table.dataTable.dtr-column > tbody > tr > td.control,
table.dataTable.dtr-column > tbody > tr > th.control {
  cursor: pointer;
}
table.dataTable.dtr-column > tbody > tr > td.dtr-control:before,
table.dataTable.dtr-column > tbody > tr > th.dtr-control:before,
table.dataTable.dtr-column > tbody > tr > td.control:before,
table.dataTable.dtr-column > tbody > tr > th.control:before {
  display: inline-block;
  box-sizing: border-box;
  content: "";
  border-top: 5px solid transparent;
  border-left: 10px solid rgba(0, 0, 0, 0.5);
  border-bottom: 5px solid transparent;
  border-right: 0px solid transparent;
}
table.dataTable.dtr-column > tbody > tr > td.dtr-control.arrow-right::before,
table.dataTable.dtr-column > tbody > tr > th.dtr-control.arrow-right::before,
table.dataTable.dtr-column > tbody > tr > td.control.arrow-right::before,
table.dataTable.dtr-column > tbody > tr > th.control.arrow-right::before {
  border-top: 5px solid transparent;
  border-left: 0px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 10px solid rgba(0, 0, 0, 0.5);
}
table.dataTable.dtr-column > tbody > tr.dtr-expanded td.dtr-control:before,
table.dataTable.dtr-column > tbody > tr.dtr-expanded th.dtr-control:before,
table.dataTable.dtr-column > tbody > tr.dtr-expanded td.control:before,
table.dataTable.dtr-column > tbody > tr.dtr-expanded th.control:before {
  border-top: 10px solid rgba(0, 0, 0, 0.5);
  border-left: 5px solid transparent;
  border-bottom: 0px solid transparent;
  border-right: 5px solid transparent;
}
table.dataTable > tbody > tr.child {
  padding: 0.5em 1em;
}
table.dataTable > tbody > tr.child:hover {
  background: transparent !important;
}
table.dataTable > tbody > tr.child ul.dtr-details {
  display: inline-block;
  list-style-type: none;
  margin: 0;
  padding: 0;
}
table.dataTable > tbody > tr.child ul.dtr-details > li {
  border-bottom: 1px solid #efefef;
  padding: 0.5em 0;
}
table.dataTable > tbody > tr.child ul.dtr-details > li:first-child {
  padding-top: 0;
}
table.dataTable > tbody > tr.child ul.dtr-details > li:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
table.dataTable > tbody > tr.child span.dtr-title {
  display: inline-block;
  min-width: 75px;
  font-weight: bold;
}
div.dtr-modal {
  position: fixed;
  box-sizing: border-box;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 100;
  padding: 10em 1em;
}
div.dtr-modal div.dtr-modal-display {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 50%;
  height: -moz-fit-content;
  height: fit-content;
  max-height: 75%;
  overflow: auto;
  margin: auto;
  z-index: 102;
  overflow: auto;
  background-color: #f5f5f7;
  border: 1px solid black;
  border-radius: 0.5em;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
}
div.dtr-modal div.dtr-modal-content {
  position: relative;
  padding: 2.5em;
}
div.dtr-modal div.dtr-modal-content h2 {
  margin-top: 0;
}
div.dtr-modal div.dtr-modal-close {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  text-align: center;
  border-radius: 3px;
  cursor: pointer;
  z-index: 12;
}
div.dtr-modal div.dtr-modal-background {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 101;
  background: rgba(0, 0, 0, 0.6);
}
@media screen and (max-width: 767px) {
  div.dtr-modal div.dtr-modal-display {
    width: 95%;
  }
}
html.dark table.dataTable > tbody > tr > td.dtr-control:before,
html[data-bs-theme=dark] table.dataTable > tbody > tr > td.dtr-control:before {
  border-left-color: rgba(255, 255, 255, 0.5) !important;
}
html.dark table.dataTable > tbody > tr > td.dtr-control.arrow-right::before,
html[data-bs-theme=dark] table.dataTable > tbody > tr > td.dtr-control.arrow-right::before {
  border-right-color: rgba(255, 255, 255, 0.5) !important;
}
html.dark table.dataTable > tbody > tr.dtr-expanded > td.dtr-control:before,
html.dark table.dataTable > tbody > tr.dtr-expanded > th.dtr-control:before,
html[data-bs-theme=dark] table.dataTable > tbody > tr.dtr-expanded > td.dtr-control:before,
html[data-bs-theme=dark] table.dataTable > tbody > tr.dtr-expanded > th.dtr-control:before {
  border-top-color: rgba(255, 255, 255, 0.5) !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
}
html.dark table.dataTable > tbody > tr.child ul.dtr-details > li,
html[data-bs-theme=dark] table.dataTable > tbody > tr.child ul.dtr-details > li {
  border-bottom-color: rgb(64, 67, 70);
}
html.dark div.dtr-modal div.dtr-modal-display,
html[data-bs-theme=dark] div.dtr-modal div.dtr-modal-display {
  background-color: rgb(33, 37, 41);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
/* @import url("datatables.net-rowgroup-dt"); */
/* @import url('datatables.net-scroller-dt'); */
/* @import url('datatables.net-searchpanes-dt'); */
/* @import url('datatables.net-select-dt'); */
/* @import url("datatables.net-searchpanes-dt"); */
.dt-container {
  display: flex;
  flex-direction: column;
  flex: 1 1;
  width: 100%;
  flex-wrap: nowrap;
  margin-top: var(--spacing-small);
  border-top: 1px solid #efefef;

  font: var(--small);
}
/* Mobile responsiveness for table */
@media (max-width: 768px) {
.dt-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}
  }
.dt-container .dt-layout-row {
    display: flex;
    flex-direction: row;
    justify-content: start;
    flex: 1 1;
    margin: 0;
    text-align: left;
  }
.dt-container .dt-column-title {
    font: var(--p);
    font-weight: bold;
    text-align: left;
  }
.dt-container table.dataTable.dtr-inline.collapsed {
      cursor: pointer;
    }
.dt-container table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before {
          transition: all 100ms ease-in-out;
          content: "►";
          border: none;
        }
.dt-container table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dtr-control::before {
          transform: rotate(90deg);
        }
.dt-container table.dataTable th.dt-type-numeric,
      .dt-container table.dataTable th.dt-type-date {
        text-align: left;
      }
.dt-container table.dataTable td {
      font: var(--compact);
    }
.dt-container table.dataTable td.dt-type-numeric,
      .dt-container table.dataTable td.dt-type-date {
        text-align: left;
      }
.dt-container .table__contacts {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-small);
      border: none;
      border-bottom: none;
    }
.dt-container .table-actions {
      display: inline-flex;
      flex-direction: row;
      justify-content: end;
      gap: 6px;
      width: 100%;
    }
.dt-container .dtr-control .caret-right {
      width: -moz-fit-content;
      width: fit-content;
      height: -moz-fit-content;
      height: fit-content;
      transition: transform 250ms ease;
      display: none;
    }
.dt-container .dtr-control .date-cell {
      display: inline-flex;
      max-width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
.dt-container td.child ul.dtr-details {
      width: 100%;
    }
.dt-container td.child ul.dtr-details li {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: var(--spacing-small);
      }
.dt-container td.child ul.dtr-details li .dtr-data {
          text-align: right;
          overflow: hidden;
          text-overflow: ellipsis;
          /* white-space: nowrap; */
          word-break: break-word;
        }
.dt-container .dt-search {
    width: 100%;
  }
.dt-container .dt-search label {
      display: none;
    }
.dt-container .dt-search input:not([type="button"]) {
      font: var(--p);
      transition: all 0.2s ease;

      border: 1px solid var(--border-color);
      border-radius: var(--rounded-small);

      background-color: var(--input-bg-color);
      padding: var(--spacing-small) var(--spacing-small);
      width: 100%;
      margin: 0;
    }
@media screen and (min-width: 640px) {
      .dt-container .dt-search input:not([type="button"]) {
        width: -moz-fit-content;
        width: fit-content;
      }
    }
.dt-container .dt-paging {
    display: flex;
    justify-content: center;
    border-radius: var(--rounded-large);
    padding: var(--spacing-small) var(--spacing-medium);
    width: 100%;
  }
.dt-container .dt-paging nav {
      display: flex;
      flex-direction: row;
      gap: var(--spacing-small);
      flex-wrap: nowrap;
      font: var(--small);
    }
.dt-container .dt-paging nav .dt-paging-button {
        width: auto;
        white-space: nowrap;
        border-radius: var(--rounded-small);
        cursor: pointer;
        transition: all 0.2s ease;
      }
.dt-container .dt-paging nav .dt-paging-button:hover {
          background: var(--accent-color);
        }
.dt-container .dt-paging nav .dt-paging-button.current {
          border: 1px solid var(--muted-color);
          background: none;
          font-weight: bold;
          color: white;
        }
/* Customer name with status */
.customer-name-with-status {
  display: flex;
  align-items: center;
}
.customer-name-with-status .customer-name {
    font-weight: 500;
  }
/* Table Actions Layout */
.table-actions {
  display: flex;
  gap: var(--spacing-small);
  align-items: center;
  flex-wrap: no-wrap;
}
.table-actions .no-actions {
    color: #6b7280;
    font-style: italic;
  }
.table-actions .button {
    white-space: nowrap;
    min-height: 36px;
  }
/* Smaller base height for compact buttons */
.table-actions .button svg {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
    }
/* Compact button specific styles */
.table-actions .button.compact svg {
        width: 14px;
        height: 14px;
      }
/* Ensure minimum touch target on mobile */
@media (max-width: 768px) {
.table-actions .button {
      min-height: 44px;
      padding: 10px 14px;
      font-size: 14px
  }

      .table-actions .button svg {
        width: 16px;
        height: 16px;
      }

      .table-actions .button.compact {
        padding: 8px 12px;
      }

        .table-actions .button.compact svg {
          width: 16px;
          height: 16px;
        }
    }
/* Better spacing for tablet */
@media (min-width: 769px) and (max-width: 1024px) {
.table-actions .button {
      min-height: 40px;
      padding: 8px 12px
  }

      .table-actions .button svg {
        width: 15px;
        height: 15px;
      }
    }
/* Stack buttons vertically on very small screens to ensure touch targets */
@media (max-width: 480px) {
.table-actions {
    flex-direction: column;
    gap: 8px;
    width: 100%
}

    .table-actions .button {
      width: 100%;
      justify-content: center;
      min-height: 46px;
    }

      .table-actions .button.compact {
        min-height: 44px;
      }
  }
/* ===== Reservation Detail Side Panel ===== */
.rdp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  z-index: 1100;
  pointer-events: none;
  transition: background 0.25s ease;
}
.rdp-overlay.rdp-open {
    background: rgba(0, 0, 0, 0.45);
    pointer-events: auto;
  }
.rdp-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: 460px;
  max-width: 100vw;
  background: var(--white, #fff);
  box-shadow: -4px 0 32px rgba(0, 0, 0, 0.12);
  z-index: 1200;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.25s ease;
  overflow: hidden;
}
.rdp-panel.rdp-open {
    transform: translateX(0);
  }
.rdp-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
}
/* Header */
.rdp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
  flex-shrink: 0;
  background: var(--white, #fff);
  position: sticky;
  top: 0;
  z-index: 1;
}
.rdp-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1;
  min-width: 0;
}
.rdp-customer-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary, #111);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rdp-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-secondary, #6b7280);
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition:
    background 0.15s,
    color 0.15s;
}
.rdp-close:hover {
    background: var(--primary-color, #f3f4f6);
    color: var(--secondary-color, #111);
  }
/* Body */
.rdp-body {
  padding: 20px 24px;
  flex: 1 1;
  overflow-y: auto;
}
/* Quick info pills */
.rdp-info-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.rdp-info-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--dashboard-bg, #fdf9f3);
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 0.82rem;
  color: var(--text-primary, #111);
  font-weight: 500;
}
.rdp-info-pill svg {
    color: var(--accent-color, #f5632f);
    flex-shrink: 0;
  }
.rdp-edit-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px dashed var(--border-color, #e5e7eb);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 0.82rem;
  color: var(--text-secondary, #6b7280);
  font-weight: 500;
  text-decoration: none;
  transition:
    border-color 0.15s,
    color 0.15s,
    background 0.15s;
}
.rdp-edit-pill svg {
    flex-shrink: 0;
  }
.rdp-edit-pill:hover {
    border-color: var(--accent-color, #f5632f);
    color: var(--accent-color, #f5632f);
    background: color-mix(
      in srgb,
      var(--accent-color, #f5632f) 5%,
      transparent
    );
    border-style: solid;
  }
/* Detail rows */
.rdp-section {
  border: 1px solid var(--border-color, #e5e7eb);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
}
.rdp-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-color, #e5e7eb);
}
.rdp-row:last-child {
    border-bottom: none;
  }
.rdp-row.rdp-row--notes {
    align-items: flex-start;
  }
.rdp-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-secondary, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  width: 64px;
  flex-shrink: 0;
  padding-top: 2px;
}
.rdp-value {
  font-size: 0.88rem;
  color: var(--text-primary, #111);
  flex: 1 1;
  word-break: break-word;
}
.rdp-value a {
    color: var(--accent-color, #f5632f);
    text-decoration: none;
  }
.rdp-value a:hover {
      text-decoration: underline;
    }
.rdp-code {
  font-family: monospace;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  background: var(--dashboard-bg, #fdf9f3);
  padding: 1px 6px;
  border-radius: 4px;
}
/* Pre-order section */
.rdp-preorder .rdp-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    background: var(--dashboard-bg, #fdf9f3);
  }
.rdp-preorder .rdp-section-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary, #111);
  }
.rdp-preorder .rdp-preorder-count {
    font-size: 0.78rem;
    color: var(--text-secondary, #6b7280);
  }
.rdp-preorder-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.rdp-preorder-table th {
    padding: 8px 14px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    background: var(--dashboard-bg, #fdf9f3);
  }
.rdp-preorder-table td {
    padding: 9px 14px;
    color: var(--text-primary, #111);
    border-bottom: 1px solid var(--border-color, #e5e7eb);
    vertical-align: middle;
  }
.rdp-preorder-table td:last-child {
      border-bottom: none;
    }
.rdp-preorder-table tr:last-child td {
    border-bottom: none;
  }
.rdp-preorder-table .rdp-qty {
    color: var(--text-secondary, #6b7280);
    font-size: 0.8rem;
    white-space: nowrap;
  }
.rdp-preorder-table .rdp-price {
    font-weight: 500;
    text-align: right;
    white-space: nowrap;
  }
.rdp-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-top: 2px solid var(--border-color, #e5e7eb);
  font-size: 0.9rem;
}
.rdp-subtotal strong {
    font-weight: 700;
  }
.rdp-tax-note {
  font-size: 0.75rem;
  color: var(--text-secondary, #6b7280);
  padding: 0 14px 10px;
  margin: 0;
}
/* Footer */
.rdp-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 24px;
  border-top: 1px solid var(--border-color, #e5e7eb);
  flex-shrink: 0;
  background: var(--white, #fff);
  position: sticky;
  bottom: 0;
}
.rdp-footer .rdp-status-note {
    font-size: 0.82rem;
    color: var(--text-secondary, #6b7280);
    flex: 1 1;
  }
/* Loading/error states */
.rdp-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
}
.rdp-spinner {
  animation: rdp-spin 1s linear infinite;
  color: var(--accent-color, #f5632f);
}
@keyframes rdp-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.rdp-error {
  padding: 24px;
  color: var(--text-secondary, #6b7280);
  font-size: 0.88rem;
  text-align: center;
}
/* View button in table actions */
.rdp-view-btn {
  border: 1px solid var(--border-color, #e5e7eb) !important;
  background: var(--white, #fff) !important;
  color: var(--text-secondary, #6b7280) !important;
}
.rdp-view-btn:hover {
    border-color: var(--accent-color, #f5632f) !important;
    color: var(--accent-color, #f5632f) !important;
    background: color-mix(
      in srgb,
      var(--accent-color, #f5632f) 5%,
      #fff
    ) !important;
  }
@media (max-width: 600px) {
  .rdp-panel {
    width: 100vw;
  }
}
/* ===== End Reservation Detail Side Panel ===== */
/* Action Text */
/*
 * Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
 * the trix-editor content (whether displayed or under editing). Feel free to incorporate this
 * inclusion directly in any other asset bundle and remove this file.
 *
*/
trix-editor {
  border: 1px solid #bbb;
  border-radius: 3px;
  margin: 0;
  padding: 0.4em 0.6em;
  min-height: 5em;
  outline: none;
}
trix-toolbar * {
  box-sizing: border-box;
}
trix-toolbar .trix-button-row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  overflow-x: auto;
}
trix-toolbar .trix-button-group {
  display: flex;
  margin-bottom: 10px;
  border: 1px solid #bbb;
  border-top-color: #ccc;
  border-bottom-color: #888;
  border-radius: 3px;
}
trix-toolbar .trix-button-group:not(:first-child) {
  margin-left: 1.5vw;
}
@media (max-width: 768px) {
  trix-toolbar .trix-button-group:not(:first-child) {
    margin-left: 0;
  }
}
trix-toolbar .trix-button-group-spacer {
  flex-grow: 1;
}
@media (max-width: 768px) {
  trix-toolbar .trix-button-group-spacer {
    display: none;
  }
}
trix-toolbar .trix-button {
  position: relative;
  float: left;
  color: rgba(0, 0, 0, 0.6);
  font-size: 0.75em;
  font-weight: 600;
  white-space: nowrap;
  padding: 0 0.5em;
  margin: 0;
  outline: none;
  border: none;
  border-bottom: 1px solid #ddd;
  border-radius: 0;
  background: transparent;
}
trix-toolbar .trix-button:not(:first-child) {
  border-left: 1px solid #ccc;
}
trix-toolbar .trix-button.trix-active {
  background: #cbeefa;
  color: rgb(0, 0, 0);
}
trix-toolbar .trix-button:not(:disabled) {
  cursor: pointer;
}
trix-toolbar .trix-button:disabled {
  color: rgba(0, 0, 0, 0.125);
}
@media (max-width: 768px) {
  trix-toolbar .trix-button {
    letter-spacing: -0.01em;
    padding: 0 0.3em;
  }
}
trix-toolbar .trix-button--icon {
  font-size: inherit;
  width: 2.6em;
  height: 1.6em;
  max-width: calc(0.8em + 4vw);
  text-indent: -9999px;
}
@media (max-width: 768px) {
  trix-toolbar .trix-button--icon {
    height: 2em;
    max-width: calc(0.8em + 3.5vw);
  }
}
trix-toolbar .trix-button--icon::before {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.6;
  content: "";
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
@media (max-width: 768px) {
  trix-toolbar .trix-button--icon::before {
    right: 6%;
    left: 6%;
  }
}
trix-toolbar .trix-button--icon.trix-active::before {
  opacity: 1;
}
trix-toolbar .trix-button--icon:disabled::before {
  opacity: 0.125;
}
trix-toolbar .trix-button--icon-attach::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M10.5%2018V7.5c0-2.25%203-2.25%203%200V18c0%204.125-6%204.125-6%200V7.5c0-6.375%209-6.375%209%200V18%22%20stroke%3D%22%23000%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  top: 8%;
  bottom: 4%;
}
trix-toolbar .trix-button--icon-bold::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6.522%2019.242a.5.5%200%200%201-.5-.5V5.35a.5.5%200%200%201%20.5-.5h5.783c1.347%200%202.46.345%203.24.982.783.64%201.216%201.562%201.216%202.683%200%201.13-.587%202.129-1.476%202.71a.35.35%200%200%200%20.049.613c1.259.56%202.101%201.742%202.101%203.22%200%201.282-.483%202.334-1.363%203.063-.876.726-2.132%201.12-3.66%201.12h-5.89ZM9.27%207.347v3.362h1.97c.766%200%201.347-.17%201.733-.464.38-.291.587-.716.587-1.27%200-.53-.183-.928-.513-1.198-.334-.273-.838-.43-1.505-.43H9.27Zm0%205.606v3.791h2.389c.832%200%201.448-.177%201.853-.497.399-.315.614-.786.614-1.423%200-.62-.22-1.077-.63-1.385-.418-.313-1.053-.486-1.905-.486H9.27Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-italic::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M9%205h6.5v2h-2.23l-2.31%2010H13v2H6v-2h2.461l2.306-10H9V5Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-link::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18.948%205.258a4.337%204.337%200%200%200-6.108%200L11.217%206.87a.993.993%200%200%200%200%201.41c.392.39%201.027.39%201.418%200l1.623-1.613a2.323%202.323%200%200%201%203.271%200%202.29%202.29%200%200%201%200%203.251l-2.393%202.38a3.021%203.021%200%200%201-4.255%200l-.05-.049a1.007%201.007%200%200%200-1.418%200%20.993.993%200%200%200%200%201.41l.05.049a5.036%205.036%200%200%200%207.091%200l2.394-2.38a4.275%204.275%200%200%200%200-6.072Zm-13.683%2013.6a4.337%204.337%200%200%200%206.108%200l1.262-1.255a.993.993%200%200%200%200-1.41%201.007%201.007%200%200%200-1.418%200L9.954%2017.45a2.323%202.323%200%200%201-3.27%200%202.29%202.29%200%200%201%200-3.251l2.344-2.331a2.579%202.579%200%200%201%203.631%200c.392.39%201.027.39%201.419%200a.993.993%200%200%200%200-1.41%204.593%204.593%200%200%200-6.468%200l-2.345%202.33a4.275%204.275%200%200%200%200%206.072Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-strike::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M6%2014.986c.088%202.647%202.246%204.258%205.635%204.258%203.496%200%205.713-1.728%205.713-4.463%200-.275-.02-.536-.062-.781h-3.461c.398.293.573.654.573%201.123%200%201.035-1.074%201.787-2.646%201.787-1.563%200-2.773-.762-2.91-1.924H6ZM6.432%2010h3.763c-.632-.314-.914-.715-.914-1.273%200-1.045.977-1.739%202.432-1.739%201.475%200%202.52.723%202.617%201.914h2.764c-.05-2.548-2.11-4.238-5.39-4.238-3.145%200-5.392%201.719-5.392%204.316%200%20.363.04.703.12%201.02ZM4%2011a1%201%200%201%200%200%202h15a1%201%200%201%200%200-2H4Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-quote::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M4.581%208.471c.44-.5%201.056-.834%201.758-.995C8.074%207.17%209.201%207.822%2010%208.752c1.354%201.578%201.33%203.555.394%205.277-.941%201.731-2.788%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.121-.49.16-.764.294-.286.567-.566.791-.835.222-.266.413-.54.524-.815.113-.28.156-.597.026-.908-.128-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.674-2.7c0-.905.283-1.59.72-2.088Zm9.419%200c.44-.5%201.055-.834%201.758-.995%201.734-.306%202.862.346%203.66%201.276%201.355%201.578%201.33%203.555.395%205.277-.941%201.731-2.789%203.163-4.988%203.56a.622.622%200%200%201-.653-.317c-.113-.205-.122-.49.16-.764.294-.286.567-.566.791-.835.222-.266.412-.54.523-.815.114-.28.157-.597.026-.908-.127-.303-.39-.524-.72-.69a3.02%203.02%200%200%201-1.672-2.701c0-.905.283-1.59.72-2.088Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-heading-1::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21.5%207.5v-3h-12v3H14v13h3v-13h4.5ZM9%2013.5h3.5v-3h-10v3H6v7h3v-7Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-code::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3.293%2011.293a1%201%200%200%200%200%201.414l4%204a1%201%200%201%200%201.414-1.414L5.414%2012l3.293-3.293a1%201%200%200%200-1.414-1.414l-4%204Zm13.414%205.414%204-4a1%201%200%200%200%200-1.414l-4-4a1%201%200%201%200-1.414%201.414L18.586%2012l-3.293%203.293a1%201%200%200%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-bullet-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%207.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203ZM8%206a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-2.5-5a1.5%201.5%200%201%201-3%200%201.5%201.5%200%200%201%203%200ZM5%2019.5a1.5%201.5%200%201%200%200-3%201.5%201.5%200%200%200%200%203Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-number-list::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%204h2v4H4V5H3V4Zm5%202a1%201%200%200%201%201-1h11a1%201%200%201%201%200%202H9a1%201%200%200%201-1-1Zm1%205a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm0%206a1%201%200%201%200%200%202h11a1%201%200%201%200%200-2H9Zm-3.5-7H6v1l-1.5%202H6v1H3v-1l1.667-2H3v-1h2.5ZM3%2017v-1h3v4H3v-1h2v-.5H4v-1h1V17H3Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-undo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M3%2014a1%201%200%200%200%201%201h6a1%201%200%201%200%200-2H6.257c2.247-2.764%205.151-3.668%207.579-3.264%202.589.432%204.739%202.356%205.174%205.405a1%201%200%200%200%201.98-.283c-.564-3.95-3.415-6.526-6.825-7.095C11.084%207.25%207.63%208.377%205%2011.39V8a1%201%200%200%200-2%200v6Zm2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-redo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M21%2014a1%201%200%200%201-1%201h-6a1%201%200%201%201%200-2h3.743c-2.247-2.764-5.151-3.668-7.579-3.264-2.589.432-4.739%202.356-5.174%205.405a1%201%200%200%201-1.98-.283c.564-3.95%203.415-6.526%206.826-7.095%203.08-.513%206.534.614%209.164%203.626V8a1%201%200%201%201%202%200v6Zm-2-1Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-decrease-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-3.707-5.707a1%201%200%200%200%200%201.414l2%202a1%201%200%201%200%201.414-1.414L4.414%2012l1.293-1.293a1%201%200%200%200-1.414-1.414l-2%202Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-button--icon-increase-nesting-level::before {
  background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M5%206a1%201%200%200%201%201-1h12a1%201%200%201%201%200%202H6a1%201%200%200%201-1-1Zm4%205a1%201%200%201%200%200%202h9a1%201%200%201%200%200-2H9Zm-3%206a1%201%200%201%200%200%202h12a1%201%200%201%200%200-2H6Zm-2.293-2.293%202-2a1%201%200%200%200%200-1.414l-2-2a1%201%200%201%200-1.414%201.414L3.586%2012l-1.293%201.293a1%201%200%201%200%201.414%201.414Z%22%20fill%3D%22%23000%22%2F%3E%3C%2Fsvg%3E");
}
trix-toolbar .trix-dialogs {
  position: relative;
}
trix-toolbar .trix-dialog {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-size: 0.75em;
  padding: 15px 10px;
  background: #fff;
  box-shadow: 0 0.3em 1em #ccc;
  border-top: 2px solid #888;
  border-radius: 5px;
  z-index: 5;
}
trix-toolbar .trix-input--dialog {
  font-size: inherit;
  font-weight: normal;
  padding: 0.5em 0.8em;
  margin: 0 10px 0 0;
  border-radius: 3px;
  border: 1px solid #bbb;
  background-color: #fff;
  box-shadow: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
trix-toolbar .trix-input--dialog.validate:invalid {
  box-shadow: #F00 0px 0px 1.5px 1px;
}
trix-toolbar .trix-button--dialog {
  font-size: inherit;
  padding: 0.5em;
  border-bottom: none;
}
trix-toolbar .trix-dialog--link {
  max-width: 600px;
}
trix-toolbar .trix-dialog__link-fields {
  display: flex;
  align-items: baseline;
}
trix-toolbar .trix-dialog__link-fields .trix-input {
  flex: 1 1;
}
trix-toolbar .trix-dialog__link-fields .trix-button-group {
  flex: 0 0 content;
  margin: 0;
}
trix-editor [data-trix-mutable]:not(.attachment__caption-editor) {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
trix-editor [data-trix-mutable] ::-moz-selection, trix-editor [data-trix-mutable]::-moz-selection,
trix-editor [data-trix-cursor-target]::-moz-selection {
  background: none;
}
trix-editor [data-trix-mutable] ::-moz-selection, trix-editor [data-trix-mutable]::-moz-selection, trix-editor [data-trix-cursor-target]::-moz-selection {
  background: none;
}
trix-editor [data-trix-mutable] ::selection, trix-editor [data-trix-mutable]::selection,
trix-editor [data-trix-cursor-target]::selection {
  background: none;
}
trix-editor [data-trix-mutable].attachment__caption-editor:focus::-moz-selection {
  background: highlight;
}
trix-editor [data-trix-mutable].attachment__caption-editor:focus::selection {
  background: highlight;
}
trix-editor [data-trix-mutable].attachment.attachment--file {
  box-shadow: 0 0 0 2px highlight;
  border-color: transparent;
}
trix-editor [data-trix-mutable].attachment img {
  box-shadow: 0 0 0 2px highlight;
}
trix-editor .attachment {
  position: relative;
}
trix-editor .attachment:hover {
  cursor: default;
}
trix-editor .attachment--preview .attachment__caption:hover {
  cursor: text;
}
trix-editor .attachment__progress {
  position: absolute;
  z-index: 1;
  height: 20px;
  top: calc(50% - 10px);
  left: 5%;
  width: 90%;
  opacity: 0.9;
  transition: opacity 200ms ease-in;
}
trix-editor .attachment__progress[value="100"] {
  opacity: 0;
}
trix-editor .attachment__caption-editor {
  display: inline-block;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
  color: inherit;
  text-align: center;
  vertical-align: top;
  border: none;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
trix-editor .attachment__toolbar {
  position: absolute;
  z-index: 1;
  top: -0.9em;
  left: 0;
  width: 100%;
  text-align: center;
}
trix-editor .trix-button-group {
  display: inline-flex;
}
trix-editor .trix-button {
  position: relative;
  float: left;
  color: #666;
  white-space: nowrap;
  font-size: 80%;
  padding: 0 0.8em;
  margin: 0;
  outline: none;
  border: none;
  border-radius: 0;
  background: transparent;
}
trix-editor .trix-button:not(:first-child) {
  border-left: 1px solid #ccc;
}
trix-editor .trix-button.trix-active {
  background: #cbeefa;
}
trix-editor .trix-button:not(:disabled) {
  cursor: pointer;
}
trix-editor .trix-button--remove {
  text-indent: -9999px;
  display: inline-block;
  padding: 0;
  outline: none;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.8em;
  border-radius: 50%;
  background-color: #fff;
  border: 2px solid highlight;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.25);
}
trix-editor .trix-button--remove::before {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0.7;
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg%20height%3D%2224%22%20width%3D%2224%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M19%206.41%2017.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z%22%2F%3E%3Cpath%20d%3D%22M0%200h24v24H0z%22%20fill%3D%22none%22%2F%3E%3C%2Fsvg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 90%;
}
trix-editor .trix-button--remove:hover {
  border-color: #333;
}
trix-editor .trix-button--remove:hover::before {
  opacity: 1;
}
trix-editor .attachment__metadata-container {
  position: relative;
}
trix-editor .attachment__metadata {
  position: absolute;
  left: 50%;
  top: 2em;
  transform: translate(-50%, 0);
  max-width: 90%;
  padding: 0.1em 0.6em;
  font-size: 0.8em;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 3px;
}
trix-editor .attachment__metadata .attachment__name {
  display: inline-block;
  max-width: 100%;
  vertical-align: bottom;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
trix-editor .attachment__metadata .attachment__size {
  margin-left: 0.2em;
  white-space: nowrap;
}
.trix-content {
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word;
}
.trix-content * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.trix-content h1 {
  font-size: 1.2em;
  line-height: 1.2;
}
.trix-content blockquote {
  border: 0 solid #ccc;
  border-left-width: 0.3em;
  margin-left: 0.3em;
  padding-left: 0.6em;
}
.trix-content [dir=rtl] blockquote,
.trix-content blockquote[dir=rtl] {
  border-width: 0;
  border-right-width: 0.3em;
  margin-right: 0.3em;
  padding-right: 0.6em;
}
.trix-content li {
  margin-left: 1em;
}
.trix-content [dir=rtl] li {
  margin-right: 1em;
}
.trix-content pre {
  display: inline-block;
  width: 100%;
  vertical-align: top;
  font-family: monospace;
  font-size: 0.9em;
  padding: 0.5em;
  white-space: pre;
  background-color: #eee;
  overflow-x: auto;
}
.trix-content img {
  max-width: 100%;
  height: auto;
}
.trix-content .attachment {
  display: inline-block;
  position: relative;
  max-width: 100%;
}
.trix-content .attachment a {
  color: inherit;
  text-decoration: none;
}
.trix-content .attachment a:hover, .trix-content .attachment a:visited:hover {
  color: inherit;
}
.trix-content .attachment__caption {
  text-align: center;
}
.trix-content .attachment__caption .attachment__name + .attachment__size::before {
  content: " •";
}
.trix-content .attachment--preview {
  width: 100%;
  text-align: center;
}
.trix-content .attachment--preview .attachment__caption {
  color: #666;
  font-size: 0.9em;
  line-height: 1.2;
}
.trix-content .attachment--file {
  color: #333;
  line-height: 1;
  margin: 0 2px 2px 2px;
  padding: 0.4em 1em;
  border: 1px solid #bbb;
  border-radius: 5px;
}
.trix-content .attachment-gallery {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}
.trix-content .attachment-gallery .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}
.trix-content .attachment-gallery.attachment-gallery--2 .attachment, .trix-content .attachment-gallery.attachment-gallery--4 .attachment {
  flex-basis: 50%;
  max-width: 50%;
}
/*
 * We need to override trix.css’s image gallery styles to accommodate the
 * <action-text-attachment> element we wrap around attachments. Otherwise,
 * images in galleries will be squished by the max-width: 33%; rule.
*/
.trix-content .attachment-gallery > action-text-attachment,
.trix-content .attachment-gallery > .attachment {
  flex: 1 0 33%;
  padding: 0 0.5em;
  max-width: 33%;
}
.trix-content
  .attachment-gallery.attachment-gallery--2
  > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--2 > .attachment,
.trix-content
  .attachment-gallery.attachment-gallery--4
  > action-text-attachment,
.trix-content .attachment-gallery.attachment-gallery--4 > .attachment {
  flex-basis: 50%;
  max-width: 50%;
}
.trix-content action-text-attachment .attachment {
  padding: 0 !important;
  max-width: 100% !important;
}
trix-editor.trix-content {
  border: 1px solid var(--primary-color);
}
/* trix-toolbar { */
/*   .trix-button { */
/*     &.trix-active { */
/*       color: var(--secondary-color); */
/*       background-color: var(--accent-color); */
/*     } */
/*   } */
/* } */
.trix-button-row .trix-button-group--file-tools {
    display: none;
    width: 0;
  }
.trix-button-row .trix-button-group--file-tools + .trix-button-group-spacer {
      display: none;
    }
trix-editor.xl-editor {
  min-height: 60vh; /* Use pixels, em, or rem */
}
.field_with_errors {
  display: flex;
  flex-flow: column;
  gap: var(--spacing-xs);
}
.field_with_errors trix-editor {
    border: var(--border-input-error);
  }
.field_with_errors trix-editor input:focus {
      outline: var(--border-input-error);
    }
/* Lightbox */
.glightbox-container {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999 !important;
  overflow: hidden;
  touch-action: none;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  backface-visibility: hidden;
  outline: none;
}
.glightbox-container.inactive {
  display: none;
}
.glightbox-container .gcontainer {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 9999;
  overflow: hidden;
}
.glightbox-container .gslider {
  transition: transform 0.4s ease;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
  position: relative;
  overflow: hidden;
  display: flex !important;
  justify-content: center;
  align-items: center;
  transform: translate3d(0, 0, 0);
}
.glightbox-container .gslide {
  width: 100%;
  position: absolute;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}
.glightbox-container .gslide.current {
  opacity: 1;
  z-index: 99999;
  position: relative;
}
.glightbox-container .gslide.prev {
  opacity: 1;
  z-index: 9999;
}
.glightbox-container .gslide-inner-content {
  width: 100%;
}
.glightbox-container .ginner-container {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  max-width: 100%;
  margin: auto;
  height: 100vh;
}
.glightbox-container .ginner-container.gvideo-container {
  width: 100%;
}
.glightbox-container .ginner-container.desc-bottom,
        .glightbox-container .ginner-container.desc-top {
  flex-direction: column;
}
.glightbox-container .ginner-container.desc-left,
        .glightbox-container .ginner-container.desc-right {
  max-width: 100% !important;
}
.gslide iframe,
    .gslide video {
  outline: none !important;
  border: none;
  min-height: 165px;
  -webkit-overflow-scrolling: touch;
  touch-action: auto;
}
.gslide:not(.current) {
  pointer-events: none;
}
.gslide-image {
  align-items: center;
}
.gslide-image img {
  max-height: 100vh;
  display: block;
  padding: 0;
  float: none;
  outline: none;
  border: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  max-width: 100vw;
  width: auto;
  height: auto;
  -o-object-fit: cover;
  object-fit: cover;
  touch-action: none;
  margin: auto;
  min-width: 200px;
}
.desc-top .gslide-image img,
        .desc-bottom .gslide-image img {
  width: auto;
}
.desc-left .gslide-image img,
        .desc-right .gslide-image img {
  width: auto;
  max-width: 100%;
}
.gslide-image img.zoomable {
  position: relative;
}
.gslide-image img.dragging {
  cursor: grabbing !important;
  transition: none;
}
.gslide-video {
  position: relative;
  max-width: 100vh;
  width: 100% !important;
}
.gslide-video .plyr__poster-enabled.plyr--loading .plyr__poster {
  display: none;
}
.gslide-video .gvideo-wrapper {
  width: 100%;
        /* max-width: 160vmin; */
  margin: auto;
}
.gslide-video::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 0, 0, 0.34);
  display: none;
}
.gslide-video.playing::before {
  display: none;
}
.gslide-video.fullscreen {
  max-width: 100% !important;
  min-width: 100%;
  height: 75vh;
}
.gslide-video.fullscreen video {
  max-width: 100% !important;
  width: 100% !important;
}
.gslide-inline {
  background: #fff;
  text-align: left;
  max-height: calc(100vh - 40px);
  overflow: auto;
  max-width: 100%;
  margin: auto;
}
.gslide-inline .ginlined-content {
  padding: 20px;
  width: 100%;
}
.gslide-inline .dragging {
  cursor: grabbing !important;
  transition: none;
}
.ginlined-content {
  overflow: auto;
  display: block !important;
  opacity: 1;
}
.gslide-external {
  display: flex;
  width: 100%;
  min-width: 100%;
  background: #fff;
  padding: 0;
  overflow: auto;
  max-height: 75vh;
  height: 100%;
}
.gslide-media {
  display: flex;
  width: auto;
}
.zoomed .gslide-media {
  box-shadow: none !important;
}
.desc-top .gslide-media,
    .desc-bottom .gslide-media {
  margin: 0 auto;
  flex-direction: column;
}
.gslide-description {
  position: relative;
  flex: 1 0 100%;
}
.gslide-description.description-left,
    .gslide-description.description-right {
  max-width: 100%;
}
.gslide-description.description-bottom,
    .gslide-description.description-top {
  margin: 0 auto;
  width: 100%;
}
.gslide-description p {
  margin-bottom: 12px;
}
.gslide-description p:last-child {
  margin-bottom: 0;
}
.zoomed .gslide-description {
  display: none;
}
.glightbox-button-hidden {
  display: none;
}
/*
 * Description for mobiles
 * something like facebook does the description
 * for the photos
*/
.glightbox-mobile .glightbox-container .gslide-description {
  height: auto !important;
  width: 100%;
  position: absolute;
  bottom: 0;
  padding: 19px 11px;
  max-width: 100vw !important;
  order: 2 !important;
  max-height: 78vh;
  overflow: auto !important;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.75) 100%);
  transition: opacity 0.3s linear;
  padding-bottom: 50px;
}
.glightbox-mobile .glightbox-container .gslide-title {
  color: #fff;
  font-size: 1em;
}
.glightbox-mobile .glightbox-container .gslide-desc {
  color: #a1a1a1;
}
.glightbox-mobile .glightbox-container .gslide-desc a {
  color: #fff;
  font-weight: bold;
}
.glightbox-mobile .glightbox-container .gslide-desc * {
  color: inherit;
}
.glightbox-mobile .glightbox-container .gslide-desc .desc-more {
  color: #fff;
  opacity: 0.4;
}
.gdesc-open .gslide-media {
  transition: opacity 0.5s ease;
  opacity: 0.4;
}
.gdesc-open .gdesc-inner {
  padding-bottom: 30px;
}
.gdesc-closed .gslide-media {
  transition: opacity 0.5s ease;
  opacity: 1;
}
.greset {
  transition: all 0.3s ease;
}
.gabsolute {
  position: absolute;
}
.grelative {
  position: relative;
}
.glightbox-desc {
  display: none !important;
}
.glightbox-open {
  overflow: hidden;
}
.gloader {
  height: 25px;
  width: 25px;
  animation: lightboxLoader 0.8s infinite linear;
  border: 2px solid #fff;
  border-right-color: transparent;
  border-radius: 50%;
  position: absolute;
  display: block;
  z-index: 9999;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 47%;
}
.goverlay {
  width: 100%;
  height: calc(100vh + 1px);
  position: fixed;
  top: -1px;
  left: 0;
  background: #000;
  will-change: opacity;
}
.glightbox-mobile .goverlay {
  background: #000;
}
.gprev,
.gnext,
.gclose {
  z-index: 99999;
  cursor: pointer;
  width: 26px;
  height: 44px;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.gprev svg,
.gnext svg,
.gclose svg {
  display: block;
  width: 25px;
  height: auto;
  margin: 0;
  padding: 0;
}
.gprev.disabled,
.gnext.disabled,
.gclose.disabled {
  opacity: 0.1;
}
.gprev .garrow,
.gnext .garrow,
.gclose .garrow {
  stroke: #fff;
}
.gbtn.focused {
  outline: 2px solid #0f3d81;
}
iframe.wait-autoplay {
  opacity: 0;
}
.glightbox-closing .gnext,
    .glightbox-closing .gprev,
    .glightbox-closing .gclose {
  opacity: 0 !important;
}
/*Skin */
.glightbox-clean .gslide-description {
  background: #fff;
}
.glightbox-clean .gdesc-inner {
  padding: 22px 20px;
}
.glightbox-clean .gslide-title {
  font-size: 1em;
  font-weight: normal;
  font-family: arial;
  color: #000;
  margin-bottom: 19px;
  line-height: 1.4em;
}
.glightbox-clean .gslide-desc {
  font-size: 0.86em;
  margin-bottom: 0;
  font-family: arial;
  line-height: 1.4em;
}
.glightbox-clean .gslide-video {
  background: #000;
}
.glightbox-clean .gprev,
    .glightbox-clean .gnext,
    .glightbox-clean .gclose {
  background-color: rgba(0, 0, 0, 0.75);
  border-radius: 4px;
}
.glightbox-clean .gprev path,
.glightbox-clean .gnext path,
.glightbox-clean .gclose path {
  fill: #fff;
}
.glightbox-clean .gprev {
  position: absolute;
  top: -100%;
  left: 30px;
  width: 40px;
  height: 50px;
}
.glightbox-clean .gnext {
  position: absolute;
  top: -100%;
  right: 30px;
  width: 40px;
  height: 50px;
}
.glightbox-clean .gclose {
  width: 35px;
  height: 35px;
  top: 15px;
  right: 10px;
  position: absolute;
}
.glightbox-clean .gclose svg {
  width: 18px;
  height: auto;
}
.glightbox-clean .gclose:hover {
  opacity: 1;
}
/*CSS Animations*/
.gfadeIn {
  animation: gfadeIn 0.5s ease;
}
.gfadeOut {
  animation: gfadeOut 0.5s ease;
}
.gslideOutLeft {
  animation: gslideOutLeft 0.3s ease;
}
.gslideInLeft {
  animation: gslideInLeft 0.3s ease;
}
.gslideOutRight {
  animation: gslideOutRight 0.3s ease;
}
.gslideInRight {
  animation: gslideInRight 0.3s ease;
}
.gzoomIn {
  animation: gzoomIn 0.5s ease;
}
.gzoomOut {
  animation: gzoomOut 0.5s ease;
}
@keyframes lightboxLoader {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes gfadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes gfadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes gslideInLeft {
  from {
    opacity: 0;
    transform: translate3d(-60%, 0, 0);
  }
  to {
    visibility: visible;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes gslideOutLeft {
  from {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-60%, 0, 0);
    opacity: 0;
    visibility: hidden;
  }
}
@keyframes gslideInRight {
  from {
    opacity: 0;
    visibility: visible;
    transform: translate3d(60%, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
@keyframes gslideOutRight {
  from {
    opacity: 1;
    visibility: visible;
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(60%, 0, 0);
    opacity: 0;
  }
}
@keyframes gzoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 1;
  }
}
@keyframes gzoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
@media (min-width: 769px) {
  .glightbox-container .ginner-container {
    width: auto;
    height: auto;
    flex-direction: row;
  }
  .glightbox-container .ginner-container.desc-top .gslide-description {
    order: 0;
  }
  .glightbox-container .ginner-container.desc-top .gslide-image,
                .glightbox-container .ginner-container.desc-top .gslide-image img {
    order: 1;
  }
  .glightbox-container .ginner-container.desc-left .gslide-description {
    order: 0;
  }
  .glightbox-container .ginner-container.desc-left .gslide-image {
    order: 1;
  }
  .gslide-image img {
    max-height: 97vh;
    max-width: 100%;
  }
  .gslide-image img.zoomable {
    cursor: zoom-in;
  }
  .zoomed .gslide-image img.zoomable {
    cursor: grab;
  }
  .gslide-inline {
    max-height: 95vh;
  }
  .gslide-external {
    max-height: 100vh;
  }
  .gslide-description.description-left,
    .gslide-description.description-right {
    max-width: 275px;
  }
  .glightbox-open {
    height: auto;
  }
  .goverlay {
    background: rgba(0, 0, 0, 0.92);
  }
  .glightbox-clean .gslide-media {
    box-shadow: 1px 2px 9px 0px rgba(0, 0, 0, 0.65);
  }
  .glightbox-clean .description-left .gdesc-inner,
.glightbox-clean .description-right .gdesc-inner {
    position: absolute;
    height: 100%;
    overflow-y: auto;
  }
  .glightbox-clean .gprev,
    .glightbox-clean .gnext,
    .glightbox-clean .gclose {
    background-color: rgba(0, 0, 0, 0.32);
  }
  .glightbox-clean .gprev:hover,
.glightbox-clean .gnext:hover,
.glightbox-clean .gclose:hover {
    background-color: rgba(0, 0, 0, 0.7);
  }
  .glightbox-clean .gprev {
    top: 45%;
  }
  .glightbox-clean .gnext {
    top: 45%;
  }
}
@media (min-width: 992px) {
  .glightbox-clean .gclose {
    opacity: 0.7;
    right: 20px;
  }
}
@media screen and (max-height: 420px) {
  .goverlay {
    background: #000;
  }
}
/* Onboarding */
/* Onboarding Wizard Styles */
.onboarding-body {
  background: var(--dashboard-bg);
  min-height: 100vh;
  padding: 0;
  margin: 0;
}
.onboarding-container {
  max-width: 100vw;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  gap: var(--spacing-large);
}
.onboarding-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--secondary-color);
  padding: var(--spacing-xs) var(--spacing-medium);
  box-shadow: 0 1px 5px #00000010;
}
.onboarding-logo h1 {
  margin: 0;
  font: var(--h3);
  color: var(--primary-color);
}
.onboarding-subtitle {
  font: var(--small);
  color: var(--gray-2);
}
.onboarding-user {
  font: var(--small);
  color: var(--gray-2);
}
.onboarding-main {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  margin-bottom: var(--spacing-xlarge);
}
.onboarding-logo h1 {
  margin: 0;
  font: var(--h3);
  color: var(--primary-color);
}
.onboarding-subtitle {
  font: var(--small);
  color: var(--gray-2);
}
.onboarding-user {
  font: var(--small);
  color: var(--gray-2);
}
/* Progress Indicator */
.onboarding-progress {
  margin-bottom: var(--spacing-xlarge);
  background: var(--secondary-color);
  padding: var(--spacing-large) var(--spacing-medium);
  border-radius: var(--rounded-medium);
  box-shadow: var(--shadow-light);
}
.progress-header h2 {
  margin: 0 0 var(--spacing-small) 0;
  font: var(--h3);
  color: var(--primary-color);
}
.progress-subtitle {
  margin: 0;
  font: var(--small);
  color: var(--gray-2);
}
.progress-bar-container {
  width: 100%;
  height: 8px;
  background: var(--gray-color);
  border-radius: var(--rounded-small);
  margin: var(--spacing-large) 0;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  background: var(--accent-color);
  border-radius: var(--rounded-small);
  transition: width 0.3s ease;
}
.progress-steps {
  display: flex;
  justify-content: space-between;
  margin-top: var(--spacing-large);
}
.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1;
}
.step-number {
  width: 40px;
  height: 40px;
  border-radius: var(--rounded-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-bottom: var(--spacing-small);
  background: var(--gray-color);
  color: var(--gray-2);
}
.progress-step.completed .step-number {
  background: var(--success-color);
  color: var(--secondary-color);
}
.progress-step.active .step-number {
  background: var(--accent-color);
  color: var(--secondary-color);
  box-shadow: 0 2px 8px rgba(245, 99, 47, 0.4);
}
.step-label {
  font: var(--small);
  color: var(--gray-2);
  text-align: center;
}
.progress-step.active .step-label {
  color: var(--primary-color);
  font-family: var(--font-semibold);
}
/* Step Content */
.onboarding-step {
  animation: fadeIn 0.5s ease;
  background: var(--secondary-color);
  border-radius: var(--rounded-medium);
  box-shadow: var(--shadow-light);
  padding-top: var(--spacing-large);
  margin: var(--spacing-large) 0;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.step-header {
  text-align: center;
  margin-bottom: var(--spacing-large);
}
.step-icon {
  font-size: 3rem;
  margin-bottom: var(--spacing-medium);
}
.step-header h1 {
  margin: 0 0 var(--spacing-small) 0;
  font: var(--h1);
  color: var(--primary-color);
}
.step-description {
  font: var(--p);
  color: var(--gray-3);
  max-width: 600px;
  margin: 0 auto;
}
/* Welcome Page */
.onboarding-welcome {
  text-align: center;

  display: flex;
  flex-direction: column;
  gap: var(--spacing-large);
}
.hero-icon {
  width: 4rem;
  margin-bottom: var(--spacing-medium);
}
.hero-subtitle {
  font: var(--p);
  color: var(--gray-3);
  margin: 0 auto;
  line-height: 1.6;
}
.welcome-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-large);
  margin: var(--spacing-xlarge) 0;
}
.benefit-card {
  padding: var(--spacing-large) var(--spacing-medium);
  background: var(--secondary-color);
  border-radius: var(--rounded-medium);
  text-align: center;
  box-shadow: var(--shadow-light);

  display: flex;
  flex-direction: column;
  gap: var(--spacing-medium);
}
.benefit-icon {
  padding: var(--spacing-small);
  width: 3rem;
  height: 3rem;
  margin: 0 auto;
  border-radius: var(--rounded-medium);
}
.benefit-icon svg {
    width: 100%;
    height: 100%;
  }
.benefit-icon.accent {
    background: var(--accent-color-bg);
  }
.benefit-icon.accent svg {
      color: var(--accent-color);
    }
.benefit-icon.success {
    background: var(--success-color-bg);
  }
.benefit-icon.success svg {
      color: var(--success-color);
    }
.benefit-icon.warning {
    background: var(--info-color-bg);
  }
.benefit-icon.warning svg {
      color: var(--info-color);
    }
.benefit-card h3 {
  font: var(--h5);
  color: var(--primary-color);
  margin: 0;
}
.benefit-card p {
  margin: 0;
  padding: 0;
  font: var(--small);
  color: var(--gray-3);
  line-height: 1.5;
}
.welcome-process {
  text-align: center;
  margin: var(--spacing-xlarge) 0;
}
.welcome-process h2 {
  font: var(--h3);
  margin: var(--spacing-small);
}
.process-subtitle {
  font: var(--p);
  color: var(--gray-3);
  margin-bottom: var(--spacing-large);
}
.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--spacing-medium);
  margin: var(--spacing-xlarge) auto;
}
.process-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-medium);
  padding: var(--spacing-medium) var(--spacing-small);
  background: var(--secondary-color);
  border-radius: var(--rounded-medium);
  box-shadow: var(--shadow-light);
}
.process-number {
  width: 40px;
  height: 40px;
  border-radius: var(--rounded-full);
  background: var(--accent-color);
  color: var(--secondary-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  flex-shrink: 0;
}
.process-content {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  justify-content: space-between;
}
.process-content h4 {
  margin: 0 0 var(--spacing-xs) 0;
  font: var(--p);
  color: var(--primary-color);
}
.process-content p {
  margin: 0 0 var(--spacing-small) 0;
  font: var(--small);
  color: var(--gray-3);
}
.process-duration {
  font: var(--small);
  color: var(--success-color);
  font-family: var(--font-semibold);
}
.welcome-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-medium);

  background: var(--accent-color);
  border-radius: var(--rounded-large);
  color: var(--secondary-color);

  padding: var(--spacing-large);
  margin-bottom: var(--spacing-xlarge);
}
.welcome-cta h2 {
  margin: 0 0 var(--spacing-small) 0;
  font: var(--h2);
  color: var(--secondary-color);
}
.welcome-cta p {
  color: var(--secondary-color);
  opacity: 0.95;
}
.cta-note {
  margin-top: var(--spacing-medium) !important;
  font: var(--small);
  color: var(--secondary-color);
  opacity: 0.9;
}
/* Form Styles */
.onboarding-form {
  max-width: 100%;
  margin: 0 auto;
}
.onboarding-form .logo-field {
  margin: 0 auto;
  width: 120px;

  border-radius: var(--rounded-medium);
}
.onboarding-form .logo-field div[data-controller="upload"] {
  width: 120px;
  height: 120px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--rounded-medium);
  margin-bottom: var(--spacing-medium);
}
.onboarding-form .form-section {
  margin: var(--spacing-small) var(--spacing-large);
}
.form-section {
  margin-bottom: var(--spacing-large);
  padding: var(--spacing-large);
  border-radius: var(--rounded-medium);
}
.section-title {
  margin: 0 0 var(--spacing-small) 0;
  font: var(--h3);
  color: var(--primary-color);
}
.section-subtitle {
  margin: 0 0 var(--spacing-large) 0;
  font: var(--small);
  color: var(--gray-3);
}
/* .field { */
/*   margin-bottom: var(--spacing-large); */
/* } */
.field-hint {
  margin-top: var(--spacing-xs);
  font: var(--small);
  color: var(--gray-3);
  font-style: italic;
}
.error,
.error_explanation {
  display: block;
  margin-top: var(--spacing-xs);
  font: var(--small);
  color: var(--danger-color);
}
/* Navigation */
.onboarding-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-large) var(--spacing-medium);
  border-top: 2px solid var(--gray-color);
}
.nav-left,
.nav-right {
  display: flex;
  gap: var(--spacing-medium);
}
.button-outline {
  background: var(--secondary-color);
  color: var(--accent-color);
  border: 2px solid var(--accent-color);
}
.button-outline:hover {
  background: var(--accent-color);
  color: var(--secondary-color);
}
.button-success {
  background: var(--success-color);
  color: var(--secondary-color);
}
.button-success:hover {
  background: var(--tertiary-color-darkest);
}
.button-small {
  padding: var(--spacing-small) var(--spacing-medium);
  font: var(--small);
}
/* Confirm Page */
.confirm-sections .logo-section img {
  text-align: center;
  width: 100px;
  height: 100px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: var(--rounded-medium);
}
.confirm-card {
  max-width: 100%;
  padding: 0 var(--spacing-large);
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-large);
  padding-bottom: var(--spacing-medium);
}
.card-header h2 {
  margin: 0;
  font: var(--h3);
  color: var(--primary-color);
}
.confirm-sections {
  margin-bottom: var(--spacing-large);
}
.confirm-section {
  margin-bottom: var(--spacing-large);
  padding: var(--spacing-large);
  background: var(--dashboard-highlight);
  border-radius: var(--rounded-medium);
}
.confirm-section h3 {
  margin: 0 0 var(--spacing-medium) 0;
  font: var(--sub-heading);
  color: var(--primary-color);
}
.info-grid {
  display: grid;
  gap: var(--spacing-medium);
}
.info-item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}
.info-label {
  font: var(--small);
  color: var(--gray-3);
  font-family: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.info-value {
  font: var(--p);
  color: var(--primary-color);
}
.confirmation-notice {
  display: flex;
  gap: var(--spacing-medium);
  padding: var(--spacing-large);
  background: var(--info-color-bg);
  border-radius: var(--rounded-medium);
  border-left: 4px solid var(--info-color);
}
.notice-icon {
  font-size: 2rem;
  flex-shrink: 0;
}
.notice-content h4 {
  margin: 0 0 var(--spacing-small) 0;
  color: var(--info-color);
}
.notice-content p {
  margin: 0 0 var(--spacing-medium) 0;
  color: var(--gray-4);
  line-height: 1.5;
}
.checklist {
  margin: 0;
  padding-left: var(--spacing-large);
  list-style: none;
}
.checklist li {
  margin-bottom: var(--spacing-small);
  color: var(--gray-4);
}
/* Reservations Page */
.reservations-setup {
  margin: 0 auto;
}
.setup-banner {
  display: flex;
  gap: var(--spacing-medium);
  padding: var(--spacing-large);
  background: var(--success-color);
  border-radius: var(--rounded-medium);
  color: var(--secondary-color);
  margin-bottom: var(--spacing-large);
}
.banner-icon {
  font-size: 2rem;
  flex-shrink: 0;
}
.banner-content h3 {
  margin: 0 0 var(--spacing-small) 0;
  color: var(--secondary-color);
}
.banner-content p {
  margin: 0;
  color: var(--secondary-color);
  opacity: 0.95;
  line-height: 1.5;
}
.opening-hours-grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-small);
}
.hour-row {
  display: flex;
  align-items: center;
  gap: var(--spacing-medium);
  padding: var(--spacing-small);
  background: var(--secondary-color);
  border-radius: var(--rounded-small);
}
.hour-day {
  min-width: 150px;
}
.hour-day label {
  display: flex;
  align-items: center;
  gap: var(--spacing-small);
  cursor: pointer;
}
.hour-times {
  display: flex;
  align-items: center;
  gap: var(--spacing-small);
  flex: 1 1;
}
.time-input {
  flex: 1 1;
  max-width: 120px;
}
.time-separator {
  color: var(--gray-3);
  font: var(--small);
}
.setup-info {
  margin-top: var(--spacing-large);
}
.info-card {
  padding: var(--spacing-large);
  background: var(--success-color-bg);
  border-radius: var(--rounded-medium);
  border-left: 4px solid var(--success-color);
}
.info-card h4 {
  margin: 0 0 var(--spacing-small) 0;
  color: var(--primary-color);
}
.info-card p {
  margin: 0 0 var(--spacing-medium) 0;
  color: var(--gray-4);
  line-height: 1.5;
}
.info-card ul {
  margin: 0;
  padding-left: var(--spacing-large);
  color: var(--gray-4);
}
.info-card ul li {
  margin-bottom: var(--spacing-small);
}
/* Go Live Page */
.go-live-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-large);
  max-width: 700px;
  margin: 0 auto;
  padding: 0 var(--spacing-xlarge);
}
.success-banner {
  text-align: center;
  padding: var(--spacing-large);
  background: var(--success-color);
  border-radius: var(--rounded-large);
  color: var(--secondary-color);
  margin-bottom: var(--spacing-large);
}
.success-icon {
  font-size: 3rem;
  margin-bottom: var(--spacing-medium);
}
.success-banner h2 {
  margin: 0 0 var(--spacing-small) 0;
  color: var(--secondary-color);
}
.success-banner p {
  margin: 0;
  color: var(--secondary-color);
  opacity: 0.95;
}
.restaurant-preview {
  margin-bottom: var(--spacing-large);
}
.restaurant-preview h3 {
  margin: 0 0 var(--spacing-medium) 0;
  font: var(--h3);
  color: var(--primary-color);
}
.preview-card {
  padding: var(--spacing-large);
  background: var(--dashboard-highlight);
  border-radius: var(--rounded-medium);
}
.preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-medium);
}
.preview-header h4 {
  margin: 0;
  font: var(--h4);
  color: var(--primary-color);
}
.status-badge {
  padding: var(--spacing-xs) var(--spacing-small);
  border-radius: var(--rounded-large);
  font: var(--small);
  font-family: var(--font-semibold);
}
.status-live {
  background: var(--success-color-bg);
  color: var(--success-color);
}
.preview-details p {
  margin: var(--spacing-small) 0;
  color: var(--gray-3);
}
.sharing-section {
  margin-bottom: var(--spacing-large);
}
.sharing-section h3 {
  margin: 0 0 var(--spacing-medium) 0;
  font: var(--h3);
  color: var(--primary-color);
}
.sharing-section p {
  margin: 0 0 var(--spacing-large) 0;
  font: var(--p);
  color: var(--gray-3);
}
.share-options {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-large);
}
.share-option {
  padding: var(--spacing-large);
  background: var(--dashboard-highlight);
  border-radius: var(--rounded-medium);
}
.share-option p {
  margin: var(--spacing-medium) 0 0;
  font: var(--p);
  color: var(--gray-3);
}
.share-option h4 {
  margin: 0 0 var(--spacing-medium) 0;
  font: var(--sub-heading);
  color: var(--primary-color);
}
.share-link-box {
  display: flex;
  gap: var(--spacing-small);
  margin-bottom: var(--spacing-small);
}
.link-input {
  flex: 1 1;
  padding: var(--spacing-small);
  border: var(--border-input);
  border-radius: var(--rounded-small);
  font: var(--small);
  background: var(--secondary-color);
}
.share-hint {
  margin: 0;
  font: var(--small);
  color: var(--gray-3);
  font-style: italic;
}
.qr-code-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-medium);
}
.qr-code-image {
  width: 200px;
  height: 200px;
  border: 2px solid var(--gray-color);
  border-radius: var(--rounded-medium);
}
.next-steps-section {
  margin-bottom: var(--spacing-large);
}
.next-steps-section h3 {
  margin: 0 0 var(--spacing-medium) 0;
  font: var(--h3);
  color: var(--primary-color);
}
.next-steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-medium);
}
.next-step-card {
  padding: var(--spacing-large);
  background: var(--dashboard-highlight);
  border-radius: var(--rounded-medium);
  text-align: center;
}
.next-step-card .step-icon {
  font-size: 2rem;
  margin-bottom: var(--spacing-small);
}
.step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin-bottom: var(--spacing-small);

  background: var(--accent-color);
  padding: var(--spacing-medium);
  border-radius: var(--rounded-full);
  width: 4rem;
  height: 4rem;
  margin: 0 auto var(--spacing-medium) auto;
}
.step-icon svg {
  width: 100%;
  height: 100%;
  color: var(--secondary-color);
}
.next-step-card h4 {
  margin: 0 0 var(--spacing-small) 0;
  font: var(--p);
  color: var(--primary-color);
}
.next-step-card p {
  margin: 0 0 var(--spacing-small) 0;
  font: var(--small);
  color: var(--gray-3);
}
.badge {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-small);
  border-radius: var(--rounded-large);
  font: var(--small);
  font-family: var(--font-semibold);
}
.badge-optional {
  background: var(--warning-color-bg);
  color: var(--warning-color);
}
.pro-tip {
  display: flex;
  gap: var(--spacing-medium);
  padding: var(--spacing-large);
  background: var(--warning-color-bg);
  border-radius: var(--rounded-medium);
  border-left: 4px solid var(--warning-color);
}
.tip-icon {
  flex-shrink: 0;
}
.tip-content h4 {
  margin: 0 0 var(--spacing-small) 0;
  color: var(--gray-4);
}
.tip-content p {
  margin: 0;
  color: var(--gray-4);
  line-height: 1.5;
}
/* Responsive */
@media screen and (max-width: 320px) {
  .welcome-process .progress-steps {
    grid-template-columns: repeat(auto-fit, minmax(auto-fit, 1fr));
  }

  .onboarding-main {
    padding: var(--spacing-xs) var(--spacing-medium);
  }

  .welcome-benefits {
    grid-template-columns: 1fr;
  }

  .onboarding-welcome {
    gap: var(--spacing-xs);
    background: red;
  }

  .go-live-content {
    padding: 0 var(--spacing-medium);
  }
}
@media screen and (max-width: 768px) {
  .go-live-content {
    padding: 0 var(--spacing-medium);
  }

  .onboarding-main {
    padding: 0 var(--spacing-medium);
  }

  .onboarding-welcome {
    gap: var(--spacing-small);
  }

  .progress-steps {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }

  .welcome-benefits {
    grid-template-columns: 1fr;
  }

  .onboarding-nav {
    flex-direction: column;
    gap: var(--spacing-medium);
  }

  .nav-left,
  .nav-right {
    width: 100%;
    justify-content: center;
  }

  .button {
    width: 100%;
    text-align: center;
  }

  .hour-row {
    flex-direction: column;
    align-items: stretch;
  }

  .hour-day {
    min-width: 100%;
  }

  .share-link-box {
    flex-direction: column;
  }

  .next-steps-grid {
    grid-template-columns: 1fr;
  }
}
/* Choices.js Cuisine Types */
.cuisine-choices {
  font: var(--body);
}
.cuisine-choices .choices__inner {
  padding: var(--spacing-xs) var(--spacing-small);
  border: 1px solid var(--gray-5);
  border-radius: var(--radius-small);
  background: var(--secondary-color);
  min-height: 44px;
}
.cuisine-choices.is-focused .choices__inner {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-color) 20%, transparent);
}
.cuisine-choices .choices__list--dropdown {
  border: 1px solid var(--gray-5);
  border-radius: var(--radius-small);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.cuisine-choices .choices__list--dropdown .choices__item--selectable {
  padding: var(--spacing-xs) var(--spacing-small);
}
.cuisine-choices
  .choices__list--dropdown
  .choices__item--selectable.is-highlighted {
  background: color-mix(in srgb, var(--accent-color) 10%, transparent);
}
.cuisine-choices .choices__list--multiple .choices__item {
  background: var(--accent-color);
  border: none;
  border-radius: var(--radius-small);
  padding: 4px 8px;
  font: var(--small);
}
.cuisine-choices .choices__button {
  border-left: 1px solid rgba(255, 255, 255, 0.3);
}
.cuisine-choices .choices__input {
  background: transparent;
}
/* Form Sections - Collapsible */
.form-section-collapsible {
  margin-bottom: var(--spacing-large);
  padding: var(--spacing-large);
  background: var(--secondary-color);
  border: 1px solid var(--gray-color);
  border-radius: var(--rounded-medium);
  transition: border-color 0.2s ease;
}
.form-section-collapsible:hover {
  border-color: var(--gray-3);
}
.form-section-collapsible .form-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-large);
  padding-bottom: var(--spacing-medium);
  border-bottom: 1px solid var(--gray-color);
}
.section-header-content {
  display: flex;
  align-items: center;
  gap: var(--spacing-small);
}
.section-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--accent-color);
  flex-shrink: 0;
}
.section-icon svg {
  width: 100%;
  height: 100%;
}
/* Go Live Page Icons */
.detail-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--accent-color);
  vertical-align: middle;
  margin-right: var(--spacing-xs);
  flex-shrink: 0;
}
.detail-icon svg {
  width: 100%;
  height: 100%;
}
.status-icon {
  width: 1rem;
  height: 1rem;
  margin-right: var(--spacing-xs);
  vertical-align: middle;
}
.btn-icon {
  width: 1.125rem;
  height: 1.125rem;
  margin-right: var(--spacing-xs);
  flex-shrink: 0;
}
.share-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  color: var(--accent-color);
  vertical-align: middle;
  margin-right: var(--spacing-small);
  flex-shrink: 0;
}
.share-icon svg {
  width: 100%;
  height: 100%;
}
.next-step-card .step-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  background: var(--accent-color-bg);
  border-radius: var(--rounded-medium);
  margin-bottom: var(--spacing-small);
}
.next-step-card .step-icon svg {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--accent-color);
}
.preview-btn {
  display: inline-flex;
  align-items: center;
}
/* Go Live section headers with icons */
.sharing-section h3,
.next-steps-section h3 {
  display: flex;
  align-items: center;
  gap: var(--spacing-small);
}
.share-option h4 {
  display: flex;
  align-items: center;
}
.status-badge {
  display: inline-flex;
  align-items: center;
}
.preview-details p {
  display: flex;
  align-items: center;
}
.form-section-collapsible h3 {
  margin: 0;
  font: var(--h4);
  color: var(--primary-color);
}
.section-badge {
  padding: var(--spacing-xs) var(--spacing-small);
  border-radius: var(--rounded-large);
  font: var(--small);
  font-family: var(--font-semibold);
}
.section-badge-required {
  background: var(--accent-color-bg);
  color: var(--accent-color);
}
.section-badge-optional {
  background: var(--gray-color);
  color: var(--gray-3);
}
/* Social Fields Grid */
.social-fields-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-medium);
}
.social-field {
  margin-bottom: 0 !important;
}
.social-label {
  display: flex;
  align-items: center;
  gap: var(--spacing-small);
  margin-bottom: var(--spacing-small);
  font: var(--p);
  color: var(--primary-color);
}
.social-icon {
  font-size: 1rem;
}
/* Character Counter */
.field-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: var(--spacing-xs);
}
.character-count {
  font: var(--small);
  color: var(--gray-3);
  flex-shrink: 0;
  margin-left: var(--spacing-medium);
}
.character-count-warning {
  color: var(--warning-color);
}
.character-count-limit {
  color: var(--danger-color);
  font-family: var(--font-semibold);
}
/* Toast Notification */
.toast-notification {
  position: fixed;
  bottom: var(--spacing-xlarge);
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  display: flex;
  align-items: center;
  gap: var(--spacing-small);
  padding: var(--spacing-medium) var(--spacing-large);
  background: var(--primary-color);
  color: var(--secondary-color);
  border-radius: var(--rounded-medium);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  opacity: 0;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}
.toast-notification.toast-show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.toast-notification.toast-error {
  background: var(--danger-color);
}
.toast-icon {
  font-size: 1.25rem;
  font-weight: bold;
}
.toast-message {
  font: var(--p);
}
/* Preview Actions */
.preview-actions {
  margin-top: var(--spacing-medium);
  padding-top: var(--spacing-medium);
  border-top: 1px solid var(--gray-color);
}
/* Responsive adjustments for form sections */
@media screen and (max-width: 768px) {
  .social-fields-grid {
    grid-template-columns: 1fr;
  }

  .form-section-collapsible {
    border: none;
    padding: var(--spacing-medium) 0;
    margin-bottom: var(--spacing-medium);
    border-bottom: 1px solid var(--gray-color);
    border-radius: 0;
  }

  .form-section-collapsible:last-of-type {
    border-bottom: none;
  }

  .form-section-collapsible .form-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-small);
  }

  .field-footer {
    flex-direction: column;
    gap: var(--spacing-xs);
  }

  .character-count {
    margin-left: 0;
  }
}

/*# sourceMappingURL=application.css.map */