/* Webino UI System v12 — additive, backward compatible */
:where(.webino-ui-v12) {
    --webino-control-min: max(44px, var(--webino-touch-target, 44px));
    --webino-ease-standard: cubic-bezier(.2,.8,.2,1);
    --webino-ease-emphasized: cubic-bezier(.16,1,.3,1);
}

.webino-ui-live {
    position: fixed !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.webino-ui-toasts {
    position: fixed;
    z-index: 1000005;
    inset-inline-end: max(18px, env(safe-area-inset-right));
    inset-block-end: max(18px, env(safe-area-inset-bottom));
    display: grid;
    gap: 10px;
    width: min(390px, calc(100vw - 32px));
    pointer-events: none;
}
.webino-ui-toast {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb,var(--webino-neutral-900,#0f172a) 10%,transparent);
    border-radius: var(--webino-radius-md,14px);
    color: var(--webino-secondary,#111827);
    background: color-mix(in srgb,var(--webino-surface,#fff) 94%,transparent);
    box-shadow: var(--webino-shadow-lg,0 22px 54px rgba(15,23,42,.14));
    backdrop-filter: blur(16px);
    transform: translateY(14px) scale(.98);
    opacity: 0;
    pointer-events: auto;
    transition: transform var(--webino-transition-base,240ms) var(--webino-ease-emphasized),opacity var(--webino-transition-base,240ms) ease;
}
.webino-ui-toast.is-visible{transform:none;opacity:1}
.webino-ui-toast__icon{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--webino-neutral-100,#f1f5f9)}
.webino-ui-toast--success .webino-ui-toast__icon{color:var(--webino-success,#16a34a);background:color-mix(in srgb,var(--webino-success,#16a34a) 12%,transparent)}
.webino-ui-toast--error .webino-ui-toast__icon{color:var(--webino-danger,#ef4444);background:color-mix(in srgb,var(--webino-danger,#ef4444) 12%,transparent)}
.webino-ui-toast__content{min-width:0;line-height:1.75}
.webino-ui-toast__content strong{display:block}
.webino-ui-toast__action,.webino-ui-toast__close{min-width:var(--webino-control-min);min-height:var(--webino-control-min);border:0;border-radius:10px;cursor:pointer}
.webino-ui-toast__action{padding-inline:14px;color:var(--webino-primary,#5b4df7);background:color-mix(in srgb,var(--webino-primary,#5b4df7) 10%,transparent);font-weight:700}
.webino-ui-toast__close{background:transparent;color:inherit;font-size:20px}

.webino-ui-state {
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: var(--webino-space-md,16px);
    width: 100%;
    padding: clamp(18px,3vw,32px);
    border: 1px dashed var(--webino-border,#e5e7eb);
    border-radius: var(--webino-radius-lg,22px);
    color: var(--webino-secondary,#111827);
    background: var(--webino-surface-alt,#f8fafc);
}
.webino-ui-state__icon{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;font-size:26px;background:var(--webino-surface,#fff);box-shadow:var(--webino-shadow-sm,0 2px 8px rgba(15,23,42,.06))}
.webino-ui-state__body{min-width:0}
.webino-ui-state__body strong{display:block;margin-bottom:4px;font-size:1.05rem}
.webino-ui-state__body p{margin:0;color:var(--webino-muted,#6b7280);line-height:1.9}
.webino-ui-state__action{display:inline-flex;align-items:center;justify-content:center;min-height:var(--webino-control-min);padding:10px 16px;border-radius:var(--webino-radius-sm,8px);color:#fff;background:var(--webino-primary,#5b4df7);text-decoration:none;font-weight:700}
.webino-ea-empty{display:none!important}

.webino-ui-notice{padding:12px 14px;border-inline-start:4px solid;border-radius:var(--webino-radius-sm,8px);line-height:1.8}
.webino-ui-notice--info{border-color:var(--webino-info,#0ea5e9);background:color-mix(in srgb,var(--webino-info,#0ea5e9) 10%,transparent)}
.webino-ui-notice--success{border-color:var(--webino-success,#16a34a);background:color-mix(in srgb,var(--webino-success,#16a34a) 10%,transparent)}
.webino-ui-notice--warning{border-color:var(--webino-warning,#f59e0b);background:color-mix(in srgb,var(--webino-warning,#f59e0b) 10%,transparent)}
.webino-ui-notice--error{border-color:var(--webino-danger,#ef4444);background:color-mix(in srgb,var(--webino-danger,#ef4444) 10%,transparent)}

.webino-ui-skeleton{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--webino-card-gap,16px);width:100%}
.webino-ui-skeleton__item{display:grid;gap:10px;padding:16px;border-radius:var(--webino-radius-lg,22px);background:var(--webino-surface,#fff);box-shadow:var(--webino-shadow-sm,0 2px 8px rgba(15,23,42,.06))}
.webino-ui-skeleton__item>*{display:block;border-radius:8px;background:linear-gradient(100deg,var(--webino-neutral-100,#f1f5f9) 25%,var(--webino-neutral-50,#f8fafc) 42%,var(--webino-neutral-100,#f1f5f9) 58%);background-size:220% 100%;animation:webinoUiShimmer 1.25s linear infinite}
.webino-ui-skeleton__item i{height:150px}.webino-ui-skeleton__item b{height:18px}.webino-ui-skeleton__item em{height:12px;width:65%}
@keyframes webinoUiShimmer{to{background-position-x:-220%}}

/* Common focus, fields and touch target rules. */
:where(.webino-ui-v12) :where(a,button,input,select,textarea,[tabindex]):focus-visible{
    outline:var(--webino-focus-width,3px) solid color-mix(in srgb,var(--webino-focus-ring,#7c3aed) 72%,#fff 28%);
    outline-offset:3px;
}
:where(.webino-ui-v12) :where(button,[role="button"],input[type="button"],input[type="submit"],.button):not(.webino-ignore-touch-target){min-height:var(--webino-control-min)}
:where(.webino-ui-v12) :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea){min-height:var(--webino-input-height,44px)}
:where(.webino-ui-v12) [aria-disabled="true"],:where(.webino-ui-v12) :disabled{cursor:not-allowed!important;color:var(--webino-disabled-text,#9ca3af)!important;background-color:var(--webino-disabled-bg,#e5e7eb)!important;opacity:.78}

/* Dark mode uses tokens only; widget-local explicit controls still win. */
.webino-color-scheme-dark{--webino-surface:var(--webino-dark-surface,#111827);--webino-surface-alt:var(--webino-dark-surface-alt,#1f2937);--webino-secondary:var(--webino-dark-text,#f9fafb);--webino-muted:var(--webino-dark-muted,#9ca3af);--webino-border:var(--webino-dark-border,#374151)}
@media (prefers-color-scheme:dark){.webino-color-scheme-auto{--webino-surface:var(--webino-dark-surface,#111827);--webino-surface-alt:var(--webino-dark-surface-alt,#1f2937);--webino-secondary:var(--webino-dark-text,#f9fafb);--webino-muted:var(--webino-dark-muted,#9ca3af);--webino-border:var(--webino-dark-border,#374151)}}

/* Prevent layout blowouts in Elementor containers and RTL stores. */
:where([class*="elementor-widget-webino-"]) :where(*,::before,::after){box-sizing:border-box}
:where([class*="elementor-widget-webino-"]) :where(.elementor-widget-container,[class^="webino-"],[class*=" webino-"]){min-width:0;max-width:100%}
[dir="rtl"] .webino-ui-toasts{inset-inline-end:max(18px,env(safe-area-inset-right));inset-inline-start:auto}

@media(max-width:767px){
    .webino-ui-toasts{inset-inline:16px;width:auto;inset-block-end:max(16px,env(safe-area-inset-bottom))}
    .webino-ui-toast{grid-template-columns:auto minmax(0,1fr)}
    .webino-ui-toast__action{grid-column:1/-1;width:100%}
    .webino-ui-state{grid-template-columns:1fr;text-align:center}
    .webino-ui-state__icon,.webino-ui-state__action{margin-inline:auto}
    .webino-ui-skeleton{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
    :where(.webino-ui-v12) *, :where(.webino-ui-v12) *::before, :where(.webino-ui-v12) *::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}
.webino-motion-none *, .webino-motion-none *::before, .webino-motion-none *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
