/**
 * MBI Public Form — Stylesheet
 *
 * Scoped under #mbi-form-wrapper and .mbi-public-form-wrapper to prevent
 * theme conflicts. No external dependencies. No !important abuse.
 *
 * Sections:
 *   1.  CSS custom properties
 *   2.  Outer wrapper & card
 *   3.  Form header
 *   4.  Progress bar
 *   5.  Error container
 *   6.  Step panels
 *   7.  Field groups (label, input, select, textarea, hint, error)
 *   8.  Tags widget
 *   9.  Work-hours (step 3)
 *  10.  Image preview
 *  11.  Summary & GDPR (step 6)
 *  12.  Consent row
 *  13.  Buttons
 *  14.  Submit row & feedback
 *  15.  Success screen
 *  16.  Responsive — mobile (< 640px)
 *
 * @package MyListingBulkImporter\Modules\PublicForm\Assets
 * @since   1.2.0
 */

/* ============================================================
   1. CSS Custom Properties
   ============================================================ */

#mbi-form-wrapper {
    --mbi-primary:        #2271b1;
    --mbi-primary-hover:  #135e96;
    --mbi-primary-light:  #dbeafe;
    --mbi-secondary:      #6b7280;
    --mbi-secondary-hover:#4b5563;
    --mbi-border:         #c3c4c7;
    --mbi-border-focus:   #2271b1;
    --mbi-border-error:   #d63638;
    --mbi-error-text:     #d63638;
    --mbi-hint-text:      #6b7280;
    --mbi-bg:             #ffffff;
    --mbi-bg-card:        #ffffff;
    --mbi-bg-grey:        #f6f7f7;
    --mbi-bg-gdpr:        #f0f4f8;
    --mbi-bg-summary:     #f0f6fc;
    --mbi-text:           #1d2327;
    --mbi-text-muted:     #6b7280;
    --mbi-radius-sm:      4px;
    --mbi-radius:         8px;
    --mbi-radius-lg:      12px;
    --mbi-shadow:         0 2px 12px rgba(0, 0, 0, 0.10);
    --mbi-gap:            16px;
    --mbi-input-height:   44px;
    --mbi-font-size:      16px;
    --mbi-font-size-sm:   14px;
    --mbi-font-size-xs:   12px;
    --mbi-transition:     0.15s ease;
}

/* ============================================================
   2. Outer Wrapper & Card
   ============================================================ */

#mbi-form-wrapper,
.mbi-public-form-wrapper {
    box-sizing:      border-box;
    max-width:       680px;
    margin:          32px auto;
    padding:         40px;
    background:      var(--mbi-bg-card);
    border-radius:   var(--mbi-radius-lg);
    box-shadow:      var(--mbi-shadow);
    color:           var(--mbi-text);
    font-size:       var(--mbi-font-size);
    line-height:     1.6;
}

#mbi-form-wrapper *,
#mbi-form-wrapper *::before,
#mbi-form-wrapper *::after {
    box-sizing: inherit;
}

/* ============================================================
   3. Form Header
   ============================================================ */

#mbi-form-wrapper .mbi-form-header {
    margin-bottom: 24px;
}

#mbi-form-wrapper .mbi-form-title {
    font-size:     1.5rem;
    font-weight:   700;
    margin:        0 0 8px;
    line-height:   1.3;
    color:         var(--mbi-text);
}

#mbi-form-wrapper .mbi-form-intro {
    margin:        0;
    color:         var(--mbi-text-muted);
    font-size:     var(--mbi-font-size-sm);
}

/* ============================================================
   4. Progress Bar
   ============================================================ */

#mbi-form-wrapper .mbi-progress {
    margin-bottom: 28px;
}

#mbi-form-wrapper .mbi-progress-track {
    width:            100%;
    height:           8px;
    background:       #e5e7eb;
    border-radius:    var(--mbi-radius);
    overflow:         hidden;
    margin-bottom:    6px;
}

