/* ==========================================================================
   14. Drawer / Offcanvas (.qhr-drawer)
   ========================================================================== */
.qhr-drawer-backdrop {
  position: fixed;
  inset: 0;
  background-color: var(--qhr-backdrop-bg, rgba(2, 6, 23, 0.7));
  backdrop-filter: blur(4px);
  z-index: var(--qhr-z-backdrop, 1040);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--qhr-duration-normal, 250ms) ease;
}
.qhr-drawer-backdrop[data-state="open"] {
  opacity: 1;
  pointer-events: auto;
}
.qhr-drawer {
  position: fixed;
  inset-block: 0;
  z-index: var(--qhr-z-modal, 1050);
  background-color: var(--qhr-surface-elevated, #1e293b);
  box-shadow: var(--qhr-shadow-xl, 0 20px 25px -5px rgba(0, 0, 0, 0.5));
  display: flex;
  flex-direction: column;
  transition: transform var(--qhr-duration-normal, 300ms) cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 100vw;
}
.qhr-drawer--start {
  inset-inline-start: 0;
  transform: translateX(-100%);
}
[dir="rtl"] .qhr-drawer--start {
  transform: translateX(100%);
}
.qhr-drawer--end {
  inset-inline-end: 0;
  transform: translateX(100%);
}
[dir="rtl"] .qhr-drawer--end {
  transform: translateX(-100%);
}
.qhr-drawer[data-state="open"] {
  transform: translateX(0) !important;
}
.qhr-drawer--sm { width: 320px; }
.qhr-drawer--md { width: 420px; }
.qhr-drawer--lg { width: 560px; }
.qhr-drawer--xl { width: 720px; }

.qhr-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--qhr-space-4, 16px);
  padding-inline: var(--qhr-space-5, 20px);
  border-block-end: 1px solid var(--qhr-border-subtle, rgba(255, 255, 255, 0.1));
}
.qhr-drawer-title {
  font-family: var(--qhr-font-heading, inherit);
  font-size: var(--qhr-text-lg, 1.125rem);
  font-weight: 700;
  color: var(--qhr-text-base, #ffffff);
  margin: 0;
}
.qhr-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding-block: var(--qhr-space-5, 20px);
  padding-inline: var(--qhr-space-5, 20px);
}
.qhr-drawer-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--qhr-space-3, 12px);
  padding-block: var(--qhr-space-4, 16px);
  padding-inline: var(--qhr-space-5, 20px);
  border-block-start: 1px solid var(--qhr-border-subtle, rgba(255, 255, 255, 0.1));
  background-color: var(--qhr-surface-base, #0f172a);
}