/* Visual language matches the author's own Shopify reference app (abn-custom-fields theme block):
   a light card wrapping all fields, an accent/focus color pair driven by CSS custom properties,
   8px-radius inputs with a soft focus ring, custom checkbox/radio controls, and 3 distinct upload
   widgets (dropzone / single-button-preview / multi-thumbnail-grid). !important on layout-critical
   properties only — the Flatsome theme's product-page CSS is opinionated about form control sizing.
*/
.abn-cf-sf-wrap {
    /* Defaults — overridden per-site by inline custom properties from the Field Settings screen
       (see abn_cf_enqueue_storefront_assets() in storefront.php), so these only apply when nothing
       has been configured there yet. --abn-cf-accent is "Primary Color (for buttons)"; --abn-cf-active
       is the separate "Active Color" used for checkboxes/outlines/selected-state indicators — the
       reference app treats these as two distinct settings, not one shared accent. */
    --abn-cf-primary: #3f3f3f;
    --abn-cf-accent: #6a7059;
    --abn-cf-active: #ff910f;
    --abn-cf-checkmark: #ffffff;
    --abn-cf-border: #eaeaea;
    --abn-cf-bg: #f7f7f7;
    --abn-cf-radius: 8px;
    --abn-cf-focus: #6a7059;
    --abn-cf-focus-ring: rgba(106, 112, 89, .15);
    --abn-cf-success: #008060;
    --abn-cf-error: #d82c0d;

    display: block !important;
    margin: 16px 0 !important;
    background: var(--abn-cf-bg) !important;
    border: 1px solid var(--abn-cf-border) !important;
    border-radius: 4px !important;
    padding: 15px !important;
    gap: 0px;
    display: flex !important;
    flex-direction: column;
}
.abn-cf-sf-field {
    display: block !important;
    margin-bottom: 20px !important;
}

.abn-cf-sf-field.abn-cf-sf-field-hidden {
    margin-bottom: 0 !important;
}

/* Conditional Display sets el.hidden = true/false in storefront.js — without this, the plain
   `display: block !important` above beats the browser's own `[hidden] { display: none }` rule, so
   the field's inputs went disabled (JS also does that) but the wrapper never actually disappeared. */
.abn-cf-sf-field[hidden] {
    display: none !important;
}
.abn-cf-sf-field:last-child {
    margin-bottom: 0 !important;
}
.abn-cf-sf-label {
    display: block !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    margin-bottom: 4px !important;
    color: var(--abn-cf-primary);
}
.abn-cf-sf-required {
    color: var(--abn-cf-error);
}
.abn-cf-sf-multi-count {
    font-weight: 400 !important;
    color: var(--abn-cf-primary);
}
/* Text/Textarea's live char counter (initCharCounter() in storefront.js) turns red the moment
   typed length passes Maximum Characters — the field's own maxlength attribute stops native typing
   at the limit, but pasted text can still land over it, so this is real, reachable feedback. Only
   the count number itself turns red — "/max" stays the normal counter color. */
.abn-cf-sf-multi-count.is-over .abn-cf-sf-count-num {
    color: var(--abn-cf-error) !important;
    font-weight: 600 !important;
}

