/* ===== Sircle Events — Frontend ===== */

/* Grid */
.sircle-events-grid {
    display: grid;
    gap: 24px;
}
.sircle-cols-1 { grid-template-columns: 1fr; }
.sircle-cols-2 { grid-template-columns: repeat(2, 1fr); }
.sircle-cols-3 { grid-template-columns: repeat(3, 1fr); }
.sircle-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
    .sircle-cols-3, .sircle-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .sircle-cols-2, .sircle-cols-3, .sircle-cols-4 { grid-template-columns: 1fr; }
}

/* Kaart */
.sircle-event-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,.08);
    display: flex;
    flex-direction: column;
    transition: transform .2s, box-shadow .2s;
}
.sircle-event-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 24px rgba(0,0,0,.12);
}
.sircle-event-card.sircle-event-full { opacity: .65; }

.sircle-event-img { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.sircle-event-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sircle-full-badge {
    position: absolute; top: 12px; right: 12px;
    background: #c0392b; color: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: .05em;
    padding: 4px 10px; border-radius: 4px;
}

.sircle-event-body { padding: 20px; display: flex; flex-direction: column; flex: 1; }

.sircle-event-date {
    display: block;
    font-size: 13px;
    color: #9a7d4f;
    font-weight: 600;
    letter-spacing: .04em;
    margin-bottom: 8px;
}

.sircle-event-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 16px;
    line-height: 1.3;
    flex: 1;
}
.sircle-event-title a { color: inherit; text-decoration: none; }
.sircle-event-title a:hover { color: #9a7d4f; }

/* Knop */
.sircle-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #5c5042;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .05em;
    padding: 10px 20px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    transition: background .2s;
    align-self: flex-start;
}
.sircle-btn:hover { background: #9a7d4f; color: #fff; }

/* Detail */
.sircle-detail-hero img { width: 100%; max-height: 420px; object-fit: cover; border-radius: 8px; margin-bottom: 24px; }

.sircle-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-bottom: 24px;
    padding: 16px 20px;
    background: #f5f0ea;
    border-radius: 8px;
}
.sircle-meta-item { font-size: 14px; }
.sircle-meta-price { font-size: 18px; }

/* Gallery */
.sircle-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 20px;
}
.sircle-gallery-item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; display: block; }

/* Formulier */
.sircle-booking-form-wrap { max-width: 680px; margin-left: auto; margin-right: auto; }
.sircle-form { display: flex; flex-direction: column; gap: 16px; }
.sircle-form-row { display: flex; gap: 16px; }
.sircle-form-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .sircle-form-two-col { grid-template-columns: 1fr; } }

