﻿
:root {
      --carerp-qamenu-accent: #635bff;
      --carerp-qamenu-accent-2: #9b6cff;
      --carerp-qamenu-surface: rgba(255, 255, 255, .72);
      --carerp-qamenu-text: #20243a;
      --carerp-qamenu-muted: #6b7189;
      --carerp-qamenu-border: rgba(255, 255, 255, .8);
      --carerp-qamenu-ease: cubic-bezier(.2, .8, .2, 1);
    }

    * { box-sizing: border-box; }



    .carerp-qamenu {
      --direction: 1;
      --toggle-tilt: 3deg;
      --icon-tilt: -7deg;
      position: relative;
      width: min(100%, 100%);
      direction: inherit;
    }

    .carerp-qamenu:dir(rtl) {
      --direction: -1;
      --toggle-tilt: -3deg;
      --icon-tilt: 7deg;
    }

    .carerp-qamenu__toggle {
      display: none;
      width: 54px;
      height: 54px;
      margin-inline-start: auto;
      padding: 0;
      place-items: center;
      border: 1px solid var(--carerp-qamenu-border);
      border-radius: 17px;
      color: #fff;
      background: linear-gradient(135deg, var(--carerp-qamenu-accent), var(--carerp-qamenu-accent-2));
      box-shadow: 0 14px 32px rgba(99, 91, 255, .32), inset 0 1px rgba(255, 255, 255, .3);
      cursor: pointer;
      transition: transform 260ms var(--carerp-qamenu-ease), box-shadow 260ms var(--carerp-qamenu-ease);
    }

    .carerp-qamenu__toggle:hover {
      transform: translateY(-3px) rotate(var(--toggle-tilt));
      box-shadow: 0 18px 38px rgba(99, 91, 255, .4), inset 0 1px rgba(255, 255, 255, .3);
    }

    .carerp-qamenu__toggle:active { transform: scale(.94); }

    .carerp-qamenu__menu-icon,
    .carerp-qamenu__menu-icon::before,
    .carerp-qamenu__menu-icon::after {
      width: 22px;
      height: 2px;
      border-radius: 999px;
      background: currentColor;
      transition: transform 320ms var(--carerp-qamenu-ease), opacity 220ms ease;
    }

    .carerp-qamenu__menu-icon { position: relative; }
    .carerp-qamenu__menu-icon::before,
    .carerp-qamenu__menu-icon::after {
      content: "";
      position: absolute;
      inset-inline-start: 0;
    }
    .carerp-qamenu__menu-icon::before { transform: translateY(-7px); }
    .carerp-qamenu__menu-icon::after { transform: translateY(7px); }

    .carerp-qamenu--open .carerp-qamenu__menu-icon { background: transparent; }
    .carerp-qamenu--open .carerp-qamenu__menu-icon::before { transform: rotate(45deg); }
    .carerp-qamenu--open .carerp-qamenu__menu-icon::after { transform: rotate(-45deg); }

    .carerp-qamenu__list {
      margin: 0;
      padding: 12px;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 10px;
      border: 1px solid var(--carerp-qamenu-border);
      border-radius: 24px;
      background: var(--carerp-qamenu-surface);
      width:100%;
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      list-style: none;
    }

    .carerp-qamenu__item {
      flex: 1 1 0;
      min-width: 0;
      opacity: 0;
      transform: translateY(12px) scale(.97);
      animation: carerp-qamenu-enter 480ms var(--carerp-qamenu-ease) forwards;
      animation-delay: calc(var(--carerp-qamenu-index) * 70ms);
    }

    .carerp-qamenu__button {
      position: relative;
      isolation: isolate;
      width: 100%;
      min-height: 62px;
      padding-block: 10px;
      padding-inline: 14px 48px;
      overflow: hidden;
      display: flex;
      align-items: center;
      gap: 13px;
      border: 1px solid rgba(81, 86, 112, .1);
      border-radius: 16px;
      color: var(--carerp-qamenu-text);
      background: rgba(255, 255, 255, .66);
      box-shadow: 0 7px 18px rgba(36, 39, 62, .07), inset 0 1px rgba(255, 255, 255, .9);
      font: inherit;
      text-decoration: none;
      text-align: start;
      cursor: pointer;
      transition: color 300ms ease, transform 300ms var(--carerp-qamenu-ease),
                  border-color 300ms ease, box-shadow 300ms ease;
    }

    .carerp-qamenu__button::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(120deg, var(--carerp-qamenu-item-color), var(--carerp-qamenu-item-color-2));
      transform: scaleX(.04);
      transform-origin: right center;
      transition: transform 420ms var(--carerp-qamenu-ease);
    }

    .carerp-qamenu:dir(rtl) .carerp-qamenu__button::before { transform-origin: left center; }

    .carerp-qamenu__button::after {
      content: "\2192";
      position: absolute;
      inset-inline-end: 18px;
      font-size: 1.2rem;
      opacity: .38;
      transition: transform 320ms var(--carerp-qamenu-ease), opacity 320ms ease;
    }

    .carerp-qamenu__button:hover,
    .carerp-qamenu__button--active,
    .carerp-qamenu__button:focus-visible {
      color: #fff;
      border-color: transparent;
      outline: none;
      transform: translateX(calc(var(--direction, 1) * 7px));
      box-shadow: 0 14px 28px color-mix(in srgb, var(--carerp-qamenu-item-color) 32%, transparent);
    }

    .carerp-qamenu__button:hover::before,
    .carerp-qamenu__button--active::before,
    .carerp-qamenu__button:focus-visible::before {
      transform: scaleX(1);
      transform-origin: left center;
    }

    .carerp-qamenu:dir(rtl) .carerp-qamenu__button:hover::before,
    .carerp-qamenu:dir(rtl) .carerp-qamenu__button--active::before,
    .carerp-qamenu:dir(rtl) .carerp-qamenu__button:focus-visible::before {
      transform-origin: right center;
    }

    .carerp-qamenu__button:hover::after,
    .carerp-qamenu__button--active::after,
    .carerp-qamenu__button:focus-visible::after {
      opacity: 1;
      transform: translateX(calc(var(--direction, 1) * 4px));
    }

    .carerp-qamenu:dir(rtl) .carerp-qamenu__button::after { content: "\2190"; }
    .carerp-qamenu__button:active { transform: scale(.97); }

    .carerp-qamenu__icon {
      flex: 0 0 auto;
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      color: var(--carerp-qamenu-item-color);
      background: color-mix(in srgb, var(--carerp-qamenu-item-color) 12%, #fff);
      transition: color 300ms ease, background 300ms ease, transform 380ms var(--carerp-qamenu-ease);
    }

    .carerp-qamenu__button:hover .carerp-qamenu__icon,
    .carerp-qamenu__button--active .carerp-qamenu__icon,
    .carerp-qamenu__button:focus-visible .carerp-qamenu__icon {
      color: #fff;
      background: rgba(255, 255, 255, .18);
      transform: rotate(var(--icon-tilt)) scale(1.08);
    }

    .carerp-qamenu__icon svg {
      width: 20px;
      height: 20px;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    .carerp-qamenu__content { display: grid; gap: 2px; }
    .carerp-qamenu__label { font-weight: 750; font-size:1rem !important; } 
    .carerp-qamenu__description { color: var(--carerp-qamenu-muted); font-size: .78rem; }
    .carerp-qamenu__button:hover .carerp-qamenu__description,
    .carerp-qamenu__button--active .carerp-qamenu__description,
    .carerp-qamenu__button:focus-visible .carerp-qamenu__description { color: rgba(255, 255, 255, .78); }

    @keyframes carerp-qamenu-enter {
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @media (max-width: 640px) {
      body { align-items: start; justify-items: end; }
      .carerp-qamenu { width: min(360px, 100%); }
      .carerp-qamenu__toggle { display: grid; }

      .carerp-qamenu__list {
        position: absolute;
        inset-block-start: 66px;
        inset-inline-end: 0;
        z-index: 10;
        width: 100%;
        display: flex;
        flex-direction: column;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-12px) scale(.97);
        transform-origin: top right;
        transition: opacity 260ms ease, visibility 260ms ease, transform 320ms var(--carerp-qamenu-ease);
      }

      .carerp-qamenu:dir(rtl) .carerp-qamenu__list { transform-origin: top left; }

      .carerp-qamenu--open .carerp-qamenu__list {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0) scale(1);
      }

      .carerp-qamenu__item {
        opacity: 1;
        transform: none;
        animation: none;
      }

      .carerp-qamenu--open .carerp-qamenu__item {
        animation: carerp-qamenu-enter 420ms var(--carerp-qamenu-ease) both;
        animation-delay: calc(var(--carerp-qamenu-index) * 55ms);
      }

      .carerp-qamenu__button { min-height: 68px; }
      .carerp-qamenu__button {
        height: 100%;
        padding-block: 10px;
        padding-inline: 14px 48px;
        flex-direction: row;
        justify-content: flex-start;
        text-align: start;
      }

      .carerp-qamenu__button::after { display: block; }
      .carerp-qamenu__content { justify-items: start; }
      .carerp-qamenu__button:hover { transform: none; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-delay: 0ms !important;
        transition-duration: .01ms !important;
      }
    }
	