.abn-cf-sf-input,
.abn-cf-sf-textarea,
.abn-cf-sf-select {
    /* No max-width here on purpose — the upload boxes (dropzone, etc.) are always 100% of the card,
       so capping just this group at an arbitrary px value made them narrower than everything else
       whenever the card itself was narrower than that cap. Every "box" field now fills the card
       the same way. */
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    height: auto !important;
    line-height: normal !important;
    padding: 10px 14px !important;
    border: 1px solid var(--abn-cf-border) !important;
    border-radius: var(--abn-cf-radius) !important;
    font-size: 14px !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05) !important;
    transition: border-color .15s, box-shadow .15s;
    margin-bottom: 0 !important;
}
.abn-cf-sf-input:focus,
.abn-cf-sf-textarea:focus,
.abn-cf-sf-select:focus {
    outline: none !important;
    border-color: var(--abn-cf-focus) !important;
    box-shadow: 0 0 0 3px var(--abn-cf-focus-ring) !important;
}
.abn-cf-sf-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    padding-right: 34px !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7177'><path d='M5.8 7.4 10 11.6l4.2-4.2 1.4 1.4L10 14.4 4.4 8.8z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 16px 16px !important;
}
.abn-cf-sf-field.has-error .abn-cf-sf-input,
.abn-cf-sf-field.has-error .abn-cf-sf-textarea,
.abn-cf-sf-field.has-error .abn-cf-sf-select {
    border-color: var(--abn-cf-error) !important;
}
.abn-cf-sf-field.has-error {
    animation: abn-cf-sf-shake .3s;
}
@keyframes abn-cf-sf-shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}
.abn-cf-sf-error {
    color: var(--abn-cf-error);
    font-size: 13px;
    margin: 4px 0 0;
}
.abn-cf-sf-help,
.abn-cf-sf-drop-hint {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #8a9099 !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    letter-spacing: .01em !important;
    line-height: 1.5 !important;
    margin: 6px 0 0 !important;
}
.abn-cf-sf-help::before,
.abn-cf-sf-drop-hint::before {
    content: "";
    flex-shrink: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: currentColor;
    opacity: .6;
}

/* Checkbox / Radio (Default render method) — custom square/circle controls, filled via ::after. */
.abn-cf-sf-options {
    display: flex !important;
    gap: 10px 10px !important;
}

label.abn-cf-sf-option-btn.abn-cf-sf-image-btn {
    margin-bottom: 0;
}

.abn-cf-sf-options-vertical {
    flex-direction: column !important;
}
.abn-cf-sf-options-horizontal {
    flex-direction: row !important;
    flex-wrap: wrap !important;
}
.abn-cf-sf-option {
    display: inline-flex !important;
    gap: 7px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    cursor: pointer;
    margin-bottom: 0;
    align-items: center;
    line-height: 1;
}
.abn-cf-sf-option input[type=checkbox],
.abn-cf-sf-option input[type=radio] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 17px !important;
    height: 17px !important;
    margin: 0 !important;
    border: 1.5px solid var(--abn-cf-border) !important;
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    background: #fff;
    transition: background-color .15s, border-color .15s;
}
.abn-cf-sf-option input[type=checkbox] {
    border-radius: 4px !important;
}
.abn-cf-sf-option input[type=radio] {
    border-radius: 50% !important;
}
.abn-cf-sf-option input[type=checkbox]:checked,
.abn-cf-sf-option input[type=radio]:checked {
    background: var(--abn-cf-active) !important;
    border-color: var(--abn-cf-active) !important;
}
.abn-cf-sf-option input[type=checkbox]:checked::after {
    content: "";
    position: absolute;
    left: 5px; top: 2px;
    width: 4px; height: 8px;
    border: solid var(--abn-cf-checkmark);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.abn-cf-sf-option input[type=radio]:checked::after {
    content: "";
    position: absolute;
    left: 4px; top: 4px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--abn-cf-checkmark);
}
.abn-cf-sf-option input:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px var(--abn-cf-focus-ring) !important;
}

/* Radio "Text Buttons" / "Color Palette" / "Image Buttons" render methods. */
.abn-cf-sf-options-buttons .abn-cf-sf-option-input {
    position: absolute !important;
    opacity: 0 !important;
    width: 1px !important;
    height: 1px !important;
    pointer-events: none;
}
.abn-cf-sf-option-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 7px 16px !important;
    border: 1px solid var(--abn-cf-border) !important;
    border-radius: 5px !important;
    font-size: 13px !important;
    cursor: pointer;
    background: #fff;
    transition: all .15s;
}
.abn-cf-sf-option-input:checked + .abn-cf-sf-option-btn {
    /* background: var(--abn-cf-active) !important; */
    border-color: var(--abn-cf-active) !important;
    color: #fff !important;
}
.abn-cf-sf-swatch {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border-width: 2px !important;
}
.abn-cf-sf-option-input:checked + .abn-cf-sf-swatch {
    /* No background-color rule here on purpose — the swatch's own color comes from its inline
       style="background-color:X" (set per-option in abn_cf_render_radio_field()); a stray
       `background-color: inherit !important` here used to override that with the parent's
       background (effectively always white) the moment an option got selected — real bug, not
       intentional "selected = white" behavior. */
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--abn-cf-active) !important;
    border-color: #fff !important;
}
/* Radio "Image Buttons" — a full photo swatch (not a thumbnail + separate caption): the option
   label overlays the bottom of the image as a dark bar, and a checkmark badge appears in the corner
   only on the selected option (pure :checked CSS, matches the rest of this file's button toggles). */
