.ef-form {
    scroll-margin-top: 24px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 30px;
    font-family: var(--ef-form-font, "Satoshi-Regular", sans-serif);
    /* Establish the baseline font size for the entire form so all text that
       uses font-size: inherit or has no explicit size falls back to 19px */
    font-size: 19px;
    background-color: var(--ef-form-bg, transparent);
    /* CSS custom property defaults — overridden via inline style when form styling is set */
    --ef-form-text: #30264a;
    --ef-form-bg: transparent;
    --ef-form-input-bg: #ffffff;
    --ef-form-accent: #423063;
    --ef-form-font: "Satoshi-Regular", sans-serif;
    --ef-form-label-align: left;
    --ef-btn-primary-bg: #a17de5;
    --ef-btn-primary-text: #ffffff;
    --ef-btn-secondary-bg: #423063;
    --ef-btn-secondary-text: #ffffff;
    --ef-btn-radius: 8px;
}

/* Product Field Styles */
.ef-product-field {
    margin-bottom: 25px;
}

.ef-product-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 10px;
}

.ef-product-option {
    padding: 16px 18px;
    border: 1px solid #d8d4e0;
    border-radius: 8px;
    background-color: #fff;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.ef-product-option:hover {
    border-color: #a17de5;
    background-color: #faf8fe;
}

.ef-product-option input[type="radio"]:checked + .ef-product-info,
.ef-product-option input[type="checkbox"]:checked + .ef-product-info {
    color: #30264a;
}

.ef-product-option input[type="radio"]:checked,
.ef-product-option input[type="checkbox"]:checked {
    accent-color: #423063;
}

.ef-product-option:has(input:checked) {
    border-color: #423063;
    background-color: #f3eefc;
    box-shadow: inset 0 0 0 1px #423063;
}

.ef-product-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    margin: 0;
}

.ef-product-input {
    /* Half the leading of a line of option text, so the control sits centred on the
       first line rather than hard against the top of the block. The label stays
       flex-start, which keeps the control on the FIRST line when an option also
       carries a description — centring the whole block would float it alongside the
       middle of the paragraph. Expressed in em so it tracks the text size. */
    margin-top: 0.4em;
    flex-shrink: 0;
}

.ef-product-info {
    flex: 1;
}

.ef-product-name {
    display: inline;
    font-weight: 600;
    font-size: 19px;
    color: #30264a;
    margin-right: 10px;
    margin-bottom: 0;
}

.ef-product-price {
    display: inline;
    font-weight: 700;
    font-size: 19px;
    color: #423063;
    margin-bottom: 0;
}

.ef-product-description {
    color: #6b7280;
    font-size: 19px;
    line-height: 1.4;
    margin-top: 6px;
}

