:host {
    --smepro-green: #5fa832;
    --smepro-teal: #3f9a86;
}

.slds-backdrop_open {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
}

/* ── Column header row (SALESFORCE / DEFAULT / SHOPIFY etc.) ── */
.field-text-color{
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    color: #7c8a80 !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: #fff !important;
    padding: 10px 6px !important;
    border-bottom: 1px solid #f0f2f0;
}

/* ── Salesforce column header ──
   Centering is applied via the slds-text-align_center utility class on the
   header cell (lightning-layout-item) itself, only on the Required/Optional
   Fields tables shown when the object's toggle is OFF -- not here, so the
   toggle-ON "Default Mapping" header keeps its original left alignment. */
.fm-col-salesforce {
    text-transform: uppercase;
    color: rgb(1, 118, 211);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
}

/* Centres a column header over its own cell. Applied ONLY to the header spans
   of the Required Fields / Optional Fields tables (shown when the object's
   toggle is OFF), so the toggle-ON "Default Mapping" header keeps its original
   left alignment.
   display:block is essential -- text-align does nothing on a bare inline
   <span>. Lives in this component's own stylesheet because global SLDS
   utility classes are not guaranteed to pierce an LWC shadow boundary. */
.fm-col-center {
    display: block;
    width: 100%;
    text-align: start;
}

/* ── Shopify column header ── */
.fm-col-shopify {
    text-transform: uppercase;
    color: rgb(79, 138, 36);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
}

/* ── Default/Data Type/Action column headers ── */
.fm-col-default {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgb(124, 138, 128);
}

.iconColor{
    background-color: #ecf6e3;
    --slds-c-icon-color-background: #ecf6e3;
    --sds-c-icon-color-background: #ecf6e3;
    color: #4f8a24;
    border-radius: 9px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    --slds-c-icon-color-foreground: #4f8a24;
    --sds-c-icon-color-foreground: #4f8a24;
    --slds-c-icon-color-foreground-default: #4f8a24;
    --sds-c-icon-color-foreground-default: #4f8a24;
    box-shadow: none;
}

.showHover:hover + .hide{
    display: block;
    color: red;
    word-wrap: break-word;

    text-align: center;
    border-radius: 6px;
    z-index: 1;
}

.hide {
  display: none;
}

.container:focus-within {
    overflow: visible;
}

.container{
     overflow: hidden;
    display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
    word-wrap: break-word;
    max-width: 100%;
    color: #6b786f;
    font-size: 13px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    text-align: start;
}

.button.slds-button.slds-button_neutral{
    color: var(--slds-c-button-text-color, var(--sds-c-button-text-color, var(--lwc-brandAccessible,rgb(68, 211, 1)))) !important;

}

.button{
    border-radius: 9px;
}
/* First word capital */
.myElement:first-letter {
    text-transform: capitalize;
}

.myElement{
    color: #37453d;
    font-size: 13px;
    font-weight: 600;
}

.uppercase {
    text-transform: uppercase;
}

.custom-textarea {
    --sds-c-textarea-sizing-min-height:150px;
}

