@layer components {
  .cng-Nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--cng-space-md);
    gap: var(--cng-space-lg);
  }

  /* Ensure the nav container provides a color for SVG icons to inherit */
  .cng-Nav {
    color: var(--cng-color-text);
  }

  /* Also ensure header provides the color and increase specificity for desktop */
  .cng-Header,
  .cng-Header .cng-Nav {
    color: var(--cng-color-text) !important;
  }

  .cng-Nav-logo {
    display: flex;
    align-items: center;
    gap: var(--cng-space-sm);
    font-size: var(--cng-font-size-lg);
    font-weight: var(--cng-font-weight-bold);
    color: var(--cng-color-accent);
  }

  .cng-Nav-logo svg {
    width: 2rem;
    height: 2rem;
  }

  /* Ensure navigation SVG icons inherit text color and render correctly */
  .cng-Nav svg {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: middle;
    fill: currentColor;
    stroke: currentColor;
  }

  /* Force <use> and common shapes to inherit color in case of specificity issues */
  .cng-Nav svg use,
  .cng-Nav svg path,
  .cng-Nav svg circle,
  .cng-Nav svg g {
    fill: currentColor !important;
    stroke: currentColor !important;
  }

  /* Target the toggle icon specifically as a last-resort override */
  .cng-Nav-toggle svg,
  .cng-Nav-logo svg {
    fill: currentColor !important;
    stroke: currentColor !important;
    color: inherit !important;
  }

  .cng-Nav-link svg {
    margin-inline-end: 0.5rem;
  }

  .cng-Nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    color: var(--cng-color-text);
    transition: color var(--cng-transition-fast);
  }

  .cng-Nav-toggle:hover {
    color: var(--cng-color-accent);
  }

  .cng-Nav-toggle:focus-visible {
    outline: 2px solid var(--cng-color-accent);
    outline-offset: 2px;
    border-radius: var(--cng-radius-sm);
  }

  .cng-Nav-menu {
    display: flex;
    flex-direction: column;
    gap: var(--cng-space-sm);
    padding: var(--cng-space-lg);
    background-color: var(--cng-color-bg-elevated);
    border: 1px solid var(--cng-color-border);
    border-radius: var(--cng-radius-lg);
    box-shadow: var(--cng-shadow-xl);
    min-width: 250px;
  }

  /* When using the native Popover API, hide the menu by default until the popover is opened. */
  .cng-Nav-menu[popover]:not(:popover-open) {
    display: none;
  }

  .cng-Nav-menu::backdrop {
    background-color: rgb(0 0 0 / 0.5);
    backdrop-filter: blur(4px);
  }

  .cng-Nav-menu--fallback {
    position: fixed;
    top: 0;
    right: -100%;
    height: 100vh;
    width: 80%;
    max-width: 300px;
    z-index: 1000;
    transition: right var(--cng-transition-base);
  }

  .cng-Nav-menu--fallback.cng-Nav-menu--open {
    right: 0;
  }

  .cng-Nav-menu--fallback::before {
    content: "";
    position: fixed;
    inset: 0;
    background-color: rgb(0 0 0 / 0.5);
    backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--cng-transition-base);
  }

  .cng-Nav-menu--fallback.cng-Nav-menu--open::before {
    opacity: 1;
    pointer-events: auto;
  }

  .cng-Nav-link {
    display: block;
    padding: var(--cng-space-sm) var(--cng-space-md);
    border-radius: var(--cng-radius-md);
    transition: background-color var(--cng-transition-fast), color var(--cng-transition-fast);
  }

  .cng-Nav-link:hover {
    background-color: var(--cng-color-bg-card);
    color: var(--cng-color-accent);
  }

  .cng-Nav-link--active {
    background-color: var(--cng-color-primary);
    color: var(--cng-color-text);
  }

  @media (min-width: 768px) {
    .cng-Nav-toggle {
      display: none;
    }

    .cng-Nav-menu,
    .cng-Nav-menu--fallback {
      all: unset;
      /* restore inherited color so icons (fill=currentColor) remain visible */
      color: inherit;
      display: flex;
      flex-direction: row;
      gap: var(--cng-space-md);
    }

    /* On desktop, ensure popover-marked menus are visible and fallback positioning is neutralized */
    .cng-Nav-menu[popover],
    .cng-Nav-menu[popover]:not(:popover-open) {
      display: flex !important;
      position: static !important;
      right: auto !important;
      height: auto !important;
      width: auto !important;
    }

    .cng-Nav-menu--fallback {
      position: static !important;
      right: auto !important;
      height: auto !important;
      width: auto !important;
    }
  }

  .cng-Button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cng-space-xs);
    padding: var(--cng-space-sm) var(--cng-space-lg);
    font-size: var(--cng-font-size-base);
    font-weight: var(--cng-font-weight-semibold);
    border-radius: var(--cng-radius-md);
    transition: all var(--cng-transition-fast);
    cursor: pointer;
  }

  .cng-Button--primary {
    background-color: var(--cng-color-accent);
    color: var(--cng-color-bg);
  }

  .cng-Button--primary:hover {
    background-color: var(--cng-color-accent-dark);
    box-shadow: var(--cng-shadow-glow);
  }

  .cng-Button--secondary {
    background-color: var(--cng-color-primary);
    color: var(--cng-color-text);
  }

  .cng-Button--secondary:hover {
    background-color: var(--cng-color-primary-light);
  }

  .cng-Button--outline {
    background-color: transparent;
    border: 2px solid var(--cng-color-accent);
    color: var(--cng-color-accent);
  }

  .cng-Button--outline:hover {
    background-color: var(--cng-color-accent);
    color: var(--cng-color-bg);
  }

  .cng-Button:focus-visible {
    outline: 2px solid var(--cng-color-accent);
    outline-offset: 2px;
  }

  .cng-Card {
    background-color: var(--cng-color-bg-card);
    border: 1px solid var(--cng-color-border);
    border-radius: var(--cng-radius-lg);
    padding: var(--cng-space-lg);
    transition: transform var(--cng-transition-base), box-shadow var(--cng-transition-base);
  }

  .cng-Card:hover {
    transform: translateY(-2px);
    box-shadow: var(--cng-shadow-lg);
  }

  .cng-Card-header {
    display: flex;
    align-items: center;
    gap: var(--cng-space-md);
    margin-block-end: var(--cng-space-md);
  }

  .cng-Card-icon {
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--cng-color-primary);
    border-radius: var(--cng-radius-md);
    color: var(--cng-color-accent);
  }

  .cng-Card-title {
    font-size: var(--cng-font-size-lg);
    font-weight: var(--cng-font-weight-semibold);
    margin: 0;
  }

  .cng-Card-body {
    color: var(--cng-color-text-muted);
  }

  .cng-Badge {
    display: inline-flex;
    align-items: center;
    gap: var(--cng-space-xs);
    padding: var(--cng-space-xs) var(--cng-space-sm);
    font-size: var(--cng-font-size-xs);
    font-weight: var(--cng-font-weight-semibold);
    border-radius: var(--cng-radius-full);
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }

  .cng-Badge--success {
    background-color: var(--cng-color-success);
    color: var(--cng-color-text);
  }

  .cng-Badge--warning {
    background-color: var(--cng-color-warning);
    color: var(--cng-color-bg);
  }

  .cng-Badge--primary {
    background-color: var(--cng-color-primary);
    color: var(--cng-color-text);
  }

  .cng-Form {
    display: flex;
    flex-direction: column;
    gap: var(--cng-space-md);
  }

  .cng-Form-group {
    display: flex;
    flex-direction: column;
    gap: var(--cng-space-xs);
  }

  .cng-Form-label {
    font-size: var(--cng-font-size-sm);
    font-weight: var(--cng-font-weight-semibold);
    color: var(--cng-color-text);
  }

  .cng-Form-input,
  .cng-Form-textarea,
  .cng-Form-select {
    padding: var(--cng-space-sm) var(--cng-space-md);
    font-size: var(--cng-font-size-base);
    background-color: var(--cng-color-bg-elevated);
    border: 1px solid var(--cng-color-border);
    border-radius: var(--cng-radius-md);
    color: var(--cng-color-text);
    transition: border-color var(--cng-transition-fast), box-shadow var(--cng-transition-fast);
  }

  .cng-Form-input:focus,
  .cng-Form-textarea:focus,
  .cng-Form-select:focus {
    outline: none;
    border-color: var(--cng-color-accent);
    box-shadow: 0 0 0 3px rgb(212 175 55 / 0.2);
  }

  .cng-Form-input:invalid,
  .cng-Form-textarea:invalid {
    border-color: var(--cng-color-error);
  }

  .cng-Form-textarea {
    min-height: 120px;
    resize: vertical;
  }

  .cng-Form-error {
    font-size: var(--cng-font-size-sm);
    color: var(--cng-color-error);
  }

  .cng-Accordion {
    border: 1px solid var(--cng-color-border);
    border-radius: var(--cng-radius-lg);
    overflow: hidden;
  }

  .cng-Accordion-item {
    border-block-end: 1px solid var(--cng-color-border);
  }

  .cng-Accordion-item:last-child {
    border-block-end: none;
  }

  .cng-Accordion-summary {
    padding: var(--cng-space-md) var(--cng-space-lg);
    font-size: var(--cng-font-size-md);
    font-weight: var(--cng-font-weight-semibold);
    cursor: pointer;
    transition: background-color var(--cng-transition-fast);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .cng-Accordion-summary::-webkit-details-marker {
    display: none;
  }

  .cng-Accordion-summary:hover {
    background-color: var(--cng-color-bg-elevated);
  }

  .cng-Accordion-summary::after {
    content: "+";
    font-size: var(--cng-font-size-xl);
    color: var(--cng-color-accent);
    transition: transform var(--cng-transition-base);
  }

  .cng-Accordion-item[open] .cng-Accordion-summary::after {
    transform: rotate(45deg);
  }

  .cng-Accordion-content {
    padding: 0 var(--cng-space-lg) var(--cng-space-md);
    color: var(--cng-color-text-muted);
  }

  .cng-Bar {
    padding: var(--cng-space-md);
    background-color: var(--cng-color-bg-elevated);
    border: 1px solid var(--cng-color-border);
    border-radius: var(--cng-radius-md);
    display: flex;
    align-items: center;
    gap: var(--cng-space-md);
    flex-wrap: wrap;
  }

  .cng-Bar--warning {
    background-color: rgb(212 175 55 / 0.1);
    border-color: var(--cng-color-warning);
  }

  .cng-Bar-icon {
    width: 1.5rem;
    height: 1.5rem;
    color: var(--cng-color-accent);
  }

  .cng-Bar-text {
    flex: 1;
    font-size: var(--cng-font-size-sm);
    color: var(--cng-color-text-muted);
  }

  .cng-Rating {
    display: flex;
    align-items: center;
    gap: var(--cng-space-xs);
  }

  .cng-Rating-star {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--cng-color-accent);
  }

  .cng-Rating-star--empty {
    color: var(--cng-color-text-dim);
  }

  .cng-Rating-value {
    margin-inline-start: var(--cng-space-xs);
    font-size: var(--cng-font-size-sm);
    font-weight: var(--cng-font-weight-semibold);
    color: var(--cng-color-text-muted);
  }
}

.bg {
  background: url('../../img/img1.png') no-repeat;
  background-size: cover;
}