/* Button display mode */
.ef-product-options--buttons {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

.ef-product-options--buttons .ef-product-option {
    padding: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: none !important;
}

.ef-product-options--buttons .ef-product-label {
    padding: 10px 20px;
    border: 2px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.ef-product-options--buttons .ef-product-input {
    display: none;
}

.ef-product-options--buttons .ef-product-option:has(input:checked) .ef-product-label {
    border-color: #423063;
    background: #e6d9f9;
    color: #30264a;
}

.ef-product-options--buttons .ef-product-name {
    display: inline;
    margin-bottom: 0;
    font-size: 19px;
}

.ef-product-options--buttons .ef-product-price {
    display: none;
}

.ef-product-options--buttons .ef-product-description {
    display: none;
}

/* Editable price input inside product info */
.ef-product-price-wrapper {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    gap: 2px;
    margin-bottom: 0;
    font-weight: 700;
    font-size: 19px;
    color: #423063;
}

.ef-product-price-input {
    padding: 4px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 19px;
    font-weight: 700;
    color: #423063;
    width: 100px;
    background: #fff;
    transition: border-color 0.2s ease;
    -moz-appearance: textfield;
}

.ef-product-price-input::-webkit-outer-spin-button,
.ef-product-price-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ef-product-price-input:focus {
    outline: none;
    border-color: #423063;
    box-shadow: 0 0 0 2px rgba(66, 48, 99, 0.1);
}

/* Inline subtotal shown next to the qty input when qty > 0 */
.ef-product-qty-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ef-product-subtotal {
    font-size: 19px;
    font-weight: 700;
    color: #423063;
    white-space: nowrap;
}

/* The type dropdown sat flush against the description paragraph above it. Scoped to
   this select so the shared .ef-field-description spacing is left alone. */
select.ef-sponsorship-type {
    margin-top: 14px;
}

/* Sponsorship/donation guidance, shown under the type dropdown before a choice is
   made so both options can be weighed up. */
.ef-sponsorship-guidance {
    margin: 10px 0 4px;
}

.ef-sponsorship-guidance__item {
    margin: 0 0 6px;
    font-size: 1rem;
    line-height: 1.5;
}

.ef-sponsorship-guidance__item:last-child {
    margin-bottom: 0;
}

.ef-product-min-qty-hint {
    font-size: 1rem;
    color: #6b7280;
    white-space: nowrap;
}

.ef-product-qty-input.ef-input-invalid {
    border-color: #dc2626;
    box-shadow: 0 0 0 1px #dc2626;
}

/* Sub-fields shown when a product is selected */
.ef-product-subfields {
    /* Indent to align with the product info text (radio width ~18px + gap 12px) */
    padding: 12px 0 4px 30px;
    margin-top: 10px;
    border-top: 1px solid #e5e7eb;
}

.ef-product-subfield {
    margin-bottom: 14px;
}

.ef-product-subfield:last-child {
    margin-bottom: 0;
}

.ef-product-subfield .ef-label {
    font-size: 19px;
    margin-bottom: 6px;
}

.ef-product-subfield .ef-text-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 19px;
    font-family: inherit;
    color: #30264a;
    background: #fff;
    transition: border-color 0.2s ease;
    box-sizing: border-box;
}

.ef-product-subfield .ef-text-input:focus {
    outline: none;
    border-color: #423063;
    box-shadow: 0 0 0 2px rgba(66, 48, 99, 0.1);
}

/* Attendee Mapping Styles */
.ef-attendee-mapping-container {
    margin-top: 20px;
    padding: 20px;
}

.ef-attendee-mapping-container h4 {
    margin: 0 0 15px 0;
    color: #30264a;
    font-size: 19px;
    font-weight: 600;
}

.ef-attendee-mapping-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ef-attendee-mapping-item {
    background: white;
    padding: 15px;
    margin-bottom: 10px;
}

.ef-attendee-mapping-item h5 {
    margin: 0 0 10px 0;
    color: #30264a;
    font-size: 19px;
    font-weight: 600;
}

.ef-attendee-products {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

.ef-attendee-product-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 19px;
    color: #374151;
    margin: 0;
    cursor: pointer;
}

.ef-attendee-product-input {
    margin: 0;
}

.ef-attendee-subtotal {
    font-size: 19px;
    font-weight: 600;
    color: #30264a;
    text-align: right;
    padding-top: 8px;
    border-top: 1px solid #e2e8f0;
}

.ef-attendee-total {
    color: #423063;
}

.ef-total-calculation {
    margin-top: 15px;
    padding: 15px;
    text-align: center;
}

.ef-calculated-total {
    font-size: 24px;
    font-weight: 700;
    color: #423063;
}

/* Custom Products in Admin */
.custom-product-item {
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 15px;
}

.custom-product-item input,
.custom-product-item textarea {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px;
}

.custom-product-item input:focus,
.custom-product-item textarea:focus {
    border-color: #423063;
    outline: none;
    box-shadow: 0 0 0 2px rgba(66, 48, 99, 0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
    .ef-product-label {
        flex-direction: column;
        gap: 8px;
    }
    
    .ef-attendee-mapping-list {
        gap: 10px;
    }
    
    .ef-attendee-products {
        gap: 6px;
    }
}

.ef-progress-bar {
    margin-bottom: 30px;
}

/* Unfilled portion of the pill — light purple tint, matches the light-purple
   background already used elsewhere in the theme (sass/base/elements/_category-filter.scss). */
.ef-progress-track {
    position: relative;
    width: 100%;
    height: 48px;
    background: #e6d9f9;
    border-radius: 24px;
    overflow: hidden;
}

/* Filled portion — brand medium-purple, sized to current_step/total_steps by
   render_progress_bar() (inline width%) and resized live by multi-step.js as
   the user moves between steps. min-width keeps the "Step N" label readable
   even at low percentages (e.g. step 1 of 5). */
.ef-progress-fill {
    position: relative;
    height: 100%;
    min-width: 90px;
    max-width: 100%;
    background: #a17de5;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.3s ease;
}

.ef-progress-fill-label {
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    white-space: nowrap;
}

.ef-step-title {
    margin: 0 0 12px;
    font-size: 28px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.02em;
}

.ef-step-description {
    margin: 0 0 24px;
    color: #6b7280;
    font-size: 19px;
    line-height: 1.6;
}

.ef-field {
    margin-bottom: 24px;
}

.ef-label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 19px;
    color: var(--ef-form-text, #30264a);
    letter-spacing: 0.01em;
    text-align: var(--ef-form-label-align, left);
}

.ef-required {
    color: #ef4444;
}

.ef-input,
select.ef-input,
textarea.ef-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 19px;
    font-family: inherit;
    color: var(--ef-form-text, #30264a);
    background-color: var(--ef-form-input-bg, #ffffff);
    transition: all 0.2s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 48px;
    box-sizing: border-box;
}

/* Ensure all select elements within the form and attendee modal have a white background */
.ef-form select,
.ef-attendees-modal select {
    background-color: #ffffff;
}

.ef-input::placeholder {
    color: #9ca3af;
}

.ef-input:hover {
    border-color: #9ca3af;
}

.ef-input:focus {
    outline: none;
    border-color: var(--ef-form-accent, #423063);
    background-color: var(--ef-form-input-bg, #ffffff);
}

.ef-input:disabled {
    background-color: #f9fafb;
    color: #9ca3af;
    cursor: not-allowed;
}

/* "Uneditable" admin field setting — greys out text-type inputs the same way
   :disabled does above, but :read-only (unlike :disabled) still lets the value
   submit with the form. Scoped to input/textarea only: per the HTML/CSS spec a
   <select> is never "mutable", so it always matches :read-only regardless of any
   readonly attribute or setting — a bare ".ef-input:read-only" rule would grey out
   every select on the site, not just ones actually marked uneditable. Selects get
   their own readonly look from the explicit ".ef-field-readonly select.ef-input"
   rule below instead. */
input.ef-input:read-only,
textarea.ef-input:read-only {
    background-color: #f9fafb;
    color: #9ca3af;
    cursor: not-allowed;
}

/* <select> has no native read-only behaviour, so class-select-field.php disables
   its non-selected <option>s instead and relies on this wrapper class (added by
   get_field_classes()) for the matching greyed-out look. */
.ef-field-readonly select.ef-input {
    background-color: #f9fafb;
    color: #9ca3af;
    cursor: not-allowed;
}

select.ef-input {
    /* Remove vertical padding so the browser centers the selected text natively
       within the fixed 48px height — avoids descender clipping on mobile/Safari
       while keeping the height identical to text inputs */
    padding-top: 0;
    padding-bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 20px;
    padding-right: 40px;
}

textarea.ef-input {
    min-height: 100px;
    height: auto;
    resize: vertical;
    line-height: 1.6;
}

input[type="date"].ef-input {
    position: relative;
    cursor: pointer;
}

.ef-field-description {
    margin: 6px 0 0;
    font-size: 19px;
    color: #6b7280;
    line-height: 1.5;
}

.ef-field-error {
    color: #dc2626;
    font-size: 19px;
    font-weight: 500;
    margin-top: 6px;
    display: none;
    animation: slideDown 0.2s ease-out;
}

.ef-field-error.visible {
    display: block;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ef-field-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.ef-field-col-1 {
    flex: 0 0 calc(8.333% - 18.333px);
    min-width: 0;
}

.ef-field-col-2 {
    flex: 0 0 calc(16.666% - 16.666px);
    min-width: 0;
}

.ef-field-col-3 {
    flex: 0 0 calc(25% - 15px);
    min-width: 0;
}

.ef-field-col-4 {
    flex: 0 0 calc(33.333% - 13.333px);
    min-width: 0;
}

.ef-field-col-5 {
    flex: 0 0 calc(41.666% - 11.666px);
    min-width: 0;
}

.ef-field-col-6 {
    flex: 0 0 calc(50% - 10px);
    min-width: 0;
}

.ef-field-col-7 {
    flex: 0 0 calc(58.333% - 8.333px);
    min-width: 0;
}

.ef-field-col-8 {
    flex: 0 0 calc(66.666% - 6.666px);
    min-width: 0;
}

.ef-field-col-9 {
    flex: 0 0 calc(75% - 5px);
    min-width: 0;
}

.ef-field-col-10 {
    flex: 0 0 calc(83.333% - 3.333px);
    min-width: 0;
}

.ef-field-col-11 {
    flex: 0 0 calc(91.666% - 1.666px);
    min-width: 0;
}

.ef-field-col-12 {
    flex: 0 0 100%;
    min-width: 0;
}

.ef-field-group {
    margin-bottom: 15px;
}

.ef-field-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    font-size: 19px;
    color: var(--ef-form-text, #30264a);
}

.ef-radio-group,
.ef-checkbox-group,
.ef-gdpr-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ef-radio-item,
.ef-checkbox-item,
.ef-gdpr-checkbox-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
}

.ef-radio-item:hover,
.ef-checkbox-item:hover,
.ef-gdpr-checkbox-wrap:hover {
    background-color: #f9fafb;
}

.ef-radio-item:has(input:checked),
.ef-checkbox-item:has(input:checked),
.ef-gdpr-checkbox-wrap:has(input:checked) {
    background-color: #e6d9f9;
}

.ef-radio-item input[type="radio"],
.ef-checkbox-item input[type="checkbox"],
.ef-gdpr-checkbox-wrap input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--ef-form-accent, #423063);
}

.ef-radio-item label,
.ef-checkbox-item label,
.ef-gdpr-checkbox-wrap label {
    margin: 0;
    font-weight: normal;
    font-size: 19px;
    cursor: pointer;
    flex: 1;
    color: #374151;
    font-family: var(--ef-form-font, "Satoshi-Regular", sans-serif);
}

/* Checkbox options can have long labels that wrap (e.g. the thank-you letter opt-out). Centring
   the box against the whole label put it between the lines, so line the box up with the first
   line instead, the same way as the Gift Aid tick box. Single-line options look the same. */
.ef-checkbox-item {
    align-items: flex-start;
}

.ef-checkbox-item label {
    line-height: 1.5;
}

.ef-checkbox-item input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: calc((19px * 1.5 - 18px) / 2);
}

.ef-btn {
    padding: 14px 32px;
    border: none;
    border-radius: var(--ef-btn-radius, 8px);
    font-weight: 600;
    font-size: 19px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}

.ef-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ef-btn-primary {
    background-color: var(--ef-btn-primary-bg, #a17de5);
    color: var(--ef-btn-primary-text, #ffffff);
}

.ef-btn-primary:hover:not(:disabled) {
    background-color: #8b65d9;
}

.ef-btn-primary:active:not(:disabled) {
    background-color: #7a56ca;
}

.ef-btn-secondary {
    background-color: var(--ef-btn-secondary-bg, #423063);
    color: var(--ef-btn-secondary-text, #ffffff);
    border: none;
}

.ef-btn-secondary:hover:not(:disabled) {
    background-color: #2e2245;
}

.ef-form-navigation {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    padding-top: 30px;
    gap: 12px;
}

.ef-form-messages {
    margin-top: 20px;
    padding: 15px;
    display: none;
}

.ef-form-messages.success {
    display: block;
    background: #d1fae5;
    color: #065f46;
}

.ef-form-messages.error {
    display: block;
    background: #fee2e2;
    color: #991b1b;
}

.ef-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.ef-modal-content {
    background: white;
    padding: 30px;
    border-radius: 8px;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.ef-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.ef-modal-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.ef-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
}

.ef-attendees-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}

.ef-attendees-table th,
.ef-attendees-table td {
    padding: 10px;
    text-align: left;
}

.ef-attendees-table th {
    font-weight: 600;
    color: #374151;
}

.ef-attendees-table .ef-btn {
    padding: 6px 12px;
    font-size: 19px;
}

.ef-field-conditional,
.ef-component-wrapper.ef-field-conditional {
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    transform-origin: top;
}

.ef-field-conditional.ef-hidden,
.ef-component-wrapper.ef-hidden {
    display: none !important;
}

/* Add smooth fade-in animation */
.ef-field {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ef-postcode-lookup {
    margin-bottom: 15px;
}

.ef-address-results {
    margin-top: 10px;
}

.ef-address-fields {
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    opacity: 1;
    transform: translateY(0);
}

.ef-address-fields.ef-address-fields-hidden {
    opacity: 0;
    transform: translateY(-10px);
}

.ef-address-fields[style*="display:none"] {
    opacity: 0;
    transform: translateY(-10px);
}

/* Repeater Field Styles */
.ef-repeater-field {
    margin-bottom: 20px;
}

.ef-repeater-container {
    padding: 15px;
}

.ef-repeater-instances {
    margin-bottom: 15px;
}

.ef-repeater-instance {
    position: relative;
    padding: 20px;
    margin-bottom: 15px;
    background: #f9fafb;
}

.ef-repeater-instance:last-child {
    margin-bottom: 0;
}

.ef-repeater-instance-fields {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.ef-remove-repeater-instance {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    padding: 0;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s;
}

.ef-remove-repeater-instance:hover {
    background: #dc2626;
}

.ef-add-repeater-instance {
    padding: 10px 20px;
    background: #423063;
    color: white;
    border: none;
    border-radius: 4px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.ef-add-repeater-instance:hover:not(:disabled) {
    background: #2e2245;
}

.ef-add-repeater-instance:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.ef-add-repeater-instance.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Repeater Table Display */
.ef-repeater-table-wrapper {
    margin: 15px 0;
    overflow-x: auto;
}

.ef-repeater-table {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.ef-repeater-table thead {
    background: #f9fafb;
}

.ef-repeater-table th,
.ef-repeater-table td {
    padding: 12px 15px;
    text-align: left;
}

.ef-repeater-table th {
    font-weight: 600;
    color: #333;
}

.ef-repeater-table tbody tr:hover {
    background: #f9f9f9;
}

.ef-repeater-table-actions {
    width: 150px;
    text-align: right;
}

.ef-repeater-table-actions button {
    margin-left: 5px;
}

.ef-repeater-cell-value {
    display: block;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ef-repeater-actions {
    margin-top: 15px;
}

/* Repeater Modal */
.ef-repeater-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

.ef-repeater-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.ef-repeater-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    background: white;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
}

.ef-repeater-modal-header {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ef-repeater-modal-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.ef-repeater-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ef-repeater-modal-close:hover {
    color: #333;
}

.ef-repeater-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.ef-repeater-modal-footer {
    padding: 15px 20px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.ef-repeater-modal-fields .ef-field-row {
    margin-bottom: 20px;
}

/* Modal Steps */
.ef-modal-steps {
    width: 100%;
}

.ef-step-progress {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
    gap: 20px;
}

.ef-step-indicator {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e0e0e0;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    position: relative;
    cursor: pointer;
}

.ef-step-indicator.active {
    background: #423063;
    color: white;
}

.ef-step-indicator.completed {
    background: #10b981;
    color: white;
}

.ef-step-indicator.completed::after {
    content: '✓';
    position: absolute;
    font-size: 20px;
}

.ef-step-content {
    min-height: 200px;
}

.ef-step-navigation {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
}

.ef-step-navigation button {
    min-width: 100px;
}

.ef-step-prev {
    margin-right: auto;
}

.ef-step-next {
    margin-left: auto;
}

/* Button Styles */
.ef-btn-small {
    padding: 4px 12px;
    font-size: 19px;
}

.ef-btn-danger {
    background: #ef4444;
    color: white;
    border-color: #ef4444;
}

.ef-btn-danger:hover {
    background: #dc2626;
    border-color: #dc2626;
}

.ef-edit-repeater-instance {
    background: #423063;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 19px;
}

.ef-edit-repeater-instance:hover {
    background: #2e2245;
}

/* Loading and Error States */
.ef-loading {
    text-align: center;
    padding: 40px;
    color: #666;
}

.ef-error {
    color: #ef4444;
    text-align: center;
    padding: 20px;
}

/* Component Wrapper */
.ef-component-wrapper {
    margin-bottom: 25px;
    padding: 0;
}

.ef-component-title {
    margin: 0 0 20px;
    padding: 10px 0;
    font-size: 19px;
    font-weight: 600;
    color: var(--ef-form-text, #30264a);
    /* Explicitly inherit the form font — heading elements can override inherited font-family */
    font-family: var(--ef-form-font, "Satoshi-Regular", sans-serif);
}

.ef-component-instances {
    margin-bottom: 15px;
}

.ef-component-instance {
    position: relative;
    padding: 15px;
    margin-bottom: 15px;
}

.ef-component-instance:last-child {
    margin-bottom: 0;
}

.ef-remove-component-instance {
    float: right;
    padding: 6px 12px;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 19px;
    cursor: pointer;
}

.ef-remove-component-instance:hover {
    background: #dc2626;
}

.ef-btn-small {
    padding: 6px 12px;
    font-size: 19px;
}

@media (max-width: 768px) {
    .ef-form {
        padding: 20px;
    }
    
    .ef-progress-track {
        height: 40px;
    }

    .ef-progress-fill-label {
        font-size: 14px;
    }

    .ef-field-row {
        flex-direction: column;
        gap: 0;
    }

    /* The postcode field and "Find Address" button reuse the generic
       .ef-field-row grid, so they inherited the gap:0 reset above and ended up
       touching once stacked on mobile. Scoped to just this pairing rather than
       changing gap on .ef-field-row generally, which would affect every other
       stacked field pair in the form. */
    .ef-postcode-lookup .ef-field-row {
        gap: 12px;
    }

    .ef-field-col-1,
    .ef-field-col-2,
    .ef-field-col-3,
    .ef-field-col-4,
    .ef-field-col-5,
    .ef-field-col-6,
    .ef-field-col-7,
    .ef-field-col-8,
    .ef-field-col-9,
    .ef-field-col-10,
    .ef-field-col-11,
    .ef-field-col-12 {
        flex: 0 0 100%;
    }
    
    .ef-form-navigation {
        flex-direction: column-reverse;
        gap: 12px;
    }
    
    .ef-btn {
        width: 100%;
        padding: 16px 24px;
    }
    
    .ef-input,
    select.ef-input,
    textarea.ef-input {
        font-size: 19px;
    }
}

.ef-content-field {
    padding: 15px 0;
    line-height: 1.6;
    font-size: 19px;
}

.ef-content-field strong {
    font-weight: 600;
}

.ef-content-field em {
    font-style: italic;
}

.ef-content-field a {
    color: #423063;
    text-decoration: underline;
}

.ef-content-field a:hover {
    color: #2e2245;
}

.ef-content-heading {
    font-size: 19px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #333;
}

.ef-confirm-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ef-confirm-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.ef-confirm-content {
    position: relative;
    z-index: 2;
    background: white;
    border-radius: 8px;
    padding: 30px;
    max-width: 500px;
    width: 90%;
}

.ef-confirm-content h3 {
    margin: 0 0 15px 0;
    font-size: 24px;
    color: #333;
}

.ef-confirm-content p {
    margin: 0 0 25px 0;
    color: #666;
    font-size: 19px;
}

.ef-confirm-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.ef-confirm-buttons .ef-btn {
    min-width: 100px;
}

/* Attendees Field Styles */
.ef-attendees-field {
    margin-bottom: 20px;
}

.ef-attendees-container {
    padding: 20px;
}

/* Live running total shown below the attendee list on ACF-priced events —
   see updateGroupPricingTotal() in attendees.js. Styled to match the existing
   .ef-total-calculation / .ef-calculated-total pattern used elsewhere. */
.ef-attendees-total {
    margin-top: 15px;
    padding: 15px;
    background: #f9fafb;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}

.ef-attendees-total__heading {
    font-size: 1rem;
    font-weight: 700;
    color: #423063;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 8px;
}

.ef-attendees-total__breakdown {
    font-size: 1rem;
    color: #423063;
    line-height: 1.6;
}

.ef-attendees-total__grand {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e2e8f0;
    font-size: 19px;
    font-weight: 700;
    color: #423063;
    text-align: right;
}

.ef-attendees-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.ef-attendee-card {
    background: white;
    padding: 16px;
    transition: all 0.2s ease-in-out;
    margin-bottom: 16px;
}

.ef-attendee-card:hover {
    background-color: #f9fafb;
}

.ef-attendee-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    padding-bottom: 12px;
}

.ef-attendee-name {
    font-weight: 600;
    font-size: 19px;
    color: #30264a;
    flex: 1;
}

.ef-attendee-card-actions {
    display: flex;
    gap: 6px;
}

.ef-attendee-card-body {
    color: #6b7280;
    font-size: 19px;
}

.ef-attendee-summary {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ef-attendee-summary-item {
    display: flex;
    gap: 6px;
}

.ef-attendee-summary-label {
    font-weight: 500;
    color: #374151;
    min-width: 60px;
}

.ef-attendee-summary-value {
    color: #6b7280;
    word-break: break-word;
}

.ef-attendees-actions {
    margin-top: 16px;
}

.ef-add-attendee {
    width: 100%;
    padding: 12px 20px;
    background: #423063;
    color: white;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    font-size: 19px;
    cursor: pointer;
    transition: all 0.2s;
}

.ef-add-attendee:hover:not(:disabled) {
    background: #2e2245;
}

.ef-add-attendee:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.ef-edit-attendee {
    background: #423063;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 19px;
    font-weight: 500;
    transition: background 0.2s;
}

.ef-edit-attendee:hover {
    background: #2e2245;
}

.ef-remove-attendee {
    background: #ef4444;
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 19px;
    font-weight: 500;
    transition: background 0.2s;
}

.ef-remove-attendee:hover {
    background: #dc2626;
}

/* Attendees Modal */
.ef-attendees-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

.ef-attendees-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}

.ef-attendees-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 700px;
    max-height: 90vh;
    background: white;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translate(-50%, -48%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.ef-attendees-modal-header {
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ef-attendees-modal-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #30264a;
}

.ef-attendees-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #6b7280;
    padding: 0;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
}

.ef-attendees-modal-close:hover {
    background: #f3f4f6;
    color: #30264a;
}

.ef-attendees-modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

.ef-attendees-modal-footer {
    padding: 20px 24px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.ef-attendees-modal-fields .ef-field-row {
    margin-bottom: 20px;
}

/* Ensure modal select elements have consistent styling */
.ef-modal select,
.ef-repeater-modal select,
.ef-attendees-modal select,
.ef-confirm-modal select {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 19px;
    font-family: inherit;
    color: #30264a;
    background-color: #ffffff;
    transition: all 0.2s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 48px;
    box-sizing: border-box;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 20px;
    padding-right: 40px;
}

.ef-modal select:hover,
.ef-repeater-modal select:hover,
.ef-attendees-modal select:hover,
.ef-confirm-modal select:hover {
    border-color: #9ca3af;
}

.ef-modal select:focus,
.ef-repeater-modal select:focus,
.ef-attendees-modal select:focus,
.ef-confirm-modal select:focus {
    outline: none;
    border-color: #423063;
    background-color: #ffffff;
}

.ef-modal select:disabled,
.ef-repeater-modal select:disabled,
.ef-attendees-modal select:disabled,
.ef-confirm-modal select:disabled {
    background-color: #f9fafb;
    color: #9ca3af;
    cursor: not-allowed;
}

/* Ensure modal input elements have consistent styling */
.ef-modal input[type="text"],
.ef-modal input[type="email"],
.ef-modal input[type="tel"],
.ef-modal input[type="number"],
.ef-modal input[type="date"],
.ef-modal input[type="password"],
.ef-modal textarea,
.ef-repeater-modal input[type="text"],
.ef-repeater-modal input[type="email"],
.ef-repeater-modal input[type="tel"],
.ef-repeater-modal input[type="number"],
.ef-repeater-modal input[type="date"],
.ef-repeater-modal input[type="password"],
.ef-repeater-modal textarea,
.ef-attendees-modal input[type="text"],
.ef-attendees-modal input[type="email"],
.ef-attendees-modal input[type="tel"],
.ef-attendees-modal input[type="number"],
.ef-attendees-modal input[type="date"],
.ef-attendees-modal input[type="password"],
.ef-attendees-modal textarea,
.ef-confirm-modal input[type="text"],
.ef-confirm-modal input[type="email"],
.ef-confirm-modal input[type="tel"],
.ef-confirm-modal input[type="number"],
.ef-confirm-modal input[type="date"],
.ef-confirm-modal input[type="password"],
.ef-confirm-modal textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 19px;
    font-family: inherit;
    color: #30264a;
    background-color: #ffffff;
    transition: all 0.2s ease-in-out;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 48px;
    box-sizing: border-box;
}

.ef-modal textarea,
.ef-repeater-modal textarea,
.ef-attendees-modal textarea,
.ef-confirm-modal textarea {
    min-height: 100px;
    height: auto;
    resize: vertical;
    line-height: 1.6;
}

.ef-attendees-modal-save {
    min-width: 140px;
}

.ef-attendees-modal-cancel {
    min-width: 100px;
}

@media (max-width: 768px) {
    .ef-attendees-list {
        grid-template-columns: 1fr;
    }
    
    .ef-attendees-modal-content {
        width: 95%;
        max-width: none;
    }
    
    .ef-attendee-card-header {
        flex-direction: column;
        gap: 10px;
    }
    
    .ef-attendee-card-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* Component Multi-Step Styles */
.ef-component-progress-bar {
    margin-bottom: 30px;
    padding: 20px 0;
}

.ef-component-progress-bar .ef-progress-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.ef-component-progress-bar .ef-progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 10px;
    border-radius: 8px;
}

.ef-component-progress-bar .ef-progress-step:hover {
    background-color: #f9fafb;
}

.ef-component-progress-bar .ef-progress-step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #e5e7eb;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 19px;
    transition: all 0.2s ease;
}

.ef-component-progress-bar .ef-progress-step-title {
    font-size: 19px;
    font-weight: 500;
    color: #6b7280;
    text-align: center;
    transition: all 0.2s ease;
}

.ef-component-progress-bar .ef-progress-step.active .ef-progress-step-number {
    background-color: #423063;
    color: white;
}

.ef-component-progress-bar .ef-progress-step.active .ef-progress-step-title {
    color: #423063;
    font-weight: 600;
}

.ef-component-progress-bar .ef-progress-step.completed .ef-progress-step-number {
    background-color: #10b981;
    color: white;
}

.ef-component-progress-bar .ef-progress-step.completed .ef-progress-step-title {
    color: #10b981;
}

.ef-component-steps-container {
    margin-bottom: 30px;
}

.ef-component-step {
    padding: 20px 0;
}

.ef-component-step-title {
    font-size: 24px;
    font-weight: 600;
    color: #30264a;
    margin-bottom: 8px;
}

.ef-component-step-description {
    font-size: 19px;
    color: #6b7280;
    margin-bottom: 30px;
    line-height: 1.5;
}

.ef-component-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    margin-top: 30px;
}

.ef-component-btn-previous,
.ef-component-btn-next {
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 19px;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.ef-component-btn-previous {
    background-color: #f3f4f6;
    color: #374151;
}

.ef-component-btn-previous:hover {
    background-color: #e5e7eb;
}

.ef-component-btn-next {
    background-color: #423063;
    color: white;
    margin-left: auto;
}

.ef-component-btn-next:hover {
    background-color: #423063;
}

.ef-step-errors {
    background-color: #fef2f2;
    color: #dc2626;
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 19px;
}

.ef-field-error {
    border-color: #dc2626 !important;
}

/* Responsive adjustments for component multi-step */
@media (max-width: 768px) {
    .ef-component-progress-bar .ef-progress-indicator {
        gap: 10px;
    }
    
    .ef-component-progress-bar .ef-progress-step-number {
        width: 32px;
        height: 32px;
        font-size: 19px;
    }
    
    .ef-component-progress-bar .ef-progress-step-title {
        font-size: 19px;
    }
    
    .ef-component-step-title {
        font-size: 20px;
    }
    
    .ef-component-navigation {
        flex-direction: column;
        gap: 15px;
    }
    
    .ef-component-btn-previous,
    .ef-component-btn-next {
        width: 100%;
        justify-content: center;
    }
    
    .ef-component-btn-next {
        margin-left: 0;
    }
}

/* Sponsorship Field Styles */
.ef-field-sponsorship {
    margin-bottom: 25px;
}

.ef-sponsorship-amount-container,
.ef-payment-amount-container {
    margin-top: 15px;
    padding: 15px;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.ef-sponsorship-amount-container.visible,
.ef-payment-amount-container.visible {
    border-color: #423063;
    background-color: #e6d9f9;
}

.ef-sublabel {
    display: block;
    font-weight: 600;
    color: var(--ef-form-text, #30264a);
    margin-bottom: 8px;
    font-size: 19px;
}

.ef-sponsorship-amount,
.ef-payment-amount {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 19px;
    transition: border-color 0.2s ease;
}

.ef-sponsorship-amount:focus,
.ef-payment-amount:focus {
    outline: none;
    border-color: #423063;
    box-shadow: 0 0 0 3px rgba(66, 48, 99, 0.1);
}

.ef-field-hint {
    display: block;
    margin-top: 5px;
    font-size: 19px;
    color: #6b7280;
    font-style: italic;
}

.ef-sponsorship-type {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 19px;
    background-color: white;
    transition: border-color 0.2s ease;
}

.ef-sponsorship-type:focus {
    outline: none;
    border-color: #423063;
    box-shadow: 0 0 0 3px rgba(66, 48, 99, 0.1);
}

/* Terms Field Styles */
.ef-field-terms {
    margin-bottom: 25px;
}

.ef-terms-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background-color: #f9fafb;
    transition: all 0.2s ease;
}

.ef-terms-item:hover {
    background-color: #f3f4f6;
    border-color: #d1d5db;
}

.ef-terms-item:has(input:checked) {
    background-color: #e6d9f9;
    border-color: #423063;
}

.ef-terms-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    accent-color: #423063;
    flex-shrink: 0;
    margin-top: 2px;
}

.ef-terms-label {
    margin: 0;
    font-weight: normal;
    font-size: 19px;
    cursor: pointer;
    flex: 1;
    line-height: 1.5;
    color: #374151;
}

.ef-terms-link {
    color: #423063;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.ef-terms-link:hover {
    color: #2e2245;
    text-decoration: none;
}

/* File Upload Progress Bar */
.ef-file-progress-wrap {
    margin-top: 8px;
}

.ef-file-progress-bar {
    height: 6px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
}

.ef-file-progress-fill {
    height: 100%;
    width: 0%;
    background: #423063;
    border-radius: 3px;
    transition: width 0.15s ease;
}

.ef-file-progress-fill.ef-progress-complete {
    background: #059669;
}

.ef-file-progress-fill.ef-progress-error {
    background: #dc2626;
}

.ef-file-progress-text {
    display: block;
    font-size: 19px;
    color: #6b7280;
    margin-top: 3px;
}

/* Attendees List Mode */
.ef-attendees-list--list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.ef-attendees-list--list .ef-attendee-card--list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    margin-bottom: 0;
    border-bottom: none;
    border: 1px solid #e5e7eb;
    border-radius: 0;
    background: #fff;
}

.ef-attendees-list--list .ef-attendee-card--list:first-child {
    border-radius: 6px 6px 0 0;
}

.ef-attendees-list--list .ef-attendee-card--list:last-child {
    border-radius: 0 0 6px 6px;
    border-bottom: 1px solid #e5e7eb;
}

.ef-attendees-list--list .ef-attendee-card--list:only-child {
    border-radius: 6px;
    border-bottom: 1px solid #e5e7eb;
}

.ef-attendees-list--list .ef-attendee-card--list + .ef-attendee-card--list {
    border-top: none;
}

.ef-attendees-list--list .ef-attendee-header {
    margin-bottom: 0;
    flex: 1;
}

.ef-attendees-list--list .ef-attendee-header h4 {
    font-size: 19px;
    font-weight: 600;
    color: #30264a;
}

.ef-attendees-list--list .ef-attendee-summary {
    display: none;
}

.ef-attendees-list--list .ef-attendee-card--list:hover {
    background: #f8fafc;
}

/* Same As First Attendee checkbox in modal */
.ef-same-as-first-container {
    margin-bottom: 20px;
    padding: 12px 15px;
    background: #e6d9f9;
    border: 1px solid #cfc0e3;
    border-radius: 6px;
}

.ef-same-as-first-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 600;
    color: #423063;
    margin: 0;
}

/* Inline Attendees (Repeater List Mode) */
.ef-attendee-inline {
    padding: 20px 24px;
    background-color: #ffffff;
    border-radius: 8px;
    margin-bottom: 8px;
}

.ef-attendee-inline:nth-child(even) {
    background-color: #e6d9f9;
}

.ef-attendee-inline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
    cursor: pointer;
    user-select: none;
}

.ef-attendee-inline.is-collapsed .ef-attendee-inline-header {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom-color: transparent;
}

.ef-attendee-inline-label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 19px;
    color: var(--ef-form-text, #30264a);
}

/* Chevron indicator */
.ef-attendee-inline-chevron {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid #374151;
    border-bottom: 2px solid #374151;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
    position: relative;
    top: -2px;
}

.ef-attendee-inline.is-collapsed .ef-attendee-inline-chevron {
    transform: rotate(-45deg);
    top: 1px;
}

.ef-attendee-inline-fields {
    transition: opacity 0.15s ease;
}

.ef-attendee-inline.is-collapsed .ef-attendee-inline-fields {
    display: none;
}

.ef-attendee-inline-fields .ef-modal-field {
    margin-bottom: 14px;
}

.ef-attendee-inline-fields label {
    display: block;
    margin-bottom: 4px;
    font-weight: 600;
    font-size: 19px;
    color: var(--ef-form-text, #30264a);
}

.ef-attendee-inline-fields input[type="text"],
.ef-attendee-inline-fields input[type="email"],
.ef-attendee-inline-fields input[type="number"],
.ef-attendee-inline-fields input[type="date"],
.ef-attendee-inline-fields textarea,
.ef-attendee-inline-fields select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 19px;
    box-sizing: border-box;
}

/* Currency prefix wrapper (used by sponsorship / payment-in-lieu inputs) */

.ef-currency-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.ef-currency-symbol {
    position: absolute;
    left: 12px;
    color: #374151;
    font-size: 19px;
    pointer-events: none;
    line-height: 1;
}

.ef-currency-wrapper .ef-input,
.ef-currency-wrapper input[type="number"] {
    padding-left: 32px !important;
    width: 100%;
}

/* ============================================================
   Payment Summary Page  ([ef_payment_summary])
   ============================================================ */

.ef-payment-summary {
    max-width: 680px;
    margin: 0 auto;
    font-size: 19px;
}

.ef-payment-title {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 24px;
    color: #111827;
}

.ef-payment-notice {
    color: #6b7280;
    font-style: italic;
}

/* Attendee cards */
.ef-payment-attendees {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.ef-payment-attendee {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.ef-payment-attendee-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.ef-payment-attendee-name {
    font-weight: 600;
    color: #374151;
}

.ef-payment-attendee-subtotal {
    font-weight: 700;
    color: #111827;
}

/* Line-item breakdown table */
.ef-payment-breakdown {
    width: 100%;
    border-collapse: collapse;
}

.ef-payment-breakdown td {
    padding: 9px 16px;
    vertical-align: top;
}

.ef-payment-breakdown tbody tr {
    border-bottom: 1px solid #f3f4f6;
}

.ef-payment-breakdown tbody tr:last-child {
    border-bottom: none;
}

.ef-payment-item-price {
    text-align: right;
    white-space: nowrap;
    color: #374151;
    font-variant-numeric: tabular-nums;
}

.ef-payment-item-note {
    font-size: 19px;
    color: #9ca3af;
}

/* Grand total bar */
.ef-payment-grand-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: #111827;
    color: #fff;
    border-radius: 8px;
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 24px;
}

/* Proceed button */
.ef-payment-actions {
    text-align: center;
}

.ef-payment-proceed-btn {
    display: inline-block;
    padding: 13px 40px;
    background: #423063;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-size: 19px;
    font-weight: 600;
    transition: background 0.2s ease;
}

.ef-payment-proceed-btn:hover,
.ef-payment-proceed-btn:focus {
    background: #2e2245;
    color: #fff;
}

/* Currency field */
.ef-currency-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.ef-currency-symbol {
    position: absolute;
    left: 12px;
    font-size: 19px;
    color: #30264a;
    pointer-events: none;
    z-index: 1;
}

.ef-currency-input {
    padding-left: 32px !important;
}

/* Extra dropdown fields — 2-column grid */
.ef-extra-dropdowns-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 15px;
}

.ef-extra-dropdowns-grid .ef-modal-field {
    margin-bottom: 0;
}

.ef-extra-dropdown-select {
    width: 100%;
    padding: 12px 40px 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 19px;
    font-family: inherit;
    color: #30264a;
    background-color: #ffffff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 48px;
    box-sizing: border-box;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 20px;
    transition: border-color 0.2s ease-in-out;
}

.ef-extra-dropdown-select:hover {
    border-color: #9ca3af;
}

.ef-extra-dropdown-select:focus {
    outline: none;
    border-color: #423063;
}

@media (max-width: 600px) {
    .ef-extra-dropdowns-grid {
        grid-template-columns: 1fr;
    }
}

/* Gift Aid field */

/* Override theme h3 styles so the Gift Aid title matches all other field/component labels */
.ef-gift-aid-title {
    font-size: 19px;
    font-weight: 600;
    font-family: var(--ef-form-font, "Satoshi-Regular", sans-serif);
    color: var(--ef-form-text, #30264a);
    margin: 0 0 8px;
    padding: 0;
}

.ef-gift-aid-declaration {
    line-height: 1.6;
    font-family: inherit;
    font-size: 19px;
    color: inherit;
}

.ef-gift-aid-declaration p {
    font-family: inherit;
    font-size: 19px;
    color: inherit;
    margin-bottom: 12px;
}

.ef-gift-aid-checkbox-wrap {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 12px 0;
}

.ef-gift-aid-checkbox-wrap input[type="checkbox"] {
    flex-shrink: 0;
    margin: 0;
    /* Centres the 18px box on the first line of the label (19px text x 1.5 line-height = 28.5px
       per line), however many lines the label wraps onto. Was a fixed 2px, which sat the box
       noticeably above the text. */
    margin-top: calc((19px * 1.5 - 18px) / 2);
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.ef-gift-aid-label {
    margin: 0;
    font-family: inherit;
    font-size: 19px;
    font-weight: normal;
    color: inherit;
    cursor: pointer;
    line-height: 1.5;
}

.ef-donor-gateway {
    max-width: 560px;
}

.ef-donor-gateway__error {
    margin-top: 0;
    margin-bottom: 16px;
}

.ef-donor-gateway__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.ef-donation-history-table__scroll {
    overflow-x: auto;
}

.ef-donation-history-table__rows {
    display: table;
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
    font-size: 19px;
    color: var(--ef-form-text, #30264a);
}

.ef-donation-history-table__rows thead {
    display: table-header-group;
}

.ef-donation-history-table__rows tbody {
    display: table-row-group;
}

.ef-donation-history-table__rows tr {
    display: table-row;
}

.ef-donation-history-table__rows th,
.ef-donation-history-table__rows td {
    display: table-cell;
}

.ef-donation-history-table__rows th {
    text-align: left;
    font-weight: 600;
    padding: 12px 12px 12px 0;
    background: none;
    border: 0;
    border-bottom: 2px solid var(--ef-form-accent, #423063);
}

.ef-donation-history-table__rows td {
    padding: 12px 12px 12px 0;
    background: none;
    border: 0;
    border-bottom: 1px solid #d1d5db;
    vertical-align: top;
}

.ef-donation-history-table__repeat-cell {
    width: 1%;
    white-space: nowrap;
}

.ef-donation-history-table__rows td.ef-donation-history-table__repeat-cell {
    padding-right: 16px;
}

.ef-donation-history-table__repeat-cell .ef-checkbox-item {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0;
    background: none;
}

.ef-donation-history-table__repeat-cell .ef-checkbox-item:hover,
.ef-donation-history-table__repeat-cell .ef-checkbox-item:has(input:checked) {
    background: none;
}

.ef-donation-history-table__amount-cell {
    width: 1%;
    white-space: nowrap;
}

.ef-donation-history-table__amount {
    width: 120px;
    max-width: 120px;
    height: 44px;
    padding: 8px 12px;
}

textarea.ef-donation-history-table__text {
    width: 100%;
    min-width: 0;
    height: 44px;
    min-height: 44px;
    padding: 8px 12px;
    line-height: 26px;
    resize: none;
    overflow: hidden;
    overflow-wrap: break-word;
}

.ef-donation-history-table__na {
    color: #6b7280;
}

.ef-donation-history-table__intro {
    margin: 8px 0 0;
}

.ef-donation-history-table__empty {
    margin: 8px 0 0;
    color: #6b7280;
}

.ef-donation-history-table:has(tbody tr) .ef-donation-history-table__empty {
    display: none;
}

.ef-donation-history-table__rows:not(:has(tbody tr)) {
    display: none;
}

.ef-donation-history-table__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}

.ef-donation-history-table__actions--top {
    margin-bottom: 16px;
}

.ef-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 1024px) {
    .ef-donation-history-table__rows,
    .ef-donation-history-table__rows tbody,
    .ef-donation-history-table__rows tr,
    .ef-donation-history-table__rows td {
        display: block;
        width: 100%;
    }

    .ef-donation-history-table__rows thead {
        display: none;
    }

    .ef-donation-history-table__rows tr {
        border-bottom: 1px solid #d1d5db;
        padding: 12px 0;
    }

    .ef-donation-history-table__rows td {
        display: flex;
        align-items: center;
        gap: 16px;
        border-bottom: none;
        padding: 6px 0;
        white-space: normal;
    }

    .ef-donation-history-table__rows td::before {
        content: attr(data-label);
        font-weight: 600;
        flex: 0 0 45%;
    }

    .ef-donation-history-table__rows td.ef-donation-history-table__repeat-cell {
        padding-right: 0;
    }

    textarea.ef-donation-history-table__text,
    .ef-donation-history-table__amount {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        max-width: none;
    }

    .ef-donation-history-table__remove {
        flex: 0 1 auto;
        width: auto;
        padding: 6px 12px;
    }
}

/* The "Same as first attendee" label sits inside .ef-attendee-inline-fields,
   whose generic "label { display: block }" rule switched off the flex layout
   and its 10px gap, so the text touched the checkbox. Restore the flex row. */
.ef-attendee-inline-fields .ef-same-as-first-label {
    display: flex;
}

/* Event booking form on phones (Pastel mobile review) */
@media (max-width: 768px) {
    /* The attendee list was boxed three times (form, container, person card),
       leaving the fields about 247px wide. Drop the middle layer and slim the card. */
    .ef-attendees-container {
        padding: 0;
    }

    .ef-attendee-inline {
        padding: 16px;
    }

    /* The mobile ".ef-btn" rule makes every button full width with big padding,
       which turned "Remove Person" into a large block. Small buttons stay small. */
    .ef-btn.ef-btn-small {
        width: auto;
        padding: 6px 12px;
    }

    /* Leave room between the person's name and the Remove Person button */
    .ef-attendee-inline-header {
        gap: 12px;
    }

    /* Left-align the running ticket total so it lines up with the breakdown above */
    .ef-attendees-total__grand {
        text-align: left;
    }

    /* Tighten the gap between the last field and the Submit button */
    .ef-form-navigation {
        margin-top: 0;
        padding-top: 12px;
    }

    /* Text blocks inside forms (notes, section headings) stacked their own 15px padding
       on top of the paragraph and heading margins, leaving ~60px gaps (Pastel #72, #73) */
    .ef-content-field {
        padding: 0;
    }

    .ef-content-field > :first-child {
        margin-top: 0;
    }

    .ef-content-field > :last-child {
        margin-bottom: 0;
    }

    /* Grouped fields (e.g. the address component) each kept their own bottom margin,
       so ~120px built up between the Find Address button and the next field
       (Pastel #88). Only the gap between rows is kept. */
    .ef-component-wrapper,
    .ef-component-instances:last-child,
    .ef-component-instances > .ef-field-row:last-child,
    .ef-component-instances > .ef-field-row:last-child .ef-field:last-child,
    .ef-postcode-lookup:last-child,
    .ef-postcode-lookup:has(+ .ef-address-fields-hidden) {
        margin-bottom: 0;
    }
}