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

:host {
    font-family: 'Inter', system-ui, sans-serif;
    color: #1c2b23;
    display: block;
}

a { color: #2f7d32; text-decoration: none; }
a:hover { color: #1f5a22; text-decoration: underline; }

@keyframes sw-spin { to { transform: rotate(360deg); } }
@keyframes sw-pulse {
    0%, 100% { opacity: .35; transform: scale(.8); }
    50% { opacity: 1; transform: scale(1.15); }
}

.sw-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    inset: 0;
    min-height: 100%;
    width: 100%;
    padding: 40px 0;
    box-sizing: border-box;
    background: linear-gradient(180deg, #f4faee 0%, #eaf3fb 100%);
    border-radius: 16px;
}
.pageLoading-Gif { width: 30%; margin-top: 2%; }

/* Card */
.sw-card {
    border: 1px solid #e6ebe6;
    border-radius: 16px;
    box-shadow: 0 10px 26px -16px rgba(23,43,32,.28);
    /* Allow the Auto Configuration tooltip to extend outside the card. */
    overflow: visible;
    background: #fff;
}

.sw-card-header {
    padding: 22px 26px;
    border-bottom: 1px solid #f0f2f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.sw-title {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #1c2b23;
}

.sw-subtitle {
    margin: 6px 0 0;
    font-size: 13px;
    color: #6b786f;
    max-width: 480px;
}

.sw-header-right {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.sw-divider {
    width: 1px;
    height: 26px;
    background: #e6ebe6;
}

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



/* Connection pill */
.conn-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    white-space: nowrap;
}
.conn-pill_on { background: #eef7e3; color: #4f8a24; }
.conn-pill_off { background: #fdf6e3; color: #8a6d00; }

.conn-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}
.conn-dot_pulse {
    box-shadow: 0 0 0 4px rgba(95,168,50,.18);
    animation: sw-pulse 1.6s ease-in-out infinite;
}

/* Sync direction hero */
.sw-hero {
    margin: 20px 26px 0;
    background: linear-gradient(105deg,#eef7e3 0%,#e6f1fb 100%);
    border: 1px solid #dde8ea;
    border-radius: 14px;
    padding: 18px 26px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 10px 24px -18px rgba(63,138,36,.35), 0 14px 30px -20px rgba(47,143,176,.3);
    flex-wrap: wrap;
}

.hero-side {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 140px;
}
.hero-side_right { justify-content: flex-end; }
.hero-text_right { text-align: right; }

.hero-icon {
    width: 54px;
    height: 54px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.hero-icon_shopify {
    background: transparent;
    color: #4f8a24;
    box-shadow: none;
}
.hero-icon_sf {
    background: transparent;
    color: #0176d3;
    box-shadow: none;
}

.hero-icon-img {
    width: 54px;
    height: 54px;
    object-fit: contain;
}

.hero-icon_shopify .hero-icon-img {
    width: 44px;
    height: 44px;
}

.hero-name { font-size: 14px; font-weight: 800; color: #1c2b23; }
.hero-sub { font-size: 12px; color: #7c8a80; }

.hero-mid {
    flex: 1.6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 220px;
}

.hero-line-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.hero-line {
    flex: 1;
    height: 2px;
    border-radius: 2px;
}
.hero-line_left { background: linear-gradient(90deg,#bcd9a6,#5fa832); }
.hero-line_right { background: linear-gradient(90deg,#5fa832,#bcd9a6); }

.hero-mid .conn-pill {
    background: #fff;
    border: 1px solid #dcefca;
    box-shadow: 0 2px 6px rgba(95,168,50,.15);
    padding: 6px 14px;
}
.hero-mid .conn-pill_off { border-color: #f0e2ba; }

.hero-note {
    font-size: 10.5px;
    font-weight: 600;
    color: #8a978d;
}

/* Form fields */
.sw-fields {
    padding: 24px 26px 8px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.field-row {
    display: grid;
    grid-template-columns: 210px 1fr;
    align-items: center;
    gap: 16px;
}

.field-row:focus-within {
    position: relative;
    z-index: 2;
}

.field-label {
    display: flex;
    align-items: center;
    gap: 7px;
}
.field-label label {
    font-size: 13.5px;
    font-weight: 600;
    color: #37453d;
}

.field-input {
    width: 100%;
    background: #F3F3F3;
    color: #747474;
    border-radius: 9px;
    --slds-c-input-color-background: transparent;
    --slds-c-input-color-background-disabled: transparent;
    --lwc-colorBackgroundInputDisabled: transparent;
    --lwc-colorBackgroundInput: transparent;
    --lwc-colorBackgroundButtonDefault: transparent;
}
.field-input .slds-dropdown,
.field-input [class*="slds-listbox"] {
    --slds-g-color-neutral-base-95: #ffffff;
    --slds-g-color-neutral-base-100: #ffffff;
    --lwc-colorBackground: #ffffff;
}

.token-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.field-input_token {
    width: 100%;
}
.token-eye {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    padding: 6px;
    cursor: pointer;
    color: #7c8a80;
    display: flex;
    z-index: 1;
}
.token-eye:hover { color: #37453d; }

/* .token-eye is normally an absolutely-positioned "show/hide" toggle sitting
   inside a position:relative field wrapper (the real access-token field).
   Reused here as a plain copy button inside a flex row that has no
   position:relative ancestor of its own — so `position:absolute; right:8px`
   was escaping all the way up to the modal overlay (position:fixed) and
   pinning itself to the viewport's right edge instead of the small box,
   making it appear to vanish/shift depending on window size/zoom. Put it
   back in normal flex flow for just these two usages. */
.gen-token-store-banner .token-eye,
.gen-token-redirect-row .token-eye {
    position: static;
    right: auto;
    flex-shrink: 0;
}

.field-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.sw-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: 9px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    border: none;
}
.sw-btn_primary {
    background: linear-gradient(120deg,#5fa832,#3f9a86);
    color: #fff;
    box-shadow: 0 6px 18px -6px rgba(58,150,120,.55), 0 2px 6px rgba(95,168,50,.25);
    transition: box-shadow .2s, transform .15s;
}
.sw-btn_primary:hover:not(:disabled) {
    box-shadow: 0 8px 22px -4px rgba(58,150,120,.65), 0 3px 8px rgba(95,168,50,.3);
    transform: translateY(-1px);
}
.sw-btn_muted {
    background: #fff;
    color: #a8a8a8;
    border: 1px solid #d4d9d4;
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
    opacity: .65;
    cursor: not-allowed;
}
.sw-btn:disabled { cursor: not-allowed; }

/* Auto Configuration summary */
.auto-summary-wrap { padding: 8px 26px 4px; }

.auto-summary-card {
    background: linear-gradient(120deg,#f4faee 0%,#eaf3fb 100%);
    border: 1px solid #dce8e2;
    border-radius: 14px;
    padding: 22px 24px;
}

.auto-summary-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.auto-summary-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    /* background: #5fa832; */
    background: linear-gradient(120deg, #5fa832, #2f8fb0);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 4px 12px rgba(95,168,50,.3);
    flex-shrink: 0;
}

.auto-summary-title {
    font-size: 15.5px;
    font-weight: 800;
    color: #1c2b23;
}

.auto-summary-sub {
    font-size: 12.5px;
    color: #6b786f;
}

.auto-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.auto-summary-item {
    display: flex;
    align-items: center;
    gap: 11px;
    background: #fff;
    border: 1px solid #e4eee0;
    border-radius: 11px;
    padding: 13px 15px;
}

.auto-summary-item-title {
    font-size: 13px;
    font-weight: 700;
    color: #26332b;
}

.auto-summary-item-sub {
    font-size: 12px;
    color: #7c8a80;
}

.auto-summary-footnote {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 12.5px;
    color: #6b786f;
}
.auto-summary-footnote strong { color: #37453d; }

@media (max-width: 560px) {
    .auto-summary-grid { grid-template-columns: 1fr; }
}

/* Access scope error */
.scope-error-card {
    margin: 8px 26px 0;
    background: #fdeaea;
    border: 1px solid #f6c9c7;
    border-radius: 14px;
    padding: 18px 22px;
}
.scope-error-title {
    font-size: 14.5px;
    font-weight: 800;
    color: #a4302b;
    margin-bottom: 10px;
}
.scope-error-list {
    margin: 0 0 10px;
    padding-left: 18px;
}
.scope-error-item {
    font-size: 13px;
    color: #a4302b;
    margin-bottom: 4px;
}
.scope-error-help {
    margin: 0;
    font-size: 12.5px;
    color: #6b786f;
    line-height: 1.5;
}

/* Two panels */
.sw-panels {
    padding: 20px 26px 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.panel-card {
    background: linear-gradient(120deg,#f4faee 0%,#eaf3fb 100%);
    border: 1px solid #e4ebe6;
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 6px 18px -12px rgba(23,43,32,.22);
}
.panel-card_emails {
    display: flex;
    flex-direction: column;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 14px;
}

.panel-title {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: #1c2b23;
    line-height: 1.35;
}

.panel-sub {
    margin: 5px 0 16px;
    font-size: 12.5px;
    color: #6b786f;
    line-height: 1.5;
}

.obj-count-badge {
    font-size: 11.5px;
    font-weight: 700;
    color: #4f8a24;
    background: #e6f3d5;
    padding: 3px 10px;
    border-radius: 20px;
}

.obj-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px solid #f0f2f0;
    gap: 10px;
}
.obj-row_last { border-bottom: none; }

.obj-left {
    display: flex;
    align-items: center;
    gap: 11px;
}

.obj-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 8px;
    background: #ecf6e3;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4f8a24;
}

.obj-label {
    font-size: 13.5px;
    font-weight: 600;
    color: #37453d;
}

.obj-right {
    display: flex;
    align-items: center;
    gap: 9px;
}

.required-tag {
    font-size: 10.5px;
    font-weight: 700;
    color: #9aa79d;
    background: #eef1ee;
    padding: 2px 8px;
    border-radius: 20px;
}

.locked-toggle {
    position: relative;
    width: 42px;
    height: 24px;
    flex: 0 0 auto;
    border-radius: 999px;
    /* background: #bcd9a6; */
    background: linear-gradient(120deg, #5fa832, #2f8fb0);
    cursor: not-allowed;
    opacity: .7;
}
.locked-knob {
    position: absolute;
    top: 3px;
    left: 21px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
}

/* Live toggle switches — plain custom button+knob (not lightning-input
   type=toggle, whose SLDS styling hooks didn't reliably take: it flashed
   blue on click then settled back to a default grey). Matches the
   reference's exact 42x24 pill/knob look and green-on/grey-off colors. */
.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;
    /* Lightning Experience's global stylesheet puts a blue focus ring on
       every plain <button> (its default :focus box-shadow/outline). Since
       clicking a button also focuses it, that blue ring showed the instant
       you clicked — and only went away once focus moved elsewhere (click
       outside, or tabbing off), which read as "turns blue, then a few
       seconds later goes green." Overriding :focus below removes that. */
    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: linear-gradient(120deg, #5fa832, #2f8fb0);
    box-shadow: 0 0 0 3px rgba(58, 150, 120, .16), 0 4px 10px -2px rgba(58, 150, 120, .5);
}
.obj-toggle-track_on:focus,
.obj-toggle-track_on:focus-visible,
.obj-toggle-track_on:active {
    box-shadow: 0 0 0 3px rgba(58,150,120,.16), 0 4px 10px -2px rgba(58,150,120,.5);
}
.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;
}

/* Emails */
.email-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 2px;
    margin-bottom: 10px;
}
.email-check-icon { flex: 0 0 auto; }
.email-text {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    color: #26332b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.email-input-native {
    flex: 1;
    min-width: 0;
    font: inherit;
    font-size: 13px;
    color: #26332b;
    background: #fff;
    border: 1px solid rgb(95, 168, 50);
    border-radius: 8px;
    padding: 8px 12px;
    outline: none;
    box-sizing: border-box;
}
.email-icon-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #5fa832;
    display: flex;
    flex: 0 0 auto;
}
.email-icon-btn:hover { color: #3f8f2f; }
.email-icon-btn_danger { color: #c99; }
.email-icon-btn_danger:hover { color: #c23934; }

.add-email-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 0;
    border-radius: 10px;
    border: 1.5px dashed #bcd9a6;
    background: #f1f8ec;
    /* color: #4f8a24; */
    color: rgb(47, 107, 74);
    cursor: pointer;
}
.add-email-btn_disabled {
    border-color: #dcdcdc;
    background: #f5f5f5;
    color: #a8a8a8;
    cursor: not-allowed;
}

.email-hint {
    padding-top: 12px;
    padding-bottom: 12px;
    font-size: 12px;
    color: #93a099;
    text-align: center;
}

/* Footer */
.sw-actions {
    padding: 18px 26px 22px;
    border-top: 1px solid #f0f2f0;
    margin-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.sw-btn-back {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: #37453d;
    border: 1px solid #d4d9d4;
    border-radius: 9px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

.sw-btn-save {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(120deg,#5fa832,#2f8fb0);
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 11px 24px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 4px 12px rgba(95,168,50,.3);
}

/* Modals (Pricebook/Currency confirm + Generate Token) */
.sw-modal-overlay {
    position: fixed;
    inset: 0;
    /* Bumped once the Generate Token modal started being portaled to
       document.body (see the JS portalModal()/renderedCallback comment) —
       as a direct child of body it now needs to out-rank Salesforce's own
       global overlays (toasts, spinners) rather than just local siblings. */
    z-index: 9000;
    background: rgba(23,43,32,.42);
    backdrop-filter: blur(3px);
    display: flex;
    /* flex-start + margin:auto on .sw-modal (below) instead of
       align-items:center: centering via align-items clips overflow evenly
       off BOTH the top and bottom with no way to reach it once the modal
       is taller than the viewport (happened at 75% zoom but not 50%).
       margin:auto centers the box only when there's spare room; once it
       doesn't fit, the box simply starts at the top and the overlay's own
       scroll (below) reaches the rest — never a hard, unreachable clip. */
    align-items: flex-start;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
}

.sw-modal {
    width: min(460px, 100%);
    max-height: 86vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 24px 60px -18px rgba(23,43,32,.55), 0 0 0 1px rgba(95,168,50,.12);
    margin: auto 0;
}
.sw-modal_narrow { text-align: center; }
.gen-modal {
    width: min(520px, 100%);
    text-align: left;
    /* Top-right corner squared off: with the modal portaled to document.body,
       the overlay's own scrollbar track sits right against this corner and
       made the curve look broken/notched. Keeping only the top-left corner
       rounded avoids that clash. */
    border-radius: 20px 0 20px 20px;
    /* This modal now keeps its logo/title header and Close/Generate Token
       footer always visible, scrolling only the checklist + fields between
       them — so the modal itself becomes a fixed-height flex column instead
       of one big scrolling block (the base .sw-modal overflow-y:auto above
       is overridden here). */
    max-height: 86vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.gen-modal .gen-token-header { border-radius: 20px 0 0 0; }

.gen-token-header-fixed {
    flex-shrink: 0;
    background: linear-gradient(120deg, #f4faee 0%, #eaf3fb 100%);
}
.gen-token-fixed-title {
    margin: 46px 34px 0;
    padding-bottom: 14px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
    text-align: center;
    background: linear-gradient(100deg,#5fa832,#2f8fb0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.gen-token-scroll-body {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}
.gen-token-footer-fixed {
    flex-shrink: 0;
    padding: 16px 34px 26px;
    background: linear-gradient(180deg, #f4faee 0%, #eaf3fb 100%);
    border-top: 1px solid #e0e9df;
}
.gen-token-footer-fixed .sw-modal-actions { margin-top: 0; }

.sw-modal-accent {
    height: 6px;
    background: linear-gradient(90deg,#5fa832 0%,#3f9a86 50%,#2f8fb0 100%);
}

.sw-modal-body { 
    padding: 30px 34px 34px;
    background: linear-gradient(180deg, #f4faee 0%, #eaf3fb 100%);
 }
.sw-modal-body_center { text-align: center; padding-top: 16px; }

.sw-modal-title {
    margin: 0 0 6px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
    background: linear-gradient(100deg,#5fa832,#2f8fb0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.sw-modal-note {
    font-size: 13px;
    color: #37453d;
    margin: 6px 0;
}

.sw-modal-field { margin-top: 16px; }
.sw-modal-label {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #37453d;
}
.gen-token-hint { font-weight: 400; color: #93a099; }
.req { color: rgb(194, 57, 52); }

.sw-modal-footnote {
    font-size: 12.5px;
    color: #6b786f;
    margin-top: 10px;
    display: block;
}

.sw-modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 22px;
    flex-wrap: wrap;
}

.btn-success {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: linear-gradient(120deg,#5fa832 0%,#3f9a86 55%,#2f8fb0 100%);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 8px 20px -8px rgba(58,150,120,.6);
}

.sw-modal-secondary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    /* background: #fff; */
    background: rgb(241, 243, 241);
    color: #37453d;
    border: 1px solid #d4d9d4;
    border-radius: 10px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}

/* Check Credential result modal */
/* Now nested inside .sw-modal-body (which already supplies the
   linear-gradient background + accent-bar height shared with the other
   popups) — this just adds the extra vertical breathing room this modal
   needs on top of that shared padding/background. */
.credcheck-modal {
    padding-top: 26px;
    padding-bottom: 20px;
    text-align: center;
}
.credcheck-spinner-ring {
    width: 46px;
    height: 46px;
    margin: 0 auto 20px;
    border-radius: 50%;
    border: 4px solid #e4ebe6;
    border-top-color: #5fa832;
    animation: sw-spin .8s linear infinite;
}
.credcheck-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.credcheck-icon_success {
    background: linear-gradient(120deg,#5fa832,#3f9a86);
    box-shadow: 0 8px 20px -8px rgba(58,150,120,.6);
}
.credcheck-icon_error {
    background: #c23934;
    box-shadow: 0 8px 20px -8px rgba(194,57,52,.5);
}
.credcheck-title {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 800;
    color: #1c2b23;
}
.credcheck-sub {
    margin: 0 0 22px;
    font-size: 13px;
    color: #6b786f;
    line-height: 1.5;
}

/* Generate Token modal specifics */
.gen-token-store-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(120deg,#f4faee 0%,#eaf3fb 100%);
    border: 1px solid #dce8e2;
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
}
.gen-token-store-badge {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #5fa832;
}
.gen-token-store-badge-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gen-token-store-url {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    font-weight: 700;
    color: #26332b;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gen-token-steps-title {
    font-size: 13px;
    font-weight: 700;
    color: #37453d;
    margin: 0 0 6px;
}
.gen-token-step-list {
    /* SLDS resets ol/ul to list-style:none by default — restore real
       numbering so "1. 2. 3. 4." actually render. */
    list-style: decimal outside;
    margin: 0 0 16px;
    padding-left: 20px;
    font-size: 13px;
    color: #5f6d63;
    line-height: 1.6;
}
.gen-token-step-list li { display: list-item; }

/* Large rounded green header with a centered icon, replacing the thin
   sw-modal-accent bar + plain title for this specific modal only. */
.gen-token-header {
    position: relative;
    height: 104px;
    background: linear-gradient(115deg,#84c25c 0%,#5fa832 55%,#3f9a86 100%);
    border-radius: 20px 20px 0 0;
}
.gen-token-header-icon {
    position: absolute;
    left: 50%;
    bottom: -40px;
    transform: translateX(-50%);
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: #fff;
    color: #5fa832;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 12px 26px -8px rgba(23,43,32,.35), 0 0 0 6px rgba(255,255,255,.6);
}
/* Room for the icon circle hanging below the header edge, on this modal only. */
.gen-modal .sw-modal-body { padding-top: 52px; }
/* Title now sits in the fixed header above; the scrollable body itself no
   longer needs the extra top padding reserved for the icon circle when the
   fixed title block is already providing that space. */
.gen-modal .gen-token-scroll-body { padding-top: 18px; }

.gen-token-header-logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

/* Highlighted checklist box, replacing the plain "Before clicking..."
   paragraph + list. */
.gen-token-checklist-box {
    background: linear-gradient(120deg,#f4faee 0%,#eaf3fb 100%);
    border: 1px solid #e0e9df;
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 16px;
    box-shadow: 0 6px 18px -12px rgba(23,43,32,.22);
}
.gen-token-checklist-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #37453d;
    margin-bottom: 8px;
}
.gen-token-check-badge {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: #5fa832;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.gen-token-checklist-box .gen-token-step-list {
    margin-bottom: 12px;
}
.gen-token-step-list b { color: #37453d; }

.gen-token-guide-row {
    display: flex;
    gap: 8px;
    font-size: 12.5px;
    color: #5f6d63;
    line-height: 1.5;
    border-top: 1px solid #dbe6d8;
    padding-top: 12px;
}
.gen-token-guide-row svg { flex-shrink: 0; margin-top: 1px; }
.gen-token-guide-link {
    font-weight: 700;
    color: #5fa832;
    text-decoration: underline;
}
.gen-token-guide-link:hover {
    color: #47821f;
}

.gen-token-submit-btn {
    background: linear-gradient(120deg,#5fa832,#2f8fb0);
    box-shadow: 0 8px 22px -8px rgba(23,43,32,.45);
    transition: filter .15s, opacity .15s;
}
.gen-token-submit-btn:hover {
    filter: brightness(1.05);
}
/* Blurred/disabled until Client ID + Client Secret are both filled in. */
.gen-token-submit-btn_disabled {
    filter: blur(1.5px) grayscale(.3);
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
}
.gen-token-submit-btn_disabled:hover {
    filter: blur(1.5px) grayscale(.3);
}

.gen-token-redirect-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: linear-gradient(120deg,#f4faee 0%,#eaf3fb 100%);
    border: 1px solid #dce8e2;
    border-radius: 10px;
    padding: 12px 14px;
    box-shadow: 0 6px 18px -12px rgba(23,43,32,.22);
    cursor: pointer;
}
.gen-token-redirect-uri {
    flex: 1;
    min-width: 0;
    font-size: 12.5px;
    color: #2f6fb0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    line-height: 1.5;
    word-break: break-all;
}

.gen-token-decoy {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

/* Client ID / Client Secret are plain native inputs (not lightning-input):
   lightning-input renders in its own shadow DOM, so its background/border
   can't reliably be restyled from here — the box kept turning white on
   focus/error regardless of the styling hooks tried. A native <input>
   gives full, permanent control over the box's look in every state. */
.gen-token-input {
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    font-size: 13.5px;
    color: #26332b;
    background: linear-gradient(120deg,#f4faee 0%,#eaf3fb 100%);
    border: 1px solid #dce8e2;
    border-radius: 9px;
    padding: 11px 14px;
    margin-top: 10px;
    box-shadow: 0 6px 18px -12px rgba(23,43,32,.22);
    outline: none;
}
.gen-token-input:focus {
    border-color: #5fa832;
    background: linear-gradient(120deg,#f4faee 0%,#eaf3fb 100%);
}
.gen-token-input::placeholder { color: #93a099; }
.gen-token-input:read-only { cursor: text; }

.gen-token-generating {
    text-align: center;
    padding: 10px 0 4px;
}
.gen-token-generating-heading {
    margin: 0 0 6px;
    text-align: center;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -.02em;
    background: linear-gradient(100deg,#5fa832,#2f8fb0);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.gen-token-spinner-ring {
    width: 100px;
    height: 100px;
    margin: 24px auto 0;
    border-radius: 50%;
    border: 6px solid #eef2ec;
    border-top-color: #5fa832;
    border-right-color: #3f9a86;
    animation: sw-spin 0.9s linear infinite;
    box-shadow: 0 12px 30px -14px rgba(23,43,32,.35);
    display: flex;
    align-items: center;
    justify-content: center;
}
.gen-token-spinner-badge {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(120deg,#f4faee,#eaf3fb);
    color: #5fa832;
    display: flex;
    align-items: center;
    justify-content: center;
    /* counter-rotate so the icon stays upright while the ring spins */
    animation: sw-spin 0.9s linear infinite reverse;
}
.gen-token-generating-title {
    font-size: 16px;
    font-weight: 800;
    color: #1c2b23;
    margin: 20px 0 6px;
}
.gen-token-generating-sub {
    font-size: 12.5px;
    color: #6b786f;
    max-width: 320px;
    margin: 0 auto 14px;
}
.gen-token-wait-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(120deg,#f4faee 0%,#eaf3fb 100%);
    border: 1px solid #dce8e2;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 12.5px;
    font-weight: 700;
    color: #4f8a24;
    box-shadow: 0 6px 18px -12px rgba(23,43,32,.22);
}
.gen-token-wait-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #5fa832;
    animation: sw-pulse 1.1s ease-in-out infinite;
    flex-shrink: 0;
}
.gen-token-cancel-row {
    display: flex;
    justify-content: center;
    margin-top: 14px;
}

@media (max-width: 1080px) {
    .sw-panels { grid-template-columns: 1fr; }
    .field-row { grid-template-columns: 1fr; }
    .field-label { margin-bottom: 2px; }
}

@media (max-width: 560px) {
    .sw-hero { flex-direction: column; align-items: stretch; }
    .hero-side_right { justify-content: flex-start; }
    .hero-text_right { text-align: left; }
}
@media (max-width: 1300px){
    .sw-panels {
        display:flex;
        flex-direction: column;
    }
    .sw-header-right{
        display: flex;
        flex-direction: column;
        gap: 14px;
        margin-top: 60px;;
    }
}/* ============================================================
   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; }