#mbi-form-wrapper .mbi-progress-fill {
    height:           100%;
    background:       var(--mbi-primary);
    border-radius:    var(--mbi-radius);
    transition:       width 0.3s ease;
    min-width:        4px;
}

#mbi-form-wrapper .mbi-progress-label {
    display:       block;
    text-align:    right;
    font-size:     var(--mbi-font-size-xs);
    color:         var(--mbi-text-muted);
    font-weight:   500;
}

/* ============================================================
   5. Error Container (top-level)
   ============================================================ */

#mbi-form-wrapper .mbi-form-errors {
    background:    #fef2f2;
    border:        1px solid #fca5a5;
    border-left:   4px solid var(--mbi-error-text);
    border-radius: var(--mbi-radius-sm);
    padding:       12px 16px;
    margin-bottom: 20px;
    color:         var(--mbi-error-text);
    font-size:     var(--mbi-font-size-sm);
}

#mbi-form-wrapper .mbi-form-errors[hidden] {
    display: none;
}

/* ============================================================
   6. Step Panels
   ============================================================ */

#mbi-form-wrapper .mbi-form-step[hidden] {
    display: none;
}

#mbi-form-wrapper .mbi-step-title {
    font-size:     1.125rem;
    font-weight:   600;
    margin:        0 0 8px;
    color:         var(--mbi-text);
}

#mbi-form-wrapper .mbi-step-desc {
    margin:        0 0 20px;
    color:         var(--mbi-text-muted);
    font-size:     var(--mbi-font-size-sm);
}

/* ============================================================
   7. Field Groups
   ============================================================ */

#mbi-form-wrapper .mbi-field-group {
    display:        flex;
    flex-direction: column;
    gap:            6px;
    margin-bottom:  var(--mbi-gap);
}

/* Labels */
#mbi-form-wrapper .mbi-label {
    font-size:   var(--mbi-font-size-sm);
    font-weight: 600;
    color:       var(--mbi-text);
    cursor:      pointer;
}

#mbi-form-wrapper .mbi-label--required::after {
    content:      " *";
    color:        var(--mbi-error-text);
    font-weight:  700;
}

/* Screen reader only */
#mbi-form-wrapper .mbi-label--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;
}

/* Optional marker */
#mbi-form-wrapper .mbi-optional {
    font-weight: 400;
    color:       var(--mbi-text-muted);
    font-size:   var(--mbi-font-size-xs);
}

/* Text inputs, email, tel, url */
#mbi-form-wrapper .mbi-input {
    width:            100%;
    min-height:       var(--mbi-input-height);
    padding:          10px 12px;
    font-size:        var(--mbi-font-size);
    color:            var(--mbi-text);
    background:       var(--mbi-bg);
    border:           1px solid var(--mbi-border);
    border-radius:    var(--mbi-radius);
    outline:          none;
    transition:       border-color var(--mbi-transition), box-shadow var(--mbi-transition);
    appearance:       none;
    -webkit-appearance: none;
}

#mbi-form-wrapper .mbi-input::placeholder {
    color:   var(--mbi-text-muted);
    opacity: 1;
}

#mbi-form-wrapper .mbi-input:focus {
    border-color: var(--mbi-border-focus);
    box-shadow:   0 0 0 3px rgba(34, 113, 177, 0.18);
}

#mbi-form-wrapper .mbi-input[aria-invalid="true"],
#mbi-form-wrapper .mbi-input.mbi-error {
    border-color: var(--mbi-border-error);
}

/* Select */
#mbi-form-wrapper .mbi-select {
    width:            100%;
    min-height:       var(--mbi-input-height);
    padding:          10px 36px 10px 12px;
    font-size:        var(--mbi-font-size);
    color:            var(--mbi-text);
    background:       var(--mbi-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%236b7280' d='M4 6l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 10px center;
    background-size:  20px;
    border:           1px solid var(--mbi-border);
    border-radius:    var(--mbi-radius);
    outline:          none;
    cursor:           pointer;
    appearance:       none;
    -webkit-appearance: none;
    transition:       border-color var(--mbi-transition), box-shadow var(--mbi-transition);
}

