.amcec-event-form {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    margin: 1em 0;
    border: 1px solid #e1e1e1;
    padding: 1em;
    background-color: #fbfdfa;
    border-radius: 4px;
}

.amcec-form-field label {
    font-weight: 600;
    margin-bottom: 0.25em;
    display: block;
}

.amcec-form-field input,
.amcec-form-field textarea,
.amcec-form-field select {
    width: 100%;
    padding: 0.4em;
    border: 1px solid #ccc;
    border-radius: 3px;
    box-sizing: border-box;
}

.amcec-form-field .amcec-radio-option {
    margin-right: 0.5em;
    display: inline-flex;
    align-items: center;
    /* Reduce bottom spacing for radio options to prevent large gaps between choices */
    margin-bottom: 0;
}

/* Ensure radio inputs and their labels have consistent inline spacing inside the form wrapper. */
.amcec-form-wrapper input[type="radio"] {
    margin-right: 0.3em;
}

.amcec-required {
    color: #d63638;
    margin-left: 0.2em;
}

/* Buttons: both Add-to-cart and Show form share a similar aesthetic.
   Use a teal tone reminiscent of Amelia's default palette and slightly
   smaller padding for more compact layout inside the event list. */
.amcec-add-to-cart-button,
.amcec-show-form-button {
    background-color: #0a7980;
    color: #fff;
    border: none;
    padding: 0.5em 1.0em;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
}

.amcec-add-to-cart-button:hover,
.amcec-show-form-button:hover {
    background-color: #125259;
}

