.rp-group-public {
    --group-primary: #14799d;
    --group-dark: #16465a;
    --group-border: #d5e4eb;
    width: min(1180px, calc(100% - 36px));
    box-sizing: border-box;
    margin: 26px auto 32px;
    overflow: hidden;
    border: 1px solid var(--group-border);
    border-radius: 20px;
    background: #fff;
    color: #263e49;
    box-shadow: 0 16px 40px rgba(20, 78, 103, .1);
}

.rp-group-public-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 25px 28px;
    background: linear-gradient(135deg, #f5fbfd 0%, #eaf6fa 100%);
    border-bottom: 1px solid var(--group-border);
}

.rp-group-eyebrow {
    display: block;
    margin-bottom: 7px;
    color: var(--group-primary);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.rp-group-public-header h2 {
    margin: 0 0 6px;
    color: #123b4d;
    font-size: clamp(24px, 3vw, 34px);
    line-height: 1.12;
}

.rp-group-public-header p {
    max-width: 760px;
    margin: 0;
    color: #5f7580;
    font-size: 15px;
    line-height: 1.45;
}

.rp-group-progress {
    min-width: 112px;
    padding: 13px 16px;
    border: 1px solid #c7dfe8;
    border-radius: 14px;
    background: rgba(255,255,255,.82);
    text-align: center;
}

.rp-group-progress strong {
    display: block;
    color: var(--group-primary);
    font-size: 28px;
    line-height: 1;
}

.rp-group-progress span {
    display: block;
    margin-top: 4px;
    color: #687c86;
    font-size: 11px;
    font-weight: 700;
}

.rp-group-public-items {
    display: grid;
    gap: 10px;
    padding: 20px 22px;
}

.rp-group-public-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    min-height: 78px;
    padding: 14px 16px;
    border: 1px solid #dce7ec;
    border-radius: 13px;
    background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.rp-group-public-item.is-selectable:hover,
.rp-group-public-item.is-selected {
    border-color: #66b3cf;
    box-shadow: 0 7px 20px rgba(20, 121, 157, .11);
    transform: translateY(-1px);
}

.rp-group-public-item.is-selected { background: #f3fbfe; }
.rp-group-public-item.is-disabled { background: #fafcfd; }

.rp-group-select { cursor: pointer; }
.rp-group-select input { position: absolute; opacity: 0; pointer-events: none; }

.rp-group-select span,
.rp-group-item-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 94px;
    box-sizing: border-box;
    padding: 9px 11px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
}

.rp-group-select span {
    border: 1px solid #a9cfdd;
    color: #116e91;
    background: #f7fcfe;
}

.rp-group-select input:checked + span {
    border-color: var(--group-primary);
    background: var(--group-primary);
    color: #fff;
}

.rp-group-item-status.is-confirmed { color: #15765f; background: #e6f7f1; }
.rp-group-item-status.is-cart { color: #126f92; background: #e7f4f9; }
.rp-group-item-status.is-pending { color: #98620d; background: #fff5df; }

.rp-group-item-main h3 {
    margin: 0 0 7px;
    color: #173f51;
    font-size: 17px;
}

.rp-group-item-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 16px;
    color: #657983;
    font-size: 13px;
}

.rp-group-item-meta span { display: inline-flex; align-items: center; gap: 6px; }
.rp-group-item-meta i { color: #2a88a8; }

.rp-group-item-price {
    color: #143d4f;
    font-size: 16px;
    white-space: nowrap;
}

.rp-group-public-action {
    position: sticky;
    bottom: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 17px;
    padding: 16px 22px;
    border-top: 1px solid var(--group-border);
    background: rgba(255,255,255,.96);
    box-shadow: 0 -8px 20px rgba(34, 75, 92, .06);
}

#rp-group-selection-count { color: #627781; font-size: 13px; font-weight: 700; }

#rp-group-add-selection {
    min-height: 45px;
    padding: 10px 19px;
    border: 0;
    border-radius: 10px;
    background: linear-gradient(135deg, #16799e, #1096b5);
    color: #fff;
    font-size: 14px;
    font-weight: 850;
    cursor: pointer;
    box-shadow: 0 7px 17px rgba(20, 121, 157, .22);
}

#rp-group-add-selection:disabled { opacity: .6; cursor: wait; }

.rp-group-complete,
.rp-group-public-message {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: 19px 22px 0;
    padding: 16px 18px;
    border: 1px solid #bfe1d7;
    border-radius: 13px;
    background: #edf9f5;
    color: #176d59;
}

.rp-group-complete i,
.rp-group-public-message > i { font-size: 25px; }
.rp-group-complete div { display: grid; gap: 2px; }
.rp-group-complete span { color: #5c796f; font-size: 13px; }

.rp-group-public.is-error { padding: 0 0 20px; }
.rp-group-public.is-error .rp-group-public-message { border-color: #efd2c4; background: #fff6f1; color: #97451f; }
.rp-group-public-message h2 { margin: 0 0 3px; font-size: 20px; }
.rp-group-public-message p { margin: 0; }

#panier-items .group-blockage-item {
    border-left: 4px solid #1685aa;
}

#panier-items .group-blockage-item::after {
    content: "Réservation de groupe";
    display: inline-block;
    margin: 6px 0 0;
    color: #197796;
    font-size: 11px;
    font-weight: 800;
}

@media (max-width: 720px) {
    .rp-group-public { width: min(100% - 20px, 1180px); margin: 14px auto 23px; border-radius: 15px; }
    .rp-group-public-header { align-items: flex-start; padding: 20px 17px; }
    .rp-group-public-header p { font-size: 14px; }
    .rp-group-progress { min-width: 72px; padding: 10px; }
    .rp-group-public-items { padding: 13px; }
    .rp-group-public-item { grid-template-columns: 1fr auto; gap: 10px; padding: 14px; }
    .rp-group-item-control { grid-column: 1 / -1; order: 3; }
    .rp-group-select,
    .rp-group-select span,
    .rp-group-item-status { width: 100%; }
    .rp-group-item-main { min-width: 0; }
    .rp-group-item-meta { display: grid; gap: 5px; }
    .rp-group-public-action { flex-direction: column; align-items: stretch; gap: 8px; padding: 13px; }
    #rp-group-add-selection { width: 100%; }
    #rp-group-selection-count { text-align: center; }
}