/**
 * Event Ticketing — Checkout CSS
 *
 * Zo min mogelijk eigen stijlen: formulier-elementen erven van het actieve
 * WordPress-thema. Alleen ticketspecifieke onderdelen krijgen eigen styling.
 */

/* ── Wrapper ────────────────────────────────────────────────────────── */

.et-checkout {
    margin: 1.5em 0;
}

/* ── Event meta (datum, locatie, prijs) ─────────────────────────────── */

.et-event-image img {
    width:         100%;
    height:        auto;
    border-radius: 8px;
    margin-bottom: 1em;
    display:       block;
}

.et-event-meta {
    display:     flex;
    flex-wrap:   wrap;
    gap:         10px 20px;
    margin:      0 0 1.5em;
    font-size:   0.9em;
    color:       inherit;
    opacity:     .8;
}

.et-event-meta__item {
    display:     flex;
    align-items: center;
    gap:         5px;
}

.et-event-meta__item--price {
    font-weight: 700;
    opacity:     1;
}

/* ── Formulier ──────────────────────────────────────────────────────── */

.et-checkout-form {
    /* Geen eigen achtergrond, padding of border:
       het thema bepaalt de pagina-layout */
}

.et-form-row {
    margin-bottom: 1em;
}

.et-form-row--half {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   1em;
}

@media (max-width: 600px) {
    .et-form-row--half { grid-template-columns: 1fr; }
}

.et-label {
    display:       block;
    font-weight:   600;
    margin-bottom: .3em;
    font-size:     .9em;
}

/* Input velden: erven thema-stijlen, voeg alleen focus-ring toe */
.et-input {
    width:         100%;
    /* Thema levert border, background, padding, font */
}
.et-input:focus {
    outline:    2px solid var(--wp--preset--color--primary, #0073aa);
    outline-offset: 1px;
}

/* Aantal + live prijs naast elkaar */
.et-quantity-wrapper {
    display:     flex;
    align-items: center;
    gap:         12px;
}

.et-input--quantity {
    width:      80px;
    flex-shrink: 0;
}

.et-total-price {
    font-size:   1.1em;
    font-weight: 700;
    color:       var(--wp--preset--color--primary, inherit);
    transition:  color .15s;
}

/* Privacy checkbox */
.et-form-group--checkbox label {
    display:     flex;
    align-items: flex-start;
    gap:         8px;
    font-size:   .85em;
    cursor:      pointer;
}

.et-form-group--checkbox input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
}

/* ── Knop ────────────────────────────────────────────────────────────── */

.et-btn-primary {
    /* Gebruik de primaire knoopstijl van het thema als startpunt */
    background-color: var(--wp--preset--color--primary, #0073aa);
    color:            #fff;
    border:           none;
    padding:          .7em 1.6em;
    font-size:        1em;
    font-family:      inherit;
    font-weight:      600;
    border-radius:    4px;
    cursor:           pointer;
    transition:       opacity .15s, background-color .15s;
    display:          inline-flex;
    align-items:      center;
    gap:              8px;
}

.et-btn-primary:hover:not(:disabled) {
    opacity: .88;
}

.et-btn-primary:disabled {
    opacity: .6;
    cursor:  not-allowed;
}

/* ── Foutmeldingen ──────────────────────────────────────────────────── */

.et-form-errors {
    background:    #fce8e6;
    color:         #c0392b;
    border:        1px solid #f5c6c2;
    border-radius: 6px;
    padding:       10px 14px;
    margin-bottom: 1em;
    font-size:     .9em;
}

.et-form-errors p {
    margin: .25em 0;
}
.et-form-errors p:first-child { margin-top: 0; }
.et-form-errors p:last-child  { margin-bottom: 0; }

/* ── Status-mededeling ──────────────────────────────────────────────── */

.et-notice {
    padding:       12px 16px;
    border-radius: 6px;
    font-size:     .95em;
    margin:        1em 0;
}

.et-notice--warning {
    background: #fff8e5;
    color:      #856404;
    border:     1px solid #ffeeba;
}

.et-notice--success {
    background: #f0faf3;
    color:      #1a7f37;
    border:     1px solid #a3d9b1;
}