#mbi-form-wrapper .mbi-select:focus {
    border-color: var(--mbi-border-focus);
    box-shadow:   0 0 0 3px rgba(34, 113, 177, 0.18);
}

/* Textarea */
#mbi-form-wrapper .mbi-textarea {
    width:         100%;
    min-height:    100px;
    padding:       10px 12px;
    font-size:     var(--mbi-font-size);
    font-family:   inherit;
    color:         var(--mbi-text);
    background:    var(--mbi-bg);
    border:        1px solid var(--mbi-border);
    border-radius: var(--mbi-radius);
    outline:       none;
    resize:        vertical;
    transition:    border-color var(--mbi-transition), box-shadow var(--mbi-transition);
}

#mbi-form-wrapper .mbi-textarea::placeholder {
    color:   var(--mbi-text-muted);
    opacity: 1;
}

#mbi-form-wrapper .mbi-textarea:focus {
    border-color: var(--mbi-border-focus);
    box-shadow:   0 0 0 3px rgba(34, 113, 177, 0.18);
}

/* Field hint */
#mbi-form-wrapper .mbi-field-hint {
    font-size:    var(--mbi-font-size-xs);
    color:        var(--mbi-hint-text);
    font-style:   italic;
    margin-top:   2px;
}

/* Field error */
#mbi-form-wrapper .mbi-field-error {
    font-size:   var(--mbi-font-size-xs);
    color:       var(--mbi-error-text);
    font-weight: 500;
    min-height:  1em;
}

#mbi-form-wrapper .mbi-field-error:empty {
    display: none;
}

/* ============================================================
   8. Tags Widget
   ============================================================ */

#mbi-form-wrapper .mbi-tags-wrapper {
    position:      relative;
    border:        1px solid var(--mbi-border);
    border-radius: var(--mbi-radius);
    padding:       6px 8px;
    background:    var(--mbi-bg);
    display:       flex;
    flex-wrap:     wrap;
    gap:           6px;
    min-height:    var(--mbi-input-height);
    align-items:   center;
    transition:    border-color var(--mbi-transition), box-shadow var(--mbi-transition);
}

#mbi-form-wrapper .mbi-tags-wrapper:focus-within {
    border-color: var(--mbi-border-focus);
    box-shadow:   0 0 0 3px rgba(34, 113, 177, 0.18);
}

/* Selected tag chips */
#mbi-form-wrapper .mbi-tags-selected {
    display:     flex;
    flex-wrap:   wrap;
    gap:         4px;
    align-items: center;
}

#mbi-form-wrapper .mbi-tags-selected .mbi-tag-chip {
    display:       inline-flex;
    align-items:   center;
    gap:           4px;
    padding:       3px 10px 3px 10px;
    background:    var(--mbi-primary);
    color:         #ffffff;
    border-radius: 20px;
    font-size:     var(--mbi-font-size-xs);
    font-weight:   500;
    line-height:   1.4;
    white-space:   nowrap;
}

#mbi-form-wrapper .mbi-tags-selected .mbi-tag-chip button {
    background:    transparent;
    border:        none;
    color:         rgba(255, 255, 255, 0.85);
    cursor:        pointer;
    font-size:     14px;
    line-height:   1;
    padding:       0 0 0 2px;
    margin:        0;
    display:       inline-flex;
    align-items:   center;
}

#mbi-form-wrapper .mbi-tags-selected .mbi-tag-chip button:hover {
    color: #ffffff;
}

/* Tags text input — borderless inside the wrapper */
#mbi-form-wrapper .mbi-tags-input {
    flex:          1;
    min-width:     120px;
    border:        none;
    box-shadow:    none;
    padding:       4px 4px;
    min-height:    unset;
    font-size:     var(--mbi-font-size-sm);
    outline:       none;
    background:    transparent;
}