.sircle-form-field { display: flex; flex-direction: column; gap: 6px; }
.sircle-form-field label { font-size: 14px; font-weight: 600; color: #333; }
.sircle-form-field .req { color: #c0392b; }

.sircle-form input[type="text"],
.sircle-form input[type="email"],
.sircle-form input[type="tel"],
.sircle-form input[type="number"],
.sircle-form select,
.sircle-form textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 15px;
    font-family: inherit;
    transition: border-color .2s;
    box-sizing: border-box;
}
.sircle-form input:focus,
.sircle-form select:focus,
.sircle-form textarea:focus { border-color: #9a7d4f; outline: none; }
.sircle-form textarea { min-height: 100px; resize: vertical; }

.sircle-radio-label,
.sircle-checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 15px; cursor: pointer; }

/* Checkbox group */
.sircle-cbgroup-required { display: none; }
.sircle-form-field .sircle-checkbox-label + .sircle-checkbox-label { margin-top: 6px; }

/* Gateway keuze */
.sircle-gateway-options { display: flex; flex-direction: column; gap: 8px; }
.sircle-gateway-label { display: flex; align-items: center; gap: 8px; font-size: 15px; cursor: pointer; }

/* ── Prijsformules ──────────────────────────────────────────────────── */
.sircle-formulas {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sircle-formula-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border: 1.5px solid #E9DFD4;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .18s, background .18s, box-shadow .18s;
    background: #FAF8F7;
}
.sircle-formula-card:hover {
    border-color: #C4A852;
    background: #FDF8EF;
}
.sircle-formula-card.active,
.sircle-formula-card input:checked ~ * {
    border-color: #C4A852;
    background: #FDF8EF;
    box-shadow: 0 0 0 3px rgba(196,168,82,.12);
}
/* Verberg de native radio */
.sircle-formula-card input[type="radio"] {
    accent-color: #C4A852;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    cursor: pointer;
}
.sircle-formula-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.sircle-formula-name {
    font-size: 15px;
    font-weight: 600;
    color: #333028;
    line-height: 1.3;
}
.sircle-formula-desc {
    font-size: 12px;
    color: #9a9385;
    line-height: 1.4;
}
.sircle-formula-price {
    font-family: 'Trirong', serif;
    font-size: 18px;
    font-weight: 400;
    color: #C4A852;
    letter-spacing: -.3px;
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 500px) {
    .sircle-formula-card { padding: 12px 14px; gap: 10px; }
    .sircle-formula-price { font-size: 16px; }
}

.sircle-form-price-summary {
    font-size: 16px;
    padding: 12px 16px;
    background: #f5f0ea;
    border-radius: 4px;
}

.sircle-btn-submit { margin-top: 8px; font-size: 15px; padding: 14px 28px; }

/* Notices */
.sircle-notice {
    padding: 14px 18px;
    border-radius: 6px;
    font-size: 15px;
    margin-bottom: 16px;
}
.sircle-notice-success  { background: #e8f5e9; border-left: 4px solid #4caf50; }
.sircle-notice-error    { background: #fdecea; border-left: 4px solid #c0392b; color: #c0392b; }
.sircle-notice-pending  { background: #fff8e1; border-left: 4px solid #f39c12; }
.sircle-notice-full     { background: #fdecea; border-left: 4px solid #c0392b; }

/* Bevestigingspagina — legacy */
.sircle-confirmation-table { width: 100%; border-collapse: collapse; margin-top: 20px; }
.sircle-confirmation-table th,
.sircle-confirmation-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid #eee; }
.sircle-confirmation-table th { width: 35%; font-weight: 600; color: #555; }

/* ═══════════════════════════════════════════════════════
   BEVESTIGINGSPAGINA — sircle-confirm-*  (Sircle brand)
   ═══════════════════════════════════════════════════════ */

/* ── Hero — volledige breedte ── */
.sircle-confirm-hero-outer {
    /* Breek uit de theme-container */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    /* Kleuren */
    background: linear-gradient(160deg, #EDE7DC 0%, #F5EFE8 55%, #EAE1D8 100%);
    border-bottom: 2px solid #D9CEC2;
    /* Ruimte */
    padding: 56px 24px 52px;
    margin-bottom: 40px;
    text-align: center;
}
.sircle-confirm-hero-inner {
    max-width: 680px;
    margin: 0 auto;
}

/* Icoon cirkel */
.sircle-confirm-hero-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}
.sircle-confirm-hero-icon svg { width: 28px; height: 28px; }
.sircle-confirm-hero-icon-ok   { background: #C4A852; color: #fff; }
.sircle-confirm-hero-icon-wait { background: #D4A847; color: #fff; }
.sircle-confirm-hero-icon-fail { background: #b44040; color: #fff; }

/* Titel */
.sircle-confirm-hero-title {
    font-family: 'Trirong', Georgia, serif;
    font-size: clamp(26px, 5vw, 38px);
    font-weight: 400;
    color: #333028;
    margin: 0 0 14px;
    letter-spacing: -.5px;
    line-height: 1.2;
}

/* Subtitel */
.sircle-confirm-hero-sub {
    font-family: 'DM Sans', -apple-system, sans-serif;
    font-size: 16px;
    color: #7a7265;
    margin: 0;
    line-height: 1.6;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
}
.sircle-confirm-hero-sub strong { color: #333028; }

/* ── Wrap + kaart ── */
.sircle-confirm-wrap {
    max-width: 780px;
    margin: 0 auto 48px;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: #5E5A4D;
}
.sircle-confirm-card {
    background: #fff;
    border: 1.5px solid #E9DFD4;
    border-radius: 16px;
    box-shadow: 0 4px 28px rgba(51,48,40,.08);
    overflow: hidden;
}

/* ── Event header strip ── */
.sircle-confirm-event-strip {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 32px;
    background: #FAF8F7;
    border-bottom: 1.5px solid #E9DFD4;
    flex-wrap: wrap;
}
.sircle-confirm-event-title {
    font-family: 'Trirong', serif;
    font-size: 19px;
    font-weight: 400;
    color: #333028;
    margin-bottom: 6px;
    letter-spacing: -.3px;
}
.sircle-confirm-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-size: 13px;
    color: #9a9385;
}
.sircle-confirm-ref-badge { text-align: right; flex-shrink: 0; }
.sircle-confirm-ref-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: #C4A852;
    margin-bottom: 5px;
}
.sircle-confirm-ref-code {
    font-family: 'Courier New', monospace;
    font-size: 13px;
    font-weight: 700;
    color: #333028;
    background: #F1EDE4;
    border: 1px solid #E9DFD4;
    padding: 5px 14px;
    border-radius: 8px;
    letter-spacing: .8px;
}

/* ── Gegevens rijen ── */
.sircle-confirm-rows,
.sircle-confirm-answers { padding: 0 32px; }
.sircle-confirm-row {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid #F0EDE8;
}
.sircle-confirm-row:last-child { border-bottom: none; }
.sircle-confirm-lbl {
    flex-shrink: 0;
    width: 140px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #AFAFAC;
}
.sircle-confirm-val {
    font-size: 15px;
    color: #333028;
    flex: 1;
    word-break: break-word;
}
.sircle-confirm-amount {
    font-family: 'Trirong', serif;
    font-size: 20px;
    font-weight: 400;
    color: #C4A852;
    letter-spacing: -.3px;
}
.sircle-confirm-free {
    font-family: 'Trirong', serif;
    font-size: 18px;
    color: #C4A852;
}

/* ── Statusbadge ── */
.sircle-confirm-badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .03em;
}
.sircle-confirm-badge-paid    { background: #EDF7EE; color: #2d6a30; border: 1px solid #c3e6c5; }
.sircle-confirm-badge-pending { background: #FDF6E9; color: #8a6200; border: 1px solid #f0d98c; }
.sircle-confirm-badge-failed  { background: #FDF1F0; color: #8b2020; border: 1px solid #f5c6c6; }

/* ── Antwoorden header ── */
.sircle-confirm-answers-header {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: #C4A852;
    padding: 18px 32px 2px;
    border-top: 1.5px solid #F0EDE8;
    margin-top: 4px;
}

/* ── Footer ── */
.sircle-confirm-actions {
    padding: 24px 32px 28px;
    border-top: 1.5px solid #F0EDE8;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.sircle-confirm-email-note {
    font-size: 13px;
    color: #9a9385;
    margin: 0;
    line-height: 1.55;
    text-align: center;
}
.sircle-confirm-email-note strong { color: #333028; }

/* ── Knoppen ── */
.sircle-confirm-btns {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sircle-confirm-cta {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 28px;
    background: #333028;
    color: #fff !important;
    font-family: 'DM Sans', -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none !important;
    border: none;
    border-radius: 9px;
    cursor: pointer;
    transition: background .2s, transform .15s;
}
.sircle-confirm-cta:hover {
    background: #C4A852;
    transform: translateY(-1px);
}
.sircle-confirm-cta-outline {
    background: transparent;
    color: #5E5A4D !important;
    border: 1.5px solid #C4A852;
}
.sircle-confirm-cta-outline:hover {
    background: #C4A852;
    color: #fff !important;
}

@media (max-width: 640px) {
    .sircle-confirm-hero-outer { padding: 40px 20px 36px; }
    .sircle-confirm-hero-title { font-size: 26px; }
    .sircle-confirm-event-strip { flex-direction: column; gap: 14px; padding: 18px 20px; }
    .sircle-confirm-ref-badge { text-align: left; }
    .sircle-confirm-lbl { width: 110px; }
    .sircle-confirm-rows,
    .sircle-confirm-answers { padding: 0 20px; }
    .sircle-confirm-answers-header,
    .sircle-confirm-actions { padding-left: 20px; padding-right: 20px; }
}

/* Badge admin */
.sircle-badge { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 12px; font-weight: 600; }
.sircle-badge.open  { background: #e8f5e9; color: #2e7d32; }
.sircle-badge.draft { background: #fff8e1; color: #795548; }
.sircle-badge.full  { background: #fdecea; color: #c62828; }
.sircle-badge.free  { background: #e3f2fd; color: #1565c0; }

/* ── Sectietitel & Informatietekst ── */
.sircle-form-heading {
    font-size: 16px;
    font-weight: 700;
    color: #333028;
    margin: 20px 0 4px;
    padding-bottom: 8px;
    border-bottom: 2px solid #E9DFD4;
    letter-spacing: -.2px;
}
.sircle-form-paragraph {
    font-size: 14px;
    color: #7a7265;
    background: #f9f6f1;
    border-left: 3px solid #C4A852;
    padding: 10px 14px;
    border-radius: 0 6px 6px 0;
    margin: 4px 0;
    line-height: 1.6;
}

/* ── Sterrenbeoordeling ── */
.sircle-rating {
    display: flex;
    gap: 4px;
    align-items: center;
}
.sircle-star {
    background: none;
    border: none;
    font-size: 30px;
    cursor: pointer;
    color: #ddd;
    padding: 0 2px;
    line-height: 1;
    transition: color .1s, transform .1s;
}
.sircle-star:hover,
.sircle-star.active { color: #C4A852; }
.sircle-star:hover  { transform: scale(1.15); }
.sircle-rating-value { display: none; }

/* ── Cijferschaal ── */
.sircle-scale {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.sircle-scale-min,
.sircle-scale-max { font-size: 12px; color: #aaa; font-weight: 600; }
.sircle-scale-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.sircle-scale-btn {
    width: 38px;
    height: 38px;
    border: 2px solid #e0ddd8;
    border-radius: 8px;
    background: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    color: #5E5A4D;
    transition: border-color .15s, background .15s, color .15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sircle-scale-btn:hover { border-color: #C4A852; background: #fdf8ef; }
.sircle-scale-btn.active { border-color: #C4A852; background: #C4A852; color: #fff; }
.sircle-scale-value { display: none; }

/* ── GDPR ── */
.sircle-gdpr-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    line-height: 1.6;
    color: #5E5A4D;
}
.sircle-gdpr-label input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    accent-color: #C4A852;
    cursor: pointer;
}

/* ── IBAN ── */
.sircle-iban {
    font-family: 'Courier New', monospace;
    letter-spacing: .05em;
}

/* URL input */
.sircle-form input[type="url"] {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 15px;
    font-family: inherit;
    transition: border-color .2s;
    box-sizing: border-box;
}
.sircle-form input[type="url"]:focus { border-color: #9a7d4f; outline: none; }