.abn-cf-sf-image-btn {
    display: block !important;
    width: 110px !important;
    height: 110px !important;
    padding: 0 !important;
    border-radius: var(--abn-cf-radius) !important;
    overflow: hidden;
    position: relative;
}
.abn-cf-sf-image-btn img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    border-radius: 0 !important;
}
.abn-cf-sf-image-btn-check {
    position: absolute !important;
    right: 4px; bottom: 4px;
    width: 22px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    background: var(--abn-cf-active) !important;
    color: #fff !important;
    opacity: 0;
    transform: scale(.7);
    transition: opacity .15s, transform .15s;
}
.abn-cf-sf-image-btn-check svg {
    width: 16px !important;
    height: 16px !important;
}
.abn-cf-sf-option-input:checked + .abn-cf-sf-image-btn {
    box-shadow: 0 0 0 2px var(--abn-cf-active) !important;
}
.abn-cf-sf-option-input:checked + .abn-cf-sf-image-btn .abn-cf-sf-image-btn-check {
    opacity: 1;
    transform: scale(1);
}

/* Color picker — native swatch + hex readout, opening a "Personalized Palettes" popover on click.
   Border-radius values match the reference app deliberately (12px row/popover, 8px swatch, dots stay
   circular) — the row is a soft rounded rect, NOT a pill, and the swatch is a rounded square, not a
   circle, unlike an earlier iteration of this CSS. */
.abn-cf-sf-color-wrap {
    position: relative;
    display: inline-flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: fit-content !important;
}
.abn-cf-sf-color-row {
    display: flex !important;
    flex: 0 0 auto !important;
    width: fit-content !important;
    align-items: center !important;
    gap: 10px !important;
    background: #fff !important;
    border: 1px solid var(--abn-cf-border) !important;
    border-radius: 12px !important;
    padding: 6px !important;
    cursor: pointer;
    position: relative;
    z-index: 2;
}
.abn-cf-sf-color {
    /* Without appearance:none, Chrome/Edge draw their own bordered chrome around the swatch that
       ignores border-radius/padding entirely — appearance:none hands full control to this rule. */
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    display: block !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: none !important;
    cursor: pointer;
    border: 1px solid #dcdbdb !important;
}

.abn-cf-sf-color-row input {
    margin: 0;
}

.abn-cf-sf-color::-webkit-color-swatch-wrapper {
    padding: 0;
}
.abn-cf-sf-color::-webkit-color-swatch {
    border: 0;
    border-radius: 8px;
}
.abn-cf-sf-color::-moz-color-swatch {
    border: 0;
    border-radius: 8px;
}
.abn-cf-sf-color-hex {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    color: var(--abn-cf-primary);
    padding: 0 4px;
}

/* "Show Hex Value as: Color" (showHexAs) replaces the text readout above with just this plain
   swatch — no text at all, the actual value/format is still available via the native title
   tooltip. Only rendered when Show Text Field is off (an editable input has to show text). */
.abn-cf-sf-color-swatch-readout {
    display: block !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 6px !important;
    border: 1px solid #dcdbdb !important;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06);
}

/* "Show Text Field" swaps the read-only .abn-cf-sf-color-hex span for this real, editable input —
   same font/sizing, plus a visible border so it reads as something you can click into and type/paste
   a hex code, unlike the plain read-only span. */