#mbi-form-wrapper .mbi-tags-input:focus {
    border:     none;
    box-shadow: none;
}

/* Tags dropdown */
#mbi-form-wrapper .mbi-tags-dropdown {
    position:      absolute;
    top:           calc(100% + 4px);
    left:          0;
    right:         0;
    background:    var(--mbi-bg);
    border:        1px solid var(--mbi-border);
    border-radius: var(--mbi-radius);
    box-shadow:    0 4px 12px rgba(0, 0, 0, 0.12);
    max-height:    200px;
    overflow-y:    auto;
    z-index:       100;
    list-style:    none;
    margin:        0;
    padding:       4px 0;
}

#mbi-form-wrapper .mbi-tags-dropdown[hidden] {
    display: none;
}

#mbi-form-wrapper .mbi-tags-dropdown li,
#mbi-form-wrapper .mbi-tags-dropdown [role="option"] {
    padding:    10px 14px;
    cursor:     pointer;
    font-size:  var(--mbi-font-size-sm);
    color:      var(--mbi-text);
    transition: background var(--mbi-transition);
}

#mbi-form-wrapper .mbi-tags-dropdown li:hover,
#mbi-form-wrapper .mbi-tags-dropdown [role="option"]:hover,
#mbi-form-wrapper .mbi-tags-dropdown [aria-selected="true"] {
    background: var(--mbi-primary-light);
    color:      var(--mbi-primary-hover);
}

/* Category combobox wrapper — position:relative so dropdown anchors correctly */
#mbi-form-wrapper .mbi-combobox-wrap {
    position: relative;
}

#mbi-form-wrapper #mbi-category-other-row {
    margin-top: 8px;
}

/* ============================================================
   9. Work Hours — Step 3
   ============================================================ */

#mbi-form-wrapper .mbi-day-fieldset {
    border:        1px solid var(--mbi-border);
    border-radius: var(--mbi-radius);
    background:    var(--mbi-bg-grey);
    padding:       12px 16px 14px;
    margin-bottom: 10px;
}

#mbi-form-wrapper .mbi-day-legend {
    font-size:   var(--mbi-font-size-sm);
    font-weight: 600;
    color:       var(--mbi-text);
    padding:     0 6px;
}

#mbi-form-wrapper .mbi-day-status {
    display:     flex;
    flex-wrap:   wrap;
    gap:         16px;
    margin-top:  6px;
    margin-bottom: 4px;
}

#mbi-form-wrapper .mbi-radio-label {
    display:     inline-flex;
    align-items: center;
    gap:         6px;
    font-size:   var(--mbi-font-size-sm);
    cursor:      pointer;
    color:       var(--mbi-text);
    white-space: nowrap;
}

#mbi-form-wrapper .mbi-radio-label input[type="radio"] {
    width:  16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--mbi-primary);
}

/* Day slots container */
#mbi-form-wrapper .mbi-day-slots {
    margin-top: 10px;
}

#mbi-form-wrapper .mbi-day-slots[hidden] {
    display: none;
}

/* Individual slot */
#mbi-form-wrapper .mbi-slot {
    margin-bottom: 8px;
}

#mbi-form-wrapper .mbi-slot[hidden] {
    display: none;
}

#mbi-form-wrapper .mbi-slot-label {
    display:     block;
    font-size:   var(--mbi-font-size-xs);
    font-weight: 600;
    color:       var(--mbi-text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

#mbi-form-wrapper .mbi-slot-times {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-wrap:   wrap;
}

#mbi-form-wrapper .mbi-time-input {
    width:      120px;
    min-height: 38px;
    padding:    7px 10px;
    flex-shrink: 0;
}

#mbi-form-wrapper .mbi-time-separator {
    color:       var(--mbi-text-muted);
    font-weight: 500;
    flex-shrink: 0;
}

/* ============================================================
   10. Image Preview
   ============================================================ */

