/* doc-project | public/assets/css/shared-cart.css | statut, regroupement des participants, dialogues et QR du panier partagé */
.shared-cart-status {
    margin: 0 auto 1rem;
    width: min(1120px, calc(100% - 2rem));
    display: grid;
    align-items: start;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem;
    border: 1px solid rgba(111, 74, 168, .24);
    border-radius: 18px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 12px 32px rgba(48, 30, 73, .08);
}

.shared-cart-status p {
    margin: .35rem 0 0;
    color: var(--muted, #675f70);
}

.shared-cart-status__actions,
.shared-cart-invite__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}

.shared-cart-participants {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .75rem;
}

.shared-cart-participant {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .65rem;
    border-radius: 999px;
    background: #f3eef9;
    font-size: .88rem;
    font-weight: 700;
}

.shared-cart-participant::before {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: #a8a2ad;
    content: "";
}

.shared-cart-participant.is-online::before {
    background: #2d9b66;
}

.shared-cart-owner-carts {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .75rem;
    width: 100%;
}

.shared-cart-owner-carts[hidden] {
    display: none;
}

.shared-cart-owner-cart {
    min-width: 0;
    padding: .85rem;
    border: 1px solid rgba(111, 74, 168, .18);
    border-radius: 14px;
    background: #faf8fc;
}

.shared-cart-owner-cart h3 {
    margin: 0 0 .55rem;
    font-size: 1rem;
}

.shared-cart-owner-cart ul {
    display: grid;
    gap: .4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.shared-cart-owner-cart li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    font-size: .88rem;
}

.shared-cart-owner-cart li span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.shared-cart-owner-cart__empty {
    margin: 0;
    font-style: italic;
}

.shared-cart-dialog {
    width: min(680px, calc(100% - 1.5rem));
    max-height: calc(100dvh - 1.5rem);
    padding: 0;
    border: 0;
    border-radius: 22px;
    background: #fff;
    color: inherit;
    box-shadow: 0 24px 80px rgba(30, 18, 45, .28);
}

.shared-cart-dialog::backdrop {
    background: rgba(24, 16, 34, .58);
    backdrop-filter: blur(3px);
}

.shared-cart-dialog__shell {
    padding: clamp(1.25rem, 4vw, 2rem);
}

.shared-cart-dialog header p {
    margin-bottom: 0;
    color: var(--muted, #675f70);
}

.shared-cart-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: 1.4rem;
}

.shared-cart-choice {
    position: relative;
    display: grid;
    grid-template-rows: auto auto 1fr;
    justify-items: start;
    gap: .5rem;
    min-height: 150px;
    padding: 1.25rem;
    overflow: hidden;
    border: 1px solid rgba(111, 74, 168, .2);
    border-radius: 18px;
    background: #faf8fc;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition:
        border-color .2s ease,
        background-color .2s ease,
        transform .2s ease;
}

.shared-cart-choice:hover {
    border-color: rgba(111, 74, 168, .52);
    transform: translateY(-2px);
}

.shared-cart-choice:focus-visible {
    outline: 3px solid rgba(111, 74, 168, .28);
    outline-offset: 3px;
}

.shared-cart-choice-scene {
    display: block;
    width: min(100%, 190px);
    height: auto;
    margin: 0 auto .25rem;
    color: #6f4aa8;
}

.shared-cart-choice-scene * {
    transform-box: fill-box;
    transform-origin: center;
}

.shared-cart-choice-scene__surface {
    fill: #fff;
    stroke: currentColor;
    stroke-width: 2.5;
}

.shared-cart-choice-scene__soft {
    fill: #f0e8fb;
    stroke: currentColor;
    stroke-width: 2.5;
}

.shared-cart-choice-scene__accent {
    fill: currentColor;
}

.shared-cart-choice-scene__line {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2.5;
}

.shared-cart-choice-scene__person {
    animation: shared-cart-person-bob 3.6s ease-in-out infinite;
}

.shared-cart-choice-scene__person--two {
    animation-delay: .35s;
}

.shared-cart-choice-scene__person--three {
    animation-delay: .7s;
}

