/**
 * Geese Project Design System — Offcanvas
 * Phase 2b — Slide-out panels for mobile filters and notifications
 * Source: C:\Users\Rovick\Downloads\geeseprojdesignsystem (1).html
 * Section: 18 (Modals & offcanvas - extension)
 */

/* ========== OFFCANVAS BACKDROP ========== */
.gp-ds .offcanvas-backdrop {
  background: rgba(13, 13, 12, 0.5);
}

.gp-ds .offcanvas-backdrop.show {
  opacity: 1;
}

/* ========== OFFCANVAS PANEL ========== */
.gp-ds .offcanvas {
  position: fixed;
  bottom: 0;
  z-index: 1045;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  visibility: hidden;
  background: var(--gp-surface);
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease-in-out;
}

.gp-ds .offcanvas.show {
  visibility: visible;
}

/* Offcanvas positioning */
.gp-ds .offcanvas-start {
  top: 0;
  left: 0;
  width: 320px;
  border-right: 1px solid var(--gp-border);
  transform: translateX(-100%);
}

.gp-ds .offcanvas-start.show {
  transform: translateX(0);
}

.gp-ds .offcanvas-end {
  top: 0;
  right: 0;
  width: 320px;
  border-left: 1px solid var(--gp-border);
  transform: translateX(100%);
}

.gp-ds .offcanvas-end.show {
  transform: translateX(0);
}

.gp-ds .offcanvas-top {
  top: 0;
  right: 0;
  left: 0;
  height: 30vh;
  max-height: 100%;
  border-bottom: 1px solid var(--gp-border);
  transform: translateY(-100%);
}

.gp-ds .offcanvas-top.show {
  transform: translateY(0);
}

.gp-ds .offcanvas-bottom {
  right: 0;
  left: 0;
  height: 30vh;
  max-height: 100%;
  border-top: 1px solid var(--gp-border);
  transform: translateY(100%);
}

.gp-ds .offcanvas-bottom.show {
  transform: translateY(0);
}

/* ========== OFFCANVAS HEADER ========== */
.gp-ds .offcanvas-header {
  padding: 18px;
  border-bottom: 1px solid var(--gp-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gp-ds .offcanvas-title {
  font-family: var(--gp-font-head);
  font-weight: 800;
  font-size: 14px;
  color: var(--gp-fg);
  margin: 0;
}

.gp-ds .offcanvas-header .btn-close {
  cursor: pointer;
  color: var(--gp-fg-faint);
  font-size: 18px;
  line-height: 1;
  background: none;
  border: none;
  padding: 0;
  opacity: 1;
  transition: color var(--gp-dur-fast) var(--gp-ease-out);
}

.gp-ds .offcanvas-header .btn-close:hover {
  color: var(--gp-fg);
}

/* ========== OFFCANVAS BODY ========== */
.gp-ds .offcanvas-body {
  padding: 18px;
  font-size: 12.5px;
  color: var(--gp-fg-muted);
  flex-grow: 1;
  overflow-y: auto;
}

.gp-ds .offcanvas-body h4 {
  font-size: 14px;
  margin-bottom: 8px;
  color: var(--gp-fg);
}

/* ========== RESPONSIVE ========== */
@media (max-width: 576px) {
  .gp-ds .offcanvas-start,
  .gp-ds .offcanvas-end {
    width: 280px;
  }
}

/* Dark mode shadow adjustment */
@media (prefers-color-scheme: dark) {
  .gp-ds .offcanvas {
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.3);
  }
}

[data-theme="dark"] .gp-ds .offcanvas {
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.3);
}