#mbi-form-wrapper .mbi-image-preview {
    margin-top: 8px;
    border:     1px solid var(--mbi-border);
    border-radius: var(--mbi-radius);
    overflow:   hidden;
    max-width:  200px;
}

#mbi-form-wrapper .mbi-image-preview[hidden] {
    display: none;
}

#mbi-form-wrapper .mbi-image-preview img {
    display:   block;
    width:     100%;
    height:    auto;
    max-height: 150px;
    object-fit: cover;
}

/* ============================================================
   11. Summary & GDPR — Step 6
   ============================================================ */

/* Summary box */
#mbi-form-wrapper .mbi-summary {
    background:    var(--mbi-bg-summary);
    border:        1px solid #bfdbfe;
    border-radius: var(--mbi-radius);
    padding:       20px;
    margin-bottom: 24px;
}

#mbi-form-wrapper .mbi-summary-title {
    font-size:    1rem;
    font-weight:  600;
    margin:       0 0 14px;
    color:        var(--mbi-text);
}

#mbi-form-wrapper .mbi-summary-list {
    margin:  0;
    padding: 0;
}

#mbi-form-wrapper .mbi-summary-list dt {
    font-size:   var(--mbi-font-size-xs);
    font-weight: 600;
    color:       var(--mbi-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top:  10px;
}

#mbi-form-wrapper .mbi-summary-list dt:first-child {
    margin-top: 0;
}

#mbi-form-wrapper .mbi-summary-list dd {
    margin:      4px 0 0;
    padding:     0 0 10px;
    border-bottom: 1px solid #e0eefe;
    font-size:   var(--mbi-font-size-sm);
    color:       var(--mbi-text);
    word-break:  break-word;
}

#mbi-form-wrapper .mbi-summary-list dd:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* GDPR info box */
#mbi-form-wrapper .mbi-gdpr-info {
    background:   var(--mbi-bg-gdpr);
    border:       1px solid #dbeafe;
    border-left:  4px solid var(--mbi-primary);
    border-radius: var(--mbi-radius);
    padding:      16px 20px;
    margin-bottom: 20px;
    font-size:    var(--mbi-font-size-xs);
    color:        var(--mbi-text-muted);
}

#mbi-form-wrapper .mbi-gdpr-title {
    font-size:   var(--mbi-font-size-sm);
    font-weight: 600;
    color:       var(--mbi-text);
    margin:      0 0 10px;
}

#mbi-form-wrapper .mbi-gdpr-list {
    margin:  0;
    padding: 0;
}

#mbi-form-wrapper .mbi-gdpr-list dt {
    font-weight: 600;
    color:       var(--mbi-text);
    margin-top:  8px;
    font-size:   var(--mbi-font-size-xs);
}

#mbi-form-wrapper .mbi-gdpr-list dt:first-child {
    margin-top: 0;
}

#mbi-form-wrapper .mbi-gdpr-list dd {
    margin:    4px 0 0;
    padding:   0;
    font-size: var(--mbi-font-size-xs);
    color:     var(--mbi-text-muted);
    word-break: break-word;
}

#mbi-form-wrapper .mbi-gdpr-list a {
    color: var(--mbi-primary);
    text-decoration: underline;
}

#mbi-form-wrapper .mbi-gdpr-list a:hover {
    color: var(--mbi-primary-hover);
}

/* ============================================================
   12. Consent Row
   ============================================================ */

#mbi-form-wrapper .mbi-field-group--consent {
    gap: 8px;
}

#mbi-form-wrapper .mbi-consent-row {
    display:     flex;
    align-items: flex-start;
    gap:         10px;
}

#mbi-form-wrapper .mbi-checkbox {
    width:       18px;
    height:      18px;
    flex-shrink: 0;
    margin-top:  2px;
    cursor:      pointer;
    accent-color: var(--mbi-primary);
}

#mbi-form-wrapper .mbi-consent-label {
    font-size:  var(--mbi-font-size-sm);
    font-weight: 400;
    cursor:     pointer;
    color:      var(--mbi-text);
    line-height: 1.5;
}