.abn-cf-sf-color-hex-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px !important;
    color: var(--abn-cf-primary) !important;
    padding: 6px 10px !important;
    border: 1px solid var(--abn-cf-border) !important;
    border-radius: var(--abn-cf-radius) !important;
    width: 110px !important;
    height: 38px !important;
    line-height: normal !important;
    background: #fff !important;
    box-shadow: none !important;
    margin: 0 !important;
    text-transform: uppercase;
}
.abn-cf-sf-color-hex-input:focus {
    outline: none !important;
    border-color: var(--abn-cf-focus) !important;
    box-shadow: 0 0 0 3px var(--abn-cf-focus-ring) !important;
}
/* Briefly flashed when a pasted/typed value isn't a real hex color (see initColorField() in
   storefront.js) — the input's own value is reverted right away, this is just a moment of feedback
   that what was entered didn't take. */
.abn-cf-sf-color-hex-input.is-invalid {
    border-color: var(--abn-cf-error) !important;
    box-shadow: 0 0 0 3px rgba(216, 44, 13, .15) !important;
}

/* Popover: hidden until .abn-cf-sf-color-wrap.is-open, positioned just under the row. Only ever
   rendered at all when "Show Palette Only" is on (see abn_cf_render_color_field()) — when it's off,
   .abn-cf-sf-palette simply isn't in the DOM, so there's nothing here to gate further. */
.abn-cf-sf-palette {
    display: none !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    background: #fff !important;
    padding: 13px !important;
    border-radius: 12px !important;
    border: 1px solid var(--abn-cf-border) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12) !important;
    z-index: 100 !important;
    width: max-content !important;
    max-width: 250px !important;
}
.abn-cf-sf-color-wrap.is-open .abn-cf-sf-palette {
    display: flex !important;
}
.abn-cf-sf-palette-dot {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
    max-width: 32px;
    min-height: 32px;
    max-height: 32px;
    margin: 0;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 3px solid transparent !important;
    outline: 2px solid transparent !important;
    outline-offset: 1px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1), 0 2px 4px rgba(0, 0, 0, .05) !important;
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
}
.abn-cf-sf-palette-dot:hover {
    transform: scale(1.1);
}
.abn-cf-sf-palette-dot.is-active {
    border-color: #fff !important;
    outline-color: var(--abn-cf-active) !important;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15), 0 2px 8px rgba(0, 0, 0, .12) !important;
    transform: scale(1.1);
}

/* Date Picker — custom calendar widget (initDateField() in storefront.js). Same visual language as
   the color picker's own row + popover above (light card, 12px/8px radii, soft shadow on the open
   popover) rather than inventing a third look for a third "click to open a floating panel" field. */
.abn-cf-sf-date-wrap {
    position: relative;
    width: 100% !important;
}
/* One single bordered pill — not 3 separate boxes side by side. The row itself carries the
   border/radius/shadow; the display input, icon button, and time input all sit borderless inside
   it, separated only by a thin 1px divider line instead of a visible gap. */
