/* Scoped to the picnic form; no shared member cards or layouts are affected. */
.picnic-member-search { max-width: 360px; }
.picnic-member-card {
    position: relative;
    width: 100%;
    max-width: 360px;
    overflow: hidden;
    border: 1px solid #e4e9ee;
    border-radius: 14px;
    background: #fbfcfe;
    box-shadow: 0 4px 10px rgb(23 42 66 / 10%);
}
.picnic-member-card__cover {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    height: 96px;
    padding: 12px;
    background: linear-gradient(155deg, #254571 0%, #4b6581 48%, #4ca523 100%);
}
.picnic-member-card__badge {
    max-width: 80%;
    padding: 4px 11px;
    border-radius: 6px;
    background: #f5f7fa;
    color: #124c93;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    overflow-wrap: anywhere;
}
.picnic-member-card__blood { color: #e33e42; white-space: nowrap; }
.picnic-member-card__avatar {
    position: absolute;
    top: 48px;
    left: 18px;
    display: grid;
    place-items: center;
    width: 100px;
    height: 100px;
    border: 4px solid white;
    border-radius: 50%;
    background: #e8eef5;
    box-shadow: 0 3px 8px rgb(23 42 66 / 18%);
    overflow: hidden;
    color: #58718d;
    font-size: 48px;
}
.picnic-member-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.picnic-member-card__body { padding: 66px 20px 24px; }
.picnic-member-card__name { margin: 0 0 5px; color: #12273e; font-size: 20px; font-weight: 700; overflow-wrap: anywhere; }
.picnic-member-card__id { margin: 0 0 8px; color: #124c93; font-size: 13px; letter-spacing: .6px; }
.picnic-member-card__occupation { margin: 0; color: #124c93; font-size: 14px; }
.picnic-member-card__contacts { margin-top: 16px; color: #67809b; font-size: 14px; }
.picnic-member-card__contacts p { display: flex; gap: 9px; align-items: baseline; margin: 0 0 7px; overflow-wrap: anywhere; }
.picnic-member-card__contacts i { flex-shrink: 0; color: #4da52a; }
.picnic-member-card__contacts span { min-width: 0; }

.picnic-registration { background: #f3f7f6; }
.picnic-event-hero, .picnic-form { width: 100%; max-width: 780px; margin-inline: auto; }
.picnic-event-hero {
    position: relative;
    overflow: hidden;
    padding: 32px 20px 38px;
    margin-bottom: 24px;
    border: 1px solid #dcebd8;
    border-radius: 24px;
    background: radial-gradient(ellipse at 12% 0%, #fff6cf 0%, transparent 55%),
        linear-gradient(125deg, #f8fcf0, #e5f6ef 60%, #eaf6fc);
    color: #275448;
    box-shadow: 0 6px 20px rgb(68 113 77 / 7%);
}
/* A subtle picnic-blanket edge keeps the decoration away from the text. */
.picnic-event-hero::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 10px;
    background-color: #edf5df;
    background-image: repeating-linear-gradient(90deg, transparent 0 14px, #cfe4be80 14px 28px),
        repeating-linear-gradient(0deg, transparent 0 5px, #cfe4be80 5px 10px);
    pointer-events: none;
}
.picnic-event-hero__emoji { display: block; margin-bottom: 14px; font-size: clamp(25px, 5vw, 36px); letter-spacing: 3px; line-height: 1.6; }
.picnic-event-hero h1 { color: #24523f; font-size: clamp(24px, 4vw, 34px); font-weight: 750; overflow-wrap: anywhere; }
.picnic-event-hero p { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; margin: 14px 0 0; color: #3e6559; }
.picnic-event-hero p span { padding: 6px 12px; border: 1px solid #d9e9dd; border-radius: 20px; background: rgb(255 255 255 / 70%); font-size: 14px; }
.picnic-form { display: grid; gap: 22px; }
.picnic-form-card { padding: clamp(18px, 4vw, 28px); border: 1px solid #e2ebe6; border-radius: 20px; background: white; box-shadow: 0 5px 18px rgb(22 53 47 / 5%); }
.picnic-form-card h2 { margin: 0 0 18px; text-align: center; color: #193c4d; font-size: 20px; font-weight: 700; }
.picnic-section-hint { margin: -8px 0 20px; text-align: center; color: #6b7f87; font-size: 14px; }
.picnic-form .picnic-member-card { margin: 22px auto 0; }
.picnic-participant-grid { display: grid; gap: 12px; }
.picnic-quantity-row { display: flex; gap: 8px; align-items: center; padding: 14px; border: 1px solid #e3e9ed; border-radius: 14px; background: #f9fbfc; transition: background .18s, border-color .18s; }
.picnic-quantity-row.is-selected { border-color: #61b798; background: #f0faf5; }
.picnic-quantity-row label { flex: 1; min-width: 0; color: #244455; overflow-wrap: anywhere; }
.picnic-quantity-row label small { display: block; margin-top: 3px; color: #73858e; font-size: 12px; }
.picnic-stepper { flex-shrink: 0; width: 36px; height: 36px; border: 1px solid #c9dfd7; border-radius: 10px; background: white; color: #127751; font-size: 22px; line-height: 1; transition: background .18s; }
.picnic-stepper:hover:not(:disabled) { background: #dff4e9; }
.picnic-stepper:disabled { opacity: .4; cursor: not-allowed; }
.picnic-stepper:focus-visible, .participant-quantity:focus-visible { outline: 3px solid #8bc9ed; outline-offset: 2px; }
.picnic-quantity-row .participant-quantity { width: 48px; height: 36px; padding: 0; border: 0; border-radius: 6px; background: transparent; text-align: center; font-weight: 700; color: #234c3d; appearance: textfield; -moz-appearance: textfield; }
.picnic-quantity-row .participant-quantity::-webkit-inner-spin-button { -webkit-appearance: none; }
.picnic-total { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 18px; padding: 16px; border-radius: 12px; background: #eaf6f0; color: #20583e; }
.picnic-total > span:last-child strong { font-size: 22px; }
.picnic-form .form-control, .picnic-form .form-select { border-radius: 10px; }
.picnic-submit { min-width: 250px; max-width: 100%; padding: 14px 24px; border-radius: 14px; font-weight: 600; box-shadow: 0 5px 14px rgb(13 110 253 / 18%); }
@media (prefers-reduced-motion: reduce) { .picnic-quantity-row, .picnic-stepper { transition: none; } }