#mbi-form-wrapper .mbi-consent-label a {
    color:           var(--mbi-primary);
    text-decoration: underline;
}

#mbi-form-wrapper .mbi-consent-label a:hover {
    color: var(--mbi-primary-hover);
}

/* ============================================================
   13. Buttons
   ============================================================ */

#mbi-form-wrapper .cbs-btn {
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    gap:           6px;
    min-height:    var(--mbi-input-height);
    padding:       10px 22px;
    font-size:     var(--mbi-font-size-sm);
    font-weight:   600;
    border-radius: var(--mbi-radius);
    border:        2px solid transparent;
    cursor:        pointer;
    text-decoration: none;
    transition:    background var(--mbi-transition), color var(--mbi-transition), border-color var(--mbi-transition), box-shadow var(--mbi-transition);
    white-space:   nowrap;
    line-height:   1.2;
}

#mbi-form-wrapper .cbs-btn:focus-visible {
    outline:     3px solid var(--mbi-border-focus);
    outline-offset: 2px;
}

/* Primary button */
#mbi-form-wrapper .cbs-btn--primary {
    background:  var(--mbi-primary);
    color:       #ffffff;
    border-color: var(--mbi-primary);
}

#mbi-form-wrapper .cbs-btn--primary:hover {
    background:  var(--mbi-primary-hover);
    border-color: var(--mbi-primary-hover);
}

#mbi-form-wrapper .cbs-btn--primary:active {
    background:  #0e4b78;
    border-color: #0e4b78;
}

/* Secondary button */
#mbi-form-wrapper .cbs-btn--secondary {
    background:  var(--mbi-bg);
    color:       var(--mbi-secondary);
    border-color: var(--mbi-border);
}

#mbi-form-wrapper .cbs-btn--secondary:hover {
    background:  var(--mbi-bg-grey);
    color:       var(--mbi-secondary-hover);
    border-color: var(--mbi-secondary);
}

#mbi-form-wrapper .cbs-btn--secondary:active {
    background:  #e5e7eb;
}

/* Disabled state for all buttons */
#mbi-form-wrapper .cbs-btn:disabled,
#mbi-form-wrapper .cbs-btn[disabled] {
    opacity: 0.55;
    cursor:  not-allowed;
}

/* Copy-from-Lunes suggestion button (Mar–Vie) */
#mbi-form-wrapper .mbi-copy-lunes-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    margin-bottom:   10px;
    padding:         5px 12px;
    font-size:       0.82em;
    font-weight:     500;
    color:           #2271b1;
    background:      #f0f6fc;
    border:          1px solid #c3d9f0;
    border-radius:   4px;
    cursor:          pointer;
    transition:      background 0.15s, color 0.15s;
}

#mbi-form-wrapper .mbi-copy-lunes-btn::before {
    content: '↙';
}

#mbi-form-wrapper .mbi-copy-lunes-btn:hover {
    background: #dbeafe;
    color:      #1a5c99;
    border-color: #93c5fd;
}

/* Navigation button bar */
#mbi-form-wrapper .mbi-nav-buttons {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    margin-top:      28px;
    padding-top:     20px;
    border-top:      1px solid #f0f0f1;
    gap:             12px;
}

/* When only the Next button is visible (step 1), push it to the right */
#mbi-form-wrapper .mbi-btn-prev[hidden] + .mbi-btn-next {
    margin-left: auto;
}

#mbi-form-wrapper .mbi-btn-prev[hidden],
#mbi-form-wrapper .mbi-btn-next[hidden] {
    display: none;
}

/* ============================================================
   14. Submit Row & Feedback
   ============================================================ */

#mbi-form-wrapper .mbi-submit-row {
    display:     flex;
    align-items: center;
    gap:         14px;
    margin-top:  20px;
    flex-wrap:   wrap;
}

#mbi-form-wrapper .mbi-submit-btn {
    min-width: 140px;
}

