/* SDI Registrations — M13 public Event registration frontend. */

.sdi-event-registration-form .sdi-event-form-header {
    margin-bottom: 18px;
    padding: 20px 22px;
    border: 1px solid var(--sdi-form-sand);
    border-radius: 10px;
    background: var(--sdi-form-soft);
}

.sdi-event-registration-form .sdi-event-form-kicker {
    margin: 0 0 4px;
    color: var(--sdi-form-bordeaux);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.sdi-event-registration-form .sdi-event-form-header h2,
.sdi-event-registration-form .sdi-event-price-summary h3,
.sdi-event-registration-form .sdi-event-conditions h3 {
    margin: 0 0 10px;
    color: var(--sdi-form-bordeaux);
    font-family: Belleza, sans-serif;
    font-weight: 400;
}

.sdi-event-registration-form .sdi-event-form-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
}

.sdi-event-registration-form .sdi-event-session-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.sdi-event-registration-form .sdi-event-session-card {
    display: grid;
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--sdi-form-grey);
    border-radius: 8px;
    background: var(--sdi-form-white);
    cursor: pointer;
    transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}

.sdi-event-registration-form .sdi-event-session-card:hover,
.sdi-event-registration-form .sdi-event-session-card.is-selected {
    border-color: var(--sdi-form-bordeaux);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--sdi-form-bordeaux) 12%, transparent);
}

.sdi-event-registration-form .sdi-event-session-card.is-selected {
    background: color-mix(in srgb, var(--sdi-form-blush) 10%, var(--sdi-form-white));
}

.sdi-event-registration-form .sdi-event-session-select {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.sdi-event-registration-form .sdi-event-session-details,
.sdi-event-registration-form .sdi-event-session-prices {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 14px;
    color: var(--sdi-form-grey-dark);
}

.sdi-event-registration-form .sdi-event-session-prices {
    padding-top: 8px;
    border-top: 1px solid var(--sdi-form-sand);
}

.sdi-event-registration-form .sdi-event-bundle-hints {
    margin-top: 16px;
    padding: 12px 14px;
    border-left: 3px solid var(--sdi-form-gold);
    background: var(--sdi-form-soft);
}

.sdi-event-registration-form .sdi-event-bundle-hints p {
    margin: 4px 0 0;
}

.sdi-event-registration-form .sdi-event-price-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.sdi-event-registration-form .sdi-event-price-grid > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--sdi-form-sand);
    border-radius: 8px;
    background: var(--sdi-form-soft);
}

.sdi-event-registration-form .sdi-event-price-grid strong {
    font-size: 1.2rem;
}

.sdi-event-registration-form [hidden] {
    display: none !important;
}

.sdi-event-registration-form .sdi-event-development-note {
    display: block;
    max-width: 650px;
    margin-top: 8px;
    color: var(--sdi-form-grey-dark);
}

.sdi-event-registration-form .sdi-form-submit button:disabled {
    cursor: not-allowed;
    opacity: .55;
}

@media (max-width: 720px) {
    .sdi-event-registration-form .sdi-event-session-grid,
    .sdi-event-registration-form .sdi-event-price-grid {
        grid-template-columns: 1fr;
    }

    .sdi-event-registration-form .sdi-event-form-meta {
        display: grid;
        gap: 4px;
    }
}

.sdi-event-registration-form .sdi-event-lookup-actions {
    margin-bottom: 10px;
}

.sdi-event-registration-form [data-sdi-event-lookup] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 9px 16px;
    border: 1px solid var(--sdi-form-bordeaux);
    border-radius: 6px;
    background: var(--sdi-form-bordeaux) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.sdi-event-registration-form [data-sdi-event-lookup]:hover:not(:disabled),
.sdi-event-registration-form [data-sdi-event-lookup]:focus-visible {
    background: color-mix(in srgb, var(--sdi-form-bordeaux) 88%, #000) !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff;
}

.sdi-event-registration-form [data-sdi-event-lookup]:disabled {
    cursor: wait;
    opacity: .6;
}

.sdi-event-registration-form [data-sdi-event-lookup-feedback] {
    margin-top: 10px;
    padding: 10px 12px;
    border-left: 3px solid var(--sdi-form-grey);
    background: var(--sdi-form-soft);
}

.sdi-event-registration-form [data-sdi-event-lookup-feedback].is-success {
    border-left-color: #2f7d32;
}

.sdi-event-registration-form [data-sdi-event-lookup-feedback].is-error {
    border-left-color: var(--sdi-form-bordeaux);
}

.sdi-event-registration-form [data-sdi-event-lookup-feedback].is-info {
    border-left-color: var(--sdi-form-gold);
}

.sdi-event-registration-form .sdi-event-recognition-summary {
    border-left: 3px solid #2f7d32;
}

.sdi-event-registration-form .sdi-event-recognition-summary h3 {
    margin: 0 0 8px;
    color: var(--sdi-form-bordeaux);
    font-family: Belleza, sans-serif;
    font-weight: 400;
}

.sdi-event-registration-form .sdi-event-recognition-summary p {
    margin-top: 6px;
    margin-bottom: 6px;
}

.sdi-event-registration-form .sdi-event-recognition-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    color: var(--sdi-form-grey-dark);
}

.sdi-event-registration-form .sdi-form-feedback {
    margin: 0 0 18px;
    padding: 14px 16px;
    border-left: 4px solid var(--sdi-form-gold);
    background: var(--sdi-form-soft);
}

.sdi-event-registration-form .sdi-form-feedback-error {
    border-left-color: var(--sdi-form-bordeaux);
}

.sdi-event-registration-form .sdi-form-feedback-success {
    border-left-color: #2f7d32;
}

.sdi-event-registration-form .sdi-form-feedback h3 {
    margin: 0 0 8px;
    color: var(--sdi-form-bordeaux);
    font-family: Belleza, sans-serif;
    font-weight: 400;
}

.sdi-event-registration-form .sdi-form-feedback ul {
    margin-bottom: 0;
}