.shared-cart-choice-scene__product {
    opacity: 0;
    animation: shared-cart-product-drop 3.6s ease-in-out infinite;
}

.shared-cart-choice-scene__product--two {
    animation-delay: 1.2s;
}

.shared-cart-choice-scene__product--three {
    animation-delay: 2.4s;
}

.shared-cart-choice-scene__basket {
    animation: shared-cart-basket-bounce 3.6s ease-in-out infinite;
}

.shared-cart-choice-scene__badge {
    animation: shared-cart-badge-pop 3.6s ease-in-out infinite;
}

.shared-cart-choice-scene__group-phone {
    animation: shared-cart-group-phone-bob 4.2s ease-in-out infinite;
}

.shared-cart-choice-scene__group-phone--left {
    animation-delay: .15s;
}

.shared-cart-choice-scene__group-phone--right {
    animation-delay: .3s;
}

.shared-cart-choice-scene__transfer {
    opacity: 0;
}

.shared-cart-choice-scene__transfer--left {
    animation: shared-cart-transfer-left 4.2s ease-in-out infinite;
}

.shared-cart-choice-scene__transfer--right {
    animation: shared-cart-transfer-right 4.2s ease-in-out .9s infinite;
}

.shared-cart-choice-scene__group-check {
    opacity: 0;
    animation: shared-cart-group-check-pop 4.2s ease-in-out infinite;
}

.shared-cart-choice-scene__phone {
    animation: individual-order-phone-pass 3.8s ease-in-out infinite;
}

.shared-cart-choice-scene__bubble {
    opacity: 0;
    animation: individual-order-bubble-send 3.8s ease-in-out infinite;
}

.shared-cart-choice-scene__bubble--two {
    animation-delay: 1.25s;
}

.shared-cart-choice-scene__bubble--three {
    animation-delay: 2.5s;
}

.shared-cart-choice-scene__check {
    opacity: 0;
    animation: individual-order-check-pop 3.8s ease-in-out infinite;
}

@keyframes shared-cart-person-bob {
    0%,
    100% {
        transform: translateY(0);
    }
    12% {
        transform: translateY(-3px);
    }
    24% {
        transform: translateY(0);
    }
}

@keyframes shared-cart-product-drop {
    0%,
    12% {
        opacity: 0;
        transform: translateY(-12px) scale(.75);
    }
    22%,
    36% {
        opacity: 1;
        transform: translateY(10px) scale(1);
    }
    44%,
    100% {
        opacity: 0;
        transform: translateY(18px) scale(.8);
    }
}

@keyframes shared-cart-basket-bounce {
    0%,
    20%,
    35%,
    54%,
    68%,
    86%,
    100% {
        transform: translateY(0) scale(1);
    }
    27%,
    61%,
    78% {
        transform: translateY(-3px) scale(1.04);
    }
}

@keyframes shared-cart-badge-pop {
    0%,
    70% {
        opacity: 0;
        transform: scale(.4);
    }
    80%,
    94% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(.7);
    }
}

@keyframes shared-cart-group-phone-bob {
    0%,
    100% {
        transform: translateY(0);
    }
    18%,
    28% {
        transform: translateY(-2px);
    }
}

@keyframes shared-cart-transfer-left {
    0%,
    10% {
        opacity: 0;
        transform: translateX(-8px) scale(.75);
    }
    20% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    42% {
        opacity: 1;
        transform: translateX(25px) scale(1);
    }
    52%,
    100% {
        opacity: 0;
        transform: translateX(34px) scale(.8);
    }
}

@keyframes shared-cart-transfer-right {
    0%,
    10% {
        opacity: 0;
        transform: translateX(8px) scale(.75);
    }
    20% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
    42% {
        opacity: 1;
        transform: translateX(-25px) scale(1);
    }
    52%,
    100% {
        opacity: 0;
        transform: translateX(-34px) scale(.8);
    }
}

@keyframes shared-cart-group-check-pop {
    0%,
    66% {
        opacity: 0;
        transform: scale(.45) rotate(-12deg);
    }
    76%,
    92% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
    100% {
        opacity: 0;
        transform: scale(.75);
    }
}