/* The events list is a vertical stack with consistent spacing between items. */
.amcec-events-list {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

/* Each event item resembles a card with rounded corners and a subtle border.
   It uses CSS variables to inject dynamic gradient and color values from PHP. */
/* Root element for each event card.  Contains a narrow accent bar and a
   flexible body.  Align items to stretch so the accent bar covers
   the full height of the card, including the extra info and form panels. */
.amcec-event-item {
    display: flex;
    align-items: stretch;
    background-color: #f4fbf1;
    border: 1px solid #e1e1e1;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

/* Highlight recommended cards with a subtle green border and stronger shadow to
   make them stand out compared to regular event items. */
.amcec-recommend-card {
    /* Give recommended cards a distinctive appearance: brighter border, subtle
       tinted background and a slightly larger shadow. */
    border-color: #afe18d;
    background-color: #f5fff9;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

/* Container for the recommended events list.  Adds spacing from surrounding content. */
.amcec-recommend-list {
    margin-top: 1.5em;
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}

/* Container around each recommended suggestion.  Adds spacing below the
   recommendation and stacks the message above the event card. */
.amcec-recommend-item {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    margin-bottom: 2em;
}

/* Style the recommendation message placed above the card.  Use a larger
   font size and accent colour with a left border for emphasis. */
.amcec-recommend-item .amcec-recommend-message {
    font-size: 1.0em;
    font-weight: 600;
    color: #0a7980;
    padding: 0.6em 0.8em;
    border-left: 4px solid var(--amcec-accent-color, #0a7980);
    background-color: #f0fbf8;
    border-radius: 8px;
}

/* Style for the custom recommendation message inside the details panel.  Use a slightly
   larger font and italicize to distinguish it from other info. */
.amcec-recommend-message {
    margin: 0.6em 0;
    font-size: 0.95em;
    font-style: italic;
    color: #3e3e3e;
    white-space: pre-wrap;
}

/* Title within a recommendation message.  Make it bold and use the
   accent colour for emphasis. */
.amcec-recommend-title {
    font-size: 1.05em;
    font-weight: 700;
    color: #0a7980;
}

/* Legacy image class remains for backward compatibility but is unused in the new layout. */
.amcec-event-image {
    width: 200px;
    height: 100%;
    background-size: cover;
    background-position: center;
}

/* Hide the old details container definition; the new layout defines its own structures. */
.amcec-event-details {
    flex: 1;
    padding: 1em;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Legacy title styling (unused in new layout) */
.amcec-event-title {
    margin: 0 0 0.25em 0;
    font-size: 1.25em;
    font-weight: 700;
}

/* Legacy date and price styling (unused in new layout) */
.amcec-event-date,
.amcec-event-price {
    margin: 0.1em 0;
    font-size: 0.95em;
}

/* Message shown when an event is already in the cart.  Styled like a disabled button to discourage clicks. */
.amcec-event-in-cart {
    display: inline-block;
    font-size: 0.9em;
    color: #888;
    background-color: #f0f0f0;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    padding: 0.4em 0.8em;
    cursor: default;
    text-align: center;
    min-width: 90px;
}

/* Loading state for the add-to-cart button: dim the button and prevent pointer events. */
.amcec-add-to-cart-button.amcec-loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Search input styling */
.amcec-search-wrapper {
    margin-bottom: 1em;
}

.amcec-search {
    width: 100%;
    padding: 0.4em 0.6em;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1em;
    box-sizing: border-box;
}

/* Pagination styles for unlimited event lists */
.amcec-pagination {
    margin-top: 1em;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 0.3em;
    flex-wrap: wrap;
}
.amcec-pagination a {
    border: 1px solid #e1e1e1;
    border-radius: 4px;
    padding: 0.4em 0.8em;
    text-decoration: none;
    color: #0a7980;
    font-size: 0.9em;
    display: inline-block;
}
.amcec-pagination a.current {
    background-color: #0a7980;
    color: #fff;
    border-color: #0a7980;
}
.amcec-pagination a:hover:not(.current) {
    background-color: #f0fbf8;
}

/* Responsive adjustments for mobile screens.  On narrow viewports, stack the
   date/time block and main content above the CTA buttons to avoid
   crowding. */
@media (max-width: 600px) {
    .amcec-event-header {
        /* On mobile, keep a horizontal flow but allow wrapping so the CTA can move below */
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 0.6em;
    }
    .amcec-date-block {
        /* Place the date block to the left with a small margin */
        margin-bottom: 0;
        margin-right: 0.6em;
    }
    .amcec-event-content {
        /* Place the title and location on the same row and allow wrapping */
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        /* Align items to the start so that text does not appear vertically centred */
        align-items: flex-start;
        /* Align content to the left on the horizontal axis */
        justify-content: flex-start;
        flex: 1 1 auto;
        gap: 0.4em;
        /* Ensure text within the content aligns to the left, even when there is
           extra horizontal space.  Without this, some themes may centre
           headings and paragraphs automatically on mobile.  Use !important
           to override theme defaults. */
        text-align: left !important;
    }
    /* Reset margins on the title and location when stacked in a row.  Use the
       container's gap to control spacing.  This prevents extra left
       indentation when the location is missing. */
    .amcec-event-content .amcec-event-title,
    .amcec-event-content .amcec-event-location {
        margin: 0;
        /* Prevent elements from stretching to fill available space.  Each
           element only takes up the width it needs, which eliminates
           inconsistent left indentation when the location is present or
           absent. */
        flex: 0 0 auto;
        /* Ensure each element aligns its text to the left inside its own box.
           Force the alignment with !important so it overrides any theme styles. */
        text-align: left !important;
    }
    .amcec-event-body {
        /* Add inner padding to the card body on mobile */
        padding: 1em;
    }
    .amcec-event-cta {
        /* Move price and buttons up closer to the title on mobile */
        flex-basis: 100%;
        flex-direction: row;
        width: 100%;
        margin-left: 0;
        margin-top: 0.2em;
        justify-content: flex-start;
        align-items: center;
    }
    .amcec-event-cta .amcec-event-price {
        margin-right: 0.8em;
    }
    .amcec-event-buttons {
        width: auto;
    }
    .amcec-event-buttons button {
        flex: none;
    }
}

/* The form wrapper inside an event item gains a small margin on top. */
.amcec-form-wrapper {
    /* Hide booking form panels by default; toggled via inline style and JS */
    display: none;
    margin-top: 0.5em;
}

/* New layout pieces for the Amelia-style event cards */
.amcec-event-date-section {
    display: flex;
    align-items: stretch;
    margin-right: 1em;
    flex-shrink: 0;
}

.amcec-accent-bar {
    width: 4px;
    border-radius: 8px 0 0 8px;
    background: var(--amcec-accent-gradient, #408e77);
    flex-shrink: 0;
}

/* Date block is independent of the accent bar now.  It has a subtle border
   and rounded corners. */
.amcec-date-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    background-color: #125259;
    padding: 0.4em 0.6em;
    min-width: 70px;
    color: #fff;
}

.amcec-date-block .amcec-day {
    font-size: 1.25em;
    font-weight: 700;
    margin: 0;
    line-height: 1;
}

.amcec-date-block .amcec-month {
    /* Increase font size slightly for better readability */
    font-size: 0.85em;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.2;
}

.amcec-date-block .amcec-time {
    font-size: 0.85em;
    color: #ddd;
    margin-top: 0.3em;
}

.amcec-event-thumbnail {
    width: 65px;
    height: 65px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
}

.amcec-event-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.amcec-event-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-width: 0;
}

.amcec-event-content .amcec-event-title {
    margin: 0;
    font-size: 1em;
    font-weight: 600;
    line-height: 1.2;
    color: #3e3e3e;
}

/* Location subtitle beneath the event title in the header. */
.amcec-event-content .amcec-event-location {
    margin: 0.1em 0 0 0;
    font-size: 1.0em;
    color: #666;
    /* Allow the location to wrap onto multiple lines instead of being truncated */
    white-space: normal;
    overflow-wrap: break-word;
}

.amcec-event-content .amcec-event-meta {
    margin: 0.2em 0 0 0;
    font-size: 1.0em;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amcec-event-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0.4em;
    margin-left: auto;
    flex-shrink: 0;
}

.amcec-event-cta .amcec-event-price {
    font-weight: 600;
    font-size: 1.0em;
    color: #0a7980;
    margin: 0;
}

/* Container for the action buttons (Mehr erfahren / Jetzt buchen) displayed side by side. */
.amcec-event-buttons {
    display: flex;
    flex-direction: row;
    gap: 0.4em;
}

/* Ensure buttons within the button group take equal width and align consistently. */
.amcec-event-buttons button {
    flex: 1 1 auto;
}


/* Container for all content except the accent bar.  It provides
   internal padding and stacks header, extra info and form panels. */
.amcec-event-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1em;
    min-width: 0;
}

/* Header row containing the date block, optional thumbnail, title and cta. */
.amcec-event-header {
    display: flex;
    align-items: center;
    gap: 1em;
}

/* Extra information panel that slides open when details are requested. */
.amcec-event-extra {
    /* Hidden by default; details panel appears when the .open class is added. */
    display: none;
    overflow: hidden;
    border-top: 0;
    max-height: 0;
    padding: 0 0;
    transition: max-height 0.4s ease, padding 0.4s ease, border-top 0.4s ease;
    font-size: 1.0em;
    color: #444;
}

.amcec-event-extra.open {
    /* When open, show the panel and animate its height. */
    display: block;
    max-height: 800px;
    padding: 0.8em 0;
    border-top: 1px solid #e1e1e1;
}

.amcec-event-extra p {
    margin: 0.2em 0;
}

/* Description section inside the extra panel.  Allow for scrolling when
   the content is long so it does not overflow the card.  A slightly larger
   font improves readability for extended text. */
.amcec-event-description {
    max-height: 220px;
    overflow-y: auto;
    margin-top: 0.1em;
    font-size: 1.0em;
    line-height: 1.4;
    color: #444;
}

.amcec-event-description p {
    margin: 0 0 0.6em 0;
}

/* Styling for the “Das erwartet dich:” header shown above the description. */
.amcec-description-title {
    font-size: 1.3em;
    font-weight: 600;
    margin: 0.6em 0 0.1em 0;
    color: #3e3e3e;
}

/* Style for the register button shown inside the extra panel. */
.amcec-register-button {
    background-color: #0a7980;
    color: #fff;
    border: none;
    padding: 0.5em 1em;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9em;
    margin-top: 0.6em;
    display: inline-block;
}

.amcec-register-button:hover {
    background-color: #125259;
}

/* Style for the details button in the header.  Aligns visually with the
   register button but slightly smaller. */
.amcec-show-details-button {
    background-color: #0a7980;
    color: #fff;
    border: none;
    padding: 0.4em 0.8em;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8em;
    min-width: 90px;
}

.amcec-show-details-button:hover {
    background-color: #125259;
}

/* Style for the book now button which sits adjacent to the details button. */
.amcec-book-now-button {
    background-color: #0a7980;
    color: #fff;
    border: none;
    padding: 0.4em 0.8em;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8em;
    min-width: 90px;
}

.amcec-book-now-button:hover {
    background-color: #125259;
}

/* =========================================================
   Amelia Event Form — alignment + spacing fixes (2025-09-15)
   Keeps radios/checkboxes tight to their labels and normalizes
   gaps across themes/Elementor/Woo.
   ========================================================= */
.amcec-event-form,
.amcec-event-form * { box-sizing: border-box; }

/* Tighter label rhythm */
.amcec-event-form label { line-height: 1.35; }

/* Each radio/checkbox option becomes a neat row */
.amcec-form-field .amcec-radio-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 12px 0 0;   /* small column gap when they wrap */
  line-height: 1.35;
  cursor: pointer;
}

/* Controls sizing + optical baseline nudge */
.amcec-event-form input[type="radio"] {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  margin: 0;
  vertical-align: middle;
  transform: translateY(3px);
  accent-color: #408e77; /* brand green */
}

.amcec-event-form input[type="checkbox"]  {
  flex: 0 0 auto;
  width: auto;
  height: auto;
  margin: 0;
  vertical-align: middle;
  transform: translateY(-1px);
  accent-color: #408e77; /* brand green */
}

/* Group wrapper for multiple options */
.amcec-choice-group {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 24px;      /* row / column gap */
  align-items: flex-start;
}

/* Optional: 3 tidy columns on wider screens */
@media (min-width: 768px) {
  .amcec-choice-group--3col {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 20px;
  }
}

/* Inline helper for one checkbox + sentence rows */
.amcec-event-form .amcec-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Reset common fieldset/list spacing that can create odd gaps */
.amcec-event-form fieldset { border: 0; margin: 0; padding: 0; }
.amcec-event-form ul { list-style: none; margin: 0; padding: 0; }