.abn-cf-sf-date-row {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    border: 1px solid var(--abn-cf-border) !important;
    border-radius: var(--abn-cf-radius) !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05) !important;
    overflow: hidden !important; /* clips each child's own square corners to the row's rounded ones */
    transition: border-color .15s, box-shadow .15s;
}
.abn-cf-sf-date-row:focus-within {
    border-color: var(--abn-cf-focus) !important;
    box-shadow: 0 0 0 3px var(--abn-cf-focus-ring) !important;
}
.abn-cf-sf-date-display {
    flex: 1 1 auto !important;
    min-width: 0;
    cursor: pointer;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
    margin-bottom: 0 !important;
    height: 100% !important;
}
.abn-cf-sf-date-display:focus {
    outline: none !important;
    box-shadow: none !important; /* the row's own :focus-within ring above is the only focus ring */
}
.abn-cf-sf-date-display[readonly] {
    background: #fff !important; /* not the grey "disabled" look — this is still fully interactive */
    cursor: pointer;
}
.abn-cf-sf-date-icon-btn {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    padding: 0 !important;
    border: 0 !important;
    border-left: 1px solid var(--abn-cf-border) !important;
    border-radius: 0 !important;
    background: none !important;
    color: var(--abn-cf-primary);
    cursor: pointer !important;
    margin-bottom: 0;
    margin-right: 0;
}
.abn-cf-sf-date-icon-btn svg {
    width: 16px !important;
    height: 16px !important;
}
.abn-cf-sf-date-icon-btn:hover {
    background: var(--abn-cf-bg) !important;
}
.abn-cf-sf-date-time {
    flex: 0 0 auto !important;
    width: 111px !important;
    border: 0 !important;
    border-left: 1px solid var(--abn-cf-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 10px 10px !important;
    font-size: 13px !important;
    margin-bottom: 0;
}
.abn-cf-sf-date-time:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Fixed px sizing throughout the popover (not %/fr-relative) is deliberate, not just for a
   compact look: a day cell sized via `aspect-ratio` inside a `1fr` grid track measured wrong in
   real testing (columns blew out to content size instead of splitting evenly, so only ~4 of the 7
   columns fit before wrapping) — explicit widths sidestep that sizing feedback loop entirely.
   overflow:hidden is a second safety net so any future sizing mismatch stays contained inside the
   popover's own rounded corners instead of visibly bleeding into whatever's on the page below it. */
.abn-cf-sf-date-calendar {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    z-index: 100 !important;
    width: 246px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid var(--abn-cf-border) !important;
    border-radius: 10px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12) !important;
    padding: 10px !important;
}
.abn-cf-sf-date-cal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
}
.abn-cf-sf-date-cal-title {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    flex: 1 1 auto !important;
    min-width: 0;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--abn-cf-primary);
    text-align: center;
}
.abn-cf-sf-date-cal-select {
    flex: 1 1 auto !important;
    min-width: 0;
    height: 30px;
    margin-bottom: 0;
    font-size: 12px !important;
    padding: 2px 4px !important;
    border: 1px solid var(--abn-cf-border) !important;
    border-radius: 5px !important;
    background: #fff !important;
    font-weight: 500;
    line-height: 1.2;
}
.abn-cf-sf-date-cal-nav {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px;
    max-width: 30px !important;
    max-height: 30px !important;
    margin: 0;
    padding: 0 !important;
    border: 1px solid var(--abn-cf-border) !important;
    border-radius: 5px !important;
    background: #fff !important;
    line-height: 1 !important;
    cursor: pointer;
    color: var(--abn-cf-primary);
}
.abn-cf-sf-date-cal-nav svg {
    width: 14px !important;
    height: 14px !important;
}
.abn-cf-sf-date-cal-nav:hover:not(:disabled) {
    border-color: var(--abn-cf-focus) !important;
}
.abn-cf-sf-date-cal-nav:disabled {
    opacity: .35;
    cursor: not-allowed;
}
.abn-cf-sf-date-wrap .abn-cf-sf-date-cal-weekdays,
.abn-cf-sf-date-wrap .abn-cf-sf-date-cal-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
}
.abn-cf-sf-date-cal-weekdays span,
.abn-cf-sf-date-cal-grid > span,
.abn-cf-sf-date-cal-day {
    /* 7 × 32px = 224px, comfortably inside the 246px popover (minus 20px padding = 226px) — flex
       items with a fixed px basis, not grid `1fr` tracks, is what actually guarantees 7-per-row. */
    flex: 0 0 32px !important;
    width: 32px !important;
    box-sizing: border-box !important;
}
.abn-cf-sf-date-cal-weekdays span {
    text-align: center;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: #8a9099 !important;
    padding-bottom: 4px;
}
.abn-cf-sf-date-cal-day {
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 6px !important;
    background: none !important;
    font-size: 12px !important;
    color: var(--abn-cf-primary);
    cursor: pointer;
}
.abn-cf-sf-date-cal-day:hover {
    background: var(--abn-cf-bg) !important;
}
.abn-cf-sf-date-cal-day.is-today {
    font-weight: 700 !important;
    color: var(--abn-cf-focus) !important;
}
.abn-cf-sf-date-cal-day.is-selected {
    background: var(--abn-cf-active) !important;
    color: var(--abn-cf-checkmark) !important;
    font-weight: 600 !important;
}

