/* ==========================================================================
   quick_add.css — „Добавено в количката": модалът с препоръки
   (templates/partials/added_to_cart_modal.php) + съобщението (toast) от
   js/quick_add.js. Картите в модала са от css/product_card.css.
   Само токъни от design-tokens.css; бутоните са .sw-btn / .sw-btn--ghost.
   ========================================================================== */

/* ---- Modal ---------------------------------------------------------------- */
.qa-modal .modal-content {
     border: 0;
     border-radius: var(--sw-r-card);
     overflow: hidden;
     font-family: var(--sw-font);
}
.qa-top {
     flex-shrink: 0;
     background: var(--sw-bg);
     border-bottom: 1px solid var(--sw-line);
     padding: 18px 24px 20px;
}
.qa-head {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 16px;
}
.qa-head__icon {
     width: 28px;
     height: 28px;
     border-radius: var(--sw-r-pill);
     display: grid;
     place-items: center;
     background: var(--sw-tint-green);
     color: var(--sw-success);
     font-size: var(--sw-fs-sm);
     flex-shrink: 0;
}
.qa-head__title {
     margin: 0;
     font-size: var(--sw-fs-xl);
     font-weight: 700;
     color: var(--sw-ink);
}
.qa-close {
     margin-left: auto;
     width: 36px;
     height: 36px;
     border: 0;
     border-radius: var(--sw-r-btn);
     background: transparent;
     color: var(--sw-grey);
     font-size: var(--sw-fs-lg);
     cursor: pointer;
     transition: background .15s ease, color .15s ease;
}
.qa-close:hover { background: var(--sw-bg-soft); color: var(--sw-ink); }
.qa-close:focus { outline: none; }
.qa-close:focus-visible { outline: 2px solid var(--sw-purple); outline-offset: 2px; }

.qa-added {
     display: flex;
     align-items: center;
     gap: 14px;
}
.qa-added__img {
     width: 64px;
     height: 64px;
     object-fit: contain;
     flex-shrink: 0;
     border: 1px solid var(--sw-line);
     border-radius: var(--sw-r-sm);
     padding: 4px;
     background: var(--sw-bg);
}
.qa-added__info {
     display: flex;
     flex-direction: column;
     gap: 2px;
     min-width: 0;
}
.qa-added__name {
     font-size: var(--sw-fs-md);
     font-weight: 600;
     color: var(--sw-ink);
     line-height: 1.35;
}
.qa-added__price {
     font-size: var(--sw-fs-lg);
     font-weight: 800;
     color: var(--sw-price);
}
.qa-added__actions {
     margin-left: auto;
     display: flex;
     gap: 10px;
     flex-shrink: 0;
}

.qa-body {
     background: var(--sw-bg-soft);
     padding: 20px 24px 24px;
}
.qa-reco-title {
     margin: 0 0 12px;
     font-size: var(--sw-fs-lg);
     font-weight: 700;
     color: var(--sw-ink);
}
.qa-tabs {
     display: flex;
     gap: 8px;
     overflow-x: auto;
     padding-bottom: 4px;
     margin-bottom: 12px;
     scrollbar-width: none;
}
.qa-tabs::-webkit-scrollbar { display: none; }
.qa-tabs .sw-pill { flex-shrink: 0; white-space: nowrap; }
.qa-tabs .sw-pill:focus { outline: none; }
.qa-tabs .sw-pill:focus-visible { outline: 2px solid var(--sw-purple); outline-offset: 2px; }
.qa-panel[hidden] { display: none; }

@media (max-width: 767px) {
     .qa-modal .modal-dialog { margin: 8px; }
     .qa-top { padding: 14px 16px 16px; }
     .qa-head { margin-bottom: 12px; }
     .qa-head__title { font-size: var(--sw-fs-lg); }
     .qa-added { flex-wrap: wrap; gap: 12px; }
     .qa-added__img { width: 52px; height: 52px; }
     .qa-added__info { flex: 1; }
     .qa-added__name { font-size: var(--sw-fs-sm); }
     .qa-added__price { font-size: var(--sw-fs-base); }
     /* двата бутона един до друг на цял ред (components.css ги прави 100% под 767px) */
     .qa-added__actions { margin-left: 0; width: 100%; }
     .qa-added__actions > * { flex: 1; width: auto; padding: 11px 12px; font-size: var(--sw-fs-sm); }
     .qa-body { padding: 14px 12px 16px; }
}

/* ---- Toast ---------------------------------------------------------------- */
.qa-toasts {
     position: fixed;
     top: calc(var(--sw-header-h, 72px) + 16px);
     right: 16px;
     z-index: 1300;          /* над хедъра (1200) и над bootstrap модала (1050) */
     display: flex;
     flex-direction: column;
     gap: 10px;
     width: 360px;
     max-width: calc(100vw - 32px);
     pointer-events: none;
}
.qa-toast {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 12px 14px;
     background: var(--sw-bg);
     border: 1px solid var(--sw-line);
     border-left: 4px solid var(--sw-success);
     border-radius: var(--sw-r-btn);
     box-shadow: var(--sw-sh-lg);
     font-family: var(--sw-font);
     pointer-events: auto;
     opacity: 0;
     transform: translateY(-8px);
     transition: opacity .2s ease, transform .2s ease;
}
.qa-toast.is-visible { opacity: 1; transform: none; }
.qa-toast--error { border-left-color: var(--sw-danger); }
.qa-toast__img {
     width: 44px;
     height: 44px;
     object-fit: contain;
     flex-shrink: 0;
     border-radius: var(--sw-r-sm);
}
.qa-toast__icon {
     width: 32px;
     height: 32px;
     flex-shrink: 0;
     border-radius: var(--sw-r-pill);
     display: grid;
     place-items: center;
     font-size: var(--sw-fs-sm);
     background: var(--sw-tint-green);
     color: var(--sw-success);
}
.qa-toast--error .qa-toast__icon { background: var(--sw-tint-red); color: var(--sw-danger); }
.qa-toast__text {
     display: flex;
     flex-direction: column;
     min-width: 0;
     flex: 1;
}
.qa-toast__title {
     font-size: var(--sw-fs-sm);
     font-weight: 700;
     color: var(--sw-ink);
}
.qa-toast--error .qa-toast__title { color: var(--sw-danger); }
.qa-toast__msg {
     font-size: var(--sw-fs-xs);
     color: var(--sw-grey);
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
}
.qa-toast--error .qa-toast__msg { white-space: normal; }
.qa-toast__link {
     flex-shrink: 0;
     font-size: var(--sw-fs-xs);
     font-weight: 700;
     color: var(--sw-purple);
     text-decoration: none;
     white-space: nowrap;
}
.qa-toast__link:hover { color: var(--sw-purple-d); text-decoration: underline; }

/* мобилно: долу, на цял ред - за палеца */
@media (max-width: 767px) {
     .qa-toasts {
          top: auto;
          bottom: 16px;
          left: 16px;
          right: 16px;
          width: auto;
          max-width: none;
     }
     .qa-toast { transform: translateY(8px); }
}

@media (prefers-reduced-motion: reduce) {
     .qa-toast, .qa-toast.is-visible { transition: opacity .2s ease; transform: none; }
}