#mbi-form-wrapper .mbi-submit-feedback {
    font-size:  var(--mbi-font-size-sm);
    color:      var(--mbi-text-muted);
    font-style: italic;
}

#mbi-form-wrapper .mbi-submit-feedback.mbi-error {
    color: var(--mbi-error-text);
}

/* ============================================================
   15. Success Screen
   ============================================================ */

#mbi-form-wrapper .mbi-success {
    text-align:  center;
    padding:     48px 24px;
    color:       var(--mbi-text);
}

#mbi-form-wrapper .mbi-success[hidden] {
    display: none;
}

#mbi-form-wrapper #mbi-success-message {
    font-size:   1.25rem;
    font-weight: 600;
    margin:      0;
    line-height: 1.5;
}

/* ============================================================
   16. Responsive — Mobile (< 640px)
   ============================================================ */

@media screen and (max-width: 640px) {
    #mbi-form-wrapper,
    .mbi-public-form-wrapper {
        padding:       24px 18px;
        border-radius: var(--mbi-radius);
        margin:        16px auto;
    }

    #mbi-form-wrapper .mbi-form-title {
        font-size: 1.25rem;
    }

    /* Stack time inputs vertically */
    #mbi-form-wrapper .mbi-slot-times {
        flex-direction: column;
        align-items:    flex-start;
        gap:            6px;
    }

    #mbi-form-wrapper .mbi-time-input {
        width: 100%;
    }

    #mbi-form-wrapper .mbi-time-separator {
        display: none;
    }

    /* Radio labels wrap */
    #mbi-form-wrapper .mbi-day-status {
        gap: 10px;
    }

    /* Full-width buttons on mobile */
    #mbi-form-wrapper .mbi-nav-buttons {
        gap: 10px;
    }

    #mbi-form-wrapper .cbs-btn {
        flex: 1;
        justify-content: center;
    }

    #mbi-form-wrapper .mbi-btn-prev[hidden] + .mbi-btn-next {
        flex: unset;
        width: 100%;
    }

    /* Summary list */
    #mbi-form-wrapper .mbi-summary {
        padding: 14px;
    }

    #mbi-form-wrapper .mbi-gdpr-info {
        padding: 12px 14px;
    }
}

/* ─── Claim Panel ────────────────────────────────────────────────────────────
 * All states are controlled by the JS state machine (ClaimPanel).
 * States: idle | visible | loading | sent | error
 * @since 1.2.0
 * ─────────────────────────────────────────────────────────────────────────── */

#mbi-claim-panel {
    margin-top: 16px;
    padding: 18px 20px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    font-size: 14px;
    line-height: 1.55;
    display: none; /* JS shows/hides */
}

/* idle — hidden */
#mbi-claim-panel.mbi-claim-panel--idle {
    display: none;
}

/* visible — panel ready for input */
#mbi-claim-panel.mbi-claim-panel--visible {
    display: block;
}

/* loading — form inputs disabled, opacity reduced */
#mbi-claim-panel.mbi-claim-panel--loading {
    display: block;
    opacity: 0.7;
    pointer-events: none;
}

/* sent — success state */
#mbi-claim-panel.mbi-claim-panel--sent {
    display: block;
    border-color: #bbf7d0;
    background: #f0fdf4;
}

/* error — error state */
#mbi-claim-panel.mbi-claim-panel--error {
    display: block;
    border-color: #fecaca;
    background: #fff5f5;
}

/* Panel intro text */
#mbi-claim-panel .mbi-claim-panel__text {
    margin: 0 0 14px;
    color: #4a5568;
}

/* Panel form row */
#mbi-claim-panel .mbi-claim-panel__form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}

#mbi-claim-panel .mbi-claim-panel__form .mbi-label {
    flex: 1 1 100%;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

#mbi-claim-panel .mbi-claim-panel__form input[type="email"] {
    flex: 1 1 220px;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    background: #ffffff;
    color: #1a202c;
    transition: border-color 0.15s;
}