/* Message Label (informational banner) — icon + text side by side, dismiss (×) flush right. */
.abn-cf-sf-message {
    position: relative;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    padding: 10px 32px 10px 12px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    border-left: 4px solid #8c8f94 !important;
    background: #f6f7f7 !important;
}
.abn-cf-sf-message-icon {
    flex-shrink: 0;
    width: 16px !important;
    height: 16px !important;
    margin-top: 1px;
}
.abn-cf-sf-message-icon svg {
    width: 100% !important;
    height: 100% !important;
    display: block;
}
.abn-cf-sf-message-content {
    min-width: 0;
}
.abn-cf-sf-message p {
    margin: 0 0 6px !important;
}
.abn-cf-sf-message p:last-child {
    margin-bottom: 0 !important;
}
.abn-cf-sf-message-info {
    border-left-color: #2271b1 !important;
    background: #eef6fc !important;
    color: #0c4a6e;
}
.abn-cf-sf-message-info .abn-cf-sf-message-icon {
    color: #2271b1;
}
.abn-cf-sf-message-success {
    border-left-color: var(--abn-cf-success, #00a32a) !important;
    background: #edfaef !important;
    color: #0a5c2b;
}
.abn-cf-sf-message-success .abn-cf-sf-message-icon {
    color: var(--abn-cf-success, #00a32a);
}
.abn-cf-sf-message-warning {
    border-left-color: #dba617 !important;
    background: #fcf9e8 !important;
    color: #7a5b06;
}
.abn-cf-sf-message-warning .abn-cf-sf-message-icon {
    color: #dba617;
}
.abn-cf-sf-message-error {
    border-left-color: var(--abn-cf-error, #d63638) !important;
    background: #fcf0f1 !important;
    color: #7a1116;
}
.abn-cf-sf-message-error .abn-cf-sf-message-icon {
    color: var(--abn-cf-error, #d63638);
}
.abn-cf-sf-message-dismiss {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    background: none !important;
    border: 0 !important;
    /* This rule never contested padding/box-sizing, so the theme's own generic button padding
       (0 1.2em — 19.2px at this 16px font-size, confirmed via DevTools) was bleeding through
       unopposed and, combined with the default content-box sizing, blew the rendered width out to
       ~38px despite width/max-width/min-width all being pinned to 22px !important above. Explicitly
       zeroing padding and forcing border-box is what actually makes those 22px rules take effect. */
    padding: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    color: #646970;
    margin: 0;
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    aspect-ratio: 1 / 1;
}

.abn-cf-sf-message-dismiss:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.08);
}

.abn-cf-sf-message-dismiss * {
    pointer-events: none;
}

/* --- Uploads ------------------------------------------------------------------------------- */

.abn-cf-sf-upload-box svg {
    width: 1em;
    height: 1em;
    display: inline-block;
}

/* A. Generic "File" type — dropzone + a list of picked files. */
.abn-cf-sf-dropzone {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    text-align: center;
    padding: 22px 14px !important;
    border: 2px dashed var(--abn-cf-border) !important;
    border-radius: var(--abn-cf-radius) !important;
    background: #fff !important;
    cursor: pointer;
    transition: border-color .15s, background-color .15s;
}
.abn-cf-sf-dropzone svg {
    width: 28px !important;
    height: 28px !important;
    color: #9aa1a8;
    margin-bottom: 2px;
}
.abn-cf-sf-dropzone.is-dragover {
    border-color: var(--abn-cf-active) !important;
    background: var(--abn-cf-focus-ring) !important;
}
.abn-cf-sf-dropzone.is-full {
    opacity: .5;
    pointer-events: none;
}
.abn-cf-sf-drop-text {
    font-size: 13px;
    color: var(--abn-cf-primary);
    margin: 0 !important;
}
.abn-cf-sf-browse-link {
    color: var(--abn-cf-accent);
    text-decoration: underline;
    font-weight: 600;
}

.abn-cf-sf-upload-box.abn-cf-sf-upload-file {
    gap: 5px;
    display: flex;
    flex-direction: column;
}

.abn-cf-sf-file-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    /* margin-top: 10px !important; */
}
.abn-cf-sf-file-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 8px 12px !important;
    background: #fff !important;
    border: 1px solid var(--abn-cf-border) !important;
    border-radius: 6px !important;
}
.abn-cf-sf-file-item.is-error {
    border-color: var(--abn-cf-error) !important;
}
.abn-cf-sf-file-info {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 0;
}
.abn-cf-sf-file-ext {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
    background: var(--abn-cf-primary);
    border-radius: 4px;
    padding: 3px 6px;
}
.abn-cf-sf-file-name {
    font-size: 13px;
    color: var(--abn-cf-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.abn-cf-sf-file-err {
    display: block;
    font-size: 11px;
    color: var(--abn-cf-error);
}
.abn-cf-sf-file-remove {
    flex-shrink: 0;
    width: 22px; height: 22px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50%;
    color: var(--abn-cf-error);
    cursor: pointer;
}
.abn-cf-sf-file-remove:hover {
    background: rgba(216, 44, 13, .1);
}
.abn-cf-sf-file-remove svg {
    width: 14px !important;
    height: 14px !important;
}

/* B. Single "Image" type — button, then a bordered preview once uploaded. */
.abn-cf-sf-btn-upload,
.abn-cf-sf-multi-add-btn {
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: normal !important;
    min-height: 0 !important;
    margin: 0 !important;
}
.abn-cf-sf-btn-upload {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 10px 18px !important;
    background: var(--abn-cf-accent) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: var(--abn-cf-radius) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer;
}
.abn-cf-sf-btn-upload:disabled {
    opacity: .7;
    cursor: default;
}
.abn-cf-sf-btn-upload svg {
    width: 18px !important;
    height: 18px !important;
}
.abn-cf-sf-single-preview-wrap {
    position: relative;
    display: inline-block !important;
    width: 90px; height: 90px;
    padding: 4px;
    border: 1px solid var(--abn-cf-border);
    border-radius: 6px;
}
.abn-cf-sf-single-preview-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 3px !important;
    cursor: pointer;
    display: block !important;
}
.abn-cf-sf-preview-remove {
    position: absolute;
    top: -8px; right: -8px;
    width: 22px; height: 22px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s;
}
.abn-cf-sf-single-preview-wrap:hover .abn-cf-sf-preview-remove {
    opacity: 1;
}
.abn-cf-sf-preview-remove svg {
    width: 12px !important;
    height: 12px !important;
}

/* C. Multiple "Images" type — a wrapping grid of thumbnails + a trailing "add" button. */
.abn-cf-sf-multi-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 6px !important;
}
.abn-cf-sf-multi-thumb {
    position: relative;
    width: 80px; height: 80px;
    border-radius: var(--abn-cf-radius);
    background: #f4f6f8;
    overflow: hidden;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.abn-cf-sf-multi-thumb.is-error {
    color: var(--abn-cf-error);
}
.abn-cf-sf-multi-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}
.abn-cf-sf-multi-remove {
    position: absolute;
    top: 3px; right: 3px;
    width: 20px; height: 20px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, .85);
    color: var(--abn-cf-error);
    border-radius: 50%;
    cursor: pointer;
}
.abn-cf-sf-multi-remove svg {
    width: 12px !important;
    height: 12px !important;
}
.abn-cf-sf-multi-add-btn {
    width: 80px; height: 80px;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #c4c4c4 !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: var(--abn-cf-radius) !important;
    cursor: pointer;
    transition: background-color .15s;
}
.abn-cf-sf-multi-add-btn:hover {
    background: #a0a0a0 !important;
}
.abn-cf-sf-multi-add-btn svg {
    width: 22px !important;
    height: 22px !important;
}

/* Shared spinner used across all three upload states instead of a numeric/bar progress indicator. */
.abn-cf-sf-spinner {
    display: inline-block;
    width: 16px; height: 16px;
    border: 2px solid var(--abn-cf-border);
    border-top-color: var(--abn-cf-accent);
    border-radius: 50%;
    animation: abn-cf-sf-spin .6s linear infinite;
    flex-shrink: 0;
}
@keyframes abn-cf-sf-spin {
    to { transform: rotate(360deg); }
}

.abn-cf-sf-hidden {
    display: none !important;
}