@keyframes individual-order-phone-pass {
    0%,
    14%,
    100% {
        transform: translateX(-28px) rotate(-4deg);
    }
    33%,
    48% {
        transform: translateX(0) rotate(2deg);
    }
    67%,
    84% {
        transform: translateX(28px) rotate(-2deg);
    }
}

@keyframes individual-order-bubble-send {
    0%,
    10% {
        opacity: 0;
        transform: translateY(8px) scale(.7);
    }
    20%,
    34% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    45%,
    100% {
        opacity: 0;
        transform: translateY(-10px) scale(.8);
    }
}

@keyframes individual-order-check-pop {
    0%,
    78% {
        opacity: 0;
        transform: scale(.45) rotate(-12deg);
    }
    88%,
    96% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
    100% {
        opacity: 0;
        transform: scale(.75);
    }
}

.shared-cart-choice strong,
.shared-cart-choice span {
    display: block;
}

.shared-cart-choice strong {
    margin: 0;
    font-size: 1.08rem;
}

.shared-cart-choice span {
    color: var(--muted, #675f70);
    line-height: 1.45;
}

.shared-cart-choice--primary {
    border-color: #6f4aa8;
    background: #f0e8fb;
}

@media (prefers-reduced-motion: reduce) {
    .shared-cart-choice {
        transition: none;
    }

    .shared-cart-choice:hover {
        transform: none;
    }

    .shared-cart-choice-scene__person,
    .shared-cart-choice-scene__product,
    .shared-cart-choice-scene__basket,
    .shared-cart-choice-scene__badge,
    .shared-cart-choice-scene__group-phone,
    .shared-cart-choice-scene__transfer,
    .shared-cart-choice-scene__group-check,
    .shared-cart-choice-scene__phone,
    .shared-cart-choice-scene__bubble,
    .shared-cart-choice-scene__check {
        animation: none;
    }

    .shared-cart-choice-scene__product,
    .shared-cart-choice-scene__bubble,
    .shared-cart-choice-scene__transfer {
        opacity: 0;
    }

    .shared-cart-choice-scene__badge,
    .shared-cart-choice-scene__group-check,
    .shared-cart-choice-scene__check {
        opacity: 1;
    }
}

.shared-cart-invite {
    text-align: center;
}

.shared-cart-qr {
    display: grid;
    width: 220px;
    max-width: 70vw;
    aspect-ratio: 1;
    margin: 1.25rem auto;
    overflow: hidden;
    place-items: center;
    border: 10px solid #fff;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 28px rgba(38, 24, 57, .12);
}

.shared-cart-qr canvas,
.shared-cart-qr img {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

.shared-cart-qr__loading {
    max-width: 12rem;
    color: var(--muted, #675f70);
    font-size: .85rem;
    text-align: center;
}

.shared-cart-qr-error {
    margin: -.5rem auto 1rem;
    max-width: 28rem;
    color: var(--danger, #a93636);
    font-size: .85rem;
}

.shared-cart-link-field {
    display: grid;
    gap: .45rem;
    text-align: left;
    font-weight: 700;
}

.shared-cart-link-field input {
    width: 100%;
}

.shared-cart-invite__actions {
    justify-content: center;
    margin-top: 1rem;
}

.shared-cart-privacy-note {
    margin: 1rem 0 0;
    color: var(--muted, #675f70);
    font-size: .78rem;
}

.cart-line-owner {
    display: inline-flex;
    margin-bottom: .25rem;
    padding: .2rem .5rem;
    border-radius: 999px;
    background: #f0e8fb;
    color: #5e398d;
    font-size: .76rem;
    font-weight: 800;
}

.cart-line.is-readonly {
    opacity: .82;
}

@media (max-width: 720px) {
    .shared-cart-status {
        grid-template-columns: 1fr;
    }

    .shared-cart-status__actions,
    .shared-cart-owner-carts {
        grid-column: 1;
    }

    .shared-cart-status__actions .button {
        flex: 1 1 auto;
    }

    .shared-cart-choice-grid {
        grid-template-columns: 1fr;
    }

    .shared-cart-choice {
        min-height: 190px;
    }

    .shared-cart-choice-scene {
        width: min(100%, 170px);
    }
}