/*@use "Abstracts" as *;
@use "Base";*/
.cookies {
  position: fixed;
  left: 16px;
  bottom: 16px;
  background: var(--cookies-background, #ccc);
  padding: 16px;
  border-radius: 6px;
  box-shadow: 0 8px 16px var(--card-shadow-color, rgba(0, 0, 0, 0.1));
  word-wrap: break-word;
  overflow-y: auto;
  width: var(--cookies-width, 50ch);
  border: var(--cookies-border, var(--cookies-border-width, 1px) solid var(--cookies-border-color, black));
  color: var(--cookie-text-color, #000);
}

.cookies__heading {
  /*float: left;*/
  margin-block-start: 0;
}

.cookies__close {
  width: var(--cookies-close-width, 40px);
  height: var(--cookies-close-height, 40px);
  float: right;
  position: relative;
  margin: 0;
  margin-left: var(--cookies-close-margin-left, 24px);
  margin-bottom: var(--cookies-close-margin-bottom, 24px);
  /*margin-top: 8px;*/
  border-radius: 50%; /* Makes it a perfect circle */
  border: 1px solid var(--cookies-close-border-color);
  background: var(--cookies-close-background, #f0f0f0);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--cookies-close-transition, background-color 0.2s ease); /* Smooth color fade */
}
.cookies__close:hover {
  background: var(--cookies-close-hover-background, #e0e0e0);
}
.cookies__close:disabled {
  background: var(--cookies-close-disabled-background, #c3c3c3);
  cursor: not-allowed;
}

.cookies__close:disabled::before,
.cookies__close:disabled::after {
  background-color: var(--cookies-close-disabled-cross-background, #fff);
}

/* Creating the cross bars */
.cookies__close::before,
.cookies__close::after {
  content: "";
  position: absolute;
  width: var(--cookies-close-cross-width, 20px); /* Length of the cross bar */
  height: 2px; /* Thickness of the bar (adjust for "heavy" look) */
  background-color: var(--cookies-close-cross-background, #333);
  border-radius: 1px; /* Rounded ends for a modern look */
}

.cookies__close:hover::before,
.cookies__close:hover::after {
  background-color: var(--cookies-close-cross-hover-background, #000);
}

/* Rotating the bars to form the X */
.cookies__close::before {
  transform: rotate(45deg);
}

.cookies__close::after {
  transform: rotate(-45deg);
}

/*.cookies__close:hover {
    background: var(--btn-normal-hover-bg, #e0e0e0);
    border-color: var(--btn-normal-hover-border);
}*/
@media (width <= 60rem) {
  .cookies {
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0;
    max-height: 40vh;
    border-width: var(--cookies-border-width, 1px) 0 0 0;
    margin: 0;
    width: 100%;
  }
  .cookies__buttons {
    display: flex;
    flex-direction: column;
  }
}
.cookies-modal__list {
  list-style: none;
  padding: 0;
}

/*.cookies-modal__list li {
    border-bottom: 1px solid #eee;
    padding: 10px 0;
}*/
.cookies-modal summary {
  list-style: none; /* Removes default arrow */
  cursor: pointer;
  outline: none;
}

.cookies-modal summary::-webkit-details-marker {
  display: none; /* Hide arrow in Safari */
}

/* Block: Cookie List */
.cookie-list {
  list-style: none;
  padding: 0;
  border: var(--cookie-list-border, 1px solid var(--cookie-list-border-color, #ddd));
  border-radius: var(--cookie-list-border-radius, 4px);
  background: var(--cookie-list-background, grey);
}

.cookie-list__item {
  border-bottom: var(--cookie-list-border-bottom, 1px solid var(--cookie-list-border-bottom-color, #ddd));
  margin: 0;
}
.cookie-list__item .cookie-card__title {
  color: var(--cookie-list-title-color, #002d5b);
}

/* Block: Cookie Card */
.cookie-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--cookie-card-header-padding, 1rem);
}

/* The Button reset to look like a row */
.cookie-card__expand-btn {
  background: none;
  border: none;
  display: flex;
  align-items: center;
  flex-grow: 1;
  text-align: left;
  cursor: pointer;
  padding: 0;
  font: inherit;
}

.cookie-card__title {
  font-weight: var(--cookie-card-title-font-weight, bold);
  color: var(--cookie-card-title-color, #002d5b);
  margin-left: var(--cookie-card-title-margin-left, 10px);
}

.cookie-card__icon {
  font-size: var(--cookie-card-icon-font-size, 1.4rem);
  width: var(--cookie-card-icon-width, 20px);
  display: inline-block;
  color: var(--cookie-card-icon-color, #002d5b);
}

/* Expandable Body */
.cookie-card__body {
  padding: var(--cookie-card-body-padding, 0 1rem 1rem 3rem);
  font-size: var(--cookie-card-body-font-size, 0.9rem);
  color: var(--cookie-card-body-color, #555);
  max-width: var(--cookie-card-body-max-width, 60ch);
}

/* Helper to show/hide */
.cookie-card__body[hidden] {
  display: none;
}

.cookie-settings {
  position: fixed;
  padding: var(--cookie-settings-padding, 16px);
  border-radius: var(--cookie-settings-border-radius, 6px);
  box-shadow: var(--cookie-settings-box-shadow, 0 8px 16px var(--cookie-settings-box-shadow-color, rgba(0, 0, 0, 0.1)));
  word-wrap: break-word;
  border: var(--cookie-settings-border, none);
  overflow-y: auto;
  display: none;
  opacity: 0;
  margin: auto;
  width: var(--cookie-settings-width, min(60ch, 100% - 32px));
  background: var(--cookie-settings-background, #ccc);
  color: var(--cookie-settings-text-color, #000);
}

.cookie-settings::backdrop {
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
}

.cookie-settings[open] {
  display: block;
  opacity: 1;
}
@starting-style {
  .cookie-settings[open] {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .cookie-settings {
    transition-property: overlay display opacity;
    transition-duration: 0.5s;
    transition-behavior: allow-discrete;
  }
  .cookie-settings::backdrop {
    transition-property: overlay display opacity;
    transition-duration: 0.5s;
    transition-behavior: allow-discrete;
  }
  .cookie-settings[open]::backdrop {
    opacity: 0.75;
  }
  @starting-style {
    .cookie-settings[open]::backdrop {
      opacity: 0;
    }
  }
}
/* Toggle Switch (Block) */
.cookie-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  margin: 0;
}

.cookie-toggle__input {
  opacity: 0;
  width: 0;
  height: 0;
}

.cookie-toggle__slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--cookie-toggle-background-color, #ccc);
  transition-duration: var(--cookie-toggle-transition-duration, 0.3s);
  border-radius: 24px;
}

.cookie-toggle__input:disabled + .cookie-toggle__slider {
  cursor: not-allowed;
}

.cookie-toggle__slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: var(--cookie-toggle-slider-background-color, white);
  transition-duration: var(--cookie-toggle-transition-duration, 0.3s);
  border-radius: 50%;
}

.cookie-toggle__input:checked + .cookie-toggle__slider {
  background-color: var(--cookie-toggle-checked-background-color, #002d5b);
}

.cookie-toggle__input:checked + .cookie-toggle__slider:before {
  transform: translateX(20px);
}

.cookie-toggle__input:checked:disabled + .cookie-toggle__slider {
  background-color: var(--cookie-toggle-disabled-background-color, darkgrey);
}

.moveup {
  display: none;
  opacity: 0;
  border: none;
  position: fixed;
  bottom: var(--moveup-bottom, 2%);
  left: 50%;
  background-color: var(--moveup-background-color, gray);
  color: var(--moveup-color, white);
  cursor: pointer;
  text-align: center;
  padding: var(--moveup-padding, 8px);
  width: var(--moveup-width, 40px);
  height: var(--moveup-height, 40px);
  border-radius: var(--moveup-border-radius, 10px);
}
.moveup.show {
  display: block;
  opacity: 0.5;
}
.moveuphover, .moveupfocus {
  opacity: 1;
}
.moveup svg {
  width: 100%;
  height: 100%;
  display: block;
  margin: 0 auto;
  fill: var(--moveup-svg-fill, white);
}

@media (prefers-reduced-motion: no-preference) {
  .moveup {
    transition-property: display opacity;
    transition-duration: 0.5s;
    transition-behavior: allow-discrete;
    translate: -50% 25vh;
  }
  .moveup.show {
    translate: -50% 0;
  }
  @starting-style {
    .moveup.show {
      opacity: 0;
      translate: -50% 25vh;
    }
  }
}
.breadcrumbs {
  --nav-gap: 2ch;
  display: flex;
  align-items: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  gap: var(--nav-gap);
  padding: calc(var(--nav-gap) / 2);
  scroll-padding-inline: calc(var(--nav-gap) / 2);
  margin: 0;
  list-style: none;
}
.breadcrumbs a {
  text-underline-offset: 0.25em;
  outline-offset: 3px;
}
.breadcrumbs > .crumb {
  scroll-snap-align: start;
}
.breadcrumbs > .crumb:last-of-type {
  scroll-snap-align: end;
}

.crumb {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--nav-gap) / 4);
  white-space: nowrap;
  position: relative;
}
.crumb > a {
  white-space: nowrap;
}
.crumb > a[aria-current=page] {
  font-weight: bold;
}

.crumb-separator {
  user-select: none;
}

/* --- 1. Global Positioning for the Toast Container --- */
/* The container is NOT in the top layer, but it anchors the position of the dialogs */
/*.toast-container {*/
/*position: fixed;*/ /* Keep it in place regardless of scrolling */
/*bottom: 20px;*/ /* 20px from the bottom */
/*right: 20px;*/ /* 20px from the right */
/* NOTE: z-index is omitted here because the <dialog> children handle the stacking order */
/*//left: 50%; /* Start the container 50% from the left edge of the viewport */
/* Ensure the container is visible if debugging, though it should be empty/transparent */
/*pointer-events: none;*/ /* Allows clicks to pass through the empty container */
/*}*/
/* --- 2. Base Toast Style for the <dialog> element --- */
.toast {
  /* --- Crucial: Resetting default dialog styles --- */
  position: fixed;
  inset: auto;
  bottom: var(--toast-bottom, 10px);
  right: var(--toast-right, 10px);
  /* Centering logic for the stack */
  /*left: 50%;
  transform: translateX(-50%);*/
  border: none;
  padding: 0;
  margin: 0;
  background: var(--toast-background, transparent);
  /* Re-enable pointer events for the toast itself (which is nested inside the container) */
  /* --- Apply Toast Visual Styles --- */
  padding: var(--toast-padding, 16px);
  border-radius: var(--toast-boarder-radius, 6px);
  color: var(--toast-text-color, white);
  font-family: var(--toast-ff, Arial, sans-serif);
  line-height: 1.4;
  box-shadow: var(--toast-box-shadow, 0 4px 12px var(--toast-box-shadow-color, rgba(0, 0, 0, 0.2)));
  cursor: pointer; /* Indicates it's clickable (to dismiss) */
  /* --- Initial State for Animation --- */
  /*opacity: 0;*/
  max-width: 90%;
  opacity: 1;
}

.toast.hidden {
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .toast {
    transition: bottom 0.25s ease-in-out, opacity 0.25s ease-in-out, transform 0.25s ease-in-out;
    transform: scale(1) translateY(0);
  }
  .toast.hidden {
    transform: scale(0) translateY(20px);
  }
  .toast.fade-out {
    opacity: 0;
    transform: scale(0.75) translateY(-20px);
  }
}
/*.toast.show {
    opacity: 1;
    transform: scale(1) translateY(0);
}*/
/* --- 3. State for when the toast is visible (via dialog.show()) --- */
/* The 'open' attribute is automatically added when dialog.show() is called */
.toast:popover-open {
  /*opacity: 1;*/
}

/* --- 4. Theme Styles --- */
.toast.success {
  background: var(--toast-success-background, #4CAF50); /* Green */
  color: var(--toast-success-text-color);
}

.toast.error {
  background: var(--toast-error-background, #F44336); /* Red */
  color: var(--toast-error-text-color);
}

.toast.warning {
  background: var(--toast-warning-background, #FF9800); /* Orange */
  color: var(--toast-warning-text-color, #333); /* Darker text for better contrast on orange */
}

.toast.info {
  background: var(--toast-info-background, #2196F3); /* Blue */
  color: var(--toast-info-text-color);
}

/* --- Media Query for Small Screens (e.g., max-width 600px) --- */
/*@media (width < $page-breakpoint) {*/
/*.toast-container {
        bottom: 10px;*/ /* Move closer to the bottom edge */
/*left: 10px;*/ /* Start from the left edge */
/*right: 10px;*/ /* End at the right edge */
/*max-width: none;*/ /* Allow it to span the full width of the viewport */
/*}*/
/*.toast {*/
/* Optional: make the font slightly larger for mobile readability */
/*font-size: 1.1em;*/
/*width: 90%;*/
/*}
}*/
.btn {
  --_bg: var(--btn-bg, #6c757d);
  --_text-color: var(--btn-text-color, #ffffff);
  display: inline-flex;
  touch-action: manipulation; /*explicitly remove 300ms delay of browser waiting for double tap*/
  align-items: var(--btn-align-items, center);
  justify-content: center;
  text-decoration: var(--btn-text-decoration, none);
  text-transform: var(--btn-text-transform, uppercase);
  color: var(--_text-color);
  font-weight: var(--btn-font-weight, bold);
  background-color: var(--_bg);
  border-radius: var(--btn-border-radius, 6px);
  border: var(--btn-border, 1px solid var(--btn-border-color, var(--_bg)));
  /*better to have em than px for padding/margin to maintain aspect ratio*/
  padding: var(--btn-padding, 0.5em 1em);
  margin: var(--btn-margin, 0.1em); /*maintains safety zone around button for mobile clicks*/
  cursor: var(--btn-cursor, pointer);
  box-shadow: var(--btn-box-shadow);
  text-align: var(--btn-text-align, center);
  font-size: var(--btn-font-size, 1rem);
}
.btn:hover, .btn:focus-visible {
  --_hover-bg: var(--btn-hover-bg, var(--_bg));
  text-decoration: var(--btn-hover-text-decoration, none);
  background-color: var(--_hover-bg);
  color: var(--btn-hover-text-color, var(--_text-color));
  filter: var(--btn-hover-filter, brightness(90%));
  border: var(--btn-hover-border, 1px solid var(--btn-hover-border-color, var(--_hover-bg)));
}
.btn:active {
  /* Make the button look like it's being pushed into the screen */
  transform: var(--btn-active-transform, translateY(2px));
  /* Slightly darken the color to simulate a shadow/press */
  filter: var(--btn-active-filter, brightness(85%));
}
.btn:disabled {
  --_disabled-bg: var(--btn-disabled-bg, var(--_bg));
  text-decoration: var(--btn-disabled-text-decoration, none);
  cursor: not-allowed;
  background-color: var(--_disabled-bg);
  color: var(--btn-disabled-text-color, var(--_text-color));
  opacity: var(--btn-disabled-opacity, 0.65);
  border: var(--btn-disabled-border, 1px solid var(--btn-disabled-border-color, var(--_disabled-bg)));
  /*filter: grayscale(1);*/ /* Optional: forces a 'dead' look if using icons */
  /*opacity: 0.7;*/ /* Adds an extra visual cue without breaking contrast math */
}
.btn {
  /*  The goal of the form	.btn-primary	    Directs the user to the "Commit" action.
      The "Escape" route	    .btn-secondary	    Muted; tells the user "this is safe/neutral."
      A Destructive act	    .btn-danger	Red;    tells the user "stop and think."
      A Positive finish	    .btn-success	    Green; used for "Done" or "Confirm."
      A caution required      .btn-warning        It alerts the user to double-check their choice without the "panic" of a red button. Archive, Deactivate, Reset
      Informative Action      .btn-info           Details, Help, View Log*/
  /*
      Highlight: "Save User" (The reason the user is there).
      Normal: "Cancel" (The way out).
  */
  /*highlighted button for attention with highlight/primary/branding colors*/
}
.btn.btn-highlight {
  --_bg: var(--btn-highlight-bg, #007bff);
  --_text-color: var(--btn-highlight-text-color, #fff);
  background-color: var(--_bg);
  color: var(--_text-color);
  border-color: var(--btn-highlight-border-color, var(--_bg));
}
.btn.btn-highlight:hover, .btn.btn-highlight:focus {
  background-color: var(--btn-highlight-hover-bg, var(--_bg));
  color: var(--btn-highlight-hover-text-color, var(--_text-color));
  border-color: var(--btn-highlight-hover-border, var(--_bg));
}
.btn.btn-success {
  --_bg: var(--btn-success-bg, #28a745);
  --_text-color: var(--btn-success-text-color, #fff);
  background-color: var(--_bg);
  color: var(--_text-color);
  border-color: var(--btn-success-border, var(--_bg));
}
.btn.btn-success:hover, .btn.btn-success:focus {
  background-color: var(--btn-success-hover-bg, var(--_bg));
  color: var(--btn-success-hover-text-color, var(--_text-color));
  border-color: var(--btn-success-hover-border, var(--_bg));
}
.btn.btn-warning {
  --_bg: var(--btn-warning-bg, #ffc107);
  --_text-color: var(--btn-warning-text-color, #212529);
  background-color: var(--_bg);
  color: var(--_text-color);
  border-color: var(--btn-warning-border, var(--_bg));
}
.btn.btn-warning:hover, .btn.btn-warning:focus {
  background-color: var(--btn-warning-hover-bg, var(--_bg));
  color: var(--btn-warning-hover-text-color, var(--_text-color));
  border-color: var(--btn-warning-hover-border, var(--_bg));
}
.btn.btn-danger {
  --_bg: var(--btn-danger-bg, #dc3545);
  --_text-color: var(--btn-danger-text-color, #fff);
  background-color: var(--_bg);
  color: var(--_text-color);
  border-color: var(--btn-danger-border, var(--_bg));
}
.btn.btn-danger:hover, .btn.btn-danger:focus {
  background-color: var(--btn-danger-hover-bg, var(--_bg));
  color: var(--btn-danger-hover-text-color, var(--_text-color));
  border-color: var(--btn-danger-hover-border, var(--_bg));
}
.btn {
  /*for actions that provide more data without changing state / view details / help / documentation etc.*/
}
.btn.btn-info {
  --_bg: var(--btn-info-bg, #17a2b8);
  --_text-color: var(--btn-info-text-color, #fff);
  background-color: var(--_bg);
  color: var(--_text-color);
  border-color: var(--btn-info-border, var(--_bg));
}
.btn.btn-info:hover, .btn.btn-info:focus {
  background-color: var(--btn-info-hover-bg, var(--_bg));
  color: var(--btn-info-hover-text-color, var(--_text-color));
  border-color: var(--btn-info-hover-border, var(--_bg));
}

@media (prefers-reduced-motion: no-preference) {
  .btn {
    transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    transition-property: background, color;
  }
}
/*.btn svg {
    fill: var(--clr-icon);
    margin-inline: .5em;
    min-width: 1.5em;
    min-height: 1.5em;
}

@media (prefers-reduced-motion: no-preference) {
    .btn {
        transition: 150ms ease-in-out;
        transition-property: background, color;
    }
}
*/