/* ── Custom toggle switch (same as Step 3) ── */
.obj-toggle-track {
    position: relative;
    width: 42px;
    height: 24px;
    flex: 0 0 auto;
    border-radius: 999px;
    border: none;
    padding: 0;
    cursor: pointer;
    background: rgb(205, 212, 205);
    transition: background .2s, box-shadow .2s;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
.obj-toggle-track:focus,
.obj-toggle-track:focus-visible,
.obj-toggle-track:active {
    outline: none;
    box-shadow: none;
}
.obj-toggle-track_on {
    /* background: rgb(95, 168, 50); */
    background: linear-gradient(120deg, #5fa832, #2f8fb0);
    box-shadow: rgba(58, 150, 120, 0.16) 0px 0px 0px 3px, rgba(58, 150, 120, 0.5) 0px 4px 10px -2px;
}
.obj-toggle-track_on:focus,
.obj-toggle-track_on:focus-visible,
.obj-toggle-track_on:active {
    box-shadow: rgba(58, 150, 120, 0.16) 0px 0px 0px 3px, rgba(58, 150, 120, 0.5) 0px 4px 10px -2px;
}
.obj-toggle-track:disabled {
    cursor: not-allowed;
    opacity: .7;
}
.obj-toggle-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: left .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.obj-toggle-track_on .obj-toggle-knob {
    left: 21px;
}


.text-color{
    -webkit-text-fill-color: #37453d;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.text-style{
    color: #1c2b23;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14.5px;
    font-weight: 800;
    line-height: 1.3;
    white-space: normal;
}

.slds-box_xx-small, .slds-box--xx-small{
    height: auto;
    width: auto;
    padding: 0px;

}

.slds-box_x-small{
    border-color: 1px #e6ebe6 !important;
}

.font-color{
    color: #6b786f;
}

.horizontal-line-class{
    margin-top: 0px;
    margin-bottom: 0px;
    border-color: 1px #e6ebe6 !important;
}


/* ── Checkbox tokens ONLY for default mapping checkbox ── */
.fm-default-checkbox {
    --slds-c-checkbox-color-background: rgb(255, 255, 255);
    --slds-c-checkbox-color-background-checked: rgb(95, 168, 50);
    --slds-c-checkbox-color-border: rgb(200, 200, 200);
    --slds-c-checkbox-color-border-checked: rgb(95, 168, 50);
    --slds-c-checkbox-mark-color-foreground: #fff;
    --slds-c-checkbox-radius-border: 6px;
    --slds-c-checkbox-sizing-border: 2px;
    --sds-c-checkbox-color-background: rgb(255, 255, 255);
    --sds-c-checkbox-color-background-checked: rgb(95, 168, 50);
    --sds-c-checkbox-color-border: rgb(200, 200, 200);
    --sds-c-checkbox-color-border-checked: rgb(95, 168, 50);
    --sds-c-checkbox-mark-color-foreground: #fff;
    --sds-c-checkbox-radius-border: 6px;
    --sds-c-checkbox-sizing-border: 2px;
}

/* Direct color overrides — SCOPED to .fm-default-checkbox only */
.fm-default-checkbox .slds-checkbox_faux {
    background: #fff !important;
    border: 2px solid rgb(200, 200, 200) !important;
    border-radius: 6px !important;
    width: 20px !important;
    height: 20px !important;
}
.fm-default-checkbox input:checked ~ .slds-checkbox_faux,
.fm-default-checkbox input:checked + .slds-checkbox_faux,
.fm-default-checkbox[checked] .slds-checkbox_faux {
    background: rgb(95, 168, 50) !important;
    border: 2px solid rgb(95, 168, 50) !important;
}
.fm-override-checkbox[checked] .slds-checkbox_faux,
lightning-input.fm-override-checkbox[checked] .slds-checkbox_faux {
    background: rgb(95, 168, 50) !important;
    border: 2px solid rgb(95, 168, 50) !important;
}

/* Input field tokens */
:host {
    --sds-c-input-radius-border: 8px;
}

.green-utility-icon {
    fill:  #5fa832;
    --slds-c-icon-color-foreground: #5fa832;
    background-color:transparent;
}

.horizontalLineCss{
    border-color: #f0f2f0;
    border-width: 1px 0 0 0;
    margin: 8px 6px;
}

/* Tool tip to show error */

.tooltipCss{
    --slds-c-tooltip-color-background : rgb(225, 63, 63);
    z-index: 1;
    width:100%;
}

.error-utility-icon{
    --sds-c-icon-color-foreground-default: white;
}

/* TOOLTIP  */
.custom-tooltip {
    position: relative;
    display: inline-block;
}

.custom-tooltip .tooltip-content {
    visibility: hidden;
    background-color: #1c2b23;
    width:90%;
    color: white;
    text-align: center;
    border-radius: 10px;
    padding: 5px 5px;
    position: absolute;
    z-index: 1;
    top: 90%;
    left: 0px;
    margin-left: 5%;
    box-shadow: 0 8px 20px -8px rgba(23,43,32,.4);
}

.custom-tooltip .tooltip-content::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #1c2b23 transparent;
}

.custom-tooltip:hover .tooltip-content {
    visibility: visible;
}

/* TOOLTIP CSS FOR DEFAULT SALESFORCE FIELD LABEL */
.custom-tooltip .tooltip-defaultLabel {
    visibility: hidden;
    background: linear-gradient(125deg, #5fa832 0%, #3f9a86 55%, #2f8fb0 100%);
    width: auto;
    color: white;
    text-align: center;
    border-radius: 10px;
    padding: 5px 5px;
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 105%;
    box-shadow: 0 8px 20px -8px rgba(23,43,32,.4);
}


.custom-tooltip .tooltip-defaultLabel::after{
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent transparent;
}


.custom-tooltip:hover .tooltip-defaultLabel{
    visibility: visible;
}

.slds-modal__header{
    margin-top: 44px;
}

.red-delete-icon {
    --sds-c-icon-color-foreground-default: #ff0000;
    --sds-c-icon-color-background: transparent;
    cursor: pointer;
}

/* ── Accordion panel (each child object) ── */
.slds-box.slds-box_xx-small.slds-m-bottom_large.slds-theme_shade {
    border: 1px solid #eef1ee;
    border-radius: 13px;
    box-shadow: 0 6px 18px -12px rgba(23,43,32,.22);
    background: #fff !important;
    overflow: hidden;
}

.slds-box.slds-box_xx-small.slds-m-bottom_large.slds-theme_shade:focus-within,
.slds-box.slds-box_xx-small.slds-m-bottom_large.slds-theme_shade:has(.slds-is-open) {
    overflow: visible;
}

/* ── Accordion header bar (only this gets gradient bg) ── */
.sme-field-mapping {
    background: linear-gradient(120deg, #f4faee, #eaf3fb) !important;
    border-bottom: 1px solid #e4ebe6;
    border-radius: 13px 13px 0 0;
}

/* ── Accordion header flex row (icon · title · pill · toggle · chevron) ── */
.fm-accordion-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
}
.fm-accordion-title {
    flex: 1;
}
.fm-chevron {
    cursor: pointer;
    padding: 5px;
}

/* ── Data content area below header — pure white ── */
.slds-theme_default {
    background: #fff !important;
}
.slds-theme_shade lightning-layout {
    background: #fff !important;
}
.slds-theme_shade lightning-layout-item {
    background: #fff !important;
}
/* .slds-theme_shade div {
    background-color: transparent;
} */
/* Keep gradient only on accordion header */
.fm-accordion-header {
    background: linear-gradient(120deg, #f4faee, #eaf3fb) !important;
}

/* ── Required/Optional field rows — CSS grid matching reference HTML (6 cols) ── */
.sme-field-mapping-parent lightning-layout {
    display: grid !important;
    grid-template-columns: 1.1fr 76px 70px 70px 1.2fr 40px;
    gap: 12px;
    align-items: center;
    padding: 9px 6px !important;
    border-bottom: 1px solid #f0f2f0;
    width: 100%;
    box-sizing: border-box;
    min-height: 56px;
}
.sme-field-mapping-parent lightning-layout-item {
    padding: 0 !important;
    width: 100% !important;
    display: flex;
    align-items: center;
    min-width: 0;
}
/* Salesforce combobox + Shopify combobox/input should fill their cell */
.sme-field-mapping-parent lightning-layout-item:nth-child(1) lightning-combobox,
.sme-field-mapping-parent lightning-layout-item:nth-child(5) lightning-combobox,
.sme-field-mapping-parent lightning-layout-item:nth-child(5) lightning-input,
.sme-field-mapping-parent lightning-layout-item:nth-child(5) lightning-pill-container {
    width: 100%;
}
/* Shopify column checkbox (BOOLEAN default value) — align center, no extra height */
.sme-field-mapping-parent lightning-layout-item:nth-child(5) lightning-input[type="checkbox"] {
    width: auto;
    display: inline-flex;
    align-items: center;
}
.sme-field-mapping-parent .fm-default-input {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
/* Remove duplicated border from field-text-color when nested in grid */
.sme-field-mapping-parent .field-text-color {
    border-bottom: none !important;
}
/* Center DATA TYPE column (2nd) */
.sme-field-mapping-parent lightning-layout-item:nth-child(2) {
    justify-content: center;
    text-align: center;
}
.sme-field-mapping-parent lightning-layout-item:nth-child(2) p {
    text-align: center;
    width: 100%;
}
/* Center DEFAULT checkbox column (3rd) */
.sme-field-mapping-parent lightning-layout-item:nth-child(3) {
    justify-content: center;
}
/* Center OVERRIDE checkbox column (4th) */
.sme-field-mapping-parent lightning-layout-item:nth-child(4) {
    justify-content: center;
}
/* Center ACTION column (6th) */
.sme-field-mapping-parent lightning-layout-item:nth-child(6) {
    justify-content: center;
}

/* ── Default mapping body — CSS grid 4 cols matching reference ── */
.fm-default-body lightning-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1.2fr) 90px 90px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 9px 6px !important;
    border-bottom: 1px solid rgb(245, 247, 245);
    width: 100%;
    box-sizing: border-box;
}
.fm-default-body lightning-layout:last-child {
    border-bottom: none;
}
.fm-default-body lightning-layout-item {
    padding: 0 !important;
    width: 100% !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
/* Center DEFAULT checkbox column (2nd) */
.fm-default-body lightning-layout-item:nth-child(2) {
    justify-content: center;
}
/* Center OVERRIDE checkbox column (3rd) */
.fm-default-body lightning-layout-item:nth-child(3) {
    justify-content: center;
}
.fm-default-body .myElement {
    font-size: 13px;
    font-weight: 600;
    color: #37453d;
}
/* .fm-default-body .myElement (above) and .custom-tooltip .tooltip-defaultLabel
   (the tooltip bubble itself) have equal specificity (two classes each), and
   this rule comes later in the file, so it was winning the tie and overriding
   the tooltip's white text back to dark. This span carries BOTH classes
   (class="myElement tooltip-defaultLabel"), so it needs an explicit override
   to keep the tooltip text white against its dark/gradient background. */
.fm-default-body .myElement.tooltip-defaultLabel {
    color: white;
}
.fm-default-body .container {
    font-size: 13px;
    color: #6b786f;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ── Direct color on the default checkbox (bypasses shadow DOM) ── */
.fm-default-checkbox .slds-checkbox_faux {
    background: #fff !important;
    border: 2px solid rgb(200, 200, 200) !important;
    border-radius: 6px !important;
}
.fm-default-checkbox input:checked ~ .slds-checkbox_faux,
.fm-default-checkbox input:checked + .slds-checkbox_faux,
.fm-default-checkbox [checked] ~ .slds-checkbox_faux,
.fm-default-checkbox .slds-checkbox--faux[data-selected],
.fm-default-checkbox .slds-is-selected .slds-checkbox_faux {
    background: rgb(95, 168, 50) !important;
    border: 2px solid rgb(95, 168, 50) !important;
}

/* ── Shopify value box (when default is checked) ── */
.fm-shopify-value-box {
    background: #f3faec !important;
    border: 1px solid #dcefca !important;
    border-radius: 8px !important;
    padding: 8px 12px;
    color: #26332b !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    width: 100%;
    box-sizing: border-box;
}

/* ── Required/Optional field label text ── */
.sme-field-mapping-parent p {
    font-size: 13px;
    font-weight: 600;
    color: #37453d;
    margin: 0 !important;
    padding: 0;
    line-height: 1.4;
}

/* ── Default value input wrapper (shopify column when default checked) ── */
.fm-default-input {
    --sds-c-input-color-background: #f3faec;
    --sds-c-input-color-border: #dcefca;
    --sds-c-input-radius-border: 8px;
    --sds-c-input-text-color: #26332b;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
}

/* ── Field count pill ── */
.fm-field-count {
    font-size: 11px;
    color: #7c8a80;
    background: #eef1ee;
    padding: 2px 9px;
    border-radius: 20px;
    font-weight: 700;
    white-space: nowrap;
}

/* ── Buttons ── */
 lightning-button.buttons{
  --sds-c-button-neutral-color-background: #5fa832;
  --slds-button-slds-button_success:  #5fa832;
  --sds-c-button-text-color: white;
  background-color:  #5fa832;
  border-radius: 9px;
}

lightning-button.button2{
  --sds-c-button-neutral-color-background: #f1f8ec;
  --slds-button-slds-button_success:  #f1f8ec;
  --sds-c-button-text-color: #4f8a24;
  background-color:  #f1f8ec;
  border-radius: 9px;
}

.addbtn{
    --sds-c-icon-color-foreground-default: #4f8a24;
}

.my-merge-box {
    --slds-c-dual-listbox-radius-border: 12px;
    --slds-c-dual-listbox-color-border: #5fa832;
    --slds-c-dual-listbox-shadow: 0 2px 8px rgba(0,0,0,.12);

    /* left / right columns */
    --slds-c-dual-listbox-column-radius-border: 8px;
    --slds-c-dual-listbox-column-color-background: #f7f9fb;

    /* selected item pills */
    --slds-c-dual-listbox-pill-radius-border: 16px;
    --slds-c-dual-listbox-pill-color-background: #e3f2e9;
    --slds-c-dual-listbox-pill-color-border: #5fa832;
}



/* ----FieldMapping Modal */

 .fieldMapping-modal-header{

}

.field-mapping-dropArrow{
    --sds-c-icon-color-foreground-default: #37453d;
  margin-top: 0.3rem;

}

/* ── Header styles (Required Fields / Optional Fields) — aligned with row start ── */
.header-Background {
    font-size: 12px;
    font-weight: 800;
    color: #37453d;
    letter-spacing: .02em;
    margin: 4px 0 2px 6px;
    padding: 0 !important;
}
/* Kill padding on the wrapping lightning-layout-item for the heading */
.sme-field-mapping-parent + h2,
.header-Background,
h2.header-Background {
    padding: 0 !important;
}
/* Required Fields heading — red per reference */
.fm-heading-required {
    color: rgb(194, 57, 52) !important;
}
/* Required field label (e.g., "Product Name") — orange per reference */
.fm-required-label {
    color: rgb(183, 121, 31) !important;
    font-size: 13px;
    font-weight: 600;
    margin: 0;
}

/* ── Add row button restyled (matches reference) ── */
.fm-add-row-wrapper {
    margin: 16px 0 8px;
}
.fm-add-row-btn {
    background: #f1f8ec;
    color: #4f8a24;
    border: 1.5px dashed #bcd9a6;
    border-radius: 9px;
    padding: 10px 22px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    font-weight: 700;
    font-size: 13px;
    transition: border-color .2s, background .2s;
}
.fm-add-row-btn:hover {
    background: #e8f4df;
    border-color: #5fa832;
}
.fm-add-row-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
}
.fm-add-row-btn svg {
    stroke: #4f8a24;
    flex: 0 0 auto;
}

/* ── Modal header color ── */
.slds-text-heading_medium {
    color: #5fa832 !important;
}


/* ── Default mapping grid — responsive fallback ── */
@media (max-width: 1400px) {
    .fm-default-body lightning-layout {
        grid-template-columns: minmax(0, 1.2fr) 80px 80px minmax(0, 1fr) !important;
        gap: 8px !important;
    }
}
@media (max-width: 1100px) {
    .fm-default-body lightning-layout {
        grid-template-columns: minmax(0, 1.2fr) 70px 70px minmax(0, 1fr) !important;
        gap: 6px !important;
    }
}

@media (max-width: 1400px) {
    .sme-field-mapping-parent .slds-grid {
        display: grid;
        grid-template-columns: 1fr 110px 50px 1fr 50px;
    }
    .sme-field-mapping-parent .slds-grid .slds-size_3-of-12,
    .sme-field-mapping-parent .slds-grid .slds-size_2-of-12,
    .sme-field-mapping-parent .slds-grid .slds-size_1-of-12{
        width: 100%;
    }
    .sme-field-mapping-parent .slds-grid .slds-size_2-of-12,
    .sme-field-mapping-parent .slds-grid .slds-size_1-of-12{
        padding-inline: 4px 8px !important;
        text-align: center;
    }
}

@media (max-width: 1260px) {
    .sme-field-mapping-parent .slds-grid {
        grid-template-columns: 160px 90px 50px 150px 50px;
        justify-content: space-between;
    }
    .sme-field-mapping-parent .slds-grid .slds-p-around_small{
        padding-inline: 0.4rem !important;
    }
}
@media (max-width: 1100px) {
    .sme-field-mapping-parent .slds-grid {
        grid-template-columns: 130px 70px 40px 130px 40px;
    }
    .sme-field-mapping-parent .slds-grid .slds-p-around_small{
        padding-inline: 0.1rem !important;
    }
}
@media (max-width:1400px){
    .sme-field-mapping-parent .slds-grid {
        grid-template-columns: 1fr 74px 51px 64px 1fr 51px;
        justify-content: space-between;
    }
    .sme-field-mapping-parent .slds-grid .slds-p-around_small{
        padding-inline: 0.4rem !important;
    }
    .fm-col-salesforce{
        font-size: 10px;
    }
    .fm-col-default{
        font-size: 10px;
    }
    .fm-col-shopify{
        font-size: 10px;
    }
    .sme-fm-text{
        font-size: 10px !important;
    }

}/* ============================================================
   Custom in-component toasts (replaces ShowToastEvent). Success uses the
   brand green→teal gradient reference; error uses red. Added by UI packaging.
   ============================================================ */
.sw-toast-container { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 420px; pointer-events: none; }
.sw-toast { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 10px; box-shadow: 0 12px 30px -10px rgba(23,43,32,.45); color: #fff; width: 100%; box-sizing: border-box; pointer-events: auto; animation: sw-toast-in 180ms ease; }
@keyframes sw-toast-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.sw-toast-icon { flex-shrink: 0; font-size: 15px; line-height: 1.3; font-weight: 700; }
.sw-toast-body { flex: 1; min-width: 0; }
.sw-toast-title { font-weight: 800; font-size: 13.5px; line-height: 1.3; }
.sw-toast-message { font-size: 12.5px; line-height: 1.4; opacity: .95; margin-top: 2px; word-break: break-word; }
.sw-toast-close { flex-shrink: 0; background: transparent; border: none; color: inherit; opacity: .85; cursor: pointer; font-size: 18px; line-height: 1; padding: 0; font-family: inherit; }
.sw-toast-close:hover { opacity: 1; }
.sw-toast-success { background: linear-gradient(120deg, var(--smepro-green), var(--smepro-teal)); }
.sw-toast-error { background: linear-gradient(120deg, #e9923d, #b56a1f); }
.sw-toast-warning { background: #f59e0b; color: #1f2937; }
.sw-toast-info { background: #3b7ec4; }

/* The object icon is now an inline brand <svg> chosen by objectApiName (see
   fieldMappingChild.html/.js) instead of <lightning-icon>. These SVGs are
   fill="none" + stroke="currentColor", so they inherit the green from
   .iconColor's `color` — do NOT force `fill` here or the outline icons
   render as solid blobs. */
.iconColor svg {
    width: 17px;
    height: 17px;
    display: block;
    background: transparent;
}