#mbi-claim-panel .mbi-claim-panel__form input[type="email"]:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

/* Submit button inside claim panel */
#mbi-claim-panel #mbi-claim-submit {
    flex: 0 0 auto;
    padding: 9px 20px;
    background: #6366f1;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    white-space: nowrap;
}

#mbi-claim-panel #mbi-claim-submit:hover:not(:disabled) {
    background: #4f46e5;
}

#mbi-claim-panel #mbi-claim-submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Feedback message */
#mbi-claim-panel #mbi-claim-message {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.5;
    min-height: 0;
}

#mbi-claim-panel.mbi-claim-panel--sent  #mbi-claim-message { color: #166534; }
#mbi-claim-panel.mbi-claim-panel--error #mbi-claim-message { color: #991b1b; }

/* Honeypot field — always hidden from sighted users */
#mbi-hp {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* ── Responsive: claim panel on narrow viewports ────────────────────────── */
@media ( max-width: 480px ) {
    #mbi-claim-panel .mbi-claim-panel__form {
        flex-direction: column;
        align-items: stretch;
    }

    #mbi-claim-panel .mbi-claim-panel__form input[type="email"],
    #mbi-claim-panel #mbi-claim-submit {
        width: 100%;
    }
}

/* ── File upload components ─────────────────────────────────────────────── */

/* Hide the native file input; use the label as the trigger */
.mbi-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Styled upload button (label acting as button) */
.mbi-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: #fff;
    border: 2px dashed #c9a87c;
    border-radius: 8px;
    color: #7a5c35;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    margin-top: 6px;
}
.mbi-upload-btn:hover {
    background: #fdf5ea;
    border-color: #a37040;
}
.mbi-upload-btn__icon {
    font-size: 18px;
    line-height: 1;
}

/* Status text (uploading…) */
.mbi-upload-status {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: #6b7280;
    min-height: 18px;
}

/* Logo preview — circular, matching the listing display */
#mbi-logo-preview {
    border-radius: 50%;
    width: 80px;
    height: 80px;
    overflow: hidden;
    border: 2px solid #e0d6c8;
}
#mbi-logo-preview .mbi-upload-preview__img {
    width: 80px;
    height: 80px;
    max-width: 80px;
    max-height: 80px;
    border-radius: 0;
    object-fit: cover;
}

/* Single-image preview container */
.mbi-upload-preview {
    position: relative;
    display: inline-block;
    margin-top: 10px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e0d6c8;
}
.mbi-upload-preview__img {
    display: block;
    max-width: 180px;
    max-height: 120px;
    object-fit: cover;
    border-radius: 7px;
}

/* Remove button overlay on single-image preview */
.mbi-upload-remove:not(.mbi-gallery-thumb__remove) {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    line-height: 26px;
    text-align: center;
    padding: 0;
}
.mbi-upload-remove:not(.mbi-gallery-thumb__remove):hover {
    background: rgba(0,0,0,0.8);
}

/* Gallery thumbnails grid */
.mbi-gallery-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.mbi-gallery-thumb {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e0d6c8;
}
.mbi-gallery-thumb__img {
    display: block;
    width: 90px;
    height: 70px;
    object-fit: cover;
}
.mbi-gallery-thumb__remove {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 11px;
    cursor: pointer;
    line-height: 22px;
    text-align: center;
    padding: 0;
}
.mbi-gallery-thumb__remove:hover {
    background: rgba(0,0,0,0.8);
}

/* Focus ring for keyboard accessibility */
.mbi-upload-btn:focus-visible,
.mbi-upload-remove:focus-visible,
.mbi-gallery-thumb__remove:focus-visible {
    outline: 2px solid #c9a87c;
    outline-offset: 2px;
}

@media ( max-width: 480px ) {
    .mbi-upload-btn { width: 100%; justify-content: center; }
    .mbi-gallery-thumb__img { width: 72px; height: 56px; }
}